scb-wc 0.1.3 → 0.1.4

package/scb-list/scb-list-item.js

@@ -0,0 +1,297 @@
+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/focus/md-focus-ring.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-list/scb-list-item.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.type = "text", this.href = "", this.itemHref = "", this.target = "", this.disabled = !1, this.label = "", this.supportingText = "", this.overline = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.imgHrefImage = "", this.trailing = !1, this.trailingVariant = "", this.trailingIcon = "", this.trailingSwitchLabel = "", this.trailingSwitchWidth = "", this.trailingSwitchSelected = !1, this.density = 0, this.noDivider = !1, this.#e = !1, this.#t = !1, this.#n = !1, this.onRowClick = () => {
+			if (this.type === "link" && (this.href || this.itemHref)) return;
+			let e = this.shadowRoot?.querySelector("scb-checkbox"), t = this.shadowRoot?.querySelector("scb-switch");
+			if (e && (e.checked = !e.checked), t) {
+				let e = !this.trailingSwitchSelected;
+				t.selected = e, this.#i(e, !0);
+			}
+		}, this.#a = (e) => {
+			let t = e.detail?.selected, n = typeof t == "boolean" ? t : e.currentTarget?.selected ?? !1;
+			this.#i(n, !0);
+		}, this.#o = (e) => {
+			if (!e.defaultPrevented && (e.key === "Enter" || e.key === " ")) {
+				if (this.type === "link") {
+					let t = this.shadowRoot?.querySelector("a[href]");
+					if (t) {
+						e.preventDefault(), t.click();
+						return;
+					}
+				}
+				e.preventDefault(), this.onRowClick();
+			}
+		};
+	}
+	#e;
+	#t;
+	#n;
+	static get styles() {
+		return n`
+      :host {
+        border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
+        margin-bottom: calc(var(--stroke-border, 1px) * -1);
+        outline: none;
+        position: relative;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font);
+      }
+
+      :host([no-divider]) { --stroke-border: 0px; }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(--scb-list-item-focus-ring-radius, var(--md-sys-shape-corner-small, 8px));
+      }
+      :host(:focus-visible) md-focus-ring { display: block; }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-5, 16px);
+        padding-block: var(--spacing-7, 24px);
+        padding-inline: var(--spacing-5, 16px);
+        border-radius: var(--radius-none, 0px);
+        -webkit-tap-highlight-color: transparent;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+      }
+      :host([type="link"]) .row { cursor: pointer; }
+
+      :host([density="-2"]) .row,
+      :host-context([data-density="-2"]) .row {
+        padding-block: var(--spacing-5, 16px);
+      }
+      :host([density="-4"]) .row,
+      :host-context([data-density="-4"]) .row {
+        padding-block: var(--spacing-4, 12px);
+      }
+
+      md-ripple {
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+
+      .leading { align-self: center; display: grid; place-items: center; }
+      .img {
+        width: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
+        height: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
+        object-fit: contain;
+        border-radius: var(--radius-s, 8px);
+        filter: var(--scb-list-leading-image-filter, none);
+      }
+
+      .texts { display: grid; gap: var(--spacing-1, 2px); min-inline-size: 0; }
+
+      .overline {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-label-medium-size);
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .label {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-title-large-size);
+        line-height: var(--md-sys-typescale-title-large-line-height);
+        font-weight: var(--weight-semibold);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        color: var(--md-sys-color-on-surface);
+      }
+      .supporting-text {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+
+      .trailing { margin-left: auto; align-self: center; display: flex; }
+      .trailing.trailing-switch {
+        justify-content: flex-end;
+      }
+      .trailing scb-checkbox { margin-inline-end: var(--scb-list-trailing-checkbox-nudge); }
+
+      :host([trailing-variant="checkbox"]) .row,
+      :host([trailing-variant="switch"]) .row {
+        cursor: pointer;
+      }
+
+      :host([disabled]) .row {
+        cursor: default;
+      }
+
+      .link { 
+        text-decoration: none; 
+        color: inherit;     
+        display: flex;
+        width: 100%;
+        gap: 12px;
+      }
+    `;
+	}
+	async firstUpdated() {
+		await this.#r(), this.addEventListener("keydown", this.#o);
+	}
+	updated(e) {
+		super.updated(e), (e.has("leading") || e.has("leadingVariant") || e.has("trailing") || e.has("trailingVariant") || e.has("type") || e.has("target")) && this.#r();
+	}
+	async #r() {
+		let e = this.type === "link" && (!this.trailing || this.trailingVariant === "icon");
+		(this.leading && this.leadingVariant === "icon" || this.trailing && this.trailingVariant === "icon" || e) && !this.#e && (await import("@material/web/icon/icon.js"), this.#e = !0), this.trailing && this.trailingVariant === "checkbox" && !this.#t && (await import("../scb-checkbox/scb-checkbox.js"), this.#t = !0), this.trailing && this.trailingVariant === "switch" && !this.#n && (await import("../scb-switch/scb-switch.js"), this.#n = !0);
+	}
+	#i(e, t) {
+		this.trailingSwitchSelected = e, t && this.dispatchEvent(new CustomEvent("trailing-switch-change", {
+			detail: { selected: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	#a;
+	#o;
+	render() {
+		let e = this.leading ? (() => {
+			switch (this.leadingVariant) {
+				case "icon": return this.leadingIcon ? r`<div class="leading"><md-icon>${this.leadingIcon}</md-icon></div>` : i;
+				case "avatar": return r`
+            <div class="leading">
+              <scb-avatar
+                label=${this.avatarLabel}
+                alt=${this.avatarAlt}
+                src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
+                size="medium"
+                shape="circular"
+                variant=${this.avatarVariant}
+              ></scb-avatar>
+            </div>
+          `;
+				case "image": return this.imgHrefImage ? r`<div class="leading"><img class="img" part="leading-image" src="${this.imgHrefImage}" alt="" /></div>` : i;
+				default: return i;
+			}
+		})() : i, t = this.href || this.itemHref || "", n = this.target === "_blank" ? "open_in_new" : "chevron_right", a = this.label ? `Välj ${this.label}` : "Välj", o = this.label ? `Växla ${this.label}` : "Växla", s = i;
+		if (this.trailing) if (this.trailingVariant === "icon") {
+			let e = this.trailingIcon || (this.type === "link" ? n : "");
+			s = e ? r`<div class="trailing"><md-icon>${e}</md-icon></div>` : i;
+		} else this.trailingVariant === "checkbox" ? s = r`
+          <div class="trailing">
+            <scb-checkbox
+              aria-label=${a}
+              @click=${(e) => e.stopPropagation()}
+            ></scb-checkbox>
+          </div>` : this.trailingVariant === "switch" && (s = r`
+          <div class="trailing trailing-switch" style=${this.trailingSwitchWidth ? `inline-size: ${this.trailingSwitchWidth}; min-inline-size: ${this.trailingSwitchWidth};` : i}>
+            <scb-switch
+              .selected=${this.trailingSwitchSelected}
+              label=${this.trailingSwitchLabel || i}
+              aria-label=${o}
+              @click=${(e) => e.stopPropagation()}
+              @change=${this.#a}
+            ></scb-switch>
+          </div>`);
+		else this.type === "link" && (s = r`<div class="trailing"><md-icon>${n}</md-icon></div>`);
+		let c = this.type === "link" && this.target === "_blank" ? "noopener noreferrer" : i, l = r`
+      ${e}
+      <div class="texts">
+        ${this.overline ? r`<div class="overline">${this.overline}</div>` : i}
+        <div class="label">${this.label}</div>
+        ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : i}
+      </div>
+      ${s}
+    `;
+		return r`
+      <div class="row" @click=${this.onRowClick} ?inert=${this.disabled} aria-disabled=${this.disabled ? "true" : "false"}>
+        ${this.type === "link" && t ? r`<a class="link" href=${t} target=${this.target || i} rel=${c}>${l}</a>` : l}
+        ${this.type === "link" ? r`<md-ripple></md-ripple>` : i}
+      </div>
+
+      <md-focus-ring></md-focus-ring>
+    `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0,
+	attribute: "type"
+})], s.prototype, "type", void 0), e([o({ type: String })], s.prototype, "href", void 0), e([o({
+	type: String,
+	attribute: "item-href"
+})], s.prototype, "itemHref", void 0), e([o({
+	type: String,
+	attribute: "target"
+})], s.prototype, "target", void 0), e([o({
+	type: Boolean,
+	attribute: "disabled"
+})], s.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "label", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([o({
+	type: String,
+	attribute: "overline"
+})], s.prototype, "overline", void 0), e([o({ type: Boolean })], s.prototype, "leading", void 0), e([o({
+	type: String,
+	attribute: "leading-variant",
+	reflect: !0
+})], s.prototype, "leadingVariant", void 0), e([o({
+	type: String,
+	attribute: "leading-icon"
+})], s.prototype, "leadingIcon", void 0), e([o({
+	type: String,
+	attribute: "avatar-label"
+})], s.prototype, "avatarLabel", void 0), e([o({
+	type: String,
+	attribute: "avatar-alt"
+})], s.prototype, "avatarAlt", void 0), e([o({
+	type: String,
+	attribute: "avatar-variant"
+})], s.prototype, "avatarVariant", void 0), e([o({
+	type: String,
+	attribute: "avatar-src"
+})], s.prototype, "avatarSrc", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "img-href-image"
+})], s.prototype, "imgHrefImage", void 0), e([o({ type: Boolean })], s.prototype, "trailing", void 0), e([o({
+	type: String,
+	attribute: "trailing-variant",
+	reflect: !0
+})], s.prototype, "trailingVariant", void 0), e([o({
+	type: String,
+	attribute: "trailing-icon"
+})], s.prototype, "trailingIcon", void 0), e([o({
+	type: String,
+	attribute: "trailing-switch-label"
+})], s.prototype, "trailingSwitchLabel", void 0), e([o({
+	type: String,
+	attribute: "trailing-switch-width"
+})], s.prototype, "trailingSwitchWidth", void 0), e([o({
+	type: Boolean,
+	attribute: "trailing-switch-selected",
+	reflect: !0
+})], s.prototype, "trailingSwitchSelected", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], s.prototype, "density", void 0), e([o({
+	type: Boolean,
+	attribute: "no-divider",
+	reflect: !0
+})], s.prototype, "noDivider", void 0), s = e([a("scb-list-item")], s);
+//#endregion
+export { s as ScbListItem };

