import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { i as isRequired, P as PdsLabel, a as assignDescription, m as messageId } from './pds-label.js';

const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
const PdsTextareaStyle0 = baseCss;

const pdsTextareaCss = ":host{--border-interactive-default:var(--pine-border-interactive-default);--border-interactive-hover:var(--pine-border-interactive-hover);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color-background-default:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-100);--color-background-hover:var(--pine-color-grey-050);--color-background-error-default:var(--pine-color-red-050);--color-border-error-default:var(--pine-color-red-600);--color-border-focus-visible:var(--pine-color-grey-400);--color-border-hover:var(--pine-color-grey-400);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-300);--color-text-disabled-default:var(--pine-color-grey-400);--color-text-message-error-default:var(--pine-color-red-600);--color-text-placeholder-default:var(--pine-color-grey-600);--color-text-placeholder-disabled:var(--pine-color-grey-400);--font-weight-label-default:var(--pine-font-weight-body-medium);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);--typography-message-default:var(--pine-typography-body-sm-default);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-weight:var(--font-weight-label-default);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background-default);border:var(--border-interactive-default);border-radius:var(--pine-border-radius-100);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--border-interactive-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-text-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error-default)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--typography-message-default);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-text-message-error-default)}";
const PdsTextareaStyle1 = pdsTextareaCss;

const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.pdsTextareaChange = createEvent(this, "pdsTextareaChange", 7);
        this.onTextareaChange = (ev) => {
            const textarea = ev.target;
            isRequired(textarea, this);
            if (textarea) {
                this.value = textarea.value;
            }
            this.pdsTextareaChange.emit({ value: this.value, event: ev });
        };
        this.autocomplete = undefined;
        this.componentId = undefined;
        this.disabled = false;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.invalid = false;
        this.label = undefined;
        this.name = this.componentId;
        this.placeholder = undefined;
        this.readonly = false;
        this.required = false;
        this.rows = undefined;
        this.value = undefined;
    }
    textareaClassNames() {
        const classNames = ['pds-textarea__field'];
        if (this.invalid && this.invalid === true) {
            classNames.push('is-invalid');
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: '14f6fea952c2ff5d1c87f8197ac4f0143163232a', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '869abfd7d6fb788a136a728732b3fa5980817c3b', class: "pds-textarea" }, this.label &&
            h(PdsLabel, { key: 'c4c659054ab9c9a634f46661c7255a99c22c9c34', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '37eabc8d2f9027bcded41d4789c49f57d117d23a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
            h("p", { key: '328bb200eff1b3d14905579d3e96904b0eb92af2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
            h("p", { key: '6d8594f1819ad67cb055cf4f9d5b52a561ef94a8', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
    }
    get el() { return this; }
    static get style() { return PdsTextareaStyle0 + PdsTextareaStyle1; }
}, [1, "pds-textarea", {
        "autocomplete": [1],
        "componentId": [1, "component-id"],
        "disabled": [4],
        "errorMessage": [1, "error-message"],
        "helperMessage": [1, "helper-message"],
        "invalid": [1028],
        "label": [1],
        "name": [1],
        "placeholder": [1],
        "readonly": [4],
        "required": [4],
        "rows": [2],
        "value": [1025]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-textarea"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-textarea":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsTextarea$1);
            }
            break;
    } });
}

const PdsTextarea = PdsTextarea$1;
const defineCustomElement = defineCustomElement$1;

export { PdsTextarea, defineCustomElement };

//# sourceMappingURL=pds-textarea.js.map