scb-wc-test 0.1.105 → 0.1.107

package/scb-viz/scb-viz.js

@@ -1,19 +1,21 @@
-import { css as h, LitElement as v, html as t } from "lit";
-import { property as r, customElement as m } from "lit/decorators.js";
+import { css as y, LitElement as u, html as i } from "lit";
+import { property as l, customElement as f } from "lit/decorators.js";
 import "../scb-chip/scb-chip.js";
 import "../scb-segmented-button/scb-segmented-button.js";
 import "../scb-segmented-button/scb-segmented-item.js";
 import "../scb-accordion/scb-accordion.js";
 import "../scb-divider/scb-divider.js";
 import "../scb-horizontal-scroller/scb-horizontal-scroller.js";
-var b = Object.defineProperty, p = Object.getOwnPropertyDescriptor, o = (i, s, c, l) => {
-  for (var e = l > 1 ? void 0 : l ? p(s, c) : s, n = i.length - 1, d; n >= 0; n--)
-    (d = i[n]) && (e = (l ? d(s, c, e) : d(e)) || e);
-  return l && e && b(s, c, e), e;
-};
-let a = class extends v {
+var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, g = (t) => {
+  throw TypeError(t);
+}, r = (t, e, s, c) => {
+  for (var d = c > 1 ? void 0 : c ? S(e, s) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (d = (c ? o(e, s, d) : o(d)) || d);
+  return c && d && $(e, s, d), d;
+}, x = (t, e, s) => e.has(t) || g("Cannot " + s), w = (t, e, s) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), p = (t, e, s) => (x(t, e, "access private method"), s), h, b, v;
+let a = class extends u {
   constructor() {
-    super(...arguments), this.variant = "Standard", this.selectedChip = "Diagram", this.title = "", this.subtitle = "", this.description = "", this.comment = "", this.source = "", this.footnote = "", this.lang = "sv", this.imageHref = "";
+    super(...arguments), w(this, h), this.variant = "Standard", this.selectedChip = "Diagram", this.title = "", this.subtitle = "", this.description = "", this.comment = "", this.source = "", this.footnote = "", this.lang = "sv", this.imageHref = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
   }
   // Labels as getters so they react to lang changes
   get descriptionLabel() {
@@ -31,231 +33,251 @@ let a = class extends v {
   get footnoteLabel() {
     return this.lang === "en" ? "Footnotes" : "Fotnot";
   }
-  firstUpdated() {
+  firstUpdated(t) {
     var s;
-    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="table"]');
-    i && (i.addEventListener("slotchange", () => this._styleSlottedTable()), this._styleSlottedTable());
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+      'slot[name="table"]'
+    );
+    e && (e.addEventListener("slotchange", () => this._styleSlottedTable()), this._styleSlottedTable()), p(this, h, b).call(this);
   }
-  updated() {
-    this._styleSlottedTable();
+  updated(t) {
+    super.updated(t), this._styleSlottedTable(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && p(this, h, b).call(this);
   }
   _styleSlottedTable() {
-    var c;
-    const i = (c = this.shadowRoot) == null ? void 0 : c.querySelector('slot[name="table"]');
-    if (!i) return;
-    i.assignedElements({ flatten: !0 }).forEach((l) => {
-      l.tagName === "TABLE" && (l.style.borderCollapse = "collapse", l.style.width = "100%", l.querySelectorAll("tbody tr:nth-child(odd)").forEach((e) => {
-        e.style.background = "var(--md-sys-color-surface-container)";
-      }), l.querySelectorAll("th").forEach((e) => {
-        e.style.border = "1px solid var(--md-sys-color-on-surface)", e.style.padding = "8px";
-      }), l.querySelectorAll("td").forEach((e) => {
-        e.style.border = "1px solid var(--md-sys-color-on-surface)", e.style.padding = "8px";
-      }), l.querySelectorAll("tr").forEach((e) => {
-        const n = Array.from(e.children).filter(
-          (d) => d.tagName === "TD" || d.tagName === "TH"
-        );
-        n.length > 0 && (n[0].style.borderLeft = "none", n[n.length - 1].style.borderRight = "none");
-      }));
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+      'slot[name="table"]'
+    );
+    if (!t) return;
+    t.assignedElements({ flatten: !0 }).forEach((c) => {
+      if (c.tagName === "TABLE") {
+        const d = c;
+        d.style.borderCollapse = "collapse", d.style.width = "100%", c.querySelectorAll("tbody tr:nth-child(odd)").forEach((n) => {
+          n.style.background = "var(--md-sys-color-surface-container)";
+        }), c.querySelectorAll("th").forEach((n) => {
+          const o = n;
+          o.style.border = "1px solid var(--md-sys-color-on-surface)", o.style.padding = "8px";
+        }), c.querySelectorAll("td").forEach((n) => {
+          const o = n;
+          o.style.border = "1px solid var(--md-sys-color-on-surface)", o.style.padding = "8px";
+        }), c.querySelectorAll("tr").forEach((n) => {
+          const o = Array.from(n.children).filter(
+            (m) => m.tagName === "TD" || m.tagName === "TH"
+          );
+          o.length > 0 && (o[0].style.borderLeft = "none", o[o.length - 1].style.borderRight = "none");
+        });
+      }
     });
   }
   render() {
     switch (this.variant) {
       case "Table":
-        return t`
+        return i`
           <div part="container">
             <div class="header">
-            ${this.title ? t`
-                <div class="label">${this.title}</div>` : ""}
-            ${this.subtitle ? t`
-                <div class="subtitle">${this.subtitle}</div>` : ""}
+              ${this.title ? i` <div class="label">${this.title}</div> ` : ""}
+              ${this.subtitle ? i` <div class="subtitle">${this.subtitle}</div> ` : ""}
             </div>
             <div class="content">
-              <scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
+              <scb-horizontal-scroller
+                width="600px"
+                class="table-scroller"
+                variant="inline"
+                show-scrollbar
+              >
                 <slot name="table"></slot>
               </scb-horizontal-scroller>
             </div>
             <div class="footer">
-              ${this.description ? t`
-              <div class="description section">
-                <div class="secondary-label">${this.descriptionLabel}</div>
-                <div>${this.description}</div>
-              </div>
-              ` : ""}
-              ${this.comment || this.source || this.footnote ? t`
-              <scb-divider></scb-divider>
-              <scb-accordion>
-                <scb-accordion-item
-                  title="${this.moreAboutStatsLabel}"
-                >
-                  <div class="more-about-stats-content">    
-                    ${this.comment ? t`
-                    <div class="section">
-                      <div class="secondary-label">${this.commentLabel}</div>
-                      <div>${this.comment}</div>
-                    </div>
-                    ` : ""}
-                    ${this.source ? t`
-                      <div class="section">
-                      
-                        <div class="secondary-label">${this.sourceLabel}</div>
-                        <div>${this.source}</div>
-                      </div>` : ""}
-                    ${this.footnote ? t`
-                    <div class="section">
-                      <div class="secondary-label">${this.footnoteLabel}</div>
-                      <div>${this.footnote}</div>
+              ${this.description ? i`
+                    <div class="description section">
+                      <div class="secondary-label">${this.descriptionLabel}</div>
+                      <div>${this.description}</div>
                     </div>
-                    ` : ""}
-                  </div>
-                </scb-accordion-item>
-              </scb-accordion>
-              ` : ""}
+                  ` : ""}
+              ${this.comment || this.source || this.footnote ? i`
+                    <scb-divider></scb-divider>
+                    <scb-accordion>
+                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
+                        <div class="more-about-stats-content">
+                          ${this.comment ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.commentLabel}</div>
+                                  <div>${this.comment}</div>
+                                </div>
+                              ` : ""}
+                          ${this.source ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.sourceLabel}</div>
+                                  <div>${this.source}</div>
+                                </div>
+                              ` : ""}
+                          ${this.footnote ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.footnoteLabel}</div>
+                                  <div>${this.footnote}</div>
+                                </div>
+                              ` : ""}
+                        </div>
+                      </scb-accordion-item>
+                    </scb-accordion>
+                  ` : ""}
             </div>
             <slot></slot>
           </div>
         `;
       case "Image":
-        return t`
+        return i`
           <div part="container">
             <div class="header">
-              ${this.title ? t`
-                <div class="label">${this.title}</div>
-                ` : ""}
-              ${this.subtitle ? t`
-                <div class="subtitle">${this.subtitle}</div>
-                ` : ""}
+              ${this.title ? i` <div class="label">${this.title}</div> ` : ""}
+              ${this.subtitle ? i` <div class="subtitle">${this.subtitle}</div> ` : ""}
             </div>
             <div class="content image-content">
-              <img src="${this.imageHref}" alt="Image figure"/>
+              <img src="${this.imageHref}" alt="Image figure" />
             </div>
             <div class="footer">
-              ${this.description ? t`
-                <div class="description section">
-                  <div class="secondary-label">${this.descriptionLabel}</div>
-                  <div>${this.description}</div>
-                </div>
-              ` : ""}
-              ${this.comment || this.source || this.footnote ? t`
-              <scb-divider></scb-divider>
-              <scb-accordion>
-                <scb-accordion-item
-                  title="${this.moreAboutStatsLabel}"
-                >
-                  <div class="more-about-stats-content">    
-                  ${this.comment ? t`
-                    <div class="section">
-                      <div class="secondary-label">${this.commentLabel}</div>
-                      <div>${this.comment}</div>
-                    </div>
-                    ` : ""}
-                    ${this.source ? t`
-                    <div class="section">
-                      <div class="secondary-label">${this.sourceLabel}</div>
-                      <div>${this.source}</div>
-                    </div>
-                    ` : ""}
-                    ${this.footnote ? t`
-                    <div class="section">
-                      <div class="secondary-label">${this.footnoteLabel}</div>
-                      <div>${this.footnote}</div>
+              ${this.description ? i`
+                    <div class="description section">
+                      <div class="secondary-label">${this.descriptionLabel}</div>
+                      <div>${this.description}</div>
                     </div>
-                    ` : ""}
-                  </div>
-                </scb-accordion-item>
-              </scb-accordion>
-              ` : ""}
+                  ` : ""}
+              ${this.comment || this.source || this.footnote ? i`
+                    <scb-divider></scb-divider>
+                    <scb-accordion>
+                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
+                        <div class="more-about-stats-content">
+                          ${this.comment ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.commentLabel}</div>
+                                  <div>${this.comment}</div>
+                                </div>
+                              ` : ""}
+                          ${this.source ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.sourceLabel}</div>
+                                  <div>${this.source}</div>
+                                </div>
+                              ` : ""}
+                          ${this.footnote ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.footnoteLabel}</div>
+                                  <div>${this.footnote}</div>
+                                </div>
+                              ` : ""}
+                        </div>
+                      </scb-accordion-item>
+                    </scb-accordion>
+                  ` : ""}
             </div>
             <slot></slot>
           </div>
         `;
-      default:
-        const i = this.selectedChip === "Diagram" ? "chip-diagram" : this.selectedChip === "Table" ? "chip-table" : "";
-        return this.className !== i && (this.className = i), t`
-            <div part="container">
-              <div class="header">
-                ${this.title ? t`
-                  <div class="label">${this.title}</div>
-                  ` : ""}
-                ${this.subtitle ? t`
-                  <div class="subtitle">${this.subtitle}</div>
-                  ` : ""}
-              </div>
-              ${this.variant === "Standard" ? t`
-                <div class="flipp-wrapper">
-                  <scb-segmented-button
-                    .value=${this.selectedChip || ""}
-                    @change=${(s) => this._onSegmentedChange(s)}
-                  >
-                    <scb-segmented-item
-                      label=${this.lang === "en" ? "Figure" : "Diagram"}
-                      value="Diagram"
-                      icon="bar_chart"
-                    ></scb-segmented-item>
-                    <scb-segmented-item
-                      label="${this.lang === "en" ? "Table" : "Tabell"}"
-                      value="Table"
-                      icon="table"
-                    ></scb-segmented-item>
-                  </scb-segmented-button>
-                </div>
-              ` : ""}
-              <div class="content">
-                <scb-horizontal-scroller width="600px" class="diagram-scroller" variant="inline" show-scrollbar>
-                  <slot name="diagram"></slot>
-                </scb-horizontal-scroller>
-                <scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
-                  <slot name="table"></slot>
-                </scb-horizontal-scroller>
-              </div>
-              <div class="footer">
-                ${this.description ? t`
-                <div class="description section">
-                  <div class="secondary-label">${this.descriptionLabel}</div>
-                  <div>${this.description}</div>
-                </div>
-                ` : ""}
-                ${this.comment || this.source || this.footnote ? t`
-                <scb-divider></scb-divider>
-                  <scb-accordion>
-                    <scb-accordion-item
-                      title="${this.moreAboutStatsLabel}"
+      default: {
+        const t = this.selectedChip === "Diagram" ? "chip-diagram" : this.selectedChip === "Table" ? "chip-table" : "";
+        return this.className !== t && (this.className = t), i`
+          <div part="container">
+            <div class="header">
+              ${this.title ? i` <div class="label">${this.title}</div> ` : ""}
+              ${this.subtitle ? i` <div class="subtitle">${this.subtitle}</div> ` : ""}
+            </div>
+            ${this.variant === "Standard" ? i`
+                  <div class="flipp-wrapper">
+                    <scb-segmented-button
+                      .value=${this.selectedChip || ""}
+                      @change=${(e) => this._onSegmentedChange(e)}
                     >
-                      <div class="more-about-stats-content">
-                        ${this.comment ? t`
-                          <div class="section">
-                            <div class="secondary-label">${this.commentLabel}</div>
-                            <div>${this.comment}</div>
-                          </div>
-                        ` : ""}
-                        ${this.source ? t`
-                          <div class="section">
-                            <div class="secondary-label">${this.sourceLabel}</div>
-                            <div>${this.source}</div>
-                          </div>
-                        ` : ""}
-                        ${this.footnote ? t`
-                        <div class="section">
-                          <div class="secondary-label">${this.footnoteLabel}</div>
-                          <div>${this.footnote}</div>
-                        </div>
-                        ` : ""}
-                      </div>
-                    </scb-accordion-item>
-                  </scb-accordion>
+                      <scb-segmented-item
+                        label=${this.lang === "en" ? "Figure" : "Diagram"}
+                        value="Diagram"
+                        icon="bar_chart"
+                      ></scb-segmented-item>
+                      <scb-segmented-item
+                        label="${this.lang === "en" ? "Table" : "Tabell"}"
+                        value="Table"
+                        icon="table"
+                      ></scb-segmented-item>
+                    </scb-segmented-button>
+                  </div>
                 ` : ""}
-              </div>
-              <slot></slot>
+            <div class="content">
+              <scb-horizontal-scroller
+                width="600px"
+                class="diagram-scroller"
+                variant="inline"
+                show-scrollbar
+              >
+                <slot name="diagram"></slot>
+              </scb-horizontal-scroller>
+              <scb-horizontal-scroller
+                width="600px"
+                class="table-scroller"
+                variant="inline"
+                show-scrollbar
+              >
+                <slot name="table"></slot>
+              </scb-horizontal-scroller>
             </div>
-          `;
+            <div class="footer">
+              ${this.description ? i`
+                    <div class="description section">
+                      <div class="secondary-label">${this.descriptionLabel}</div>
+                      <div>${this.description}</div>
+                    </div>
+                  ` : ""}
+              ${this.comment || this.source || this.footnote ? i`
+                    <scb-divider></scb-divider>
+                    <scb-accordion>
+                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
+                        <div class="more-about-stats-content">
+                          ${this.comment ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.commentLabel}</div>
+                                  <div>${this.comment}</div>
+                                </div>
+                              ` : ""}
+                          ${this.source ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.sourceLabel}</div>
+                                  <div>${this.source}</div>
+                                </div>
+                              ` : ""}
+                          ${this.footnote ? i`
+                                <div class="section">
+                                  <div class="secondary-label">${this.footnoteLabel}</div>
+                                  <div>${this.footnote}</div>
+                                </div>
+                              ` : ""}
+                        </div>
+                      </scb-accordion-item>
+                    </scb-accordion>
+                  ` : ""}
+            </div>
+            <slot></slot>
+          </div>
+        `;
+      }
     }
   }
-  _onSegmentedChange(i) {
-    var c;
-    const s = (c = i.detail) == null ? void 0 : c.value;
-    this.selectedChip === s ? this.selectedChip = null : this.selectedChip = s;
+  _onSegmentedChange(t) {
+    var s;
+    const e = (s = t.detail) == null ? void 0 : s.value;
+    this.selectedChip === e ? this.selectedChip = null : this.selectedChip = e;
   }
 };
-a.styles = h`
+h = /* @__PURE__ */ new WeakSet();
+b = function() {
+  const t = p(this, h, v).call(this, this.spacing), e = p(this, h, v).call(this, this.spacingTop) ?? t, s = p(this, h, v).call(this, this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-viz-spacing-block-start", e) : this.style.removeProperty("--scb-viz-spacing-block-start"), s ? this.style.setProperty("--scb-viz-spacing-block-end", s) : this.style.removeProperty("--scb-viz-spacing-block-end");
+};
+v = 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;
+};
+a.styles = y`
     :host {
       display: block;
       font-family: var(--brand-font);
@@ -265,8 +287,11 @@ a.styles = h`
       max-width: 100%;
       border-radius: var(--spacing-04, 16px);
       border: 1px solid var(--md-sys-color-outline-variant);
-      
+      /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+      margin-block-start: var(--scb-viz-spacing-block-start, 0);
+      margin-block-end: var(--scb-viz-spacing-block-end, 0);
     }
+
     scb-segmented-button {
       --scb-segmented-button-height: var(--icon-size-small);
     }
@@ -277,65 +302,76 @@ a.styles = h`
       line-height: var(--md-sys-typescale-title-large-line-height);
       letter-spacing: var(--md-sys-typescale-title-large-tracking);
     }
-    .sub-label{
+
+    .sub-label {
       font-size: var(--md-sys-typescale-body-large-size);
       line-height: var(--md-sys-typescale-body-large-line-height);
       letter-spacing: var(--md-sys-typescale-body-large-tracking);
     }
+
     .secondary-label {
       font-size: var(--md-sys-typescale-title-medium-size);
       font-weight: var(--weight-semibold);
       line-height: var(--md-sys-typescale-title-medium-line-height);
       letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     }
+
     .section {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-2); 
+      gap: var(--spacing-2);
     }
+
     .more-about-stats-content {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-7);
-      max-width: 600px
+      max-width: 600px;
     }
+
     .header {
       margin-bottom: var(--spacing-7);
-      max-width: 600px
+      max-width: 600px;
     }
+
     .flipp-wrapper {
       margin-bottom: var(--spacing-9);
-      max-width: 234px
+      max-width: 234px;
     }
-    .description{
+
+    .description {
       margin-bottom: var(--spacing-8);
     }
+
     .footer {
       margin-top: var(--spacing-7);
-      
     }
-    .description.section{
-    max-width: 600px
+
+    .description.section {
+      max-width: 600px;
     }
+
     .table-scroller,
     .diagram-scroller {
       display: none;
     }
-    :host([variant='Table']) slot[name="table"] {
+
+    :host([variant='Table']) slot[name='table'] {
       display: block;
     }
     :host([variant='Table']) .table-scroller {
       display: flex;
     }
+
     :host([variant='Image']) {
       img {
         height: auto;
         max-width: 100%;
       }
-      slot[name="table"] {
+      slot[name='table'] {
         display: none;
       }
-      slot[name="diagram"] {
+      slot[name='diagram'] {
         display: none;
       }
       .image-content {
@@ -352,57 +388,63 @@ a.styles = h`
     :host([variant='Standard'].chip-diagram) .diagram-scroller {
       display: flex;
     }
-     :host([variant='Standard'].chip-table) .table-scroller {
+    :host([variant='Standard'].chip-table) .table-scroller {
       display: flex;
     }
-    :host([variant='Standard'].chip-table) slot[name="table"] {
+    :host([variant='Standard'].chip-table) slot[name='table'] {
       display: block;
     }
-    :host([variant='Standard'].chip-table) slot[name="diagram"] {
+    :host([variant='Standard'].chip-table) slot[name='diagram'] {
       display: none;
     }
-    :host([variant='Standard'].chip-diagram) slot[name="table"] {
+    :host([variant='Standard'].chip-diagram) slot[name='table'] {
       display: none;
     }
-    :host([variant='Standard'].chip-diagram) slot[name="diagram"] {
+    :host([variant='Standard'].chip-diagram) slot[name='diagram'] {
       display: block;
     }
-
-
-
   `;
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "variant", 2);
-o([
-  r({ type: String })
+r([
+  l({ type: String })
 ], a.prototype, "selectedChip", 2);
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "title", 2);
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "subtitle", 2);
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "description", 2);
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "comment", 2);
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "source", 2);
-o([
-  r({ type: String, reflect: !0 })
+r([
+  l({ type: String, reflect: !0 })
 ], a.prototype, "footnote", 2);
-o([
-  r({ type: String, reflect: !0, attribute: "lang" })
+r([
+  l({ type: String, reflect: !0, attribute: "lang" })
 ], a.prototype, "lang", 2);
-o([
-  r({ type: String, reflect: !0, attribute: "image-href" })
+r([
+  l({ type: String, reflect: !0, attribute: "image-href" })
 ], a.prototype, "imageHref", 2);
-a = o([
-  m("scb-viz")
+r([
+  l({ type: String, reflect: !0 })
+], a.prototype, "spacing", 2);
+r([
+  l({ type: String, attribute: "spacing-top", reflect: !0 })
+], a.prototype, "spacingTop", 2);
+r([
+  l({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], a.prototype, "spacingBottom", 2);
+a = r([
+  f("scb-viz")
 ], a);
 export {
   a as ScbViz