scb-wc-test 0.1.235 → 0.1.237

package/mvc/components/scb-viz/scb-viz.js

@@ -1,4 +1,4 @@
-import{a as _,n as o,i as w,x as s,l as f,t as z}from"../../vendor/vendor.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";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-accordion/scb-accordion-item.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(c,r,i){try{customElements.get(c)||e(c,r,i)}catch(p){var h=String(p||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var L=Object.defineProperty,x=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},l=(t,e,c,r)=>{for(var i=r>1?void 0:r?x(e,c):e,h=t.length-1,p;h>=0;h--)(p=t[h])&&(i=(r?p(e,c,i):p(i))||i);return r&&i&&L(e,c,i),i},M=(t,e,c)=>e.has(t)||S("Cannot "+c),C=(t,e,c)=>e.has(t)?S("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,c),v=(t,e,c)=>(M(t,e,"access private method"),c),n,y,g;const u=`<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+import{a as $,n as p,r as M,i as T,x as r,k as z,l as L,t as k}from"../../vendor/vendor.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";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-accordion/scb-accordion-item.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,c,i){try{customElements.get(s)||e(s,c,i)}catch(a){var l=String(a||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var H=Object.defineProperty,D=Object.getOwnPropertyDescriptor,x=t=>{throw TypeError(t)},o=(t,e,s,c)=>{for(var i=c>1?void 0:c?D(e,s):e,l=t.length-1,a;l>=0;l--)(a=t[l])&&(i=(c?a(e,s,i):a(i))||i);return c&&i&&H(e,s,i),i},V=(t,e,s)=>e.has(t)||x("Cannot "+s),A=(t,e,s)=>e.has(t)?x("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),m=(t,e,s)=>(V(t,e,"access private method"),s),b,C,f;const I=`<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 727.3 87.3" style="enable-background:new 0 0 727.3 87.3;" xml:space="preserve" fill="currentColor">
 <style type="text/css">
 	.st0{clip-path:url(#SVGID_00000118375311472882578510000008414848687067442345_);}
@@ -113,158 +113,138 @@ import{a as _,n as o,i as w,x as s,l as f,t as z}from"../../vendor/vendor.js";im
 <path d="M688.2,24.4h5.8v6h-5.8V24.4z M688.2,36.6h5.8v30.1h-5.8V36.6z"/>
 <path d="M701.8,24.4h5.8v26.3h0.1l11.2-14.1h7l-10,11.7l11.4,18.3H720l-7.7-14l-4.6,5.4v8.7h-5.8V24.4H701.8z"/>
 </svg>
-`;let a=class extends w{constructor(){super(...arguments),C(this,n),this.variant="Standard",this.selectedChip="Diagram",this.title="",this.subtitle="",this.description="",this.comment="",this.source="",this.footnote="",this.lang="sv",this.imageHref="",this.officialStatistics=!1,this.disableToggle=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}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"}get officialStatisticsLabel(){return this.lang==="en"?"Official statistics of Sweden":"Sveriges officiella statistik"}get officialStatisticsTitle(){return this.lang==="en"?"Part of Official statistics of Sweden":"Tillhör Sveriges officiella statistik"}get officialStatisticsAlt(){return this.lang==="en"?"Read more about Official statistics of Sweden":"Läs mer om Sveriges officiella statistik"}firstUpdated(t){const e=this.shadowRoot?.querySelector('slot[name="table"]');e&&(e.addEventListener("slotchange",()=>this._styleSlottedTable()),this._styleSlottedTable()),v(this,n,y).call(this),this._syncChipClass()}updated(t){super.updated(t),this._styleSlottedTable(),(t.has("selectedChip")||t.has("variant"))&&this._syncChipClass(),t.has("selectedChip")&&this._dispatchSelectedChipChanged(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&v(this,n,y).call(this)}_styleSlottedTable(){const t=this.shadowRoot?.querySelector('slot[name="table"]');if(!t)return;t.assignedElements({flatten:!0}).forEach(c=>{const r=[];c.tagName==="TABLE"?r.push(c):c.querySelectorAll("table").forEach(i=>r.push(i)),r.forEach(i=>{i.style.borderCollapse="collapse",!i.style.width&&!i.getAttribute("width")&&(i.style.width="100%");const h="1px solid var(--md-sys-color-outline-variant)";i.querySelectorAll("th, td").forEach(d=>{const b=d;b.style.border=h,b.style.padding="8px",b.style.backgroundColor="inherit"}),i.querySelectorAll("thead th").forEach(d=>{d.style.fontWeight="var(--weight-bold)"}),i.querySelectorAll("tbody th").forEach(d=>{d.style.fontWeight="var(--weight-regular)"}),Array.from(i.querySelectorAll("tr")).forEach((d,b)=>{d.style.background=b%2===0?"var(--md-sys-color-surface-container)":"var(--md-sys-color-surface)",Array.from(d.children).filter(m=>m.tagName==="TD"||m.tagName==="TH").forEach((m,$)=>{m.style.textAlign=$===0?"left":"right"})})})})}render(){switch(this.variant){case"Table":return s`
+`;let n=class extends T{constructor(){super(...arguments),A(this,b),this.variant="Standard",this.selectedChip="Diagram",this.title="",this.subtitle="",this.description="",this.comment="",this.source="",this.footnote="",this.lang="sv",this.imageHref="",this.officialStatistics=!1,this.disableToggle=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}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"}get officialStatisticsLabel(){return this.lang==="en"?"Official statistics of Sweden":"Sveriges officiella statistik"}get officialStatisticsTitle(){return this.lang==="en"?"Part of Official statistics of Sweden":"Tillhör Sveriges officiella statistik"}get officialStatisticsAlt(){return this.lang==="en"?"Read more about Official statistics of Sweden":"Läs mer om Sveriges officiella statistik"}firstUpdated(t){this._readTableDataFromSlot(),m(this,b,C).call(this),this._syncChipClass()}updated(t){super.updated(t),(t.has("selectedChip")||t.has("variant"))&&this._syncChipClass(),t.has("selectedChip")&&this._dispatchSelectedChipChanged(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&m(this,b,C).call(this)}_onTableSlotChange(t){const e=t.target;e&&this._readTableDataFromSlot(e)}_readTableDataFromSlot(t){const e=t||this.shadowRoot?.querySelector('slot[name="table"]');if(!e)return;const s=e.assignedElements({flatten:!0}),c=[];s.forEach(h=>{if(h.tagName==="TABLE"){c.push(h);return}h.querySelectorAll("table").forEach(g=>c.push(g))});const i=c[0];if(!i){this._slottedTableData=void 0;return}const l=[],a=[],d=h=>{if(!h)return{text:"",html:""};const g=h.innerHTML??"",_=(h.textContent??"").replace(/\s+/g," ").trim(),w=(h.getAttribute("align")??"").trim().toLowerCase(),S=(h.style?.textAlign??"").trim().toLowerCase()||w;return{text:_,html:g,align:S==="left"||S==="center"||S==="right"?S:void 0}},v=i.querySelector("thead tr");v&&Array.from(v.querySelectorAll("th, td")).forEach(g=>l.push(d(g)));const u=Array.from(i.querySelectorAll("tbody tr")),y=u.length>0?u:Array.from(i.querySelectorAll("tr")).filter(h=>h.closest("thead")===null);if(y.forEach(h=>{const g=Array.from(h.querySelectorAll("th, td"));g.length!==0&&a.push({cells:g.map(_=>d(_)),firstCellIsRowHeader:g[0].tagName==="TH"&&h.closest("thead")===null&&h.closest("tfoot")===null})}),!v&&a.length>0){const h=y[0],g=Array.from(h?.querySelectorAll("th, td")??[]);g.length>0&&g.every(w=>w.tagName==="TH")&&h?.closest("tbody")===null&&(l.splice(0,l.length,...a[0].cells),a.shift())}this._slottedTableData={headers:l.length>0?l:void 0,rows:a}}_inferTableAlignments(t){const e=Math.max(t.headers?.length??0,...t.rows.map(i=>i.cells.length)),s=i=>{const l=i.replace(/[  \s]+/g,"").trim();return l?/^-?\d+(?:[.,]\d+)?$/.test(l):!1},c=[];for(let i=0;i<e;i+=1){const l=t.rows.map(d=>d.cells[i]?.text??"").filter(d=>d!==""),a=l.length>0&&l.every(s);c.push(a?"right":"left")}return c}_getColumnWidthHints(t,e){const s=t.headers&&t.headers.length>0?t.headers:t.rows[0]?.cells??[];return Array.from({length:e},(c,i)=>{const l=(s[i]?.text??"").replace(/\s+/g," ").trim();return`${Math.max(6,Math.min(40,l.length+4))}ch`})}_renderTable(){const t=this.tableData?this._mapTableDataToRenderedData(this.tableData):this._slottedTableData;if(!t||!t.rows||t.rows.length===0)return null;const e=this._inferTableAlignments(t),s=Math.max(t.headers?.length??0,...t.rows.map(a=>a.cells.length)),c=t.headers??[],i=t.rows.map(a=>{const d=[...a.cells];for(;d.length<s;)d.push({text:"",html:""});return{cells:d,firstCellIsRowHeader:a.firstCellIsRowHeader===!0}}),l=this._getColumnWidthHints(t,s);return r`
+      <table class="scb-viz-table" part="table">
+        <colgroup>
+          ${l.map(a=>r`<col style=${`width: ${a}; min-width: ${a};`}>`)}
+        </colgroup>
+        ${c.length>0?r`
+              <thead>
+                <tr>
+                  ${c.map((a,d)=>{const v=a.align??e[d];return r`<th scope="col" class=${v==="right"?"align-right":v==="center"?"align-center":"align-left"}>${z(a.html||a.text)}</th>`})}
+                </tr>
+              </thead>
+            `:""}
+        <tbody>
+          ${i.map(a=>r`
+            <tr>
+              ${a.cells.map((d,v)=>{const u=d.align??e[v],y=u==="right"?"align-right":u==="center"?"align-center":"align-left";return v===0&&a.firstCellIsRowHeader?r`<th scope="row" class=${y}>${z(d.html||d.text)}</th>`:r`<td class=${y}>${z(d.html||d.text)}</td>`})}
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    `}_mapTableDataToRenderedData(t){const e=s=>{const c=s==null?"":String(s);return{text:c,html:c}};return{headers:t.headers?.map(s=>e(s)),rows:t.rows.map((s,c)=>({cells:s.map(i=>e(i)),firstCellIsRowHeader:t.rowHeaderRows?.[c]===!0}))}}_renderHeader(){return r`
+      <div class="header">
+        ${this.title?r` <div class="label">${this.title}</div> `:""}
+        ${this.subtitle?r` <div class="subtitle">${this.subtitle}</div> `:""}
+      </div>
+    `}_renderDescription(){return this.description?r`
+      <div class="description section">
+        <div class="secondary-label">${this.descriptionLabel}</div>
+        <div>${this.description}</div>
+      </div>
+    `:null}_renderOfficialStatisticsLink(){return this.officialStatistics?r`
+      <a
+        class="sos-logotype-link"
+        href="https://www.scb.se/sos"
+        target="_blank"
+        rel="noopener"
+        title="${this.officialStatisticsTitle}"
+        aria-label="${this.officialStatisticsAlt}"
+      >
+        <span class="sos-logotype-small" aria-hidden="true">
+          ${L(I)}
+        </span>
+      </a>
+    `:null}_renderMoreAboutStats(){return!this.comment&&!this.source&&!this.footnote&&!this.officialStatistics?null:r`
+      <scb-divider></scb-divider>
+      <scb-accordion>
+        <scb-accordion-item title="${this.moreAboutStatsLabel}">
+          <div class="more-about-stats-content">
+            ${this.comment?r`
+                  <div class="section">
+                    <div class="secondary-label">${this.commentLabel}</div>
+                    <div>${this.comment}</div>
+                  </div>
+                `:""}
+            ${this.source?r`
+                  <div class="section">
+                    <div class="secondary-label">${this.sourceLabel}</div>
+                    <div>${this.source}</div>
+                  </div>
+                `:""}
+            ${this.footnote?r`
+                  <div class="section">
+                    <div class="secondary-label">${this.footnoteLabel}</div>
+                    <div>${this.footnote}</div>
+                  </div>
+                `:""}
+            ${this._renderOfficialStatisticsLink()}
+          </div>
+        </scb-accordion-item>
+      </scb-accordion>
+    `}_renderFooter(){const t=this._renderDescription(),e=this._renderMoreAboutStats();return!t&&!e?null:r`
+      <div class="footer">
+        ${t}
+        ${e}
+      </div>
+    `}_renderHiddenTableSlot(){return r`
+      <slot
+        name="table"
+        class="table-source"
+        @slotchange=${t=>this._onTableSlotChange(t)}
+      ></slot>
+    `}_renderTableScroller(){return r`
+      <scb-horizontal-scroller
+        width="600px"
+        class="table-scroller"
+        variant="inline"
+        show-scrollbar
+      >
+        ${this._renderTable()}
+      </scb-horizontal-scroller>
+    `}_renderStandardToggle(){return this.variant!=="Standard"||this.disableToggle?null:r`
+      <div class="flipp-wrapper">
+        <scb-segmented-button
+          .value=${this.selectedChip||""}
+          @change=${t=>this._onSegmentedChange(t)}
+        >
+          <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>
+    `}render(){switch(this.variant){case"Table":return r`
           <div part="container">
-            <div class="header">
-              ${this.title?s` <div class="label">${this.title}</div> `:""}
-              ${this.subtitle?s` <div class="subtitle">${this.subtitle}</div> `:""}
-            </div>
+            ${this._renderHeader()}
             <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">
-              ${this.description?s`
-                    <div class="description section">
-                      <div class="secondary-label">${this.descriptionLabel}</div>
-                      <div>${this.description}</div>
-                    </div>
-                  `:""}
-              ${this.comment||this.source||this.footnote||this.officialStatistics?s`
-                    <scb-divider></scb-divider>
-                    <scb-accordion>
-                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
-                        <div class="more-about-stats-content">
-                          ${this.comment?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.commentLabel}</div>
-                                  <div>${this.comment}</div>
-                                </div>
-                              `:""}
-                          ${this.source?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.sourceLabel}</div>
-                                  <div>${this.source}</div>
-                                </div>
-                              `:""}
-                          ${this.footnote?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.footnoteLabel}</div>
-                                  <div>${this.footnote}</div>
-                                </div>
-                              `:""}
-                          ${this.officialStatistics?s`
-                                <a
-                                  class="sos-logotype-link"
-                                  href="https://www.scb.se/sos"
-                                  target="_blank"
-                                  rel="noopener"
-                                  title="${this.officialStatisticsTitle}"
-                                  aria-label="${this.officialStatisticsAlt}"
-                                >
-                                  <span class="sos-logotype-small" aria-hidden="true">
-                                    ${f(u)}
-                                  </span>
-                                </a>
-                              `:""}
-                        </div>
-                      </scb-accordion-item>
-                    </scb-accordion>
-                  `:""}
+              ${this._renderTableScroller()}
             </div>
+            ${this._renderFooter()}
+            ${this._renderHiddenTableSlot()}
             <slot></slot>
           </div>
-        `;case"Image":return s`
+        `;case"Image":return r`
           <div part="container">
-            <div class="header">
-              ${this.title?s` <div class="label">${this.title}</div> `:""}
-              ${this.subtitle?s` <div class="subtitle">${this.subtitle}</div> `:""}
-            </div>
+            ${this._renderHeader()}
             <div class="content image-content">
               <img src="${this.imageHref}" alt="Image figure" />
             </div>
-            <div class="footer">
-              ${this.description?s`
-                    <div class="description section">
-                      <div class="secondary-label">${this.descriptionLabel}</div>
-                      <div>${this.description}</div>
-                    </div>
-                  `:""}
-              ${this.comment||this.source||this.footnote||this.officialStatistics?s`
-                    <scb-divider></scb-divider>
-                    <scb-accordion>
-                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
-                        <div class="more-about-stats-content">
-                          ${this.comment?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.commentLabel}</div>
-                                  <div>${this.comment}</div>
-                                </div>
-                              `:""}
-                          ${this.source?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.sourceLabel}</div>
-                                  <div>${this.source}</div>
-                                </div>
-                              `:""}
-                          ${this.footnote?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.footnoteLabel}</div>
-                                  <div>${this.footnote}</div>
-                                </div>
-                              `:""}
-                          ${this.officialStatistics?s`
-                                <a
-                                  class="sos-logotype-link"
-                                  href="https://www.scb.se/sos"
-                                  target="_blank"
-                                  rel="noopener"
-                                  title="${this.officialStatisticsTitle}"
-                                  aria-label="${this.officialStatisticsAlt}"
-                                >
-                                  <span class="sos-logotype-small" aria-hidden="true">
-                                    ${f(u)}
-                                  </span>
-                                </a>
-                              `:""}
-                        </div>
-                      </scb-accordion-item>
-                    </scb-accordion>
-                  `:""}
-            </div>
+            ${this._renderFooter()}
+            ${this._renderHiddenTableSlot()}
             <slot></slot>
           </div>
-        `;default:return s`
+        `;default:return r`
           <div part="container">
-            <div class="header">
-              ${this.title?s` <div class="label">${this.title}</div> `:""}
-              ${this.subtitle?s` <div class="subtitle">${this.subtitle}</div> `:""}
-            </div>
-            ${this.variant==="Standard"&&!this.disableToggle?s`
-                  <div class="flipp-wrapper">
-                    <scb-segmented-button
-                      .value=${this.selectedChip||""}
-                      @change=${t=>this._onSegmentedChange(t)}
-                    >
-                      <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>
-                `:""}
+            ${this._renderHeader()}
+            ${this._renderStandardToggle()}
             <div class="content">
               <scb-horizontal-scroller
                 width="600px"
@@ -274,67 +254,13 @@ import{a as _,n as o,i as w,x as s,l as f,t as z}from"../../vendor/vendor.js";im
               >
                 <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?s`
-                    <div class="description section">
-                      <div class="secondary-label">${this.descriptionLabel}</div>
-                      <div>${this.description}</div>
-                    </div>
-                  `:""}
-              ${this.comment||this.source||this.footnote||this.officialStatistics?s`
-                    <scb-divider></scb-divider>
-                    <scb-accordion>
-                      <scb-accordion-item title="${this.moreAboutStatsLabel}">
-                        <div class="more-about-stats-content">
-                          ${this.comment?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.commentLabel}</div>
-                                  <div>${this.comment}</div>
-                                </div>
-                              `:""}
-                          ${this.source?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.sourceLabel}</div>
-                                  <div>${this.source}</div>
-                                </div>
-                              `:""}
-                          ${this.footnote?s`
-                                <div class="section">
-                                  <div class="secondary-label">${this.footnoteLabel}</div>
-                                  <div>${this.footnote}</div>
-                                </div>
-                              `:""}
-                          ${this.officialStatistics?s`
-                                <a
-                                  class="sos-logotype-link"
-                                  href="https://www.scb.se/sos"
-                                  target="_blank"
-                                  rel="noopener"
-                                  title="${this.officialStatisticsTitle}"
-                                  aria-label="${this.officialStatisticsAlt}"
-                                >
-                                  <span class="sos-logotype-small" aria-hidden="true">
-                                    ${f(u)}
-                                  </span>
-                                </a>
-                              `:""}
-                        </div>
-                      </scb-accordion-item>
-                    </scb-accordion>
-                  `:""}
+              ${this._renderTableScroller()}
             </div>
+            ${this._renderFooter()}
+            ${this._renderHiddenTableSlot()}
             <slot></slot>
           </div>
-        `}}_syncChipClass(){const t=this.variant==="Standard";this.classList.toggle("chip-diagram",t&&this.selectedChip==="Diagram"),this.classList.toggle("chip-table",t&&this.selectedChip==="Table")}_dispatchSelectedChipChanged(){const t={selectedChip:this.selectedChip};this.dispatchEvent(new CustomEvent("selected-chip-changed",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("selectedchipchanged",{detail:t,bubbles:!0,composed:!0}))}_onSegmentedChange(t){const e=t.detail?.value;this.selectedChip===e?this.selectedChip=null:this.selectedChip=e}};n=new WeakSet;y=function(){const t=v(this,n,g).call(this,this.spacing),e=v(this,n,g).call(this,this.spacingTop)??t,c=v(this,n,g).call(this,this.spacingBottom)??t,r=v(this,n,g).call(this,this.spacingLeft),i=v(this,n,g).call(this,this.spacingRight);e?this.style.setProperty("--scb-viz-spacing-block-start",e):this.style.removeProperty("--scb-viz-spacing-block-start"),c?this.style.setProperty("--scb-viz-spacing-block-end",c):this.style.removeProperty("--scb-viz-spacing-block-end"),r?this.style.setProperty("--scb-viz-spacing-inline-start",r):this.style.removeProperty("--scb-viz-spacing-inline-start"),i?this.style.setProperty("--scb-viz-spacing-inline-end",i):this.style.removeProperty("--scb-viz-spacing-inline-end")};g=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=_`
+        `}}_syncChipClass(){const t=this.variant==="Standard";this.classList.toggle("chip-diagram",t&&this.selectedChip==="Diagram"),this.classList.toggle("chip-table",t&&this.selectedChip==="Table")}_dispatchSelectedChipChanged(){const t={selectedChip:this.selectedChip};this.dispatchEvent(new CustomEvent("selected-chip-changed",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("selectedchipchanged",{detail:t,bubbles:!0,composed:!0}))}_onSegmentedChange(t){const e=t.detail?.value;this.selectedChip===e?this.selectedChip=null:this.selectedChip=e}};b=new WeakSet;C=function(){const t=m(this,b,f).call(this,this.spacing),e=m(this,b,f).call(this,this.spacingTop)??t,s=m(this,b,f).call(this,this.spacingBottom)??t,c=m(this,b,f).call(this,this.spacingLeft),i=m(this,b,f).call(this,this.spacingRight);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"),c?this.style.setProperty("--scb-viz-spacing-inline-start",c):this.style.removeProperty("--scb-viz-spacing-inline-start"),i?this.style.setProperty("--scb-viz-spacing-inline-end",i):this.style.removeProperty("--scb-viz-spacing-inline-end")};f=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};n.styles=$`
     :host {
       display: block;
       font-family: var(--brand-font);
@@ -362,7 +288,7 @@ import{a as _,n as o,i as w,x as s,l as f,t as z}from"../../vendor/vendor.js";im
       letter-spacing: var(--md-sys-typescale-title-large-tracking);
     }
 
-    .sub-label {
+    .subtitle {
       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);
@@ -446,33 +372,25 @@ import{a as _,n as o,i as w,x as s,l as f,t as z}from"../../vendor/vendor.js";im
       display: none;
     }
 
-    :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'] {
-        display: none;
-      }
-      slot[name='diagram'] {
-        display: none;
-      }
-      .image-content {
-        display: block;
-      }
-      .diagram-scroller {
-        display: none;
-      }
-      .table-scroller {
-        display: none;
-      }
+    :host([variant='Image']) img {
+      height: auto;
+      max-width: 100%;
+    }
+
+    :host([variant='Image']) .image-content {
+      display: block;
+    }
+
+    :host([variant='Image']) .diagram-scroller {
+      display: none;
+    }
+
+    :host([variant='Image']) .table-scroller {
+      display: none;
     }
 
     :host([variant='Standard'].chip-diagram) .diagram-scroller {
@@ -481,16 +399,53 @@ import{a as _,n as o,i as w,x as s,l as f,t as z}from"../../vendor/vendor.js";im
     :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'] {
+
+    .table-source {
       display: none;
     }
-    :host([variant='Standard'].chip-diagram) slot[name='table'] {
-      display: none;
+
+    .scb-viz-table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: max-content;
+      max-width: none;
     }
-    :host([variant='Standard'].chip-diagram) slot[name='diagram'] {
-      display: block;
+
+    .scb-viz-table th,
+    .scb-viz-table td {
+      border: 1px solid var(--md-sys-color-outline-variant);
+      padding-block: var(--spacing-2, 8px);
+      padding-inline: var(--spacing-3, 12px);
+      background-color: inherit;
+      overflow-wrap: anywhere;
+      vertical-align: top;
+    }
+
+    .scb-viz-table thead th {
+      font-weight: var(--weight-bold);
+    }
+
+    .scb-viz-table tbody th {
+      font-weight: var(--weight-regular);
+    }
+
+    .scb-viz-table tbody tr:nth-child(odd) {
+      background: var(--md-sys-color-surface-container);
+    }
+
+    .scb-viz-table tbody tr:nth-child(even) {
+      background: var(--md-sys-color-surface);
+    }
+
+    .scb-viz-table .align-left {
+      text-align: left;
+    }
+
+    .scb-viz-table .align-center {
+      text-align: center;
+    }
+
+    .scb-viz-table .align-right {
+      text-align: right;
     }
-  `;l([o({type:String,reflect:!0})],a.prototype,"variant",2);l([o({type:String,reflect:!0,attribute:"selected-chip"})],a.prototype,"selectedChip",2);l([o({type:String,reflect:!0})],a.prototype,"title",2);l([o({type:String,reflect:!0})],a.prototype,"subtitle",2);l([o({type:String,reflect:!0})],a.prototype,"description",2);l([o({type:String,reflect:!0})],a.prototype,"comment",2);l([o({type:String,reflect:!0})],a.prototype,"source",2);l([o({type:String,reflect:!0})],a.prototype,"footnote",2);l([o({type:String,reflect:!0,attribute:"lang"})],a.prototype,"lang",2);l([o({type:String,reflect:!0,attribute:"image-href"})],a.prototype,"imageHref",2);l([o({type:Boolean,reflect:!0,attribute:"official-statistics"})],a.prototype,"officialStatistics",2);l([o({type:Boolean,reflect:!0,attribute:"disable-toggle"})],a.prototype,"disableToggle",2);l([o({type:String,reflect:!0})],a.prototype,"spacing",2);l([o({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",2);l([o({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",2);l([o({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",2);l([o({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",2);a=l([z("scb-viz")],a);
+  `;o([p({type:String,reflect:!0})],n.prototype,"variant",2);o([p({type:String,reflect:!0,attribute:"selected-chip"})],n.prototype,"selectedChip",2);o([p({type:String,reflect:!0})],n.prototype,"title",2);o([p({type:String,reflect:!0})],n.prototype,"subtitle",2);o([p({type:String,reflect:!0})],n.prototype,"description",2);o([p({type:String,reflect:!0})],n.prototype,"comment",2);o([p({type:String,reflect:!0})],n.prototype,"source",2);o([p({type:String,reflect:!0})],n.prototype,"footnote",2);o([p({type:String,reflect:!0,attribute:"lang"})],n.prototype,"lang",2);o([p({type:String,reflect:!0,attribute:"image-href"})],n.prototype,"imageHref",2);o([p({type:Boolean,reflect:!0,attribute:"official-statistics"})],n.prototype,"officialStatistics",2);o([p({type:Boolean,reflect:!0,attribute:"disable-toggle"})],n.prototype,"disableToggle",2);o([p({attribute:!1})],n.prototype,"tableData",2);o([M()],n.prototype,"_slottedTableData",2);o([p({type:String,reflect:!0})],n.prototype,"spacing",2);o([p({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",2);o([p({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",2);o([p({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",2);o([p({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",2);n=o([k("scb-viz")],n);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.235",
+    "version":  "0.1.237",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -378,5 +378,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "AB241668169F36DF3E4E73769AD322D89978B5342DF9C2DA3548B52F8AC22A98"
+    "buildHash":  "3D5CF6D2AA58A343837477969DFF16DAF6DAC45EEB42E0DFCB7ADD6561A18998"
 }

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

@@ -1,4 +1,10 @@
 import { LitElement, PropertyValues } from 'lit';
+export type ScbVizTableCell = string | number | null | undefined;
+export interface ScbVizTableData {
+    headers?: string[];
+    rows: ScbVizTableCell[][];
+    rowHeaderRows?: boolean[];
+}
 export declare class ScbViz extends LitElement {
     #private;
     variant: 'Standard' | 'Table' | 'Image';
@@ -13,6 +19,8 @@ export declare class ScbViz extends LitElement {
     imageHref: string;
     officialStatistics: boolean;
     disableToggle: boolean;
+    tableData: ScbVizTableData | undefined;
+    private _slottedTableData;
     /** Vertikalt avstånd ovanför/under komponenten. 0–14 mappar till spacing-tokens, annars CSS-värde. */
     spacing: undefined;
     /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till spacing-tokens, annars CSS-värde. */
@@ -34,7 +42,20 @@ export declare class ScbViz extends LitElement {
     static styles: import('lit').CSSResult;
     protected firstUpdated(_changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    private _styleSlottedTable;
+    private _onTableSlotChange;
+    private _readTableDataFromSlot;
+    private _inferTableAlignments;
+    private _getColumnWidthHints;
+    private _renderTable;
+    private _mapTableDataToRenderedData;
+    private _renderHeader;
+    private _renderDescription;
+    private _renderOfficialStatisticsLink;
+    private _renderMoreAboutStats;
+    private _renderFooter;
+    private _renderHiddenTableSlot;
+    private _renderTableScroller;
+    private _renderStandardToggle;
     render(): import('lit-html').TemplateResult<1>;
     private _syncChipClass;
     private _dispatchSelectedChipChanged;