@itcenteratunihelsinki/huds-lib 0.8.67 → 0.8.69

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 (43) hide show
  1. package/components/hy-footer-base.js +10 -4
  2. package/components/hy-footer-base.js.map +1 -1
  3. package/components/hy-footer-link-item2.js +1 -1
  4. package/components/hy-footer-link-item2.js.map +1 -1
  5. package/components/hy-hero-carousel.js +2 -332
  6. package/components/hy-hero-carousel.js.map +1 -1
  7. package/components/hy-video.js +1 -1
  8. package/components/hy-video.js.map +1 -1
  9. package/dist/cjs/huds-lib.cjs.js +1 -1
  10. package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +10 -5
  11. package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js.map +1 -1
  12. package/dist/cjs/hy-hero-carousel.cjs.entry.js +2 -332
  13. package/dist/cjs/hy-hero-carousel.cjs.entry.js.map +1 -1
  14. package/dist/cjs/hy-video.cjs.entry.js +1 -1
  15. package/dist/cjs/hy-video.cjs.entry.js.map +1 -1
  16. package/dist/cjs/loader.cjs.js +1 -1
  17. package/dist/collection/components/footer/hy-footer-base/hy-footer-base.css +152 -66
  18. package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js +30 -3
  19. package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js.map +1 -1
  20. package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.css +27 -9
  21. package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css +13 -3
  22. package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js +2 -8
  23. package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js.map +1 -1
  24. package/dist/collection/components/hy-video/hy-video.css +1 -14
  25. package/dist/esm/huds-lib.js +1 -1
  26. package/dist/esm/hy-breadcrumbs_15.entry.js +10 -5
  27. package/dist/esm/hy-breadcrumbs_15.entry.js.map +1 -1
  28. package/dist/esm/hy-hero-carousel.entry.js +2 -332
  29. package/dist/esm/hy-hero-carousel.entry.js.map +1 -1
  30. package/dist/esm/hy-video.entry.js +1 -1
  31. package/dist/esm/hy-video.entry.js.map +1 -1
  32. package/dist/esm/loader.js +1 -1
  33. package/dist/huds-lib/huds-lib.esm.js +1 -1
  34. package/dist/huds-lib/huds-lib.esm.js.map +1 -1
  35. package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
  36. package/dist/huds-lib/hy-breadcrumbs_15.entry.js.map +1 -1
  37. package/dist/huds-lib/hy-hero-carousel.entry.js +1 -1
  38. package/dist/huds-lib/hy-hero-carousel.entry.js.map +1 -1
  39. package/dist/huds-lib/hy-video.entry.js +1 -1
  40. package/dist/huds-lib/hy-video.entry.js.map +1 -1
  41. package/dist/types/components/footer/hy-footer-base/hy-footer-base.d.ts +10 -0
  42. package/dist/types/components.d.ts +10 -2
  43. package/package.json +2 -2
package/dist/collection/components/footer/hy-footer-base/hy-footer-base.css CHANGED
@@ -69,11 +69,11 @@
69
69
  display: -ms-flexbox;
70
70
  display: flex;
71
71
  -webkit-box-orient: vertical;
72
- -webkit-box-direction: reverse;
73
- -ms-flex-direction: column-reverse;
74
- flex-direction: column-reverse;
72
+ -webkit-box-direction: normal;
73
+ -ms-flex-direction: column;
74
+ flex-direction: column;
75
75
  max-height: 100%;
76
- padding: 32px 16px 32px 16px;
76
+ padding: 32px 16px 0 16px;
77
77
  place-content: center space-between;
78
78
  position: relative;
79
79
  width: 100%;
@@ -82,28 +82,27 @@
82
82
  @media (min-width: 30rem) {
83
83
  .hy-footer-base {
84
84
  -webkit-box-orient: vertical;
85
- -webkit-box-direction: reverse;
86
- -ms-flex-direction: column-reverse;
87
- flex-direction: column-reverse;
85
+ -webkit-box-direction: normal;
86
+ -ms-flex-direction: column;
87
+ flex-direction: column;
88
88
  margin: 0 auto;
89
89
  max-width: 120.0625rem;
90
- padding: 32px 24px 32px 24px;
90
+ padding: 32px 24px 0 24px;
91
91
  }
92
92
  }
93
93
 
94
94
  @media (min-width: 60rem) {
95
95
  .hy-footer-base {
96
- -webkit-box-orient: horizontal;
97
- -webkit-box-direction: normal;
98
- -ms-flex-direction: row;
99
- flex-direction: row;
100
- padding: 36px 32px 36px 32px;
96
+ display: grid;
97
+ grid-template-columns: repeat(3, 1fr);
98
+ grid-template-rows: repeat(2, auto);
99
+ padding: 36px 32px 0 32px;
101
100
  }
102
101
  }
103
102
 
