@sumaris-net/ngx-components 2.7.1-rc1 → 2.7.1-rc2

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Directive, Injectable, Pipe, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, ViewChild, ANIMATION_MODULE_TYPE, inject, ChangeDetectorRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER } from '@angular/core';
-import { firstValueFrom, shareReplay, tap, of, Subject, merge, timer, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$9, Observable, forkJoin, defer, timeout, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY, iif, delay } from 'rxjs';
+import { firstValueFrom, shareReplay, tap, of, Subject, merge, timer, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$a, Observable, forkJoin, defer, timeout, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY, iif, delay } from 'rxjs';
 import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as i2 from '@angular/common/http';
 import { HttpEventType, HttpClient, HttpHeaders, HttpResponse, HttpClientModule } from '@angular/common/http';
@@ -5478,7 +5478,7 @@ const DEFAULT_VALUE_ACCESSOR$5 = {
 };
 const HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
 const DURATION_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
-const noop$8 = () => {
+const noop$9 = () => {
 };
 class MatDuration {
     dateAdapter;
@@ -5487,8 +5487,8 @@ class MatDuration {
     cd;
     formGroupDir;
     _subscription = new Subscription();
-    _onChangeCallback = noop$8;
-    _onTouchedCallback = noop$8;
+    _onChangeCallback = noop$9;
+    _onTouchedCallback = noop$9;
     writing = true;
     disabling = false;
     _tabindex;
@@ -6106,7 +6106,7 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
     useExisting: forwardRef(() => MatBooleanField),
     multi: true,
 };
-const noop$7 = () => { };
+const noop$8 = () => { };
 class MatBooleanField {
     cd;
     formGroupDir;
@@ -6139,8 +6139,8 @@ class MatBooleanField {
     showRadio = false;
     _value;
     _tabindex;
-    _onChangeCallback = noop$7;
-    _onTouchedCallback = noop$7;
+    _onChangeCallback = noop$8;
+    _onTouchedCallback = noop$8;
     _writing = false;
     constructor(cd, formGroupDir) {
         this.cd = cd;
@@ -6770,15 +6770,15 @@ class MatAutocompleteFieldUtils {
     }
 }
 
-const noop$6 = (_) => { };
+const noop$7 = (_) => { };
 class MatAutocompleteField {
     cd;
     modalController;
     renderer;
     viewRef;
     formGroupDir;
-    _onChangeCallback = noop$6;
-    _onTouchedCallback = noop$6;
+    _onChangeCallback = noop$7;
+    _onTouchedCallback = noop$7;
     _onFetchMoreCallback;
     _implicitValue;
     _subscription = new Subscription();
@@ -7800,15 +7800,15 @@ const MASKS = {
         DD: [/[+-]/, D, D, D, '.', D, D, D, D, D, D, D, '°']
     }
 };
-const noop$5 = () => {
+const noop$6 = () => {
 };
 class MatLatLongField {
     formBuilder;
     cd;
     formGroupDir;
     _defaults;
-    _onChangeCallback = noop$5;
-    _onTouchedCallback = noop$5;
+    _onChangeCallback = noop$6;
+    _onTouchedCallback = noop$6;
     _subscription = new Subscription();
     _formatOptions;
     _disabling = false;
@@ -8258,15 +8258,15 @@ const DEFAULT_VALUE_ACCESSOR$3 = {
     useExisting: forwardRef(() => MatDate),
     multi: true
 };
-const noop$4 = () => { };
+const noop$5 = () => { };
 class MatDate {
     dateAdapter;
     translate;
     formBuilder;
     cd;
     formGroupDir;
-    _onChangeCallback = noop$4;
-    _onTouchedCallback = noop$4;
+    _onChangeCallback = noop$5;
+    _onTouchedCallback = noop$5;
     _subscription = new Subscription();
     _writing = true;
     _disabling = false;
@@ -8655,7 +8655,7 @@ const DEFAULT_VALUE_ACCESSOR$2 = {
     multi: true
 };
 const TIME_REGEXP = /^[012][0-9][:][012345][0-9]$/;
-const noop$3 = () => { };
+const noop$4 = () => { };
 class MatDateTime {
     dateAdapter;
     translate;
@@ -8663,8 +8663,8 @@ class MatDateTime {
     cd;
     formGroupDir;
     _defaults;
-    _onChangeCallback = noop$3;
-    _onTouchedCallback = noop$3;
+    _onChangeCallback = noop$4;
+    _onTouchedCallback = noop$4;
     _subscription = new Subscription();
     _controlSubscription;
     _writing = true;
@@ -9234,15 +9234,15 @@ const DEFAULT_VALUE_ACCESSOR$1 = {
     useExisting: forwardRef(() => MatDateShort),
     multi: true
 };
-const noop$2 = () => { };
+const noop$3 = () => { };
 class MatDateShort {
     dateAdapter;
     translate;
     formBuilder;
     cd;
     formGroupDir;
-    _onChangeCallback = noop$2;
-    _onTouchedCallback = noop$2;
+    _onChangeCallback = noop$3;
+    _onTouchedCallback = noop$3;
     _subscription = new Subscription();
     _writing = true;
     _disabling = false;
@@ -10357,8 +10357,8 @@ const DEFAULT_VALUE_ACCESSOR = {
 class MatSwipeField {
     cd;
     formGroupDir;
-    _onChangeCallback = noop$9;
-    _onTouchedCallback = noop$9;
+    _onChangeCallback = noop$a;
+    _onTouchedCallback = noop$a;
     _value;
     _subscription = new Subscription();
     _itemsSubscription;
@@ -10742,12 +10742,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
                 }]
         }] });
 
-const noop$1 = () => { };
+const noop$2 = () => { };
 class MatChipsField {
     cd;
     formGroupDir;
-    _onChangeCallback = noop$1;
-    _onTouchedCallback = noop$1;
+    _onChangeCallback = noop$2;
+    _onTouchedCallback = noop$2;
     equals;
     logPrefix = '[mat-chips] ';
     formControl;
@@ -12520,10 +12520,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
                 type: Output
             }] } });
 
+const noop$1 = () => { };
 class TextForm extends AppForm {
     injector;
     cd;
     formBuilder;
+    formGroupDir;
     showError = true;
     placeholder;
     multiline = true;
@@ -12531,18 +12533,29 @@ class TextForm extends AppForm {
     maxLength = 2000;
     autofocus = false;
     validator = null;
+    standalone = false;
+    formControl;
+    formControlName;
     textAreaChanges = new EventEmitter();
     textArea;
     textInput;
     autosizeDirective;
-    control;
-    constructor(injector, cd, formBuilder) {
+    textControl;
+    _onChangeCallback = noop$1;
+    _onTouchedCallback = noop$1;
+    constructor(injector, cd, formBuilder, formGroupDir) {
         super(injector);
         this.injector = injector;
         this.cd = cd;
         this.formBuilder = formBuilder;
+        this.formGroupDir = formGroupDir;
     }
     ngOnInit() {
+        if (!this.standalone) {
+            this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
+            if (!this.formControl)
+                throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-field>.');
+        }
         // Compute validators
         const validators = isNotNil(this.maxLength) && this.maxLength > 0 ? [Validators.maxLength(this.maxLength)] : [];
         if (this.validator)
@@ -12551,13 +12564,18 @@ class TextForm extends AppForm {
         const form = this.formBuilder.group({
             text: [null, validators.length ? Validators.compose(validators) : null]
         });
-        this.control = form.get('text');
         this.setForm(form);
+        this.textControl = form.get('text');
+        this.registerSubscription(this.textControl.valueChanges.subscribe(value => {
+            if (this.standalone) {
+                this.textAreaChanges.emit(value);
+            }
+            else {
+                this.textFormValueChanged(value);
+            }
+        }));
         super.ngOnInit();
     }
-    textAreaChanged(event) {
-        this.textAreaChanges.emit(this.control.value);
-    }
     containerResize() {
         this.autosizeDirective?.resizeToFitContent(true);
     }
@@ -12567,17 +12585,49 @@ class TextForm extends AppForm {
         if (this.textInput)
             focusInput(this.textInput);
     }
+    registerOnChange(fn) {
+        this._onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.textControl.disable({ emitEvent: false });
+        }
+        else {
+            this.textControl.enable({ emitEvent: false });
+        }
+        this.markForCheck();
+    }
+    writeValue(value) {
+        this.textControl.patchValue(value);
+    }
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TextForm, selector: "app-text-form", inputs: { showError: "showError", placeholder: "placeholder", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator" }, outputs: { textAreaChanges: "textAreaChanges" }, providers: [
+    checkIfTouched(opts) {
+        if (this.textControl.touched) {
+            this._onTouchedCallback();
+            if (!opts || opts.emitEvent !== false) {
+                this.markForCheck();
+            }
+        }
+    }
+    textFormValueChanged(value) {
+        if (this.formControl.value !== value) {
+            this._onChangeCallback(value);
+            this.checkIfTouched();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.UntypedFormBuilder }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TextForm, selector: "app-text-form", inputs: { showError: "showError", placeholder: "placeholder", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", standalone: "standalone", formControl: "formControl", formControlName: "formControlName" }, outputs: { textAreaChanges: "textAreaChanges" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextForm),
-                multi: true,
+                multi: true
             }
-        ], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: CdkTextareaAutosize, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [readonly]=\"control.disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"control.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-error [class.cdk-visually-hidden]=\"!errorSpan.innerHTML.trim()\">\n        <span #errorSpan>\n          <ng-content select=\"[matError]\"></ng-content>\n        </span>\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea{--textarea-height: 11.5em;max-height:var(--textarea-height)}textarea.fixed-height{height:var(--textarea-height)}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: CdkTextareaAutosize, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"textControl\"\n      [readonly]=\"textControl.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"textControl\"\n        [readonly]=\"textControl.disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"textControl.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-error [class.cdk-visually-hidden]=\"!errorSpan.innerHTML.trim()\">\n        <span #errorSpan>\n          <ng-content select=\"[matError]\"></ng-content>\n        </span>\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea{--textarea-height: 11.5em;max-height:var(--textarea-height)}textarea.fixed-height{height:var(--textarea-height)}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextForm, decorators: [{
             type: Component,
@@ -12585,10 +12635,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextForm),
-                            multi: true,
+                            multi: true
                         }
-                    ], template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [readonly]=\"control.disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"control.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-error [class.cdk-visually-hidden]=\"!errorSpan.innerHTML.trim()\">\n        <span #errorSpan>\n          <ng-content select=\"[matError]\"></ng-content>\n        </span>\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea{--textarea-height: 11.5em;max-height:var(--textarea-height)}textarea.fixed-height{height:var(--textarea-height)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.UntypedFormBuilder }], propDecorators: { showError: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"textControl\"\n      [readonly]=\"textControl.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"textControl\"\n        [readonly]=\"textControl.disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"textControl.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-error [class.cdk-visually-hidden]=\"!errorSpan.innerHTML.trim()\">\n        <span #errorSpan>\n          <ng-content select=\"[matError]\"></ng-content>\n        </span>\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea{--textarea-height: 11.5em;max-height:var(--textarea-height)}textarea.fixed-height{height:var(--textarea-height)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.UntypedFormBuilder }, { type: i1$2.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { showError: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -12602,6 +12654,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
                 type: Input
             }], validator: [{
                 type: Input
+            }], standalone: [{
+                type: Input
+            }], formControl: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
             }], textAreaChanges: [{
                 type: Output
             }], textArea: [{
@@ -16238,7 +16296,7 @@ class TextPopover {
     async onValidate(event) {
         await waitWhilePending(this.form);
         if (!this.valid) {
-            logFormErrors(this.form.control);
+            logFormErrors(this.form.textControl);
             return;
         }
         try {
@@ -16284,11 +16342,11 @@ class TextPopover {
         return button?.side !== 'start';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextPopover, deps: [{ token: i2$2.PopoverController }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TextPopover, selector: "app-text-popover", inputs: { showHeader: "showHeader", headerColor: "headerColor", showFooter: "showFooter", title: "title", text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", headerButtons: "headerButtons", mobile: "mobile" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar [color]=\"headerColor\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"mobile && editing\"\n                  (click)=\"cancel()\"\n                  [title]=\"'COMMON.BTN_CANCEL'|translate\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isStartSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title *ngIf=\"title\">{{title|translate}}</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isEndSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n\n      <ng-container *ngIf=\"mobile\">\n        <ion-button *ngIf=\"editing\" (click)=\"onValidate($event)\"\n                    [disabled]=\"disabled\"\n                    [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!editing\"\n                    (click)=\"cancel()\"\n                    [title]=\"'COMMON.BTN_CLOSE'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n        </ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\"\n             [class.has-header]=\"showHeader\"\n             cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autoHeight]=\"autoHeight\"\n                 [autofocus]=\"editing && autofocus\"\n                 [validator]=\"validator\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer *ngIf=\"showFooter\">\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"], dependencies: [{ kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator"], outputs: ["textAreaChanges"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TextPopover, selector: "app-text-popover", inputs: { showHeader: "showHeader", headerColor: "headerColor", showFooter: "showFooter", title: "title", text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", headerButtons: "headerButtons", mobile: "mobile" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar [color]=\"headerColor\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"mobile && editing\"\n                  (click)=\"cancel()\"\n                  [title]=\"'COMMON.BTN_CANCEL'|translate\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isStartSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title *ngIf=\"title\">{{title|translate}}</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isEndSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n\n      <ng-container *ngIf=\"mobile\">\n        <ion-button *ngIf=\"editing\" (click)=\"onValidate($event)\"\n                    [disabled]=\"disabled\"\n                    [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!editing\"\n                    (click)=\"cancel()\"\n                    [title]=\"'COMMON.BTN_CLOSE'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n        </ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\"\n             [class.has-header]=\"showHeader\"\n             cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form\n                 [standalone]=\"true\"\n                 [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autoHeight]=\"autoHeight\"\n                 [autofocus]=\"editing && autofocus\"\n                 [validator]=\"validator\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer *ngIf=\"showFooter\">\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"], dependencies: [{ kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName"], outputs: ["textAreaChanges"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-popover', template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar [color]=\"headerColor\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"mobile && editing\"\n                  (click)=\"cancel()\"\n                  [title]=\"'COMMON.BTN_CANCEL'|translate\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isStartSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title *ngIf=\"title\">{{title|translate}}</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isEndSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n\n      <ng-container *ngIf=\"mobile\">\n        <ion-button *ngIf=\"editing\" (click)=\"onValidate($event)\"\n                    [disabled]=\"disabled\"\n                    [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!editing\"\n                    (click)=\"cancel()\"\n                    [title]=\"'COMMON.BTN_CLOSE'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n        </ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\"\n             [class.has-header]=\"showHeader\"\n             cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autoHeight]=\"autoHeight\"\n                 [autofocus]=\"editing && autofocus\"\n                 [validator]=\"validator\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer *ngIf=\"showFooter\">\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"] }]
+            args: [{ selector: 'app-text-popover', template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar [color]=\"headerColor\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"mobile && editing\"\n                  (click)=\"cancel()\"\n                  [title]=\"'COMMON.BTN_CANCEL'|translate\">\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isStartSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title *ngIf=\"title\">{{title|translate}}</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button *ngFor=\"let button of headerButtons|arrayFilter: isEndSide\"\n                  [fill]=\"button.fill\"\n                  [color]=\"button.color\"\n                  (click)=\"clickButton(button)\">\n        <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n        <ion-text *ngIf=\"button.text\">{{button.text|translate}}</ion-text>\n      </ion-button>\n\n      <ng-container *ngIf=\"mobile\">\n        <ion-button *ngIf=\"editing\" (click)=\"onValidate($event)\"\n                    [disabled]=\"disabled\"\n                    [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!editing\"\n                    (click)=\"cancel()\"\n                    [title]=\"'COMMON.BTN_CLOSE'|translate\">\n          <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n        </ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\"\n             [class.has-header]=\"showHeader\"\n             cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form\n                 [standalone]=\"true\"\n                 [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autoHeight]=\"autoHeight\"\n                 [autofocus]=\"editing && autofocus\"\n                 [validator]=\"validator\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer *ngIf=\"showFooter\">\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.PopoverController }, { type: i1$1.TranslateService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: true }]
@@ -39932,27 +39990,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 class TextFormTestingPage {
-    textForm1;
-    textForm2;
-    constructor() {
-    }
+    formBuilder;
+    standaloneTextForm1;
+    standaloneTextForm2;
+    form;
     Validators = Validators;
+    stringify = JSON.stringify;
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.form = formBuilder.group({
+            empty: [null],
+            required: [null, Validators.required]
+        });
+    }
     ngAfterViewInit() {
-        this.textForm1.enable();
-        this.textForm2.enable();
+        this.standaloneTextForm1.enable();
+        this.standaloneTextForm2.enable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextFormTestingPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TextFormTestingPage, selector: "text-form-testing", viewQueries: [{ propertyName: "textForm1", first: true, predicate: ["textForm1"], descendants: true }, { propertyName: "textForm2", first: true, predicate: ["textForm2"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text from examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Default validator</p>\n  <app-text-form #textForm1 [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n\n  <p>External validator</p>\n  <app-text-form #textForm2 [multiline]=\"false\" [maxLength]=\"10\" [validator]=\"Validators.required\">\n    <mat-error matError *ngIf=\"textForm2.control.hasError('required')\">REQUIRED</mat-error>\n  </app-text-form>\n\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator"], outputs: ["textAreaChanges"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextFormTestingPage, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: TextFormTestingPage, selector: "text-form-testing", viewQueries: [{ propertyName: "standaloneTextForm1", first: true, predicate: ["standaloneTextForm1"], descendants: true }, { propertyName: "standaloneTextForm2", first: true, predicate: ["standaloneTextForm2"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text from examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">\n                Default validator\n              </ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form #standaloneTextForm1 [standalone]=\"true\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">\n                Required\n              </ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form #standaloneTextForm2 [standalone]=\"true\" [multiline]=\"false\" [maxLength]=\"10\" [validator]=\"Validators.required\">\n              <mat-error matError *ngIf=\"standaloneTextForm2.textControl.hasError('required')\">REQUIRED</mat-error>\n            </app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <form class=\"form-container\" [formGroup]=\"form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.empty.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.required.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"required\" [multiline]=\"false\" [maxLength]=\"10\" [validator]=\"Validators.required\">\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\">REQUIRED</mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName"], outputs: ["textAreaChanges"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: TextFormTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'text-form-testing', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text from examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Default validator</p>\n  <app-text-form #textForm1 [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n\n  <p>External validator</p>\n  <app-text-form #textForm2 [multiline]=\"false\" [maxLength]=\"10\" [validator]=\"Validators.required\">\n    <mat-error matError *ngIf=\"textForm2.control.hasError('required')\">REQUIRED</mat-error>\n  </app-text-form>\n\n\n</ion-content>\n" }]
-        }], ctorParameters: () => [], propDecorators: { textForm1: [{
+            args: [{ selector: 'text-form-testing', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text from examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">\n                Default validator\n              </ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form #standaloneTextForm1 [standalone]=\"true\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">\n                Required\n              </ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form #standaloneTextForm2 [standalone]=\"true\" [multiline]=\"false\" [maxLength]=\"10\" [validator]=\"Validators.required\">\n              <mat-error matError *ngIf=\"standaloneTextForm2.textControl.hasError('required')\">REQUIRED</mat-error>\n            </app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <form class=\"form-container\" [formGroup]=\"form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.empty.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.required.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"required\" [multiline]=\"false\" [maxLength]=\"10\" [validator]=\"Validators.required\">\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\">REQUIRED</mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }], propDecorators: { standaloneTextForm1: [{
                 type: ViewChild,
-                args: ['textForm1']
-            }], textForm2: [{
+                args: ['standaloneTextForm1']
+            }], standaloneTextForm2: [{
                 type: ViewChild,
-                args: ['textForm2']
+                args: ['standaloneTextForm2']
             }] } });
 
 const SHARED_MATERIAL_TESTING_PAGES = [