@sumaris-net/ngx-components 18.3.29 → 18.3.30-alpha1

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, numberAttribute, booleanAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER, ChangeDetectorRef } from '@angular/core';
-import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$a, Observable, forkJoin, defer, timeout, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, fromEventPattern, interval, combineLatest, EMPTY, switchMap as switchMap$1 } from 'rxjs';
+import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, numberAttribute, booleanAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, CUSTOM_ELEMENTS_SCHEMA, Self, ViewEncapsulation, APP_INITIALIZER, ChangeDetectorRef, viewChild, signal, input, model, computed, effect, untracked } from '@angular/core';
+import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$9, Observable, forkJoin, defer, timeout, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, fromEventPattern, interval, combineLatest, EMPTY, switchMap as switchMap$1 } from 'rxjs';
 import { catchError, map, filter, takeUntil, first, switchMap, tap as tap$1, throttleTime, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, bufferWhen, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as i3 from '@angular/common';
-import { CommonModule, DOCUMENT, Location } from '@angular/common';
+import { CommonModule, DOCUMENT, Location, AsyncPipe, JsonPipe } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
 import * as i1$4 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
 import { OverlayModule, OverlayContainer, FullscreenOverlayContainer, Overlay } from '@angular/cdk/overlay';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/material/core';
@@ -34,12 +34,12 @@ import * as i1 from '@angular/material-moment-adapter';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { isMoment as isMoment$1 } from 'moment/moment';
 import * as i1$3 from '@angular/forms';
-import { AbstractControl, UntypedFormArray, UntypedFormGroup, UntypedFormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
-import { maskitoWithPlaceholder, maskitoEventHandler, maskitoNumberOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
+import { AbstractControl, UntypedFormArray, UntypedFormGroup, UntypedFormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormBuilder, FormControl, FormGroup, FormsModule, NgControl } from '@angular/forms';
+import { maskitoWithPlaceholder, maskitoEventHandler, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator, maskitoNumberOptionsGenerator } from '@maskito/kit';
 import * as i1$2 from '@angular/platform-browser';
 import { HammerGestureConfig, HammerModule } from '@angular/platform-browser';
 import * as i6 from '@angular/material/form-field';
-import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS, MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i11 from '@maskito/angular';
@@ -63,7 +63,7 @@ import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i8$2 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i12 from '@angular/material/select';
-import { MatSelectModule, MatSelect, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
+import { MatSelectModule, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
 import { MatCardModule } from '@angular/material/card';
 import * as i7 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -100,6 +100,7 @@ import * as LocalForage from 'localforage';
 import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
 import * as i2$2 from '@ionic/storage-angular';
 import { IonicStorageModule } from '@ionic/storage-angular';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i5$3 from 'ngx-color-picker';
 import { ColorPickerModule } from 'ngx-color-picker';
 import * as i2$3 from '@ionic-native/audio-management/ngx';
@@ -153,6 +154,7 @@ import { Geolocation } from '@capacitor/geolocation';
 import * as i1$7 from '@e-is/ngx-material-table';
 import { ValidatorService, TableDataSource, AsyncTableDataSource } from '@e-is/ngx-material-table';
 import 'moment-timezone';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const ENVIRONMENT = new InjectionToken('ENV');
 class Environment {
@@ -1575,6 +1577,9 @@ const DEFAULT_LONGITUDE_OPTIONS = {
     ...DEFAULT_OPTIONS,
     longitude: true,
 };
+function computeDecimalPart(value, nbOfDecimals) {
+    return value * 10 ** (nbOfDecimals * -1);
+}
 function formatLatLong(value, type, opts) {
     switch (type) {
         case 'latitude':
@@ -3739,6 +3744,7 @@ function disableControl(control, opts) {
 }
 function disableAndClearControl(control, opts) {
     const wasDisabled = control.disabled;
+    // Apply disable
     setControlEnabled(control, false, { required: false, ...opts });
     // Important, should not use reset() to mark the control as dirty.
     // Otherwise, optimization using dirty (.e.g MeasurementForm) will not be notified by this changed
@@ -5474,7 +5480,7 @@ const DEFAULT_VALUE_ACCESSOR$5 = {
 };
 const HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
 const DURATION_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
-const noop$9 = () => { };
+const noop$8 = () => { };
 class MatDuration {
     dateAdapter;
     translate;
@@ -5482,8 +5488,8 @@ class MatDuration {
     cd;
     formGroupDir;
     _subscription = new Subscription();
-    _onChangeCallback = noop$9;
-    _onTouchedCallback = noop$9;
+    _onChangeCallback = noop$8;
+    _onTouchedCallback = noop$8;
     writing = true;
     disabling = false;
     _tabindex;
@@ -6065,13 +6071,13 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
     useExisting: forwardRef(() => MatBooleanField),
     multi: true,
 };
-const noop$8 = () => { };
+const noop$7 = () => { };
 class MatBooleanField {
     cd;
     el;
     formGroupDir;
-    _onChangeCallback = noop$8;
-    _onTouchedCallback = noop$8;
+    _onChangeCallback = noop$7;
+    _onTouchedCallback = noop$7;
     _subscription = new Subscription();
     _writing = false;
     _value;
@@ -7684,7 +7690,7 @@ class MatAutocompleteFieldUtils {
     }
 }
 
-const noop$7 = () => { };
+const noop$6 = () => { };
 class MatAutocompleteField {
     injector;
     el;
@@ -7692,8 +7698,8 @@ class MatAutocompleteField {
     modalController;
     renderer;
     formGroupDir;
-    _onChangeCallback = noop$7;
-    _onTouchedCallback = noop$7;
+    _onChangeCallback = noop$6;
+    _onTouchedCallback = noop$6;
     _onFetchMoreCallback;
     _implicitValue;
     _subscription = new Subscription();
@@ -8942,630 +8948,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
 const MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING = 'fixed';
 const MAT_FORM_FIELD_DEFAULT_APPEARANCE = 'fill';
 
-const noop$6 = () => { };
-class MatLatLongField {
-    cd;
-    formGroupDir;
-    _onChangeCallback = noop$6;
-    _onTouchedCallback = noop$6;
-    _subscription = new Subscription();
-    _disabling = false;
-    _writing = false;
-    _appearance = null;
-    _subscriptSizing = null;
-    _readonly = false;
-    _tabindex;
-    _defaultAppearance;
-    _defaultSubscriptSizing;
-    _focused = false;
-    _touched = false;
-    degreesControl;
-    minutesControl;
-    secondsControl;
-    signControl;
-    showMinutes = false;
-    showSeconds = false;
-    showSignControl;
-    degreesPlaceholder;
-    minutesPlaceholder;
-    secondsPlaceholder;
-    degreesMask;
-    minutesMask;
-    secondsMask;
-    patternMaxDecimals = LAT_LONG_PATTERN_MAX_DECIMALS;
-    i18nErrorKeys = SharedValidators.I18N_ERROR_KEYS;
-    formControl;
-    formControlName;
-    type;
-    pattern;
-    maxDecimals = LAT_LONG_VALUE_MAX_DECIMALS;
-    required = false;
-    floatLabel = 'auto';
-    placeholder;
-    defaultSign;
-    autofocus = false;
-    mobile;
-    degreesSymbolUnit = '°';
-    minutesSymbolUnit = "'";
-    secondsSymbolUnit = '"';
-    clearable = false;
-    classList;
-    set tabindex(value) {
-        if (this._tabindex !== value) {
-            this._tabindex = value;
-            setTimeout(() => this.updateTabIndex());
-        }
-    }
-    get tabindex() {
-        return this._tabindex;
-    }
-    set appearance(value) {
-        this._appearance = value;
-    }
-    get appearance() {
-        return this._appearance || this._defaultAppearance;
-    }
-    set readonly(value) {
-        this._readonly = value;
-        this.markForCheck();
-    }
-    get readonly() {
-        return this._readonly;
-    }
-    set subscriptSizing(value) {
-        this._subscriptSizing = value;
-    }
-    get subscriptSizing() {
-        return this._subscriptSizing || this._defaultSubscriptSizing;
-    }
-    get showFields() {
-        return isNotNilOrNaN(this.formControl.value) || this._focused;
-    }
-    get disabled() {
-        return this.readonly || this.formControl.disabled;
-    }
-    // eslint-disable-next-line @angular-eslint/no-output-on-prefix,@angular-eslint/no-output-rename
-    keyupEnter = new EventEmitter();
-    // eslint-disable-next-line @angular-eslint/no-output-rename
-    blurred = new EventEmitter();
-    // eslint-disable-next-line @angular-eslint/no-output-rename
-    focused = new EventEmitter();
-    formField;
-    fakeInput;
-    inputDegrees;
-    inputMinutes;
-    inputSeconds;
-    inputSign;
-    inputSignSelect;
-    constructor(cd, formGroupDir, defaultOptions) {
-        this.cd = cd;
-        this.formGroupDir = formGroupDir;
-        this._defaultSubscriptSizing = defaultOptions?.subscriptSizing || MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING;
-        this._defaultAppearance = defaultOptions?.appearance || MAT_FORM_FIELD_DEFAULT_APPEARANCE;
-    }
-    ngOnInit() {
-        this.mobile = this.mobile ?? isMobile(window);
-        this.type = this.type || 'latitude';
-        this.pattern = this.pattern || 'DDMM';
-        this.showSignControl = this.pattern !== 'DD';
-        switch (this.pattern) {
-            case 'DD':
-                this.patternMaxDecimals = 7;
-                this.degreesPlaceholder =
-                    this.type === 'latitude' ? 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DD_PLACEHOLDER' : 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DDD_PLACEHOLDER';
-                this.degreesMask = maskitoNumberOptionsGenerator({
-                    precision: this.patternMaxDecimals,
-                    min: this.type === 'latitude' ? -90 : -180,
-                    max: this.type === 'latitude' ? 90 : 180,
-                    minusSign: '-',
-                });
-                break;
-            case 'DDMM':
-                this.patternMaxDecimals = 3;
-                this.showMinutes = true;
-                this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DD' : 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DDD';
-                this.minutesPlaceholder = 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.MM';
-                this.degreesMask = maskitoNumberOptionsGenerator({
-                    precision: 0,
-                    min: 0,
-                    max: this.type === 'latitude' ? 90 : 180,
-                });
-                this.minutesMask = maskitoNumberOptionsGenerator({
-                    precision: this.patternMaxDecimals,
-                    min: 0,
-                    max: 60 - this.computeDecimalPart(1, this.patternMaxDecimals),
-                });
-                break;
-            default: // Default is DDMMSS
-                this.patternMaxDecimals = 2;
-                this.showMinutes = true;
-                this.showSeconds = true;
-                this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DD' : 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DDD';
-                this.minutesPlaceholder = 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.MM';
-                this.secondsPlaceholder = 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.SS_SS';
-                this.degreesMask = maskitoNumberOptionsGenerator({
-                    precision: 0,
-                    min: 0,
-                    max: this.type === 'latitude' ? 90 : 180,
-                });
-                this.minutesMask = maskitoNumberOptionsGenerator({
-                    precision: 0,
-                    min: 0,
-                    max: 59,
-                });
-                this.secondsMask = maskitoNumberOptionsGenerator({
-                    precision: this.patternMaxDecimals,
-                    min: 0,
-                    max: 60 - this.computeDecimalPart(1, this.patternMaxDecimals),
-                });
-                break;
-        }
-        this.formControl =
-            this.formControl || (this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName));
-        if (!this.formControl)
-            throw new Error("Missing mandatory attribute 'formControl' or 'formControlName' in <mat-latlong-field>.");
-        this.degreesControl = new FormControl(null);
-        this.minutesControl = new FormControl(null);
-        this.secondsControl = new FormControl(null);
-        this.signControl = new FormControl(null);
-        this._subscription.add(merge(this.degreesControl.valueChanges, this.minutesControl.valueChanges, this.secondsControl.valueChanges, this.signControl.valueChanges).subscribe(() => this.onFormChange()));
-        // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
-        this._subscription.add(this.formControl.statusChanges
-            .pipe(filter(() => !this.readonly && !this._writing && !this._disabling) // Skip
-        )
-            .subscribe(() => this.markForCheck()));
-    }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
-    }
-    registerOnChange(fn) {
-        this._onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
-    }
-    writeValue(value) {
-        if (this._writing)
-            return;
-        this._writing = true;
-        if (value !== this.formControl.value) {
-            this.formControl.patchValue(value, { emitEvent: false });
-            this._onChangeCallback(value);
-        }
-        const result = this.computeLatLongFormGroupValue(value);
-        // DEBUG
-        // console.debug('[mat-latlong-field] Changing value of inputs:', value, result);
-        this.patchValue(result, { emitEvent: false });
-        this._writing = false;
-        this.markForCheck();
-        setTimeout(() => {
-            this.updateFakeInput();
-            this.updateTabIndex();
-        });
-    }
-    setDisabledState(isDisabled) {
-        if (this._disabling)
-            return;
-        this._disabling = true;
-        if (isDisabled) {
-            this.degreesControl.disable();
-            this.minutesControl.disable();
-            this.secondsControl.disable();
-            this.signControl.disable();
-        }
-        else {
-            this.degreesControl.enable();
-            this.minutesControl.enable();
-            this.secondsControl.enable();
-            this.signControl.enable();
-        }
-        this._disabling = false;
-        this.markForCheck();
-    }
-    clearValue(event) {
-        event?.stopPropagation();
-        this.writeValue(null);
-    }
-    get internalElements() {
-        return (this.inputDegrees ? [this.inputDegrees.nativeElement] : [])
-            .concat(this.inputMinutes ? [this.inputMinutes.nativeElement] : [])
-            .concat(this.inputSeconds ? [this.inputSeconds.nativeElement] : [])
-            .concat(this.inputSign ? [this.inputSign.nativeElement] : [])
-            .concat(this.fakeInput ? [this.fakeInput.nativeElement] : []);
-    }
-    onFocusFakeInput(event) {
-        if (!this.showFields) {
-            event.preventDefault();
-            // Hide the fake input
-            this.fakeInput?.nativeElement.classList.add('cdk-visually-hidden');
-        }
-        this._touched = this.formControl.touched;
-        // Focus on first input
-        this.focus();
-    }
-    onBlurFakeInput(event) {
-        const internalEvent = this.internalElements.some((el) => el === event.relatedTarget);
-        if (internalEvent && !this._touched) {
-            // Workaround to remove touched on the fakeInput
-            this.formControl.markAsUntouched();
-        }
-    }
-    _onFocusInput(event) {
-        const internalEvent = this.internalElements.some((el) => el === event.target);
-        if (internalEvent) {
-            if (event.target === this.inputSign?.nativeElement) {
-                this.inputSignSelect?.open();
-            }
-            else {
-                selectInputContent(event.target);
-            }
-        }
-        this.focus(event.target);
-    }
-    _onBlurInput(event) {
-        const internalEvent = this.internalElements.some((el) => el === event.relatedTarget);
-        if (!internalEvent) {
-            this._focused = false;
-            if (this.appearance == 'fill') {
-                this.formField._lineRipple.deactivate();
-            }
-            this.blurred.emit(event);
-            this.updateFakeInput();
-            this.updateTabIndex();
-            this._touched = true;
-            this.formControl.markAsTouched();
-            this._checkIfTouched();
-        }
-    }
-    _onClickInput(event) {
-        const internalEvent = this.internalElements.some((el) => el === event.target);
-        if (internalEvent) {
-            selectInputContent(event.target);
-        }
-        // Avoid mat-form-field to give focus to fake input
-        event.stopPropagation();
-    }
-    focus(target) {
-        if (this._focused)
-            return true; // Already focused
-        const showFields = this.showFields;
-        this._focused = true;
-        this.markForCheck();
-        setTimeout(() => {
-            if (!this._focused)
-                return; // Focus was lost: skip
-            if (!showFields) {
-                this.inputDegrees.nativeElement.focus();
-                selectInputContent(this.inputDegrees.nativeElement);
-            }
-            else if (target) {
-                target.focus();
-                selectInputContent(target);
-            }
-            if (this.appearance == 'fill') {
-                this.formField._lineRipple.activate();
-            }
-            this.updateFakeInput();
-            this.updateTabIndex();
-        }, 50);
-    }
-    format(rawValue) {
-        const values = this.computeLatLongFormGroupValue(rawValue);
-        if (values.degrees === null)
-            return '';
-        let result = `${values.degrees}° `;
-        if (values.minutes !== null)
-            result += `${values.minutes}' `;
-        if (values.seconds !== null)
-            result += `${values.seconds}" `;
-        if (this.type === 'latitude') {
-            result += values.sign === 1 ? 'N' : 'S';
-        }
-        else {
-            result += values.sign === 1 ? 'E' : 'W';
-        }
-        return result;
-    }
-    computeDecimalPart(value, nbOfDecimals) {
-        return value * 10 ** (nbOfDecimals * -1);
-    }
-    computeLatLongFormGroupValue(rawValue) {
-        const isLongitude = this.type === 'longitude';
-        const value = typeof rawValue === 'string' ? parseFloat(rawValue.replace(/,/g, '.')) : rawValue;
-        const result = {
-            degrees: null,
-            minutes: null,
-            seconds: null,
-            sign: isNotNil(value)
-                ? value < 0
-                    ? -1
-                    : 1
-                : // Use default sign, if any
-                    this.defaultSign && this.defaultSign === '-'
-                        ? -1
-                        : 1,
-        };
-        if (value === 0) {
-            result.degrees = 0;
-        }
-        else if (isNotNil(value)) {
-            if (this.pattern === 'DD') {
-                const splitValue = splitNumberToFieldsDD(value, {
-                    longitude: isLongitude,
-                    pattern: this.pattern,
-                    maxDecimals: this.patternMaxDecimals,
-                    fixLatLong: true,
-                }).slice(1); // remove sign;
-                result.degrees = (splitValue[0] + this.computeDecimalPart(splitValue[1] ?? 0, this.patternMaxDecimals)) * (result.sign || 1) || null;
-            }
-            else if (this.pattern === 'DDMM') {
-                const splitValue = splitNumberToFieldsDDMM(value, {
-                    longitude: isLongitude,
-                    pattern: this.pattern,
-                    maxDecimals: this.patternMaxDecimals,
-                    fixLatLong: true,
-                });
-                result['minutes'] = Math.abs((splitValue[1] ?? 0) + this.computeDecimalPart(splitValue[2] ?? 0, this.patternMaxDecimals)) || null;
-                result['degrees'] = Math.abs(!result['minutes'] && isNilOrBlank(splitValue[0]) ? null : (splitValue[0] ?? 0));
-            }
-            else {
-                // Default // DDMMSS
-                const splitValue = splitNumberToFieldsDDMMSS(value, {
-                    longitude: isLongitude,
-                    pattern: this.pattern,
-                    maxDecimals: this.patternMaxDecimals,
-                    fixLatLong: true,
-                });
-                result['seconds'] = Math.abs((splitValue[2] ?? 0) + this.computeDecimalPart(splitValue[3] ?? 0, this.patternMaxDecimals)) || null;
-                result['minutes'] = !result['seconds'] && !splitValue[1] ? null : Math.abs(splitValue[1] ?? 0);
-                result['degrees'] = !result['seconds'] && !result['minutes'] && isNilOrBlank(splitValue[0]) ? null : Math.abs(splitValue[0] ?? 0);
-            }
-        }
-        return result;
-    }
-    markAsTouched() {
-        this.formControl.markAsTouched();
-        this.degreesControl.markAsTouched();
-        this.minutesControl.markAsTouched();
-        this.secondsControl.markAsTouched();
-        this.signControl.markAsTouched();
-        this._onTouchedCallback();
-    }
-    /* -- private method -- */
-    patchValue(values, opts) {
-        this.degreesControl.patchValue(values.degrees?.toString(), opts);
-        this.minutesControl.patchValue(values.minutes?.toString(), opts);
-        this.secondsControl.patchValue(values.seconds?.toString(), opts);
-        this.signControl.patchValue(values.sign, opts);
-    }
-    onFormChange() {
-        if (this._writing)
-            return; // Skip if call by self
-        this._writing = true;
-        const degrees = isNotNilOrBlank(this.degreesControl.value) ? parseFloat(this.degreesControl.value) : undefined;
-        const minutes = isNotNilOrBlank(this.minutesControl.value) ? parseFloat(this.minutesControl.value) : undefined;
-        const seconds = isNotNilOrBlank(this.secondsControl.value) ? parseFloat(this.secondsControl.value) : undefined;
-        const sign = this.signControl.value;
-        const incompleteValue = isNil(degrees) && (isNotNil(minutes) || isNotNil(seconds));
-        const invalid = incompleteValue || this.degreesControl.invalid || this.minutesControl.invalid || this.secondsControl.invalid || this.signControl.invalid;
-        if (invalid) {
-            this.formControl.markAsPending({ onlySelf: true });
-            this.formControl.setErrors({
-                invalid: incompleteValue,
-                ...this.degreesControl.errors,
-                ...this.minutesControl.errors,
-                ...this.secondsControl.errors,
-                ...this.signControl.errors,
-            });
-            if (this.degreesControl.dirty || this.minutesControl.dirty || this.secondsControl.dirty || this.signControl.dirty) {
-                this.formControl.markAsDirty();
-            }
-            this._writing = false;
-            return;
-        }
-        // Compute decimal values
-        const value = isNil(degrees) || this.pattern === 'DD' ? degrees : computeDecimalDegrees(degrees, minutes, seconds, sign, this.maxDecimals);
-        // Set model value
-        this.emitChange(value);
-        this._writing = false;
-        this.markForCheck();
-    }
-    emitChange(value) {
-        if (this.formControl.value !== value) {
-            this.formControl.setValue(value, { emitEvent: false });
-            // Changes comes from inside function: use the callback
-            this._onChangeCallback(value);
-            // Check if need to update controls
-            this._checkIfTouched();
-        }
-    }
-    _checkIfTouched() {
-        if (this.formControl.touched) {
-            this._onTouchedCallback();
-            this.markForCheck();
-            this._touched = true;
-        }
-        else {
-            this._touched = false;
-        }
-    }
-    markForCheck() {
-        this.cd.markForCheck();
-    }
-    /**
-     * Show/Hide the fake input
-     */
-    updateFakeInput() {
-        if (this.showFields) {
-            this.fakeInput?.nativeElement.classList.add('cdk-visually-hidden');
-        }
-        else {
-            this.fakeInput?.nativeElement.classList.remove('cdk-visually-hidden');
-        }
-        // TODO: check if need
-        this.markForCheck();
-    }
-    /**
-     * This is a special case, because, this component has a temporary component displayed before the first focus event
-     */
-    updateTabIndex() {
-        if (isNil(this._tabindex))
-            return;
-        if (this.fakeInput) {
-            this.fakeInput.nativeElement.tabIndex = this._tabindex;
-        }
-        this.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatLatLongField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MatLatLongField, selector: "mat-latlong-field", inputs: { formControl: "formControl", formControlName: "formControlName", type: "type", pattern: ["latLongPattern", "pattern"], maxDecimals: "maxDecimals", required: "required", floatLabel: "floatLabel", placeholder: "placeholder", defaultSign: "defaultSign", autofocus: "autofocus", mobile: ["mobile", "mobile", booleanAttribute], degreesSymbolUnit: "degreesSymbolUnit", minutesSymbolUnit: "minutesSymbolUnit", secondsSymbolUnit: "secondsSymbolUnit", clearable: ["clearable", "clearable", booleanAttribute], classList: ["class", "classList"], tabindex: ["tabindex", "tabindex", numberAttribute], appearance: "appearance", readonly: "readonly", subscriptSizing: "subscriptSizing" }, outputs: { keyupEnter: "keyup.enter", blurred: "blur", focused: "focus" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useExisting: forwardRef(() => MatLatLongField),
-            },
-        ], viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true }, { propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "inputDegrees", first: true, predicate: ["inputDegrees"], descendants: true }, { propertyName: "inputMinutes", first: true, predicate: ["inputMinutes"], descendants: true }, { propertyName: "inputSeconds", first: true, predicate: ["inputSeconds"], descendants: true }, { propertyName: "inputSign", first: true, predicate: ["inputSign"], descendants: true, read: ElementRef }, { propertyName: "inputSignSelect", first: true, predicate: ["inputSign"], descendants: true, read: MatSelect }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{\n        formControl.value\n          | latLongFormat: { pattern: pattern, maxDecimals: patternMaxDecimals, type: type, placeholderChar: '' }\n      }}\n    </ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    #formField\n    [floatLabel]=\"showFields && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"'dynamic'\"\n    [class.mdc-text-field--invalid]=\"formControl.touched && (signControl.invalid || formControl.invalid)\"\n    class=\"mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #fakeInput\n      type=\"text\"\n      readonly=\"true\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [appAutofocus]=\"!showFields && autofocus\"\n      [class.cdk-visually-hidden]=\"showFields\"\n      (focus)=\"onFocusFakeInput($event)\"\n      (blur)=\"onBlurFakeInput($event)\"\n    />\n    <input\n      matInput\n      #inputDegrees\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.cdk-visually-hidden]=\"!showFields\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      [formControl]=\"degreesControl\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      [appAutofocus]=\"showFields && autofocus\"\n      [maskito]=\"degreesMask\"\n      (focus)=\"_onFocusInput($event)\"\n      (blur)=\"_onBlurInput($event)\"\n      (click)=\"_onClickInput($event)\"\n    />\n    <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        matInput\n        #inputMinutes\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        [class.cdk-visually-hidden]=\"!showFields\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        [formControl]=\"minutesControl\"\n        [required]=\"false\"\n        [tabindex]=\"tabindex\"\n        [maskito]=\"minutesMask\"\n        (focus)=\"_onFocusInput($event)\"\n        (blur)=\"_onBlurInput($event)\"\n        (click)=\"_onClickInput($event)\"\n      />\n      <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        matInput\n        #inputSeconds\n        class=\"seconds\"\n        [class.cdk-visually-hidden]=\"!showFields\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        [formControl]=\"secondsControl\"\n        [required]=\"false\"\n        [tabindex]=\"tabindex\"\n        [maskito]=\"secondsMask\"\n        (focus)=\"_onFocusInput($event)\"\n        (blur)=\"_onBlurInput($event)\"\n        (click)=\"_onClickInput($event)\"\n      />\n      <span [class.cdk-visually-hidden]=\"!showFields\" class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSignControl) {\n      <span class=\"flex-spacer\"></span>\n      <mat-select\n        #inputSign\n        [formControl]=\"signControl\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        [tabindex]=\"tabindex\"\n        (focus)=\"_onFocusInput($event)\"\n        (blur)=\"_onBlurInput($event)\"\n        (click)=\"_onClickInput($event)\"\n        class=\"sign\"\n      >\n        <mat-option [value]=\"1\" (click)=\"inputSign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"inputSign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n      </mat-select>\n    }\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          <mat-error>\n            {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}\n          </mat-error>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </div>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  @if (clearable && !readonly) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"formControl.value | isNil\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0;--mdc-filled-text-field-input-text-placeholder-color: var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color));--mdc-outlined-text-field-input-text-placeholder-color: var(--mdc-outlined-text-field-input-text-placeholder-color, var(--app-form-field-label-color))}input{text-align:right}input::placeholder{letter-spacing:-.05em}input.degrees{width:2em}input.minutes{width:1.7em}input.minutes-seconds{width:3.55em}input.seconds{width:3em}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mat-latlong-field-latitude input.degrees{width:1.3em!important}.symbol-unit{max-height:24px;display:inline-block;text-align:center;font-weight:700;font-size:1.3em}.mat-form-field-appearance-fill .symbol-unit{color:var(--mdc-filled-text-field-input-text-placeholder-color)!important}.mat-form-field-appearance-outline .symbol-unit{color:var(--mdc-outlined-text-field-input-text-placeholder-color)!important}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.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: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatLatLongField, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-latlong-field', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: forwardRef(() => MatLatLongField),
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{\n        formControl.value\n          | latLongFormat: { pattern: pattern, maxDecimals: patternMaxDecimals, type: type, placeholderChar: '' }\n      }}\n    </ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    #formField\n    [floatLabel]=\"showFields && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"'dynamic'\"\n    [class.mdc-text-field--invalid]=\"formControl.touched && (signControl.invalid || formControl.invalid)\"\n    class=\"mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #fakeInput\n      type=\"text\"\n      readonly=\"true\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [appAutofocus]=\"!showFields && autofocus\"\n      [class.cdk-visually-hidden]=\"showFields\"\n      (focus)=\"onFocusFakeInput($event)\"\n      (blur)=\"onBlurFakeInput($event)\"\n    />\n    <input\n      matInput\n      #inputDegrees\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.cdk-visually-hidden]=\"!showFields\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      [formControl]=\"degreesControl\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      [appAutofocus]=\"showFields && autofocus\"\n      [maskito]=\"degreesMask\"\n      (focus)=\"_onFocusInput($event)\"\n      (blur)=\"_onBlurInput($event)\"\n      (click)=\"_onClickInput($event)\"\n    />\n    <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        matInput\n        #inputMinutes\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        [class.cdk-visually-hidden]=\"!showFields\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        [formControl]=\"minutesControl\"\n        [required]=\"false\"\n        [tabindex]=\"tabindex\"\n        [maskito]=\"minutesMask\"\n        (focus)=\"_onFocusInput($event)\"\n        (blur)=\"_onBlurInput($event)\"\n        (click)=\"_onClickInput($event)\"\n      />\n      <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        matInput\n        #inputSeconds\n        class=\"seconds\"\n        [class.cdk-visually-hidden]=\"!showFields\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        [formControl]=\"secondsControl\"\n        [required]=\"false\"\n        [tabindex]=\"tabindex\"\n        [maskito]=\"secondsMask\"\n        (focus)=\"_onFocusInput($event)\"\n        (blur)=\"_onBlurInput($event)\"\n        (click)=\"_onClickInput($event)\"\n      />\n      <span [class.cdk-visually-hidden]=\"!showFields\" class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSignControl) {\n      <span class=\"flex-spacer\"></span>\n      <mat-select\n        #inputSign\n        [formControl]=\"signControl\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        [tabindex]=\"tabindex\"\n        (focus)=\"_onFocusInput($event)\"\n        (blur)=\"_onBlurInput($event)\"\n        (click)=\"_onClickInput($event)\"\n        class=\"sign\"\n      >\n        <mat-option [value]=\"1\" (click)=\"inputSign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"inputSign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n      </mat-select>\n    }\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          <mat-error>\n            {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}\n          </mat-error>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </div>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  @if (clearable && !readonly) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"formControl.value | isNil\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0;--mdc-filled-text-field-input-text-placeholder-color: var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color));--mdc-outlined-text-field-input-text-placeholder-color: var(--mdc-outlined-text-field-input-text-placeholder-color, var(--app-form-field-label-color))}input{text-align:right}input::placeholder{letter-spacing:-.05em}input.degrees{width:2em}input.minutes{width:1.7em}input.minutes-seconds{width:3.55em}input.seconds{width:3em}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mat-latlong-field-latitude input.degrees{width:1.3em!important}.symbol-unit{max-height:24px;display:inline-block;text-align:center;font-weight:700;font-size:1.3em}.mat-form-field-appearance-fill .symbol-unit{color:var(--mdc-filled-text-field-input-text-placeholder-color)!important}.mat-form-field-appearance-outline .symbol-unit{color:var(--mdc-outlined-text-field-input-text-placeholder-color)!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
-                }] }], propDecorators: { formControl: [{
-                type: Input
-            }], formControlName: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], pattern: [{
-                type: Input,
-                args: ['latLongPattern']
-            }], maxDecimals: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], floatLabel: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], defaultSign: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }], mobile: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], degreesSymbolUnit: [{
-                type: Input
-            }], minutesSymbolUnit: [{
-                type: Input
-            }], secondsSymbolUnit: [{
-                type: Input
-            }], clearable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], classList: [{
-                type: Input,
-                args: ['class']
-            }], tabindex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], appearance: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], subscriptSizing: [{
-                type: Input
-            }], keyupEnter: [{
-                type: Output,
-                args: ['keyup.enter']
-            }], blurred: [{
-                type: Output,
-                args: ['blur']
-            }], focused: [{
-                type: Output,
-                args: ['focus']
-            }], formField: [{
-                type: ViewChild,
-                args: ['formField']
-            }], fakeInput: [{
-                type: ViewChild,
-                args: ['fakeInput']
-            }], inputDegrees: [{
-                type: ViewChild,
-                args: ['inputDegrees']
-            }], inputMinutes: [{
-                type: ViewChild,
-                args: ['inputMinutes']
-            }], inputSeconds: [{
-                type: ViewChild,
-                args: ['inputSeconds']
-            }], inputSign: [{
-                type: ViewChild,
-                args: ['inputSign', { read: ElementRef }]
-            }], inputSignSelect: [{
-                type: ViewChild,
-                args: ['inputSign', { read: MatSelect }]
-            }] } });
-
-class SharedMatLatLongModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, declarations: [MatLatLongField], imports: [CommonModule,
-            IonicModule,
-            ReactiveFormsModule,
-            SharedDirectivesModule,
-            SharedPipesModule,
-            MatCommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatButtonModule,
-            MaskitoDirective,
-            MatIconModule,
-            MatSelectModule, i1$1.TranslateModule], exports: [MatLatLongField] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, imports: [CommonModule,
-            IonicModule,
-            ReactiveFormsModule,
-            SharedDirectivesModule,
-            SharedPipesModule,
-            MatCommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatButtonModule,
-            MatIconModule,
-            MatSelectModule,
-            TranslateModule.forChild()] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                        ReactiveFormsModule,
-                        SharedDirectivesModule,
-                        SharedPipesModule,
-                        MatCommonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MaskitoDirective,
-                        MatIconModule,
-                        MatSelectModule,
-                        TranslateModule.forChild(),
-                    ],
-                    exports: [MatLatLongField],
-                    declarations: [MatLatLongField],
-                }]
-        }] });
-
 const DEFAULT_VALUE_ACCESSOR$3 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatDate),