104
103
  @media (min-width: 75.0625rem) {
105
104
  .hy-footer-base {
106
- padding: 40px 32px 40px 32px;
105
+ padding: 40px 32px 0 32px;
107
106
  }
108
107
  }
109
108
 
@@ -118,10 +117,13 @@
118
117
  -webkit-box-direction: normal;
119
118
  -ms-flex-direction: column;
120
119
  flex-direction: column;
121
- -webkit-box-pack: justify;
122
- -ms-flex-pack: justify;
123
- justify-content: space-between;
120
+ -webkit-box-pack: start;
121
+ -ms-flex-pack: start;
122
+ justify-content: flex-start;
124
123
  margin-top: 24px;
124
+ -webkit-box-ordinal-group: 3;
125
+ -ms-flex-order: 2;
126
+ order: 2;
125
127
  }
126
128
 
127
129
  @media (min-width: 30rem) {
@@ -135,10 +137,12 @@
135
137
 
136
138
  @media (min-width: 60rem) {
137
139
  .hy-footer-base__left {
140
+ -webkit-box-ordinal-group: unset;
141
+ -ms-flex-order: unset;
142
+ order: unset;
138
143
  -webkit-box-align: start;
139
144
  -ms-flex-align: start;
140
145
  align-items: flex-start;
141
- width: 31.11%;
142
146
  }
143
147
  }
144
148
 
@@ -151,12 +155,12 @@
151
155
  }
152
156
 
153
157
  .hy-footer-base__logo .hy-site-logo__label {
154
- min-width: -webkit-max-content;
155
- min-width: -moz-max-content;
156
- min-width: max-content;
157
158
  max-width: -webkit-max-content;
158
159
  max-width: -moz-max-content;
159
160
  max-width: max-content;
161
+ min-width: -webkit-max-content;
162
+ min-width: -moz-max-content;
163
+ min-width: max-content;
160
164
  }
161
165
 
162
166
  .hy-footer-base__content {
@@ -167,25 +171,25 @@
167
171
  font-style: normal;
168
172
  font-weight: 600;
169
173
  letter-spacing: -0.1px;
170
- margin: 32px 0;
174
+ margin: 22px 0;
171
175
  white-space: pre-line;
172
176
  }
173
177
 
174
178
  @media (min-width: 30rem) {
175
179
  .hy-footer-base__content {
176
- margin: 32px 0;
180
+ margin: 22px 0;
177
181
  }
178
182
  }
179
183
 
180
184
  @media (min-width: 60rem) {
181
185
  .hy-footer-base__content {
182
- margin: 42px 0;
186
+ margin: 32px 0;
183
187
  }
184
188
  }
185
189
 
186
190
  @media (min-width: 75.0625rem) {
187
191
  .hy-footer-base__content {
188
- margin: 54px 0;
192
+ margin: 44px 0;
189
193
  }
190
194
  }
191
195
 
@@ -212,10 +216,16 @@
212
216
  -webkit-box-pack: center;
213
217
  -ms-flex-pack: center;
214
218
  justify-content: center;
215
- margin-bottom: 64px;
219
+ margin-bottom: 0;
216
220
  z-index: 2;
217
221
  }
218
222
 
