scb-wc 0.1.3 → 0.1.4

package/scb-radio-button/scb-radio-group.js

@@ -0,0 +1,216 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-radio-button/scb-radio-group.ts
+var o = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.name = "", this.orientation = "vertical", this.disabled = !1, this.required = !1, this.deselectable = !1, this.size = "medium", this.ariaLabel = null, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.value = "", this._internals = null, this._form = null, this._formResetHandler = null, this._initialValue = "", this._customValidationMessage = "", this.#e = () => {
+			let e = this.shadowRoot?.querySelector("slot");
+			return e ? e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-radio-button") : [];
+		}, this.#t = () => {
+			let e = this.#e();
+			if (!e.length) return;
+			let t = null;
+			for (let n of e) {
+				let e = n;
+				this.name && n.setAttribute("name", this.name), this.disabled ? n.setAttribute("disabled", "") : n.removeAttribute("disabled"), this.orientation === "horizontal" ? n.setAttribute("orientation", "horizontal") : n.removeAttribute("orientation");
+				let r = n.hasAttribute("data-size-from-group");
+				this.deselectable ? n.setAttribute("deselectable", "") : n.removeAttribute("deselectable"), this.size === "medium" ? r && (n.removeAttribute("size"), n.removeAttribute("data-size-from-group")) : (!n.hasAttribute("size") || r) && (n.setAttribute("size", this.size), n.setAttribute("data-size-from-group", ""));
+				let i = e.value ?? n.getAttribute("value") ?? "", a = typeof e.checked == "boolean" ? e.checked : n.hasAttribute("checked");
+				if (this.value) {
+					let t = String(i) === this.value;
+					t && !a ? e.checked = !0 : !t && a && (e.checked = !1);
+				} else a && t === null && (t = String(i));
+			}
+			!this.value && t !== null && (this.value = t);
+		}, this.#n = (e) => {
+			e.target !== this && e.composedPath().find((e) => e?.tagName?.toLowerCase() === "scb-radio-button") && (e.stopImmediatePropagation(), this.dispatchEvent(new Event("input", {
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this.#r = (e) => {
+			if (e.target === this) return;
+			let t = e.composedPath().find((e) => e?.tagName?.toLowerCase() === "scb-radio-button");
+			if (!t) return;
+			e.stopImmediatePropagation();
+			let n = t?.checked === !0, r = n ? t?.value ?? t?.getAttribute?.("value") ?? e.target?.value ?? "" : "";
+			this.value = String(r ?? "");
+			let i = {
+				value: String(r ?? ""),
+				checked: n,
+				originalIsTrusted: e?.isTrusted === !0
+			};
+			this.dispatchEvent(new Event("change", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("scb-change", {
+				detail: i,
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("scbchange", {
+				detail: i,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+
+      /* Vertikal standard-spacing mellan items i gruppen */
+      --scb-radio-gap: var(--spacing-4, 12px);
+
+      /* Vertikalt avstånd mot omgivande innehåll, styrs via spacing/spacing-top/spacing-bottom */
+      margin-block-start: var(--scb-radio-group-spacing-block-start, 0);
+      margin-block-end: var(--scb-radio-group-spacing-block-end, 0);
+      margin-inline-start: var(--scb-radio-group-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-radio-group-spacing-inline-end, 0);
+    }
+
+    /* Horisontell standard-spacing mellan items om gap inte overrideas via CSS-variabel */
+    :host([orientation='horizontal']) {
+      --scb-radio-gap: var(--spacing-8, 32px);
+    }
+
+    .g {
+      display: flex;
+      flex-direction: var(--_dir, column);
+      align-items: flex-start;
+      gap: var(--scb-radio-gap);
+    }
+
+    /* När radioknappar ligger i en grupp ska spacing ägas av gruppen, inte av enskilda items */
+    ::slotted(scb-radio-button) {
+      --scb-radio-gap: 0;
+    }
+  `;
+	}
+	render() {
+		let e = this.orientation === "horizontal" ? "row" : "column";
+		return r`
+      <div
+        class="g"
+        role="radiogroup"
+        aria-disabled=${String(this.disabled)}
+        aria-required=${String(this.required)}
+        aria-invalid=${this.#i() ? "true" : "false"}
+        aria-label=${this.ariaLabel ?? ""}
+        style=${`--_dir:${e}`}
+      >
+        <slot @slotchange=${this.#t}></slot>
+      </div>
+    `;
+	}
+	firstUpdated() {
+		this.#o(), this.#t(), this.addEventListener("input", this.#n), this.addEventListener("change", this.#r), this._initialValue = this.value, this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+			this.value = this._initialValue, this.requestUpdate(), this.#t(), this.__syncFormValue(), this.#a();
+		}, this._form.addEventListener("reset", this._formResetHandler, !0)), this.__syncFormValue(), this.#a();
+	}
+	disconnectedCallback() {
+		this.removeEventListener("input", this.#n), this.removeEventListener("change", this.#r), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
+	}
+	updated(e) {
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#o(), (e.has("name") || e.has("disabled") || e.has("orientation") || e.has("size") || e.has("deselectable") || e.has("required") || e.has("value")) && this.#t(), (e.has("value") || e.has("disabled") || e.has("name")) && this.__syncFormValue(), (e.has("value") || e.has("disabled") || e.has("required")) && this.#a();
+	}
+	get form() {
+		return this._internals?.form ?? this._form;
+	}
+	get validity() {
+		return this._internals?.validity;
+	}
+	get validationMessage() {
+		return this._internals?.validationMessage ?? "";
+	}
+	get willValidate() {
+		return this._internals?.willValidate ?? !this.disabled;
+	}
+	get labels() {
+		return this._internals?.labels;
+	}
+	checkValidity() {
+		return this._internals?.checkValidity() ?? !this.#i();
+	}
+	reportValidity() {
+		return this._internals?.reportValidity() ?? !this.#i();
+	}
+	setCustomValidity(e) {
+		this._customValidationMessage = String(e ?? ""), this.#a();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e, this.#a();
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i() {
+		return this.disabled ? !1 : this._customValidationMessage ? !0 : this.required && !this.value.trim();
+	}
+	#a() {
+		if (!this._internals) return;
+		let e = !this.disabled && this.required && !this.value.trim(), t = this._customValidationMessage || (e ? "Välj ett alternativ." : "");
+		this._internals.setValidity(e ? { valueMissing: !0 } : {}, t, this.shadowRoot?.querySelector(".g") ?? void 0);
+	}
+	__syncFormValue() {
+		if (!this._internals) return;
+		let e = typeof this.name == "string" && this.name.trim() !== "", t = typeof this.value == "string" && this.value.trim() !== "", n = this.disabled || !e || !t ? null : this.value;
+		this._internals.setFormValue(n);
+	}
+	#o() {
+		let e = this.#s(this.spacing), t = this.#s(this.spacingTop) ?? e, n = this.#s(this.spacingBottom) ?? e, r = this.#s(this.spacingLeft), i = this.#s(this.spacingRight);
+		t ? this.style.setProperty("--scb-radio-group-spacing-block-start", t) : this.style.removeProperty("--scb-radio-group-spacing-block-start"), n ? this.style.setProperty("--scb-radio-group-spacing-block-end", n) : this.style.removeProperty("--scb-radio-group-spacing-block-end"), r ? this.style.setProperty("--scb-radio-group-spacing-inline-start", r) : this.style.removeProperty("--scb-radio-group-spacing-inline-start"), i ? this.style.setProperty("--scb-radio-group-spacing-inline-end", i) : this.style.removeProperty("--scb-radio-group-spacing-inline-end");
+	}
+	#s(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+};
+e([a({ type: String })], o.prototype, "name", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "orientation", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "required", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "deselectable", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), e([a({
+	type: String,
+	attribute: "aria-label"
+})], o.prototype, "ariaLabel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "value", void 0), o = e([i("scb-radio-group")], o);
+//#endregion
+export { o as ScbRadioGroup };