@sumaris-net/ngx-components 2.8.4 → 2.8.5

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

@@ -47,7 +47,7 @@ import { MaskitoDirective } from '@maskito/angular';
 import { Capacitor } from '@capacitor/core';
 import { Keyboard } from '@capacitor/keyboard';
 import * as i6 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
 import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i9 from '@angular/material/button';
@@ -5566,6 +5566,7 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
 const noop$8 = () => { };
 class MatBooleanField {
     cd;
+    el;
     formGroupDir;
     _onChangeCallback = noop$8;
     _onTouchedCallback = noop$8;
@@ -5574,6 +5575,7 @@ class MatBooleanField {
     _tabindex;
     _showRadio = false; // Will be changed when focus in
     _focused = false;
+    radioGroup;
     yesButton;
     noButton;
     checkboxButton;
@@ -5598,6 +5600,7 @@ class MatBooleanField {
     yesIcon = 'checkmark';
     noIcon = 'close';
     clearable = false;
+    labelPosition = 'after';
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
@@ -5631,11 +5634,12 @@ class MatBooleanField {
         return this._value;
     }
     // eslint-disable-next-line @angular-eslint/no-output-on-prefix,@angular-eslint/no-output-rename
-    onPressEnter = new EventEmitter();
+    keyupEnter = new EventEmitter();
     // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-    onBlur = new EventEmitter();
-    constructor(cd, formGroupDir) {
+    blurred = new EventEmitter();
+    constructor(cd, el, formGroupDir) {
         this.cd = cd;
+        this.el = el;
         this.formGroupDir = formGroupDir;
     }
     ngOnInit() {
@@ -5652,6 +5656,9 @@ class MatBooleanField {
         this.updateFakeInput();
         this.updateTabIndex();
     }
+    ngOnDestroy() {
+        this.blurred.complete();
+    }
     writeValue(value, event) {
         if (this._writing)
             return;
@@ -5670,7 +5677,7 @@ class MatBooleanField {
                 this._onChangeCallback(value);
             }
             if (event)
-                this.onPressEnter.emit(event);
+                this.keyupEnter.emit(event);
         }
         this.markForCheck();
     }
@@ -5695,9 +5702,12 @@ class MatBooleanField {
     }
     focus() {
         this._focused = true;
+        this._onTouchedCallback();
         setTimeout(() => {
             if (this.yesButton) {
                 this.yesButton.focus();
+                this.yesButton._inputElement.nativeElement.onblur = (e) => this.onBlur(e);
+                this.noButton._inputElement.nativeElement.onblur = (e) => this.onBlur(e);
             }
             else if (this.checkboxButton) {
                 this.checkboxButton.focus();
@@ -5761,8 +5771,14 @@ class MatBooleanField {
             }
         }
         if (this.yesButton) {
-            this.yesButton._inputElement.nativeElement.tabIndex = this.showRadio ? this._tabindex : -1;
-            this.noButton._inputElement.nativeElement.tabIndex = this.showRadio ? this._tabindex + 1 : -1;
+            if (this.showRadio) {
+                this.yesButton._inputElement.nativeElement.tabIndex = this._tabindex;
+                this.noButton._inputElement.nativeElement.tabIndex = this._tabindex + 1;
+            }
+            else {
+                this.yesButton._inputElement.nativeElement.tabIndex = -1;
+                this.noButton._inputElement.nativeElement.tabIndex = -1;
+            }
         }
         else if (this.checkboxButton) {
             this.checkboxButton._inputElement.nativeElement.tabIndex = this.showRadio ? this._tabindex : -1;
@@ -5777,20 +5793,36 @@ class MatBooleanField {
             return; // Skip
         event?.preventDefault();
         event?.stopPropagation();
-        this._focused = false;
-        this.formControl.setValue(null);
-        this.updateFakeInput();
-        this.updateTabIndex();
+        this.formControl.reset(null);
+    }
+    onBlur(event) {
+        // Setup a one-time focus event handler
+        const focusListener = (focusEvent) => {
+            // change id here to your actual requirement
+            const currentInput = this.el.nativeElement.querySelector('input[type=radio]');
+            if (focusEvent.target !== currentInput) {
+                this._focused = false;
+                this.updateFakeInput();
+                this.updateTabIndex();
+                this.blurred.emit(focusEvent);
+            }
+            // Remove the event listener after it has executed once
+            window.removeEventListener('focus', focusListener);
+        };
+        window.addEventListener('focus', focusListener, true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", required: "required", compact: "compact", style: "style", buttonsColCount: "buttonsColCount", classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: "showButtonIcons", yesIcon: "yesIcon", noIcon: "noIcon", clearable: "clearable", tabindex: "tabindex", showRadio: "showRadio", value: "value" }, outputs: { onPressEnter: "keyup.enter", onBlur: "onBlur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "yesButton", first: true, predicate: ["yesButton"], descendants: true }, { propertyName: "noButton", first: true, predicate: ["noButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }, { propertyName: "fakeInput", first: true, predicate: ["fakeInput"], 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 [placeholder]=\"placeholder\" [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          [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        >\n          <mat-radio-button #yesButton [value]=\"true\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noButton [value]=\"false\">\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)=\"clear($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          #matInput\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          [indeterminate]=\"value === null || value === undefined\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [tabindex]=\"tabindex\"\n        ></mat-checkbox>\n\n        @if (placeholder) {\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n        } @else {\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)=\"clear($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 matInput type=\"text\" hidden [formControl]=\"formControl\" [required]=\"required\" />\n        @if (formControl.disabled) {\n          <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex\"\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              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n              (click)=\"writeValue(false, $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)=\"clear($event)\"\n            [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);white-space:normal;padding:0 2px;height:var(--mat-mdc-form-field-height)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], 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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$1.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", required: "required", compact: "compact", style: "style", buttonsColCount: "buttonsColCount", classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: "showButtonIcons", yesIcon: "yesIcon", noIcon: "noIcon", clearable: "clearable", labelPosition: "labelPosition", tabindex: "tabindex", showRadio: "showRadio", value: "value" }, outputs: { keyupEnter: "keyup.enter", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "radioGroup", first: true, predicate: MatRadioGroup, descendants: true }, { propertyName: "yesButton", first: true, predicate: ["yesButton"], descendants: true }, { propertyName: "noButton", first: true, predicate: ["noButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }, { propertyName: "fakeInput", first: true, predicate: ["fakeInput"], 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 [placeholder]=\"placeholder\" [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          [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        >\n          <mat-radio-button #yesButton [value]=\"true\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noButton [value]=\"false\">\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)=\"clear($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          #matInput\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          [indeterminate]=\"value === null || value === undefined\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [tabindex]=\"tabindex\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n        >\n          {{ placeholder || '' }}\n        </mat-checkbox>\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)=\"clear($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 matInput type=\"text\" hidden [formControl]=\"formControl\" [required]=\"required\" />\n        @if (formControl.disabled) {\n          <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex\"\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              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n              (click)=\"writeValue(false, $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)=\"clear($event)\"\n            [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);white-space:normal;padding:0 2px;height:var(--mat-mdc-form-field-height)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], 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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$1.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: "17.2.4", ngImport: i0, type: MatBooleanField, decorators: [{
             type: Component,
-            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 [placeholder]=\"placeholder\" [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          [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        >\n          <mat-radio-button #yesButton [value]=\"true\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noButton [value]=\"false\">\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)=\"clear($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          #matInput\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          [indeterminate]=\"value === null || value === undefined\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [tabindex]=\"tabindex\"\n        ></mat-checkbox>\n\n        @if (placeholder) {\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n        } @else {\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)=\"clear($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 matInput type=\"text\" hidden [formControl]=\"formControl\" [required]=\"required\" />\n        @if (formControl.disabled) {\n          <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex\"\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              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n              (click)=\"writeValue(false, $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)=\"clear($event)\"\n            [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);white-space:normal;padding:0 2px;height:var(--mat-mdc-form-field-height)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
+            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 [placeholder]=\"placeholder\" [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          [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        >\n          <mat-radio-button #yesButton [value]=\"true\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noButton [value]=\"false\">\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)=\"clear($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          #matInput\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          [indeterminate]=\"value === null || value === undefined\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [tabindex]=\"tabindex\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n        >\n          {{ placeholder || '' }}\n        </mat-checkbox>\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)=\"clear($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 matInput type=\"text\" hidden [formControl]=\"formControl\" [required]=\"required\" />\n        @if (formControl.disabled) {\n          <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex\"\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              class=\"mat-form-field-button\"\n              [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n              (click)=\"writeValue(false, $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)=\"clear($event)\"\n            [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);white-space:normal;padding:0 2px;height:var(--mat-mdc-form-field-height)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
-                }] }], propDecorators: { yesButton: [{
+                }] }], propDecorators: { radioGroup: [{
+                type: ViewChild,
+                args: [MatRadioGroup]
+            }], yesButton: [{
                 type: ViewChild,
                 args: ['yesButton']
             }], noButton: [{
@@ -5841,17 +5873,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }], clearable: [{
                 type: Input
+            }], labelPosition: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], showRadio: [{
                 type: Input
             }], value: [{
                 type: Input
-            }], onPressEnter: [{
+            }], keyupEnter: [{
                 type: Output,
                 args: ['keyup.enter']
-            }], onBlur: [{
-                type: Output
+            }], blurred: [{
+                type: Output,
+                args: ['blur']
             }] } });
 
 class SharedMatBooleanModule {
@@ -12832,7 +12867,7 @@ class AppFormField {
                 useExisting: forwardRef(() => AppFormField),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      autocomplete=\"off\"\n      [readonly]=\"readonly\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      pattern=\"-?[0-9]*\"\n      step=\"1\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      decimal=\"true\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      [appAutofocus]=\"autofocus\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [step]=\"numberInputStep\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <mat-select\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    >\n      <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [clearable]=\"clearable\"\n    [items]=\"_values\"\n    [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n    [config]=\"definition.autocomplete\"\n    [showAllOnFocus]=\"true\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [style.color]=\"getColorContrast(formControl.value)\"\n      [style.background]=\"formControl.value\"\n      [colorPicker]=\"formControl.value\"\n      (colorPickerChange)=\"writeValue($event)\"\n      [cpSaveClickOutside]=\"true\"\n      cpPosition=\"top\"\n      cpOutputFormat=\"hex\"\n      [cpOKButton]=\"false\"\n      [required]=\"required\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [tabindex]=\"tabindex\"\n    [clearable]=\"clearable\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.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: i13.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: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "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", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      autocomplete=\"off\"\n      [readonly]=\"readonly\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      pattern=\"-?[0-9]*\"\n      step=\"1\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      decimal=\"true\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      [appAutofocus]=\"autofocus\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [step]=\"numberInputStep\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <mat-select\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    >\n      <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [clearable]=\"clearable\"\n    [items]=\"_values\"\n    [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n    [config]=\"definition.autocomplete\"\n    [showAllOnFocus]=\"true\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [style.color]=\"getColorContrast(formControl.value)\"\n      [style.background]=\"formControl.value\"\n      [colorPicker]=\"formControl.value\"\n      (colorPickerChange)=\"writeValue($event)\"\n      [cpSaveClickOutside]=\"true\"\n      cpPosition=\"top\"\n      cpOutputFormat=\"hex\"\n      [cpOKButton]=\"false\"\n      [required]=\"required\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [tabindex]=\"tabindex\"\n    [clearable]=\"clearable\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.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: i13.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: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "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", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppFormField, decorators: [{
             type: Component,
@@ -30934,7 +30969,7 @@ class AppPropertiesTable extends AppInMemoryTable {
         return isNotNil(value) ? value : definition.defaultValue;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" 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\n  <div class=\"toolbar-spacer\"></div>\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      [matBadge]=\"filterCriteriaCount\"\n      [matBadgeHidden]=\"filterIsEmpty\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      filter_list_alt\n    </mat-icon>\n  </button>\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n\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\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-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        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\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]=\"'52px'\"\n    >\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n        [required]=\"true\"\n      ></app-row-field>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button\n            type=\"button\"\n            mat-icon-button\n            *ngIf=\"\n              !mobile &&\n              !disabled &&\n              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n            \"\n            [class.visible-hover-row]=\"!mobile\"\n            [tabindex]=\"-1\"\n            [title]=\"'SETTINGS.BTN_RESET_PROPERTY' | translate\"\n            (click)=\"resetProperty($event, row)\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.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  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "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.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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.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: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4$1.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: "directive", type: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "required", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" 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\n  <div class=\"toolbar-spacer\"></div>\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      [matBadge]=\"filterCriteriaCount\"\n      [matBadgeHidden]=\"filterIsEmpty\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      filter_list_alt\n    </mat-icon>\n  </button>\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n\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\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-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        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\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]=\"'52px'\"\n    >\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n        [required]=\"true\"\n      ></app-row-field>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button\n            type=\"button\"\n            mat-icon-button\n            *ngIf=\"\n              !mobile &&\n              !disabled &&\n              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n            \"\n            [class.visible-hover-row]=\"!mobile\"\n            [tabindex]=\"-1\"\n            [title]=\"'SETTINGS.BTN_RESET_PROPERTY' | translate\"\n            (click)=\"resetProperty($event, row)\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.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  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "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.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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.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: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4$1.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: "directive", type: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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", "blur"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "required", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
@@ -39755,7 +39790,7 @@ class MatCommonTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatCommonTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MatCommonTestPage, selector: "mat-common-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>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{ stringify(form.controls.empty.value) }}\n                    </pre>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disable</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly toggle</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.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: "directive", type: i13.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "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", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MatCommonTestPage, selector: "mat-common-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>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{ stringify(form.controls.empty.value) }}\n                    </pre>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disable</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly toggle</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.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: "directive", type: i13.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "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", "blur"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatCommonTestPage, decorators: [{
             type: Component,
@@ -39805,11 +39840,11 @@ class BooleanTestPage extends AppForm {
         this.form.get(path)?.setValue(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BooleanTestPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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-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</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=\"4\">\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 empty + 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.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                    floatLabel=\"always\"\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=\"enabledEmptyRequired\"\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$1.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.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", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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-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</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=\"4\">\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 empty + 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.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                    floatLabel=\"always\"\n                    [clearable]=\"true\"\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=\"enabledEmptyRequired\"\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$1.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.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", "blur"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BooleanTestPage, decorators: [{
             type: Component,
-            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-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</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=\"4\">\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 empty + 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.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                    floatLabel=\"always\"\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=\"enabledEmptyRequired\"\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" }]
+            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-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</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=\"4\">\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 empty + 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.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                    floatLabel=\"always\"\n                    [clearable]=\"true\"\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=\"enabledEmptyRequired\"\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$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 class TextFormTestingPage {
@@ -41066,7 +41101,7 @@ class TableTestPage extends AppTable {
                 provide: AppTable,
                 useExisting: forwardRef(() => TableTestPage),
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat)\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [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          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [formControl]=\"row.validator.controls['label']\"\n              [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n              [appAutofocus]=\"row.editing && 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          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef 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          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator?.controls.name\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.editing && 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          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef 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          <mat-autocomplete-field\n            *ngIf=\"row.editing; else readonlyCell\"\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          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          </ng-template>\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          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\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          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          </ng-template>\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          <mat-date-time-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.date';\n              let dateControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"dateControl\"\n            [autofocus]=\"focusColumn === 'date'\"\n            [compact]=\"true\"\n          ></mat-date-time-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          </ng-template>\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          <mat-latlong-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.latitude';\n              let latitudeControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"latitudeControl\"\n            [latLongPattern]=\"'DDMM'\"\n            [autofocus]=\"focusColumn === 'latitude'\"\n          ></mat-latlong-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat }}\n            </ion-label>\n          </ng-template>\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 buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4$1.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: i13.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: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "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", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "onBlur"] }, { 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: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.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$1.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 [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [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          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [formControl]=\"row.validator.controls['label']\"\n              [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n              [appAutofocus]=\"row.editing && 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          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef 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          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator?.controls.name\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.editing && 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          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef 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          <mat-autocomplete-field\n            *ngIf=\"row.editing; else readonlyCell\"\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          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          </ng-template>\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          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\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          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          </ng-template>\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          <mat-date-time-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.date';\n              let dateControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"dateControl\"\n            [autofocus]=\"focusColumn === 'date'\"\n            [compact]=\"true\"\n          ></mat-date-time-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          </ng-template>\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          <mat-latlong-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.latitude';\n              let latitudeControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"latitudeControl\"\n            [latLongPattern]=\"'DDMM'\"\n            [autofocus]=\"focusColumn === 'latitude'\"\n          ></mat-latlong-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat }}\n            </ion-label>\n          </ng-template>\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 buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4$1.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: i13.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: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "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", "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: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.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$1.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: "17.2.4", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -41319,7 +41354,7 @@ class Table2TestPage extends AppTable {
                 provide: AppTable,
                 useExisting: forwardRef(() => Table2TestPage),
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button 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    } @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      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"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-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4$1.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: "directive", type: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { 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", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "onBlur"] }, { 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: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button 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    } @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      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"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-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4$1.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: "directive", type: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { 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", "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: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,