223
+ @media (min-width: 48rem) {
224
+ .hy-footer-base__some {
225
+ margin-bottom: 64px;
226
+ }
227
+ }
228
+
219
229
  @media (min-width: 60rem) {
220
230
  .hy-footer-base__some {
221
231
  -webkit-box-align: start;
@@ -295,72 +305,148 @@
295
305
  display: -webkit-box;
296
306
  display: -ms-flexbox;
297
307
  display: flex;
298
- -ms-flex-wrap: wrap;
299
- flex-wrap: wrap;
300
- -webkit-box-orient: horizontal;
308
+ -webkit-box-orient: vertical;
301
309
  -webkit-box-direction: normal;
302
- -ms-flex-direction: row;
303
- flex-direction: row;
304
- -webkit-box-pack: start;
305
- -ms-flex-pack: start;
306
- justify-content: flex-start;
310
+ -ms-flex-direction: column;
311
+ flex-direction: column;
312
+ grid-column: 2/-1;
313
+ -webkit-box-pack: center;
314
+ -ms-flex-pack: center;
315
+ justify-content: center;
307
316
  max-height: 100%;
317
+ -webkit-box-ordinal-group: 2;
318
+ -ms-flex-order: 1;
319
+ order: 1;
320
+ width: 100%;
321
+ }
322
+
323
+ .hy-footer-base__right hy-footer-link-item {
324
+ float: none;
308
325
  width: 100%;
309
326
  }
310
327
 
311
328
  @media (min-width: 30rem) {
312
329
  .hy-footer-base__right {
313
330
  margin-bottom: 32px;
314
- max-height: 300px;
315
- width: calc(100% + 24px);
331
+ }
332
+ }
333
+
334
+ @media (min-width: 48rem) {
335
+ .hy-footer-base__right {
336
+ display: block;
337
+ -webkit-box-pack: start;
338
+ -ms-flex-pack: start;
339
+ justify-content: flex-start;
340
+ }
341
+ .hy-footer-base__right hy-footer-link-item {
342
+ clear: right;
343
+ float: left;
344
+ height: -webkit-max-content;
345
+ height: -moz-max-content;
346
+ height: max-content;
347
+ width: 50%;
348
+ margin-bottom: 1.5rem;
316
349
  }
317
350
  }
318
351
 
319
352
  @media (min-width: 60rem) {
320
353
  .hy-footer-base__right {
321
- max-height: 350px;
322
- width: 65.56%;
354
+ -webkit-box-ordinal-group: unset;
355
+ -ms-flex-order: unset;
356
+ order: unset;
357
+ }
358
+ }
359
+
360
+ .hy-footer-base__bottom {
361
+ border-top: 1px solid var(--grayscale-white);
362
+ display: -webkit-box;
363
+ display: -ms-flexbox;
364
+ display: flex;
365
+ -webkit-box-orient: vertical;
366
+ -webkit-box-direction: normal;
367
+ -ms-flex-direction: column;
368
+ flex-direction: column;
369
+ grid-column: 1/-1;
370
+ -webkit-box-pack: center;
371
+ -ms-flex-pack: center;
372
+ justify-content: center;
373
+ margin: 2.5rem 0 1rem;
374
+ -webkit-box-ordinal-group: 4;
375
+ -ms-flex-order: 3;
376
+ order: 3;
377
+ padding-top: 2.5rem;
378
+ width: 100%;
379
+ }
380
+
381
+ @media (min-width: 48rem) {
382
+ .hy-footer-base__bottom {
383
+ -webkit-box-orient: horizontal;
384
+ -webkit-box-direction: normal;
385
+ -ms-flex-direction: row;
386
+ flex-direction: row;
387
+ -webkit-box-pack: justify;
388
+ -ms-flex-pack: justify;
389
+ justify-content: space-between;
390
+ padding-top: 1rem;
391
+ }
392
+ }
393
+
394
+ .hy-footer-base__bottom__links {
395
+ -webkit-box-align: start;
396
+ -ms-flex-align: start;
397
+ align-items: flex-start;
398
+ display: -webkit-box;
399
+ display: -ms-flexbox;
400
+ display: flex;
401
+ -ms-flex-wrap: wrap;
402
+ flex-wrap: wrap;
403
+ gap: 1.25rem;
404
+ -webkit-box-pack: center;
405
+ -ms-flex-pack: center;
406
+ justify-content: center;
407
+ padding: 0 1rem 1rem;
408
+ }
409
+
410
+ @media (min-width: 48rem) {
411
+ .hy-footer-base__bottom__links {
412
+ padding: 0;
413
+ gap: 2rem;
323
414
  }
324
415
  }
325
416
 
417
+ .hy-footer-base__bottom__link {
418
+ color: var(--grayscale-white);
419
+ font-family: var(--main-font-family);
420
+ font-size: 14px;
421
+ font-weight: 600;
422
+ letter-spacing: -0.1;
423
+ line-height: 19.07px;
424
+ text-align: right;
425
+ text-decoration: underline;
426
+ text-decoration-thickness: auto;
427
+ }
428
+
429
+ .hy-footer-base__bottom__link:hover, .hy-footer-base__bottom__link:focus-within {
430
+ text-decoration-thickness: 2px;
431
+ }
432
+
326
433
  .hy-footer-base__copy {
327
434
  font-size: 1rem;
328
435
  line-height: 24px;
329
- bottom: 40px;
436
+ -ms-flex-item-align: center;
437
+ align-self: center;
330
438
  color: var(--grayscale-white);
331
- display: inline-block;
439
+ display: block;
332
440
  font-family: var(--main-font-family);
333
441
  font-weight: 600;
334
442
  letter-spacing: -0.1px;
335
- position: absolute;
336
- right: 50%;
337
443
  text-align: center;
338
- -webkit-transform: translateX(50%);
339
- transform: translateX(50%);
340
- width: 100%;
341
- }
342
-
343
- @media (min-width: 30rem) {
344
- .hy-footer-base__copy {
345
- bottom: 32px;
346
- right: 50%;
347
- -webkit-transform: translateX(50%);
348
- transform: translateX(50%);
349
- }
350
444
  }
351
445
 
352
- @media (min-width: 60rem) {
353
- .hy-footer-base__copy {
354
- bottom: 36px;
355
- right: 32px;
356
- text-align: right;
357
- -webkit-transform: none;
358
- transform: none;
359
- }
360
- }
361
-
362
- @media (min-width: 75.0625rem) {
446
+ @media (min-width: 48rem) {
363
447
  .hy-footer-base__copy {
364
- bottom: 40px;
448
+ -ms-flex-item-align: end;
449
+ align-self: flex-end;
450
+ margin-left: 0.5rem;
365
451
  }
366
452
  }
package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js CHANGED
@@ -10,24 +10,29 @@ export class HyFooterBase {
10
10
  this.someLabel = undefined;
11
11
  this.copyrightText = undefined;
12
12
  this.dataFooterBaseLinks = undefined;
13
+ this.dataFooterPostSectionLinks = undefined;
13
14
  this.dataFooterBaseSome = undefined;
14
15
  }
15
16
  async componentWillLoad() {
16
17
  this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);
17
18
  this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);
19
+ this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);
18
20
  }
