@sumaris-net/ngx-components 18.9.3 → 18.9.4

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

@@ -6439,7 +6439,6 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
 const noop$7 = () => { };
 class MatBooleanField {
     cd;
-    el;
     formGroupDir;
     _onChangeCallback = noop$7;
     _onTouchedCallback = noop$7;
@@ -6513,9 +6512,8 @@ class MatBooleanField {
     focussed = new EventEmitter();
     // eslint-disable-next-line @angular-eslint/no-output-on-prefix
     blurred = new EventEmitter();
-    constructor(cd, el, formGroupDir) {
+    constructor(cd, formGroupDir) {
         this.cd = cd;
-        this.el = el;
         this.formGroupDir = formGroupDir;
     }
     ngOnInit() {
@@ -6589,7 +6587,8 @@ class MatBooleanField {
         this.focus();
     }
     onBlurInput(event) {
-        const internalEvent = this.inputsElements.some((el) => el === event.relatedTarget);
+        const relatedTarget = event.relatedTarget || event.target;
+        const internalEvent = this.inputsElements.some((el) => el === relatedTarget);
         if (!internalEvent && this._focused) {
             this._focused = false;
             this.updateFakeInput();
@@ -6695,13 +6694,13 @@ class MatBooleanField {
             .concat(this.checkboxButton ? [this.checkboxButton._inputElement.nativeElement] : [])
             .concat(this.fakeInput ? [this.fakeInput.nativeElement] : []);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], style: "style", buttonsColCount: ["buttonsColCount", "buttonsColCount", numberAttribute], classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: ["showButtonIcons", "showButtonIcons", booleanAttribute], yesIcon: "yesIcon", noIcon: "noIcon", clearable: ["clearable", "clearable", booleanAttribute], labelPosition: "labelPosition", tabindex: ["tabindex", "tabindex", numberAttribute], showRadio: ["showRadio", "showRadio", booleanAttribute], value: "value" }, outputs: { keyupEnter: "keyup.enter", focussed: "focus", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "yesRadioButton", first: true, predicate: ["yesRadioButton"], descendants: true }, { propertyName: "noRadioButton", first: true, predicate: ["noRadioButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }], ngImport: i0, template: "@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n    </ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  @switch (style) {\n    <!-- Radio -->\n    @case ('radio') {\n      <mat-form-field\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n      >\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">\n            {{ placeholder }}\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n          </mat-label>\n        }\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          type=\"text\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [appAutofocus]=\"autofocus\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- radio button -->\n        <mat-radio-group\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [formControl]=\"formControl\"\n          (change)=\"onRadioValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n            <span>{{ noLabel | translate }}</span>\n          </mat-radio-button>\n        </mat-radio-group>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Checkbox -->\n    @case ('checkbox') {\n      <mat-form-field\n        floatLabel=\"always\"\n        [appearance]=\"appearance\"\n        class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          [indeterminate]=\"value | isNil\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n          [tabIndex]=\"-1\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            {{ placeholder || '' }}\n          }\n        </mat-checkbox>\n\n        @if (floatLabel === 'never' || !placeholder) {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Buttons -->\n    @case ('button') {\n      <mat-form-field\n        [floatLabel]=\"'always'\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n        } @else {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        <input\n          #fakeInput\n          matInput\n          type=\"text\"\n          class=\"cdk-visually-hidden\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [tabindex]=\"_tabindex\"\n        />\n        @if (formControl.disabled) {\n          <ion-text>\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n          </ion-text>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              #yesButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(true, $event)\"\n              (keyup.enter)=\"writeValue(true, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && yesIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ yesLabel | translate }}\n            </ion-button>\n\n            <!-- No button -->\n            <ion-button\n              #noButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(false, $event)\"\n              (keydown.space)=\"toggleValue($event)\"\n              (keyup.enter)=\"writeValue(false, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && noIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ noLabel | translate }}\n            </ion-button>\n          </div>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <ion-button\n            matSuffix\n            fill=\"clear\"\n            size=\"small\"\n            color=\"medium\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            [class.cdk-visually-hidden]=\"_value | isNil\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n  }\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"], dependencies: [{ kind: "directive", type: i3$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.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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", "disabledInteractive"], 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", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6$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: "18.2.13", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], style: "style", buttonsColCount: ["buttonsColCount", "buttonsColCount", numberOrNilAttribute], classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: ["showButtonIcons", "showButtonIcons", booleanAttribute], yesIcon: "yesIcon", noIcon: "noIcon", clearable: ["clearable", "clearable", booleanAttribute], labelPosition: "labelPosition", tabindex: ["tabindex", "tabindex", numberOrNilAttribute], showRadio: ["showRadio", "showRadio", booleanAttribute], value: "value" }, outputs: { keyupEnter: "keyup.enter", focussed: "focus", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "yesRadioButton", first: true, predicate: ["yesRadioButton"], descendants: true }, { propertyName: "noRadioButton", first: true, predicate: ["noRadioButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }], ngImport: i0, template: "@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n    </ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  @switch (style) {\n    <!-- Radio -->\n    @case ('radio') {\n      <mat-form-field\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n      >\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">\n            {{ placeholder }}\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n          </mat-label>\n        }\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          type=\"text\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [appAutofocus]=\"autofocus\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- radio button -->\n        <mat-radio-group\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [formControl]=\"formControl\"\n          (change)=\"onRadioValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n            <span>{{ noLabel | translate }}</span>\n          </mat-radio-button>\n        </mat-radio-group>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Checkbox -->\n    @case ('checkbox') {\n      <mat-form-field\n        [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\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\n        <!-- Add a empty label, for layout alignment -->\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        <input\n          matInput\n          #fakeInput\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          [indeterminate]=\"value | isNil\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n          [tabIndex]=\"-1\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            {{ placeholder || '' }}\n          }\n        </mat-checkbox>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Buttons -->\n    @case ('button') {\n      <mat-form-field\n        [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\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        }\n\n        <input\n          #fakeInput\n          matInput\n          type=\"text\"\n          class=\"cdk-visually-hidden\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [tabindex]=\"_tabindex\"\n        />\n        @if (formControl.disabled) {\n          <ion-text>\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n          </ion-text>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              #yesButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(true, $event)\"\n              (keyup.enter)=\"writeValue(true, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && yesIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ yesLabel | translate }}\n            </ion-button>\n\n            <!-- No button -->\n            <ion-button\n              #noButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(false, $event)\"\n              (keydown.space)=\"toggleValue($event)\"\n              (keyup.enter)=\"writeValue(false, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && noIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ noLabel | translate }}\n            </ion-button>\n          </div>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <ion-button\n            matSuffix\n            fill=\"clear\"\n            size=\"small\"\n            color=\"medium\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            [class.cdk-visually-hidden]=\"_value | isNil\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n  }\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"], dependencies: [{ kind: "directive", type: i3$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.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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", "disabledInteractive"], 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", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6$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: "18.2.13", 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 [formControl]=\"formControl\" />\n    <ion-text>\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n    </ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  @switch (style) {\n    <!-- Radio -->\n    @case ('radio') {\n      <mat-form-field\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n      >\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">\n            {{ placeholder }}\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n          </mat-label>\n        }\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          type=\"text\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [appAutofocus]=\"autofocus\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- radio button -->\n        <mat-radio-group\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [formControl]=\"formControl\"\n          (change)=\"onRadioValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n            <span>{{ noLabel | translate }}</span>\n          </mat-radio-button>\n        </mat-radio-group>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Checkbox -->\n    @case ('checkbox') {\n      <mat-form-field\n        floatLabel=\"always\"\n        [appearance]=\"appearance\"\n        class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          [indeterminate]=\"value | isNil\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n          [tabIndex]=\"-1\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            {{ placeholder || '' }}\n          }\n        </mat-checkbox>\n\n        @if (floatLabel === 'never' || !placeholder) {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Buttons -->\n    @case ('button') {\n      <mat-form-field\n        [floatLabel]=\"'always'\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n        } @else {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        <input\n          #fakeInput\n          matInput\n          type=\"text\"\n          class=\"cdk-visually-hidden\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [tabindex]=\"_tabindex\"\n        />\n        @if (formControl.disabled) {\n          <ion-text>\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n          </ion-text>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              #yesButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(true, $event)\"\n              (keyup.enter)=\"writeValue(true, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && yesIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ yesLabel | translate }}\n            </ion-button>\n\n            <!-- No button -->\n            <ion-button\n              #noButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(false, $event)\"\n              (keydown.space)=\"toggleValue($event)\"\n              (keyup.enter)=\"writeValue(false, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && noIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ noLabel | translate }}\n            </ion-button>\n          </div>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <ion-button\n            matSuffix\n            fill=\"clear\"\n            size=\"small\"\n            color=\"medium\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            [class.cdk-visually-hidden]=\"_value | isNil\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n  }\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.FormGroupDirective, decorators: [{
+            args: [{ selector: 'mat-boolean-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{ classList }}\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>\n      {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n    </ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  @switch (style) {\n    <!-- Radio -->\n    @case ('radio') {\n      <mat-form-field\n        [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n      >\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label [title]=\"placeholder\">\n            {{ placeholder }}\n            <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n          </mat-label>\n        }\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <input\n          matInput\n          #fakeInput\n          type=\"text\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [appAutofocus]=\"autofocus\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n        />\n\n        <!-- radio button -->\n        <mat-radio-group\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [formControl]=\"formControl\"\n          (change)=\"onRadioValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n            <span>{{ yesLabel | translate }}</span>\n          </mat-radio-button>\n          &nbsp;\n          <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n            <span>{{ noLabel | translate }}</span>\n          </mat-radio-button>\n        </mat-radio-group>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Checkbox -->\n    @case ('checkbox') {\n      <mat-form-field\n        [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\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\n        <!-- Add a empty label, for layout alignment -->\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label>&nbsp;</mat-label>\n        }\n\n        <input\n          matInput\n          #fakeInput\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [required]=\"required\"\n          [class.cdk-visually-hidden]=\"showRadio\"\n          [tabindex]=\"tabindex\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n        />\n\n        <!-- checkbox, when compact -->\n        <mat-checkbox\n          #checkboxButton\n          [formControl]=\"formControl\"\n          [indeterminate]=\"value | isNil\"\n          [class.cdk-visually-hidden]=\"!showRadio\"\n          [labelPosition]=\"labelPosition\"\n          [title]=\"placeholder || ''\"\n          [tabIndex]=\"-1\"\n          (change)=\"onCheckboxValueChanged($event)\"\n          (blur)=\"onBlurInput($event)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            {{ placeholder || '' }}\n          }\n        </mat-checkbox>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"clearValue($event)\"\n            [hidden]=\"_value | isNil\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n\n    <!-- Buttons -->\n    @case ('button') {\n      <mat-form-field\n        [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\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        }\n\n        <input\n          #fakeInput\n          matInput\n          type=\"text\"\n          class=\"cdk-visually-hidden\"\n          readonly=\"true\"\n          [formControl]=\"formControl\"\n          [appAutofocus]=\"autofocus\"\n          (focus)=\"onFocusFakeInput($event)\"\n          (keydown.space)=\"toggleValue($event)\"\n          (keyup.arrowLeft)=\"toggleValue($event)\"\n          (keyup.arrowRight)=\"toggleValue($event)\"\n          (keyup.arrowUp)=\"toggleValue($event)\"\n          (keyup.arrowDown)=\"toggleValue($event)\"\n          [required]=\"required\"\n          [tabindex]=\"_tabindex\"\n        />\n        @if (formControl.disabled) {\n          <ion-text>\n            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n          </ion-text>\n        } @else {\n          <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n            <!-- yes -->\n            <ion-button\n              #yesButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(true, $event)\"\n              (keyup.enter)=\"writeValue(true, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && yesIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ yesLabel | translate }}\n            </ion-button>\n\n            <!-- No button -->\n            <ion-button\n              #noButton\n              class=\"mat-form-field-button\"\n              [tabIndex]=\"-1\"\n              (click)=\"writeValue(false, $event)\"\n              (keydown.space)=\"toggleValue($event)\"\n              (keyup.enter)=\"writeValue(false, $event)\"\n              [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n            >\n              @if (showButtonIcons && noIcon; as icon) {\n                <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n              }\n              {{ noLabel | translate }}\n            </ion-button>\n          </div>\n        }\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (clearable) {\n          <ion-button\n            matSuffix\n            fill=\"clear\"\n            size=\"small\"\n            color=\"medium\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            [class.cdk-visually-hidden]=\"_value | isNil\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        }\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n    }\n  }\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { fakeInput: [{
                 type: ViewChild,
@@ -6746,7 +6745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], buttonsColCount: [{
                 type: Input,
-                args: [{ transform: numberAttribute }]
+                args: [{ transform: numberOrNilAttribute }]
             }], classList: [{
                 type: Input,
                 args: ['class']
@@ -6768,7 +6767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], tabindex: [{
                 type: Input,
-                args: [{ transform: numberAttribute }]
+                args: [{ transform: numberOrNilAttribute }]
             }], showRadio: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -15162,7 +15161,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\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\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 : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\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 : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\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\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\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\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [tabindex]=\"tabindex\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [readonly]=\"readonly\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.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: i6$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: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "class", "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\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\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 : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\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 : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\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\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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    [readonly]=\"readonly\"\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\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\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      [readonly]=\"readonly\"\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\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [tabindex]=\"tabindex\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [readonly]=\"readonly\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.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: i6$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: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "class", "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: "18.2.13", ngImport: i0, type: AppFormField, decorators: [{
             type: Component,
@@ -15172,7 +15171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => AppFormField),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\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 : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\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 : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\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\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\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\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [tabindex]=\"tabindex\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [readonly]=\"readonly\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\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 : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\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 : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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    [subscriptSizing]=\"subscriptSizing\"\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\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\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\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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    [readonly]=\"readonly\"\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\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\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      [readonly]=\"readonly\"\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\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [tabindex]=\"tabindex\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [readonly]=\"readonly\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\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"] }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { definition: [{
@@ -18080,6 +18079,15 @@ function isSameVersion(v1, v2) {
 class TextPopover {
     popoverController;
     translate;
+    /**
+     * Displays a popover using the provided controller, event, and options.
+     *
+     * @param {PopoverController} ctrl - The popover controller used to create and manage the popover.
+     * @param {Event} event - The event that triggers the display of the popover.
+     * @param {TextPopoverOptions} opts - The options specific to the text popover component.
+     * @param {Partial<PopoverOptions>} [popoverOpts] - Optional additional options for the popover.
+     * @return {Promise<OverlayEventDetail>} A promise that resolves with the details of the overlay event once the popover is dismissed.
+     */
     static async show(ctrl, event, opts, popoverOpts) {
         const modal = await ctrl.create({
             event,
@@ -45308,6 +45316,8 @@ class BooleanTestPage extends AppForm {
     stringify = JSON.stringify;
     mode = 'radio';
     styles = ['radio', 'checkbox', 'button'];
+    floatLabel = 'auto';
+    floatLabels = ['auto', 'always', 'never'];
     constructor(injector, formBuilder, cd) {
         super(injector);
         this.injector = injector;
@@ -45336,6 +45346,12 @@ class BooleanTestPage extends AppForm {
             this.markForCheck();
         }
     }
+    toggleFloatLabel(value) {
+        if (this.floatLabel !== value) {
+            this.floatLabel = value;
+            this.markForCheck();
+        }
+    }
     markForCheck() {
         this.cd.markForCheck();
     }
@@ -45344,11 +45360,11 @@ class BooleanTestPage extends AppForm {
         this.form.get(path)?.setValue(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BooleanTestPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'radio'\" (click)=\"toggleMode('radio')\">\n      <mat-label>Radio</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'checkbox'\" (click)=\"toggleMode('checkbox')\">\n      <mat-label>Checkbox</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'button'\" (click)=\"toggleMode('button')\">\n      <mat-label>Button</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    @for (style of styles; track style) {\n      <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n    }\n\n    <ng-template #components let-style=\"style\">\n      @if (style === mode) {\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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    @for (style of styles; track style) {\n      <a mat-tab-link [active]=\"mode === style\" (click)=\"toggleMode(style)\">\n        <mat-label>{{ style | capitalize }}</mat-label>\n      </a>\n    }\n\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temp</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <mat-form-field>\n            <mat-label>Float label</mat-label>\n            <mat-select [(value)]=\"floatLabel\">\n              @for (floatLabel of floatLabels; track floatLabel) {\n                <mat-option [value]=\"floatLabel\">{{ floatLabel | capitalize }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    @if (mode === 'temp') {\n      <ng-container [ngTemplateOutlet]=\"temp\"></ng-container>\n    } @else {\n      @for (style of styles; track style) {\n        <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n      }\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                    [floatLabel]=\"floatLabel\"\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                    [floatLabel]=\"floatLabel\"\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                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"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                    [floatLabel]=\"floatLabel\"\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 empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                    [required]=\"true\"\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                    [floatLabel]=\"floatLabel\"\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                    [floatLabel]=\"floatLabel\"\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\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\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 (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\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\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 (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\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                  ></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                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      [floatLabel]=\"floatLabel\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n\n    <ng-template #temp>\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'radio'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'button'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"3\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled empty + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n  </form>\n</ion-content>\n" }]
+            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    @for (style of styles; track style) {\n      <a mat-tab-link [active]=\"mode === style\" (click)=\"toggleMode(style)\">\n        <mat-label>{{ style | capitalize }}</mat-label>\n      </a>\n    }\n\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temp</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container ion-padding\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <mat-form-field>\n            <mat-label>Float label</mat-label>\n            <mat-select [(value)]=\"floatLabel\">\n              @for (floatLabel of floatLabels; track floatLabel) {\n                <mat-option [value]=\"floatLabel\">{{ floatLabel | capitalize }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    @if (mode === 'temp') {\n      <ng-container [ngTemplateOutlet]=\"temp\"></ng-container>\n    } @else {\n      @for (style of styles; track style) {\n        <ng-container [ngTemplateOutlet]=\"components\" [ngTemplateOutletContext]=\"{ style: style }\"></ng-container>\n      }\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                    [floatLabel]=\"floatLabel\"\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                    [floatLabel]=\"floatLabel\"\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                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled + readonly</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.disabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"disabledTrue\"\n                    placeholder=\"Placeholder\"\n                    readonly=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col size=\"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                    [floatLabel]=\"floatLabel\"\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 empty + required</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{\n                          form.controls.enabledEmptyRequired?.value | json\n                        }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmptyRequired\"\n                    placeholder=\"Placeholder\"\n                    [required]=\"true\"\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                    [floatLabel]=\"floatLabel\"\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                    [floatLabel]=\"floatLabel\"\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\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\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 (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\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\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 (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\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                  ></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                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledEmpty\"\n                    placeholder=\"Placeholder\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Enabled false + floatLabel=\"always\"</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledFalse?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledFalse\"\n                    placeholder=\"Placeholder\"\n                    floatLabel=\"always\"\n                    [clearable]=\"true\"\n                  ></mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col size=\"4\">\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">appearance=\"outline\" + icon + clearable</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre style=\"white-space: break-spaces\">{{ form.controls.enabledTrue?.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-boolean-field\n                    [style]=\"style\"\n                    [floatLabel]=\"floatLabel\"\n                    formControlName=\"enabledTrue\"\n                    placeholder=\"Placeholder\"\n                    appearance=\"outline\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                  </mat-boolean-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            @if (style === 'button') {\n              <ion-col size=\"4\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-label color=\"primary\">Enabled empty + showButtonIcons: false</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre style=\"white-space: break-spaces\">{{ form.controls.enabledEmpty?.value | json }}</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-boolean-field\n                      [style]=\"style\"\n                      [floatLabel]=\"floatLabel\"\n                      formControlName=\"enabledEmpty\"\n                      placeholder=\"Placeholder\"\n                      [showButtonIcons]=\"false\"\n                    ></mat-boolean-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-grid>\n      }\n    </ng-template>\n\n    <ng-template #temp>\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'radio'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-boolean-field\n              [style]=\"'button'\"\n              [floatLabel]=\"floatLabel\"\n              formControlName=\"enabledEmpty\"\n              placeholder=\"Placeholder\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </ng-template>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 class TextFormTestingPage {