// @warp-css;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { classNames as classnames } from '@chbphone55/classnames';
import { i18n } from '@lingui/core';
import { FormControlMixin } from '@open-wc/form-control';
import { html, LitElement, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { reset } from '../styles.js';
import { styles } from './styles.js';
const ccInput = {
    // input classes
    base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true
    default: 'border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly
    disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly
    invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly
    readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly
    placeholder: 'placeholder:s-text-placeholder',
    suffix: 'pr-40',
    prefix: 'pl-[var(--w-prefix-width,_40px)]',
    // textarea classes
    textArea: 'min-h-[42] sm:min-h-[45]',
    fixed: 'resize-none',
};
const ccLabel = {
    base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text flex',
    optional: 'pl-8 font-normal text-s s-text-subtle',
};
const ccHelpText = {
    base: 'text-xs mt-4 block',
    color: 's-text-subtle',
    colorInvalid: 's-text-negative',
};
/**
 * A single line text input element.
 *
 * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
 */
class WarpTextarea extends FormControlMixin(LitElement) {
    constructor() {
        super(...arguments);
        this.minHeight = Number.NEGATIVE_INFINITY;
        this.maxHeight = Number.POSITIVE_INFINITY;
        // capture the initial value using connectedCallback and #initialValue
        this.#initialValue = null;
    }
    static { this.shadowRootOptions = {
        ...LitElement.shadowRootOptions,
        delegatesFocus: true,
    }; }
    // capture the initial value using connectedCallback and #initialValue
    #initialValue;
    updated(changedProperties) {
        if (changedProperties.has('value')) {
            this.setValue(this.value);
        }
    }
    resetFormControl() {
        this.value = this.#initialValue;
    }
    static { this.styles = [reset, styles]; }
    /** @internal */
    get _textareaStyles() {
        return classnames([
            ccInput.base,
            ccInput.textArea,
            !!this.placeholder && ccInput.placeholder,
            !this.invalid && !this.disabled && !(this.readonly || this.readOnly) && ccInput.default,
            this.invalid && !this.disabled && !(this.readonly || this.readOnly) && ccInput.invalid,
            !this.invalid && this.disabled && !(this.readonly || this.readOnly) && ccInput.disabled,
            !this.invalid && !this.disabled && (this.readonly || this.readOnly) && ccInput.readOnly,
            this.maxRows && ccInput.fixed,
        ]);
    }
    /** @internal */
    get _helptextstyles() {
        return classnames([ccHelpText.base, this.invalid ? ccHelpText.colorInvalid : ccHelpText.color]);
    }
    /** @internal */
    get _helpId() {
        if (this.helpText)
            return `${this._id}__hint`;
        return undefined;
    }
    /** @internal */
    get _id() {
        return 'textfield';
    }
    /** @internal */
    get _error() {
        if (this.invalid && this._helpId)
            return this._helpId;
        return undefined;
    }
    async connectedCallback() {
        super.connectedCallback();
        this.#initialValue = this.value;
        this.setValue(this.value);
        await this.updateComplete;
        if (this.value || this.minRows) {
            // If the component starts with a value or minHeight,
            // resize it automatically to show all the content, or maxHeight.
            this.#resize(this.shadowRoot.querySelector('textarea'));
        }
    }
    handler(e) {
        const target = e.currentTarget;
        this.value = target.value;
        this.#resize(target);
    }
    /** Calculate the new height for the area on input */
    #resize(target) {
        const style = getComputedStyle(target);
        const borderTopWitdh = Number.parseFloat(style.getPropertyValue('border-top-width'));
        const borderBottomWitdh = Number.parseFloat(style.getPropertyValue('border-top-width'));
        const lineHeight = Number.parseFloat(style.getPropertyValue('line-height'));
        const topPadding = Number.parseFloat(style.getPropertyValue('padding-top'));
        const bottomPadding = Number.parseFloat(style.getPropertyValue('padding-bottom'));
        const offset = topPadding + bottomPadding + borderBottomWitdh + borderTopWitdh;
        if (this.minRows) {
            this.minHeight = lineHeight * this.minRows + offset;
        }
        if (this.minRows) {
            this.maxHeight = lineHeight * this.minRows + offset;
        }
        const borderBoxHeight = target.scrollHeight + borderTopWitdh + borderBottomWitdh;
        const height = Math.min(this.maxHeight, Math.max(this.minHeight, borderBoxHeight));
        target.style.setProperty('height', height + 'px');
    }
    render() {
        return html `
        ${this.label
            ? html `
                <label for="${this._id}" class=${ccLabel.base}>
                  ${this.label}
                  ${this.optional
                ? html `
                          <span class="${ccLabel.optional}">
                            ${i18n.t({
                    id: 'textarea.label.optional',
                    message: '(optional)',
                    comment: 'Shown behind label when marked as optional',
                })}
                          </span>
                    `
                : nothing}
                </label>`
            : nothing}
        <textarea
          id="${this._id}"
          class="${this._textareaStyles}"
          name="${ifDefined(this.name)}"
          placeholder="${ifDefined(this.placeholder)}"
          .value="${this.value || ''}"
          aria-describedby="${ifDefined(this._helpId || (this.ariaDescription ? 'aria-description' : undefined))}"
          aria-errormessage="${ifDefined(this._error)}"
          aria-invalid="${ifDefined(this.invalid)}"
          ?disabled="${this.disabled}"
          ?readonly="${this.readonly || this.readOnly}"
          ?required="${this.required}"
          @input="${this.handler}">
        </textarea>
        ${this.helpText ? html `<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>` : nothing}
    `;
    }
}
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTextarea.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTextarea.prototype, "invalid", void 0);
__decorate([
    property({ type: String, reflect: true })
], WarpTextarea.prototype, "label", void 0);
__decorate([
    property({ type: String, reflect: true, attribute: 'help-text' })
], WarpTextarea.prototype, "helpText", void 0);
__decorate([
    property({ type: Number, reflect: true, attribute: 'maximum-rows' })
], WarpTextarea.prototype, "maxRows", void 0);
__decorate([
    property({ type: Number, reflect: true, attribute: 'minimum-rows' })
], WarpTextarea.prototype, "minRows", void 0);
__decorate([
    property()
], WarpTextarea.prototype, "name", void 0);
__decorate([
    property()
], WarpTextarea.prototype, "placeholder", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'read-only' })
], WarpTextarea.prototype, "readOnly", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTextarea.prototype, "readonly", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTextarea.prototype, "required", void 0);
__decorate([
    property({ type: String, reflect: true })
], WarpTextarea.prototype, "value", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTextarea.prototype, "optional", void 0);
__decorate([
    state()
], WarpTextarea.prototype, "minHeight", void 0);
__decorate([
    state()
], WarpTextarea.prototype, "maxHeight", void 0);
if (!customElements.get('w-textarea')) {
    customElements.define('w-textarea', WarpTextarea);
}
export { WarpTextarea };