19
21
  render() {
20
22
  const logoColor = ColorVariant.white;
21
23
  const classAttributes = ["hy-footer-base--content-container"].join(" ");
22
24
  const links = this._dataFooterBaseLinks;
25
+ const postSectionLinks = this._dataFooterPostSectionLinks;
23
26
  const some = this._dataFooterBaseSome;
24
- return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("span", { class: "hy-footer-base__some__label" }, this.someLabel), h("div", { class: "hy-footer-base__some__items" }, some &&
27
+ return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("div", { class: "hy-footer-base__some__items" }, some &&
25
28
  some.map((s) => {
26
29
  return (h("a", { "aria-label": s.label, href: s.url, class: `hy-footer-base__some__item`, title: s.label, target: "_blank" }, h("hy-icon", { icon: `hy-icon-some-${s.type}`, size: 36 })));
27
30
  })))), h("div", { class: "hy-footer-base__right" }, links &&
28
31
  links.map((link) => {
29
- return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white }));
30
- }), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText)))));
32
+ var _a;
33
+ return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white, mainLink: link.mainlink, items: (_a = link.items) !== null && _a !== void 0 ? _a : null }));
34
+ })), postSectionLinks && (h("div", { class: "hy-footer-base__bottom" }, h("div", { class: "hy-footer-base__bottom__links" }, postSectionLinks &&
35
+ postSectionLinks.map((item) => (h("a", { class: "hy-footer-base__bottom__link", href: item.url, target: item.external ? "_blank" : "_self" }, item.label)))), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText))))));
31
36
  }
32
37
  static get is() { return "hy-footer-base"; }
