npm - @spw-ds/spw-stencil-library - Versions diffs - 1.2.2 → 1.2.4 - Mend

@spw-ds/spw-stencil-library 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (789) 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';
+import { r as registerInstance, h, H as Host } from './index-CvfVJV8a.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: 'f4a32cb603d9a5bba07cf122ff15ebd92f0af014' }, h("div", { key: '148901a0db4fe8b178f340b61c8c29fcc9838389', class: this.elementClass }, this.imageSrc && h("img", { key: 'd1c7d5272a8de2d6fb16690ff6328383b0efc7d3', src: this.imageSrc, alt: this.imageAlt, class: "spw-hero__image" }), h("div", { key: 'b9874d61163ed0bdfab1a59bea1c1b8da85053a8', class: "spw-hero__overlay", style: this.overlayStyle }), h("div", { key: '06d4a31e7a7f062721ef2cc0750445ef0df4307e', class: "spw-ds-container spw-hero__container" }, h("div", { key: 'f9e2fb931122efd6d8b11510133664e5b9501d2e', class: "spw-hero__content" }, h("slot", { key: '445dcdcd40500d836eed29c92ffdb8cdbacf3582' }))))));
+        return (h(Host, { key: 'cb44d78a65ee6714b13924308788016ae6dca9e9' }, h("div", { key: '1fcdf38fa4f4badff5f0f3731d6ce5b69728acf1', class: this.elementClass }, this.imageSrc && (h("div", { key: 'adc39e5d21a39a3eb0e20bdedf633099dd582473', class: "spw-hero__image" }, this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (h("div", { key: '3c0afc15a2136e12d82f1573b883b2647b285184', 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: '32ee05de0504a6d2878aa73a98b091b037e3e636', icon: "fa-play" }))), h("img", { key: '454ec9656b477c711d9f47ee2fde60f88896c073', src: this.imageSrc, alt: this.imageAlt }))), h("div", { key: 'f08ab29fb01488b919e1103d080438f70cd01242', class: "spw-hero__overlay", style: this.overlayStyle }), h("div", { key: '55bbbff1d60f75d82588a7b04fd5e45d6c15e9d5', class: "spw-ds-container spw-hero__container" }, h("div", { key: '720b9dc8c990fa2502ed462b521ff3b38e14050b', class: "spw-hero__content" }, h("slot", { key: '4740754a1f249681a3be5633a92afad314cae7b5' }))))));
     }
 };
 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-illustration.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BYM_CUUH.js';
+import { r as registerInstance, h } from './index-CvfVJV8a.js';
 const spwIllustrationCss = "/*! 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-ds-illustration-max-width:400px;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-illustration svg{display:block;margin:0 auto;max-width:var(--spw-ds-illustration-max-width);width:100%}";

package/dist/esm/spw-iodda.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 } from './index-CvfVJV8a.js';
 async function fetchData(page = 1, itemsPerPage, search = '', filters) {
     const offset = (page - 1) * itemsPerPage;
@@ -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: '8b93f0d1c5c4bf1342c5c682dbea11ce56dc46ed' }, h("div", { key: 'f4740474c17a39f506607ee35dad07ad47352855', class: "spw-search-input" }, h("spw-text-field", { key: 'eb72520ce9dd50d2bdef6144140c3b8c0cc56801', "is-search": "true", size: "large", type: "text", value: this.searchTerm, placeholder: "Rechercher une d\u00E9marche", onValueChanged: event => this.handleSearchInput(event) })), h("div", { key: '0cb2c12aad184da141a85c2d424f0b03d709d3ca', 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: '18710131fdbeca1577c901894821453dbc45aee3', 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: '5a6a34b5ab2f271e10c4ab16f96f1e2872f5f74b', 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: 'd07bdf40876845befff74819dfcc560f7559e0a5' }, h("div", { key: 'e672b86e6a40fcf44dcf541a74043ba839962bcb', class: "spw-search-input" }, h("spw-text-field", { key: '8188c055a4b5c26db89c9bcf3c1d8b9e027af28b', "is-search": "true", size: "large", type: "text", value: this.searchTerm, placeholder: "Rechercher une d\u00E9marche", onValueChanged: event => this.handleSearchInput(event) })), h("div", { key: '859c051a49dce89d61370455b91b1f375b3845a5', 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: '3486d9e697634a9265b2e817cec2a4ecc8e057b7', 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: '5afd61360f7efbc4bad54b7139c128673dae700c', 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

@@ -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 } from './index-CvfVJV8a.js';
 const spwListDescriptionCss = "/*! 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-description{color:var(--spw-color-themes-grey-grey-800);font-size:16px;line-height:1.5;margin-top:6px}.spw-list-description--has-clamp{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.spw-list-description--clamp-1{-webkit-line-clamp:1;line-clamp:1}.spw-list-description--clamp-2{-webkit-line-clamp:2;line-clamp:2}.spw-list-description--clamp-3{-webkit-line-clamp:3;line-clamp:3}.spw-list-description--clamp-4{-webkit-line-clamp:4;line-clamp:4}.spw-list-description--clamp-5{-webkit-line-clamp:5;line-clamp:5}.spw-list-description--clamp-6{-webkit-line-clamp:6;line-clamp:6}.spw-list-description--clamp-7{-webkit-line-clamp:7;line-clamp:7}.spw-list-description--clamp-8{-webkit-line-clamp:8;line-clamp:8}.spw-list-description--clamp-9{-webkit-line-clamp:9;line-clamp:9}.spw-list-description--clamp-10{-webkit-line-clamp:10;line-clamp:10}";
@@ -15,7 +15,7 @@ const SpwListDescription = class {
         };
     }
     render() {
-        return (h(Host, { key: '634518836c0811971bc09f5962e223dbd4bffae7' }, h("div", { key: 'a90b29ba3c0d604be9eb5f818626d7f9ff77757e', class: this.elementClass }, h("slot", { key: '22d52ddbdc1ce1bec163b8dcb8e8ff8684b89e8b' }))));
+        return (h(Host, { key: 'cf388d9ebe6568cdd861ad78e7faf4830f19fcbb' }, h("div", { key: '346583ddf9172240ccc9c002153533cac0801aae', class: this.elementClass }, h("slot", { key: '633c3b8473b0793093c7088319475605a95ba490' }))));
     }
 };
 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';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CvfVJV8a.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: 'ed073d8a311e7762abe7c9a3e15145e62b809ea1' }, h("li", { key: 'be181668c35e5031470d42c649aa1ed9f30e39c0', class: this.elementClass }, this.category && (h("span", { key: '2733979fa2a147d7bdebd9477dd3300193db0735', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: 'c06e795789a3b70163e51dd5293d7e5cfddbf5b5', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '26ef5faaeea085bdff20e3ebfab7e5a3fb9666e4' }, attrs), h("slot", { key: 'd88cfb2c31de84f68f32655e60029030eee9f2df' })))));
