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.
Files changed (26) hide show
  1. package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js +3 -2
  2. package/mvc/components/scb-button/scb-button.js +1 -1
  3. package/mvc/components/scb-calendar-card/scb-calendar-card.js +29 -19
  4. package/mvc/components/scb-card/scb-card.js +115 -53
  5. package/mvc/components/scb-fact-card/scb-fact-card-content.js +46 -44
  6. package/mvc/components/scb-icon-button/scb-icon-button.js +1 -1
  7. package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +21 -8
  8. package/mvc/components/scb-notification-card/scb-notification-card.js +291 -170
  9. package/mvc/components/scb-viz/scb-viz.js +106 -107
  10. package/mvc/vendor/vendor-material.js +102 -102
  11. package/mvc/vendor/vendor.js +1 -1
  12. package/package.json +2 -2
  13. package/scb-badge/scb-badge.d.ts +1 -1
  14. package/scb-breadcrumb/scb-breadcrumb-item.js +3 -2
  15. package/scb-calendar-card/scb-calendar-card.js +71 -61
  16. package/scb-card/scb-card.d.ts +1 -1
  17. package/scb-card/scb-card.js +116 -54
  18. package/scb-fact-card/scb-fact-card-content.d.ts +5 -1
  19. package/scb-fact-card/scb-fact-card-content.js +67 -74
  20. package/scb-keyfigure-card/scb-keyfigure-card.d.ts +3 -1
  21. package/scb-keyfigure-card/scb-keyfigure-card.js +23 -11
  22. package/scb-notification-card/scb-notification-card.d.ts +19 -5
  23. package/scb-notification-card/scb-notification-card.js +336 -196
  24. package/scb-viz/scb-viz.d.ts +2 -2
  25. package/scb-viz/scb-viz.js +163 -162
  26. package/scb-wc-test.bundle.js +842 -635
package/scb-viz/scb-viz.js CHANGED
@@ -1,15 +1,17 @@
1
- import { css as v, LitElement as h, html as t } from "lit";
2
- import { property as o, customElement as b } from "lit/decorators.js";
1
+ import { css as h, LitElement as v, html as t } from "lit";
2
+ import { property as r, customElement as m } from "lit/decorators.js";
3
3
  import "../scb-chip/scb-chip.js";
4
+ import "../scb-segmented-button/scb-segmented-button.js";
5
+ import "../scb-segmented-button/scb-segmented-item.js";
4
6
  import "../scb-accordion/scb-accordion.js";
5
7
  import "../scb-divider/scb-divider.js";
6
8
  import "../scb-horizontal-scroller/scb-horizontal-scroller.js";
7
- var p = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (i, r, d, a) => {
8
- for (var e = a > 1 ? void 0 : a ? m(r, d) : r, c = i.length - 1, n; c >= 0; c--)
9
- (n = i[c]) && (e = (a ? n(r, d, e) : n(e)) || e);
10
- return a && e && p(r, d, e), e;
9
+ var b = Object.defineProperty, p = Object.getOwnPropertyDescriptor, o = (i, s, c, l) => {
10
+ for (var e = l > 1 ? void 0 : l ? p(s, c) : s, n = i.length - 1, d; n >= 0; n--)
11
+ (d = i[n]) && (e = (l ? d(s, c, e) : d(e)) || e);
12
+ return l && e && b(s, c, e), e;
11
13
  };
12
- let s = class extends h {
14
+ let a = class extends v {
13
15
  constructor() {
14
16
  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 = "";
15
17
  }
@@ -30,82 +32,42 @@ let s = class extends h {
30
32
  return this.lang === "en" ? "Footnotes" : "Fotnot";
31
33
  }
32
34
  firstUpdated() {
33
- var r;
34
- const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="table"]');
35
+ var s;
36
+ const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="table"]');
35
37
  i && (i.addEventListener("slotchange", () => this._styleSlottedTable()), this._styleSlottedTable());
36
38
  }
37
39
  updated() {
38
40
  this._styleSlottedTable();
39
41
  }
40
42
  _styleSlottedTable() {
41
- var d;
42
- const i = (d = this.shadowRoot) == null ? void 0 : d.querySelector('slot[name="table"]');
43
+ var c;
44
+ const i = (c = this.shadowRoot) == null ? void 0 : c.querySelector('slot[name="table"]');
43
45
  if (!i) return;
44
- i.assignedElements({ flatten: !0 }).forEach((a) => {
45
- a.tagName === "TABLE" && (a.style.borderCollapse = "collapse", a.style.width = "100%", a.querySelectorAll("tbody tr:nth-child(odd)").forEach((e) => {
46
+ i.assignedElements({ flatten: !0 }).forEach((l) => {
47
+ l.tagName === "TABLE" && (l.style.borderCollapse = "collapse", l.style.width = "100%", l.querySelectorAll("tbody tr:nth-child(odd)").forEach((e) => {
46
48
  e.style.background = "var(--md-sys-color-surface-container)";
47
- }), a.querySelectorAll("th").forEach((e) => {
49
+ }), l.querySelectorAll("th").forEach((e) => {
48
50
  e.style.border = "1px solid var(--md-sys-color-on-surface)", e.style.padding = "8px";
49
- }), a.querySelectorAll("td").forEach((e) => {
51
+ }), l.querySelectorAll("td").forEach((e) => {
50
52
  e.style.border = "1px solid var(--md-sys-color-on-surface)", e.style.padding = "8px";
51
- }), a.querySelectorAll("tr").forEach((e) => {
52
- const c = Array.from(e.children).filter(
53
- (n) => n.tagName === "TD" || n.tagName === "TH"
53
+ }), l.querySelectorAll("tr").forEach((e) => {
54
+ const n = Array.from(e.children).filter(
55
+ (d) => d.tagName === "TD" || d.tagName === "TH"
54
56
  );
55
- c.length > 0 && (c[0].style.borderLeft = "none", c[c.length - 1].style.borderRight = "none");
57
+ n.length > 0 && (n[0].style.borderLeft = "none", n[n.length - 1].style.borderRight = "none");
56
58
  }));
57
59
  });
58
60
  }
59
61
  render() {
60
62
  switch (this.variant) {
61
- case "Diagram":
62
- return t`
63
- <div part="container">
64
- <div class="header">
65
- <div class="label">${this.title}</div>
66
- <div class="subtitle">${this.subtitle}</div>
67
- </div>
68
- <div class="content">
69
- <scb-horizontal-scroller width="600px" class="diagram-scroller" variant="inline" show-scrollbar>
70
- <slot name="diagram"></slot>
71
- </scb-horizontal-scroller>
72
- </div>
73
- <div class="footer">
74
- <div class="description section">
75
- <div class="secondary-label">${this.descriptionLabel}</div>
76
- ${this.description ? t`<div>${this.description}</div>` : ""}
77
- </div>
78
- <scb-divider></scb-divider>
79
- <scb-accordion>
80
- <scb-accordion-item
81
- title="${this.moreAboutStatsLabel}"
82
- >
83
- <div class="more-about-stats-content">
84
- <div class="section">
85
- <div class="secondary-label">${this.commentLabel}</div>
86
- ${this.comment ? t`<div>${this.comment}</div>` : ""}
87
- </div>
88
- <div class="section">
89
- <div class="secondary-label">${this.sourceLabel}</div>
90
- ${this.source ? t`<div>${this.source}</div>` : ""}
91
- </div>
92
- <div class="section">
93
- <div class="secondary-label">${this.footnoteLabel}</div>
94
- ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
95
- </div>
96
- </div>
97
- </scb-accordion-item>
98
- </scb-accordion>
99
- </div>
100
- <slot></slot>
101
- </div>
102
- `;
103
63
  case "Table":
104
64
  return t`
105
65
  <div part="container">
106
66
  <div class="header">
107
- <div class="label">${this.title}</div>
108
- <div class="subtitle">${this.subtitle}</div>
67
+ ${this.title ? t`
68
+ <div class="label">${this.title}</div>` : ""}
69
+ ${this.subtitle ? t`
70
+ <div class="subtitle">${this.subtitle}</div>` : ""}
109
71
  </div>
110
72
  <div class="content">
111
73
  <scb-horizontal-scroller width="600px" class="table-scroller" variant="inline" show-scrollbar>
@@ -113,31 +75,41 @@ let s = class extends h {
113
75
  </scb-horizontal-scroller>
114
76
  </div>
115
77
  <div class="footer">
78
+ ${this.description ? t`
116
79
  <div class="description section">
117
80
  <div class="secondary-label">${this.descriptionLabel}</div>
118
- ${this.description ? t`<div>${this.description}</div>` : ""}
81
+ <div>${this.description}</div>
119
82
  </div>
83
+ ` : ""}
84
+ ${this.comment || this.source || this.footnote ? t`
120
85
  <scb-divider></scb-divider>
121
86
  <scb-accordion>
122
87
  <scb-accordion-item
123
88
  title="${this.moreAboutStatsLabel}"
124
89
  >
125
90
  <div class="more-about-stats-content">
91
+ ${this.comment ? t`
126
92
  <div class="section">
127
93
  <div class="secondary-label">${this.commentLabel}</div>
128
- ${this.comment ? t`<div>${this.comment}</div>` : ""}
129
- </div>
130
- <div class="section">
131
- <div class="secondary-label">${this.sourceLabel}</div>
132
- ${this.source ? t`<div>${this.source}</div>` : ""}
94
+ <div>${this.comment}</div>
133
95
  </div>
96
+ ` : ""}
97
+ ${this.source ? t`
98
+ <div class="section">
99
+
100
+ <div class="secondary-label">${this.sourceLabel}</div>
101
+ <div>${this.source}</div>
102
+ </div>` : ""}
103
+ ${this.footnote ? t`
134
104
  <div class="section">
135
105
  <div class="secondary-label">${this.footnoteLabel}</div>
136
- ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
106
+ <div>${this.footnote}</div>
137
107
  </div>
108
+ ` : ""}
138
109
  </div>
139
110
  </scb-accordion-item>
140
111
  </scb-accordion>
112
+ ` : ""}
141
113
  </div>
142
114
  <slot></slot>
143
115
  </div>
@@ -146,38 +118,52 @@ let s = class extends h {
146
118
  return t`
147
119
  <div part="container">
148
120
  <div class="header">
121
+ ${this.title ? t`
149
122
  <div class="label">${this.title}</div>
123
+ ` : ""}
124
+ ${this.subtitle ? t`
150
125
  <div class="subtitle">${this.subtitle}</div>
126
+ ` : ""}
151
127
  </div>
152
128
  <div class="content image-content">
153
129
  <img src="${this.imageHref}" alt="Image figure"/>
154
130
  </div>
155
131
  <div class="footer">
156
- <div class="description section">
157
- <div class="secondary-label">${this.descriptionLabel}</div>
158
- ${this.description ? t`<div>${this.description}</div>` : ""}
159
- </div>
132
+ ${this.description ? t`
133
+ <div class="description section">
134
+ <div class="secondary-label">${this.descriptionLabel}</div>
135
+ <div>${this.description}</div>
136
+ </div>
137
+ ` : ""}
138
+ ${this.comment || this.source || this.footnote ? t`
160
139
  <scb-divider></scb-divider>
161
140
  <scb-accordion>
162
141
  <scb-accordion-item
163
142
  title="${this.moreAboutStatsLabel}"
164
143
  >
165
144
  <div class="more-about-stats-content">
145
+ ${this.comment ? t`
166
146
  <div class="section">
167
147
  <div class="secondary-label">${this.commentLabel}</div>
168
- ${this.comment ? t`<div>${this.comment}</div>` : ""}
148
+ <div>${this.comment}</div>
169
149
  </div>
150
+ ` : ""}
151
+ ${this.source ? t`
170
152
  <div class="section">
171
153
  <div class="secondary-label">${this.sourceLabel}</div>
172
- ${this.source ? t`<div>${this.source}</div>` : ""}
154
+ <div>${this.source}</div>
173
155
  </div>
156
+ ` : ""}
157
+ ${this.footnote ? t`
174
158
  <div class="section">
175
159
  <div class="secondary-label">${this.footnoteLabel}</div>
176
- ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
160
+ <div>${this.footnote}</div>
177
161
  </div>
162
+ ` : ""}
178
163
  </div>
179
164
  </scb-accordion-item>
180
165
  </scb-accordion>
166
+ ` : ""}
181
167
  </div>
182
168
  <slot></slot>
183
169
  </div>
@@ -187,25 +173,30 @@ let s = class extends h {
187
173
  return this.className !== i && (this.className = i), t`
188
174
  <div part="container">
189
175
  <div class="header">
176
+ ${this.title ? t`
190
177
  <div class="label">${this.title}</div>
178
+ ` : ""}
179
+ ${this.subtitle ? t`
191
180
  <div class="subtitle">${this.subtitle}</div>
181
+ ` : ""}
192
182
  </div>
193
183
  ${this.variant === "Standard" ? t`
194
184
  <div class="flipp-wrapper">
195
- <scb-chip
196
- variant="filter"
197
- label=${this.lang === "en" ? "Figure" : "Diagram"}
198
- icon="bar_chart"
199
- ?selected=${this.selectedChip === "Diagram"}
200
- @selected-changed=${() => this._onChipSelect("Diagram")}
201
- ></scb-chip>
202
- <scb-chip
203
- variant="filter"
204
- label="${this.lang === "en" ? "Table" : "Tabell"}"
205
- icon="table"
206
- ?selected=${this.selectedChip === "Table"}
207
- @selected-changed=${() => this._onChipSelect("Table")}
208
- ></scb-chip>
185
+ <scb-segmented-button
186
+ .value=${this.selectedChip || ""}
187
+ @change=${(s) => this._onSegmentedChange(s)}
188
+ >
189
+ <scb-segmented-item
190
+ label=${this.lang === "en" ? "Figure" : "Diagram"}
191
+ value="Diagram"
192
+ icon="bar_chart"
193
+ ></scb-segmented-item>
194
+ <scb-segmented-item
195
+ label="${this.lang === "en" ? "Table" : "Tabell"}"
196
+ value="Table"
197
+ icon="table"
198
+ ></scb-segmented-item>
199
+ </scb-segmented-button>
209
200
  </div>
210
201
  ` : ""}
211
202
  <div class="content">
@@ -217,51 +208,67 @@ let s = class extends h {
217
208
  </scb-horizontal-scroller>
218
209
  </div>
219
210
  <div class="footer">
211
+ ${this.description ? t`
220
212
  <div class="description section">
221
213
  <div class="secondary-label">${this.descriptionLabel}</div>
222
- ${this.description ? t`<div>${this.description}</div>` : ""}
214
+ <div>${this.description}</div>
223
215
  </div>
216
+ ` : ""}
217
+ ${this.comment || this.source || this.footnote ? t`
224
218
  <scb-divider></scb-divider>
225
- <scb-accordion>
226
- <scb-accordion-item
227
- title="${this.moreAboutStatsLabel}"
228
- >
229
- <div class="more-about-stats-content">
230
- <div class="section">
231
- <div class="secondary-label">${this.commentLabel}</div>
232
- ${this.comment ? t`<div>${this.comment}</div>` : ""}
233
- </div>
234
- <div class="section">
235
- <div class="secondary-label">${this.sourceLabel}</div>
236
- ${this.source ? t`<div>${this.source}</div>` : ""}
237
- </div>
238
- <div class="section">
239
- <div class="secondary-label">${this.footnoteLabel}</div>
240
- ${this.footnote ? t`<div>${this.footnote}</div>` : ""}
219
+ <scb-accordion>
220
+ <scb-accordion-item
221
+ title="${this.moreAboutStatsLabel}"
222
+ >
223
+ <div class="more-about-stats-content">
224
+ ${this.comment ? t`
225
+ <div class="section">
226
+ <div class="secondary-label">${this.commentLabel}</div>
227
+ <div>${this.comment}</div>
228
+ </div>
229
+ ` : ""}
230
+ ${this.source ? t`
231
+ <div class="section">
232
+ <div class="secondary-label">${this.sourceLabel}</div>
233
+ <div>${this.source}</div>
234
+ </div>
235
+ ` : ""}
236
+ ${this.footnote ? t`
237
+ <div class="section">
238
+ <div class="secondary-label">${this.footnoteLabel}</div>
239
+ <div>${this.footnote}</div>
240
+ </div>
241
+ ` : ""}
241
242
  </div>
242
- </div>
243
- </scb-accordion-item>
244
- </scb-accordion>
243
+ </scb-accordion-item>
244
+ </scb-accordion>
245
+ ` : ""}
245
246
  </div>
246
247
  <slot></slot>
247
248
  </div>
248
249
  `;
249
250
  }
250
251
  }
251
- _onChipSelect(i) {
252
- this.selectedChip = i;
252
+ _onSegmentedChange(i) {
253
+ var c;
254
+ const s = (c = i.detail) == null ? void 0 : c.value;
255
+ this.selectedChip === s ? this.selectedChip = null : this.selectedChip = s;
253
256
  }
254
257
  };
255
- s.styles = v`
258
+ a.styles = h`
256
259
  :host {
257
260
  display: block;
258
261
  font-family: var(--brand-font);
259
262
  color: var(--md-sys-color-on-surface);
260
263
  background: var(--md-sys-color-surface);
261
- padding: 24px;
264
+ padding: var(--spacing-7);
262
265
  max-width: 100%;
263
266
  border-radius: var(--spacing-04, 16px);
264
267
  border: 1px solid var(--md-sys-color-outline-variant);
268
+
269
+ }
270
+ scb-segmented-button {
271
+ --scb-segmented-button-height: var(--icon-size-small);
265
272
  }
266
273
 
267
274
  .label {
@@ -284,27 +291,27 @@ s.styles = v`
284
291
  .section {
285
292
  display: flex;
286
293
  flex-direction: column;
287
- gap: 4px;
294
+ gap: var(--spacing-2);
288
295
  }
289
296
  .more-about-stats-content {
290
297
  display: flex;
291
298
  flex-direction: column;
292
- gap: 24px;
299
+ gap: var(--spacing-7);
293
300
  max-width: 600px
294
301
  }
295
302
  .header {
296
- margin-bottom: 24px;
303
+ margin-bottom: var(--spacing-7);
297
304
  max-width: 600px
298
305
  }
299
306
  .flipp-wrapper {
300
- margin-bottom: 40px;
301
- max-width: 600px
307
+ margin-bottom: var(--spacing-9);
308
+ max-width: 234px
302
309
  }
303
310
  .description{
304
- margin-bottom: 32px;
311
+ margin-bottom: var(--spacing-8);
305
312
  }
306
313
  .footer {
307
- margin-top: 24px;
314
+ margin-top: var(--spacing-7);
308
315
 
309
316
  }
310
317
  .description.section{
@@ -320,12 +327,6 @@ s.styles = v`
320
327
  :host([variant='Table']) .table-scroller {
321
328
  display: flex;
322
329
  }
323
- :host([variant='Diagram']) slot[name="diagram"] {
324
- display: block;
325
- }
326
- :host([variant='Diagram']) .diagram-scroller {
327
- display: flex;
328
- }
329
330
  :host([variant='Image']) {
330
331
  img {
331
332
  height: auto;
@@ -370,39 +371,39 @@ s.styles = v`
370
371
 
371
372
 
372
373
  `;
373
- l([
374
- o({ type: String, reflect: !0 })
375
- ], s.prototype, "variant", 2);
376
- l([
377
- o({ type: String })
378
- ], s.prototype, "selectedChip", 2);
379
- l([
380
- o({ type: String, reflect: !0 })
381
- ], s.prototype, "title", 2);
382
- l([
383
- o({ type: String, reflect: !0 })
384
- ], s.prototype, "subtitle", 2);
385
- l([
386
- o({ type: String, reflect: !0 })
387
- ], s.prototype, "description", 2);
388
- l([
389
- o({ type: String, reflect: !0 })
390
- ], s.prototype, "comment", 2);
391
- l([
392
- o({ type: String, reflect: !0 })
393
- ], s.prototype, "source", 2);
394
- l([
395
- o({ type: String, reflect: !0 })
396
- ], s.prototype, "footnote", 2);
397
- l([
398
- o({ type: String, reflect: !0, attribute: "lang" })
399
- ], s.prototype, "lang", 2);
400
- l([
401
- o({ type: String, reflect: !0, attribute: "image-href" })
402
- ], s.prototype, "imageHref", 2);
403
- s = l([
404
- b("scb-viz")
405
- ], s);
374
+ o([
375
+ r({ type: String, reflect: !0 })
376
+ ], a.prototype, "variant", 2);
377
+ o([
378
+ r({ type: String })
379
+ ], a.prototype, "selectedChip", 2);
380
+ o([
381
+ r({ type: String, reflect: !0 })
382
+ ], a.prototype, "title", 2);
383
+ o([
384
+ r({ type: String, reflect: !0 })
385
+ ], a.prototype, "subtitle", 2);
386
+ o([
387
+ r({ type: String, reflect: !0 })
388
+ ], a.prototype, "description", 2);
389
+ o([
390
+ r({ type: String, reflect: !0 })
391
+ ], a.prototype, "comment", 2);
392
+ o([
393
+ r({ type: String, reflect: !0 })
394
+ ], a.prototype, "source", 2);
395
+ o([
396
+ r({ type: String, reflect: !0 })
397
+ ], a.prototype, "footnote", 2);
398
+ o([
399
+ r({ type: String, reflect: !0, attribute: "lang" })
400
+ ], a.prototype, "lang", 2);
401
+ o([
402
+ r({ type: String, reflect: !0, attribute: "image-href" })
403
+ ], a.prototype, "imageHref", 2);
404
+ a = o([
405
+ m("scb-viz")
406
+ ], a);
406
407
  export {
407
- s as ScbViz
408
+ a as ScbViz
408
409
  };