@spw-ds/spw-stencil-library 1.3.3 → 1.3.4
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/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/spw-card-content.cjs.entry.js +1 -1
- package/dist/cjs/spw-card-excerpt.cjs.entry.js +1 -1
- package/dist/cjs/spw-card-image.cjs.entry.js +22 -4
- package/dist/cjs/spw-card-subtag-item.cjs.entry.js +1 -1
- package/dist/cjs/spw-card-subtags.cjs.entry.js +5 -2
- package/dist/cjs/spw-card-title.cjs.entry.js +1 -1
- package/dist/cjs/spw-card.cjs.entry.js +2 -2
- package/dist/cjs/spw-custom-select.cjs.entry.js +22 -3
- package/dist/cjs/spw-file-upload.cjs.entry.js +34 -9
- package/dist/cjs/spw-mosaic-item.cjs.entry.js +47 -6
- package/dist/cjs/spw-mosaic.cjs.entry.js +5 -2
- package/dist/cjs/spw-select.cjs.entry.js +16 -10
- package/dist/cjs/spw-stencil-library.cjs.js +1 -1
- package/dist/cjs/spw-tile.cjs.entry.js +1 -1
- package/dist/collection/components/spw-card/spw-card-content/spw-card-content.css +36 -2
- package/dist/collection/components/spw-card/spw-card-excerpt/spw-card-excerpt.css +3 -0
- package/dist/collection/components/spw-card/spw-card-image/spw-card-image.css +35 -14
- package/dist/collection/components/spw-card/spw-card-image/spw-card-image.js +79 -4
- package/dist/collection/components/spw-card/spw-card-subtag-item/spw-card-subtag-item.css +3 -0
- package/dist/collection/components/spw-card/spw-card-subtags/spw-card-subtags.css +3 -0
- package/dist/collection/components/spw-card/spw-card-subtags/spw-card-subtags.js +4 -1
- package/dist/collection/components/spw-card/spw-card-title/spw-card-title.css +10 -2
- package/dist/collection/components/spw-card/spw-card.js +4 -4
- package/dist/collection/components/spw-custom-select/spw-custom-select.js +61 -4
- package/dist/collection/components/spw-file-upload/spw-file-upload.js +55 -10
- package/dist/collection/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.js +111 -6
- package/dist/collection/components/spw-mosaic/spw-mosaic.js +9 -2
- package/dist/collection/components/spw-select/spw-select.js +55 -11
- package/dist/collection/components/spw-tile/spw-tile.css +17 -0
- package/dist/collection/stories/organisms/spw-card/spw-card.stories.js +22 -0
- package/dist/collection/stories/organisms/spw-grid/spw-grid.stories.js +14 -14
- package/dist/collection/stories/organisms/spw-mosaic/spw-mosaic.stories.js +131 -0
- package/dist/components/spw-card-content.js +1 -1
- package/dist/components/spw-card-excerpt.js +1 -1
- package/dist/components/spw-card-image.js +1 -1
- package/dist/components/spw-card-subtag-item.js +1 -1
- package/dist/components/spw-card-subtags.js +1 -1
- package/dist/components/spw-card-title.js +1 -1
- package/dist/components/spw-card.js +1 -1
- package/dist/components/spw-custom-select.js +1 -1
- package/dist/components/spw-file-upload.js +1 -1
- package/dist/components/spw-mosaic-item.js +1 -1
- package/dist/components/spw-mosaic.js +4 -4
- package/dist/components/spw-select.js +1 -1
- package/dist/components/spw-tile.js +1 -1
- package/dist/components_json.json +297 -9
- package/dist/components_vscode.json +3499 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/spw-card-content.entry.js +1 -1
- package/dist/esm/spw-card-excerpt.entry.js +1 -1
- package/dist/esm/spw-card-image.entry.js +22 -4
- package/dist/esm/spw-card-subtag-item.entry.js +1 -1
- package/dist/esm/spw-card-subtags.entry.js +5 -2
- package/dist/esm/spw-card-title.entry.js +1 -1
- package/dist/esm/spw-card.entry.js +2 -2
- package/dist/esm/spw-custom-select.entry.js +22 -3
- package/dist/esm/spw-file-upload.entry.js +34 -9
- package/dist/esm/spw-mosaic-item.entry.js +47 -6
- package/dist/esm/spw-mosaic.entry.js +5 -2
- package/dist/esm/spw-select.entry.js +16 -10
- package/dist/esm/spw-stencil-library.js +1 -1
- package/dist/esm/spw-tile.entry.js +1 -1
- package/dist/spw-stencil-library/p-1318262e.entry.js +1 -0
- package/dist/spw-stencil-library/p-1e806b7c.entry.js +1 -0
- package/dist/spw-stencil-library/{p-70424f67.entry.js → p-24de9d6f.entry.js} +1 -1
- package/dist/spw-stencil-library/{p-fdbda346.entry.js → p-25991392.entry.js} +1 -1
- package/dist/spw-stencil-library/p-36122fda.entry.js +1 -0
- package/dist/spw-stencil-library/{p-c833a6fb.entry.js → p-6a46c406.entry.js} +1 -1
- package/dist/spw-stencil-library/{p-6ccec3e1.entry.js → p-7368447c.entry.js} +1 -1
- package/dist/spw-stencil-library/p-7cb2f275.entry.js +1 -0
- package/dist/spw-stencil-library/p-94aa0e26.entry.js +1 -0
- package/dist/spw-stencil-library/{p-f0c7973a.entry.js → p-bc3ff922.entry.js} +1 -1
- package/dist/spw-stencil-library/p-e0f6f758.entry.js +1 -0
- package/dist/spw-stencil-library/{p-e8294025.entry.js → p-fa4bf37b.entry.js} +1 -1
- package/dist/spw-stencil-library/{p-d8e93516.entry.js → p-fbfb718d.entry.js} +1 -1
- package/dist/spw-stencil-library/spw-stencil-library.esm.js +1 -1
- package/dist/stats.json +618 -113
- package/dist/types/components/spw-card/spw-card-image/spw-card-image.d.ts +8 -1
- package/dist/types/components/spw-card/spw-card.d.ts +1 -1
- package/dist/types/components/spw-custom-select/spw-custom-select.d.ts +5 -0
- package/dist/types/components/spw-file-upload/spw-file-upload.d.ts +3 -1
- package/dist/types/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.d.ts +11 -0
- package/dist/types/components/spw-select/spw-select.d.ts +5 -1
- package/dist/types/components.d.ts +86 -6
- package/dist/types/stories/organisms/spw-card/spw-card.stories.d.ts +1 -0
- package/dist/types/stories/organisms/spw-mosaic/spw-mosaic.stories.d.ts +1 -0
- package/hydrate/index.js +174 -47
- package/hydrate/index.mjs +174 -47
- package/package.json +1 -1
- package/dist/spw-stencil-library/p-38bd2b93.entry.js +0 -1
- package/dist/spw-stencil-library/p-a5e811f0.entry.js +0 -1
- package/dist/spw-stencil-library/p-a92189cd.entry.js +0 -1
- package/dist/spw-stencil-library/p-aad1a377.entry.js +0 -1
- package/dist/spw-stencil-library/p-d7ed084c.entry.js +0 -1
- package/dist/spw-stencil-library/p-fb0c6681.entry.js +0 -1
|
@@ -36,6 +36,7 @@ Le composant Carte est un conteneur cliquable qui affiche un aperçu visuel de c
|
|
|
36
36
|
- **Mini** : Version compacte pour sidebars
|
|
37
37
|
- **People** : Carte profil avec avatar rond
|
|
38
38
|
- **Sidebar** : Version pour barre latérale
|
|
39
|
+
- **Highlighted** : Carte mise en avant avec style visuel distinctif
|
|
39
40
|
|
|
40
41
|
## Structure
|
|
41
42
|
|
|
@@ -312,6 +313,20 @@ PeopleWithAffiliates.args = {
|
|
|
312
313
|
imgAlt: 'Image',
|
|
313
314
|
imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
314
315
|
};
|
|
316
|
+
export const Highlighted = Template.bind({});
|
|
317
|
+
Highlighted.args = {
|
|
318
|
+
variant: 'highlighted',
|
|
319
|
+
fullHeight: true,
|
|
320
|
+
href: 'http://google.com',
|
|
321
|
+
label: 'Label',
|
|
322
|
+
target: '_blank',
|
|
323
|
+
imgAlt: 'Image',
|
|
324
|
+
imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
|
|
325
|
+
contentTag: 'Actualités',
|
|
326
|
+
contentDate: '2024-02-09',
|
|
327
|
+
title: 'Comment soutenir nos agricultrices et agriculteurs ?',
|
|
328
|
+
excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
|
|
329
|
+
};
|
|
315
330
|
Default.parameters = {
|
|
316
331
|
docs: {
|
|
317
332
|
description: {
|
|
@@ -375,3 +390,10 @@ PeopleWithAffiliates.parameters = {
|
|
|
375
390
|
},
|
|
376
391
|
},
|
|
377
392
|
};
|
|
393
|
+
Highlighted.parameters = {
|
|
394
|
+
docs: {
|
|
395
|
+
description: {
|
|
396
|
+
story: `Carte mise en avant avec style visuel distinctif. Utilise un fond coloré et une typographie adaptée pour attirer l'attention sur un contenu prioritaire. Idéale pour mettre en évidence un article principal, une actualité importante ou un événement majeur dans une liste ou grille de cartes.`,
|
|
397
|
+
},
|
|
398
|
+
},
|
|
399
|
+
};
|
|
@@ -82,43 +82,43 @@ function htmlContentBasicGrid() {
|
|
|
82
82
|
function htmlContentWithSpans() {
|
|
83
83
|
return /* HTML */ `
|
|
84
84
|
<spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
|
|
85
|
-
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="
|
|
86
|
-
<spw-tile-title>
|
|
85
|
+
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Titre principal" variant="big" href="#">
|
|
86
|
+
<spw-tile-title>Titre principal - Grande tuile 2x2</spw-tile-title>
|
|
87
87
|
<spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>
|
|
88
88
|
</spw-tile>
|
|
89
89
|
</spw-grid-item>
|
|
90
90
|
|
|
91
91
|
<spw-grid-item>
|
|
92
92
|
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Actualité 2" variant="light" href="#">
|
|
93
|
-
<spw-tile-title>
|
|
93
|
+
<spw-tile-title>Titre secondaire</spw-tile-title>
|
|
94
94
|
<spw-tile-description>Tuile de taille normale</spw-tile-description>
|
|
95
95
|
</spw-tile>
|
|
96
96
|
</spw-grid-item>
|
|
97
97
|
|
|
98
98
|
<spw-grid-item>
|
|
99
99
|
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Actualité 3" variant="light" href="#">
|
|
100
|
-
<spw-tile-title>
|
|
100
|
+
<spw-tile-title>Titre secondaire</spw-tile-title>
|
|
101
101
|
<spw-tile-description>Tuile de taille normale</spw-tile-description>
|
|
102
102
|
</spw-tile>
|
|
103
103
|
</spw-grid-item>
|
|
104
104
|
|
|
105
105
|
<spw-grid-item>
|
|
106
106
|
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Actualité 4" variant="light" href="#">
|
|
107
|
-
<spw-tile-title>
|
|
107
|
+
<spw-tile-title>Titre secondaire</spw-tile-title>
|
|
108
108
|
<spw-tile-description>Tuile de taille normale</spw-tile-description>
|
|
109
109
|
</spw-tile>
|
|
110
110
|
</spw-grid-item>
|
|
111
111
|
|
|
112
112
|
<spw-grid-item>
|
|
113
113
|
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Actualité 5" variant="light" href="#">
|
|
114
|
-
<spw-tile-title>
|
|
114
|
+
<spw-tile-title>Titre secondaire</spw-tile-title>
|
|
115
115
|
<spw-tile-description>Tuile de taille normale</spw-tile-description>
|
|
116
116
|
</spw-tile>
|
|
117
117
|
</spw-grid-item>
|
|
118
118
|
|
|
119
119
|
<spw-grid-item>
|
|
120
120
|
<spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Actualité 6" variant="light" href="#">
|
|
121
|
-
<spw-tile-title>
|
|
121
|
+
<spw-tile-title>Titre secondaire</spw-tile-title>
|
|
122
122
|
<spw-tile-description>Tuile de taille normale</spw-tile-description>
|
|
123
123
|
</spw-tile>
|
|
124
124
|
</spw-grid-item>
|
|
@@ -238,8 +238,8 @@ function htmlContentMixedSpans() {
|
|
|
238
238
|
function htmlContentCardsWithSpan() {
|
|
239
239
|
return /* HTML */ `
|
|
240
240
|
<spw-grid-item col-span-desktop="2" col-span-tablet="2">
|
|
241
|
-
<spw-card
|
|
242
|
-
<spw-card-image ratio="16/
|
|
241
|
+
<spw-card variant="highlighted" href="#">
|
|
242
|
+
<spw-card-image ratio="16/11">
|
|
243
243
|
<img
|
|
244
244
|
alt="Image"
|
|
245
245
|
src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
|
|
@@ -264,7 +264,7 @@ function htmlContentCardsWithSpan() {
|
|
|
264
264
|
/>
|
|
265
265
|
</spw-card-image>
|
|
266
266
|
<spw-card-content tag="Actualités" date="2024-02-09">
|
|
267
|
-
<spw-card-title>
|
|
267
|
+
<spw-card-title>Titre secondaire</spw-card-title>
|
|
268
268
|
<spw-card-excerpt>
|
|
269
269
|
L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
|
|
270
270
|
(APAQ-W) nous propose quelques pistes pour privilégier le local.
|
|
@@ -282,7 +282,7 @@ function htmlContentCardsWithSpan() {
|
|
|
282
282
|
/>
|
|
283
283
|
</spw-card-image>
|
|
284
284
|
<spw-card-content tag="Actualités" date="2024-02-09">
|
|
285
|
-
<spw-card-title>
|
|
285
|
+
<spw-card-title>Titre secondaire</spw-card-title>
|
|
286
286
|
<spw-card-excerpt>
|
|
287
287
|
L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
|
|
288
288
|
(APAQ-W) nous propose quelques pistes pour privilégier le local.
|
|
@@ -300,7 +300,7 @@ function htmlContentCardsWithSpan() {
|
|
|
300
300
|
/>
|
|
301
301
|
</spw-card-image>
|
|
302
302
|
<spw-card-content tag="Actualités" date="2024-02-09">
|
|
303
|
-
<spw-card-title>
|
|
303
|
+
<spw-card-title>Titre secondaire</spw-card-title>
|
|
304
304
|
<spw-card-excerpt>
|
|
305
305
|
L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
|
|
306
306
|
(APAQ-W) nous propose quelques pistes pour privilégier le local.
|
|
@@ -318,7 +318,7 @@ function htmlContentCardsWithSpan() {
|
|
|
318
318
|
/>
|
|
319
319
|
</spw-card-image>
|
|
320
320
|
<spw-card-content tag="Actualités" date="2024-02-09">
|
|
321
|
-
<spw-card-title>
|
|
321
|
+
<spw-card-title>Titre secondaire</spw-card-title>
|
|
322
322
|
<spw-card-excerpt>
|
|
323
323
|
L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
|
|
324
324
|
(APAQ-W) nous propose quelques pistes pour privilégier le local.
|
|
@@ -472,7 +472,7 @@ GrilleCartes.storyName = 'Grille avec cartes (3 colonnes)';
|
|
|
472
472
|
GrilleCartes.parameters = {
|
|
473
473
|
docs: {
|
|
474
474
|
description: {
|
|
475
|
-
story:
|
|
475
|
+
story: "Grille de 3 colonnes avec des cartes. La première carte occupe 2 colonnes sur desktop et tablette pour mettre en avant une actualité principale. Idéal pour les pages d'actualités ou de contenu éditorial.",
|
|
476
476
|
},
|
|
477
477
|
},
|
|
478
478
|
};
|
|
@@ -221,6 +221,101 @@ function htmlContentBigTiles() {
|
|
|
221
221
|
</spw-mosaic-item>
|
|
222
222
|
`;
|
|
223
223
|
}
|
|
224
|
+
function htmlContentFeaturedCard() {
|
|
225
|
+
return /* HTML */ `
|
|
226
|
+
<spw-mosaic-item col-span-desktop="2" col-span-tablet="2">
|
|
227
|
+
<spw-card variant="highlighted" full-height="true" href="http://google.com" target="_blank">
|
|
228
|
+
<spw-card-image ratio-mobile="4/3" ratio-tablet="16/8" ratio-desktop="15/9">
|
|
229
|
+
<img alt="Vennbahn au Couvent Vert" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
230
|
+
</spw-card-image>
|
|
231
|
+
<spw-card-content tag="Actualités" date="2024-02-09">
|
|
232
|
+
<spw-card-title>Vennbahn : une piste cyclable transfrontalière exceptionnelle</spw-card-title>
|
|
233
|
+
<spw-card-excerpt>
|
|
234
|
+
La Vennbahn, ancienne ligne de chemin de fer, est aujourd'hui une véloroute transfrontalière traversant la Belgique et l'Allemagne sur 125 km. Elle offre un parcours
|
|
235
|
+
unique à travers les Hautes Fagnes.
|
|
236
|
+
</spw-card-excerpt>
|
|
237
|
+
</spw-card-content>
|
|
238
|
+
</spw-card>
|
|
239
|
+
</spw-mosaic-item>
|
|
240
|
+
<spw-mosaic-item>
|
|
241
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
242
|
+
<spw-card-image ratio="16/9">
|
|
243
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
244
|
+
</spw-card-image>
|
|
245
|
+
<spw-card-content tag="Mobilité" date="2024-02-08">
|
|
246
|
+
<spw-card-title>Nouveaux aménagements cyclables en Wallonie</spw-card-title>
|
|
247
|
+
<spw-card-excerpt>Le réseau cyclable wallon s'enrichit de nouveaux aménagements pour faciliter la mobilité douce.</spw-card-excerpt>
|
|
248
|
+
</spw-card-content>
|
|
249
|
+
</spw-card>
|
|
250
|
+
</spw-mosaic-item>
|
|
251
|
+
<spw-mosaic-item>
|
|
252
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
253
|
+
<spw-card-image ratio="16/9">
|
|
254
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
255
|
+
</spw-card-image>
|
|
256
|
+
<spw-card-content tag="Patrimoine" date="2024-02-07">
|
|
257
|
+
<spw-card-title>Restauration des châteaux wallons</spw-card-title>
|
|
258
|
+
<spw-card-excerpt>Programme de restauration pour préserver notre patrimoine historique exceptionnel.</spw-card-excerpt>
|
|
259
|
+
</spw-card-content>
|
|
260
|
+
</spw-card>
|
|
261
|
+
</spw-mosaic-item>
|
|
262
|
+
<spw-mosaic-item>
|
|
263
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
264
|
+
<spw-card-image ratio="16/9">
|
|
265
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
266
|
+
</spw-card-image>
|
|
267
|
+
<spw-card-content tag="Environnement" date="2024-02-06">
|
|
268
|
+
<spw-card-title>Protection des espaces naturels</spw-card-title>
|
|
269
|
+
<spw-card-excerpt>Nouvelles mesures pour préserver la biodiversité de nos régions.</spw-card-excerpt>
|
|
270
|
+
</spw-card-content>
|
|
271
|
+
</spw-card>
|
|
272
|
+
</spw-mosaic-item>
|
|
273
|
+
<spw-mosaic-item>
|
|
274
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
275
|
+
<spw-card-image ratio="16/9">
|
|
276
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
277
|
+
</spw-card-image>
|
|
278
|
+
<spw-card-content tag="Énergie" date="2024-02-05">
|
|
279
|
+
<spw-card-title>Transition énergétique en Wallonie</spw-card-title>
|
|
280
|
+
<spw-card-excerpt>Initiatives locales pour un avenir énergétique durable et renouvelable.</spw-card-excerpt>
|
|
281
|
+
</spw-card-content>
|
|
282
|
+
</spw-card>
|
|
283
|
+
</spw-mosaic-item>
|
|
284
|
+
<spw-mosaic-item>
|
|
285
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
286
|
+
<spw-card-image ratio="16/9">
|
|
287
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
288
|
+
</spw-card-image>
|
|
289
|
+
<spw-card-content tag="Tourisme" date="2024-02-04">
|
|
290
|
+
<spw-card-title>Promotion du tourisme local</spw-card-title>
|
|
291
|
+
<spw-card-excerpt>Campagne de valorisation des attraits touristiques wallons.</spw-card-excerpt>
|
|
292
|
+
</spw-card-content>
|
|
293
|
+
</spw-card>
|
|
294
|
+
</spw-mosaic-item>
|
|
295
|
+
<spw-mosaic-item>
|
|
296
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
297
|
+
<spw-card-image ratio="16/9">
|
|
298
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
299
|
+
</spw-card-image>
|
|
300
|
+
<spw-card-content tag="Infrastructure" date="2024-02-03">
|
|
301
|
+
<spw-card-title>Modernisation des routes régionales</spw-card-title>
|
|
302
|
+
<spw-card-excerpt>Travaux d'amélioration pour un réseau routier plus sûr et efficace.</spw-card-excerpt>
|
|
303
|
+
</spw-card-content>
|
|
304
|
+
</spw-card>
|
|
305
|
+
</spw-mosaic-item>
|
|
306
|
+
<spw-mosaic-item>
|
|
307
|
+
<spw-card full-height="true" href="http://google.com" target="_blank">
|
|
308
|
+
<spw-card-image ratio="16/9">
|
|
309
|
+
<img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
|
|
310
|
+
</spw-card-image>
|
|
311
|
+
<spw-card-content tag="Culture" date="2024-02-02">
|
|
312
|
+
<spw-card-title>Festivals culturels wallons 2024</spw-card-title>
|
|
313
|
+
<spw-card-excerpt>Découvrez la programmation culturelle exceptionnelle de cette année.</spw-card-excerpt>
|
|
314
|
+
</spw-card-content>
|
|
315
|
+
</spw-card>
|
|
316
|
+
</spw-mosaic-item>
|
|
317
|
+
`;
|
|
318
|
+
}
|
|
224
319
|
function camelToKebab(str) {
|
|
225
320
|
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
|
|
226
321
|
}
|
|
@@ -288,6 +383,22 @@ const TemplateBigTiles = args => {
|
|
|
288
383
|
element.innerHTML = htmlContentBigTiles();
|
|
289
384
|
return element;
|
|
290
385
|
};
|
|
386
|
+
const TemplateFeaturedCard = args => {
|
|
387
|
+
const element = document.createElement(elementTag);
|
|
388
|
+
const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
|
|
389
|
+
const masterProps = controls.__realProps || Object.keys(controls);
|
|
390
|
+
Object.entries(args).forEach(([key, val]) => {
|
|
391
|
+
if (masterProps.includes(key)) {
|
|
392
|
+
const kebabKey = camelToKebab(key);
|
|
393
|
+
element.setAttribute(kebabKey, val);
|
|
394
|
+
}
|
|
395
|
+
else if (key.startsWith('on')) {
|
|
396
|
+
element.addEventListener(key.substring(2).toLowerCase(), val);
|
|
397
|
+
}
|
|
398
|
+
});
|
|
399
|
+
element.innerHTML = htmlContentFeaturedCard();
|
|
400
|
+
return element;
|
|
401
|
+
};
|
|
291
402
|
export const Cards = TemplateCards.bind({});
|
|
292
403
|
Cards.args = {
|
|
293
404
|
isMasonry: true,
|
|
@@ -316,6 +427,13 @@ BigTiles.args = {
|
|
|
316
427
|
colsTablet: 2,
|
|
317
428
|
colsMobile: 1,
|
|
318
429
|
};
|
|
430
|
+
export const FeaturedCard = TemplateFeaturedCard.bind({});
|
|
431
|
+
FeaturedCard.args = {
|
|
432
|
+
isMasonry: true,
|
|
433
|
+
colsDesktop: 3,
|
|
434
|
+
colsTablet: 2,
|
|
435
|
+
colsMobile: 1,
|
|
436
|
+
};
|
|
319
437
|
Cards.parameters = {
|
|
320
438
|
docs: {
|
|
321
439
|
description: {
|
|
@@ -360,3 +478,16 @@ Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections
|
|
|
360
478
|
},
|
|
361
479
|
},
|
|
362
480
|
};
|
|
481
|
+
FeaturedCard.parameters = {
|
|
482
|
+
docs: {
|
|
483
|
+
description: {
|
|
484
|
+
story: `
|
|
485
|
+
Mosaïque avec carte mise en avant utilisant l'override de colSpan. La première carte (variant="highlighted") occupe 2 colonnes en desktop et tablette grâce aux props col-span-desktop="2" et col-span-tablet="2" sur le spw-mosaic-item. Elle utilise également des ratios d'image responsifs différenciés (4/3 mobile, 16/8 tablette, 15/9 desktop). Les autres cartes occupent 1 colonne avec un ratio 16/9 standard.
|
|
486
|
+
|
|
487
|
+
Cas d'usage : page d'actualités avec article principal mis en avant, galerie avec contenu featured, portail avec mise en évidence d'un événement majeur. Cette approche attire l'attention sur le contenu prioritaire tout en préservant une navigation claire vers les autres contenus.
|
|
488
|
+
|
|
489
|
+
**Note technique** : Le mode masonry fonctionne mieux avec des items de largeur uniforme. L'utilisation de colSpan avec masonry peut créer des espacements inattendus. Pour des mises en page avec largeurs variables, envisager de désactiver le masonry (is-masonry="false").
|
|
490
|
+
`,
|
|
491
|
+
},
|
|
492
|
+
},
|
|
493
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,h as o,t as n}from"./index.js";import{f as i}from"./p-BBi01mKM.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){return o("div",{key:"2eecc5747c237f3fa69f9dc5c76f93312694ebcf",class:"spw-card-content"},this.tag&&o("span",{key:"db714664e984681d9b10613a3e2f7b3bb2c8341d",class:"spw-card-content__tag"},this.tag),this.date&&o("time",{key:"32c9d5eef37ab2cdfb2796c2427c006673ae793b","date-time":this.date,class:"spw-card-content__date"},i(this.date)),o("slot",{key:"d9a556a67b5966aaef300f866817d1f34177a772"}))}get el(){return this}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host(.--video){min-width:100%;width:100
|
|
1
|
+
import{p as t,H as e,h as o,t as n}from"./index.js";import{f as i}from"./p-BBi01mKM.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){return o("div",{key:"2eecc5747c237f3fa69f9dc5c76f93312694ebcf",class:"spw-card-content"},this.tag&&o("span",{key:"db714664e984681d9b10613a3e2f7b3bb2c8341d",class:"spw-card-content__tag"},this.tag),this.date&&o("time",{key:"32c9d5eef37ab2cdfb2796c2427c006673ae793b","date-time":this.date,class:"spw-card-content__date"},i(this.date)),o("slot",{key:"d9a556a67b5966aaef300f866817d1f34177a772"}))}get el(){return this}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host(.--video){min-width:100%;width:100%;margin-top:auto}.spw-card-content{position:relative;display:flex;flex-direction:column;padding:12px 24px 24px 24px;z-index:5}:host(.--vertical) .spw-card-content{padding:24px}:host(.--vertical) .spw-card-content ::slotted(spw-card-subtags){margin-top:12px}:host(.--event) .spw-card-content{padding:24px}:host(.--event) .spw-card-content ::slotted(spw-card-subtags){margin-top:12px}:host(.--no-image.--event) .spw-card-content{padding-left:64px;padding-top:12px}:host(.--sidebar) .spw-card-content{padding:0}:host(.--people) .spw-card-content{padding:24px;flex-direction:row;gap:24px}:host(.--highlighted) .spw-card-content{position:absolute;bottom:0;padding:24px;padding-top:64px;overflow:hidden;border-radius:0 0 5px 5px}:host(.--highlighted) .spw-card-content:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;isolation:isolate;background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 50%, rgba(0, 0, 0, 0.87) 100%)}@media (min-width: 1024px){:host(.--highlighted) .spw-card-content{padding:32px;padding-top:64px}}:host(.--vertical) .spw-card-content,:host(.--sidebar) .spw-card-content,:host(.--event) .spw-card-content{justify-content:center;height:100%}:host(.--video) .spw-card-content{justify-content:flex-end;padding-right:80px;border-radius:0 0 5px 5px;background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 50%, rgba(0, 0, 0, 0.87) 100%)}:host(.--video) .spw-card-content:after{position:absolute;bottom:24px;right:24px;font-family:var(--spw-ds-font-icons-solid);font-weight:900;content:"\\f144";font-size:36px;color:white}.spw-card-content__tag{position:absolute;top:-25px;left:25px;padding:6px 10px;border-radius:4px 4px 0px 0px;background:var(--spw-ds-white);color:var(--spw-ds-primary);font-size:15px;font-weight:700}:host(.--no-image) .spw-card-content__tag,:host(.--event) .spw-card-content__tag,:host(.--video) .spw-card-content__tag,:host(.--vertical) .spw-card-content__tag{position:relative;top:0;left:0;padding:0;margin-bottom:8px}:host(.--video) .spw-card-content__tag,:host(.--highlighted) .spw-card-content__tag{width:auto;align-self:flex-start;display:inline-block;padding:8px 12px;border-radius:9999px;line-height:1;color:var(--spw-color-themes-grey-grey-900);box-shadow:var(--spw-effect-elevation-3);font-size:14px;background:var(--spw-ds-white)}:host(.--highlighted) .spw-card-content__tag{position:static;margin-bottom:12px}.spw-card-content__date{margin-bottom:7px;font-size:15px;font-weight:300;color:var(--spw-color-themes-grey-grey-600)}:host(.--highlighted) .spw-card-content__date{display:none}.spw-card-content ::slotted(spw-card){--spw-card-background:var(--spw-color-themes-grey-grey-50);--spw-card-box-shadow:none;--spw-card-border:1px solid var(--spw-color-themes-grey-grey-300)}'}},[257,"spw-card-content",{tag:[1],date:[1],hasImage:[32]}]),a=s,r=function(){"undefined"!=typeof customElements&&["spw-card-content"].forEach((t=>{"spw-card-content"===t&&(customElements.get(n(t))||customElements.define(n(t),s))}))};export{a as SpwCardContent,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,a as n,t as o}from"./index.js";const
|
|
1
|
+
import{p as e,H as t,h as i,a as n,t as o}from"./index.js";const p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.lineClamp=3}get elementClass(){const e="none"!==this.lineClamp;return{"spw-card-excerpt":!0,"spw-card-excerpt--has-clamp":e,["spw-card-excerpt--clamp-"+this.lineClamp]:e}}render(){return i(n,{key:"1c07254d2fe65659233829111c389d9d169db5f6"},i("div",{key:"1f47cd05a098fa762b037247d350e22bcb1f62e1",class:this.elementClass},i("slot",{key:"0cb6906f90963c364276123555d0cf628f874747"})))}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host(.--people){flex:1}:host(.--people) ::slotted(spw-link){--spw-link-color:#000;--spw-link-hover-color:#000;--spw-link-active-color:#000;--spw-link-font-weight:400}.spw-card-excerpt{color:var(--spw-color-themes-grey-grey-600);font-family:"Nunito Sans";font-size:16px;line-height:1.3;margin-top:12px}.spw-card-excerpt--has-clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis}:host(.--people) .spw-card-excerpt{margin-top:0;font-size:16px;color:var(--spw-color-themes-grey-grey-900)}:host(.--highlighted) .spw-card-excerpt{color:var(--spw-color-themes-grey-grey-400)}:host(.--sidebar) .spw-card-excerpt{margin-top:8px}.spw-card-excerpt--clamp-1{-webkit-line-clamp:1;line-clamp:1}.spw-card-excerpt--clamp-2{-webkit-line-clamp:2;line-clamp:2}.spw-card-excerpt--clamp-3{-webkit-line-clamp:3;line-clamp:3}.spw-card-excerpt--clamp-4{-webkit-line-clamp:4;line-clamp:4}.spw-card-excerpt--clamp-5{-webkit-line-clamp:5;line-clamp:5}.spw-card-excerpt--clamp-6{-webkit-line-clamp:6;line-clamp:6}.spw-card-excerpt--clamp-7{-webkit-line-clamp:7;line-clamp:7}.spw-card-excerpt--clamp-8{-webkit-line-clamp:8;line-clamp:8}.spw-card-excerpt--clamp-9{-webkit-line-clamp:9;line-clamp:9}.spw-card-excerpt--clamp-10{-webkit-line-clamp:10;line-clamp:10}'}},[257,"spw-card-excerpt",{lineClamp:[8,"line-clamp"]}]),a=p,s=function(){"undefined"!=typeof customElements&&["spw-card-excerpt"].forEach((e=>{"spw-card-excerpt"===e&&(customElements.get(o(e))||customElements.define(o(e),p))}))};export{a as SpwCardExcerpt,s as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,t as o}from"./index.js";import{d as
|
|
1
|
+
import{p as e,H as t,h as i,t as o}from"./index.js";import{d as a}from"./p-Dzw3OiMu.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}componentDidLoad(){const e=this.el.closest("spw-card");e&&(e.addEventListener("mouseenter",(()=>this.onCardHover(!0))),e.addEventListener("mouseleave",(()=>this.onCardHover(!1))))}onCardHover(e){const t=this.el.shadowRoot.querySelector(".spw-card-image");t&&(e?t.classList.add("--is-hovered"):t.classList.remove("--is-hovered"))}get hasRatio(){return!!(this.ratio||this.ratioMobile||this.ratioTablet||this.ratioDesktop)}get elementClass(){return{"spw-card-image":!0,"spw-card-image--ratio":this.hasRatio}}render(){const e={};return this.ratio&&(e["--spw-card-image-ratio"]=this.ratio,e["--spw-card-image-ratio-mobile"]=this.ratio,e["--spw-card-image-ratio-tablet"]=this.ratio,e["--spw-card-image-ratio-desktop"]=this.ratio),this.ratioMobile&&(e["--spw-card-image-ratio-mobile"]=this.ratioMobile),this.ratioTablet&&(e["--spw-card-image-ratio-tablet"]=this.ratioTablet),this.ratioDesktop&&(e["--spw-card-image-ratio-desktop"]=this.ratioDesktop),i("div",{key:"9eccd1cf76ae67c9d55fc09b06729199cef04d30",class:this.elementClass,style:e},this.label&&i("span",{key:"03a6afd8b38bc2a4069adc1be87eebc081ebc526",class:"spw-card-image__label"},this.label),i("slot",{key:"65cbfd02d2497cce0173fd38ebbb0da82b0a4df6"}),i("div",{key:"c96e34df588007c2ae4782118f4de76b4973e9d2",class:"spw-card-image__icon"},i("spw-icon",{key:"3b6c4a3f20e248c2f74f1549f4341bd99376f368",icon:"fa-plus"})))}get el(){return this}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host(.--video):after,:host(.--highlighted):after{content:"";background:black;opacity:0.4;transition:all linear 0.2s;border-radius:5px;position:absolute;top:0;left:0;width:100%;height:100%}:host{width:100%;line-height:1;--spw-card-image-display:block}:host(.--people){width:112px;max-width:112px}.spw-card-image{position:relative;overflow:hidden;border-radius:5px 5px 0 0;display:var(--spw-card-image-display)}:host(.--vertical) .spw-card-image,:host(.--event) .spw-card-image{border-radius:5px 0 0 5px}:host(.--highlighted) .spw-card-image,:host(.--people) .spw-card-image{border-radius:5px}:host(.--video) .spw-card-image,:host(.--sidebar) .spw-card-image{border-radius:5px}.spw-card-image ::slotted(img),.spw-card-image img{width:100%;height:auto;transition:all 0.3s ease;transform-origin:center center}.spw-card-image--ratio{aspect-ratio:var(--spw-card-image-ratio-mobile, var(--spw-card-image-ratio))}@media (min-width: 768px){.spw-card-image--ratio{aspect-ratio:var(--spw-card-image-ratio-tablet, var(--spw-card-image-ratio))}}@media (min-width: 1024px){.spw-card-image--ratio{aspect-ratio:var(--spw-card-image-ratio-desktop, var(--spw-card-image-ratio))}}.spw-card-image--ratio ::slotted(img),.spw-card-image--ratio img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.spw-card-image__icon:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:black;opacity:0.4}.spw-card-image__icon{position:absolute;z-index:2;display:flex;visibility:hidden;width:100%;height:100%;font-size:30px;font-weight:300;opacity:0;top:0;left:0;color:white;justify-content:center;align-items:center;transition:all 0.3s ease}.spw-card-image__icon spw-icon{transform:scale(1.5);transition:all 0.3s ease}.spw-card-image__label{position:absolute;top:10px;right:10px;display:inline-flex;padding:8px 12px;align-items:center;border-radius:9999px;color:var(--spw-color-themes-grey-grey-900);box-shadow:var(--spw-effect-elevation-3);font-size:14px;background:var(--spw-ds-white);z-index:3;line-height:1}:host(.--hovered:not(.--video)) .spw-card-image .spw-card-image__icon,:host(.--hovered:not(.--video)) .spw-card-image.--is-hovered .spw-card-image__icon{visibility:visible;opacity:1}:host(.--hovered:not(.--video)) .spw-card-image .spw-card-image__icon spw-icon,:host(.--hovered:not(.--video)) .spw-card-image.--is-hovered .spw-card-image__icon spw-icon{transform:scale(1)}:host(.--hovered:not(.--video)) .spw-card-image ::slotted(img),:host(.--hovered:not(.--video)) .spw-card-image.--is-hovered ::slotted(img){transform:scale(1.1)}:host(.--vertical),:host(.--event){width:170px;min-width:170px;position:relative;overflow:hidden}:host(.--vertical) .spw-card-image,:host(.--event) .spw-card-image{height:100%}:host(.--vertical) .spw-card-image ::slotted(img),:host(.--event) .spw-card-image ::slotted(img){position:absolute;top:0;left:0;width:100%;height:100% !important;object-fit:cover;object-position:center}:host(.--sidebar){width:75px;min-width:75px;height:75px;min-height:75px;position:relative;overflow:hidden}:host(.--sidebar) .spw-card-image{height:100%}:host(.--sidebar) .spw-card-image ::slotted(img){position:absolute;top:0;left:0;width:100%;height:100% !important;object-fit:cover;object-position:center}:host(.--highlighted){position:relative}:host(.--highlighted):after{opacity:0}:host(.--video){width:100%;height:100%;position:absolute;overflow:hidden;top:0;left:0}:host(.--video):after{opacity:0}:host(.--video) .spw-card-image{height:100%}:host(.--video) .spw-card-image ::slotted(img){position:absolute;top:0;left:0;width:100%;height:100% !important;object-fit:cover;object-position:center}:host(.--video.--hovered):after{opacity:0.2}'}},[257,"spw-card-image",{label:[1],ratio:[1],ratioMobile:[1,"ratio-mobile"],ratioTablet:[1,"ratio-tablet"],ratioDesktop:[1,"ratio-desktop"]}]),r=s,n=function(){"undefined"!=typeof customElements&&["spw-card-image","spw-icon"].forEach((e=>{switch(e){case"spw-card-image":customElements.get(o(e))||customElements.define(o(e),s);break;case"spw-icon":customElements.get(o(e))||a()}}))};export{r as SpwCardImage,n as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,a as n,t as o}from"./index.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}handleClick(){this.link&&(window.location.href=this.link)}get elementClass(){return{"spw-card-subtag-item":!0,"spw-card-subtag-item--has-link":!!this.link}}render(){return i(n,{key:"36ba7eba49c04f670603bb3daacef93e9b2d93ec"},i("span",{key:"eb4f408366fedf55a75cd46cea6f7ee43689fae6",class:this.elementClass,onClick:()=>this.handleClick()},i("slot",{key:"54f81a9c1e941414e46c274ee52c4c6e90b79975"})))}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:inline}:host(.--link) .spw-card-subtag-item{font-size:15px;color:var(--spw-ds-primary);font-weight:700}:host(.--link) .spw-card-subtag-item--has-link{text-decoration:underline}:host(.--link) .spw-card-subtag-item--has-link:hover{text-decoration:none}:host(.--tag) .spw-card-subtag-item{display:inline-block;padding:8px 12px;border-radius:9999px;background:var(--spw-color-themes-grey-grey-200);transition:all 0.2s linear;line-height:1;font-size:14px;color:var(--spw-color-themes-grey-grey-900)}:host(.--tag) .spw-card-subtag-item:hover{background:var(--spw-color-themes-grey-grey-300)}'}},[257,"spw-card-subtag-item",{link:[1]}]),a=s,r=function(){"undefined"!=typeof customElements&&["spw-card-subtag-item"].forEach((e=>{"spw-card-subtag-item"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))};export{a as SpwCardSubtagItem,r as defineCustomElement}
|
|
1
|
+
import{p as e,H as t,h as i,a as n,t as o}from"./index.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}handleClick(){this.link&&(window.location.href=this.link)}get elementClass(){return{"spw-card-subtag-item":!0,"spw-card-subtag-item--has-link":!!this.link}}render(){return i(n,{key:"36ba7eba49c04f670603bb3daacef93e9b2d93ec"},i("span",{key:"eb4f408366fedf55a75cd46cea6f7ee43689fae6",class:this.elementClass,onClick:()=>this.handleClick()},i("slot",{key:"54f81a9c1e941414e46c274ee52c4c6e90b79975"})))}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:inline}:host(.--link) .spw-card-subtag-item{font-size:15px;color:var(--spw-ds-primary);font-weight:700}:host(.--link) .spw-card-subtag-item--has-link{text-decoration:underline}:host(.--link) .spw-card-subtag-item--has-link:hover{text-decoration:none}:host(.--link.--highlighted) .spw-card-subtag-item{color:white}:host(.--tag) .spw-card-subtag-item{display:inline-block;padding:8px 12px;border-radius:9999px;background:var(--spw-color-themes-grey-grey-200);transition:all 0.2s linear;line-height:1;font-size:14px;color:var(--spw-color-themes-grey-grey-900)}:host(.--tag) .spw-card-subtag-item:hover{background:var(--spw-color-themes-grey-grey-300)}'}},[257,"spw-card-subtag-item",{link:[1]}]),a=s,r=function(){"undefined"!=typeof customElements&&["spw-card-subtag-item"].forEach((e=>{"spw-card-subtag-item"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))};export{a as SpwCardSubtagItem,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,h as
|
|
1
|
+
import{p as t,H as e,h as i,a as s,t as n}from"./index.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.variant="link"}componentWillLoad(){this.applyVariantToChildren()}applyVariantToChildren(){requestAnimationFrame((()=>{const t="--"+this.variant;this.el.querySelectorAll("spw-card-subtag-item").forEach((e=>{e.classList.add(t),this.el.classList.contains("--highlighted")&&e.classList.add("--highlighted")}))}))}get elementClass(){return{"spw-card-subtags":!0,["spw-card-subtags--"+this.variant]:!0}}render(){return i(s,{key:"f77ffa5b4f5fe8a47ede2bc8aad7774805e6b92b"},i("div",{key:"b2271dfdb69baf4902ac7725e7276bfa4c48341d",class:this.elementClass},i("slot",{key:"e372a3a027c94ec0e62cf59e144d9128ef1eedfb"})))}get el(){return this}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:contents}.spw-card-subtags{margin-bottom:8px;color:var(--spw-ds-primary)}.--highlighted .spw-card-subtags{color:white}.spw-card-subtags spw-card-subtag-item:after,.spw-card-subtags .spw-card-subtag-item:after{content:",";margin-right:2px;display:inline}.spw-card-subtags spw-card-subtag-item:last-child:after,.spw-card-subtags .spw-card-subtag-item:last-child:after{display:none}.spw-card-subtags--tag spw-card-subtag-item:after,.spw-card-subtags--tag .spw-card-subtag-item:after{content:"";margin-right:4px}'}},[260,"spw-card-subtags",{variant:[1]}]),o=a,r=function(){"undefined"!=typeof customElements&&["spw-card-subtags"].forEach((t=>{"spw-card-subtags"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))};export{o as SpwCardSubtags,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as t,H as e,h as i,a as o,t as n}from"./index.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.borderColor=""}render(){return i(o,{key:"d9d66c8671a7d756e79b9a079b4586222cea117a",style:{"--spw-card-title-border-color":this.borderColor}},i("h3",{key:"70c8e8b768ed87e75eaf2217d68e2cbd51408429",class:"spw-card-title"},i("span",{key:"a3945892c82160dda444d395b1e7a05c71b2d0a7",class:"spw-card-title__text"},i("slot",{key:"cf108c616c3dcd817c6f8b72c5d01ff87a30f0f0"}))))}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-card-title{line-height:1.3;font-weight:700;font-size:20px;transition:all 0.3s ease;color:var(--spw-color-themes-grey-grey-900)}:host(.--hovered:not(.--video):not(.--people):not(.--highlighted)) .spw-card-title{color:var(--spw-ds-primary)}:host(.--video) .spw-card-title,:host(.--highlighted) .spw-card-title{color:white}:host(.--highlighted) .spw-card-title{font-size:24px}@media (min-width: 768px){:host(.--highlighted) .spw-card-title{font-size:32px}}:host(.--sidebar) .spw-card-title{font-size:18px;line-height:1.2}:host(.--people) .spw-card-title{padding:0 24px;border-bottom:1px solid var(--spw-color-themes-grey-grey-300)}:host(.--people) .spw-card-title__text{display:inline-block;padding:18px 0;border-bottom:4px solid var(--spw-card-title-border-color, var(--spw-ds-primary))}'}},[257,"spw-card-title",{borderColor:[1,"border-color"]}]),r=s,a=function(){"undefined"!=typeof customElements&&["spw-card-title"].forEach((t=>{"spw-card-title"===t&&(customElements.get(n(t))||customElements.define(n(t),s))}))};export{r as SpwCardTitle,a as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,a as s,t as a}from"./index.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hasImage=!1,this.childHoveredCount=0,this.variant="news",this.elementType="a",this.target="_self",this.fullHeight=!1,this.disabled=!1,this.onNestedCardEnter=()=>{this.childHoveredCount++,this.setImageHovered(!1)},this.onNestedCardLeave=()=>{this.childHoveredCount=Math.max(0,this.childHoveredCount-1),0===this.childHoveredCount&&this.isPointerInside(this.el)&&this.setImageHovered(!0)}}componentWillLoad(){this.checkForImage(),this.applyVariantToChildren(),this.attachNestedCardListeners()}slotChanged(){this.checkForImage(),this.applyVariantToChildren(),this.attachNestedCardListeners()}onMouseEnter(){0===this.childHoveredCount&&this.setImageHovered(!0)}onMouseLeave(){this.setImageHovered(!1)}attachNestedCardListeners(){requestAnimationFrame((()=>{this.el.querySelectorAll("spw-card").forEach((e=>{e.addEventListener("mouseenter",this.onNestedCardEnter.bind(this),!0),e.addEventListener("mouseleave",this.onNestedCardLeave.bind(this),!0)}))}))}isPointerInside(e){const t=e.getBoundingClientRect(),{left:i,top:s,right:a,bottom:n}=t,{clientX:o,clientY:r}=window;return o>=i&&o<=a&&r>=s&&r<=n}checkForImage(){requestAnimationFrame((()=>{const e=this.el.querySelector("spw-card-image"),t=this.el.querySelector("spw-card-content");this.hasImage=!!e,this.hasImage||null==t||t.classList.add("--no-image")}))}formatDate(e){if(!e)return[];const t=e.split("/");return t.flatMap(((e,s)=>s<t.length-1?[i("span",null,e),i("span",null,"/")]:[i("span",null,e)]))}applyVariantToChildren(){requestAnimationFrame((()=>{const e="--"+this.variant,t=this.el.querySelector("spw-card-content"),i=this.el.querySelector("spw-card-image"),s=this.el.querySelector("spw-card-title"),a=this.el.querySelector("spw-card-excerpt"),n=this.el.querySelector("spw-card-subtags");null==t||t.classList.add(e),null==i||i.classList.add(e),null==s||s.classList.add(e),null==a||a.classList.add(e),null==n||n.classList.add(e)}))}setImageHovered(e){const t=this.el.querySelector("spw-card-image"),i=this.el.querySelector("spw-card-title");t&&this.href&&t.classList.toggle("--hovered",e),i&&this.href&&i.classList.toggle("--hovered",e)}get elementClass(){return{"spw-card":!0,"spw-card--hoverable":!!this.href,"spw-card--no-image":!this.hasImage,["spw-card--"+this.variant]:!0}}render(){const{href:e,rel:t,target:a,dateStart:n,dateEnd:o,variant:r}=this,d=void 0===this.href?"div":"a",l="div"===d?{}:{href:e,rel:t,target:a},p={"aria-label":null==this?void 0:this.accAriaLabel,"aria-disabled":this.disabled?"true":null};return i(s,{key:"
|
|
1
|
+
import{p as e,H as t,h as i,a as s,t as a}from"./index.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hasImage=!1,this.childHoveredCount=0,this.variant="news",this.elementType="a",this.target="_self",this.fullHeight=!1,this.disabled=!1,this.onNestedCardEnter=()=>{this.childHoveredCount++,this.setImageHovered(!1)},this.onNestedCardLeave=()=>{this.childHoveredCount=Math.max(0,this.childHoveredCount-1),0===this.childHoveredCount&&this.isPointerInside(this.el)&&this.setImageHovered(!0)}}componentWillLoad(){this.checkForImage(),this.applyVariantToChildren(),this.attachNestedCardListeners()}slotChanged(){this.checkForImage(),this.applyVariantToChildren(),this.attachNestedCardListeners()}onMouseEnter(){0===this.childHoveredCount&&this.setImageHovered(!0)}onMouseLeave(){this.setImageHovered(!1)}attachNestedCardListeners(){requestAnimationFrame((()=>{this.el.querySelectorAll("spw-card").forEach((e=>{e.addEventListener("mouseenter",this.onNestedCardEnter.bind(this),!0),e.addEventListener("mouseleave",this.onNestedCardLeave.bind(this),!0)}))}))}isPointerInside(e){const t=e.getBoundingClientRect(),{left:i,top:s,right:a,bottom:n}=t,{clientX:o,clientY:r}=window;return o>=i&&o<=a&&r>=s&&r<=n}checkForImage(){requestAnimationFrame((()=>{const e=this.el.querySelector("spw-card-image"),t=this.el.querySelector("spw-card-content");this.hasImage=!!e,this.hasImage||null==t||t.classList.add("--no-image")}))}formatDate(e){if(!e)return[];const t=e.split("/");return t.flatMap(((e,s)=>s<t.length-1?[i("span",null,e),i("span",null,"/")]:[i("span",null,e)]))}applyVariantToChildren(){requestAnimationFrame((()=>{const e="--"+this.variant,t=this.el.querySelector("spw-card-content"),i=this.el.querySelector("spw-card-image"),s=this.el.querySelector("spw-card-title"),a=this.el.querySelector("spw-card-excerpt"),n=this.el.querySelector("spw-card-subtags");null==t||t.classList.add(e),null==i||i.classList.add(e),null==s||s.classList.add(e),null==a||a.classList.add(e),null==n||n.classList.add(e)}))}setImageHovered(e){const t=this.el.querySelector("spw-card-image"),i=this.el.querySelector("spw-card-title");t&&this.href&&t.classList.toggle("--hovered",e),i&&this.href&&i.classList.toggle("--hovered",e)}get elementClass(){return{"spw-card":!0,"spw-card--hoverable":!!this.href,"spw-card--no-image":!this.hasImage,["spw-card--"+this.variant]:!0}}render(){const{href:e,rel:t,target:a,dateStart:n,dateEnd:o,variant:r}=this,d=void 0===this.href?"div":"a",l="div"===d?{}:{href:e,rel:t,target:a},p={"aria-label":null==this?void 0:this.accAriaLabel,"aria-disabled":this.disabled?"true":null};return i(s,{key:"dd696a972dce8b2dd24bf4a32a91c48d647c8847",class:{"--is-full-height":this.fullHeight}},i("article",{key:"3bedcc715c5ce3999bdd683aec295cf4a5f78afd",class:this.elementClass},"event"===r&&i(d,Object.assign({key:"a562384022c312afe368de3b28d1746a3b0f5398"},l,{class:"spw-card__dates"}),n&&i("div",{key:"1f91f1d6a773c48ff00fb71b0867eafa7b25a53e",class:"spw-card__date-item"},this.formatDate(n)),o&&i("div",{key:"bdce357cf092475ee1792950a686d02601d634bf",class:"spw-card__date-item"},this.formatDate(o))),i(d,Object.assign({key:"8bae3ef221cf1edc713e89d23db08dda41bf22d8"},l,p,{class:"spw-card__link"}),i("slot",{key:"89d675393747eadf75c55396cba1513566c9eace"}))))}get el(){return this}static get style(){return'html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:"Nunito Sans"}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:block;position:relative;width:100%;--spw-card-background:var(--spw-ds-white);--spw-card-box-shadow:var(--spw-effect-elevation-6);--spw-card-border:none}:host[data-modal-trigger]{cursor:pointer}:host(.--is-full-height){height:100%}.spw-card{display:block;border-radius:5px;background:var(--spw-card-background);box-shadow:var(--spw-card-box-shadow);border:var(--spw-card-border);transition:all 0.3s ease-in-out}:host(.--is-full-height) .spw-card{height:100%}.spw-card--hoverable:hover{box-shadow:var(--spw-effect-elevation-4);transform:translateY(-5px)}.spw-card__dates{cursor:pointer;position:absolute;top:50%;left:0;transform:translate(-50%, -50%);flex-direction:column;line-height:1.1;width:80px;height:80px;text-align:center;color:white;display:inline-flex;align-items:center;justify-content:center;background:var(--spw-ds-primary);border-radius:50%;font-size:18px;text-decoration:none;z-index:2}.spw-card__date-item span:first-of-type{font-weight:bold}.spw-card__link{display:block;height:100%;width:100%;color:inherit;text-decoration:none}.spw-card--no-image .spw-card__link{padding-top:15px}.spw-card__link:focus-visible{outline:3px solid white;outline-offset:-1px;box-shadow:0 0 0 5px black;border-radius:5px}.spw-card--vertical .spw-card__link,.spw-card--video .spw-card__link{display:flex;min-height:240px}.spw-card--event .spw-card__link{display:flex}.spw-card--sidebar{box-shadow:none}.spw-card--sidebar:hover{box-shadow:none}.spw-card--sidebar .spw-card__link{display:flex;gap:16px}.spw-card--event{position:relative;width:calc(100% - 40px);left:40px}'}},[257,"spw-card",{variant:[1],elementType:[1,"element-type"],href:[1],target:[1],rel:[1],dateStart:[1,"date-start"],dateEnd:[1,"date-end"],fullHeight:[4,"full-height"],disabled:[4],accAriaLabel:[1,"acc-aria-label"],hasImage:[32]},[[0,"slotchange","slotChanged"],[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]]),o=n,r=function(){"undefined"!=typeof customElements&&["spw-card"].forEach((e=>{"spw-card"===e&&(customElements.get(a(e))||customElements.define(a(e),n))}))};export{o as SpwCard,r as defineCustomElement}
|