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

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

@@ -44,6 +44,8 @@ export class SpwCustomSelect {
         this.showSuccessIcon = true;
         /** Affiche une icône de warning si vrai */
         this.showWarningIcon = true;
+        /** Active le panneau dépliable sur les messages (error, hint, success, warning) */
+        this.isExpandable = false;
         /** Positionnement du tooltip */
         this.tooltipDirection = 'top';
         /** Curseur du tooltip */
@@ -483,22 +485,22 @@ export class SpwCustomSelect {
     }
     renderErrorMessage() {
         if (this.error) {
-            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon }, this.error));
+            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { name: "details", slot: "details" })));
         }
     }
     renderHintMessage() {
         if (this.hint) {
-            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon }, this.hint));
+            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { name: "details", slot: "details" })));
         }
     }
     renderWarningMessage() {
         if (this.warning) {
-            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon }, this.warning));
+            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { name: "details", slot: "details" })));
         }
     }
     renderSuccessMessage() {
         if (this.success) {
-            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, this.success));
+            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { name: "details", slot: "details" })));
         }
     }
     get elementClass() {
@@ -578,19 +580,19 @@ export class SpwCustomSelect {
         const filteredOptions = this.getFilteredOptions();
         const showPlaceholder = this.showPlaceholder();
         const showCreate = this.showCreateButton();
-        return (h("div", { key: '889b30c9db5212a26bff8c0397367cbcbd4ecc22', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: '291861e63f7bf923b11e403e5687d263473c26e3', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '74629ba1c29ed7cd0008dcf43da37148f60d9252', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'f55c1c7e9eb783270c44bc62ef3c377ff4ba7e07', class: "spw-custom-select__wrapper" }, h("div", { key: '12a95215cb5e4a8fb2c80543ec6f74c99cc618af', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '89ce6a3800eba2154cba3006471d47c2b252f46a', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '9b510469932bf3839c36af933893ab6bf73294cd', class: "spw-custom-select__search" }, h("input", { key: '030fb1ebdeeb66a2d9f54066742b39aaffba0cca', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }), showCreate && this.isOpen && this.hasSelectedValue && (h("button", { key: 'b8ccca1e5d7e9a9f00b6c8acf7591397bf986493', class: "spw-custom-select__create-btn spw-custom-select__create-btn--big", type: "button", onMouseDown: (event) => {
+        return (h("div", { key: '075816be82b83e4ff87e3b8acb699331e1b93873', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: '9243de1d006313839fd75cdfd960135608e19802', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'b9187b59eae8c1cb618ef72fbf2057a80890717d', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'eb3d52c7e08d22a6824b861a423e41473add308c', class: "spw-custom-select__wrapper" }, h("div", { key: '3ea2df7f2171d795fc681e1e54f4a15abe5ce6a3', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '02a97e4e274bdfb8edc3018efc3f69277e16e6a2', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '93275dd4f05996654df1a4cdce1aa0b0c35ede52', class: "spw-custom-select__search" }, h("input", { key: '495ebc87298b60ce23adafa5970dd7068d1ba51a', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }), showCreate && this.isOpen && this.hasSelectedValue && (h("button", { key: '19e031a37c9416f08dc8f86d82e5126b678e4915', class: "spw-custom-select__create-btn spw-custom-select__create-btn--big", type: "button", onMouseDown: (event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.addCreatedOption(this.searchText);
-            } }, h("spw-icon", { key: 'e673746e38ab65e1a5f087a3ac954b138310fff1', icon: "fa-plus" }))))), showPlaceholder && h("span", { key: '92e60a4c8c62dc1a3e83964d912e0719c0650844' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: 'bbefa52f46c725c5d0980bcb62146ba57f0244ae', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
+            } }, h("spw-icon", { key: '23bb75e44c6a1f74274c87be82ca5ef55ce1272c', icon: "fa-plus" }))))), showPlaceholder && h("span", { key: 'a80921899ec9687857323eee0296ad44b6c775e0' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '1bfa5decab9a3051d6c3641b0cc01e5d93c863a9', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
             var _a;
             return (h("span", { class: "spw-custom-select__selected-item" }, (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 :
                 _a.label, h("spw-icon", { icon: "fa-times", class: "spw-custom-select__deselect-icon", onClick: event => this.selectOption(val, event) })));
-        }))), !this.multiple && h("span", { key: '2ed86a218e588621de5b5c760591279e6c6b6548' }, this.getSelectedLabels()))), h("div", { key: 'b8867f08b591a97b13bf3d8dcc7dc7f338b958ee', class: "spw-custom-select__icons" }, showCreate && !(this.isOpen && this.hasSelectedValue) && (h("button", { key: 'fb411d34c7cee66519409f67a4a3457ec1d8583e', class: "spw-custom-select__create-btn", type: "button", onMouseDown: (event) => {
+        }))), !this.multiple && h("span", { key: '0a386c27e0eba81c3580d49618d61f218b27133a' }, this.getSelectedLabels()))), h("div", { key: 'deb6c2cd37ce5db9586c7f3d0b5a51f7871d1b15', class: "spw-custom-select__icons" }, showCreate && !(this.isOpen && this.hasSelectedValue) && (h("button", { key: 'eb087835e04d9010419c7bade6655ebb54fdd166', class: "spw-custom-select__create-btn", type: "button", onMouseDown: (event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.addCreatedOption(this.searchText);
-            } }, h("spw-icon", { key: '39089d0968d5a71ae971f14d38528aba9e56d6d9', icon: "fa-plus" }))), this.isClear && (this.hasSelectedValue || !!this.searchText) && (h("span", { key: 'dfb1382a851ad2ffcce146ca851f19b20439e86d', class: "spw-custom-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: '5fff7bfaa8ba404111953a88f2d1ac414cae974d', icon: "fa-xmark" }))), h("div", { key: 'feff32c6321d92ee3b1220402d7fe06840749a99', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'f645bc641b5fb9be5f891530b85fba06c40cd90b', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' }))), this.isOpen && (h("div", { key: 'f14b016f2211a7361d5fa3d9601fa9aff340ec75', class: {
+            } }, h("spw-icon", { key: '51245fd24e580561380ad325f7d712e5c2e4c6c5', icon: "fa-plus" }))), this.isClear && (this.hasSelectedValue || !!this.searchText) && (h("span", { key: 'b3c328e3303be083386a573e2f0531bcf3b3fd8c', class: "spw-custom-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: '901f42f0b454d290e3e5083de84f930493795dce', icon: "fa-xmark" }))), h("div", { key: 'ae1a3dc6f013d68f359a5030e2515e6e82130d92', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'cf6e35d678d4e89d5d4c41f3729a440e257d1bde', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' }))), this.isOpen && (h("div", { key: '2756a3d722f0ea5b999a982e2dca80bfb5a31f0f', class: {
                 'spw-custom-select__options': true,
                 [`spw-custom-select__options--${this.dropdownDirection}`]: true,
                 'spw-custom-select__options--fixed': this.fixedDropdown,
@@ -601,7 +603,7 @@ export class SpwCustomSelect {
                     left: `${this.dropdownPosition.left}px`,
                     width: `${this.dropdownPosition.width}px`,
                 }
-                : {} }, h("div", { key: '2fc25d6abe2b4f38674a2a2d359a9f8eb648900e', class: "spw-custom-select__options-list" }, !!filteredOptions.length && (h("ul", { key: 'a8de21701bcb5b435e55e809231a97dc9fe5c7b6' }, filteredOptions.map((option, index) => (h("li", { class: {
+                : {} }, h("div", { key: '068f62410b9cd62d382e3158eec764a046b57a72', class: "spw-custom-select__options-list" }, !!filteredOptions.length && (h("ul", { key: 'f6cf9b974716fa92042ab6b07c5e5d4337d8b1e1' }, filteredOptions.map((option, index) => (h("li", { class: {
                 'spw-custom-select__option': true,
                 'spw-custom-select__option--selected': this.multiple
                     ? this.internalValue.some(val => String(val) === String(option.value))
@@ -609,7 +611,7 @@ export class SpwCustomSelect {
                 'spw-custom-select__option--focused': index === this.focusedOptionIndex,
                 'spw-custom-select__option--disabled': option.disabled,
                 'spw-custom-select__option--created': !!option.created,
-            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-custom-select__checkbox", checked: this.internalValue.some(val => String(val) === String(option.value)), disabled: option.disabled })), option.label, option.created && (h("spw-icon", { class: "spw-custom-select__option-remove", icon: "fa-trash", onClick: (event) => this.removeCreatedOption(option, event) }))))))), !filteredOptions.length && h("p", { key: '7c6835989fb07aba19e5b1f723ab9a18f47aa258', class: "spw-custom-select__no-results" }, this.noResultsText)), this.hasSlottedFooter && (h("div", { key: '4390581f828c6e39715a27306203d78664d165d3', class: "spw-custom-select__options-footer" }, h("slot", { key: '64855f45ae683a31c02ef04cc9432eb031b83d37', name: "footer" })))))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-custom-select__checkbox", checked: this.internalValue.some(val => String(val) === String(option.value)), disabled: option.disabled })), option.label, option.created && (h("spw-icon", { class: "spw-custom-select__option-remove", icon: "fa-trash", onClick: (event) => this.removeCreatedOption(option, event) }))))))), !filteredOptions.length && h("p", { key: 'f20a6196114b89a9e69cdce4f50e7107078c5ee1', class: "spw-custom-select__no-results" }, this.noResultsText)), this.hasSlottedFooter && (h("div", { key: 'fd36a7e651b572c32aa0340d3edff0e1d5b0e31b', class: "spw-custom-select__options-footer" }, h("slot", { key: '6601ff4fcfb2c51fa1b8fddcd9ff6f9f5fdcebec', name: "footer" })))))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-custom-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1046,6 +1048,64 @@ export class SpwCustomSelect {
                 "attribute": "show-warning-icon",
                 "defaultValue": "true"
             },
+            "isExpandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active le panneau d\u00E9pliable sur les messages (error, hint, success, warning)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expandable",
+                "defaultValue": "false"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour d\u00E9plier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label"
+            },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour replier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-label"
+            },
             "tooltipTitle": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/spw-date-picker/spw-date-picker.css

@@ -42,6 +42,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -328,7 +329,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -341,7 +342,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -356,7 +357,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-date-picker/spw-date-picker.js

@@ -32,6 +32,8 @@ export class SpwDatePicker {
         this.showSuccessIcon = true;
         /** Affiche une icône de warning si vrai */
         this.showWarningIcon = true;
+        /** Active le panneau dépliable sur les messages (error, hint, success, warning) */
+        this.isExpandable = false;
         /** Indique si le champ peut être effacé avec un bouton */
         this.isClear = false;
         /** Positionnement du tooltip */
@@ -908,7 +910,7 @@ export class SpwDatePicker {
             'spw-date-picker--is-clear': this.isClearIconVisible,
         };
         const errorMessage = this.error || this.internalError;
-        return (h(Host, { key: '532d487da5196336bc86cfa98eb2b0cf4812fdfa' }, h("div", { key: 'bd0182c0dc06cf9a5ea846513bee1960c4a6b567', class: containerClass }, this.label && (h("spw-field-label", { key: 'aa8311ff9e5d1214a8b83613b01dd0fe75981542', label: this.label, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'ddf1fee6b4ac1e18c8bc6ddf433dcb58d07bfb87', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '8445c6f924ce87b0a630b55d15bcf439f7ae208b', class: "spw-date-picker__input-container" }, h("input", { key: '2dccede48303f05eba9fa4f37cb179f6dd8eda65', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-label": this.accAriaLabel || this.label || this.name, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), h("div", { key: '0d2a94739a90dce420005bab0639cadb29444939', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: '37b50fb2c43d2ca1be2a39b7ce9dc65e84b1b69c', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '4668571785391971ff209c46bf74f71306487f28', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: '14714c220f11d9b223a69354725bddbe36eed30a', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: '67ccce624a7aed6324d48be9d3ed7c0adbf2cedf', icon: "fa-calendar", variant: "fa-regular", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '7d138427f2e0a4c9863a3f041006cb0113caf038', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: 'fd3265202be2901f1ad32e8343cfd2193366d201', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: '085721c834bf6adfbd45ff15d3bdaaf1b4af72fb', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: '4222fb895d724619a4be4faad50d884ef571e1c9', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
+        return (h(Host, { key: '24bb23078497d43361b87764cee792d7ae296828' }, h("div", { key: '6e3b9f7e1a65fa69b3bd3c9ba4e63fbeb76dc49a', class: containerClass }, this.label && (h("spw-field-label", { key: '6aedb3a5a4f43697adc29ce5de2abcdd14c370d6', label: this.label, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'dbf9f864e7e1789496cc518c674fc3c824881de0', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'be9a9f496f780a27454ee0b43cef2f4fe20e56c9', class: "spw-date-picker__input-container" }, h("input", { key: 'cde538eb71eedfec1c93f27a0ff61273e5a02422', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-label": this.accAriaLabel || this.label || this.name, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), h("div", { key: 'ac6dfdb23da486fcd7e79ba83633c333b9eadde6', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: '450b1fa90fccf00f73d75fe32501d84b8b750c56', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '05b500767a17e9d055cdc2be6d0ecc2fa7855a5c', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: '49d866cd2a5b0ec1e472ca354d9d4a61e9613e4c', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: '1ccf5673e72759309e6b96ef7ea421c1a8fe3ba8', icon: "fa-calendar", variant: "fa-regular", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '52ba919f73c1a8286470e952a4b979f06bfca5d5', variant: "error", showIcon: this.showErrorIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { key: '3721f74e97ffd53fbf79d58d41d763b2bde7fb35', name: "details", slot: "details" }))), this.hint && (h("spw-field-message", { key: '28c7afec7b1d64b7b405820748227a5c544c5d47', variant: "hint", showIcon: this.showHintIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { key: 'a1d69416b92fafc06b18bd08640560bbe562b8a0', name: "details", slot: "details" }))), this.success && (h("spw-field-message", { key: '871ea576dd625b54f1432522706345511dcb4f32', variant: "success", showIcon: this.showSuccessIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { key: 'd45b67bfefb312d19846274554a5e3c303bc5245', name: "details", slot: "details" }))), this.warning && (h("spw-field-message", { key: '26abe8209087133b84b03355cda7b7cca9b0d893', variant: "warning", showIcon: this.showWarningIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { key: '38ae8e6a1cfff7fc7eead69a8bed18e3ab789725', name: "details", slot: "details" }))))));
     }
     static get is() { return "spw-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1339,6 +1341,64 @@ export class SpwDatePicker {
                 "attribute": "show-warning-icon",
                 "defaultValue": "true"
             },
+            "isExpandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active le panneau d\u00E9pliable sur les messages (error, hint, success, warning)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expandable",
+                "defaultValue": "false"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour d\u00E9plier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label"
+            },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour replier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-label"
+            },
             "assistiveText": {
                 "type": "string",
                 "mutable": false,

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -216,13 +216,13 @@ export class SpwDrawer {
         };
     }
     render() {
-        return (h(Host, { key: '1884a1b336c6eb2d225277379c005daf7530be6f' }, h("div", { key: '95a7e553242502ad92d70d468cfd69738b27d950', class: this.containerClass }, this.modal && h("div", { key: '68ad5a5c2406036e36a3c22819e7e946dc9abfb9', class: "spw-drawer__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'f3631ae7ddcfd2eeae47f92973d54fea7d2dfc31', ref: el => (this.drawerPanel = el), class: this.panelClass, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '3da8046661146882ae1322258dec72d68ba10377', class: "spw-drawer__header" }, this.showCaption && h("h2", { key: 'f4a555d0408adb2febc9c30e3d09ac633f7a24e2', class: "spw-drawer__caption" }, this.caption), this.showCloseButton && (h("div", { key: 'd707889f78f1c13f342771a47f9817bdc852f559', class: "spw-drawer__close-button", ref: el => (this.closeButtonEl = el), tabindex: "0", role: "button", onClick: () => this.doBeforeClose('CLOSE_BUTTON'), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: 'e64251421e038ecbd06e13b18b95e4c2eb91209e', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'd6ae0d5c001a0955f102db7d05f44fcfccd8e852', class: "spw-drawer__body", ref: el => (this.drawerContent = el) }, h("slot", { key: 'c504f66f8bdf8201cd89add6d2be6564cf463def', name: "content" })), h("div", { key: 'c48a0840f77d49aa32d509fe8cb5d664019bf323', class: {
+        return (h(Host, { key: '621548e815f396df4a54e05b836f0b07f793e142' }, h("div", { key: 'fd7925dd51fe814ac4ce8f10f525b3b230fb736f', class: this.containerClass }, this.modal && h("div", { key: '1a8d8e04568be0dfd2d59eeb349daf44982f00e0', class: "spw-drawer__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'c0c0d0f4eb333fd789eac3d9234983010de130f1', ref: el => (this.drawerPanel = el), class: this.panelClass, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: 'b297bbcb3fd2c5d989d1521cbd9d34b9a643d0b2', class: "spw-drawer__header" }, this.showCaption && h("h2", { key: 'd66a41696e970fab84f995bc32f4a697a74a0033', class: "spw-drawer__caption" }, this.caption), this.showCloseButton && (h("div", { key: 'afc4bb96c03867d4936495e7fba7903abaa4b2a6', class: "spw-drawer__close-button", ref: el => (this.closeButtonEl = el), tabindex: "0", role: "button", onClick: () => this.doBeforeClose('CLOSE_BUTTON'), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: 'e779de1391e99db2c6ce001bec61f9785e6c6e2c', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'c7911fff41d8d1c19ef0a25b412a8d477b8512c6', class: "spw-drawer__body", ref: el => (this.drawerContent = el) }, h("slot", { key: '5d8d6c05a13294a5033e8d113eb4e579e20c5b92', name: "content" })), h("div", { key: 'd5d9ef307a1de26f1efbff685a3020521a2b5459', class: {
                 'spw-drawer__footer': true,
                 'spw-drawer__footer--present': this.slotFooterPresent,
-            } }, h("slot", { key: 'dd720c1c5d968a07028bc847ec3f2237fbf6a63c', name: "footer", onSlotchange: (e) => {
+            } }, h("slot", { key: '7c9f0e9a6aafaba1cfd56073992626aa6f4696ec', name: "footer", onSlotchange: (e) => {
                 const slot = e.target;
                 this.slotFooterPresent = slot.assignedNodes({ flatten: true }).length > 0;
-            } }))), h("div", { key: '7b5c33d211b0555de269c69da4a4136d631ba624', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+            } }))), h("div", { key: 'bfb80879502d4c22689953893f208270f74594d3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "spw-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-dropdown/spw-dropdown-container/spw-dropdown-container.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-dropdown/spw-dropdown-container/spw-dropdown-container.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwDropdownContainer {
     render() {
-        return (h(Host, { key: '48d874f662c7ecf665c4fd8e0bd8b426e7289c87' }, h("div", { key: '0cc824dad665cb14da6b12e3b24090ff315cf0fe', class: "spw-dropdown-container" }, h("slot", { key: 'f8a4c2f3e66128a94deda7b5f00a15949299d8f2' }))));
+        return (h(Host, { key: 'a139c525c1cc0f93f7f112ac5dcb9563babc24ee' }, h("div", { key: '45c05feacdbb1281411a3e6aa50832efc0d49028', class: "spw-dropdown-container" }, h("slot", { key: '3201b3d0fcdd663dafe25a87997691151dc50db8' }))));
     }
     static get is() { return "spw-dropdown-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -83,7 +83,7 @@ export class SpwDropdownItem {
             'spw-dropdown-item__toggle': true,
             'spw-dropdown-item__toggle--open': this.subItemsOpen,
         };
-        return (h(Host, { key: '77c0018164181046d760a1b6442e7428683043a3' }, h(Tag, { key: 'bbfce979bcd7984df8e98322200d41ad646a3929', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: '66bfddabf7f2b4cbeb47374ab20b36af04c6ba36', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: 'ab7379b23b55ee580f172c9753de20f293fba609', variant: this.iconVariant, icon: this.icon }))), h("div", { key: '8c00965f636f69b33bbc9a70e7226e2ca3a46b05', class: "spw-dropdown-item__content" }, h("div", { key: 'd3fcee523706d6d17485c41f08a7a60ebbbf0016', class: "spw-dropdown-item__label" }, h("slot", { key: '4b5f86480f72daa0a73b4464bb81674b914f9c7f' })), this.hasSubItems && (h("div", { key: 'feab6bd1e1b716f9e67539dee9e10044e2bf56ca', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '3b09c91ff1625cf4c7057035f9462cdeda451a57', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: '151bd6199199c1ecb99a8c757e4a963020229c3b', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '369f2b8c03221c05a42d4ad24df5cddb66f0421f', name: "sub-items" })))));
+        return (h(Host, { key: 'f200649da21b3c2485e65c8c43a6df5a54b9226b' }, h(Tag, { key: '2c8356dac6b653516cbd466dd2ccf1e4aac5a168', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: '91b5e991816a7c2d267448226cd5488cbc0ec844', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '532f255b8e3ad7819bebeb611a4cb6319bc72660', variant: this.iconVariant, icon: this.icon }))), h("div", { key: 'b45f1cec592a1deb9303f94fdaf89f80e5f23191', class: "spw-dropdown-item__content" }, h("div", { key: '31bf6ca7cddc19b62cb35ec0b65be3375b679b66', class: "spw-dropdown-item__label" }, h("slot", { key: '9ea3efc3da2793f9001a6aea33a5036da2f90100' })), this.hasSubItems && (h("div", { key: '268b3d9cb66f74983b2eacb8c101b1f98af0ca33', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: 'd6f1dcaad451c99861a8538f4327809636e0aad4', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: 'ca31f823beb452a38a4a8a8dbb99b390b87a55ad', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: 'd38901c9f180d7e92cf016aa9ee439359c1f57b6', name: "sub-items" })))));
     }
     static get is() { return "spw-dropdown-item"; }
     static get originalStyleUrls() {

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -228,7 +228,7 @@ export class SpwDropdown {
         dropdown.style.visibility = 'visible';
     }
     render() {
-        return (h("div", { key: '6705afef902fe813cd774240f0f035e0f3815e1f', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: '7534de2442b031fa671364bb5a5459f9eb2d1875' })));
+        return (h("div", { key: '9161936bf0f6dd13672f81e9fe6a6b1264986094', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: '814cd4da36bff9d43a9d5b22389f6f7801a61614' })));
     }
     static get is() { return "spw-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -21,7 +21,7 @@ export class SpwFieldLabel {
         return !!(this.tooltipText || this.tooltipTitle);
     }
     render() {
-        return (h(Host, { key: '76ae81158304b7f866203868a1cbdc7ca25eaec7' }, h("label", { key: '76885e88c2754d5a72a82c560701686ef379699d', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: 'fc3148fa7ca0bbb4545efd808d7b5bb32341415a', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: 'b4b74142f95e973bfd5962b0bde2ab8454b31ffc', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: '9265151c1e8fb4df1bb37cd581a92fc599988aab', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: '949b7b0959cae8f7ba1eef634c732af8049ad7ac', class: "spw-field-label__required" }, "*"))));
+        return (h(Host, { key: '23ce423c1b5a8d79150dd11ab58feabff12ed2b9' }, h("label", { key: '74a68c9d82319e380b8f0b2439298fc95b19689e', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: 'bbbc2511a0aa4050e90545023230f842d3a7c0c5', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: '1308e5cf08ace99121747d980ce6a1e7577c1aba', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: '012911fab7ea6c87bb301b58765cb866f5e2360c', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: '79c11a45fe31be3d59ced505475e5d2ac1eaca1a', class: "spw-field-label__required" }, "*"))));
     }
     static get is() { return "spw-field-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }
@@ -389,4 +390,38 @@ template {
   flex: 1;
   font-size: 14px;
   line-height: 1.5;
+}
+.spw-field-message__expandable {
+  margin-top: 4px;
+}
+.spw-field-message__expandable spw-link {
+  user-select: none;
+  --spw-link-text-decoration: none;
+  --spw-link-color: var(--spw-colors-support-grey-grey-800);
+}
+.spw-field-message__expandable spw-link:hover {
+  --spw-link-text-decoration: underline;
+}
+.spw-field-message__details {
+  margin: 6px 0;
+  padding: 16px;
+  border: 1px solid transparent;
+  background: var(--spw-colors-support-grey-grey-50);
+  border-radius: 4px;
+  color: var(--spw-colors-support-grey-grey-800);
+}
+.spw-field-message--error .spw-field-message__details {
+  border-color: var(--spw-color-states-error-error-300);
+}
+.spw-field-message--warning .spw-field-message__details {
+  border-color: var(--spw-color-themes-orange-orange-500);
+}
+.spw-field-message--success .spw-field-message__details {
+  border-color: var(--spw-color-states-success-success-500);
+}
+.spw-field-message--hint .spw-field-message__details {
+  border-color: var(--spw-colors-support-grey-grey-300);
+}
+.spw-field-message__details--hidden {
+  display: none;
 }