@sumaris-net/ngx-components 4.0.0-rc6 → 4.0.0-rc7

package/esm2022/src/app/shared/material/numpad/numpad.module.mjs

@@ -12,8 +12,8 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatNumpadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SharedMatNumpadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: SharedMatNumpadModule, declarations: [MatNumpadContainerComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatNumpadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: SharedMatNumpadModule, declarations: [MatNumpadContainerComponent,
             MatNumpadComponent,
             MatNumpadContent,
             NumpadDirective,
@@ -25,13 +25,13 @@ export class SharedMatNumpadModule {
             MatNumpadContainerComponent,
             MatNumpadContent,
             AppendToInputDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SharedMatNumpadModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatNumpadModule, imports: [CommonModule,
             IonicModule,
             MatButtonModule,
             MatIconModule,
             TranslateModule.forChild()] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SharedMatNumpadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatNumpadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/material/numpad/testing/numpad.test.mjs

@@ -38,10 +38,10 @@ export class NumpadTestPage {
     doSubmit(event) {
         console.debug('Validate form: ', this.form.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumpadTestPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: NumpadTestPage, selector: "app-numpad-test", 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>Numeric pad test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Numpad test page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Decimal field, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Empty decimal field</mat-label>\n                <input matInput type=\"text\" formControlName=\"empty\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDecimal\"\n                       readonly>\n                <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- filled -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Integer field\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Filled integer field</mat-label>\n                <input matInput type=\"number\" formControlName=\"integer\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadInteger\">\n                <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- append to input -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Attach to input, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>A number</mat-label>\n                <input matInput type=\"text\" formControlName=\"integer\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadAppendToInput\"\n                       readonly>\n                <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Disabled field</mat-label>\n                <input matInput type=\"number\" formControlName=\"disable\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDisabled\">\n                <mat-numpad #numpadDisabled></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n      <!-- Other field (for comparision) -->\n      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></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                  Mat date time\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n              </mat-date-time-field>\n\n              <mat-date-time-field formControlName=\"datetime\"\n                                   placeholder=\"Date/Time field (mobile)\"\n                                   [mobile]=\"true\">\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: i6.MatNumpadComponent, selector: "mat-numpad", inputs: ["keymap", "decimal", "appendToInput", "disableAnimation", "noBackdrop", "position"], outputs: ["keypress", "closed"] }, { kind: "directive", type: i7.NumpadDirective, selector: "[matNumpad]", inputs: ["keymap", "matNumpad", "value", "disabled", "decimal", "disableClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: NumpadTestPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: NumpadTestPage, selector: "app-numpad-test", 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>Numeric pad test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Numpad test page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Decimal field, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Empty decimal field</mat-label>\n                <input matInput type=\"text\" formControlName=\"empty\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDecimal\"\n                       readonly>\n                <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- filled -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Integer field\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Filled integer field</mat-label>\n                <input matInput type=\"number\" formControlName=\"integer\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadInteger\">\n                <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- append to input -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Attach to input, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>A number</mat-label>\n                <input matInput type=\"text\" formControlName=\"integer\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadAppendToInput\"\n                       readonly>\n                <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Disabled field</mat-label>\n                <input matInput type=\"number\" formControlName=\"disable\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDisabled\">\n                <mat-numpad #numpadDisabled></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n      <!-- Other field (for comparision) -->\n      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></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                  Mat date time\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n              </mat-date-time-field>\n\n              <mat-date-time-field formControlName=\"datetime\"\n                                   placeholder=\"Date/Time field (mobile)\"\n                                   [mobile]=\"true\">\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: i6.MatNumpadComponent, selector: "mat-numpad", inputs: ["keymap", "decimal", "appendToInput", "disableAnimation", "noBackdrop", "position"], outputs: ["keypress", "closed"] }, { kind: "directive", type: i7.NumpadDirective, selector: "[matNumpad]", inputs: ["keymap", "matNumpad", "value", "disabled", "decimal", "disableClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumpadTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: NumpadTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-numpad-test', 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>Numeric pad test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Numpad test page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Decimal field, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Empty decimal field</mat-label>\n                <input matInput type=\"text\" formControlName=\"empty\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDecimal\"\n                       readonly>\n                <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- filled -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Integer field\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Filled integer field</mat-label>\n                <input matInput type=\"number\" formControlName=\"integer\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadInteger\">\n                <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- append to input -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Attach to input, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>A number</mat-label>\n                <input matInput type=\"text\" formControlName=\"integer\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadAppendToInput\"\n                       readonly>\n                <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <mat-label>Disabled field</mat-label>\n                <input matInput type=\"number\" formControlName=\"disable\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDisabled\">\n                <mat-numpad #numpadDisabled></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n      <!-- Other field (for comparision) -->\n      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></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                  Mat date time\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n              </mat-date-time-field>\n\n              <mat-date-time-field formControlName=\"datetime\"\n                                   placeholder=\"Date/Time field (mobile)\"\n                                   [mobile]=\"true\">\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }] });

package/esm2022/src/app/shared/material/paginator/material.paginator-i18n.mjs

@@ -38,10 +38,10 @@ export class MatPaginatorI18n extends MatPaginatorIntl {
     _getTranslationValue(translations, key, defaultValue) {
         return (translations[key] !== key) ? translations[key] : defaultValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatPaginatorI18n, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatPaginatorI18n, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatPaginatorI18n, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatPaginatorI18n, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatPaginatorI18n, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatPaginatorI18n, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.TranslateService }] });

package/esm2022/src/app/shared/material/stepper/material.stepper-i18n.mjs

@@ -13,10 +13,10 @@ export class MatStepperI18n extends MatStepperIntl {
     translateLabels() {
         this.optionalLabel = this.translate.instant('COMMON.OPTIONAL');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatStepperI18n, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatStepperI18n, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatStepperI18n, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatStepperI18n, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatStepperI18n, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatStepperI18n, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.TranslateService }] });

package/esm2022/src/app/shared/material/swipe/material.swipe.mjs

@@ -300,10 +300,10 @@ export class MatSwipeField {
             await firstTruePromise(this.$loaded);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSwipeField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: MatSwipeField, selector: "mat-swipe-field", inputs: { logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", debug: "debug", required: "required", mobile: "mobile", clearable: "clearable", equals: "equals", displayWith: "displayWith", displayAttributes: "displayAttributes", appAutofocus: "appAutofocus", classList: ["class", "classList"], tabindex: "tabindex", items: "items" }, outputs: { onClick: "click", blurred: "blur", focused: "focus" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "swiperRef", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': (floatLabel | asFloatLabelType)\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"!!placeholder && floatLabel !== 'never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\" >\n    <swiper-container #swiper\n                      [modules]=\"swiperModules\"\n                      [speed]=\"100\" [slidesPerView]=\"1\"\n                      (init)=\"swiperLoaded()\"\n                      (reachbeginning)=\"reachStart(true)\"\n                      (reachend)=\"reachEnd(true)\"\n                      (slidenexttransitionend)=\"reachStart(false)\"\n                      (slideprevtransitionend)=\"reachEnd(false)\"\n                      (slidechange)=\"slideChanged()\">\n      <swiper-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </swiper-slide>\n\n    </swiper-container>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container{padding-inline-start:40px;padding-inline-end:40px}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{width:24px;height:24px;padding:0;position:absolute;top:15px;z-index:10}.button-prev ion-icon,.button-prev .mat-icon,.button-next ion-icon,.button-next .mat-icon{font-size:calculateRem(18px);line-height:1.125}.button-prev .mat-mdc-button-touch-target,.button-next .mat-mdc-button-touch-target{width:24px}.button-prev{left:0;right:auto}.button-next{left:auto;right:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.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: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatSwipeField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: MatSwipeField, selector: "mat-swipe-field", inputs: { logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", debug: "debug", required: "required", mobile: "mobile", clearable: "clearable", equals: "equals", displayWith: "displayWith", displayAttributes: "displayAttributes", appAutofocus: "appAutofocus", classList: ["class", "classList"], tabindex: "tabindex", items: "items" }, outputs: { onClick: "click", blurred: "blur", focused: "focus" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "swiperRef", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': (floatLabel | asFloatLabelType)\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"!!placeholder && floatLabel !== 'never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\" >\n    <swiper-container #swiper\n                      [modules]=\"swiperModules\"\n                      [speed]=\"100\" [slidesPerView]=\"1\"\n                      (init)=\"swiperLoaded()\"\n                      (reachbeginning)=\"reachStart(true)\"\n                      (reachend)=\"reachEnd(true)\"\n                      (slidenexttransitionend)=\"reachStart(false)\"\n                      (slideprevtransitionend)=\"reachEnd(false)\"\n                      (slidechange)=\"slideChanged()\">\n      <swiper-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </swiper-slide>\n\n    </swiper-container>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container{padding-inline-start:40px;padding-inline-end:40px}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{width:24px;height:24px;padding:0;position:absolute;top:15px;z-index:10}.button-prev ion-icon,.button-prev .mat-icon,.button-next ion-icon,.button-next .mat-icon{font-size:calculateRem(18px);line-height:1.125}.button-prev .mat-mdc-button-touch-target,.button-next .mat-mdc-button-touch-target{width:24px}.button-prev{left:0;right:auto}.button-next{left:auto;right:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.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: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatSwipeField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatSwipeField, decorators: [{
             type: Component,
             args: [{ selector: 'mat-swipe-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': (floatLabel | asFloatLabelType)\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"!!placeholder && floatLabel !== 'never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\" >\n    <swiper-container #swiper\n                      [modules]=\"swiperModules\"\n                      [speed]=\"100\" [slidesPerView]=\"1\"\n                      (init)=\"swiperLoaded()\"\n                      (reachbeginning)=\"reachStart(true)\"\n                      (reachend)=\"reachEnd(true)\"\n                      (slidenexttransitionend)=\"reachStart(false)\"\n                      (slideprevtransitionend)=\"reachEnd(false)\"\n                      (slidechange)=\"slideChanged()\">\n      <swiper-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </swiper-slide>\n\n    </swiper-container>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container{padding-inline-start:40px;padding-inline-end:40px}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{width:24px;height:24px;padding:0;position:absolute;top:15px;z-index:10}.button-prev ion-icon,.button-prev .mat-icon,.button-next ion-icon,.button-next .mat-icon{font-size:calculateRem(18px);line-height:1.125}.button-prev .mat-mdc-button-touch-target,.button-next .mat-mdc-button-touch-target{width:24px}.button-prev{left:0;right:auto}.button-next{left:auto;right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.FormGroupDirective, decorators: [{

package/esm2022/src/app/shared/material/swipe/swipe.module.mjs

@@ -12,15 +12,15 @@ import { SharedPipesModule } from '../../pipes/pipes.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatSwipeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SharedMatSwipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: SharedMatSwipeModule, declarations: [MatSwipeField], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatSwipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: SharedMatSwipeModule, declarations: [MatSwipeField], imports: [CommonModule,
             IonicModule,
             MatButtonModule,
             MatIconModule, i1.TranslateModule, MatFormFieldModule,
             ReactiveFormsModule,
             MatInputModule,
             SharedPipesModule], exports: [MatSwipeField] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SharedMatSwipeModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatSwipeModule, imports: [CommonModule,
             IonicModule,
             MatButtonModule,
             MatIconModule,
@@ -30,7 +30,7 @@ export class SharedMatSwipeModule {
             MatInputModule,
             SharedPipesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SharedMatSwipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatSwipeModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],

package/esm2022/src/app/shared/material/swipe/testing/swipe.test.mjs

@@ -57,10 +57,10 @@ export class SwipeTestPage {
     compareDate() {
         return (d1, d2) => d1 && d2 && d1.isSame(d2) || false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SwipeTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.DateFormatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SwipeTestPage, selector: "app-swipe-test", 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>Swipe test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Swipe page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <!-- empty -->\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-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"empty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [tabindex]=\"1\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- date -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"date\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"2\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledEmpty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"3\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n<!--         read-only-->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled with date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledDate\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"4\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i3.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: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatSwipeField, selector: "mat-swipe-field", inputs: ["logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "debug", "required", "mobile", "clearable", "equals", "displayWith", "displayAttributes", "appAutofocus", "class", "tabindex", "items"], outputs: ["click", "blur", "focus"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SwipeTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.DateFormatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: SwipeTestPage, selector: "app-swipe-test", 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>Swipe test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Swipe page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <!-- empty -->\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-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"empty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [tabindex]=\"1\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- date -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"date\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"2\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledEmpty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"3\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n<!--         read-only-->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled with date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledDate\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"4\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i3.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: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatSwipeField, selector: "mat-swipe-field", inputs: ["logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "debug", "required", "mobile", "clearable", "equals", "displayWith", "displayAttributes", "appAutofocus", "class", "tabindex", "items"], outputs: ["click", "blur", "focus"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SwipeTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SwipeTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-swipe-test', 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>Swipe test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Swipe page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <!-- empty -->\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-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"empty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [tabindex]=\"1\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- date -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"date\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"2\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledEmpty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"3\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n<!--         read-only-->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled with date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledDate\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"4\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.DateFormatService }] });

package/esm2022/src/app/shared/material/testing/common.test.mjs

@@ -95,10 +95,10 @@ export class MatCommonTestPage {
         this.cd.markForCheck();
     }
     stringify = JSON.stringify;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatCommonTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: MatCommonTestPage, selector: "mat-common-test", 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>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{stringify(form.controls.empty.value)}}\n                    </pre>\n                    <br/>\n                    <pre>\n                      formControl.valid? {{form.controls.empty?.valid}}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\"\n                       [required]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.enable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\"\n                       [required]=\"true\"\n                >\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.disable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\"\n                       [required]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.readonly.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"desktopReadonlyField.readOnly=$event.checked\" [checked]=\"desktopReadonlyField.readOnly\">\n              </mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\"\n                       [readOnly]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Boolean\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.disable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\">\n              </mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mat Select\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.readonly.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{(form|formGetValue: 'select'|propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  <mat-option *ngFor=\"let item of statusList\" [value]=\"item\">{{item.label|translate}}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i3.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: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.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.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i12.FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: i12.FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatCommonTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: MatCommonTestPage, selector: "mat-common-test", 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>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{stringify(form.controls.empty.value)}}\n                    </pre>\n                    <br/>\n                    <pre>\n                      formControl.valid? {{form.controls.empty?.valid}}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\"\n                       [required]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.enable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\"\n                       [required]=\"true\"\n                >\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.disable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\"\n                       [required]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.readonly.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"desktopReadonlyField.readOnly=$event.checked\" [checked]=\"desktopReadonlyField.readOnly\">\n              </mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\"\n                       [readOnly]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Boolean\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.disable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\">\n              </mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mat Select\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.readonly.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{(form|formGetValue: 'select'|propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  <mat-option *ngFor=\"let item of statusList\" [value]=\"item\">{{item.label|translate}}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i3.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: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.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.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i12.FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: i12.FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MatCommonTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatCommonTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'mat-common-test', changeDetection: ChangeDetectionStrategy.OnPush, 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>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{stringify(form.controls.empty.value)}}\n                    </pre>\n                    <br/>\n                    <pre>\n                      formControl.valid? {{form.controls.empty?.valid}}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\"\n                       [required]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.enable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\"\n                       [required]=\"true\"\n                >\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.disable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\"\n                       [required]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.readonly.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"desktopReadonlyField.readOnly=$event.checked\" [checked]=\"desktopReadonlyField.readOnly\">\n              </mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\"\n                       [readOnly]=\"true\">\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Boolean\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.disable.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\">\n              </mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mat Select\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{stringify(form.controls.readonly.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{(form|formGetValue: 'select'|propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  <mat-option *ngFor=\"let item of statusList\" [value]=\"item\">{{item.label|translate}}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });

package/esm2022/src/app/shared/material/text/testing/text-form.testing.mjs

@@ -0,0 +1,31 @@
+import { Component, ViewChild } from '@angular/core';
+import { Validators } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@ionic/angular";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "../text-form.component";
+export class TextFormTestingPage {
+    textForm1;
+    textForm2;
+    constructor() {
+    }
+    Validators = Validators;
+    ngAfterViewInit() {
+        this.textForm1.enable();
+        this.textForm2.enable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextFormTestingPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator"], outputs: ["textAreaChanges"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", 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: [{
+                type: ViewChild,
+                args: ['textForm1']
+            }], textForm2: [{
+                type: ViewChild,
+                args: ['textForm2']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1mb3JtLnRlc3RpbmcuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC90ZXh0L3Rlc3RpbmcvdGV4dC1mb3JtLnRlc3RpbmcudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC90ZXh0L3Rlc3RpbmcvdGV4dC1mb3JtLnRlc3RpbmcuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWdCLFNBQVMsRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7QUFPMUMsTUFBTSxPQUFPLG1CQUFtQjtJQUVOLFNBQVMsQ0FBVztJQUNwQixTQUFTLENBQVc7SUFFNUM7SUFFQSxDQUFDO0lBRWtCLFVBQVUsR0FBRyxVQUFVLENBQUM7SUFFM0MsZUFBZTtRQUNiLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUMxQixDQUFDO3VHQWRVLG1CQUFtQjsyRkFBbkIsbUJBQW1CLDBQQ1JoQyxxcEJBdUJBOzsyRkRmYSxtQkFBbUI7a0JBSi9CLFNBQVM7K0JBQ0UsbUJBQW1CO3dEQUtMLFNBQVM7c0JBQWhDLFNBQVM7dUJBQUMsV0FBVztnQkFDRSxTQUFTO3NCQUFoQyxTQUFTO3VCQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyVmlld0luaXQsIENvbXBvbmVudCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VmFsaWRhdG9yc30gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtUZXh0Rm9ybX0gZnJvbSAnLi4vdGV4dC1mb3JtLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RleHQtZm9ybS10ZXN0aW5nJyxcbiAgdGVtcGxhdGVVcmw6ICd0ZXh0LWZvcm0udGVzdGluZy5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBUZXh0Rm9ybVRlc3RpbmdQYWdlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgQFZpZXdDaGlsZCgndGV4dEZvcm0xJykgdGV4dEZvcm0xOiBUZXh0Rm9ybTtcbiAgQFZpZXdDaGlsZCgndGV4dEZvcm0yJykgdGV4dEZvcm0yOiBUZXh0Rm9ybTtcblxuICBjb25zdHJ1Y3RvcihcbiAgKSB7XG4gIH1cblxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgVmFsaWRhdG9ycyA9IFZhbGlkYXRvcnM7XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMudGV4dEZvcm0xLmVuYWJsZSgpO1xuICAgIHRoaXMudGV4dEZvcm0yLmVuYWJsZSgpO1xuICB9XG59XG4iLCI8aW9uLWhlYWRlcj5cbiAgPGlvbi10b29sYmFyIGNvbG9yPVwicHJpbWFyeVwiPlxuXG4gICAgPGlvbi1idXR0b25zIHNsb3Q9XCJzdGFydFwiPlxuICAgICAgPGlvbi1iYWNrLWJ1dHRvbj48L2lvbi1iYWNrLWJ1dHRvbj5cbiAgICA8L2lvbi1idXR0b25zPlxuXG4gICAgPGlvbi10aXRsZT5UZXh0IGZyb20gZXhhbXBsZXM8L2lvbi10aXRsZT5cbiAgPC9pb24tdG9vbGJhcj5cbjwvaW9uLWhlYWRlcj5cblxuPGlvbi1jb250ZW50IGNsYXNzPVwiaW9uLXBhZGRpbmdcIj5cblxuICA8cD5EZWZhdWx0IHZhbGlkYXRvcjwvcD5cbiAgPGFwcC10ZXh0LWZvcm0gI3RleHRGb3JtMSBbbXVsdGlsaW5lXT1cImZhbHNlXCIgW21heExlbmd0aF09XCIxMFwiPjwvYXBwLXRleHQtZm9ybT5cblxuICA8cD5FeHRlcm5hbCB2YWxpZGF0b3I8L3A+XG4gIDxhcHAtdGV4dC1mb3JtICN0ZXh0Rm9ybTIgW211bHRpbGluZV09XCJmYWxzZVwiIFttYXhMZW5ndGhdPVwiMTBcIiBbdmFsaWRhdG9yXT1cIlZhbGlkYXRvcnMucmVxdWlyZWRcIj5cbiAgICA8bWF0LWVycm9yIG1hdEVycm9yICpuZ0lmPVwidGV4dEZvcm0yLmNvbnRyb2wuaGFzRXJyb3IoJ3JlcXVpcmVkJylcIj5SRVFVSVJFRDwvbWF0LWVycm9yPlxuICA8L2FwcC10ZXh0LWZvcm0+XG5cblxuPC9pb24tY29udGVudD5cbiJdfQ==

package/esm2022/src/app/shared/material/text/text-form.component.mjs

@@ -0,0 +1,97 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { AppForm } from '../../../core/form/form.class';
+import { isNotNil } from '../../functions';
+import { focusInput } from '../../inputs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/input";
+import * as i5 from "@angular/cdk/text-field";
+import * as i6 from "../../directives/autofocus.directive";
+import * as i7 from "@ngx-translate/core";
+export class TextForm extends AppForm {
+    injector;
+    cd;
+    formBuilder;
+    showError = true;
+    placeholder;
+    multiline = true;
+    autoHeight = false;
+    maxLength = 2000;
+    autofocus = false;
+    validator = null;
+    textAreaChanges = new EventEmitter();
+    textArea;
+    textInput;
+    autosizeDirective;
+    control;
+    constructor(injector, cd, formBuilder) {
+        super(injector);
+        this.injector = injector;
+        this.cd = cd;
+        this.formBuilder = formBuilder;
+    }
+    ngOnInit() {
+        // Compute validators
+        const validators = isNotNil(this.maxLength) && this.maxLength > 0 ? [Validators.maxLength(this.maxLength)] : [];
+        if (this.validator)
+            validators.push(this.validator);
+        // Create the form
+        const form = this.formBuilder.group({
+            text: [null, validators.length ? Validators.compose(validators) : null]
+        });
+        this.control = form.get('text');
+        this.setForm(form);
+        super.ngOnInit();
+    }
+    textAreaChanged(event) {
+        this.textAreaChanges.emit(this.control.value);
+    }
+    containerResize() {
+        this.autosizeDirective?.resizeToFitContent(true);
+    }
+    focusInput() {
+        if (this.textArea)
+            focusInput(this.textArea);
+        if (this.textInput)
+            focusInput(this.textInput);
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextForm, selector: "app-text-form", inputs: { showError: "showError", placeholder: "placeholder", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator" }, outputs: { textAreaChanges: "textAreaChanges" }, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i6.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text-form', 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.UntypedFormBuilder }], propDecorators: { showError: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], multiline: [{
+                type: Input
+            }], autoHeight: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], validator: [{
+                type: Input
+            }], textAreaChanges: [{
+                type: Output
+            }], textArea: [{
+                type: ViewChild,
+                args: ['textArea']
+            }], textInput: [{
+                type: ViewChild,
+                args: ['textInput']
+            }], autosizeDirective: [{
+                type: ViewChild,
+                args: [CdkTextareaAutosize]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvc2hhcmVkL21hdGVyaWFsL3RleHQvdGV4dC1mb3JtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvc2hhcmVkL21hdGVyaWFsL3RleHQvdGV4dC1mb3JtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsU0FBUyxFQUFjLFlBQVksRUFBWSxLQUFLLEVBQVUsTUFBTSxFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNqSSxPQUFPLEVBQXNELFVBQVUsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQy9GLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQzVELE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDekMsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLGNBQWMsQ0FBQzs7Ozs7Ozs7O0FBT3hDLE1BQU0sT0FBTyxRQUFTLFNBQVEsT0FBdUI7SUFpQjdCO0lBQThCO0lBQWlDO0lBaEI1RSxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ2pCLFdBQVcsQ0FBUztJQUNwQixTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ2pCLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsU0FBUyxHQUFHLElBQUksQ0FBQztJQUNqQixTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQ2xCLFNBQVMsR0FBZ0IsSUFBSSxDQUFDO0lBRTdCLGVBQWUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBRWhDLFFBQVEsQ0FBYTtJQUNwQixTQUFTLENBQWE7SUFDZCxpQkFBaUIsQ0FBc0I7SUFFdkUsT0FBTyxDQUFxQjtJQUU1QixZQUFzQixRQUFrQixFQUFZLEVBQXFCLEVBQVksV0FBK0I7UUFDbEgsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBREksYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUFZLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBQVksZ0JBQVcsR0FBWCxXQUFXLENBQW9CO0lBRXBILENBQUM7SUFFRCxRQUFRO1FBQ04scUJBQXFCO1FBQ3JCLE1BQU0sVUFBVSxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ2hILElBQUksSUFBSSxDQUFDLFNBQVM7WUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUVwRCxrQkFBa0I7UUFDbEIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDbEMsSUFBSSxFQUFFLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztTQUN4RSxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUF1QixDQUFDO1FBQ3RELElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFbkIsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRCxlQUFlLENBQUMsS0FBb0I7UUFDbEMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksSUFBSSxDQUFDLFFBQVE7WUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzdDLElBQUksSUFBSSxDQUFDLFNBQVM7WUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFUyxZQUFZO1FBQ3BCLElBQUksQ0FBQyxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDekIsQ0FBQzt1R0FuRFUsUUFBUTsyRkFBUixRQUFRLG1nQkFhUixtQkFBbUIsdUVDekJoQyxtOERBaURBOzsyRkRyQ2EsUUFBUTtrQkFMcEIsU0FBUzsrQkFDRSxlQUFlOzhJQUtoQixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVJLGVBQWU7c0JBQXhCLE1BQU07Z0JBRWdCLFFBQVE7c0JBQTlCLFNBQVM7dUJBQUMsVUFBVTtnQkFDRyxTQUFTO3NCQUFoQyxTQUFTO3VCQUFDLFdBQVc7Z0JBQ1UsaUJBQWlCO3NCQUFoRCxTQUFTO3VCQUFDLG1CQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbmplY3RvciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtVbnR5cGVkRm9ybUJ1aWxkZXIsIFVudHlwZWRGb3JtQ29udHJvbCwgVmFsaWRhdG9yRm4sIFZhbGlkYXRvcnN9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7Q2RrVGV4dGFyZWFBdXRvc2l6ZX0gZnJvbSAnQGFuZ3VsYXIvY2RrL3RleHQtZmllbGQnO1xuaW1wb3J0IHtBcHBGb3JtfSBmcm9tICcuLi8uLi8uLi9jb3JlL2Zvcm0vZm9ybS5jbGFzcyc7XG5pbXBvcnQge2lzTm90TmlsfSBmcm9tICcuLi8uLi9mdW5jdGlvbnMnO1xuaW1wb3J0IHtmb2N1c0lucHV0fSBmcm9tICcuLi8uLi9pbnB1dHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtdGV4dC1mb3JtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHQtZm9ybS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RleHQtZm9ybS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0Rm9ybSBleHRlbmRzIEFwcEZvcm08e3RleHQ6IHN0cmluZ30+IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgc2hvd0Vycm9yID0gdHJ1ZTtcbiAgQElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZztcbiAgQElucHV0KCkgbXVsdGlsaW5lID0gdHJ1ZTtcbiAgQElucHV0KCkgYXV0b0hlaWdodCA9IGZhbHNlO1xuICBASW5wdXQoKSBtYXhMZW5ndGggPSAyMDAwO1xuICBASW5wdXQoKSBhdXRvZm9jdXMgPSBmYWxzZTtcbiAgQElucHV0KCkgdmFsaWRhdG9yOiBWYWxpZGF0b3JGbiA9IG51bGw7XG5cbiAgQE91dHB1dCgpIHRleHRBcmVhQ2hhbmdlcyA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIEBWaWV3Q2hpbGQoJ3RleHRBcmVhJykgdGV4dEFyZWE6IEVsZW1lbnRSZWY7XG4gIEBWaWV3Q2hpbGQoJ3RleHRJbnB1dCcpIHRleHRJbnB1dDogRWxlbWVudFJlZjtcbiAgQFZpZXdDaGlsZChDZGtUZXh0YXJlYUF1dG9zaXplKSBhdXRvc2l6ZURpcmVjdGl2ZTogQ2RrVGV4dGFyZWFBdXRvc2l6ZTtcblxuICBjb250cm9sOiBVbnR5cGVkRm9ybUNvbnRyb2w7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGluamVjdG9yOiBJbmplY3RvciwgcHJvdGVjdGVkIGNkOiBDaGFuZ2VEZXRlY3RvclJlZiwgcHJvdGVjdGVkIGZvcm1CdWlsZGVyOiBVbnR5cGVkRm9ybUJ1aWxkZXIpIHtcbiAgICBzdXBlcihpbmplY3Rvcik7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICAvLyBDb21wdXRlIHZhbGlkYXRvcnNcbiAgICBjb25zdCB2YWxpZGF0b3JzID0gaXNOb3ROaWwodGhpcy5tYXhMZW5ndGgpICYmIHRoaXMubWF4TGVuZ3RoID4gMCA/IFtWYWxpZGF0b3JzLm1heExlbmd0aCh0aGlzLm1heExlbmd0aCldIDogW107XG4gICAgaWYgKHRoaXMudmFsaWRhdG9yKSB2YWxpZGF0b3JzLnB1c2godGhpcy52YWxpZGF0b3IpO1xuXG4gICAgLy8gQ3JlYXRlIHRoZSBmb3JtXG4gICAgY29uc3QgZm9ybSA9IHRoaXMuZm9ybUJ1aWxkZXIuZ3JvdXAoe1xuICAgICAgdGV4dDogW251bGwsIHZhbGlkYXRvcnMubGVuZ3RoID8gVmFsaWRhdG9ycy5jb21wb3NlKHZhbGlkYXRvcnMpIDogbnVsbF1cbiAgICB9KTtcbiAgICB0aGlzLmNvbnRyb2wgPSBmb3JtLmdldCgndGV4dCcpIGFzIFVudHlwZWRGb3JtQ29udHJvbDtcbiAgICB0aGlzLnNldEZvcm0oZm9ybSk7XG5cbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICB9XG5cbiAgdGV4dEFyZWFDaGFuZ2VkKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgdGhpcy50ZXh0QXJlYUNoYW5nZXMuZW1pdCh0aGlzLmNvbnRyb2wudmFsdWUpO1xuICB9XG5cbiAgY29udGFpbmVyUmVzaXplKCkge1xuICAgIHRoaXMuYXV0b3NpemVEaXJlY3RpdmU/LnJlc2l6ZVRvRml0Q29udGVudCh0cnVlKTtcbiAgfVxuXG4gIGZvY3VzSW5wdXQoKSB7XG4gICAgaWYgKHRoaXMudGV4dEFyZWEpIGZvY3VzSW5wdXQodGhpcy50ZXh0QXJlYSk7XG4gICAgaWYgKHRoaXMudGV4dElucHV0KSBmb2N1c0lucHV0KHRoaXMudGV4dElucHV0KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBtYXJrRm9yQ2hlY2soKSB7XG4gICAgdGhpcy5jZC5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufVxuIiwiPGZvcm0gY2xhc3M9XCJmb3JtLWNvbnRhaW5lclwiIFtmb3JtR3JvdXBdPVwiZm9ybVwiIChuZ1N1Ym1pdCk9XCJvblN1Ym1pdC5lbWl0KCRldmVudClcIj5cbiAgPG1hdC1mb3JtLWZpZWxkICpuZ0lmPVwibXVsdGlsaW5lOyBlbHNlIG1vbm9saW5lXCI+XG4gICAgPG1hdC1sYWJlbCAqbmdJZj1cInBsYWNlaG9sZGVyXCI+e3twbGFjZWhvbGRlcn19PC9tYXQtbGFiZWw+XG4gICAgPHRleHRhcmVhXG4gICAgICAjdGV4dEFyZWFcbiAgICAgIG1hdElucHV0XG4gICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXG4gICAgICBbcmVhZG9ubHldPVwiY29udHJvbC5kaXNhYmxlZFwiXG4gICAgICBbY2xhc3MuZml4ZWQtaGVpZ2h0XT1cIiFhdXRvSGVpZ2h0XCJcbiAgICAgIFtjZGtUZXh0YXJlYUF1dG9zaXplXT1cImF1dG9IZWlnaHRcIlxuICAgICAgKGtleXVwKT1cInRleHRBcmVhQ2hhbmdlZCgkZXZlbnQpXCJcbiAgICAgIChrZXlkb3duLmNvbnRyb2wuZW50ZXIpPVwib25TdWJtaXQuZW1pdCgkZXZlbnQpXCJcbiAgICAgIFthdXRvZm9jdXNdPVwiYXV0b2ZvY3VzXCJcbiAgICA+PC90ZXh0YXJlYT5cbiAgICA8bWF0LWVycm9yICpuZ0lmPVwiY29udHJvbC5oYXNFcnJvcignbWF4bGVuZ3RoJylcIj5cbiAgICAgIHt7ICdFUlJPUi5GSUVMRF9NQVhfTEVOR1RIJyB8IHRyYW5zbGF0ZTogY29udHJvbC5lcnJvcnNbJ21heGxlbmd0aCddIH19XG4gICAgPC9tYXQtZXJyb3I+XG4gICAgPG1hdC1oaW50ICpuZ0lmPVwibWF4TGVuZ3RoXCIgYWxpZ249XCJlbmRcIj5cbiAgICAgIHt7ICdJTkZPLlRFWFRfUFJPR1JFU1MnIHwgdHJhbnNsYXRlOiB7IGN1cnJlbnQ6IHRleHRBcmVhLnZhbHVlPy5sZW5ndGggfHwgMCwgbWF4OiBtYXhMZW5ndGggfSB9fVxuICAgIDwvbWF0LWhpbnQ+XG4gIDwvbWF0LWZvcm0tZmllbGQ+XG4gIDxuZy10ZW1wbGF0ZSAjbW9ub2xpbmU+XG4gICAgPG1hdC1mb3JtLWZpZWxkPlxuICAgICAgPG1hdC1sYWJlbCAqbmdJZj1cInBsYWNlaG9sZGVyXCI+e3twbGFjZWhvbGRlcn19PC9tYXQtbGFiZWw+XG4gICAgICA8aW5wdXRcbiAgICAgICAgI3RleHRJbnB1dFxuICAgICAgICBtYXRJbnB1dFxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXG4gICAgICAgIFtyZWFkb25seV09XCJjb250cm9sLmRpc2FibGVkXCJcbiAgICAgICAgW2FwcEF1dG9mb2N1c109XCJhdXRvZm9jdXNcIlxuICAgICAgICAoa2V5ZG93bi5jb250cm9sLmVudGVyKT1cIm9uU3VibWl0LmVtaXQoJGV2ZW50KVwiXG4gICAgICAvPlxuICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImNvbnRyb2wuaGFzRXJyb3IoJ21heGxlbmd0aCcpXCI+XG4gICAgICAgIHt7ICdFUlJPUi5GSUVMRF9NQVhfTEVOR1RIJyB8IHRyYW5zbGF0ZTogY29udHJvbC5lcnJvcnNbJ21heGxlbmd0aCddIH19XG4gICAgICA8L21hdC1lcnJvcj5cbiAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJjb250cm9sLmhhc0Vycm9yKCdwYXR0ZXJuJylcIj5cbiAgICAgICAge3sgJ0VSUk9SLkZJRUxEX0lOVkFMSUQnIHwgdHJhbnNsYXRlIH19XG4gICAgICA8L21hdC1lcnJvcj5cbiAgICAgIDxtYXQtZXJyb3IgW2NsYXNzLmNkay12aXN1YWxseS1oaWRkZW5dPVwiIWVycm9yU3Bhbi5pbm5lckhUTUwudHJpbSgpXCI+XG4gICAgICAgIDxzcGFuICNlcnJvclNwYW4+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW21hdEVycm9yXVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9tYXQtZXJyb3I+XG4gICAgICA8bWF0LWhpbnQgKm5nSWY9XCJtYXhMZW5ndGhcIiBhbGlnbj1cImVuZFwiPlxuICAgICAgICB7eyAnSU5GTy5URVhUX1BST0dSRVNTJyB8IHRyYW5zbGF0ZTogeyBjdXJyZW50OiB0ZXh0SW5wdXQudmFsdWU/Lmxlbmd0aCB8fCAwLCBtYXg6IG1heExlbmd0aCB9IH19XG4gICAgICA8L21hdC1oaW50PlxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gIDwvbmctdGVtcGxhdGU+XG48L2Zvcm0+XG4iXX0=