import { SymbolRegistry, apErrorFill, apRoundedCheckFill, SymbolComponent } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { forwardRef, inject, ElementRef, signal, booleanAttribute, Input, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, NG_VALIDATORS } from '@angular/forms';

const AP_TEXTAREA_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TextareaComponent),
    multi: true,
};
/**
 * @deprecated use native textarea with directive apTextarea and ap-form-field instead
 */
class TextareaComponent {
    elementRef = inject(ElementRef);
    symbolRegistry = inject(SymbolRegistry);
    symbols;
    ariaLabel;
    ariaLabelledBy;
    ariaDescribedBy;
    disabled = false;
    textareaId;
    name;
    label;
    description;
    rows = 3;
    cols = 20;
    autoresize = false;
    required = false;
    placeholder;
    errorMessage;
    successMessage;
    resize = false;
    symbolPosition = 'right';
    _controlValueAccessorChangeFn;
    hostDataTest = signal(undefined, ...(ngDevMode ? [{ debugName: "hostDataTest" }] : /* istanbul ignore next */ []));
    value;
    onTouched;
    constructor() {
        if (this.label && !this.textareaId) {
            throw Error('You have to provide an textarea id id if you want to use a label.');
        }
        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));
        this.elementRef.nativeElement.removeAttribute('data-test');
        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);
    }
    ngOnInit() {
        if (this.label && !this.textareaId) {
            throw Error('You have to provide an textarea id if you want to use a label.');
        }
        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));
        this.elementRef.nativeElement.removeAttribute('data-test');
    }
    // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.
    // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.
    ngAfterViewInit() {
        const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
        if (hostDataTest && this.hostDataTest() !== hostDataTest) {
            this.hostDataTest.set(hostDataTest);
            this.elementRef.nativeElement.removeAttribute('data-test');
        }
    }
    validate() {
        const isNotValid = !this.value && this.required;
        return (isNotValid && {
            invalid: true,
        });
    }
    onValueChange() {
        if (this.onTouched) {
            this.onTouched();
        }
        if (!this.disabled) {
            if (this._controlValueAccessorChangeFn) {
                this._controlValueAccessorChangeFn(this.value);
            }
        }
    }
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(fn) {
        this._controlValueAccessorChangeFn = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TextareaComponent, isStandalone: true, selector: "ap-textarea", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", disabled: "disabled", textareaId: "textareaId", name: "name", label: "label", description: "description", rows: "rows", cols: "cols", autoresize: ["autoresize", "autoresize", booleanAttribute], required: ["required", "required", booleanAttribute], placeholder: "placeholder", errorMessage: "errorMessage", successMessage: "successMessage", resize: "resize", symbolPosition: "symbolPosition" }, providers: [
            AP_TEXTAREA_CONTROL_VALUE_ACCESSOR,
            {
                provide: NG_VALIDATORS,
                useExisting: TextareaComponent,
                multi: true,
            },
        ], queries: [{ propertyName: "symbols", predicate: SymbolComponent }], ngImport: i0, template: "@if (label) {\n    <label [for]=\"textareaId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<textarea\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.with-resize]=\"resize\"\n    [placeholder]=\"placeholder\"\n    [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [id]=\"textareaId\"\n    [cols]=\"cols\"\n    [rows]=\"rows\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"onValueChange()\"></textarea>\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n", styles: ["ap-textarea{display:flex;flex-direction:column;gap:var(--ref-spacing-xxs);--border-width: 1px}ap-textarea label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-textarea label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-textarea textarea{resize:none;width:256px;border:var(--border-width) solid var(--comp-input-border-default-color);background-color:var(--ref-color-white);padding:var(--ref-spacing-xxs) var(--ref-spacing-xs) var(--ref-spacing-xxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm)}ap-textarea textarea::placeholder{color:var(--comp-input-text-placeholder-color)}ap-textarea textarea:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover{border-color:var(--comp-input-border-hover-color)}ap-textarea textarea:active{border-color:var(--comp-input-border-focused-color)}ap-textarea textarea:disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color);cursor:default}ap-textarea textarea.with-error{border-color:var(--comp-input-border-error-color)}ap-textarea textarea.with-success{border-color:var(--comp-input-border-success-color)}ap-textarea textarea.with-resize{resize:vertical}.form-message{font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--sys-text-style-body-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-textarea.ng-valid textarea{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-textarea.ng-invalid textarea{border-color:var(--comp-input-border-error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextareaComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-textarea', imports: [ReactiveFormsModule, FormsModule, SymbolComponent], providers: [
                        AP_TEXTAREA_CONTROL_VALUE_ACCESSOR,
                        {
                            provide: NG_VALIDATORS,
                            useExisting: TextareaComponent,
                            multi: true,
                        },
                    ], encapsulation: ViewEncapsulation.None, template: "@if (label) {\n    <label [for]=\"textareaId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<textarea\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.with-resize]=\"resize\"\n    [placeholder]=\"placeholder\"\n    [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [id]=\"textareaId\"\n    [cols]=\"cols\"\n    [rows]=\"rows\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"onValueChange()\"></textarea>\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n", styles: ["ap-textarea{display:flex;flex-direction:column;gap:var(--ref-spacing-xxs);--border-width: 1px}ap-textarea label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-textarea label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-textarea textarea{resize:none;width:256px;border:var(--border-width) solid var(--comp-input-border-default-color);background-color:var(--ref-color-white);padding:var(--ref-spacing-xxs) var(--ref-spacing-xs) var(--ref-spacing-xxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm)}ap-textarea textarea::placeholder{color:var(--comp-input-text-placeholder-color)}ap-textarea textarea:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover{border-color:var(--comp-input-border-hover-color)}ap-textarea textarea:active{border-color:var(--comp-input-border-focused-color)}ap-textarea textarea:disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color);cursor:default}ap-textarea textarea.with-error{border-color:var(--comp-input-border-error-color)}ap-textarea textarea.with-success{border-color:var(--comp-input-border-success-color)}ap-textarea textarea.with-resize{resize:vertical}.form-message{font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--sys-text-style-body-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-textarea.ng-valid textarea{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-textarea.ng-invalid textarea{border-color:var(--comp-input-border-error-color)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { symbols: [{
                type: ContentChildren,
                args: [SymbolComponent]
            }], ariaLabel: [{
                type: Input
            }], ariaLabelledBy: [{
                type: Input
            }], ariaDescribedBy: [{
                type: Input
            }], disabled: [{
                type: Input
            }], textareaId: [{
                type: Input
            }], name: [{
                type: Input,
                args: [{
                        required: true,
                    }]
            }], label: [{
                type: Input
            }], description: [{
                type: Input
            }], rows: [{
                type: Input
            }], cols: [{
                type: Input
            }], autoresize: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], required: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], placeholder: [{
                type: Input
            }], errorMessage: [{
                type: Input
            }], successMessage: [{
                type: Input
            }], resize: [{
                type: Input
            }], symbolPosition: [{
                type: Input
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { AP_TEXTAREA_CONTROL_VALUE_ACCESSOR, TextareaComponent };
//# sourceMappingURL=agorapulse-ui-components-legacy-textarea.mjs.map
