@sumaris-net/ngx-components 18.2.31-alpha-3 → 18.2.32

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

@@ -6255,11 +6255,11 @@ class MatBooleanField {
             .concat(this.fakeInput ? [this.fakeInput.nativeElement] : []);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], style: "style", buttonsColCount: ["buttonsColCount", "buttonsColCount", numberAttribute], classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: ["showButtonIcons", "showButtonIcons", booleanAttribute], yesIcon: "yesIcon", noIcon: "noIcon", clearable: ["clearable", "clearable", booleanAttribute], labelPosition: "labelPosition", tabindex: ["tabindex", "tabindex", numberAttribute], showRadio: ["showRadio", "showRadio", booleanAttribute], value: "value" }, outputs: { keyupEnter: "keyup.enter", focussed: "focus", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "yesRadioButton", first: true, predicate: ["yesRadioButton"], descendants: true }, { propertyName: "noRadioButton", first: true, predicate: ["noRadioButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }], ngImport: i0, template: "@if (readonly) {\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\r\n    [appearance]=\"appearance\"\r\n    [subscriptSizing]=\"subscriptSizing\"\r\n    class=\"mat-form-field-disabled {{ classList }}\"\r\n  >\r\n    @if (floatLabel !== 'never' && !!placeholder) {\r\n      <mat-label>{{ placeholder }}</mat-label>\r\n    }\r\n    <div matPrefix>\r\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n    </div>\r\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\r\n    <ion-text>\r\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\r\n    </ion-text>\r\n    <div matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n    </div>\r\n  </mat-form-field>\r\n} @else {\r\n  @switch (style) {\r\n    <!-- Radio -->\r\n    @case ('radio') {\r\n      <mat-form-field\r\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\r\n        [appearance]=\"appearance\"\r\n        [subscriptSizing]=\"subscriptSizing\"\r\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\r\n      >\r\n        @if (floatLabel !== 'never' && !!placeholder) {\r\n          <mat-label [title]=\"placeholder\">\r\n            {{ placeholder }}\r\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\r\n          </mat-label>\r\n        }\r\n        <div matPrefix>\r\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n        </div>\r\n        <input\r\n          matInput\r\n          #fakeInput\r\n          type=\"text\"\r\n          readonly=\"true\"\r\n          [formControl]=\"formControl\"\r\n          (focus)=\"onFocusFakeInput($event)\"\r\n          (blur)=\"onBlurInput($event)\"\r\n          (keydown.space)=\"toggleValue($event)\"\r\n          (keyup.arrowLeft)=\"toggleValue($event)\"\r\n          (keyup.arrowRight)=\"toggleValue($event)\"\r\n          (keyup.arrowUp)=\"toggleValue($event)\"\r\n          (keyup.arrowDown)=\"toggleValue($event)\"\r\n          [required]=\"required\"\r\n          [class.cdk-visually-hidden]=\"showRadio\"\r\n          [tabindex]=\"tabindex\"\r\n        />\r\n\r\n        <!-- radio button -->\r\n        <mat-radio-group\r\n          [class.cdk-visually-hidden]=\"!showRadio\"\r\n          [formControl]=\"formControl\"\r\n          (change)=\"onRadioValueChanged($event)\"\r\n          (blur)=\"onBlurInput($event)\"\r\n        >\r\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\r\n            <span>{{ yesLabel | translate }}</span>\r\n          </mat-radio-button>\r\n          &nbsp;\r\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\r\n            <span>{{ noLabel | translate }}</span>\r\n          </mat-radio-button>\r\n        </mat-radio-group>\r\n\r\n        @if (formControl.hasError('required')) {\r\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\r\n        }\r\n\r\n        @if (clearable) {\r\n          <button\r\n            matSuffix\r\n            mat-icon-button\r\n            tabindex=\"-1\"\r\n            type=\"button\"\r\n            (click)=\"clearValue($event)\"\r\n            [hidden]=\"_value | isNil\"\r\n          >\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        <div matSuffix>\r\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n        </div>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Checkbox -->\r\n    @case ('checkbox') {\r\n      <mat-form-field\r\n        floatLabel=\"always\"\r\n        [appearance]=\"appearance\"\r\n        class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\r\n      >\r\n        <div matPrefix>\r\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n        </div>\r\n        <input\r\n          matInput\r\n          #fakeInput\r\n          readonly=\"true\"\r\n          [formControl]=\"formControl\"\r\n          [required]=\"required\"\r\n          [class.cdk-visually-hidden]=\"showRadio\"\r\n          [tabindex]=\"tabindex\"\r\n          (focus)=\"onFocusFakeInput($event)\"\r\n          (keydown.space)=\"toggleValue($event)\"\r\n        />\r\n\r\n        <!-- checkbox, when compact -->\r\n        <mat-checkbox\r\n          #checkboxButton\r\n          [formControl]=\"formControl\"\r\n          [indeterminate]=\"value | isNil\"\r\n          [class.cdk-visually-hidden]=\"!showRadio\"\r\n          [labelPosition]=\"labelPosition\"\r\n          [title]=\"placeholder || ''\"\r\n          [tabIndex]=\"-1\"\r\n          (change)=\"onCheckboxValueChanged($event)\"\r\n          (blur)=\"onBlurInput($event)\"\r\n        >\r\n          @if (floatLabel !== 'never' && !!placeholder) {\r\n            {{ placeholder || '' }}\r\n          }\r\n        </mat-checkbox>\r\n\r\n        @if (floatLabel === 'never' || !placeholder) {\r\n          <mat-label>&nbsp;</mat-label>\r\n        }\r\n\r\n        @if (formControl.hasError('required')) {\r\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\r\n        }\r\n\r\n        @if (clearable) {\r\n          <button\r\n            matSuffix\r\n            mat-icon-button\r\n            tabindex=\"-1\"\r\n            type=\"button\"\r\n            (click)=\"clearValue($event)\"\r\n            [hidden]=\"_value | isNil\"\r\n          >\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        <div matSuffix>\r\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n        </div>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Buttons -->\r\n    @case ('button') {\r\n      <mat-form-field\r\n        [floatLabel]=\"'always'\"\r\n        [appearance]=\"appearance\"\r\n        [subscriptSizing]=\"subscriptSizing\"\r\n        class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\r\n      >\r\n        <div matPrefix>\r\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n        </div>\r\n\r\n        @if (floatLabel !== 'never' && !!placeholder) {\r\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\r\n        } @else {\r\n          <mat-label>&nbsp;</mat-label>\r\n        }\r\n\r\n        <input\r\n          #fakeInput\r\n          matInput\r\n          type=\"text\"\r\n          class=\"cdk-visually-hidden\"\r\n          readonly=\"true\"\r\n          [formControl]=\"formControl\"\r\n          (focus)=\"onFocusFakeInput($event)\"\r\n          (keydown.space)=\"toggleValue($event)\"\r\n          (keyup.arrowLeft)=\"toggleValue($event)\"\r\n          (keyup.arrowRight)=\"toggleValue($event)\"\r\n          (keyup.arrowUp)=\"toggleValue($event)\"\r\n          (keyup.arrowDown)=\"toggleValue($event)\"\r\n          [required]=\"required\"\r\n          [tabindex]=\"_tabindex\"\r\n        />\r\n        @if (formControl.disabled) {\r\n          <ion-text>\r\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\r\n          </ion-text>\r\n        } @else {\r\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\r\n            <!-- yes -->\r\n            <ion-button\r\n              #yesButton\r\n              class=\"mat-form-field-button\"\r\n              [tabIndex]=\"-1\"\r\n              (click)=\"writeValue(true, $event)\"\r\n              (keyup.enter)=\"writeValue(true, $event)\"\r\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\r\n            >\r\n              @if (showButtonIcons && yesIcon; as icon) {\r\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\r\n              }\r\n              {{ yesLabel | translate }}\r\n            </ion-button>\r\n\r\n            <!-- No button -->\r\n            <ion-button\r\n              #noButton\r\n              class=\"mat-form-field-button\"\r\n              [tabIndex]=\"-1\"\r\n              (click)=\"writeValue(false, $event)\"\r\n              (keydown.space)=\"toggleValue($event)\"\r\n              (keyup.enter)=\"writeValue(false, $event)\"\r\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\r\n            >\r\n              @if (showButtonIcons && noIcon; as icon) {\r\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\r\n              }\r\n              {{ noLabel | translate }}\r\n            </ion-button>\r\n          </div>\r\n        }\r\n\r\n        @if (formControl.hasError('required')) {\r\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\r\n        }\r\n\r\n        @if (clearable) {\r\n          <ion-button\r\n            matSuffix\r\n            fill=\"clear\"\r\n            size=\"small\"\r\n            color=\"medium\"\r\n            tabindex=\"-1\"\r\n            (click)=\"clearValue($event)\"\r\n            [class.cdk-visually-hidden]=\"_value | isNil\"\r\n          >\r\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\r\n          </ion-button>\r\n        }\r\n\r\n        <div matSuffix>\r\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n        </div>\r\n      </mat-form-field>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template #matPrefixTemplate>\r\n  <ng-content select=\"[matPrefix]\"></ng-content>\r\n</ng-template>\r\n<ng-template #matSuffixTemplate>\r\n  <ng-content select=\"[matSuffix]\"></ng-content>\r\n</ng-template>\r\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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.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: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], style: "style", buttonsColCount: ["buttonsColCount", "buttonsColCount", numberAttribute], classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: ["showButtonIcons", "showButtonIcons", booleanAttribute], yesIcon: "yesIcon", noIcon: "noIcon", clearable: ["clearable", "clearable", booleanAttribute], labelPosition: "labelPosition", tabindex: ["tabindex", "tabindex", numberAttribute], showRadio: ["showRadio", "showRadio", booleanAttribute], value: "value" }, outputs: { keyupEnter: "keyup.enter", focussed: "focus", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "yesRadioButton", first: true, predicate: ["yesRadioButton"], descendants: true }, { propertyName: "noRadioButton", first: true, predicate: ["noRadioButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }], ngImport: i0, template: "@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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n    </ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  @switch (style) {\n    <!-- Radio -->\n    @case ('radio') {\n      <mat-form-field\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n      >\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">\n            {{ placeholder }}\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n          </mat-label>\n        }\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          type=\"text\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- radio button -->\n        <mat-radio-group\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [formControl]=\"formControl\"\n          (change)=\"onRadioValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n            <span>{{ noLabel | translate }}</span>\n          </mat-radio-button>\n        </mat-radio-group>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Checkbox -->\n    @case ('checkbox') {\n      <mat-form-field\n        floatLabel=\"always\"\n        [appearance]=\"appearance\"\n        class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          [indeterminate]=\"value | isNil\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n          [tabIndex]=\"-1\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            {{ placeholder || '' }}\n          }\n        </mat-checkbox>\n\n        @if (floatLabel === 'never' || !placeholder) {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Buttons -->\n    @case ('button') {\n      <mat-form-field\n        [floatLabel]=\"'always'\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n        } @else {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        <input\n          #fakeInput\n          matInput\n          type=\"text\"\n          class=\"cdk-visually-hidden\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [tabindex]=\"_tabindex\"\n        />\n        @if (formControl.disabled) {\n          <ion-text>\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n          </ion-text>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              #yesButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(true, $event)\"\n              (keyup.enter)=\"writeValue(true, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && yesIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ yesLabel | translate }}\n            </ion-button>\n\n            <!-- No button -->\n            <ion-button\n              #noButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(false, $event)\"\n              (keydown.space)=\"toggleValue($event)\"\n              (keyup.enter)=\"writeValue(false, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && noIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ noLabel | translate }}\n            </ion-button>\n          </div>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <ion-button\n            matSuffix\n            fill=\"clear\"\n            size=\"small\"\n            color=\"medium\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            [class.cdk-visually-hidden]=\"_value | isNil\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n  }\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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.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: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: "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: MatBooleanField, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-boolean-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (readonly) {\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\r\n    [appearance]=\"appearance\"\r\n    [subscriptSizing]=\"subscriptSizing\"\r\n    class=\"mat-form-field-disabled {{ classList }}\"\r\n  >\r\n    @if (floatLabel !== 'never' && !!placeholder) {\r\n      <mat-label>{{ placeholder }}</mat-label>\r\n    }\r\n    <div matPrefix>\r\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n    </div>\r\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\r\n    <ion-text>\r\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\r\n    </ion-text>\r\n    <div matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n    </div>\r\n  </mat-form-field>\r\n} @else {\r\n  @switch (style) {\r\n    <!-- Radio -->\r\n    @case ('radio') {\r\n      <mat-form-field\r\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\r\n        [appearance]=\"appearance\"\r\n        [subscriptSizing]=\"subscriptSizing\"\r\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\r\n      >\r\n        @if (floatLabel !== 'never' && !!placeholder) {\r\n          <mat-label [title]=\"placeholder\">\r\n            {{ placeholder }}\r\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\r\n          </mat-label>\r\n        }\r\n        <div matPrefix>\r\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n        </div>\r\n        <input\r\n          matInput\r\n          #fakeInput\r\n          type=\"text\"\r\n          readonly=\"true\"\r\n          [formControl]=\"formControl\"\r\n          (focus)=\"onFocusFakeInput($event)\"\r\n          (blur)=\"onBlurInput($event)\"\r\n          (keydown.space)=\"toggleValue($event)\"\r\n          (keyup.arrowLeft)=\"toggleValue($event)\"\r\n          (keyup.arrowRight)=\"toggleValue($event)\"\r\n          (keyup.arrowUp)=\"toggleValue($event)\"\r\n          (keyup.arrowDown)=\"toggleValue($event)\"\r\n          [required]=\"required\"\r\n          [class.cdk-visually-hidden]=\"showRadio\"\r\n          [tabindex]=\"tabindex\"\r\n        />\r\n\r\n        <!-- radio button -->\r\n        <mat-radio-group\r\n          [class.cdk-visually-hidden]=\"!showRadio\"\r\n          [formControl]=\"formControl\"\r\n          (change)=\"onRadioValueChanged($event)\"\r\n          (blur)=\"onBlurInput($event)\"\r\n        >\r\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\r\n            <span>{{ yesLabel | translate }}</span>\r\n          </mat-radio-button>\r\n          &nbsp;\r\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\r\n            <span>{{ noLabel | translate }}</span>\r\n          </mat-radio-button>\r\n        </mat-radio-group>\r\n\r\n        @if (formControl.hasError('required')) {\r\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\r\n        }\r\n\r\n        @if (clearable) {\r\n          <button\r\n            matSuffix\r\n            mat-icon-button\r\n            tabindex=\"-1\"\r\n            type=\"button\"\r\n            (click)=\"clearValue($event)\"\r\n            [hidden]=\"_value | isNil\"\r\n          >\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        <div matSuffix>\r\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n        </div>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Checkbox -->\r\n    @case ('checkbox') {\r\n      <mat-form-field\r\n        floatLabel=\"always\"\r\n        [appearance]=\"appearance\"\r\n        class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\r\n      >\r\n        <div matPrefix>\r\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n        </div>\r\n        <input\r\n          matInput\r\n          #fakeInput\r\n          readonly=\"true\"\r\n          [formControl]=\"formControl\"\r\n          [required]=\"required\"\r\n          [class.cdk-visually-hidden]=\"showRadio\"\r\n          [tabindex]=\"tabindex\"\r\n          (focus)=\"onFocusFakeInput($event)\"\r\n          (keydown.space)=\"toggleValue($event)\"\r\n        />\r\n\r\n        <!-- checkbox, when compact -->\r\n        <mat-checkbox\r\n          #checkboxButton\r\n          [formControl]=\"formControl\"\r\n          [indeterminate]=\"value | isNil\"\r\n          [class.cdk-visually-hidden]=\"!showRadio\"\r\n          [labelPosition]=\"labelPosition\"\r\n          [title]=\"placeholder || ''\"\r\n          [tabIndex]=\"-1\"\r\n          (change)=\"onCheckboxValueChanged($event)\"\r\n          (blur)=\"onBlurInput($event)\"\r\n        >\r\n          @if (floatLabel !== 'never' && !!placeholder) {\r\n            {{ placeholder || '' }}\r\n          }\r\n        </mat-checkbox>\r\n\r\n        @if (floatLabel === 'never' || !placeholder) {\r\n          <mat-label>&nbsp;</mat-label>\r\n        }\r\n\r\n        @if (formControl.hasError('required')) {\r\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\r\n        }\r\n\r\n        @if (clearable) {\r\n          <button\r\n            matSuffix\r\n            mat-icon-button\r\n            tabindex=\"-1\"\r\n            type=\"button\"\r\n            (click)=\"clearValue($event)\"\r\n            [hidden]=\"_value | isNil\"\r\n          >\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        <div matSuffix>\r\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n        </div>\r\n      </mat-form-field>\r\n    }\r\n\r\n    <!-- Buttons -->\r\n    @case ('button') {\r\n      <mat-form-field\r\n        [floatLabel]=\"'always'\"\r\n        [appearance]=\"appearance\"\r\n        [subscriptSizing]=\"subscriptSizing\"\r\n        class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\r\n      >\r\n        <div matPrefix>\r\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n        </div>\r\n\r\n        @if (floatLabel !== 'never' && !!placeholder) {\r\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\r\n        } @else {\r\n          <mat-label>&nbsp;</mat-label>\r\n        }\r\n\r\n        <input\r\n          #fakeInput\r\n          matInput\r\n          type=\"text\"\r\n          class=\"cdk-visually-hidden\"\r\n          readonly=\"true\"\r\n          [formControl]=\"formControl\"\r\n          (focus)=\"onFocusFakeInput($event)\"\r\n          (keydown.space)=\"toggleValue($event)\"\r\n          (keyup.arrowLeft)=\"toggleValue($event)\"\r\n          (keyup.arrowRight)=\"toggleValue($event)\"\r\n          (keyup.arrowUp)=\"toggleValue($event)\"\r\n          (keyup.arrowDown)=\"toggleValue($event)\"\r\n          [required]=\"required\"\r\n          [tabindex]=\"_tabindex\"\r\n        />\r\n        @if (formControl.disabled) {\r\n          <ion-text>\r\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\r\n          </ion-text>\r\n        } @else {\r\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\r\n            <!-- yes -->\r\n            <ion-button\r\n              #yesButton\r\n              class=\"mat-form-field-button\"\r\n              [tabIndex]=\"-1\"\r\n              (click)=\"writeValue(true, $event)\"\r\n              (keyup.enter)=\"writeValue(true, $event)\"\r\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\r\n            >\r\n              @if (showButtonIcons && yesIcon; as icon) {\r\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\r\n              }\r\n              {{ yesLabel | translate }}\r\n            </ion-button>\r\n\r\n            <!-- No button -->\r\n            <ion-button\r\n              #noButton\r\n              class=\"mat-form-field-button\"\r\n              [tabIndex]=\"-1\"\r\n              (click)=\"writeValue(false, $event)\"\r\n              (keydown.space)=\"toggleValue($event)\"\r\n              (keyup.enter)=\"writeValue(false, $event)\"\r\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\r\n            >\r\n              @if (showButtonIcons && noIcon; as icon) {\r\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\r\n              }\r\n              {{ noLabel | translate }}\r\n            </ion-button>\r\n          </div>\r\n        }\r\n\r\n        @if (formControl.hasError('required')) {\r\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\r\n        }\r\n\r\n        @if (clearable) {\r\n          <ion-button\r\n            matSuffix\r\n            fill=\"clear\"\r\n            size=\"small\"\r\n            color=\"medium\"\r\n            tabindex=\"-1\"\r\n            (click)=\"clearValue($event)\"\r\n            [class.cdk-visually-hidden]=\"_value | isNil\"\r\n          >\r\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\r\n          </ion-button>\r\n        }\r\n\r\n        <div matSuffix>\r\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n        </div>\r\n      </mat-form-field>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template #matPrefixTemplate>\r\n  <ng-content select=\"[matPrefix]\"></ng-content>\r\n</ng-template>\r\n<ng-template #matSuffixTemplate>\r\n  <ng-content select=\"[matSuffix]\"></ng-content>\r\n</ng-template>\r\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"] }]
