scb-wc 0.1.3 → 0.1.4

package/scb-tooltip/scb-tooltip.js

@@ -0,0 +1,402 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.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/icon/icon.js";
+import { unsafeHTML as s } from "lit/directives/unsafe-html.js";
+//#region src/scb-test-components/scb-tooltip/scb-tooltip.ts
+var c = 0, l = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "plain", this.arrow = null, this.supportingtext = "", this.label = "", this.trigger = "hover", this.position = "top", this.open = !1, this.delay = .25, this.offset = 0, this.maxWidth = "300px", this._hoverActive = !1, this._clickActive = !1, this._hideTimeout = null, this._triggerEl = null, this._originalPosition = "top", this._tooltipId = `scb-tooltip-${++c}`, this._onTriggerMouseEnter = () => {
+			this._hasTooltipContent() && (this._hoverActive = !0, this.open = !0);
+		}, this._onTriggerMouseLeave = () => {
+			this._hoverActive = !1, this._clickActive || (this.open = !1);
+		}, this._onTriggerFocus = () => {
+			this._hasTooltipContent() && (this._hoverActive = !0, this.open = !0);
+		}, this._onTriggerBlur = () => {
+			this._hoverActive = !1, this._clickActive || (this.open = !1);
+		}, this._onTooltipMouseEnter = () => {
+			this._hasTooltipContent() && (this.trigger === "hover" || this.trigger === "hover-click") && (this._hoverActive = !0, this.open = !0);
+		}, this._onTooltipMouseLeave = () => {
+			(this.trigger === "hover" || this.trigger === "hover-click") && (this._hoverActive = !1, this._clickActive || (this.open = !1));
+		}, this._onTriggerClick = () => {
+			this._hasTooltipContent() && (this._clickActive = !this._clickActive, this._clickActive ? this.open = !0 : this._hoverActive || (this.open = !1));
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      position: relative;
+      display: inline-block;
+      --delay: 0.25s;
+      --max-width: 300px;
+      --wrap: normal;
+    }
+
+    .scb-tooltip {
+      position: absolute;
+      min-width: 120px;
+      max-width: var(--max-width);
+      width: max-content;
+      opacity: 0;
+      visibility: hidden;
+      z-index: var(--scb-tooltip-z-index, 1000);
+      transition:
+        opacity var(--delay) ease-in-out,
+        visibility var(--delay) ease-in-out;
+    }
+
+    .scb-tooltip[open] {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .hidden {
+      visibility: hidden;
+    }
+
+    .scb-tooltip-supporting-text {
+      font-family: var(--brand-font, Inter);
+      font-size: var(--md-sys-typescale-body-small-size);
+      font-style: normal;
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking);
+      white-space: var(--wrap);
+    }
+
+    /* Plain variant */
+
+    :host([variant='plain']) .scb-tooltip {
+      max-width: var(--max-width);
+    }
+
+    :host([variant='plain']) .scb-tooltip-container {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: var(--md-sys-color-inverse-surface);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      min-height: 14px;
+      width: 100%;
+    }
+
+    :host([variant='plain']) .scb-tooltip-supporting-text {
+      padding: var(--spacing-2) var(--spacing-3);
+      color: var(--md-sys-color-inverse-on-surface);
+    }
+
+    .scb-tooltip-arrow {
+      width: 12px;
+      height: 6px;
+      position: absolute;
+    }
+
+    :host([position='top']) .scb-tooltip-arrow {
+      left: 50%;
+      bottom: -6px;
+      transform: translateX(-50%) rotate(0deg);
+    }
+
+    :host([position='right']) .scb-tooltip-arrow {
+      left: -9px;
+      top: 50%;
+      transform: translateY(-50%) rotate(90deg);
+    }
+
+    :host([position='bottom']) .scb-tooltip-arrow {
+      left: 50%;
+      top: -6px;
+      transform: translateX(-50%) rotate(180deg);
+    }
+
+    :host([position='left']) .scb-tooltip-arrow {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%) translateX(-3px) rotate(270deg);
+    }
+
+    :host([variant='plain'][arrow='false']) .scb-tooltip-arrow {
+      display: none;
+    }
+
+    /* Rich variant */
+
+    :host([variant='rich']) {
+      align-items: flex-start;
+      gap: var(--spacing-2);
+    }
+
+    :host([variant='rich']) .scb-tooltip {
+      background: var(--md-sys-color-surface-container, #ebf8ff);
+      box-shadow:
+        0 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0 1px 10px 0 rgba(0, 0, 0, 0.12),
+        0 4px 5px 0 rgba(0, 0, 0, 0.14);
+      display: inline-flex;
+      padding-bottom: var(--spacing-3);
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      border-radius: var(--md-sys-shape-corner-medium);
+      min-width: 200px;
+      max-width: var(--max-width);
+    }
+
+    :host([variant='rich']) .scb-tooltip-text-container {
+      display: flex;
+      min-width: 220px;
+      padding: var(--spacing-4) var(--spacing-5) var(--spacing-2) var(--spacing-5);
+      align-items: flex-start;
+      gap: var(--spacing-2);
+      flex-direction: column;
+    }
+
+    :host([variant='rich']) .scb-tooltip-label {
+      font-family: var(--brand-font, Inter);
+      font-size: var(--md-sys-typescale-title-small-size);
+      font-style: normal;
+      font-weight: var(--weight-semibold);
+      line-height: var(--md-sys-typescale-title-small-Line-Height);
+      letter-spacing: var(--md-sys-typescale-title-small-Tracking);
+    }
+
+    :host([variant='rich']) .scb-tooltip-supporting-text {
+      color: var(--md-sys-color-on-surface-variant, rgba(11, 5, 68, 0.75));
+    }
+
+    :host([variant='rich']) .scb-tooltip-button-container {
+      display: flex;
+      padding: 0 var(--spacing-3);
+      align-items: center;
+      gap: var(--spacing-3);
+      align-self: stretch;
+    }
+  `;
+	}
+	firstUpdated() {
+		if (this._originalPosition = this.position, this._updateDelayCss(), this._updateMaxWidthCss(), this._updateTriggerElement(), this._updateTooltipHoverListeners(), this.open) {
+			let e = this._getTooltipElement();
+			e && this._showTooltip(e);
+		}
+	}
+	updated(e) {
+		if (e.has("trigger") && (this._updateTriggerElement(), this._updateTooltipHoverListeners()), e.has("delay") && this._updateDelayCss(), e.has("maxWidth") && this._updateMaxWidthCss(), (e.has("supportingtext") || e.has("label") || e.has("variant")) && (this._hasTooltipContent() || (this._hoverActive = !1, this._clickActive = !1, this.open = !1), this._updateTriggerElement(), this._updateTooltipHoverListeners()), e.has("open")) {
+			if (this.open && !this._hasTooltipContent()) {
+				this.open = !1;
+				return;
+			}
+			let e = this._getTooltipElement();
+			if (!e) return;
+			this.open ? this._showTooltip(e) : this._hideTooltip(e), this._dispatchOpenChanged();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._detachTriggerListeners();
+		let e = this._getTooltipElement();
+		e && (e.removeEventListener("mouseenter", this._onTooltipMouseEnter), e.removeEventListener("mouseleave", this._onTooltipMouseLeave)), this._hideTimeout !== null && (window.clearTimeout(this._hideTimeout), this._hideTimeout = null);
+	}
+	_getTooltipElement() {
+		return this.renderRoot.querySelector(".scb-tooltip");
+	}
+	_hasTooltipContent() {
+		let e = (this.supportingtext || "").trim();
+		return this.variant === "rich" ? !!((this.label || "").trim() || e) : !!e;
+	}
+	_updateDelayCss() {
+		let e = Number.isFinite(this.delay) ? this.delay : .25;
+		this.style.setProperty("--delay", `${e}s`);
+	}
+	_updateMaxWidthCss() {
+		let e = (this.maxWidth || "").trim(), t = e.toLowerCase() === "none", n = t ? "none" : e || "300px";
+		this.style.setProperty("--max-width", n), this.style.setProperty("--wrap", t ? "nowrap" : "normal");
+	}
+	_dispatchOpenChanged() {
+		let e = { open: this.open };
+		this.dispatchEvent(new CustomEvent("open-changed", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("openchanged", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_findTriggerElement() {
+		return this.querySelector("[scb-tooltip-anchor]:not([slot])") || (Array.from(this.children).find((e) => e.nodeType === Node.ELEMENT_NODE) ?? null);
+	}
+	_updateTriggerElement() {
+		let e = this._triggerEl;
+		e && (this._detachTriggerListeners(), e.removeAttribute("aria-describedby"));
+		let t = this._findTriggerElement();
+		this._triggerEl = t, t && this._hasTooltipContent() && (t.setAttribute("aria-describedby", this._tooltipId), (this.trigger === "click" || this.trigger === "hover-click") && t.addEventListener("click", this._onTriggerClick), (this.trigger === "hover" || this.trigger === "hover-click") && (t.addEventListener("mouseenter", this._onTriggerMouseEnter), t.addEventListener("mouseleave", this._onTriggerMouseLeave), t.addEventListener("focus", this._onTriggerFocus), t.addEventListener("blur", this._onTriggerBlur)));
+	}
+	_updateTooltipHoverListeners() {
+		let e = this._getTooltipElement();
+		e && (e.removeEventListener("mouseenter", this._onTooltipMouseEnter), e.removeEventListener("mouseleave", this._onTooltipMouseLeave), (this.trigger === "hover" || this.trigger === "hover-click") && (e.addEventListener("mouseenter", this._onTooltipMouseEnter), e.addEventListener("mouseleave", this._onTooltipMouseLeave)));
+	}
+	_detachTriggerListeners() {
+		let e = this._triggerEl;
+		e && (e.removeEventListener("click", this._onTriggerClick), e.removeEventListener("mouseenter", this._onTriggerMouseEnter), e.removeEventListener("mouseleave", this._onTriggerMouseLeave), e.removeEventListener("focus", this._onTriggerFocus), e.removeEventListener("blur", this._onTriggerBlur));
+	}
+	_showTooltip(e) {
+		if (!this._hasTooltipContent()) {
+			this.open = !1;
+			return;
+		}
+		this._hideTimeout !== null && (window.clearTimeout(this._hideTimeout), this._hideTimeout = null);
+		let t = this._triggerEl;
+		this._resetPosition(), e.classList.remove("hidden"), e.setAttribute("aria-hidden", "false"), requestAnimationFrame(() => {
+			t && this._positionTooltip(e, t), e.setAttribute("open", "");
+		});
+	}
+	_hideTooltip(e) {
+		e.removeAttribute("open"), e.setAttribute("aria-hidden", "true"), this._scheduleHidden(e);
+	}
+	_scheduleHidden(e) {
+		let t = (Number.isFinite(this.delay) ? this.delay : .25) * 1e3;
+		if (t <= 0) {
+			e.classList.add("hidden");
+			return;
+		}
+		this._hideTimeout = window.setTimeout(() => {
+			e.classList.add("hidden"), this._hideTimeout = null;
+		}, t);
+	}
+	_resetPosition() {
+		this.position = this._originalPosition;
+	}
+	_positionTooltip(e, t) {
+		let n = t.getBoundingClientRect(), r = e.getBoundingClientRect(), i = this.getBoundingClientRect(), a = (this.offset ?? 0) + 8, o = window.innerHeight - 8, s = window.innerWidth - 8, c = (e) => e >= 8 && e + r.height <= o, l = (e) => e >= 8 && e + r.width <= s, u = (e, t, n, r) => {
+			let i = 0;
+			e < n && (i += n - e);
+			let a = e + t;
+			return a > r && (i += a - r), i;
+		}, d = (e) => {
+			let t = 0, d = 0;
+			switch (e) {
+				case "top":
+					t = n.top - i.top - r.height - a, d = n.left - i.left + (n.width - r.width) / 2;
+					break;
+				case "bottom":
+					t = n.bottom - i.top + a, d = n.left - i.left + (n.width - r.width) / 2;
+					break;
+				case "left":
+					d = n.left - i.left - r.width - a, t = n.top - i.top + (n.height - r.height) / 2;
+					break;
+				case "right":
+					d = n.right - i.left + a, t = n.top - i.top + (n.height - r.height) / 2;
+					break;
+			}
+			let f = t + i.top, p = d + i.left, m = u(f, r.height, 8, o), h = u(p, r.width, 8, s);
+			return {
+				pos: e,
+				top: t,
+				left: d,
+				fitsV: c(f),
+				fitsH: l(p),
+				totalOverflow: m + h
+			};
+		}, f = this.position === "top" || this.position === "bottom", p = this.position, m = [
+			p,
+			this._getOppositePosition(p),
+			f ? "left" : "top",
+			f ? "right" : "bottom"
+		].map(d), h = m.find((e) => e.fitsV && e.fitsH) ?? m.reduce((e, t) => t.totalOverflow < e.totalOverflow ? t : e), g = (e, t, n) => Math.min(Math.max(e, t), n), _ = 8 - i.top, v = o - r.height - i.top, y = 8 - i.left, b = s - r.width - i.left, x = g(h.top, _, v), S = g(h.left, y, b);
+		e.style.top = `${x}px`, e.style.left = `${S}px`, this.position !== h.pos && (this.position = h.pos);
+	}
+	_getOppositePosition(e) {
+		switch (e) {
+			case "top": return "bottom";
+			case "bottom": return "top";
+			case "left": return "right";
+			case "right": return "left";
+		}
+	}
+	_onDefaultSlotChange() {
+		this._updateTriggerElement();
+	}
+	render() {
+		let e = this._hasTooltipContent(), t = this.arrow ? r`<svg
+          class="scb-tooltip-arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="13"
+          height="6"
+          viewBox="0 0 13 6"
+          fill="none"
+        >
+          <path
+            d="M6.5 6L0.5 0H12.5L6.5 6Z"
+            fill="var(--md-sys-color-inverse-surface, #0F0865)"
+          />
+        </svg>` : i, n = this.label || this.supportingtext;
+		return e ? this.variant === "rich" ? r`
+        <div
+          id=${this._tooltipId}
+          class="scb-tooltip hidden"
+          role="tooltip"
+          aria-label=${n}
+          aria-hidden="true"
+        >
+          <div class="scb-tooltip-text-container">
+            <label class="scb-tooltip-label">${this.label}</label>
+            <span class="scb-tooltip-supporting-text">
+              ${s(this.supportingtext)}
+            </span>
+          </div>
+          <div class="scb-tooltip-button-container">
+            <slot name="scb-tooltip-button"></slot>
+          </div>
+        </div>
+        <slot @slotchange=${this._onDefaultSlotChange}></slot>
+      ` : r`
+      <div
+        id=${this._tooltipId}
+        class="scb-tooltip hidden"
+        role="tooltip"
+        aria-label=${n}
+        aria-hidden="true"
+      >
+        <div class="scb-tooltip-container">
+          <span class="scb-tooltip-supporting-text">
+            ${s(this.supportingtext)}
+          </span>
+        </div>
+        ${t}
+      </div>
+      <slot @slotchange=${this._onDefaultSlotChange}></slot>
+    ` : r`<slot @slotchange=${this._onDefaultSlotChange}></slot>`;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "variant", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "arrow", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], l.prototype, "supportingtext", void 0), e([o({ type: String })], l.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "trigger", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "position", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "open", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], l.prototype, "delay", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], l.prototype, "offset", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "max-width"
+})], l.prototype, "maxWidth", void 0), l = e([a("scb-tooltip")], l);
+//#endregion
+export { l as ScbTooltip };

package/scb-typography.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5,h6{margin:0 0 .6em;color:var(--md-sys-color-on-surface)}h1{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}h2{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}h3{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}h4{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}h5{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}h6{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}
+html{font-family:var(--md-sys-typescale-body-large-font)}h1,h2,h3,h4,h5,h6,html,p{color:var(--md-sys-color-on-surface)}h1,h2,h3,h4,h5,h6{margin:0 0 .6em}h1{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}h2{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}h3{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}h4,h5,h6{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}p{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);font-style:normal}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))}a:hover{text-decoration-thickness:var(--scb-link-hover-thickness, 2px)}a:focus{outline-offset:4px;outline-color:var(--md-sys-color-Primary, #1F44FF)}

package/scb-vignette/scb-vignette.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";
+//#region src/scb-test-components/scb-vignette/scb-vignette.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.variant = "outline", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      margin-block-start: var(--scb-vignette-spacing-block-start, 0);
+      margin-block-end: var(--scb-vignette-spacing-block-end, 0);
+      margin-inline-start: var(--scb-vignette-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-vignette-spacing-inline-end, 0);
+    }
+
+    .vignette {
+      --scb-vignette-color: var(--md-sys-color-on-surface, #0F0865);
+      padding: 3px 11px;
+      border-radius: 8px;
+      border: 1px solid var(--md-sys-color-outline);
+      width: fit-content;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    :host([variant='filled']) .vignette {
+      background: color-mix(in srgb, var(--scb-vignette-color) 8%, transparent);
+      border: none;
+      color: var(--scb-vignette-color);
+    }
+
+    .vignette p {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 550;
+      line-height: 22px;
+      margin: 0;
+      color: var(--md-sys-color-on-surface);
+    }
+  `;
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing();
+	}
+	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.setProperty("--scb-vignette-spacing-block-start", t) : this.style.removeProperty("--scb-vignette-spacing-block-start"), n ? this.style.setProperty("--scb-vignette-spacing-block-end", n) : this.style.removeProperty("--scb-vignette-spacing-block-end"), r ? this.style.setProperty("--scb-vignette-spacing-inline-start", r) : this.style.removeProperty("--scb-vignette-spacing-inline-start"), i ? this.style.setProperty("--scb-vignette-spacing-inline-end", i) : this.style.removeProperty("--scb-vignette-spacing-inline-end");
+	}
+	render() {
+		return r`
+      <div class="vignette">
+        <p>${this.label}</p>
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", 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-vignette")], o);
+//#endregion
+export { o as ScbVignette };

package/scb-viz/scb-viz-actions-runtime.js

@@ -0,0 +1,143 @@
+//#region src/scb-test-components/scb-viz/scb-viz-actions-runtime.ts
+var e = (e) => {
+	let t = getComputedStyle(e).backgroundColor;
+	return t && t !== "rgba(0, 0, 0, 0)" ? t : "#ffffff";
+};
+function t({ lang: e, title: t }) {
+	let n = e === "en" ? "visualization" : "visualisering";
+	return (t || n).normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || n;
+}
+function n(e, n) {
+	let r = n === "csv" ? e.lang === "en" ? "-table" : "-tabell" : "";
+	return `${t(e)}${r}.${n}`;
+}
+function r(e = document) {
+	return e;
+}
+function i(e = document) {
+	let t = r(e);
+	return t.fullscreenElement || t.webkitFullscreenElement || null;
+}
+function a(e) {
+	return !!(e.requestFullscreen || e.webkitRequestFullscreen);
+}
+async function o(e, t = document) {
+	if (!a(e)) return;
+	let n = r(t), o = i(t);
+	if (o === e) {
+		n.exitFullscreen ? await n.exitFullscreen() : n.webkitExitFullscreen && await n.webkitExitFullscreen();
+		return;
+	}
+	o && (n.exitFullscreen ? await n.exitFullscreen() : n.webkitExitFullscreen && await n.webkitExitFullscreen()), e.requestFullscreen ? await e.requestFullscreen() : e.webkitRequestFullscreen && await e.webkitRequestFullscreen();
+}
+async function s(e, t = document) {
+	let n = t.createElement("iframe");
+	n.setAttribute("aria-hidden", "true"), n.style.position = "fixed", n.style.right = "0", n.style.bottom = "0", n.style.width = "0", n.style.height = "0", n.style.border = "0", n.style.visibility = "hidden", t.body.appendChild(n);
+	let r = () => {
+		n.remove();
+	}, i = n.contentDocument, a = n.contentWindow;
+	if (!i || !a) {
+		r();
+		return;
+	}
+	i.open(), i.write(e), i.close();
+	let o = Array.from(i.images || []);
+	await Promise.all(o.map((e) => e.complete ? Promise.resolve() : new Promise((t) => {
+		e.addEventListener("load", () => t(null), { once: !0 }), e.addEventListener("error", () => t(null), { once: !0 });
+	})));
+	let s = () => {
+		a.removeEventListener("afterprint", s), r();
+	};
+	a.addEventListener("afterprint", s, { once: !0 }), setTimeout(() => {
+		a.focus(), a.print(), setTimeout(r, 1e3);
+	}, 50);
+}
+async function c(e, t) {
+	e.setAttribute("data-scb-viz-force-light", ""), await new Promise((e) => requestAnimationFrame(() => e(null)));
+	try {
+		return await t();
+	} finally {
+		e.removeAttribute("data-scb-viz-force-light");
+	}
+}
+function l(e, t) {
+	let n = t === "en" ? "," : ";", r = (e) => `"${String(e ?? "").replace(/\r?\n/g, " ").replace(/"/g, "\"\"")}"`, i = `\uFEFF${e.map((e) => e.map(r).join(n)).join("\r\n")}`;
+	return new Blob([i], { type: "text/csv;charset=utf-8;" });
+}
+async function u(e, t, n) {
+	let r = await p(e, t);
+	return r ? v(r, n === "jpeg" ? "image/jpeg" : "image/png", n === "jpeg" ? .92 : void 0) : null;
+}
+async function d(e, t, n) {
+	let r = await p(e, t);
+	return r ? r.toDataURL(n === "jpeg" ? "image/jpeg" : "image/png", n === "jpeg" ? .92 : void 0) : null;
+}
+function f(e, t, n = document) {
+	let r = URL.createObjectURL(e), i = n.createElement("a");
+	i.href = r, i.download = t, n.body.appendChild(i), i.click(), i.remove(), setTimeout(() => URL.revokeObjectURL(r), 0);
+}
+async function p(t, n) {
+	let r = e(n);
+	if (t instanceof HTMLCanvasElement) {
+		let e = t.width || Math.round(t.getBoundingClientRect().width), n = t.height || Math.round(t.getBoundingClientRect().height);
+		if (!e || !n) return null;
+		let i = document.createElement("canvas");
+		i.width = e, i.height = n;
+		let a = i.getContext("2d");
+		return a ? (a.fillStyle = r, a.fillRect(0, 0, e, n), a.drawImage(t, 0, 0, e, n), i) : null;
+	}
+	if (t instanceof HTMLImageElement) {
+		let e = t.naturalWidth || t.width, n = t.naturalHeight || t.height;
+		return !e || !n ? null : g(t.currentSrc || t.src, e, n, r);
+	}
+	let { width: i, height: a, serialized: o } = m(t);
+	if (!i || !a || !o) return null;
+	let s = new Blob([o], { type: "image/svg+xml;charset=utf-8" }), c = URL.createObjectURL(s);
+	try {
+		return await g(c, i, a, r);
+	} finally {
+		URL.revokeObjectURL(c);
+	}
+}
+function m(e) {
+	let t = e.cloneNode(!0), n = e.getBoundingClientRect(), r = e.viewBox?.baseVal, i = Math.round(r?.width || n.width || Number(e.getAttribute("width")) || 0), a = Math.round(r?.height || n.height || Number(e.getAttribute("height")) || 0);
+	return t.setAttribute("xmlns", "http://www.w3.org/2000/svg"), t.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), !t.getAttribute("width") && i && t.setAttribute("width", String(i)), !t.getAttribute("height") && a && t.setAttribute("height", String(a)), !t.getAttribute("viewBox") && i && a && t.setAttribute("viewBox", `0 0 ${i} ${a}`), h(e, t), t.querySelectorAll(".highcharts-tooltip, .highcharts-contextmenu, .highcharts-a11y-proxy-container, .highcharts-a11y-dummy-point").forEach((e) => e.remove()), {
+		width: i,
+		height: a,
+		serialized: new XMLSerializer().serializeToString(t)
+	};
+}
+function h(e, t) {
+	let n = getComputedStyle(e), r = "";
+	for (let e = 0; e < n.length; e += 1) {
+		let t = n[e], i = n.getPropertyValue(t);
+		i && (r += `${t}:${i};`);
+	}
+	r && t.setAttribute("style", r);
+	let i = Array.from(e.children), a = Array.from(t.children);
+	for (let e = 0; e < i.length; e += 1) {
+		let t = i[e], n = a[e];
+		t && n && h(t, n);
+	}
+}
+async function g(e, t, n, r) {
+	let i = Math.max(1, Math.min(2, window.devicePixelRatio || 1)), a = Math.max(1, Math.round(t)), o = Math.max(1, Math.round(n)), s = document.createElement("canvas");
+	s.width = Math.max(1, Math.round(a * i)), s.height = Math.max(1, Math.round(o * i));
+	let c = s.getContext("2d");
+	if (!c) return null;
+	let l = await _(e);
+	return l ? (c.scale(i, i), c.fillStyle = r, c.fillRect(0, 0, a, o), c.drawImage(l, 0, 0, a, o), s) : null;
+}
+function _(e) {
+	return new Promise((t) => {
+		let n = new Image();
+		n.crossOrigin = "anonymous", n.onload = () => t(n), n.onerror = () => t(null), n.src = e;
+	});
+}
+function v(e, t, n) {
+	return new Promise((r) => {
+		e.toBlob((e) => r(e), t, n);
+	});
+}
+//#endregion
+export { n as buildScbVizExportFileName, l as createScbVizCsvBlob, u as createScbVizRasterBlobFromElement, d as createScbVizRasterDataUrlFromElement, f as downloadScbVizBlob, i as getScbVizCurrentFullscreenElement, t as getScbVizExportBaseFileName, r as getScbVizFullscreenDocument, a as isScbVizFullscreenSupported, s as openScbVizPrintFrame, c as runWithScbVizForcedPrintLightMode, o as toggleScbVizFullscreen };