@spw-ds/spw-stencil-library 1.14.2 → 1.16.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: '564bc68f8ad447f770da4c8728f6d58a384a9b2b' }, h("div", { key: '32ccc3cda6d814e03421420246ed16330ea849c2', class: containerClass }, this.label && (h("spw-field-label", { key: '80583426a18953b34e8fc201afa824f912518f19', 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: '0dc408e84a46e244c091346d2933ce2303d1a38f', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '4c1ff3ff68256ca217ec08064a445dbded3ab965', class: "spw-date-picker__input-container" }, h("input", { key: 'f17dbd4e81beac9034360d7f37c9ac035246b296', 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: '4045e0a3c681853098a82b9c02299ae102afe226', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: '6d306f9bea41e7247d12b58d1d5835fb2f94f1e5', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: 'de27f7a164391647c8d493903cafc7daa8265ce7', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: '56752a196dab51adfd885ee2cf77fe0aa00df145', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: 'ecc83e23e44439e69e776a55a18efb1713cfaa0f', icon: "fa-calendar", variant: "fa-regular", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '31591b3fb7000b0ed02a6bf644fd6b716a31f5e7', variant: "error", showIcon: this.showErrorIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { key: 'e64d3106764297df28b83a5faa80199931af97fa', name: "details", slot: "details" }))), this.hint && (h("spw-field-message", { key: 'a53097541783ed894989cd8558623365aa24c240', variant: "hint", showIcon: this.showHintIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { key: 'b5ad3ca2403c6bc7ff151163343a608aac901a3e', name: "details", slot: "details" }))), this.success && (h("spw-field-message", { key: '41e4ec713c6f90a12acf4ebf44331d4197a0fa15', variant: "success", showIcon: this.showSuccessIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { key: 'ac0cf72b8b8ba372f678318b0371ad7d8e95033b', name: "details", slot: "details" }))), this.warning && (h("spw-field-message", { key: 'a0135160706177af565dfbb1bf00d93b80406efd', variant: "warning", showIcon: this.showWarningIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { key: 'ce8f1a543fae42a05a132e0ac34aefd35e2fe4a2', 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: '959023af74f1f006cb52ff26b8befc1b55526c09' }, h("div", { key: '0b48c017357960db20fbf1d5359493c2ed8d26e2', class: this.containerClass }, this.modal && h("div", { key: '83462c42f8cc7031f0112cb3f4516f947fcbe99a', class: "spw-drawer__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '2b28ec80a7ad5a811293c1b488596de35e331484', ref: el => (this.drawerPanel = el), class: this.panelClass, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '9f59f1eca71c1503a0eb7aed9d1b4e04008f96d5', class: "spw-drawer__header" }, this.showCaption && h("h2", { key: 'a722f7d54a5b333c3c43d5a4ae82bfb5f1fd6540', class: "spw-drawer__caption" }, this.caption), this.showCloseButton && (h("div", { key: '418acf5d3f54a4f24d8b92e62ef2770fa35ac5f5', 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: '6f2d090746ab8f134abf7f5513316cf175e54ca4', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: '86f2ebde999686b9525387f63f4dbff5365f728e', class: "spw-drawer__body", ref: el => (this.drawerContent = el) }, h("slot", { key: '1874804cc1740f1032e27d482223dd83a755e737', name: "content" })), h("div", { key: '3fb59d6bed76b2e670457c9f70ab5def222c5069', class: {
                 'spw-drawer__footer': true,
                 'spw-drawer__footer--present': this.slotFooterPresent,
-            } }, h("slot", { key: 'dd720c1c5d968a07028bc847ec3f2237fbf6a63c', name: "footer", onSlotchange: (e) => {
+            } }, h("slot", { key: 'f36304df12e7546f9925f8ce91efb0d7edf8b985', 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: 'eeaf9d766f88ed01cd7b1c50bc15a6b61ec89983', "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: '254b2d132682cd814071d3a9efe34302aa5c2fb8' }, h("div", { key: 'cf9ec527584a84088280a1becc2f6bdc029ee527', class: "spw-dropdown-container" }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' }))));
     }
     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: '32e923b3a9e108f1086174906faee0da128ff653' }, h(Tag, { key: '6d8ef52d2f13479c89f27f778ab9f9bf6825a7f6', 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: '38f32fedc809d43ecdb54a1b951beca4e1d66736', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '1a56eb106833f1de640edb96a9384dc12c319170', variant: this.iconVariant, icon: this.icon }))), h("div", { key: 'd17e23cf648d73ada4446ddf734337486d7c8065', class: "spw-dropdown-item__content" }, h("div", { key: '0825c1c2975fbd3fae85a824e24271cbd022d951', class: "spw-dropdown-item__label" }, h("slot", { key: 'cf1c32853c466f2739d825e6374d547cd70cd913' })), this.hasSubItems && (h("div", { key: '906e05ba073404465f8d846b02c977945a29b343', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '6575e949217f70d56d4f2b182f2091f663034c59', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: '256d12700e405244870e4a336a59dcd36a3eb2d2', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '3c84ac7480468f6789595e9506e34100b4184a68', 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

@@ -43,10 +43,8 @@ export class SpwDropdown {
             requestAnimationFrame(() => {
                 this.positionDropdown();
                 this.addListeners();
-                const focusable = this.getFocusableElements();
-                if (focusable.length > 0) {
-                    focusable[0].focus();
-                }
+                this.dropdownEl.setAttribute('tabindex', '-1');
+                this.dropdownEl.focus({ preventScroll: true });
             });
         };
         this.hideDropdown = () => {
@@ -84,6 +82,13 @@ export class SpwDropdown {
         if ((e.key === 'Enter' || e.key === ' ') && !this.isVisible) {
             e.preventDefault();
             this.open = true;
+            return;
+        }
+        if (e.key === 'ArrowDown' && this.isVisible) {
+            e.preventDefault();
+            const focusable = this.getFocusableElements();
+            if (focusable.length > 0)
+                focusable[0].focus();
         }
     }
     componentDidLoad() {
@@ -228,7 +233,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: '355a6c48bfc0256e89821adc33ee5302617cc815', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: 'ea07cd30880d19c666293f895a4deeebdff6a0f8' })));
     }
     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: '98e1c6ce4789a41cb40cf17e05b4b5f01ede9206' }, h("label", { key: '806fcafd344b1ec3aebad9f7ca5240fe60c66a70', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: 'df417feeb140d5791a115d9454062962135fddaa', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: '5874bf363f3c0f194b4710b85e3bc7e4e594ed00', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: '80048d6b4ab44327a48b400fd443c63705c16bf4', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: '3522289fd7311ac8d834a99119003aea6468e125', 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;
 }