scb-wc-test 0.1.266 → 0.1.268
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mvc/components/scb-viz/scb-viz.js +47 -37
- package/package.json +2 -2
- package/scb-viz/scb-viz.js +79 -69
- package/scb-wc-test.bundle.js +12 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as V,n as h,r as R,i as D,k as T,x as
|
|
1
|
+
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"
|
|
2
2
|
viewBox="0 0 727.3 87.3" style="enable-background:new 0 0 727.3 87.3;" xml:space="preserve" fill="currentColor">
|
|
3
3
|
<style type="text/css">
|
|
4
4
|
.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 s,l as z,t as A}from"../../vendor
|
|
|
113
113
|
<path d="M688.2,24.4h5.8v6h-5.8V24.4z M688.2,36.6h5.8v30.1h-5.8V36.6z"/>
|
|
114
114
|
<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"/>
|
|
115
115
|
</svg>
|
|
116
|
-
`;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
|
|
116
|
+
`;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")),$=w.length>0?w:Array.from(s.querySelectorAll("tr")).filter(d=>d.closest("thead")===null);if($.forEach(d=>{const g=Array.from(d.querySelectorAll("th, td"));if(g.length===0)return;const x=g[0].tagName==="TH"&&d.closest("thead")===null&&d.closest("tfoot")===null;p.push(x);const S=[];g.forEach(_=>S.push(f(_))),a.push(S)}),!u&&a.length>0){const d=a[0],g=$[0],x=Array.from(g?.querySelectorAll("th, td")??[]);x.length>0&&x.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`
|
|
117
117
|
<table class="scb-viz-table" part="table">
|
|
118
|
-
${r.length>0?
|
|
118
|
+
${r.length>0?i`
|
|
119
119
|
<thead>
|
|
120
120
|
<tr>
|
|
121
|
-
${r.map((a,p)=>{const m=e[p]==="right"?"align-right":"align-left";return
|
|
121
|
+
${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>`})}
|
|
122
122
|
</tr>
|
|
123
123
|
</thead>
|
|
124
124
|
`:""}
|
|
125
125
|
<tbody>
|
|
126
|
-
${
|
|
126
|
+
${s.map((a,p)=>{const m=n[p]===!0;return i`
|
|
127
127
|
<tr>
|
|
128
|
-
${a.map((f,u)=>{const w=e[u]==="right"?"align-right":"align-left",$=f.html?T(f.html):f.text;return u===0&&m?
|
|
128
|
+
${a.map((f,u)=>{const w=e[u]==="right"?"align-right":"align-left",$=f.html?T(f.html):f.text;return u===0&&m?i`<th scope="row" class=${w}>${$}</th>`:i`<td class=${w}>${$}</td>`})}
|
|
129
129
|
</tr>
|
|
130
130
|
`})}
|
|
131
131
|
</tbody>
|
|
132
132
|
</table>
|
|
133
|
-
`}render(){switch(this.variant){case"Table":return
|
|
133
|
+
`}render(){switch(this.variant){case"Table":return i`
|
|
134
134
|
<div part="container">
|
|
135
135
|
<div class="header">
|
|
136
|
-
${this.title?
|
|
137
|
-
${this.subtitle?
|
|
136
|
+
${this.title?i` <div class="label">${this.title}</div> `:""}
|
|
137
|
+
${this.subtitle?i` <div class="sub-label">${this.subtitle}</div> `:""}
|
|
138
138
|
</div>
|
|
139
139
|
<div class="content">
|
|
140
140
|
<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 s,l as z,t as A}from"../../vendor
|
|
|
147
147
|
</scb-horizontal-scroller>
|
|
148
148
|
</div>
|
|
149
149
|
<div class="footer">
|
|
150
|
-
${this.description?
|
|
150
|
+
${this.description?i`
|
|
151
151
|
<div class="description section">
|
|
152
152
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
153
153
|
<div>${this.description}</div>
|
|
154
154
|
</div>
|
|
155
155
|
`:""}
|
|
156
|
-
${this.comment||this.source||this.footnote||this.officialStatistics?
|
|
156
|
+
${this.comment||this.source||this.footnote||this.officialStatistics?i`
|
|
157
157
|
<scb-divider></scb-divider>
|
|
158
158
|
<scb-accordion>
|
|
159
159
|
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
160
160
|
<div class="more-about-stats-content">
|
|
161
|
-
${this.comment?
|
|
161
|
+
${this.comment?i`
|
|
162
162
|
<div class="section">
|
|
163
163
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
164
164
|
<div>${this.comment}</div>
|
|
165
165
|
</div>
|
|
166
166
|
`:""}
|
|
167
|
-
${this.source?
|
|
167
|
+
${this.source?i`
|
|
168
168
|
<div class="section">
|
|
169
169
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
170
170
|
<div>${this.source}</div>
|
|
171
171
|
</div>
|
|
172
172
|
`:""}
|
|
173
|
-
${this.footnote?
|
|
173
|
+
${this.footnote?i`
|
|
174
174
|
<div class="section">
|
|
175
175
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
176
176
|
<div>${this.footnote}</div>
|
|
177
177
|
</div>
|
|
178
178
|
`:""}
|
|
179
|
-
${this.officialStatistics?
|
|
179
|
+
${this.officialStatistics?i`
|
|
180
180
|
<a
|
|
181
181
|
class="sos-logotype-link"
|
|
182
182
|
href="https://www.scb.se/sos"
|
|
@@ -202,11 +202,11 @@ import{a as V,n as h,r as R,i as D,k as T,x as s,l as z,t as A}from"../../vendor
|
|
|
202
202
|
></slot>
|
|
203
203
|
<slot></slot>
|
|
204
204
|
</div>
|
|
205
|
-
`;case"Image":return
|
|
205
|
+
`;case"Image":return i`
|
|
206
206
|
<div part="container">
|
|
207
207
|
<div class="header">
|
|
208
|
-
${this.title?
|
|
209
|
-
${this.subtitle?
|
|
208
|
+
${this.title?i` <div class="label">${this.title}</div> `:""}
|
|
209
|
+
${this.subtitle?i` <div class="sub-label">${this.subtitle}</div> `:""}
|
|
210
210
|
</div>
|
|
211
211
|
<div
|
|
212
212
|
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 s,l as z,t as A}from"../../vendor
|
|
|
215
215
|
<img src="${this.imageHref}" alt="Image figure" />
|
|
216
216
|
</div>
|
|
217
217
|
<div class="footer">
|
|
218
|
-
${this.description?
|
|
218
|
+
${this.description?i`
|
|
219
219
|
<div class="description section">
|
|
220
220
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
221
221
|
<div>${this.description}</div>
|
|
222
222
|
</div>
|
|
223
223
|
`:""}
|
|
224
|
-
${this.comment||this.source||this.footnote||this.officialStatistics?
|
|
224
|
+
${this.comment||this.source||this.footnote||this.officialStatistics?i`
|
|
225
225
|
<scb-divider></scb-divider>
|
|
226
226
|
<scb-accordion>
|
|
227
227
|
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
228
228
|
<div class="more-about-stats-content">
|
|
229
|
-
${this.comment?
|
|
229
|
+
${this.comment?i`
|
|
230
230
|
<div class="section">
|
|
231
231
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
232
232
|
<div>${this.comment}</div>
|
|
233
233
|
</div>
|
|
234
234
|
`:""}
|
|
235
|
-
${this.source?
|
|
235
|
+
${this.source?i`
|
|
236
236
|
<div class="section">
|
|
237
237
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
238
238
|
<div>${this.source}</div>
|
|
239
239
|
</div>
|
|
240
240
|
`:""}
|
|
241
|
-
${this.footnote?
|
|
241
|
+
${this.footnote?i`
|
|
242
242
|
<div class="section">
|
|
243
243
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
244
244
|
<div>${this.footnote}</div>
|
|
245
245
|
</div>
|
|
246
246
|
`:""}
|
|
247
|
-
${this.officialStatistics?
|
|
247
|
+
${this.officialStatistics?i`
|
|
248
248
|
<a
|
|
249
249
|
class="sos-logotype-link"
|
|
250
250
|
href="https://www.scb.se/sos"
|
|
@@ -270,13 +270,13 @@ import{a as V,n as h,r as R,i as D,k as T,x as s,l as z,t as A}from"../../vendor
|
|
|
270
270
|
></slot>
|
|
271
271
|
<slot></slot>
|
|
272
272
|
</div>
|
|
273
|
-
`;default:return
|
|
273
|
+
`;default:return i`
|
|
274
274
|
<div part="container">
|
|
275
275
|
<div class="header">
|
|
276
|
-
${this.title?
|
|
277
|
-
${this.subtitle?
|
|
276
|
+
${this.title?i` <div class="label">${this.title}</div> `:""}
|
|
277
|
+
${this.subtitle?i` <div class="sub-label">${this.subtitle}</div> `:""}
|
|
278
278
|
</div>
|
|
279
|
-
${this.variant==="Standard"&&!this.disableToggle?
|
|
279
|
+
${this.variant==="Standard"&&!this.disableToggle?i`
|
|
280
280
|
<div class="flipp-wrapper">
|
|
281
281
|
<scb-segmented-button
|
|
282
282
|
.value=${this.selectedChip||""}
|
|
@@ -303,7 +303,7 @@ import{a as V,n as h,r as R,i as D,k as T,x as s,l as z,t as A}from"../../vendor
|
|
|
303
303
|
show-scrollbar
|
|
304
304
|
>
|
|
305
305
|
<div
|
|
306
|
-
class
|
|
306
|
+
class=${this._getResolvedContentMaxWidth()?"diagram-content diagram-content--constrained":"diagram-content"}
|
|
307
307
|
style=${this._getResolvedContentMaxWidth()?`--scb-viz-content-max-width: ${this._getResolvedContentMaxWidth()};`:""}
|
|
308
308
|
>
|
|
309
309
|
<slot name="diagram"></slot>
|
|
@@ -319,36 +319,36 @@ import{a as V,n as h,r as R,i as D,k as T,x as s,l as z,t as A}from"../../vendor
|
|
|
319
319
|
</scb-horizontal-scroller>
|
|
320
320
|
</div>
|
|
321
321
|
<div class="footer">
|
|
322
|
-
${this.description?
|
|
322
|
+
${this.description?i`
|
|
323
323
|
<div class="description section">
|
|
324
324
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
325
325
|
<div>${this.description}</div>
|
|
326
326
|
</div>
|
|
327
327
|
`:""}
|
|
328
|
-
${this.comment||this.source||this.footnote||this.officialStatistics?
|
|
328
|
+
${this.comment||this.source||this.footnote||this.officialStatistics?i`
|
|
329
329
|
<scb-divider></scb-divider>
|
|
330
330
|
<scb-accordion>
|
|
331
331
|
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
332
332
|
<div class="more-about-stats-content">
|
|
333
|
-
${this.comment?
|
|
333
|
+
${this.comment?i`
|
|
334
334
|
<div class="section">
|
|
335
335
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
336
336
|
<div>${this.comment}</div>
|
|
337
337
|
</div>
|
|
338
338
|
`:""}
|
|
339
|
-
${this.source?
|
|
339
|
+
${this.source?i`
|
|
340
340
|
<div class="section">
|
|
341
341
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
342
342
|
<div>${this.source}</div>
|
|
343
343
|
</div>
|
|
344
344
|
`:""}
|
|
345
|
-
${this.footnote?
|
|
345
|
+
${this.footnote?i`
|
|
346
346
|
<div class="section">
|
|
347
347
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
348
348
|
<div>${this.footnote}</div>
|
|
349
349
|
</div>
|
|
350
350
|
`:""}
|
|
351
|
-
${this.officialStatistics?
|
|
351
|
+
${this.officialStatistics?i`
|
|
352
352
|
<a
|
|
353
353
|
class="sos-logotype-link"
|
|
354
354
|
href="https://www.scb.se/sos"
|
|
@@ -374,7 +374,7 @@ import{a as V,n as h,r as R,i as D,k as T,x as s,l as z,t as A}from"../../vendor
|
|
|
374
374
|
></slot>
|
|
375
375
|
<slot></slot>
|
|
376
376
|
</div>
|
|
377
|
-
`}}_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),
|
|
377
|
+
`}}_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`
|
|
378
378
|
:host {
|
|
379
379
|
display: block;
|
|
380
380
|
font-family: var(--brand-font);
|
|
@@ -494,13 +494,23 @@ import{a as V,n as h,r as R,i as D,k as T,x as s,l as z,t as A}from"../../vendor
|
|
|
494
494
|
.diagram-content {
|
|
495
495
|
width: 100%;
|
|
496
496
|
max-width: var(--scb-viz-content-max-width, 100%);
|
|
497
|
+
min-width: 0;
|
|
498
|
+
flex: 0 0 auto;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.diagram-content--constrained {
|
|
502
|
+
width: min(100%, var(--scb-viz-content-max-width, 100%));
|
|
503
|
+
max-width: var(--scb-viz-content-max-width, 100%);
|
|
504
|
+
min-width: 0;
|
|
497
505
|
}
|
|
498
506
|
|
|
499
507
|
::slotted([slot='diagram']) {
|
|
500
508
|
display: block;
|
|
501
509
|
width: 100%;
|
|
502
510
|
max-width: 100%;
|
|
503
|
-
min-width:
|
|
511
|
+
min-width: 0;
|
|
512
|
+
height: auto;
|
|
513
|
+
max-height: none;
|
|
504
514
|
}
|
|
505
515
|
|
|
506
516
|
:host([variant='Table']) .table-scroller {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.268",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -386,5 +386,5 @@
|
|
|
386
386
|
},
|
|
387
387
|
"./mvc/*": "./mvc/*"
|
|
388
388
|
},
|
|
389
|
-
"buildHash": "
|
|
389
|
+
"buildHash": "AF724D867D9C31D5235D7F229261F108BEA8058AB8474B332A871FBC05F29F52"
|
|
390
390
|
}
|
package/scb-viz/scb-viz.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css as R, LitElement as D, html as
|
|
1
|
+
import { css as R, LitElement as D, html as i } from "lit";
|
|
2
2
|
import { unsafeSVG as C } from "lit/directives/unsafe-svg.js";
|
|
3
3
|
import { unsafeHTML as T } from "lit/directives/unsafe-html.js";
|
|
4
4
|
import { property as r, state as A, customElement as H } from "lit/decorators.js";
|
|
@@ -131,7 +131,7 @@ const M = `<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xm
|
|
|
131
131
|
<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"/>
|
|
132
132
|
</svg>
|
|
133
133
|
`;
|
|
134
|
-
let
|
|
134
|
+
let s = class extends D {
|
|
135
135
|
constructor() {
|
|
136
136
|
super(...arguments), E(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.contentMaxWidth = "", this.containerMaxWidth = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
|
|
137
137
|
}
|
|
@@ -180,8 +180,8 @@ let i = class extends D {
|
|
|
180
180
|
};
|
|
181
181
|
}
|
|
182
182
|
_readTableDataFromSlot(t) {
|
|
183
|
-
var
|
|
184
|
-
const e = t || ((
|
|
183
|
+
var x;
|
|
184
|
+
const e = t || ((x = this.shadowRoot) == null ? void 0 : x.querySelector('slot[name="table"]'));
|
|
185
185
|
if (!e) return;
|
|
186
186
|
const c = e.assignedElements({ flatten: !0 }), h = [];
|
|
187
187
|
c.forEach((n) => {
|
|
@@ -207,13 +207,13 @@ let i = class extends D {
|
|
|
207
207
|
if ($.forEach((n) => {
|
|
208
208
|
const g = Array.from(n.querySelectorAll("th, td"));
|
|
209
209
|
if (g.length === 0) return;
|
|
210
|
-
const
|
|
211
|
-
p.push(
|
|
210
|
+
const S = g[0].tagName === "TH" && n.closest("thead") === null && n.closest("tfoot") === null;
|
|
211
|
+
p.push(S);
|
|
212
212
|
const z = [];
|
|
213
213
|
g.forEach((_) => z.push(f(_))), d.push(z);
|
|
214
214
|
}), !u && d.length > 0) {
|
|
215
|
-
const n = d[0], g = $[0],
|
|
216
|
-
|
|
215
|
+
const n = d[0], g = $[0], S = Array.from((g == null ? void 0 : g.querySelectorAll("th, td")) ?? []);
|
|
216
|
+
S.length > 0 && S.every((_) => _.tagName === "TH") && (g == null ? void 0 : g.closest("tbody")) === null && (a.splice(0, a.length, ...n), d.shift(), p.shift());
|
|
217
217
|
}
|
|
218
218
|
this._slottedTableData = {
|
|
219
219
|
headers: a.length > 0 ? a : void 0,
|
|
@@ -258,14 +258,14 @@ let i = class extends D {
|
|
|
258
258
|
for (; v.length < c; ) v.push({ html: "", text: "" });
|
|
259
259
|
return v;
|
|
260
260
|
}), a = t.rowHeaderRows ?? [];
|
|
261
|
-
return
|
|
261
|
+
return i`
|
|
262
262
|
<table class="scb-viz-table" part="table">
|
|
263
|
-
${h.length > 0 ?
|
|
263
|
+
${h.length > 0 ? i`
|
|
264
264
|
<thead>
|
|
265
265
|
<tr>
|
|
266
266
|
${h.map((p, v) => {
|
|
267
267
|
const f = e[v] === "right" ? "align-right" : "align-left";
|
|
268
|
-
return
|
|
268
|
+
return i`<th scope="col" class=${f}>${p.html ? T(p.html) : p.text}</th>`;
|
|
269
269
|
})}
|
|
270
270
|
</tr>
|
|
271
271
|
</thead>
|
|
@@ -273,11 +273,11 @@ let i = class extends D {
|
|
|
273
273
|
<tbody>
|
|
274
274
|
${o.map((p, v) => {
|
|
275
275
|
const f = a[v] === !0;
|
|
276
|
-
return
|
|
276
|
+
return i`
|
|
277
277
|
<tr>
|
|
278
278
|
${p.map((u, w) => {
|
|
279
|
-
const $ = e[w] === "right" ? "align-right" : "align-left",
|
|
280
|
-
return w === 0 && f ?
|
|
279
|
+
const $ = e[w] === "right" ? "align-right" : "align-left", x = u.html ? T(u.html) : u.text;
|
|
280
|
+
return w === 0 && f ? i`<th scope="row" class=${$}>${x}</th>` : i`<td class=${$}>${x}</td>`;
|
|
281
281
|
})}
|
|
282
282
|
</tr>
|
|
283
283
|
`;
|
|
@@ -289,11 +289,11 @@ let i = class extends D {
|
|
|
289
289
|
render() {
|
|
290
290
|
switch (this.variant) {
|
|
291
291
|
case "Table":
|
|
292
|
-
return
|
|
292
|
+
return i`
|
|
293
293
|
<div part="container">
|
|
294
294
|
<div class="header">
|
|
295
|
-
${this.title ?
|
|
296
|
-
${this.subtitle ?
|
|
295
|
+
${this.title ? i` <div class="label">${this.title}</div> ` : ""}
|
|
296
|
+
${this.subtitle ? i` <div class="sub-label">${this.subtitle}</div> ` : ""}
|
|
297
297
|
</div>
|
|
298
298
|
<div class="content">
|
|
299
299
|
<scb-horizontal-scroller
|
|
@@ -306,36 +306,36 @@ let i = class extends D {
|
|
|
306
306
|
</scb-horizontal-scroller>
|
|
307
307
|
</div>
|
|
308
308
|
<div class="footer">
|
|
309
|
-
${this.description ?
|
|
309
|
+
${this.description ? i`
|
|
310
310
|
<div class="description section">
|
|
311
311
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
312
312
|
<div>${this.description}</div>
|
|
313
313
|
</div>
|
|
314
314
|
` : ""}
|
|
315
|
-
${this.comment || this.source || this.footnote || this.officialStatistics ?
|
|
315
|
+
${this.comment || this.source || this.footnote || this.officialStatistics ? i`
|
|
316
316
|
<scb-divider></scb-divider>
|
|
317
317
|
<scb-accordion>
|
|
318
318
|
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
319
319
|
<div class="more-about-stats-content">
|
|
320
|
-
${this.comment ?
|
|
320
|
+
${this.comment ? i`
|
|
321
321
|
<div class="section">
|
|
322
322
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
323
323
|
<div>${this.comment}</div>
|
|
324
324
|
</div>
|
|
325
325
|
` : ""}
|
|
326
|
-
${this.source ?
|
|
326
|
+
${this.source ? i`
|
|
327
327
|
<div class="section">
|
|
328
328
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
329
329
|
<div>${this.source}</div>
|
|
330
330
|
</div>
|
|
331
331
|
` : ""}
|
|
332
|
-
${this.footnote ?
|
|
332
|
+
${this.footnote ? i`
|
|
333
333
|
<div class="section">
|
|
334
334
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
335
335
|
<div>${this.footnote}</div>
|
|
336
336
|
</div>
|
|
337
337
|
` : ""}
|
|
338
|
-
${this.officialStatistics ?
|
|
338
|
+
${this.officialStatistics ? i`
|
|
339
339
|
<a
|
|
340
340
|
class="sos-logotype-link"
|
|
341
341
|
href="https://www.scb.se/sos"
|
|
@@ -363,11 +363,11 @@ let i = class extends D {
|
|
|
363
363
|
</div>
|
|
364
364
|
`;
|
|
365
365
|
case "Image":
|
|
366
|
-
return
|
|
366
|
+
return i`
|
|
367
367
|
<div part="container">
|
|
368
368
|
<div class="header">
|
|
369
|
-
${this.title ?
|
|
370
|
-
${this.subtitle ?
|
|
369
|
+
${this.title ? i` <div class="label">${this.title}</div> ` : ""}
|
|
370
|
+
${this.subtitle ? i` <div class="sub-label">${this.subtitle}</div> ` : ""}
|
|
371
371
|
</div>
|
|
372
372
|
<div
|
|
373
373
|
class="content image-content"
|
|
@@ -376,36 +376,36 @@ let i = class extends D {
|
|
|
376
376
|
<img src="${this.imageHref}" alt="Image figure" />
|
|
377
377
|
</div>
|
|
378
378
|
<div class="footer">
|
|
379
|
-
${this.description ?
|
|
379
|
+
${this.description ? i`
|
|
380
380
|
<div class="description section">
|
|
381
381
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
382
382
|
<div>${this.description}</div>
|
|
383
383
|
</div>
|
|
384
384
|
` : ""}
|
|
385
|
-
${this.comment || this.source || this.footnote || this.officialStatistics ?
|
|
385
|
+
${this.comment || this.source || this.footnote || this.officialStatistics ? i`
|
|
386
386
|
<scb-divider></scb-divider>
|
|
387
387
|
<scb-accordion>
|
|
388
388
|
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
389
389
|
<div class="more-about-stats-content">
|
|
390
|
-
${this.comment ?
|
|
390
|
+
${this.comment ? i`
|
|
391
391
|
<div class="section">
|
|
392
392
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
393
393
|
<div>${this.comment}</div>
|
|
394
394
|
</div>
|
|
395
395
|
` : ""}
|
|
396
|
-
${this.source ?
|
|
396
|
+
${this.source ? i`
|
|
397
397
|
<div class="section">
|
|
398
398
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
399
399
|
<div>${this.source}</div>
|
|
400
400
|
</div>
|
|
401
401
|
` : ""}
|
|
402
|
-
${this.footnote ?
|
|
402
|
+
${this.footnote ? i`
|
|
403
403
|
<div class="section">
|
|
404
404
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
405
405
|
<div>${this.footnote}</div>
|
|
406
406
|
</div>
|
|
407
407
|
` : ""}
|
|
408
|
-
${this.officialStatistics ?
|
|
408
|
+
${this.officialStatistics ? i`
|
|
409
409
|
<a
|
|
410
410
|
class="sos-logotype-link"
|
|
411
411
|
href="https://www.scb.se/sos"
|
|
@@ -433,13 +433,13 @@ let i = class extends D {
|
|
|
433
433
|
</div>
|
|
434
434
|
`;
|
|
435
435
|
default:
|
|
436
|
-
return
|
|
436
|
+
return i`
|
|
437
437
|
<div part="container">
|
|
438
438
|
<div class="header">
|
|
439
|
-
${this.title ?
|
|
440
|
-
${this.subtitle ?
|
|
439
|
+
${this.title ? i` <div class="label">${this.title}</div> ` : ""}
|
|
440
|
+
${this.subtitle ? i` <div class="sub-label">${this.subtitle}</div> ` : ""}
|
|
441
441
|
</div>
|
|
442
|
-
${this.variant === "Standard" && !this.disableToggle ?
|
|
442
|
+
${this.variant === "Standard" && !this.disableToggle ? i`
|
|
443
443
|
<div class="flipp-wrapper">
|
|
444
444
|
<scb-segmented-button
|
|
445
445
|
.value=${this.selectedChip || ""}
|
|
@@ -466,7 +466,7 @@ let i = class extends D {
|
|
|
466
466
|
show-scrollbar
|
|
467
467
|
>
|
|
468
468
|
<div
|
|
469
|
-
class
|
|
469
|
+
class=${this._getResolvedContentMaxWidth() ? "diagram-content diagram-content--constrained" : "diagram-content"}
|
|
470
470
|
style=${this._getResolvedContentMaxWidth() ? `--scb-viz-content-max-width: ${this._getResolvedContentMaxWidth()};` : ""}
|
|
471
471
|
>
|
|
472
472
|
<slot name="diagram"></slot>
|
|
@@ -482,36 +482,36 @@ let i = class extends D {
|
|
|
482
482
|
</scb-horizontal-scroller>
|
|
483
483
|
</div>
|
|
484
484
|
<div class="footer">
|
|
485
|
-
${this.description ?
|
|
485
|
+
${this.description ? i`
|
|
486
486
|
<div class="description section">
|
|
487
487
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
488
488
|
<div>${this.description}</div>
|
|
489
489
|
</div>
|
|
490
490
|
` : ""}
|
|
491
|
-
${this.comment || this.source || this.footnote || this.officialStatistics ?
|
|
491
|
+
${this.comment || this.source || this.footnote || this.officialStatistics ? i`
|
|
492
492
|
<scb-divider></scb-divider>
|
|
493
493
|
<scb-accordion>
|
|
494
494
|
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
495
495
|
<div class="more-about-stats-content">
|
|
496
|
-
${this.comment ?
|
|
496
|
+
${this.comment ? i`
|
|
497
497
|
<div class="section">
|
|
498
498
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
499
499
|
<div>${this.comment}</div>
|
|
500
500
|
</div>
|
|
501
501
|
` : ""}
|
|
502
|
-
${this.source ?
|
|
502
|
+
${this.source ? i`
|
|
503
503
|
<div class="section">
|
|
504
504
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
505
505
|
<div>${this.source}</div>
|
|
506
506
|
</div>
|
|
507
507
|
` : ""}
|
|
508
|
-
${this.footnote ?
|
|
508
|
+
${this.footnote ? i`
|
|
509
509
|
<div class="section">
|
|
510
510
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
511
511
|
<div>${this.footnote}</div>
|
|
512
512
|
</div>
|
|
513
513
|
` : ""}
|
|
514
|
-
${this.officialStatistics ?
|
|
514
|
+
${this.officialStatistics ? i`
|
|
515
515
|
<a
|
|
516
516
|
class="sos-logotype-link"
|
|
517
517
|
href="https://www.scb.se/sos"
|
|
@@ -594,7 +594,7 @@ k = function() {
|
|
|
594
594
|
const t = (e = this.containerMaxWidth) == null ? void 0 : e.trim();
|
|
595
595
|
t ? this.style.setProperty("--scb-viz-container-max-width", t) : this.style.removeProperty("--scb-viz-container-max-width");
|
|
596
596
|
};
|
|
597
|
-
|
|
597
|
+
s.styles = R`
|
|
598
598
|
:host {
|
|
599
599
|
display: block;
|
|
600
600
|
font-family: var(--brand-font);
|
|
@@ -714,13 +714,23 @@ i.styles = R`
|
|
|
714
714
|
.diagram-content {
|
|
715
715
|
width: 100%;
|
|
716
716
|
max-width: var(--scb-viz-content-max-width, 100%);
|
|
717
|
+
min-width: 0;
|
|
718
|
+
flex: 0 0 auto;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.diagram-content--constrained {
|
|
722
|
+
width: min(100%, var(--scb-viz-content-max-width, 100%));
|
|
723
|
+
max-width: var(--scb-viz-content-max-width, 100%);
|
|
724
|
+
min-width: 0;
|
|
717
725
|
}
|
|
718
726
|
|
|
719
727
|
::slotted([slot='diagram']) {
|
|
720
728
|
display: block;
|
|
721
729
|
width: 100%;
|
|
722
730
|
max-width: 100%;
|
|
723
|
-
min-width:
|
|
731
|
+
min-width: 0;
|
|
732
|
+
height: auto;
|
|
733
|
+
max-height: none;
|
|
724
734
|
}
|
|
725
735
|
|
|
726
736
|
:host([variant='Table']) .table-scroller {
|
|
@@ -796,70 +806,70 @@ i.styles = R`
|
|
|
796
806
|
`;
|
|
797
807
|
l([
|
|
798
808
|
r({ type: String, reflect: !0 })
|
|
799
|
-
],
|
|
809
|
+
], s.prototype, "variant", 2);
|
|
800
810
|
l([
|
|
801
811
|
r({ type: String, reflect: !0, attribute: "selected-chip" })
|
|
802
|
-
],
|
|
812
|
+
], s.prototype, "selectedChip", 2);
|
|
803
813
|
l([
|
|
804
814
|
r({ type: String, reflect: !0 })
|
|
805
|
-
],
|
|
815
|
+
], s.prototype, "title", 2);
|
|
806
816
|
l([
|
|
807
817
|
r({ type: String, reflect: !0 })
|
|
808
|
-
],
|
|
818
|
+
], s.prototype, "subtitle", 2);
|
|
809
819
|
l([
|
|
810
820
|
r({ type: String, reflect: !0 })
|
|
811
|
-
],
|
|
821
|
+
], s.prototype, "description", 2);
|
|
812
822
|
l([
|
|
813
823
|
r({ type: String, reflect: !0 })
|
|
814
|
-
],
|
|
824
|
+
], s.prototype, "comment", 2);
|
|
815
825
|
l([
|
|
816
826
|
r({ type: String, reflect: !0 })
|
|
817
|
-
],
|
|
827
|
+
], s.prototype, "source", 2);
|
|
818
828
|
l([
|
|
819
829
|
r({ type: String, reflect: !0 })
|
|
820
|
-
],
|
|
830
|
+
], s.prototype, "footnote", 2);
|
|
821
831
|
l([
|
|
822
832
|
r({ type: String, reflect: !0, attribute: "lang" })
|
|
823
|
-
],
|
|
833
|
+
], s.prototype, "lang", 2);
|
|
824
834
|
l([
|
|
825
835
|
r({ type: String, reflect: !0, attribute: "image-href" })
|
|
826
|
-
],
|
|
836
|
+
], s.prototype, "imageHref", 2);
|
|
827
837
|
l([
|
|
828
838
|
r({ type: Boolean, reflect: !0, attribute: "official-statistics" })
|
|
829
|
-
],
|
|
839
|
+
], s.prototype, "officialStatistics", 2);
|
|
830
840
|
l([
|
|
831
841
|
r({ type: Boolean, reflect: !0, attribute: "disable-toggle" })
|
|
832
|
-
],
|
|
842
|
+
], s.prototype, "disableToggle", 2);
|
|
833
843
|
l([
|
|
834
844
|
r({ type: String, attribute: "content-max-width" })
|
|
835
|
-
],
|
|
845
|
+
], s.prototype, "contentMaxWidth", 2);
|
|
836
846
|
l([
|
|
837
847
|
r({ type: String, attribute: "container-max-width" })
|
|
838
|
-
],
|
|
848
|
+
], s.prototype, "containerMaxWidth", 2);
|
|
839
849
|
l([
|
|
840
850
|
r({ attribute: !1 })
|
|
841
|
-
],
|
|
851
|
+
], s.prototype, "tableData", 2);
|
|
842
852
|
l([
|
|
843
853
|
A()
|
|
844
|
-
],
|
|
854
|
+
], s.prototype, "_slottedTableData", 2);
|
|
845
855
|
l([
|
|
846
856
|
r({ type: String, reflect: !0 })
|
|
847
|
-
],
|
|
857
|
+
], s.prototype, "spacing", 2);
|
|
848
858
|
l([
|
|
849
859
|
r({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
850
|
-
],
|
|
860
|
+
], s.prototype, "spacingTop", 2);
|
|
851
861
|
l([
|
|
852
862
|
r({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
853
|
-
],
|
|
863
|
+
], s.prototype, "spacingBottom", 2);
|
|
854
864
|
l([
|
|
855
865
|
r({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
856
|
-
],
|
|
866
|
+
], s.prototype, "spacingLeft", 2);
|
|
857
867
|
l([
|
|
858
868
|
r({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
859
|
-
],
|
|
860
|
-
|
|
869
|
+
], s.prototype, "spacingRight", 2);
|
|
870
|
+
s = l([
|
|
861
871
|
H("scb-viz")
|
|
862
|
-
],
|
|
872
|
+
], s);
|
|
863
873
|
export {
|
|
864
|
-
|
|
874
|
+
s as ScbViz
|
|
865
875
|
};
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -12392,7 +12392,7 @@
|
|
|
12392
12392
|
show-scrollbar
|
|
12393
12393
|
>
|
|
12394
12394
|
<div
|
|
12395
|
-
class
|
|
12395
|
+
class=${this._getResolvedContentMaxWidth()?"diagram-content diagram-content--constrained":"diagram-content"}
|
|
12396
12396
|
style=${this._getResolvedContentMaxWidth()?`--scb-viz-content-max-width: ${this._getResolvedContentMaxWidth()};`:""}
|
|
12397
12397
|
>
|
|
12398
12398
|
<slot name="diagram"></slot>
|
|
@@ -12583,13 +12583,23 @@
|
|
|
12583
12583
|
.diagram-content {
|
|
12584
12584
|
width: 100%;
|
|
12585
12585
|
max-width: var(--scb-viz-content-max-width, 100%);
|
|
12586
|
+
min-width: 0;
|
|
12587
|
+
flex: 0 0 auto;
|
|
12588
|
+
}
|
|
12589
|
+
|
|
12590
|
+
.diagram-content--constrained {
|
|
12591
|
+
width: min(100%, var(--scb-viz-content-max-width, 100%));
|
|
12592
|
+
max-width: var(--scb-viz-content-max-width, 100%);
|
|
12593
|
+
min-width: 0;
|
|
12586
12594
|
}
|
|
12587
12595
|
|
|
12588
12596
|
::slotted([slot='diagram']) {
|
|
12589
12597
|
display: block;
|
|
12590
12598
|
width: 100%;
|
|
12591
12599
|
max-width: 100%;
|
|
12592
|
-
min-width:
|
|
12600
|
+
min-width: 0;
|
|
12601
|
+
height: auto;
|
|
12602
|
+
max-height: none;
|
|
12593
12603
|
}
|
|
12594
12604
|
|
|
12595
12605
|
:host([variant='Table']) .table-scroller {
|