jb-textarea 3.12.2 → 3.13.0

package/web-component/dist/jb-textarea.js

@@ -0,0 +1,241 @@
+import { ValidationHelper as e } from "jb-validation";
+import { registerDefaultVariables as t } from "jb-core/theme";
+import { getRequiredMessage as a, i18n as r } from "jb-core/i18n";
+import { createInputEvent as i, createKeyboardEvent as s } from "jb-core";
+var n = class extends HTMLElement {
+	static get formAssociated() {
+		return !0;
+	}
+	#e;
+	get value() {
+		return this.#e;
+	}
+	set value(e) {
+		this.#e = e, this.#t.value = e, this.autoHeight && this.#a();
+	}
+	#r;
+	get isAutoValidationDisabled() {
+		return this.#r;
+	}
+	set isAutoValidationDisabled(e) {
+		this.#r = e;
+	}
+	#i;
+	get disabled() {
+		return this.#i;
+	}
+	set disabled(e) {
+		this.#i = e, this.#s.textarea.disabled = e, e ? this.#n.states?.add("disabled") : this.#n.states?.delete("disabled");
+	}
+	#o;
+	set required(e) {
+		this.#o = e, this.#s.textarea.required = e, this.#n && (this.#n.ariaRequired = e ? "true" : "false"), this.#l.checkValiditySync({ showError: !1 });
+	}
+	get required() {
+		return this.#o;
+	}
+	#n;
+	get name() {
+		return this.getAttribute("name") || "";
+	}
+	get form() {
+		return this.#n?.form ?? null;
+	}
+	set name(e) {
+		this.setAttribute("name", e);
+	}
+	formResetCallback() {
+		this.value = this.initialValue, this.#l.reset(), this.#n?.setValidity({}, "");
+	}
+	get isDirty() {
+		return this.#e !== this.initialValue;
+	}
+	constructor() {
+		super(), this.#e = "", this.#r = !1, this.#i = !1, this.#o = !1, this.initialValue = "", this.autoHeight = !1, this.#l = new e({
+			clearValidationError: this.clearValidationError.bind(this),
+			getValue: () => this.#e,
+			getValueString: () => this.value,
+			getValidations: this.#d.bind(this),
+			setValidationResult: this.#b.bind(this),
+			showValidationError: this.showValidationError.bind(this)
+		}), "function" == typeof this.attachInternals && (this.#n = this.attachInternals(), this.#n.role = "textbox"), this.#h(), this.#c();
+	}
+	#t;
+	#s;
+	#h() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		t();
+		const a = document.createElement("template");
+		a.innerHTML = "<style>.jb-textarea-web-component{width:var(--width);margin:var(--margin)}.jb-textarea-web-component label{width:100%;margin:var(--label-margin);font-size:var(--label-font-size);font-weight:var(--label-font-weight);color:var(--label-color);display:block}.jb-textarea-web-component label.--hide{display:none}.jb-textarea-web-component .textarea-box{width:100%;margin:var(--box-margin);box-sizing:border-box;border:solid var(--border-width) var(--border-color);background-color:var(--input-box-bg-color);border-bottom:solid var(--border-bottom-width) var(--border-color);border-radius:var(--border-radius);overflow:var(--box-overflow);box-shadow:var(--box-shadow);grid-template:\"slot-block-start slot-block-start slot-block-start\"\"slot-inline-start textarea slot-inline-end\"1fr\"slot-block-end slot-block-end slot-block-end\"/auto 1fr auto;transition:all .3s;display:grid}.jb-textarea-web-component .textarea-box textarea{box-sizing:border-box;width:100%;min-height:var(--min-height);height:var(--height);max-height:var(--max-height);padding:var(--input-padding);font-family:inherit;font-size:var(--value-font-size);font-weight:var(--textarea-font-weight);text-align:var(--textarea-text-align);direction:var(--textarea-direction);resize:vertical;color:var(--value-color);background-color:#0000;border:none;border-radius:0;grid-area:textarea;margin:0;display:block}.jb-textarea-web-component .textarea-box textarea::placeholder{color:var(--placeholder-color);font-size:var(--placeholder-font-size)}.jb-textarea-web-component .textarea-box .block-start-section-wrapper{grid-area:slot-block-start}.jb-textarea-web-component .textarea-box .block-end-section-wrapper{grid-area:slot-block-end}.jb-textarea-web-component .textarea-box .inline-start-section-wrapper{grid-area:slot-inline-start}.jb-textarea-web-component .textarea-box .inline-end-section-wrapper{grid-area:slot-inline-end}.jb-textarea-web-component .textarea-box .block-start-section-wrapper,.jb-textarea-web-component .textarea-box .block-end-section-wrapper{justify-content:start;align-items:center;width:100%;height:auto;display:flex}.jb-textarea-web-component .textarea-box .inline-start-section-wrapper,.jb-textarea-web-component .textarea-box .inline-end-section-wrapper{justify-content:center;align-items:center;width:auto;height:100%;display:flex}.jb-textarea-web-component .textarea-box ::slotted([slot=block-start-section]),.jb-textarea-web-component .textarea-box ::slotted([slot=block-end-section]){box-sizing:border-box;background-color:#0000;justify-content:start;align-items:center;width:auto;max-width:100%;height:auto;padding:.5rem 1rem;display:flex;overflow-x:hidden}.jb-textarea-web-component .textarea-box ::slotted([slot=inline-start-section]),.jb-textarea-web-component .textarea-box ::slotted([slot=inline-end-section]){height:100%;max-height:100%;padding:var(--inline-slots-padding);box-sizing:border-box;background-color:#0000;justify-content:center;align-items:center;width:auto;display:flex;overflow-y:hidden}.jb-textarea-web-component .message-box{display:var(--message-box-display);font-size:var(--message-font-size);padding:var(--message-padding);color:var(--message-color)}.jb-textarea-web-component .message-box:empty{padding:0} :host{--width:var(--jb-textarea-width,100%);--border-radius:var(--jb-textarea-border-radius,var(--jb-radius));--height:var(--jb-textarea-height,5rem);--min-height:var(--jb-textarea-min-height,5rem);--max-height:var(--jb-textarea-max-height,none);--border-width:var(--jb-textarea-border-width,1px);--border-bottom-width:var(--jb-textarea-border-bottom-width,3px);--border-width-focus:var(--jb-textarea-border-width-focus,var(--border-width));--border-bottom-width-focus:var(--jb-textarea-border-bottom-width-focus,var(--border-bottom-width));--inline-space:var(--jb-textarea-inline-space,min(calc(var(--border-radius) / 1.75), calc(--height / 2)));--label-margin:var(--jb-textarea-label-margin,.125rem var(--inline-space));--label-font-size:var(--jb-textarea-label-font-size,.8rem);--value-font-size:var(--jb-textarea-value-font-size,1rem);--input-padding:var(--jb-textarea-input-padding,.125rem .75rem 0 .75rem);--placeholder-font-size:var(--jb-textarea-placeholder-font-size,var(--value-font-size));--message-font-size:var(--jb-textarea-message-font-size,.7rem);--message-padding:var(--jb-textarea-message-padding,.125rem var(--inline-space));--inline-slots-padding:var(--jb-textarea-inline-slots-padding,.375rem .625rem);--base-border-color:var(--jb-textarea-border-color,var(--jb-neutral-10));--border-color:var(--jb-textarea-border-color-current,var(--base-border-color));--message-color:var(--jb-textarea-message-color,var(--jb-text-secondary));--label-color:var(--jb-textarea-label-color,var(--jb-text-primary));--value-color:var(--jb-textarea-value-color,var(--jb-text-primary));--placeholder-color:var(--jb-textarea-placeholder-color,var(--jb-neutral-6));--base-bg-color:var(--jb-textarea-bg-color,var(--jb-neutral-10));--input-box-bg-color:var(--jb-textarea-input-box-bg-color,var(--base-bg-color));--margin:var(--jb-textarea-margin,.75rem 0);--label-font-weight:var(--jb-textarea-label-font-weight,300);--box-margin:var(--jb-textarea-box-margin,0px);--box-overflow:var(--jb-textarea-box-overflow,hidden);--box-shadow:var(--jb-textarea-box-shadow,none);--box-shadow-focus:var(--jb-textarea-box-shadow-focus,none);--textarea-text-align:var(--jb-textarea-textarea-text-align,initial);--textarea-direction:var(--jb-textarea-textarea-direction,inherit);--textarea-font-weight:var(--jb-textarea-textarea-font-weight,initial);--message-box-display:var(--jb-textarea-message-box-display,block)}:host(:state(invalid)){--message-color:var(--jb-textarea-message-color-error,var(--jb-red))}:host(:state(disabled)){--input-box-bg-color:var(--jb-textarea-bg-color-disabled,hsl(from var(--base-bg-color) h 12% 66.1));--border-color:var(--jb-textarea-border-color-disabled,hsl(from var(--base-border-color) h 12% 66.1));--value-color:var(--jb-textarea-value-color-disabled,var(--jb-neutral-3));--label-color:var(--jb-textarea-label-color-disabled,var(--jb-neutral-3))}:host(:focus-within){--border-color:var(--jb-textarea-border-color-focus,var(--jb-neutral))}:host([size=xs]){--height:var(--jb-textarea-height-xs,3rem);--min-height:var(--jb-textarea-min-height-xs,3rem);--value-font-size:var(--jb-textarea-value-font-size-xs,.75rem);--label-font-size:var(--jb-textarea-label-font-size-xs,.6rem);--message-font-size:var(--jb-textarea-message-font-size-xs,.525rem);--input-padding:var(--jb-textarea-input-padding-xs,.125rem .375rem 0 .375rem);--border-radius:var(--jb-textarea-border-radius-xs,var(--jb-radius-xs));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-xs,.125rem .25rem)}:host([size=sm]){--height:var(--jb-textarea-height-sm,4rem);--min-height:var(--jb-textarea-min-height-sm,4rem);--value-font-size:var(--jb-textarea-value-font-size-sm,.875rem);--label-font-size:var(--jb-textarea-label-font-size-sm,.7rem);--message-font-size:var(--jb-textarea-message-font-size-sm,.6125rem);--input-padding:var(--jb-textarea-input-padding-sm,.125rem .5625rem 0 .5625rem);--border-radius:var(--jb-textarea-border-radius-sm,var(--jb-radius-sm));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-sm,.25rem .5rem)}:host([size=lg]){--height:var(--jb-textarea-height-lg,7rem);--min-height:var(--jb-textarea-min-height-lg,7rem);--value-font-size:var(--jb-textarea-value-font-size-lg,1.125rem);--label-font-size:var(--jb-textarea-label-font-size-lg,.9rem);--message-font-size:var(--jb-textarea-message-font-size-lg,.7875rem);--input-padding:var(--jb-textarea-input-padding-lg,.125rem .9375rem 0 .9375rem);--border-radius:var(--jb-textarea-border-radius-lg,var(--jb-radius-lg));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-lg,.5rem .75rem)}:host([size=xl]){--height:var(--jb-textarea-height-xl,9rem);--min-height:var(--jb-textarea-min-height-xl,9rem);--value-font-size:var(--jb-textarea-value-font-size-xl,1.25rem);--label-font-size:var(--jb-textarea-label-font-size-xl,1rem);--message-font-size:var(--jb-textarea-message-font-size-xl,.875rem);--input-padding:var(--jb-textarea-input-padding-xl,.125rem 1.125rem 0 1.125rem);--border-radius:var(--jb-textarea-border-radius-xl,var(--jb-radius-xl));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-xl,.75rem 1rem)}</style>\n\n  <div class=\"jb-textarea-web-component\" part=\"component\">\n    <label for=\"textarea\" class=\"--hide\" part=\"label\"><span class=\"label-value\"></span><span aria-hidden=\"true\">:</span></label>\n    <div class=\"textarea-box\" part=\"textarea-box\">\n        <div class=\"block-start-section-wrapper\" part=\"block-start-section-wrapper\">\n          <slot name=\"block-start-section\"></slot>\n        </div>\n        <div class=\"inline-start-section-wrapper\" part=\"inline-start-section-wrapper\">\n            <slot name=\"inline-start-section\"></slot>\n        </div>\n        <textarea id=\"textarea\" class=\"textarea-input\" part=\"textarea\" aria-describedby=\"message\"></textarea>\n        <div class=\"inline-end-section-wrapper\" part=\"inline-end-section-wrapper\">\n            <slot name=\"inline-end-section\"></slot>\n        </div>\n        <div class=\"block-end-section-wrapper\" part=\"block-end-section-wrapper\">\n            <slot name=\"block-end-section\"></slot>\n        </div>\n    </div>\n    <div id=\"message\" class=\"message-box\" part=\"message\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\n  ", e.appendChild(a.content.cloneNode(!0)), this.#t = e.querySelector(".textarea-box textarea"), this.#s = {
+			textarea: this.#t,
+			label: e.querySelector("label"),
+			labelValue: e.querySelector("label .label-value"),
+			messageBox: e.querySelector(".message-box")
+		}, this.#v();
+	}
+	#v() {
+		this.#s.textarea.addEventListener("change", (e) => this.#x(e)), this.#s.textarea.addEventListener("beforeinput", this.#m.bind(this)), this.#s.textarea.addEventListener("input", (e) => this.#u(e)), this.#s.textarea.addEventListener("blur", (e) => this.#g(e)), this.#s.textarea.addEventListener("keypress", this.#p.bind(this)), this.#s.textarea.addEventListener("keyup", this.#j.bind(this)), this.#s.textarea.addEventListener("keydown", this.#f.bind(this));
+	}
+	#g(e) {
+		this.#l.checkValidity({ showError: !0 });
+	}
+	#l;
+	get validation() {
+		return this.#l;
+	}
+	#c() {
+		this.value = this.getAttribute("value") || "";
+	}
+	static get observedAttributes() {
+		return [
+			"label",
+			"message",
+			"value",
+			"placeholder",
+			"required",
+			"error"
+		];
+	}
+	attributeChangedCallback(e, t, a) {
+		this.#w(e, a);
+	}
+	#w(e, t) {
+		switch (e) {
+			case "label":
+				this.#s.labelValue.innerHTML = t, this.#n && (this.#n.ariaLabel = t), null == t || null == t || "" == t ? this.#s.label.classList.add("--hide") : this.#s.label.classList.remove("--hide");
+				break;
+			case "message":
+				this.#n && (this.#n.ariaDescription = t), this.#s.messageBox.classList.contains("error") || (this.#s.messageBox.innerHTML = t);
+				break;
+			case "placeholder":
+				this.#t.setAttribute("placeholder", t), this.#n && (this.#n.ariaPlaceholder = t);
+				break;
+			case "value":
+				this.value = t;
+				break;
+			case "required":
+				this.required = "" === t || "true" === t;
+				break;
+			case "error": this.reportValidity();
+		}
+	}
+	#a() {
+		this.#t.style.height = "4px", this.#t.style.height = this.#t.scrollHeight + "px";
+	}
+	#m(e) {
+		this.#y(e);
+	}
+	#y(e) {
+		const t = i("beforeinput", e, { cancelable: !0 });
+		return this.dispatchEvent(t), t.defaultPrevented && e.preventDefault(), t.defaultPrevented;
+	}
+	#f(e) {
+		const t = s("keydown", e, { cancelable: !0 });
+		this.dispatchEvent(t) || e.preventDefault();
+	}
+	#p(e) {
+		const t = s("keypress", e, { cancelable: !0 });
+		this.dispatchEvent(t) ? "Enter" == e.key && this.#E(e) : e.preventDefault();
+	}
+	#u(e) {
+		const t = e.target.value;
+		this.#e = t, this.autoHeight && this.#a(), this.#z(e);
+	}
+	#z(e) {
+		const t = {
+			bubbles: e.bubbles,
+			cancelable: e.cancelable,
+			composed: e.composed,
+			data: e.data,
+			dataTransfer: e.dataTransfer,
+			detail: e.detail,
+			inputType: e.inputType,
+			isComposing: e.isComposing,
+			targetRanges: e.getTargetRanges(),
+			view: e.view
+		}, a = new InputEvent("input", t);
+		this.dispatchEvent(a);
+	}
+	#j(e) {
+		const t = e.target.value;
+		this.#e = t, this.#k(!1);
+		const a = s("keyup", e, { cancelable: !0 });
+		this.dispatchEvent(a), a.defaultPrevented && e.preventDefault();
+	}
+	#E(e) {
+		const t = s("enter", e, { cancelable: !0 });
+		this.dispatchEvent(t), t.defaultPrevented && e.preventDefault();
+	}
+	#x(e) {
+		const t = e.target.value;
+		this.#e = t, this.#k(!0), this.#V().defaultPrevented && e.preventDefault();
+	}
+	#V() {
+		const e = new Event("change", {
+			bubbles: !0,
+			cancelable: !0
+		});
+		return this.dispatchEvent(e), e;
+	}
+	showValidationError(e) {
+		const t = "string" == typeof e ? e : e.message;
+		this.#n?.states?.add("invalid"), this.#n && (this.#n.ariaInvalid = "true"), this.#s.textarea.setAttribute("aria-invalid", "true"), this.#s.textarea.setAttribute("aria-errormessage", "message"), this.#s.messageBox.innerHTML = t;
+	}
+	clearValidationError() {
+		const e = this.getAttribute("message") || "";
+		this.#n?.states?.delete("invalid"), this.#n && (this.#n.ariaInvalid = "false"), this.#s.textarea.setAttribute("aria-invalid", "false"), this.#s.textarea.removeAttribute("aria-errormessage"), this.#s.messageBox.innerHTML = e;
+	}
+	#d() {
+		const e = [], t = this.getAttribute("error");
+		return null !== t && t.trim().length > 0 && e.push({
+			validator: void 0,
+			message: t,
+			stateType: "customError"
+		}), this.required && e.push({
+			validator: /.{1}/g,
+			message: a(r, this.getAttribute("label")),
+			stateType: "valueMissing"
+		}), e;
+	}
+	#k(e) {
+		if (!this.isAutoValidationDisabled) return this.#n?.states.has("invalid") && (e = !0), this.#l.checkValidity({ showError: e });
+	}
+	#b(e) {
+		if (e.isAllValid) this.#n?.setValidity({}, "");
+		else {
+			const t = {};
+			let a = "";
+			e.validationList.forEach((e) => {
+				e.isValid || (e.validation.stateType && (t[e.validation.stateType] = !0), "" == a && (a = e.message ?? ""));
+			}), this.#n?.setValidity(t, a);
+		}
+	}
+	get validationMessage() {
+		return this.#n?.validationMessage ?? "";
+	}
+	checkValidity() {
+		const e = this.#l.checkValiditySync({ showError: !1 });
+		if (!e.isAllValid) {
+			const e = new CustomEvent("invalid");
+			this.dispatchEvent(e);
+		}
+		return e.isAllValid;
+	}
+	reportValidity() {
+		const e = this.#l.checkValiditySync({ showError: !0 });
+		if (!e.isAllValid) {
+			const e = new CustomEvent("invalid");
+			this.dispatchEvent(e);
+		}
+		return e.isAllValid;
+	}
+};
+customElements.get("jb-textarea") || window.customElements.define("jb-textarea", n);
+export { n as JBTextareaWebComponent };
+
+//# sourceMappingURL=jb-textarea.js.map

