import * as i0 from '@angular/core';
import { input, booleanAttribute, numberAttribute, inject, ElementRef, Renderer2, effect, HostListener, Directive, output, linkedSignal, signal, Injector, forwardRef, ViewEncapsulation, Component } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil, debounceTime, startWith } from 'rxjs/operators';
import { NgControl, FormControlName, FormGroupDirective, FormControlDirective, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/* eslint-disable @angular-eslint/directive-selector */
/**
 * A directive that automatically adjusts the height of a textarea based on its content.
 *
 * @directive
 * @selector textarea[autoResize]
 * @description
 * The AutoResizeDirective automatically adjusts the height of a textarea element as the user types,
 * ensuring that all content is visible without requiring manual resizing or scrolling.
 * It supports minimum and maximum row constraints and can be enabled/disabled dynamically.
 *
 * @example
 * ```html
 * <textarea autoResize [minRows]="2" [maxRows]="5"></textarea>
 * ```
 */
class AutoResizeDirective {
    constructor() {
        /**
         * @description
         * Controls whether the auto-resize functionality is enabled.
         * When true, the textarea will automatically adjust its height based on content.
         * When false, the textarea will behave normally.
         *
         * @default true
         */
        this.autoResize = input(true, { ...(ngDevMode ? { debugName: "autoResize" } : {}), transform: booleanAttribute });
        /**
         * @description
         * Sets the minimum number of rows for the textarea.
         * This value determines the initial height of the textarea.
         *
         * @param minRows - The minimum number of rows to display
         * @default 1
         */
        this.minRows = input(1, { ...(ngDevMode ? { debugName: "minRows" } : {}), transform: numberAttribute });
        /**
         * @description
         * Sets the maximum number of rows for the textarea.
         * When set to a value greater than 0, the textarea will not grow beyond this number of rows
         * and will show scrollbars if necessary.
         * When set to 0, there is no maximum limit.
         *
         * @default 0
         */
        this.maxRows = input(0, { ...(ngDevMode ? { debugName: "maxRows" } : {}), transform: numberAttribute });
        this.el = inject(ElementRef);
        this.renderer = inject(Renderer2);
        this.control = inject(NgControl, { optional: true });
        this.destroy$ = new Subject();
        /**
         * Handles changes to the directive's autoResize input property.
         * Updates the textarea's appearance and behavior accordingly.
         */
        effect(() => {
            const enable = this.autoResize();
            this.renderer.setProperty(this.el.nativeElement, 'rows', this.minRows());
            this.renderer.setStyle(this.el.nativeElement, 'overflow', enable ? 'hidden' : '');
            this.renderer.setStyle(this.el.nativeElement, 'resize', enable ? 'none' : '');
            if (enable) {
                this.resize();
            }
        });
    }
    /**
     * Event handler for input events on the textarea.
     * Triggers the resize calculation when the content changes.
     *
     * @internal
     */
    onInput() {
        this.resize();
    }
    /**
     * Initializes the directive by setting up window resize event handling
     * and mutation observer for readonly attribute changes.
     *
     * @internal
     */
    ngOnInit() {
        fromEvent(window, 'resize')
            .pipe(takeUntil(this.destroy$), debounceTime(300))
            .subscribe(() => this.resize());
        // Create an observer instance linked to the callback function
        this.observer = new MutationObserver(this.readonlyMutationObserver.bind(this));
        // Start observing the target node for configured mutations
        this.observer.observe(this.el.nativeElement, { attributes: true });
    }
    /**
     * Performs initial resize after view initialization and sets up form control value change handling if applicable.
     *
     * @internal
     */
    ngAfterViewInit() {
        if (this.autoResize()) {
            if (this.control) {
                this.handleFormControlChanges();
            }
            else {
                this.resize();
            }
        }
    }
    /**
     * Cleans up subscriptions and disconnects observers when the directive is destroyed.
     *
     * @internal
     */
    ngOnDestroy() {
        this.destroy$.complete();
        this.destroy$.unsubscribe();
        this.observer.disconnect();
    }
    /**
     * Calculates and sets the appropriate height for the textarea based on its content.
     * This method creates a temporary clone of the textarea to measure the required height,
     * taking into account minRows and maxRows constraints.
     *
     * The calculation process:
     * 1. Creates a hidden clone of the textarea
     * 2. Sets the clone's width to match the original
     * 3. Measures the required height based on content
     * 4. Applies maxRows constraint if specified
     * 5. Updates the original textarea's height
     *
     * @public
     */
    resize() {
        if (this.autoResize()) {
            // clone element
            const clone = this.el.nativeElement.cloneNode(true);
            const parent = this.el.nativeElement.parentNode;
            clone.style.width = this.el.nativeElement.offsetWidth + 'px';
            clone.style.visibility = 'hidden';
            clone.style.position = 'absolute';
            clone.textContent = this.el.nativeElement.value;
            parent.appendChild(clone);
            clone.style['overflow-y'] = 'hidden';
            clone.style.height = 'auto';
            const cloneHeight = clone.scrollHeight;
            this.renderer.setStyle(clone, 'height', cloneHeight);
            // calculate height
            const { offsetHeight } = clone;
            let { scrollHeight } = clone;
            // Enforce maxRows limit if set
            if (this.maxRows() > 0) {
                const lineHeight = parseInt(getComputedStyle(clone).lineHeight, 10);
                const maxHeight = lineHeight * this.maxRows();
                scrollHeight = Math.min(scrollHeight, maxHeight);
                if (scrollHeight >= maxHeight) {
                    this.renderer.removeStyle(this.el.nativeElement, 'overflow'); // Restore overflow behavior
                }
                else {
                    this.renderer.setStyle(this.el.nativeElement, 'overflow', 'hidden'); // Hide scrollbars during adjustment
                }
            }
            let height = offsetHeight > scrollHeight ? offsetHeight : scrollHeight;
            height = height <= 0 ? 'auto' : `${height}px`;
            // remove clone
            parent.removeChild(clone);
            // set height
            this.renderer.setStyle(this.el.nativeElement, 'height', height);
        }
    }
    /**
     * Sets up subscription to form control value changes to trigger resize when the value
     * is changed programmatically through the form control.
     *
     * @protected
     */
    handleFormControlChanges() {
        // in case value changed manually through control, call resize()
        // startWith is being used to cause resize to be called in case of late subscription after value has changed
        this.control.valueChanges.pipe(takeUntil(this.destroy$), startWith('')).subscribe(() => this.resize());
    }
    /**
     * Mutation observer callback that handles changes to the readonly attribute
     * and triggers resize when necessary.
     *
     * @param mutationsList - List of mutations that occurred
     * @private
     */
    readonlyMutationObserver(mutationsList) {
        // Use traditional 'for loops' for IE 11
        for (const mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'readonly') {
                this.resize();
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AutoResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: AutoResizeDirective, isStandalone: true, selector: "textarea[autoResize]", inputs: { autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AutoResizeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'textarea[autoResize]',
                }]
        }], ctorParameters: () => [], propDecorators: { autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], onInput: [{
                type: HostListener,
                args: ['input']
            }] } });

