@lesterarte/sefin-ui 0.0.15 → 0.0.17-dev.0

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -3729,6 +3729,364 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+class TextareaComponent {
+    textareaRef;
+    /** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */
+    variant = 'outlined';
+    /** Textarea size. Options: 'sm' | 'md' | 'lg' */
+    size = 'md';
+    /** Placeholder text */
+    placeholder = '';
+    /** Helper text shown below the textarea */
+    hint = '';
+    /** Error message to display */
+    errorMessage = '';
+    /** Whether the field is required */
+    required = false;
+    /** Whether the field is disabled */
+    disabled = false;
+    /** Whether the field is readonly */
+    readonly = false;
+    /** Maximum length of the input */
+    maxLength;
+    /** Minimum length of the input */
+    minLength;
+    /** Pattern for validation (regex string) */
+    pattern;
+    /** Number of visible text lines */
+    rows = 4;
+    /** Number of visible text columns */
+    cols;
+    /** Whether to auto-resize based on content */
+    autoResize = false;
+    /** Minimum height when auto-resize is enabled */
+    minHeight;
+    /** Maximum height when auto-resize is enabled */
+    maxHeight;
+    /** Whether to show character counter */
+    showCounter = false;
+    /** Autocomplete attribute */
+    autocomplete;
+    /** Textarea name attribute */
+    name = '';
+    /** Textarea id attribute */
+    id = '';
+    /** Additional CSS classes */
+    class = '';
+    /** Custom validation function */
+    customValidator;
+    /** Event emitted when the value changes */
+    valueChange = new EventEmitter();
+    /** Event emitted when the textarea is focused */
+    focused = new EventEmitter();
+    /** Event emitted when the textarea is blurred */
+    blurred = new EventEmitter();
+    value = '';
+    isFocused = false;
+    hasError = false;
+    internalErrorMessage = '';
+    currentHeight = 0;
+    onChange = (value) => { };
+    onTouched = () => { };
+    destroy$ = new Subject();
+    control;
+    ngOnInit() {
+        this.generateIdIfNeeded();
+    }
+    ngAfterViewInit() {
+        if (this.textareaRef?.nativeElement) {
+            // Set initial value if provided
+            if (this.value) {
+                this.textareaRef.nativeElement.value = this.value;
+            }
+            // Initialize auto-resize if enabled
+            if (this.autoResize) {
+                this.adjustHeight();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    generateIdIfNeeded() {
+        if (!this.id) {
+            this.id = `sefin-textarea-${Math.random().toString(36).substr(2, 9)}`;
+        }
+    }
+    onInput(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.onChange(this.value);
+        this.valueChange.emit(this.value);
+        this.validateField();
+        // Auto-resize if enabled
+        if (this.autoResize) {
+            this.adjustHeight();
+        }
+    }
+    onFocus(event) {
+        this.isFocused = true;
+        this.focused.emit(event);
+    }
+    onBlur(event) {
+        this.isFocused = false;
+        this.onTouched();
+        this.blurred.emit(event);
+        this.validateField();
+    }
+    adjustHeight() {
+        if (!this.textareaRef?.nativeElement || !this.autoResize) {
+            return;
+        }
+        const textarea = this.textareaRef.nativeElement;
+        // Reset height to get accurate scrollHeight
+        textarea.style.height = 'auto';
+        // Calculate new height
+        let newHeight = textarea.scrollHeight;
+        // Apply min height if specified
+        if (this.minHeight) {
+            newHeight = Math.max(newHeight, this.minHeight);
+        }
+        // Apply max height if specified
+        if (this.maxHeight) {
+            newHeight = Math.min(newHeight, this.maxHeight);
+        }
+        // Set the new height
+        textarea.style.height = `${newHeight}px`;
+        this.currentHeight = newHeight;
+    }
+    validateField() {
+        this.hasError = false;
+        this.internalErrorMessage = '';
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const value = this.value || '';
+        // Required validation
+        if (this.required && !value.trim()) {
+            this.hasError = true;
+            this.internalErrorMessage = 'Este campo es requerido';
+            return;
+        }
+        // Skip other validations if field is empty and not required
+        if (!value.trim()) {
+            return;
+        }
+        // Min length validation
+        if (this.minLength && value.length < this.minLength) {
+            this.hasError = true;
+            this.internalErrorMessage = `Mínimo ${this.minLength} caracteres`;
+            return;
+        }
+        // Max length validation
+        if (this.maxLength && value.length > this.maxLength) {
+            this.hasError = true;
+            this.internalErrorMessage = `Máximo ${this.maxLength} caracteres`;
+            return;
+        }
+        // Pattern validation
+        if (this.pattern) {
+            try {
+                const regex = new RegExp(this.pattern);
+                if (!regex.test(value)) {
+                    this.hasError = true;
+                    this.internalErrorMessage = 'El formato no es válido';
+                    return;
+                }
+            }
+            catch (e) {
+                console.warn('Invalid pattern:', this.pattern);
+            }
+        }
+        // Custom validator
+        if (this.customValidator) {
+            const customError = this.customValidator(value);
+            if (customError) {
+                this.hasError = true;
+                this.internalErrorMessage = customError;
+                return;
+            }
+        }
+    }
+    get displayError() {
+        return this.hasError && (!!this.errorMessage || !!this.internalErrorMessage);
+    }
+    get displayErrorMessage() {
+        return this.errorMessage || this.internalErrorMessage;
+    }
+    get characterCount() {
+        return this.value?.length || 0;
+    }
+    get textareaClasses() {
+        return [
+            'sefin-textarea',
+            `sefin-textarea--${this.variant}`,
+            `sefin-textarea--${this.size}`,
+            this.isFocused ? 'sefin-textarea--focused' : '',
+            this.hasError ? 'sefin-textarea--error' : '',
+            this.disabled ? 'sefin-textarea--disabled' : '',
+            this.readonly ? 'sefin-textarea--readonly' : '',
+            this.autoResize ? 'sefin-textarea--auto-resize' : '',
+            this.class,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.value = value || '';
+        if (this.textareaRef?.nativeElement) {
+            this.textareaRef.nativeElement.value = this.value;
+            if (this.autoResize) {
+                setTimeout(() => this.adjustHeight(), 0);
+            }
+        }
+        this.validateField();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // Validator implementation
+    validate(control) {
+        this.control = control;
+        const value = control.value || '';
+        if (this.disabled || this.readonly) {
+            return null;
+        }
+        // Required validation
+        if (this.required && !value.trim()) {
+            return { required: true };
+        }
+        // Skip other validations if field is empty and not required
+        if (!value.trim()) {
+            return null;
+        }
+        const errors = {};
+        // Min length validation
+        if (this.minLength && value.length < this.minLength) {
+            errors['minlength'] = {
+                requiredLength: this.minLength,
+                actualLength: value.length,
+            };
+        }
+        // Max length validation
+        if (this.maxLength && value.length > this.maxLength) {
+            errors['maxlength'] = {
+                requiredLength: this.maxLength,
+                actualLength: value.length,
+            };
+        }
+        // Pattern validation
+        if (this.pattern) {
+            try {
+                const regex = new RegExp(this.pattern);
+                if (!regex.test(value)) {
+                    errors['pattern'] = { requiredPattern: this.pattern, actualValue: value };
+                }
+            }
+            catch (e) {
+                console.warn('Invalid pattern:', this.pattern);
+            }
+        }
+        // Custom validator
+        if (this.customValidator) {
+            const customError = this.customValidator(value);
+            if (customError) {
+                errors['custom'] = { message: customError };
+            }
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TextareaComponent, isStandalone: true, selector: "sefin-textarea", inputs: { variant: "variant", size: "size", placeholder: "placeholder", hint: "hint", errorMessage: "errorMessage", required: "required", disabled: "disabled", readonly: "readonly", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", rows: "rows", cols: "cols", autoResize: "autoResize", minHeight: "minHeight", maxHeight: "maxHeight", showCounter: "showCounter", autocomplete: "autocomplete", name: "name", id: "id", class: "class", customValidator: "customValidator" }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textareaClasses\">\n  <!-- Textarea Container -->\n  <div class=\"sefin-textarea__container\">\n    <!-- Textarea Wrapper -->\n    <div class=\"sefin-textarea__wrapper\">\n      <!-- Textarea -->\n      <textarea\n        #textareaRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.rows]=\"rows\"\n        [attr.cols]=\"cols\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n        class=\"sefin-textarea__textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textarea__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textarea__helper\"\n    [class.sefin-textarea__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textarea__counter\"\n      [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n    >\n      {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sefin-textarea', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"textareaClasses\">\n  <!-- Textarea Container -->\n  <div class=\"sefin-textarea__container\">\n    <!-- Textarea Wrapper -->\n    <div class=\"sefin-textarea__wrapper\">\n      <!-- Textarea -->\n      <textarea\n        #textareaRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.rows]=\"rows\"\n        [attr.cols]=\"cols\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n        class=\"sefin-textarea__textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textarea__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textarea__helper\"\n    [class.sefin-textarea__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textarea__counter\"\n      [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n    >\n      {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"] }]
+        }], propDecorators: { textareaRef: [{
+                type: ViewChild,
+                args: ['textareaRef', { static: false }]
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], showCounter: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], customValidator: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], focused: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }] } });
+
 /**
  * Molecules index
  */
@@ -3744,5 +4102,5 @@ const STYLES_PATH = './styles/index.scss';
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
 //# sourceMappingURL=lesterarte-sefin-ui.mjs.map