+        return (h(Host, { key: 'ba16d0761a92e2b3df6b3a58262096f42d5f48db' }, h("li", { key: '90940d5dcf87c18988aa3511205a3802e16b5003', class: this.elementClass }, this.category && (h("span", { key: 'e3f68ab335024f9f795542e5aed9db7322fe0062', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: 'd5528c7b7ce93f13f0ebbd8adb17c258f016f289', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '24c2c33ba687bfb50bf8a98cb8db50364a417423' }, attrs), h("slot", { key: '5a23f09cbe1f7e84d1f64d0f82d924de6901451f' })))));
     }
     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~~,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,SAAS,GAAG,CAAA,MAAA,CAAQ;YAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;YAC5D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC;YAExE,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;AACxD,YAAA,YAAY,IAAI,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;YACzE,YAAY,IAAI,YAAY,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YACvE,kBAAkB,IAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;AACpE,YAAA,kBAAkB,IAAI,IAAI,CAAC,IAAI,IAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;YAC9E,kBAAkB,IAAI,kBAAkB,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;AACrF,SAAC,CAAC;;IAIJ,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;;IAIvB,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;IAIvB,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;IAItB,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;IAIvB,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;IAItB,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;IAIvB,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;IAIvB,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;AAGd,IAAA,UAAU,CAAC,SAAkB,EAAA;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAC5D,QAAA,IAAI,YAAY,IAAI,IAAI,CAAC,IAAI,EAAE;YAC7B,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC;;;AAIjD,IAAA,SAAS,CAAC,QAAiB,EAAA;QACjC,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAC5D,QAAA,IAAI,YAAY,IAAI,IAAI,CAAC,IAAI,EAAE;YAC7B,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC;;;AAIvD,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,0BAA0B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YACvC,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;AACzD,YAAA,CAAC,kBAAkB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;SACzC;;AAGH,IAAA,IAAY,eAAe,GAAA;QACzB,OAAO;AACL,YAAA,yBAAyB,EAAE,IAAI;AAC/B,YAAA,+BAA+B,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;AACpD,YAAA,oCAAoC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;SAC1D;;IAGH,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY;;;IAI5C,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,KAAK,GAAG,GAAG;AACrD,QAAA,MAAM,KAAK,GACT,OAAO,KAAK;AACV,cAAE;AACF,cAAE;gBACE,IAAI;gBACJ,MAAM;aACP;QACP,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,EACzB,IAAI,CAAC,QAAQ,KACZ,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,YAAY,EAAa,CAAA,OAAG,IAAI,CAAC,QAAQ,CAC/E,CACR,EACD,CAAC,CAAA,OAAO,qEAAK,KAAK,CAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACP,CACA;;;;;;;;"}
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';
+import { r as registerInstance, h, H as Host } from './index-CvfVJV8a.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: '27a216b5f2528a19a2d6ea1005da441945f60b3c' }, h("div", { key: 'd3563c6655136e698231eb9b592c13d60eb9ea47', class: this.elementClass }, this.icon && h("spw-icon", { key: 'bbe74eb639a3646587cf2a35bb103901a5ede59f', icon: this.icon }), h("div", { key: 'e6f8ac9c569ca843a082caf65cecb97ae5830614', class: "spw-list-title__content" }, h("div", { key: '0b12989d788bedc8393248c612f20e9bdf67bf05', class: "spw-list-title__content-text" }, h("slot", { key: '2c53dc6eaa074cd48e5f2bffe11a0390b077c2a4' }))))));
+        return (h(Host, { key: 'dfecd1a297eb0377aa352b20b172a1be449662d1' }, h("div", { key: '10c4ca90c889b8430ec1f07970d59dc86c37dbcd', class: this.elementClass }, this.icon && h("spw-icon", { key: 'ab9d74926b63e9a21ca8fa8313540994bab91635', icon: this.icon }), h("div", { key: '54ce53cac9bc360efd02e84b5cbbfe9437403543', class: "spw-list-title__content" }, h("div", { key: '3392b12514224f78d0616ed51efdae88c1157e31', class: "spw-list-title__content-text" }, h("slot", { key: 'eb85d0bda0f6a57101b949d2a8c6c15eeb7ab706' }))))));
     }
 };
 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-CvfVJV8a.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: '7474a92f800b0e42ee4f7ae928602fab40678129' }, h("ul", { key: 'bb478eb83d2b3533c70f74a6c4054bd5c8985883', class: this.elementClass }, h("slot", { key: 'ec64155dd2191f5f751611729b814e4228c19ec3' }))));
