myrta-ui 1.0.81 → 1.0.82

package/esm2020/lib/components/form/input-text/input-text.component.mjs

@@ -129,7 +129,7 @@ InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => InputTextComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: i1.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: i1.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -138,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useExisting: forwardRef(() => InputTextComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"] }]
+                    ], template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}\n"] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], disabled: [{

package/esm2020/lib/components/form/input-textarea/input-textarea.component.mjs

@@ -135,7 +135,7 @@ InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => InputTextareaComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"], components: [{ type: i1.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: i2.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: i3.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.AutosizeDirective, selector: "[mrxAutosize]", inputs: ["rows", "autosize"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"], components: [{ type: i1.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: i2.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: i3.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.AutosizeDirective, selector: "[mrxAutosize]", inputs: ["rows", "autosize"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-textarea', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -144,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useExisting: forwardRef(() => InputTextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"] }]
+                    ], template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], disabled: [{

package/fesm2015/myrta-ui.mjs

@@ -4862,7 +4862,7 @@ InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => InputTextareaComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"], components: [{ type: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: AutosizeDirective, selector: "[mrxAutosize]", inputs: ["rows", "autosize"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"], components: [{ type: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: AutosizeDirective, selector: "[mrxAutosize]", inputs: ["rows", "autosize"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-textarea', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -4871,7 +4871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useExisting: forwardRef(() => InputTextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"] }]
+                    ], template: "<div\r\n  class=\"mrx-input-textarea\"\r\n  [class]=\"getClasses\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n>\r\n  <div class=\"mrx-input-textarea__wrapper\">\r\n    <textarea\r\n      #inputElement\r\n      mrxAutosize\r\n      [id]=\"uuid\"\r\n      [ngModel]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [rows]=\"rows\"\r\n      [autosize]=\"autosize\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    ></textarea>\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n\r\n    <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-textarea.mrx-input-textarea .mrx-input-textarea__wrapper{position:relative}.mrx-input-textarea.mrx-input-textarea textarea{display:block;box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);color:var(--neutral-text-primary);width:100%;overflow:auto;resize:none;transition:outline-width .2s,border .2s}.mrx-input-textarea.mrx-input-textarea textarea:focus,.mrx-input-textarea.mrx-input-textarea textarea:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-textarea.mrx-input-textarea textarea:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-textarea.mrx-input-textarea textarea::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea textarea:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-lg textarea{padding:calc(var(--spacing-3) + 1px) var(--spacing-4);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-md textarea{padding:calc(var(--sizing-2) + 1px) var(--spacing-3);border-radius:var(--border-radius-1);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-textarea.mrx-input-textarea.mrx-input-sm textarea{padding:calc(var(--sizing-2) - 1px) var(--spacing-2);border-radius:var(--border-radius-1);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-textarea.mrx-input-textarea.-disabled textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-textarea.mrx-input-textarea.-readonly textarea{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}.mrx-input-textarea.mrx-input-textarea.mrx-input-error textarea{border-color:var(--system-bg-controls-negative-default)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-error textarea{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-textarea.mrx-input-textarea.mrx-input-checked-success textarea{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}\n"] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], disabled: [{
@@ -5494,7 +5494,7 @@ InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => InputTextComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -5503,7 +5503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useExisting: forwardRef(() => InputTextComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"] }]
+                    ], template: "<div\r\n  class=\"mrx-input-text\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class.mrx-input-text-with-icon]=\"icon\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [mrxCdkTooltip]=\"getTooltipValue\"\r\n  [tooltipPosition]=\"'top-start'\"\r\n>\r\n  <div class=\"mrx-input-text__wrapper\">\r\n    <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n      [mask]=\"mask\"\r\n      [prefix]=\"maskPrefix\"\r\n      [showMaskTyped]=\"showMaskTyped\"\r\n      [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n    />\r\n\r\n    <mrx-chars-left\r\n      *ngIf=\"!disabled && maxlength\"\r\n      [value]=\"value\"\r\n      [maxlength]=\"maxlength\">\r\n    </mrx-chars-left>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text input::-webkit-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input::-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-ms-input-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text input:-moz-placeholder{color:var(--neutral-text-tertiary)}.mrx-input-text.mrx-input-text.mrx-input-text-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-text.mrx-input-text.mrx-input-text-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-text.mrx-input-text.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626)}\n"] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], disabled: [{