scb-wc 0.1.2 → 0.1.4

package/scb-keyfigure-card/scb-keyfigure-card.js

@@ -0,0 +1,340 @@
+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";
+//#region src/scb-test-components/scb-keyfigure-card/scb-keyfigure-card.ts
+var o, s = class extends t {
+	static {
+		o = this;
+	}
+	constructor(...e) {
+		super(...e), this.keyfigure = 0, this.subtitle = "", this.supportingText = "", this.cardHref = "", this.href = "", this.icon = "", this.size = "large", this.unit = "", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.sizing = "stretch", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__onKeyDown = (e) => {
+			let t = this.__effectiveHref;
+			(e.key === "Enter" || e.key === " ") && t && (e.preventDefault(), this.__navigate(t, e));
+		}, this.__handleHrefNavigation = (e) => {
+			let t = this.__effectiveHref;
+			t && (e.target.closest("a") || this.__navigate(t, e));
+		};
+	}
+	static {
+		this.__iconLoaded = !1;
+	}
+	static {
+		this.__rippleLoaded = !1;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      position: relative;
+      inline-size: 100%;
+      min-inline-size: 0;
+      padding: var(--scb-keyfigure-card-focus-ring-gap, 4px);
+      margin-block-start: var(--scb-keyfigure-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-keyfigure-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-keyfigure-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-keyfigure-card-spacing-inline-end, 0);
+
+      --scb-keyfigure-card-padding: var(--spacing-7, 24px);
+      --scb-keyfigure-card-gap: var(--spacing-4, 12px);
+      --scb-keyfigure-card-keyfigure-gap: var(--spacing-3, 8px);
+
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-headline-large-size, 28px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-headline-large-line-height, 34px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-headline-large-tracking, -0.6px);
+
+      --scb-keyfigure-card-subtitle-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-keyfigure-card-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-keyfigure-card-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-keyfigure-card-supporting-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-keyfigure-card-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-keyfigure-card-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    :host([size='medium']) {
+      --scb-keyfigure-card-padding: var(--spacing-6, 20px);
+      --scb-keyfigure-card-gap: var(--spacing-3, 8px);
+      --scb-keyfigure-card-keyfigure-gap: var(--spacing-2, 4px);
+
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-headline-small-size, 24px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-headline-small-line-height, 30px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+
+      --scb-keyfigure-card-subtitle-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-keyfigure-card-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-keyfigure-card-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-keyfigure-card-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-keyfigure-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-keyfigure-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([size='small']) {
+      --scb-keyfigure-card-padding: var(--spacing-5, 16px);
+      --scb-keyfigure-card-gap: var(--spacing-3, 8px);
+      --scb-keyfigure-card-keyfigure-gap: var(--spacing-2, 4px);
+
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-title-large-size, 20px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-title-large-tracking, -0.3px);
+
+      --scb-keyfigure-card-subtitle-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-keyfigure-card-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-keyfigure-card-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-keyfigure-card-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-keyfigure-card-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-keyfigure-card-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+    }
+
+    :host([size='standard']) {
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-headline-large-size, 28px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-headline-large-line-height, 34px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-headline-large-tracking, -0.6px);
+    }
+
+    /* Ska vi ha tabulära eller inte? */
+    .scb-keyfigure-card,
+    .scb-keyfigure-card .keyfigure,
+    .scb-keyfigure-card .value {
+      font-variant-numeric: proportional-nums !important;
+      font-feature-settings: "tnum" 0, "pnum" 1;
+    }
+
+    :host([sizing="stretch"]) {
+      inline-size: 100%;
+      block-size: 100%;
+      max-inline-size: none;
+    }
+
+    :host([sizing="content-width"]) {
+      display: inline-block;
+      inline-size: auto;
+      block-size: auto;
+    }
+    :host([sizing="content-width"]) .scb-keyfigure-card {
+      inline-size: max-content;
+    }
+
+    :host([sizing="content-height"]) {
+      inline-size: 100%;
+      block-size: auto;
+      max-inline-size: none;
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-keyfigure-card-focus-ring-radius, var(--md-sys-shape-corner-large, 16px));
+    }
+    .scb-keyfigure-card:focus-visible + md-focus-ring { display: block; }
+
+    .scb-keyfigure-card {
+      color: var(--md-sys-color-on-surface, #0F0865);
+      font-family: var(--brand-font, "Inter", sans-serif);
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-keyfigure-card-gap);
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      padding: var(--scb-keyfigure-card-padding);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      overflow: hidden;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .scb-keyfigure-card:focus,
+    .scb-keyfigure-card:focus-visible { outline: none; }
+
+    .keyfigure {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--scb-keyfigure-card-keyfigure-gap);
+      font-size: var(--scb-keyfigure-card-value-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--scb-keyfigure-card-value-line-height);
+      letter-spacing: var(--scb-keyfigure-card-value-letter-spacing);
+    }
+    .keyfigure .value { white-space: nowrap; }
+    .keyfigure .unit { margin-inline-start: .25em; white-space: nowrap; }
+
+    .sub-label {
+      font-size: var(--scb-keyfigure-card-subtitle-size);
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--scb-keyfigure-card-subtitle-line-height);
+      letter-spacing: var(--scb-keyfigure-card-subtitle-letter-spacing);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
+    }
+    .sub-label a { color: inherit; text-decoration: none; }
+
+    .supporting-text {
+      font-size: var(--scb-keyfigure-card-supporting-size);
+      line-height: var(--scb-keyfigure-card-supporting-line-height);
+      letter-spacing: var(--scb-keyfigure-card-supporting-letter-spacing);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .scb-keyfigure-card.clickable { cursor: pointer; }
+
+    :host([size='large']) {
+      --scb-keyfigure-card-value-size: var(--md-sys-typescale-display-medium-size, 36px);
+      --scb-keyfigure-card-value-line-height: var(--md-sys-typescale-display-medium-line-height, 42px);
+      --scb-keyfigure-card-value-letter-spacing: var(--md-sys-typescale-display-medium-tracking, -0.6px);
+    }
+  `;
+	}
+	formatNumber(e) {
+		if (typeof e == "number") return e.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
+		let t = Number(e);
+		return Number.isNaN(t) ? String(e) : t.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
+	}
+	async firstUpdated() {
+		o.__iconLoaded || (await import("@material/web/icon/icon.js"), o.__iconLoaded = !0), o.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), o.__rippleLoaded = !0), this.__applyInnerSizing(), this.#e();
+	}
+	get __effectiveHref() {
+		return (this.cardHref || this.href || "").trim();
+	}
+	render() {
+		let e = this.__effectiveHref, t = !!e, n = this.formatNumber(this.keyfigure), i = (this.unit || "").trim(), a = i ? `${n} ${i}` : n;
+		return r`
+      <div
+        class="scb-keyfigure-card ${t ? "clickable" : ""} ${this.size}"
+        role=${t ? "link" : "group"}
+        tabindex=${t ? "0" : "-1"}
+        aria-label=${this.subtitle || a}
+        @click=${t ? this.__handleHrefNavigation : null}
+        @keydown=${t ? this.__onKeyDown : null}
+        style="cursor:${t ? "pointer" : "default"};"
+      >
+        ${t ? r`<md-ripple></md-ripple>` : ""}
+        ${this.icon ? r`<md-icon>${this.icon}</md-icon>` : ""}
+
+        ${this.keyfigure !== void 0 && this.keyfigure !== null && this.keyfigure !== "" ? r`
+          <div class="keyfigure">
+            <span class="value" aria-label="${a}">
+              ${n}${i ? r`<span class="unit" aria-hidden="true">\u00A0${i}</span>` : ""}
+            </span>
+            ${t ? r`<md-icon>arrow_forward</md-icon>` : ""}
+          </div>
+        ` : ""}
+
+        ${this.subtitle ? r`
+          <div class="sub-label">
+            ${t ? r`<a href="${e}" tabindex="-1">${this.subtitle}</a>` : this.subtitle}
+          </div>
+        ` : ""}
+
+        ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+      </div>
+
+      ${t ? r`<md-focus-ring></md-focus-ring>` : ""}
+    `;
+	}
+	__applyInnerSizing() {
+		let e = this.renderRoot.querySelector(".scb-keyfigure-card");
+		e && (this.width && this.width.trim() !== "" ? (e.style.inlineSize = "100%", e.style.maxInlineSize = "100%") : (e.style.removeProperty("inline-size"), e.style.removeProperty("max-inline-size")), this.height && this.height.trim() !== "" || this.sizing === "stretch" ? e.style.blockSize = "100%" : e.style.removeProperty("block-size"), this.maxHeight && this.maxHeight.trim() !== "" ? e.style.maxBlockSize = "100%" : e.style.removeProperty("max-block-size"));
+	}
+	updated(e) {
+		super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	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-keyfigure-card-spacing-block-start", t) : this.style.removeProperty("--scb-keyfigure-card-spacing-block-start"), n ? this.style.setProperty("--scb-keyfigure-card-spacing-block-end", n) : this.style.removeProperty("--scb-keyfigure-card-spacing-block-end"), r ? this.style.setProperty("--scb-keyfigure-card-spacing-inline-start", r) : this.style.removeProperty("--scb-keyfigure-card-spacing-inline-start"), i ? this.style.setProperty("--scb-keyfigure-card-spacing-inline-end", i) : this.style.removeProperty("--scb-keyfigure-card-spacing-inline-end");
+	}
+	__dispatchNavigateEvents(e, t) {
+		let n = { href: e }, r = new CustomEvent("card-navigate", {
+			detail: n,
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}), i = new CustomEvent("cardnavigate", {
+			detail: n,
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		});
+		return this.dispatchEvent(r) && this.dispatchEvent(i);
+	}
+	__navigate(e, t) {
+		this.__dispatchNavigateEvents(e, t) && (window.location.href = e);
+	}
+};
+e([a({ attribute: "keyfigure" })], s.prototype, "keyfigure", void 0), e([a({
+	type: String,
+	attribute: "subtitle"
+})], s.prototype, "subtitle", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([a({
+	type: String,
+	attribute: "card-href"
+})], s.prototype, "cardHref", void 0), e([a({
+	type: String,
+	attribute: "href"
+})], s.prototype, "href", void 0), e([a({ type: String })], s.prototype, "icon", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({ type: String })], s.prototype, "unit", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "width", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-width"
+})], s.prototype, "maxWidth", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "height", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-height"
+})], s.prototype, "maxHeight", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "sizing", 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), s = o = e([i("scb-keyfigure-card")], s);
+//#endregion
+export { s as ScbKeyFigureCard };

package/scb-link/scb-link.js

@@ -0,0 +1,136 @@
+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 { ifDefined as o } from "lit/directives/if-defined.js";
+//#region src/scb-test-components/scb-link/scb-link.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.href = "", this.disabled = !1, this.ariaLabel = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.#t = (e) => {
+			this.disabled && (e.preventDefault(), e.stopPropagation());
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block; 
+      position: relative;  
+      padding: var(--scb-link-focus-ring-gap, 4px);
+      font-family: var(--brand-font, inherit);
+      color: var(--md-sys-color-on-surface);
+      width: fit-content;
+      margin-block-start: var(--scb-link-spacing-block-start, 0);
+      margin-block-end: var(--scb-link-spacing-block-end, 0);
+      margin-inline-start: var(--scb-link-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-link-spacing-inline-end, 0);
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-link-focus-ring-radius, var(--md-sys-shape-corner-small, 1px));
+    }
+
+    a {
+      text-decoration: var(--scb-link-decoration, underline);
+      text-underline-offset: var(--scb-link-underline-offset, .22em);
+      text-decoration-thickness: var(--scb-link-underline-thickness, 1px);
+
+      color: var(--scb-link-color, var(--md-sys-color-primary));
+      border-radius: var(--radius-2, 2px); 
+      outline: none;                
+      cursor: pointer;
+      transition: text-decoration-thickness .12s ease;
+
+      white-space: var(--scb-link-white-space, normal);
+    }
+    a:hover { text-decoration-thickness: var(--scb-link-hover-thickness, 2px); }
+    a:focus { outline: none; }
+
+    :host([disabled]) a {
+      pointer-events: none;
+      opacity: .64;
+      text-decoration: none;
+      cursor: default;
+    }
+    a:focus-visible + md-focus-ring {
+      display: block;
+    }
+  `;
+	}
+	firstUpdated() {
+		this.#e();
+	}
+	updated(e) {
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	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-link-spacing-block-start", t) : this.style.removeProperty("--scb-link-spacing-block-start"), n ? this.style.setProperty("--scb-link-spacing-block-end", n) : this.style.removeProperty("--scb-link-spacing-block-end"), r ? this.style.setProperty("--scb-link-spacing-inline-start", r) : this.style.removeProperty("--scb-link-spacing-inline-start"), i ? this.style.setProperty("--scb-link-spacing-inline-end", i) : this.style.removeProperty("--scb-link-spacing-inline-end");
+	}
+	render() {
+		let e = this.target === "_blank" && !this.rel ? "noopener noreferrer" : this.rel;
+		return r`
+      <a
+        part="anchor"
+        href=${o(this.disabled ? void 0 : this.href || void 0)}
+        target=${o(this.target)}
+        rel=${o(e)}
+        download=${o(this.download)}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label=${o(this.ariaLabel || void 0)}
+        @click=${this.#t}
+      ><slot></slot></a>
+
+      <md-focus-ring></md-focus-ring>
+    `;
+	}
+	#t;
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "href", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "target", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "rel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "download", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([a({
+	type: String,
+	attribute: "aria-label"
+})], s.prototype, "ariaLabel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), s = e([i("scb-link")], s);
+//#endregion
+export { s as ScbLink };