Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-icon/index.cjs");
require("../lukso-sanitize/index.cjs");
const require_cn = require("../../shared/tools/cn.cjs");
require("../../shared/tools/index.cjs");
require("../lukso-form-description/index.cjs");
require("../lukso-form-error/index.cjs");
require("../lukso-form-label/index.cjs");
const require_style = require("./style.css.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
//#region src/components/lukso-textarea/index.ts
var FOCUS_DELAY_MS = 10;
var LuksoTextarea = class LuksoTextarea extends require_index.TailwindStyledElement(require_style.default) {
	constructor(..._args) {
		super(..._args);
		this.value = "";
		this.name = "";
		this.placeholder = "";
		this.label = "";
		this.id = "";
		this.ref = "";
		this.description = "";
		this.error = "";
		this.customClass = "";
		this.isFullWidth = false;
		this.isReadonly = false;
		this.isDisabled = false;
		this.autofocus = false;
		this.borderless = false;
		this.isNonResizable = false;
		this.keepFocusOnEscape = false;
		this.size = "large";
		this.rows = 4;
		this.hasFocus = false;
		this.hasHighlight = false;
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				wrapper: "group flex",
				input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
        outline-none transition transition-all duration-150 appearance-none`
			},
			variants: {
				hasError: {
					true: { input: "border-red-85" },
					false: { input: "border-neutral-90" }
				},
				hasHighlight: { true: { input: "border-neutral-35" } },
				borderless: {
					true: { input: "border-0" },
					false: { input: "border" }
				},
				isReadonly: { true: { input: "cursor-not-allowed" } },
				isDisabled: {
					true: { input: "text-neutral-60 cursor-not-allowed" },
					false: { input: "text-neutral-20" }
				},
				isFullWidth: {
					true: { wrapper: "w-full" },
					false: { wrapper: "w-[350px]" }
				},
				size: {
					small: { input: "min-h-7 px-2 py-1 paragraph-inter-12-regular rounded-8" },
					medium: { input: "min-h-10 px-3 py-3 paragraph-inter-14-regular rounded-10" },
					large: { input: "min-h-12 px-4 py-3 paragraph-inter-14-regular rounded-12" },
					"x-large": {}
				},
				isNonResizable: { true: { input: "resize-none" } }
			},
			compoundVariants: [{
				isFullWidth: false,
				size: "small",
				class: { wrapper: "w-[210px]" }
			}, {
				hasHighlight: true,
				hasError: true,
				class: { input: "border-red-65" }
			}]
		});
	}
	connectedCallback() {
		super.connectedCallback();
		if (this.autofocus) setTimeout(() => {
			(this.shadowRoot?.querySelector("textarea"))?.focus();
		}, FOCUS_DELAY_MS);
	}
	inputTemplate(styles) {
		return lit.html`
      <textarea
        name=${this.name ? this.name : lit.nothing}
        placeholder=${this.placeholder ? this.placeholder : lit.nothing}
        ref=${this.ref ? this.ref : lit.nothing}
        id=${this.id ? this.id : lit.nothing}
        rows=${this.rows}
        data-testid=${this.name ? `textarea-${this.name}` : "textarea"}
        ?autofocus=${this.autofocus}
        ?readonly=${this.isReadonly ? true : void 0}
        ?disabled=${this.isDisabled ? true : void 0}
        class=${require_cn.cn(styles, this.customClass)}
        @focus=${this.handleFocus}
        @input=${this.handleInput}
        @change=${this.handleChange}
        @blur=${this.handleBlur}
        @keyup=${this.handleKeyUp}
        @keydown=${this.handleKeyDown}
        @keypress=${this.handleKeyPress}
        @mouseenter=${this.handleMouseOver}
        @mouseleave=${this.handleMouseOut}
        @click=${this.handleInputClick}
      >
${this.value}</textarea
      >
    `;
	}
	handleFocus() {
		if (!this.isReadonly && !this.isDisabled) {
			this.hasFocus = true;
			this.hasHighlight = true;
		}
	}
	async handleBlur(event) {
		this.hasFocus = false;
		this.hasHighlight = false;
		await this.updateComplete;
		const target = event.target;
		const blurEvent = new CustomEvent("on-blur", {
			detail: {
				value: target?.value,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(blurEvent);
	}
	async handleChange(event) {
		await this.updateComplete;
		const target = event.target;
		const changeEvent = new CustomEvent("on-change", {
			detail: {
				value: target?.value,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(changeEvent);
	}
	async handleInput(event) {
		const target = event.target;
		this.value = target?.value;
		await this.updateComplete;
		const changeEvent = new CustomEvent("on-input", {
			detail: {
				value: target?.value,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(changeEvent);
	}
	async handleKeyUp(event) {
		await this.updateComplete;
		const target = event.target;
		const keyEvent = new CustomEvent("on-key-up", {
			detail: {
				value: target?.value,
				event
			},
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(keyEvent);
		if (event.key === "Escape" && !this.keepFocusOnEscape) this.blur();
	}
	async handleKeyDown(event) {
		await this.updateComplete;
		const target = event.target;
		const keyEvent = new CustomEvent("on-key-down", {
			detail: {
				value: target.value,
				event
			},
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(keyEvent);
	}
	async handleKeyPress(event) {
		await this.updateComplete;
		const target = event.target;
		const keyEvent = new CustomEvent("on-key-press", {
			detail: {
				value: target?.value,
				event
			},
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(keyEvent);
	}
	handleMouseOver() {
		if (!this.isReadonly && !this.isDisabled) this.hasHighlight = true;
	}
	handleMouseOut() {
		if (!this.hasFocus) this.hasHighlight = false;
	}
	async handleInputClick(event) {
		await this.updateComplete;
		const target = event.target;
		const clickEvent = new CustomEvent("on-input-click", {
			detail: {
				value: target.value,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(clickEvent);
	}
	render() {
		const { wrapper, input } = this.styles({
			hasError: !!this.error,
			hasHighlight: this.hasHighlight,
			borderless: this.borderless,
			isReadonly: this.isReadonly,
			isDisabled: this.isDisabled,
			isFullWidth: this.isFullWidth,
			size: this.size,
			isNonResizable: this.isNonResizable
		});
		return lit.html`
      <div class="w-[inherit]">
        <lukso-form-label
          for-name=${this.name}
          label=${this.label}
        ></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <div class=${wrapper()}>
          <div class="relative w-[inherit] flex">
            ${this.inputTemplate(input())}
          </div>
        </div>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "value", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "name", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "placeholder", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "label", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "id", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "ref", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "description", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "error", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "custom-class"
})], LuksoTextarea.prototype, "customClass", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-full-width"
})], LuksoTextarea.prototype, "isFullWidth", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-readonly"
})], LuksoTextarea.prototype, "isReadonly", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoTextarea.prototype, "isDisabled", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: Boolean })], LuksoTextarea.prototype, "autofocus", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: Boolean })], LuksoTextarea.prototype, "borderless", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-non-resizable"
})], LuksoTextarea.prototype, "isNonResizable", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "keep-focus-on-escape"
})], LuksoTextarea.prototype, "keepFocusOnEscape", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTextarea.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: Number })], LuksoTextarea.prototype, "rows", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoTextarea.prototype, "hasFocus", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoTextarea.prototype, "hasHighlight", void 0);
LuksoTextarea = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-textarea")], LuksoTextarea);
//#endregion
Object.defineProperty(exports, "LuksoTextarea", {
	enumerable: true,
	get: function() {
		return LuksoTextarea;
	}
});