+            args: [{ selector: 'mat-boolean-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "@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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n    </ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  @switch (style) {\n    <!-- Radio -->\n    @case ('radio') {\n      <mat-form-field\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n      >\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">\n            {{ placeholder }}\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n          </mat-label>\n        }\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          type=\"text\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- radio button -->\n        <mat-radio-group\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [formControl]=\"formControl\"\n          (change)=\"onRadioValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n            <span>{{ noLabel | translate }}</span>\n          </mat-radio-button>\n        </mat-radio-group>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Checkbox -->\n    @case ('checkbox') {\n      <mat-form-field\n        floatLabel=\"always\"\n        [appearance]=\"appearance\"\n        class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          [indeterminate]=\"value | isNil\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n          [tabIndex]=\"-1\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            {{ placeholder || '' }}\n          }\n        </mat-checkbox>\n\n        @if (floatLabel === 'never' || !placeholder) {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Buttons -->\n    @case ('button') {\n      <mat-form-field\n        [floatLabel]=\"'always'\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n        } @else {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        <input\n          #fakeInput\n          matInput\n          type=\"text\"\n          class=\"cdk-visually-hidden\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [tabindex]=\"_tabindex\"\n        />\n        @if (formControl.disabled) {\n          <ion-text>\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n          </ion-text>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              #yesButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(true, $event)\"\n              (keyup.enter)=\"writeValue(true, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && yesIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ yesLabel | translate }}\n            </ion-button>\n\n            <!-- No button -->\n            <ion-button\n              #noButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(false, $event)\"\n              (keydown.space)=\"toggleValue($event)\"\n              (keyup.enter)=\"writeValue(false, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && noIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ noLabel | translate }}\n            </ion-button>\n          </div>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <ion-button\n            matSuffix\n            fill=\"clear\"\n            size=\"small\"\n            color=\"medium\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            [class.cdk-visually-hidden]=\"_value | isNil\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n  }\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { fakeInput: [{
@@ -9160,6 +9160,8 @@ class MatLatLongField {
         this._focused = true;
         this.markForCheck();
         setTimeout(() => {
+            if (!this._focused)
+                return; // Focus was lost: skip
             if (!showFields) {
                 this.inputDegrees.nativeElement.focus();
                 selectInputContent(this.inputDegrees.nativeElement);
@@ -9349,7 +9351,7 @@ class MatLatLongField {
                 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 -->\r\n@if (readonly) {\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\r\n    [appearance]=\"appearance\"\r\n    [subscriptSizing]=\"subscriptSizing\"\r\n    class=\"mat-form-field-disabled {{ classList }}\"\r\n  >\r\n    <div matPrefix>\r\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if (floatLabel !== 'never' && !!placeholder) {\r\n      <mat-label>{{ placeholder }}</mat-label>\r\n    }\r\n\r\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\r\n    <ion-text>\r\n      {{\r\n        formControl.value\r\n          | latLongFormat: { pattern: pattern, maxDecimals: patternMaxDecimals, type: type, placeholderChar: '' }\r\n      }}\r\n    </ion-text>\r\n\r\n    <div matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n    </div>\r\n\r\n    <!-- hints -->\r\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\r\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n} @else {\r\n  <!-- writable -->\r\n  <mat-form-field\r\n    #formField\r\n    [floatLabel]=\"showFields && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\r\n    [appearance]=\"appearance\"\r\n    [subscriptSizing]=\"'dynamic'\"\r\n    [class.mdc-text-field--invalid]=\"formControl.touched && (signControl.invalid || formControl.invalid)\"\r\n    class=\"mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}\"\r\n  >\r\n    <div matPrefix>\r\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {\r\n      <mat-label>{{ placeholder }}</mat-label>\r\n    }\r\n\r\n    <input\r\n      matInput\r\n      #fakeInput\r\n      type=\"text\"\r\n      readonly=\"true\"\r\n      [formControl]=\"formControl\"\r\n      [required]=\"required\"\r\n      [appAutofocus]=\"!showFields && autofocus\"\r\n      [class.cdk-visually-hidden]=\"showFields\"\r\n      (focus)=\"onFocusFakeInput($event)\"\r\n      (blur)=\"onBlurFakeInput($event)\"\r\n    />\r\n    <input\r\n      matInput\r\n      #inputDegrees\r\n      [class.degrees]=\"pattern !== 'DD'\"\r\n      [class.cdk-visually-hidden]=\"!showFields\"\r\n      inputmode=\"decimal\"\r\n      autocomplete=\"off\"\r\n      [placeholder]=\"degreesPlaceholder | translate\"\r\n      [formControl]=\"degreesControl\"\r\n      [required]=\"required\"\r\n      [tabindex]=\"tabindex\"\r\n      [appAutofocus]=\"showFields && autofocus\"\r\n      [maskito]=\"degreesMask\"\r\n      (focus)=\"_onFocusInput($event)\"\r\n      (blur)=\"_onBlurInput($event)\"\r\n      (click)=\"_onClickInput($event)\"\r\n    />\r\n    <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\r\n      {{ degreesSymbolUnit }}\r\n    </span>\r\n\r\n    @if (showMinutes) {\r\n      <input\r\n        matInput\r\n        #inputMinutes\r\n        [class.minutes]=\"showSeconds\"\r\n        [class.minutes-seconds]=\"!showSeconds\"\r\n        [class.cdk-visually-hidden]=\"!showFields\"\r\n        inputmode=\"decimal\"\r\n        autocomplete=\"off\"\r\n        [placeholder]=\"minutesPlaceholder | translate\"\r\n        [formControl]=\"minutesControl\"\r\n        [required]=\"false\"\r\n        [tabindex]=\"tabindex\"\r\n        [maskito]=\"minutesMask\"\r\n        (focus)=\"_onFocusInput($event)\"\r\n        (blur)=\"_onBlurInput($event)\"\r\n        (click)=\"_onClickInput($event)\"\r\n      />\r\n      <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\r\n        {{ minutesSymbolUnit }}\r\n      </span>\r\n    }\r\n\r\n    @if (showSeconds) {\r\n      <input\r\n        matInput\r\n        #inputSeconds\r\n        class=\"seconds\"\r\n        [class.cdk-visually-hidden]=\"!showFields\"\r\n        inputmode=\"decimal\"\r\n        autocomplete=\"off\"\r\n        [placeholder]=\"secondsPlaceholder | translate\"\r\n        [formControl]=\"secondsControl\"\r\n        [required]=\"false\"\r\n        [tabindex]=\"tabindex\"\r\n        [maskito]=\"secondsMask\"\r\n        (focus)=\"_onFocusInput($event)\"\r\n        (blur)=\"_onBlurInput($event)\"\r\n        (click)=\"_onClickInput($event)\"\r\n      />\r\n      <span [class.cdk-visually-hidden]=\"!showFields\" class=\"symbol-unit\">\r\n        {{ secondsSymbolUnit }}\r\n      </span>\r\n    }\r\n\r\n    <!-- sign -->\r\n    @if (showSignControl) {\r\n      <span class=\"flex-spacer\"></span>\r\n      <mat-select\r\n        #inputSign\r\n        [formControl]=\"signControl\"\r\n        [placeholder]=\"\r\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\r\n            | translate\r\n        \"\r\n        [tabindex]=\"tabindex\"\r\n        (focus)=\"_onFocusInput($event)\"\r\n        (blur)=\"_onBlurInput($event)\"\r\n        (click)=\"_onClickInput($event)\"\r\n        class=\"sign\"\r\n      >\r\n        <mat-option [value]=\"1\" (click)=\"inputSign.close()\">\r\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\r\n        </mat-option>\r\n        <mat-option [value]=\"-1\" (click)=\"inputSign.close()\">\r\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    }\r\n\r\n    <div matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n    </div>\r\n  </mat-form-field>\r\n\r\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\r\n  <div\r\n    class=\"mat-mdc-form-field-subscript-wrapper\"\r\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\r\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\r\n  >\r\n    @if (formControl.touched && formControl.invalid) {\r\n      <!-- errors -->\r\n      <div class=\"mat-mdc-form-field-error-wrapper\">\r\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\r\n          <mat-error>\r\n            {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}\r\n          </mat-error>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <!-- hints -->\r\n      <mat-hint>\r\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\r\n      </mat-hint>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #matPrefixTemplate>\r\n  <ng-content select=\"[matPrefix]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #matSuffixTemplate>\r\n  @if (clearable && !readonly) {\r\n    <button\r\n      matSuffix\r\n      mat-icon-button\r\n      tabindex=\"-1\"\r\n      type=\"button\"\r\n      (click)=\"clearValue($event)\"\r\n      [hidden]=\"formControl.value | isNil\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <ng-content select=\"[matSuffix]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #matErrorTemplate>\r\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #matHintTemplate>\r\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\r\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\r\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\r\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}.mat-latlong-field-latitude input.degrees{width:1.3em!important}input{text-align:right}input::placeholder{letter-spacing:-.05em}input.degrees{width:2em}input.minutes{width:1.5em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}span.symbol-unit{max-height:24px;display:inline-block;text-align:center;font-weight:700;font-size:1.3em}\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 });
+        ], 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,
@@ -9359,7 +9361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => MatLatLongField),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\r\n@if (readonly) {\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\r\n    [appearance]=\"appearance\"\r\n    [subscriptSizing]=\"subscriptSizing\"\r\n    class=\"mat-form-field-disabled {{ classList }}\"\r\n  >\r\n    <div matPrefix>\r\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if (floatLabel !== 'never' && !!placeholder) {\r\n      <mat-label>{{ placeholder }}</mat-label>\r\n    }\r\n\r\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\r\n    <ion-text>\r\n      {{\r\n        formControl.value\r\n          | latLongFormat: { pattern: pattern, maxDecimals: patternMaxDecimals, type: type, placeholderChar: '' }\r\n      }}\r\n    </ion-text>\r\n\r\n    <div matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n    </div>\r\n\r\n    <!-- hints -->\r\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\r\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n} @else {\r\n  <!-- writable -->\r\n  <mat-form-field\r\n    #formField\r\n    [floatLabel]=\"showFields && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\r\n    [appearance]=\"appearance\"\r\n    [subscriptSizing]=\"'dynamic'\"\r\n    [class.mdc-text-field--invalid]=\"formControl.touched && (signControl.invalid || formControl.invalid)\"\r\n    class=\"mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}\"\r\n  >\r\n    <div matPrefix>\r\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {\r\n      <mat-label>{{ placeholder }}</mat-label>\r\n    }\r\n\r\n    <input\r\n      matInput\r\n      #fakeInput\r\n      type=\"text\"\r\n      readonly=\"true\"\r\n      [formControl]=\"formControl\"\r\n      [required]=\"required\"\r\n      [appAutofocus]=\"!showFields && autofocus\"\r\n      [class.cdk-visually-hidden]=\"showFields\"\r\n      (focus)=\"onFocusFakeInput($event)\"\r\n      (blur)=\"onBlurFakeInput($event)\"\r\n    />\r\n    <input\r\n      matInput\r\n      #inputDegrees\r\n      [class.degrees]=\"pattern !== 'DD'\"\r\n      [class.cdk-visually-hidden]=\"!showFields\"\r\n      inputmode=\"decimal\"\r\n      autocomplete=\"off\"\r\n      [placeholder]=\"degreesPlaceholder | translate\"\r\n      [formControl]=\"degreesControl\"\r\n      [required]=\"required\"\r\n      [tabindex]=\"tabindex\"\r\n      [appAutofocus]=\"showFields && autofocus\"\r\n      [maskito]=\"degreesMask\"\r\n      (focus)=\"_onFocusInput($event)\"\r\n      (blur)=\"_onBlurInput($event)\"\r\n      (click)=\"_onClickInput($event)\"\r\n    />\r\n    <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\r\n      {{ degreesSymbolUnit }}\r\n    </span>\r\n\r\n    @if (showMinutes) {\r\n      <input\r\n        matInput\r\n        #inputMinutes\r\n        [class.minutes]=\"showSeconds\"\r\n        [class.minutes-seconds]=\"!showSeconds\"\r\n        [class.cdk-visually-hidden]=\"!showFields\"\r\n        inputmode=\"decimal\"\r\n        autocomplete=\"off\"\r\n        [placeholder]=\"minutesPlaceholder | translate\"\r\n        [formControl]=\"minutesControl\"\r\n        [required]=\"false\"\r\n        [tabindex]=\"tabindex\"\r\n        [maskito]=\"minutesMask\"\r\n        (focus)=\"_onFocusInput($event)\"\r\n        (blur)=\"_onBlurInput($event)\"\r\n        (click)=\"_onClickInput($event)\"\r\n      />\r\n      <span class=\"symbol-unit\" [class.cdk-visually-hidden]=\"!showFields\">\r\n        {{ minutesSymbolUnit }}\r\n      </span>\r\n    }\r\n\r\n    @if (showSeconds) {\r\n      <input\r\n        matInput\r\n        #inputSeconds\r\n        class=\"seconds\"\r\n        [class.cdk-visually-hidden]=\"!showFields\"\r\n        inputmode=\"decimal\"\r\n        autocomplete=\"off\"\r\n        [placeholder]=\"secondsPlaceholder | translate\"\r\n        [formControl]=\"secondsControl\"\r\n        [required]=\"false\"\r\n        [tabindex]=\"tabindex\"\r\n        [maskito]=\"secondsMask\"\r\n        (focus)=\"_onFocusInput($event)\"\r\n        (blur)=\"_onBlurInput($event)\"\r\n        (click)=\"_onClickInput($event)\"\r\n      />\r\n      <span [class.cdk-visually-hidden]=\"!showFields\" class=\"symbol-unit\">\r\n        {{ secondsSymbolUnit }}\r\n      </span>\r\n    }\r\n\r\n    <!-- sign -->\r\n    @if (showSignControl) {\r\n      <span class=\"flex-spacer\"></span>\r\n      <mat-select\r\n        #inputSign\r\n        [formControl]=\"signControl\"\r\n        [placeholder]=\"\r\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\r\n            | translate\r\n        \"\r\n        [tabindex]=\"tabindex\"\r\n        (focus)=\"_onFocusInput($event)\"\r\n        (blur)=\"_onBlurInput($event)\"\r\n        (click)=\"_onClickInput($event)\"\r\n        class=\"sign\"\r\n      >\r\n        <mat-option [value]=\"1\" (click)=\"inputSign.close()\">\r\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\r\n        </mat-option>\r\n        <mat-option [value]=\"-1\" (click)=\"inputSign.close()\">\r\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    }\r\n\r\n    <div matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\r\n    </div>\r\n  </mat-form-field>\r\n\r\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\r\n  <div\r\n    class=\"mat-mdc-form-field-subscript-wrapper\"\r\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\r\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\r\n  >\r\n    @if (formControl.touched && formControl.invalid) {\r\n      <!-- errors -->\r\n      <div class=\"mat-mdc-form-field-error-wrapper\">\r\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\r\n          <mat-error>\r\n            {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}\r\n          </mat-error>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <!-- hints -->\r\n      <mat-hint>\r\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\r\n      </mat-hint>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #matPrefixTemplate>\r\n  <ng-content select=\"[matPrefix]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #matSuffixTemplate>\r\n  @if (clearable && !readonly) {\r\n    <button\r\n      matSuffix\r\n      mat-icon-button\r\n      tabindex=\"-1\"\r\n      type=\"button\"\r\n      (click)=\"clearValue($event)\"\r\n      [hidden]=\"formControl.value | isNil\"\r\n    >\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  }\r\n\r\n  <ng-content select=\"[matSuffix]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #matErrorTemplate>\r\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #matHintTemplate>\r\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\r\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\r\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\r\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}.mat-latlong-field-latitude input.degrees{width:1.3em!important}input{text-align:right}input::placeholder{letter-spacing:-.05em}input.degrees{width:2em}input.minutes{width:1.5em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}span.symbol-unit{max-height:24px;display:inline-block;text-align:center;font-weight:700;font-size:1.3em}\n"] }]
+                    ], 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: [{
@@ -18168,11 +18170,11 @@ class SelectPeerModal extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SelectPeerModal, deps: [{ token: i2$1.ModalController }, { token: i2$1.PopoverController }, { token: i1$1.TranslateService }, { token: i2$4.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: SelectPeerModal, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\r\n    <ion-buttons slot=\"start\">\r\n      @if (canCancel) {\r\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\r\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\r\n        </ion-button>\r\n      }\r\n    </ion-buttons>\r\n\r\n    <ion-title>\r\n      {{ title | translate }}\r\n    </ion-title>\r\n\r\n    <ion-buttons slot=\"end\">\r\n      <!-- loader -->\r\n      @if (loading) {\r\n        <ion-spinner></ion-spinner>\r\n      } @else {\r\n        <!-- refresh button -->\r\n        <ion-button\r\n          (click)=\"refresh($event)\"\r\n          *ngIf=\"onRefresh.observed\"\r\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\r\n        >\r\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\r\n        </ion-button>\r\n      }\r\n      <!-- search button -->\r\n      @if (!showSearchBar) {\r\n        <ion-button (click)=\"toggleSearchBar()\">\r\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\r\n        </ion-button>\r\n      }\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n\r\n  <!-- search bar -->\r\n  <ion-toolbar *ngIf=\"showSearchBar\">\r\n    <ion-searchbar\r\n      #searchbar\r\n      animated\r\n      type=\"search\"\r\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\r\n      show-clear-button=\"always\"\r\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\r\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\r\n      [(ngModel)]=\"searchText\"\r\n      (ionCancel)=\"toggleSearchBar()\"\r\n    ></ion-searchbar>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content>\r\n  <mat-tab-group\r\n    #tabGroup\r\n    [(selectedIndex)]=\"selectedTabIndex\"\r\n    class=\"mat-mdc-tab-disabled-hidden\"\r\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\r\n    [dynamicHeight]=\"false\"\r\n    [mat-stretch-tabs]=\"mobile\"\r\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\r\n  >\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <ion-label\r\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\r\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\r\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\r\n          matBadgeOverlap=\"false\"\r\n          matBadgeColor=\"primary\"\r\n          matBadgeSize=\"small\"\r\n          matBadgePosition=\"above after\"\r\n        >\r\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\r\n        </ion-label>\r\n      </ng-template>\r\n      <ion-list>\r\n        <ion-list-header>\r\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\r\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\r\n          </ion-label>\r\n        </ion-list-header>\r\n\r\n        @for (peer of filteredPeers$ | async; track $index) {\r\n          <ion-item\r\n            (click)=\"selectPeer(peer)\"\r\n            @fadeInAnimation\r\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\r\n            detail\r\n            matRipple\r\n            tappable\r\n          >\r\n            <!-- Peer is UP -->\r\n            @if (peer.reachable) {\r\n              <!-- icon -->\r\n              @if (peer.favicon != 'skip') {\r\n                <ion-avatar slot=\"start\">\r\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\r\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\r\n                </ion-avatar>\r\n              } @else {\r\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\r\n              }\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <ion-label class=\"ion-text-wrap\">\r\n                      <ion-text>\r\n                        @let url = peer.hostAndPort + peer.path;\r\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\r\n                      </ion-text>\r\n                      <ion-text color=\"primary\">\r\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\r\n                      </ion-text>\r\n                    </ion-label>\r\n                  </ion-col>\r\n                  <ion-col size=\"12\" size-sm=\"4\">\r\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\r\n                      <h4>\r\n                        <small>{{ peer.softwareName }}&nbsp;</small>\r\n                        <br class=\"hidden-xxs hidden-xs\" />\r\n                        <!-- Compatible -->\r\n                        @if (!peerMinVersion || isCompatible(peer)) {\r\n                          <small>v{{ peer.softwareVersion }}</small>\r\n                        } @else {\r\n                          <!-- Incompatible -->\r\n                          <ion-text\r\n                            color=\"danger\"\r\n                            [matTooltip]=\"\r\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\r\n                            \"\r\n                          >\r\n                            <small class=\"ion-color-danger\">\r\n                              <mat-icon>warning</mat-icon>\r\n                              v{{ peer.softwareVersion }}\r\n                            </small>\r\n                          </ion-text>\r\n                        }\r\n                      </h4>\r\n                    </ion-label>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            } @else {\r\n              <!-- Peer is DOWN -->\r\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\r\n\r\n              <ion-label class=\"ion-text-wrap\">\r\n                <ion-text color=\"medium\">\r\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\r\n                </ion-text>\r\n                <ion-text color=\"danger\">\r\n                  <h4>\r\n                    <small>\r\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\r\n                    </small>\r\n                    <span translate>NETWORK.PEER.OFFLINE</span>\r\n                  </h4>\r\n                </ion-text>\r\n              </ion-label>\r\n            }\r\n          </ion-item>\r\n        }\r\n\r\n        <!-- no result -->\r\n        @if ((filteredPeerCount$ | async) === 0) {\r\n          <ion-item>\r\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\r\n          </ion-item>\r\n        }\r\n      </ion-list>\r\n    </mat-tab>\r\n\r\n    <!-- Select by features -->\r\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\r\n      <ng-template mat-tab-label>\r\n        <ion-label\r\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\r\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\r\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\r\n          matBadgeOverlap=\"false\"\r\n          matBadgeSize=\"small\"\r\n          matBadgePosition=\"above after\"\r\n        >\r\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\r\n        </ion-label>\r\n      </ng-template>\r\n      <ion-list>\r\n        <ion-list-header>\r\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\r\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\r\n          </ion-label>\r\n        </ion-list-header>\r\n\r\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\r\n          @let peerUrl = peer.hostAndPort + peer.path;\r\n          <!-- Peer is UP -->\r\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\r\n            @let collapsed = collapsedPeers[peerUrl];\r\n\r\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <ion-label>\r\n                      <h4>\r\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\r\n                        {{ peer.hostAndPort }}{{ peer.path }}\r\n                      </h4>\r\n                      @if (peerMinVersion && !isCompatible(peer)) {\r\n                        <ion-text\r\n                          color=\"danger\"\r\n                          [matTooltip]=\"\r\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\r\n                          \"\r\n                        >\r\n                          <h4 class=\"ion-color-danger\">\r\n                            <small>\r\n                              <mat-icon>warning</mat-icon>\r\n                              v{{ peer.softwareVersion }}\r\n                            </small>\r\n                          </h4>\r\n                        </ion-text>\r\n                      }\r\n                    </ion-label>\r\n                  </ion-col>\r\n                  <ion-col size=\"4\" class=\"ion-text-end\">\r\n                    <ion-label class=\"text-italic\">\r\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\r\n                    </ion-label>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n\r\n              <mat-icon slot=\"end\">\r\n                @if (collapsed) {\r\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\r\n                } @else {\r\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\r\n                }\r\n              </mat-icon>\r\n            </ion-item-divider>\r\n\r\n            @if (!collapsed) {\r\n              @for (feature of peer.features; track feature.label) {\r\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\r\n                  <!-- icon -->\r\n                  @if (feature.logo && feature.logo != 'skip') {\r\n                    <ion-avatar slot=\"start\">\r\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\r\n                    </ion-avatar>\r\n                  } @else if (peer.favicon != 'skip') {\r\n                    <ion-avatar slot=\"start\">\r\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\r\n                      <ion-icon\r\n                        name=\"contract\"\r\n                        class=\"icon-secondary\"\r\n                        style=\"top: 12px; left: 44px\"\r\n                        color=\"dark\"\r\n                      ></ion-icon>\r\n                    </ion-avatar>\r\n                  } @else {\r\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\r\n                  }\r\n\r\n                  <ion-label class=\"ion-text-wrap\">\r\n                    <ion-text color=\"primary\">\r\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\r\n                    </ion-text>\r\n                    <ion-text>\r\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\r\n                    </ion-text>\r\n                  </ion-label>\r\n                </ion-item>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- no result -->\r\n        @if ((filteredFeaturesCount$ | async) === 0) {\r\n          <ion-item>\r\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\r\n          </ion-item>\r\n        }\r\n      </ion-list>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</ion-content>\r\n\r\n@if ((canCancel && !mobile) || showSetManuallyButton) {\r\n  <ion-footer>\r\n    <ion-toolbar>\r\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\r\n        <ion-col></ion-col>\r\n\r\n        <!-- buttons -->\r\n        @if (showSetManuallyButton) {\r\n          <ion-col size=\"auto\">\r\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\r\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\r\n            </ion-button>\r\n          </ion-col>\r\n        }\r\n\r\n        @if (canCancel) {\r\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\r\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\r\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\r\n            </ion-button>\r\n          </ion-col>\r\n        }\r\n      </ion-row>\r\n    </ion-toolbar>\r\n  </ion-footer>\r\n}\r\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { 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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { 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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { 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.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: "directive", type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: SelectPeerModal, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { 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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { 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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { 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.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: "directive", type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SelectPeerModal, decorators: [{
             type: Component,
-            args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], template: "<ion-header>\r\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\r\n    <ion-buttons slot=\"start\">\r\n      @if (canCancel) {\r\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\r\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\r\n        </ion-button>\r\n      }\r\n    </ion-buttons>\r\n\r\n    <ion-title>\r\n      {{ title | translate }}\r\n    </ion-title>\r\n\r\n    <ion-buttons slot=\"end\">\r\n      <!-- loader -->\r\n      @if (loading) {\r\n        <ion-spinner></ion-spinner>\r\n      } @else {\r\n        <!-- refresh button -->\r\n        <ion-button\r\n          (click)=\"refresh($event)\"\r\n          *ngIf=\"onRefresh.observed\"\r\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\r\n        >\r\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\r\n        </ion-button>\r\n      }\r\n      <!-- search button -->\r\n      @if (!showSearchBar) {\r\n        <ion-button (click)=\"toggleSearchBar()\">\r\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\r\n        </ion-button>\r\n      }\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n\r\n  <!-- search bar -->\r\n  <ion-toolbar *ngIf=\"showSearchBar\">\r\n    <ion-searchbar\r\n      #searchbar\r\n      animated\r\n      type=\"search\"\r\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\r\n      show-clear-button=\"always\"\r\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\r\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\r\n      [(ngModel)]=\"searchText\"\r\n      (ionCancel)=\"toggleSearchBar()\"\r\n    ></ion-searchbar>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content>\r\n  <mat-tab-group\r\n    #tabGroup\r\n    [(selectedIndex)]=\"selectedTabIndex\"\r\n    class=\"mat-mdc-tab-disabled-hidden\"\r\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\r\n    [dynamicHeight]=\"false\"\r\n    [mat-stretch-tabs]=\"mobile\"\r\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\r\n  >\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <ion-label\r\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\r\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\r\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\r\n          matBadgeOverlap=\"false\"\r\n          matBadgeColor=\"primary\"\r\n          matBadgeSize=\"small\"\r\n          matBadgePosition=\"above after\"\r\n        >\r\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\r\n        </ion-label>\r\n      </ng-template>\r\n      <ion-list>\r\n        <ion-list-header>\r\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\r\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\r\n          </ion-label>\r\n        </ion-list-header>\r\n\r\n        @for (peer of filteredPeers$ | async; track $index) {\r\n          <ion-item\r\n            (click)=\"selectPeer(peer)\"\r\n            @fadeInAnimation\r\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\r\n            detail\r\n            matRipple\r\n            tappable\r\n          >\r\n            <!-- Peer is UP -->\r\n            @if (peer.reachable) {\r\n              <!-- icon -->\r\n              @if (peer.favicon != 'skip') {\r\n                <ion-avatar slot=\"start\">\r\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\r\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\r\n                </ion-avatar>\r\n              } @else {\r\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\r\n              }\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <ion-label class=\"ion-text-wrap\">\r\n                      <ion-text>\r\n                        @let url = peer.hostAndPort + peer.path;\r\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\r\n                      </ion-text>\r\n                      <ion-text color=\"primary\">\r\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\r\n                      </ion-text>\r\n                    </ion-label>\r\n                  </ion-col>\r\n                  <ion-col size=\"12\" size-sm=\"4\">\r\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\r\n                      <h4>\r\n                        <small>{{ peer.softwareName }}&nbsp;</small>\r\n                        <br class=\"hidden-xxs hidden-xs\" />\r\n                        <!-- Compatible -->\r\n                        @if (!peerMinVersion || isCompatible(peer)) {\r\n                          <small>v{{ peer.softwareVersion }}</small>\r\n                        } @else {\r\n                          <!-- Incompatible -->\r\n                          <ion-text\r\n                            color=\"danger\"\r\n                            [matTooltip]=\"\r\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\r\n                            \"\r\n                          >\r\n                            <small class=\"ion-color-danger\">\r\n                              <mat-icon>warning</mat-icon>\r\n                              v{{ peer.softwareVersion }}\r\n                            </small>\r\n                          </ion-text>\r\n                        }\r\n                      </h4>\r\n                    </ion-label>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            } @else {\r\n              <!-- Peer is DOWN -->\r\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\r\n\r\n              <ion-label class=\"ion-text-wrap\">\r\n                <ion-text color=\"medium\">\r\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\r\n                </ion-text>\r\n                <ion-text color=\"danger\">\r\n                  <h4>\r\n                    <small>\r\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\r\n                    </small>\r\n                    <span translate>NETWORK.PEER.OFFLINE</span>\r\n                  </h4>\r\n                </ion-text>\r\n              </ion-label>\r\n            }\r\n          </ion-item>\r\n        }\r\n\r\n        <!-- no result -->\r\n        @if ((filteredPeerCount$ | async) === 0) {\r\n          <ion-item>\r\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\r\n          </ion-item>\r\n        }\r\n      </ion-list>\r\n    </mat-tab>\r\n\r\n    <!-- Select by features -->\r\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\r\n      <ng-template mat-tab-label>\r\n        <ion-label\r\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\r\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\r\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\r\n          matBadgeOverlap=\"false\"\r\n          matBadgeSize=\"small\"\r\n          matBadgePosition=\"above after\"\r\n        >\r\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\r\n        </ion-label>\r\n      </ng-template>\r\n      <ion-list>\r\n        <ion-list-header>\r\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\r\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\r\n          </ion-label>\r\n        </ion-list-header>\r\n\r\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\r\n          @let peerUrl = peer.hostAndPort + peer.path;\r\n          <!-- Peer is UP -->\r\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\r\n            @let collapsed = collapsedPeers[peerUrl];\r\n\r\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <ion-label>\r\n                      <h4>\r\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\r\n                        {{ peer.hostAndPort }}{{ peer.path }}\r\n                      </h4>\r\n                      @if (peerMinVersion && !isCompatible(peer)) {\r\n                        <ion-text\r\n                          color=\"danger\"\r\n                          [matTooltip]=\"\r\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\r\n                          \"\r\n                        >\r\n                          <h4 class=\"ion-color-danger\">\r\n                            <small>\r\n                              <mat-icon>warning</mat-icon>\r\n                              v{{ peer.softwareVersion }}\r\n                            </small>\r\n                          </h4>\r\n                        </ion-text>\r\n                      }\r\n                    </ion-label>\r\n                  </ion-col>\r\n                  <ion-col size=\"4\" class=\"ion-text-end\">\r\n                    <ion-label class=\"text-italic\">\r\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\r\n                    </ion-label>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n\r\n              <mat-icon slot=\"end\">\r\n                @if (collapsed) {\r\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\r\n                } @else {\r\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\r\n                }\r\n              </mat-icon>\r\n            </ion-item-divider>\r\n\r\n            @if (!collapsed) {\r\n              @for (feature of peer.features; track feature.label) {\r\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\r\n                  <!-- icon -->\r\n                  @if (feature.logo && feature.logo != 'skip') {\r\n                    <ion-avatar slot=\"start\">\r\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\r\n                    </ion-avatar>\r\n                  } @else if (peer.favicon != 'skip') {\r\n                    <ion-avatar slot=\"start\">\r\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\r\n                      <ion-icon\r\n                        name=\"contract\"\r\n                        class=\"icon-secondary\"\r\n                        style=\"top: 12px; left: 44px\"\r\n                        color=\"dark\"\r\n                      ></ion-icon>\r\n                    </ion-avatar>\r\n                  } @else {\r\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\r\n                  }\r\n\r\n                  <ion-label class=\"ion-text-wrap\">\r\n                    <ion-text color=\"primary\">\r\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\r\n                    </ion-text>\r\n                    <ion-text>\r\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\r\n                    </ion-text>\r\n                  </ion-label>\r\n                </ion-item>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- no result -->\r\n        @if ((filteredFeaturesCount$ | async) === 0) {\r\n          <ion-item>\r\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\r\n          </ion-item>\r\n        }\r\n      </ion-list>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</ion-content>\r\n\r\n@if ((canCancel && !mobile) || showSetManuallyButton) {\r\n  <ion-footer>\r\n    <ion-toolbar>\r\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\r\n        <ion-col></ion-col>\r\n\r\n        <!-- buttons -->\r\n        @if (showSetManuallyButton) {\r\n          <ion-col size=\"auto\">\r\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\r\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\r\n            </ion-button>\r\n          </ion-col>\r\n        }\r\n\r\n        @if (canCancel) {\r\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\r\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\r\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\r\n            </ion-button>\r\n          </ion-col>\r\n        }\r\n      </ion-row>\r\n    </ion-toolbar>\r\n  </ion-footer>\r\n}\r\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"] }]
+            args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.ModalController }, { type: i2$1.PopoverController }, { type: i1$1.TranslateService }, { type: i2$4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -42354,11 +42356,11 @@ 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>\r\n  <ion-toolbar color=\"primary\">\r\n    <ion-buttons slot=\"start\">\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n\r\n    <ion-title>Lat/Long field test page</ion-title>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content>\r\n  <!-- Tab nav - desktop mode -->\r\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\r\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\r\n      <mat-label>Mobile</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\r\n      <mat-label>Desktop</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\r\n      <mat-label>Dev</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\r\n      <mat-label>Temporary</mat-label>\r\n    </a>\r\n  </nav>\r\n\r\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\r\n    @if (mode === 'mobile') {\r\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\r\n    } @else if (mode === 'desktop') {\r\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\r\n    } @else if (mode === 'dev') {\r\n      <ion-grid>\r\n        <ion-row>\r\n          <ion-col>\r\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\r\n          </ion-col>\r\n        </ion-row>\r\n        <ion-row>\r\n          <ion-col>\r\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\r\n              <mat-label>LatLongFormat</mat-label>\r\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\r\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\r\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\r\n                <mat-option value=\"DD\">DD</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </ion-col>\r\n        </ion-row>\r\n        @switch (selectedFormat) {\r\n          @case ('DDMM') {\r\n            <ion-row>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <!-- <ion-col> -->\r\n              <!--   <ng-container -->\r\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\r\n              <!--   ></ng-container> -->\r\n              <!-- </ion-col> -->\r\n            </ion-row>\r\n          }\r\n          @case ('DDMMSS') {\r\n            <ion-row>\r\n              <!-- DDMMSS -->\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n            </ion-row>\r\n          }\r\n          @case ('DD') {\r\n            <ion-row>\r\n              <!-- DDMMSS -->\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n            </ion-row>\r\n          }\r\n        }\r\n      </ion-grid>\r\n    } @else {\r\n      <!-- Temporay TAB (for DEV) -->\r\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\r\n        <ion-card>\r\n          <ion-card-header>\r\n            <ion-card-title>\r\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\r\n            </ion-card-title>\r\n            <ion-card-subtitle>\r\n              <ion-text color=\"medium\">\r\n                <small>\r\n                  <pre>{{ formGroup.value | json }}</pre>\r\n                </small>\r\n              </ion-text>\r\n            </ion-card-subtitle>\r\n          </ion-card-header>\r\n          <ion-card-content>\r\n            <ion-grid class=\"ion-no-padding\">\r\n              <ion-row>\r\n                <ion-col>\r\n                  <mat-latlong-field\r\n                    formControlName=\"latitude\"\r\n                    type=\"latitude\"\r\n                    latLongPattern=\"DDMMSS\"\r\n                    defaultSign=\"-\"\r\n                    [required]=\"true\"\r\n                    placeholder=\"Latitude\"\r\n                    [appearance]=\"appearance\"\r\n                  >\r\n                    <mat-icon matPrefix>room</mat-icon>\r\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                      <mat-icon>gps_fixed</mat-icon>\r\n                    </button>\r\n                  </mat-latlong-field>\r\n                </ion-col>\r\n                <ion-col>\r\n                  <mat-latlong-field\r\n                    formControlName=\"longitude\"\r\n                    type=\"longitude\"\r\n                    latLongPattern=\"DDMMSS\"\r\n                    defaultSign=\"-\"\r\n                    placeholder=\"Longitude\"\r\n                    [appearance]=\"appearance\"\r\n                  >\r\n                    <mat-icon matPrefix>room</mat-icon>\r\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                      <mat-icon>gps_fixed</mat-icon>\r\n                    </button>\r\n                  </mat-latlong-field>\r\n                </ion-col>\r\n              </ion-row>\r\n              <ion-row *ngIf=\"geoPositionMessage\">\r\n                <ion-col>{{ geoPositionMessage }}</ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-card-content>\r\n        </ion-card>\r\n      </form>\r\n    }\r\n  </form>\r\n</ion-content>\r\n\r\n<ng-template #mainTest let-mobile=\"mobile\">\r\n  <!-- Empty value -->\r\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <ion-row>\r\n        <ion-col>\r\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <!-- DD Default sign -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DD\"\r\n                      defaultSign=\"-\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DD\"\r\n                      defaultSign=\"-\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n                <ion-row *ngIf=\"geoPositionMessage\">\r\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMM Default sign -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMMSS Default sign -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n\r\n  <!-- Empty value -->\r\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <!-- DD -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DD, required</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n                <ion-row *ngIf=\"geoPositionMessage\">\r\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMM  -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n\r\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <!-- With value -->\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>With value</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <!-- DD -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DD</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMMSS -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMM</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMMSS -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n\r\n  <!-- Disable  -->\r\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>Disabled control</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Disabled control</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\r\n              </ion-card-title>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <mat-checkbox\r\n                (change)=\"readonlyField.readonly = $event.checked\"\r\n                [checked]=\"readonlyField.readonly\"\r\n              ></mat-checkbox>\r\n\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      #readonlyField\r\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [readonly]=\"true\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">With hint</ion-label>\r\n              </ion-card-title>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <mat-latlong-field\r\n                #readonlyField\r\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\r\n                type=\"latitude\"\r\n                latLongPattern=\"DDMM\"\r\n                placeholder=\"Latitude\"\r\n                [appearance]=\"appearance\"\r\n                [mobile]=\"mobile\"\r\n              >\r\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\r\n              </mat-latlong-field>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</ng-template>\r\n\r\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\r\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-card>\r\n      <ion-card-header>\r\n        <ion-card-title>\r\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\r\n        </ion-card-title>\r\n        <ion-card-subtitle>\r\n          <ion-grid class=\"ion-no-padding\">\r\n            <ion-row class=\"ion-no-padding\">\r\n              <ion-col class=\"ion-no-padding\">\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ formGroup.value | json }}</pre>\r\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\r\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\r\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-col>\r\n            </ion-row>\r\n            <ion-row class=\"ion-no-padding\">\r\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\r\n                <mat-latlong-field\r\n                  formControlName=\"latitude\"\r\n                  type=\"latitude\"\r\n                  [readonly]=\"true\"\r\n                  [latLongPattern]=\"pattern\"\r\n                  defaultSign=\"-\"\r\n                  placeholder=\"Latitude\"\r\n                  [appearance]=\"appearance\"\r\n                ></mat-latlong-field>\r\n              </ion-col>\r\n              <ion-col sizeLg=\"6\">\r\n                <mat-latlong-field\r\n                  formControlName=\"longitude\"\r\n                  type=\"longitude\"\r\n                  [readonly]=\"true\"\r\n                  [latLongPattern]=\"pattern\"\r\n                  defaultSign=\"-\"\r\n                  placeholder=\"Longitude\"\r\n                  [appearance]=\"appearance\"\r\n                ></mat-latlong-field>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-grid>\r\n        </ion-card-subtitle>\r\n      </ion-card-header>\r\n      <ion-card-content>\r\n        <ion-grid class=\"ion-no-padding\">\r\n          <ion-row>\r\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\r\n              <mat-latlong-field\r\n                formControlName=\"latitude\"\r\n                type=\"latitude\"\r\n                [latLongPattern]=\"pattern\"\r\n                defaultSign=\"-\"\r\n                placeholder=\"Latitude\"\r\n                [appearance]=\"appearance\"\r\n                [required]=\"required\"\r\n              >\r\n                <mat-icon matPrefix>room</mat-icon>\r\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                  <mat-icon>gps_fixed</mat-icon>\r\n                </button>\r\n              </mat-latlong-field>\r\n            </ion-col>\r\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\r\n              <mat-latlong-field\r\n                formControlName=\"longitude\"\r\n                type=\"longitude\"\r\n                [latLongPattern]=\"pattern\"\r\n                defaultSign=\"-\"\r\n                placeholder=\"Longitude\"\r\n                [appearance]=\"appearance\"\r\n                [required]=\"required\"\r\n              >\r\n                <mat-icon matPrefix>room</mat-icon>\r\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                  <mat-icon>gps_fixed</mat-icon>\r\n                </button>\r\n              </mat-latlong-field>\r\n            </ion-col>\r\n          </ion-row>\r\n          <ion-row *ngIf=\"geoPositionMessage\">\r\n            <ion-col>{{ geoPositionMessage }}</ion-col>\r\n          </ion-row>\r\n        </ion-grid>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </form>\r\n</ng-template>\r\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"], 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LatLongTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-latlong-test', template: "<ion-header>\r\n  <ion-toolbar color=\"primary\">\r\n    <ion-buttons slot=\"start\">\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n\r\n    <ion-title>Lat/Long field test page</ion-title>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content>\r\n  <!-- Tab nav - desktop mode -->\r\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\r\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\r\n      <mat-label>Mobile</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\r\n      <mat-label>Desktop</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\r\n      <mat-label>Dev</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\r\n      <mat-label>Temporary</mat-label>\r\n    </a>\r\n  </nav>\r\n\r\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\r\n    @if (mode === 'mobile') {\r\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\r\n    } @else if (mode === 'desktop') {\r\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\r\n    } @else if (mode === 'dev') {\r\n      <ion-grid>\r\n        <ion-row>\r\n          <ion-col>\r\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\r\n          </ion-col>\r\n        </ion-row>\r\n        <ion-row>\r\n          <ion-col>\r\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\r\n              <mat-label>LatLongFormat</mat-label>\r\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\r\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\r\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\r\n                <mat-option value=\"DD\">DD</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </ion-col>\r\n        </ion-row>\r\n        @switch (selectedFormat) {\r\n          @case ('DDMM') {\r\n            <ion-row>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <!-- <ion-col> -->\r\n              <!--   <ng-container -->\r\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\r\n              <!--   ></ng-container> -->\r\n              <!-- </ion-col> -->\r\n            </ion-row>\r\n          }\r\n          @case ('DDMMSS') {\r\n            <ion-row>\r\n              <!-- DDMMSS -->\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n            </ion-row>\r\n          }\r\n          @case ('DD') {\r\n            <ion-row>\r\n              <!-- DDMMSS -->\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    newComponent;\r\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\r\n                  \"\r\n                ></ng-container>\r\n              </ion-col>\r\n            </ion-row>\r\n          }\r\n        }\r\n      </ion-grid>\r\n    } @else {\r\n      <!-- Temporay TAB (for DEV) -->\r\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\r\n        <ion-card>\r\n          <ion-card-header>\r\n            <ion-card-title>\r\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\r\n            </ion-card-title>\r\n            <ion-card-subtitle>\r\n              <ion-text color=\"medium\">\r\n                <small>\r\n                  <pre>{{ formGroup.value | json }}</pre>\r\n                </small>\r\n              </ion-text>\r\n            </ion-card-subtitle>\r\n          </ion-card-header>\r\n          <ion-card-content>\r\n            <ion-grid class=\"ion-no-padding\">\r\n              <ion-row>\r\n                <ion-col>\r\n                  <mat-latlong-field\r\n                    formControlName=\"latitude\"\r\n                    type=\"latitude\"\r\n                    latLongPattern=\"DDMMSS\"\r\n                    defaultSign=\"-\"\r\n                    [required]=\"true\"\r\n                    placeholder=\"Latitude\"\r\n                    [appearance]=\"appearance\"\r\n                  >\r\n                    <mat-icon matPrefix>room</mat-icon>\r\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                      <mat-icon>gps_fixed</mat-icon>\r\n                    </button>\r\n                  </mat-latlong-field>\r\n                </ion-col>\r\n                <ion-col>\r\n                  <mat-latlong-field\r\n                    formControlName=\"longitude\"\r\n                    type=\"longitude\"\r\n                    latLongPattern=\"DDMMSS\"\r\n                    defaultSign=\"-\"\r\n                    placeholder=\"Longitude\"\r\n                    [appearance]=\"appearance\"\r\n                  >\r\n                    <mat-icon matPrefix>room</mat-icon>\r\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                      <mat-icon>gps_fixed</mat-icon>\r\n                    </button>\r\n                  </mat-latlong-field>\r\n                </ion-col>\r\n              </ion-row>\r\n              <ion-row *ngIf=\"geoPositionMessage\">\r\n                <ion-col>{{ geoPositionMessage }}</ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-card-content>\r\n        </ion-card>\r\n      </form>\r\n    }\r\n  </form>\r\n</ion-content>\r\n\r\n<ng-template #mainTest let-mobile=\"mobile\">\r\n  <!-- Empty value -->\r\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <ion-row>\r\n        <ion-col>\r\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <!-- DD Default sign -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DD\"\r\n                      defaultSign=\"-\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DD\"\r\n                      defaultSign=\"-\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n                <ion-row *ngIf=\"geoPositionMessage\">\r\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMM Default sign -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMMSS Default sign -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      defaultSign=\"+\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n\r\n  <!-- Empty value -->\r\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <!-- DD -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DD, required</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n                <ion-row *ngIf=\"geoPositionMessage\">\r\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMM  -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n\r\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <!-- With value -->\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>With value</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n\r\n      <ion-row>\r\n        <!-- DD -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DD</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DD\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMMSS -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMM</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <!-- DDMMSS -->\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMMSS\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    ></mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n\r\n  <!-- Disable  -->\r\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-grid>\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-text><h4>Disabled control</h4></ion-text>\r\n        </ion-col>\r\n      </ion-row>\r\n      <ion-row>\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Disabled control</ion-label>\r\n              </ion-card-title>\r\n              <ion-card-subtitle>\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ stringify(formGroup.value) }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-card-subtitle>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"latitude\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      formControlName=\"longitude\"\r\n                      type=\"longitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Longitude\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\r\n                        <mat-icon>gps_fixed</mat-icon>\r\n                      </button>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\r\n              </ion-card-title>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <mat-checkbox\r\n                (change)=\"readonlyField.readonly = $event.checked\"\r\n                [checked]=\"readonlyField.readonly\"\r\n              ></mat-checkbox>\r\n\r\n              <ion-grid class=\"ion-no-padding\">\r\n                <ion-row>\r\n                  <ion-col>\r\n                    <mat-latlong-field\r\n                      #readonlyField\r\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\r\n                      type=\"latitude\"\r\n                      latLongPattern=\"DDMM\"\r\n                      placeholder=\"Latitude\"\r\n                      [readonly]=\"true\"\r\n                      [appearance]=\"appearance\"\r\n                      [mobile]=\"mobile\"\r\n                    >\r\n                      <mat-icon matPrefix>room</mat-icon>\r\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\r\n                    </mat-latlong-field>\r\n                  </ion-col>\r\n                </ion-row>\r\n              </ion-grid>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n\r\n        <ion-col>\r\n          <ion-card>\r\n            <ion-card-header>\r\n              <ion-card-title>\r\n                <ion-label color=\"primary\">With hint</ion-label>\r\n              </ion-card-title>\r\n            </ion-card-header>\r\n            <ion-card-content>\r\n              <mat-latlong-field\r\n                #readonlyField\r\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\r\n                type=\"latitude\"\r\n                latLongPattern=\"DDMM\"\r\n                placeholder=\"Latitude\"\r\n                [appearance]=\"appearance\"\r\n                [mobile]=\"mobile\"\r\n              >\r\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\r\n              </mat-latlong-field>\r\n            </ion-card-content>\r\n          </ion-card>\r\n        </ion-col>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</ng-template>\r\n\r\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\r\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\r\n    <ion-card>\r\n      <ion-card-header>\r\n        <ion-card-title>\r\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\r\n        </ion-card-title>\r\n        <ion-card-subtitle>\r\n          <ion-grid class=\"ion-no-padding\">\r\n            <ion-row class=\"ion-no-padding\">\r\n              <ion-col class=\"ion-no-padding\">\r\n                <ion-text color=\"medium\">\r\n                  <small>\r\n                    <pre>{{ formGroup.value | json }}</pre>\r\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\r\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\r\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\r\n                  </small>\r\n                </ion-text>\r\n              </ion-col>\r\n            </ion-row>\r\n            <ion-row class=\"ion-no-padding\">\r\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\r\n                <mat-latlong-field\r\n                  formControlName=\"latitude\"\r\n                  type=\"latitude\"\r\n                  [readonly]=\"true\"\r\n                  [latLongPattern]=\"pattern\"\r\n                  defaultSign=\"-\"\r\n                  placeholder=\"Latitude\"\r\n                  [appearance]=\"appearance\"\r\n                ></mat-latlong-field>\r\n              </ion-col>\r\n              <ion-col sizeLg=\"6\">\r\n                <mat-latlong-field\r\n                  formControlName=\"longitude\"\r\n                  type=\"longitude\"\r\n                  [readonly]=\"true\"\r\n                  [latLongPattern]=\"pattern\"\r\n                  defaultSign=\"-\"\r\n                  placeholder=\"Longitude\"\r\n                  [appearance]=\"appearance\"\r\n                ></mat-latlong-field>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-grid>\r\n        </ion-card-subtitle>\r\n      </ion-card-header>\r\n      <ion-card-content>\r\n        <ion-grid class=\"ion-no-padding\">\r\n          <ion-row>\r\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\r\n              <mat-latlong-field\r\n                formControlName=\"latitude\"\r\n                type=\"latitude\"\r\n                [latLongPattern]=\"pattern\"\r\n                defaultSign=\"-\"\r\n                placeholder=\"Latitude\"\r\n                [appearance]=\"appearance\"\r\n                [required]=\"required\"\r\n              >\r\n                <mat-icon matPrefix>room</mat-icon>\r\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                  <mat-icon>gps_fixed</mat-icon>\r\n                </button>\r\n              </mat-latlong-field>\r\n            </ion-col>\r\n            <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\r\n              <mat-latlong-field\r\n                formControlName=\"longitude\"\r\n                type=\"longitude\"\r\n                [latLongPattern]=\"pattern\"\r\n                defaultSign=\"-\"\r\n                placeholder=\"Longitude\"\r\n                [appearance]=\"appearance\"\r\n                [required]=\"required\"\r\n              >\r\n                <mat-icon matPrefix>room</mat-icon>\r\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\r\n                  <mat-icon>gps_fixed</mat-icon>\r\n                </button>\r\n              </mat-latlong-field>\r\n            </ion-col>\r\n          </ion-row>\r\n          <ion-row *ngIf=\"geoPositionMessage\">\r\n            <ion-col>{{ geoPositionMessage }}</ion-col>\r\n          </ion-row>\r\n        </ion-grid>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">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" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: PlatformService }] });
 
 class SwipeTestPage {
@@ -42779,11 +42781,11 @@ class BooleanTestPage extends AppForm {
         this.form.get(path)?.setValue(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: BooleanTestPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar color=\"primary\">\r\n    <ion-buttons slot=\"start\">\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n\r\n    <ion-title>Boolean field test page</ion-title>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content>\r\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\r\n    <a mat-tab-link [active]=\"mode === 'radio'\" (click)=\"toggleMode('radio')\">\r\n      <mat-label>Radio</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'checkbox'\" (click)=\"toggleMode('checkbox')\">\r\n      <mat-label>Checkbox</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'button'\" (click)=\"toggleMode('button')\">\r\n      <mat-label>Button</mat-label>\r\n    </a>\r\n  </nav>\r\n\r\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\r\n    @for (style of styles; track style) {\r\n      <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\r\n    }\r\n\r\n    <ng-template #components let-style=\"style\">\r\n      @if (style === mode) {\r\n        <ion-grid>\r\n          <ion-row>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledEmpty\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled false</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledFalse\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled true</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                    readonly=\"true\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n          </ion-row>\r\n          <ion-row>\r\n            <ion-col size=\"3\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledEmpty\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"3\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{\r\n                          form.controls.enabledEmptyRequired?.value | json\r\n                        }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledEmptyRequired\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"3\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled false</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledFalse\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled true</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n          </ion-row>\r\n          <ion-row>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n          </ion-row>\r\n\r\n          <ion-row>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledEmpty\"\r\n                    placeholder=\"Placeholder\"\r\n                    [clearable]=\"true\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledFalse\"\r\n                    placeholder=\"Placeholder\"\r\n                    floatLabel=\"always\"\r\n                    [clearable]=\"true\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                    appearance=\"outline\"\r\n                    [clearable]=\"true\"\r\n                  >\r\n                    <mat-icon matPrefix>room</mat-icon>\r\n                  </mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n\r\n            @if (style === 'button') {\r\n              <ion-col size=\"4\">\r\n                <ion-card>\r\n                  <ion-card-header>\r\n                    <ion-card-title>\r\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\r\n                    </ion-card-title>\r\n                    <ion-card-subtitle>\r\n                      <ion-text color=\"medium\">\r\n                        <small>\r\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                        </small>\r\n                      </ion-text>\r\n                    </ion-card-subtitle>\r\n                  </ion-card-header>\r\n                  <ion-card-content>\r\n                    <mat-boolean-field\r\n                      [style]=\"style\"\r\n                      formControlName=\"enabledEmpty\"\r\n                      placeholder=\"Placeholder\"\r\n                      [showButtonIcons]=\"false\"\r\n                    ></mat-boolean-field>\r\n                  </ion-card-content>\r\n                </ion-card>\r\n              </ion-col>\r\n            }\r\n          </ion-row>\r\n        </ion-grid>\r\n      }\r\n    </ng-template>\r\n  </form>\r\n</ion-content>\r\n", dependencies: [{ 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.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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: "pipe", type: i3.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, 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>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'radio'\" (click)=\"toggleMode('radio')\">\n      <mat-label>Radio</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'checkbox'\" (click)=\"toggleMode('checkbox')\">\n      <mat-label>Checkbox</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'button'\" (click)=\"toggleMode('button')\">\n      <mat-label>Button</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    @for (style of styles; track style) {\n      <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n    }\n\n    <ng-template #components let-style=\"style\">\n      @if (style === mode) {\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n  </form>\n</ion-content>\n", dependencies: [{ 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.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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: "pipe", type: i3.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: BooleanTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-boolean-test-page', template: "<ion-header>\r\n  <ion-toolbar color=\"primary\">\r\n    <ion-buttons slot=\"start\">\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n\r\n    <ion-title>Boolean field test page</ion-title>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content>\r\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\r\n    <a mat-tab-link [active]=\"mode === 'radio'\" (click)=\"toggleMode('radio')\">\r\n      <mat-label>Radio</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'checkbox'\" (click)=\"toggleMode('checkbox')\">\r\n      <mat-label>Checkbox</mat-label>\r\n    </a>\r\n    <a mat-tab-link [active]=\"mode === 'button'\" (click)=\"toggleMode('button')\">\r\n      <mat-label>Button</mat-label>\r\n    </a>\r\n  </nav>\r\n\r\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\r\n    @for (style of styles; track style) {\r\n      <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\r\n    }\r\n\r\n    <ng-template #components let-style=\"style\">\r\n      @if (style === mode) {\r\n        <ion-grid>\r\n          <ion-row>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledEmpty\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled false</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledFalse\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled true</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"disabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                    readonly=\"true\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n          </ion-row>\r\n          <ion-row>\r\n            <ion-col size=\"3\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledEmpty\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"3\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{\r\n                          form.controls.enabledEmptyRequired?.value | json\r\n                        }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledEmptyRequired\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"3\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled false</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledFalse\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled true</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n          </ion-row>\r\n          <ion-row>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n          </ion-row>\r\n\r\n          <ion-row>\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledEmpty\"\r\n                    placeholder=\"Placeholder\"\r\n                    [clearable]=\"true\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledFalse\"\r\n                    placeholder=\"Placeholder\"\r\n                    floatLabel=\"always\"\r\n                    [clearable]=\"true\"\r\n                  ></mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n\r\n            <ion-col size=\"4\">\r\n              <ion-card>\r\n                <ion-card-header>\r\n                  <ion-card-title>\r\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\r\n                  </ion-card-title>\r\n                  <ion-card-subtitle>\r\n                    <ion-text color=\"medium\">\r\n                      <small>\r\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\r\n                      </small>\r\n                    </ion-text>\r\n                  </ion-card-subtitle>\r\n                </ion-card-header>\r\n                <ion-card-content>\r\n                  <mat-boolean-field\r\n                    [style]=\"style\"\r\n                    formControlName=\"enabledTrue\"\r\n                    placeholder=\"Placeholder\"\r\n                    appearance=\"outline\"\r\n                    [clearable]=\"true\"\r\n                  >\r\n                    <mat-icon matPrefix>room</mat-icon>\r\n                  </mat-boolean-field>\r\n                </ion-card-content>\r\n              </ion-card>\r\n            </ion-col>\r\n\r\n            @if (style === 'button') {\r\n              <ion-col size=\"4\">\r\n                <ion-card>\r\n                  <ion-card-header>\r\n                    <ion-card-title>\r\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\r\n                    </ion-card-title>\r\n                    <ion-card-subtitle>\r\n                      <ion-text color=\"medium\">\r\n                        <small>\r\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\r\n                        </small>\r\n                      </ion-text>\r\n                    </ion-card-subtitle>\r\n                  </ion-card-header>\r\n                  <ion-card-content>\r\n                    <mat-boolean-field\r\n                      [style]=\"style\"\r\n                      formControlName=\"enabledEmpty\"\r\n                      placeholder=\"Placeholder\"\r\n                      [showButtonIcons]=\"false\"\r\n                    ></mat-boolean-field>\r\n                  </ion-card-content>\r\n                </ion-card>\r\n              </ion-col>\r\n            }\r\n          </ion-row>\r\n        </ion-grid>\r\n      }\r\n    </ng-template>\r\n  </form>\r\n</ion-content>\r\n" }]
+            args: [{ selector: 'app-boolean-test-page', 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>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'radio'\" (click)=\"toggleMode('radio')\">\n      <mat-label>Radio</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'checkbox'\" (click)=\"toggleMode('checkbox')\">\n      <mat-label>Checkbox</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'button'\" (click)=\"toggleMode('button')\">\n      <mat-label>Button</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    @for (style of styles; track style) {\n      <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n    }\n\n    <ng-template #components let-style=\"style\">\n      @if (style === mode) {\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 class TextFormTestingPage {
@@ -44421,7 +44423,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\r\n  color=\"primary\"\r\n  [canGoBack]=\"true\"\r\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\r\n  (onValidate)=\"save()\"\r\n  [backHref]=\"'/testing'\"\r\n>\r\n  <ion-title>Table (click to edit)</ion-title>\r\n  <ion-buttons slot=\"end\">\r\n    @if (selection | isEmptySelection) {\r\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\r\n\r\n      <!-- Add -->\r\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n\r\n      <!-- reset filter -->\r\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\r\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\r\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\r\n      </button>\r\n\r\n      <!-- show filter -->\r\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\r\n        <mat-icon\r\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\r\n          [matBadge]=\"filterCriteriaCount\"\r\n          matBadgeColor=\"accent\"\r\n          matBadgeSize=\"small\"\r\n          matBadgePosition=\"above after\"\r\n          aria-hidden=\"false\"\r\n        >\r\n          filter_list_alt\r\n        </mat-icon>\r\n        <ng-template #emptyFilter>\r\n          <mat-icon>filter_list_alt</mat-icon>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- save -->\r\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\r\n        <mat-icon>save</mat-icon>\r\n      </button>\r\n\r\n      <!-- start/stop timer to auto-load data -->\r\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\r\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\r\n    } @else {\r\n      <!-- if row selection -->\r\n      <!-- delete -->\r\n      <button\r\n        mat-icon-button\r\n        *ngIf=\"canEdit\"\r\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\r\n        (click)=\"deleteSelection($event)\"\r\n      >\r\n        <mat-icon>delete</mat-icon>\r\n      </button>\r\n\r\n      <!-- duplicate -->\r\n      <button\r\n        mat-icon-button\r\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\r\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\r\n        (click)=\"duplicateRow($event, selection.selected[0])\"\r\n      >\r\n        <mat-icon>file_copy</mat-icon>\r\n      </button>\r\n    }\r\n  </ion-buttons>\r\n</app-toolbar>\r\n<ion-content class=\"ion-no-padding\">\r\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\r\n    <ion-refresher-content></ion-refresher-content>\r\n  </ion-refresher>\r\n\r\n  <!-- error -->\r\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\r\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\r\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\r\n  </ion-item>\r\n\r\n  <!-- search -->\r\n  <mat-expansion-panel\r\n    #filterExpansionPanel\r\n    class=\"filter-panel\"\r\n    [class.filter-panel-floating]=\"filterPanelFloating\"\r\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\r\n  >\r\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\r\n      <ion-grid>\r\n        <ion-row>\r\n          <ion-col>\r\n            <!-- search text -->\r\n            <mat-form-field>\r\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\r\n              <ion-icon matPrefix name=\"search\"></ion-icon>\r\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\r\n              <button\r\n                mat-icon-button\r\n                matSuffix\r\n                tabindex=\"-1\"\r\n                type=\"button\"\r\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\r\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\r\n              >\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </mat-form-field>\r\n          </ion-col>\r\n        </ion-row>\r\n      </ion-grid>\r\n    </form>\r\n\r\n    <mat-action-row>\r\n      <!-- Counter  -->\r\n      <ion-label\r\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\r\n        [color]=\"empty && 'danger'\"\r\n        class=\"ion-padding\"\r\n      >\r\n        {{\r\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\r\n            | translate\r\n              : {\r\n                  count: (totalRowCount | numberFormat)\r\n                }\r\n        }}\r\n      </ion-label>\r\n\r\n      <div class=\"toolbar-spacer\"></div>\r\n\r\n      <button\r\n        mat-icon-button\r\n        color=\"accent\"\r\n        *ngIf=\"filterPanelFloating\"\r\n        (click)=\"toggleFilterPanelFloating()\"\r\n        class=\"hidden-xs hidden-sm hidden-md\"\r\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\r\n      >\r\n        <mat-icon>\r\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\r\n        </mat-icon>\r\n      </button>\r\n\r\n      <!-- Close panel -->\r\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\r\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\r\n      </ion-button>\r\n\r\n      <!-- Search button -->\r\n      <ion-button\r\n        mat-button\r\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\r\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\r\n        (click)=\"applyFilterAndClosePanel($event)\"\r\n      >\r\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\r\n      </ion-button>\r\n    </mat-action-row>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- table -->\r\n  <div [class.table-container]=\"!enableInfiniteScroll\">\r\n    <table\r\n      #table\r\n      mat-table\r\n      matSort\r\n      matSortDisableClear\r\n      [dataSource]=\"dataSource\"\r\n      [matSortActive]=\"defaultSortBy\"\r\n      [matSortDirection]=\"defaultSortDirection\"\r\n      [trackBy]=\"trackByFn\"\r\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\r\n    >\r\n      <!-- group header cells -->\r\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\r\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\r\n          <!-- start spacer -->\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"group-1\">\r\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\r\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"group-2\">\r\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\r\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <!-- end spacer -->\r\n          <ion-label></ion-label>\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\r\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\r\n          @if (selection | isMultipleSelection) {\r\n            <mat-checkbox\r\n              [checked]=\"this | isAllSelected\"\r\n              [indeterminate]=\"this | isNotAllSelected\"\r\n              (change)=\"$event ? masterToggle() : null\"\r\n            ></mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\r\n          <mat-checkbox\r\n            (click)=\"toggleSelectRow($event, row)\"\r\n            [checked]=\"selection | isSelected: row\"\r\n            tabindex=\"-1\"\r\n          ></mat-checkbox>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Id column -->\r\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label>#</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Label column -->\r\n      <ng-container matColumnDef=\"label\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\r\n          @if (row.editing) {\r\n            <mat-form-field>\r\n              <input\r\n                matInput\r\n                autocomplete=\"off\"\r\n                [formControl]=\"row.validator.controls['label']\"\r\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\r\n                [appAutofocus]=\"focusColumn === 'label'\"\r\n                [readonly]=\"!row.editing\"\r\n              />\r\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\r\n                ERROR.FIELD_REQUIRED\r\n              </mat-error>\r\n            </mat-form-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'label' }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Name column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\r\n          @if (row.editing) {\r\n            <mat-form-field>\r\n              <input\r\n                matInput\r\n                [formControl]=\"row.validator?.controls.name\"\r\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\r\n                [appAutofocus]=\"focusColumn === 'name'\"\r\n              />\r\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\r\n                ERROR.FIELD_REQUIRED\r\n              </mat-error>\r\n            </mat-form-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'name' }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Level column -->\r\n      <ng-container matColumnDef=\"levelId\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\r\n          @if (row.editing) {\r\n            <mat-autocomplete-field\r\n              [formControl]=\"row.validator.controls.levelId\"\r\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\r\n              floatLabel=\"never\"\r\n              [config]=\"autocompleteFields.level\"\r\n              [readonly]=\"!row.editing\"\r\n              [autofocus]=\"focusColumn === 'levelId'\"\r\n              [required]=\"true\"\r\n            ></mat-autocomplete-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Status column  -->\r\n      <ng-container matColumnDef=\"statusId\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <span translate>USER.STATUS</span>\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let row\"\r\n          [class.mat-form-field-disabled]=\"!row.editing\"\r\n          (click)=\"focusColumn = 'statusId'\"\r\n        >\r\n          <mat-form-field>\r\n            <mat-select\r\n              [formControl]=\"row.validator.controls['statusId']\"\r\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\r\n            >\r\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\r\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\r\n                <mat-label>{{ item.label | translate }}</mat-label>\r\n              </mat-option>\r\n            </mat-select>\r\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\r\n              ERROR.FIELD_REQUIRED\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Enum column  -->\r\n      <!-- NOTE : Never used in table  -->\r\n      <!--      <ng-container matColumnDef=\"values\">-->\r\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\r\n      <!--          <span translate>Enums</span>-->\r\n      <!--        </th>-->\r\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\r\n      <!--          <app-form-field-->\r\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\r\n      <!--            [definition]=\"columnDefinitions['values']\"-->\r\n      <!--          ></app-form-field>-->\r\n      <!--        </td>-->\r\n      <!--      </ng-container>-->\r\n\r\n      <!-- boolean (as checkbox) -->\r\n      <ng-container matColumnDef=\"boolean\">\r\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\r\n          <!-- if sortable, wrap the header with a mat-sort-header -->\r\n          <span mat-sort-header>\r\n            <ion-label>Boolean</ion-label>\r\n          </span>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (!readOnly && row.editing) {\r\n            <mat-boolean-field\r\n              floatLabel=\"never\"\r\n              [style]=\"'checkbox'\"\r\n              placeholder=\"Oui/Non\"\r\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\r\n              [compact]=\"true\"\r\n            ></mat-boolean-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- date -->\r\n      <ng-container matColumnDef=\"date\">\r\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\r\n          <!-- if sortable, wrap the header with a mat-sort-header -->\r\n          <span mat-sort-header>\r\n            <ion-label>Date</ion-label>\r\n          </span>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\r\n          @if (!readOnly && row.editing) {\r\n            <mat-date-time-field\r\n              floatLabel=\"never\"\r\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\r\n              [autofocus]=\"focusColumn === 'date'\"\r\n              placeholder=\"Date/Time\"\r\n              [compact]=\"true\"\r\n            ></mat-date-time-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- latitude -->\r\n      <ng-container matColumnDef=\"latitude\">\r\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\r\n          <!-- if sortable, wrap the header with a mat-sort-header -->\r\n          <span mat-sort-header>\r\n            <ion-label>Latitude</ion-label>\r\n          </span>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\r\n          @if (!readOnly && row.editing) {\r\n            <mat-latlong-field\r\n              floatLabel=\"never\"\r\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\r\n              placeholder=\"Latitude\"\r\n              [latLongPattern]=\"'DDMM'\"\r\n              [type]=\"'latitude'\"\r\n              [autofocus]=\"focusColumn === 'latitude'\"\r\n            ></mat-latlong-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' } }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Creation date column -->\r\n      <ng-container matColumnDef=\"updateDate\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\r\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\r\n            <small>\r\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\r\n            </small>\r\n          </ion-text>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Comment column -->\r\n      <ng-container matColumnDef=\"comments\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\r\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\r\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\r\n                      [readonly]=\"!row.editing\"></textarea>-->\r\n\r\n            <input\r\n              type=\"text\"\r\n              matInput\r\n              [formControl]=\"row.validator?.controls.comments\"\r\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\r\n              [readonly]=\"!row.editing\"\r\n            />\r\n          </mat-form-field>\r\n\r\n          <ng-template #iconComment>\r\n            <ion-icon\r\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\r\n              name=\"chatbox\"\r\n              slot=\"icon-only\"\r\n            ></ion-icon>\r\n          </ng-template>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Actions column -->\r\n      <app-nav-actions-column\r\n        [stickyEnd]=\"stickyEnd\"\r\n        (optionsClick)=\"openSelectColumnsModal($event)\"\r\n        [cellTemplate]=\"cellInjection\"\r\n        [showPending]=\"true\"\r\n      >\r\n        <!-- cell injection-->\r\n        <ng-template #cellInjection let-row>\r\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\r\n        </ng-template>\r\n      </app-nav-actions-column>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: displayedColumns\"\r\n        [class.mat-mdc-row-selected]=\"row.editing\"\r\n        [class.mat-mdc-row-error]=\"row.invalid\"\r\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\r\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\r\n        (click)=\"clickRow($event, row)\"\r\n        (keydown.escape)=\"escapeEditingRow($event)\"\r\n        [cdkTrapFocus]=\"row.invalid\"\r\n      ></tr>\r\n    </table>\r\n\r\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\r\n      <ion-item>\r\n        <ion-skeleton-text animated></ion-skeleton-text>\r\n      </ion-item>\r\n    </ng-container>\r\n\r\n    <ng-template #noResult>\r\n      <ion-item *ngIf=\"totalRowCount === 0\">\r\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\r\n      </ion-item>\r\n    </ng-template>\r\n\r\n    <ion-infinite-scroll\r\n      *ngIf=\"enableInfiniteScroll\"\r\n      [threshold]=\"mobile ? '10%' : '2%'\"\r\n      position=\"bottom\"\r\n      (ionInfinite)=\"fetchMore($event)\"\r\n    >\r\n      <ion-infinite-scroll-content\r\n        loadingSpinner=\"circles\"\r\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\r\n      ></ion-infinite-scroll-content>\r\n    </ion-infinite-scroll>\r\n  </div>\r\n</ion-content>\r\n\r\n<ion-footer>\r\n  <!-- Paginator  -->\r\n  <mat-paginator\r\n    *ngIf=\"!enableInfiniteScroll\"\r\n    [length]=\"totalRowCount\"\r\n    [pageSize]=\"defaultPageSize\"\r\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\r\n    showFirstLastButtons\r\n  ></mat-paginator>\r\n\r\n  <app-form-buttons-bar\r\n    *ngIf=\"canEdit && !mobile\"\r\n    (onCancel)=\"load()\"\r\n    (onSave)=\"save()\"\r\n    [disabled]=\"(loadingSubject | async) || !dirty\"\r\n  >\r\n    <!-- error -->\r\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\r\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\r\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\r\n    </ion-item>\r\n  </app-form-buttons-bar>\r\n</ion-footer>\r\n\r\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\r\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\r\n    <ion-icon name=\"add\"></ion-icon>\r\n  </ion-fab-button>\r\n</ion-fab>\r\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"], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -44434,7 +44436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                             provide: AppTable,
                             useExisting: forwardRef(() => TableTestPage),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\r\n  color=\"primary\"\r\n  [canGoBack]=\"true\"\r\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\r\n  (onValidate)=\"save()\"\r\n  [backHref]=\"'/testing'\"\r\n>\r\n  <ion-title>Table (click to edit)</ion-title>\r\n  <ion-buttons slot=\"end\">\r\n    @if (selection | isEmptySelection) {\r\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\r\n\r\n      <!-- Add -->\r\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n\r\n      <!-- reset filter -->\r\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\r\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\r\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\r\n      </button>\r\n\r\n      <!-- show filter -->\r\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\r\n        <mat-icon\r\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\r\n          [matBadge]=\"filterCriteriaCount\"\r\n          matBadgeColor=\"accent\"\r\n          matBadgeSize=\"small\"\r\n          matBadgePosition=\"above after\"\r\n          aria-hidden=\"false\"\r\n        >\r\n          filter_list_alt\r\n        </mat-icon>\r\n        <ng-template #emptyFilter>\r\n          <mat-icon>filter_list_alt</mat-icon>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- save -->\r\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\r\n        <mat-icon>save</mat-icon>\r\n      </button>\r\n\r\n      <!-- start/stop timer to auto-load data -->\r\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\r\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\r\n    } @else {\r\n      <!-- if row selection -->\r\n      <!-- delete -->\r\n      <button\r\n        mat-icon-button\r\n        *ngIf=\"canEdit\"\r\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\r\n        (click)=\"deleteSelection($event)\"\r\n      >\r\n        <mat-icon>delete</mat-icon>\r\n      </button>\r\n\r\n      <!-- duplicate -->\r\n      <button\r\n        mat-icon-button\r\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\r\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\r\n        (click)=\"duplicateRow($event, selection.selected[0])\"\r\n      >\r\n        <mat-icon>file_copy</mat-icon>\r\n      </button>\r\n    }\r\n  </ion-buttons>\r\n</app-toolbar>\r\n<ion-content class=\"ion-no-padding\">\r\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\r\n    <ion-refresher-content></ion-refresher-content>\r\n  </ion-refresher>\r\n\r\n  <!-- error -->\r\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\r\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\r\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\r\n  </ion-item>\r\n\r\n  <!-- search -->\r\n  <mat-expansion-panel\r\n    #filterExpansionPanel\r\n    class=\"filter-panel\"\r\n    [class.filter-panel-floating]=\"filterPanelFloating\"\r\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\r\n  >\r\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\r\n      <ion-grid>\r\n        <ion-row>\r\n          <ion-col>\r\n            <!-- search text -->\r\n            <mat-form-field>\r\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\r\n              <ion-icon matPrefix name=\"search\"></ion-icon>\r\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\r\n              <button\r\n                mat-icon-button\r\n                matSuffix\r\n                tabindex=\"-1\"\r\n                type=\"button\"\r\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\r\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\r\n              >\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </mat-form-field>\r\n          </ion-col>\r\n        </ion-row>\r\n      </ion-grid>\r\n    </form>\r\n\r\n    <mat-action-row>\r\n      <!-- Counter  -->\r\n      <ion-label\r\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\r\n        [color]=\"empty && 'danger'\"\r\n        class=\"ion-padding\"\r\n      >\r\n        {{\r\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\r\n            | translate\r\n              : {\r\n                  count: (totalRowCount | numberFormat)\r\n                }\r\n        }}\r\n      </ion-label>\r\n\r\n      <div class=\"toolbar-spacer\"></div>\r\n\r\n      <button\r\n        mat-icon-button\r\n        color=\"accent\"\r\n        *ngIf=\"filterPanelFloating\"\r\n        (click)=\"toggleFilterPanelFloating()\"\r\n        class=\"hidden-xs hidden-sm hidden-md\"\r\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\r\n      >\r\n        <mat-icon>\r\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\r\n        </mat-icon>\r\n      </button>\r\n\r\n      <!-- Close panel -->\r\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\r\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\r\n      </ion-button>\r\n\r\n      <!-- Search button -->\r\n      <ion-button\r\n        mat-button\r\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\r\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\r\n        (click)=\"applyFilterAndClosePanel($event)\"\r\n      >\r\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\r\n      </ion-button>\r\n    </mat-action-row>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- table -->\r\n  <div [class.table-container]=\"!enableInfiniteScroll\">\r\n    <table\r\n      #table\r\n      mat-table\r\n      matSort\r\n      matSortDisableClear\r\n      [dataSource]=\"dataSource\"\r\n      [matSortActive]=\"defaultSortBy\"\r\n      [matSortDirection]=\"defaultSortDirection\"\r\n      [trackBy]=\"trackByFn\"\r\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\r\n    >\r\n      <!-- group header cells -->\r\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\r\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\r\n          <!-- start spacer -->\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"group-1\">\r\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\r\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"group-2\">\r\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\r\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <!-- end spacer -->\r\n          <ion-label></ion-label>\r\n        </th>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\r\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\r\n          @if (selection | isMultipleSelection) {\r\n            <mat-checkbox\r\n              [checked]=\"this | isAllSelected\"\r\n              [indeterminate]=\"this | isNotAllSelected\"\r\n              (change)=\"$event ? masterToggle() : null\"\r\n            ></mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\r\n          <mat-checkbox\r\n            (click)=\"toggleSelectRow($event, row)\"\r\n            [checked]=\"selection | isSelected: row\"\r\n            tabindex=\"-1\"\r\n          ></mat-checkbox>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Id column -->\r\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label>#</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Label column -->\r\n      <ng-container matColumnDef=\"label\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\r\n          @if (row.editing) {\r\n            <mat-form-field>\r\n              <input\r\n                matInput\r\n                autocomplete=\"off\"\r\n                [formControl]=\"row.validator.controls['label']\"\r\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\r\n                [appAutofocus]=\"focusColumn === 'label'\"\r\n                [readonly]=\"!row.editing\"\r\n              />\r\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\r\n                ERROR.FIELD_REQUIRED\r\n              </mat-error>\r\n            </mat-form-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'label' }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Name column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\r\n          @if (row.editing) {\r\n            <mat-form-field>\r\n              <input\r\n                matInput\r\n                [formControl]=\"row.validator?.controls.name\"\r\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\r\n                [appAutofocus]=\"focusColumn === 'name'\"\r\n              />\r\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\r\n                ERROR.FIELD_REQUIRED\r\n              </mat-error>\r\n            </mat-form-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'name' }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Level column -->\r\n      <ng-container matColumnDef=\"levelId\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\r\n          @if (row.editing) {\r\n            <mat-autocomplete-field\r\n              [formControl]=\"row.validator.controls.levelId\"\r\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\r\n              floatLabel=\"never\"\r\n              [config]=\"autocompleteFields.level\"\r\n              [readonly]=\"!row.editing\"\r\n              [autofocus]=\"focusColumn === 'levelId'\"\r\n              [required]=\"true\"\r\n            ></mat-autocomplete-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Status column  -->\r\n      <ng-container matColumnDef=\"statusId\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <span translate>USER.STATUS</span>\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let row\"\r\n          [class.mat-form-field-disabled]=\"!row.editing\"\r\n          (click)=\"focusColumn = 'statusId'\"\r\n        >\r\n          <mat-form-field>\r\n            <mat-select\r\n              [formControl]=\"row.validator.controls['statusId']\"\r\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\r\n            >\r\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\r\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\r\n                <mat-label>{{ item.label | translate }}</mat-label>\r\n              </mat-option>\r\n            </mat-select>\r\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\r\n              ERROR.FIELD_REQUIRED\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Enum column  -->\r\n      <!-- NOTE : Never used in table  -->\r\n      <!--      <ng-container matColumnDef=\"values\">-->\r\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\r\n      <!--          <span translate>Enums</span>-->\r\n      <!--        </th>-->\r\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\r\n      <!--          <app-form-field-->\r\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\r\n      <!--            [definition]=\"columnDefinitions['values']\"-->\r\n      <!--          ></app-form-field>-->\r\n      <!--        </td>-->\r\n      <!--      </ng-container>-->\r\n\r\n      <!-- boolean (as checkbox) -->\r\n      <ng-container matColumnDef=\"boolean\">\r\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\r\n          <!-- if sortable, wrap the header with a mat-sort-header -->\r\n          <span mat-sort-header>\r\n            <ion-label>Boolean</ion-label>\r\n          </span>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (!readOnly && row.editing) {\r\n            <mat-boolean-field\r\n              floatLabel=\"never\"\r\n              [style]=\"'checkbox'\"\r\n              placeholder=\"Oui/Non\"\r\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\r\n              [compact]=\"true\"\r\n            ></mat-boolean-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- date -->\r\n      <ng-container matColumnDef=\"date\">\r\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\r\n          <!-- if sortable, wrap the header with a mat-sort-header -->\r\n          <span mat-sort-header>\r\n            <ion-label>Date</ion-label>\r\n          </span>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\r\n          @if (!readOnly && row.editing) {\r\n            <mat-date-time-field\r\n              floatLabel=\"never\"\r\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\r\n              [autofocus]=\"focusColumn === 'date'\"\r\n              placeholder=\"Date/Time\"\r\n              [compact]=\"true\"\r\n            ></mat-date-time-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- latitude -->\r\n      <ng-container matColumnDef=\"latitude\">\r\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\r\n          <!-- if sortable, wrap the header with a mat-sort-header -->\r\n          <span mat-sort-header>\r\n            <ion-label>Latitude</ion-label>\r\n          </span>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\r\n          @if (!readOnly && row.editing) {\r\n            <mat-latlong-field\r\n              floatLabel=\"never\"\r\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\r\n              placeholder=\"Latitude\"\r\n              [latLongPattern]=\"'DDMM'\"\r\n              [type]=\"'latitude'\"\r\n              [autofocus]=\"focusColumn === 'latitude'\"\r\n            ></mat-latlong-field>\r\n          } @else {\r\n            <ion-label appAutoTitle>\r\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' } }}\r\n            </ion-label>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Creation date column -->\r\n      <ng-container matColumnDef=\"updateDate\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\r\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\r\n            <small>\r\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\r\n            </small>\r\n          </ion-text>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Comment column -->\r\n      <ng-container matColumnDef=\"comments\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\r\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\r\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\r\n                      [readonly]=\"!row.editing\"></textarea>-->\r\n\r\n            <input\r\n              type=\"text\"\r\n              matInput\r\n              [formControl]=\"row.validator?.controls.comments\"\r\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\r\n              [readonly]=\"!row.editing\"\r\n            />\r\n          </mat-form-field>\r\n\r\n          <ng-template #iconComment>\r\n            <ion-icon\r\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\r\n              name=\"chatbox\"\r\n              slot=\"icon-only\"\r\n            ></ion-icon>\r\n          </ng-template>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- Actions column -->\r\n      <app-nav-actions-column\r\n        [stickyEnd]=\"stickyEnd\"\r\n        (optionsClick)=\"openSelectColumnsModal($event)\"\r\n        [cellTemplate]=\"cellInjection\"\r\n        [showPending]=\"true\"\r\n      >\r\n        <!-- cell injection-->\r\n        <ng-template #cellInjection let-row>\r\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\r\n        </ng-template>\r\n      </app-nav-actions-column>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: displayedColumns\"\r\n        [class.mat-mdc-row-selected]=\"row.editing\"\r\n        [class.mat-mdc-row-error]=\"row.invalid\"\r\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\r\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\r\n        (click)=\"clickRow($event, row)\"\r\n        (keydown.escape)=\"escapeEditingRow($event)\"\r\n        [cdkTrapFocus]=\"row.invalid\"\r\n      ></tr>\r\n    </table>\r\n\r\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\r\n      <ion-item>\r\n        <ion-skeleton-text animated></ion-skeleton-text>\r\n      </ion-item>\r\n    </ng-container>\r\n\r\n    <ng-template #noResult>\r\n      <ion-item *ngIf=\"totalRowCount === 0\">\r\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\r\n      </ion-item>\r\n    </ng-template>\r\n\r\n    <ion-infinite-scroll\r\n      *ngIf=\"enableInfiniteScroll\"\r\n      [threshold]=\"mobile ? '10%' : '2%'\"\r\n      position=\"bottom\"\r\n      (ionInfinite)=\"fetchMore($event)\"\r\n    >\r\n      <ion-infinite-scroll-content\r\n        loadingSpinner=\"circles\"\r\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\r\n      ></ion-infinite-scroll-content>\r\n    </ion-infinite-scroll>\r\n  </div>\r\n</ion-content>\r\n\r\n<ion-footer>\r\n  <!-- Paginator  -->\r\n  <mat-paginator\r\n    *ngIf=\"!enableInfiniteScroll\"\r\n    [length]=\"totalRowCount\"\r\n    [pageSize]=\"defaultPageSize\"\r\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\r\n    showFirstLastButtons\r\n  ></mat-paginator>\r\n\r\n  <app-form-buttons-bar\r\n    *ngIf=\"canEdit && !mobile\"\r\n    (onCancel)=\"load()\"\r\n    (onSave)=\"save()\"\r\n    [disabled]=\"(loadingSubject | async) || !dirty\"\r\n  >\r\n    <!-- error -->\r\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\r\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\r\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\r\n    </ion-item>\r\n  </app-form-buttons-bar>\r\n</ion-footer>\r\n\r\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\r\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\r\n    <ion-icon name=\"add\"></ion-icon>\r\n  </ion-fab-button>\r\n</ion-fab>\r\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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (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"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: AppValidatorService }, { type: i1$3.UntypedFormBuilder }], propDecorators: { filterPanelFloating: [{
                 type: Input
             }], enableInfiniteScroll: [{