@spw-ds/spw-stencil-library 1.15.0 → 1.17.0

package/dist/collection/components/spw-box/spw-box.js

@@ -13,23 +13,42 @@ export class SpwBox {
         this.padding = 'none';
         /** Permet de rendre le contenu de la box collapsible sur un breakpoint donné */
         this.isCollapsible = false;
-        /** Définit le breakpoint en dessous duquel la box est collapsible (sm: 460px, md: 768px, lg: 1024px, xl: 1350px,
-        xxl: 1770px, always: toujours collapsible) */
+        /** Définit le breakpoint en dessous duquel la box est collapsible (sm: 360px, md: 768px, lg: 1024px, xl: 1200px,
+        xxl: 1700px, always: toujours collapsible) */
         this.collapsibleBreakpoint = 'md';
         this.isOpen = false;
+        this.windowWidth = window.innerWidth;
+        this.contentScrollHeight = 0;
         this.toggle = () => {
             if (!this.isCollapsibleActive)
                 return;
             this.isOpen = !this.isOpen;
         };
+        this.setContentRef = (el) => {
+            var _a;
+            if (el === this.contentRef)
+                return;
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.contentRef = el;
+            if (!el)
+                return;
+            this.contentScrollHeight = el.offsetHeight;
+            this.resizeObserver = new ResizeObserver(() => {
+                this.contentScrollHeight = el.offsetHeight;
+            });
+            this.resizeObserver.observe(el);
+        };
+    }
+    onResize() {
+        this.windowWidth = window.innerWidth;
     }
     get isCollapsibleActive() {
         if (!this.isCollapsible)
             return false;
         if (this.collapsibleBreakpoint === 'always')
             return true;
-        const breakpoints = { sm: 460, md: 768, lg: 1024, xl: 1350, xxl: 1770 };
-        return window.innerWidth <= breakpoints[this.collapsibleBreakpoint];
+        const breakpoints = { sm: 360, md: 768, lg: 1024, xl: 1200, xxl: 1700 };
+        return this.windowWidth < breakpoints[this.collapsibleBreakpoint];
     }
     get hostClass() {
         return {
@@ -44,13 +63,13 @@ export class SpwBox {
             'spw-box--has-shadow': this.hasShadow,
             'spw-box--has-border': this.hasBorder,
             [`spw-box--padding-${this.padding}`]: this.padding !== 'none',
+            'spw-box--collapsible-active': this.isCollapsibleActive && !this.isOpen,
         };
     }
     render() {
-        var _a, _b;
         const hostStyle = this.stickyTop ? { '--spw-box-sticky-top': this.stickyTop } : undefined;
-        const contentStyle = this.isCollapsible ? { height: this.isOpen || !this.isCollapsibleActive ? `${(_b = (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0}px` : '0px' } : undefined;
-        return (h(Host, { key: 'd542225ff409f745c90e27452d30ac3a92634187', class: this.hostClass, style: hostStyle }, h("div", { key: 'a163a09341668f1c5a816493946721e9bda092d3', class: this.elementClass }, h("div", { key: '7a26421915460a04b7e058e724ae451f5267758b', class: { 'spw-box__header': true, 'spw-box__header--collapsible': this.isCollapsible }, onClick: this.toggle }, h("slot", { key: '0dc6e1f95bb94276f6dfd31cb4ed546a8c98ccd8', name: "header" }), this.isCollapsible && h("spw-icon", { key: '0149b3d3bf222ccc4a851a8053bbb1db08242202', icon: "fa-chevron-down", class: { 'spw-box__header-icon--open': this.isOpen } })), h("div", { key: '916792ede5446f2bfb961c9ba38f9fc402ba3de1', class: { 'spw-box__content': true, 'spw-box__content--collapsed': this.isCollapsible }, style: contentStyle, ref: el => (this.contentRef = el) }, h("slot", { key: '602aa1324df25731c5c8caadfa3f637b8d4f20b7' })))));
+        const clipperStyle = this.isCollapsibleActive ? { height: this.isOpen ? `${this.contentScrollHeight}px` : '0px' } : undefined;
+        return (h(Host, { key: '788d32484e30f9e2994fb4b8dce673286f8d3275', class: this.hostClass, style: hostStyle }, h("div", { key: '1ed797fbff5baf6779c00d0099c2fe9b5bbe73a0', class: this.elementClass, onClick: !this.isOpen ? this.toggle : undefined }, h("div", { key: '48bb1710bf62d9a6546ef31b48ee1e06f8547491', class: { 'spw-box__header': true, 'spw-box__header--collapsible': this.isCollapsibleActive }, onClick: this.isOpen ? this.toggle : undefined }, h("slot", { key: '7af6869c5e833133e596a36b6431756e72778eda', name: "header" }), this.isCollapsibleActive && h("spw-icon", { key: '578f5e5720f3a39c156f61cc8a2bd9efc84e496a', icon: "fa-chevron-down", class: { 'spw-box__header-icon--open': this.isOpen } })), h("div", { key: '49e2f1b37cb360ae81bc442e08d0b10386f3030a', class: { 'spw-box__content-clipper': this.isCollapsibleActive }, style: clipperStyle }, h("div", { key: '239a121e5182f3e665b1fd318021d8601491ac85', class: "spw-box__content", ref: this.setContentRef }, h("slot", { key: 'bd26b0fe7c3260b82eba613fca6e3ec432b28f4b' }))))));
     }
     static get is() { return "spw-box"; }
     static get encapsulation() { return "shadow"; }
@@ -217,7 +236,7 @@ export class SpwBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "D\u00E9finit le breakpoint en dessous duquel la box est collapsible (sm: 460px, md: 768px, lg: 1024px, xl: 1350px,\nxxl: 1770px, always: toujours collapsible)"
+                    "text": "D\u00E9finit le breakpoint en dessous duquel la box est collapsible (sm: 360px, md: 768px, lg: 1024px, xl: 1200px,\nxxl: 1700px, always: toujours collapsible)"
                 },
                 "getter": false,
                 "setter": false,
