@spw-ds/spw-stencil-library 1.8.0 → 1.9.0

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

@@ -377,7 +377,9 @@ template {
 
 :host {
   display: block;
+  /** @prop --spw-loading-border-color: Couleur de la bordure du loader */
   --spw-loading-border-color: var(--spw-color-themes-grey-grey-200);
+  /** @prop --spw-loading-spinner-color: Couleur du spinner */
   --spw-loading-spinner-color: var(--spw-ds-primary);
 }
 

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -377,24 +378,43 @@ template {
 
 :host {
   display: block;
+  /** @prop --spw-message-margin-top-content: Marge supérieure du contenu */
   --spw-message-margin-top-content: 12px;
+  /** @prop --spw-message-title-color: Couleur du titre */
   --spw-message-title-color: var(--spw-colors-support-grey-grey-900);
+  /** @prop --spw-message-body-color: Couleur du corps du message */
   --spw-message-body-color: var(--spw-colors-support-grey-grey-900);
+  /** @prop --spw-message-font-size: Taille de police du message */
   --spw-message-font-size: 16px;
+  /** @prop --spw-message-default-background-color: Couleur de fond par défaut */
   --spw-message-default-background-color: var(--spw-colors-support-grey-grey-100);
+  /** @prop --spw-message-default-icon-color: Couleur de l'icône par défaut */
   --spw-message-default-icon-color: var(--spw-colors-support-grey-grey-900);
+  /** @prop --spw-message-default-border-color: Couleur de bordure par défaut */
   --spw-message-default-border-color: var(--spw-colors-support-grey-grey-300);
+  /** @prop --spw-message-success-background-color: Couleur de fond pour le variant success */
   --spw-message-success-background-color: var(--spw-colors-multi-branding-green-green-50);
+  /** @prop --spw-message-success-icon-color: Couleur de l'icône pour le variant success */
   --spw-message-success-icon-color: var(--spw-colors-multi-branding-green-green-600);
+  /** @prop --spw-message-success-border-color: Couleur de bordure pour le variant success */
   --spw-message-success-border-color: var(--spw-colors-multi-branding-green-green-300);
+  /** @prop --spw-message-alert-background-color: Couleur de fond pour le variant alert */
   --spw-message-alert-background-color: var(--spw-colors-multi-branding-red-red-50);
+  /** @prop --spw-message-alert-icon-color: Couleur de l'icône pour le variant alert */
   --spw-message-alert-icon-color: var(--spw-colors-multi-branding-red-red-accent-3);
+  /** @prop --spw-message-alert-border-color: Couleur de bordure pour le variant alert */
   --spw-message-alert-border-color: var(--spw-colors-multi-branding-red-red-300);
+  /** @prop --spw-message-info-background-color: Couleur de fond pour le variant info */
   --spw-message-info-background-color: var(--spw-colors-multi-branding-blue-blue-50);
+  /** @prop --spw-message-info-icon-color: Couleur de l'icône pour le variant info */
   --spw-message-info-icon-color: var(--spw-colors-multi-branding-blue-blue-accent-3);
+  /** @prop --spw-message-info-border-color: Couleur de bordure pour le variant info */
   --spw-message-info-border-color: var(--spw-colors-multi-branding-blue-blue-300);
+  /** @prop --spw-message-warning-background-color: Couleur de fond pour le variant warning */
   --spw-message-warning-background-color: #ffeee0;
+  /** @prop --spw-message-warning-icon-color: Couleur de l'icône pour le variant warning */
   --spw-message-warning-icon-color: #d84300;
+  /** @prop --spw-message-warning-border-color: Couleur de bordure pour le variant warning */
   --spw-message-warning-border-color: #f4b095;
 }
 

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

@@ -391,6 +391,22 @@ template {
   z-index: 1060;
   overflow-y: auto;
 }
+.spw-modal::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.spw-modal::-webkit-scrollbar-thumb {
+  background: var(--spw-color-themes-grey-grey-400);
+  border-radius: 20px;
+  border: 4px solid var(--spw-ds-white);
+}
+.spw-modal::-webkit-scrollbar-track {
+  background: var(--spw-ds-white);
+}
+.spw-modal {
+  scrollbar-face-color: var(--spw-color-themes-grey-grey-400);
+  scrollbar-track-color: var(--spw-ds-white);
+}
 .spw-modal--opened {
   display: flex;
 }
@@ -439,6 +455,22 @@ template {
   max-height: 90vh;
   overflow-y: auto;
 }
+.spw-modal__content::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.spw-modal__content::-webkit-scrollbar-thumb {
+  background: var(--spw-color-themes-grey-grey-400);
+  border-radius: 20px;
+  border: 4px solid var(--spw-ds-white);
+}
+.spw-modal__content::-webkit-scrollbar-track {
+  background: var(--spw-ds-white);
+}
+.spw-modal__content {
+  scrollbar-face-color: var(--spw-color-themes-grey-grey-400);
+  scrollbar-track-color: var(--spw-ds-white);
+}
 .spw-modal--sticky-buttons .spw-modal__content {
   overflow-y: visible;
 }
@@ -455,16 +487,28 @@ template {
 .spw-modal__header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
   padding: 24px;
   padding-bottom: 0;
   margin-top: 6px;
+  gap: 12px;
+  flex-wrap: nowrap;
   margin-bottom: 12px;
   box-sizing: border-box;
   border-radius: 1px 1px 0px 0px;
   color: var(--spw-colors-support-grey-grey-900);
 }
 
+.spw-modal__title-container {
+  display: flex;
+  gap: 8px;
+}
+
+.spw-modal__alert-icon {
+  flex-shrink: 0;
+  line-height: 1.5;
+}
+
 .spw-modal__caption {
   overflow: hidden;
   white-space: pre-wrap;
@@ -486,14 +530,31 @@ template {
 }
 
 .spw-modal__close-button {
-  position: absolute;
-  top: 12px;
-  right: 12px;
   cursor: pointer;
-  font-size: 21px;
+  z-index: 999;
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: center;
+  background: white;
+  padding: 3px 6px;
 }
-.spw-modal__close-button:hover {
-  opacity: 0.7;
+.spw-modal__close-button spw-link {
+  --spw-link-color: var(--spw-colors-support-grey-grey-900);
+  --spw-link-display: flex;
+}
+.spw-modal__close-button--sticky {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 0 0 0 4px;
+  padding: 8px;
+  border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);
+  border-left: 1px solid var(--spw-colors-support-grey-grey-300);
+}
+.spw-modal__close-button--sticky spw-link {
+  font-size: 14px;
 }
 
 .spw-modal__body {
@@ -507,6 +568,22 @@ template {
 .spw-modal--sticky-buttons .spw-modal__body {
   overflow-y: auto;
 }
+.spw-modal--sticky-buttons .spw-modal__body::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.spw-modal--sticky-buttons .spw-modal__body::-webkit-scrollbar-thumb {
+  background: var(--spw-color-themes-grey-grey-400);
+  border-radius: 20px;
+  border: 4px solid var(--spw-ds-white);
+}
+.spw-modal--sticky-buttons .spw-modal__body::-webkit-scrollbar-track {
+  background: var(--spw-ds-white);
+}
+.spw-modal--sticky-buttons .spw-modal__body {
+  scrollbar-face-color: var(--spw-color-themes-grey-grey-400);
+  scrollbar-track-color: var(--spw-ds-white);
+}
 
 .spw-modal__buttons {
   padding-top: 12px;

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

@@ -8,15 +8,18 @@ export class SpwModal {
         this.showModal = this.opened || false;
         /** Titre de la modal */
         this.caption = 'Titre de la modal';
+        /** Texte du bouton de fermeture */
+        this.closeButtonText = 'Fermer';
         /** Indique si la fermeture de la modal est possible en cliquant sur l'overlay */
         this.closeOnOverlayClick = true;
         /** Rend les boutons en bas de la modal "collants" (toujours visibles) si vrai */
         this.stickyButtons = false;
         /** Définit la taille de la modal : 'small', 'medium', 'large' ou 'fluid' */
         this.size = 'small';
-        /** Icône d'alerte à afficher dans la modal */
+        /** Icône d'alerte à afficher dans la modal (référence font awesome) */
         this.alertIcon = '';
         this.slotButtonsPresent = false;
+        this.isCloseButtonSticky = false;
         /** Indique si le bouton de fermeture est visible */
         this.showCloseButton = true;
         this.focusableElements = [];
@@ -40,9 +43,12 @@ export class SpwModal {
                 }
             }
         };
-        this.handleTopFocus = () => {
-            this.attemptFocus(this.getLastFocusableElement());
-        };
+        // private getLastFocusableElement(): HTMLElement | null {
+        //   return this.focusableElements[this.focusableElements.length - 1];
+        // }
+        // private handleTopFocus = () => {
+        //   this.attemptFocus(this.getLastFocusableElement());
+        // };
         this.handleBottomFocus = () => {
             this.attemptFocus(this.getFirstFocusableElement());
         };
@@ -51,6 +57,11 @@ export class SpwModal {
                 this.doBeforeClose('ESCAPE_KEY');
             }
         };
+        this.handleContentScroll = () => {
+            if (this.modalContent) {
+                this.isCloseButtonSticky = this.modalContent.scrollTop >= 60;
+            }
+        };
     }
     /**
      * Méthode publique pour fermer la modal programmatiquement
@@ -80,9 +91,6 @@ export class SpwModal {
     getFirstFocusableElement() {
         return this.focusableElements[0];
     }
-    getLastFocusableElement() {
-        return this.focusableElements[this.focusableElements.length - 1];
-    }
     attemptFocus(element) {
         if (element == null) {
             setTimeout(() => {
@@ -102,9 +110,8 @@ export class SpwModal {
             });
             anim.addEventListener('finish', () => {
                 setTimeout(() => {
-                    var _a, _b;
-                    (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.focus();
-                    (_b = this.getLastFocusableElement()) === null || _b === void 0 ? void 0 : _b.blur();
+                    // this.getLastFocusableElement()?.focus();
+                    // this.getLastFocusableElement()?.blur();
                 }, 0);
                 this.spwModalOpen.emit();
             });
@@ -159,7 +166,10 @@ export class SpwModal {
         };
     }
     render() {
-        return (h(Host, { key: '2c6c12d99f2c2c4000c586ebc4a1b20b1eb9c885' }, h("div", { key: 'f468b9ac24e2546c79a841e42c4c0cc47f9691c5', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '1b29e7abe144ada0f898792ca39f9b9804ebfb09', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'b23d411215ab12bb449777813b490c3233663d79', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '6b7a15bcfe06b7eb38dbaa0822353f725e0f4e06', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '2b4f9350f98a92f6572f97614d4e1c29b5802d5d', class: "spw-modal__content" }, h("div", { key: 'ac35e915f853c9113bb945e02af8247820894d27', class: "spw-modal__header" }, h("h2", { key: '5e9aa7baab910b7c36b5d4f0d339886f0813381b', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '2e1881f6543a7612aa553d0d2c0bac8d1d03f29e', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '999c28f50a9ca637501c38c490db529c11ec70e3', class: "spw-modal__body" }, h("slot", { key: '6224c4348234805a523b57500731dbf35d377b17', name: "content" })), h("div", { key: 'cdb74f052deb2bc3d4465f77490991518147bbe4', class: "spw-modal__buttons" }, h("slot", { key: 'dbf9d8019adae61dbf173ac6657986f1e27e6e03', name: "buttons" })))), h("div", { key: 'e8c49c8989e4fcd308a4a4ec4143997a23a8053b', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '6961323287aaa2ac2c831aabaed9259825cbc9bc' }, h("div", { key: '6d2397c7cb4346914d9afb8b44fb33e01c2f6fc4', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '19dff4efe47c80f54cea20483c622758e549cc36', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '5bd10998aaa1ce28f21beeac3bc018e773162528', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '97615fe1893c64ca8eae919a6faa9ee5315d200e', class: "spw-modal__content", ref: el => (this.modalContent = el), onScroll: this.handleContentScroll }, h("div", { key: 'c343a6998646aeb093a304992656048ca295dbf4', class: "spw-modal__header" }, h("div", { key: 'b12e5106e31f0980fdff868d06878ab14705546c', class: "spw-modal__title-container" }, this.alertIcon && h("spw-icon", { key: '2cdd3e2913687b366c94b514b9447a35ec3d6f42', class: "spw-modal__alert-icon", icon: this.alertIcon }), h("h2", { key: '6c994ac67f7921c09e61d8f85428acd33481030d', class: "spw-modal__caption" }, this.caption)), this.showCloseButton && (h("div", { key: '29dc0900b9bac81187bfe1c8c7f1ae9ea66374aa', class: {
+                'spw-modal__close-button': true,
+                'spw-modal__close-button--sticky': this.isCloseButtonSticky,
+            }, ref: el => (this.closeButton = el), onClick: () => this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: 'd4b60fcee917eac029463f68e0758aae0716f183', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: '6d41416973bcb9f132fd91b230fcc7f0402c686c', class: "spw-modal__body" }, h("slot", { key: '0aa97063697328d3f096fad1b3bf537305cf676a', name: "content" })), h("div", { key: 'e6442c6edd885fb7140c85766d1f96f31d6ef388', class: "spw-modal__buttons" }, h("slot", { key: '4c8dbcf89eec3a8502b3e0107b35f134697e6fc8', name: "buttons" })))), h("div", { key: 'f84ed2841ce54fadf77ffc0106971a08cbfcf3e3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "spw-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -215,6 +225,26 @@ export class SpwModal {
                 "attribute": "caption",
                 "defaultValue": "'Titre de la modal'"
             },
+            "closeButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton de fermeture"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-button-text",
+                "defaultValue": "'Fermer'"
+            },
             "closeOnOverlayClick": {
                 "type": "boolean",
                 "mutable": false,
@@ -287,7 +317,7 @@ export class SpwModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Ic\u00F4ne d'alerte \u00E0 afficher dans la modal"
+                    "text": "Ic\u00F4ne d'alerte \u00E0 afficher dans la modal (r\u00E9f\u00E9rence font awesome)"
                 },
                 "getter": false,
                 "setter": false,
@@ -320,7 +350,8 @@ export class SpwModal {
     static get states() {
         return {
             "showModal": {},
-            "slotButtonsPresent": {}
+            "slotButtonsPresent": {},
+            "isCloseButtonSticky": {}
         };
     }
     static get events() {

package/dist/collection/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -376,12 +377,15 @@ template {
 }
 
 :host {
+  /** @prop --spw-mosaic-item-width-mobile: Largeur de l'élément sur mobile */
   --spw-mosaic-item-width-mobile: 100%;
+  /** @prop --spw-mosaic-item-width-tablet: Largeur de l'élément sur tablette */
   --spw-mosaic-item-width-tablet: 100%;
+  /** @prop --spw-mosaic-item-width-desktop: Largeur de l'élément sur desktop */
   --spw-mosaic-item-width-desktop: 100%;
   width: var(--spw-mosaic-item-width-mobile);
-  padding: 0 12px;
-  margin-bottom: 24px;
+  padding: 0 12px !important;
+  margin-bottom: 24px !important;
 }
 
 @media (min-width: 768px) {

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

@@ -45,7 +45,7 @@ export class SpwMosaicItem {
         }
     }
     render() {
-        return (h(Host, { key: '1401539d9e4eac13410e48f9bf980defeedc4946' }, h("slot", { key: 'c2b4727ec4e2e6576fa4e8b7e871e1302960c551' })));
+        return (h(Host, { key: 'cca36c5c6f756226b3c9de778c5732ddf2425529' }, h("slot", { key: 'f0691d1e489e6105af90c2b3691ea3fafce8ea28' })));
     }
     static get is() { return "spw-mosaic-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -377,6 +377,9 @@ template {
 
 :host {
   display: block;
+}
+
+.spw-mosaic {
   margin: 0 -12px;
 }
 

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

@@ -86,7 +86,8 @@ export class SpwMosaic {
             const masonryItems = slot.assignedElements({ flatten: true });
             if (masonryItems.length > 0) {
                 // Trouver un item sans colSpan pour calculer la largeur de base d'une colonne
-                const baseItem = Array.from(masonryItems).find(item => !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile')) || masonryItems[0];
+                const baseItem = Array.from(masonryItems).find(item => !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile')) ||
+                    masonryItems[0];
                 this.masonry = new Masonry(this.el, {
                     itemSelector: 'spw-mosaic-item',
                     columnWidth: baseItem,
@@ -130,11 +131,12 @@ export class SpwMosaic {
     }
     get elementClass() {
         return {
+            'spw-mosaic': true,
             'spw-mosaic--no-masonry': !this.isMasonry,
         };
     }
     render() {
-        return (h(Host, { key: '2c40859c4f868569eacfc0ec03ed813667234cdc' }, h("div", { key: '98bb2e0f9559c6e13ab91f1c2c4152a1a1e879d6', class: this.elementClass }, h("slot", { key: 'fb1640741e4b0cf0726919155c2c8f0121e32121' }))));
+        return (h(Host, { key: '97bd5d303cacc206a27345bac048dc55d27d36c5' }, h("div", { key: '384183e662593940ad1f5e16563693eb70c55472', class: this.elementClass }, h("slot", { key: '69038aa321d4c0305d4627cd1f758b7efba4c2e6' }))));
     }
     static get is() { return "spw-mosaic"; }
     static get encapsulation() { return "shadow"; }

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

@@ -167,12 +167,12 @@ export class SpwPagination {
         const pages = this.calculatePageRange();
         const showPrevArrow = this.currentPage > 1;
         const showNextArrow = this.currentPage < this.totalPages;
-        const prevArrow = showPrevArrow && (h("li", { key: 'add27c9046e335bcddde182165c157aa79cf7858', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '914b5561a9aecaee86fee7f0ede461426804ce05', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '26bc6f7c1ab57aa3eb40c4584a50144b4e8e4986', icon: "fa-chevron-left" }), " ", h("span", { key: 'c64e65f73ac5c301e9cc9ac7869bd5274920f4d2', class: "spw-pagination__item-arrow-text" }, this.previousButtonText))));
-        const nextArrow = showNextArrow && (h("li", { key: '948ee7badfc7284fa8b508ea1e1812a05c4f0af2', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: 'fc86a790c539185bc5760a35e8a638476c6ea029', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: '4c9a1778953d7611237fb5636c331c3e52299b7f', class: "spw-pagination__item-arrow-text" }, this.nextButtonText), " ", h("spw-icon", { key: '987987e52c16aa65550b510425d9402007ed883f', icon: "fa-chevron-right" }))));
-        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: 'a0d740fff9d64d565cc33172a07d803b16101ca0', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '32e4600db449473164eee865d0e2b374465a35c7', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '53f4561c35169e41b4354e07480d55daba8c6428', icon: "fa-chevron-left" }), " ", h("span", { key: 'd0db92e3648051ea9f4ff6c3c2a54048ded90643' }, this.previousButtonText))));
-        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: '6a08d6a92defcaca4cd7755440834a884a9a01dd', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '168f57ba49e62e1a68f6004709c487b1c15f9ed6', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: 'af8f13ec3654baac84fd5641561e138f224a313e' }, this.nextButtonText), " ", h("spw-icon", { key: '21c20dc7fcb6854c1d2c024bca13195556282425', icon: "fa-chevron-right" }))));
-        const mobileArrows = (h("ul", { key: '48636f74b8846c84f121254c1d95e6a539f691f2', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
-        return (h(Host, { key: '9e14c0071f6bd6fc5c59816920ba1bcf0dbc9e11' }, h("div", { key: 'c32f6351a6e29648063aa7bdbb79a5e3576a0610', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: '095e4cc06086f1adc5e934d2921e0d9ab01ab8ca' }, h("ul", { key: 'ccd5d38f59eecb2ec2a4640a91d88030e12cf1cc' }, prevArrow, h("li", { key: '75d24d337c5a5bd633ccbe3fcdf921fac759270c', class: "spw-pagination__input" }, h("spw-text-field", { key: '89634a550acf9cdeeee0584d17c53313a03096fb', value: this.inputPageValue, type: "text", name: "pagination-input", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled })), h("li", { key: '03479858843e848ba7e1e1114551a2331e0d7fd2', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " ", this.totalPages === 1 ? 'page' : 'pages'), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: 'f5c594e980ceddc1ed0c7745502ca6a41c7c2f5b' }, h("ul", { key: 'b539a4e139229896e89c6a0c2ee2d5c2a5e90cc6' }, prevArrow, pages.map(({ page, class: pageClass }) => {
+        const prevArrow = showPrevArrow && (h("li", { key: '85f0319e8088c980c62320c056778ba73c96b80e', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '8c8df5f973ddcd66d1d7c960e9cddaf2aaec6ee3', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '3aef97ee962bbf09840c1af18bb4438c9188367f', icon: "fa-chevron-left" }), " ", h("span", { key: '1f761b7cdf736fa0f788075a6b435b75a67b2561', class: "spw-pagination__item-arrow-text" }, this.previousButtonText))));
+        const nextArrow = showNextArrow && (h("li", { key: 'e7e840153f35897bd1458a17ba29ce97413a3f22', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '631741da51e3fe2b3ac577843ae26f783106a56a', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: 'c271fdc06c852a09d1ebf70f75fd0ddc37aefcca', class: "spw-pagination__item-arrow-text" }, this.nextButtonText), " ", h("spw-icon", { key: '8ee2c4ff3c10222bb9cc92dff64a5b435b7b80ae', icon: "fa-chevron-right" }))));
+        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: 'e689e7b06b9e79f89a94aa70bdafe720f8ff404b', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '24a27ada08f40ed5217ddf79a24f7a82d205b147', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: 'd3170efae730c447e9100517ac99829f4c8d0d6d', icon: "fa-chevron-left" }), " ", h("span", { key: '6439afd931e312691034c7c0a34a4b1008100f05' }, this.previousButtonText))));
+        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: '9f35fc017b9b5359bd7d26ca0c36290ad6d03e47', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '5db338674f1091bf93f8cd7726c339eeb4fbe90d', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: 'af492555a2ce988de5fff52e4aa7029c737cbd7e' }, this.nextButtonText), " ", h("spw-icon", { key: '90fc3bd54e12b7ff9864088c73bf60319ac5eeac', icon: "fa-chevron-right" }))));
+        const mobileArrows = (h("ul", { key: '0f512587846ec2bdc770cab4c369a95dbc769d93', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
+        return (h(Host, { key: 'efeaab2312f2da0d10051473dd96d8951140cbb0' }, h("div", { key: 'a66bc21a26f147d62112a1b7037199dcc820182d', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: 'da2ac88b193f11dd8140baf963db01f8ddd0961b' }, h("ul", { key: 'ef08d21640159b5774365de69f36fc3aec3249fd' }, prevArrow, h("li", { key: '32ba92be38889f7a5bdb3dd0eb2658e4e63e2296', class: "spw-pagination__input" }, h("spw-text-field", { key: '9523d6de865b05ad656dfa73b3d2febf02721bd3', value: this.inputPageValue, type: "text", name: "pagination-input", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled })), h("li", { key: '61f715b3128848cfff0dafaab09680956c76347c', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " ", this.totalPages === 1 ? 'page' : 'pages'), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: 'fd63827945293528c930a2c1ce84a9d39a0ac334' }, h("ul", { key: '5c54c14f43196744ad45859f6b27e280ce64d477' }, prevArrow, pages.map(({ page, class: pageClass }) => {
             if (page === '...') {
                 return (h("li", { class: `spw-pagination__item spw-pagination__item--dots ${pageClass}` }, h("spw-icon", { icon: "fa-ellipsis" })));
             }

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

@@ -92,7 +92,7 @@ export class SpwRadio {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: '26cf12c17a31cb4c1ed96c0ca0671f6681714677', class: "spw-radio" }, h("input", { key: 'c2b5efafcc2b8ff49fe0496eeda221ca25d05793', type: "radio", ref: el => (this.inputElement = el), checked: this.internalChecked, "aria-checked": this.internalChecked ? 'true' : 'false', onChange: this.handleRadio.bind(this), name: this.name, value: this.value, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'd2b00504a711e2a8262517407909632979a2463a', class: `spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`, onClick: e => this.handleRadio(e) }, h("slot", { key: 'c9677010511579850460cf7430089ac2490b9d15' }))), h("div", { key: 'f2d0ceca7d3c696f288314f8feb92e4b425dc5e0', tabIndex: this.disabled ? -1 : 0, onClick: e => this.handleRadio(e), onKeyDown: this.handleKeydown.bind(this), role: "radio", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled, "aria-label": this.accAriaLabel || this.name, class: this.elementClass }, this.internalChecked && h("span", { key: '6853a3c56870c0f04508e829dd5ccbdfda146dde', class: "spw-radio__circle" }))));
+        return (h("div", { key: 'b2637f177583afa720663a1c89e38b7d1a8667e9', class: "spw-radio" }, h("input", { key: '77851158f40a622ef0031906086e1f617850db41', type: "radio", ref: el => (this.inputElement = el), checked: this.internalChecked, "aria-checked": this.internalChecked ? 'true' : 'false', onChange: this.handleRadio.bind(this), name: this.name, value: this.value, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'f83472ca9b2afd64e10a66a1f1bbb007b2dc91ca', class: `spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`, onClick: e => this.handleRadio(e) }, h("slot", { key: 'e9ae0b33d51a10b296ca0ca4893149b0bcc38e55' }))), h("div", { key: '780558d378b7f4c198a18912fc9350c675cde012', tabIndex: this.disabled ? -1 : 0, onClick: e => this.handleRadio(e), onKeyDown: this.handleKeydown.bind(this), role: "radio", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled, "aria-label": this.accAriaLabel || this.name, class: this.elementClass }, this.internalChecked && h("span", { key: '71a5c47fa598531c18b5d0f8373f393d9a54d415', class: "spw-radio__circle" }))));
     }
     static get is() { return "spw-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,7 @@ export class SpwScrolltop {
         };
     }
     render() {
-        return (h(Host, { key: '0890efb2f22b828e04735c2776eab6c6c3bfbb18', class: this.hostClass }, h("spw-button", { key: '8fd066e1af2b8d4ebb0fb7a3f094c9b040a1e79e', "is-icon-only": true, icon: "fa-chevron-up", variant: "primary", size: "medium", "acc-aria-label": this.accAriaLabel, onClick: this.scrollToTop })));
+        return (h(Host, { key: '02214f9d465926e864dd4935798196fb415effee', class: this.hostClass }, h("spw-button", { key: '337671dc0906731bb3d838f3298fc76f922c2db5', "is-icon-only": true, icon: "fa-chevron-up", variant: "primary", size: "medium", "acc-aria-label": this.accAriaLabel, onClick: this.scrollToTop })));
     }
     static get is() { return "spw-scrolltop"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-search-field/spw-search-field.css

@@ -416,6 +416,11 @@ template {
   transition: all 0.2s ease;
   z-index: 10;
 }
+.spw-search-field__submit:focus, .spw-search-field__submit:focus-visible {
+  outline: 1px solid white;
+  outline-offset: 0;
+  box-shadow: 0 0 0 3px black;
+}
 .spw-search-field--large .spw-search-field__submit {
   width: 46px;
   height: 46px;
@@ -430,6 +435,24 @@ template {
   border-radius: 0 0 4px 4px;
   max-height: 200px;
   overflow-y: auto;
+}
+.spw-search-field__options::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.spw-search-field__options::-webkit-scrollbar-thumb {
+  background: var(--spw-color-themes-grey-grey-400);
+  border-radius: 20px;
+  border: 4px solid var(--spw-ds-white);
+}
+.spw-search-field__options::-webkit-scrollbar-track {
+  background: var(--spw-ds-white);
+}
+.spw-search-field__options {
+  scrollbar-face-color: var(--spw-color-themes-grey-grey-400);
+  scrollbar-track-color: var(--spw-ds-white);
+}
+.spw-search-field__options {
   z-index: 44;
   margin-top: -2px;
   transition: transform 0.3s ease, opacity 0.3s ease;

package/dist/collection/components/spw-search-field/spw-search-field.js

@@ -1,4 +1,8 @@
 import { h } from "@stencil/core";
+// TODO
+// - max-height customisable
+// - matching string
+// - résultats de liste accessibles (scroll)
 export class SpwSearchField {
     constructor() {
         /** Valeur actuelle du champ de recherche */
@@ -50,6 +54,7 @@ export class SpwSearchField {
             }
             this.searchText = newValue;
             this.value = newValue;
+            this.updateHiddenInput();
             if (this.filterTimeout) {
                 clearTimeout(this.filterTimeout);
             }
@@ -68,10 +73,10 @@ export class SpwSearchField {
             this.valueChanged.emit(this.value);
         };
         this.handleSubmit = (event) => {
-            event.preventDefault();
+            event === null || event === void 0 ? void 0 : event.preventDefault();
             const form = this.el.closest('form');
             if (form) {
-                form.submit();
+                form.requestSubmit();
             }
         };
     }
@@ -79,6 +84,24 @@ export class SpwSearchField {
         this.parseItems(this.items);
         this.initializeFromValue(this.value);
     }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside);
+        this.createHiddenInput();
+    }
+    createHiddenInput() {
+        if (this.name) {
+            this.hiddenInput = document.createElement('input');
+            this.hiddenInput.type = 'hidden';
+            this.hiddenInput.name = this.name;
+            this.hiddenInput.value = this.value || '';
+            this.el.appendChild(this.hiddenInput);
+        }
+    }
+    updateHiddenInput() {
+        if (this.hiddenInput) {
+            this.hiddenInput.value = this.value || '';
+        }
+    }
     initializeFromValue(val) {
         if (!val) {
             this.searchText = '';
@@ -92,9 +115,6 @@ export class SpwSearchField {
             this.searchText = val;
         }
     }
-    componentDidLoad() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside);
         if (this.filterTimeout) {
@@ -159,11 +179,13 @@ export class SpwSearchField {
             .toLowerCase();
     }
     selectItem(item) {
+        var _a;
         this.isSelectingItem = true;
         this.searchText = item.label;
-        this.value = String(item.value);
+        this.value = String((_a = item.value) !== null && _a !== void 0 ? _a : item.label);
         this.isOpen = false;
         this.focusedItemIndex = null;
+        this.updateHiddenInput();
         this.filterItems();
         this.optionSelected.emit(item);
         this.valueChanged.emit(this.value);
@@ -200,10 +222,14 @@ export class SpwSearchField {
                 }
                 break;
             case 'Enter':
-                event.preventDefault();
                 if (this.isOpen && this.focusedItemIndex !== null) {
+                    event.preventDefault();
                     this.selectItem(this.filteredItems[this.focusedItemIndex]);
                 }
+                else if (this.hasSubmitButton) {
+                    event.preventDefault();
+                    this.handleSubmit(event);
+                }
                 break;
             case 'Escape':
                 this.isOpen = false;
@@ -230,10 +256,10 @@ export class SpwSearchField {
         };
     }
     render() {
-        return (h("div", { key: 'a10f3fe0be859e0f5c07a3cb996c1c2130dcb35a', ref: el => (this.hostElement = el), class: this.elementClass }, h("spw-text-field", { key: '02fdbd99bc9793d47881c28629e42957ac7cb3a1', placeholder: this.placeholder, name: this.name, label: this.label, size: this.size, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor, onValueChanged: this.handleValueChanged, onKeyDown: event => this.handleKeyDown(event) }), this.hasSubmitButton && h("button", { key: '36ad3fa5fe544aea001b340587f6b728eb264eac', type: "button", class: "spw-search-field__submit", onClick: this.handleSubmit, "aria-label": "Rechercher" }), this.isOpen && !!this.items && (h("div", { key: '5f934ff945be432ce0b6998bb5f5371ff765361c', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: '60b99c03a3b0a3aa75821022450c9367e8c5bfd2' }, this.filteredItems.map((item, index) => (h("li", { class: {
+        return (h("div", { key: 'bbdc55b920ac32e2aea0434e20b7a47213325f17', ref: el => (this.hostElement = el), class: this.elementClass }, h("spw-text-field", { key: 'f68067938a917e19630c8b6701a2652a1bd9e8ff', placeholder: this.placeholder, name: this.name, label: this.label, size: this.size, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor, onValueChanged: this.handleValueChanged, onKeyDown: event => this.handleKeyDown(event) }), this.hasSubmitButton && h("button", { key: '22e8d1f66bc4f41b256afbc5284ee59f9df32323', type: "button", class: "spw-search-field__submit", onClick: this.handleSubmit, "aria-label": "Rechercher" }), this.isOpen && !!this.items && (h("div", { key: 'e06ac5492108f99460d92773c9b425247a5e9efd', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: 'a46a5de6dcb78df6551dc35ec70049aecc110d2a' }, this.filteredItems.map((item, index) => (h("li", { class: {
                 'spw-search-field__option': true,
                 'spw-search-field__option--focused': index === this.focusedItemIndex,
-            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-search-field__category" }, " - ", item.category)))))), this.isLoading && (h("p", { key: '51591023d434633e7b03ba774d0ca5883cdbf4b6', class: "spw-search-field__loading" }, h("spw-loading", { key: 'ef7505c54096507e6b6e674af546aa45782e25c7', text: this.loadingText }))), !this.isLoading && !this.filteredItems.length && h("p", { key: '0beb82680290a81da662c1ec25677df6cff53315', class: "spw-search-field__no-results" }, this.noResults), !!this.filteredItems.length && this.viewAllResults && this.viewAllResultsLink && (h("p", { key: '6c0183814b9e9b3f6668d717d24d92daf92a2b26', class: "spw-search-field__view-all" }, h("a", { key: '20f24ee9c16e617878bab8e58aecede69c89b6d9', href: this.viewAllResultsLink }, this.viewAllResults, " ", h("spw-icon", { key: '4282cc27ea9ee5aebffe47f1597202cacc2d9ce1', icon: "fa-arrow-right" }))))))));
+            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-search-field__category" }, " - ", item.category)))))), this.isLoading && (h("p", { key: '395226d69badc46ddfe7664ba7faa59af3fc2d59', class: "spw-search-field__loading" }, h("spw-loading", { key: 'fc2cc9ae2d5014703b67a34f80c126b4ea44b750', text: this.loadingText }))), !this.isLoading && !this.filteredItems.length && h("p", { key: '4f38bdc75316fedbcb996ef96d13507f308f8d47', class: "spw-search-field__no-results" }, this.noResults), !!this.filteredItems.length && this.viewAllResults && this.viewAllResultsLink && (h("p", { key: 'a5aa0bbe2fc5761888c885cfe784a076b8d40487', class: "spw-search-field__view-all" }, h("a", { key: 'f64f97647489766fdc205932ae97a3c7fa6f5dd9', href: this.viewAllResultsLink }, this.viewAllResults, " ", h("spw-icon", { key: '3a60bdab88171d3d68fca90b64a5b32a7bb92ff9', icon: "fa-arrow-right" }))))))));
     }
     static get is() { return "spw-search-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class SpwSeparator {
         };
     }
     render() {
-        return h("div", { key: 'c5755fe0253ac4f80156723b51943bbe13480bd0', class: this.elementClass, style: this.style });
+        return h("div", { key: '668a2dc71a3a97752d56b021ad18007f1c118af9', class: this.elementClass, style: this.style });
     }
     static get is() { return "spw-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-sidebar/spw-sidebar-navigation-dropdown/spw-sidebar-navigation-dropdown.js

@@ -11,7 +11,7 @@ export class SpwSidebarNavigationDropdown {
         };
     }
     render() {
-        return (h(Host, { key: 'f61d1a81d0e931179393629694b63502aa961060', class: this.classes }, h("div", { key: '13766b38650ec769fca09806a476b478402b7b1e', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: 'f86fa88582f121af4be1a13fda520b7c6d0244db' }))));
+        return (h(Host, { key: '640aa5e1d67cb32afdce0603ad865426bb1a6b15', class: this.classes }, h("div", { key: 'ef96864ec47e7a4d708d14e05cce0c01d22e1f43', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '49cb9b4aa8c011be84968e5864140d5c8ddbab3e' }))));
     }
     static get is() { return "spw-sidebar-navigation-dropdown"; }
     static get originalStyleUrls() {