+        return (h(Host, { key: 'b868d8d0bf0bae73d210c5db603275f6bec30dca' }, h("ul", { key: 'fe572fd100862a568e5f0e37573aa84d4395a6b8', class: this.elementClass }, h("slot", { key: 'b82b0d010acf6ff5fa17b572e81c4bf7f26de3ae' }))));
     }
+    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-message.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BYM_CUUH.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CvfVJV8a.js';
 const getIcon = variant => {
   const icons = {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BYM_CUUH.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CvfVJV8a.js';
 /**
  * Copy/pasted from https://github.com/andreasbm/focus-trap
@@ -136,13 +136,13 @@ 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) {
         registerInstance(this, hostRef);
-        this.spwModalOpen = createEvent(this, "spwModalOpen");
-        this.spwModalClose = createEvent(this, "spwModalClose");
+        this.spwModalOpen = createEvent(this, "spwModalOpen", 7);
+        this.spwModalClose = createEvent(this, "spwModalClose", 7);
         /** Indique si la modal est ouverte ou fermée, mutable et reflétée dans le DOM */
         this.opened = false;
         this.showModal = this.opened || false;
@@ -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: 'ef3f979574368eb716f783a10b0df51de505844d' }, h("div", { key: 'd3de3986ed767588fbbc33771f5a2ec96950c814', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: 'e838b0d47874973d88bd325cadafcbccecd62e71', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '959a56f373b62d3905ca072f842270d50f7974e9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '5a4e4d7e92007969e2bdfbccb8a30901448edaa4', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: 'ff3c6bd78a3aa647a5fc10b007219bfa0a406fbc', class: "spw-modal__content" }, h("div", { key: '78448d8952820d8d1b32c8633642daca6e6eaa61', class: "spw-modal__header" }, h("h2", { key: '64cd4b7a37899ff59b94cdfaeb24841c185ff68d', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '6ccf7739a69cc24dd7d05ee73851bdc9391e63d0', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '588bb35bb2dc1cdff8d85911851fa3acbd2e36c4', class: "spw-modal__body" }, h("slot", { key: 'b9e689f2f08aa6456eaeb4481ac09bf7841ded24', name: "content" })), h("div", { key: '7d66d94b7de6b109d9897d44329c897822f70179', class: "spw-modal__buttons" }, h("slot", { key: '052f64558204a71b45cf367026c5213939645ba4', name: "buttons" })))), h("div", { key: '65632a2bcb8d66ab99f45a20e159caaf44a3cec7', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '9e3e30634541fcafb7fc66fa8e00678bae684707' }, h("div", { key: 'b4dcef56ea7c59092e224558a38c1a2a40a89736', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '6f7c486c3387eff83d85bc9429fa2c1d9239537a', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '04801016bfec8e672c5eb99320a1afc1716fc035', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'd71b7bbafa9374fab44ea7643821d5115a9a21fa', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '36ffef6093931370a47704712e3e4862dbe4cbca', class: "spw-modal__content" }, h("div", { key: 'f7a74e118baf8d3805eb6a234758decb178fc88e', class: "spw-modal__header" }, h("h2", { key: '7ccaccddd8086a9a24eb129ef8bb77fd4712d361', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: 'e1902ce88dddbf04a8c096e1419604f3a0f5fab3', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '783c7c1059232e6bcc1b7a33ae1af3ac66c77d1a', class: "spw-modal__body" }, h("slot", { key: 'cc630a9e30b282358bbb2bc8518aec27c2b7911f', name: "content" })), h("div", { key: '14caae8f1d1bfe2af4cb6ddd5eb0c0533f792b2a', class: "spw-modal__buttons" }, h("slot", { key: '316b126022440b5e0d28039ae54684dd944a59fd', name: "buttons" })))), h("div", { key: 'cb9819788d7cc8b09ae482326c5140e589c1465b', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {