scb-wc-test 0.1.81 → 0.1.82

package/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -1,16 +1,16 @@
-import { css as p, LitElement as g, html as h } from "lit";
-import { property as f, customElement as v } from "lit/decorators.js";
+import { css as g, LitElement as v, html as a } from "lit";
+import { property as u, customElement as w } from "lit/decorators.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-button/scb-button.js";
 import "@material/web/focus/md-focus-ring.js";
-var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (t, l, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? S(l, o) : l, i = t.length - 1, c; i >= 0; i--)
+var S = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, l, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? y(l, o) : l, i = t.length - 1, c; i >= 0; i--)
     (c = t[i]) && (s = (r ? c(l, o, s) : c(s)) || s);
-  return r && s && w(l, o, s), s;
+  return r && s && S(l, o, s), s;
 };
-let a = class extends g {
+let n = class extends v {
   constructor() {
-    super(...arguments), this.variant = "standard", this.width = "100%", this.showScrollbar = !1, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.updateScrollButtons = () => {
+    super(...arguments), this.variant = "standard", this.width = "100%", this.showScrollbar = !0, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.contentFlex = !1, this.updateScrollButtons = () => {
       var o;
       this.requestUpdate();
       const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".scb-horizontal-scroller");
@@ -57,8 +57,8 @@ let a = class extends g {
     }));
   }
   firstUpdated() {
-    var i, c, u, b;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-horizontal-scroller"), l = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".scroll-shadow-left"), o = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".scroll-shadow-right"), r = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot");
+    var i, c, b, f;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-horizontal-scroller"), l = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".scroll-shadow-left"), o = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".scroll-shadow-right"), r = (f = this.shadowRoot) == null ? void 0 : f.querySelector("slot");
     t && (t.addEventListener("scroll", this.handleScroll), t.addEventListener("wheel", function(e) {
       e.deltaY !== 0 && (e.preventDefault(), t.scrollLeft += e.deltaY);
     }, { passive: !1 }));
@@ -68,45 +68,56 @@ let a = class extends g {
         l.style.height = `${e.height}px`, o.style.height = `${e.height}px`;
       }
     };
