@spw-ds/spw-stencil-library 1.3.3 → 1.3.4

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

@@ -390,6 +390,9 @@ template {
 :host(.--link) .spw-card-subtag-item--has-link:hover {
   text-decoration: none;
 }
+:host(.--link.--highlighted) .spw-card-subtag-item {
+  color: white;
+}
 :host(.--tag) .spw-card-subtag-item {
   display: inline-block;
   padding: 8px 12px;

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

@@ -383,6 +383,9 @@ template {
   margin-bottom: 8px;
   color: var(--spw-ds-primary);
 }
+.--highlighted .spw-card-subtags {
+  color: white;
+}
 .spw-card-subtags spw-card-subtag-item:after,
 .spw-card-subtags .spw-card-subtag-item:after {
   content: ",";

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

@@ -13,6 +13,9 @@ export class SpwCardSubtags {
             const contentElements = this.el.querySelectorAll('spw-card-subtag-item');
             contentElements.forEach(element => {
                 element.classList.add(variantClass);
+                if (this.el.classList.contains('--highlighted')) {
+                    element.classList.add('--highlighted');
+                }
             });
         });
     }
@@ -23,7 +26,7 @@ export class SpwCardSubtags {
         };
     }
     render() {
-        return (h(Host, { key: 'f649df17747c0b15e378dc8ed9c8bffd387efc6c' }, h("div", { key: 'e7fb23264fd9dac808b653faeb293d8f27a56c2d', class: this.elementClass }, h("slot", { key: '06c3b96dd8644e797381ffc39ab987080a46bc21' }))));
+        return (h(Host, { key: 'f77ffa5b4f5fe8a47ede2bc8aad7774805e6b92b' }, h("div", { key: 'b2271dfdb69baf4902ac7725e7276bfa4c48341d', class: this.elementClass }, h("slot", { key: 'e372a3a027c94ec0e62cf59e144d9128ef1eedfb' }))));
     }
     static get is() { return "spw-card-subtags"; }
     static get originalStyleUrls() {

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

@@ -382,12 +382,20 @@ template {
   transition: all 0.3s ease;
   color: var(--spw-color-themes-grey-grey-900);
 }
-:host(.--hovered:not(.--video):not(.--people)) .spw-card-title {
+:host(.--hovered:not(.--video):not(.--people):not(.--highlighted)) .spw-card-title {
   color: var(--spw-ds-primary);
 }
-:host(.--video) .spw-card-title {
+:host(.--video) .spw-card-title, :host(.--highlighted) .spw-card-title {
   color: white;
 }
+:host(.--highlighted) .spw-card-title {
+  font-size: 24px;
+}
+@media (min-width: 768px) {
+  :host(.--highlighted) .spw-card-title {
+    font-size: 32px;
+  }
+}
 :host(.--sidebar) .spw-card-title {
   font-size: 18px;
   line-height: 1.2;

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class SpwCard {
     constructor() {
         this.hasImage = false;
-        this.childHoveredCount = 0; // <-- Ajouté : pour suivre le nombre de sous-cartes survolées
+        this.childHoveredCount = 0;
         /** Type de variante de carte */
         this.variant = 'news';
         /** Type d'élément du bouton */
@@ -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: '6f0453f5b68c3176fa647d9de45dab2c8d2be7d9', class: { '--is-full-height': this.fullHeight } }, h("article", { key: 'fb8205ab094afa114abbe2557bc8e9e710f57c67', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: 'e6bd5924585802d0f819ba418df6cbee036343f6' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: 'fa5dda6da669c408e60a8604ed6cfa84b16cf6cf', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: '901b9d0c0ca88b0d625d2c068da8fed27c904b0f', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: '801115c5ab07fddcbd0a08d6ad240292ae8c085b' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'edb7b8815ca7d7ccf775381c9de70258857df7c7' })))));
+        return (h(Host, { key: 'dd696a972dce8b2dd24bf4a32a91c48d647c8847', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '3bedcc715c5ce3999bdd683aec295cf4a5f78afd', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: 'a562384022c312afe368de3b28d1746a3b0f5398' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: '1f91f1d6a773c48ff00fb71b0867eafa7b25a53e', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: 'bdce357cf092475ee1792950a686d02601d634bf', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: '8bae3ef221cf1edc713e89d23db08dda41bf22d8' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '89d675393747eadf75c55396cba1513566c9eace' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }
@@ -140,8 +140,8 @@ export class SpwCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'news' | 'vertical' | 'video' | 'event' | 'sidebar' | 'people'",
-                    "resolved": "\"event\" | \"news\" | \"people\" | \"sidebar\" | \"vertical\" | \"video\"",
+                    "original": "'news' | 'vertical' | 'video' | 'event' | 'sidebar' | 'highlighted' | 'people'",
+                    "resolved": "\"event\" | \"highlighted\" | \"news\" | \"people\" | \"sidebar\" | \"vertical\" | \"video\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -86,6 +86,7 @@ export class SpwCustomSelect {
         }
         this.updateSelectedOption();
     }
+    /** Réinitialise le champ de sélection */
     async resetSelect() {
         if (this.multiple) {
             this.internalValue = [];
@@ -101,6 +102,24 @@ export class SpwCustomSelect {
         this.valueChanged.emit(this.internalValue);
         this.updateSelectedOption();
     }
+    /** Définit la valeur du champ de sélection */
+    async setValue(val) {
+        if (this.multiple) {
+            this.internalValue = Array.isArray(val) ? val : [val];
+            this.value = this.internalValue;
+        }
+        else {
+            this.internalValue = val;
+            this.value = val;
+        }
+        this.internals.setFormValue(this.getFormValue());
+        this.valueChanged.emit(this.internalValue);
+        this.updateSelectedOption();
+    }
+    /** Récupère la valeur actuelle du champ de sélection */
+    async getValue() {
+        return this.internalValue;
+    }
     formResetCallback() {
         this.resetSelect();
     }
@@ -384,18 +403,18 @@ export class SpwCustomSelect {
     render() {
         const filteredOptions = this.getFilteredOptions();
         const showPlaceholder = this.showPlaceholder();
-        return (h("div", { key: 'b14db7d2386d766368355779964b2aaf1d12883a', class: this.elementClass, ref: el => (this.host = el) }, this.label && h("spw-field-label", { key: '23cc951518387d87fb2aac75fcb11d4e386c3a8a', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '5e775c2e0d4f088aeac5936b60fae0d2a53984d5', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '09ee394fa2c01bc88fa1d425e21b5873615758b1', class: "spw-custom-select__wrapper" }, h("div", { key: 'bcfbcc4cbc27591eac8e865af022a60318d42094', 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: 'a66d964cc6958f878054c80db72f5a8fec38cc53', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '6c6db72cbd2bfba15d144be535449336196555be', class: "spw-custom-select__search" }, h("input", { key: '369521168c90323039c48a41689bd9fb71147ea1', class: "spw-custom-select__search-input", placeholder: "Entrez votre recherche", onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: '4840d3a851c1c3c2037f87ef2fd7f7d76d17345d' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '83356082df969a094eeb6bd9688301585448b2d5', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
+        return (h("div", { key: '5f7702579283fa011eba5c445de1fe29283a0239', class: this.elementClass, ref: el => (this.host = el) }, this.label && h("spw-field-label", { key: '451743b7254038fe4257378ac4f7c2206a47c60d', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '817a94b7d7d2a1abd93986f3e03d0f769a6567d0', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'cf9e2cd0bcaf1a5bd9143fdf54046a241bd1a527', class: "spw-custom-select__wrapper" }, h("div", { key: '21a8fb2e0bb3dba93c582735db2072b150b157e4', 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: '7acaa25439202ea6f30dd3542a757005534b2804', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: 'e97c879fa5c70402ba331785f73747262e8854e1', class: "spw-custom-select__search" }, h("input", { key: '7047f755e5a4aaacf66a78ce80e1ad3520be1b85', class: "spw-custom-select__search-input", placeholder: "Entrez votre recherche", onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: '772afa04f989241e8e96c0ed25d444b66f72b282' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '5d101958ee7f28ba19938a9dfbd137067d0c5a45', 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: 'd3e7903216c507e2fc9fc94bec814a37576b4cc6' }, this.getSelectedLabels()))), h("div", { key: '654ca8a8a8b8f57ea7bf9e0488cf1530a03dd646', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'c051c6bb9f71ef36e80edda3dd7c9aff4abb8831', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' })), this.isOpen && (h("div", { key: 'ad29aae6e9a08f2e1f56bb570da6fa8cfd3c4ab7', class: `spw-custom-select__options spw-custom-select__options--${this.dropdownDirection}` }, !!filteredOptions.length && (h("ul", { key: '33154a536873077036837e0807cc2cf178df3b3c' }, filteredOptions.map((option, index) => (h("li", { class: {
+        }))), !this.multiple && h("span", { key: 'd6e00ae63c72be4e2bd86c4a46f3966cb7681592' }, this.getSelectedLabels()))), h("div", { key: '2dbf6b83c3c479e6251291ce13f77f43e1525841', class: "spw-custom-select__arrow" }, h("spw-icon", { key: '42e9d62768469dd064ccfca75dcfb45b0e6caf7b', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' })), this.isOpen && (h("div", { key: '9b53310eda74ea2ee34888a64f43ca5cfb48bca1', class: `spw-custom-select__options spw-custom-select__options--${this.dropdownDirection}` }, !!filteredOptions.length && (h("ul", { key: 'f30eb6a1d7839f241b9905ee3591ab9eed32e7df' }, 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: 'd715b43bee14b967de36fd7798540c82501ee9ff', class: "spw-custom-select__no-results" }, "Pas de r\u00E9sultats pour cette recherche.")))), 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: '2b8efa73852cff382f97fa73e0f4bf0080b8dee9', class: "spw-custom-select__no-results" }, "Pas de r\u00E9sultats pour cette recherche.")))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-custom-select"; }
     static get encapsulation() { return "shadow"; }
@@ -834,7 +853,45 @@ export class SpwCustomSelect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "R\u00E9initialise le champ de s\u00E9lection",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(val: (string | number)[] | string | number) => Promise<void>",
+                    "parameters": [{
+                            "name": "val",
+                            "type": "string | number | (string | number)[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "D\u00E9finit la valeur du champ de s\u00E9lection",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<(string | number)[] | string | number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string | number | (string | number)[]>"
+                },
+                "docs": {
+                    "text": "R\u00E9cup\u00E8re la valeur actuelle du champ de s\u00E9lection",
                     "tags": []
                 }
             }

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

@@ -10,8 +10,10 @@ export class SpwFileUpload {
         this.enableDropZone = false;
         /** Permet de téléverser plusieurs fichiers si vrai */
         this.multiple = false;
-        /** Types de fichiers acceptés, spécifiés sous forme de chaîne de types MIME */
+        /** Types de fichiers acceptés, spécifiés sous forme de chaîne de types MIME ou extensions (whitelist) */
         this.accept = '';
+        /** Types de fichiers refusés, spécifiés sous forme de chaîne de types MIME ou extensions (blacklist) */
+        this.refuse = '';
         /** Taille maximale autorisée pour chaque fichier, en Mo */
         this.maxFileSize = 100;
         /** Nombre maximal de fichiers pouvant être téléversés */
@@ -25,6 +27,9 @@ export class SpwFileUpload {
     componentWillLoad() {
         this.internalValue = this.value;
         this.maxFileSize = this.maxFileSize * 1024 * 1024;
+        if (this.accept && this.refuse) {
+            console.warn('spw-file-upload: Vous ne pouvez pas utiliser "accept" et "refuse" en même temps. Seul "accept" sera pris en compte.');
+        }
     }
     componentWillUpdate() {
         if (this.value !== this.internalValue) {
@@ -82,10 +87,20 @@ export class SpwFileUpload {
         this.updateFormValue();
     }
     isFileAccepted(file) {
-        if (!this.accept)
-            return true;
-        const acceptedTypes = this.accept.split(',').map(type => type.trim());
-        return acceptedTypes.includes(file.type) || acceptedTypes.some(type => file.name.endsWith(type));
+        if (this.accept && this.refuse) {
+            const acceptedTypes = this.accept.split(',').map(type => type.trim());
+            return acceptedTypes.includes(file.type) || acceptedTypes.some(type => file.name.endsWith(type));
+        }
+        if (this.accept) {
+            const acceptedTypes = this.accept.split(',').map(type => type.trim());
+            return acceptedTypes.includes(file.type) || acceptedTypes.some(type => file.name.endsWith(type));
+        }
+        if (this.refuse) {
+            const refusedTypes = this.refuse.split(',').map(type => type.trim());
+            const isRefused = refusedTypes.includes(file.type) || refusedTypes.some(type => file.name.endsWith(type));
+            return !isRefused;
+        }
+        return true;
     }
     isFileSizeValid(file) {
         return file.size <= this.maxFileSize;
@@ -158,7 +173,6 @@ export class SpwFileUpload {
     }
     get hintsMessages() {
         const maxSizeInMB = this.maxFileSize / (1024 * 1024);
-        const acceptedFormats = this.accept ? this.accept : 'tous les formats';
         const messages = [];
         let message = `Taille maximale par fichier : ${maxSizeInMB} Mo`;
         if (this.multiple && this.maxFiles !== Infinity) {
@@ -169,16 +183,27 @@ export class SpwFileUpload {
             message += '.';
         }
         messages.push(message);
-        messages.push(`Formats autorisés : ${acceptedFormats}.`);
+        if (this.accept && this.refuse) {
+            messages.push(`Formats autorisés : ${this.accept}.`);
+        }
+        else if (this.accept) {
+            messages.push(`Formats autorisés : ${this.accept}.`);
+        }
+        else if (this.refuse) {
+            messages.push(`Formats refusés : ${this.refuse}.`);
+        }
+        else {
+            messages.push(`Formats autorisés : tous les formats.`);
+        }
         return messages;
     }
     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: '196c01c219629f7e3c0b916f3961ac26c4b6ff62', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: 'bef05fd986b41b0e113952726eec82aa09c18488', 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: 'f0247eae6e516ccf4e5d18e67274056427fe22b3', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: '6616bb81473149b200e199f3db8a2e29b940dfec' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: '1680d3f03ec73d312bf028069f44c7c8dd614bd3', 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: '501bc95288cc670462c4545d44db80758195ddda', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: '6bf6586de3919a1f913ad7b371d83d322f6385a3', 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: '082e5f3f10f27b6435dcf47b5688d03b42d034f5', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: '62495fffa5ee797c7787535af7c349e18a3076b5' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: 'd21de5e0f796829746ae8d3dc981e3150219f72e', 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: '07abd61c8d4fe0644b6ef4699828f718f3df74c7', 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: '63ad9f2f1894abe7e512d08bebc453001343200a', 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: '7b4415ba4316aec17e08d91a6057505877686c2e', 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: '0372034644a7a3158dc32933f8e431e487543d9a', 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"; }
@@ -325,7 +350,7 @@ export class SpwFileUpload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Types de fichiers accept\u00E9s, sp\u00E9cifi\u00E9s sous forme de cha\u00EEne de types MIME"
+                    "text": "Types de fichiers accept\u00E9s, sp\u00E9cifi\u00E9s sous forme de cha\u00EEne de types MIME ou extensions (whitelist)"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,6 +358,26 @@ export class SpwFileUpload {
                 "attribute": "accept",
                 "defaultValue": "''"
             },
+            "refuse": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Types de fichiers refus\u00E9s, sp\u00E9cifi\u00E9s sous forme de cha\u00EEne de types MIME ou extensions (blacklist)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "refuse",
+                "defaultValue": "''"
+            },
             "maxFileSize": {
                 "type": "number",
                 "mutable": false,

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

@@ -1,19 +1,51 @@
 import { Host, h } from "@stencil/core";
 export class SpwMosaicItem {
+    constructor() {
+        this.parentColsMobile = 1;
+        this.parentColsTablet = 2;
+        this.parentColsDesktop = 3;
+    }
     componentDidLoad() {
-        this.el.closest('spw-mosaic').addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+        var _a;
+        (_a = this.el.closest('spw-mosaic')) === null || _a === void 0 ? void 0 : _a.addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+        this.applyColSpans();
     }
     disconnectedCallback() {
-        this.el.closest('spw-mosaic').removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+        var _a;
+        (_a = this.el.closest('spw-mosaic')) === null || _a === void 0 ? void 0 : _a.removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+    }
+    colSpanChanged() {
+        this.applyColSpans();
     }
     handleConfigurationChange(event) {
         const { colsMobile, colsTablet, colsDesktop } = event.detail;
-        this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${colsMobile})`);
-        this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${colsTablet})`);
-        this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${colsDesktop})`);
+        this.parentColsMobile = colsMobile;
+        this.parentColsTablet = colsTablet;
+        this.parentColsDesktop = colsDesktop;
+        this.applyColSpans();
+    }
+    applyColSpans() {
+        if (this.colSpanMobile) {
+            this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${this.parentColsMobile} * ${this.colSpanMobile})`);
+        }
+        else {
+            this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${this.parentColsMobile})`);
+        }
+        if (this.colSpanTablet) {
+            this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${this.parentColsTablet} * ${this.colSpanTablet})`);
+        }
+        else {
+            this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${this.parentColsTablet})`);
+        }
+        if (this.colSpanDesktop) {
+            this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${this.parentColsDesktop} * ${this.colSpanDesktop})`);
+        }
+        else {
+            this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${this.parentColsDesktop})`);
+        }
     }
     render() {
-        return (h(Host, { key: '9d7ac5809bee8a8ecf58bdee19a341eaffd217ef' }, h("slot", { key: '9adf812c99dc0ffcd918327672027395fc3db797' })));
+        return (h(Host, { key: 'c63e3ce803e887c548341162f7a890bfd1a315c4' }, h("slot", { key: 'b57cee581ed137ca253db8790b40a8e2ba28a201' })));
     }
     static get is() { return "spw-mosaic-item"; }
     static get encapsulation() { return "shadow"; }
@@ -27,5 +59,78 @@ export class SpwMosaicItem {
             "$": ["spw-mosaic-item.css"]
         };
     }
+    static get properties() {
+        return {
+            "colSpanMobile": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de colonnes que l'item doit occuper en vue mobile (override la valeur h\u00E9rit\u00E9e du parent)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span-mobile"
+            },
+            "colSpanTablet": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de colonnes que l'item doit occuper en vue tablette (override la valeur h\u00E9rit\u00E9e du parent)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span-tablet"
+            },
+            "colSpanDesktop": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de colonnes que l'item doit occuper en vue desktop (override la valeur h\u00E9rit\u00E9e du parent)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span-desktop"
+            }
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colSpanMobile",
+                "methodName": "colSpanChanged"
+            }, {
+                "propName": "colSpanTablet",
+                "methodName": "colSpanChanged"
+            }, {
+                "propName": "colSpanDesktop",
+                "methodName": "colSpanChanged"
+            }];
+    }
 }

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

@@ -85,10 +85,13 @@ export class SpwMosaic {
             const slot = this.el.shadowRoot.querySelector('slot');
             const masonryItems = slot.assignedElements({ flatten: true });
             if (masonryItems.length > 0) {
+                // Trouver un item sans colSpan pour calculer la largeur de base d'une colonne
+                const baseItem = Array.from(masonryItems).find(item => !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile')) || masonryItems[0];
                 this.masonry = new Masonry(this.el, {
                     itemSelector: 'spw-mosaic-item',
-                    columnWidth: 'spw-mosaic-item',
+                    columnWidth: baseItem,
                     percentPosition: true,
+                    gutter: 0,
                 });
                 this.initialized = true;
                 masonryItems.forEach(item => {
@@ -131,7 +134,7 @@ export class SpwMosaic {
         };
     }
     render() {
-        return (h(Host, { key: '315dbce69f6894a93dfea27c215ed6d74c43beb2' }, h("div", { key: '7383f3c38c7d90c3995c621824d28d5d8c46d37c', class: this.elementClass }, h("slot", { key: '2120301d6e1b24331a49c265c08e0f8f0aefb34c' }))));
+        return (h(Host, { key: 'f61eb75efa6cc8fe663e50f45568c5cb7dd8f2f3' }, h("div", { key: '1094aebb0e127ce6fa37c9884216cf0fa20ad781', class: this.elementClass }, h("slot", { key: '0788e769762d7d137fe4df586b6add1da6e723f8' }))));
     }
     static get is() { return "spw-mosaic"; }
     static get encapsulation() { return "shadow"; }
@@ -280,6 +283,10 @@ export class SpwMosaic {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -32,6 +32,7 @@ export class SpwSelect {
             this.syncDynamicOptions();
         }
     }
+    /** Réinitialise le champ de sélection */
     async resetSelect() {
         this.internalValue = '';
         this.value = '';
@@ -41,6 +42,20 @@ export class SpwSelect {
         this.internals.setFormValue('');
         this.valueChanged.emit('');
     }
+    /** Définit la valeur du champ de sélection */
+    async setValue(val) {
+        this.internalValue = val;
+        this.value = val;
+        if (this.selectElement) {
+            this.selectElement.value = String(val);
+        }
+        this.internals.setFormValue(this.getFormValue());
+        this.valueChanged.emit(this.internalValue);
+    }
+    /** Récupère la valeur actuelle du champ de sélection */
+    async getValue() {
+        return this.internalValue;
+    }
     componentWillLoad() {
         var _a;
         this.defaultValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.getInitialSelectedValue();
@@ -60,15 +75,6 @@ export class SpwSelect {
         this.setValue((_a = this.defaultValue) !== null && _a !== void 0 ? _a : '');
         this.resetSelect();
     }
-    setValue(val) {
-        this.internalValue = val;
-        this.value = val;
-        if (this.selectElement) {
-            this.selectElement.value = String(val);
-        }
-        this.internals.setFormValue(this.getFormValue());
-        this.valueChanged.emit(this.internalValue);
-    }
     getFormValue() {
         return this.internalValue ? String(this.internalValue) : null;
     }
@@ -151,7 +157,7 @@ export class SpwSelect {
         };
     }
     render() {
-        return (h(Host, { key: '03a8d7f699a02091c1769f6ea6d01bc6adfc1a5d' }, h("div", { key: 'e4e8df7f871ce76fdb8f19ea1b10006a5ae50ec0', class: this.elementClass }, this.label && h("spw-field-label", { key: 'e73bd6387bd7c647a11684300790f763bd1fea6e', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'df5f4b589ae18374bf50802d4ed8dc923d06c34c', class: "spw-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '3f1ee0d1e1e84919b387c14a1833ffe7f2058823', class: "spw-select__container" }, h("select", { key: 'e8a04cd43db7c56e23acd133a682c4f973194c41', id: this.name, name: this.name, "aria-label": this.accAriaLabel || this.label || this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: 'bae3d205bc526e60ac00fb492770b2614049b4cf', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("spw-icon", { key: '035d35a7db87d124d3102ff34c694a69bbccf0b3', class: "spw-select__arrow", icon: "fa-chevron-down" })), !this.items && h("slot", { key: '7efab927c453d175faf60d83eb120ee487427796' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h(Host, { key: 'c623e21b2b6e04d3a1f8b85dfc702cf3a2fb4c1e' }, h("div", { key: 'cc80bd65c5a6bd0612dc79c7a47fa8b15860211e', class: this.elementClass }, this.label && h("spw-field-label", { key: '98724278781185bc0060948baa65d79d9a263455', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '9361a3d523b9ad611cb25ec10d3cab9664ce16f3', class: "spw-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'b62735322558094dde5e4ee8efa8f6a2cd8f075e', class: "spw-select__container" }, h("select", { key: 'df5714c4a8ad2e469605f9ed000a8df325846304', id: this.name, name: this.name, "aria-label": this.accAriaLabel || this.label || this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: 'd74dbffc296ed6c9c5861fe7de2a7e4d4704461e', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("spw-icon", { key: '95147be8fa99af30865d61b65b2e5814482281b7', class: "spw-select__arrow", icon: "fa-chevron-down" })), !this.items && h("slot", { key: '68c022ef52e5df4b2fa5c5b9d443ac2005b25e4c' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-select"; }
     static get encapsulation() { return "shadow"; }
@@ -604,7 +610,45 @@ export class SpwSelect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "R\u00E9initialise le champ de s\u00E9lection",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(val: string | number) => Promise<void>",
+                    "parameters": [{
+                            "name": "val",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "D\u00E9finit la valeur du champ de s\u00E9lection",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string | number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string | number>"
+                },
+                "docs": {
+                    "text": "R\u00E9cup\u00E8re la valeur actuelle du champ de s\u00E9lection",
                     "tags": []
                 }
             }

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

@@ -398,6 +398,7 @@ template {
   padding: 16px 0;
 }
 .spw-tile--big, .spw-tile--light {
+  position: relative;
   padding-top: calc(70% - 12px);
   border-radius: 6px;
   overflow: hidden;
@@ -416,6 +417,22 @@ template {
     padding-top: 150%;
   }
 }
+.spw-tile--big:before, .spw-tile--light:before {
+  content: "";
+  background: black;
+  opacity: 0;
+  transition: all linear 0.2s;
+  border-radius: 5px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.spw-tile--big:hover:before, .spw-tile--light:hover:before {
+  opacity: 0.3;
+}
 .spw-tile__overlay, .spw-tile__image {
   position: absolute;
   width: 100%;