/**
 * @description
 * Multiline text input field for entering longer text content.
 * `euiTextArea` provides an enhanced textarea component with full Angular forms integration, validation state handling, readonly display mode, and optional automatic height adjustment.
 * It is designed to be used as an attribute selector on a `textarea` element.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Simple textarea -->
 * <textarea euiTextArea placeholder="Enter description"></textarea>
 *
 * <!-- With reactive forms -->
 * <form [formGroup]="form">
 *   <textarea euiTextArea formControlName="description"></textarea>
 * </form>
 *
 * <!-- Readonly mode -->
 * <textarea euiTextArea [readonly]="true" [value]="content"></textarea>
 * ```
 *
 * ```typescript
 * form = new FormGroup({
 *   description: new FormControl('', [Validators.required, Validators.maxLength(500)])
 * });
 * ```
 *
 * ### Accessibility
 * - Associate with label using for/id attributes
 * - Provide placeholder text as guidance, not as label replacement
 * - Use aria-describedby for helper text or error messages
 * - Ensure sufficient color contrast in all states
 *
 * ### Notes
 * - Automatically tracks number of text rows via rowsChange event
 * - Validation state (invalid/danger) syncs with form control
 * - Readonly mode displays content in a styled container
 * - Disabled state prevents all user interaction
 */
