scb-wc-test 0.1.85 → 0.1.87
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-breadcrumb/scb-breadcrumb-item.js +3 -2
- package/mvc/components/scb-button/scb-button.js +1 -1
- package/mvc/components/scb-calendar-card/scb-calendar-card.js +29 -19
- package/mvc/components/scb-card/scb-card.js +115 -53
- package/mvc/components/scb-fact-card/scb-fact-card-content.js +46 -44
- package/mvc/components/scb-icon-button/scb-icon-button.js +1 -1
- package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +21 -8
- package/mvc/components/scb-notification-card/scb-notification-card.js +291 -170
- package/mvc/components/scb-viz/scb-viz.js +106 -107
- package/mvc/vendor/vendor-material.js +102 -102
- package/mvc/vendor/vendor.js +1 -1
- package/package.json +2 -2
- package/scb-badge/scb-badge.d.ts +1 -1
- package/scb-breadcrumb/scb-breadcrumb-item.js +3 -2
- package/scb-calendar-card/scb-calendar-card.js +71 -61
- package/scb-card/scb-card.d.ts +1 -1
- package/scb-card/scb-card.js +116 -54
- package/scb-fact-card/scb-fact-card-content.d.ts +5 -1
- package/scb-fact-card/scb-fact-card-content.js +67 -74
- package/scb-keyfigure-card/scb-keyfigure-card.d.ts +3 -1
- package/scb-keyfigure-card/scb-keyfigure-card.js +23 -11
- package/scb-notification-card/scb-notification-card.d.ts +19 -5
- package/scb-notification-card/scb-notification-card.js +336 -196
- package/scb-viz/scb-viz.d.ts +2 -2
- package/scb-viz/scb-viz.js +163 -162
- package/scb-wc-test.bundle.js +842 -635
|
@@ -1,48 +1,10 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as h,n as c,i as v,x as t,t as m}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-icon-button/scb-icon-button.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(s,i,a){try{customElements.get(s)||l(s,i,a)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(e,l,s,i)=>{for(var a=i>1?void 0:i?p(l,s):l,n=e.length-1,d;n>=0;n--)(d=e[n])&&(a=(i?d(l,s,a):d(a))||a);return i&&a&&b(l,s,a),a};let o=class extends v{constructor(){super(...arguments),this.variant="Standard",this.selectedChip="Diagram",this.title="",this.subtitle="",this.description="",this.comment="",this.source="",this.footnote="",this.lang="sv",this.imageHref=""}get descriptionLabel(){return this.lang==="en"?"Description of the chart":"Beskrivning av diagrammet"}get moreAboutStatsLabel(){return this.lang==="en"?"More about the statistics":"Mer om statistiken"}get commentLabel(){return this.lang==="en"?"Comments":"Kommentar"}get sourceLabel(){return this.lang==="en"?"Source":"Källa"}get footnoteLabel(){return this.lang==="en"?"Footnotes":"Fotnot"}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="table"]');e&&(e.addEventListener("slotchange",()=>this._styleSlottedTable()),this._styleSlottedTable())}updated(){this._styleSlottedTable()}_styleSlottedTable(){const e=this.shadowRoot?.querySelector('slot[name="table"]');if(!e)return;e.assignedElements({flatten:!0}).forEach(s=>{s.tagName==="TABLE"&&(s.style.borderCollapse="collapse",s.style.width="100%",s.querySelectorAll("tbody tr:nth-child(odd)").forEach(i=>{i.style.background="var(--md-sys-color-surface-container)"}),s.querySelectorAll("th").forEach(i=>{i.style.border="1px solid var(--md-sys-color-on-surface)",i.style.padding="8px"}),s.querySelectorAll("td").forEach(i=>{i.style.border="1px solid var(--md-sys-color-on-surface)",i.style.padding="8px"}),s.querySelectorAll("tr").forEach(i=>{const a=Array.from(i.children).filter(n=>n.tagName==="TD"||n.tagName==="TH");a.length>0&&(a[0].style.borderLeft="none",a[a.length-1].style.borderRight="none")}))})}render(){switch(this.variant){case"Table":return t`
|
|
2
2
|
<div part="container">
|
|
3
3
|
<div class="header">
|
|
4
|
-
|
|
5
|
-
<div class="
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<scb-horizontal-scroller width="600px" class="diagram-scroller" variant="inline" show-scrollbar>
|
|
9
|
-
<slot name="diagram"></slot>
|
|
10
|
-
</scb-horizontal-scroller>
|
|
11
|
-
</div>
|
|
12
|
-
<div class="footer">
|
|
13
|
-
<div class="description section">
|
|
14
|
-
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
15
|
-
${this.description?t`<div>${this.description}</div>`:""}
|
|
16
|
-
</div>
|
|
17
|
-
<scb-divider></scb-divider>
|
|
18
|
-
<scb-accordion>
|
|
19
|
-
<scb-accordion-item
|
|
20
|
-
title="${this.moreAboutStatsLabel}"
|
|
21
|
-
>
|
|
22
|
-
<div class="more-about-stats-content">
|
|
23
|
-
<div class="section">
|
|
24
|
-
<div class="secondary-label">${this.commentLabel}</div>
|
|
25
|
-
${this.comment?t`<div>${this.comment}</div>`:""}
|
|
26
|
-
</div>
|
|
27
|
-
<div class="section">
|
|
28
|
-
<div class="secondary-label">${this.sourceLabel}</div>
|
|
29
|
-
${this.source?t`<div>${this.source}</div>`:""}
|
|
30
|
-
</div>
|
|
31
|
-
<div class="section">
|
|
32
|
-
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
33
|
-
${this.footnote?t`<div>${this.footnote}</div>`:""}
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
</scb-accordion-item>
|
|
37
|
-
</scb-accordion>
|
|
38
|
-
</div>
|
|
39
|
-
<slot></slot>
|
|
40
|
-
</div>
|
|
41
|
-
`;case"Table":return t`
|
|
42
|
-
<div part="container">
|
|
43
|
-
<div class="header">
|
|
44
|
-
<div class="label">${this.title}</div>
|
|
45
|
-
<div class="subtitle">${this.subtitle}</div>
|
|
4
|
+
${this.title?t`
|
|
5
|
+
<div class="label">${this.title}</div>`:""}
|
|
6
|
+
${this.subtitle?t`
|
|
7
|
+
<div class="subtitle">${this.subtitle}</div>`:""}
|
|
46
8
|
</div>
|
|
47
9
|
<div class="content">
|
|
48
10
|
<scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
|
|
@@ -50,94 +12,123 @@ import{a as v,n as r,i as h,x as t,t as b}from"../../vendor/vendor.js";import"..
|
|
|
50
12
|
</scb-horizontal-scroller>
|
|
51
13
|
</div>
|
|
52
14
|
<div class="footer">
|
|
15
|
+
${this.description?t`
|
|
53
16
|
<div class="description section">
|
|
54
17
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
55
|
-
|
|
18
|
+
<div>${this.description}</div>
|
|
56
19
|
</div>
|
|
20
|
+
`:""}
|
|
21
|
+
${this.comment||this.source||this.footnote?t`
|
|
57
22
|
<scb-divider></scb-divider>
|
|
58
23
|
<scb-accordion>
|
|
59
24
|
<scb-accordion-item
|
|
60
25
|
title="${this.moreAboutStatsLabel}"
|
|
61
26
|
>
|
|
62
27
|
<div class="more-about-stats-content">
|
|
28
|
+
${this.comment?t`
|
|
63
29
|
<div class="section">
|
|
64
30
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
65
|
-
|
|
66
|
-
</div>
|
|
67
|
-
<div class="section">
|
|
68
|
-
<div class="secondary-label">${this.sourceLabel}</div>
|
|
69
|
-
${this.source?t`<div>${this.source}</div>`:""}
|
|
31
|
+
<div>${this.comment}</div>
|
|
70
32
|
</div>
|
|
33
|
+
`:""}
|
|
34
|
+
${this.source?t`
|
|
35
|
+
<div class="section">
|
|
36
|
+
|
|
37
|
+
<div class="secondary-label">${this.sourceLabel}</div>
|
|
38
|
+
<div>${this.source}</div>
|
|
39
|
+
</div>`:""}
|
|
40
|
+
${this.footnote?t`
|
|
71
41
|
<div class="section">
|
|
72
42
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
73
|
-
|
|
43
|
+
<div>${this.footnote}</div>
|
|
74
44
|
</div>
|
|
45
|
+
`:""}
|
|
75
46
|
</div>
|
|
76
47
|
</scb-accordion-item>
|
|
77
48
|
</scb-accordion>
|
|
49
|
+
`:""}
|
|
78
50
|
</div>
|
|
79
51
|
<slot></slot>
|
|
80
52
|
</div>
|
|
81
53
|
`;case"Image":return t`
|
|
82
54
|
<div part="container">
|
|
83
55
|
<div class="header">
|
|
56
|
+
${this.title?t`
|
|
84
57
|
<div class="label">${this.title}</div>
|
|
58
|
+
`:""}
|
|
59
|
+
${this.subtitle?t`
|
|
85
60
|
<div class="subtitle">${this.subtitle}</div>
|
|
61
|
+
`:""}
|
|
86
62
|
</div>
|
|
87
63
|
<div class="content image-content">
|
|
88
64
|
<img src="${this.imageHref}" alt="Image figure"/>
|
|
89
65
|
</div>
|
|
90
66
|
<div class="footer">
|
|
91
|
-
|
|
92
|
-
<div class="
|
|
93
|
-
|
|
94
|
-
|
|
67
|
+
${this.description?t`
|
|
68
|
+
<div class="description section">
|
|
69
|
+
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
70
|
+
<div>${this.description}</div>
|
|
71
|
+
</div>
|
|
72
|
+
`:""}
|
|
73
|
+
${this.comment||this.source||this.footnote?t`
|
|
95
74
|
<scb-divider></scb-divider>
|
|
96
75
|
<scb-accordion>
|
|
97
76
|
<scb-accordion-item
|
|
98
77
|
title="${this.moreAboutStatsLabel}"
|
|
99
78
|
>
|
|
100
79
|
<div class="more-about-stats-content">
|
|
80
|
+
${this.comment?t`
|
|
101
81
|
<div class="section">
|
|
102
82
|
<div class="secondary-label">${this.commentLabel}</div>
|
|
103
|
-
|
|
83
|
+
<div>${this.comment}</div>
|
|
104
84
|
</div>
|
|
85
|
+
`:""}
|
|
86
|
+
${this.source?t`
|
|
105
87
|
<div class="section">
|
|
106
88
|
<div class="secondary-label">${this.sourceLabel}</div>
|
|
107
|
-
|
|
89
|
+
<div>${this.source}</div>
|
|
108
90
|
</div>
|
|
91
|
+
`:""}
|
|
92
|
+
${this.footnote?t`
|
|
109
93
|
<div class="section">
|
|
110
94
|
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
111
|
-
|
|
95
|
+
<div>${this.footnote}</div>
|
|
112
96
|
</div>
|
|
97
|
+
`:""}
|
|
113
98
|
</div>
|
|
114
99
|
</scb-accordion-item>
|
|
115
100
|
</scb-accordion>
|
|
101
|
+
`:""}
|
|
116
102
|
</div>
|
|
117
103
|
<slot></slot>
|
|
118
104
|
</div>
|
|
119
105
|
`;default:const e=this.selectedChip==="Diagram"?"chip-diagram":this.selectedChip==="Table"?"chip-table":"";return this.className!==e&&(this.className=e),t`
|
|
120
106
|
<div part="container">
|
|
121
107
|
<div class="header">
|
|
108
|
+
${this.title?t`
|
|
122
109
|
<div class="label">${this.title}</div>
|
|
110
|
+
`:""}
|
|
111
|
+
${this.subtitle?t`
|
|
123
112
|
<div class="subtitle">${this.subtitle}</div>
|
|
113
|
+
`:""}
|
|
124
114
|
</div>
|
|
125
115
|
${this.variant==="Standard"?t`
|
|
126
116
|
<div class="flipp-wrapper">
|
|
127
|
-
<scb-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
117
|
+
<scb-segmented-button
|
|
118
|
+
.value=${this.selectedChip||""}
|
|
119
|
+
@change=${l=>this._onSegmentedChange(l)}
|
|
120
|
+
>
|
|
121
|
+
<scb-segmented-item
|
|
122
|
+
label=${this.lang==="en"?"Figure":"Diagram"}
|
|
123
|
+
value="Diagram"
|
|
124
|
+
icon="bar_chart"
|
|
125
|
+
></scb-segmented-item>
|
|
126
|
+
<scb-segmented-item
|
|
127
|
+
label="${this.lang==="en"?"Table":"Tabell"}"
|
|
128
|
+
value="Table"
|
|
129
|
+
icon="table"
|
|
130
|
+
></scb-segmented-item>
|
|
131
|
+
</scb-segmented-button>
|
|
141
132
|
</div>
|
|
142
133
|
`:""}
|
|
143
134
|
<div class="content">
|
|
@@ -149,44 +140,58 @@ import{a as v,n as r,i as h,x as t,t as b}from"../../vendor/vendor.js";import"..
|
|
|
149
140
|
</scb-horizontal-scroller>
|
|
150
141
|
</div>
|
|
151
142
|
<div class="footer">
|
|
143
|
+
${this.description?t`
|
|
152
144
|
<div class="description section">
|
|
153
145
|
<div class="secondary-label">${this.descriptionLabel}</div>
|
|
154
|
-
|
|
146
|
+
<div>${this.description}</div>
|
|
155
147
|
</div>
|
|
148
|
+
`:""}
|
|
149
|
+
${this.comment||this.source||this.footnote?t`
|
|
156
150
|
<scb-divider></scb-divider>
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
${this.source?t
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
151
|
+
<scb-accordion>
|
|
152
|
+
<scb-accordion-item
|
|
153
|
+
title="${this.moreAboutStatsLabel}"
|
|
154
|
+
>
|
|
155
|
+
<div class="more-about-stats-content">
|
|
156
|
+
${this.comment?t`
|
|
157
|
+
<div class="section">
|
|
158
|
+
<div class="secondary-label">${this.commentLabel}</div>
|
|
159
|
+
<div>${this.comment}</div>
|
|
160
|
+
</div>
|
|
161
|
+
`:""}
|
|
162
|
+
${this.source?t`
|
|
163
|
+
<div class="section">
|
|
164
|
+
<div class="secondary-label">${this.sourceLabel}</div>
|
|
165
|
+
<div>${this.source}</div>
|
|
166
|
+
</div>
|
|
167
|
+
`:""}
|
|
168
|
+
${this.footnote?t`
|
|
169
|
+
<div class="section">
|
|
170
|
+
<div class="secondary-label">${this.footnoteLabel}</div>
|
|
171
|
+
<div>${this.footnote}</div>
|
|
172
|
+
</div>
|
|
173
|
+
`:""}
|
|
173
174
|
</div>
|
|
174
|
-
</
|
|
175
|
-
</scb-accordion
|
|
176
|
-
|
|
175
|
+
</scb-accordion-item>
|
|
176
|
+
</scb-accordion>
|
|
177
|
+
`:""}
|
|
177
178
|
</div>
|
|
178
179
|
<slot></slot>
|
|
179
180
|
</div>
|
|
180
|
-
`}}
|
|
181
|
+
`}}_onSegmentedChange(e){const l=e.detail?.value;this.selectedChip===l?this.selectedChip=null:this.selectedChip=l}};o.styles=h`
|
|
181
182
|
:host {
|
|
182
183
|
display: block;
|
|
183
184
|
font-family: var(--brand-font);
|
|
184
185
|
color: var(--md-sys-color-on-surface);
|
|
185
186
|
background: var(--md-sys-color-surface);
|
|
186
|
-
padding:
|
|
187
|
+
padding: var(--spacing-7);
|
|
187
188
|
max-width: 100%;
|
|
188
189
|
border-radius: var(--spacing-04, 16px);
|
|
189
190
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
191
|
+
|
|
192
|
+
}
|
|
193
|
+
scb-segmented-button {
|
|
194
|
+
--scb-segmented-button-height: var(--icon-size-small);
|
|
190
195
|
}
|
|
191
196
|
|
|
192
197
|
.label {
|
|
@@ -209,27 +214,27 @@ import{a as v,n as r,i as h,x as t,t as b}from"../../vendor/vendor.js";import"..
|
|
|
209
214
|
.section {
|
|
210
215
|
display: flex;
|
|
211
216
|
flex-direction: column;
|
|
212
|
-
gap:
|
|
217
|
+
gap: var(--spacing-2);
|
|
213
218
|
}
|
|
214
219
|
.more-about-stats-content {
|
|
215
220
|
display: flex;
|
|
216
221
|
flex-direction: column;
|
|
217
|
-
gap:
|
|
222
|
+
gap: var(--spacing-7);
|
|
218
223
|
max-width: 600px
|
|
219
224
|
}
|
|
220
225
|
.header {
|
|
221
|
-
margin-bottom:
|
|
226
|
+
margin-bottom: var(--spacing-7);
|
|
222
227
|
max-width: 600px
|
|
223
228
|
}
|
|
224
229
|
.flipp-wrapper {
|
|
225
|
-
margin-bottom:
|
|
226
|
-
max-width:
|
|
230
|
+
margin-bottom: var(--spacing-9);
|
|
231
|
+
max-width: 234px
|
|
227
232
|
}
|
|
228
233
|
.description{
|
|
229
|
-
margin-bottom:
|
|
234
|
+
margin-bottom: var(--spacing-8);
|
|
230
235
|
}
|
|
231
236
|
.footer {
|
|
232
|
-
margin-top:
|
|
237
|
+
margin-top: var(--spacing-7);
|
|
233
238
|
|
|
234
239
|
}
|
|
235
240
|
.description.section{
|
|
@@ -245,12 +250,6 @@ import{a as v,n as r,i as h,x as t,t as b}from"../../vendor/vendor.js";import"..
|
|
|
245
250
|
:host([variant='Table']) .table-scroller {
|
|
246
251
|
display: flex;
|
|
247
252
|
}
|
|
248
|
-
:host([variant='Diagram']) slot[name="diagram"] {
|
|
249
|
-
display: block;
|
|
250
|
-
}
|
|
251
|
-
:host([variant='Diagram']) .diagram-scroller {
|
|
252
|
-
display: flex;
|
|
253
|
-
}
|
|
254
253
|
:host([variant='Image']) {
|
|
255
254
|
img {
|
|
256
255
|
height: auto;
|
|
@@ -294,4 +293,4 @@ import{a as v,n as r,i as h,x as t,t as b}from"../../vendor/vendor.js";import"..
|
|
|
294
293
|
|
|
295
294
|
|
|
296
295
|
|
|
297
|
-
`;
|
|
296
|
+
`;r([c({type:String,reflect:!0})],o.prototype,"variant",2);r([c({type:String})],o.prototype,"selectedChip",2);r([c({type:String,reflect:!0})],o.prototype,"title",2);r([c({type:String,reflect:!0})],o.prototype,"subtitle",2);r([c({type:String,reflect:!0})],o.prototype,"description",2);r([c({type:String,reflect:!0})],o.prototype,"comment",2);r([c({type:String,reflect:!0})],o.prototype,"source",2);r([c({type:String,reflect:!0})],o.prototype,"footnote",2);r([c({type:String,reflect:!0,attribute:"lang"})],o.prototype,"lang",2);r([c({type:String,reflect:!0,attribute:"image-href"})],o.prototype,"imageHref",2);o=r([m("scb-viz")],o);
|