scb-wc-test 0.1.237 → 0.1.239
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 +229 -129
- package/package.json +2 -2
- package/scb-viz/scb-viz.d.ts +8 -12
- package/scb-viz/scb-viz.js +380 -324
- package/scb-wc-test.bundle.js +550 -450
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as k,n as p,r as V,i as D,k as M,x as s,l as x,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(c,o,i){try{customElements.get(c)||e(c,o,i)}catch(a){var r=String(a||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var H=Object.defineProperty,R=Object.getOwnPropertyDescriptor,T=t=>{throw TypeError(t)},n=(t,e,c,o)=>{for(var i=o>1?void 0:o?R(e,c):e,r=t.length-1,a;r>=0;r--)(a=t[r])&&(i=(o?a(e,c,i):a(i))||i);return o&&i&&H(e,c,i),i},E=(t,e,c)=>e.has(t)||T("Cannot "+c),I=(t,e,c)=>e.has(t)?T("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,c),m=(t,e,c)=>(E(t,e,"access private method"),c),g,L,y;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,138 +113,185 @@ 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
|
|
|
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
|
|
116
|
+
`;let l=class extends D{constructor(){super(...arguments),I(this,g),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,g,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"))&&m(this,g,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 c=e.assignedElements({flatten:!0}),o=[];c.forEach(h=>{if(h.tagName==="TABLE"){o.push(h);return}h.querySelectorAll("table").forEach(v=>o.push(v))});const i=o[0];if(!i){this._slottedTableData=void 0;return}const r=[],a=[],d=[],b=h=>h?(h.textContent??"").replace(/\s+/g," ").trim():"",f=h=>h?{html:(h.innerHTML??"").trim(),text:b(h)}:{html:"",text:""},u=i.querySelector("thead tr");u&&Array.from(u.querySelectorAll("th, td")).forEach(v=>r.push(f(v)));const S=Array.from(i.querySelectorAll("tbody tr")),w=S.length>0?S:Array.from(i.querySelectorAll("tr")).filter(h=>h.closest("thead")===null);if(w.forEach(h=>{const v=Array.from(h.querySelectorAll("th, td"));if(v.length===0)return;const $=v[0].tagName==="TH"&&h.closest("thead")===null&&h.closest("tfoot")===null;d.push($);const _=[];v.forEach(z=>_.push(f(z))),a.push(_)}),!u&&a.length>0){const h=a[0],v=w[0],$=Array.from(v?.querySelectorAll("th, td")??[]);$.length>0&&$.every(z=>z.tagName==="TH")&&v?.closest("tbody")===null&&(r.splice(0,r.length,...h),a.shift(),d.shift())}this._slottedTableData={headers:r.length>0?r:void 0,rows:a,rowHeaderRows:d.length>0?d:void 0}}_inferTableAlignments(t){const e=Math.max(t.headers?.length??0,...t.rows.map(i=>i.length)),c=i=>{if(i==null)return!1;if(typeof i=="number")return!0;const r=String(i).replace(/[\u00A0\u202F\s]+/g,"").trim();return r?/^-?\d+(?:[.,]\d+)?$/.test(r):!1},o=[];for(let i=0;i<e;i+=1){if(i===0){o.push("left");continue}const r=t.rows.map(d=>this._normalizeRenderableCell(d[i]).text).filter(d=>d!==""&&d!==null&&d!==void 0),a=r.length>0&&r.every(c);o.push(a?"right":"left")}return o}_renderTable(){const t=this.tableData??this._slottedTableData;if(!t||!t.rows||t.rows.length===0)return null;const e=this._inferTableAlignments(t),c=Math.max(t.headers?.length??0,...t.rows.map(a=>a.length)),o=(t.headers??[]).map(a=>this._normalizeRenderableCell(a)),i=t.rows.map(a=>{const d=a.map(b=>this._normalizeRenderableCell(b));for(;d.length<c;)d.push({html:"",text:""});return d}),r=t.rowHeaderRows??[];return s`
|
|
117
117
|
<table class="scb-viz-table" part="table">
|
|
118
|
-
|
|
119
|
-
${l.map(a=>r`<col style=${`width: ${a}; min-width: ${a};`}>`)}
|
|
120
|
-
</colgroup>
|
|
121
|
-
${c.length>0?r`
|
|
118
|
+
${o.length>0?s`
|
|
122
119
|
<thead>
|
|
123
120
|
<tr>
|
|
124
|
-
${
|
|
121
|
+
${o.map((a,d)=>{const b=e[d]==="right"?"align-right":"align-left";return s`<th scope="col" class=${b}>${a.html?M(a.html):a.text}</th>`})}
|
|
125
122
|
</tr>
|
|
126
123
|
</thead>
|
|
127
124
|
`:""}
|
|
128
125
|
<tbody>
|
|
129
|
-
${i.map(a=>r`
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
126
|
+
${i.map((a,d)=>{const b=r[d]===!0;return s`
|
|
127
|
+
<tr>
|
|
128
|
+
${a.map((f,u)=>{const S=e[u]==="right"?"align-right":"align-left",w=f.html?M(f.html):f.text;return u===0&&b?s`<th scope="row" class=${S}>${w}</th>`:s`<td class=${S}>${w}</td>`})}
|
|
129
|
+
</tr>
|
|
130
|
+
`})}
|
|
134
131
|
</tbody>
|
|
135
132
|
</table>
|
|
136
|
-
`}
|
|
137
|
-
<div class="header">
|
|
138
|
-
${this.title?r` <div class="label">${this.title}</div> `:""}
|
|
139
|
-
${this.subtitle?r` <div class="subtitle">${this.subtitle}</div> `:""}
|
|
140
|
-
</div>
|
|
141
|
-
`}_renderDescription(){return this.description?r`
|
|
142
|
-
<div class="description section">
|
|
143
|
-
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
144
|
-
<div>${this.description}</div>
|
|
145
|
-
</div>
|
|
146
|
-
`:null}_renderOfficialStatisticsLink(){return this.officialStatistics?r`
|
|
147
|
-
<a
|
|
148
|
-
class="sos-logotype-link"
|
|
149
|
-
href="https://www.scb.se/sos"
|
|
150
|
-
target="_blank"
|
|
151
|
-
rel="noopener"
|
|
152
|
-
title="${this.officialStatisticsTitle}"
|
|
153
|
-
aria-label="${this.officialStatisticsAlt}"
|
|
154
|
-
>
|
|
155
|
-
<span class="sos-logotype-small" aria-hidden="true">
|
|
156
|
-
${L(I)}
|
|
157
|
-
</span>
|
|
158
|
-
</a>
|
|
159
|
-
`:null}_renderMoreAboutStats(){return!this.comment&&!this.source&&!this.footnote&&!this.officialStatistics?null:r`
|
|
160
|
-
<scb-divider></scb-divider>
|
|
161
|
-
<scb-accordion>
|
|
162
|
-
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
163
|
-
<div class="more-about-stats-content">
|
|
164
|
-
${this.comment?r`
|
|
165
|
-
<div class="section">
|
|
166
|
-
<div class="secondary-label">${this.commentLabel}</div>
|
|
167
|
-
<div>${this.comment}</div>
|
|
168
|
-
</div>
|
|
169
|
-
`:""}
|
|
170
|
-
${this.source?r`
|
|
171
|
-
<div class="section">
|
|
172
|
-
<div class="secondary-label">${this.sourceLabel}</div>
|
|
173
|
-
<div>${this.source}</div>
|
|
174
|
-
</div>
|
|
175
|
-
`:""}
|
|
176
|
-
${this.footnote?r`
|
|
177
|
-
<div class="section">
|
|
178
|
-
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
179
|
-
<div>${this.footnote}</div>
|
|
180
|
-
</div>
|
|
181
|
-
`:""}
|
|
182
|
-
${this._renderOfficialStatisticsLink()}
|
|
183
|
-
</div>
|
|
184
|
-
</scb-accordion-item>
|
|
185
|
-
</scb-accordion>
|
|
186
|
-
`}_renderFooter(){const t=this._renderDescription(),e=this._renderMoreAboutStats();return!t&&!e?null:r`
|
|
187
|
-
<div class="footer">
|
|
188
|
-
${t}
|
|
189
|
-
${e}
|
|
190
|
-
</div>
|
|
191
|
-
`}_renderHiddenTableSlot(){return r`
|
|
192
|
-
<slot
|
|
193
|
-
name="table"
|
|
194
|
-
class="table-source"
|
|
195
|
-
@slotchange=${t=>this._onTableSlotChange(t)}
|
|
196
|
-
></slot>
|
|
197
|
-
`}_renderTableScroller(){return r`
|
|
198
|
-
<scb-horizontal-scroller
|
|
199
|
-
width="600px"
|
|
200
|
-
class="table-scroller"
|
|
201
|
-
variant="inline"
|
|
202
|
-
show-scrollbar
|
|
203
|
-
>
|
|
204
|
-
${this._renderTable()}
|
|
205
|
-
</scb-horizontal-scroller>
|
|
206
|
-
`}_renderStandardToggle(){return this.variant!=="Standard"||this.disableToggle?null:r`
|
|
207
|
-
<div class="flipp-wrapper">
|
|
208
|
-
<scb-segmented-button
|
|
209
|
-
.value=${this.selectedChip||""}
|
|
210
|
-
@change=${t=>this._onSegmentedChange(t)}
|
|
211
|
-
>
|
|
212
|
-
<scb-segmented-item
|
|
213
|
-
label=${this.lang==="en"?"Figure":"Diagram"}
|
|
214
|
-
value="Diagram"
|
|
215
|
-
icon="bar_chart"
|
|
216
|
-
></scb-segmented-item>
|
|
217
|
-
<scb-segmented-item
|
|
218
|
-
label="${this.lang==="en"?"Table":"Tabell"}"
|
|
219
|
-
value="Table"
|
|
220
|
-
icon="table"
|
|
221
|
-
></scb-segmented-item>
|
|
222
|
-
</scb-segmented-button>
|
|
223
|
-
</div>
|
|
224
|
-
`}render(){switch(this.variant){case"Table":return r`
|
|
133
|
+
`}render(){switch(this.variant){case"Table":return s`
|
|
225
134
|
<div part="container">
|
|
226
|
-
|
|
135
|
+
<div class="header">
|
|
136
|
+
${this.title?s` <div class="label">${this.title}</div> `:""}
|
|
137
|
+
${this.subtitle?s` <div class="sub-label">${this.subtitle}</div> `:""}
|
|
138
|
+
</div>
|
|
227
139
|
<div class="content">
|
|
228
|
-
|
|
140
|
+
<scb-horizontal-scroller
|
|
141
|
+
width="600px"
|
|
142
|
+
class="table-scroller"
|
|
143
|
+
variant="inline"
|
|
144
|
+
show-scrollbar
|
|
145
|
+
>
|
|
146
|
+
${this._renderTable()}
|
|
147
|
+
</scb-horizontal-scroller>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="footer">
|
|
150
|
+
${this.description?s`
|
|
151
|
+
<div class="description section">
|
|
152
|
+
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
153
|
+
<div>${this.description}</div>
|
|
154
|
+
</div>
|
|
155
|
+
`:""}
|
|
156
|
+
${this.comment||this.source||this.footnote||this.officialStatistics?s`
|
|
157
|
+
<scb-divider></scb-divider>
|
|
158
|
+
<scb-accordion>
|
|
159
|
+
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
160
|
+
<div class="more-about-stats-content">
|
|
161
|
+
${this.comment?s`
|
|
162
|
+
<div class="section">
|
|
163
|
+
<div class="secondary-label">${this.commentLabel}</div>
|
|
164
|
+
<div>${this.comment}</div>
|
|
165
|
+
</div>
|
|
166
|
+
`:""}
|
|
167
|
+
${this.source?s`
|
|
168
|
+
<div class="section">
|
|
169
|
+
<div class="secondary-label">${this.sourceLabel}</div>
|
|
170
|
+
<div>${this.source}</div>
|
|
171
|
+
</div>
|
|
172
|
+
`:""}
|
|
173
|
+
${this.footnote?s`
|
|
174
|
+
<div class="section">
|
|
175
|
+
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
176
|
+
<div>${this.footnote}</div>
|
|
177
|
+
</div>
|
|
178
|
+
`:""}
|
|
179
|
+
${this.officialStatistics?s`
|
|
180
|
+
<a
|
|
181
|
+
class="sos-logotype-link"
|
|
182
|
+
href="https://www.scb.se/sos"
|
|
183
|
+
target="_blank"
|
|
184
|
+
rel="noopener"
|
|
185
|
+
title="${this.officialStatisticsTitle}"
|
|
186
|
+
aria-label="${this.officialStatisticsAlt}"
|
|
187
|
+
>
|
|
188
|
+
<span class="sos-logotype-small" aria-hidden="true">
|
|
189
|
+
${x(C)}
|
|
190
|
+
</span>
|
|
191
|
+
</a>
|
|
192
|
+
`:""}
|
|
193
|
+
</div>
|
|
194
|
+
</scb-accordion-item>
|
|
195
|
+
</scb-accordion>
|
|
196
|
+
`:""}
|
|
229
197
|
</div>
|
|
230
|
-
|
|
231
|
-
|
|
198
|
+
<slot
|
|
199
|
+
name="table"
|
|
200
|
+
class="table-source"
|
|
201
|
+
@slotchange=${t=>this._onTableSlotChange(t)}
|
|
202
|
+
></slot>
|
|
232
203
|
<slot></slot>
|
|
233
204
|
</div>
|
|
234
|
-
`;case"Image":return
|
|
205
|
+
`;case"Image":return s`
|
|
235
206
|
<div part="container">
|
|
236
|
-
|
|
207
|
+
<div class="header">
|
|
208
|
+
${this.title?s` <div class="label">${this.title}</div> `:""}
|
|
209
|
+
${this.subtitle?s` <div class="sub-label">${this.subtitle}</div> `:""}
|
|
210
|
+
</div>
|
|
237
211
|
<div class="content image-content">
|
|
238
212
|
<img src="${this.imageHref}" alt="Image figure" />
|
|
239
213
|
</div>
|
|
240
|
-
|
|
241
|
-
|
|
214
|
+
<div class="footer">
|
|
215
|
+
${this.description?s`
|
|
216
|
+
<div class="description section">
|
|
217
|
+
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
218
|
+
<div>${this.description}</div>
|
|
219
|
+
</div>
|
|
220
|
+
`:""}
|
|
221
|
+
${this.comment||this.source||this.footnote||this.officialStatistics?s`
|
|
222
|
+
<scb-divider></scb-divider>
|
|
223
|
+
<scb-accordion>
|
|
224
|
+
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
225
|
+
<div class="more-about-stats-content">
|
|
226
|
+
${this.comment?s`
|
|
227
|
+
<div class="section">
|
|
228
|
+
<div class="secondary-label">${this.commentLabel}</div>
|
|
229
|
+
<div>${this.comment}</div>
|
|
230
|
+
</div>
|
|
231
|
+
`:""}
|
|
232
|
+
${this.source?s`
|
|
233
|
+
<div class="section">
|
|
234
|
+
<div class="secondary-label">${this.sourceLabel}</div>
|
|
235
|
+
<div>${this.source}</div>
|
|
236
|
+
</div>
|
|
237
|
+
`:""}
|
|
238
|
+
${this.footnote?s`
|
|
239
|
+
<div class="section">
|
|
240
|
+
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
241
|
+
<div>${this.footnote}</div>
|
|
242
|
+
</div>
|
|
243
|
+
`:""}
|
|
244
|
+
${this.officialStatistics?s`
|
|
245
|
+
<a
|
|
246
|
+
class="sos-logotype-link"
|
|
247
|
+
href="https://www.scb.se/sos"
|
|
248
|
+
target="_blank"
|
|
249
|
+
rel="noopener"
|
|
250
|
+
title="${this.officialStatisticsTitle}"
|
|
251
|
+
aria-label="${this.officialStatisticsAlt}"
|
|
252
|
+
>
|
|
253
|
+
<span class="sos-logotype-small" aria-hidden="true">
|
|
254
|
+
${x(C)}
|
|
255
|
+
</span>
|
|
256
|
+
</a>
|
|
257
|
+
`:""}
|
|
258
|
+
</div>
|
|
259
|
+
</scb-accordion-item>
|
|
260
|
+
</scb-accordion>
|
|
261
|
+
`:""}
|
|
262
|
+
</div>
|
|
263
|
+
<slot
|
|
264
|
+
name="table"
|
|
265
|
+
class="table-source"
|
|
266
|
+
@slotchange=${t=>this._onTableSlotChange(t)}
|
|
267
|
+
></slot>
|
|
242
268
|
<slot></slot>
|
|
243
269
|
</div>
|
|
244
|
-
`;default:return
|
|
270
|
+
`;default:return s`
|
|
245
271
|
<div part="container">
|
|
246
|
-
|
|
247
|
-
|
|
272
|
+
<div class="header">
|
|
273
|
+
${this.title?s` <div class="label">${this.title}</div> `:""}
|
|
274
|
+
${this.subtitle?s` <div class="sub-label">${this.subtitle}</div> `:""}
|
|
275
|
+
</div>
|
|
276
|
+
${this.variant==="Standard"&&!this.disableToggle?s`
|
|
277
|
+
<div class="flipp-wrapper">
|
|
278
|
+
<scb-segmented-button
|
|
279
|
+
.value=${this.selectedChip||""}
|
|
280
|
+
@change=${t=>this._onSegmentedChange(t)}
|
|
281
|
+
>
|
|
282
|
+
<scb-segmented-item
|
|
283
|
+
label=${this.lang==="en"?"Figure":"Diagram"}
|
|
284
|
+
value="Diagram"
|
|
285
|
+
icon="bar_chart"
|
|
286
|
+
></scb-segmented-item>
|
|
287
|
+
<scb-segmented-item
|
|
288
|
+
label="${this.lang==="en"?"Table":"Tabell"}"
|
|
289
|
+
value="Table"
|
|
290
|
+
icon="table"
|
|
291
|
+
></scb-segmented-item>
|
|
292
|
+
</scb-segmented-button>
|
|
293
|
+
</div>
|
|
294
|
+
`:""}
|
|
248
295
|
<div class="content">
|
|
249
296
|
<scb-horizontal-scroller
|
|
250
297
|
width="600px"
|
|
@@ -254,13 +301,72 @@ 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
|
|
|
254
301
|
>
|
|
255
302
|
<slot name="diagram"></slot>
|
|
256
303
|
</scb-horizontal-scroller>
|
|
257
|
-
|
|
304
|
+
<scb-horizontal-scroller
|
|
305
|
+
width="600px"
|
|
306
|
+
class="table-scroller"
|
|
307
|
+
variant="inline"
|
|
308
|
+
show-scrollbar
|
|
309
|
+
>
|
|
310
|
+
${this._renderTable()}
|
|
311
|
+
</scb-horizontal-scroller>
|
|
258
312
|
</div>
|
|
259
|
-
|
|
260
|
-
|
|
313
|
+
<div class="footer">
|
|
314
|
+
${this.description?s`
|
|
315
|
+
<div class="description section">
|
|
316
|
+
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
317
|
+
<div>${this.description}</div>
|
|
318
|
+
</div>
|
|
319
|
+
`:""}
|
|
320
|
+
${this.comment||this.source||this.footnote||this.officialStatistics?s`
|
|
321
|
+
<scb-divider></scb-divider>
|
|
322
|
+
<scb-accordion>
|
|
323
|
+
<scb-accordion-item title="${this.moreAboutStatsLabel}">
|
|
324
|
+
<div class="more-about-stats-content">
|
|
325
|
+
${this.comment?s`
|
|
326
|
+
<div class="section">
|
|
327
|
+
<div class="secondary-label">${this.commentLabel}</div>
|
|
328
|
+
<div>${this.comment}</div>
|
|
329
|
+
</div>
|
|
330
|
+
`:""}
|
|
331
|
+
${this.source?s`
|
|
332
|
+
<div class="section">
|
|
333
|
+
<div class="secondary-label">${this.sourceLabel}</div>
|
|
334
|
+
<div>${this.source}</div>
|
|
335
|
+
</div>
|
|
336
|
+
`:""}
|
|
337
|
+
${this.footnote?s`
|
|
338
|
+
<div class="section">
|
|
339
|
+
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
340
|
+
<div>${this.footnote}</div>
|
|
341
|
+
</div>
|
|
342
|
+
`:""}
|
|
343
|
+
${this.officialStatistics?s`
|
|
344
|
+
<a
|
|
345
|
+
class="sos-logotype-link"
|
|
346
|
+
href="https://www.scb.se/sos"
|
|
347
|
+
target="_blank"
|
|
348
|
+
rel="noopener"
|
|
349
|
+
title="${this.officialStatisticsTitle}"
|
|
350
|
+
aria-label="${this.officialStatisticsAlt}"
|
|
351
|
+
>
|
|
352
|
+
<span class="sos-logotype-small" aria-hidden="true">
|
|
353
|
+
${x(C)}
|
|
354
|
+
</span>
|
|
355
|
+
</a>
|
|
356
|
+
`:""}
|
|
357
|
+
</div>
|
|
358
|
+
</scb-accordion-item>
|
|
359
|
+
</scb-accordion>
|
|
360
|
+
`:""}
|
|
361
|
+
</div>
|
|
362
|
+
<slot
|
|
363
|
+
name="table"
|
|
364
|
+
class="table-source"
|
|
365
|
+
@slotchange=${t=>this._onTableSlotChange(t)}
|
|
366
|
+
></slot>
|
|
261
367
|
<slot></slot>
|
|
262
368
|
</div>
|
|
263
|
-
`}}_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}};
|
|
369
|
+
`}}_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}};g=new WeakSet;L=function(){const t=m(this,g,y).call(this,this.spacing),e=m(this,g,y).call(this,this.spacingTop)??t,c=m(this,g,y).call(this,this.spacingBottom)??t,o=m(this,g,y).call(this,this.spacingLeft),i=m(this,g,y).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"),o?this.style.setProperty("--scb-viz-spacing-inline-start",o):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};l.styles=k`
|
|
264
370
|
:host {
|
|
265
371
|
display: block;
|
|
266
372
|
font-family: var(--brand-font);
|
|
@@ -288,7 +394,7 @@ 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
|
|
|
288
394
|
letter-spacing: var(--md-sys-typescale-title-large-tracking);
|
|
289
395
|
}
|
|
290
396
|
|
|
291
|
-
.
|
|
397
|
+
.sub-label {
|
|
292
398
|
font-size: var(--md-sys-typescale-body-large-size);
|
|
293
399
|
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
294
400
|
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
@@ -376,15 +482,15 @@ 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
|
|
|
376
482
|
display: flex;
|
|
377
483
|
}
|
|
378
484
|
|
|
485
|
+
:host([variant='Image']) .image-content {
|
|
486
|
+
display: block;
|
|
487
|
+
}
|
|
488
|
+
|
|
379
489
|
:host([variant='Image']) img {
|
|
380
490
|
height: auto;
|
|
381
491
|
max-width: 100%;
|
|
382
492
|
}
|
|
383
493
|
|
|
384
|
-
:host([variant='Image']) .image-content {
|
|
385
|
-
display: block;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
494
|
:host([variant='Image']) .diagram-scroller {
|
|
389
495
|
display: none;
|
|
390
496
|
}
|
|
@@ -406,7 +512,6 @@ 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
|
|
|
406
512
|
|
|
407
513
|
.scb-viz-table {
|
|
408
514
|
border-collapse: collapse;
|
|
409
|
-
table-layout: fixed;
|
|
410
515
|
width: max-content;
|
|
411
516
|
max-width: none;
|
|
412
517
|
}
|
|
@@ -417,8 +522,6 @@ 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
|
|
|
417
522
|
padding-block: var(--spacing-2, 8px);
|
|
418
523
|
padding-inline: var(--spacing-3, 12px);
|
|
419
524
|
background-color: inherit;
|
|
420
|
-
overflow-wrap: anywhere;
|
|
421
|
-
vertical-align: top;
|
|
422
525
|
}
|
|
423
526
|
|
|
424
527
|
.scb-viz-table thead th {
|
|
@@ -441,11 +544,8 @@ 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
|
|
|
441
544
|
text-align: left;
|
|
442
545
|
}
|
|
443
546
|
|
|
444
|
-
.scb-viz-table .align-center {
|
|
445
|
-
text-align: center;
|
|
446
|
-
}
|
|
447
|
-
|
|
448
547
|
.scb-viz-table .align-right {
|
|
449
548
|
text-align: right;
|
|
549
|
+
white-space: nowrap;
|
|
450
550
|
}
|
|
451
|
-
`;
|
|
551
|
+
`;n([p({type:String,reflect:!0})],l.prototype,"variant",2);n([p({type:String,reflect:!0,attribute:"selected-chip"})],l.prototype,"selectedChip",2);n([p({type:String,reflect:!0})],l.prototype,"title",2);n([p({type:String,reflect:!0})],l.prototype,"subtitle",2);n([p({type:String,reflect:!0})],l.prototype,"description",2);n([p({type:String,reflect:!0})],l.prototype,"comment",2);n([p({type:String,reflect:!0})],l.prototype,"source",2);n([p({type:String,reflect:!0})],l.prototype,"footnote",2);n([p({type:String,reflect:!0,attribute:"lang"})],l.prototype,"lang",2);n([p({type:String,reflect:!0,attribute:"image-href"})],l.prototype,"imageHref",2);n([p({type:Boolean,reflect:!0,attribute:"official-statistics"})],l.prototype,"officialStatistics",2);n([p({type:Boolean,reflect:!0,attribute:"disable-toggle"})],l.prototype,"disableToggle",2);n([p({attribute:!1})],l.prototype,"tableData",2);n([V()],l.prototype,"_slottedTableData",2);n([p({type:String,reflect:!0})],l.prototype,"spacing",2);n([p({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",2);n([p({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",2);n([p({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",2);n([p({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",2);l=n([A("scb-viz")],l);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.239",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -378,5 +378,5 @@
|
|
|
378
378
|
},
|
|
379
379
|
"./mvc/*": "./mvc/*"
|
|
380
380
|
},
|
|
381
|
-
"buildHash": "
|
|
381
|
+
"buildHash": "05730AB522B0DB161EA3910141766C752BE921D05DE064B2B701D7A1DF57F25E"
|
|
382
382
|
}
|
package/scb-viz/scb-viz.d.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
export type ScbVizTableCell = string | number | null | undefined;
|
|
3
|
+
export interface ScbVizTableCellContent {
|
|
4
|
+
html: string;
|
|
5
|
+
text: string;
|
|
6
|
+
}
|
|
7
|
+
export type ScbVizRenderableTableCell = ScbVizTableCell | ScbVizTableCellContent;
|
|
3
8
|
export interface ScbVizTableData {
|
|
4
|
-
headers?:
|
|
5
|
-
rows:
|
|
9
|
+
headers?: ScbVizRenderableTableCell[];
|
|
10
|
+
rows: ScbVizRenderableTableCell[][];
|
|
6
11
|
rowHeaderRows?: boolean[];
|
|
7
12
|
}
|
|
8
13
|
export declare class ScbViz extends LitElement {
|
|
@@ -43,19 +48,10 @@ export declare class ScbViz extends LitElement {
|
|
|
43
48
|
protected firstUpdated(_changed: PropertyValues): void;
|
|
44
49
|
protected updated(changed: PropertyValues): void;
|
|
45
50
|
private _onTableSlotChange;
|
|
51
|
+
private _normalizeRenderableCell;
|
|
46
52
|
private _readTableDataFromSlot;
|
|
47
53
|
private _inferTableAlignments;
|
|
48
|
-
private _getColumnWidthHints;
|
|
49
54
|
private _renderTable;
|
|
50
|
-
private _mapTableDataToRenderedData;
|
|
51
|
-
private _renderHeader;
|
|
52
|
-
private _renderDescription;
|
|
53
|
-
private _renderOfficialStatisticsLink;
|
|
54
|
-
private _renderMoreAboutStats;
|
|
55
|
-
private _renderFooter;
|
|
56
|
-
private _renderHiddenTableSlot;
|
|
57
|
-
private _renderTableScroller;
|
|
58
|
-
private _renderStandardToggle;
|
|
59
55
|
render(): import('lit-html').TemplateResult<1>;
|
|
60
56
|
private _syncChipClass;
|
|
61
57
|
private _dispatchSelectedChipChanged;
|