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

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-theme-provider/spw-theme-provider.js

@@ -20,11 +20,11 @@ export class SpwThemeProvider {
             document.head.appendChild(styleElement);
         }
         const css = themes[theme];
-        styleElement.innerHTML = css;
+        styleElement.innerHTML = typeof css === 'function' ? css() : css;
         document.documentElement.setAttribute('data-theme', theme);
     }
     render() {
-        return (h("main", { key: 'b6cfa87f134b66c57ca99075db426ae052a7179b', class: `spw-theme-${this.theme}` }, h("slot", { key: 'e1393ce6cf720a1bbd79c83c46181218679bb2f4' })));
+        return (h("main", { key: 'b7afe2152b67a083c80e11c6f997783843d82b6f', class: `spw-theme-${this.theme}` }, h("slot", { key: 'cd0f17e823c5b506e5b46635eac8536c321812bd' })));
     }
     static get is() { return "spw-theme-provider"; }
     static get properties() {

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%;

package/dist/collection/stories/organisms/spw-card/spw-card.stories.js

@@ -36,6 +36,7 @@ Le composant Carte est un conteneur cliquable qui affiche un aperçu visuel de c
 - **Mini** : Version compacte pour sidebars
 - **People** : Carte profil avec avatar rond
 - **Sidebar** : Version pour barre latérale
+- **Highlighted** : Carte mise en avant avec style visuel distinctif
 
 ## Structure
 
@@ -312,6 +313,20 @@ PeopleWithAffiliates.args = {
     imgAlt: 'Image',
     imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 };
+export const Highlighted = Template.bind({});
+Highlighted.args = {
+    variant: 'highlighted',
+    fullHeight: true,
+    href: 'http://google.com',
+    label: 'Label',
+    target: '_blank',
+    imgAlt: 'Image',
+    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    contentTag: 'Actualités',
+    contentDate: '2024-02-09',
+    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
+    excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
+};
 Default.parameters = {
     docs: {
         description: {
@@ -375,3 +390,10 @@ PeopleWithAffiliates.parameters = {
         },
     },
 };
+Highlighted.parameters = {
+    docs: {
+        description: {
+            story: `Carte mise en avant avec style visuel distinctif. Utilise un fond coloré et une typographie adaptée pour attirer l'attention sur un contenu prioritaire. Idéale pour mettre en évidence un article principal, une actualité importante ou un événement majeur dans une liste ou grille de cartes.`,
+        },
+    },
+};

package/dist/collection/stories/organisms/spw-grid/spw-grid.stories.js

@@ -82,43 +82,43 @@ function htmlContentBasicGrid() {
 function htmlContentWithSpans() {
     return /* HTML */ `
     <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Actualité principale" variant="big" href="#">
-        <spw-tile-title>Actualité principale - Grande tuile 2x2</spw-tile-title>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Titre principal" variant="big" href="#">
+        <spw-tile-title>Titre principal - Grande tuile 2x2</spw-tile-title>
         <spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>
       </spw-tile>
     </spw-grid-item>
 
     <spw-grid-item>
       <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Actualité 2" variant="light" href="#">
-        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-title>Titre secondaire</spw-tile-title>
         <spw-tile-description>Tuile de taille normale</spw-tile-description>
       </spw-tile>
     </spw-grid-item>
 
     <spw-grid-item>
       <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Actualité 3" variant="light" href="#">
-        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-title>Titre secondaire</spw-tile-title>
         <spw-tile-description>Tuile de taille normale</spw-tile-description>
       </spw-tile>
     </spw-grid-item>
 
     <spw-grid-item>
       <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Actualité 4" variant="light" href="#">
-        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-title>Titre secondaire</spw-tile-title>
         <spw-tile-description>Tuile de taille normale</spw-tile-description>
       </spw-tile>
     </spw-grid-item>
 
     <spw-grid-item>
       <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Actualité 5" variant="light" href="#">
-        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-title>Titre secondaire</spw-tile-title>
         <spw-tile-description>Tuile de taille normale</spw-tile-description>
       </spw-tile>
     </spw-grid-item>
 
     <spw-grid-item>
       <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Actualité 6" variant="light" href="#">
-        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-title>Titre secondaire</spw-tile-title>
         <spw-tile-description>Tuile de taille normale</spw-tile-description>
       </spw-tile>
     </spw-grid-item>
@@ -238,8 +238,8 @@ function htmlContentMixedSpans() {
 function htmlContentCardsWithSpan() {
     return /* HTML */ `
     <spw-grid-item col-span-desktop="2" col-span-tablet="2">
-      <spw-card full-height="true" href="#">
-        <spw-card-image ratio="16/6">
+      <spw-card variant="highlighted" href="#">
+        <spw-card-image ratio="16/11">
           <img
             alt="Image"
             src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
@@ -264,7 +264,7 @@ function htmlContentCardsWithSpan() {
           />
         </spw-card-image>
         <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Actualité secondaire</spw-card-title>
+          <spw-card-title>Titre secondaire</spw-card-title>
           <spw-card-excerpt>
             L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
             (APAQ-W) nous propose quelques pistes pour privilégier le local.
@@ -282,7 +282,7 @@ function htmlContentCardsWithSpan() {
           />
         </spw-card-image>
         <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Actualité secondaire</spw-card-title>
+          <spw-card-title>Titre secondaire</spw-card-title>
           <spw-card-excerpt>
             L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
             (APAQ-W) nous propose quelques pistes pour privilégier le local.
@@ -300,7 +300,7 @@ function htmlContentCardsWithSpan() {
           />
         </spw-card-image>
         <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Actualité secondaire</spw-card-title>
+          <spw-card-title>Titre secondaire</spw-card-title>
           <spw-card-excerpt>
             L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
             (APAQ-W) nous propose quelques pistes pour privilégier le local.
@@ -318,7 +318,7 @@ function htmlContentCardsWithSpan() {
           />
         </spw-card-image>
         <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Actualité secondaire</spw-card-title>
+          <spw-card-title>Titre secondaire</spw-card-title>
           <spw-card-excerpt>
             L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
             (APAQ-W) nous propose quelques pistes pour privilégier le local.
@@ -472,7 +472,7 @@ GrilleCartes.storyName = 'Grille avec cartes (3 colonnes)';
 GrilleCartes.parameters = {
     docs: {
         description: {
-            story: 'Grille de 3 colonnes avec des cartes. La première carte occupe 2 colonnes sur desktop et tablette pour mettre en avant une actualité principale. Idéal pour les pages d\'actualités ou de contenu éditorial.',
+            story: "Grille de 3 colonnes avec des cartes. La première carte occupe 2 colonnes sur desktop et tablette pour mettre en avant une actualité principale. Idéal pour les pages d'actualités ou de contenu éditorial.",
         },
     },
 };