npm - @spw-ds/spw-stencil-library - Versions diffs - 1.2.1 → 1.2.3 - Mend

@spw-ds/spw-stencil-library 1.2.1 → 1.2.3

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 (590) hide show

package/dist/esm/spw-hero.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-BYM_CUUH.js';
-const spwHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-hero-content-max-width:578px;--spw-hero-ratio-picture:initial;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-hero{overflow:hidden;position:relative}.spw-hero:not(.spw-hero--maxi){border-radius:12px}.spw-hero--surface-dark{color:#fff}.spw-hero--surface-light{color:var(--spw-color-themes-grey-grey-900)}.spw-hero--grey{background:var(--spw-color-themes-grey-grey-100)}.spw-hero--white{background:#fff}.spw-hero--grey,.spw-hero--white{display:flex;flex-direction:column;gap:24px;padding:24px}@media (min-width:1024px){.spw-hero--grey,.spw-hero--white{align-items:center;flex-direction:row;padding:64px}}.spw-hero--has-picture-full{gap:0;padding:0}.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:column}@media (min-width:1024px){.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:row-reverse}}.spw-hero__container{display:flex;margin:0 auto;position:relative;z-index:3}.spw-hero--photo .spw-hero__container{padding:48px 24px}@media (min-width:1024px){.spw-hero--photo .spw-hero__container{padding:64px}}.spw-hero--has-picture-full .spw-hero__container{padding:24px}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__container{padding:80px 60px}.spw-hero--has-picture-full.spw-hero--left .spw-hero__container{padding-left:calc(48% + 60px)}.spw-hero--has-picture-full.spw-hero--right .spw-hero__container{padding-right:calc(48% + 60px)}}.spw-hero--maxi .spw-hero__container{padding:80px 24px}@media (min-width:1024px){.spw-hero--maxi .spw-hero__container{padding:148px 24px}}.spw-hero--left .spw-hero__container{justify-content:flex-start}.spw-hero--center .spw-hero__container{justify-content:center}.spw-hero--right .spw-hero__container{justify-content:flex-end}.spw-hero__image,.spw-hero__overlay{height:100%;left:0;position:absolute;top:0;width:100%}.spw-hero__overlay{z-index:2}.spw-hero--surface-dark .spw-hero__overlay{background:var(--spw-color-themes-grey-grey-900)}.spw-hero--surface-light .spw-hero__overlay{background:#fff}.spw-hero__image{-o-object-fit:cover;object-fit:cover;z-index:1}.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{max-width:435px}}.spw-hero--has-picture-full .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__image{max-width:48%;position:absolute}}.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-top-left-radius:0;left:auto;right:0}}.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-right-radius:0;border-top-right-radius:0}}.spw-hero__content{max-width:var(--spw-hero-content-max-width);width:100%}.spw-hero--maxi .spw-hero__content{--spw-hero-content-max-width:784px;margin:0 auto;text-align:center}.spw-hero--photo .spw-hero__content{background-color:var(--spw-ds-white);border-radius:8px;box-shadow:var(--spw-effect-elevation-8);padding:32px}";
+const spwHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-hero-content-max-width:578px;--spw-hero-ratio-picture:initial;--spw-hero-shadow:none;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-hero{box-shadow:var(--spw-hero-shadow);overflow:hidden;position:relative}.spw-hero:not(.spw-hero--maxi){border-radius:12px}.spw-hero--surface-dark{color:#fff}.spw-hero--surface-light{color:var(--spw-color-themes-grey-grey-900)}.spw-hero--grey{background:var(--spw-color-themes-grey-grey-100)}.spw-hero--white{background:#fff}.spw-hero--grey,.spw-hero--white{display:flex;flex-direction:column;gap:24px;padding:24px}@media (min-width:1024px){.spw-hero--grey,.spw-hero--white{align-items:center;flex-direction:row;padding:64px}}.spw-hero--has-picture-full{gap:0;padding:0}.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:column}@media (min-width:1024px){.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:row-reverse}}.spw-hero__container{display:flex;margin:0 auto;position:relative;z-index:3}.spw-hero--photo .spw-hero__container{padding:48px 24px}@media (min-width:1024px){.spw-hero--photo .spw-hero__container{padding:64px}}.spw-hero--has-picture-full .spw-hero__container{padding:24px}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__container{padding:80px 60px}.spw-hero--has-picture-full.spw-hero--left .spw-hero__container{padding-left:calc(48% + 60px)}.spw-hero--has-picture-full.spw-hero--right .spw-hero__container{padding-right:calc(48% + 60px)}}.spw-hero--maxi .spw-hero__container{padding:80px 24px}@media (min-width:1024px){.spw-hero--maxi .spw-hero__container{padding:148px 24px}}.spw-hero--left .spw-hero__container{justify-content:flex-start}.spw-hero--center .spw-hero__container{justify-content:center}.spw-hero--right .spw-hero__container{justify-content:flex-end}.spw-hero__image,.spw-hero__overlay{height:100%;left:0;position:absolute;top:0;width:100%}.spw-hero__overlay{pointer-events:none;z-index:2}.spw-hero--surface-dark .spw-hero__overlay{background:var(--spw-color-themes-grey-grey-900)}.spw-hero--surface-light .spw-hero__overlay{background:#fff}.spw-hero__image-play{align-items:center;background:var(--spw-ds-primary);border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:24px;height:64px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;width:64px;z-index:2}.spw-hero__image-play:hover{transform:translate(-50%,-50%) scale(1.1)}.spw-hero__image{overflow:hidden;z-index:1}.spw-hero__image img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.spw-hero--has-video .spw-hero__image{z-index:4}.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{max-width:435px}}.spw-hero--has-picture-full .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__image{max-width:48%;position:absolute}}.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-top-left-radius:0;left:auto;right:0}}.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-right-radius:0;border-top-right-radius:0}}.spw-hero__content{width:100%}@media (min-width:1024px){.spw-hero__content{max-width:var(--spw-hero-content-max-width)}}.spw-hero--maxi .spw-hero__content{--spw-hero-content-max-width:784px;margin:0 auto;text-align:center}.spw-hero--photo .spw-hero__content{background-color:var(--spw-ds-white);border-radius:8px;box-shadow:var(--spw-effect-elevation-8);padding:32px}";
 const SpwHero = class {
     constructor(hostRef) {
@@ -11,18 +11,32 @@ const SpwHero = class {
         this.surface = 'light';
         /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */
         this.hasPictureFull = false;
+        /** Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) */
+        this.hasVideo = false;
         /** Permet de choisir le variant du hero */
         this.variant = 'grey';
         /** Permet de choisir l'alignement du contenu */
         this.alignment = 'left';
         /** Permet de spécifier l'opacité de l'overlay (0 à 100) */
         this.overlayOpacity = 0;
+        this.triggerModal = () => {
+            const modal = document.getElementById(this.modalVideoId);
+            if (modal && modal.openModal) {
+                modal.openModal();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.triggerModal();
+            }
+        };
     }
     get elementClass() {
         return {
             'spw-hero': true,
             [`spw-hero--surface-${this.surface}`]: true,
             [`spw-hero--has-picture-full`]: this.hasPictureFull,
+            [`spw-hero--has-video`]: this.hasVideo,
             [`spw-hero--${this.variant}`]: true,
             [`spw-hero--${this.alignment}`]: true,
         };
@@ -33,7 +47,7 @@ const SpwHero = class {
         };
     }
     render() {
-        return (h(Host, { key: '1988a93f7c53c7bdbb2c7113fdfd2cf598ef757f' }, h("div", { key: 'a8d22fb241d65bef8092f2e7bb64f46edd9d8da3', class: this.elementClass }, this.imageSrc && h("img", { key: '17a025f04fd5a4aebec663520078e4a5057679ae', src: this.imageSrc, alt: this.imageAlt, class: "spw-hero__image" }), h("div", { key: 'c3e40321448c425beb852df050412fba7861d75a', class: "spw-hero__overlay", style: this.overlayStyle }), h("div", { key: 'cef98ae7595cb7fc8f427ea0f15f71997b4389fe', class: "spw-ds-container spw-hero__container" }, h("div", { key: '972a952f42576fe35d44f4432f5ca0ba479253c7', class: "spw-hero__content" }, h("slot", { key: 'fb9bb9ece775f6d0b7612f7085ad7adacfbee2c3' }))))));
+        return (h(Host, { key: 'd2529d7d7dc9d516fbc8b847069dc4e44e651a3b' }, h("div", { key: '83c24afd61f2f21f95d15e2a04286f7384f81567', class: this.elementClass }, this.imageSrc && (h("div", { key: '2d6ee8861d6de4d9ce6213e4dd9c60edc4afe6f8', class: "spw-hero__image" }, this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (h("div", { key: '09db6ffa09ec908610cdf3ef0e1d825c36ac6831', class: "spw-hero__image-play", onClick: this.triggerModal, onKeyDown: this.handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Lire la vid\u00E9o" }, h("spw-icon", { key: '5c5384133cb3af22d46cd7409aae404052c00dd9', icon: "fa-play" }))), h("img", { key: '3a1fe7a690359dadc7728ef071cf02d849b9bdca', src: this.imageSrc, alt: this.imageAlt }))), h("div", { key: '136e31e233fcc7b9fb5fb2e7402ce02747cbd3b4', class: "spw-hero__overlay", style: this.overlayStyle }), h("div", { key: 'e7bd223cc80232f94b7880921cdf7267cfdc8d24', class: "spw-ds-container spw-hero__container" }, h("div", { key: '81e7f10d32393c86da29d4e3c8b63ddee2f69517', class: "spw-hero__content" }, h("slot", { key: '1c7ae529e4d777aa8aca51d58b0a4dcd3371c05e' }))))));
     }
 };
 SpwHero.style = spwHeroCss;

package/dist/esm/spw-hero.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-hero.entry.js","sources":["src/components/spw-hero/spw-hero.scss?tag=spw-hero&encapsulation=shadow","src/components/spw-hero/spw-hero.tsx"],"sourcesContent":[":host {\n display: block;\n --spw-hero-content-max-width: 578px;\n --spw-hero-ratio-picture: initial;\n}\n\n.spw-hero {\n position: relative;\n overflow: hidden;\n &:not(.spw-hero--maxi) {\n border-radius: 12px;\n }\n &--surface-dark {\n color: white;\n }\n &--surface-light {\n color: var(--spw-color-themes-grey-grey-900);\n }\n &--grey {\n background: var(--spw-color-themes-grey-grey-100);\n }\n &--white {\n background: white;\n }\n &--grey,\n &--white {\n display: flex;\n flex-direction: column;\n padding: 24px;\n gap: 24px;\n @include breakpoint(lg) {\n padding: 64px;\n flex-direction: row;\n align-items: center;\n }\n }\n &--has-picture-full {\n padding: 0;\n gap: 0;\n }\n &.spw-hero--grey.spw-hero--left,\n &.spw-hero--white.spw-hero--left {\n flex-direction: column;\n @include breakpoint(lg) {\n flex-direction: row-reverse;\n }\n }\n &__container {\n display: flex;\n position: relative;\n margin: 0 auto;\n z-index: 3;\n .spw-hero--photo & {\n padding: 48px 24px;\n @include breakpoint(lg) {\n padding: 64px;\n }\n }\n .spw-hero--has-picture-full & {\n padding: 24px;\n @include breakpoint(lg) {\n padding: 80px 60px;\n }\n }\n .spw-hero--has-picture-full.spw-hero--left & {\n @include breakpoint(lg) {\n padding-left: calc(48% + 60px);\n }\n }\n .spw-hero--has-picture-full.spw-hero--right & {\n @include breakpoint(lg) {\n padding-right: calc(48% + 60px);\n }\n }\n .spw-hero--maxi & {\n padding: 80px 24px;\n @include breakpoint(lg) {\n padding: 148px 24px;\n }\n }\n .spw-hero--left & {\n justify-content: flex-start;\n }\n .spw-hero--center & {\n justify-content: center;\n }\n .spw-hero--right & {\n justify-content: flex-end;\n }\n }\n &__overlay,\n &__image {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n }\n &__overlay {\n z-index: 2;\n .spw-hero--surface-dark & {\n background: var(--spw-color-themes-grey-grey-900);\n }\n .spw-hero--surface-light & {\n background: white;\n }\n }\n &__image {\n z-index: 1;\n object-fit: cover;\n .spw-hero--white &,\n .spw-hero--grey & {\n display: block;\n position: relative;\n aspect-ratio: var(--spw-hero-ratio-picture);\n width: 100%;\n border-radius: 6px;\n @include breakpoint(lg) {\n max-width: 435px;\n }\n }\n .spw-hero--has-picture-full & {\n display: block;\n position: relative;\n aspect-ratio: var(--spw-hero-ratio-picture);\n width: 100%;\n border-radius: 6px;\n @include breakpoint(lg) {\n position: absolute;\n max-width: 48%;\n }\n }\n .spw-hero--has-picture-full.spw-hero--right & {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n @include breakpoint(lg) {\n right: 0;\n left: auto;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n .spw-hero--has-picture-full.spw-hero--left & {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n @include breakpoint(lg) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n }\n &__content {\n max-width: var(--spw-hero-content-max-width);\n ~~width: 100%;\~~n .spw-hero--maxi & {\n --spw-hero-content-max-width: 784px;\n margin: 0 auto;\n text-align: center;\n }\n .spw-hero--photo & {\n padding: 32px;\n background-color: var(--spw-ds-white);\n border-radius: 8px;\n box-shadow: var(--spw-effect-elevation-8);\n }\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'spw-hero',\n styleUrl: 'spw-hero.scss',\n shadow: true,\n})\nexport class SpwHero {\n /** Image du hero banner /\n @Prop() imageSrc?: string;\n /* Texte alternatif de l'image du hero banner /\n @Prop() imageAlt?: string = '';\n /* Permet de choisir la surface d'arrière-plan du hero /\n @Prop() surface?: 'dark' \| 'light' = 'light';\n /* Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding /\n @Prop() hasPictureFull?: boolean = false;\n /* Permet de choisir le variant du hero /\n @Prop() variant?: 'grey' \| 'white' \| 'maxi' \| 'photo' = 'grey';\n /* Permet de choisir l'alignement du contenu /\n @Prop() alignment?: 'left' \| 'center' \| 'right' = 'left';\n /* Permet de spécifier l'opacité de l'overlay (0 à 100) */\n @Prop() overlayOpacity?: number = 0;\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-hero': true,\n [`spw-hero--surface-${this.surface}`]: true,\n [`spw-hero--has-picture-full`]: this.hasPictureFull,\n [`spw-hero--${this.variant}`]: true,\n [`spw-hero--${this.alignment}`]: true,\n };\n }\n\n private get overlayStyle(): { [key: string]: string } {\n return {\n opacity: `${this.overlayOpacity! / 100}`,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.imageSrc && <~~img~~ ~~src~~={this.~~imageSrc~~} ~~alt~~={this.~~imageAlt~~} ~~class~~=\"spw-~~hero__image~~\" />}\n <div class=\"spw-hero__overlay\" style={this.overlayStyle}></div>\n <div class=\"spw-ds-container spw-hero__container\">\n <div class=\"spw-hero__content\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,~~48LAA48L~~;;~~MCOl9L~~,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAY,EAAE;;AAEtB,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;;AAEpC,QAAA,IAAc,CAAA,cAAA,GAAa,KAAK;;AAEhC,QAAA,IAAO,CAAA,OAAA,GAAyC,MAAM;;AAEtD,QAAA,IAAS,CAAA,SAAA,GAAiC,MAAM;;AAEhD,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;~~AAiCpC~~;AA/BC,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,qBAAqB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC3C,YAAA,CAAC,CAA4B,0BAAA,CAAA,GAAG,IAAI,CAAC,cAAc;AACnD,YAAA,CAAC,aAAa,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SACtC;;AAGH,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,OAAO,EAAE,CAAG,EAAA,IAAI,CAAC,cAAe,GAAG,GAAG,CAAE,CAAA;SACzC;;~~IAGH~~,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,QAAQ,IAAI,~~4DAAK~~,~~GAAG~~,EAAE,IAAI,CAAC,~~QAAQ~~,EAAE,~~GAAG~~,EAAE,IAAI,CAAC,QAAQ,EAAE,~~KAAK~~,EAAC,~~iBAAiB~~,~~EAAG~~,CAAA,~~EACzF~~,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAQ,CAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"spw-hero.entry.js","sources":["src/components/spw-hero/spw-hero.scss?tag=spw-hero&encapsulation=shadow","src/components/spw-hero/spw-hero.tsx"],"sourcesContent":[":host {\n display: block;\n --spw-hero-content-max-width: 578px;\n --spw-hero-ratio-picture: initial;\n --spw-hero-shadow: none;\n}\n\n.spw-hero {\n position: relative;\n overflow: hidden;\n box-shadow: var(--spw-hero-shadow);\n &:not(.spw-hero--maxi) {\n border-radius: 12px;\n }\n &--surface-dark {\n color: white;\n }\n &--surface-light {\n color: var(--spw-color-themes-grey-grey-900);\n }\n &--grey {\n background: var(--spw-color-themes-grey-grey-100);\n }\n &--white {\n background: white;\n }\n &--grey,\n &--white {\n display: flex;\n flex-direction: column;\n padding: 24px;\n gap: 24px;\n @include breakpoint(lg) {\n padding: 64px;\n flex-direction: row;\n align-items: center;\n }\n }\n &--has-picture-full {\n padding: 0;\n gap: 0;\n }\n &.spw-hero--grey.spw-hero--left,\n &.spw-hero--white.spw-hero--left {\n flex-direction: column;\n @include breakpoint(lg) {\n flex-direction: row-reverse;\n }\n }\n &__container {\n display: flex;\n position: relative;\n margin: 0 auto;\n z-index: 3;\n .spw-hero--photo & {\n padding: 48px 24px;\n @include breakpoint(lg) {\n padding: 64px;\n }\n }\n .spw-hero--has-picture-full & {\n padding: 24px;\n @include breakpoint(lg) {\n padding: 80px 60px;\n }\n }\n .spw-hero--has-picture-full.spw-hero--left & {\n @include breakpoint(lg) {\n padding-left: calc(48% + 60px);\n }\n }\n .spw-hero--has-picture-full.spw-hero--right & {\n @include breakpoint(lg) {\n padding-right: calc(48% + 60px);\n }\n }\n .spw-hero--maxi & {\n padding: 80px 24px;\n @include breakpoint(lg) {\n padding: 148px 24px;\n }\n }\n .spw-hero--left & {\n justify-content: flex-start;\n }\n .spw-hero--center & {\n justify-content: center;\n }\n .spw-hero--right & {\n justify-content: flex-end;\n }\n }\n &__overlay,\n &__image {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n }\n &__overlay {\n z-index: 2;\n pointer-events: none;\n .spw-hero--surface-dark & {\n background: var(--spw-color-themes-grey-grey-900);\n }\n .spw-hero--surface-light & {\n background: white;\n }\n }\n &__image-play {\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: var(--spw-ds-primary);\n color: white;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 24px;\n transition: all 0.3s ease;\n cursor: pointer;\n &:hover {\n transform: translate(-50%, -50%) scale(1.1);\n }\n }\n &__image {\n z-index: 1;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .spw-hero--has-video & {\n z-index: 4;\n }\n .spw-hero--white &,\n .spw-hero--grey & {\n display: block;\n position: relative;\n aspect-ratio: var(--spw-hero-ratio-picture);\n width: 100%;\n border-radius: 6px;\n @include breakpoint(lg) {\n max-width: 435px;\n }\n }\n .spw-hero--has-picture-full & {\n display: block;\n position: relative;\n aspect-ratio: var(--spw-hero-ratio-picture);\n width: 100%;\n border-radius: 6px;\n @include breakpoint(lg) {\n position: absolute;\n max-width: 48%;\n }\n }\n .spw-hero--has-picture-full.spw-hero--right & {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n @include breakpoint(lg) {\n right: 0;\n left: auto;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n .spw-hero--has-picture-full.spw-hero--left & {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n @include breakpoint(lg) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n }\n &__content {\n width: 100%;\n @include breakpoint(lg) {\n max-width: var(--spw-hero-content-max-width);\n }\n .spw-hero--maxi & {\n --spw-hero-content-max-width: 784px;\n margin: 0 auto;\n text-align: center;\n }\n .spw-hero--photo & {\n padding: 32px;\n background-color: var(--spw-ds-white);\n border-radius: 8px;\n box-shadow: var(--spw-effect-elevation-8);\n }\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'spw-hero',\n styleUrl: 'spw-hero.scss',\n shadow: true,\n})\nexport class SpwHero {\n /** Image du hero banner /\n @Prop() imageSrc?: string;\n /* Texte alternatif de l'image du hero banner /\n @Prop() imageAlt?: string = '';\n /* Permet de choisir la surface d'arrière-plan du hero /\n @Prop() surface?: 'dark' \| 'light' = 'light';\n /* Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding /\n @Prop() hasPictureFull?: boolean = false;\n /* Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) /\n @Prop() hasVideo?: boolean = false;\n /* Permet de définir un id de modal à ouvrir au clic sur le bouton play /\n @Prop() modalVideoId?: string;\n /* Permet de choisir le variant du hero /\n @Prop() variant?: 'grey' \| 'white' \| 'maxi' \| 'photo' = 'grey';\n /* Permet de choisir l'alignement du contenu /\n @Prop() alignment?: 'left' \| 'center' \| 'right' = 'left';\n /* Permet de spécifier l'opacité de l'overlay (0 à 100) */\n @Prop() overlayOpacity?: number = 0;\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-hero': true,\n [`spw-hero--surface-${this.surface}`]: true,\n [`spw-hero--has-picture-full`]: this.hasPictureFull,\n [`spw-hero--has-video`]: this.hasVideo,\n [`spw-hero--${this.variant}`]: true,\n [`spw-hero--${this.alignment}`]: true,\n };\n }\n\n private get overlayStyle(): { [key: string]: string } {\n return {\n opacity: `${this.overlayOpacity! / 100}`,\n };\n }\n\n private triggerModal = () => {\n const modal = document.getElementById(this.modalVideoId) as HTMLElement & { openModal: () => Promise<void> };\n if (modal && modal.openModal) {\n modal.openModal();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n this.triggerModal();\n }\n };\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.imageSrc && (\n <div class=\"spw-hero__image\">\n {this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (\n <div class=\"spw-hero__image-play\" onClick={this.triggerModal} onKeyDown={this.handleKeyDown} tabIndex={0} role=\"button\" aria-label=\"Lire la vidéo\">\n <spw-icon icon=\"fa-play\"></spw-icon>\n </div>\n )}\n <img src={this.imageSrc} alt={this.imageAlt} />\n </div>\n )}\n <div class=\"spw-hero__overlay\" style={this.overlayStyle}></div>\n <div class=\"spw-ds-container spw-hero__container\">\n <div class=\"spw-hero__content\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/spw-iodda.entry.js CHANGED Viewed

@@ -107,7 +107,7 @@ const SpwIodda = class {
     render() {
         const totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
         const resultsText = this.totalItems > 1 ? 'résultats trouvés' : 'résultat trouvé';
-        return (h(Host, { key: 'ea95bf004af93055851da812e59fe293fe407c27' }, h("div", { key: '14acd70572f5fb6f8679f1b3683ea855a4a507f7', class: "spw-search-input" }, h("spw-text-field", { key: '56d8fee78634f3412a5db202f1caea1ddd82b643', "is-search": "true", size: "large", type: "text", value: this.searchTerm, placeholder: "Rechercher une d\u00E9marche", onValueChanged: event => this.handleSearchInput(event) })), h("div", { key: 'e0fe7ce9d3bcf8b499bdbc574e536508b72407b7', hidden: true, class: "spw-filter spw-tw-mb-6" }, Object.keys(this.filters).map(filterKey => (h("label", { class: "spw-tw-mr-4" }, h("input", { type: "checkbox", checked: this.filters[filterKey], onChange: (event) => this.handleFilterChange(filterKey, event.target.checked) }), h("span", { class: "spw-tw-ml-2" }, filterKey))))), this.totalItems === 0 && !this.isLoading ? (h("div", { class: "spw-no-results" }, h("h3", { class: "spw-no-results__title" }, "Aucun r\u00E9sultat ne correspond \u00E0 votre recherche."), h("ul", { class: "spw-no-results__list" }, h("li", null, "V\u00E9rifiez si votre orthographe est correcte"), h("li", null, "Supprimez des filtres"), h("li", null, "Essayez d\u2019autres termes de recherche")))) : null, this.totalItems > 0 && !this.isLoading ? (h("p", { class: "spw-results" }, this.totalItems, " ", resultsText)) : null, this.isLoading ? h("spw-loading", { class: "spw-tw-mb-10" }) : null, h("ul", { key: '03ae08cddc04f58a0eefb5e75e034fde08c2b1e0', class: "spw-list" }, this.items.map(item => (h("li", { class: "spw-list-item", key: item.name }, h("a", { href: item.url, target: "_blank" }, h("h3", { class: "spw-list-item__title" }, item.title), h("p", { class: "spw-list-item__text" }, item.summary)))))), totalPages > 1 && (h("spw-pagination", { key: '14e7e64ff658ec136f8537cb50850e10d9a61a04', class: "spw-tw-mt-12", currentPage: this.currentPage, "is-disabled": this.isLoading, totalItems: this.totalItems, itemsPerPage: this.itemsPerPage, onPageChanged: this.handlePageChanged.bind(this) }))));
+        return (h(Host, { key: 'c1353d0c8a29550c67b2f83dd0bddd752b0a0674' }, h("div", { key: 'ce92cfc99ca781dd2ca3405ed3fcd818b4d94871', class: "spw-search-input" }, h("spw-text-field", { key: 'dd7210af00ccecc065d981bf522aebd52a4679c1', "is-search": "true", size: "large", type: "text", value: this.searchTerm, placeholder: "Rechercher une d\u00E9marche", onValueChanged: event => this.handleSearchInput(event) })), h("div", { key: 'cdf23f410c86d0aeeaa19a79835db6fa30127353', hidden: true, class: "spw-filter spw-tw-mb-6" }, Object.keys(this.filters).map(filterKey => (h("label", { class: "spw-tw-mr-4" }, h("input", { type: "checkbox", checked: this.filters[filterKey], onChange: (event) => this.handleFilterChange(filterKey, event.target.checked) }), h("span", { class: "spw-tw-ml-2" }, filterKey))))), this.totalItems === 0 && !this.isLoading ? (h("div", { class: "spw-no-results" }, h("h3", { class: "spw-no-results__title" }, "Aucun r\u00E9sultat ne correspond \u00E0 votre recherche."), h("ul", { class: "spw-no-results__list" }, h("li", null, "V\u00E9rifiez si votre orthographe est correcte"), h("li", null, "Supprimez des filtres"), h("li", null, "Essayez d\u2019autres termes de recherche")))) : null, this.totalItems > 0 && !this.isLoading ? (h("p", { class: "spw-results" }, this.totalItems, " ", resultsText)) : null, this.isLoading ? h("spw-loading", { class: "spw-tw-mb-10" }) : null, h("ul", { key: '9381849e2c9cab463b381f94b4a1f783311c541e', class: "spw-list" }, this.items.map(item => (h("li", { class: "spw-list-item", key: item.name }, h("a", { href: item.url, target: "_blank" }, h("h3", { class: "spw-list-item__title" }, item.title), h("p", { class: "spw-list-item__text" }, item.summary)))))), totalPages > 1 && (h("spw-pagination", { key: 'd7c09b91b3056bc5fcea01630f28727fc0e544bd', class: "spw-tw-mt-12", currentPage: this.currentPage, "is-disabled": this.isLoading, totalItems: this.totalItems, itemsPerPage: this.itemsPerPage, onPageChanged: this.handlePageChanged.bind(this) }))));
     }
 };
 SpwIodda.style = spwIoddaCss;

package/dist/esm/spw-list-description.entry.js CHANGED Viewed

@@ -15,7 +15,7 @@ const SpwListDescription = class {
         };
     }
     render() {
-        return (h(Host, { key: '925d0f30cbc67c142da858fdaaa20478d22c1a44' }, h("div", { key: '6c5cf2d8d88b1c8d50dec302c10e0e604685cd54', class: this.elementClass }, h("slot", { key: 'eb21533589983ddfa49166e20415c203170e04cf' }))));
+        return (h(Host, { key: '520d9fe437d25953a394a7cae5ff8c7cbcb7c69e' }, h("div", { key: 'c8c21d648320ed07fda21f57f4e51c5c00596227', class: this.elementClass }, h("slot", { key: '825f74bd367dd654a84ec9fd40010199362b1825' }))));
     }
 };
 SpwListDescription.style = spwListDescriptionCss;

package/dist/esm/spw-list-item.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-BYM_CUUH.js';
-const spwListItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-list-item{color:var(--spw-color-themes-grey-grey-900);position:relative;text-decoration:none;transition:all .3s ease-in-out}.spw-list-item--hoverable:hover{transform:translateX(5px)}.spw-list-item a{text-decoration:none}.spw-list-item--icon{padding-left:28px}.spw-list-item__category{color:var(--spw-ds-primary);display:inline-block;font-size:16px;font-weight:700;line-height:1.5;margin-bottom:6px;position:relative}.spw-list-item__category spw-icon{left:-28px;position:absolute;top:2px}.spw-list-item__category--hoverable{cursor:pointer}.spw-list-item__category--hoverable:hover{text-decoration:underline}";
+const spwListItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-list-item{color:var(--spw-color-themes-grey-grey-900);position:relative;text-decoration:none;transition:all .3s ease-in-out}:host(.--dark) .spw-list-item{color:var(--spw-ds-white)}.spw-list-item--hoverable:hover{transform:translateX(5px)}.spw-list-item a{text-decoration:none}.spw-list-item--icon{padding-left:28px}.spw-list-item__category{color:var(--spw-ds-primary);display:inline-block;font-size:16px;font-weight:700;line-height:1.5;margin-bottom:6px;position:relative}.spw-list-item__category spw-icon{left:-28px;position:absolute;top:2px}.spw-list-item__category--hoverable{cursor:pointer}.spw-list-item__category--hoverable:hover{text-decoration:underline}";
 const SpwListItem = class {
     constructor(hostRef) {
@@ -15,6 +15,8 @@ const SpwListItem = class {
         this.lineClamp = '3';
         /** Permet de spécifier une icône pour la catégorie */
         this.categoryIcon = 'fa-file-signature';
+        /** Permet de choisir la surface d'arrière-plan de la liste */
+        this.surface = 'light';
     }
     componentWillLoad() {
         this.applyVariantToChildren();
@@ -25,10 +27,12 @@ const SpwListItem = class {
     applyVariantToChildren() {
         requestAnimationFrame(() => {
             const variantClass = `--${this.variant}`;
+            const surfaceClass = `--${this.surface}`;
             const iconClass = `--icon`;
             const titleElement = this.el.querySelector('spw-list-title');
             const descriptionElement = this.el.querySelector('spw-list-description');
             titleElement && titleElement.classList.add(variantClass);
+            titleElement && titleElement.classList.add(surfaceClass);
             titleElement && this.icon && titleElement.setAttribute('icon', this.icon);
             titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);
             descriptionElement && descriptionElement.classList.add(variantClass);
@@ -102,7 +106,7 @@ const SpwListItem = class {
                 href,
                 target,
             };
-        return (h(Host, { key: '192d8ccef83045358b6ca57a52fd079a494ef36d' }, h("li", { key: 'e8d16cdf681e7fe3a11f783b3f44394f173e3930', class: this.elementClass }, this.category && (h("span", { key: 'a1e2e0c7e64ddb0fa9f357b1e0d60a71be9ca544', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: 'b347c9d90ad85c13f42a81c16199fd2e522c7430', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: 'b1b4cee16f6ace291d9e822a080c722befecf98d' }, attrs), h("slot", { key: 'ca0c1aeccb72f623732f528938f5b6c8cec8b51a' })))));
+        return (h(Host, { key: 'cf44e83320eeb1d76cdb2c51113f3187c5cef26b' }, h("li", { key: '2b435c624101d6ec54875058d01bfd490904a653', class: this.elementClass }, this.category && (h("span", { key: '9aee595f1075dbb647644469f09cc9cbfdf9d284', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: 'a685ed3160b5ebb0818fdf950af96ad418fbd23d', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '3a68352ba83fd33cdeba3cd3004cb5bb7a2434cf' }, attrs), h("slot", { key: 'd1d59b9eca0167f30917a757a5154dcdb70ba795' })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/spw-list-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-list-item.entry.js","sources":["src/components/spw-list/spw-list-item/spw-list-item.scss?tag=spw-list-item&encapsulation=shadow","src/components/spw-list/spw-list-item/spw-list-item.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.spw-list-item {\n position: relative;\n color: var(--spw-color-themes-grey-grey-900);\n transition: all 0.3s ease-in-out;\n text-decoration: none;\n &--hoverable:hover {\n transform: translateX(5px);\n }\n a {\n text-decoration: none;\n }\n &--icon {\n padding-left: 28px;\n }\n &__category {\n display: inline-block;\n position: relative;\n margin-bottom: 6px;\n color: var(--spw-ds-primary);\n font-weight: 700;\n font-size: 16px;\n line-height: 1.5;\n spw-icon {\n position: absolute;\n top: 2px;\n left: -28px;\n }\n &--hoverable {\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n}\n","import { Component, Host, Element, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-list-item',\n styleUrl: 'spw-list-item.scss',\n shadow: true,\n})\nexport class SpwListItem {\n @Element() el: HTMLSpwListItemElement;\n\n /** Type de variante d'élément de liste /\n @Prop() variant?: 'shortcut' \| 'default' = 'default';\n /* Spécifie le lien si nécessaire /\n @Prop() href?: string;\n /* Attribut target, s'applique uniquement si href est rempli /\n @Prop() target: string = '_self';\n /* Spécifie une icône à côté du titre /\n @Prop() icon?: string = 'fa-arrow-right';\n /* Permet de limiter le nombre de lignes du titre et de la description /\n @Prop() lineClamp: string \| 'none' = '3';\n /* Permet de spécifier une catégorie pour l'élément de liste /\n @Prop() category?: string;\n /* Permet de spécifier un lien pour la catégorie /\n @Prop() categoryLink?: string;\n /* Permet de spécifier une icône pour la catégorie */\n @Prop() categoryIcon?: string = 'fa-file-signature';\n\n componentWillLoad() {\n this.applyVariantToChildren();\n }\n\n @Listen('slotchange')\n slotChanged() {\n this.applyVariantToChildren();\n }\n\n private applyVariantToChildren() {\n requestAnimationFrame(() => {\n const variantClass = `--${this.variant}`;\n const iconClass = `--icon`;\n const titleElement = this.el.querySelector('spw-list-title');\n const descriptionElement = this.el.querySelector('spw-list-description');\n\n titleElement && titleElement.classList.add(variantClass);\n titleElement && this.icon && titleElement.setAttribute('icon', this.icon);\n titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);\n descriptionElement && descriptionElement.classList.add(variantClass);\n descriptionElement && this.icon && descriptionElement.classList.add(iconClass);\n descriptionElement && descriptionElement.setAttribute('line-clamp', this.lineClamp);\n });\n }\n\n @Listen('mouseenter')\n onMouseEnter() {\n this.setHovered(true);\n }\n\n @Listen('mouseleave')\n onMouseLeave() {\n this.setHovered(false);\n this.setActive(false);\n }\n\n @Listen('touchstart', { passive: true })\n onTouchStart() {\n this.setActive(true);\n }\n\n @Listen('touchend')\n onTouchEnd() {\n this.setActive(false);\n }\n\n @Listen('mousedown')\n onMouseDown() {\n this.setActive(true);\n }\n\n @Listen('mouseup')\n onMouseUp() {\n this.setActive(false);\n }\n\n @Listen('blur')\n onBlur() {\n this.setActive(false);\n }\n\n @Listen('focus')\n onFocus() {\n this.setActive(true);\n }\n\n private setHovered(isHovered: boolean) {\n const titleElement = this.el.querySelector('spw-list-title');\n if (titleElement && this.href) {\n titleElement.classList.toggle('--hovered', isHovered);\n }\n }\n\n private setActive(isActive: boolean) {\n const titleElement = this.el.querySelector('spw-list-title');\n if (titleElement && this.href) {\n titleElement.classList.toggle('--active', isActive);\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-list-item': true,\n 'spw-list-item--hoverable': !!this.href,\n 'spw-list-item--icon': !!this.icon \|\| !!this.categoryIcon,\n [`spw-list-item--${this.variant}`]: true,\n };\n }\n\n private get elementCatClass(): { [className: string]: boolean } {\n return {\n 'spw-list-item__category': true,\n 'spw-list-item__category--icon': !!this.categoryIcon,\n 'spw-list-item__category--hoverable': !!this.categoryLink,\n };\n }\n\n handleClick() {\n if (this.categoryLink) {\n window.location.href = this.categoryLink;\n }\n }\n\n render() {\n const { href, target } = this;\n const TagType = this.href === undefined ? 'div' : 'a';\n const attrs =\n TagType === 'div'\n ? {}\n : {\n href,\n target,\n };\n return (\n <Host>\n <li class={this.elementClass}>\n {this.category && (\n <span class={this.elementCatClass} onClick={() => this.handleClick()}>\n {this.categoryIcon && <spw-icon icon={this.categoryIcon}></spw-icon>} {this.category}\n </span>\n )}\n <TagType {...attrs}>\n <slot></slot>\n </TagType>\n </li>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,~~krGAAkrG~~;;~~MCO5rG~~,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;;AAI5C,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;;AAExB,QAAA,IAAI,CAAA,IAAA,GAAY,gBAAgB;;AAEhC,QAAA,IAAS,CAAA,SAAA,GAAoB,GAAG;;AAMhC,QAAA,IAAY,CAAA,YAAA,GAAY,mBAAmB;~~AAkIpD~~;~~IAhIC~~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"}
1	+ {"version":3,"file":"spw-list-item.entry.js","sources":["src/components/spw-list/spw-list-item/spw-list-item.scss?tag=spw-list-item&encapsulation=shadow","src/components/spw-list/spw-list-item/spw-list-item.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.spw-list-item {\n position: relative;\n color: var(--spw-color-themes-grey-grey-900);\n transition: all 0.3s ease-in-out;\n text-decoration: none;\n :host(.--dark) & {\n color: var(--spw-ds-white);\n }\n &--hoverable:hover {\n transform: translateX(5px);\n }\n a {\n text-decoration: none;\n }\n &--icon {\n padding-left: 28px;\n }\n &__category {\n display: inline-block;\n position: relative;\n margin-bottom: 6px;\n color: var(--spw-ds-primary);\n font-weight: 700;\n font-size: 16px;\n line-height: 1.5;\n spw-icon {\n position: absolute;\n top: 2px;\n left: -28px;\n }\n &--hoverable {\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n}\n","import { Component, Host, Element, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-list-item',\n styleUrl: 'spw-list-item.scss',\n shadow: true,\n})\nexport class SpwListItem {\n @Element() el: HTMLSpwListItemElement;\n\n /** Type de variante d'élément de liste /\n @Prop() variant?: 'shortcut' \| 'default' = 'default';\n /* Spécifie le lien si nécessaire /\n @Prop() href?: string;\n /* Attribut target, s'applique uniquement si href est rempli /\n @Prop() target: string = '_self';\n /* Spécifie une icône à côté du titre /\n @Prop() icon?: string = 'fa-arrow-right';\n /* Permet de limiter le nombre de lignes du titre et de la description /\n @Prop() lineClamp: string \| 'none' = '3';\n /* Permet de spécifier une catégorie pour l'élément de liste /\n @Prop() category?: string;\n /* Permet de spécifier un lien pour la catégorie /\n @Prop() categoryLink?: string;\n /* Permet de spécifier une icône pour la catégorie /\n @Prop() categoryIcon?: string = 'fa-file-signature';\n /* Permet de choisir la surface d'arrière-plan de la liste */\n @Prop() surface?: 'light' \| 'dark' = 'light';\n\n componentWillLoad() {\n this.applyVariantToChildren();\n }\n\n @Listen('slotchange')\n slotChanged() {\n this.applyVariantToChildren();\n }\n\n private applyVariantToChildren() {\n requestAnimationFrame(() => {\n const variantClass = `--${this.variant}`;\n const surfaceClass = `--${this.surface}`;\n const iconClass = `--icon`;\n const titleElement = this.el.querySelector('spw-list-title');\n const descriptionElement = this.el.querySelector('spw-list-description');\n\n titleElement && titleElement.classList.add(variantClass);\n titleElement && titleElement.classList.add(surfaceClass);\n titleElement && this.icon && titleElement.setAttribute('icon', this.icon);\n titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);\n descriptionElement && descriptionElement.classList.add(variantClass);\n descriptionElement && this.icon && descriptionElement.classList.add(iconClass);\n descriptionElement && descriptionElement.setAttribute('line-clamp', this.lineClamp);\n });\n }\n\n @Listen('mouseenter')\n onMouseEnter() {\n this.setHovered(true);\n }\n\n @Listen('mouseleave')\n onMouseLeave() {\n this.setHovered(false);\n this.setActive(false);\n }\n\n @Listen('touchstart', { passive: true })\n onTouchStart() {\n this.setActive(true);\n }\n\n @Listen('touchend')\n onTouchEnd() {\n this.setActive(false);\n }\n\n @Listen('mousedown')\n onMouseDown() {\n this.setActive(true);\n }\n\n @Listen('mouseup')\n onMouseUp() {\n this.setActive(false);\n }\n\n @Listen('blur')\n onBlur() {\n this.setActive(false);\n }\n\n @Listen('focus')\n onFocus() {\n this.setActive(true);\n }\n\n private setHovered(isHovered: boolean) {\n const titleElement = this.el.querySelector('spw-list-title');\n if (titleElement && this.href) {\n titleElement.classList.toggle('--hovered', isHovered);\n }\n }\n\n private setActive(isActive: boolean) {\n const titleElement = this.el.querySelector('spw-list-title');\n if (titleElement && this.href) {\n titleElement.classList.toggle('--active', isActive);\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-list-item': true,\n 'spw-list-item--hoverable': !!this.href,\n 'spw-list-item--icon': !!this.icon \|\| !!this.categoryIcon,\n [`spw-list-item--${this.variant}`]: true,\n };\n }\n\n private get elementCatClass(): { [className: string]: boolean } {\n return {\n 'spw-list-item__category': true,\n 'spw-list-item__category--icon': !!this.categoryIcon,\n 'spw-list-item__category--hoverable': !!this.categoryLink,\n };\n }\n\n handleClick() {\n if (this.categoryLink) {\n window.location.href = this.categoryLink;\n }\n }\n\n render() {\n const { href, target } = this;\n const TagType = this.href === undefined ? 'div' : 'a';\n const attrs =\n TagType === 'div'\n ? {}\n : {\n href,\n target,\n };\n return (\n <Host>\n <li class={this.elementClass}>\n {this.category && (\n <span class={this.elementCatClass} onClick={() => this.handleClick()}>\n {this.categoryIcon && <spw-icon icon={this.categoryIcon}></spw-icon>} {this.category}\n </span>\n )}\n <TagType {...attrs}>\n <slot></slot>\n </TagType>\n </li>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/spw-list-title.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-BYM_CUUH.js';
-const spwListTitleCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-ds-typography,[class*=spw-ds-typography-]{font-family:Nunito Sans}.spw-ds-typography-display-1{font-size:56px;font-weight:400;line-height:1.2}@media (min-width:1024px){.spw-ds-typography-display-1{font-size:68px;font-weight:400;line-height:1.1}}.spw-ds-typography-display-2{font-size:40px;font-weight:400;line-height:1.25}@media (min-width:1024px){.spw-ds-typography-display-2{font-size:56px;font-weight:400;line-height:1.2}}.spw-ds-typography-display-3{font-size:32px;font-weight:400;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-display-3{font-size:48px;font-weight:400;line-height:1.2}}.spw-ds-typography-heading-01{font-size:28px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-01{font-size:32px;font-weight:700;line-height:1.25}}.spw-ds-typography-heading-02{font-size:24px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-02{font-size:28px;font-weight:700;line-height:1.3}}.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}}.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}}.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.6}}.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.7}@media (min-width:1024px){.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.6}}.spw-ds-typography-lead-body{font-size:20px!important;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-lead-body{font-size:20px;font-weight:400;line-height:1.5}}.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.25}}.spw-ds-typography-tag{font-size:14px;font-weight:700;line-height:1.2}.spw-ds-typography-label{font-size:16px;font-weight:600;line-height:1.2}.spw-ds-typography-date{font-size:16px;font-weight:300;line-height:1}.spw-ds-typography-caption{font-size:14px;font-style:italic;font-weight:300;line-height:1}.spw-ds-typography-link{border-bottom:1px solid var(--spw-ds-primary);color:var(--spw-ds-primary);font-size:inherit;font-weight:700;line-height:1.2}.spw-ds-typography-link:hover{color:var(--spw-ds-variant)}.spw-ds-typography-link:active{color:var(--spw-ds-active)}.spw-ds-typography-link:active,.spw-ds-typography-link:hover{border-color:currentColor;border-width:2px}.spw-ds-typography-hint{font-size:14px;font-weight:400;line-height:1.5}.spw-ds-typography-code{font-family:monospace;font-size:14px;font-weight:400;line-height:1.2}.spw-ds-typography-overline{font-size:10px;font-weight:800;line-height:1;text-transform:uppercase}.spw-list-title{display:inline-flex;position:relative;transition:all .2s linear}.spw-list-title spw-icon{color:var(--spw-ds-primary);left:-28px;position:absolute;top:4px;transition:all .2s linear}:host(.--active) .spw-list-title spw-icon{color:var(--spw-ds-active)}.spw-list-title__content-text{border-bottom:1px solid transparent;display:inline;transition:all .2s linear}:host(.--hovered) .spw-list-title__content-text{border-color:var(--spw-ds-primary)}:host(.--active) .spw-list-title__content-text{border-color:var(--spw-ds-active)}:host(.--default) .spw-list-title{color:var(--spw-color-themes-grey-grey-900)}:host(.--shortcut) .spw-list-title{color:var(--spw-ds-primary)}:host(.--hovered) .spw-list-title{color:var(--spw-ds-primary)}:host(.--active) .spw-list-title{color:var(--spw-ds-active)}.spw-list-title--has-clamp .spw-list-title__content{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.spw-list-title--clamp-1 .spw-list-title__content{-webkit-line-clamp:1;line-clamp:1}.spw-list-title--clamp-2 .spw-list-title__content{-webkit-line-clamp:2;line-clamp:2}.spw-list-title--clamp-3 .spw-list-title__content{-webkit-line-clamp:3;line-clamp:3}.spw-list-title--clamp-4 .spw-list-title__content{-webkit-line-clamp:4;line-clamp:4}.spw-list-title--clamp-5 .spw-list-title__content{-webkit-line-clamp:5;line-clamp:5}.spw-list-title--clamp-6 .spw-list-title__content{-webkit-line-clamp:6;line-clamp:6}.spw-list-title--clamp-7 .spw-list-title__content{-webkit-line-clamp:7;line-clamp:7}.spw-list-title--clamp-8 .spw-list-title__content{-webkit-line-clamp:8;line-clamp:8}.spw-list-title--clamp-9 .spw-list-title__content{-webkit-line-clamp:9;line-clamp:9}.spw-list-title--clamp-10 .spw-list-title__content{-webkit-line-clamp:10;line-clamp:10}";
+const spwListTitleCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-ds-typography,[class*=spw-ds-typography-]{font-family:Nunito Sans}.spw-ds-typography-display-1{font-size:56px;font-weight:400;line-height:1.2}@media (min-width:1024px){.spw-ds-typography-display-1{font-size:68px;font-weight:400;line-height:1.1}}.spw-ds-typography-display-2{font-size:40px;font-weight:400;line-height:1.25}@media (min-width:1024px){.spw-ds-typography-display-2{font-size:56px;font-weight:400;line-height:1.2}}.spw-ds-typography-display-3{font-size:32px;font-weight:400;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-display-3{font-size:48px;font-weight:400;line-height:1.2}}.spw-ds-typography-heading-01{font-size:28px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-01{font-size:32px;font-weight:700;line-height:1.25}}.spw-ds-typography-heading-02{font-size:24px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-02{font-size:28px;font-weight:700;line-height:1.3}}.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}}.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}}.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.6}}.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.7}@media (min-width:1024px){.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.6}}.spw-ds-typography-lead-body{font-size:20px!important;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-lead-body{font-size:20px;font-weight:400;line-height:1.5}}.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.25}}.spw-ds-typography-tag{font-size:14px;font-weight:700;line-height:1.2}.spw-ds-typography-label{font-size:16px;font-weight:600;line-height:1.2}.spw-ds-typography-date{font-size:16px;font-weight:300;line-height:1}.spw-ds-typography-caption{font-size:14px;font-style:italic;font-weight:300;line-height:1}.spw-ds-typography-link{border-bottom:1px solid var(--spw-ds-primary);color:var(--spw-ds-primary);font-size:inherit;font-weight:700;line-height:1.2}.spw-ds-typography-link:hover{color:var(--spw-ds-variant)}.spw-ds-typography-link:active{color:var(--spw-ds-active)}.spw-ds-typography-link:active,.spw-ds-typography-link:hover{border-color:currentColor;border-width:2px}.spw-ds-typography-hint{font-size:14px;font-weight:400;line-height:1.5}.spw-ds-typography-code{font-family:monospace;font-size:14px;font-weight:400;line-height:1.2}.spw-ds-typography-overline{font-size:10px;font-weight:800;line-height:1;text-transform:uppercase}.spw-list-title{display:inline-flex;position:relative;transition:all .2s linear}.spw-list-title spw-icon{color:var(--spw-ds-primary);left:-28px;position:absolute;top:4px;transition:all .2s linear}:host(.--active) .spw-list-title spw-icon{color:var(--spw-ds-active)}:host(.--dark) .spw-list-title spw-icon{color:var(--spw-ds-white)}.spw-list-title__content-text{border-bottom:1px solid transparent;display:inline;transition:all .2s linear}:host(.--hovered) .spw-list-title__content-text{border-color:var(--spw-ds-primary)}:host(.--active) .spw-list-title__content-text{border-color:var(--spw-ds-active)}:host(.--default) .spw-list-title{color:var(--spw-color-themes-grey-grey-900)}:host(.--shortcut) .spw-list-title{color:var(--spw-ds-primary)}:host(.--hovered) .spw-list-title{color:var(--spw-ds-primary)}:host(.--active) .spw-list-title{color:var(--spw-ds-active)}:host(.--dark) .spw-list-title{color:var(--spw-ds-white)}.spw-list-title--has-clamp .spw-list-title__content{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.spw-list-title--clamp-1 .spw-list-title__content{-webkit-line-clamp:1;line-clamp:1}.spw-list-title--clamp-2 .spw-list-title__content{-webkit-line-clamp:2;line-clamp:2}.spw-list-title--clamp-3 .spw-list-title__content{-webkit-line-clamp:3;line-clamp:3}.spw-list-title--clamp-4 .spw-list-title__content{-webkit-line-clamp:4;line-clamp:4}.spw-list-title--clamp-5 .spw-list-title__content{-webkit-line-clamp:5;line-clamp:5}.spw-list-title--clamp-6 .spw-list-title__content{-webkit-line-clamp:6;line-clamp:6}.spw-list-title--clamp-7 .spw-list-title__content{-webkit-line-clamp:7;line-clamp:7}.spw-list-title--clamp-8 .spw-list-title__content{-webkit-line-clamp:8;line-clamp:8}.spw-list-title--clamp-9 .spw-list-title__content{-webkit-line-clamp:9;line-clamp:9}.spw-list-title--clamp-10 .spw-list-title__content{-webkit-line-clamp:10;line-clamp:10}";
 const SpwListTitle = class {
     constructor(hostRef) {
@@ -16,7 +16,7 @@ const SpwListTitle = class {
         };
     }
     render() {
-        return (h(Host, { key: 'ad14bfcd3bfada1c60232e997dd33652a64fbb4f' }, h("div", { key: 'bcbcec42f4bfaeafccc79f043a15d5367417ccb9', class: this.elementClass }, this.icon && h("spw-icon", { key: '3c9a1c92397cb9d515a33f128ccb4cbdae647d10', icon: this.icon }), h("div", { key: '7750035079b904fd161cc50911726c44387fb9e5', class: "spw-list-title__content" }, h("div", { key: 'd6747d9c5df1fa4fb599d32a21d924353ed39508', class: "spw-list-title__content-text" }, h("slot", { key: '97fd31f8a4ef2824ae0f708d1f295e5be0e7fcd7' }))))));
+        return (h(Host, { key: 'c9c3901f829d7b5f2a3177ca556c018406d6ea73' }, h("div", { key: 'cf79b9d13b1924112e722313bf6047e8dd38a928', class: this.elementClass }, this.icon && h("spw-icon", { key: '8c7c3e1aebad500d2cc9f61397f9aaecce10813a', icon: this.icon }), h("div", { key: 'b4ebd2d41241bf1c3d12e0585967dd49b3b1e16a', class: "spw-list-title__content" }, h("div", { key: '8fa9a3410f155dd978758b25d8265fd2116b5dee', class: "spw-list-title__content-text" }, h("slot", { key: '23e919d7c182a801221cd3bc856e4443b4601795' }))))));
     }
 };
 SpwListTitle.style = spwListTitleCss;

package/dist/esm/spw-list-title.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-list-title.entry.js","sources":["src/components/spw-list/spw-list-title/spw-list-title.scss?tag=spw-list-title&encapsulation=shadow","src/components/spw-list/spw-list-title/spw-list-title.tsx"],"sourcesContent":["@import '../../../scss/utils/foundations/typography';\n\n:host {\n display: block;\n}\n\n.spw-list-title {\n position: relative;\n transition: all 0.2s linear;\n display: inline-flex;\n spw-icon {\n transition: all 0.2s linear;\n position: absolute;\n top: 4px;\n left: -28px;\n color: var(--spw-ds-primary);\n :host(.--active) & {\n color: var(--spw-ds-active);\n }\n }\n &__content-text {\n display: inline;\n border-bottom: 1px solid transparent;\n transition: all 0.2s linear;\n :host(.--hovered) & {\n border-color: var(--spw-ds-primary);\n }\n :host(.--active) & {\n border-color: var(--spw-ds-active);\n }\n }\n :host(.--default) & {\n @extend .spw-ds-typography-heading-04;\n color: var(--spw-color-themes-grey-grey-900);\n }\n :host(.--shortcut) & {\n @extend .spw-ds-typography-heading-05;\n color: var(--spw-ds-primary);\n }\n :host(.--hovered) & {\n color: var(--spw-ds-primary);\n }\n :host(.--active) & {\n color: var(--spw-ds-active);\n }\n &--has-clamp {\n .spw-list-title__content {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n }\n }\n @for $i from 1 through 10 {\n &--clamp-#{$i} {\n .spw-list-title__content {\n -webkit-line-clamp: $i;\n line-clamp: $i;\n }\n }\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-list-title',\n styleUrl: 'spw-list-title.scss',\n shadow: true,\n})\nexport class SpwListTitle {\n /** Spécifie une icône à côté du titre /\n @Prop() icon?: string;\n /* Spécifie un nombre de ligne maximum à afficher */\n @Prop() lineClamp?: string;\n\n private get elementClass(): { [className: string]: boolean } {\n const hasLineClamp = this.lineClamp !== 'none';\n return {\n 'spw-list-title': true,\n [`spw-list-title--has-clamp`]: hasLineClamp,\n [`spw-list-title--icon`]: !!this.icon,\n [`spw-list-title--clamp-${this.lineClamp}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.icon && <spw-icon icon={this.icon}></spw-icon>}\n <div class=\"spw-list-title__content\">\n <div class=\"spw-list-title__content-text\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,~~g9QAAg9Q~~;;~~MCO39Q~~,YAAY,GAAA,MAAA;;;;AAMvB,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;QAC9C,OAAO;AACL,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,yBAAA,CAA2B,GAAG,YAAY;AAC3C,YAAA,CAAC,sBAAsB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;AACrC,YAAA,CAAC,yBAAyB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAClD;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"spw-list-title.entry.js","sources":["src/components/spw-list/spw-list-title/spw-list-title.scss?tag=spw-list-title&encapsulation=shadow","src/components/spw-list/spw-list-title/spw-list-title.tsx"],"sourcesContent":["@import '../../../scss/utils/foundations/typography';\n\n:host {\n display: block;\n}\n\n.spw-list-title {\n position: relative;\n transition: all 0.2s linear;\n display: inline-flex;\n spw-icon {\n transition: all 0.2s linear;\n position: absolute;\n top: 4px;\n left: -28px;\n color: var(--spw-ds-primary);\n :host(.--active) & {\n color: var(--spw-ds-active);\n }\n :host(.--dark) & {\n color: var(--spw-ds-white);\n }\n }\n &__content-text {\n display: inline;\n border-bottom: 1px solid transparent;\n transition: all 0.2s linear;\n :host(.--hovered) & {\n border-color: var(--spw-ds-primary);\n }\n :host(.--active) & {\n border-color: var(--spw-ds-active);\n }\n }\n :host(.--default) & {\n @extend .spw-ds-typography-heading-04;\n color: var(--spw-color-themes-grey-grey-900);\n }\n :host(.--shortcut) & {\n @extend .spw-ds-typography-heading-05;\n color: var(--spw-ds-primary);\n }\n :host(.--hovered) & {\n color: var(--spw-ds-primary);\n }\n :host(.--active) & {\n color: var(--spw-ds-active);\n }\n :host(.--dark) & {\n color: var(--spw-ds-white);\n }\n &--has-clamp {\n .spw-list-title__content {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n }\n }\n @for $i from 1 through 10 {\n &--clamp-#{$i} {\n .spw-list-title__content {\n -webkit-line-clamp: $i;\n line-clamp: $i;\n }\n }\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-list-title',\n styleUrl: 'spw-list-title.scss',\n shadow: true,\n})\nexport class SpwListTitle {\n /** Spécifie une icône à côté du titre /\n @Prop() icon?: string;\n /* Spécifie un nombre de ligne maximum à afficher */\n @Prop() lineClamp?: string;\n\n private get elementClass(): { [className: string]: boolean } {\n const hasLineClamp = this.lineClamp !== 'none';\n return {\n 'spw-list-title': true,\n [`spw-list-title--has-clamp`]: hasLineClamp,\n [`spw-list-title--icon`]: !!this.icon,\n [`spw-list-title--clamp-${this.lineClamp}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.icon && <spw-icon icon={this.icon}></spw-icon>}\n <div class=\"spw-list-title__content\">\n <div class=\"spw-list-title__content-text\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,2kRAA2kR;;MCOtlR,YAAY,GAAA,MAAA;;;;AAMvB,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;QAC9C,OAAO;AACL,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,yBAAA,CAA2B,GAAG,YAAY;AAC3C,YAAA,CAAC,sBAAsB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;AACrC,YAAA,CAAC,yBAAyB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAClD;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;"}

package/dist/esm/spw-list.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BYM_CUUH.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BYM_CUUH.js';
 const spwListCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-list{display:flex;flex-direction:column}.spw-list--small{gap:12px}.spw-list--medium{gap:24px}.spw-list--large{gap:32px}";
@@ -7,6 +7,24 @@ const SpwList = class {
         registerInstance(this, hostRef);
         /** Spécifie l'écart entre les éléments de liste */
         this.gap = 'medium';
+        /** Permet de choisir la surface d'arrière-plan de la liste */
+        this.surface = 'light';
+    }
+    componentWillLoad() {
+        this.applyVariantToChildren();
+    }
+    slotChanged() {
+        this.applyVariantToChildren();
+    }
+    applyVariantToChildren() {
+        requestAnimationFrame(() => {
+            const variantClass = `--${this.surface}`;
+            const contentElements = this.el.querySelectorAll('spw-list-item');
+            contentElements.forEach(contentElement => {
+                contentElement.classList.add(variantClass);
+                contentElement.setAttribute('surface', this.surface);
+            });
+        });
     }
     get elementClass() {
         return {
@@ -15,8 +33,9 @@ const SpwList = class {
         };
     }
     render() {
-        return (h(Host, { key: '86ca7deb432066f7b72a9f0e831f086c83c951e1' }, h("ul", { key: '0f52adae23009c2fc4ceefa8bdb5cde7ff24d1a3', class: this.elementClass }, h("slot", { key: 'cf2221f6fd25097e90110418f7b17c5570e4ea9e' }))));
+        return (h(Host, { key: 'b4148947174922198db9c5d900e0bd3e12dc3463' }, h("ul", { key: '100ab0ec463be6a6c94aa5853c6b4cadc95f8f55', class: this.elementClass }, h("slot", { key: 'b0a7ee73af4a21f35aa90b0eb77522b0d9679e27' }))));
     }
+    get el() { return getElement(this); }
 };
 SpwList.style = spwListCss;

package/dist/esm/spw-list.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-list.entry.js","sources":["src/components/spw-list/spw-list.scss?tag=spw-list&encapsulation=shadow","src/components/spw-list/spw-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-list {\n display: flex;\n flex-direction: column;\n &--small {\n gap: 12px;\n }\n &--medium {\n gap: 24px;\n }\n &--large {\n gap: 32px;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-list',\n styleUrl: 'spw-list.scss',\n shadow: true,\n})\nexport class SpwList {\n /** Spécifie l'écart entre les éléments de liste */\n @Prop() gap?: 'small' \| 'medium' \| 'large' = 'medium';\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-list': true,\n [`spw-list--${this.gap}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <ul class={this.elementClass}>\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,wsFAAwsF;;MCO9sF,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;~~AAOU~~,QAAA,IAAG,CAAA,GAAA,GAAkC,QAAQ;~~AAkBtD~~;~~AAhBC~~,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,GAAG,CAAE,CAAA,GAAG,IAAI;SAChC;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACV,CACA~~;;;;;;;~~"}
1	+ {"version":3,"file":"spw-list.entry.js","sources":["src/components/spw-list/spw-list.scss?tag=spw-list&encapsulation=shadow","src/components/spw-list/spw-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-list {\n display: flex;\n flex-direction: column;\n &--small {\n gap: 12px;\n }\n &--medium {\n gap: 24px;\n }\n &--large {\n gap: 32px;\n }\n}\n","import { Component, Prop, Element, Listen, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-list',\n styleUrl: 'spw-list.scss',\n shadow: true,\n})\nexport class SpwList {\n @Element() el: HTMLSpwListElement;\n /** Spécifie l'écart entre les éléments de liste /\n @Prop() gap?: 'small' \| 'medium' \| 'large' = 'medium';\n /* Permet de choisir la surface d'arrière-plan de la liste */\n @Prop() surface?: 'light' \| 'dark' = 'light';\n\n componentWillLoad() {\n this.applyVariantToChildren();\n }\n\n @Listen('slotchange')\n slotChanged() {\n this.applyVariantToChildren();\n }\n\n private applyVariantToChildren() {\n requestAnimationFrame(() => {\n const variantClass = `--${this.surface}`;\n const contentElements = this.el.querySelectorAll('spw-list-item');\n\n contentElements.forEach(contentElement => {\n contentElement.classList.add(variantClass);\n contentElement.setAttribute('surface', this.surface);\n });\n });\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-list': true,\n [`spw-list--${this.gap}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <ul class={this.elementClass}>\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,wsFAAwsF;;MCO9sF,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAG,CAAA,GAAA,GAAkC,QAAQ;;AAE7C,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;AAuC7C;IArCC,iBAAiB,GAAA;QACf,IAAI,CAAC,sBAAsB,EAAE;;IAI/B,WAAW,GAAA;QACT,IAAI,CAAC,sBAAsB,EAAE;;IAGvB,sBAAsB,GAAA;QAC5B,qBAAqB,CAAC,MAAK;AACzB,YAAA,MAAM,YAAY,GAAG,CAAA,EAAA,EAAK,IAAI,CAAC,OAAO,EAAE;YACxC,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC;AAEjE,YAAA,eAAe,CAAC,OAAO,CAAC,cAAc,IAAG;AACvC,gBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;gBAC1C,cAAc,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC;AACtD,aAAC,CAAC;AACJ,SAAC,CAAC;;AAGJ,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,GAAG,CAAE,CAAA,GAAG,IAAI;SAChC;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACV,CACA;;;;;;;;"}

package/dist/esm/spw-modal.entry.js CHANGED Viewed

@@ -136,7 +136,7 @@ const KEYFRAMES = {
     ],
 };
-const spwModalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-modal{align-items:center;display:none;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:1060}.spw-modal--opened{display:flex}.spw-modal__overlay{background:#000;height:100%;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:0}.spw-modal__content-container{align-items:stretch;background-color:#fff;border-radius:var(--spw-spacings-border-radius-lg);box-shadow:var(--spw-effect-elevation-6);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;position:absolute;width:90%}.spw-modal__content-container--small{max-width:480px}.spw-modal__content-container--medium{max-width:600px}.spw-modal__content-container--large{max-width:768px}.spw-modal__content-container--fluid{max-width:100%}.spw-modal__content{border:1px solid var(--spw-color-themes-grey-grey-300);display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;width:100%}.spw-modal--sticky-buttons .spw-modal__content{overflow-y:visible}.spw-modal__icon-container{align-items:center;align-self:stretch;background-color:#fff;display:flex;justify-content:center;width:32px}.spw-modal__header{align-items:center;border-radius:1px 1px 0 0;box-sizing:border-box;color:var(--spw-colors-support-grey-grey-900);display:flex;justify-content:space-between;margin-bottom:12px;margin-top:6px;padding:24px 24px 0}.spw-modal__caption{word-wrap:break-word;overflow:hidden;white-space:pre-wrap}.spw-modal__header h2{color:var(--spw-colors-support-grey-grey-900);font-size:18px;margin:0}.spw-modal__header button{background:none;border:none;cursor:pointer;font-size:1.5em;padding:0}.spw-modal__close-button{cursor:pointer;font-size:21px;position:absolute;right:12px;top:12px}.spw-modal__close-button:hover{opacity:.7}.spw-modal__body{box-sizing:border-box;color:var(--spw-colors-support-grey-grey-700);flex:1;font-size:16px;margin-bottom:12px;padding:0 24px}.spw-modal--sticky-buttons .spw-modal__body{overflow-y:auto}.spw-modal__buttons ::slotted([slot=buttons]){padding:12px 24px 24px}.spw-modal__footer--buttons-present ::slotted(*){display:flex;gap:12px;justify-content:flex-end;padding:8px 24px 24px}.spw-modal__content-container--small .spw-modal__footer--buttons-present ::slotted(*){flex-direction:column;gap:8px}.spw-modal__content-container--medium .spw-modal__footer--buttons-present ::slotted(*){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spw-modal__border{align-items:center;display:flex;flex-grow:1;font-size:1.5em;justify-content:center;width:100%}";
+const spwModalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.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;-webkit-text-decoration:underline dotted;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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@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-modal{align-items:center;display:none;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:1060}.spw-modal--opened{display:flex}.spw-modal__overlay{background:#000;height:100%;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:0}.spw-modal__content-container{align-items:stretch;background-color:#fff;border-radius:var(--spw-spacings-border-radius-lg);box-shadow:var(--spw-effect-elevation-6);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;position:absolute;width:90%}.spw-modal__content-container--small{max-width:480px}.spw-modal__content-container--medium{max-width:600px}.spw-modal__content-container--large{max-width:768px}.spw-modal__content-container--fluid{max-width:100%}.spw-modal__content{border:1px solid var(--spw-color-themes-grey-grey-300);display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;width:100%}.spw-modal--sticky-buttons .spw-modal__content{overflow-y:visible}.spw-modal__icon-container{align-items:center;align-self:stretch;background-color:#fff;display:flex;justify-content:center;width:32px}.spw-modal__header{align-items:center;border-radius:1px 1px 0 0;box-sizing:border-box;color:var(--spw-colors-support-grey-grey-900);display:flex;justify-content:space-between;margin-bottom:12px;margin-top:6px;padding:24px 24px 0}.spw-modal__caption{word-wrap:break-word;overflow:hidden;white-space:pre-wrap}.spw-modal__header h2{color:var(--spw-colors-support-grey-grey-900);font-size:18px;margin:0}.spw-modal__header button{background:none;border:none;cursor:pointer;font-size:1.5em;padding:0}.spw-modal__close-button{cursor:pointer;font-size:21px;position:absolute;right:12px;top:12px}.spw-modal__close-button:hover{opacity:.7}.spw-modal__body{box-sizing:border-box;color:var(--spw-colors-support-grey-grey-700);flex:1;font-size:16px;margin-bottom:12px;padding:0 24px}.spw-modal--sticky-buttons .spw-modal__body{overflow-y:auto}.spw-modal__buttons{padding-top:12px}.spw-modal__buttons ::slotted([slot=buttons]){padding:0 24px 24px}.spw-modal__footer--buttons-present ::slotted(*){display:flex;gap:12px;justify-content:flex-end;padding:8px 24px 24px}.spw-modal__content-container--small .spw-modal__footer--buttons-present ::slotted(*){flex-direction:column;gap:8px}.spw-modal__content-container--medium .spw-modal__footer--buttons-present ::slotted(*){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spw-modal__border{align-items:center;display:flex;flex-grow:1;font-size:1.5em;justify-content:center;width:100%}";
 const SpwModal = class {
     constructor(hostRef) {
@@ -254,6 +254,7 @@ const SpwModal = class {
         }
     }
     close() {
+        this.stopAllVideos();
         try {
             const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
                 duration: 200,
@@ -268,6 +269,12 @@ const SpwModal = class {
             this.spwModalClose.emit();
         }
     }
+    stopAllVideos() {
+        const iframes = this.hostElement.querySelectorAll('iframe');
+        iframes.forEach(iframe => {
+            iframe.src = iframe.src;
+        });
+    }
     doBeforeClose(trigger) {
         const triggers = [];
         triggers.push(trigger);
@@ -292,7 +299,7 @@ const SpwModal = class {
         };
     }
     render() {
-        return (h(Host, { key: 'ef446d6e84161f88485255def8ee494708ec0df2' }, h("div", { key: '9b4e6890821050b91cadbd5a62618fe5adef5e84', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '1f529135feeca79fdff181f1df0b3765ed3e13d7', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '8b66590a0ff6797f4ef30cd2ab54b4474166f3bc', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '0d9347f636fb221c5f64b9ebdf87ca223e1fdd6f', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: 'a7b273cad091dfed171c705c64c89bc9906f014b', class: "spw-modal__content" }, h("div", { key: 'dc4f195d8c84c8cd52c667b60a16d9637be024a0', class: "spw-modal__header" }, h("h2", { key: '4d195c0506a9a27af370fb8788e89a9243e116e0', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '6fcaae9a6ec5712523d33a06471486c1553ed267', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: 'bf3a82093a70f082995e4d471d42080fb260b212', class: "spw-modal__body" }, h("slot", { key: 'ed2f1e1fac388d4e42528831e8cfecf9d1517458', name: "content" })), h("div", { key: '0f33c657c7233fe1f98dd760fd725c3a12ab034c', class: "spw-modal__buttons" }, h("slot", { key: 'd1aba450ab89283394f7590967508eef80d50a42', name: "buttons" })))), h("div", { key: 'a2f78f2fd167f99abe6438e70ef3f68d24d845c8', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '48c698e01ba5d0545c04246eaddbde29a9cae6b9' }, h("div", { key: 'a82e49fb97ee9d19dd1fc4fcde824e408cbdef09', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '35eb6c15f52d877cf0089904238651f39d66c964', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'cff9c1866bfba1349853f075868ae1cddb8f4a03', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '44c011464dbea7f7e41c33d36c703689f0953dff', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '2b8c969ed7a5d0ff31b1993ba3cf6582dcfd3a4a', class: "spw-modal__content" }, h("div", { key: '9a8857bfae65ab5faa7df24591090a073e7b8a7f', class: "spw-modal__header" }, h("h2", { key: 'adb8a929be3706f248767beac148efd1c5ab02ba', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '0a295da24d9deec49c7cb6dca7c9b02478aaedf8', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '81a2f2838737c49291eea6c571db70d2c5858141', class: "spw-modal__body" }, h("slot", { key: '2641d4d98bb5e4b3a2bd0b4fcff1587a7e071337', name: "content" })), h("div", { key: '640ae662d1b7e4a9d3fac0abe71a6e548d80a298', class: "spw-modal__buttons" }, h("slot", { key: '1cc48d97165b66e05dc2cce809ac9b66f9893a64', name: "buttons" })))), h("div", { key: 'c6bf055784ae5808d82b0fea5fac6e34ca9d9eca', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {