@gerandon/ngx-widgets 18.0.8 → 19.0.0

package/README.md

@@ -43,14 +43,14 @@ Be patient with me, I'm trying to figure out what this README should really cont
     </tbody>
 </table>
 
-##Widgets (built-in examples)
+## Widgets (built-in examples)
 There are a few custom components, just to present how the core functionality and implementation works and makes
 the development easier (especially in case of a newly created project)
 
 In the following example you can see a custom CVA implementation built into the library (as widget)
 
 As you can see, instead of defining what our CVA will look like, we could use the Base implementation from the core of the library. That way (as seen) our component will have significantly less code on its TS side and we also reduced redundancy as well.
-###BasicInput (component)
+### BasicInput (component)
 ```typescript
 @Component({
     selector: 'basic-input',

package/fesm2022/gerandon-ngx-widgets.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, ChangeDetectorRef, Directive, Input, ViewChild, InjectionToken, Optional, Inject, isDevMode, EventEmitter, forwardRef, Component, ViewEncapsulation, Output, ViewChildren } from '@angular/core';
+import { input, inject, Injector, ChangeDetectorRef, Directive, ViewChild, InjectionToken, Optional, Inject, Input, isDevMode, output, forwardRef, Component, ViewEncapsulation, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, NgControl, NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { of, Subject, Observable, takeUntil } from 'rxjs';
@@ -26,7 +26,7 @@ import { MatChipsModule } from '@angular/material/chips';
 
 class BaseValueAccessor {
     constructor() {
-        this.validator = of({});
+        this.validator = input(of({}));
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.onChange = (value) => {
         };
@@ -42,7 +42,7 @@ class BaseValueAccessor {
     }
     validate(control) {
         control.setErrors({ ...control.errors, pending: true });
-        return this.validator;
+        return this.validator();
     }
     ngAfterViewInit() {
         this.controlDir = this.injector.get(NgControl);
@@ -68,14 +68,12 @@ class BaseValueAccessor {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: BaseValueAccessor, inputs: { validator: "validator" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: BaseValueAccessor, isStandalone: true, inputs: { validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BaseValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseValueAccessor, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { validator: [{
-                type: Input
-            }], inputElement: [{
+        }], ctorParameters: () => [], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
             }], input: [{
@@ -88,16 +86,19 @@ class BaseInput extends BaseValueAccessor {
     constructor(validationTranslations = {}) {
         super();
         this.validationTranslations = validationTranslations;
-        this.isDisabled = false;
-        this.floatLabel = 'auto';
-        this.subscriptSizing = 'fixed';
-        this.hintLabel = '';
+        this.translateParams = input();
+        this.isDisabled = input(false);
+        this.floatLabel = input('auto');
+        this.formControlName = input();
+        this.validatorMessages = input();
+        this.subscriptSizing = input('fixed');
+        this.hintLabel = input('');
         this.validatorMessagesArray = [];
     }
     ngOnInit() {
         this.placeholder = this.placeholder === undefined ? this.label : this.placeholder;
         if (!this.name) {
-            this.name = this.formControlName;
+            this.name = this.formControlName();
             /*
             console.warn(`name attribute is not defined for ${this.formControlName}! Please beware, that using this control multiple
             times with the same control name could result in wrong focus, clicking on the label!`);
@@ -108,10 +109,11 @@ class BaseInput extends BaseValueAccessor {
     }
     ngOnChanges(changes) {
         if (changes['validatorMessages']) {
-            if (!isEmpty(this.validatorMessages)) {
-                this.validatorMessagesArray = keys(this.validatorMessages).map((key) => ({
+            const validatorMessages = this.validatorMessages();
+            if (!isEmpty(validatorMessages)) {
+                this.validatorMessagesArray = keys(validatorMessages).map((key) => ({
                     key,
-                    value: this.validatorMessages[key],
+                    value: this.validatorMessages()[key],
                 }));
             }
         }
@@ -120,10 +122,10 @@ class BaseInput extends BaseValueAccessor {
         super.ngAfterViewInit();
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BaseInput, deps: [{ token: NGX_WIDGETS_VALIDATION_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: BaseInput, inputs: { id: "id", name: "name", label: "label", translateParams: "translateParams", placeholder: "placeholder", isDisabled: "isDisabled", floatLabel: "floatLabel", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", suffix: "suffix", formControlName: "formControlName", validatorMessages: "validatorMessages", subscriptSizing: "subscriptSizing", hintLabel: "hintLabel" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseInput, deps: [{ token: NGX_WIDGETS_VALIDATION_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: BaseInput, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, translateParams: { classPropertyName: "translateParams", publicName: "translateParams", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: false, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: false, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: false, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, validatorMessages: { classPropertyName: "validatorMessages", publicName: "validatorMessages", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, hintLabel: { classPropertyName: "hintLabel", publicName: "hintLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BaseInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseInput, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -136,46 +138,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 type: Input
             }], label: [{
                 type: Input
-            }], translateParams: [{
-                type: Input
             }], placeholder: [{
                 type: Input
-            }], isDisabled: [{
-                type: Input
-            }], floatLabel: [{
-                type: Input
             }], prefixIcon: [{
                 type: Input
             }], suffixIcon: [{
                 type: Input
             }], suffix: [{
                 type: Input
-            }], formControlName: [{
-                type: Input
-            }], validatorMessages: [{
-                type: Input
-            }], subscriptSizing: [{
-                type: Input
-            }], hintLabel: [{
-                type: Input
             }] } });
 
 class BaseTextInput extends BaseInput {
     constructor() {
         super(...arguments);
-        this.type = 'text';
-        this.maxLength = 512;
+        this.type = input('text');
+        this.maxLength = input(512);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BaseTextInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: BaseTextInput, inputs: { type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: BaseTextInput, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BaseTextInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseTextInput, decorators: [{
             type: Directive
-        }], propDecorators: { type: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Automatically unsubscribe from an Observable when the view is destroyed
@@ -231,19 +215,19 @@ function UnsubscribeOnDestroy() {
 class BasicInputComponent extends BaseTextInput {
     constructor() {
         super(...arguments);
-        this.iconClick = new EventEmitter();
+        this.iconClick = output();
     }
     ngOnInit() {
         super.ngOnInit();
         this.id = this.id || this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BasicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: BasicInputComponent, isStandalone: true, selector: "gerandon-basic-input", outputs: { iconClick: "iconClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BasicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BasicInputComponent, isStandalone: true, selector: "gerandon-basic-input", outputs: { iconClick: "iconClick" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true },
             { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"basic-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [hintLabel]=\"hintLabel\" [floatLabel]=\"floatLabel\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled\">{{label}}</mat-label>\r\n    }\r\n    <input\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      matInput\r\n      [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n      [type]=\"type\"\r\n      [attr.disabled]=\"isDisabled || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength\"\r\n      [name]=\"name\"\r\n      [required]=\"!!control.errors?.['required']\"/>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix style=\"margin-right: 10px\">{{suffix}}</span>\r\n    }\r\n\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n\r\n    }\r\n    @for (error of validatorMessagesArray; track error.key) {\r\n      <!--\r\n        this @if makes the mat-error to be placed out of subscript-wrapper\r\n        that way the error message will be inside the input, not under the field as the others....\r\n\r\n        @if (control.errors?.[error.key]) {\r\n        }\r\n      -->\r\n      <mat-error *ngIf=\"control.errors?.[error.key]\">\r\n        @if(!!validatorMessages?.[error.key]) {\r\n          {{ error.value }}\r\n        } @else if (!!validationTranslations?.[error.key]) {\r\n          {{ validationTranslations[error.key] }}\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-basic-input{display:block}gerandon-basic-input .basic-input{height:inherit}gerandon-basic-input .basic-input .disabled{color:#ced4da}gerandon-basic-input .basic-input mat-form-field{width:100%}gerandon-basic-input .basic-input mat-form-field .mat-icon{padding:unset;margin-left:10px;margin-right:10px}gerandon-basic-input .basic-input mat-form-field input::placeholder{color:#adb5bd;font-style:italic}gerandon-basic-input .basic-input mat-form-field input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"basic-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [hintLabel]=\"hintLabel()\" [floatLabel]=\"floatLabel()\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled()\">{{label}}</mat-label>\r\n    }\r\n    <input\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      matInput\r\n      [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n      [type]=\"type()\"\r\n      [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled()\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength()\"\r\n      [name]=\"name\"\r\n      [required]=\"!!control.errors?.['required']\"/>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix style=\"margin-right: 10px\">{{suffix}}</span>\r\n    }\r\n\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n\r\n    }\r\n    @for (error of validatorMessagesArray; track error.key) {\r\n      <!--\r\n        this @if makes the mat-error to be placed out of subscript-wrapper\r\n        that way the error message will be inside the input, not under the field as the others....\r\n\r\n        @if (control.errors?.[error.key]) {\r\n        }\r\n      -->\r\n      <mat-error *ngIf=\"control.errors?.[error.key]\">\r\n        @if(!!validatorMessages()?.[error.key]) {\r\n          {{ error.value }}\r\n        } @else if (!!validationTranslations?.[error.key]) {\r\n          {{ validationTranslations[error.key] }}\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-basic-input{display:block}gerandon-basic-input .basic-input{height:inherit}gerandon-basic-input .basic-input .disabled{color:#ced4da}gerandon-basic-input .basic-input mat-form-field{width:100%}gerandon-basic-input .basic-input mat-form-field .mat-icon{padding:unset;margin-left:10px;margin-right:10px}gerandon-basic-input .basic-input mat-form-field input::placeholder{color:#adb5bd;font-style:italic}gerandon-basic-input .basic-input mat-form-field input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BasicInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BasicInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gerandon-basic-input', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         ReactiveFormsModule,
@@ -254,14 +238,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true },
                         { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true },
-                    ], template: "<div class=\"basic-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [hintLabel]=\"hintLabel\" [floatLabel]=\"floatLabel\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled\">{{label}}</mat-label>\r\n    }\r\n    <input\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      matInput\r\n      [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n      [type]=\"type\"\r\n      [attr.disabled]=\"isDisabled || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength\"\r\n      [name]=\"name\"\r\n      [required]=\"!!control.errors?.['required']\"/>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix style=\"margin-right: 10px\">{{suffix}}</span>\r\n    }\r\n\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n\r\n    }\r\n    @for (error of validatorMessagesArray; track error.key) {\r\n      <!--\r\n        this @if makes the mat-error to be placed out of subscript-wrapper\r\n        that way the error message will be inside the input, not under the field as the others....\r\n\r\n        @if (control.errors?.[error.key]) {\r\n        }\r\n      -->\r\n      <mat-error *ngIf=\"control.errors?.[error.key]\">\r\n        @if(!!validatorMessages?.[error.key]) {\r\n          {{ error.value }}\r\n        } @else if (!!validationTranslations?.[error.key]) {\r\n          {{ validationTranslations[error.key] }}\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-basic-input{display:block}gerandon-basic-input .basic-input{height:inherit}gerandon-basic-input .basic-input .disabled{color:#ced4da}gerandon-basic-input .basic-input mat-form-field{width:100%}gerandon-basic-input .basic-input mat-form-field .mat-icon{padding:unset;margin-left:10px;margin-right:10px}gerandon-basic-input .basic-input mat-form-field input::placeholder{color:#adb5bd;font-style:italic}gerandon-basic-input .basic-input mat-form-field input:disabled{cursor:not-allowed}\n"] }]
-        }], propDecorators: { iconClick: [{
-                type: Output
-            }] } });
+                    ], template: "<div class=\"basic-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [hintLabel]=\"hintLabel()\" [floatLabel]=\"floatLabel()\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled()\">{{label}}</mat-label>\r\n    }\r\n    <input\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      matInput\r\n      [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n      [type]=\"type()\"\r\n      [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled()\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength()\"\r\n      [name]=\"name\"\r\n      [required]=\"!!control.errors?.['required']\"/>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix style=\"margin-right: 10px\">{{suffix}}</span>\r\n    }\r\n\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n\r\n    }\r\n    @for (error of validatorMessagesArray; track error.key) {\r\n      <!--\r\n        this @if makes the mat-error to be placed out of subscript-wrapper\r\n        that way the error message will be inside the input, not under the field as the others....\r\n\r\n        @if (control.errors?.[error.key]) {\r\n        }\r\n      -->\r\n      <mat-error *ngIf=\"control.errors?.[error.key]\">\r\n        @if(!!validatorMessages()?.[error.key]) {\r\n          {{ error.value }}\r\n        } @else if (!!validationTranslations?.[error.key]) {\r\n          {{ validationTranslations[error.key] }}\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-basic-input{display:block}gerandon-basic-input .basic-input{height:inherit}gerandon-basic-input .basic-input .disabled{color:#ced4da}gerandon-basic-input .basic-input mat-form-field{width:100%}gerandon-basic-input .basic-input mat-form-field .mat-icon{padding:unset;margin-left:10px;margin-right:10px}gerandon-basic-input .basic-input mat-form-field input::placeholder{color:#adb5bd;font-style:italic}gerandon-basic-input .basic-input mat-form-field input:disabled{cursor:not-allowed}\n"] }]
+        }] });
 
 class SelectComponent extends BaseInput {
     constructor() {
         super(...arguments);
+        this.multiple = input();
+        this.asyncOptions = input();
         /**
          * Angular Material - Select component comparsion is only '===', does not work with Array values
          * https://github.com/angular/components/blob/a07c0758a5ec2eb4de1bb822354be08178c66aa4/src/lib/select/select.ts#L242C48-L242C58
@@ -269,22 +253,23 @@ class SelectComponent extends BaseInput {
         this._isEqual = isEqual;
     }
     ngOnInit() {
-        this.placeholder = !this.placeholder ? (this.validationTranslations.selectGlobalPlaceholder || this.label) : this.placeholder;
+        this.placeholder = !this.placeholder ? (this.validationTranslations?.selectGlobalPlaceholder || this.label) : this.placeholder;
         super.ngOnInit();
-        this.id = this.id || this.formControlName || this.name;
-        if (this.asyncOptions) {
-            this.asyncOptions.pipe(takeUntil$1(this.destroy$)).subscribe((resp) => {
+        this.id = this.id || this.formControlName() || this.name;
+        const asyncOptions = this.asyncOptions();
+        if (asyncOptions) {
+            asyncOptions.pipe(takeUntil$1(this.destroy$)).subscribe((resp) => {
                 this.options = resp;
                 this.cdr.detectChanges();
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: SelectComponent, isStandalone: true, selector: "gerandon-select", inputs: { emptyOptionLabel: "emptyOptionLabel", multiple: "multiple", options: "options", asyncOptions: "asyncOptions" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectComponent, isStandalone: true, selector: "gerandon-select", inputs: { emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, asyncOptions: { classPropertyName: "asyncOptions", publicName: "asyncOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }
-        ], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElements"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [floatLabel]=\"floatLabel\">\r\n  @if (label) {\r\n    <mat-label>{{ label }}</mat-label>\r\n  }\r\n  <mat-select #inputElement\r\n              #input=\"ngForm\"\r\n              [multiple]=\"multiple\"\r\n              [placeholder]=\"!floatLabel ? label : placeholder\"\r\n              [formControl]=\"control\"\r\n              [id]=\"id\"\r\n              [class.input-disabled]=\"isDisabled || control.disabled\"\r\n              [compareWith]=\"_isEqual\"\r\n              [attr.disabled]=\"isDisabled || control.disabled ? '' : null\">\r\n    @if (emptyOptionLabel) {\r\n      <mat-option (click)=\"control.reset()\">\r\n        {{ emptyOptionLabel }}\r\n      </mat-option>\r\n    }\r\n    @for(option of options; track option) {\r\n      <mat-option [value]=\"option.value\">\r\n        {{ option.label }}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n  @if (suffix) {\r\n    <span matSuffix>{{suffix}}</span>\r\n  }\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-select mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElements"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [floatLabel]=\"floatLabel()\">\r\n  @if (label) {\r\n    <mat-label>{{ label }}</mat-label>\r\n  }\r\n  <mat-select #inputElement\r\n              #input=\"ngForm\"\r\n              [multiple]=\"multiple()\"\r\n              [placeholder]=\"!floatLabel() ? label : placeholder\"\r\n              [formControl]=\"control\"\r\n              [id]=\"id\"\r\n              [class.input-disabled]=\"isDisabled() || control.disabled\"\r\n              [compareWith]=\"_isEqual\"\r\n              [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\">\r\n    @if (emptyOptionLabel) {\r\n      <mat-option (click)=\"control.reset()\">\r\n        {{ emptyOptionLabel }}\r\n      </mat-option>\r\n    }\r\n    @for(option of options; track option) {\r\n      <mat-option [value]=\"option.value\">\r\n        {{ option.label }}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n  @if (suffix) {\r\n    <span matSuffix>{{suffix}}</span>\r\n  }\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-select mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gerandon-select', encapsulation: ViewEncapsulation.None, standalone: true, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }
@@ -293,15 +278,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                         MatSelectModule,
                         ReactiveFormsModule,
                         MatTooltipModule,
-                    ], template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [floatLabel]=\"floatLabel\">\r\n  @if (label) {\r\n    <mat-label>{{ label }}</mat-label>\r\n  }\r\n  <mat-select #inputElement\r\n              #input=\"ngForm\"\r\n              [multiple]=\"multiple\"\r\n              [placeholder]=\"!floatLabel ? label : placeholder\"\r\n              [formControl]=\"control\"\r\n              [id]=\"id\"\r\n              [class.input-disabled]=\"isDisabled || control.disabled\"\r\n              [compareWith]=\"_isEqual\"\r\n              [attr.disabled]=\"isDisabled || control.disabled ? '' : null\">\r\n    @if (emptyOptionLabel) {\r\n      <mat-option (click)=\"control.reset()\">\r\n        {{ emptyOptionLabel }}\r\n      </mat-option>\r\n    }\r\n    @for(option of options; track option) {\r\n      <mat-option [value]=\"option.value\">\r\n        {{ option.label }}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n  @if (suffix) {\r\n    <span matSuffix>{{suffix}}</span>\r\n  }\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-select mat-form-field{width:100%}\n"] }]
+                    ], template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [floatLabel]=\"floatLabel()\">\r\n  @if (label) {\r\n    <mat-label>{{ label }}</mat-label>\r\n  }\r\n  <mat-select #inputElement\r\n              #input=\"ngForm\"\r\n              [multiple]=\"multiple()\"\r\n              [placeholder]=\"!floatLabel() ? label : placeholder\"\r\n              [formControl]=\"control\"\r\n              [id]=\"id\"\r\n              [class.input-disabled]=\"isDisabled() || control.disabled\"\r\n              [compareWith]=\"_isEqual\"\r\n              [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\">\r\n    @if (emptyOptionLabel) {\r\n      <mat-option (click)=\"control.reset()\">\r\n        {{ emptyOptionLabel }}\r\n      </mat-option>\r\n    }\r\n    @for(option of options; track option) {\r\n      <mat-option [value]=\"option.value\">\r\n        {{ option.label }}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n  @if (suffix) {\r\n    <span matSuffix>{{suffix}}</span>\r\n  }\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-select mat-form-field{width:100%}\n"] }]
         }], propDecorators: { emptyOptionLabel: [{
                 type: Input
-            }], multiple: [{
-                type: Input
             }], options: [{
                 type: Input
-            }], asyncOptions: [{
-                type: Input
             }], optionElements: [{
                 type: ViewChildren,
                 args: ['optionElements']
@@ -310,15 +291,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 class TextareaInputComponent extends BaseTextInput {
     constructor() {
         super(...arguments);
-        this.rows = 10;
+        this.rows = input(10);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TextareaInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: TextareaInputComponent, isStandalone: true, selector: "gerandon-textarea-input", inputs: { rows: "rows" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TextareaInputComponent, isStandalone: true, selector: "gerandon-textarea-input", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
             { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"textarea-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [floatLabel]=\"floatLabel\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled\">{{ label }}</mat-label>\r\n    }\r\n    <textarea\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      #autosize=\"cdkTextareaAutosize\"\r\n      matInput\r\n      cdkTextareaAutosize\r\n      [cdkAutosizeMinRows]=\"rows\"\r\n      class=\"w-100 cva-control\"\r\n      [attr.disabled]=\"isDisabled || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength\"\r\n      [name]=\"name\">\r\n    </textarea>\r\n    <span class=\"counter\">{{control.value?.length || 0}} / {{ maxLength }}</span>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix>{{suffix}}</span>\r\n    }\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n      @for (error of validatorMessagesArray; track error) {\r\n        <mat-error>{{ error.value }}</mat-error>\r\n      }\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-textarea-input{display:block}gerandon-textarea-input .counter{right:20px;bottom:0;position:absolute;font-size:10px}gerandon-textarea-input .textarea-input .disabled{color:#ced4da}gerandon-textarea-input .textarea-input mat-form-field{width:100%}gerandon-textarea-input .textarea-input mat-form-field textarea{padding-top:10px}gerandon-textarea-input .textarea-input mat-form-field textarea::placeholder{color:#adb5bd;font-style:italic}gerandon-textarea-input .textarea-input mat-form-field textarea:disabled{cursor:not-allowed}\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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"textarea-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [floatLabel]=\"floatLabel()\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n    }\r\n    <textarea\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      #autosize=\"cdkTextareaAutosize\"\r\n      matInput\r\n      cdkTextareaAutosize\r\n      [cdkAutosizeMinRows]=\"rows()\"\r\n      class=\"w-100 cva-control\"\r\n      [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled()\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength()\"\r\n      [name]=\"name\">\r\n    </textarea>\r\n    <span class=\"counter\">{{control.value?.length || 0}} / {{ maxLength() }}</span>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix>{{suffix}}</span>\r\n    }\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n      @for (error of validatorMessagesArray; track error) {\r\n        <mat-error>{{ error.value }}</mat-error>\r\n      }\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-textarea-input{display:block}gerandon-textarea-input .counter{right:20px;bottom:0;position:absolute;font-size:10px}gerandon-textarea-input .textarea-input .disabled{color:#ced4da}gerandon-textarea-input .textarea-input mat-form-field{width:100%}gerandon-textarea-input .textarea-input mat-form-field textarea{padding-top:10px}gerandon-textarea-input .textarea-input mat-form-field textarea::placeholder{color:#adb5bd;font-style:italic}gerandon-textarea-input .textarea-input mat-form-field textarea:disabled{cursor:not-allowed}\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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TextareaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gerandon-textarea-input', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
                         FormsModule,
@@ -329,14 +310,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
                         { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
-                    ], template: "<div class=\"textarea-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [floatLabel]=\"floatLabel\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled\">{{ label }}</mat-label>\r\n    }\r\n    <textarea\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      #autosize=\"cdkTextareaAutosize\"\r\n      matInput\r\n      cdkTextareaAutosize\r\n      [cdkAutosizeMinRows]=\"rows\"\r\n      class=\"w-100 cva-control\"\r\n      [attr.disabled]=\"isDisabled || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength\"\r\n      [name]=\"name\">\r\n    </textarea>\r\n    <span class=\"counter\">{{control.value?.length || 0}} / {{ maxLength }}</span>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix>{{suffix}}</span>\r\n    }\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n      @for (error of validatorMessagesArray; track error) {\r\n        <mat-error>{{ error.value }}</mat-error>\r\n      }\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-textarea-input{display:block}gerandon-textarea-input .counter{right:20px;bottom:0;position:absolute;font-size:10px}gerandon-textarea-input .textarea-input .disabled{color:#ced4da}gerandon-textarea-input .textarea-input mat-form-field{width:100%}gerandon-textarea-input .textarea-input mat-form-field textarea{padding-top:10px}gerandon-textarea-input .textarea-input mat-form-field textarea::placeholder{color:#adb5bd;font-style:italic}gerandon-textarea-input .textarea-input mat-form-field textarea:disabled{cursor:not-allowed}\n"] }]
-        }], propDecorators: { rows: [{
-                type: Input
-            }] } });
+                    ], template: "<div class=\"textarea-input cva-input\">\r\n  <mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [floatLabel]=\"floatLabel()\">\r\n    @if (label) {\r\n      <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n    }\r\n    <textarea\r\n      [id]=\"id\"\r\n      #inputElement\r\n      #input=\"ngForm\"\r\n      #autosize=\"cdkTextareaAutosize\"\r\n      matInput\r\n      cdkTextareaAutosize\r\n      [cdkAutosizeMinRows]=\"rows()\"\r\n      class=\"w-100 cva-control\"\r\n      [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n      [readonly]=\"isDisabled()\"\r\n      [placeholder]=\"placeholder\"\r\n      [formControl]=\"control\"\r\n      [maxLength]=\"maxLength()\"\r\n      [name]=\"name\">\r\n    </textarea>\r\n    <span class=\"counter\">{{control.value?.length || 0}} / {{ maxLength() }}</span>\r\n    @if (prefixIcon) {\r\n      <mat-icon matPrefix color=\"accent\">\r\n        {{prefixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffixIcon) {\r\n      <mat-icon matSuffix color=\"accent\">\r\n        {{suffixIcon}}\r\n      </mat-icon>\r\n    }\r\n    @if (suffix) {\r\n      <span matSuffix>{{suffix}}</span>\r\n    }\r\n    @if (control.errors?.['server']) {\r\n      <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n    } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n      <mat-error>{{ validationTranslations.required }}</mat-error>\r\n    } @else {\r\n      @for (error of validatorMessagesArray; track error) {\r\n        <mat-error>{{ error.value }}</mat-error>\r\n      }\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-textarea-input{display:block}gerandon-textarea-input .counter{right:20px;bottom:0;position:absolute;font-size:10px}gerandon-textarea-input .textarea-input .disabled{color:#ced4da}gerandon-textarea-input .textarea-input mat-form-field{width:100%}gerandon-textarea-input .textarea-input mat-form-field textarea{padding-top:10px}gerandon-textarea-input .textarea-input mat-form-field textarea::placeholder{color:#adb5bd;font-style:italic}gerandon-textarea-input .textarea-input mat-form-field textarea:disabled{cursor:not-allowed}\n"] }]
+        }] });
 
 class BasicChipsComponent extends BaseInput {
     constructor() {
         super(...arguments);
+        this.asyncOptions = input();
         this.separatorKeysCodes = [ENTER, COMMA];
     }
     remove(item) {
@@ -375,10 +355,10 @@ class BasicChipsComponent extends BaseInput {
             this.control.markAsDirty();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BasicChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: BasicChipsComponent, isStandalone: true, selector: "gerandon-basic-chips", inputs: { asyncOptions: "asyncOptions", labelProperty: "labelProperty" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicChipsComponent), multi: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [floatLabel]=\"floatLabel\">\r\n  @if (label) {\r\n    <mat-label [class.disabled]=\"isDisabled\">{{ label }}</mat-label>\r\n  }\r\n  <mat-chip-grid #chipGrid class=\"w-100\">\r\n    @for(item of control.value; track item) {\r\n      <mat-chip-row (removed)=\"remove(item)\" color=\"primary\" highlighted>\r\n        {{ labelProperty ? item[labelProperty] : item}}\r\n        <button matChipRemove [attr.aria-label]=\"(labelProperty ? item[labelProperty] : item) + ' elt\u00E1vol\u00EDt\u00E1sa'\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n    <input #inputElement\r\n           matInput\r\n           [placeholder]=\"placeholder || label\"\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n           (matChipInputTokenEnd)=\"!labelProperty && add($event)\"/>\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event)\">\r\n      @for (filterItem of asyncOptions | async; track filterItem) {\r\n        <mat-option [value]=\"filterItem\">\r\n          {{labelProperty ? filterItem[labelProperty] : filterItem}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-chip-grid>\r\n  <input #input=\"ngForm\" [style.display]=\"'none'\" [formControl]=\"control\" />\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-basic-chips{display:block}gerandon-basic-chips .mat-mdc-standard-chip{height:28px!important}gerandon-basic-chips mat-form-field{width:100%}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{display:flex;align-items:center;min-height:40px!important;padding:unset!important}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:1.2rem!important}gerandon-basic-chips mat-form-field mat-chip-row{margin-top:8px!important;margin-bottom:8px!important}gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BasicChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BasicChipsComponent, isStandalone: true, selector: "gerandon-basic-chips", inputs: { asyncOptions: { classPropertyName: "asyncOptions", publicName: "asyncOptions", isSignal: true, isRequired: false, transformFunction: null }, labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: false, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicChipsComponent), multi: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [floatLabel]=\"floatLabel()\">\r\n  @if (label) {\r\n    <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n  }\r\n  <mat-chip-grid #chipGrid class=\"w-100\">\r\n    @for(item of control.value; track item) {\r\n      <mat-chip-row (removed)=\"remove(item)\" color=\"primary\" highlighted>\r\n        {{ labelProperty ? item[labelProperty] : item}}\r\n        <button matChipRemove [attr.aria-label]=\"(labelProperty ? item[labelProperty] : item) + ' elt\u00E1vol\u00EDt\u00E1sa'\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n    <input #inputElement\r\n           matInput\r\n           [placeholder]=\"placeholder || label\"\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n           (matChipInputTokenEnd)=\"!labelProperty && add($event)\"/>\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event)\">\r\n      @for (filterItem of asyncOptions() | async; track filterItem) {\r\n        <mat-option [value]=\"filterItem\">\r\n          {{labelProperty ? filterItem[labelProperty] : filterItem}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-chip-grid>\r\n  <input #input=\"ngForm\" [style.display]=\"'none'\" [formControl]=\"control\" />\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-basic-chips{display:block}gerandon-basic-chips .mat-mdc-standard-chip{height:28px!important}gerandon-basic-chips mat-form-field{width:100%}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{display:flex;align-items:center;min-height:40px!important;padding:unset!important}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:1.2rem!important}gerandon-basic-chips mat-form-field mat-chip-row{margin-top:8px!important;margin-bottom:8px!important}gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BasicChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BasicChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gerandon-basic-chips', standalone: true, encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicChipsComponent), multi: true }], imports: [
                         MatChipsModule,
@@ -391,10 +371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                         MatInput,
                         MatLabel,
                         MatError,
-                    ], template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing\" [floatLabel]=\"floatLabel\">\r\n  @if (label) {\r\n    <mat-label [class.disabled]=\"isDisabled\">{{ label }}</mat-label>\r\n  }\r\n  <mat-chip-grid #chipGrid class=\"w-100\">\r\n    @for(item of control.value; track item) {\r\n      <mat-chip-row (removed)=\"remove(item)\" color=\"primary\" highlighted>\r\n        {{ labelProperty ? item[labelProperty] : item}}\r\n        <button matChipRemove [attr.aria-label]=\"(labelProperty ? item[labelProperty] : item) + ' elt\u00E1vol\u00EDt\u00E1sa'\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n    <input #inputElement\r\n           matInput\r\n           [placeholder]=\"placeholder || label\"\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n           (matChipInputTokenEnd)=\"!labelProperty && add($event)\"/>\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event)\">\r\n      @for (filterItem of asyncOptions | async; track filterItem) {\r\n        <mat-option [value]=\"filterItem\">\r\n          {{labelProperty ? filterItem[labelProperty] : filterItem}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-chip-grid>\r\n  <input #input=\"ngForm\" [style.display]=\"'none'\" [formControl]=\"control\" />\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-basic-chips{display:block}gerandon-basic-chips .mat-mdc-standard-chip{height:28px!important}gerandon-basic-chips mat-form-field{width:100%}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{display:flex;align-items:center;min-height:40px!important;padding:unset!important}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:1.2rem!important}gerandon-basic-chips mat-form-field mat-chip-row{margin-top:8px!important;margin-bottom:8px!important}gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden!important}\n"] }]
-        }], propDecorators: { asyncOptions: [{
-                type: Input
-            }], labelProperty: [{
+                    ], template: "<mat-form-field appearance=\"outline\" [subscriptSizing]=\"subscriptSizing()\" [floatLabel]=\"floatLabel()\">\r\n  @if (label) {\r\n    <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n  }\r\n  <mat-chip-grid #chipGrid class=\"w-100\">\r\n    @for(item of control.value; track item) {\r\n      <mat-chip-row (removed)=\"remove(item)\" color=\"primary\" highlighted>\r\n        {{ labelProperty ? item[labelProperty] : item}}\r\n        <button matChipRemove [attr.aria-label]=\"(labelProperty ? item[labelProperty] : item) + ' elt\u00E1vol\u00EDt\u00E1sa'\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n    <input #inputElement\r\n           matInput\r\n           [placeholder]=\"placeholder || label\"\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n           (matChipInputTokenEnd)=\"!labelProperty && add($event)\"/>\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event)\">\r\n      @for (filterItem of asyncOptions() | async; track filterItem) {\r\n        <mat-option [value]=\"filterItem\">\r\n          {{labelProperty ? filterItem[labelProperty] : filterItem}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-chip-grid>\r\n  <input #input=\"ngForm\" [style.display]=\"'none'\" [formControl]=\"control\" />\r\n  @if (control.errors?.['server']) {\r\n    <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n  } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n    <mat-error>{{ validationTranslations.required }}</mat-error>\r\n  } @else {\r\n    @for (error of validatorMessagesArray; track error) {\r\n      <mat-error>{{ error.value }}</mat-error>\r\n    }\r\n  }\r\n</mat-form-field>\r\n", styles: ["gerandon-basic-chips{display:block}gerandon-basic-chips .mat-mdc-standard-chip{height:28px!important}gerandon-basic-chips mat-form-field{width:100%}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{display:flex;align-items:center;min-height:40px!important;padding:unset!important}gerandon-basic-chips mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:1.2rem!important}gerandon-basic-chips mat-form-field mat-chip-row{margin-top:8px!important;margin-bottom:8px!important}gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden!important}\n"] }]
+        }], propDecorators: { labelProperty: [{
                 type: Input
             }] } });