package/scb-list/scb-list.js

@@ -0,0 +1,119 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-list-item.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, query as o } from "lit/decorators.js";
+//#region src/scb-test-components/scb-list/scb-list.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.#e = !1, this.noDivider = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._onSlotChange = () => this._setupItems();
+	}
+	#e;
+	async firstUpdated() {
+		this.#e ||= (await import("@material/web/list/list.js"), !0), this._setupItems(), this._applySpacing();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this._applySpacing();
+	}
+	_getItems() {
+		return (this._slotEl?.assignedElements({ flatten: !0 }) ?? []).filter((e) => e instanceof HTMLElement);
+	}
+	_setupItems() {
+		this._getItems().forEach((e, t) => {
+			e.hasAttribute("role") || e.setAttribute("role", "listitem"), e.setAttribute("tabindex", t === 0 ? "0" : "-1");
+		});
+		let e = this.renderRoot?.querySelector("md-list");
+		e && !e.hasAttribute("data-kbd") && (e.setAttribute("data-kbd", "true"), e.addEventListener("keydown", (e) => this._onKeyDown(e)));
+	}
+	_onKeyDown(e) {
+		let t = this._getItems();
+		if (!t.length) return;
+		let n = t.findIndex((e) => e.getAttribute("tabindex") === "0"), r = (e) => {
+			let n = (e % t.length + t.length) % t.length;
+			t.forEach((e) => e.setAttribute("tabindex", "-1"));
+			let r = t[n];
+			r.setAttribute("tabindex", "0"), r.focus();
+		};
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				e.preventDefault(), r(n < 0 ? 0 : n + 1);
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				e.preventDefault(), r(n < 0 ? 0 : n - 1);
+				break;
+			case "Home":
+				e.preventDefault(), r(0);
+				break;
+			case "End":
+				e.preventDefault(), r(t.length - 1);
+				break;
+			default: break;
+		}
+	}
+	_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;
+	}
+	_applySpacing() {
+		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.marginBlockStart = t : this.style.removeProperty("margin-block-start"), n ? this.style.marginBlockEnd = n : this.style.removeProperty("margin-block-end"), r ? this.style.marginInlineStart = r : this.style.removeProperty("margin-inline-start"), i ? this.style.marginInlineEnd = i : this.style.removeProperty("margin-inline-end");
+	}
+	static {
+		this.styles = [n`
+      :host {
+        display: block;
+        --scb-list-bg: transparent;
+      }
+
+      md-list {
+        background: var(--scb-list-bg);
+      }
+
+      /* Visa top-border på första raden endast när listan saknar no-divider
+         och endast om första item inte själv är markerad med no-divider. */
+      :host(:not([no-divider])) ::slotted(scb-list-item:first-of-type:not([no-divider])) {
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* När listan har no-divider, tryck ned variabeln till alla barn */
+      :host([no-divider]) ::slotted(scb-list-item) {
+        --stroke-border: 0px;
+      }
+    `];
+	}
+	render() {
+		return r`
+      <md-list role="list" @slotchange=${this._onSlotChange}>
+        <slot></slot>
+      </md-list>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	attribute: "no-divider",
+	reflect: !0
+})], s.prototype, "noDivider", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-top"
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-bottom"
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-left"
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-right"
+})], s.prototype, "spacingRight", void 0), e([o("slot")], s.prototype, "_slotEl", void 0), s = e([i("scb-list")], s);
+//#endregion
+export { s as ScbList };