nve-designsystem 3.2.0 → 3.3.0

package/chunks/nve-alert.component.js

@@ -0,0 +1,163 @@
+import { a as e, n as t, t as n } from "./lit.js";
+import { o as r, r as i, s as a, t as o } from "./decorate.js";
+import { t as s } from "./class-map.js";
+import c from "../components/nve-alert/nve-alert.styles.js";
+import "../components/nve-icon/nve-icon.component.js";
+//#region src/utils/animation.ts
+function l(e, t, n) {
+	return new Promise((r) => {
+		if (n?.duration === Infinity) throw Error("Promise-based animations must be finite.");
+		let i = e.animate(t, {
+			...n,
+			duration: u() ? 0 : n?.duration ?? 300
+		});
+		i.addEventListener("cancel", r, { once: !0 }), i.addEventListener("finish", r, { once: !0 });
+	});
+}
+function u() {
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+//#endregion
+//#region src/components/nve-alert/nve-alert.component.ts
+var d, f = class extends n {
+	static {
+		d = this;
+	}
+	constructor(...e) {
+		super(...e), this.testId = void 0, this.leftStroke = !1, this.variant = "primary", this.closable = !1, this.open = !1, this.duration = Infinity, this.buttonLabel = "Lukk", this.showIcon = "true";
+	}
+	static get toastStack() {
+		return this.currentToastStack ||= Object.assign(document.createElement("div"), { className: "toast-stack" }), this.currentToastStack;
+	}
+	static {
+		this.styles = [c];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.clearAutoHideTimer();
+	}
+	firstUpdated() {
+		this.base && (this.base.hidden = !this.open);
+	}
+	async updated(e) {
+		super.updated(e), e.has("open") && (this.open ? this.dispatchEvent(new CustomEvent("sl-show", {
+			bubbles: !0,
+			composed: !0
+		})) : this.dispatchEvent(new CustomEvent("sl-hide", {
+			bubbles: !0,
+			composed: !0
+		}))), e.has("duration") && this.open && this.startAutoHideTimer();
+	}
+	startAutoHideTimer() {
+		this.clearAutoHideTimer(), this.duration !== Infinity && this.duration > 0 && (this._autoHideTimeout = setTimeout(() => {
+			this.hide();
+		}, this.duration));
+	}
+	clearAutoHideTimer() {
+		this._autoHideTimeout &&= (clearTimeout(this._autoHideTimeout), void 0);
+	}
+	async handleCloseClick() {
+		await this.hide();
+	}
+	async show() {
+		this.open || (this.open = !0, await l(this.base, this.getKeyframes().show, { easing: "ease" }), await this.updateComplete, this.dispatchEvent(new CustomEvent("sl-after-show", {
+			bubbles: !0,
+			composed: !0
+		})), this.startAutoHideTimer());
+	}
+	async hide() {
+		this.open && (await l(this.base, this.getKeyframes().hide, { easing: "ease" }), this.open = !1, await this.updateComplete, this.dispatchEvent(new CustomEvent("sl-after-hide", {
+			bubbles: !0,
+			composed: !0
+		})), this.clearAutoHideTimer());
+	}
+	async toast() {
+		return new Promise((e) => {
+			d.toastStack.parentElement === null && document.body.append(d.toastStack), d.toastStack.appendChild(this), requestAnimationFrame(() => {
+				this.show();
+			}), this.addEventListener("sl-after-hide", () => {
+				d.toastStack.removeChild(this), e(), d.toastStack.querySelector("nve-alert") === null && d.toastStack.remove();
+			}, { once: !0 });
+		});
+	}
+	getVariantIconName() {
+		if (this.showIcon === "false") return "";
+		if (this.iconName) return this.iconName;
+		switch (this.variant) {
+			case "primary": return "info";
+			case "success": return "check_circle";
+			case "neutral": return "info";
+			case "warning": return "warning";
+			case "danger": return "error";
+			default: return "";
+		}
+	}
+	getKeyframes() {
+		return {
+			show: [{
+				opacity: 0,
+				transform: "scale(0.8)"
+			}, {
+				opacity: 1,
+				transform: "scale(1)"
+			}],
+			hide: [{
+				opacity: 1,
+				transform: "scale(1)"
+			}, {
+				opacity: 0,
+				transform: "scale(0.8)"
+			}]
+		};
+	}
+	render() {
+		return e`
+      <div
+        role="alert"
+        part="base"
+        class=${s({
+			alert: !0,
+			"alert--hidden": !this.open,
+			"alert--primary": this.variant === "primary",
+			"alert--success": this.variant === "success",
+			"alert--neutral": this.variant === "neutral",
+			"alert--warning": this.variant === "warning",
+			"alert--danger": this.variant === "danger",
+			"alert--left-stroke": this.leftStroke,
+			"alert--emphasized": this.saturation === "emphasized"
+		})}
+      >
+        <div part="icon" class="alert__icon">
+          ${this.showIcon === "true" ? e`
+                <div part="icon" class="alert__icon">
+                  ${this.getVariantIconName() ? e`<nve-icon name="${this.getVariantIconName()}"></nve-icon>` : e`<slot name="icon"></slot>`}
+                </div>
+              ` : t}
+        </div>
+        <div part="label">
+          ${this.label ? e` <label part="label">${this.label}</label>` : e`<slot name="label"></slot>`}
+        </div>
+        <div part="message" class="alert__message">${this.text ? this.text : e`<slot></slot>`}</div>
+        ${this.closable ? e`
+              <button
+                @click=${this.handleCloseClick}
+                class="alert__button"
+                title=${this.buttonLabel}
+                aria-label=${this.buttonLabel}
+              >
+                <nve-icon name="close"></nve-icon>
+              </button>
+            ` : t}
+      </div>
+    `;
+	}
+};
+o([r({ type: String })], f.prototype, "testId", void 0), o([r()], f.prototype, "label", void 0), o([r()], f.prototype, "text", void 0), o([r()], f.prototype, "saturation", void 0), o([r({ type: Boolean })], f.prototype, "leftStroke", void 0), o([r()], f.prototype, "variant", void 0), o([r({ type: Boolean })], f.prototype, "closable", void 0), o([r({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "open", void 0), o([r({ type: Number })], f.prototype, "duration", void 0), o([r({ type: String })], f.prototype, "buttonLabel", void 0), o([r({ type: String })], f.prototype, "iconName", void 0), o([r({ type: String })], f.prototype, "showIcon", void 0), o([i("[part~=\"base\"]")], f.prototype, "base", void 0), f = d = o([a("nve-alert")], f);
+var p = f;
+//#endregion
+export { p as t };

package/chunks/nve-carousel-item.component.js

@@ -0,0 +1,36 @@
+import { a as e } from "./lit.js";
+import { o as t, s as n, t as r } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import { t as i } from "./chunk.IKV4VH3T.js";
+import a from "../components/nve-carousel-item/nve-carousel-item.styles.js";
+//#region src/components/nve-carousel-item/nve-carousel-item.component.ts
+var o = class extends i {
+	static {
+		this.styles = [i.styles, a];
+	}
+	constructor() {
+		super(), this.testId = void 0, this.description = "";
+	}
+	updated(e) {
+		super.updated(e), e.has("description") && this.style.setProperty("--nve-carousel-description", `"${this.description}"`);
+	}
+	render() {
+		return e`
+      <slot></slot>
+      ${this.description ? e`
+        <div class="carousel-item__description">
+          <p>${this.description}</p>
+        </div>` : ""}
+    `;
+	}
+};
+r([t({
+	reflect: !0,
+	type: String
+})], o.prototype, "testId", void 0), r([t({
+	type: String,
+	reflect: !0
+})], o.prototype, "description", void 0), o = r([n("nve-carousel-item")], o);
+var s = o;
+//#endregion
+export { s as t };

package/chunks/nve-carousel.component.js

@@ -0,0 +1,41 @@
+import { o as e, s as t, t as n } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import "./chunk.YHLNUJ7P.js";
+import "./chunk.6CTB5ZDJ.js";
+import { t as r } from "./chunk.ZH2AND3P.js";
+import i from "../components/nve-carousel/nve-carousel.styles.js";
+//#region src/components/nve-carousel/nve-carousel.component.ts
+var a = class extends r {
+	static {
+		this.styles = [r.styles, i];
+	}
+	constructor() {
+		super(), this.testId = void 0, this.paginationCounter = !1;
+	}
+	isCarouselItem(e) {
+		return e instanceof Element && e.tagName.toLowerCase() === "nve-carousel-item";
+	}
+	firstUpdated() {
+		super.firstUpdated();
+		let e = this.querySelectorAll("nve-carousel-item:not([data-clone])").length;
+		this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-num-items", e.toString()), this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-active-item", "1"), this.addEventListener("sl-slide-change", this.handeSlideChange.bind(this));
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.querySelectorAll("nve-carousel-item:not([data-clone])").length;
+		this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-num-items", t.toString());
+	}
+	handeSlideChange(e) {
+		this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-active-item", (e.detail.index + 1).toString());
+	}
+};
+n([e({
+	reflect: !0,
+	type: String
+})], a.prototype, "testId", void 0), n([e({
+	reflect: !0,
+	type: Boolean
+})], a.prototype, "paginationCounter", void 0), a = n([t("nve-carousel")], a);
+var o = a;
+//#endregion
+export { o as t };

package/chunks/nve-checkbox-group.component.js

@@ -0,0 +1,114 @@
+import { a as e, n as t, t as n } from "./lit.js";
+import { a as r, o as i, r as a, s as o, t as s } from "./decorate.js";
+import "./nve-label.component.js";
+import c from "../components/nve-checkbox-group/nve-checkbox-group.styles.js";
+import { t as l } from "./updateInvalidProperty.js";
+//#region src/utils/deepCompare.ts
+function u(e, t) {
+	if (e === t) return !0;
+	if (typeof e != "object" || !e || typeof t != "object" || !t) return !1;
+	let n = Object.keys(e), r = Object.keys(t);
+	if (n.length !== r.length) return !1;
+	for (let i of n) if (!r.includes(i) || !u(e[i], t[i])) return !1;
+	return !0;
+}
+//#endregion
+//#region src/components/nve-checkbox-group/nve-checkbox-group.component.ts
+var d = class extends n {
+	constructor() {
+		super(), this.disabled = !1, this.required = !1, this.orientation = "vertical", this.requiredLabel = "*Obligatorisk", this.showErrorMessage = !1, this.isCustomValidationError = !1, this.updateSelectedValues = (e) => {
+			let t = e.target;
+			if (t.checked) this.selectedValues ||= [], this.selectedValues.push(t.value);
+			else if (this.selectedValues) {
+				let e = this.selectedValues.findIndex((e) => u(e, t.value));
+				e !== -1 && this.selectedValues.splice(e, 1);
+			}
+			this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = [c];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this)), this.addEventListener("sl-change", this.handleChange.bind(this));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("sl-change", this.handleChange), this.removeEventListener("submit", this.handleSubmit);
+	}
+	firstUpdated() {
+		this.requiredLabel && this.style.setProperty("--sl-checkbox-required-content", `"${this.requiredLabel}"`), this.selectedValues?.length && Array.from(this.querySelectorAll("nve-checkbox")).forEach((e) => {
+			this.selectedValues?.includes(e.value) ? e.checked = !0 : e.checked = !1;
+		});
+	}
+	updated(e) {
+		super.updated(e), e.has("disabled") && l(Array.from(this.querySelectorAll("nve-checkbox")), this.disabled, "disabled");
+	}
+	setCustomValidity(e = "") {
+		let t = !e.length;
+		t ? this.resetValidation() : (this.errorMessage = e, this.makeInvalid()), this.isCustomValidationError = !t, this.toggleValidationAttributes(t);
+	}
+	handleSubmit(e) {
+		e.preventDefault(), this.checkValidity();
+	}
+	handleChange(e) {
+		this.updateSelectedValues(e), this.checkValidity();
+	}
+	checkValidity() {
+		if (!this.required || this.isCustomValidationError) return;
+		let e = !0;
+		this.required && (e = this.checkIfRequiredValid()), e ? this.resetValidation() : this.makeInvalid(), this.toggleValidationAttributes(e);
+	}
+	toggleValidationAttributes(e) {
+		this.toggleAttribute("data-valid", e), this.toggleAttribute("data-user-valid", e), this.toggleAttribute("data-invalid", !e), this.toggleAttribute("data-user-invalid", !e);
+	}
+	resetValidation() {
+		Array.from(this.querySelectorAll("nve-checkbox")).forEach((e) => {
+			e.toggleAttribute("data-user-invalid", !1), e.setCustomValidity("");
+		}), this.showErrorMessage = !1;
+	}
+	makeInvalid() {
+		Array.from(this.querySelectorAll("nve-checkbox")).forEach((e) => {
+			e.toggleAttribute("data-user-invalid", !0), e.setCustomValidity(this.errorMessage || "Error");
+		}), this.showErrorMessage = !0;
+		let e = new Event("sl-invalid", {
+			bubbles: !0,
+			cancelable: !0
+		});
+		this.dispatchEvent(e);
+	}
+	checkIfRequiredValid() {
+		return Array.from(this.querySelectorAll("nve-checkbox")).some((e) => e.checked);
+	}
+	render() {
+		return e`
+      <fieldset
+        class="checkbox-group"
+        aria-required=${this.required}
+        aria-labelledby="label"
+        aria-describedby="error-message"
+        aria-errormessage="error-message"
+      >
+        ${this.label ? e`<div class="checkbox-group__label">
+              <nve-label id="label" value=${this.label} size="small" tooltip=${this.tooltip}></nve-label>
+            </div>` : t}
+        <slot class="checkbox-group__checkboxes"></slot>
+        ${this.showErrorMessage ? e`<span role="alert" id="error-message" class="checkbox-group__error-message"
+              >${this.errorMessage || t}</span
+            >` : t}
+      </fieldset>
+    `;
+	}
+};
+s([i({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), s([i({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "required", void 0), s([i()], d.prototype, "label", void 0), s([i()], d.prototype, "tooltip", void 0), s([i({
+	type: String,
+	reflect: !0
+})], d.prototype, "orientation", void 0), s([i()], d.prototype, "errorMessage", void 0), s([i()], d.prototype, "requiredLabel", void 0), s([i({ type: Array })], d.prototype, "selectedValues", void 0), s([a("slot")], d.prototype, "slot", void 0), s([r()], d.prototype, "showErrorMessage", void 0), s([r()], d.prototype, "isCustomValidationError", void 0), d = s([o("nve-checkbox-group")], d);
+var f = d;
+//#endregion
+export { f as t };

package/chunks/nve-checkbox.component.js

@@ -0,0 +1,28 @@
+import { s as e, t } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import "./chunk.SI4ACBFK.js";
+import { t as n } from "./chunk.D5YQDJ7X.js";
+import "./chunk.GI7VDIWX.js";
+import "./chunk.YHLNUJ7P.js";
+import r from "../components/nve-checkbox/nve-checkbox.styles.js";
+//#region src/components/nve-checkbox/nve-checkbox.component.ts
+var i = class extends n {
+	constructor() {
+		super();
+	}
+	static {
+		this.styles = [n.styles, r];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("sl-invalid", (e) => {
+			e.preventDefault();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("sl-invalid", () => {});
+	}
+};
+i = t([e("nve-checkbox")], i);
+var a = i;
+//#endregion
+export { a as t };

package/chunks/nve-dialog.component.js

@@ -0,0 +1,39 @@
+import { o as e, s as t, t as n } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import "./chunk.YHLNUJ7P.js";
+import "./chunk.6CTB5ZDJ.js";
+import "./chunk.RWUUFNUL.js";
+import { t as r } from "./chunk.KPLQLAWP.js";
+import i from "../components/nve-dialog/nve-dialog-styles.js";
+//#region src/components/nve-dialog/nve-dialog.component.ts
+var a = class extends r {
+	constructor() {
+		super(), this.icon = "", this.disableBackground = !1;
+	}
+	handleRequestClose(e) {
+		this.disableBackground && e.detail.source === "overlay" && e.preventDefault();
+	}
+	updated(e) {
+		super.updated(e), e.has("disableBackground") && this.addEventListener("sl-request-close", this.handleRequestClose), this.updateIcon();
+	}
+	updateIcon() {
+		let e = this.shadowRoot?.querySelector(".dialog__title");
+		if (e instanceof HTMLElement) {
+			let t = this.icon ? `"${this.icon}"` : null;
+			e.style.setProperty("--title-icon", t);
+		}
+	}
+	static {
+		this.styles = [r.styles, i];
+	}
+};
+n([e({
+	type: String,
+	reflect: !0
+})], a.prototype, "icon", void 0), n([e({
+	type: Boolean,
+	reflect: !0
+})], a.prototype, "disableBackground", void 0), a = n([t("nve-dialog")], a);
+var o = a;
+//#endregion
+export { o as t };

package/chunks/nve-divider.component.js

@@ -0,0 +1,23 @@
+import { u as e } from "./lit.js";
+import { s as t, t as n } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import { t as r } from "./chunk.IVVHNXMC.js";
+//#region src/components/nve-divider/nve-divider.component.ts
+var i = class extends r {
+	constructor() {
+		super();
+	}
+	static {
+		this.styles = [r.styles, e`
+      :host {
+        --color: var(--color-neutrals-border-subtle);
+        --width: var(--border-width-default, 1px);
+        --spacing: var(--spacing-2x-small, 0.25rem);
+      }
+    `];
+	}
+};
+i = n([t("nve-divider")], i);
+var a = i;
+//#endregion
+export { a as t };

package/chunks/nve-drawer.component.js

@@ -0,0 +1,40 @@
+import { o as e, s as t, t as n } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import "./chunk.YHLNUJ7P.js";
+import "./chunk.6CTB5ZDJ.js";
+import "./chunk.RWUUFNUL.js";
+import { t as r } from "./chunk.SAPQLUO4.js";
+import i from "../components/nve-drawer/nve-drawer.styles.js";
+//#region src/components/nve-drawer/nve-drawer.component.ts
+var a = class extends r {
+	static {
+		this.styles = [r.styles, i];
+	}
+	constructor() {
+		super(), this.testId = void 0;
+	}
+	firstUpdated() {
+		super.firstUpdated(), this.updateCloseIcon();
+	}
+	updateCloseIcon() {
+		requestAnimationFrame(() => {
+			let e = (this?.shadowRoot?.querySelector("[part=\"close-button\"]"))?.shadowRoot?.querySelector("button");
+			if (!e) return;
+			e.setAttribute("title", "Lukk"), e.style.color = "inherit";
+			let t = {
+				start: "left_panel_close",
+				end: "right_panel_close",
+				top: "top_panel_close",
+				bottom: "bottom_panel_close"
+			}, n = document.createElement("nve-icon");
+			n.setAttribute("name", t[this.placement]), e.replaceChildren(n);
+		});
+	}
+};
+n([e({
+	reflect: !0,
+	type: String
+})], a.prototype, "testId", void 0), a = n([t("nve-drawer")], a);
+var o = a;
+//#endregion
+export { o as t };

package/chunks/nve-dropdown.component.js

@@ -0,0 +1,83 @@
+import { o as e, s as t, t as n } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import "./chunk.6CTB5ZDJ.js";
+import "./chunk.5JY5FUCG.js";
+import { t as r } from "./chunk.UDWRA64J.js";
+import i from "../components/nve-dropdown/nve-dropdown.styles.js";
+//#region src/utils/tabbable.ts
+function a(e) {
+	return !!(e.offsetParent || e.offsetWidth || e.offsetHeight || e.getClientRects().length);
+}
+function o(e) {
+	let t = e.tagName.toLowerCase();
+	return e.getAttribute("tabindex") === "-1" || e.hasAttribute("disabled") || t === "input" && e.getAttribute("type") === "radio" && !e.hasAttribute("checked") || !a(e) || window.getComputedStyle(e).visibility === "hidden" ? !1 : (t === "audio" || t === "video") && e.hasAttribute("controls") || e.hasAttribute("tabindex") || e.hasAttribute("contenteditable") && e.getAttribute("contenteditable") !== "false" ? !0 : [
+		"button",
+		"input",
+		"select",
+		"textarea",
+		"a",
+		"audio",
+		"video",
+		"summary"
+	].includes(t);
+}
+function s(e) {
+	let t = c(e);
+	return {
+		start: t[0] ?? null,
+		end: t[t.length - 1] ?? null
+	};
+}
+function c(e) {
+	let t = [];
+	function n(r) {
+		if (r instanceof Element) {
+			if (r.hasAttribute("inert")) return;
+			!t.includes(r) && o(r) && t.push(r), r instanceof HTMLSlotElement && ((t) => t.getRootNode({ composed: !0 })?.host !== e)(r) && r.assignedElements({ flatten: !0 }).forEach((e) => {
+				e instanceof HTMLElement && n(e);
+			}), r.shadowRoot !== null && r.shadowRoot.mode === "open" && n(r.shadowRoot);
+		}
+		[...r.children].forEach((e) => {
+			e instanceof HTMLElement && n(e);
+		});
+	}
+	return n(e), t.sort((e, t) => {
+		let n = Number(e.getAttribute("tabindex")) || 0;
+		return (Number(t.getAttribute("tabindex")) || 0) - n;
+	});
+}
+//#endregion
+//#region src/components/nve-dropdown/nve-dropdown.component.ts
+var l = class extends r {
+	constructor() {
+		super(), this.testId = "", this.handlePanelSelect = (e) => {
+			let t = e.target;
+			!this.stayOpenOnSelect && t.tagName.toLowerCase() === "nve-menu" && this.focusOnTrigger();
+		};
+	}
+	static {
+		this.styles = [r.styles, i];
+	}
+	getMenu() {
+		return this.panel.assignedElements({ flatten: !0 }).find((e) => e.tagName.toLowerCase() === "nve-menu");
+	}
+	updateAccessibleTrigger() {
+		let e = this.trigger.assignedElements({ flatten: !0 }).find((e) => s(e).start), t;
+		if (e) {
+			switch (e.tagName.toLowerCase()) {
+				case "nve-button":
+					t = e.button;
+					break;
+				default: t = e;
+			}
+			t.setAttribute("aria-haspopup", "true"), t.setAttribute("aria-expanded", this.open ? "true" : "false");
+		}
+	}
+};
+n([e({
+	reflect: !0,
+	type: String
+})], l.prototype, "testId", void 0), l = n([t("nve-dropdown")], l);
+var u = l;
+//#endregion
+export { u as t };

package/chunks/nve-input.component.js

@@ -0,0 +1,80 @@
+import { a as e, o as t, s as n, t as r } from "./decorate.js";
+import "./chunk.4TUIT776.js";
+import "./chunk.SI4ACBFK.js";
+import "./chunk.GI7VDIWX.js";
+import "./chunk.YHLNUJ7P.js";
+import { t as i } from "./if-defined.js";
+import "./chunk.6CTB5ZDJ.js";
+import { t as a } from "./chunk.XA43ZQPC.js";
+import o from "../components/nve-input/nve-input.styles.js";
+//#region src/components/nve-input/nve-input.component.ts
+var s = class extends a {
+	static {
+		this.styles = [a.styles, o];
+	}
+	constructor() {
+		super(), this.requiredLabel = "*Obligatorisk", this.testId = "", this.noValidation = !1, this.alreadyInvalid = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("sl-invalid", (e) => {
+			e.preventDefault(), this.alreadyInvalid || this.makeInvalid();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("sl-invalid", this.makeInvalid);
+	}
+	firstUpdated() {
+		super.firstUpdated(), this.requiredLabel && this.style.setProperty("--sl-input-required-content", `"${this.requiredLabel}"`);
+		let e = this.shadowRoot?.querySelector("input");
+		e && i(this.autocomplete) && this.autocomplete === "false" && e.setAttribute("aria-autocomplete", "none");
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.hasAttribute("data-user-invalid");
+		if (e.has("inputId") && this.updateInputId(), t && !this.alreadyInvalid && this.makeInvalid(), t || this.resetValidation(), e.has("readonly") && this.shadowRoot) {
+			let t = e.get("readonly"), n = this.readonly;
+			if (!t && n) {
+				if (!this.shadowRoot.querySelector("slot[name=suffix]").assignedElements().length) {
+					let e = document.createElement("nve-icon");
+					e.setAttribute("id", "readonly-icon"), e.setAttribute("name", "visibility"), e.setAttribute("slot", "suffix"), this.appendChild(e);
+				}
+			} else if (!n && t) {
+				let e = this.shadowRoot.querySelector("slot[name=suffix]").assignedElements().find((e) => e.id === "readonly-icon");
+				e && e.remove();
+			}
+		}
+	}
+	updateInputId() {
+		let e = this.shadowRoot?.querySelector("input");
+		e && this.inputId && (e.id = this.inputId);
+	}
+	makeInvalid() {
+		this.noValidation || (this.showErrorIcon(), this.showErrorMessage(), this.alreadyInvalid = !0);
+	}
+	resetValidation() {
+		this.hideErrorIcon(), this.style.setProperty("--nve-input-error-message", ""), this.alreadyInvalid = !1;
+	}
+	showErrorMessage() {
+		this.errorMessage ||= this.validationMessage, this.style.setProperty("--nve-input-error-message", `"${this.errorMessage}"`);
+	}
+	showErrorIcon() {
+		let e = document.createElement("nve-icon");
+		e.setAttribute("id", "error-icon"), e.setAttribute("name", "error"), e.setAttribute("slot", "suffix");
+		let t = getComputedStyle(document.documentElement).getPropertyValue("--color-feedback-background-emphasized-error");
+		e.style.color = t.trim(), this.appendChild(e);
+	}
+	hideErrorIcon() {
+		let e = this.querySelector("#error-icon");
+		e && e.remove();
+	}
+};
+r([t()], s.prototype, "requiredLabel", void 0), r([t({ reflect: !0 })], s.prototype, "errorMessage", void 0), r([t({
+	reflect: !0,
+	type: String
+})], s.prototype, "testId", void 0), r([t({
+	type: String,
+	reflect: !0
+})], s.prototype, "inputId", void 0), r([t({ type: Boolean })], s.prototype, "noValidation", void 0), r([e()], s.prototype, "alreadyInvalid", void 0), s = r([n("nve-input")], s);
+var c = s;
+//#endregion
+export { c as t };