@crowdfarming/oliva-ds 1.61.0 → 1.62.0

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -5161,11 +5161,14 @@ class ModalComponent {
     _closeOnBackdropClickSignal = signal(true);
     _isContentScrollableSignal = signal(false);
     _safeAreaInsetBottomSignal = signal(true);
+    _autoFocusSignal = signal(true);
     modalContentRef = viewChild('modalContent');
     constructor() {
         effect(() => {
             if (this.isModalOpen()) {
-                this.focusFirstElement();
+                if (this._autoFocusSignal()) {
+                    this.focusFirstElement();
+                }
                 this.disableBodyScroll();
                 this.checkContentScrollable();
             }
@@ -5207,6 +5210,9 @@ class ModalComponent {
     getSafeAreaInsetBottom() {
         return this._safeAreaInsetBottomSignal();
     }
+    getAutoFocus() {
+        return this._autoFocusSignal();
+    }
     setOpen(open) {
         this._isOpenSignal.set(open);
     }
@@ -5229,6 +5235,8 @@ class ModalComponent {
             this._closeOnBackdropClickSignal.set(config.closeOnBackdropClick);
         if (config.safeAreaInsetBottom !== undefined)
             this._safeAreaInsetBottomSignal.set(config.safeAreaInsetBottom);
+        if (config.autoFocus !== undefined)
+            this._autoFocusSignal.set(config.autoFocus);
     }
     updatePrimaryButton(buttonUpdate) {
         const currentButton = this._primaryButtonSignal();
@@ -7066,6 +7074,7 @@ class TextInputComponent {
     size = 'md';
     fullWidth = false;
     autocomplete = 'off';
+    regex;
     emitValue = new EventEmitter();
     _value = '';
     onChangeFn = () => { };
@@ -7104,7 +7113,33 @@ class TextInputComponent {
     }
     onInput(event) {
         const input = event.target;
-        this._value = input.value;
+        let newValue = input.value;
+        if (this.regex) {
+            try {
+                const charPattern = (() => {
+                    if (this.regex.startsWith('^') && this.regex.endsWith('$')) {
+                        const charClassMatch = this.regex.match(/\[([^\]]+)\]/);
+                        if (charClassMatch) {
+                            return `[${charClassMatch[1]}]`;
+                        }
+                    }
+                    return this.regex;
+                })();
+                const regex = new RegExp(charPattern);
+                const filteredValue = newValue
+                    .split('')
+                    .filter((char) => regex.test(char))
+                    .join('');
+                if (filteredValue !== newValue) {
+                    input.value = filteredValue;
+                    newValue = filteredValue;
+                }
+            }
+            catch (error) {
+                console.warn('Invalid regex:', this.regex, error);
+            }
+        }
+        this._value = newValue;
         this.onChangeFn(this._value);
         this.emitValue.emit(this._value);
     }
@@ -7112,7 +7147,7 @@ class TextInputComponent {
         this.onTouchedFn();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", isLoading: "isLoading", type: "type", size: "size", fullWidth: "fullWidth", autocomplete: "autocomplete" }, outputs: { emitValue: "emitValue" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", isLoading: "isLoading", type: "type", size: "size", fullWidth: "fullWidth", autocomplete: "autocomplete", regex: "regex" }, outputs: { emitValue: "emitValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextInputComponent),
@@ -7166,6 +7201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }], autocomplete: [{
                 type: Input
+            }], regex: [{
+                type: Input
             }], emitValue: [{
                 type: Output
             }] } });
@@ -7185,6 +7222,7 @@ class TextareaComponent {
     isLoading = false;
     size = 'md';
     fullWidth = false;
+    maxCharacters;
     emitValue = new EventEmitter();
     _value = '';
     onChangeFn = () => { };
@@ -7216,7 +7254,12 @@ class TextareaComponent {
     }
     onInput(event) {
         const input = event.target;
-        this._value = input.value;
+        let value = input.value;
+        if (this.maxCharacters && value.length > this.maxCharacters) {
+            value = value.substring(0, this.maxCharacters);
+            input.value = value;
+        }
+        this._value = value;
         this.onChangeFn(this._value);
         this.emitValue.emit(this._value);
     }
@@ -7224,13 +7267,13 @@ class TextareaComponent {
         this.onTouchedFn();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", name: "name", disabled: "disabled", readonly: "readonly", required: "required", isLoading: "isLoading", size: "size", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", name: "name", disabled: "disabled", readonly: "readonly", required: "required", isLoading: "isLoading", size: "size", fullWidth: "fullWidth", maxCharacters: "maxCharacters" }, outputs: { emitValue: "emitValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    size=\"sm\"\n    [required]=\"required\"\n    [text]=\"label\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <textarea\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [required]=\"required\"\n    [value]=\"isLoading ? '' : _value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [name]=\"name\"\n  ></textarea>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
+        ], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    size=\"sm\"\n    [required]=\"required\"\n    [text]=\"label\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <textarea\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [required]=\"required\"\n    [value]=\"isLoading ? '' : _value\"\n    [attr.maxlength]=\"maxCharacters || null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [name]=\"name\"\n  ></textarea>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -7246,7 +7289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    size=\"sm\"\n    [required]=\"required\"\n    [text]=\"label\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <textarea\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [required]=\"required\"\n    [value]=\"isLoading ? '' : _value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [name]=\"name\"\n  ></textarea>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
+                    ], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    size=\"sm\"\n    [required]=\"required\"\n    [text]=\"label\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <textarea\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [required]=\"required\"\n    [value]=\"isLoading ? '' : _value\"\n    [attr.maxlength]=\"maxCharacters || null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [name]=\"name\"\n  ></textarea>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\" [isLoading]=\"isLoading\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -7275,6 +7318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }], fullWidth: [{
                 type: Input
+            }], maxCharacters: [{
+                type: Input
             }], emitValue: [{
                 type: Output
             }] } });