class EuiTextareaComponent {
    /**
     * Static counter used to generate unique IDs for textarea instances
     * @static
     */
    static { this.idCounter = 0; }
    get class() {
        return [
            this.isInvalid() ? 'eui-textarea--invalid' : '',
            this.baseStatesDirective.getCssClasses('eui-textarea'),
        ].join(' ').trim();
    }
    constructor() {
        /**
         * Event emitter that fires when the number of text rows in the textarea changes
         */
        this.rowsChange = output();
        /**
         * The disabled state of the textarea
         * @description When set to true, prevents user interaction with the textarea.
         * This can be controlled either directly or through form control binding.
         */
        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
        /**
         * The readonly state of the textarea
         * @description When true, displays the textarea content in a read-only format
         * with special styling.
         */
        this.readonly = input(undefined, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
        /**
         * Unique identifier for the textarea
         * @default eui-textarea_{increment}
         */
        this.id = input(`eui-textarea_${EuiTextareaComponent.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
        /**
         * Flag indicating if the textarea is in an invalid state
         * @description When true, applies error styling to the textarea.
         * This can be set manually or automatically through form validation.
         */
        this.isInvalid = input(undefined, { ...(ngDevMode ? { debugName: "isInvalid" } : {}), transform: booleanAttribute });
        /**
         * @description
         * Data attribute for end-to-end testing
         * @default eui-textarea
         */
        this.e2eAttr = input('eui-textarea', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : []));
        this.innerDisabled = linkedSignal({ ...(ngDevMode ? { debugName: "innerDisabled" } : {}), source: this.disabled,
            computation: () => this.disabled() });
        this.innerIsInvalid = linkedSignal({ ...(ngDevMode ? { debugName: "innerIsInvalid" } : {}), source: this.isInvalid,
            computation: () => {
                return this.isInvalid();
            } });
        this.destroy$ = new Subject();
        this.rows = signal(0, ...(ngDevMode ? [{ debugName: "rows" }] : []));
        this.injector = inject(Injector);
        this._elementRef = inject(ElementRef);
        this._renderer = inject(Renderer2);
        this.baseStatesDirective = inject(BaseStatesDirective);
        effect(() => {
            this.rowsChange.emit(this.rows());
        });
        effect(() => {
            this.baseStatesDirective.euiDanger = this.innerIsInvalid();
        });
        effect(() => {
            this.baseStatesDirective.euiDisabled = this.innerDisabled();
        });
        effect(() => {
            const readonly = this.readonly();
            if (!readonly) {
                this._renderer.removeAttribute(this.hostEl, 'readonly');
            }
            if (this.hostWrapperEl && this.valueContainerEl) {
                this.hostWrapperEl.classList.toggle('eui-textarea__wrapper--readonly', !!readonly);
            }
            if (this.hostEl && this.valueContainerEl) {
                this.hostEl.classList.toggle('eui-textarea--readonly', !!readonly);
                this.valueContainerEl.innerText = this.hostEl.value;
            }
        });
    }
    /**
     * Handles input changes in the textarea
     * @param {string} value - The new value of the textarea
     * @description Updates the number of rows and triggers change detection
     */
    onInputChange(value) {
        // signal rows update
        this.rows.set(this.hostEl?.value.split('\n').length);
        this.onChange(value);
    }
    /**
     * Handles blur events on the textarea
     * @param {string} value - The current value of the textarea
     * @description Marks the control as touched and triggers validation
     */
    onBlur(value) {
        this.onTouched(value);
    }
    /**
     * @description
     * Lifecycle hook that initializes the component. Sets up DOM elements,
     * initializes form control integration, and establishes state management
     */
    ngOnInit() {
        this.hostEl = this._elementRef.nativeElement;
        this.hostParentEl = this.hostEl.parentElement;
        this.hostWrapperEl = this.createHostWrapperContainer();
        this.valueContainerEl = this.createValueContainer();
        this.handleMarkup();
        // extract the FormControl or NgControl
        this.control = this.injector.get(NgControl, null, { optional: true });
        if (this.control instanceof FormControlName) {
            this.control = this.injector.get(FormGroupDirective).getControl(this.control);
        }
        else if (this.control instanceof FormControlDirective) {
            this.control = this.control.form;
        }
        // sets invalid state if control is present
        if (this.control instanceof FormControl || this.control instanceof NgControl) {
            this.innerDisabled.set(this.control.disabled);
            // this.isInvalid = this.control.dirty && this.control.touched && this.control.invalid;
            this.innerIsInvalid.set(this.control.dirty && this.control.touched && this.control.invalid);
            if (this.control instanceof FormControl) {
                this.control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe((status) => {
                    this.innerIsInvalid.set(status === 'INVALID');
                    this.innerDisabled.set(status === 'DISABLED');
                });
            }
        }
    }
    /**
     * @description
     * Lifecycle hook that checks for changes in form control state
     * Updates invalid state based on form control validation
     */
    ngDoCheck() {
        if (this.control instanceof NgControl || this.control instanceof FormControl) {
            // TODO: Delete when https://github.com/angular/angular/issues/30275 is resolved
            this.innerIsInvalid.set(this.control.invalid && this.control.touched);
        }
    }
    /**
     * @description
     * Lifecycle hook that cleans up component resources
     * Completes observables and removes generated DOM elements
     */
    ngOnDestroy() {
        this.destroy$.complete();
        this.destroy$.unsubscribe();
        // cleanup DOM leftovers
        if (this.valueContainerEl) {
            try {
                this._renderer.removeChild(this.hostEl.parentElement, this.valueContainerEl);
            }
            catch (e) {
                console.error(e);
            }
        }
        if (this.hostWrapperEl) {
            try {
                this._renderer.removeChild(this.hostParentEl, this.hostWrapperEl);
            }
            catch (e) {
                console.error(e);
            }
        }
    }
    /**
     * @description
     * ControlValueAccessor implementation for writing values
     * @param {unknown} obj - The value to write to the textarea
     */
    writeValue(obj) {
        if (this.valueContainerEl) {
            this._renderer.setProperty(this.valueContainerEl, 'innerText', obj || null);
        }
        this._renderer.setProperty(this._elementRef.nativeElement, 'value', obj || null);
        // signal rows update
        this.rows.set(this.hostEl?.value.split('\n').length);
    }
    /**
     * @description
     * Registers the callback function for change events
     * @param {Function} fn - The callback function
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * @description
     * Registers the callback function for touched events
     * @param {Function} fn - The callback function
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @description
     * Sets the disabled state of the textarea
     * @param {boolean} isDisabled - The disabled state to set
     */
    setDisabledState(isDisabled) {
        if (this.hostEl) {
            this._renderer.setProperty(this.hostEl, 'disabled', isDisabled);
        }
    }
    onChange(_) {
        this.writeValue(_);
    }
    onTouched(_) {
        if (this.control) {
            this.innerIsInvalid.set(this.control.invalid);
        }
    }
    /**
     * @description
     * Creates the container for the textarea element
     * @returns {HTMLDivElement} The created wrapper container element
     * @private
     */
    createHostWrapperContainer() {
        const wrapper = this._renderer.createElement('div');
        this._renderer.addClass(wrapper, 'eui-textarea__wrapper');
        if (this.readonly()) {
            this._renderer.addClass(wrapper, 'eui-textarea__wrapper--readonly');
            this._renderer.addClass(this.hostEl, 'eui-textarea--readonly');
        }
        else {
            this._renderer.removeClass(wrapper, 'eui-textarea__wrapper--readonly');
            this._renderer.removeClass(this.hostEl, 'eui-textarea--readonly');
        }
        return wrapper;
    }
    /**
     * @description
     * Creates the container for displaying readonly values
     * @returns {HTMLDivElement} The created value container element
     * @private
     */
    createValueContainer() {
        const valueContainer = this._renderer.createElement('div');
        this._renderer.addClass(valueContainer, 'eui-textarea__value-container');
        this._renderer.setProperty(valueContainer, 'innerText', this.hostEl.value);
        return valueContainer;
    }
    /**
     * @description
     * Handles the DOM manipulation for the textarea structure
     * Wraps the textarea in necessary containers and adds
     * the readonly value display element
     *
     * @private
     */
    handleMarkup() {
        if (this.hostParentEl != null) {
            this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);
            this.hostWrapperEl.appendChild(this.hostEl);
            this.hostWrapperEl.appendChild(this.valueContainerEl);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: EuiTextareaComponent, isStandalone: true, selector: "textarea[euiTextArea]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsChange: "rowsChange" }, host: { listeners: { "input": "onInputChange($any($event.target).value)", "blur": "onBlur($any($event.target).value)" }, properties: { "attr.id": "id()", "attr.data-e2e": "e2eAttr()", "attr.disabled": "innerDisabled() ? true : null", "class": "class" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiDisabled", "euiDisabled", "euiDanger", "euiDanger"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-textarea__wrapper{display:flex;position:relative;width:100%}.eui-21 .eui-textarea__wrapper .eui-textarea{font:var(--eui-f);appearance:none;background-color:var(--eui-c-surface-container);border:1px solid var(--eui-c-secondary-border);border-radius:var(--eui-br-s);box-shadow:none;color:var(--eui-c-text);min-height:var(--eui-s-5xl);padding:calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 1px);width:100%}.eui-21 .eui-textarea__wrapper .eui-textarea:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-textarea__wrapper .eui-textarea:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-textarea__wrapper .eui-textarea [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-textarea__wrapper .eui-textarea:not([hidden]){display:block}.eui-21 .eui-textarea__wrapper .eui-textarea::placeholder{color:var(--eui-c-text-lighter)!important;opacity:1}.eui-21 .eui-textarea__wrapper .eui-textarea[readonly]{background-color:transparent;border-color:transparent;box-shadow:none;height:inherit;padding-left:0;padding-right:0;pointer-events:none}.eui-21 .eui-textarea__wrapper .eui-textarea[readonly]+.eui-feedback-message,.eui-21 .eui-textarea__wrapper .eui-textarea[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-21 .eui-textarea__wrapper .eui-textarea[disabled]:not([readonly]),.eui-21 .eui-textarea__wrapper .eui-textarea--disabled:not([readonly]){background-color:var(--eui-c-disabled-bg)!important;border:1px solid var(--eui-c-secondary-border-lighter);color:var(--eui-c-text-light);pointer-events:auto}.eui-21 .eui-textarea__wrapper .eui-textarea--invalid,.eui-21 .eui-textarea__wrapper .eui-textarea--danger{border:1px solid var(--eui-c-danger-border)}.eui-21 .eui-textarea__wrapper .eui-textarea--loading{padding-right:var(--eui-s-7xl)}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon{align-items:center;display:flex}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:after,.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:before{content:\"\";height:var(--eui-s-l);position:absolute;right:var(--eui-s-s);width:var(--eui-s-l)}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:before{border:var(--eui-s-3xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:after{animation:loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-s-3xs);box-shadow:0 0 0 1px transparent}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon--sm:after,.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon--sm:before{height:var(--eui-s-m);width:var(--eui-s-m)}@keyframes loading{to{transform:rotate(360deg)}}.eui-21 .eui-textarea__wrapper .eui-textarea--clearable{padding-right:var(--eui-s-7xl)}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-secondary-surface-light)}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb{background-color:var(--eui-c-divider);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface);border:0;cursor:grab}.eui-21 .eui-textarea__wrapper .eui-textarea:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-textarea__wrapper .eui-textarea:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-textarea__wrapper .eui-textarea{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-textarea__wrapper .eui-textarea:focus,.eui-21 .eui-textarea__wrapper .eui-textarea:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-textarea__wrapper .eui-textarea{height:auto;resize:vertical}.eui-21 .eui-textarea__wrapper .eui-textarea--disabled,.eui-21 .eui-textarea__wrapper .eui-textarea[disabled]{pointer-events:auto}.eui-21 .eui-textarea__wrapper .eui-textarea__value-container,.eui-21 .eui-textarea__wrapper.eui-textarea__wrapper--readonly .eui-input-maxlength-wrapper,.eui-21 .eui-textarea__wrapper.eui-textarea__wrapper--readonly .eui-textarea--readonly{appearance:none;display:none}.eui-21 .eui-textarea__wrapper.eui-textarea__wrapper--readonly .eui-textarea__value-container{appearance:initial;color:var(--eui-c-text-light);display:inline-flex;min-height:calc(var(--eui-s-5xl) + var(--eui-s-3xs));word-break:break-word}.eui-21 .eui-textarea__wrapper .eui-textarea--invalid{border:var(--eui-bw-xs) solid var(--eui-c-danger)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTextareaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'textarea[euiTextArea]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: ['euiDisabled', 'euiDanger'],
                        },
                    ], host: {
                        '[attr.id]': 'id()',
                        '[attr.data-e2e]': 'e2eAttr()',
                        '[attr.disabled]': 'innerDisabled() ? true : null',
                        '[class]': 'class',
                    }, styles: [".eui-21 .eui-textarea__wrapper{display:flex;position:relative;width:100%}.eui-21 .eui-textarea__wrapper .eui-textarea{font:var(--eui-f);appearance:none;background-color:var(--eui-c-surface-container);border:1px solid var(--eui-c-secondary-border);border-radius:var(--eui-br-s);box-shadow:none;color:var(--eui-c-text);min-height:var(--eui-s-5xl);padding:calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 1px);width:100%}.eui-21 .eui-textarea__wrapper .eui-textarea:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-textarea__wrapper .eui-textarea:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-textarea__wrapper .eui-textarea [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-textarea__wrapper .eui-textarea:not([hidden]){display:block}.eui-21 .eui-textarea__wrapper .eui-textarea::placeholder{color:var(--eui-c-text-lighter)!important;opacity:1}.eui-21 .eui-textarea__wrapper .eui-textarea[readonly]{background-color:transparent;border-color:transparent;box-shadow:none;height:inherit;padding-left:0;padding-right:0;pointer-events:none}.eui-21 .eui-textarea__wrapper .eui-textarea[readonly]+.eui-feedback-message,.eui-21 .eui-textarea__wrapper .eui-textarea[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-21 .eui-textarea__wrapper .eui-textarea[disabled]:not([readonly]),.eui-21 .eui-textarea__wrapper .eui-textarea--disabled:not([readonly]){background-color:var(--eui-c-disabled-bg)!important;border:1px solid var(--eui-c-secondary-border-lighter);color:var(--eui-c-text-light);pointer-events:auto}.eui-21 .eui-textarea__wrapper .eui-textarea--invalid,.eui-21 .eui-textarea__wrapper .eui-textarea--danger{border:1px solid var(--eui-c-danger-border)}.eui-21 .eui-textarea__wrapper .eui-textarea--loading{padding-right:var(--eui-s-7xl)}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon{align-items:center;display:flex}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:after,.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:before{content:\"\";height:var(--eui-s-l);position:absolute;right:var(--eui-s-s);width:var(--eui-s-l)}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:before{border:var(--eui-s-3xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon:after{animation:loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-s-3xs);box-shadow:0 0 0 1px transparent}.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon--sm:after,.eui-21 .eui-textarea__wrapper .eui-textarea--loading-icon--sm:before{height:var(--eui-s-m);width:var(--eui-s-m)}@keyframes loading{to{transform:rotate(360deg)}}.eui-21 .eui-textarea__wrapper .eui-textarea--clearable{padding-right:var(--eui-s-7xl)}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-secondary-surface-light)}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb{background-color:var(--eui-c-divider);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface);border:0;cursor:grab}.eui-21 .eui-textarea__wrapper .eui-textarea:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-textarea__wrapper .eui-textarea:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-textarea__wrapper .eui-textarea{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-textarea__wrapper .eui-textarea:focus,.eui-21 .eui-textarea__wrapper .eui-textarea:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-textarea__wrapper .eui-textarea{height:auto;resize:vertical}.eui-21 .eui-textarea__wrapper .eui-textarea--disabled,.eui-21 .eui-textarea__wrapper .eui-textarea[disabled]{pointer-events:auto}.eui-21 .eui-textarea__wrapper .eui-textarea__value-container,.eui-21 .eui-textarea__wrapper.eui-textarea__wrapper--readonly .eui-input-maxlength-wrapper,.eui-21 .eui-textarea__wrapper.eui-textarea__wrapper--readonly .eui-textarea--readonly{appearance:none;display:none}.eui-21 .eui-textarea__wrapper.eui-textarea__wrapper--readonly .eui-textarea__value-container{appearance:initial;color:var(--eui-c-text-light);display:inline-flex;min-height:calc(var(--eui-s-5xl) + var(--eui-s-3xs));word-break:break-word}.eui-21 .eui-textarea__wrapper .eui-textarea--invalid{border:var(--eui-bw-xs) solid var(--eui-c-danger)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { rowsChange: [{ type: i0.Output, args: ["rowsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], onInputChange: [{
                type: HostListener,
                args: ['input', ['$any($event.target).value']]
            }], onBlur: [{
                type: HostListener,
                args: ['blur', ['$any($event.target).value']]
            }] } });

const EUI_TEXTAREA = [
    EuiTextareaComponent,
    AutoResizeDirective,
];

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

export { AutoResizeDirective, EUI_TEXTAREA, EuiTextareaComponent };
//# sourceMappingURL=eui-components-eui-textarea.mjs.map