package/web-component/dist/jb-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jb-textarea.js","names":["#value","#textareaElement","#changeHeightToContentSize","#isAutoValidationDisabled","#disabled","#elements","#internals","#required","#validation","#getInsideValidation","#setValidationResult","#initWebComponent","#initProp","CSS","VariablesCSS","#registerEventListener","#onInputChange","#onInputBeforeInput","#onInputInput","#onInputBlur","#onInputKeyPress","#onInputKeyup","#onInputKeyDown","#onAttributeChange","#dispatchBeforeInputEvent","#onInputEnter","#triggerInputEvent","#checkValidity","#dispatchChangeEvent"],"sources":["../lib/jb-textarea.css","../lib/variables.css","../lib/render.ts","../lib/jb-textarea.ts"],"sourcesContent":[".jb-textarea-web-component {\r\n    width: var(--width);\r\n    margin: var(--margin);\r\n\r\n    label {\r\n        width: 100%;\r\n        margin: var(--label-margin);\r\n        display: block;\r\n        font-size: var(--label-font-size);\r\n        font-weight: var(--label-font-weight);\r\n        color: var(--label-color);\r\n\r\n        &.--hide {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    .textarea-box {\r\n        width: 100%;\r\n        margin: var(--box-margin);\r\n        box-sizing: border-box;\r\n        border: solid var(--border-width) var(--border-color);\r\n        background-color: var(--input-box-bg-color);\r\n        border-bottom: solid var(--border-bottom-width) var(--border-color);\r\n        border-radius: var(--border-radius);\r\n        overflow: var(--box-overflow);\r\n        box-shadow: var(--box-shadow);\r\n        display: grid;\r\n        grid-template-columns: auto 1fr auto;\r\n        grid-template-rows: auto 1fr auto;\r\n        grid-template-areas: \"slot-block-start slot-block-start slot-block-start\" \"slot-inline-start textarea slot-inline-end\" \"slot-block-end slot-block-end slot-block-end\";\r\n        transition: ease 0.3s all;\r\n        textarea {\r\n            grid-area: textarea;\r\n            border: none;\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n            min-height: var(--min-height);\r\n            height: var(--height);\r\n            max-height: var(--max-height);\r\n            background-color: transparent;\r\n            padding: var(--input-padding);\r\n            display: block;\r\n            font-family: inherit;\r\n            font-size: var(--value-font-size);\r\n            font-weight: var(--textarea-font-weight);\r\n            text-align: var(--textarea-text-align);\r\n            direction: var(--textarea-direction);\r\n            margin: 0;\r\n            border-radius: 0;\r\n            resize: vertical;\r\n            color: var(--value-color);\r\n\r\n            &::placeholder {\r\n                color: var(--placeholder-color);\r\n                font-size: var(--placeholder-font-size);\r\n            }\r\n        }\r\n        .block-start-section-wrapper{grid-area: slot-block-start;}\r\n        .block-end-section-wrapper{grid-area: slot-block-end;}\r\n        .inline-start-section-wrapper{grid-area: slot-inline-start;}\r\n        .inline-end-section-wrapper{grid-area: slot-inline-end;}\r\n        .block-start-section-wrapper, .block-end-section-wrapper{\r\n            display: flex;\r\n            height: auto;\r\n            width: 100%;\r\n            align-items: center;\r\n            justify-content: start;\r\n        }\r\n        .inline-start-section-wrapper, .inline-end-section-wrapper {\r\n            display: flex;\r\n            height: 100%;\r\n            width: auto;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        ::slotted([slot=\"block-start-section\"]),\r\n        ::slotted([slot=\"block-end-section\"]) {\r\n            height: auto;\r\n            display: flex;\r\n            justify-content: start;\r\n            align-items: center;\r\n            width: 100%;\r\n            max-width: 100%;\r\n            overflow-x: hidden;\r\n            background-color: transparent;\r\n            padding: 0.5rem 1rem;\r\n            width: auto;\r\n            box-sizing: border-box;\r\n        }\r\n        ::slotted([slot=\"inline-start-section\"]),\r\n        ::slotted([slot=\"inline-end-section\"]) {\r\n            height: 100%;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            max-height: 100%;\r\n            overflow-y: hidden;\r\n            background-color: transparent;\r\n            padding: var(--inline-slots-padding);\r\n            width: auto;\r\n            box-sizing: border-box;\r\n        }\r\n    }\r\n\r\n    .message-box {\r\n        display: var(--message-box-display);\r\n        font-size: var(--message-font-size);\r\n        padding: var(--message-padding);\r\n        color: var(--message-color);\r\n\r\n        &:empty {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n}",":host{\n  /* Size */\n  --width: var(--jb-textarea-width, 100%);\n  --border-radius:var(--jb-textarea-border-radius , var(--jb-radius));\n  --height:var(--jb-textarea-height, 5rem);\n  --min-height:var(--jb-textarea-min-height, 5rem);\n  --max-height:var(--jb-textarea-max-height, none);\n  --border-width:var(--jb-textarea-border-width, 1px);\n  --border-bottom-width:var(--jb-textarea-border-bottom-width, 3px);\n  --border-width-focus: var(--jb-textarea-border-width-focus, var(--border-width));\n  --border-bottom-width-focus: var(--jb-textarea-border-bottom-width-focus, var(--border-bottom-width));\n  /* put message and label forward base on border radius*/\n  --inline-space: var(--jb-textarea-inline-space, min(calc(var(--border-radius) / 1.75), calc(--height / 2)));\n  --label-margin: var(--jb-textarea-label-margin, 0.125rem var(--inline-space));\n  --label-font-size:var(--jb-textarea-label-font-size, 0.8rem);\n  --value-font-size:var(--jb-textarea-value-font-size, 1rem);\n  --input-padding:var(--jb-textarea-input-padding, 0.125rem 0.75rem 0 0.75rem);\n  --placeholder-font-size:var(--jb-textarea-placeholder-font-size, var(--value-font-size));\n  --message-font-size:var(--jb-textarea-message-font-size, 0.7rem);\n  --message-padding: var(--jb-textarea-message-padding, 0.125rem var(--inline-space));\n  --inline-slots-padding: var(--jb-textarea-inline-slots-padding, 0.375rem 0.625rem);\n  /* Theme/Color */\n  --base-border-color:var(--jb-textarea-border-color, var(--jb-neutral-10));\n  --border-color: var(--jb-textarea-border-color-current, var(--base-border-color));\n  --message-color:var(--jb-textarea-message-color, var(--jb-text-secondary));\n  --label-color: var(--jb-textarea-label-color, var(--jb-text-primary));\n  --value-color: var(--jb-textarea-value-color,  var(--jb-text-primary));\n  --placeholder-color:  var(--jb-textarea-placeholder-color, var(--jb-neutral-6));\n  --base-bg-color:var(--jb-textarea-bg-color, var(--jb-neutral-10));\n  --input-box-bg-color: var(--jb-textarea-input-box-bg-color, var(--base-bg-color));\n  /* Other */\n  --margin: var(--jb-textarea-margin, 0.75rem 0);\n  --label-font-weight: var(--jb-textarea-label-font-weight, 300);\n  --box-margin: var(--jb-textarea-box-margin, 0px);\n  --box-overflow: var(--jb-textarea-box-overflow, hidden);\n  --box-shadow: var(--jb-textarea-box-shadow, none);\n  --box-shadow-focus: var(--jb-textarea-box-shadow-focus, none);\n  --textarea-text-align: var(--jb-textarea-textarea-text-align, initial);\n  --textarea-direction: var(--jb-textarea-textarea-direction, inherit);\n  --textarea-font-weight: var(--jb-textarea-textarea-font-weight, initial);\n  --message-box-display: var(--jb-textarea-message-box-display, block);\n}\n:host(:state(invalid)){\n  --message-color:var(--jb-textarea-message-color-error, var(--jb-red));\n}\n:host(:state(disabled)){\n  --input-box-bg-color: var(--jb-textarea-bg-color-disabled, hsl(from var(--base-bg-color) h 12% 66.1));\n  --border-color: var(--jb-textarea-border-color-disabled, hsl(from var(--base-border-color) h 12% 66.1));\n  --value-color:var(--jb-textarea-value-color-disabled, var(--jb-neutral-3));\n  --label-color:var(--jb-textarea-label-color-disabled, var(--jb-neutral-3));\n}\n:host(:focus-within){\n  --border-color:var(--jb-textarea-border-color-focus, var(--jb-neutral));\n}\n\n/* Size */\n:host([size=\"xs\"]) {\n  --height: var(--jb-textarea-height-xs, 3rem);\n  --min-height: var(--jb-textarea-min-height-xs, 3rem);\n  --value-font-size: var(--jb-textarea-value-font-size-xs, 0.75rem);\n  --label-font-size: var(--jb-textarea-label-font-size-xs, 0.6rem);\n  --message-font-size: var(--jb-textarea-message-font-size-xs, 0.525rem);\n  --input-padding: var(--jb-textarea-input-padding-xs, 0.125rem 0.375rem 0 0.375rem);\n  --border-radius: var(--jb-textarea-border-radius-xs, var(--jb-radius-xs));\n  --inline-slots-padding: var(--jb-textarea-inline-slots-padding-xs, 0.125rem 0.25rem);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jb-textarea-height-sm, 4rem);\n  --min-height: var(--jb-textarea-min-height-sm, 4rem);\n  --value-font-size: var(--jb-textarea-value-font-size-sm, 0.875rem);\n  --label-font-size: var(--jb-textarea-label-font-size-sm, 0.7rem);\n  --message-font-size: var(--jb-textarea-message-font-size-sm, 0.6125rem);\n  --input-padding: var(--jb-textarea-input-padding-sm, 0.125rem 0.5625rem 0 0.5625rem);\n  --border-radius: var(--jb-textarea-border-radius-sm, var(--jb-radius-sm));\n  --inline-slots-padding: var(--jb-textarea-inline-slots-padding-sm, 0.25rem 0.5rem);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jb-textarea-height-lg, 7rem);\n  --min-height: var(--jb-textarea-min-height-lg, 7rem);\n  --value-font-size: var(--jb-textarea-value-font-size-lg, 1.125rem);\n  --label-font-size: var(--jb-textarea-label-font-size-lg, 0.9rem);\n  --message-font-size: var(--jb-textarea-message-font-size-lg, 0.7875rem);\n  --input-padding: var(--jb-textarea-input-padding-lg, 0.125rem 0.9375rem 0 0.9375rem);\n  --border-radius: var(--jb-textarea-border-radius-lg, var(--jb-radius-lg));\n  --inline-slots-padding: var(--jb-textarea-inline-slots-padding-lg, 0.5rem 0.75rem);\n}\n\n:host([size=\"xl\"]) {\n  --height: var(--jb-textarea-height-xl, 9rem);\n  --min-height: var(--jb-textarea-min-height-xl, 9rem);\n  --value-font-size: var(--jb-textarea-value-font-size-xl, 1.25rem);\n  --label-font-size: var(--jb-textarea-label-font-size-xl, 1rem);\n  --message-font-size: var(--jb-textarea-message-font-size-xl, 0.875rem);\n  --input-padding: var(--jb-textarea-input-padding-xl, 0.125rem 1.125rem 0 1.125rem);\n  --border-radius: var(--jb-textarea-border-radius-xl, var(--jb-radius-xl));\n  --inline-slots-padding: var(--jb-textarea-inline-slots-padding-xl, 0.75rem 1rem);\n}\n","export function renderHTML(): string {\r\n  return /* html */ `\r\n  <div class=\"jb-textarea-web-component\" part=\"component\">\n    <label for=\"textarea\" class=\"--hide\" part=\"label\"><span class=\"label-value\"></span><span aria-hidden=\"true\">:</span></label>\n    <div class=\"textarea-box\" part=\"textarea-box\">\r\n        <div class=\"block-start-section-wrapper\" part=\"block-start-section-wrapper\">\r\n          <slot name=\"block-start-section\"></slot>\r\n        </div>\r\n        <div class=\"inline-start-section-wrapper\" part=\"inline-start-section-wrapper\">\r\n            <slot name=\"inline-start-section\"></slot>\r\n        </div>\r\n        <textarea id=\"textarea\" class=\"textarea-input\" part=\"textarea\" aria-describedby=\"message\"></textarea>\n        <div class=\"inline-end-section-wrapper\" part=\"inline-end-section-wrapper\">\r\n            <slot name=\"inline-end-section\"></slot>\r\n        </div>\r\n        <div class=\"block-end-section-wrapper\" part=\"block-end-section-wrapper\">\r\n            <slot name=\"block-end-section\"></slot>\r\n        </div>\r\n    </div>\r\n    <div id=\"message\" class=\"message-box\" part=\"message\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\r\n  `;\r\n}\n","import CSS from './jb-textarea.css';\r\nimport VariablesCSS from './variables.css';\r\nimport { ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from 'jb-validation';\r\nimport type { JBFormInputStandards } from 'jb-form';\r\nimport type { JBTextareaElements, ValidationValue } from './types';\r\nimport { registerDefaultVariables } from 'jb-core/theme';\r\nimport { getRequiredMessage, i18n } from 'jb-core/i18n';\r\nimport { createInputEvent, createKeyboardEvent } from 'jb-core';\r\nimport { renderHTML } from './render';\r\n//export all internal type for user easier access\r\nexport * from './types.js';\r\n\r\n\r\nexport class JBTextareaWebComponent extends HTMLElement implements WithValidation, JBFormInputStandards<string> {\r\n  static get formAssociated() {\r\n    return true;\r\n  }\r\n  #value = '';\r\n  get value() {\r\n    return this.#value;\r\n  }\r\n  set value(value) {\r\n    this.#value = value;\r\n    this.#textareaElement.value = value;\r\n    if (this.autoHeight) {\r\n      this.#changeHeightToContentSize();\r\n    }\r\n  }\r\n  #isAutoValidationDisabled = false;\r\n  get isAutoValidationDisabled(): boolean {\r\n    return this.#isAutoValidationDisabled;\r\n  }\r\n  set isAutoValidationDisabled(value: boolean) {\r\n    this.#isAutoValidationDisabled = value;\r\n  }\r\n  #disabled = false;\r\n  get disabled() {\r\n    return this.#disabled;\r\n  }\r\n  set disabled(value: boolean) {\r\n    this.#disabled = value;\r\n    this.#elements.textarea.disabled = value;\r\n    if (value) {\r\n      //TODO: remove as any when typescript support\r\n      (this.#internals as any).states?.add(\"disabled\");\r\n    } else {\r\n      (this.#internals as any).states?.delete(\"disabled\");\r\n    }\r\n  }\r\n  #required = false;\r\n  set required(value: boolean) {\n    this.#required = value;\n    this.#elements.textarea.required = value;\n    if (this.#internals) this.#internals.ariaRequired = value ? \"true\" : \"false\";\n    this.#validation.checkValiditySync({ showError: false });\n  }\r\n  get required() {\r\n    return this.#required;\r\n  }\r\n  #internals?: ElementInternals;\r\n\r\n  get name() {\r\n    return this.getAttribute('name') || '';\r\n  }\r\n  get form() {\r\n    return this.#internals?.form ?? null;\r\n  }\r\n  set name(value: string) {\r\n    this.setAttribute('name', value);\r\n  }\r\n  initialValue = \"\";\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.#validation.reset();\n    this.#internals?.setValidity({}, '');\n  }\n  get isDirty(): boolean {\n    return this.#value !== this.initialValue;\r\n  }\r\n  constructor() {\r\n    super();\r\n    if (typeof this.attachInternals == \"function\") {\r\n      //some browser dont support attachInternals\r\n      this.#internals = this.attachInternals();\r\n      this.#internals.role = \"textbox\"\r\n    }\r\n    this.#initWebComponent();\r\n    this.#initProp();\r\n  }\r\n  #textareaElement!: HTMLTextAreaElement;\r\n  #elements!: JBTextareaElements;\r\n  #initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: 'open',\r\n      delegatesFocus: true,\r\n      clonable: true,\r\n      serializable: true\r\n    });\r\n    registerDefaultVariables();\r\n    const html = `<style>${CSS} ${VariablesCSS}</style>` + '\\n' + renderHTML();\r\n    const element = document.createElement('template');\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.#textareaElement = shadowRoot.querySelector('.textarea-box textarea')!;\r\n    this.#elements = {\r\n      textarea: this.#textareaElement,\r\n      label: shadowRoot.querySelector('label')!,\r\n      labelValue: shadowRoot.querySelector('label .label-value')!,\r\n      messageBox: shadowRoot.querySelector('.message-box')!\r\n    }\r\n    this.#registerEventListener();\r\n  }\r\n\r\n  #registerEventListener() {\r\n    this.#elements.textarea.addEventListener('change', (e) => this.#onInputChange(e));\r\n    this.#elements.textarea.addEventListener('beforeinput', this.#onInputBeforeInput.bind(this));\r\n    this.#elements.textarea.addEventListener('input', (e) => this.#onInputInput((e as unknown as InputEvent)));\r\n    this.#elements.textarea.addEventListener('blur', (e) => this.#onInputBlur((e as unknown as FocusEvent)));\r\n    this.#elements.textarea.addEventListener('keypress', this.#onInputKeyPress.bind(this));\r\n    this.#elements.textarea.addEventListener('keyup', this.#onInputKeyup.bind(this));\r\n    this.#elements.textarea.addEventListener('keydown', this.#onInputKeyDown.bind(this));\r\n  }\r\n\r\n  #onInputBlur(e: FocusEvent) {\r\n    this.#validation.checkValidity({ showError: true })\r\n  }\r\n\r\n  autoHeight = false;\r\n  #validation = new ValidationHelper<ValidationValue>({\r\n    clearValidationError: this.clearValidationError.bind(this),\r\n    getValue: () => this.#value,\r\n    getValueString: () => this.value,\r\n    getValidations: this.#getInsideValidation.bind(this),\r\n    setValidationResult: this.#setValidationResult.bind(this),\r\n    showValidationError: this.showValidationError.bind(this)\r\n  });\r\n\r\n  get validation() {\r\n    return this.#validation;\r\n  }\r\n\r\n  #initProp() {\r\n    this.value = this.getAttribute('value') || '';\r\n\r\n  }\r\n\r\n  static get observedAttributes() {\r\n    return ['label', 'message', 'value', 'placeholder', \"required\", \"error\"];\r\n  }\r\n\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.#onAttributeChange(name, newValue);\r\n  }\r\n\r\n  #onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case 'label':\r\n        this.#elements.labelValue.innerHTML = value;\r\n        if (this.#internals) {\r\n          this.#internals.ariaLabel = value;\r\n        }\r\n        if (value == null || value == undefined || value == \"\") {\r\n          this.#elements.label.classList.add('--hide');\r\n        } else {\r\n          this.#elements.label.classList.remove('--hide');\r\n        }\r\n        break;\r\n      case 'message':\r\n        if (this.#internals) {\r\n          this.#internals.ariaDescription = value;\r\n        }\r\n        if (!this.#elements.messageBox.classList.contains(\"error\")) {\r\n          this.#elements.messageBox.innerHTML = value;\r\n        }\r\n        break;\r\n      case 'placeholder':\r\n        this.#textareaElement.setAttribute('placeholder', value);\r\n        if (this.#internals) {\r\n          this.#internals.ariaPlaceholder = value;\r\n        }\r\n        break;\r\n      case 'value':\r\n        this.value = value;\r\n        break;\r\n      case 'required':\r\n        this.required = value === '' || value === 'true';\r\n        break;\r\n      case \"error\":\r\n        this.reportValidity();\r\n    }\r\n\r\n  }\r\n\r\n  #changeHeightToContentSize() {\r\n    this.#textareaElement.style.height = \"4px\";\r\n    this.#textareaElement.style.height = (this.#textareaElement.scrollHeight) + \"px\";\r\n  }\r\n\r\n  #onInputBeforeInput(e: InputEvent) {\r\n    this.#dispatchBeforeInputEvent(e);\r\n  }\r\n\r\n  #dispatchBeforeInputEvent(e: InputEvent): boolean {\r\n    const event = createInputEvent('beforeinput', e, { cancelable: true });\r\n    this.dispatchEvent(event);\r\n    if (event.defaultPrevented) {\r\n      e.preventDefault();\r\n    }\r\n    return event.defaultPrevented;\r\n  }\r\n\r\n  #onInputKeyDown(e: KeyboardEvent) {\r\n    const event = createKeyboardEvent(\"keydown\", e, { cancelable: true });\r\n    const isEventNotPrevented = this.dispatchEvent(event);\r\n    if (!isEventNotPrevented) {\r\n      //if event prevented by e.preventDefault();\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  #onInputKeyPress(e: KeyboardEvent) {\r\n    const event = createKeyboardEvent('keypress', e, { cancelable: true });\r\n    const isEventNotPrevented = this.dispatchEvent(event);\r\n    if (!isEventNotPrevented) {\r\n      //if event prevented by e.preventDefault();\r\n      e.preventDefault();\r\n    } else {\r\n      if (e.key == \"Enter\") {\r\n        this.#onInputEnter(e);\r\n      }\r\n    }\r\n  }\r\n  #onInputInput(e: InputEvent) {\r\n    const inputText = (e.target as HTMLTextAreaElement).value;\r\n    //here is the rare  time we update #value directly because we want trigger event that may read value directly from dom\r\n    this.#value = inputText;\r\n    if (this.autoHeight) {\r\n      this.#changeHeightToContentSize();\r\n    }\r\n    this.#triggerInputEvent(e);\r\n  }\r\n  #triggerInputEvent(e: InputEvent) {\r\n    const inputInitObject: InputEventInit = {\r\n      bubbles: e.bubbles,\r\n      cancelable: e.cancelable,\r\n      composed: e.composed,\r\n      data: e.data,\r\n      dataTransfer: e.dataTransfer,\r\n      detail: e.detail,\r\n      inputType: e.inputType,\r\n      isComposing: e.isComposing,\r\n      targetRanges: e.getTargetRanges(),\r\n      view: e.view\r\n    };\r\n    const event = new InputEvent(\"input\", inputInitObject);\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputKeyup(e: KeyboardEvent) {\r\n\r\n    const inputText = (e.target as HTMLTextAreaElement).value;\r\n    //here is the rare  time we update #value directly because we want trigger event that may read value directly from dom\r\n    this.#value = inputText;\r\n    this.#checkValidity(false);\r\n    const event = createKeyboardEvent('keyup', e, { cancelable: true });\r\n\r\n    this.dispatchEvent(event);\r\n    if (event.defaultPrevented) {\r\n      //if event prevented by e.preventDefault();\r\n      e.preventDefault();\r\n    }\r\n\r\n  }\r\n  #onInputEnter(e: KeyboardEvent): void {\r\n    const event = createKeyboardEvent(\"enter\", e, { cancelable: true });\r\n    this.dispatchEvent(event);\r\n    if (event.defaultPrevented) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n  #onInputChange(e: Event) {\r\n    const inputText = (e.target as HTMLTextAreaElement).value;\r\n    //here is the rare  time we update #value directly because we want trigger event that may read value directly from dom\r\n    this.#value = inputText;\r\n    this.#checkValidity(true);\r\n    const dispatchedEvent = this.#dispatchChangeEvent();\r\n    if (dispatchedEvent.defaultPrevented) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n  #dispatchChangeEvent() {\r\n    const event = new Event('change', { bubbles: true, cancelable: true });\r\n    this.dispatchEvent(event);\r\n    return event;\r\n  }\r\n  showValidationError(error: ShowValidationErrorParameters | string) {\n    const message = typeof error == \"string\" ? error : error.message;\n    this.#internals?.states?.add(\"invalid\");\n    if (this.#internals) this.#internals.ariaInvalid = \"true\";\n    this.#elements.textarea.setAttribute(\"aria-invalid\", \"true\");\n    this.#elements.textarea.setAttribute(\"aria-errormessage\", \"message\");\n    this.#elements.messageBox.innerHTML = message;\n  }\r\n  clearValidationError() {\n    const text = this.getAttribute('message') || '';\r\n    this.#internals?.states?.delete(\"invalid\");\n    if (this.#internals) this.#internals.ariaInvalid = \"false\";\n    this.#elements.textarea.setAttribute(\"aria-invalid\", \"false\");\n    this.#elements.textarea.removeAttribute(\"aria-errormessage\");\n    this.#elements.messageBox.innerHTML = text;\n  }\r\n  #getInsideValidation(): ValidationItem<ValidationValue>[] {\r\n    const validationList: ValidationItem<ValidationValue>[] = [];\r\n    const error = this.getAttribute(\"error\");\r\n    if (error !== null && error.trim().length > 0) {\r\n      validationList.push({\r\n        validator: undefined,\r\n        message: error,\r\n        stateType: \"customError\"\r\n      });\r\n    }\r\n    if (this.required) {\r\n      validationList.push({\r\n        validator: /.{1}/g,\r\n        message: getRequiredMessage(i18n, this.getAttribute(\"label\")),\r\n        stateType: \"valueMissing\"\r\n      });\r\n    }\r\n    return validationList;\r\n  }\r\n  #checkValidity(showError: boolean) {\r\n    if (!this.isAutoValidationDisabled) {\r\n      if (this.#internals?.states.has(\"invalid\")) {\r\n        // if we currently showing error to user it make sure error get updated (when failed validation changed of function return different string as an error) \r\n        showError = true;\r\n      }\r\n      return this.#validation.checkValidity({ showError });\r\n    }\r\n  }\r\n  /**\r\n * @description this method called on every checkValidity calls and update validation result of #internal\r\n */\r\n  #setValidationResult(result: ValidationResult<ValidationValue>) {\r\n    if (result.isAllValid) {\r\n      this.#internals?.setValidity({}, '');\r\n    } else {\r\n      const states: ValidityStateFlags = {};\r\n      let message = \"\";\r\n      result.validationList.forEach((res) => {\r\n        if (!res.isValid) {\r\n          if (res.validation.stateType) { states[res.validation.stateType] = true; }\r\n          if (message == '') { message = res.message ?? \"\"; }\r\n        }\r\n      });\r\n      this.#internals?.setValidity(states, message);\r\n    }\r\n  }\r\n  get validationMessage() {\r\n    return this.#internals?.validationMessage ?? \"\";\r\n  }\r\n  /**\r\n * @public\r\n * @description this method used to check for validity but doesn't show error to user and just return the result\r\n * this method used by #internal of component\r\n */\r\n  checkValidity(): boolean {\r\n    const validationResult = this.#validation.checkValiditySync({ showError: false });\r\n    if (!validationResult.isAllValid) {\r\n      const event = new CustomEvent('invalid');\r\n      this.dispatchEvent(event);\r\n    }\r\n    return validationResult.isAllValid;\r\n  }\r\n  /**\r\n  * @public\r\n * @description this method used to check for validity and show error to user\r\n */\r\n  reportValidity(): boolean {\r\n    const validationResult = this.#validation.checkValiditySync({ showError: true });\r\n    if (!validationResult.isAllValid) {\r\n      const event = new CustomEvent('invalid');\r\n      this.dispatchEvent(event);\r\n    }\r\n    return validationResult.isAllValid;\r\n  }\r\n}\r\n\r\nconst myElementNotExists = !customElements.get('jb-textarea');\r\nif (myElementNotExists) {\r\n  //prevent duplicate registering\r\n  window.customElements.define('jb-textarea', JBTextareaWebComponent);\r\n}\r\n"],"mappings":"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"}

