scb-wc 0.1.2 → 0.1.4

package/scb-segmented-button/scb-segmented-button.js

@@ -0,0 +1,215 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-segmented-item.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-segmented-button/scb-segmented-button.ts
+var o = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._internals = null, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.required = !1, this.name = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._form = null, this._formResetHandler = null, this._initialValue = "", this._initialValues = [], this._customValidationMessage = "", "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	static {
+		this.styles = n`
+    :host {
+      --scb-segmented-button-width: 100%;
+      --scb-segmented-button-height: 48px;
+      max-width: var(--scb-segmented-button-width);
+      height: var(--scb-segmented-button-height);
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
+      margin-inline-start: var(--scb-segmented-button-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-segmented-button-spacing-inline-end, 0);
+    }
+    /* Border radius only on first and last button */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role='button']:first-child .segmented-item) {
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    ::slotted(scb-segmented-item:last-child .segmented-item),
+    ::slotted([role='button']:last-child .segmented-item) {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+    /* First button gets left border */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role='button']:first-child .segmented-item) {
+      border-left: 1px solid var(--md-sys-color-outline);
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+			this.value = this._initialValue, this.values = Array.isArray(this._initialValues) ? [...this._initialValues] : [], this.updateSegments(), this._syncFormValue();
+		}, this._form.addEventListener("reset", this._formResetHandler, !0));
+	}
+	disconnectedCallback() {
+		this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this._initialValue = this.value, this._initialValues = Array.isArray(this.values) ? [...this.values] : [], this.updateSegments();
+		let e = this.shadowRoot?.querySelector("slot");
+		e && (e.addEventListener("slotchange", () => {
+			this.updateSegments();
+		}), e.addEventListener("click", (e) => this.onSlotClick(e)), e.addEventListener("focus", () => {
+			this.dispatchEvent(new CustomEvent("focus", {
+				detail: {},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, !0), e.addEventListener("blur", () => {
+			this.dispatchEvent(new CustomEvent("blur", {
+				detail: {},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, !0), e.addEventListener("keydown", (e) => {
+			if (e.code === "Space" || e.code === "Enter" || e.code === "NumpadEnter") {
+				let t = e.target;
+				if (t && t.closest) {
+					let n = t.closest("scb-segmented-item");
+					n && !n.hasAttribute("disabled") && !this.disabled && (this.onSlotClick(e), e.preventDefault());
+				}
+			}
+		})), this._syncFormValue(), this._syncValidity(), this.#e();
+	}
+	updated(e) {
+		super.updated(e), this.updateSegments(), (e.has("value") || e.has("values") || e.has("disabled") || e.has("variant") || e.has("name")) && (this._syncFormValue(), this._syncValidity()), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	onSlotClick(e) {
+		let t = e.target;
+		if (!t || !t.closest) return;
+		let n = t.closest("scb-segmented-item");
+		if (!n || this.disabled || n.hasAttribute("disabled")) return;
+		let r = n.getAttribute("value") || "";
+		r && (this.variant === "multi-select" ? (this.values.indexOf(r) === -1 ? this.values = [...this.values, r] : this.values = this.values.filter((e) => e !== r), this.dispatchEvent(new CustomEvent("change", {
+			detail: { values: this.values },
+			bubbles: !0,
+			composed: !0
+		})), this.updateSegments()) : r !== this.value && (this.value = r, this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: r },
+			bubbles: !0,
+			composed: !0
+		})), this.updateSegments()));
+	}
+	updateSegments() {
+		let e = this.shadowRoot?.querySelector("slot");
+		e && e.assignedElements().forEach((e) => {
+			if (e.tagName === "SCB-SEGMENTED-ITEM") {
+				let t = e.getAttribute("value") || "";
+				if (t) {
+					let n = !1;
+					n = this.variant === "multi-select" ? !!this.values && this.values.includes(t) : t === this.value, e.setAttribute("aria-pressed", n ? "true" : "false"), n ? e.setAttribute("selected", "true") : e.removeAttribute("selected");
+				}
+				this.disabled && e.setAttribute("disabled", "true");
+			}
+		});
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	_getValidationMessage() {
+		return this._customValidationMessage ? this._customValidationMessage : this.required ? this.variant === "multi-select" ? this.values.length === 0 ? "Välj minst ett alternativ." : "" : this.value ? "" : "Välj ett alternativ." : "";
+	}
+	_syncValidity() {
+		if (!this._internals) return;
+		let e = this.disabled ? "" : this._getValidationMessage();
+		e ? (this._internals.setValidity({ valueMissing: !0 }, e), this.setAttribute("aria-invalid", "true")) : (this._internals.setValidity({}), this.removeAttribute("aria-invalid"));
+	}
+	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) {
+			if (this.disabled || !this.name) {
+				this._internals.setFormValue(null);
+				return;
+			}
+			if (this.variant === "multi-select") {
+				if (!this.values || this.values.length === 0) {
+					this._internals.setFormValue(null);
+					return;
+				}
+				let e = new FormData();
+				for (let t of this.values) e.append(this.name, t);
+				this._internals.setFormValue(e);
+			} else {
+				if (!this.value) {
+					this._internals.setFormValue(null);
+					return;
+				}
+				this._internals.setFormValue(this.value);
+			}
+		}
+	}
+	mapSpacingToken(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() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-segmented-button-spacing-block-start", t) : this.style.removeProperty("--scb-segmented-button-spacing-block-start"), n ? this.style.setProperty("--scb-segmented-button-spacing-block-end", n) : this.style.removeProperty("--scb-segmented-button-spacing-block-end"), r ? this.style.setProperty("--scb-segmented-button-spacing-inline-start", r) : this.style.removeProperty("--scb-segmented-button-spacing-inline-start"), i ? this.style.setProperty("--scb-segmented-button-spacing-inline-end", i) : this.style.removeProperty("--scb-segmented-button-spacing-inline-end");
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "value", void 0), e([a({ type: Array })], o.prototype, "values", 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: String,
+	reflect: !0
+})], o.prototype, "name", 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), o = e([i("scb-segmented-button")], o);
+//#endregion
+export { o as ScbSegmentedButton };

package/scb-segmented-button/scb-segmented-item.js

@@ -0,0 +1,133 @@
+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";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-segmented-button/scb-segmented-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.value = "", this.selected = !1, this.icon = "", this.href = "", this.disabled = !1, this.onHostKeydown = (e) => {
+			if (!this.href || this.isEffectivelyDisabled || e.code !== "Space" && e.code !== "Enter" && e.code !== "NumpadEnter") return;
+			let t = this.shadowRoot?.querySelector("a[href]");
+			t && (e.preventDefault(), e.stopPropagation(), t.click());
+		};
+	}
+	get isEffectivelyDisabled() {
+		let e = this.parentElement?.hasAttribute?.("disabled");
+		return this.disabled || !!e;
+	}
+	static {
+		this.styles = n`
+    .segmented-item {
+        display: flex;
+        gap: var(--spacing-3);
+        align-items: center;
+      text-decoration: none;
+        border: 1px solid var(--md-sys-color-outline);
+        border-left: none;
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-3) var(--spacing-4);
+        font: inherit;
+        cursor: pointer;
+        position: relative;
+        font-size: var(--md-sys-typescale-label-medium-size);
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        font-weight: var(--md-sys-typescale-label-medium-weight);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        color: var(--md-sys-color-on-surface);
+        justify-content: center;
+        height: 100%;
+        box-sizing: border-box;
+    }
+    .segmented-item span {
+        white-space: nowrap;
+    }
+    md-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+    :host([disabled]) .segmented-item,
+    .segmented-item[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      filter: grayscale(0.5);
+    }
+    :host([aria-pressed="true"]) .segmented-item {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-primary);
+    }
+    :host(:focus){
+      outline: none;
+    }
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+    :host(:focus) md-focus-ring,
+    md-focus-ring[data-show="true"] {
+      display: block;
+    }
+    :host([disabled]):host(:focus) md-focus-ring,
+    :host([disabled]) md-focus-ring[data-show="true"] {
+      display: none;
+    }
+    :host(:first-child) .segmented-item{
+        border: 1px solid var(--md-sys-color-outline);
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    :host(:last-child) .segmented-item {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+  `;
+	}
+	render() {
+		let e = this.isEffectivelyDisabled, t = !!this.icon, n = !!this.label, i = `segmented-item${t || this.selected ? " has-icon" : ""}${n ? "" : " no-label"}`, a = r`
+      <md-ripple ?disabled="${e}"></md-ripple>
+      ${this.selected ? t && n ? r`<md-icon>check</md-icon>` : t ? r`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>` : r`<md-icon>check</md-icon>` : t ? r`<md-icon>${this.icon}</md-icon>` : ""}
+      ${n ? r`<span>${this.label}</span>` : ""}
+      <md-focus-ring inward></md-focus-ring>
+    `;
+		return this.href ? r`<a class="${i}" href="${this.href}" aria-disabled="${e ? "true" : "false"}" tabindex="-1">${a}</a>` : r`<div class="${i}" aria-disabled="${e ? "true" : "false"}">${a}</div>`;
+	}
+	updateInteractiveAttributes() {
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("role", this.href ? "link" : "button");
+	}
+	firstUpdated() {
+		this.addEventListener("keydown", this.onHostKeydown), this.updateInteractiveAttributes();
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this.onHostKeydown), super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), (e.has("disabled") || e.has("href")) && this.updateInteractiveAttributes();
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "label", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "value", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "selected", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "icon", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "href", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), o = e([i("scb-segmented-item")], o);
+//#endregion
+export { o as ScbSegmentedItem };

package/scb-select/scb-select-option.js

@@ -0,0 +1,88 @@
+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";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-select/scb-select-option.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.disabled = !1, this.showCheckbox = !1, this.checked = !1, this.showRadio = !1, this.label = "", this.noHighlightSelected = !1;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      outline: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.38;
+    }
+    :host(:focus-visible) .item {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: -2px;
+    }
+    :host([data-focused]) .item {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      padding: var(--scb-select-option-padding-y, var(--spacing-3))
+        var(--scb-select-option-padding-x, var(--spacing-5));
+      gap: var(--scb-select-option-gap, var(--spacing-4));
+      min-height: var(--scb-select-option-min-height, 40px);
+      position: relative;
+      font-size: var(--scb-select-option-font-size, var(--md-sys-typescale-body-large-size));
+      line-height: var(--scb-select-option-line-height, var(--md-sys-typescale-body-large-line-height));
+      letter-spacing: var(--scb-select-option-letter-spacing, var(--md-sys-typescale-body-large-tracking));
+    }
+    .label {
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+    md-icon {
+      font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+    md-focus-ring {
+      border-radius: var(--md-sys-shape-corner-small);
+    }
+    .item.checked {
+      background-color: var(--md-sys-color-secondary-container);
+    }
+    :host([no-highlight-selected]) .item.checked {
+      background-color: transparent;
+    }
+    md-icon.radio-checked {
+      color: var(--md-sys-color-primary);
+    }
+  `;
+	}
+	render() {
+		return r`
+      <div class="item ${this.checked ? "checked" : ""}" ?aria-disabled=${this.disabled}>
+        <md-ripple></md-ripple>
+        ${this.showCheckbox ? r`<md-icon class="${this.checked ? "checkbox-checked" : ""}" aria-hidden="true">${this.checked ? "check_box" : "check_box_outline_blank"}</md-icon>` : null}
+        ${this.showRadio ? r`<md-icon class="${this.checked ? "radio-checked" : ""}" aria-hidden="true">${this.checked ? "radio_button_checked" : "radio_button_unchecked"}</md-icon>` : null}
+        <div class="label">${this.label ? this.label : r`<slot></slot>`}</div>
+        <md-focus-ring inward></md-focus-ring>
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "value", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), e([a({ type: Boolean })], o.prototype, "showCheckbox", void 0), e([a({ type: Boolean })], o.prototype, "checked", void 0), e([a({ type: Boolean })], o.prototype, "showRadio", void 0), e([a({ type: String })], o.prototype, "label", void 0), e([a({
+	type: Boolean,
+	attribute: "no-highlight-selected",
+	reflect: !0
+})], o.prototype, "noHighlightSelected", void 0), o = e([i("scb-select-option")], o);
+//#endregion
+export { o as ScbSelectOption };