scb-wc 0.1.2 → 0.1.4

package/scb-switch/scb-switch.js

@@ -0,0 +1,182 @@
+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, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/switch/switch.js";
+//#region src/scb-test-components/scb-switch/scb-switch.ts
+var s = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._internals = null, this.label = "", this.ariaLabel = "", this.icons = !1, this.selected = !1, this.required = !1, this.disabled = !1, this.fullWidth = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.name = "", this.value = "on", this._form = null, this._formResetHandler = null, this._initialSelected = !1, this._customValidationMessage = "", "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._initialSelected = this.selected, this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+			this.selected = this._initialSelected, this.__syncFormValue();
+		}, this._form.addEventListener("reset", this._formResetHandler, !0)), this.__syncFormValue();
+	}
+	disconnectedCallback() {
+		this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+      margin-block-start: var(--scb-switch-spacing-block-start, 0);
+      margin-block-end: var(--scb-switch-spacing-block-end, 0);
+      margin-inline-start: var(--scb-switch-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-switch-spacing-inline-end, 0);
+    }
+
+    .switch-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: auto;
+
+      /* Gap hämtas från spacing-tokens och följer density-lägen */
+      gap: var(--scb-switch-gap, var(--spacing-3, 8px));
+
+      cursor: pointer;
+
+      /* Basfärg för innehållet. Labeln ärver om inget annat anges. */
+      color: var(--md-sys-color-on-surface);
+    }
+
+    /* När full-width är true, kör space-between + 100% bredd */
+    :host([full-width]) .switch-container {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .switch-label {
+      /* liten vertikal justering kopplad till spacing-tokens */
+      transform: translateY(var(--scb-switch-label-offset-y, var(--spacing-1, 2px)));
+
+      /* Typografiska tokens*/
+      font-family: var(--brand-font, 'Inter', sans-serif);
+      font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      font-weight: var(--md-sys-typescale-title-large-weight, 600);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      /* Ärver färg från container */
+      color: var(--scb-switch-label-color, inherit);
+    }
+  `;
+	}
+	firstUpdated() {
+		(this.shadowRoot?.querySelector("md-switch"))?.addEventListener("change", (e) => {
+			this.selected = e.target.selected, this.dispatchEvent(new CustomEvent("change", {
+				detail: { selected: this.selected },
+				bubbles: !0,
+				composed: !0
+			}));
+		}), this.#e();
+	}
+	updated(e) {
+		super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), (e.has("selected") || e.has("disabled") || e.has("value")) && this.__syncFormValue(), (e.has("selected") || e.has("disabled") || e.has("required")) && this.__syncValidity(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	__getValidationMessage() {
+		return this._customValidationMessage ? this._customValidationMessage : this.required && !this.selected ? "Aktivera det här valet." : "";
+	}
+	__syncValidity() {
+		let e = this.shadowRoot?.querySelector("md-switch"), t = this.disabled ? "" : this.__getValidationMessage();
+		this._internals && (t ? this._internals.setValidity({ valueMissing: !0 }, t, e ?? void 0) : this._internals.setValidity({})), this.toggleAttribute("aria-invalid", !!t);
+	}
+	checkValidity() {
+		return !this.__getValidationMessage();
+	}
+	reportValidity() {
+		return this.__syncValidity(), this._internals ? this._internals.reportValidity() : this.checkValidity();
+	}
+	setCustomValidity(e) {
+		this._customValidationMessage = e, this.__syncValidity();
+	}
+	get validity() {
+		return this._internals?.validity;
+	}
+	get validationMessage() {
+		return this._internals?.validationMessage ?? this.__getValidationMessage();
+	}
+	get willValidate() {
+		return this._internals?.willValidate ?? !0;
+	}
+	__syncFormValue() {
+		if (!this._internals) return;
+		let e = this.disabled || !this.selected ? null : this.value;
+		this._internals.setFormValue(e);
+	}
+	#e() {
+		let e = this.#t(this.spacing), t = this.#t(this.spacingTop) ?? e, n = this.#t(this.spacingBottom) ?? e, r = this.#t(this.spacingLeft), i = this.#t(this.spacingRight);
+		t ? this.style.setProperty("--scb-switch-spacing-block-start", t) : this.style.removeProperty("--scb-switch-spacing-block-start"), n ? this.style.setProperty("--scb-switch-spacing-block-end", n) : this.style.removeProperty("--scb-switch-spacing-block-end"), r ? this.style.setProperty("--scb-switch-spacing-inline-start", r) : this.style.removeProperty("--scb-switch-spacing-inline-start"), i ? this.style.setProperty("--scb-switch-spacing-inline-end", i) : this.style.removeProperty("--scb-switch-spacing-inline-end");
+	}
+	#t(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;
+	}
+	render() {
+		let e = this.label.trim().length > 0, t = e ? i : this.ariaLabel || i, n = r`
+      <md-switch
+        ?icons=${this.icons}
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        aria-required=${this.required ? "true" : "false"}
+        aria-label=${t}
+      ></md-switch>
+    `;
+		return e ? r`
+          <label class="switch-container" ?disabled=${this.disabled}>
+            <span class="switch-label">${this.label}</span>
+            ${n}
+          </label>
+        ` : n;
+	}
+};
+e([o({ type: String })], s.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "aria-label"
+})], s.prototype, "ariaLabel", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "icons", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "selected", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "required", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "full-width"
+})], s.prototype, "fullWidth", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), e([o({ type: String })], s.prototype, "name", void 0), e([o({ type: String })], s.prototype, "value", void 0), s = e([a("scb-switch")], s);
+//#endregion
+export { s as ScbSwitch };

package/scb-table/scb-table.js

@@ -0,0 +1,202 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-icon-button/scb-icon-button.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-table/scb-table.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.dataSorting = !1, this.columnWidthMode = "auto", this._sortedColumn = null, this._sortDirection = "asc", this._columnWidthFrame = null, this._onSlotChange = () => {
+			this._attachThListeners();
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand, Inter);
+    }
+
+    .scb-table-scroll-wrapper {
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: auto;
+      max-width: 100%;
+      padding-bottom: 24px;
+    }
+
+    .scb-table-scroll-wrapper::-webkit-scrollbar {
+      border-radius: var(--md-sys-shape-corner-large);
+      height: 8px;
+      width: 10px;
+    }
+
+    .scb-table-scroll-wrapper::-webkit-scrollbar-thumb {
+      background: var(--md-sys-color-on-surface);
+      border-radius: var(--md-sys-shape-corner-large);
+      cursor: pointer;
+    }
+
+    .scb-table-scroll-wrapper::-webkit-scrollbar-track {
+      background: var(--md-sys-color-secondary-container);
+      border-radius: var(--md-sys-shape-corner-large);
+    }
+
+    ::slotted(table) {
+      border-collapse: collapse;
+      border-spacing: 0;
+      min-width: 100%;
+      overflow: hidden;
+    }
+
+    ::slotted(th) .scb-sort-icon {
+      pointer-events: none;
+    }
+
+    ::slotted(th:hover) .scb-sort-icon {
+      pointer-events: auto;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <div class="scb-table-scroll-wrapper">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+	}
+	firstUpdated() {
+		let e = this.shadowRoot?.querySelector("slot");
+		e && (e.addEventListener("slotchange", () => this._attachThListeners()), this._attachThListeners());
+	}
+	updated(e) {
+		e.has("dataSorting") && (this.dataSorting || (this._sortedColumn = null, this._sortDirection = "asc"), this._attachThListeners()), e.has("columnWidthMode") && this._queueColumnWidthUpdate();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._columnWidthFrame !== null && (cancelAnimationFrame(this._columnWidthFrame), this._columnWidthFrame = null);
+	}
+	_getTbody() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (!e) return null;
+		let t = e.assignedNodes({ flatten: !0 });
+		for (let e of t) if (e.nodeType === Node.ELEMENT_NODE) {
+			let t = e, n = t.tagName.toLowerCase() === "tbody" ? t : t.querySelector("tbody");
+			if (n) return n;
+		}
+		return null;
+	}
+	_getTables() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (!e) return [];
+		let t = e.assignedNodes({ flatten: !0 }), n = [];
+		return t.forEach((e) => {
+			if (e.nodeType === Node.ELEMENT_NODE) {
+				let t = e;
+				t.tagName.toLowerCase() === "table" && n.push(t), n.push(...Array.from(t.querySelectorAll("table")));
+			}
+		}), n;
+	}
+	_attachThListeners() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (!e) return;
+		let t = e.assignedNodes({ flatten: !0 }), n = [], r = [], i = [], a = [];
+		t.forEach((e) => {
+			e.nodeType === Node.ELEMENT_NODE && (n.push(...e.querySelectorAll("thead")), r.push(...e.querySelectorAll("th")), i.push(...e.querySelectorAll("td")), a.push(...e.querySelectorAll("tr")));
+		}), n.forEach((e) => {
+			e.style.borderTop = "1px solid var(--md-sys-color-on-surface)";
+		}), r.forEach((e, t) => {
+			e.style.textAlign = "left", e.style.padding = "12px", e.style.position = "relative", e.style.backgroundColor = "var(--md-sys-color-surface)", e.style.fontFamily = "var(--md-sys-typescale-label-medium-font)", e.style.fontSize = "var(--md-sys-typescale-label-medium-size)", e.style.lineHeight = "var(--md-sys-typescale-label-medium-line-height)", e.style.fontWeight = " var(--weight-bold)", e.style.letterSpacing = "var(--md-sys-typescale-label-medium-tracking)", e.style.verticalAlign = "bottom", e.style.borderRight = "1px solid var(--md-sys-color-on-surface)", e.style.borderBottom = "1px solid var(--md-sys-color-on-surface)";
+			let n = (e.textContent ?? "").replace(/\s+/g, " ").trim();
+			for (; e.firstChild;) e.removeChild(e.firstChild);
+			let r = document.createElement("p");
+			if (r.textContent = n, r.style.margin = "0", this.dataSorting) {
+				let n = document.createElement("scb-icon-button");
+				n.className = "scb-sort-icon", n.onclick = () => this._onThClick(t), n.setAttribute("variant", "standard"), n.setAttribute("size", "small"), n.style.alignSelf = "end", this._sortedColumn === t ? (n.setAttribute("variant", "filled-tonal"), n.setAttribute("icon", this._sortDirection === "asc" ? "arrow_downward" : "arrow_upward")) : (n.setAttribute("icon", "swap_horiz"), n.style.transform += " rotate(90deg)");
+				let i = document.createElement("div");
+				i.style.display = "flex", i.style.gap = "8px", i.style.flexWrap = "nowrap", i.style.alignItems = "center", i.appendChild(r), i.appendChild(n), e.appendChild(i);
+			} else e.appendChild(r);
+		}), i.forEach((e) => {
+			e.style.padding = "12px", e.style.textAlign = "left", e.style.borderTop = "1px solid var(--md-sys-color-outline-variant)", e.style.verticalAlign = "text-top", e.style.backgroundColor = "var(--md-sys-color-surface)", e.style.fontFamily = "var(--md-sys-typescale-body-medium-font)", e.style.fontSize = "var(--md-sys-typescale-body-medium-size)", e.style.lineHeight = "var(--md-sys-typescale-body-medium-line-height)", e.style.fontWeight = "var(--md-sys-typescale-body-medium-weight)", e.style.letterSpacing = "var(--md-sys-typescale-body-medium-tracking)", e.style.borderRight = "1px solid var(--md-sys-color-on-surface)", e.style.borderBottom = "1px solid var(--md-sys-color-on-surface)";
+		}), a.forEach((e) => {
+			let t = e.querySelectorAll("th");
+			t.length > 0 && t.forEach((e, n) => {
+				n === t.length - 1 && (e.style.borderRight = "none");
+			});
+			let n = e.querySelectorAll("td");
+			n.length > 0 && n.forEach((e, t) => {
+				t === n.length - 1 && (e.style.borderRight = "none");
+			});
+		});
+		let o = this._getTbody();
+		o && Array.from(o.querySelectorAll("tr")).forEach((e, t) => {
+			let n = t % 2 == 0 ? "var(--md-sys-color-surface-container)" : "var(--md-sys-color-surface)";
+			e.querySelectorAll("td").forEach((e) => {
+				e.style.backgroundColor = n;
+			});
+		}), this._queueColumnWidthUpdate();
+	}
+	_queueColumnWidthUpdate() {
+		this._columnWidthFrame !== null && cancelAnimationFrame(this._columnWidthFrame), this._columnWidthFrame = requestAnimationFrame(() => {
+			this._columnWidthFrame = null, this._applyColumnWidthMode();
+		});
+	}
+	_applyColumnWidthMode() {
+		this._getTables().forEach((e) => {
+			if (this._removeGeneratedColGroup(e), e.style.tableLayout = "", e.style.width = "", e.style.minWidth = "", e.style.maxWidth = "", this.columnWidthMode !== "header") return;
+			let t = Array.from(e.querySelectorAll("thead tr")), n = t[t.length - 1];
+			if (!n) return;
+			let r = Array.from(n.cells).map((e) => `${Math.ceil(this._measureCellContentWidth(e))}px`), i = r.reduce((e, t) => e + parseFloat(t), 0);
+			this._applyGeneratedColGroup(e, r), e.style.tableLayout = "fixed", e.style.width = `${Math.ceil(i)}px`, e.style.minWidth = `${Math.ceil(i)}px`, e.style.maxWidth = "none";
+		});
+	}
+	_applyGeneratedColGroup(e, t) {
+		let n = document.createElement("colgroup");
+		n.setAttribute("data-scb-generated-column-widths", "true"), t.forEach((e) => {
+			let t = document.createElement("col");
+			t.style.width = e, t.style.minWidth = e, n.appendChild(t);
+		}), e.insertBefore(n, e.firstChild);
+	}
+	_removeGeneratedColGroup(e) {
+		e.querySelector("colgroup[data-scb-generated-column-widths=\"true\"]")?.remove();
+	}
+	_measureCellContentWidth(e) {
+		let t = e.firstElementChild?.cloneNode(!0) ?? document.createElement("span");
+		e.firstElementChild || (t.textContent = e.textContent ?? "");
+		let n = window.getComputedStyle(e), r = document.createElement("div");
+		r.style.position = "absolute", r.style.left = "-99999px", r.style.top = "0", r.style.visibility = "hidden", r.style.pointerEvents = "none", r.style.width = "max-content", r.style.maxWidth = "none", r.style.whiteSpace = "nowrap", r.style.fontFamily = n.fontFamily, r.style.fontSize = n.fontSize, r.style.fontWeight = n.fontWeight, r.style.lineHeight = n.lineHeight, r.style.letterSpacing = n.letterSpacing, t instanceof HTMLElement && (t.style.width = "max-content", t.style.maxWidth = "none", t.style.whiteSpace = "nowrap"), r.appendChild(t), document.body.appendChild(r);
+		let i = parseFloat(n.paddingLeft || "0"), a = parseFloat(n.paddingRight || "0"), o = r.getBoundingClientRect().width + i + a;
+		return document.body.removeChild(r), o;
+	}
+	_onThClick(e) {
+		this.dataSorting && (this._sortedColumn === e ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortedColumn = e, this._sortDirection = "asc"), this._sortTable(e, this._sortDirection), this._attachThListeners(), this.dispatchEvent(new CustomEvent("tablesortchange", {
+			detail: {
+				sortedColumn: this._sortedColumn,
+				sortDirection: this._sortDirection
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_sortTable(e, t) {
+		let n = this._getTbody();
+		if (!n) return;
+		let r = Array.from(n.querySelectorAll("tr"));
+		r.sort((n, r) => {
+			let i = n.children[e]?.textContent?.trim() ?? "", a = r.children[e]?.textContent?.trim() ?? "", o = Date.parse(i.replace(/\s+/g, " ")), s = Date.parse(a.replace(/\s+/g, " "));
+			if (!isNaN(o) && !isNaN(s)) return t === "asc" ? o - s : s - o;
+			let c = parseFloat(i.replace(",", ".")), l = parseFloat(a.replace(",", "."));
+			if (!isNaN(c) && !isNaN(l)) return t === "asc" ? c - l : l - c;
+			let u = i.localeCompare(a, "sv");
+			return t === "asc" ? u : -u;
+		}), r.forEach((e) => n.appendChild(e));
+	}
+};
+e([a({
+	type: Boolean,
+	attribute: "data-sorting"
+})], o.prototype, "dataSorting", void 0), e([a({
+	type: String,
+	attribute: "column-width-mode"
+})], o.prototype, "columnWidthMode", void 0), o = e([i("scb-table")], o);
+//#endregion
+export { o as ScbTable };