scb-wc-test 0.1.267 → 0.1.269

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

@@ -1,4 +1,4 @@
-import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}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(l,r,s){try{customElements.get(l)||e(l,r,s)}catch(a){var n=String(a||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var H=Object.defineProperty,P=Object.getOwnPropertyDescriptor,k=t=>{throw TypeError(t)},o=(t,e,l,r)=>{for(var s=r>1?void 0:r?P(e,l):e,n=t.length-1,a;n>=0;n--)(a=t[n])&&(s=(r?a(e,l,s):a(s))||s);return r&&s&&H(e,l,s),s},E=(t,e,l)=>e.has(t)||k("Cannot "+l),I=(t,e,l)=>e.has(t)?k("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,l),b=(t,e,l)=>(E(t,e,"access private method"),l),v,M,y,L;const C=`<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 W,n as d,r as F,i as O,k as A,x as s,l as M,t as q}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(a,n,i){try{customElements.get(a)||e(a,n,i)}catch(r){var v=String(r||"");if(v.indexOf("already been used")===-1&&v.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var G=Object.defineProperty,B=Object.getOwnPropertyDescriptor,I=t=>{throw TypeError(t)},h=(t,e,a,n)=>{for(var i=n>1?void 0:n?B(e,a):e,v=t.length-1,r;v>=0;v--)(r=t[v])&&(i=(n?r(e,a,i):r(i))||i);return n&&i&&G(e,a,i),i},N=(t,e,a)=>e.has(t)||I("Cannot "+a),K=(t,e,a)=>e.has(t)?I("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,a),l=(t,e,a)=>(N(t,e,"access private method"),a),c,k,H,V,x,R,P,E,S,T,y,D;const L=`<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,28 +113,28 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
 <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 c=class extends D{constructor(){super(...arguments),I(this,v),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.contentMaxWidth="",this.containerMaxWidth="",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(),b(this,v,M).call(this),b(this,v,L).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"))&&b(this,v,M).call(this),t.has("containerMaxWidth")&&b(this,v,L).call(this)}_onTableSlotChange(t){const e=t.target;e&&this._readTableDataFromSlot(e)}_normalizeRenderableCell(t){return t&&typeof t=="object"&&"html"in t&&"text"in t?{html:typeof t.html=="string"?t.html:"",text:typeof t.text=="string"?t.text:""}:{html:"",text:t==null?"":String(t)}}_readTableDataFromSlot(t){const e=t||this.shadowRoot?.querySelector('slot[name="table"]');if(!e)return;const l=e.assignedElements({flatten:!0}),r=[];l.forEach(d=>{if(d.tagName==="TABLE"){r.push(d);return}d.querySelectorAll("table").forEach(g=>r.push(g))});const s=r[0];if(!s){this._slottedTableData=void 0;return}const n=[],a=[],p=[],m=d=>d?(d.textContent??"").replace(/\s+/g," ").trim():"",f=d=>d?{html:(d.innerHTML??"").trim(),text:m(d)}:{html:"",text:""},u=s.querySelector("thead tr");u&&Array.from(u.querySelectorAll("th, td")).forEach(g=>n.push(f(g)));const w=Array.from(s.querySelectorAll("tbody tr")),x=w.length>0?w:Array.from(s.querySelectorAll("tr")).filter(d=>d.closest("thead")===null);if(x.forEach(d=>{const g=Array.from(d.querySelectorAll("th, td"));if(g.length===0)return;const $=g[0].tagName==="TH"&&d.closest("thead")===null&&d.closest("tfoot")===null;p.push($);const S=[];g.forEach(_=>S.push(f(_))),a.push(S)}),!u&&a.length>0){const d=a[0],g=x[0],$=Array.from(g?.querySelectorAll("th, td")??[]);$.length>0&&$.every(_=>_.tagName==="TH")&&g?.closest("tbody")===null&&(n.splice(0,n.length,...d),a.shift(),p.shift())}this._slottedTableData={headers:n.length>0?n:void 0,rows:a,rowHeaderRows:p.length>0?p:void 0}}_inferTableAlignments(t){const e=Math.max(t.headers?.length??0,...t.rows.map(s=>s.length)),l=s=>{if(s==null)return!1;if(typeof s=="number")return!0;const n=String(s).replace(/[\u00A0\u202F\s]+/g,"").trim();return n?/^-?\d+(?:[.,]\d+)?$/.test(n):!1},r=[];for(let s=0;s<e;s+=1){if(s===0){r.push("left");continue}const n=t.rows.map(p=>this._normalizeRenderableCell(p[s]).text).filter(p=>p!==""&&p!==null&&p!==void 0),a=n.length>0&&n.every(l);r.push(a?"right":"left")}return r}_getResolvedContentMaxWidth(){return this.contentMaxWidth?.trim()||""}_renderTable(){const t=this.tableData??this._slottedTableData;if(!t||!t.rows||t.rows.length===0)return null;const e=this._inferTableAlignments(t),l=Math.max(t.headers?.length??0,...t.rows.map(a=>a.length)),r=(t.headers??[]).map(a=>this._normalizeRenderableCell(a)),s=t.rows.map(a=>{const p=a.map(m=>this._normalizeRenderableCell(m));for(;p.length<l;)p.push({html:"",text:""});return p}),n=t.rowHeaderRows??[];return i`
+`;let o=class extends O{constructor(){super(...arguments),K(this,c),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.contentMaxWidth="",this.containerMaxWidth="",this.contentHeight="",this._diagramReflowFrame=0,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(),l(this,c,T).call(this),l(this,c,D).call(this),l(this,c,S).call(this),this._syncChipClass(),l(this,c,k).call(this),l(this,c,x).call(this)}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"))&&l(this,c,T).call(this),t.has("containerMaxWidth")&&l(this,c,D).call(this),t.has("variant")&&l(this,c,k).call(this),(t.has("contentMaxWidth")||t.has("contentHeight")||t.has("variant"))&&l(this,c,S).call(this),(t.has("selectedChip")||t.has("variant")||t.has("contentMaxWidth")||t.has("contentHeight"))&&l(this,c,x).call(this)}disconnectedCallback(){super.disconnectedCallback(),l(this,c,H).call(this),l(this,c,V).call(this)}_onTableSlotChange(t){const e=t.target;e&&this._readTableDataFromSlot(e)}_onDiagramSlotChange(){l(this,c,S).call(this),l(this,c,x).call(this)}_normalizeRenderableCell(t){return t&&typeof t=="object"&&"html"in t&&"text"in t?{html:typeof t.html=="string"?t.html:"",text:typeof t.text=="string"?t.text:""}:{html:"",text:t==null?"":String(t)}}_readTableDataFromSlot(t){const e=t||this.shadowRoot?.querySelector('slot[name="table"]');if(!e)return;const a=e.assignedElements({flatten:!0}),n=[];a.forEach(g=>{if(g.tagName==="TABLE"){n.push(g);return}g.querySelectorAll("table").forEach(b=>n.push(b))});const i=n[0];if(!i){this._slottedTableData=void 0;return}const v=[],r=[],p=[],m=g=>g?(g.textContent??"").replace(/\s+/g," ").trim():"",f=g=>g?{html:(g.innerHTML??"").trim(),text:m(g)}:{html:"",text:""},u=i.querySelector("thead tr");u&&Array.from(u.querySelectorAll("th, td")).forEach(b=>v.push(f(b)));const z=Array.from(i.querySelectorAll("tbody tr")),w=z.length>0?z:Array.from(i.querySelectorAll("tr")).filter(g=>g.closest("thead")===null);if(w.forEach(g=>{const b=Array.from(g.querySelectorAll("th, td"));if(b.length===0)return;const _=b[0].tagName==="TH"&&g.closest("thead")===null&&g.closest("tfoot")===null;p.push(_);const $=[];b.forEach(C=>$.push(f(C))),r.push($)}),!u&&r.length>0){const g=r[0],b=w[0],_=Array.from(b?.querySelectorAll("th, td")??[]);_.length>0&&_.every(C=>C.tagName==="TH")&&b?.closest("tbody")===null&&(v.splice(0,v.length,...g),r.shift(),p.shift())}this._slottedTableData={headers:v.length>0?v:void 0,rows:r,rowHeaderRows:p.length>0?p:void 0}}_inferTableAlignments(t){const e=Math.max(t.headers?.length??0,...t.rows.map(i=>i.length)),a=i=>{if(i==null)return!1;if(typeof i=="number")return!0;const v=String(i).replace(/[\u00A0\u202F\s]+/g,"").trim();return v?/^-?\d+(?:[.,]\d+)?$/.test(v):!1},n=[];for(let i=0;i<e;i+=1){if(i===0){n.push("left");continue}const v=t.rows.map(p=>this._normalizeRenderableCell(p[i]).text).filter(p=>p!==""&&p!==null&&p!==void 0),r=v.length>0&&v.every(a);n.push(r?"right":"left")}return n}_getResolvedContentMaxWidth(){return this.contentMaxWidth?.trim()||""}_getResolvedDiagramHeight(){return this.contentHeight?.trim()||""}_renderTable(){const t=this.tableData??this._slottedTableData;if(!t||!t.rows||t.rows.length===0)return null;const e=this._inferTableAlignments(t),a=Math.max(t.headers?.length??0,...t.rows.map(r=>r.length)),n=(t.headers??[]).map(r=>this._normalizeRenderableCell(r)),i=t.rows.map(r=>{const p=r.map(m=>this._normalizeRenderableCell(m));for(;p.length<a;)p.push({html:"",text:""});return p}),v=t.rowHeaderRows??[];return s`
       <table class="scb-viz-table" part="table">
-        ${r.length>0?i`
+        ${n.length>0?s`
               <thead>
                 <tr>
-                  ${r.map((a,p)=>{const m=e[p]==="right"?"align-right":"align-left";return i`<th scope="col" class=${m}>${a.html?T(a.html):a.text}</th>`})}
+                  ${n.map((r,p)=>{const m=e[p]==="right"?"align-right":"align-left";return s`<th scope="col" class=${m}>${r.html?A(r.html):r.text}</th>`})}
                 </tr>
               </thead>
             `:""}
         <tbody>
-          ${s.map((a,p)=>{const m=n[p]===!0;return i`
+          ${i.map((r,p)=>{const m=v[p]===!0;return s`
               <tr>
-                ${a.map((f,u)=>{const w=e[u]==="right"?"align-right":"align-left",x=f.html?T(f.html):f.text;return u===0&&m?i`<th scope="row" class=${w}>${x}</th>`:i`<td class=${w}>${x}</td>`})}
+                ${r.map((f,u)=>{const z=e[u]==="right"?"align-right":"align-left",w=f.html?A(f.html):f.text;return u===0&&m?s`<th scope="row" class=${z}>${w}</th>`:s`<td class=${z}>${w}</td>`})}
               </tr>
             `})}
         </tbody>
       </table>
-    `}render(){switch(this.variant){case"Table":return i`
+    `}render(){switch(this.variant){case"Table":return s`
           <div part="container">
             <div class="header">
-              ${this.title?i` <div class="label">${this.title}</div> `:""}
-              ${this.subtitle?i` <div class="sub-label">${this.subtitle}</div> `:""}
+              ${this.title?s` <div class="label">${this.title}</div> `:""}
+              ${this.subtitle?s` <div class="sub-label">${this.subtitle}</div> `:""}
             </div>
             <div class="content">
               <scb-horizontal-scroller
@@ -147,36 +147,36 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
               </scb-horizontal-scroller>
             </div>
             <div class="footer">
-              ${this.description?i`
+              ${this.description?s`
                     <div class="description section">
                       <div class="secondary-label">${this.descriptionLabel}</div>
-                      <div>${this.description}</div>
+                      <div class="body-text">${this.description}</div>
                     </div>
                   `:""}
-              ${this.comment||this.source||this.footnote||this.officialStatistics?i`
+              ${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?i`
+                          ${this.comment?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.commentLabel}</div>
-                                  <div>${this.comment}</div>
+                                  <div class="body-text">${this.comment}</div>
                                 </div>
                               `:""}
-                          ${this.source?i`
+                          ${this.source?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.sourceLabel}</div>
-                                  <div>${this.source}</div>
+                                  <div class="body-text">${this.source}</div>
                                 </div>
                               `:""}
-                          ${this.footnote?i`
+                          ${this.footnote?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.footnoteLabel}</div>
-                                  <div>${this.footnote}</div>
+                                  <div class="body-text">${this.footnote}</div>
                                 </div>
                               `:""}
-                          ${this.officialStatistics?i`
+                          ${this.officialStatistics?s`
                                 <a
                                   class="sos-logotype-link"
                                   href="https://www.scb.se/sos"
@@ -186,7 +186,7 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
                                   aria-label="${this.officialStatisticsAlt}"
                                 >
                                   <span class="sos-logotype-small" aria-hidden="true">
-                                    ${z(C)}
+                                    ${M(L)}
                                   </span>
                                 </a>
                               `:""}
@@ -202,11 +202,11 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
             ></slot>
             <slot></slot>
           </div>
-        `;case"Image":return i`
+        `;case"Image":return s`
           <div part="container">
             <div class="header">
-              ${this.title?i` <div class="label">${this.title}</div> `:""}
-              ${this.subtitle?i` <div class="sub-label">${this.subtitle}</div> `:""}
+              ${this.title?s` <div class="label">${this.title}</div> `:""}
+              ${this.subtitle?s` <div class="sub-label">${this.subtitle}</div> `:""}
             </div>
             <div
               class="content image-content"
@@ -215,36 +215,36 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
               <img src="${this.imageHref}" alt="Image figure" />
             </div>
             <div class="footer">
-              ${this.description?i`
+              ${this.description?s`
                     <div class="description section">
                       <div class="secondary-label">${this.descriptionLabel}</div>
-                      <div>${this.description}</div>
+                      <div class="body-text">${this.description}</div>
                     </div>
                   `:""}
-              ${this.comment||this.source||this.footnote||this.officialStatistics?i`
+              ${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?i`
+                          ${this.comment?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.commentLabel}</div>
-                                  <div>${this.comment}</div>
+                                  <div class="body-text">${this.comment}</div>
                                 </div>
                               `:""}
-                          ${this.source?i`
+                          ${this.source?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.sourceLabel}</div>
-                                  <div>${this.source}</div>
+                                  <div class="body-text">${this.source}</div>
                                 </div>
                               `:""}
-                          ${this.footnote?i`
+                          ${this.footnote?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.footnoteLabel}</div>
-                                  <div>${this.footnote}</div>
+                                  <div class="body-text">${this.footnote}</div>
                                 </div>
                               `:""}
-                          ${this.officialStatistics?i`
+                          ${this.officialStatistics?s`
                                 <a
                                   class="sos-logotype-link"
                                   href="https://www.scb.se/sos"
@@ -254,7 +254,7 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
                                   aria-label="${this.officialStatisticsAlt}"
                                 >
                                   <span class="sos-logotype-small" aria-hidden="true">
-                                    ${z(C)}
+                                    ${M(L)}
                                   </span>
                                 </a>
                               `:""}
@@ -270,13 +270,13 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
             ></slot>
             <slot></slot>
           </div>
-        `;default:return i`
+        `;default:return s`
           <div part="container">
             <div class="header">
-              ${this.title?i` <div class="label">${this.title}</div> `:""}
-              ${this.subtitle?i` <div class="sub-label">${this.subtitle}</div> `:""}
+              ${this.title?s` <div class="label">${this.title}</div> `:""}
+              ${this.subtitle?s` <div class="sub-label">${this.subtitle}</div> `:""}
             </div>
-            ${this.variant==="Standard"&&!this.disableToggle?i`
+            ${this.variant==="Standard"&&!this.disableToggle?s`
                   <div class="flipp-wrapper">
                     <scb-segmented-button
                       .value=${this.selectedChip||""}
@@ -303,10 +303,10 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
                 show-scrollbar
               >
                 <div
-                  class=${this._getResolvedContentMaxWidth()?"diagram-content diagram-content--constrained":"diagram-content"}
-                  style=${this._getResolvedContentMaxWidth()?`--scb-viz-content-max-width: ${this._getResolvedContentMaxWidth()}; --scb-viz-diagram-max-height: 600px;`:""}
+                  class="diagram-content"
+                  style=${this._getResolvedContentMaxWidth()?`--scb-viz-content-max-width: ${this._getResolvedContentMaxWidth()};`:""}
                 >
-                  <slot name="diagram"></slot>
+                  <slot name="diagram" @slotchange=${this._onDiagramSlotChange}></slot>
                 </div>
               </scb-horizontal-scroller>
               <scb-horizontal-scroller
@@ -319,36 +319,36 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
               </scb-horizontal-scroller>
             </div>
             <div class="footer">
-              ${this.description?i`
+              ${this.description?s`
                     <div class="description section">
                       <div class="secondary-label">${this.descriptionLabel}</div>
-                      <div>${this.description}</div>
+                      <div class="body-text">${this.description}</div>
                     </div>
                   `:""}
-              ${this.comment||this.source||this.footnote||this.officialStatistics?i`
+              ${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?i`
+                          ${this.comment?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.commentLabel}</div>
-                                  <div>${this.comment}</div>
+                                  <div class="body-text">${this.comment}</div>
                                 </div>
                               `:""}
-                          ${this.source?i`
+                          ${this.source?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.sourceLabel}</div>
-                                  <div>${this.source}</div>
+                                  <div class="body-text">${this.source}</div>
                                 </div>
                               `:""}
-                          ${this.footnote?i`
+                          ${this.footnote?s`
                                 <div class="section">
                                   <div class="secondary-label">${this.footnoteLabel}</div>
-                                  <div>${this.footnote}</div>
+                                  <div class="body-text">${this.footnote}</div>
                                 </div>
                               `:""}
-                          ${this.officialStatistics?i`
+                          ${this.officialStatistics?s`
                                 <a
                                   class="sos-logotype-link"
                                   href="https://www.scb.se/sos"
@@ -358,7 +358,7 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
                                   aria-label="${this.officialStatisticsAlt}"
                                 >
                                   <span class="sos-logotype-small" aria-hidden="true">
-                                    ${z(C)}
+                                    ${M(L)}
                                   </span>
                                 </a>
                               `:""}
@@ -374,16 +374,23 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
             ></slot>
             <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}};v=new WeakSet;M=function(){const t=b(this,v,y).call(this,this.spacing),e=b(this,v,y).call(this,this.spacingTop)??t,l=b(this,v,y).call(this,this.spacingBottom)??t,r=b(this,v,y).call(this,this.spacingLeft),s=b(this,v,y).call(this,this.spacingRight);e?this.style.setProperty("--scb-viz-spacing-block-start",e):this.style.removeProperty("--scb-viz-spacing-block-start"),l?this.style.setProperty("--scb-viz-spacing-block-end",l):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"),s?this.style.setProperty("--scb-viz-spacing-inline-end",s):this.style.removeProperty("--scb-viz-spacing-inline-end")};y=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};L=function(){const t=this.containerMaxWidth?.trim();t?this.style.setProperty("--scb-viz-container-max-width",t):this.style.removeProperty("--scb-viz-container-max-width")};c.styles=V`
+        `}}_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}};c=new WeakSet;k=function(){if(l(this,c,H).call(this),typeof ResizeObserver>"u")return;const t=this.shadowRoot?.querySelector(".diagram-content");t&&(this._diagramResizeObserver=new ResizeObserver(()=>{l(this,c,x).call(this)}),this._diagramResizeObserver.observe(this),this._diagramResizeObserver.observe(t))};H=function(){this._diagramResizeObserver?.disconnect(),this._diagramResizeObserver=void 0};V=function(){this._diagramReflowFrame&&(cancelAnimationFrame(this._diagramReflowFrame),this._diagramReflowFrame=0)};x=function(){this.variant!=="Standard"||this.selectedChip!=="Diagram"||(l(this,c,V).call(this),this._diagramReflowFrame=requestAnimationFrame(()=>{this._diagramReflowFrame=requestAnimationFrame(()=>{this._diagramReflowFrame=0,l(this,c,E).call(this)})}))};R=function(t){const e=t?.getAttribute("data-highcharts-chart");if(!e)return;const a=Number.parseInt(e,10);return Number.isNaN(a)?void 0:a};P=function(t){for(const e of t){const a=l(this,c,R).call(this,e);if(a!==void 0)return a;const n=e.querySelector("[data-highcharts-chart]"),i=l(this,c,R).call(this,n);if(i!==void 0)return i}};E=function(){if(this.variant!=="Standard"||this.selectedChip!=="Diagram")return;const t=this.shadowRoot?.querySelector('slot[name="diagram"]');if(!t)return;const e=t.assignedElements({flatten:!0});if(e.length===0)return;const a=l(this,c,P).call(this,e);if(a===void 0)return;const i=window.Highcharts?.charts?.[a];i&&(i.setSize?.(null,null,!1),i.reflow?.())};S=function(){const t=this.variant==="Standard"?this._getResolvedDiagramHeight():"";this.variant==="Standard"?this.style.setProperty("--scb-viz-diagram-min-height",t||"420px"):this.style.removeProperty("--scb-viz-diagram-min-height"),t?(this.style.setProperty("--scb-viz-diagram-height",t),this.style.setProperty("--scb-viz-diagram-overflow","hidden")):(this.style.removeProperty("--scb-viz-diagram-height"),this.style.removeProperty("--scb-viz-diagram-overflow"))};T=function(){const t=l(this,c,y).call(this,this.spacing),e=l(this,c,y).call(this,this.spacingTop)??t,a=l(this,c,y).call(this,this.spacingBottom)??t,n=l(this,c,y).call(this,this.spacingLeft),i=l(this,c,y).call(this,this.spacingRight);e?this.style.setProperty("--scb-viz-spacing-block-start",e):this.style.removeProperty("--scb-viz-spacing-block-start"),a?this.style.setProperty("--scb-viz-spacing-block-end",a):this.style.removeProperty("--scb-viz-spacing-block-end"),n?this.style.setProperty("--scb-viz-spacing-inline-start",n):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")};y=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};D=function(){const t=this.containerMaxWidth?.trim();t?this.style.setProperty("--scb-viz-container-max-width",t):this.style.removeProperty("--scb-viz-container-max-width")};o.styles=W`
     :host {
       display: block;
-      font-family: var(--brand-font);
-      color: var(--md-sys-color-on-surface);
-      background: var(--md-sys-color-surface);
-      padding: var(--spacing-7);
+      box-sizing: border-box;
+      font-family: var(--scb-viz-font-family, var(--brand-font, Inter, 'Segoe UI', Arial, sans-serif));
+      font-size: var(--scb-viz-body-font-size, var(--md-sys-typescale-body-large-size, 1rem));
+      font-weight: var(--scb-viz-body-font-weight, var(--weight-regular, 400));
+      line-height: var(--scb-viz-body-line-height, var(--md-sys-typescale-body-large-line-height, 1.5));
+      letter-spacing: var(--scb-viz-body-letter-spacing, var(--md-sys-typescale-body-large-tracking, normal));
+      font-style: normal;
+      text-align: start;
+      color: var(--scb-viz-text-color, var(--md-sys-color-on-surface, #1f1f1f));
+      background: var(--scb-viz-surface-color, var(--md-sys-color-surface, #fff));
+      padding: var(--scb-viz-padding, var(--spacing-7, 24px));
       max-width: var(--scb-viz-container-max-width, 100%);
-      border-radius: var(--spacing-04, 16px);
-      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: var(--scb-viz-border-radius, var(--spacing-04, 16px));
+      border: 1px solid var(--scb-viz-outline-color, var(--md-sys-color-outline-variant, #c5c7d0));
       /* Avstånd till omgivande innehåll 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);
@@ -391,56 +398,79 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
       margin-inline-end: var(--scb-viz-spacing-inline-end, 0);
     }
 
+    :host *,
+    :host *::before,
+    :host *::after {
+      box-sizing: border-box;
+    }
+
     scb-segmented-button {
-      --scb-segmented-button-height: var(--icon-size-small);
+      --scb-segmented-button-height: var(--icon-size-small, 32px);
     }
 
     .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);
+      font-size: var(--scb-viz-title-size, var(--md-sys-typescale-title-large-size, 1.75rem));
+      font-weight: var(--scb-viz-title-weight, var(--weight-semibold, 600));
+      line-height: var(--scb-viz-title-line-height, var(--md-sys-typescale-title-large-line-height, 1.25));
+      letter-spacing: var(--scb-viz-title-tracking, var(--md-sys-typescale-title-large-tracking, normal));
+      text-align: start;
     }
 
     .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);
+      font-size: var(--scb-viz-subtitle-size, var(--md-sys-typescale-body-large-size, 1rem));
+      font-weight: var(--scb-viz-subtitle-weight, var(--weight-regular, 400));
+      line-height: var(--scb-viz-subtitle-line-height, var(--md-sys-typescale-body-large-line-height, 1.5));
+      letter-spacing: var(--scb-viz-subtitle-tracking, var(--md-sys-typescale-body-large-tracking, normal));
+      text-align: start;
     }
 
     .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);
+      font-size: var(--scb-viz-section-title-size, var(--md-sys-typescale-title-medium-size, 1rem));
+      font-weight: var(--scb-viz-section-title-weight, var(--weight-semibold, 600));
+      line-height: var(--scb-viz-section-title-line-height, var(--md-sys-typescale-title-medium-line-height, 1.5));
+      letter-spacing: var(--scb-viz-section-title-tracking, var(--md-sys-typescale-title-medium-tracking, normal));
+      text-align: start;
+    }
+
+    .body-text {
+      font-size: var(--scb-viz-body-font-size, var(--md-sys-typescale-body-large-size, 1rem));
+      font-weight: var(--scb-viz-body-font-weight, var(--weight-regular, 400));
+      line-height: var(--scb-viz-body-line-height, var(--md-sys-typescale-body-large-line-height, 1.5));
+      letter-spacing: var(--scb-viz-body-letter-spacing, var(--md-sys-typescale-body-large-tracking, normal));
+      font-style: normal;
+      text-align: start;
     }
 
     .section {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-2);
+      gap: var(--spacing-2, 8px);
+      text-align: start;
     }
 
     .more-about-stats-content {
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-7);
+      gap: var(--spacing-7, 24px);
       max-width: 600px;
+      text-align: start;
     }
+
     .sos-logotype-link {
       display: inline-flex;
       border: 0;
-      color: var(--md-sys-color-on-surface);
+      color: var(--scb-viz-text-color, var(--md-sys-color-on-surface, #1f1f1f));
       line-height: 0;
       text-decoration: none;
       width: fit-content;
     }
 
     .sos-logotype-link:focus-visible {
-      outline: var(--stroke-focus-ring) solid var(--md-focus-ring-color);
-      outline-offset: var(--spacing-1);
-      border-radius: var(--radius-xs);
+      outline: var(--stroke-focus-ring, 2px) solid var(--md-focus-ring-color, currentColor);
+      outline-offset: var(--spacing-1, 4px);
+      border-radius: var(--radius-xs, 4px);
     }
+
     .sos-logotype-small {
       height: 26px;
       width: auto;
@@ -458,23 +488,30 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
         height: 24px;
       }
     }
-    
+
     .header {
-      margin-bottom: var(--spacing-7);
+      margin-bottom: var(--spacing-7, 24px);
       max-width: 600px;
+      text-align: start;
     }
 
     .flipp-wrapper {
-      margin-bottom: var(--spacing-9);
+      margin-bottom: var(--spacing-9, 40px);
       max-width: 234px;
     }
 
+    .content,
+    .description,
+    .footer {
+      text-align: start;
+    }
+
     .description {
-      margin-bottom: var(--spacing-8);
+      margin-bottom: var(--spacing-8, 32px);
     }
 
     .footer {
-      margin-top: var(--spacing-7);
+      margin-top: var(--spacing-7, 24px);
     }
 
     .description.section {
@@ -494,13 +531,9 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
     .diagram-content {
       width: 100%;
       max-width: var(--scb-viz-content-max-width, 100%);
-      flex: 0 0 auto;
-    }
-
-    .diagram-content--constrained {
-      width: min(100%, var(--scb-viz-content-max-width, 100%));
-      aspect-ratio: var(--scb-viz-diagram-aspect-ratio, 3 / 2);
-      max-height: var(--scb-viz-diagram-max-height, 600px);
+      min-height: var(--scb-viz-diagram-min-height, 420px);
+      height: var(--scb-viz-diagram-height, auto);
+      overflow: var(--scb-viz-diagram-overflow, visible);
     }
 
     ::slotted([slot='diagram']) {
@@ -508,8 +541,9 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
       width: 100%;
       max-width: 100%;
       min-width: 0;
-      height: 100%;
-      max-height: 100%;
+      min-height: var(--scb-viz-diagram-min-height, 420px);
+      height: var(--scb-viz-diagram-height, auto);
+      overflow: var(--scb-viz-diagram-overflow, visible);
     }
 
     :host([variant='Table']) .table-scroller {
@@ -536,6 +570,7 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
     :host([variant='Standard'].chip-diagram) .diagram-scroller {
       display: flex;
     }
+
     :host([variant='Standard'].chip-table) .table-scroller {
       display: flex;
     }
@@ -548,30 +583,35 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
       border-collapse: collapse;
       width: max-content;
       max-width: none;
+      font-size: var(--scb-viz-body-font-size, var(--md-sys-typescale-body-large-size, 1rem));
+      font-weight: var(--scb-viz-body-font-weight, var(--weight-regular, 400));
+      line-height: var(--scb-viz-body-line-height, var(--md-sys-typescale-body-large-line-height, 1.5));
+      letter-spacing: var(--scb-viz-body-letter-spacing, var(--md-sys-typescale-body-large-tracking, normal));
     }
 
     .scb-viz-table th,
     .scb-viz-table td {
-      border: 1px solid var(--md-sys-color-outline-variant);
+      border: 1px solid var(--scb-viz-outline-color, var(--md-sys-color-outline-variant, #c5c7d0));
       padding-block: var(--spacing-2, 8px);
       padding-inline: var(--spacing-3, 12px);
       background-color: inherit;
+      text-align: start;
     }
 
     .scb-viz-table thead th {
-      font-weight: var(--weight-bold);
+      font-weight: var(--weight-bold, 700);
     }
 
     .scb-viz-table tbody th {
-      font-weight: var(--weight-regular);
+      font-weight: var(--weight-regular, 400);
     }
 
     .scb-viz-table tbody tr:nth-child(odd) {
-      background: var(--md-sys-color-surface-container);
+      background: var(--md-sys-color-surface-container, #f5f5f5);
     }
 
     .scb-viz-table tbody tr:nth-child(even) {
-      background: var(--md-sys-color-surface);
+      background: var(--md-sys-color-surface, #fff);
     }
 
     .scb-viz-table .align-left {
@@ -582,4 +622,4 @@ import{a as V,n as h,r as R,i as D,k as T,x as i,l as z,t as A}from"../../vendor
       text-align: right;
       white-space: nowrap;
     }
-  `;o([h({type:String,reflect:!0})],c.prototype,"variant",2);o([h({type:String,reflect:!0,attribute:"selected-chip"})],c.prototype,"selectedChip",2);o([h({type:String,reflect:!0})],c.prototype,"title",2);o([h({type:String,reflect:!0})],c.prototype,"subtitle",2);o([h({type:String,reflect:!0})],c.prototype,"description",2);o([h({type:String,reflect:!0})],c.prototype,"comment",2);o([h({type:String,reflect:!0})],c.prototype,"source",2);o([h({type:String,reflect:!0})],c.prototype,"footnote",2);o([h({type:String,reflect:!0,attribute:"lang"})],c.prototype,"lang",2);o([h({type:String,reflect:!0,attribute:"image-href"})],c.prototype,"imageHref",2);o([h({type:Boolean,reflect:!0,attribute:"official-statistics"})],c.prototype,"officialStatistics",2);o([h({type:Boolean,reflect:!0,attribute:"disable-toggle"})],c.prototype,"disableToggle",2);o([h({type:String,attribute:"content-max-width"})],c.prototype,"contentMaxWidth",2);o([h({type:String,attribute:"container-max-width"})],c.prototype,"containerMaxWidth",2);o([h({attribute:!1})],c.prototype,"tableData",2);o([R()],c.prototype,"_slottedTableData",2);o([h({type:String,reflect:!0})],c.prototype,"spacing",2);o([h({type:String,attribute:"spacing-top",reflect:!0})],c.prototype,"spacingTop",2);o([h({type:String,attribute:"spacing-bottom",reflect:!0})],c.prototype,"spacingBottom",2);o([h({type:String,attribute:"spacing-left",reflect:!0})],c.prototype,"spacingLeft",2);o([h({type:String,attribute:"spacing-right",reflect:!0})],c.prototype,"spacingRight",2);c=o([A("scb-viz")],c);
+  `;h([d({type:String,reflect:!0})],o.prototype,"variant",2);h([d({type:String,reflect:!0,attribute:"selected-chip"})],o.prototype,"selectedChip",2);h([d({type:String,reflect:!0})],o.prototype,"title",2);h([d({type:String,reflect:!0})],o.prototype,"subtitle",2);h([d({type:String,reflect:!0})],o.prototype,"description",2);h([d({type:String,reflect:!0})],o.prototype,"comment",2);h([d({type:String,reflect:!0})],o.prototype,"source",2);h([d({type:String,reflect:!0})],o.prototype,"footnote",2);h([d({type:String,reflect:!0,attribute:"lang"})],o.prototype,"lang",2);h([d({type:String,reflect:!0,attribute:"image-href"})],o.prototype,"imageHref",2);h([d({type:Boolean,reflect:!0,attribute:"official-statistics"})],o.prototype,"officialStatistics",2);h([d({type:Boolean,reflect:!0,attribute:"disable-toggle"})],o.prototype,"disableToggle",2);h([d({type:String,attribute:"content-max-width"})],o.prototype,"contentMaxWidth",2);h([d({type:String,attribute:"container-max-width"})],o.prototype,"containerMaxWidth",2);h([d({type:String,attribute:"content-height"})],o.prototype,"contentHeight",2);h([d({attribute:!1})],o.prototype,"tableData",2);h([F()],o.prototype,"_slottedTableData",2);h([d({type:String,reflect:!0})],o.prototype,"spacing",2);h([d({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);h([d({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);h([d({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",2);h([d({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",2);o=h([q("scb-viz")],o);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.267",
+    "version":  "0.1.269",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -386,5 +386,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "20995E39797B62C065EE1C1B82BEBB4E216943BF60E2609865BAFB14D593A054"
+    "buildHash":  "EF76F99B5F6232BA1FE986924E7CE60FB577B8C5F062D747BA7A8E8D8081DE9F"
 }

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

@@ -26,8 +26,11 @@ export declare class ScbViz extends LitElement {
     disableToggle: boolean;
     contentMaxWidth: string;
     containerMaxWidth: string;
+    contentHeight: string;
     tableData: ScbVizTableData | undefined;
     private _slottedTableData;
+    private _diagramResizeObserver?;
+    private _diagramReflowFrame;
     /** 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. */
@@ -49,11 +52,14 @@ export declare class ScbViz extends LitElement {
     static styles: import('lit').CSSResult;
     protected firstUpdated(_changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
     private _onTableSlotChange;
+    private _onDiagramSlotChange;
     private _normalizeRenderableCell;
     private _readTableDataFromSlot;
     private _inferTableAlignments;
     private _getResolvedContentMaxWidth;
+    private _getResolvedDiagramHeight;
     private _renderTable;
     render(): import('lit-html').TemplateResult<1>;
     private _syncChipClass;