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

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { formatDate } from "../../../utils/utils";
 export class SpwCardContent {
     render() {
-        return (h("div", { key: '659e7c16eb372abdabda6ca929b4a22189fe8b90', class: "spw-card-content" }, this.tag && h("span", { key: '201ab8b6bcb72fee3810e7d91d8c40bd03c98e0f', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: '83f2dabb7b74160735d0d52348c182234d69fe9b', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: '23178f23d7955013a8c1c094dbc3c8347b85bb57' })));
+        return (h("div", { key: '2c2fcc3b2e3d78df09ea2d116ba7aa27572ff73e', class: "spw-card-content" }, this.tag && h("span", { key: '1d12fbb8b97c86ec445a129cfc011150e35b8da1', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: 'd6dc084becca10d787823b57db1bac4776524603', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: 'd2e5d24d49ad9e51e443792ebfe876f7c56a2731' })));
     }
     static get is() { return "spw-card-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SpwCardExcerpt {
         };
     }
     render() {
-        return (h(Host, { key: '3ce6bd5152fdf097f241ba361d3f7823eae93845' }, h("div", { key: '2c93ecd7d1ab68daac8404fe57eb1c50c452d914', class: this.elementClass }, h("slot", { key: 'e92c70a8e76754d3843091bc32369c2ef8b4e05f' }))));
+        return (h(Host, { key: '6c429d9b3db9b3e04b84742f950d4b9885a014c7' }, h("div", { key: 'adbceaf382d03493c1aae9362607d08a2ef2062c', class: this.elementClass }, h("slot", { key: '686487cd3cbbef5883fe8d5fc3b0b3846cd155d2' }))));
     }
     static get is() { return "spw-card-excerpt"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class SpwCardImage {
         if (this.ratioDesktop) {
             style['--spw-card-image-ratio-desktop'] = this.ratioDesktop;
         }
-        return (h("div", { key: 'e4d45657e976103bdd67405febb94ff533ca2074', class: this.elementClass, style: style }, this.label && h("span", { key: '58b6dc5996fab34308abf15de2f230bf60e037e9', class: "spw-card-image__label" }, this.label), h("slot", { key: 'd54fc4978046124e6ded97a7972c4c5b14b308fe' }), h("div", { key: '83162eabecde03729482a0c6b80e49b830c78482', class: "spw-card-image__icon" }, h("spw-icon", { key: '18bb59635032c99ed53170e651acb0032e529e93', icon: "fa-plus" }))));
+        return (h("div", { key: '99a420e6d6504a680e042962bef1515fd69e3478', class: this.elementClass, style: style }, this.label && h("span", { key: '987cf7aa45cca97688e1ab1875f6ad2f18cca83c', class: "spw-card-image__label" }, this.label), h("slot", { key: '9fa9212f1177b61ea60b2fbadb3bafdc044a97b5' }), h("div", { key: '9e2c8cc0e80f22fd0691c6ab651a2b56cedacde9', class: "spw-card-image__icon" }, h("spw-icon", { key: 'a33dc1ba20503731a718f652097a056f9059f07c', icon: "fa-plus" }))));
     }
     static get is() { return "spw-card-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class SpwCardSubtagItem {
         };
     }
     render() {
-        return (h(Host, { key: 'e96d5dafe20d14f18b0add74ea5641b3666057a5' }, h("span", { key: '9fcd5530d7d36dec9f2f4edba969a95acc5f0143', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: '74a4fb7f092805c989af5ebbeede916573574043' }))));
+        return (h(Host, { key: '9af637b294bc0fa88b1114846e378be0052e8710' }, h("span", { key: 'aca8582fe5aa57a98c377a9d72842dcd025b4e05', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: '1de78f781b517956870720a4e414a07c414ac6db' }))));
     }
     static get is() { return "spw-card-subtag-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,7 @@ export class SpwCardSubtags {
         };
     }
     render() {
-        return (h(Host, { key: '664ee2fcec65eb94517e2dd3f23bae61ec574b99' }, h("div", { key: 'e49c2d907cedd73a08651fb65a816e3b40e9edf0', class: this.elementClass }, h("slot", { key: '5807f5671b7351eac2f399581bb35baf624e0db9' }))));
+        return (h(Host, { key: '6acdf44537f3fe253a660c42bcd49747c174b259' }, h("div", { key: 'cbd71216edf3195d757859cc4b8813aca0fb4634', class: this.elementClass }, h("slot", { key: '7ab3d0c3bd911f659eaab8577a9ef27a5263be7e' }))));
     }
     static get is() { return "spw-card-subtags"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SpwCardTitle {
         this.borderColor = '';
     }
     render() {
-        return (h(Host, { key: '7b07a8041f2487ebdb8e1318989cb8dcf937fbd7', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: '2361bf21437a9ab6dd815cd3455b69b535496fdb', class: "spw-card-title" }, h("span", { key: '71f90f818d9b1e5b4197f19e3b74335b72923f24', class: "spw-card-title__text" }, h("slot", { key: 'e72130ff761b029e91ef605c74432a9b090e12fb' })))));
+        return (h(Host, { key: 'ed14489eda79f574bb4464af65eaaa1504eb8ccd', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: '47e51dddf149cbd95512495f5813148fa9f53cba', class: "spw-card-title" }, h("span", { key: '4d47a9766c2a209a4095fb7d472b40f1c1eae80f', class: "spw-card-title__text" }, h("slot", { key: 'a35dfd22138be0fbd403ee908e20e7c542659f98' })))));
     }
     static get is() { return "spw-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -120,7 +120,7 @@ export class SpwCard {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': this.disabled ? 'true' : null,
         };