-    s(), r && new ResizeObserver(s).observe(r), this.updateScrollButtons();
+    s(), r && new ResizeObserver(s).observe(r), this.updateComplete.then(() => {
+      this.updateScrollButtons();
+    });
   }
   updated(t) {
-    var c, u, b, e;
-    const l = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".scroll-shadow-left"), o = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".scroll-shadow-right"), r = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot"), s = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".scb-horizontal-scroller");
-    s && (s.addEventListener("scroll", this.handleScroll), s.addEventListener("wheel", function(n) {
-      n.deltaY !== 0 && (n.preventDefault(), s.scrollLeft += n.deltaY);
-    }, { passive: !1 })), t.has("width") && this.style.setProperty("--scb-horizontal-scroller-width", this.width);
+    var c, b, f, e;
+    const l = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".scroll-shadow-left"), o = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".scroll-shadow-right"), r = (f = this.shadowRoot) == null ? void 0 : f.querySelector("slot"), s = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".scb-horizontal-scroller");
+    if (s) {
+      s.addEventListener("scroll", this.handleScroll), s.addEventListener("wheel", function(p) {
+        p.deltaY !== 0 && (p.preventDefault(), s.scrollLeft += p.deltaY);
+      }, { passive: !1 }), s.scrollLeft > 0 ? this.setAttribute("data-scroll-left", "") : this.removeAttribute("data-scroll-left");
+      const h = s;
+      h.scrollLeft + h.clientWidth < h.scrollWidth - 1 ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
+    }
+    t.has("width") && this.style.setProperty("--scb-horizontal-scroller-width", this.width);
     const i = () => {
       if (r && l && o) {
-        const n = r.getBoundingClientRect();
-        l.style.height = `${n.height}px`, o.style.height = `${n.height}px`;
+        const h = r.getBoundingClientRect();
+        l.style.height = `${h.height}px`, o.style.height = `${h.height}px`;
       }
     };
     i(), r && new ResizeObserver(i).observe(r);
   }
   render() {
-    switch (this.variant) {
+    const t = this.variant;
+    var l = !!(this.canScrollLeft || this.canScrollRight);
+    switch (t) {
       case "inline":
-        return h`
-        <div class="scb-horizontal-scroller" tabindex="0">
-          <div class="scroll-shadow-left"></div>
+        return a`
+        <div class="scb-horizontal-scroller ${l ? "canScroll" : ""}" tabindex="0">
+          ${this.variant != "inline" ? a`<div class="scroll-shadow-left"></div>` : ""}
               <slot></slot>
               <md-focus-ring inward></md-focus-ring>
-          <div class="scroll-shadow-right"></div>
+          ${this.variant != "inline" ? a`<div class="scroll-shadow-right"></div>` : ""}
         </div>
-        <div class="scroll-buttons">
-          ${this.canScrollLeft ? h`
-            <scb-button class="scroll-button-left" variant="text" label="${this.leftScrollButtonLabel}" aria-label="Scrolla vänster" icon="chevron_left" @click="${() => this.doScrollBy(-100)}"></scb-button>
-          ` : ""}
+        ${l ? a`
+          <div class="scroll-buttons">
+            ${this.canScrollLeft ? a`
+              <scb-button class="scroll-button-left" variant="text" label="${this.leftScrollButtonLabel}" aria-label="Scrolla vänster" icon="chevron_left" @click="${() => this.doScrollBy(-100)}"></scb-button>
+            ` : ""}
 
-          ${this.canScrollRight ? h`
-            <scb-button class="scroll-button-right" variant="text" label="${this.rightScrollButtonLabel}" aria-label="Scrolla höger" icon="chevron_right" trailing-icon @click="${() => this.doScrollBy(100)}"></scb-button>
-          ` : ""}
-        </div>
+            ${this.canScrollRight ? a`
+              <scb-button class="scroll-button-right" variant="text" label="${this.rightScrollButtonLabel}" aria-label="Scrolla höger" icon="chevron_right" trailing-icon @click="${() => this.doScrollBy(100)}"></scb-button>
+            ` : ""}
+          </div>
+        ` : ""}
     `;
       default:
-        return h`
-        ${this.canScrollLeft ? h`
+        return a`
+        ${this.canScrollLeft ? a`
           <scb-icon-button class="scroll-button-left" icon="chevron_left" aria-label="Scrolla vänster" variant="filled-tonal" @click="${() => this.doScrollBy(-100)}"></scb-icon-button>
         ` : ""}
         <div class="scroll-shadow-left"></div>
@@ -115,31 +126,37 @@ let a = class extends g {
           <md-focus-ring inward></md-focus-ring>
         </div>
         <div class="scroll-shadow-right"></div>
-        ${this.canScrollRight ? h`
+        ${this.canScrollRight ? a`
           <scb-icon-button class="scroll-button-right" icon="chevron_right" aria-label="Scrolla höger" variant="filled-tonal" @click="${() => this.doScrollBy(100)}"></scb-icon-button>
         ` : ""}
     `;
     }
   }
 };
-a.styles = p`
+n.styles = g`
     :host {
-      position: relative;
-      max-width: var(--scb-horizontal-scroller-width, 100%);
       display: flex;
+      position: relative;
       align-items: center;
       gap: var(--spacing-3);
       padding: 0px var(--spacing-8);
     }
     .scb-horizontal-scroller {
+      overflow-x: auto;
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;
+      width: 100%;
+    }
+    :host([show-scrollbar]) .scb-horizontal-scroller{
+     scrollbar-width: auto;
+    }
+
+    :host([content-flex]) .scb-horizontal-scroller{
       display: flex;
       flex-direction: row;
-      overflow-x: scroll;
       flex: 1 1 auto;
-      -ms-overflow-style: none;  /* IE and Edge */
-      scrollbar-width: none;
-      max-width: var(--scb-horizontal-scroller-width, 100%);
     }
+    
     .scb-horizontal-scroller::-webkit-scrollbar {
       border-radius: var(--md-sys-shape-corner-large);
       height: 4px;
@@ -161,14 +178,16 @@ a.styles = p`
       border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
     }
 
-    :host([show-scrollbar]) .scb-horizontal-scroller{
-      -ms-overflow-style: auto;  /* IE and Edge */
-      scrollbar-width: auto;
+    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll{
       padding-bottom: var(--spacing-5);
     }
     slot {
-      display: flex;
+      display: block;
       padding: var(--spacing-3);
+      min-width: var(--scb-horizontal-scroller-width, auto);
+    }
+    :host([content-flex]) .scb-horizontal-scroller slot {
+      display: flex;
     }
     .scroll-button-left {
       left: var(--spacing-5);
@@ -206,6 +225,7 @@ a.styles = p`
     :host([variant="inline"]) {
       flex-direction: column;
       align-items: unset;
+      padding: 0;
       .scroll-buttons {
         display: flex;
         gap: var(--spacing-3);
@@ -228,23 +248,26 @@ a.styles = p`
 
   `;
 d([
-  f({ type: String, reflect: !0 })
-], a.prototype, "variant", 2);
+  u({ type: String, reflect: !0 })
+], n.prototype, "variant", 2);
+d([
+  u({ type: String, reflect: !0 })
+], n.prototype, "width", 2);
 d([
-  f({ type: String, reflect: !0 })
-], a.prototype, "width", 2);
+  u({ type: Boolean, reflect: !0, attribute: "show-scrollbar" })
+], n.prototype, "showScrollbar", 2);
 d([
-  f({ type: Boolean, reflect: !0, attribute: "show-scrollbar" })
-], a.prototype, "showScrollbar", 2);
+  u({ type: String, reflect: !0, attribute: "right-scroll-button-label" })
+], n.prototype, "rightScrollButtonLabel", 2);
 d([
-  f({ type: String, reflect: !0, attribute: "right-scroll-button-label" })
-], a.prototype, "rightScrollButtonLabel", 2);
+  u({ type: String, reflect: !0, attribute: "left-scroll-button-label" })
+], n.prototype, "leftScrollButtonLabel", 2);
 d([
-  f({ type: String, reflect: !0, attribute: "left-scroll-button-label" })
-], a.prototype, "leftScrollButtonLabel", 2);
-a = d([
-  v("scb-horizontal-scroller")
-], a);
+  u({ type: Boolean, reflect: !0, attribute: "content-flex" })
+], n.prototype, "contentFlex", 2);
+n = d([
+  w("scb-horizontal-scroller")
+], n);
 export {
-  a as ScbHorizontalScroller
+  n as ScbHorizontalScroller
 };