@@ -229,8 +248,19 @@ export class SpwBox {
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isOpen": {},
+            "windowWidth": {},
+            "contentScrollHeight": {}
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

package/dist/collection/components/spw-breadcrumb/spw-breadcrumb-item/spw-breadcrumb-item.js

@@ -46,7 +46,7 @@ export class SpwBreadcrumbItem {
         this.el.classList.add(`spw-breadcrumb-item--${this.surface}`);
     }
     render() {
-        return (h(Host, { key: 'b2dfcb9ee34d3e6b60759bfec969e4f5618cc721' }, h("div", { key: '3064ddc686b0113f131ca34e50f259163f436cff', role: "listitem", class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface, title: this.label }, this.truncated || h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page", title: this.label }, this.truncated || h("slot", null))))));
+        return (h(Host, { key: 'f64a5f5a918e05f9d5a9a81e4d2c57418d7523e1' }, h("div", { key: '343508e3765ce67ca3a72cdd673b5149b4923044', role: "listitem", class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface, title: this.label }, this.truncated || h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page", title: this.label }, this.truncated || h("slot", null))))));
     }
     static get is() { return "spw-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-breadcrumb/spw-breadcrumb.css

@@ -409,8 +409,7 @@ template {
   top: 50%;
   transform: translateY(-50%);
   left: 0;
-  font-family: var(--spw-ds-font-icons-solid);
-  font-weight: 700;
+  font-family: var(--spw-ds-font-icons-regular);
   content: "\f060";
   font-size: 14px;
 }

package/dist/collection/components/spw-breadcrumb/spw-breadcrumb.js

@@ -43,7 +43,7 @@ export class SpwBreadcrumb {
             [`spw-breadcrumb--font-size-${this.fontSize}`]: true,
             [`spw-breadcrumb--${this.variant}`]: true,
         };
-        return (h(Host, { key: 'a596323b098cc1ced9679bfdc0e7bf6d1b099b91' }, h("nav", { key: '2acde0b7352dae535e10dcb213a58f71babcef24', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: 'a20afd807b7bf47254bba0b1f016e3adf27a035c', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: 'ffe6bf868ce252fece46dbc0637e933994d01148' })))));
+        return (h(Host, { key: '861030111eef4e2edacdd344424a1195688c842a' }, h("nav", { key: '91c4e99a0d9f701adef2f18e313c7f963cf01f4f', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: 'df3e61bdfed35994ffa68a177b3baf2612b30fa6', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: 'c607d42f810a001e41926f17b8fc60eba327071f' })))));
     }
     static get is() { return "spw-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-button/spw-button.css

@@ -525,10 +525,20 @@ template {
   color: var(--spw-ds-primary);
   text-decoration: var(--spw-button-text-decoration-tertiary) !important;
   text-underline-offset: 2px;
+  white-space: normal;
+  text-wrap: wrap;
+  text-align: left;
+  line-height: 1.3;
+}
+.spw-button--tertiary .spw-button__inner-text {
+  justify-content: flex-start;
 }
 .spw-button--tertiary:not([disabled]):hover, .spw-button--tertiary:not([disabled]):active {
   text-decoration-thickness: 2px !important;
 }
+.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-ds-variant);
+}
 .spw-button--tertiary:not([disabled]):active {
   color: var(--spw-ds-active);
 }
@@ -551,34 +561,20 @@ template {
 }
 
 /* Surface dark */
-.spw-button--surface-dark {
-  box-shadow: var(--spw-effect-elevation-8);
-}
-.spw-button--surface-dark:not([disabled]):active {
-  box-shadow: var(--spw-effect-elevation-active-0), var(--spw-effect-elevation-active-1), var(--spw-effect-elevation-active-2);
-}
-.spw-button--surface-dark[disabled] {
-  box-shadow: none;
-}
 .spw-button--surface-dark.spw-button--primary {
   color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
+  border-color: transparent;
   background: var(--spw-ds-white);
 }
 .spw-button--surface-dark.spw-button--primary:not([disabled]):hover {
-  background: transparent;
-  color: var(--spw-ds-white);
-  border-color: var(--spw-ds-white);
+  background: var(--spw-colors-support-grey-grey-300);
 }
 .spw-button--surface-dark.spw-button--primary:not([disabled]):active {
-  background: transparent;
-  color: var(--spw-colors-support-grey-grey-500);
-  border-color: var(--spw-colors-support-grey-grey-500);
+  background: var(--spw-colors-support-grey-grey-400);
 }
 .spw-button--surface-dark.spw-button--primary[disabled] {
-  border-color: var(--spw-colors-support-grey-grey-700);
-  background: var(--spw-colors-support-grey-grey-700);
   color: var(--spw-colors-support-grey-grey-800);
+  background: var(--spw-colors-support-grey-grey-600);
 }
 .spw-button--surface-dark.spw-button--primary spw-loading {
   --spw-loading-border-color: var(--spw-colors-support-grey-grey-300);
@@ -590,19 +586,14 @@ template {
   border-color: var(--spw-ds-white);
 }
 .spw-button--surface-dark.spw-button--secondary:not([disabled]):hover {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
-  background: var(--spw-ds-white);
+  background: rgba(0, 0, 0, 0.3);
 }
 .spw-button--surface-dark.spw-button--secondary:not([disabled]):active {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-colors-support-grey-grey-400);
-  background: var(--spw-colors-support-grey-grey-400);
+  background: rgba(0, 0, 0, 0.5);
 }
 .spw-button--surface-dark.spw-button--secondary[disabled] {
   border-color: var(--spw-colors-support-grey-grey-700);
-  background: var(--spw-colors-support-grey-grey-700);
-  color: var(--spw-colors-support-grey-grey-800);
+  color: var(--spw-colors-support-grey-grey-700);
 }
 .spw-button--surface-dark.spw-button--secondary spw-loading {
   --spw-loading-border-color: rgba(255, 255, 255, 0.2);
@@ -615,6 +606,9 @@ template {
 .spw-button--surface-dark.spw-button--tertiary:not([disabled]):hover, .spw-button--surface-dark.spw-button--tertiary:not([disabled]):active {
   box-shadow: none;
 }
+.spw-button--surface-dark.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-ds-white);
+}
 .spw-button--surface-dark.spw-button--tertiary:not([disabled]):active {
   color: var(--spw-ds-primary);
 }
@@ -627,35 +621,21 @@ template {
 }
 
 /* Surface primary */
-.spw-button--surface-primary {
-  box-shadow: none;
-}
-.spw-button--surface-primary:not([disabled]):active {
-  box-shadow: none;
-}
-.spw-button--surface-primary[disabled] {
-  box-shadow: none;
-}
 .spw-button--surface-primary.spw-button--primary {
   color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
+  border-color: transparent;
   background: var(--spw-ds-white);
 }
 .spw-button--surface-primary.spw-button--primary:not([disabled]):hover {
-  background: transparent;
-  color: var(--spw-ds-white);
-  border-color: var(--spw-ds-white);
+  background: rgba(255, 255, 255, 0.8);
+  border-color: transparent;
 }
 .spw-button--surface-primary.spw-button--primary:not([disabled]):active {
-  background: transparent;
-  color: white;
-  border-color: white;
-  opacity: 0.9;
+  background: var(--spw-ds-white);
+  border-color: transparent;
 }
 .spw-button--surface-primary.spw-button--primary[disabled] {
-  border-color: white;
-  background: white;
-  color: var(--spw-colors-support-grey-grey-600);
+  color: var(--spw-colors-support-grey-grey-700);
   opacity: 0.5;
 }
 .spw-button--surface-primary.spw-button--primary spw-loading {
@@ -668,20 +648,12 @@ template {
   border-color: var(--spw-ds-white);
 }
 .spw-button--surface-primary.spw-button--secondary:not([disabled]):hover {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
-  background: var(--spw-ds-white);
+  background: rgba(0, 0, 0, 0.2);
 }
 .spw-button--surface-primary.spw-button--secondary:not([disabled]):active {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: white;
-  background: white;
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.3);
 }
 .spw-button--surface-primary.spw-button--secondary[disabled] {
-  border-color: white;
-  background: white;
-  color: var(--spw-colors-support-grey-grey-600);
   opacity: 0.5;
 }
 .spw-button--surface-primary.spw-button--secondary spw-loading {
@@ -689,15 +661,13 @@ template {
   --spw-loading-spinner-color: white;
 }
 .spw-button--surface-primary.spw-button--tertiary {
-  box-shadow: none;
   color: var(--spw-ds-white);
 }
-.spw-button--surface-primary.spw-button--tertiary:not([disabled]):hover, .spw-button--surface-primary.spw-button--tertiary:not([disabled]):active {
-  box-shadow: none;
+.spw-button--surface-primary.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-ds-white);
 }
 .spw-button--surface-primary.spw-button--tertiary:not([disabled]):active {
-  color: white;
-  opacity: 0.9;
+  color: var(--spw-ds-active);
 }
 .spw-button--surface-primary.spw-button--tertiary[disabled] {
   color: white;
@@ -714,22 +684,34 @@ template {
   background: var(--spw-colors-support-grey-grey-500);
 }
 .spw-button--surface-light.spw-button--secondary {
+  background: transparent;
   color: var(--spw-colors-support-grey-grey-900);
-  background: var(--spw-ds-white);
+  border-color: var(--spw-colors-support-grey-grey-900);
 }
 .spw-button--surface-light.spw-button--secondary:not([disabled]):hover {
-  background: var(--spw-colors-support-grey-grey-300);
+  color: var(--spw-colors-support-grey-grey-900);
+  border-color: var(--spw-colors-support-grey-grey-900);
+  background: rgba(0, 0, 0, 0.2);
 }
 .spw-button--surface-light.spw-button--secondary:not([disabled]):active {
-  background: var(--spw-colors-support-grey-grey-500);
+  color: white;
+  border-color: var(--spw-colors-support-grey-grey-900);
+  background: var(--spw-colors-support-grey-grey-900);
 }
 .spw-button--surface-light.spw-button--secondary[disabled] {
+  border-color: var(--spw-colors-support-grey-grey-600);
   color: var(--spw-colors-support-grey-grey-600);
-  background: var(--spw-colors-support-grey-grey-500);
+}
+.spw-button--surface-light.spw-button--secondary spw-loading {
+  --spw-loading-border-color: rgba(255, 255, 255, 0.2);
+  --spw-loading-spinner-color: white;
 }
 .spw-button--surface-light.spw-button--tertiary {
   color: var(--spw-colors-support-grey-grey-900);
 }
+.spw-button--surface-light.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-colors-support-grey-grey-900);
+}
 .spw-button--surface-light.spw-button--tertiary:not([disabled]):active {
   color: var(--spw-ds-primary);
 }

package/dist/collection/components/spw-button/spw-button.js

@@ -109,7 +109,7 @@ export class SpwButton {
             'aria-label': this.accAriaLabel || this.name || slotText || 'Label',
             'aria-disabled': isDisabled ? 'true' : null,
         };
-        return (h(TagType, Object.assign({ key: 'af8ac1a8762a7da373014f322ee004297a8295f5' }, attrs, { ref: (el) => (this.nativeEl = el), class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: 'dc40b975fc312377bcbdc89ee1e0da4707893b13', class: "spw-button__inner" }, h("div", { key: 'c5a397c631fd9984fca6f711b1cc890cf1516f79', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: '92e532897aa0f62a2c1927026b15a7e81307256c' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: 'f7ae144bc041a0fa7d189a532a069cf7ed3e3aa5', text: "" })));
+        return (h(TagType, Object.assign({ key: 'e8413b7bedacc2d4f6f2b8d676eb6d59fd4055ed' }, attrs, { ref: (el) => (this.nativeEl = el), class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: 'eda3ddaf848756c60c64279efae141ae1a22f1df', class: "spw-button__inner" }, h("div", { key: '2d3c979bf6d2998d9f3eec6dddf1b58d23e27cbf', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: 'ba4f377ef77ca4f37a691ef72e117503ffac2958' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: '59561ea5f18844639de6b624e96f2ba3c2525f85', text: "" })));
     }
     static get is() { return "spw-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-content/spw-card-content.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { formatDate } from "../../../utils/utils";
 export class SpwCardContent {
     render() {
-        return (h("div", { key: '2b3a9a4e065774bcd5252bedbbc59972a02a716d', class: "spw-card-content" }, this.tag && h("span", { key: 'a60ef25fddee06ea80394b8c630450e924dd150d', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: 'fe63cd8631b889b23b703e5751d508acd5e10669', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: 'ff65fca4b713ac34d8ed0dd4d7e2337b214a0124' })));
+        return (h("div", { key: '6f4638eb1e8f4559c5680b8f65794421008af67d', class: "spw-card-content" }, this.tag && h("span", { key: '17819e9631a23ab975b29f98c8c28aba7c067a02', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: '0b8ab265493a816cb2865ede68eed3cbd90068b6', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: '47d4b9b10df9698d97b3518b76bc760badf350df' })));
     }
     static get is() { return "spw-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-excerpt/spw-card-excerpt.js

@@ -13,7 +13,7 @@ export class SpwCardExcerpt {
         };
     }
     render() {
-        return (h(Host, { key: '382c610ee81d190b085f243921b0265cc43c27d3' }, h("div", { key: '98e7cc2cc710a8ce0fd50d9b321a964a2ab2e07d', class: this.elementClass }, h("slot", { key: '99a6fc954a3710997f688ff5518cee11318f4a24' }))));
+        return (h(Host, { key: '4dda2eb94a01dbbf2dbc49b8ae9fa3e8168f2826' }, h("div", { key: '666274920caf145e18c2115a7e228826cd5d896e', class: this.elementClass }, h("slot", { key: '67a54073067d7240b415466d98d1a495e086b293' }))));
     }
     static get is() { return "spw-card-excerpt"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-image/spw-card-image.js

@@ -54,7 +54,7 @@ export class SpwCardImage {
         if (this.imageFit) {
             style['--spw-card-image-object-fit'] = this.imageFit;
         }
-        return (h("div", { key: 'e4cfa022f3319a0afd6d47d088d1ca9bd0de906b', class: this.elementClass, style: style }, this.label && h("span", { key: '4022dba885fba56e9b590be013cd6420912ae918', class: "spw-card-image__label" }, this.label), h("slot", { key: 'cbf151ddf4db09a88aa2b177d09a87586b1b5f9f' }), h("div", { key: '81ab97574ec5a91605cebee5c6dc77df4e6c3cb2', class: "spw-card-image__icon" }, h("spw-icon", { key: 'c5e4be497be3fa106e4b6c079ebe2d36c536064e', icon: this.hoverIcon }))));
+        return (h("div", { key: '63fd7dc51e934f45c7a54e60c83410351e4c6f76', class: this.elementClass, style: style }, this.label && h("span", { key: 'baa9943ec3e165129353f554119d9ae075054b53', class: "spw-card-image__label" }, this.label), h("slot", { key: '5ee91af7b9efe54b56cd76e087122988fb955f99' }), h("div", { key: 'f1e6dda447d3f112f37ad1663a50dfc7cac15fc1', class: "spw-card-image__icon" }, h("spw-icon", { key: 'b8692b751c0be959589cc445eab3732d99a48868', icon: this.hoverIcon }))));
     }
     static get is() { return "spw-card-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-subtag-item/spw-card-subtag-item.js

@@ -12,7 +12,7 @@ export class SpwCardSubtagItem {
         };
     }
     render() {
-        return (h(Host, { key: '069a3dd57332cbc07497570790dc0c6b43cd3c55' }, h("span", { key: 'f888db1b02f2a29492c56995c293b2c811f66a51', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: 'ecd74f3803b7f5ba4ea3b8678adce16f270bffa3' }))));
+        return (h(Host, { key: '7c20e182434e8dc1a34babbb67ed261c2fd8e525' }, h("span", { key: '93cabd65e045ba3af65cd0037effb567d592197a', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: 'dd8e86278ed00180c967a73cdccff14ac2de4a6f' }))));
     }
     static get is() { return "spw-card-subtag-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-subtags/spw-card-subtags.js

@@ -26,7 +26,7 @@ export class SpwCardSubtags {
         };
     }
     render() {
-        return (h(Host, { key: 'dd1415e28ab658b479fe353b27b1b63394d06b34' }, h("div", { key: '46cd99dde752fd3e206c449457e294201568a006', class: this.elementClass }, h("slot", { key: '5fa75e7d8a990e434c4306ca88253b88ea237f84' }))));
+        return (h(Host, { key: 'bcb358ab0f2730b7bf2ceaf5d03e6cdc50f80874' }, h("div", { key: '2ba43b42a850f29d5dd77ee1555d2917fef3e2c1', class: this.elementClass }, h("slot", { key: '227e22c519166ba20930f2a0651fe02bb3445886' }))));
     }
     static get is() { return "spw-card-subtags"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-card/spw-card-title/spw-card-title.css

@@ -363,6 +363,54 @@ template {
 .spw-card-title {
   line-height: 1.3;
   font-weight: 700;
+}
+.spw-card-title--has-clamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
+.spw-card-title--clamp-1 {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+}
+.spw-card-title--clamp-2 {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+.spw-card-title--clamp-3 {
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+}
+.spw-card-title--clamp-4 {
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+}
+.spw-card-title--clamp-5 {
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+}
+.spw-card-title--clamp-6 {
+  -webkit-line-clamp: 6;
+  line-clamp: 6;
+}
+.spw-card-title--clamp-7 {
+  -webkit-line-clamp: 7;
+  line-clamp: 7;
+}
+.spw-card-title--clamp-8 {
+  -webkit-line-clamp: 8;
+  line-clamp: 8;
+}
+.spw-card-title--clamp-9 {
+  -webkit-line-clamp: 9;
+  line-clamp: 9;
+}
+.spw-card-title--clamp-10 {
+  -webkit-line-clamp: 10;
+  line-clamp: 10;
+}
+.spw-card-title {
   font-size: 20px;
   transition: all 0.3s ease;
   color: var(--spw-color-themes-grey-grey-900);

package/dist/collection/components/spw-card/spw-card-title/spw-card-title.js

@@ -3,9 +3,19 @@ export class SpwCardTitle {
     constructor() {
         /** Code hexadécimal de la bordure sous le titre (à appliquer sur spw-card-title si la variante de la carte est "people") */
         this.borderColor = '';
+        /** Permet de limiter ou pas le nombre de lignes affichées */
+        this.lineClamp = 'none';
+    }
+    get elementClass() {
+        const hasLineClamp = this.lineClamp !== 'none';
+        return {
+            'spw-card-title': true,
+            'spw-card-title--has-clamp': hasLineClamp,
+            [`spw-card-title--clamp-${this.lineClamp}`]: hasLineClamp,
+        };
     }
     render() {
-        return (h(Host, { key: '6bb60b7bfda451d86156271bfcac19d62867ed08', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: '9f1f616fef2f6a0b519bce3ad420795e8fa4b38f', class: "spw-card-title" }, h("span", { key: 'df69580022638f2c34a9cbeedbb626e7ecb9fa4f', class: "spw-card-title__text" }, h("slot", { key: '57b0a399404c3d8866238bc3d87f17bc3a582522' })))));
+        return (h(Host, { key: 'b02f7913e237b6988b6b88c00929a0623d16c607', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: 'ec1060047ff1cd2883f1e475791f63fc381fe017', class: this.elementClass }, h("span", { key: '87465ba67f5dbea02e7c2545acb3eb6bdc2616b5', class: "spw-card-title__text" }, h("slot", { key: '442e0b3f178f4ba1195eafc3bd24d6f0af3c9553' })))));
     }
     static get is() { return "spw-card-title"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +50,26 @@ export class SpwCardTitle {
                 "reflect": false,
                 "attribute": "border-color",
                 "defaultValue": "''"
+            },
+            "lineClamp": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'none'",
+                    "resolved": "\"none\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet de limiter ou pas le nombre de lignes affich\u00E9es"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "line-clamp",
+                "defaultValue": "'none'"
             }
         };
     }

package/dist/collection/components/spw-card/spw-card.js

@@ -130,7 +130,7 @@ export class SpwCard {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': this.disabled ? 'true' : null,
         };
-        return (h(Host, { key: 'e0c3cdd9da2dbe327323418a2ce8886084b42d91', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '44b922611365e2ea2a026d064f933deb5365ead6', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '721a1594f257a751ba5148395c72a4757b6e157b' }, attrs, { class: { 'spw-card__dates': true, 'spw-card__dates--range': !!(dateStart && dateEnd), 'spw-card__dates--single': !!(dateStart && !dateEnd) } }), dateStart && (h("div", { key: '6348b9aa873b4fb163a610ac9a5ebf834b4b337c', class: "spw-card__date-item" }, h("div", { key: 'b9622320dcffb6641510f46fe8065b4d8a19b482', class: "spw-card__date-content" }, dateEnd && h("span", { key: 'ab97a4b2eb85776483fd13370c36d8d6e2037377', class: "spw-card__date-label" }, this.fromLabel), this.formatDate(dateStart)))), dateEnd && (h("div", { key: 'd5d886efce8f6b49a1fdf7b73d207e1e4fef10f9', class: "spw-card__date-item" }, h("div", { key: '7b10129d916c49fb02abcfb2cc190f092c0dd4b7', class: "spw-card__date-content" }, h("span", { key: '569a278970fa7a1cbe4fae4816e96b90ec51a54c', class: "spw-card__date-label" }, this.toLabel), this.formatDate(dateEnd)))))), h(TagType, Object.assign({ key: '910a82e7567ba8c4cdbe76133a8664dade563ce4' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '9065f8b373dfd6bbc69733a283509ccd0db3d8b9' })))));
+        return (h(Host, { key: 'f95a6ae6c3605ceedbd161b4d7fd6ccb32b5c9a5', class: { '--is-full-height': this.fullHeight } }, h("article", { key: 'c0f5558843980898fc024c6a58ad4c5fc0874dae', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: 'b6f5ff06ba07a44d192ccc1280f4b1ec91aec7ae' }, attrs, { class: { 'spw-card__dates': true, 'spw-card__dates--range': !!(dateStart && dateEnd), 'spw-card__dates--single': !!(dateStart && !dateEnd) } }), dateStart && (h("div", { key: '38739600168e556e1825a952d59d6b56dddfbd38', class: "spw-card__date-item" }, h("div", { key: 'e2d976245e9149f19289ed6760f9616d252bc0df', class: "spw-card__date-content" }, dateEnd && h("span", { key: 'cad7e3030d55c6784fbf8482b26d02c1090a2494', class: "spw-card__date-label" }, this.fromLabel), this.formatDate(dateStart)))), dateEnd && (h("div", { key: '5cd8ac811280cf3eb15a088f4d50d1c39d07b065', class: "spw-card__date-item" }, h("div", { key: 'd650d7ab355881400f9f3e2b2ab1e80dc5cd8e19', class: "spw-card__date-content" }, h("span", { key: 'b8c923502709ed1b6be4f548076128e8559d6c34', class: "spw-card__date-label" }, this.toLabel), this.formatDate(dateEnd)))))), h(TagType, Object.assign({ key: '38734f2432f59b83af58ad7b7600e529fe8263b0' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '70cc28a5bf5206cc6a9c17297dd2dcaca895d8b0' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-checkbox/spw-checkbox.js

@@ -75,7 +75,7 @@ export class SpwCheckbox {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: '42165c5a437c03c55486b9468ef089bdae0466d0', class: "spw-checkbox" }, h("input", { key: '1d5b10952a932ab1f1b5f2aa08b7cb0b943918bc', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'd1a358a567b5d899e28badefd60e20fa848435de', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'b38fd399291ab9cdfe879b55f42271cbd3510254' }))), h("div", { key: '89a613bd0000c0d2b599c9865c4e91f9bf510cf6', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: 'f047f0ce2dc2cd66116a79759a28c38b252517d6', icon: this.icon }))));
+        return (h("div", { key: '18ccf771e46503992b59da08f9bdf64096d3fc9a', class: "spw-checkbox" }, h("input", { key: 'ec4e470b407134abc5d71e54afa72275ea11999b', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '841289771f521f5a501b689b45af02753bfafbed', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'a74b6cf82bfc54abf2bf5ebb81f9e2874cc74833' }))), h("div", { key: '4958afb920af7171e324b1bf3c7a2fb25ec11c04', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: '3600734ca78300af19c0ee9eaf20ae6aead1aad8', icon: this.icon }))));
     }
     static get is() { return "spw-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-custom-select/spw-custom-select.css

@@ -509,7 +509,7 @@ template {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 11;
+  z-index: 14;
   width: 100%;
   margin-top: 1px;
   display: flex;