33
38
  static get originalStyleUrls() {
@@ -178,6 +183,28 @@ export class HyFooterBase {
178
183
  "attribute": "data-footer-base-links",
179
184
  "reflect": false
180
185
  },
186
+ "dataFooterPostSectionLinks": {
187
+ "type": "string",
188
+ "mutable": false,
189
+ "complexType": {
190
+ "original": "FooterPostSectionLinks[] | string",
191
+ "resolved": "FooterPostSectionLinks[] | string",
192
+ "references": {
193
+ "FooterPostSectionLinks": {
194
+ "location": "local",
195
+ "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/footer/hy-footer-base/hy-footer-base.tsx"
196
+ }
197
+ }
198
+ },
199
+ "required": false,
200
+ "optional": false,
201
+ "docs": {
202
+ "tags": [],
203
+ "text": "Footer post section links"
204
+ },
205
+ "attribute": "data-footer-post-section-links",
206
+ "reflect": false
207
+ },
181
208
  "dataFooterBaseSome": {
182
209
  "type": "string",
183
210
  "mutable": false,
package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-footer-base.js","sourceRoot":"","sources":["../../../../src/components/footer/hy-footer-base/hy-footer-base.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,mBAAmB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AACpG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAO9D,MAAM,OAAO,YAAY;;iBAIc,mBAAmB,CAAC,KAAK;;;gBAYjC,YAAY,CAAC,GAAG;;;;;;EAqB7C,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;EAC7E,CAAC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IACrC,MAAM,eAAe,GAAG,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAA8C,CAAC;IAClE,MAAM,IAAI,GAAG,IAAI,CAAC,mBAA4C,CAAC;IAE/D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe;MAC1B,WAAK,KAAK,EAAC,gBAAgB;QACzB,WAAK,KAAK,EAAC,sBAAsB;UAC/B,WAAK,KAAK,EAAC,sBAAsB;YAC/B,oBAAc,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI,CACpG;UACN,WAAK,KAAK,EAAC,yBAAyB;YAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;UACN,WAAK,KAAK,EAAC,sBAAsB;YAC/B,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,SAAS,CAAQ;YACjE,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI;cACH,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CACL,uBACc,CAAC,CAAC,KAAK,EACnB,IAAI,EAAE,CAAC,CAAC,GAAG,EACX,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAC,QAAQ;kBAEf,eAAS,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,GAAI,CACnD,CACL,CAAC;cACJ,CAAC,CAAC,CACA,CACF,CACF;QACN,WAAK,KAAK,EAAC,uBAAuB;UAC/B,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;cACjB,OAAO,CACL,2BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,mBAAmB,CAAC,KAAK,GACX,CACxB,CAAC;YACJ,CAAC,CAAC;UACH,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,aAAa,CAAQ,CACjF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /**\n * Link item color\n */\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /**\n * Logo url\n */\n @Prop() logoUrl?: string;\n /**\n * Logo label\n */\n @Prop() logoLabel?: string;\n /**\n * Logo size\n */\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /**\n * Label for some links\n */\n @Prop() someLabel?: string;\n /**\n * Copyright text\n */\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n /**\n * Footer links to be displayed\n */\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n /**\n * Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <span class=\"hy-footer-base__some__label\">{this.someLabel}</span>\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n ></hy-footer-link-item>\n );\n })}\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"hy-footer-base.js","sourceRoot":"","sources":["../../../../src/components/footer/hy-footer-base/hy-footer-base.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterPostSectionLinks {\n label: string;\n url: string;\n external: boolean;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /**\n * Link item color\n */\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /**\n * Logo url\n */\n @Prop() logoUrl?: string;\n /**\n * Logo label\n */\n @Prop() logoLabel?: string;\n /**\n * Logo size\n */\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /**\n * Label for some links\n */\n @Prop() someLabel?: string;\n /**\n * Copyright text\n */\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n private _dataFooterPostSectionLinks: FooterPostSectionLinks[];\n /**\n * Footer links to be displayed\n */\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n /**\n * Footer post section links\n */\n @Prop() dataFooterPostSectionLinks: FooterPostSectionLinks[] | string;\n /**\n * Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const postSectionLinks = this._dataFooterPostSectionLinks as Array<FooterPostSectionLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n mainLink={link.mainlink}\n items={link.items ?? null}\n ></hy-footer-link-item>\n );\n })}\n </div>\n {postSectionLinks && (\n <div class=\"hy-footer-base__bottom\">\n <div class=\"hy-footer-base__bottom__links\">\n {postSectionLinks &&\n postSectionLinks.map((item) => (\n <a class=\"hy-footer-base__bottom__link\" href={item.url} target={item.external ? \"_blank\" : \"_self\"}>\n {item.label}\n </a>\n ))}\n </div>\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.css CHANGED
@@ -65,7 +65,7 @@ hy-footer-link-item:not([main-link]) {
65
65
  width: 100%;
66
66
  }
67
67
 
68
- @media (min-width: 30rem) {
68
+ @media (min-width: 48rem) {
69
69
  hy-footer-link-item:not([main-link]) {
70
70
  width: 50%;
71
71
  }
@@ -108,6 +108,12 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
108
108
  flex-direction: column;
109
109
  }
110
110
 
111
+ @media (min-width: 48rem) {
112
+ .hy-footer-link-item--container {
113
+ margin-bottom: 1rem;
114
+ }
115
+ }
116
+
111
117
  .hy-footer-link-item--container .hy-footer-link-item:last-child {
112
118
  margin-bottom: 16px;
113
119
  }
@@ -147,28 +153,36 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
147
153
  border: 0;
148
154
  padding: 0;
149
155
  margin-right: -32px;
156
+ width: -webkit-fit-content;
157
+ width: -moz-fit-content;
158
+ width: fit-content;
150
159
  }
151
160
 
152
161
  .hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
153
- font-size: 1.125rem;
154
- line-height: 22px;
162
+ font-size: 1rem;
163
+ line-height: 16px;
155
164
  letter-spacing: -0.45px;
156
- padding: 0 0 1px 0 !important;
165
+ padding: 1.5rem 0 1px 0 !important;
166
+ text-transform: uppercase;
157
167
  }
158
168
 
159
169
  @media (min-width: 30rem) {
160
170
  .hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
161
- font-size: 1.375rem;
162
- line-height: 28px;
163
171
  letter-spacing: -0.44px;
164
172
  }
165
173
  }
166
174
 
167
175
  .hy-footer-link-item__main .hy-heading__container > h3.hy-heading .hy-footer-link-item__link {
168
- color: var(--grayscale-black);
176
+ color: var(--grayscale-white);
169
177
  font-family: var(--main-font-family);
170
178
  text-decoration: none;
171
- margin-bottom: 12px;
179
+ margin-bottom: 8px;
180
+ }
181
+
182
+ @media (min-width: 48rem) {
183
+ .hy-footer-link-item__main .hy-heading__container > h3.hy-heading .hy-footer-link-item__link {
184
+ margin-bottom: 12px;
185
+ }
172
186
  }
173
187
 
174
188
  .hy-footer-link-item__color-black {
@@ -198,7 +212,7 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
198
212
  }
199
213
 
200
214
  .hy-footer-link-item__color-white {
201
- font-size: 0.875rem;
215
+ font-size: 0.9375rem;
202
216
  line-height: 18px;
203
217
  font-weight: 600;
204
218
  border-bottom: 1px solid var(--grayscale-white);
@@ -207,6 +221,10 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
207
221
  padding: 15px 20px 15px 0;
208
222
  }
209
223
 
224
+ .hy-footer-link-item__color-white:hover, .hy-footer-link-item__color-white:focus-within {
225
+ text-decoration: underline;
226
+ }
227
+
210
228
  .hy-footer-link-item__color-white .hy-footer-link-item__icon svg {
211
229
  fill: var(--grayscale-white);
212
230
  }
package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css CHANGED
@@ -931,7 +931,7 @@ swiper-container .swiper-notification {
931
931
 
932
932
  .hero-carousel-container {
933
933
  border-bottom: 1px solid var(--grayscale-medium-dark);
934
- margin: 1.5rem 1rem;
934
+ margin: 1.5rem 0;
935
935
  --button-size: 35px;
936
936
  --button-offset: 0px;
937
937
  }
@@ -1056,6 +1056,7 @@ swiper-container .swiper-notification {
1056
1056
  -ms-flex-pack: justify;
1057
1057
  justify-content: space-between;
1058
1058
  margin: 30px 0;
1059
+ padding: 0 1rem;
1059
1060
  position: relative;
1060
1061
  width: 100%;
1061
1062
  }
@@ -1064,6 +1065,7 @@ swiper-container .swiper-notification {
1064
1065
  .hero-carousel--controls {
1065
1066
  display: block;
1066
1067
  margin: 0;
1068
+ padding: 0;
1067
1069
  position: initial;
1068
1070
  width: auto;
1069
1071
  }
@@ -1175,13 +1177,13 @@ swiper-container .swiper-notification {
1175
1177
  -ms-hyphens: auto;
1176
1178
  hyphens: auto;
1177
1179
  letter-spacing: -0.36px;
1178
- opacity: 0.25;
1180
+ opacity: 0.8;
1179
1181
  text-align: left;
1180
1182
  }
1181
1183
 
1182
1184
  .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button:is(:hover, :focus) {
1183
1185
  cursor: pointer;
1184
- opacity: 0.5;
1186
+ opacity: 1;
1185
1187
  }
1186
1188
 
1187
1189
  .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button .hero-carousel--item__pagination__button__theme {
@@ -1199,6 +1201,14 @@ swiper-container .swiper-notification {
1199
1201
  opacity: 1;
1200
1202
  }
1201
1203
 
1204
+ .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button.is-current button:after {
1205
+ border-bottom: 4px solid var(--grayscale-white, #FFF);
1206
+ content: "";
1207
+ display: block;
1208
+ margin-top: 0.45rem;
1209
+ width: 33.3333333333%;
1210
+ }
1211
+
1202
1212
  .hero-carousel--item {
1203
1213
  display: grid;
1204
1214
  -webkit-box-orient: vertical;
package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { h } from "@stencil/core";
2
2
  import { jsonParserWorker } from "../../global/globalScript";
3
- import Swiper, { Navigation, Pagination, A11y, EffectFade, Virtual } from "swiper";
3
+ import Swiper, { Navigation, Pagination, A11y, EffectFade } from "swiper";
4
4
  import { CtaLinkButtonVariants } from "../../utils/utils";
5
5
  export class HyHeroCarousel {
6
6
  constructor() {
@@ -17,7 +17,7 @@ export class HyHeroCarousel {
17
17
  }
18
18
  componentDidLoad() {
19
19
  new Swiper(".swiper", {
20
- modules: [Navigation, Pagination, A11y, EffectFade, Virtual],
20
+ modules: [Navigation, Pagination, A11y, EffectFade],
21
21
  enabled: true,
22
22
  effect: 'fade',
23
23
  fadeEffect: {
@@ -26,12 +26,6 @@ export class HyHeroCarousel {
26
26
  direction: "horizontal",
27
27
  loop: false,
28
28
  spaceBetween: 50,
29
- virtual: {
30
- enabled: true,
31
- cache: true,
32
- addSlidesAfter: 0,
33
- addSlidesBefore: 0,
34
- },
35
29
  navigation: {
36
30
  nextEl: ".swiper-button-next",
37
31
  prevEl: ".swiper-button-prev",
package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-hero-carousel.js","sourceRoot":"","sources":["../../../src/components/hy-hero-carousel/hy-hero-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nexport interface CarouselItem {\n title: string;\n desc: string;\n theme_text: string;\n image_alt: string;\n image_fallback: string;\n image_sources: ImageSrcSet[] | string;\n uri?: string;\n uri_title: string;\n}\n\nimport {Component, h, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport Swiper, {Navigation, Pagination, A11y, EffectFade, Virtual} from \"swiper\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero-carousel\",\n styleUrl: \"./hy-hero-carousel.scss\",\n shadow: false,\n})\nexport class HyHeroCarousel {\n @Prop() itemCount: number;\n @Prop() ariaLabelNext: string = \"Next slide\";\n @Prop() ariaLabelPrev: string = \"Previous slide\";\n @Prop() ariaLabelFirstSlide: string = \"This is the first slide\";\n @Prop() ariaLabelLastSlide: string = \"This is the first slide\";\n @Prop() ariaLabelBulletMessage: string = \"Go to slide\";\n\n @Prop() data: CarouselItem[] | string;\n private _data: CarouselItem[];\n\n async componentWillLoad() {\n this._data = await jsonParserWorker(this.data);\n }\n\n componentDidLoad() {\n new Swiper(\".swiper\", {\n modules: [Navigation, Pagination, A11y, EffectFade, Virtual],\n enabled: true,\n effect: 'fade',\n fadeEffect: {\n crossFade: true\n },\n direction: \"horizontal\",\n loop: false,\n spaceBetween: 50,\n virtual: {\n enabled: true,\n cache: true,\n addSlidesAfter: 0,\n addSlidesBefore: 0,\n },\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n pagination: {\n el: \".swiper-pagination\",\n bulletClass: \"hero-carousel--pagination__bullet\",\n bulletActiveClass: \"hero-carousel--pagination__bullet--active\",\n clickable: true,\n renderBullet: function (index, className) {\n return `<span aria-label=\"${this.ariaLabelBulletMessage} ${index}\" data-index=\"${index}\" class=\"${className}\"></span>`;\n },\n },\n a11y: {\n enabled: true,\n firstSlideMessage: this.ariaLabelFirstSlide,\n lastSlideMessage: this.ariaLabelLastSlide,\n nextSlideMessage: this.ariaLabelNext,\n prevSlideMessage: this.ariaLabelPrev,\n paginationBulletMessage: `${this.ariaLabelBulletMessage} {{index}}`,\n },\n });\n }\n\n handleSlideChangeFromButtons(index) {\n const swiperEl = document.querySelector(\".swiper\") as any;\n swiperEl.swiper.slideTo(index, 300, false);\n }\n\n\n render() {\n const carouselContentClasses = [\"hero-carousel--item__content\", this.itemCount > 1 ? \"has-pagination\" : \"\"].join(\n \" \"\n );\n return (\n <div class=\"hero-carousel-container\">\n <div class=\"swiper\">\n <div class=\"swiper-wrapper\">\n {this._data[\"items\"] &&\n this._data[\"items\"].map((i, index) => {\n const currentIndex = index;\n const srcSet = JSON.parse(i.image_sources);\n return (\n <div class=\"swiper-slide\" data-title={i.title} data-desc={i.desc}>\n <div class=\"hero-carousel--item\">\n <div class={carouselContentClasses}>\n <h2 class=\"hero-carousel--item__title\" innerHTML={i.title}></h2>\n <div class=\"hero-carousel--item__desc\">{i.desc}</div>\n {i.uri && (\n <hy-cta-button\n link-content={i.uri_title}\n sc-label={i.uri_title}\n url={i.uri}\n is-external=\"false\"\n variant={CtaLinkButtonVariants.heroBlue}\n />\n )}\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--item__pagination\">\n <ul>\n {this._data[\"items\"].map((i, index) => {\n const paginationButtonClasses = [\n \"hero-carousel--item__pagination__button\",\n index === currentIndex ? \"is-current\" : \"\",\n ].join(\" \");\n return (\n <li class={paginationButtonClasses}>\n <button\n aria-label={`${this.ariaLabelBulletMessage} ${index}`}\n onClick={() => this.handleSlideChangeFromButtons(index)}\n data-index={index}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n >\n {i.theme_text && \n <span class=\"hero-carousel--item__pagination__button__theme\">{i.theme_text}</span>\n }\n <span innerHTML={i.title}></span>\n </button>\n </li>\n );\n })}\n </ul>\n </div>\n ) : null}\n </div>\n <div class=\"hero-carousel--item__image\">\n {srcSet.length > 0 ? (\n <picture>\n {srcSet.map((item: ImageSrcSet) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n </picture>\n ) : (\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n )}\n { currentIndex !== 0 &&\n <div class=\"swiper-lazy-preloader\"></div>\n }\n </div>\n </div>\n </div>\n );\n })}\n </div>\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--controls\">\n <div class=\"swiper-pagination hero-carousel--pagination--mobile\"></div>\n <div class=\"hero-carousel--controls__buttons\">\n <div class=\"swiper-button-prev\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-left\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-left\"></hy-icon>\n </div>\n <div class=\"swiper-button-next\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-right\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-right\"></hy-icon>\n </div>\n </div>\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"hy-hero-carousel.js","sourceRoot":"","sources":["../../../src/components/hy-hero-carousel/hy-hero-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nexport interface CarouselItem {\n title: string;\n desc: string;\n theme_text: string;\n image_alt: string;\n image_fallback: string;\n image_sources: ImageSrcSet[] | string;\n uri?: string;\n uri_title: string;\n}\n\nimport {Component, h, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport Swiper, {Navigation, Pagination, A11y, EffectFade} from \"swiper\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero-carousel\",\n styleUrl: \"./hy-hero-carousel.scss\",\n shadow: false,\n})\nexport class HyHeroCarousel {\n @Prop() itemCount: number;\n @Prop() ariaLabelNext: string = \"Next slide\";\n @Prop() ariaLabelPrev: string = \"Previous slide\";\n @Prop() ariaLabelFirstSlide: string = \"This is the first slide\";\n @Prop() ariaLabelLastSlide: string = \"This is the first slide\";\n @Prop() ariaLabelBulletMessage: string = \"Go to slide\";\n\n @Prop() data: CarouselItem[] | string;\n private _data: CarouselItem[];\n\n async componentWillLoad() {\n this._data = await jsonParserWorker(this.data);\n }\n\n componentDidLoad() {\n new Swiper(\".swiper\", {\n modules: [Navigation, Pagination, A11y, EffectFade],\n enabled: true,\n effect: 'fade',\n fadeEffect: {\n crossFade: true\n },\n direction: \"horizontal\",\n loop: false,\n spaceBetween: 50,\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n pagination: {\n el: \".swiper-pagination\",\n bulletClass: \"hero-carousel--pagination__bullet\",\n bulletActiveClass: \"hero-carousel--pagination__bullet--active\",\n clickable: true,\n renderBullet: function (index, className) {\n return `<span aria-label=\"${this.ariaLabelBulletMessage} ${index}\" data-index=\"${index}\" class=\"${className}\"></span>`;\n },\n },\n a11y: {\n enabled: true,\n firstSlideMessage: this.ariaLabelFirstSlide,\n lastSlideMessage: this.ariaLabelLastSlide,\n nextSlideMessage: this.ariaLabelNext,\n prevSlideMessage: this.ariaLabelPrev,\n paginationBulletMessage: `${this.ariaLabelBulletMessage} {{index}}`,\n },\n });\n }\n\n handleSlideChangeFromButtons(index) {\n const swiperEl = document.querySelector(\".swiper\") as any;\n swiperEl.swiper.slideTo(index, 300, false);\n }\n\n\n render() {\n const carouselContentClasses = [\"hero-carousel--item__content\", this.itemCount > 1 ? \"has-pagination\" : \"\"].join(\n \" \"\n );\n return (\n <div class=\"hero-carousel-container\">\n <div class=\"swiper\">\n <div class=\"swiper-wrapper\">\n {this._data[\"items\"] &&\n this._data[\"items\"].map((i, index) => {\n const currentIndex = index;\n const srcSet = JSON.parse(i.image_sources);\n return (\n <div class=\"swiper-slide\" data-title={i.title} data-desc={i.desc}>\n <div class=\"hero-carousel--item\">\n <div class={carouselContentClasses}>\n <h2 class=\"hero-carousel--item__title\" innerHTML={i.title}></h2>\n <div class=\"hero-carousel--item__desc\">{i.desc}</div>\n {i.uri && (\n <hy-cta-button\n link-content={i.uri_title}\n sc-label={i.uri_title}\n url={i.uri}\n is-external=\"false\"\n variant={CtaLinkButtonVariants.heroBlue}\n />\n )}\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--item__pagination\">\n <ul>\n {this._data[\"items\"].map((i, index) => {\n const paginationButtonClasses = [\n \"hero-carousel--item__pagination__button\",\n index === currentIndex ? \"is-current\" : \"\",\n ].join(\" \");\n return (\n <li class={paginationButtonClasses}>\n <button\n aria-label={`${this.ariaLabelBulletMessage} ${index}`}\n onClick={() => this.handleSlideChangeFromButtons(index)}\n data-index={index}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n >\n {i.theme_text && \n <span class=\"hero-carousel--item__pagination__button__theme\">{i.theme_text}</span>\n }\n <span innerHTML={i.title}></span>\n </button>\n </li>\n );\n })}\n </ul>\n </div>\n ) : null}\n </div>\n <div class=\"hero-carousel--item__image\">\n {srcSet.length > 0 ? (\n <picture>\n {srcSet.map((item: ImageSrcSet) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n </picture>\n ) : (\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n )}\n { currentIndex !== 0 &&\n <div class=\"swiper-lazy-preloader\"></div>\n }\n </div>\n </div>\n </div>\n );\n })}\n </div>\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--controls\">\n <div class=\"swiper-pagination hero-carousel--pagination--mobile\"></div>\n <div class=\"hero-carousel--controls__buttons\">\n <div class=\"swiper-button-prev\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-left\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-left\"></hy-icon>\n </div>\n <div class=\"swiper-button-next\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-right\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-right\"></hy-icon>\n </div>\n </div>\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n}\n"]}