scb-wc-test 0.1.105 → 0.1.107

package/scb-card/scb-card.js

@@ -1,41 +1,43 @@
-import { css as m, LitElement as u, html as i } from "lit";
-import { property as s, customElement as b } from "lit/decorators.js";
+import { css as v, LitElement as y, html as s } from "lit";
+import { property as r, customElement as f } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
 import "../scb-list/scb-list.js";
 import "../scb-button/scb-button.js";
 import "../scb-link/scb-link.js";
 import "../scb-avatar/scb-avatar.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (o, r, n, a) => {
-  for (var l = a > 1 ? void 0 : a ? g(r, n) : r, d = o.length - 1, c; d >= 0; d--)
-    (c = o[d]) && (l = (a ? c(r, n, l) : c(l)) || l);
-  return a && l && v(r, n, l), l;
-};
-let t = class extends u {
+var x = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, b = (i) => {
+  throw TypeError(i);
+}, a = (i, e, o, n) => {
+  for (var c = n > 1 ? void 0 : n ? $(e, o) : e, d = i.length - 1, l; d >= 0; d--)
+    (l = i[d]) && (c = (n ? l(e, o, c) : l(c)) || c);
+  return n && c && x(e, o, c), c;
+}, z = (i, e, o) => e.has(i) || b("Cannot " + o), w = (i, e, o) => e.has(i) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, o), u = (i, e, o) => (z(i, e, "access private method"), o), h, m;
+let t = class extends y {
   constructor() {
-    super(...arguments), this.type = "", this.variant = "", this.direction = "", this.mediaType = "", this.mediaHref = "", this.mediaAlt = "", this.mediaSrcset = "", this.mediaSizes = "", this.mediaLoading = "auto", this.mediaDecoding = "async", this.mediaFetchPriority = "auto", this.mediaFit = "cover", this.mediaPosition = "center", this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.mediaPlaceholder = !1, this.cardHref = "", this.title = "", this.subtitle = "", this.supportingText = "", this.commentsText = "", this.comments = 0, this.likesText = "", this.likes = 0, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.__onImgLoad = (o) => {
-      const r = o.currentTarget.closest(".media");
-      r && r.classList.add("is-loaded");
-    }, this.__onKeyDown = (o) => {
-      (o.key === "Enter" || o.key === " ") && this.cardHref && (o.preventDefault(), window.open(this.cardHref, "_self"));
-    }, this.__handleHrefNavigation = (o) => {
-      this.cardHref && (o.target.closest("a") || window.open(this.cardHref, "_self"));
+    super(...arguments), w(this, h), this.type = "", this.variant = "", this.direction = "", this.mediaType = "", this.mediaHref = "", this.mediaAlt = "", this.mediaSrcset = "", this.mediaSizes = "", this.mediaLoading = "auto", this.mediaDecoding = "async", this.mediaFetchPriority = "auto", this.mediaFit = "cover", this.mediaPosition = "center", this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.mediaPlaceholder = !1, this.cardHref = "", this.title = "", this.subtitle = "", this.supportingText = "", this.commentsText = "", this.comments = 0, this.likesText = "", this.likes = 0, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.__onImgLoad = (i) => {
+      const e = i.currentTarget.closest(".media");
+      e && e.classList.add("is-loaded");
+    }, this.__onKeyDown = (i) => {
+      (i.key === "Enter" || i.key === " ") && this.cardHref && (i.preventDefault(), window.open(this.cardHref, "_self"));
+    }, this.__handleHrefNavigation = (i) => {
+      this.cardHref && (i.target.closest("a") || window.open(this.cardHref, "_self"));
     };
   }
   /* Beräkna fallback-mått från media-aspect. Används endast om width/height saknas. */
-  __calcAspectWH(o) {
-    const r = (o || "").trim();
-    if (!r) return { w: 640, h: 360 };
-    const n = r.includes("/") ? r.split("/") : r.includes(":") ? r.split(":") : r.includes("x") ? r.split("x") : null;
-    if (n && n.length === 2) {
-      const l = Number(n[0]), d = Number(n[1]);
-      if (l > 0 && d > 0) return { w: l, h: d };
-    }
-    const a = Number(r);
-    return isFinite(a) && a > 0 ? { w: 1e3, h: Math.round(1e3 / a) } : { w: 640, h: 360 };
+  __calcAspectWH(i) {
+    const e = (i || "").trim();
+    if (!e) return { w: 640, h: 360 };
+    const o = e.includes("/") ? e.split("/") : e.includes(":") ? e.split(":") : e.includes("x") ? e.split("x") : null;
+    if (o && o.length === 2) {
+      const c = Number(o[0]), d = Number(o[1]);
+      if (c > 0 && d > 0) return { w: c, h: d };
+    }
+    const n = Number(e);
+    return isFinite(n) && n > 0 ? { w: 1e3, h: Math.round(1e3 / n) } : { w: 640, h: 360 };
   }
   __mediaTemplate() {
     if ((this.mediaType || "").toLowerCase() === "avatar")
-      return i`
+      return s`
         <div class="media">
           <slot name="media">
             <scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
@@ -43,15 +45,15 @@ let t = class extends u {
         </div>
       `;
     if (this.mediaHref || this.mediaSrcset) {
-      let r = Number(this.mediaWidth) || 0, n = Number(this.mediaHeight) || 0;
-      const a = (this.mediaAspect || "").trim();
-      if (!r || !n) {
-        const h = this.__calcAspectWH(a || "16/9");
-        r || (r = h.w), n || (n = h.h);
+      let e = Number(this.mediaWidth) || 0, o = Number(this.mediaHeight) || 0;
+      const n = (this.mediaAspect || "").trim();
+      if (!e || !o) {
+        const g = this.__calcAspectWH(n || "16/9");
+        e || (e = g.w), o || (o = g.h);
       }
-      const l = `aspect-ratio:${a || `${r}/${n}`};`, d = this.mediaPlaceholder ? "has-ph" : "", c = this.mediaFit || "cover", p = this.mediaPosition || "center";
-      return i`
-        <div class="media ${d}" style="${l}">
+      const c = `aspect-ratio:${n || `${e}/${o}`};`, d = this.mediaPlaceholder ? "has-ph" : "", l = this.mediaFit || "cover", p = this.mediaPosition || "center";
+      return s`
+        <div class="media ${d}" style="${c}">
           <slot name="media-sources"></slot>
           <img
             src="${this.mediaHref || ""}"
@@ -61,9 +63,9 @@ let t = class extends u {
             loading="${this.mediaLoading}"
             decoding="${this.mediaDecoding}"
             fetchpriority="${this.mediaFetchPriority}"
-            style="object-fit:${c};object-position:${p};"
-            width="${r}"
-            height="${n}"
+            style="object-fit:${l};object-position:${p};"
+            width="${e}"
+            height="${o}"
             @load=${this.__onImgLoad}
           />
         </div>
@@ -71,12 +73,18 @@ let t = class extends u {
     }
     return null;
   }
+  mapSpacingToken(i) {
+    if (!i) return;
+    const e = String(i).trim();
+    if (e)
+      return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
+  }
   render() {
-    const o = this.variant ? `${this.variant.toLowerCase()}` : "", r = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", n = this.cardHref ? "clickable" : "", a = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", l = (p = !1) => p ? i`<a class="title" href="${this.cardHref}" tabindex="0"
+    const i = this.variant ? `${this.variant.toLowerCase()}` : "", e = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", o = this.cardHref ? "clickable" : "", n = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", c = (p = !1) => p ? s`<a class="title" href="${this.cardHref}" tabindex="0"
             >${this.title}</a
-          ><md-icon>arrow_forward</md-icon>` : i`<span class="title">${this.title}</span>`, d = () => this.__mediaTemplate(), c = (p) => i`
+          ><md-icon>arrow_forward</md-icon>` : s`<span class="title">${this.title}</span>`, d = () => this.__mediaTemplate(), l = (p) => s`
       <div
-        class="scb-card ${o} ${r} ${n}"
+        class="scb-card ${i} ${e} ${o}"
         @click=${this.cardHref ? this.__handleHrefNavigation : null}
         @keydown=${this.cardHref ? this.__onKeyDown : null}
         style="cursor:${this.cardHref ? "pointer" : "default"};"
@@ -84,7 +92,7 @@ let t = class extends u {
         tabindex=${this.cardHref ? "0" : "-1"}
         aria-label=${this.title || "Kort"}
       >
-        ${this.cardHref ? i`<md-ripple></md-ripple>` : ""}
+        ${this.cardHref ? s`<md-ripple></md-ripple>` : ""}
         ${d()}
         ${p}
       </div>
@@ -92,24 +100,24 @@ let t = class extends u {
     `;
     switch (this.type) {
       case "standard":
-        return c(i`
+        return l(s`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
-              ${this.subtitle ? i`<div class="sub-label">${this.subtitle}</div>` : ""}
-              ${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${a ? i`<div class="date">${a}</div>` : ""}
+              ${this.title ? s`<div class="header">${c(!!this.cardHref)}</div>` : ""}
+              ${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${n ? s`<div class="date">${n}</div>` : ""}
             </div>
           </div>
         `);
       case "list":
-        return c(i`
+        return l(s`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
-              ${this.subtitle ? i`<div class="sub-label">${this.subtitle}</div>` : ""}
-              ${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${a ? i`<div class="date">${a}</div>` : ""}
+              ${this.title ? s`<div class="header"><span class="title">${this.title}</span></div>` : ""}
+              ${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${n ? s`<div class="date">${n}</div>` : ""}
             </div>
             <div class="content list">
               <slot></slot>
@@ -117,13 +125,13 @@ let t = class extends u {
           </div>
         `);
       case "social":
-        return c(i`
+        return l(s`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
-              ${this.subtitle ? i`<div class="sub-label">${this.subtitle}</div>` : ""}
-              ${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${a ? i`<div class="date">${a}</div>` : ""}
+              ${this.title ? s`<div class="header">${c(!!this.cardHref)}</div>` : ""}
+              ${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${n ? s`<div class="date">${n}</div>` : ""}
             </div>
             <div class="content">
               <div class="social-metrics">
@@ -140,13 +148,13 @@ let t = class extends u {
           </div>
         `);
       case "link":
-        return c(i`
+        return l(s`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
-              ${this.subtitle ? i`<div class="sub-label">${this.subtitle}</div>` : ""}
-              ${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${a ? i`<div class="date">${a}</div>` : ""}
+              ${this.title ? s`<div class="header"><span class="title">${this.title}</span></div>` : ""}
+              ${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${n ? s`<div class="date">${n}</div>` : ""}
             </div>
             <div class="content links">
               <slot></slot>
@@ -154,13 +162,13 @@ let t = class extends u {
           </div>
         `);
       case "action":
-        return c(i`
+        return l(s`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
-              ${this.subtitle ? i`<div class="sub-label">${this.subtitle}</div>` : ""}
-              ${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${a ? i`<div class="date">${a}</div>` : ""}
+              ${this.title ? s`<div class="header"><span class="title">${this.title}</span></div>` : ""}
+              ${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${n ? s`<div class="date">${n}</div>` : ""}
             </div>
             <div class="content actions">
               <slot></slot>
@@ -168,28 +176,33 @@ let t = class extends u {
           </div>
         `);
       default:
-        return c(i`
+        return l(s`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
-              ${this.subtitle ? i`<div class="sub-label">${this.subtitle}</div>` : ""}
-              ${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${a ? i`<div class="date">${a}</div>` : ""}
+              ${this.title ? s`<div class="header">${c(!!this.cardHref)}</div>` : ""}
+              ${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${n ? s`<div class="date">${n}</div>` : ""}
             </div>
           </div>
         `);
     }
   }
-  updated(o) {
-    super.updated(o), o.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), o.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), o.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), o.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), o.has("type") && (this.type === "list" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density")), this.style.setProperty("--scb-card-media-fit", this.mediaFit || "cover"), this.style.setProperty("--scb-card-media-position", this.mediaPosition || "center");
+  updated(i) {
+    super.updated(i), i.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), i.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), i.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), i.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), i.has("type") && (this.type === "list" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density")), this.style.setProperty("--scb-card-media-fit", this.mediaFit || "cover"), this.style.setProperty("--scb-card-media-position", this.mediaPosition || "center"), (i.has("spacing") || i.has("spacingTop") || i.has("spacingBottom")) && u(this, h, m).call(this);
   }
-  async firstUpdated(o) {
-    t.__iconLoaded || (await import("@material/web/icon/icon.js"), t.__iconLoaded = !0), t.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), t.__rippleLoaded = !0);
+  async firstUpdated(i) {
+    t.__iconLoaded || (await import("@material/web/icon/icon.js"), t.__iconLoaded = !0), t.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), t.__rippleLoaded = !0), u(this, h, m).call(this);
   }
 };
+h = /* @__PURE__ */ new WeakSet();
+m = function() {
+  const i = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? i, o = this.mapSpacingToken(this.spacingBottom) ?? i;
+  e ? this.style.setProperty("--scb-card-spacing-block-start", e) : this.style.removeProperty("--scb-card-spacing-block-start"), o ? this.style.setProperty("--scb-card-spacing-block-end", o) : this.style.removeProperty("--scb-card-spacing-block-end");
+};
 t.__iconLoaded = !1;
 t.__rippleLoaded = !1;
-t.styles = m`
+t.styles = v`
     :host {
       display: block;
       box-sizing: border-box;
@@ -202,6 +215,9 @@ t.styles = m`
       --scb-card-horizontal-media-max: 176px;
       --scb-card-horizontal-media-min: 96px;
       --scb-card-horizontal-media-aspect: 16 / 9;
+
+      margin-block-start: var(--scb-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-card-spacing-block-end, 0);
     }
     :host([type='standard']) {
       --scb-card-max-w: var(--scb-card-standard-max-w);
@@ -492,101 +508,110 @@ t.styles = m`
       --scb-list-bg: var(--md-sys-color-surface-dim);
     }
   `;
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "type", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "variant", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "direction", 2);
-e([
-  s({ type: String, attribute: "media-type" })
+a([
+  r({ type: String, attribute: "media-type" })
 ], t.prototype, "mediaType", 2);
-e([
-  s({ type: String, attribute: "media-href" })
+a([
+  r({ type: String, attribute: "media-href" })
 ], t.prototype, "mediaHref", 2);
-e([
-  s({ type: String, attribute: "media-alt" })
+a([
+  r({ type: String, attribute: "media-alt" })
 ], t.prototype, "mediaAlt", 2);
-e([
-  s({ type: String, attribute: "media-srcset" })
+a([
+  r({ type: String, attribute: "media-srcset" })
 ], t.prototype, "mediaSrcset", 2);
-e([
-  s({ type: String, attribute: "media-sizes" })
+a([
+  r({ type: String, attribute: "media-sizes" })
 ], t.prototype, "mediaSizes", 2);
-e([
-  s({ type: String, attribute: "media-loading" })
+a([
+  r({ type: String, attribute: "media-loading" })
 ], t.prototype, "mediaLoading", 2);
-e([
-  s({ type: String, attribute: "media-decoding" })
+a([
+  r({ type: String, attribute: "media-decoding" })
 ], t.prototype, "mediaDecoding", 2);
-e([
-  s({ type: String, attribute: "media-fetchpriority" })
+a([
+  r({ type: String, attribute: "media-fetchpriority" })
 ], t.prototype, "mediaFetchPriority", 2);
-e([
-  s({ type: String, attribute: "media-fit" })
+a([
+  r({ type: String, attribute: "media-fit" })
 ], t.prototype, "mediaFit", 2);
-e([
-  s({ type: String, attribute: "media-position" })
+a([
+  r({ type: String, attribute: "media-position" })
 ], t.prototype, "mediaPosition", 2);
-e([
-  s({ type: String, attribute: "media-width" })
+a([
+  r({ type: String, attribute: "media-width" })
 ], t.prototype, "mediaWidth", 2);
-e([
-  s({ type: String, attribute: "media-height" })
+a([
+  r({ type: String, attribute: "media-height" })
 ], t.prototype, "mediaHeight", 2);
-e([
-  s({ type: String, attribute: "media-aspect" })
+a([
+  r({ type: String, attribute: "media-aspect" })
 ], t.prototype, "mediaAspect", 2);
-e([
-  s({ type: Boolean, attribute: "media-placeholder" })
+a([
+  r({ type: Boolean, attribute: "media-placeholder" })
 ], t.prototype, "mediaPlaceholder", 2);
-e([
-  s({ type: String, attribute: "card-href", reflect: !0 })
+a([
+  r({ type: String, attribute: "card-href", reflect: !0 })
 ], t.prototype, "cardHref", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "title", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "subtitle", 2);
-e([
-  s({ type: String, attribute: "supporting-text", reflect: !0 })
+a([
+  r({ type: String, attribute: "supporting-text", reflect: !0 })
 ], t.prototype, "supportingText", 2);
-e([
-  s({ type: Date, reflect: !0 })
+a([
+  r({ type: Date, reflect: !0 })
 ], t.prototype, "date", 2);
-e([
-  s({ type: String, attribute: "social-comments-text", reflect: !0 })
+a([
+  r({ type: String, attribute: "social-comments-text", reflect: !0 })
 ], t.prototype, "commentsText", 2);
-e([
-  s({ type: Number, attribute: "social-comments", reflect: !0 })
+a([
+  r({ type: Number, attribute: "social-comments", reflect: !0 })
 ], t.prototype, "comments", 2);
-e([
-  s({ type: String, attribute: "social-likes-text", reflect: !0 })
+a([
+  r({ type: String, attribute: "social-likes-text", reflect: !0 })
 ], t.prototype, "likesText", 2);
-e([
-  s({ type: Number, attribute: "social-likes", reflect: !0 })
+a([
+  r({ type: Number, attribute: "social-likes", reflect: !0 })
 ], t.prototype, "likes", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "sizing", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "width", 2);
-e([
-  s({ type: String, reflect: !0, attribute: "max-width" })
+a([
+  r({ type: String, reflect: !0, attribute: "max-width" })
 ], t.prototype, "maxWidth", 2);
-e([
-  s({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], t.prototype, "height", 2);
-e([
-  s({ type: String, reflect: !0, attribute: "max-height" })
+a([
+  r({ type: String, reflect: !0, attribute: "max-height" })
 ], t.prototype, "maxHeight", 2);
-t = e([
-  b("scb-card")
+a([
+  r({ type: String, reflect: !0 })
+], t.prototype, "spacing", 2);
+a([
+  r({ type: String, attribute: "spacing-top", reflect: !0 })
+], t.prototype, "spacingTop", 2);
+a([
+  r({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], t.prototype, "spacingBottom", 2);
+t = a([
+  f("scb-card")
 ], t);
 export {
   t as ScbCard

package/scb-checkbox/scb-checkbox-group.d.ts

@@ -3,7 +3,9 @@ export declare class ScbCheckboxGroup extends LitElement {
     #private;
     orientation: 'vertical' | 'horizontal';
     disabled: boolean;
-    spacing: 'item' | 'group';
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
     firstUpdated(): void;

package/scb-checkbox/scb-checkbox-group.js

@@ -1,76 +1,95 @@
-import { css as g, LitElement as b, html as f } from "lit";
-import { property as h, customElement as u } from "lit/decorators.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t) => {
+import { css as k, LitElement as y, html as x } from "lit";
+import { property as l, customElement as _ } from "lit/decorators.js";
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, v = (t) => {
   throw TypeError(t);
-}, c = (t, e, r, s) => {
-  for (var o = s > 1 ? void 0 : s ? y(e, r) : e, n = t.length - 1, l; n >= 0; n--)
-    (l = t[n]) && (o = (s ? l(e, r, o) : l(o)) || o);
-  return s && o && v(e, r, o), o;
-}, x = (t, e, r) => e.has(t) || d("Cannot " + r), p = (t, e, r) => (x(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? d("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), i;
-let a = class extends b {
+}, c = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? C(e, s) : e, g = t.length - 1, b; g >= 0; g--)
+    (b = t[g]) && (o = (i ? b(e, s, o) : b(o)) || o);
+  return i && o && S(e, s, o), o;
+}, m = (t, e, s) => e.has(t) || v("Cannot " + s), d = (t, e, s) => (m(t, e, "read from private field"), s ? s.call(t) : e.get(t)), f = (t, e, s) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), p = (t, e, s) => (m(t, e, "access private method"), s), n, a, u, h;
+let r = class extends y {
   constructor() {
-    super(...arguments), this.orientation = "vertical", this.disabled = !1, this.spacing = "group", _(this, i, () => {
-      var r;
-      const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
+    super(...arguments), f(this, a), this.orientation = "vertical", this.disabled = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", f(this, n, () => {
+      var s;
+      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
       if (!t) return;
-      const e = t.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "scb-checkbox");
-      for (const s of e)
-        this.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled"), this.orientation === "horizontal" ? s.setAttribute("orientation", "horizontal") : s.removeAttribute("orientation"), this.spacing === "group" ? s.style.setProperty("--scb-checkbox-gap", "0") : s.style.removeProperty("--scb-checkbox-gap");
+      const e = t.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "scb-checkbox");
+      for (const i of e)
+        this.disabled ? i.setAttribute("disabled", "") : i.removeAttribute("disabled"), this.orientation === "horizontal" ? i.setAttribute("orientation", "horizontal") : i.removeAttribute("orientation");
     });
   }
   render() {
     const t = this.orientation === "horizontal" ? "row" : "column";
-    return f`
+    return x`
       <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${t}`}>
-        <slot @slotchange=${p(this, i)}></slot>
+        <slot @slotchange=${d(this, n)}></slot>
       </div>
     `;
   }
   firstUpdated() {
-    p(this, i).call(this);
+    p(this, a, u).call(this), d(this, n).call(this);
   }
   updated(t) {
-    (t.has("disabled") || t.has("orientation") || t.has("spacing")) && p(this, i).call(this);
+    (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && p(this, a, u).call(this), (t.has("disabled") || t.has("orientation")) && d(this, n).call(this);
   }
 };
-i = /* @__PURE__ */ new WeakMap();
-a.styles = g`
+n = /* @__PURE__ */ new WeakMap();
+a = /* @__PURE__ */ new WeakSet();
+u = function() {
+  const t = p(this, a, h).call(this, this.spacing), e = p(this, a, h).call(this, this.spacingTop) ?? t, s = p(this, a, h).call(this, this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-checkbox-group-spacing-block-start", e) : this.style.removeProperty("--scb-checkbox-group-spacing-block-start"), s ? this.style.setProperty("--scb-checkbox-group-spacing-block-end", s) : this.style.removeProperty("--scb-checkbox-group-spacing-block-end");
+};
+h = function(t) {
+  if (!t) return;
+  const e = String(t).trim();
+  if (e)
+    return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
+};
+r.styles = k`
     :host {
       display: block;
+      /* Vertikal standard-spacing mellan items i gruppen */
       --scb-checkbox-gap: var(--spacing-4, 12px);
+
+      margin-block-start: var(--scb-checkbox-group-spacing-block-start, 0);
+      margin-block-end: var(--scb-checkbox-group-spacing-block-end, 0);
+    }
+
+    /* Horisontell standard-spacing mellan items om spacing för gruppen inte overrideas via CSS-variabel */
+    :host([orientation='horizontal']) {
+      --scb-checkbox-gap: var(--spacing-8, 32px);
     }
 
     .g {
       display: flex;
       flex-direction: var(--_dir, column);
       align-items: flex-start;
-      gap: 0;
-    }
-
-    :host([spacing='group']) .g {
       gap: var(--scb-checkbox-gap);
     }
 
-    :host([orientation='horizontal']) {
-      --scb-checkbox-gap: var(--spacing-8, 32px);
-    }
-
-    :host([spacing='group']) ::slotted(scb-checkbox) {
+    /* När checkboxar ligger i en grupp ska spacing ägas av gruppen, inte av enskilda items */
+    ::slotted(scb-checkbox) {
       --scb-checkbox-gap: 0;
     }
   `;
 c([
-  h({ type: String, reflect: !0 })
-], a.prototype, "orientation", 2);
+  l({ type: String, reflect: !0 })
+], r.prototype, "orientation", 2);
+c([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+c([
+  l({ type: String, reflect: !0 })
+], r.prototype, "spacing", 2);
 c([
-  h({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
+  l({ type: String, attribute: "spacing-top", reflect: !0 })
+], r.prototype, "spacingTop", 2);
 c([
-  h({ type: String, reflect: !0 })
-], a.prototype, "spacing", 2);
-a = c([
-  u("scb-checkbox-group")
-], a);
+  l({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], r.prototype, "spacingBottom", 2);
+r = c([
+  _("scb-checkbox-group")
+], r);
 export {
-  a as ScbCheckboxGroup
+  r as ScbCheckboxGroup
 };

package/scb-checkbox/scb-checkbox.d.ts

@@ -1,16 +1,27 @@
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class ScbCheckbox extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     disabled: boolean;
     indeterminate: boolean;
     checked: boolean;
     label: string;
     supportingText: string;
     ariaLabel: string;
+    name: string;
+    value: string;
+    private _form;
+    private _formResetHandler;
+    private _initialChecked;
     private _checkboxId;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
+    formDisabledCallback(disabled: boolean): void;
     private __syncInnerAria;
+    private __syncFormValue;
     static styles: import('lit').CSSResult;
     render(): TemplateResult;
 }