@@ -11144,8 +10526,8 @@ const DEFAULT_VALUE_ACCESSOR = {
 class MatSwipeField {
     cd;
     formGroupDir;
-    _onChangeCallback = noop$a;
-    _onTouchedCallback = noop$a;
+    _onChangeCallback = noop$9;
+    _onTouchedCallback = noop$9;
     _value;
     _subscription = new Subscription();
     _itemsSubscription;
@@ -13889,6 +13271,690 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                 }]
         }] });
 
+class MatLatLongFieldInput {
+    _elementRef;
+    _formField;
+    ngControl;
+    static nextId = 0;
+    degreesInput;
+    minutesInput;
+    secondsInput;
+    signInput;
+    parts = inject(FormBuilder).group({
+        degrees: ['', [Validators.required]],
+        minutes: [''],
+        seconds: [''],
+        sign: [null, [Validators.required]],
+    });
+    stateChanges = new Subject();
+    focused = false;
+    touched = false;
+    controlType = 'mat-latlong-input';
+    id = `mat-latlong-input-${MatLatLongFieldInput.nextId++}`;
+    onChange = (_) => { };
+    onTouched = () => { };
+    get empty() {
+        const { value: { degrees, minutes, seconds }, } = this.parts;
+        return !degrees && !minutes && !seconds;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    userAriaDescribedBy;
+    placeholder; // Not used
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    _required = false;
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        if (this._disabled) {
+            this.parts.disable();
+        }
+        else {
+            this.parts.enable();
+        }
+        this.stateChanges.next();
+    }
+    _disabled = false;
+    get value() {
+        if (this.parts.valid) {
+            const degrees = parseFloat(this.parts.value.degrees);
+            const minutes = parseFloat(this.parts.value.minutes);
+            const seconds = parseFloat(this.parts.value.seconds);
+            const sign = this.parts.value.sign;
+            return this.parts.valid
+                ? isNil(degrees) || this.pattern === 'DD'
+                    ? degrees
+                    : computeDecimalDegrees(degrees, minutes, seconds, sign, this.maxDecimals)
+                : null;
+        }
+        return null;
+    }
+    set value(value) {
+        const result = this.computeLatLongFormGroupValue(value);
+        console.debug(`${this.logPrefix} Setting value`, value, result);
+        this.parts.setValue({
+            degrees: result.degrees?.toString() || null,
+            minutes: result.minutes?.toString() || null,
+            seconds: result.seconds?.toString() || null,
+            sign: result.sign,
+        });
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.parts.invalid && this.touched;
+    }
+    type;
+    pattern;
+    degreesSymbolUnit;
+    minutesSymbolUnit;
+    secondsSymbolUnit;
+    defaultSign;
+    maxDecimals;
+    showMinutes;
+    showSeconds;
+    showSign;
+    degreesMask;
+    minutesMask;
+    secondsMask;
+    degreesPlaceholder;
+    minutesPlaceholder;
+    secondsPlaceholder;
+    lastInputMaxDecimals;
+    logPrefix = '[mat-latlong-input]';
+    constructor(_elementRef, _formField, ngControl) {
+        this._elementRef = _elementRef;
+        this._formField = _formField;
+        this.ngControl = ngControl;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        if (this.showMinutes) {
+            this.parts.controls.minutes.addValidators(Validators.required);
+        }
+        if (this.showSeconds) {
+            this.parts.controls.seconds.addValidators(Validators.required);
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    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();
+        }
+    }
+    handleInput(controlName, nextControlName) {
+        // Can autofocus next control ?
+        let focusNext = false;
+        switch (controlName) {
+            case 'degrees': {
+                const degrees = parseFloat(this.parts.value.degrees);
+                if (this.type === 'latitude' && (degrees === 0 || degrees > 9)) {
+                    focusNext = true;
+                }
+                else if (this.type === 'longitude' && (degrees === 0 || degrees > 18)) {
+                    focusNext = true;
+                }
+                break;
+            }
+            case 'minutes': {
+                const minutes = parseFloat(this.parts.value.minutes);
+                if (minutes === 0 || minutes > 6) {
+                    focusNext = true;
+                }
+                break;
+            }
+            case 'seconds': {
+                // focusNext = true;
+                break;
+            }
+        }
+        if (focusNext) {
+            this.autoFocusNext(controlName, nextControlName);
+        }
+        this.onChange(this.value);
+    }
+    autoFocusNext(controlName, nextControlName) {
+        if (!this.parts.controls[controlName].errors && nextControlName) {
+            this.getElementByName(nextControlName).focus();
+        }
+    }
+    autoFocusPrev(controlName, prevControlName) {
+        if (isNilOrBlank(this.parts.controls[controlName].value)) {
+            this.getElementByName(prevControlName).focus();
+        }
+    }
+    getElementByName(name) {
+        switch (name) {
+            case 'degrees':
+                return this.degreesInput.nativeElement;
+            case 'minutes':
+                return this.minutesInput.nativeElement;
+            case 'seconds':
+                return this.secondsInput.nativeElement;
+            case 'sign':
+                return this.signInput.nativeElement;
+            default:
+                throw new Error(`${this.logPrefix} No HTMLElement with name '${name}'`);
+        }
+    }
+    setDescribedByIds(ids) {
+        const controlElement = this._elementRef.nativeElement.querySelector('.mat-latlong-input-container');
+        controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    onContainerClick() {
+        console.debug(`${this.logPrefix} DEBUG onContainerClick`);
+        if (this.empty) {
+            this.degreesInput.nativeElement.focus();
+        }
+        else if (isNilOrBlank(this.parts.value.minutes)) {
+            this.minutesInput.nativeElement.focus();
+        }
+        else if (isNilOrBlank(this.parts.value.seconds)) {
+            this.secondsInput.nativeElement.focus();
+        }
+        else if (isNil(this.parts.value.sign)) {
+            this.signInput.nativeElement.focus();
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    computeLatLongFormGroupValue(rawValue) {
+        const isLongitude = this.type === 'longitude';
+        const value = typeof rawValue === 'string' ? parseFloat(rawValue.replace(/,/g, '.')) : rawValue;
+        const result = {
+            degrees: null,
+            minutes: null,
+            seconds: null,
+            sign: isNotNil(value)
+                ? value < 0
+                    ? -1
+                    : 1
+                : // Use default sign, if any
+                    this.defaultSign
+                        ? this.defaultSign === '-'
+                            ? -1
+                            : 1
+                        : null,
+        };
+        if (value === 0) {
+            result.degrees = 0;
+        }
+        else if (isNotNil(value)) {
+            // Parse options
+            const parseOptions = {
+                longitude: isLongitude,
+                pattern: this.pattern,
+                maxDecimals: this.lastInputMaxDecimals,
+                fixLatLong: true,
+            };
+            if (this.pattern === 'DD') {
+                const splitValue = splitNumberToFieldsDD(value, parseOptions).slice(1); // remove sign;
+                result.seconds = 0;
+                result.minutes = 0;
+                result.degrees = (splitValue[0] + computeDecimalPart(splitValue[1] ?? 0, this.lastInputMaxDecimals)) * (result.sign || 1);
+            }
+            else if (this.pattern === 'DDMM') {
+                const splitValue = splitNumberToFieldsDDMM(value, parseOptions);
+                result.seconds = 0;
+                result.minutes = Math.abs((splitValue[1] ?? 0) + computeDecimalPart(splitValue[2] ?? 0, this.lastInputMaxDecimals));
+                result.degrees = Math.abs(!result.minutes && isNilOrBlank(splitValue[0]) ? 0 : (splitValue[0] ?? 0));
+            }
+            else {
+                // Default // DDMMSS
+                const splitValue = splitNumberToFieldsDDMMSS(value, parseOptions);
+                result.seconds = Math.abs((splitValue[2] ?? 0) + computeDecimalPart(splitValue[3] ?? 0, this.lastInputMaxDecimals));
+                result.minutes = !result.seconds && !splitValue[1] ? 0 : Math.abs(splitValue[1] ?? 0);
+                result.degrees = !result.seconds && !result.minutes && isNilOrBlank(splitValue[0]) ? 0 : Math.abs(splitValue[0] ?? 0);
+            }
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatLatLongFieldInput, deps: [{ token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MatLatLongFieldInput, selector: "mat-latlong-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], required: "required", disabled: "disabled", value: "value", type: "type", pattern: ["latLongPattern", "pattern"], degreesSymbolUnit: "degreesSymbolUnit", minutesSymbolUnit: "minutesSymbolUnit", secondsSymbolUnit: "secondsSymbolUnit", defaultSign: "defaultSign", maxDecimals: "maxDecimals", showMinutes: "showMinutes", showSeconds: "showSeconds", showSign: "showSign", degreesMask: "degreesMask", minutesMask: "minutesMask", secondsMask: "secondsMask", degreesPlaceholder: "degreesPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder", lastInputMaxDecimals: "lastInputMaxDecimals" }, host: { properties: { "class.label-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], viewQueries: [{ propertyName: "degreesInput", first: true, predicate: ["degrees"], descendants: true, read: ElementRef }, { propertyName: "minutesInput", first: true, predicate: ["minutes"], descendants: true, read: ElementRef }, { propertyName: "secondsInput", first: true, predicate: ["seconds"], descendants: true, read: ElementRef }, { propertyName: "signInput", first: true, predicate: ["sign"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  role=\"group\"\n  class=\"mat-latlong-input-container\"\n  [formGroup]=\"parts\"\n  [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n  (focusin)=\"onFocusIn($event)\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <input\n    #degrees\n    aria-label=\"Degrees\"\n    [class.degrees]=\"pattern !== 'DD'\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    [placeholder]=\"degreesPlaceholder | translate\"\n    formControlName=\"degrees\"\n    [maskito]=\"degreesMask\"\n    (input)=\"handleInput('degrees', 'minutes')\"\n  />\n  <span class=\"symbol-unit\">\n    {{ degreesSymbolUnit }}\n  </span>\n\n  @if (showMinutes) {\n    <input\n      #minutes\n      aria-label=\"Minutes\"\n      [class.minutes]=\"showSeconds\"\n      [class.minutes-seconds]=\"!showSeconds\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"minutesPlaceholder | translate\"\n      formControlName=\"minutes\"\n      [maskito]=\"minutesMask\"\n      (input)=\"handleInput('minutes', 'seconds')\"\n      (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ minutesSymbolUnit }}\n    </span>\n  }\n\n  @if (showSeconds) {\n    <input\n      #seconds\n      aria-label=\"Seconds\"\n      class=\"seconds\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"secondsPlaceholder | translate\"\n      formControlName=\"seconds\"\n      [maskito]=\"secondsMask\"\n      (input)=\"handleInput('seconds', 'sign')\"\n      (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ secondsSymbolUnit }}\n    </span>\n  }\n\n  <!-- sign -->\n  @if (showSign) {\n    <span class=\"sign-spacer\"></span>\n    <mat-select\n      #sign\n      aria-label=\"Sign\"\n      class=\"sign\"\n      formControlName=\"sign\"\n      [placeholder]=\"\n        (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n          | translate\n      \"\n      (focusin)=\"sign.open()\"\n      (selectionChange)=\"handleInput('sign')\"\n    >\n      <mat-option [value]=\"1\" (click)=\"sign.close()\">\n        {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n      </mat-option>\n      <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n        {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n      </mat-option>\n    </mat-select>\n  }\n</div>\n", styles: [".mat-latlong-input-container{display:inline-flex;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right}input::placeholder{letter-spacing:-.075em;font-size:smaller}input.degrees{width:2em}input.minutes{width:1.5em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.5em;color:inherit}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatLatLongFieldInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-latlong-input', providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], host: {
+                        '[class.label-floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  class=\"mat-latlong-input-container\"\n  [formGroup]=\"parts\"\n  [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n  (focusin)=\"onFocusIn($event)\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <input\n    #degrees\n    aria-label=\"Degrees\"\n    [class.degrees]=\"pattern !== 'DD'\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    [placeholder]=\"degreesPlaceholder | translate\"\n    formControlName=\"degrees\"\n    [maskito]=\"degreesMask\"\n    (input)=\"handleInput('degrees', 'minutes')\"\n  />\n  <span class=\"symbol-unit\">\n    {{ degreesSymbolUnit }}\n  </span>\n\n  @if (showMinutes) {\n    <input\n      #minutes\n      aria-label=\"Minutes\"\n      [class.minutes]=\"showSeconds\"\n      [class.minutes-seconds]=\"!showSeconds\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"minutesPlaceholder | translate\"\n      formControlName=\"minutes\"\n      [maskito]=\"minutesMask\"\n      (input)=\"handleInput('minutes', 'seconds')\"\n      (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ minutesSymbolUnit }}\n    </span>\n  }\n\n  @if (showSeconds) {\n    <input\n      #seconds\n      aria-label=\"Seconds\"\n      class=\"seconds\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"secondsPlaceholder | translate\"\n      formControlName=\"seconds\"\n      [maskito]=\"secondsMask\"\n      (input)=\"handleInput('seconds', 'sign')\"\n      (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ secondsSymbolUnit }}\n    </span>\n  }\n\n  <!-- sign -->\n  @if (showSign) {\n    <span class=\"sign-spacer\"></span>\n    <mat-select\n      #sign\n      aria-label=\"Sign\"\n      class=\"sign\"\n      formControlName=\"sign\"\n      [placeholder]=\"\n        (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n          | translate\n      \"\n      (focusin)=\"sign.open()\"\n      (selectionChange)=\"handleInput('sign')\"\n    >\n      <mat-option [value]=\"1\" (click)=\"sign.close()\">\n        {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n      </mat-option>\n      <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n        {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n      </mat-option>\n    </mat-select>\n  }\n</div>\n", styles: [".mat-latlong-input-container{display:inline-flex;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right}input::placeholder{letter-spacing:-.075em;font-size:smaller}input.degrees{width:2em}input.minutes{width:1.5em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.5em;color:inherit}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i6.MatFormField, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_FORM_FIELD]
+                }] }, { type: i1$3.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { degreesInput: [{
+                type: ViewChild,
+                args: ['degrees', { read: ElementRef }]
+            }], minutesInput: [{
+                type: ViewChild,
+                args: ['minutes', { read: ElementRef }]
+            }], secondsInput: [{
+                type: ViewChild,
+                args: ['seconds', { read: ElementRef }]
+            }], signInput: [{
+                type: ViewChild,
+                args: ['sign', { read: ElementRef }]
+            }], userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], pattern: [{
+                type: Input,
+                args: ['latLongPattern']
+            }], degreesSymbolUnit: [{
+                type: Input
+            }], minutesSymbolUnit: [{
+                type: Input
+            }], secondsSymbolUnit: [{
+                type: Input
+            }], defaultSign: [{
+                type: Input
+            }], maxDecimals: [{
+                type: Input
+            }], showMinutes: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], showSign: [{
+                type: Input
+            }], degreesMask: [{
+                type: Input
+            }], minutesMask: [{
+                type: Input
+            }], secondsMask: [{
+                type: Input
+            }], degreesPlaceholder: [{
+                type: Input
+            }], minutesPlaceholder: [{
+                type: Input
+            }], secondsPlaceholder: [{
+                type: Input
+            }], lastInputMaxDecimals: [{
+                type: Input
+            }] } });
+
+class MatLatLongField {
+    cd;
+    formGroupDir;
+    _subscription = new Subscription();
+    _appearance = null;
+    _subscriptSizing = null;
+    _readonly = false;
+    _tabindex;
+    _defaultAppearance;
+    _defaultSubscriptSizing;
+    showMinutes = false;
+    showSeconds = false;
+    showSign;
+    degreesPlaceholder;
+    minutesPlaceholder;
+    secondsPlaceholder;
+    degreesMask;
+    minutesMask;
+    secondsMask;
+    lastInputMaxDecimals = LAT_LONG_PATTERN_MAX_DECIMALS;
+    i18nErrorKeys = SharedValidators.I18N_ERROR_KEYS;
+    formControl;
+    formControlName;
+    type;
+    pattern;
+    maxDecimals = LAT_LONG_VALUE_MAX_DECIMALS;
+    required = false;
+    floatLabel = 'auto';
+    placeholder;
+    defaultSign;
+    autofocus = false;
+    mobile;
+    degreesSymbolUnit = '°';
+    minutesSymbolUnit = "'";
+    secondsSymbolUnit = '"';
+    clearable = false;
+    classList;
+    set tabindex(value) {
+        if (this._tabindex !== value) {
+            this._tabindex = value;
+        }
+    }
+    get tabindex() {
+        return this._tabindex;
+    }
+    set appearance(value) {
+        this._appearance = value;
+    }
+    get appearance() {
+        return this._appearance || this._defaultAppearance;
+    }
+    set readonly(value) {
+        this._readonly = value;
+        this.markForCheck();
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set subscriptSizing(value) {
+        this._subscriptSizing = value;
+    }
+    get subscriptSizing() {
+        return this._subscriptSizing || this._defaultSubscriptSizing;
+    }
+    get disabled() {
+        return this.readonly || this.formControl.disabled;
+    }
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix,@angular-eslint/no-output-rename
+    // @Output('keyup.enter') keyupEnter = new EventEmitter<any>();
+    // eslint-disable-next-line @angular-eslint/no-output-rename
+    // @Output('blur') blurred = new EventEmitter<FocusEvent>();
+    // eslint-disable-next-line @angular-eslint/no-output-rename
+    // @Output('focus') focused = new EventEmitter<FocusEvent>();
+    input;
+    pendingValue;
+    pendingValueSet = false;
+    pendingDisabledState;
+    pendingOnChange;
+    pendingOnTouched;
+    constructor(cd, formGroupDir, defaultOptions) {
+        this.cd = cd;
+        this.formGroupDir = formGroupDir;
+        this._defaultSubscriptSizing = defaultOptions?.subscriptSizing || MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING;
+        this._defaultAppearance = defaultOptions?.appearance || MAT_FORM_FIELD_DEFAULT_APPEARANCE;
+    }
+    // Delegate control vale accessor
+    writeValue(value) {
+        if (this.input) {
+            this.input.writeValue(value);
+        }
+        else {
+            this.pendingValue = value;
+            this.pendingValueSet = true;
+        }
+    }
+    registerOnChange(fn) {
+        if (this.input) {
+            this.input.registerOnChange(fn);
+        }
+        else {
+            this.pendingOnChange = fn;
+        }
+    }
+    registerOnTouched(fn) {
+        if (this.input) {
+            this.input.registerOnTouched(fn);
+        }
+        else {
+            this.pendingOnTouched = fn;
+        }
+    }
+    setDisabledState(isDisabled) {
+        if (this.input) {
+            this.input.setDisabledState(isDisabled);
+        }
+        else {
+            this.pendingDisabledState = isDisabled;
+        }
+    }
+    ngOnInit() {
+        this.formControl =
+            this.formControl || (this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName));
+        if (!this.formControl)
+            throw new Error("Missing mandatory attribute 'formControl' or 'formControlName' in <mat-latlong-field>.");
+        this.mobile = this.mobile ?? isMobile(window);
+        this.type = this.type || 'latitude';
+        this.pattern = this.pattern || 'DDMM';
+        this.showSign = this.pattern !== 'DD';
+        switch (this.pattern) {
+            case 'DD':
+                this.lastInputMaxDecimals = 7;
+                this.degreesPlaceholder =
+                    this.type === 'latitude' ? 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DD_PLACEHOLDER' : 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DDD_PLACEHOLDER';
+                this.degreesMask = maskitoNumberOptionsGenerator({
+                    precision: this.lastInputMaxDecimals,
+                    min: this.type === 'latitude' ? -90 : -180,
+                    max: this.type === 'latitude' ? 90 : 180,
+                    minusSign: '-',
+                });
+                break;
+            case 'DDMM':
+                this.lastInputMaxDecimals = 3;
+                this.showMinutes = true;
+                this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DD' : 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DDD';
+                this.minutesPlaceholder = 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.MM_MMM';
+                this.degreesMask = maskitoNumberOptionsGenerator({
+                    precision: 0,
+                    min: 0,
+                    max: this.type === 'latitude' ? 90 : 180,
+                });
+                this.minutesMask = maskitoNumberOptionsGenerator({
+                    precision: this.lastInputMaxDecimals,
+                    min: 0,
+                    max: 60 - computeDecimalPart(1, this.lastInputMaxDecimals),
+                });
+                break;
+            default: // Default is DDMMSS
+                this.lastInputMaxDecimals = 2;
+                this.showMinutes = true;
+                this.showSeconds = true;
+                this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DD' : 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.DDD';
+                this.minutesPlaceholder = 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.MM';
+                this.secondsPlaceholder = 'COMMON.LAT_LONG.SINGLE_FIELD_PATTERN.SS_SS';
+                this.degreesMask = maskitoNumberOptionsGenerator({
+                    precision: 0,
+                    min: 0,
+                    max: this.type === 'latitude' ? 90 : 180,
+                });
+                this.minutesMask = maskitoNumberOptionsGenerator({
+                    precision: 0,
+                    min: 0,
+                    max: 59,
+                });
+                this.secondsMask = maskitoNumberOptionsGenerator({
+                    precision: this.lastInputMaxDecimals,
+                    min: 0,
+                    max: 60 - computeDecimalPart(1, this.lastInputMaxDecimals),
+                });
+                break;
+        }
+        // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
+        // this._subscription.add(
+        //   this.formControl.statusChanges
+        //     .pipe(
+        //       filter(() => !this.readonly && !this._writing && !this._disabling) // Skip
+        //     )
+        //     .subscribe(() => this.markForCheck())
+        // );
+    }
+    ngAfterViewInit() {
+        if (!this.readonly) {
+            if (this.pendingOnChange) {
+                this.input.registerOnChange(this.pendingOnChange);
+            }
+            if (this.pendingOnTouched) {
+                this.input.registerOnTouched(this.pendingOnTouched);
+            }
+            if (isNotNil(this.pendingDisabledState)) {
+                this.input.setDisabledState(this.pendingDisabledState);
+            }
+            if (this.pendingValueSet) {
+                this.input.writeValue(this.pendingValue);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    clearValue(event) {
+        event?.stopPropagation();
+        this.formControl.setValue(null);
+    }
+    /* -- private method -- */
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatLatLongField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MatLatLongField, selector: "mat-latlong-field", inputs: { formControl: "formControl", formControlName: "formControlName", type: "type", pattern: ["latLongPattern", "pattern"], maxDecimals: "maxDecimals", required: "required", floatLabel: "floatLabel", placeholder: "placeholder", defaultSign: "defaultSign", autofocus: "autofocus", mobile: ["mobile", "mobile", booleanAttribute], degreesSymbolUnit: "degreesSymbolUnit", minutesSymbolUnit: "minutesSymbolUnit", secondsSymbolUnit: "secondsSymbolUnit", clearable: ["clearable", "clearable", booleanAttribute], classList: ["class", "classList"], tabindex: ["tabindex", "tabindex", numberAttribute], appearance: "appearance", readonly: "readonly", subscriptSizing: "subscriptSizing" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => MatLatLongField),
+            },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{\n        formControl.value\n          | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n      }}\n    </ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    #formField\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"'dynamic'\"\n    [class.mdc-text-field--invalid]=\"formControl.touched && formControl.invalid\"\n    class=\"mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <mat-latlong-input\n      #input\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [disabled]=\"disabled\"\n      [type]=\"type\"\n      [latLongPattern]=\"pattern\"\n      [defaultSign]=\"defaultSign\"\n      [maxDecimals]=\"maxDecimals\"\n      [lastInputMaxDecimals]=\"lastInputMaxDecimals\"\n      [showMinutes]=\"showMinutes\"\n      [showSeconds]=\"showSeconds\"\n      [showSign]=\"showSign\"\n      [degreesMask]=\"degreesMask\"\n      [minutesMask]=\"minutesMask\"\n      [secondsMask]=\"secondsMask\"\n      [degreesPlaceholder]=\"degreesPlaceholder\"\n      [minutesPlaceholder]=\"minutesPlaceholder\"\n      [secondsPlaceholder]=\"secondsPlaceholder\"\n      [degreesSymbolUnit]=\"degreesSymbolUnit\"\n      [minutesSymbolUnit]=\"minutesSymbolUnit\"\n      [secondsSymbolUnit]=\"secondsSymbolUnit\"\n    ></mat-latlong-input>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          <mat-error>\n            {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}\n          </mat-error>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </div>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  @if (clearable && !readonly) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"formControl.value | isNil\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative}.mat-latlong-field-latitude input.degrees{width:1.3em!important}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.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: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatLatLongFieldInput, selector: "mat-latlong-input", inputs: ["aria-describedby", "required", "disabled", "value", "type", "latLongPattern", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "defaultSign", "maxDecimals", "showMinutes", "showSeconds", "showSign", "degreesMask", "minutesMask", "secondsMask", "degreesPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "lastInputMaxDecimals"] }, { kind: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatLatLongField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-latlong-field', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => MatLatLongField),
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{\n        formControl.value\n          | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n      }}\n    </ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    #formField\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"'dynamic'\"\n    [class.mdc-text-field--invalid]=\"formControl.touched && formControl.invalid\"\n    class=\"mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <mat-latlong-input\n      #input\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [disabled]=\"disabled\"\n      [type]=\"type\"\n      [latLongPattern]=\"pattern\"\n      [defaultSign]=\"defaultSign\"\n      [maxDecimals]=\"maxDecimals\"\n      [lastInputMaxDecimals]=\"lastInputMaxDecimals\"\n      [showMinutes]=\"showMinutes\"\n      [showSeconds]=\"showSeconds\"\n      [showSign]=\"showSign\"\n      [degreesMask]=\"degreesMask\"\n      [minutesMask]=\"minutesMask\"\n      [secondsMask]=\"secondsMask\"\n      [degreesPlaceholder]=\"degreesPlaceholder\"\n      [minutesPlaceholder]=\"minutesPlaceholder\"\n      [secondsPlaceholder]=\"secondsPlaceholder\"\n      [degreesSymbolUnit]=\"degreesSymbolUnit\"\n      [minutesSymbolUnit]=\"minutesSymbolUnit\"\n      [secondsSymbolUnit]=\"secondsSymbolUnit\"\n    ></mat-latlong-input>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          <mat-error>\n            {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}\n          </mat-error>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </div>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  @if (clearable && !readonly) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"formControl.value | isNil\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative}.mat-latlong-field-latitude input.degrees{width:1.3em!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
+                }] }], propDecorators: { formControl: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], pattern: [{
+                type: Input,
+                args: ['latLongPattern']
+            }], maxDecimals: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], floatLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], defaultSign: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], mobile: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], degreesSymbolUnit: [{
+                type: Input
+            }], minutesSymbolUnit: [{
+                type: Input
+            }], secondsSymbolUnit: [{
+                type: Input
+            }], clearable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], classList: [{
+                type: Input,
+                args: ['class']
+            }], tabindex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], appearance: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], subscriptSizing: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+class SharedMatLatLongModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, declarations: [MatLatLongField, MatLatLongFieldInput], imports: [CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            SharedDirectivesModule,
+            SharedPipesModule,
+            MatCommonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatButtonModule,
+            MaskitoDirective,
+            MatIconModule,
+            MatSelectModule, i1$1.TranslateModule], exports: [MatLatLongField, MatLatLongFieldInput] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, imports: [CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            SharedDirectivesModule,
+            SharedPipesModule,
+            MatCommonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatButtonModule,
+            MatIconModule,
+            MatSelectModule,
+            TranslateModule.forChild()] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedMatLatLongModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                        ReactiveFormsModule,
+                        SharedDirectivesModule,
+                        SharedPipesModule,
+                        MatCommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MaskitoDirective,
+                        MatIconModule,
+                        MatSelectModule,
+                        TranslateModule.forChild(),
+                    ],
+                    declarations: [MatLatLongField, MatLatLongFieldInput],
+                    exports: [MatLatLongField, MatLatLongFieldInput],
+                }]
+        }] });
+
 //import {SharedMatNumpadModule} from './numpad/numpad.module';
 const modules = [
     // Angular material components
@@ -42494,7 +42560,7 @@ class LatLongTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", 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.11", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngIf=\"geoPositionMessage\">\n            <ion-col>{{ geoPositionMessage }}</ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-card-content>\n    </ion-card>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.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", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"], outputs: ["keyup.enter", "blur", "focus"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngIf=\"geoPositionMessage\">\n            <ion-col>{{ geoPositionMessage }}</ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-card-content>\n    </ion-card>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.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", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LatLongTestPage, decorators: [{
             type: Component,
@@ -42992,6 +43058,234 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
             args: [{ selector: 'app-maskito-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>Maskito test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <form [formGroup]=\"form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Test Strategy Pattern</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <input\n                  matInput\n                  #strategyInput\n                  formControlName=\"strategy\"\n                  autocomplete=\"off\"\n                  type=\"text\"\n                  [maskito]=\"'__ _______ ___' | maskitoPlaceholder: labelMask\"\n                  placeholder=\"Strategy field\"\n                />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }] });
 
+/** @title Form field with custom telephone number input control. */
+class FormFieldCustomControlExample {
+    form = new FormGroup({
+        tel: new FormControl(null),
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: FormFieldCustomControlExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: FormFieldCustomControlExample, isStandalone: true, selector: "form-field-custom-control-example", ngImport: i0, template: `
+    <div [formGroup]="form">
+      <mat-form-field>
+        <mat-label>Phone number</mat-label>
+        <example-tel-input formControlName="tel" required></example-tel-input>
+        <mat-icon matSuffix>phone</mat-icon>
+        <mat-hint>Include area code</mat-hint>
+      </mat-form-field>
+      <p>Entered value: {{ form.valueChanges | async | json }}</p>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$3.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$3.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$3.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$3.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$3.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i6.MatHint), selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i0.forwardRef(() => MyTelInput), selector: "example-tel-input", inputs: ["aria-describedby", "placeholder", "required", "disabled", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i8.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }, { kind: "pipe", type: i0.forwardRef(() => JsonPipe), name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: FormFieldCustomControlExample, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'form-field-custom-control-example',
+                    template: `
+    <div [formGroup]="form">
+      <mat-form-field>
+        <mat-label>Phone number</mat-label>
+        <example-tel-input formControlName="tel" required></example-tel-input>
+        <mat-icon matSuffix>phone</mat-icon>
+        <mat-hint>Include area code</mat-hint>
+      </mat-form-field>
+      <p>Entered value: {{ form.valueChanges | async | json }}</p>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, forwardRef(() => MyTelInput), MatIconModule, AsyncPipe, JsonPipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+/** Data structure for holding telephone number. */
+class MyTel {
+    area;
+    exchange;
+    subscriber;
+    constructor(area, exchange, subscriber) {
+        this.area = area;
+        this.exchange = exchange;
+        this.subscriber = subscriber;
+    }
+}
+/** Custom `MatFormFieldControl` for telephone number input. */
+class MyTelInput {
+    static nextId = 0;
+    areaInput = viewChild.required('area');
+    exchangeInput = viewChild.required('exchange');
+    subscriberInput = viewChild.required('subscriber');
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parts;
+    stateChanges = new Subject();
+    touched = signal(false);
+    controlType = 'example-tel-input';
+    id = `example-tel-input-${MyTelInput.nextId++}`;
+    _userAriaDescribedBy = input('', { alias: 'aria-describedby' });
+    _placeholder = input('', { alias: 'placeholder' });
+    _required = input(false, {
+        alias: 'required',
+        transform: booleanAttribute,
+    });
+    _disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    _value = model(null, { alias: 'value' });
+    onChange = (_) => { };
+    onTouched = () => { };
+    _formField = inject(MAT_FORM_FIELD, {
+        optional: true,
+    });
+    _focused = signal(false);
+    _disabledByCva = signal(false);
+    _disabled = computed(() => this._disabledByInput() || this._disabledByCva());
+    _focusMonitor = inject(FocusMonitor);
+    _elementRef = inject(ElementRef);
+    get focused() {
+        return this._focused();
+    }
+    get empty() {
+        const { value: { area, exchange, subscriber }, } = this.parts;
+        return !area && !exchange && !subscriber;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get userAriaDescribedBy() {
+        return this._userAriaDescribedBy();
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
+    get required() {
+        return this._required();
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    get value() {
+        return this._value();
+    }
+    get errorState() {
+        return this.parts.invalid && this.touched();
+    }
+    constructor() {
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+        this.parts = inject(FormBuilder).group({
+            area: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+            exchange: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+            subscriber: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
+        });
+        effect(() => {
+            // Read signals to trigger effect.
+            this._placeholder();
+            this._required();
+            this._disabled();
+            this._focused();
+            // Propagate state changes.
+            untracked(() => this.stateChanges.next());
+        });
+        effect(() => {
+            if (this._disabled()) {
+                untracked(() => this.parts.disable());
+            }
+            else {
+                untracked(() => this.parts.enable());
+            }
+        });
+        effect(() => {
+            const value = this._value() || new MyTel('', '', '');
+            untracked(() => this.parts.setValue(value));
+        });
+        this.parts.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.stateChanges.next();
+        });
+        this.parts.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+            const tel = this.parts.valid
+                ? new MyTel(this.parts.value.area || '', this.parts.value.exchange || '', this.parts.value.subscriber || '')
+                : null;
+            this._updateValue(tel);
+        });
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    onFocusIn() {
+        if (!this._focused()) {
+            this._focused.set(true);
+        }
+    }
+    onFocusOut(event) {
+        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
+            this.touched.set(true);
+            this._focused.set(false);
+            this.onTouched();
+        }
+    }
+    autoFocusNext(control, nextElement) {
+        if (!control.errors && nextElement) {
+            this._focusMonitor.focusVia(nextElement, 'program');
+        }
+    }
+    autoFocusPrev(control, prevElement) {
+        if (control.value.length < 1) {
+            this._focusMonitor.focusVia(prevElement, 'program');
+        }
+    }
+    setDescribedByIds(ids) {
+        const controlElement = this._elementRef.nativeElement.querySelector('.example-tel-input-container');
+        controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    onContainerClick() {
+        if (this.parts.controls.subscriber.valid) {
+            this._focusMonitor.focusVia(this.subscriberInput(), 'program');
+        }
+        else if (this.parts.controls.exchange.valid) {
+            this._focusMonitor.focusVia(this.subscriberInput(), 'program');
+        }
+        else if (this.parts.controls.area.valid) {
+            this._focusMonitor.focusVia(this.exchangeInput(), 'program');
+        }
+        else {
+            this._focusMonitor.focusVia(this.areaInput(), 'program');
+        }
+    }
+    writeValue(tel) {
+        this._updateValue(tel);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    _handleInput(control, nextElement) {
+        this.autoFocusNext(control, nextElement);
+        this.onChange(this.value);
+    }
+    _updateValue(tel) {
+        const current = this._value();
+        if (tel === current || (tel?.area === current?.area && tel?.exchange === current?.exchange && tel?.subscriber === current?.subscriber)) {
+            return;
+        }
+        this._value.set(tel);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MyTelInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.11", type: MyTelInput, isStandalone: true, selector: "example-tel-input", inputs: { _userAriaDescribedBy: { classPropertyName: "_userAriaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _value: "valueChange" }, host: { properties: { "class.example-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }], viewQueries: [{ propertyName: "areaInput", first: true, predicate: ["area"], descendants: true, isSignal: true }, { propertyName: "exchangeInput", first: true, predicate: ["exchange"], descendants: true, isSignal: true }, { propertyName: "subscriberInput", first: true, predicate: ["subscriber"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  role=\"group\"\n  class=\"example-tel-input-container\"\n  [formGroup]=\"parts\"\n  [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"area\"\n    size=\"3\"\n    maxLength=\"3\"\n    aria-label=\"Area code\"\n    (input)=\"_handleInput(parts.controls.area, exchange)\"\n    #area\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"exchange\"\n    maxLength=\"3\"\n    size=\"3\"\n    aria-label=\"Exchange code\"\n    (input)=\"_handleInput(parts.controls.exchange, subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.exchange, area)\"\n    #exchange\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"subscriber\"\n    maxLength=\"4\"\n    size=\"4\"\n    aria-label=\"Subscriber number\"\n    (input)=\"_handleInput(parts.controls.subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.subscriber, exchange)\"\n    #subscriber\n  />\n</div>\n", styles: [".example-tel-input-container{display:flex}.example-tel-input-element{border:none;background:none;padding:0;outline:none;font:inherit;text-align:center;color:currentcolor}.example-tel-input-spacer{opacity:0;transition:opacity .2s}:host.example-floating .example-tel-input-spacer{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MyTelInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'example-tel-input', providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }], host: {
+                        '[class.example-floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, standalone: true, imports: [FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  class=\"example-tel-input-container\"\n  [formGroup]=\"parts\"\n  [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"area\"\n    size=\"3\"\n    maxLength=\"3\"\n    aria-label=\"Area code\"\n    (input)=\"_handleInput(parts.controls.area, exchange)\"\n    #area\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"exchange\"\n    maxLength=\"3\"\n    size=\"3\"\n    aria-label=\"Exchange code\"\n    (input)=\"_handleInput(parts.controls.exchange, subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.exchange, area)\"\n    #exchange\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"subscriber\"\n    maxLength=\"4\"\n    size=\"4\"\n    aria-label=\"Subscriber number\"\n    (input)=\"_handleInput(parts.controls.subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.subscriber, exchange)\"\n    #subscriber\n  />\n</div>\n", styles: [".example-tel-input-container{display:flex}.example-tel-input-element{border:none;background:none;padding:0;outline:none;font:inherit;text-align:center;color:currentcolor}.example-tel-input-spacer{opacity:0;transition:opacity .2s}:host.example-floating .example-tel-input-spacer{opacity:1}\n"] }]
+        }], ctorParameters: () => [] });
+
 const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Shared Material components', divider: true },
     { label: 'Common field', page: '/testing/shared/common' },
@@ -43002,6 +43296,8 @@ const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Autocomplete field', page: '/testing/shared/autocomplete' },
     { label: 'Boolean field', page: '/testing/shared/boolean' },
     { label: 'Lat/Long field', page: '/testing/shared/latlong' },
+    { label: 'Lat/Long field 2', page: '/testing/shared/latlong2' },
+    { label: 'TEST field', page: '/testing/shared/test' },
     //{ label: 'Numeric pad component', page: '/testing/shared/numpad' },
     { label: 'Text form', page: '/testing/shared/text-form' },
     { label: 'Swipe component', page: '/testing/shared/swipe' },
@@ -43059,6 +43355,16 @@ const routes$b = [
         component: LatLongTestPage,
     },
     // {
+    //   path: 'latlong2',
+    //   pathMatch: 'full',
+    //   component: LatLongTest2Page,
+    // },
+    {
+        path: 'test',
+        pathMatch: 'full',
+        component: FormFieldCustomControlExample,
+    },
+    // {
     //   path: 'numpad',
     //   pathMatch: 'full',
     //   component: NumpadTestPage
@@ -43104,6 +43410,7 @@ class MaterialTestingModule {
             AutocompleteTestPage,
             BooleanTestPage,
             LatLongTestPage,
+            //LatLongTest2Page,
             //NumpadTestPage,
             TextFormTestingPage,
             SwipeTestPage,
@@ -43116,7 +43423,8 @@ class MaterialTestingModule {
             SharedMaterialModule, i1$1.TranslateModule, i1$5.RouterModule, SharedPipesModule,
             SharedBadgeModule,
             FormsModule,
-            MaskitoDirective], exports: [SharedMaterialModule,
+            MaskitoDirective,
+            SharedMatLatLongModule], exports: [SharedMaterialModule,
             RouterModule,
             MatCommonTestPage,
             DateTimeTestPage,
@@ -43126,6 +43434,7 @@ class MaterialTestingModule {
             AutocompleteTestPage,
             BooleanTestPage,
             LatLongTestPage,
+            //LatLongTest2Page,
             //NumpadTestPage,
             TextFormTestingPage,
             SwipeTestPage,
@@ -43141,7 +43450,8 @@ class MaterialTestingModule {
             RouterModule.forChild(routes$b),
             SharedPipesModule,
             SharedBadgeModule,
-            FormsModule, SharedMaterialModule,
+            FormsModule,
+            SharedMatLatLongModule, SharedMaterialModule,
             RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MaterialTestingModule, decorators: [{
@@ -43158,6 +43468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                         SharedBadgeModule,
                         FormsModule,
                         MaskitoDirective,
+                        SharedMatLatLongModule,
                     ],
                     declarations: [
                         MatCommonTestPage,
@@ -43168,6 +43479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                         AutocompleteTestPage,
                         BooleanTestPage,
                         LatLongTestPage,
+                        //LatLongTest2Page,
                         //NumpadTestPage,
                         TextFormTestingPage,
                         SwipeTestPage,
@@ -43187,6 +43499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                         AutocompleteTestPage,
                         BooleanTestPage,
                         LatLongTestPage,
+                        //LatLongTest2Page,
                         //NumpadTestPage,
                         TextFormTestingPage,
                         SwipeTestPage,
@@ -44561,7 +44874,7 @@ class TableTestPage extends AppTable {
                 provide: AppTable,
                 useExisting: forwardRef(() => TableTestPage),
             },
-        ], 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 (click to edit)</ion-title>\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 mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\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\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'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]=\"'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]=\"(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\">\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    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\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]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\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\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [type]=\"'latitude'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions column -->\n      <app-nav-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        [cellTemplate]=\"cellInjection\"\n        [showPending]=\"true\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-nav-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-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=\"error$ | 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-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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$5.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: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$3.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$3.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"], outputs: ["keyup.enter", "blur", "focus"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "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: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "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: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: ["appTable", "matColumnDef", "style", "stickyEnd", "showPending", "dirtyIcon", "optionsTitle", "class", "cellTemplate", "throttleTime"], outputs: ["optionsClick"] }, { 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]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { 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 (click to edit)</ion-title>\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 mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\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\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'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]=\"'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]=\"(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\">\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    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\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]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\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\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [type]=\"'latitude'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions column -->\n      <app-nav-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        [cellTemplate]=\"cellInjection\"\n        [showPending]=\"true\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-nav-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-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=\"error$ | 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-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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$5.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: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$3.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$3.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "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: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "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: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: ["appTable", "matColumnDef", "style", "stickyEnd", "showPending", "dirtyIcon", "optionsTitle", "class", "cellTemplate", "throttleTime"], outputs: ["optionsClick"] }, { 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]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { 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.11", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -45586,5 +45899,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, ArrayFilterPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellValueChangeListener, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NetworkService, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RxStateModule, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, SafeHtmlPipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SubMenuTabDirective, SwipeTestPage, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, computeDecimalDegrees, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProduction, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isFirefox, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isProgressEvent, isPromise, isResponseEvent, isSafari, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlsEnabled, setPropertyByPath, setTabIndex, sleep, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, splitNumberToFieldsDD, splitNumberToFieldsDDMM, splitNumberToFieldsDDMMSS, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, ArrayFilterPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellValueChangeListener, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NetworkService, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RxStateModule, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, SafeHtmlPipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SubMenuTabDirective, SwipeTestPage, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProduction, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isFirefox, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isProgressEvent, isPromise, isResponseEvent, isSafari, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlsEnabled, setPropertyByPath, setTabIndex, sleep, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, splitNumberToFieldsDD, splitNumberToFieldsDDMM, splitNumberToFieldsDDMMSS, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map