-        return (h(Host, { key: '1f0f6b29c31aa045351634067ab593b11ab20a77', class: { '--is-full-height': this.fullHeight } }, h("article", { key: 'abd117a054dc991f74db62ac0af55d45602cf656', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '2acc816999271e75e76e4b9dd35217b67636d9c5' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: '895dd6639551a59749ae92b8c54d1acd47ce0d95', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: 'c5be06349fc473ff0096c88d592442cb3799a7f4', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: '46364754b07bd3904338571e651efb95025c9f59' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'df4b298a2db8f764923600dabe9439fe33ca9217' })))));
+        return (h(Host, { key: 'a40ca4684fd0b73eabdba58b4d59dbd18b2676a3', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '3b9b6460c69201c27e416c1dbadd5686e3a01bfc', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: 'fc00c807b2500988de46bc84b9f74b8b0e4d49a4' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: '6fca1dbdc58b345ca8683fc9bdfed31a82241cee', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: '07c73a061e0cd2f223e67b36de0dd66d2c39e4d2', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: '67b8338341be65711bc605f3db233a954708666e' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'ce06b59ae1a8c729c9831081e1a7b7adc5c5dc61' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class SpwCheckbox {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: 'ce535188428a408a9f9d08c42975e7e764f3d2a1', class: "spw-checkbox" }, h("input", { key: 'b93941fddd412647334238e7ba3563dfcfe51866', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '742f94b4a30b75cf93ae95de94cd4ac8cd6a95c1', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: '052f299aa4bdc0a9353e611bdb069d7f35bac107' }))), h("div", { key: '14f1d7e20e9727d0e46421d8ff8a8fd4ab846afa', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: 'c6d04c91720fee0c9f87f647f5077777dec77764', icon: this.icon }))));
+        return (h("div", { key: '99bf5a7027aaa9f09bc6a0e55bb60a7469848fc5', class: "spw-checkbox" }, h("input", { key: '712c81629b8a498d48befbb1571ce10dd52de89b', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '4b849e52cee771bd0c242842fb92a15f441ac1ec', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'd766bae2995612c4b09aedf6337d6dd67447aba9' }))), h("div", { key: '0620b906667f2c7b40551129bcb63a48d88d552c', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: '1a4fb292ee263daa07bd7bf09599ca5ecae16840', icon: this.icon }))));
     }
     static get is() { return "spw-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -446,6 +446,14 @@ template {
   flex: 1;
   padding-right: 30px;
   max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.spw-custom-select__selected span {
+  white-space: nowrap;
+}
+.spw-custom-select--is-clear .spw-custom-select__selected {
+  padding-right: 58px;
 }
 .spw-custom-select__selected-item {
   display: inline-flex;
@@ -475,10 +483,34 @@ template {
   text-overflow: initial;
   text-wrap: initial;
 }
-.spw-custom-select__arrow {
+.spw-custom-select__icons {
+  display: flex;
+  align-items: center;
   position: absolute;
+  top: 50%;
   right: 12px;
-  top: 10px;
+  gap: 8px;
+  pointer-events: none;
+  transform: translateY(-50%);
+  z-index: 12;
+}
+.spw-custom-select--large .spw-custom-select__icons {
+  right: 24px;
+}
+.spw-custom-select__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  pointer-events: auto;
+  cursor: pointer;
+  padding: 2px;
+  border: 2px var(--spw-color-themes-grey-grey-900) solid;
+  border-radius: 50%;
+  font-size: 12px;
+}
+.spw-custom-select__arrow {
   font-size: 16px;
   color: var(--spw-color-themes-grey-grey-600);
   pointer-events: none;
@@ -497,10 +529,13 @@ template {
 .spw-custom-select--has-value.spw-custom-select--is-opened .spw-custom-select__search {
   top: 100%;
   margin-top: -3px;
+  padding: 4px;
+  border: 1px solid var(--spw-color-themes-grey-grey-800);
+  background: white;
 }
 .spw-custom-select--up.spw-custom-select--has-value.spw-custom-select--is-opened .spw-custom-select__search {
   top: -100%;
-  margin-top: 3px;
+  margin-top: -7px;
 }
 .spw-custom-select__search-input {
   padding: 0;
@@ -509,6 +544,11 @@ template {
   border: none;
   margin: 0;
   width: calc(100% - 30px);
+}
+.spw-custom-select--is-clear .spw-custom-select__search-input {
+  width: calc(100% - 58px);
+}
+.spw-custom-select__search-input {
   text-overflow: ellipsis;
 }
 .spw-custom-select__search-input:focus {
@@ -519,8 +559,9 @@ template {
   padding: 0 12px;
 }
 .spw-custom-select--is-opened.spw-custom-select--has-value .spw-custom-select__search-input {
-  border-right: 1px solid var(--spw-color-themes-grey-grey-800);
+  border: 1px solid var(--spw-color-themes-grey-grey-800);
   width: 100%;
+  border-radius: 3px;
 }
 .spw-custom-select__options {
   background-color: #fff;
@@ -553,16 +594,16 @@ template {
   margin-top: -40px;
 }
 .spw-custom-select--down.spw-custom-select--has-value.spw-custom-select--is-opened:not(.spw-custom-select--not-searchable) .spw-custom-select__options--fixed {
-  margin-top: 35px;
+  margin-top: 44px;
 }
 .spw-custom-select--up.spw-custom-select--has-value.spw-custom-select--is-opened:not(.spw-custom-select--not-searchable) .spw-custom-select__options--fixed {
-  margin-top: -77px;
+  margin-top: -86px;
 }
 .spw-custom-select--down.spw-custom-select--has-value.spw-custom-select--is-opened:not(.spw-custom-select--not-searchable) .spw-custom-select__options:not(.spw-custom-select__options--fixed) {
-  margin-top: 34px;
+  margin-top: 44px;
 }
 .spw-custom-select--up.spw-custom-select--has-value.spw-custom-select--is-opened:not(.spw-custom-select--not-searchable) .spw-custom-select__options:not(.spw-custom-select__options--fixed) {
-  margin-top: -36px;
+  margin-top: -46px;
 }
 .spw-custom-select__no-results {
   padding: 12px;

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

@@ -48,6 +48,10 @@ export class SpwCustomSelect {
         this.tooltipCursor = 'help';
         /** Utilise un positionnement fixed pour le dropdown si nécessité de sortir du contexte (utile dans une modal avec overflow hidden) */
         this.fixedDropdown = false;
+        /** Indique si le champ peut être effacé avec un bouton */
+        this.isClear = false;
+        /** Direction d'ouverture du dropdown */
+        this.direction = 'auto';
         this.handleOtherSelectOpened = (event) => {
             if (event.detail.instance !== this.host && this.isOpen) {
                 this.closeDropdown();
@@ -76,12 +80,21 @@ export class SpwCustomSelect {
                 return;
             const rect = this.selectContainer.getBoundingClientRect();
             const viewportHeight = window.innerHeight;
-            if (rect.bottom + 200 > viewportHeight && rect.top > 200) {
+            if (this.direction === 'top') {
                 this.dropdownDirection = 'up';
             }
-            else {
+            else if (this.direction === 'bottom') {
                 this.dropdownDirection = 'down';
             }
+            else {
+                // auto
+                if (rect.bottom + 200 > viewportHeight && rect.top > 200) {
+                    this.dropdownDirection = 'up';
+                }
+                else {
+                    this.dropdownDirection = 'down';
+                }
+            }
             this.dropdownPosition = {
                 top: rect.bottom,
                 left: rect.left,
@@ -270,6 +283,10 @@ export class SpwCustomSelect {
         this.focusedOptionIndex = null;
         this.searchText = '';
     }
+    handleClear(event) {
+        event.stopPropagation();
+        this.resetSelect();
+    }
     selectOption(optionValue, event) {
         if (event) {
             event.stopPropagation();
@@ -383,6 +400,7 @@ export class SpwCustomSelect {
             'spw-custom-select--no-value': !this.hasSelectedValue,
             'spw-custom-select--is-searchable': this.isSearch,
             'spw-custom-select--not-searchable': !this.isSearch,
+            'spw-custom-select--is-clear': this.isClear && (this.hasSelectedValue || !!this.searchText),
         };
     }
     normalizeString(str) {
@@ -437,11 +455,11 @@ export class SpwCustomSelect {
     render() {
         const filteredOptions = this.getFilteredOptions();
         const showPlaceholder = this.showPlaceholder();
-        return (h("div", { key: '3c0bdcc75efdcf34c0315643aeddc3f9002854ae', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: 'a2c74f82793145576a3e5355b7bfcaf8daa58248', 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: '6279adf0d5d98508c1f67eb18c9a80190a2bc939', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '8dd3424a06bb24e258a14e9bdf50f78cbe7e8cad', class: "spw-custom-select__wrapper" }, h("div", { key: 'cb20a730c342f3a5ef9047d8271718251bb77799', 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: '15d1a85d0c355d1265e1f1f57a78a1c27d8118e0', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '329785ae3726c0ad5a75c4068e3cc131b057564a', class: "spw-custom-select__search" }, h("input", { key: 'cb5b8955c16b49002888400ffb1b25c996b6da35', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: 'd04a28ee8d9c48ed3948ea38024f6758b19c2fca' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '3e246c4809d60bac38d593923687b21735fd7ffb', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
+        return (h("div", { key: '064c59c91692cc15ba93199a724553477bac7697', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: 'c326970b9d3da20f7ca2236500e98bddd9bf1ce4', 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: '85103620cd282232f01fdbd467886490fd888991', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '337d9a34f40c13f8fb491c73a137711d7cbcee6d', class: "spw-custom-select__wrapper" }, h("div", { key: '50566c5d50437a9d351ee44198d479f32a603158', 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: '4f847641c06968e5d7be950bcdae69c988245755', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '5001191ddaed6c57f2f3242a374288ba1998e874', class: "spw-custom-select__search" }, h("input", { key: '5ab68945bdc9fd54365dcac92d27c20dad0f8061', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: '6edafe01385ba6d334532cc72029255a11cc83a5' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '7c344bbc9beff7011fe4b25acd4d267ac7c37caa', 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: 'e3563dcc1d7a0d624a289ded3ca6d070365fb265' }, this.getSelectedLabels()))), h("div", { key: '8973c6c9b6106798cc00daab1e649d7329f4a32c', class: "spw-custom-select__arrow" }, h("spw-icon", { key: '2c013ec6bdccff0f59ccbc7db1ab629e1eb1029f', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' })), this.isOpen && (h("div", { key: '0f77a182d16650137014adb896a5d9ee0da5df82', class: {
+        }))), !this.multiple && h("span", { key: 'ac06a9718592fde37f42c90d84700d74d0d50416' }, this.getSelectedLabels()))), h("div", { key: '4a083004a149ab7388a982fb5eff4e128bbb4913', class: "spw-custom-select__icons" }, this.isClear && (this.hasSelectedValue || !!this.searchText) && (h("span", { key: 'de239bf60b076f4e01a82c454f285c7bdf65c5df', class: "spw-custom-select__clear", onClick: (event) => this.handleClear(event) }, h("spw-icon", { key: '1dce3eb6f67567b559992645681d9796a1152ed3', icon: "fa-xmark" }))), h("div", { key: 'f4473657553e03512f3c3468ee4303e83fb4183e', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'f4ccf66ee935c4e169eca3fc4beebaa35c3adc1c', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' }))), this.isOpen && (h("div", { key: '4c5fc4853b083c4a1128fadb6f35e33a67b07428', class: {
                 'spw-custom-select__options': true,
                 [`spw-custom-select__options--${this.dropdownDirection}`]: true,
                 'spw-custom-select__options--fixed': this.fixedDropdown,
@@ -452,14 +470,14 @@ export class SpwCustomSelect {
                     left: `${this.dropdownPosition.left}px`,
                     width: `${this.dropdownPosition.width}px`,
                 }
-                : {} }, !!filteredOptions.length && (h("ul", { key: '24708d6ae015ea9f65887ce87fd53687b7ea6ebb' }, filteredOptions.map((option, index) => (h("li", { class: {
+                : {} }, !!filteredOptions.length && (h("ul", { key: 'a652e4fd6b5741337eceb5dc6c5efbe0deb7d995' }, 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))
                     : option.value === this.internalValue,
                 'spw-custom-select__option--focused': index === this.focusedOptionIndex,
                 'spw-custom-select__option--disabled': option.disabled,
-            }, 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))))), !filteredOptions.length && h("p", { key: '329bf21e220fc97e90e0edb085a10fda539f79cf', class: "spw-custom-select__no-results" }, this.noResultsText)))), 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))))), !filteredOptions.length && h("p", { key: '0d786046f4f8b3c6a9a43f5c2199758feb63a305', class: "spw-custom-select__no-results" }, this.noResultsText)))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-custom-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1012,6 +1030,46 @@ export class SpwCustomSelect {
                 "reflect": false,
                 "attribute": "fixed-dropdown",
                 "defaultValue": "false"
+            },
+            "isClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le champ peut \u00EAtre effac\u00E9 avec un bouton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-clear",
+                "defaultValue": "false"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction d'ouverture du dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'auto'"
             }
         };
     }

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

@@ -493,8 +493,8 @@ template {
   color: var(--spw-color-themes-grey-grey-500);
 }
 .spw-date-picker__icon--calendar {
-  pointer-events: none;
   font-size: 16px;
+  cursor: pointer;
   color: var(--spw-color-text-secondary, #6b7280);
 }
 .spw-date-picker__icon--clear {

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

@@ -12,7 +12,7 @@ export class SpwDatePicker {
         this.dateFormat = 'dd/MM/yyyy';
         /** Jours de la semaine désactivés (0=dimanche, 1=lundi, etc.) */
         this.disabledDays = [];
-        /** Dates spécifiques désactivées (format ISO) */
+        /** Dates spécifiques désactivées (format ISO, ex: ["2026-01-01", "2026-12-25"]) */
         this.disabledDates = [];
         /** Position du datepicker */
         this.position = 'bl';
@@ -134,6 +134,24 @@ export class SpwDatePicker {
         this.handleClear = () => {
             this.resetInput();
         };
+        this.handleCalendarIconClick = (ev) => {
+            var _a, _b;
+            ev.stopPropagation();
+            if (this.disabled)
+                return;
+            if (this.isOpen) {
+                (_a = this.datepickerInstance) === null || _a === void 0 ? void 0 : _a.hide();
+            }
+            else {
+                if (!this.datepickerInstance) {
+                    this.initializeDatepicker();
+                }
+                (_b = this.datepickerInstance) === null || _b === void 0 ? void 0 : _b.show();
+            }
+        };
+        this.handleCalendarIconMouseDown = (ev) => {
+            ev.preventDefault();
+        };
         this.handleKeyDown = (ev) => {
             const target = ev.target;
             const isInputFocused = target === this.inputElement;
@@ -209,6 +227,20 @@ export class SpwDatePicker {
                 this.disabledDays = [];
             }
         }
+        if (typeof this.disabledDates === 'string') {
+            try {
+                const parsed = JSON.parse(this.disabledDates);
+                if (Array.isArray(parsed) && parsed.every(val => typeof val === 'string')) {
+                    this.disabledDates = parsed;
+                }
+                else {
+                    this.disabledDates = [];
+                }
+            }
+            catch (_b) {
+                this.disabledDates = [];
+            }
+        }
         const start = this.value ? this.formatDate(new Date(this.value)) : '';
         this.internalValue = start;
         this.lastInputValue = this.internalValue;
@@ -615,7 +647,8 @@ export class SpwDatePicker {
                 if (disabledDays.includes(date.getDay()))
                     return true;
                 const dateStr = date.toISOString().split('T')[0];
-                return this.disabledDates.includes(dateStr);
+                const disabledDates = this.disabledDates;
+                return disabledDates.includes(dateStr);
             },
             onSelect: (selectedDateOrInstance) => {
                 const selectedDate = selectedDateOrInstance instanceof Date ? selectedDateOrInstance : selectedDateOrInstance === null || selectedDateOrInstance === void 0 ? void 0 : selectedDateOrInstance.dateSelected;
@@ -757,7 +790,7 @@ export class SpwDatePicker {
             'spw-date-picker--is-clear': this.isClearIconVisible,
         };
         const errorMessage = this.error || this.internalError;
-        return (h(Host, { key: '503da6a7f48f41929ebddb4c8b66486c9b785e78' }, h("div", { key: '7ad729d90a3dd0348a6a58b9cfdd1627bd224a6b', class: containerClass }, this.label && (h("spw-field-label", { key: '868476a029336f48fc8f134992276e444692cc54', 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: 'f06ed76d523873a3628d28c8083c1a52d6d518b7', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '323e82bd4d724cc60471ff3669bdf97614a718fd', class: "spw-date-picker__input-container" }, h("input", { key: 'f483a32dbdabf38dbc03c4d038dd023746459fa8', 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: 'f942188c43e0e927850d0c94757fa344b6595d02', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: '4ef6e052f8c95dba2484f60845b94f9783d263ae', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '2f75e0ad4b966de9751fa6b3989df3292dbf01c5', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("spw-icon", { key: 'cc9d0d66e9b7bc3d4f1a952a9d956bbd63720977', icon: "fa-calendar", class: "spw-date-picker__icon spw-date-picker__icon--calendar" }))), this.error && (h("spw-field-message", { key: '95917a665e75ef3816ec4a8e6248dfd93df81341', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: 'a44899149cc889dda1388394d4601b0bd9ac6b39', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: '83519ce1b0d604a8f69fe95349b81c41974107e4', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: 'b33097d07b1b2a276a45e5d73097e1a372b0f5da', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
+        return (h(Host, { key: '70bc9908337a34fce7a364e15343231c7cddfb3e' }, h("div", { key: '22eebe0dd218243c5b64e07039816788c5fe4366', class: containerClass }, this.label && (h("spw-field-label", { key: 'b05bbd092cc3e170f5d4111b9cb9fc5791066109', 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: 'a3a9cb74cb09f307472a7a41beb8937d095a3477', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'b31e2486767d521c3a9b6d1b7462af85fdbd2e60', class: "spw-date-picker__input-container" }, h("input", { key: '7f5c7a4168768a6828f198973d180e1f6600532a', 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: '863780d4d9a6b3f07e17977125237809166d835f', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: 'c25cd0e5a75ef062ef50b2db3dfa33e40c075f9b', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '4761fbc6c02cc8200c90882a8dd556dae77d9313', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: 'b35d76a9ca1b914b0bec648692e7939dc1ab4cb9', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: 'b28190ea0b55dcf994fd023f6c7c6c003710dea9', icon: "fa-calendar", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '2fb10c2981460f879c7d66fd6fb0439c38d7929c', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: '8d1d51c87b3fc336de054c8bfe5780b0fefb31e8', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: '2f73dff0acc8048983c6e55ce239e575e91a9440', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: 'f4a9746012910672908fcb188fd0fe4ed69ef352', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
     }
     static get is() { return "spw-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -989,21 +1022,23 @@ export class SpwDatePicker {
                 "defaultValue": "[]"
             },
             "disabledDates": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Dates sp\u00E9cifiques d\u00E9sactiv\u00E9es (format ISO)"
+                    "text": "Dates sp\u00E9cifiques d\u00E9sactiv\u00E9es (format ISO, ex: [\"2026-01-01\", \"2026-12-25\"])"
                 },
                 "getter": false,
                 "setter": false,
+                "reflect": false,
+                "attribute": "disabled-dates",
                 "defaultValue": "[]"
             },
             "position": {

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: '3fe5b3bf817789aaeb93012096dfae279a170022' }, h("div", { key: '9974e7b7a489f4d325c75390efae3adbd9ce4277', class: "spw-dropdown-container" }, h("slot", { key: '67f4d540d2666584bfc8e39ca1ea9ed3f29f9d40' }))));
+        return (h(Host, { key: 'f32b9cfb6175c45e09c54aaf0d84b1584f5922de' }, h("div", { key: 'aeed248057b80b9fe32268bfe626f60528f9eda5', class: "spw-dropdown-container" }, h("slot", { key: 'b8b91107d4d1de0f882256b4a2578766c5017e5a' }))));
     }
     static get is() { return "spw-dropdown-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class SpwDropdownItem {
             'spw-dropdown-item__toggle': true,
             'spw-dropdown-item__toggle--open': this.subItemsOpen,
         };
-        return (h(Host, { key: 'b3f7ce5ca20bee483f526283143e2301b108e438' }, h(Tag, { key: '49a4d04cb4fe11f1c82f203934c2b236a1b1147f', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleItemClick }, this.icon && (h("div", { key: '0c200bb9198e20fb19b752583d8aeed5b008427f', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '20fae7abdcd164ef6a17fcbab803bb63c7d1f6f6', variant: this.iconVariant, icon: this.icon }))), h("div", { key: '672d0ec30cdfac72f86b58f92e22a3a7b420ba3f', class: "spw-dropdown-item__content" }, h("div", { key: 'dd8f5191e40b6a90b13a1718ab5783f1686ec652', class: "spw-dropdown-item__label" }, h("slot", { key: 'd7a5d6c362ce583de2a3d6ff48fd523cc5aeecc0' })), this.hasSubItems && (h("div", { key: '3dadabe2ff4e5aa362b717c743ce528697647b08', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '2e7fb8df2435c76c39add6f448cf4e4fa12893e4', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: 'd4c1701ee2215d78fea87bded96a68c37c3c1762', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '5181144a85a979b89306854aa2f4c4c130cdf678', name: "sub-items" })))));
+        return (h(Host, { key: '1596a4172e1e8eefbfa765546719c55e2c98f3d5' }, h(Tag, { key: '24ae4e7ba274e59218030e38153d7c4c0493a835', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleItemClick }, this.icon && (h("div", { key: '4b8b5d3739afbabc92d67182a4a9a978f9af6a6b', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: 'fed0d8d7561105acca93330014763cb1fe812b71', variant: this.iconVariant, icon: this.icon }))), h("div", { key: '6e9f0758fa21309ebf4a26143987510e2c610cf3', class: "spw-dropdown-item__content" }, h("div", { key: 'a0d0da494fc950e1fd06214143b7aa87af92bfec', class: "spw-dropdown-item__label" }, h("slot", { key: '6d8c7a857150d96359abd2a1c856905a7c170ae9' })), this.hasSubItems && (h("div", { key: '19cd50f2dde61fadb6e121b831c1518abf0e54e9', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: 'f04c856a18d549c40b68d702f2d27a2b930bd881', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: '11b2e9dac24ea9232cb03d8e6332f056408f657d', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: 'fa0fa7f551ef87ab9ad0a8fe16e5fb5f21244fbc', name: "sub-items" })))));
     }
     static get is() { return "spw-dropdown-item"; }
     static get originalStyleUrls() {

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

@@ -19,6 +19,7 @@ export class SpwDropdown {
             if (!slotContent)
                 return;
             this.isVisible = true;
+            this.spwDropdownOpen.emit();
             this.dropdownEl = document.createElement('div');
             this.dropdownEl.className = `spw-dropdown-fixed spw-dropdown-fixed--${this.direction}`;
             if (this.hasPadding)
@@ -39,6 +40,7 @@ export class SpwDropdown {
                 return;
             this.isVisible = false;
             this.open = false;
+            this.spwDropdownClose.emit();
             if (this.dropdownEl && this.movedContentEl) {
                 this.host.appendChild(this.movedContentEl);
             }
@@ -130,7 +132,7 @@ export class SpwDropdown {
         dropdown.style.visibility = 'visible';
     }
     render() {
-        return (h("div", { key: 'baffda0bbcd562a9b1aab9a95093fa685df833c9', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open) }, h("slot", { key: '35cdd3181680e76069cc5954fea5aed9b9d1a861' })));
+        return (h("div", { key: '69f5c85c85f197d1e2627f51f38026a124c8adc9', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open) }, h("slot", { key: '4738589550833682aa02288bde77dbfc248caf51' })));
     }
     static get is() { return "spw-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -233,6 +235,39 @@ export class SpwDropdown {
             "isVisible": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "spwDropdownOpen",
+                "name": "spwDropdownOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis quand le dropdown s'ouvre"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "spwDropdownClose",
+                "name": "spwDropdownClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis quand le dropdown se ferme"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "close": {

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: '6a8c2bf53b718b7588d115e69e9fd36f566f3d86' }, h("label", { key: 'd4e270a7e27ebcc6691b70eefc920af21bc0bf12', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: 'a738b89f8331a78f6b0e81532d58222b6969d732', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: '87030abf7cd411e916ecbeeaf93233eac983693c', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: 'b54afad9da37de45ceaa445503f89b5a37f12d9a', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: '1b96ed633361f1a3ab7ee10879764cd2fe8bd95f', class: "spw-field-label__required" }, "*"))));
+        return (h(Host, { key: '2b8692efd1b89269954369f9b5a7c3ca93bdb373' }, h("label", { key: 'ea0528fd37014887aa69ec5daa0b5bd27fa0c587', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: 'f6b5d82cb06a872eafa95e59d583d5fe5d9f10a7', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: '52ae36c3a49b219378f161b9d3836cc2eddfbe77', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: 'ad8cc7d2edf098f79776fa96c93d249cd593a048', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: 'f512051ad319f4e0b1c985cbb931076662140505', 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.js

@@ -25,7 +25,7 @@ export class SpwFieldMessage {
         };
     }
     render() {
-        return (h(Host, { key: '80b007505fa5a234dc16806b1e06aa7d0adc5993' }, h("div", { key: 'df861af6760dde32da4765280cd080d7ac4ec490', class: this.elementClass }, this.showIcon && (h("div", { key: '2c2195d50faa9de71f777dac0d331ca3f85d86fb', class: "spw-field-message__icon" }, h("spw-icon", { key: 'a2260cec32a7212c074e63c400f79ea0689831c6', icon: this.variantIcon }))), h("span", { key: 'bf13d18c14d44501834c1e5234cec11341c95f77', class: "spw-field-message__text" }, h("slot", { key: '83dff455be123186f4f413b94378af62dce06f58' })))));
+        return (h(Host, { key: '910e4185ba899bff2dd459a6511858312e1a48c8' }, h("div", { key: '8bfc190c38b5c0670416697d10949fc579c3567d', class: this.elementClass }, this.showIcon && (h("div", { key: 'e9c7cb9ac764d1149b741b2e8c9b6d10324e9c87', class: "spw-field-message__icon" }, h("spw-icon", { key: 'c68c05e5250f151ddddaa9aaa735040fb095849c', icon: this.variantIcon }))), h("span", { key: '7c6d9ced9d81496e65f4f02a111a731458e7d3b4', class: "spw-field-message__text" }, h("slot", { key: 'ec50fc1f5c1d082f293601dcb94ab412177053ec' })))));
     }
     static get is() { return "spw-field-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-file-upload/spw-file-upload.js

@@ -221,10 +221,10 @@ export class SpwFileUpload {
     render() {
         const inputTextNoDrop = this.multiple ? 'Choisir vos fichiers...' : 'Choisir votre fichier...';
         const inputTextDrop = this.multiple ? 'Déposez vos fichiers ici' : 'Déposez votre fichier ici';
-        return (h("div", { key: '97c31d702f7eae1d568f0edf3c2a18e626a8cb46', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: '59066fd99ea2dc7428787080f794dc3862c21b8e', type: "file", ref: el => (this.inputElement = el), onChange: this.handleFileChange.bind(this), name: this.name, multiple: this.multiple, accept: this.accept, style: { display: 'none' }, disabled: this.isMaxFilesReached }), this.enableDropZone ? (h("div", { tabindex: this.disabled || this.isMaxFilesReached ? -1 : 0, onKeyDown: this.handleKeydown.bind(this), onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), class: "spw-file-upload__dropzone" }, inputTextDrop, " ou ", h("span", { class: "spw-file-upload__dropzone-link" }, "choisissez sur votre ordinateur..."))) : (h("spw-button", { variant: "secondary", onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), disabled: this.disabled || this.isMaxFilesReached }, inputTextNoDrop)), h("div", { key: 'b21008bdc6841473447d3d91c62e58ade6185aba', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: '41e148516f6a007e6b48a3c40cae197ea884a3ef' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: '26f4a6e08072b6a1d25e48fed59dbc2e5d940c28', class: "spw-file-upload__info" }, this.selectedFiles.length > 0 ? (h("ul", { class: "spw-file-upload__info-list" }, this.selectedFiles.map((file, index) => (h("li", { key: index }, h("span", { class: "spw-file-upload__info-list-name" }, file.name), h("div", { class: "spw-file-upload__info-list-actions" }, h("span", { class: "spw-file-upload__spacing" }, formatFileSize(file.size)), h("a", { class: "spw-file-upload__info-list-delete", href: "#", onClick: e => {
+        return (h("div", { key: '71112781ef43b1aa8f4949a0e077852d1c2dfbdf', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: '784c5cdd9cd48c9e2752b631b5f565daa0f03e19', type: "file", ref: el => (this.inputElement = el), onChange: this.handleFileChange.bind(this), name: this.name, multiple: this.multiple, accept: this.accept, style: { display: 'none' }, disabled: this.isMaxFilesReached }), this.enableDropZone ? (h("div", { tabindex: this.disabled || this.isMaxFilesReached ? -1 : 0, onKeyDown: this.handleKeydown.bind(this), onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), class: "spw-file-upload__dropzone" }, inputTextDrop, " ou ", h("span", { class: "spw-file-upload__dropzone-link" }, "choisissez sur votre ordinateur..."))) : (h("spw-button", { variant: "secondary", onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), disabled: this.disabled || this.isMaxFilesReached }, inputTextNoDrop)), h("div", { key: '7397f66a134a686290fc0ef68e688c723c6c939c', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: 'b1145fefb6c007e21c40154d2044c2e8ac8d031d' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: 'a9453e3eb05187f1b52d14199f2d67336fdc9d88', class: "spw-file-upload__info" }, this.selectedFiles.length > 0 ? (h("ul", { class: "spw-file-upload__info-list" }, this.selectedFiles.map((file, index) => (h("li", { key: index }, h("span", { class: "spw-file-upload__info-list-name" }, file.name), h("div", { class: "spw-file-upload__info-list-actions" }, h("span", { class: "spw-file-upload__spacing" }, formatFileSize(file.size)), h("a", { class: "spw-file-upload__info-list-delete", href: "#", onClick: e => {
                 e.preventDefault();
                 this.removeFile(index);
-            } }, "Supprimer"))))))) : (''), this.fileLimitErrors.length > 0 && (h("ul", { key: '2dff84f028676d113f0596f0f107016a99d5257e', class: `spw-file-upload__errors ${this.isMaxFilesReachedExact ? 'spw-file-upload__errors--warning' : ''}` }, this.fileLimitErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: this.isMaxFilesReachedExact ? 'fa-circle-exclamation' : 'fa-warning' }), message))))), this.fileTypeErrors.length > 0 && (h("ul", { key: '31c7a3b8f79787b578de47d6a080740e61ff6edb', class: "spw-file-upload__errors" }, this.fileTypeErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: "fa-warning" }), message))))))));
+            } }, "Supprimer"))))))) : (''), this.fileLimitErrors.length > 0 && (h("ul", { key: 'dc302035aae13502d1069ead4d9bbcc6b009a7c9', class: `spw-file-upload__errors ${this.isMaxFilesReachedExact ? 'spw-file-upload__errors--warning' : ''}` }, this.fileLimitErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: this.isMaxFilesReachedExact ? 'fa-circle-exclamation' : 'fa-warning' }), message))))), this.fileTypeErrors.length > 0 && (h("ul", { key: 'cdd8241ad727032162872d1bb8df5f82a4ec4e57', class: "spw-file-upload__errors" }, this.fileTypeErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: "fa-warning" }), message))))))));
     }
     static get is() { return "spw-file-upload"; }
     static get encapsulation() { return "shadow"; }