@oslokommune/punkt-elements/dist/textarea-DBSNSvrX.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, o as r, r as i, s as a, u as o } from "./element-cZ85T_aa.js";
import { n as s, r as c, t as l } from "./directive-3THFsVew.js";
import { t as u } from "./class-map-C8HuhNzZ.js";
import { i as d, r as f } from "./directive-helpers-Dkv2gKgs.js";
import { n as p } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
import { t as m } from "./if-defined-Cjj8qN-Z.js";
import { n as h, t as g } from "./ref-RS8Uv6uC.js";
import { t as _ } from "./input-element-B1ciW1N2.js";
import "./input-wrapper-DVU68NcJ.js";
//#region ../../node_modules/lit-html/directives/live.js
var v = l(class extends s {
	constructor(e) {
		if (super(e), e.type !== c.PROPERTY && e.type !== c.ATTRIBUTE && e.type !== c.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
		if (!d(e)) throw Error("`live` bindings can only contain a single expression");
	}
	render(e) {
		return e;
	}
	update(e, [t]) {
		if (t === o || t === n) return t;
		let r = e.element, i = e.name;
		if (e.type === c.PROPERTY) {
			if (t === r[i]) return o;
		} else if (e.type === c.BOOLEAN_ATTRIBUTE) {
			if (!!t === r.hasAttribute(i)) return o;
		} else if (e.type === c.ATTRIBUTE && r.getAttribute(i) === t + "") return o;
		return f(e), t;
	}
}), y = class extends _ {
	constructor(...e) {
		super(...e), this.inputRef = g(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0;
	}
	attributeChangedCallback(e, t, n) {
		e === "value" && this.value !== t && (this.counterCurrent = n ? n.length : 0, this.valueChanged(n, t)), super.attributeChangedCallback(e, t, n);
	}
	updated(e) {
		super.updated(e), e.has("value") && (this.counterCurrent = this.value?.length || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
	}
	render() {
		let e = u({
			"pkt-input": !0,
			"pkt-input--fullwidth": this.fullwidth,
			"pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
		}), n = this.ariaLabelledby || `${this.id}-input-label`;
		return t`<pkt-input-wrapper
      label=${this.label}
      ?counter=${this.counter}
      ?disabled=${this.disabled}
      ?hasError=${this.hasError}
      ?inline=${this.inline}
      ?optionalTag=${this.optionalTag}
      ?required=${this.required}
      ?requiredTag=${this.requiredTag}
      useWrapper=${this.useWrapper}
      .ariaDescribedBy=${this.ariaDescribedBy}
      .counterCurrent=${this.counterCurrent}
      .counterMaxLength=${this.counterMaxLength}
      .errorMessage=${this.errorMessage}
      .forId="${this.id + "-input"}"
      .helptext=${this.helptext}
      .helptextDropdown=${this.helptextDropdown}
      .helptextDropdownButton=${this.helptextDropdownButton}
      .optionalText=${this.optionalText}
      .requiredText=${this.requiredText}
      .tagText=${this.tagText}
      class="pkt-textarea"
    >
      <div class="pkt-contents" slot="helptext">${p(this, "helptext")}</div>
      <textarea
        ${h(this.inputRef)}
        class=${e}
        id=${this.id + "-input"}
        name=${(this.name || this.id) + "-input"}
        placeholder=${m(this.placeholder)}
        .value=${v(this.value)}
        minlength=${m(this.minlength)}
        maxlength=${m(this.maxlength)}
        ?readonly=${this.readonly}
        autocomplete=${this.autocomplete}
        aria-labelledby=${n}
        aria-invalid=${this.hasError}
        aria-errormessage=${`${this.id}-error`}
        rows=${this.rows}
        ?disabled=${this.disabled}
        @input=${(e) => {
			this.value = e.target.value, this.onInput(), e.stopImmediatePropagation();
		}}
        @change=${(e) => {
			e.stopImmediatePropagation();
		}}
        @focus=${(e) => {
			this.onFocus(), e.stopImmediatePropagation();
		}}
        @blur=${(e) => {
			this.value = e.target.value, this.onBlur(), e.stopImmediatePropagation();
		}}
      ></textarea>
    </pkt-input-wrapper>`;
	}
};
i([a({
	type: String,
	reflect: !0
})], y.prototype, "value", void 0), i([a({ type: String })], y.prototype, "autocomplete", void 0), i([a({ type: Number })], y.prototype, "rows", void 0), i([r()], y.prototype, "counterCurrent", void 0);
try {
	e("pkt-textarea")(y);
} catch {
	console.warn("Forsøker å definere <pkt-textarea>, men den er allerede definert");
}
//#endregion
//#region src/components/textarea/index.ts
var b = y;
//#endregion
export { y as n, b as t };