package/web-component/dist/jb-textarea.umd.js

@@ -0,0 +1,247 @@
+(function(e, t) {
+	"object" == typeof exports && "undefined" != typeof module ? t(exports, require("jb-validation"), require("jb-core/theme"), require("jb-core/i18n"), require("jb-core")) : "function" == typeof define && define.amd ? define([
+		"exports",
+		"jb-validation",
+		"jb-core/theme",
+		"jb-core/i18n",
+		"jb-core"
+	], t) : t((e = "undefined" != typeof globalThis ? globalThis : e || self).JBTextarea = {}, e.JBValidation, e.JBCoreTheme, e.JBCoreI18N, e.JBCore);
+})(this, function(e, t, a, r, i) {
+	Object.defineProperty(e, Symbol.toStringTag, { value: "Module" });
+	var n = class extends HTMLElement {
+		static get formAssociated() {
+			return !0;
+		}
+		#e;
+		get value() {
+			return this.#e;
+		}
+		set value(e) {
+			this.#e = e, this.#t.value = e, this.autoHeight && this.#a();
+		}
+		#r;
+		get isAutoValidationDisabled() {
+			return this.#r;
+		}
+		set isAutoValidationDisabled(e) {
+			this.#r = e;
+		}
+		#i;
+		get disabled() {
+			return this.#i;
+		}
+		set disabled(e) {
+			this.#i = e, this.#n.textarea.disabled = e, e ? this.#s.states?.add("disabled") : this.#s.states?.delete("disabled");
+		}
+		#o;
+		set required(e) {
+			this.#o = e, this.#n.textarea.required = e, this.#s && (this.#s.ariaRequired = e ? "true" : "false"), this.#l.checkValiditySync({ showError: !1 });
+		}
+		get required() {
+			return this.#o;
+		}
+		#s;
+		get name() {
+			return this.getAttribute("name") || "";
+		}
+		get form() {
+			return this.#s?.form ?? null;
+		}
+		set name(e) {
+			this.setAttribute("name", e);
+		}
+		formResetCallback() {
+			this.value = this.initialValue, this.#l.reset(), this.#s?.setValidity({}, "");
+		}
+		get isDirty() {
+			return this.#e !== this.initialValue;
+		}
+		constructor() {
+			super(), this.#e = "", this.#r = !1, this.#i = !1, this.#o = !1, this.initialValue = "", this.autoHeight = !1, this.#l = new t.ValidationHelper({
+				clearValidationError: this.clearValidationError.bind(this),
+				getValue: () => this.#e,
+				getValueString: () => this.value,
+				getValidations: this.#d.bind(this),
+				setValidationResult: this.#b.bind(this),
+				showValidationError: this.showValidationError.bind(this)
+			}), "function" == typeof this.attachInternals && (this.#s = this.attachInternals(), this.#s.role = "textbox"), this.#h(), this.#c();
+		}
+		#t;
+		#n;
+		#h() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			(0, a.registerDefaultVariables)();
+			const t = document.createElement("template");
+			t.innerHTML = "<style>.jb-textarea-web-component{width:var(--width);margin:var(--margin)}.jb-textarea-web-component label{width:100%;margin:var(--label-margin);font-size:var(--label-font-size);font-weight:var(--label-font-weight);color:var(--label-color);display:block}.jb-textarea-web-component label.--hide{display:none}.jb-textarea-web-component .textarea-box{width:100%;margin:var(--box-margin);box-sizing:border-box;border:solid var(--border-width) var(--border-color);background-color:var(--input-box-bg-color);border-bottom:solid var(--border-bottom-width) var(--border-color);border-radius:var(--border-radius);overflow:var(--box-overflow);box-shadow:var(--box-shadow);grid-template:\"slot-block-start slot-block-start slot-block-start\"\"slot-inline-start textarea slot-inline-end\"1fr\"slot-block-end slot-block-end slot-block-end\"/auto 1fr auto;transition:all .3s;display:grid}.jb-textarea-web-component .textarea-box textarea{box-sizing:border-box;width:100%;min-height:var(--min-height);height:var(--height);max-height:var(--max-height);padding:var(--input-padding);font-family:inherit;font-size:var(--value-font-size);font-weight:var(--textarea-font-weight);text-align:var(--textarea-text-align);direction:var(--textarea-direction);resize:vertical;color:var(--value-color);background-color:#0000;border:none;border-radius:0;grid-area:textarea;margin:0;display:block}.jb-textarea-web-component .textarea-box textarea::placeholder{color:var(--placeholder-color);font-size:var(--placeholder-font-size)}.jb-textarea-web-component .textarea-box .block-start-section-wrapper{grid-area:slot-block-start}.jb-textarea-web-component .textarea-box .block-end-section-wrapper{grid-area:slot-block-end}.jb-textarea-web-component .textarea-box .inline-start-section-wrapper{grid-area:slot-inline-start}.jb-textarea-web-component .textarea-box .inline-end-section-wrapper{grid-area:slot-inline-end}.jb-textarea-web-component .textarea-box .block-start-section-wrapper,.jb-textarea-web-component .textarea-box .block-end-section-wrapper{justify-content:start;align-items:center;width:100%;height:auto;display:flex}.jb-textarea-web-component .textarea-box .inline-start-section-wrapper,.jb-textarea-web-component .textarea-box .inline-end-section-wrapper{justify-content:center;align-items:center;width:auto;height:100%;display:flex}.jb-textarea-web-component .textarea-box ::slotted([slot=block-start-section]),.jb-textarea-web-component .textarea-box ::slotted([slot=block-end-section]){box-sizing:border-box;background-color:#0000;justify-content:start;align-items:center;width:auto;max-width:100%;height:auto;padding:.5rem 1rem;display:flex;overflow-x:hidden}.jb-textarea-web-component .textarea-box ::slotted([slot=inline-start-section]),.jb-textarea-web-component .textarea-box ::slotted([slot=inline-end-section]){height:100%;max-height:100%;padding:var(--inline-slots-padding);box-sizing:border-box;background-color:#0000;justify-content:center;align-items:center;width:auto;display:flex;overflow-y:hidden}.jb-textarea-web-component .message-box{display:var(--message-box-display);font-size:var(--message-font-size);padding:var(--message-padding);color:var(--message-color)}.jb-textarea-web-component .message-box:empty{padding:0} :host{--width:var(--jb-textarea-width,100%);--border-radius:var(--jb-textarea-border-radius,var(--jb-radius));--height:var(--jb-textarea-height,5rem);--min-height:var(--jb-textarea-min-height,5rem);--max-height:var(--jb-textarea-max-height,none);--border-width:var(--jb-textarea-border-width,1px);--border-bottom-width:var(--jb-textarea-border-bottom-width,3px);--border-width-focus:var(--jb-textarea-border-width-focus,var(--border-width));--border-bottom-width-focus:var(--jb-textarea-border-bottom-width-focus,var(--border-bottom-width));--inline-space:var(--jb-textarea-inline-space,min(calc(var(--border-radius) / 1.75), calc(--height / 2)));--label-margin:var(--jb-textarea-label-margin,.125rem var(--inline-space));--label-font-size:var(--jb-textarea-label-font-size,.8rem);--value-font-size:var(--jb-textarea-value-font-size,1rem);--input-padding:var(--jb-textarea-input-padding,.125rem .75rem 0 .75rem);--placeholder-font-size:var(--jb-textarea-placeholder-font-size,var(--value-font-size));--message-font-size:var(--jb-textarea-message-font-size,.7rem);--message-padding:var(--jb-textarea-message-padding,.125rem var(--inline-space));--inline-slots-padding:var(--jb-textarea-inline-slots-padding,.375rem .625rem);--base-border-color:var(--jb-textarea-border-color,var(--jb-neutral-10));--border-color:var(--jb-textarea-border-color-current,var(--base-border-color));--message-color:var(--jb-textarea-message-color,var(--jb-text-secondary));--label-color:var(--jb-textarea-label-color,var(--jb-text-primary));--value-color:var(--jb-textarea-value-color,var(--jb-text-primary));--placeholder-color:var(--jb-textarea-placeholder-color,var(--jb-neutral-6));--base-bg-color:var(--jb-textarea-bg-color,var(--jb-neutral-10));--input-box-bg-color:var(--jb-textarea-input-box-bg-color,var(--base-bg-color));--margin:var(--jb-textarea-margin,.75rem 0);--label-font-weight:var(--jb-textarea-label-font-weight,300);--box-margin:var(--jb-textarea-box-margin,0px);--box-overflow:var(--jb-textarea-box-overflow,hidden);--box-shadow:var(--jb-textarea-box-shadow,none);--box-shadow-focus:var(--jb-textarea-box-shadow-focus,none);--textarea-text-align:var(--jb-textarea-textarea-text-align,initial);--textarea-direction:var(--jb-textarea-textarea-direction,inherit);--textarea-font-weight:var(--jb-textarea-textarea-font-weight,initial);--message-box-display:var(--jb-textarea-message-box-display,block)}:host(:state(invalid)){--message-color:var(--jb-textarea-message-color-error,var(--jb-red))}:host(:state(disabled)){--input-box-bg-color:var(--jb-textarea-bg-color-disabled,hsl(from var(--base-bg-color) h 12% 66.1));--border-color:var(--jb-textarea-border-color-disabled,hsl(from var(--base-border-color) h 12% 66.1));--value-color:var(--jb-textarea-value-color-disabled,var(--jb-neutral-3));--label-color:var(--jb-textarea-label-color-disabled,var(--jb-neutral-3))}:host(:focus-within){--border-color:var(--jb-textarea-border-color-focus,var(--jb-neutral))}:host([size=xs]){--height:var(--jb-textarea-height-xs,3rem);--min-height:var(--jb-textarea-min-height-xs,3rem);--value-font-size:var(--jb-textarea-value-font-size-xs,.75rem);--label-font-size:var(--jb-textarea-label-font-size-xs,.6rem);--message-font-size:var(--jb-textarea-message-font-size-xs,.525rem);--input-padding:var(--jb-textarea-input-padding-xs,.125rem .375rem 0 .375rem);--border-radius:var(--jb-textarea-border-radius-xs,var(--jb-radius-xs));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-xs,.125rem .25rem)}:host([size=sm]){--height:var(--jb-textarea-height-sm,4rem);--min-height:var(--jb-textarea-min-height-sm,4rem);--value-font-size:var(--jb-textarea-value-font-size-sm,.875rem);--label-font-size:var(--jb-textarea-label-font-size-sm,.7rem);--message-font-size:var(--jb-textarea-message-font-size-sm,.6125rem);--input-padding:var(--jb-textarea-input-padding-sm,.125rem .5625rem 0 .5625rem);--border-radius:var(--jb-textarea-border-radius-sm,var(--jb-radius-sm));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-sm,.25rem .5rem)}:host([size=lg]){--height:var(--jb-textarea-height-lg,7rem);--min-height:var(--jb-textarea-min-height-lg,7rem);--value-font-size:var(--jb-textarea-value-font-size-lg,1.125rem);--label-font-size:var(--jb-textarea-label-font-size-lg,.9rem);--message-font-size:var(--jb-textarea-message-font-size-lg,.7875rem);--input-padding:var(--jb-textarea-input-padding-lg,.125rem .9375rem 0 .9375rem);--border-radius:var(--jb-textarea-border-radius-lg,var(--jb-radius-lg));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-lg,.5rem .75rem)}:host([size=xl]){--height:var(--jb-textarea-height-xl,9rem);--min-height:var(--jb-textarea-min-height-xl,9rem);--value-font-size:var(--jb-textarea-value-font-size-xl,1.25rem);--label-font-size:var(--jb-textarea-label-font-size-xl,1rem);--message-font-size:var(--jb-textarea-message-font-size-xl,.875rem);--input-padding:var(--jb-textarea-input-padding-xl,.125rem 1.125rem 0 1.125rem);--border-radius:var(--jb-textarea-border-radius-xl,var(--jb-radius-xl));--inline-slots-padding:var(--jb-textarea-inline-slots-padding-xl,.75rem 1rem)}</style>\n\n  <div class=\"jb-textarea-web-component\" part=\"component\">\n    <label for=\"textarea\" class=\"--hide\" part=\"label\"><span class=\"label-value\"></span><span aria-hidden=\"true\">:</span></label>\n    <div class=\"textarea-box\" part=\"textarea-box\">\n        <div class=\"block-start-section-wrapper\" part=\"block-start-section-wrapper\">\n          <slot name=\"block-start-section\"></slot>\n        </div>\n        <div class=\"inline-start-section-wrapper\" part=\"inline-start-section-wrapper\">\n            <slot name=\"inline-start-section\"></slot>\n        </div>\n        <textarea id=\"textarea\" class=\"textarea-input\" part=\"textarea\" aria-describedby=\"message\"></textarea>\n        <div class=\"inline-end-section-wrapper\" part=\"inline-end-section-wrapper\">\n            <slot name=\"inline-end-section\"></slot>\n        </div>\n        <div class=\"block-end-section-wrapper\" part=\"block-end-section-wrapper\">\n            <slot name=\"block-end-section\"></slot>\n        </div>\n    </div>\n    <div id=\"message\" class=\"message-box\" part=\"message\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\n  ", e.appendChild(t.content.cloneNode(!0)), this.#t = e.querySelector(".textarea-box textarea"), this.#n = {
+				textarea: this.#t,
+				label: e.querySelector("label"),
+				labelValue: e.querySelector("label .label-value"),
+				messageBox: e.querySelector(".message-box")
+			}, this.#v();
+		}
+		#v() {
+			this.#n.textarea.addEventListener("change", (e) => this.#u(e)), this.#n.textarea.addEventListener("beforeinput", this.#x.bind(this)), this.#n.textarea.addEventListener("input", (e) => this.#m(e)), this.#n.textarea.addEventListener("blur", (e) => this.#g(e)), this.#n.textarea.addEventListener("keypress", this.#p.bind(this)), this.#n.textarea.addEventListener("keyup", this.#f.bind(this)), this.#n.textarea.addEventListener("keydown", this.#j.bind(this));
+		}
+		#g(e) {
+			this.#l.checkValidity({ showError: !0 });
+		}
+		#l;
+		get validation() {
+			return this.#l;
+		}
+		#c() {
+			this.value = this.getAttribute("value") || "";
+		}
+		static get observedAttributes() {
+			return [
+				"label",
+				"message",
+				"value",
+				"placeholder",
+				"required",
+				"error"
+			];
+		}
+		attributeChangedCallback(e, t, a) {
+			this.#w(e, a);
+		}
+		#w(e, t) {
+			switch (e) {
+				case "label":
+					this.#n.labelValue.innerHTML = t, this.#s && (this.#s.ariaLabel = t), null == t || null == t || "" == t ? this.#n.label.classList.add("--hide") : this.#n.label.classList.remove("--hide");
+					break;
+				case "message":
+					this.#s && (this.#s.ariaDescription = t), this.#n.messageBox.classList.contains("error") || (this.#n.messageBox.innerHTML = t);
+					break;
+				case "placeholder":
+					this.#t.setAttribute("placeholder", t), this.#s && (this.#s.ariaPlaceholder = t);
+					break;
+				case "value":
+					this.value = t;
+					break;
+				case "required":
+					this.required = "" === t || "true" === t;
+					break;
+				case "error": this.reportValidity();
+			}
+		}
+		#a() {
+			this.#t.style.height = "4px", this.#t.style.height = this.#t.scrollHeight + "px";
+		}
+		#x(e) {
+			this.#y(e);
+		}
+		#y(e) {
+			const t = (0, i.createInputEvent)("beforeinput", e, { cancelable: !0 });
+			return this.dispatchEvent(t), t.defaultPrevented && e.preventDefault(), t.defaultPrevented;
+		}
+		#j(e) {
+			const t = (0, i.createKeyboardEvent)("keydown", e, { cancelable: !0 });
+			this.dispatchEvent(t) || e.preventDefault();
+		}
+		#p(e) {
+			const t = (0, i.createKeyboardEvent)("keypress", e, { cancelable: !0 });
+			this.dispatchEvent(t) ? "Enter" == e.key && this.#E(e) : e.preventDefault();
+		}
+		#m(e) {
+			const t = e.target.value;
+			this.#e = t, this.autoHeight && this.#a(), this.#z(e);
+		}
+		#z(e) {
+			const t = {
+				bubbles: e.bubbles,
+				cancelable: e.cancelable,
+				composed: e.composed,
+				data: e.data,
+				dataTransfer: e.dataTransfer,
+				detail: e.detail,
+				inputType: e.inputType,
+				isComposing: e.isComposing,
+				targetRanges: e.getTargetRanges(),
+				view: e.view
+			}, a = new InputEvent("input", t);
+			this.dispatchEvent(a);
+		}
+		#f(e) {
+			const t = e.target.value;
+			this.#e = t, this.#k(!1);
+			const a = (0, i.createKeyboardEvent)("keyup", e, { cancelable: !0 });
+			this.dispatchEvent(a), a.defaultPrevented && e.preventDefault();
+		}
+		#E(e) {
+			const t = (0, i.createKeyboardEvent)("enter", e, { cancelable: !0 });
+			this.dispatchEvent(t), t.defaultPrevented && e.preventDefault();
+		}
+		#u(e) {
+			const t = e.target.value;
+			this.#e = t, this.#k(!0), this.#V().defaultPrevented && e.preventDefault();
+		}
+		#V() {
+			const e = new Event("change", {
+				bubbles: !0,
+				cancelable: !0
+			});
+			return this.dispatchEvent(e), e;
+		}
+		showValidationError(e) {
+			const t = "string" == typeof e ? e : e.message;
+			this.#s?.states?.add("invalid"), this.#s && (this.#s.ariaInvalid = "true"), this.#n.textarea.setAttribute("aria-invalid", "true"), this.#n.textarea.setAttribute("aria-errormessage", "message"), this.#n.messageBox.innerHTML = t;
+		}
+		clearValidationError() {
+			const e = this.getAttribute("message") || "";
+			this.#s?.states?.delete("invalid"), this.#s && (this.#s.ariaInvalid = "false"), this.#n.textarea.setAttribute("aria-invalid", "false"), this.#n.textarea.removeAttribute("aria-errormessage"), this.#n.messageBox.innerHTML = e;
+		}
+		#d() {
+			const e = [], t = this.getAttribute("error");
+			return null !== t && t.trim().length > 0 && e.push({
+				validator: void 0,
+				message: t,
+				stateType: "customError"
+			}), this.required && e.push({
+				validator: /.{1}/g,
+				message: (0, r.getRequiredMessage)(r.i18n, this.getAttribute("label")),
+				stateType: "valueMissing"
+			}), e;
+		}
+		#k(e) {
+			if (!this.isAutoValidationDisabled) return this.#s?.states.has("invalid") && (e = !0), this.#l.checkValidity({ showError: e });
+		}
+		#b(e) {
+			if (e.isAllValid) this.#s?.setValidity({}, "");
+			else {
+				const t = {};
+				let a = "";
+				e.validationList.forEach((e) => {
+					e.isValid || (e.validation.stateType && (t[e.validation.stateType] = !0), "" == a && (a = e.message ?? ""));
+				}), this.#s?.setValidity(t, a);
+			}
+		}
+		get validationMessage() {
+			return this.#s?.validationMessage ?? "";
+		}
+		checkValidity() {
+			const e = this.#l.checkValiditySync({ showError: !1 });
+			if (!e.isAllValid) {
+				const e = new CustomEvent("invalid");
+				this.dispatchEvent(e);
+			}
+			return e.isAllValid;
+		}
+		reportValidity() {
+			const e = this.#l.checkValiditySync({ showError: !0 });
+			if (!e.isAllValid) {
+				const e = new CustomEvent("invalid");
+				this.dispatchEvent(e);
+			}
+			return e.isAllValid;
+		}
+	};
+	customElements.get("jb-textarea") || window.customElements.define("jb-textarea", n), e.JBTextareaWebComponent = n;
+});
+
+//# sourceMappingURL=jb-textarea.umd.js.map