package/scb-viz/scb-viz.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class ScbViz extends LitElement {
+    variant: 'Standard' | 'Diagram' | 'Table' | 'Image';
+    selectedChip: 'Diagram' | 'Table' | null;
+    title: string;
+    subtitle: string;
+    description: string;
+    comment: string;
+    source: string;
+    footnote: string;
+    lang: string;
+    imageHref: string;
+    get descriptionLabel(): "Description of the chart" | "Beskrivning av diagrammet";
+    get moreAboutStatsLabel(): "More about the statistics" | "Mer om statistiken";
+    get commentLabel(): "Comments" | "Kommentar";
+    get sourceLabel(): "Source" | "Källa";
+    get footnoteLabel(): "Footnotes" | "Fotnot";
+    static styles: import('lit').CSSResult;
+    firstUpdated(): void;
+    updated(): void;
+    private _styleSlottedTable;
+    render(): import('lit-html').TemplateResult<1>;
+    private _onChipSelect;
+}

package/scb-viz/scb-viz.js

@@ -0,0 +1,408 @@
+import { css as v, LitElement as h, html as t } from "lit";
+import { property as o, customElement as b } from "lit/decorators.js";
+import "../scb-chip/scb-chip.js";
+import "../scb-accordion/scb-accordion.js";
+import "../scb-divider/scb-divider.js";
+import "../scb-horizontal-scroller/scb-horizontal-scroller.js";
+var p = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (i, r, d, a) => {
+  for (var e = a > 1 ? void 0 : a ? m(r, d) : r, c = i.length - 1, n; c >= 0; c--)
+    (n = i[c]) && (e = (a ? n(r, d, e) : n(e)) || e);
+  return a && e && p(r, d, e), e;
+};
+let s = class extends h {
+  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 = "";
+  }
+  // Labels as getters so they react to lang changes
+  get descriptionLabel() {
+    return this.lang === "en" ? "Description of the chart" : "Beskrivning av diagrammet";
+  }
+  get moreAboutStatsLabel() {
+    return this.lang === "en" ? "More about the statistics" : "Mer om statistiken";
+  }
+  get commentLabel() {
+    return this.lang === "en" ? "Comments" : "Kommentar";
+  }
+  get sourceLabel() {
+    return this.lang === "en" ? "Source" : "Källa";
+  }
+  get footnoteLabel() {
+    return this.lang === "en" ? "Footnotes" : "Fotnot";
+  }
+  firstUpdated() {
+    var r;
+    const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="table"]');
+    i && (i.addEventListener("slotchange", () => this._styleSlottedTable()), this._styleSlottedTable());
+  }
+  updated() {
+    this._styleSlottedTable();
+  }
+  _styleSlottedTable() {
+    var d;
+    const i = (d = this.shadowRoot) == null ? void 0 : d.querySelector('slot[name="table"]');
+    if (!i) return;
+    i.assignedElements({ flatten: !0 }).forEach((a) => {
+      a.tagName === "TABLE" && (a.style.borderCollapse = "collapse", a.style.width = "100%", a.querySelectorAll("tbody tr:nth-child(odd)").forEach((e) => {
+        e.style.background = "var(--md-sys-color-surface-container)";
+      }), a.querySelectorAll("th").forEach((e) => {
+        e.style.border = "1px solid var(--md-sys-color-on-surface)", e.style.padding = "8px";
+      }), a.querySelectorAll("td").forEach((e) => {
+        e.style.border = "1px solid var(--md-sys-color-on-surface)", e.style.padding = "8px";
+      }), a.querySelectorAll("tr").forEach((e) => {
+        const c = Array.from(e.children).filter(
+          (n) => n.tagName === "TD" || n.tagName === "TH"
+        );
+        c.length > 0 && (c[0].style.borderLeft = "none", c[c.length - 1].style.borderRight = "none");
+      }));
+    });
+  }
+  render() {
+    switch (this.variant) {
+      case "Diagram":
+        return t`
+          <div part="container">
+            <div class="header">
+                <div class="label">${this.title}</div>
+                <div class="subtitle">${this.subtitle}</div>
+            </div>
+            <div class="content">
+              <scb-horizontal-scroller width="600px" class="diagram-scroller" variant="inline" show-scrollbar>
+                <slot name="diagram"></slot>
+              </scb-horizontal-scroller>
+            </div>
+            <div class="footer">
+              <div class="description section">
+                <div class="secondary-label">${this.descriptionLabel}</div>
+                ${this.description ? t`<div>${this.description}</div>` : ""}
+              </div>
+              <scb-divider></scb-divider>
+              <scb-accordion>
+                <scb-accordion-item
+                  title="${this.moreAboutStatsLabel}"
+                >
+                  <div class="more-about-stats-content">    
+                    <div class="section">
+                      <div class="secondary-label">${this.commentLabel}</div>
+                      ${this.comment ? t`<div>${this.comment}</div>` : ""}
+                    </div>
+                    <div class="section">
+                      <div class="secondary-label">${this.sourceLabel}</div>
+                      ${this.source ? t`<div>${this.source}</div>` : ""}
+                    </div>
+                    <div class="section">
+                      <div class="secondary-label">${this.footnoteLabel}</div>
+                      ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
+                    </div>
+                  </div>
+                </scb-accordion-item>
+              </scb-accordion>
+            </div>
+            <slot></slot>
+          </div>
+        `;
+      case "Table":
+        return t`
+          <div part="container">
+            <div class="header">
+                <div class="label">${this.title}</div>
+                <div class="subtitle">${this.subtitle}</div>
+            </div>
+            <div class="content">
+              <scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
+                <slot name="table"></slot>
+              </scb-horizontal-scroller>
+            </div>
+            <div class="footer">
+              <div class="description section">
+                <div class="secondary-label">${this.descriptionLabel}</div>
+                ${this.description ? t`<div>${this.description}</div>` : ""}
+              </div>
+              <scb-divider></scb-divider>
+              <scb-accordion>
+                <scb-accordion-item
+                  title="${this.moreAboutStatsLabel}"
+                >
+                  <div class="more-about-stats-content">    
+                    <div class="section">
+                      <div class="secondary-label">${this.commentLabel}</div>
+                      ${this.comment ? t`<div>${this.comment}</div>` : ""}
+                    </div>
+                    <div class="section">
+                      <div class="secondary-label">${this.sourceLabel}</div>
+                      ${this.source ? t`<div>${this.source}</div>` : ""}
+                    </div>
+                    <div class="section">
+                      <div class="secondary-label">${this.footnoteLabel}</div>
+                      ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
+                    </div>
+                  </div>
+                </scb-accordion-item>
+              </scb-accordion>
+            </div>
+            <slot></slot>
+          </div>
+        `;
+      case "Image":
+        return t`
+          <div part="container">
+            <div class="header">
+                <div class="label">${this.title}</div>
+                <div class="subtitle">${this.subtitle}</div>
+            </div>
+            <div class="content image-content">
+              <img src="${this.imageHref}" alt="Image figure"/>
+            </div>
+            <div class="footer">
+              <div class="description section">
+                <div class="secondary-label">${this.descriptionLabel}</div>
+                ${this.description ? t`<div>${this.description}</div>` : ""}
+              </div>
+              <scb-divider></scb-divider>
+              <scb-accordion>
+                <scb-accordion-item
+                  title="${this.moreAboutStatsLabel}"
+                >
+                  <div class="more-about-stats-content">    
+                    <div class="section">
+                      <div class="secondary-label">${this.commentLabel}</div>
+                      ${this.comment ? t`<div>${this.comment}</div>` : ""}
+                    </div>
+                    <div class="section">
+                      <div class="secondary-label">${this.sourceLabel}</div>
+                      ${this.source ? t`<div>${this.source}</div>` : ""}
+                    </div>
+                    <div class="section">
+                      <div class="secondary-label">${this.footnoteLabel}</div>
+                      ${this.footnote ? t`<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">
+                  <div class="label">${this.title}</div>
+                  <div class="subtitle">${this.subtitle}</div>
+              </div>
+              ${this.variant === "Standard" ? t`
+                <div class="flipp-wrapper">
+                  <scb-chip
+                    variant="filter"
+                    label=${this.lang === "en" ? "Figure" : "Diagram"}
+                    icon="bar_chart"
+                    ?selected=${this.selectedChip === "Diagram"}
+                    @selected-changed=${() => this._onChipSelect("Diagram")}
+                  ></scb-chip>
+                  <scb-chip
+                    variant="filter"
+                    label="${this.lang === "en" ? "Table" : "Tabell"}"
+                    icon="table"
+                    ?selected=${this.selectedChip === "Table"}
+                    @selected-changed=${() => this._onChipSelect("Table")}
+                  ></scb-chip>
+                </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">
+                <div class="description section">
+                  <div class="secondary-label">${this.descriptionLabel}</div>
+                  ${this.description ? t`<div>${this.description}</div>` : ""}
+                </div>
+                <scb-divider></scb-divider>
+                <scb-accordion>
+                  <scb-accordion-item
+                    title="${this.moreAboutStatsLabel}"
+                  >
+                    <div class="more-about-stats-content">    
+                      <div class="section">
+                        <div class="secondary-label">${this.commentLabel}</div>
+                        ${this.comment ? t`<div>${this.comment}</div>` : ""}
+                      </div>
+                      <div class="section">
+                        <div class="secondary-label">${this.sourceLabel}</div>
+                        ${this.source ? t`<div>${this.source}</div>` : ""}
+                      </div>
+                      <div class="section">
+                        <div class="secondary-label">${this.footnoteLabel}</div>
+                        ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
+                      </div>
+                    </div>
+                  </scb-accordion-item>
+                </scb-accordion>
+              </div>
+              <slot></slot>
+            </div>
+          `;
+    }
+  }
+  _onChipSelect(i) {
+    this.selectedChip = i;
+  }
+};
+s.styles = v`
+    :host {
+      display: block;
+      font-family: var(--brand-font);
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface);
+      padding: 24px;
+      max-width: 100%;
+      border-radius: var(--spacing-04, 16px);
+      border: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    .label {
+      font-size: var(--md-sys-typescale-title-large-size);
+      font-weight: var(--weight-semibold);
+      line-height: var(--md-sys-typescale-title-large-line-height);
+      letter-spacing: var(--md-sys-typescale-title-large-tracking);
+    }
+    .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: 4px; 
+    }
+    .more-about-stats-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      max-width: 600px
+    }
+    .header {
+      margin-bottom: 24px;
+      max-width: 600px
+    }
+    .flipp-wrapper {
+      margin-bottom: 40px;
+      max-width: 600px
+    }
+    .description{
+      margin-bottom: 32px;
+    }
+    .footer {
+      margin-top: 24px;
+      
+    }
+    .description.section{
+    max-width: 600px
+    }
+    .table-scroller,
+    .diagram-scroller {
+      display: none;
+    }
+    :host([variant='Table']) slot[name="table"] {
+      display: block;
+    }
+    :host([variant='Table']) .table-scroller {
+      display: flex;
+    }
+    :host([variant='Diagram']) slot[name="diagram"] {
+      display: block;
+    }
+    :host([variant='Diagram']) .diagram-scroller {
+      display: flex;
+    }
+    :host([variant='Image']) {
+      img {
+        height: auto;
+        max-width: 100%;
+      }
+      slot[name="table"] {
+        display: none;
+      }
+      slot[name="diagram"] {
+        display: none;
+      }
+      .image-content {
+        display: block;
+      }
+      .diagram-scroller {
+        display: none;
+      }
+      .table-scroller {
+        display: none;
+      }
+    }
+
+    :host([variant='Standard'].chip-diagram) .diagram-scroller {
+      display: flex;
+    }
+     :host([variant='Standard'].chip-table) .table-scroller {
+      display: flex;
+    }
+    :host([variant='Standard'].chip-table) slot[name="table"] {
+      display: block;
+    }
+    :host([variant='Standard'].chip-table) slot[name="diagram"] {
+      display: none;
+    }
+    :host([variant='Standard'].chip-diagram) slot[name="table"] {
+      display: none;
+    }
+    :host([variant='Standard'].chip-diagram) slot[name="diagram"] {
+      display: block;
+    }
+
+
+
+  `;
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "variant", 2);
+l([
+  o({ type: String })
+], s.prototype, "selectedChip", 2);
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "title", 2);
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "subtitle", 2);
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "description", 2);
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "comment", 2);
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "source", 2);
+l([
+  o({ type: String, reflect: !0 })
+], s.prototype, "footnote", 2);
+l([
+  o({ type: String, reflect: !0, attribute: "lang" })
+], s.prototype, "lang", 2);
+l([
+  o({ type: String, reflect: !0, attribute: "image-href" })
+], s.prototype, "imageHref", 2);
+s = l([
+  b("scb-viz")
+], s);
+export {
+  s as ScbViz
+};