@sumaris-net/ngx-components 18.4.4 → 18.5.0-alpha1

package/esm2022/src/app/shared/material/test/test-component.mjs

@@ -17,8 +17,8 @@ export class FormFieldCustomControlExample {
     form = new FormGroup({
         tel: new FormControl(null),
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: FormFieldCustomControlExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: FormFieldCustomControlExample, isStandalone: true, selector: "form-field-custom-control-example", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldCustomControlExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldCustomControlExample, isStandalone: true, selector: "form-field-custom-control-example", ngImport: i0, template: `
     <ion-header>
       <ion-toolbar color="primary">
         <ion-buttons slot="start">
@@ -41,7 +41,7 @@ export class FormFieldCustomControlExample {
     </ion-content>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i2.MatHint), selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i0.forwardRef(() => i2.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i0.forwardRef(() => MyTelInput), selector: "example-tel-input", inputs: ["aria-describedby", "placeholder", "required", "disabled", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }, { kind: "pipe", type: i0.forwardRef(() => JsonPipe), name: "json" }, { kind: "ngmodule", type: i0.forwardRef(() => IonicModule) }, { kind: "component", type: i0.forwardRef(() => i4.IonButtons), selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i0.forwardRef(() => i4.IonContent), selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i0.forwardRef(() => i4.IonHeader), selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i0.forwardRef(() => i4.IonTitle), selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i0.forwardRef(() => i4.IonToolbar), selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i0.forwardRef(() => i4.IonBackButton), selector: "ion-back-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: FormFieldCustomControlExample, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldCustomControlExample, decorators: [{
             type: Component,
             args: [{
                     selector: 'form-field-custom-control-example',
@@ -251,10 +251,10 @@ export class MyTelInput {
         }
         this._value.set(tel);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MyTelInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.11", type: MyTelInput, isStandalone: true, selector: "example-tel-input", inputs: { _userAriaDescribedBy: { classPropertyName: "_userAriaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _value: "valueChange" }, host: { properties: { "class.example-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }], viewQueries: [{ propertyName: "areaInput", first: true, predicate: ["area"], descendants: true, isSignal: true }, { propertyName: "exchangeInput", first: true, predicate: ["exchange"], descendants: true, isSignal: true }, { propertyName: "subscriberInput", first: true, predicate: ["subscriber"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  role=\"group\"\n  class=\"example-tel-input-container\"\n  [formGroup]=\"parts\"\n  [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"area\"\n    size=\"3\"\n    maxLength=\"3\"\n    aria-label=\"Area code\"\n    (input)=\"_handleInput(parts.controls.area, exchange)\"\n    #area\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"exchange\"\n    maxLength=\"3\"\n    size=\"3\"\n    aria-label=\"Exchange code\"\n    (input)=\"_handleInput(parts.controls.exchange, subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.exchange, area)\"\n    #exchange\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"subscriber\"\n    maxLength=\"4\"\n    size=\"4\"\n    aria-label=\"Subscriber number\"\n    (input)=\"_handleInput(parts.controls.subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.subscriber, exchange)\"\n    #subscriber\n  />\n</div>\n", styles: [".example-tel-input-container{display:flex}.example-tel-input-element{border:none;background:none;padding:0;outline:none;font:inherit;text-align:center;color:currentcolor}.example-tel-input-spacer{opacity:0;transition:opacity .2s}:host.example-floating .example-tel-input-spacer{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: IonicModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyTelInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: MyTelInput, isStandalone: true, selector: "example-tel-input", inputs: { _userAriaDescribedBy: { classPropertyName: "_userAriaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _value: "valueChange" }, host: { properties: { "class.example-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }], viewQueries: [{ propertyName: "areaInput", first: true, predicate: ["area"], descendants: true, isSignal: true }, { propertyName: "exchangeInput", first: true, predicate: ["exchange"], descendants: true, isSignal: true }, { propertyName: "subscriberInput", first: true, predicate: ["subscriber"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  role=\"group\"\n  class=\"example-tel-input-container\"\n  [formGroup]=\"parts\"\n  [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"area\"\n    size=\"3\"\n    maxLength=\"3\"\n    aria-label=\"Area code\"\n    (input)=\"_handleInput(parts.controls.area, exchange)\"\n    #area\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"exchange\"\n    maxLength=\"3\"\n    size=\"3\"\n    aria-label=\"Exchange code\"\n    (input)=\"_handleInput(parts.controls.exchange, subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.exchange, area)\"\n    #exchange\n  />\n  <span class=\"example-tel-input-spacer\">&ndash;</span>\n  <input\n    class=\"example-tel-input-element\"\n    formControlName=\"subscriber\"\n    maxLength=\"4\"\n    size=\"4\"\n    aria-label=\"Subscriber number\"\n    (input)=\"_handleInput(parts.controls.subscriber)\"\n    (keyup.backspace)=\"autoFocusPrev(parts.controls.subscriber, exchange)\"\n    #subscriber\n  />\n</div>\n", styles: [".example-tel-input-container{display:flex}.example-tel-input-element{border:none;background:none;padding:0;outline:none;font:inherit;text-align:center;color:currentcolor}.example-tel-input-spacer{opacity:0;transition:opacity .2s}:host.example-floating .example-tel-input-spacer{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: IonicModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MyTelInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyTelInput, decorators: [{
             type: Component,
             args: [{ selector: 'example-tel-input', providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }], host: {
                         '[class.example-floating]': 'shouldLabelFloat',

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

@@ -101,10 +101,10 @@ export class MatCommonTestPage {
         this.cd.markForCheck();
     }
     stringify = JSON.stringify;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatCommonTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MatCommonTestPage, selector: "mat-common-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{ stringify(form.controls.empty.value) }}\n                    </pre>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disable</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly toggle</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.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.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { 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.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: i9.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: "18.2.13", ngImport: i0, type: MatCommonTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatCommonTestPage, selector: "mat-common-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{ stringify(form.controls.empty.value) }}\n                    </pre>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disable</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly toggle</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.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.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { 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.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: i9.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: "18.2.11", ngImport: i0, type: MatCommonTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatCommonTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'mat-common-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                      {{ stringify(form.controls.empty.value) }}\n                    </pre>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disable</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly toggle</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });

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

@@ -26,10 +26,10 @@ export class TextFormTestingPage {
         this.standaloneTextForm1.enable();
         this.standaloneTextForm2.enable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TextFormTestingPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: TextFormTestingPage, selector: "text-form-testing", viewQueries: [{ propertyName: "standaloneTextForm1", first: true, predicate: ["standaloneTextForm1"], descendants: true }, { propertyName: "standaloneTextForm2", first: true, predicate: ["standaloneTextForm2"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text form examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Default validator</ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form\n              #standaloneTextForm1\n              [standalone]=\"true\"\n              [multiline]=\"false\"\n              [maxLength]=\"10\"\n            ></app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form\n              #standaloneTextForm2\n              [standalone]=\"true\"\n              [multiline]=\"false\"\n              [maxLength]=\"10\"\n              [validator]=\"Validators.required\"\n            >\n              @if (standaloneTextForm2.textControl.hasError('required')) {\n                <mat-error matError>REQUIRED</mat-error>\n              }\n            </app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <form class=\"form-container\" [formGroup]=\"form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.empty.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.required.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"required\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                [validator]=\"Validators.required\"\n              >\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.empty.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"empty\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                placeholder=\"Empty field\"\n              ></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.required.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"required\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                [validator]=\"Validators.required\"\n                placeholder=\"Required field\"\n              >\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Outline</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.multiline.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"multiline\"\n                [multiline]=\"true\"\n                appearance=\"outline\"\n                autoSize=\"true\"\n                autoSizeMinRows=\"4\"\n                [maxLength]=\"2000\"\n                placeholder=\"Outline field\"\n              ></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6.TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoSize", "autoSizeMinRows", "autoSizeMaxRows", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "autoHeight"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextFormTestingPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextFormTestingPage, selector: "text-form-testing", viewQueries: [{ propertyName: "standaloneTextForm1", first: true, predicate: ["standaloneTextForm1"], descendants: true }, { propertyName: "standaloneTextForm2", first: true, predicate: ["standaloneTextForm2"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text form examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Default validator</ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form\n              #standaloneTextForm1\n              [standalone]=\"true\"\n              [multiline]=\"false\"\n              [maxLength]=\"10\"\n            ></app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form\n              #standaloneTextForm2\n              [standalone]=\"true\"\n              [multiline]=\"false\"\n              [maxLength]=\"10\"\n              [validator]=\"Validators.required\"\n            >\n              @if (standaloneTextForm2.textControl.hasError('required')) {\n                <mat-error matError>REQUIRED</mat-error>\n              }\n            </app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <form class=\"form-container\" [formGroup]=\"form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.empty.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.required.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"required\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                [validator]=\"Validators.required\"\n              >\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.empty.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"empty\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                placeholder=\"Empty field\"\n              ></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.required.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"required\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                [validator]=\"Validators.required\"\n                placeholder=\"Required field\"\n              >\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Outline</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.multiline.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"multiline\"\n                [multiline]=\"true\"\n                appearance=\"outline\"\n                autoSize=\"true\"\n                autoSizeMinRows=\"4\"\n                [maxLength]=\"2000\"\n                placeholder=\"Outline field\"\n              ></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6.TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoSize", "autoSizeMinRows", "autoSizeMaxRows", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "autoHeight"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TextFormTestingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextFormTestingPage, decorators: [{
             type: Component,
             args: [{ selector: 'text-form-testing', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Text form examples</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Default validator</ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form\n              #standaloneTextForm1\n              [standalone]=\"true\"\n              [multiline]=\"false\"\n              [maxLength]=\"10\"\n            ></app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <app-text-form\n              #standaloneTextForm2\n              [standalone]=\"true\"\n              [multiline]=\"false\"\n              [maxLength]=\"10\"\n              [validator]=\"Validators.required\"\n            >\n              @if (standaloneTextForm2.textControl.hasError('required')) {\n                <mat-error matError>REQUIRED</mat-error>\n              }\n            </app-text-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <form class=\"form-container\" [formGroup]=\"form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.empty.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.required.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"required\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                [validator]=\"Validators.required\"\n              >\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.empty.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"empty\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                placeholder=\"Empty field\"\n              ></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.required.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"required\"\n                [multiline]=\"false\"\n                [maxLength]=\"10\"\n                [validator]=\"Validators.required\"\n                placeholder=\"Required field\"\n              >\n                <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Outline</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ form.controls.multiline.value | json }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <app-text-form\n                formControlName=\"multiline\"\n                [multiline]=\"true\"\n                appearance=\"outline\"\n                autoSize=\"true\"\n                autoSizeMinRows=\"4\"\n                [maxLength]=\"2000\"\n                placeholder=\"Outline field\"\n              ></app-text-form>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }], propDecorators: { standaloneTextForm1: [{

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

@@ -128,8 +128,8 @@ export class TextForm extends AppForm {
             this.checkIfTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.UntypedFormBuilder }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: TextForm, selector: "app-text-form", inputs: { showError: ["showError", "showError", booleanAttribute], placeholder: "placeholder", multiline: ["multiline", "multiline", booleanAttribute], autoSize: ["autoSize", "autoSize", booleanAttribute], autoSizeMinRows: ["autoSizeMinRows", "autoSizeMinRows", numberAttribute], autoSizeMaxRows: ["autoSizeMaxRows", "autoSizeMaxRows", numberAttribute], maxLength: ["maxLength", "maxLength", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], validator: "validator", standalone: ["standalone", "standalone", booleanAttribute], formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", autoHeight: ["autoHeight", "autoHeight", booleanAttribute] }, outputs: { textAreaChanges: "textAreaChanges" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.UntypedFormBuilder }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextForm, selector: "app-text-form", inputs: { showError: ["showError", "showError", booleanAttribute], placeholder: "placeholder", multiline: ["multiline", "multiline", booleanAttribute], autoSize: ["autoSize", "autoSize", booleanAttribute], autoSizeMinRows: ["autoSizeMinRows", "autoSizeMinRows", numberAttribute], autoSizeMaxRows: ["autoSizeMaxRows", "autoSizeMaxRows", numberAttribute], maxLength: ["maxLength", "maxLength", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], validator: "validator", standalone: ["standalone", "standalone", booleanAttribute], formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", autoHeight: ["autoHeight", "autoHeight", booleanAttribute] }, outputs: { textAreaChanges: "textAreaChanges" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextForm),
@@ -137,7 +137,7 @@ export class TextForm extends AppForm {
             },
         ], 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  @if (multiline) {\n    <mat-form-field\n      [floatLabel]=\"floatLabel | asFloatLabelType\"\n      [appearance]=\"appearance\"\n      [subscriptSizing]=\"subscriptSizing\"\n    >\n      @if (floatLabel !== 'never' && !!placeholder) {\n        <mat-label>{{ placeholder }}</mat-label>\n      }\n      <textarea\n        #textArea\n        matInput\n        [formControl]=\"textControl\"\n        [readonly]=\"textControl.disabled\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n        [class.fixed-height]=\"!autoSize\"\n        [cdkTextareaAutosize]=\"autoSize\"\n        [cdkAutosizeMinRows]=\"autoSizeMinRows\"\n        [cdkAutosizeMaxRows]=\"autoSizeMaxRows\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      ></textarea>\n      <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      [floatLabel]=\"floatLabel | asFloatLabelType\"\n      [appearance]=\"appearance\"\n      [subscriptSizing]=\"subscriptSizing\"\n    >\n      @if (floatLabel !== 'never' && !!placeholder) {\n        <mat-label>{{ placeholder }}</mat-label>\n      }\n      <input\n        #textInput\n        matInput\n        [formControl]=\"textControl\"\n        [readonly]=\"textControl.disabled\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"textControl.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-error *ngIf=\"errorSpan.innerHTML.trim() as error\" [innerHTML]=\"error\"></mat-error>\n      <span #errorSpan class=\"cdk-visually-hidden\">\n        <ng-content select=\"[matError]\"></ng-content>\n      </span>\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  }\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" }, { kind: "pipe", type: i8.AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TextForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextForm, decorators: [{
             type: Component,
             args: [{ selector: 'app-text-form', providers: [
                         {

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

@@ -12,8 +12,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedTextFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedTextFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SharedTextFormModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedTextFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedTextFormModule, declarations: [
             // Components
             TextForm], imports: [i1.TranslateModule, CommonModule,
             IonicModule,
@@ -25,7 +25,7 @@ export class SharedTextFormModule {
             SharedDirectivesModule], exports: [TranslateModule,
             // Components
             TextForm] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedTextFormModule, imports: [TranslateModule.forChild(),
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedTextFormModule, imports: [TranslateModule.forChild(),
             CommonModule,
             IonicModule,
             ReactiveFormsModule,
@@ -35,7 +35,7 @@ export class SharedTextFormModule {
             MatInputModule,
             SharedDirectivesModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedTextFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedTextFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/named-filter/named-filter-selector.component.mjs

@@ -251,10 +251,10 @@ export class NamedFilterSelector extends AppForm {
         this.setValue({ namedFilter: value });
         this.autocompleteField.blurred.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelector, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.ToastController }, { token: i2.PopoverController }, { token: APP_NAMED_FILTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: NamedFilterSelector, selector: "app-named-filter-selector", inputs: { mobile: "mobile", entityName: "entityName", appearance: "appearance", subscriptSizing: "subscriptSizing", filterContentProvider: "filterContentProvider", filterImportCallback: "filterImportCallback", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix", autocompleteConfig: "autocompleteConfig", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", detectChangeOnSelectFilter: "detectChangeOnSelectFilter", buttonsPosition: "buttonsPosition", disabled: "disabled" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0px\">add</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i4.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }, { kind: "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: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelector, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.ToastController }, { token: i2.PopoverController }, { token: APP_NAMED_FILTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NamedFilterSelector, selector: "app-named-filter-selector", inputs: { mobile: "mobile", entityName: "entityName", appearance: "appearance", subscriptSizing: "subscriptSizing", filterContentProvider: "filterContentProvider", filterImportCallback: "filterImportCallback", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix", autocompleteConfig: "autocompleteConfig", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", detectChangeOnSelectFilter: "detectChangeOnSelectFilter", buttonsPosition: "buttonsPosition", disabled: "disabled" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0px\">add</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i4.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }, { kind: "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: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelector, decorators: [{
             type: Component,
             args: [{ selector: 'app-named-filter-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.SAVE' | translate\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0px\">add</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"'COMMON.NAMED_FILTER.DELETE' | translate\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i2.ToastController }, { type: i2.PopoverController }, { type: undefined, decorators: [{

package/esm2022/src/app/shared/named-filter/named-filter.module.mjs

@@ -9,11 +9,11 @@ import { SharedMaterialModule } from '../material/material.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedNamedFilterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedNamedFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SharedNamedFilterModule, declarations: [NamedFilterSelector], imports: [CommonModule, IonicModule, i1.TranslateModule, SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule], exports: [NamedFilterSelector] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedNamedFilterModule, imports: [CommonModule, IonicModule, TranslateModule.forChild(), SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedNamedFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedNamedFilterModule, declarations: [NamedFilterSelector], imports: [CommonModule, IonicModule, i1.TranslateModule, SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule], exports: [NamedFilterSelector] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedNamedFilterModule, imports: [CommonModule, IonicModule, TranslateModule.forChild(), SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SharedNamedFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedNamedFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IonicModule, TranslateModule.forChild(), SharedMatAutocompleteModule, ReactiveFormsModule, SharedMaterialModule],

package/esm2022/src/app/shared/named-filter/named-filter.service.mjs

@@ -60,10 +60,10 @@ export class AbstractNamedFilterService extends BaseEntityService {
             source.content = JSON.stringify(source.content);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AbstractNamedFilterService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: AbstractNamedFilterService, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractNamedFilterService, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractNamedFilterService, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AbstractNamedFilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractNamedFilterService, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1.GraphqlService }, { type: i2.PlatformService }, { type: i3.AccountService }, { type: undefined }, { type: undefined }, { type: undefined }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmFtZWQtZmlsdGVyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9uYW1lZC1maWx0ZXIvbmFtZWQtZmlsdGVyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBVXJFLE9BQU8sRUFBRSxpQkFBaUIsRUFBNEIsTUFBTSwrQ0FBK0MsQ0FBQztBQUc1RyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sY0FBYyxDQUFDOzs7OztBQUdyQyxNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxJQUFJLGNBQWMsQ0FBMEMsb0JBQW9CLENBQUMsQ0FBQztBQW1CMUgsV0FBVztBQUVYLE1BQU0sT0FBZ0IsMEJBTXBCLFNBQVEsaUJBQStCO0lBSTNCO0lBQ0E7SUFDQTtJQUNBO0lBQ0E7SUFDQTtJQU5aLFlBQ1ksT0FBdUIsRUFDdkIsUUFBeUIsRUFDekIsT0FBdUIsRUFDdkIsUUFBcUIsRUFDckIsVUFBdUIsRUFDdkIsT0FBNEM7UUFFdEQsS0FBSyxDQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRTtZQUM3QyxhQUFhLEVBQUUsTUFBTTtZQUNyQixvQkFBb0IsRUFBRSxLQUFLO1lBQzNCLEdBQUcsT0FBTztTQUNYLENBQUMsQ0FBQztRQVhPLFlBQU8sR0FBUCxPQUFPLENBQWdCO1FBQ3ZCLGFBQVEsR0FBUixRQUFRLENBQWlCO1FBQ3pCLFlBQU8sR0FBUCxPQUFPLENBQWdCO1FBQ3ZCLGFBQVEsR0FBUixRQUFRLENBQWE7UUFDckIsZUFBVSxHQUFWLFVBQVUsQ0FBYTtRQUN2QixZQUFPLEdBQVAsT0FBTyxDQUFxQztRQU90RCxJQUFJLENBQUMsVUFBVSxHQUFHLHlCQUF5QixDQUFDO0lBQzlDLENBQUM7SUFFRCxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQVUsRUFBRSxNQUFrQjtRQUMxQyxJQUFJLFdBQVcsQ0FBQyxVQUFVLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQztZQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO1FBQ2xFLEtBQUssR0FBRyxDQUFDLE9BQU8sS0FBSyxLQUFLLFFBQVEsSUFBSSxLQUFLLEtBQUssR0FBRyxJQUFJLEtBQUssQ0FBQyxJQUFJLFNBQVMsQ0FBQztRQUMzRSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxFQUE4QjtZQUN2SCxTQUFTLEVBQUUsSUFBSTtTQUNoQixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZUFBZSxDQUFDLFVBQWtCLEVBQUUsTUFBbUI7UUFDckQsT0FBVTtZQUNSLEdBQUcsTUFBTTtZQUNULFVBQVU7U0FDWCxDQUFDO0lBQ0osQ0FBQztJQUVELFFBQVEsQ0FBQyxNQUFXO1FBQ2xCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFdEMsaUNBQWlDO1FBQ2pDLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLElBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQztZQUNoRyxNQUFNLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDO1FBRW5ELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFFUyxxQkFBcUIsQ0FBQyxNQUFTO1FBQ3ZDLEtBQUssQ0FBQyxxQkFBcUIsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUVwQyxtQkFBbUI7UUFDbkIsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLElBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQztZQUFFLE1BQU0sQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7UUFFM0gsb0JBQW9CO1FBQ3BCLElBQUksT0FBTyxNQUFNLENBQUMsT0FBTyxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQ3ZDLE1BQU0sQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDbEQsQ0FBQztJQUNILENBQUM7d0dBNURtQiwwQkFBMEI7NEZBQTFCLDBCQUEwQjs7NEZBQTFCLDBCQUEwQjtrQkFEL0MsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5qZWN0aW9uVG9rZW4gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVudGl0eVV0aWxzIH0gZnJvbSAnLi4vLi4vY29yZS9zZXJ2aWNlcy9tb2RlbC9lbnRpdHkubW9kZWwnO1xuaW1wb3J0IHtcbiAgRW50aXRpZXNTZXJ2aWNlTG9hZE9wdGlvbnMsXG4gIEVudGl0eVNlcnZpY2VXYXRjaE9wdGlvbnMsXG4gIElFbnRpdGllc1NlcnZpY2UsXG4gIElFbnRpdHlTZXJ2aWNlLFxuICBMb2FkUmVzdWx0LFxuICBTdWdnZXN0U2VydmljZSxcbn0gZnJvbSAnLi4vc2VydmljZXMvZW50aXR5LXNlcnZpY2UuY2xhc3MnO1xuaW1wb3J0IHsgR3JhcGhxbFNlcnZpY2UgfSBmcm9tICcuLi8uLi9jb3JlL2dyYXBocWwvZ3JhcGhxbC5zZXJ2aWNlJztcbmltcG9ydCB7IEJhc2VFbnRpdHlTZXJ2aWNlLCBCYXNlRW50aXR5U2VydmljZU9wdGlvbnMgfSBmcm9tICcuLi8uLi9jb3JlL3NlcnZpY2VzL2Jhc2UtZW50aXR5LXNlcnZpY2UuY2xhc3MnO1xuaW1wb3J0IHsgUGxhdGZvcm1TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vY29yZS9zZXJ2aWNlcy9wbGF0Zm9ybS5zZXJ2aWNlJztcbmltcG9ydCB7IEFjY291bnRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vY29yZS9zZXJ2aWNlcy9hY2NvdW50LnNlcnZpY2UnO1xuaW1wb3J0IHsgaXNOaWwgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuaW1wb3J0IHsgSU5hbWVkRmlsdGVyLCBJTmFtZWRGaWx0ZXJGaWx0ZXIsIE5hbWVkRmlsdGVyLCBOYW1lZEZpbHRlckZpbHRlciB9IGZyb20gJy4vbmFtZWQtZmlsdGVyLm1vZGVsJztcblxuZXhwb3J0IGNvbnN0IEFQUF9OQU1FRF9GSUxURVJfU0VSVklDRSA9IG5ldyBJbmplY3Rpb25Ub2tlbjxJTmFtZWRGaWx0ZXJTZXJ2aWNlPGFueSwgYW55LCBhbnksIGFueT4+KCduYW1lZEZpbHRlclNlcnZpY2UnKTtcblxuZXhwb3J0IGludGVyZmFjZSBJTmFtZWRGaWx0ZXJTZXJ2aWNlPFxuICBUIGV4dGVuZHMgSU5hbWVkRmlsdGVyPFQ+LFxuICBGIGV4dGVuZHMgSU5hbWVkRmlsdGVyRmlsdGVyPEYsIFQ+LFxuICBXTyBleHRlbmRzIE5hbWVkRmlsdGVyV2F0Y2hPcHRpb25zLFxuICBMTyBleHRlbmRzIE5hbWVkRmlsdGVyTG9hZE9wdGlvbnMsXG4+IGV4dGVuZHMgSUVudGl0aWVzU2VydmljZTxULCBGLCBXTz4sXG4gICAgSUVudGl0eVNlcnZpY2U8VCwgbnVtYmVyLCBMTz4sXG4gICAgU3VnZ2VzdFNlcnZpY2U8VCwgRj4ge31cblxuZXhwb3J0IGludGVyZmFjZSBOYW1lZEZpbHRlcldhdGNoT3B0aW9ucyBleHRlbmRzIEVudGl0eVNlcnZpY2VXYXRjaE9wdGlvbnMge1xuICB3aXRoQ29udGVudD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmFtZWRGaWx0ZXJMb2FkT3B0aW9ucyBleHRlbmRzIEVudGl0aWVzU2VydmljZUxvYWRPcHRpb25zIHtcbiAgd2l0aENvbnRlbnQ/OiBib29sZWFuO1xufVxuXG4vLyBAZHluYW1pY1xuQERpcmVjdGl2ZSgpXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgQWJzdHJhY3ROYW1lZEZpbHRlclNlcnZpY2U8XG4gICAgVCBleHRlbmRzIE5hbWVkRmlsdGVyPFQ+LFxuICAgIEYgZXh0ZW5kcyBOYW1lZEZpbHRlckZpbHRlcjxGLCBUPixcbiAgICBXTyBleHRlbmRzIE5hbWVkRmlsdGVyV2F0Y2hPcHRpb25zID0gTmFtZWRGaWx0ZXJXYXRjaE9wdGlvbnMsXG4gICAgTE8gZXh0ZW5kcyBOYW1lZEZpbHRlckxvYWRPcHRpb25zID0gTmFtZWRGaWx0ZXJMb2FkT3B0aW9ucyxcbiAgPlxuICBleHRlbmRzIEJhc2VFbnRpdHlTZXJ2aWNlPFQsIEYsIG51bWJlcj5cbiAgaW1wbGVtZW50cyBJTmFtZWRGaWx0ZXJTZXJ2aWNlPFQsIEYsIFdPLCBMTz5cbntcbiAgcHJvdGVjdGVkIGNvbnN0cnVjdG9yKFxuICAgIHByb3RlY3RlZCBncmFwaHFsOiBHcmFwaHFsU2VydmljZSxcbiAgICBwcm90ZWN0ZWQgcGxhdGZvcm06IFBsYXRmb3JtU2VydmljZSxcbiAgICBwcm90ZWN0ZWQgYWNjb3VudDogQWNjb3VudFNlcnZpY2UsXG4gICAgcHJvdGVjdGVkIGRhdGFUeXBlOiBuZXcgKCkgPT4gVCxcbiAgICBwcm90ZWN0ZWQgZmlsdGVyVHlwZTogbmV3ICgpID0+IEYsXG4gICAgcHJvdGVjdGVkIG9wdGlvbnM6IEJhc2VFbnRpdHlTZXJ2aWNlT3B0aW9uczxULCBudW1iZXI+XG4gICkge1xuICAgIHN1cGVyKGdyYXBocWwsIHBsYXRmb3JtLCBkYXRhVHlwZSwgZmlsdGVyVHlwZSwge1xuICAgICAgZGVmYXVsdFNvcnRCeTogJ25hbWUnLFxuICAgICAgZGVmYXVsdFNvcnREaXJlY3Rpb246ICdhc2MnLFxuICAgICAgLi4ub3B0aW9ucyxcbiAgICB9KTtcbiAgICB0aGlzLl9sb2dQcmVmaXggPSAnW25hbWVkLWZpbHRlci1zZXJ2aWNlXSAnO1xuICB9XG5cbiAgYXN5bmMgc3VnZ2VzdCh2YWx1ZTogYW55LCBmaWx0ZXI6IFBhcnRpYWw8Rj4pOiBQcm9taXNlPExvYWRSZXN1bHQ8VD4+IHtcbiAgICBpZiAoRW50aXR5VXRpbHMuaXNOb3RFbXB0eSh2YWx1ZSwgJ2lkJykpIHJldHVybiB7IGRhdGE6IFt2YWx1ZV0gfTtcbiAgICB2YWx1ZSA9ICh0eXBlb2YgdmFsdWUgPT09ICdzdHJpbmcnICYmIHZhbHVlICE9PSAnKicgJiYgdmFsdWUpIHx8IHVuZGVmaW5lZDtcbiAgICByZXR1cm4gdGhpcy5sb2FkQWxsKDAsICF2YWx1ZSA/IDMwIDogMTAsICduYW1lJywgJ2FzYycsIHRoaXMuYXNTdWdnZXN0RmlsdGVyKHZhbHVlLCBmaWx0ZXIpLCA8RW50aXRpZXNTZXJ2aWNlTG9hZE9wdGlvbnM+e1xuICAgICAgd2l0aFRvdGFsOiB0cnVlLFxuICAgIH0pO1xuICB9XG5cbiAgYXNTdWdnZXN0RmlsdGVyKHNlYXJjaFRleHQ6IHN0cmluZywgZmlsdGVyPzogUGFydGlhbDxGPik6IEYge1xuICAgIHJldHVybiA8Rj57XG4gICAgICAuLi5maWx0ZXIsXG4gICAgICBzZWFyY2hUZXh0LFxuICAgIH07XG4gIH1cblxuICBhc0ZpbHRlcihzb3VyY2U6IGFueSk6IEYge1xuICAgIGNvbnN0IGZpbHRlciA9IHN1cGVyLmFzRmlsdGVyKHNvdXJjZSk7XG5cbiAgICAvLyBEZWZhdWx0IGZpbHRlciBvbiBjdXJyZW50IHVzZXJcbiAgICBpZiAodGhpcy5hY2NvdW50LmlzTG9naW4oKSAmJiBpc05pbChmaWx0ZXIucmVjb3JkZXJQZXJzb25JZCkgJiYgaXNOaWwoZmlsdGVyLnJlY29yZGVyRGVwYXJ0bWVudElkKSlcbiAgICAgIGZpbHRlci5yZWNvcmRlclBlcnNvbklkID0gdGhpcy5hY2NvdW50LnBlcnNvbi5pZDtcblxuICAgIHJldHVybiBmaWx0ZXI7XG4gIH1cblxuICBwcm90ZWN0ZWQgZmlsbERlZmF1bHRQcm9wZXJ0aWVzKHNvdXJjZTogVCkge1xuICAgIHN1cGVyLmZpbGxEZWZhdWx0UHJvcGVydGllcyhzb3VyY2UpO1xuXG4gICAgLy8gRGVmYXVsdCByZWNvcmRlclxuICAgIGlmIChpc05pbChzb3VyY2UucmVjb3JkZXJQZXJzb25JZCkgJiYgaXNOaWwoc291cmNlLnJlY29yZGVyRGVwYXJ0bWVudElkKSkgc291cmNlLnJlY29yZGVyUGVyc29uSWQgPSB0aGlzLmFjY291bnQucGVyc29uLmlkO1xuXG4gICAgLy8gU3RyaW5naWZ5IGNvbnRlbnRcbiAgICBpZiAodHlwZW9mIHNvdXJjZS5jb250ZW50ID09PSAnb2JqZWN0Jykge1xuICAgICAgc291cmNlLmNvbnRlbnQgPSBKU09OLnN0cmluZ2lmeShzb3VyY2UuY29udGVudCk7XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2022/src/app/shared/named-filter/testing/named-filter-selector.testing.mjs

@@ -62,10 +62,10 @@ export class NamedFilterSelectorTestingPage {
         this.filterForm.patchValue(filter, { emitEvent: false });
         this.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelectorTestingPage, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalSettingsService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: NamedFilterSelectorTestingPage, selector: "app-name-filter-selector-testing", inputs: { filterForm: "filterForm" }, ngImport: i0, template: "<app-toolbar defaultBackHref=\"testing/shared\">\n  <ion-title>Named filter selector testing page</ion-title>\n  @if (!mobile) {\n    <ion-buttons slot=\"end\">\n      <app-named-filter-selector\n        class=\"ion-padding-right ion-padding-top\"\n        [entityName]=\"'DummyEntity'\"\n        [subscriptSizing]=\"'dynamic'\"\n        [filterContentProvider]=\"namedFilterContentProvider\"\n        [filterFormDirty]=\"filterForm.dirty\"\n        [autocompleteConfig]=\"namedFilterAutocompleteConfig\"\n        [filterImportCallback]=\"filterImportCallback\"\n        (filterSelected)=\"setFilter($event)\"\n        [detectChangeOnSelectFilter]=\"true\"\n      ></app-named-filter-selector>\n    </ion-buttons>\n  }\n</app-toolbar>\n<ion-content>\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-label>Dummy filter</ion-label>\n          </ion-card-header>\n          <ion-card-content>\n            @if (mobile) {\n              <app-named-filter-selector\n                class=\"ion-padding-right ion-padding-top\"\n                [entityName]=\"'DummyEntity'\"\n                [subscriptSizing]=\"'dynamic'\"\n                [filterContentProvider]=\"namedFilterContentProvider\"\n                [filterFormDirty]=\"filterForm.dirty\"\n                [autocompleteConfig]=\"namedFilterAutocompleteConfig\"\n                [filterImportCallback]=\"filterImportCallback\"\n                (filterSelected)=\"setFilter($event)\"\n                [detectChangeOnSelectFilter]=\"true\"\n              ></app-named-filter-selector>\n            }\n\n            <form class=\"form-container\" [formGroup]=\"filterForm\">\n              <div class=\"form-group\">\n                <label for=\"filter-a\">Filter A&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-a\" name=\"filter-a\" formControlName=\"filterA\" />\n              </div>\n              <div class=\"form-group\">\n                <label for=\"filter-b\">Filter B&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-b\" name=\"filter-b\" formControlName=\"filterB\" />\n              </div>\n              <div class=\"form-group\">\n                <label for=\"filter-a\">Filter C&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-c\" name=\"filter-c\" formControlName=\"filterC\" />\n              </div>\n            </form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\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.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.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: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: i5.NamedFilterSelector, selector: "app-named-filter-selector", inputs: ["mobile", "entityName", "appearance", "subscriptSizing", "filterContentProvider", "filterImportCallback", "filterFormDirty", "showButtons", "exportFileNamePrefix", "autocompleteConfig", "dropButtonTitle", "clearButtonTitle", "detectChangeOnSelectFilter", "buttonsPosition", "disabled"], outputs: ["filterSelected", "filterDeleted", "filterCleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelectorTestingPage, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalSettingsService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NamedFilterSelectorTestingPage, selector: "app-name-filter-selector-testing", inputs: { filterForm: "filterForm" }, ngImport: i0, template: "<app-toolbar defaultBackHref=\"testing/shared\">\n  <ion-title>Named filter selector testing page</ion-title>\n  @if (!mobile) {\n    <ion-buttons slot=\"end\">\n      <app-named-filter-selector\n        class=\"ion-padding-right ion-padding-top\"\n        [entityName]=\"'DummyEntity'\"\n        [subscriptSizing]=\"'dynamic'\"\n        [filterContentProvider]=\"namedFilterContentProvider\"\n        [filterFormDirty]=\"filterForm.dirty\"\n        [autocompleteConfig]=\"namedFilterAutocompleteConfig\"\n        [filterImportCallback]=\"filterImportCallback\"\n        (filterSelected)=\"setFilter($event)\"\n        [detectChangeOnSelectFilter]=\"true\"\n      ></app-named-filter-selector>\n    </ion-buttons>\n  }\n</app-toolbar>\n<ion-content>\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-label>Dummy filter</ion-label>\n          </ion-card-header>\n          <ion-card-content>\n            @if (mobile) {\n              <app-named-filter-selector\n                class=\"ion-padding-right ion-padding-top\"\n                [entityName]=\"'DummyEntity'\"\n                [subscriptSizing]=\"'dynamic'\"\n                [filterContentProvider]=\"namedFilterContentProvider\"\n                [filterFormDirty]=\"filterForm.dirty\"\n                [autocompleteConfig]=\"namedFilterAutocompleteConfig\"\n                [filterImportCallback]=\"filterImportCallback\"\n                (filterSelected)=\"setFilter($event)\"\n                [detectChangeOnSelectFilter]=\"true\"\n              ></app-named-filter-selector>\n            }\n\n            <form class=\"form-container\" [formGroup]=\"filterForm\">\n              <div class=\"form-group\">\n                <label for=\"filter-a\">Filter A&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-a\" name=\"filter-a\" formControlName=\"filterA\" />\n              </div>\n              <div class=\"form-group\">\n                <label for=\"filter-b\">Filter B&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-b\" name=\"filter-b\" formControlName=\"filterB\" />\n              </div>\n              <div class=\"form-group\">\n                <label for=\"filter-a\">Filter C&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-c\" name=\"filter-c\" formControlName=\"filterC\" />\n              </div>\n            </form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\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.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.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: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: i5.NamedFilterSelector, selector: "app-named-filter-selector", inputs: ["mobile", "entityName", "appearance", "subscriptSizing", "filterContentProvider", "filterImportCallback", "filterFormDirty", "showButtons", "exportFileNamePrefix", "autocompleteConfig", "dropButtonTitle", "clearButtonTitle", "detectChangeOnSelectFilter", "buttonsPosition", "disabled"], outputs: ["filterSelected", "filterDeleted", "filterCleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelectorTestingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelectorTestingPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-name-filter-selector-testing', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar defaultBackHref=\"testing/shared\">\n  <ion-title>Named filter selector testing page</ion-title>\n  @if (!mobile) {\n    <ion-buttons slot=\"end\">\n      <app-named-filter-selector\n        class=\"ion-padding-right ion-padding-top\"\n        [entityName]=\"'DummyEntity'\"\n        [subscriptSizing]=\"'dynamic'\"\n        [filterContentProvider]=\"namedFilterContentProvider\"\n        [filterFormDirty]=\"filterForm.dirty\"\n        [autocompleteConfig]=\"namedFilterAutocompleteConfig\"\n        [filterImportCallback]=\"filterImportCallback\"\n        (filterSelected)=\"setFilter($event)\"\n        [detectChangeOnSelectFilter]=\"true\"\n      ></app-named-filter-selector>\n    </ion-buttons>\n  }\n</app-toolbar>\n<ion-content>\n  <ion-grid>\n    <ion-row>\n      <ion-col>\n        <ion-card>\n          <ion-card-header>\n            <ion-label>Dummy filter</ion-label>\n          </ion-card-header>\n          <ion-card-content>\n            @if (mobile) {\n              <app-named-filter-selector\n                class=\"ion-padding-right ion-padding-top\"\n                [entityName]=\"'DummyEntity'\"\n                [subscriptSizing]=\"'dynamic'\"\n                [filterContentProvider]=\"namedFilterContentProvider\"\n                [filterFormDirty]=\"filterForm.dirty\"\n                [autocompleteConfig]=\"namedFilterAutocompleteConfig\"\n                [filterImportCallback]=\"filterImportCallback\"\n                (filterSelected)=\"setFilter($event)\"\n                [detectChangeOnSelectFilter]=\"true\"\n              ></app-named-filter-selector>\n            }\n\n            <form class=\"form-container\" [formGroup]=\"filterForm\">\n              <div class=\"form-group\">\n                <label for=\"filter-a\">Filter A&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-a\" name=\"filter-a\" formControlName=\"filterA\" />\n              </div>\n              <div class=\"form-group\">\n                <label for=\"filter-b\">Filter B&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-b\" name=\"filter-b\" formControlName=\"filterB\" />\n              </div>\n              <div class=\"form-group\">\n                <label for=\"filter-a\">Filter C&nbsp;</label>\n                <input type=\"text\" class=\"form-control\" id=\"filter-c\" name=\"filter-c\" formControlName=\"filterC\" />\n              </div>\n            </form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.LocalSettingsService }, { type: i2.UntypedFormBuilder }], propDecorators: { filterForm: [{

package/esm2022/src/app/shared/named-filter/testing/named-filter.testing.module.mjs

@@ -13,11 +13,11 @@ const routes = [
     },
 ];
 export class NamedFilterSelectorTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelectorTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelectorTestingModule, declarations: [NamedFilterSelectorTestingPage], imports: [CommonModule, i1.RouterModule, SharedModule], exports: [RouterModule, NamedFilterSelectorTestingPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelectorTestingModule, imports: [CommonModule, RouterModule.forChild(routes), SharedModule, RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelectorTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelectorTestingModule, declarations: [NamedFilterSelectorTestingPage], imports: [CommonModule, i1.RouterModule, SharedModule], exports: [RouterModule, NamedFilterSelectorTestingPage] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelectorTestingModule, imports: [CommonModule, RouterModule.forChild(routes), SharedModule, RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NamedFilterSelectorTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NamedFilterSelectorTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule.forChild(routes), SharedModule],