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

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

@@ -22,6 +22,39 @@ export class SpwFileUpload {
         this.maxFileSizeUnit = 'mo';
         /** Nombre maximal de fichiers pouvant être téléversés */
         this.maxFiles = Infinity;
+        // Textes customisables
+        /** Texte du bouton pour sélectionner un fichier (mode simple) */
+        this.textChooseFile = 'Choisir votre fichier...';
+        /** Texte du bouton pour sélectionner plusieurs fichiers (mode multiple) */
+        this.textChooseFiles = 'Choisir vos fichiers...';
+        /** Texte de la zone de dépôt pour un fichier */
+        this.textDropFile = 'Déposez votre fichier ici ou';
+        /** Texte de la zone de dépôt pour plusieurs fichiers */
+        this.textDropFiles = 'Déposez vos fichiers ici ou';
+        /** Texte du lien pour choisir depuis l'ordinateur */
+        this.textChooseFromComputer = 'choisissez sur votre ordinateur...';
+        /** Texte du lien de suppression */
+        this.textDelete = 'Supprimer';
+        /** Texte pour la taille maximale par fichier (utiliser {size} et {unit} comme placeholders) */
+        this.textMaxFileSize = 'Taille maximale par fichier : {size} {unit}';
+        /** Texte pour le nombre maximum de fichiers (utiliser {count} comme placeholder) */
+        this.textMaxFiles = '{count} fichier(s) maximum';
+        /** Texte pour les formats autorisés (utiliser {formats} comme placeholder) */
+        this.textAcceptedFormats = 'Formats autorisés : {formats}.';
+        /** Texte pour les formats refusés (utiliser {formats} comme placeholder) */
+        this.textRefusedFormats = 'Formats refusés : {formats}.';
+        /** Texte quand tous les formats sont autorisés */
+        this.textAllFormats = 'Formats autorisés : tous les formats.';
+        /** Message d'erreur quand le format n'est pas autorisé (utiliser {filename} comme placeholder) */
+        this.textErrorFormat = "{filename} n'a pas été pris en compte car le format n'est pas autorisé.";
+        /** Message d'erreur quand la taille est dépassée (utiliser {filename} comme placeholder) */
+        this.textErrorSize = "{filename} n'a pas été pris en compte car il dépasse la taille maximale autorisée.";
+        /** Message d'erreur quand le format et la taille sont invalides (utiliser {filename} comme placeholder) */
+        this.textErrorFormatAndSize = "{filename} n'a pas été pris en compte car le format n'est pas autorisé et la limite de poids est dépassée.";
+        /** Message quand la limite de fichiers est atteinte */
+        this.textLimitReached = 'Vous avez atteint la limite autorisée de fichiers.';
+        /** Message quand on dépasse la limite de fichiers (utiliser {count} comme placeholder) */
+        this.textLimitExceeded = 'Vous ne pouvez pas télécharger plus de {count} fichier(s).';
         this.selectedFiles = [];
         this.fileTypeErrors = [];
         this.fileLimitErrors = [];
@@ -71,15 +104,15 @@ export class SpwFileUpload {
             const isFileAccepted = this.isFileAccepted(file);
             const isFileSizeValid = this.isFileSizeValid(file);
             if (!isFileAccepted && !isFileSizeValid) {
-                this.fileTypeErrors.push(`${file.name} n’a pas été pris en compte car le format n’est pas autorisé et la limite de poids est dépassée.`);
+                this.fileTypeErrors.push(this.textErrorFormatAndSize.replace('{filename}', file.name));
                 return false;
             }
             else if (!isFileAccepted) {
-                this.fileTypeErrors.push(`${file.name} n'a pas été pris en compte car le format n'est pas autorisé.`);
+                this.fileTypeErrors.push(this.textErrorFormat.replace('{filename}', file.name));
                 return false;
             }
             else if (!isFileSizeValid) {
-                this.fileTypeErrors.push(`${file.name} n'a pas été pris en compte car il dépasse la taille maximale autorisée.`);
+                this.fileTypeErrors.push(this.textErrorSize.replace('{filename}', file.name));
                 return false;
             }
             return true;
@@ -88,12 +121,11 @@ export class SpwFileUpload {
             const allowedFiles = this.maxFiles - this.selectedFiles.length;
             if (this.selectedFiles.length + validFiles.length === this.maxFiles) {
                 this.isMaxFilesReachedExact = true;
-                this.fileLimitErrors.push('Vous avez atteint la limite autorisée de fichiers.');
+                this.fileLimitErrors.push(this.textLimitReached);
             }
             else {
                 validFiles.splice(allowedFiles);
-                const maxFilesText = this.maxFiles > 1 ? 'fichiers' : 'fichier';
-                this.fileLimitErrors.push(`Vous ne pouvez pas télécharger plus de ${this.maxFiles} ${maxFilesText}.`);
+                this.fileLimitErrors.push(this.textLimitExceeded.replace('{count}', String(this.maxFiles)));
             }
         }
         this.selectedFiles = [...this.selectedFiles, ...validFiles];
@@ -195,36 +227,35 @@ export class SpwFileUpload {
             unitDisplay = 'Mo';
         }
         const messages = [];
-        let message = `Taille maximale par fichier : ${maxSizeDisplay} ${unitDisplay}`;
+        let message = this.textMaxFileSize.replace('{size}', String(maxSizeDisplay)).replace('{unit}', unitDisplay);
         if (this.multiple && this.maxFiles !== Infinity) {
-            const maxFilesText = this.maxFiles > 1 ? 'fichiers' : 'fichier';
-            message += ` - ${this.maxFiles} ${maxFilesText} maximum.`;
+            message += ` - ${this.textMaxFiles.replace('{count}', String(this.maxFiles))}`;
         }
         else {
             message += '.';
         }
         messages.push(message);
         if (this.accept && this.refuse) {
-            messages.push(`Formats autorisés : ${this.accept}.`);
+            messages.push(this.textAcceptedFormats.replace('{formats}', this.accept));
         }
         else if (this.accept) {
-            messages.push(`Formats autorisés : ${this.accept}.`);
+            messages.push(this.textAcceptedFormats.replace('{formats}', this.accept));
         }
         else if (this.refuse) {
-            messages.push(`Formats refusés : ${this.refuse}.`);
+            messages.push(this.textRefusedFormats.replace('{formats}', this.refuse));
         }
         else {
-            messages.push(`Formats autorisés : tous les formats.`);
+            messages.push(this.textAllFormats);
         }
         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: '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 => {
+        const inputTextNoDrop = this.multiple ? this.textChooseFiles : this.textChooseFile;
+        const inputTextDrop = this.multiple ? this.textDropFiles : this.textDropFile;
+        return (h("div", { key: '505f4f2d6aa2d442a45b5ec2d2e729a2313de04c', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: '24055c9bb0f2c869419e95a817234e65eedeb46b', 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, " ", h("span", { class: "spw-file-upload__dropzone-link" }, this.textChooseFromComputer))) : (h("spw-button", { variant: "secondary", onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), disabled: this.disabled || this.isMaxFilesReached }, inputTextNoDrop)), h("div", { key: '9569626601644db17667cea3574258f4fd13837d', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: '1476d60ef9abe415082cbb15ac4c0a22daebe5ac' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: '22541db49e6bc2d632d692e4ee3a6c5ae358165b', 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: '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))))))));
+            } }, this.textDelete))))))) : (''), this.fileLimitErrors.length > 0 && (h("ul", { key: '0385dc3a5d5364c34b13fa1755cef60672771572', 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: '21940862b6d7bf95a631aa9bf2a750aecf64e934', 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"; }
@@ -462,6 +493,326 @@ export class SpwFileUpload {
                 "reflect": false,
                 "attribute": "max-files",
                 "defaultValue": "Infinity"
+            },
+            "textChooseFile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton pour s\u00E9lectionner un fichier (mode simple)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-choose-file",
+                "defaultValue": "'Choisir votre fichier...'"
+            },
+            "textChooseFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton pour s\u00E9lectionner plusieurs fichiers (mode multiple)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-choose-files",
+                "defaultValue": "'Choisir vos fichiers...'"
+            },
+            "textDropFile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte de la zone de d\u00E9p\u00F4t pour un fichier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-drop-file",
+                "defaultValue": "'D\u00E9posez votre fichier ici ou'"
+            },
+            "textDropFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte de la zone de d\u00E9p\u00F4t pour plusieurs fichiers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-drop-files",
+                "defaultValue": "'D\u00E9posez vos fichiers ici ou'"
+            },
+            "textChooseFromComputer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour choisir depuis l'ordinateur"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-choose-from-computer",
+                "defaultValue": "'choisissez sur votre ordinateur...'"
+            },
+            "textDelete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien de suppression"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-delete",
+                "defaultValue": "'Supprimer'"
+            },
+            "textMaxFileSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte pour la taille maximale par fichier (utiliser {size} et {unit} comme placeholders)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-max-file-size",
+                "defaultValue": "'Taille maximale par fichier : {size} {unit}'"
+            },
+            "textMaxFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte pour le nombre maximum de fichiers (utiliser {count} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-max-files",
+                "defaultValue": "'{count} fichier(s) maximum'"
+            },
+            "textAcceptedFormats": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte pour les formats autoris\u00E9s (utiliser {formats} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-accepted-formats",
+                "defaultValue": "'Formats autoris\u00E9s : {formats}.'"
+            },
+            "textRefusedFormats": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte pour les formats refus\u00E9s (utiliser {formats} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-refused-formats",
+                "defaultValue": "'Formats refus\u00E9s : {formats}.'"
+            },
+            "textAllFormats": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte quand tous les formats sont autoris\u00E9s"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-all-formats",
+                "defaultValue": "'Formats autoris\u00E9s : tous les formats.'"
+            },
+            "textErrorFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'erreur quand le format n'est pas autoris\u00E9 (utiliser {filename} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-error-format",
+                "defaultValue": "\"{filename} n'a pas \u00E9t\u00E9 pris en compte car le format n'est pas autoris\u00E9.\""
+            },
+            "textErrorSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'erreur quand la taille est d\u00E9pass\u00E9e (utiliser {filename} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-error-size",
+                "defaultValue": "\"{filename} n'a pas \u00E9t\u00E9 pris en compte car il d\u00E9passe la taille maximale autoris\u00E9e.\""
+            },
+            "textErrorFormatAndSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'erreur quand le format et la taille sont invalides (utiliser {filename} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-error-format-and-size",
+                "defaultValue": "\"{filename} n'a pas \u00E9t\u00E9 pris en compte car le format n'est pas autoris\u00E9 et la limite de poids est d\u00E9pass\u00E9e.\""
+            },
+            "textLimitReached": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message quand la limite de fichiers est atteinte"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-limit-reached",
+                "defaultValue": "'Vous avez atteint la limite autoris\u00E9e de fichiers.'"
+            },
+            "textLimitExceeded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message quand on d\u00E9passe la limite de fichiers (utiliser {count} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-limit-exceeded",
+                "defaultValue": "'Vous ne pouvez pas t\u00E9l\u00E9charger plus de {count} fichier(s).'"
             }
         };
     }

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

@@ -400,6 +400,12 @@ template {
 .spw-group--is-full-width .spw-group__container {
   width: 100% !important;
 }
+@media (min-width: 768px) {
+  .spw-group--buttons.spw-group--align-center .spw-group__container {
+    justify-content: center;
+    align-items: center;
+  }
+}
 @media (min-width: 768px) {
   .spw-group__container {
     align-items: center;
@@ -407,6 +413,7 @@ template {
 }
 .spw-group--buttons .spw-group__container {
   gap: 12px;
+  flex-wrap: wrap;
   width: 100%;
 }
 @media (min-width: 768px) {

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -377,9 +378,13 @@ template {
 
 :host {
   display: block;
+  /** @prop --spw-hero-content-max-width: Largeur maximale du contenu du hero */
   --spw-hero-content-max-width: 578px;
+  /** @prop --spw-hero-ratio-picture: Ratio de l'image du hero */
   --spw-hero-ratio-picture: initial;
+  /** @prop --spw-hero-shadow: Ombre portée du hero */
   --spw-hero-shadow: var(--spw-effect-elevation-5);
+  /** @prop --spw-hero-radius: Rayon de bordure du hero */
   --spw-hero-radius: 12px;
 }
 
@@ -457,12 +462,12 @@ template {
 }
 @media (min-width: 1024px) {
   .spw-hero--has-picture-full.spw-hero--left .spw-hero__container {
-    padding-left: calc(48% + 48px);
+    padding-left: calc(50% + 48px);
   }
 }
 @media (min-width: 1024px) {
   .spw-hero--has-picture-full.spw-hero--right .spw-hero__container {
-    padding-right: calc(48% + 48px);
+    padding-right: calc(50% + 48px);
   }
 }
 .spw-hero--maxi .spw-hero__container {
@@ -556,7 +561,7 @@ template {
 @media (min-width: 1024px) {
   .spw-hero--has-picture-full .spw-hero__image {
     position: absolute;
-    max-width: 48%;
+    max-width: 50%;
   }
 }
 .spw-hero--has-picture-full.spw-hero--right .spw-hero__image {
@@ -653,4 +658,8 @@ template {
     padding-top: 64px;
     width: 400px;
   }
+}
+.spw-hero--mini.spw-hero--no-picture .spw-hero__content {
+  width: 100%;
+  max-width: 100%;
 }

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

@@ -46,6 +46,7 @@ export class SpwHero {
             'spw-hero': true,
             [`spw-hero--surface-${this.surface}`]: true,
             [`spw-hero--has-picture-full`]: this.hasPictureFull,
+            [`spw-hero--no-picture`]: !this.imageSrc,
             [`spw-hero--has-video`]: this.hasVideo,
             [`spw-hero--has-shadow`]: this.hasShadow,
             [`spw-hero--has-radius`]: this.hasRadius,
@@ -60,10 +61,10 @@ export class SpwHero {
         };
     }
     render() {
-        const contentSlot = (h("div", { key: 'ebddcaf49a95d2ebde699e34b8fae918639f9534', class: "spw-hero__content" }, h("slot", { key: 'b64d6889be25eaccb5f63cb80289a0c4e7154636' })));
-        const copyrightTag = this.copyrightText && (h("spw-tag", { key: 'b0b471131f3c26c92c568116e5ece9597e7e9854', size: "small", "icon-variant": this.copyrightIconVariant, class: "spw-hero__copyright", icon: this.copyrightIcon, href: this.copyrightHref || undefined, target: this.copyrightHref ? this.copyrightTarget : undefined }, this.copyrightText));
+        const contentSlot = (h("div", { key: '1ef59bba9c27af229180eb7a0ef16615670c9333', class: "spw-hero__content" }, h("slot", { key: '6e7a127b1c44a579b7b01d4843a77d3f1dc3e42d' })));
+        const copyrightTag = this.copyrightText && (h("spw-tag", { key: '4abf3416a4b590be8a6c547dca5f23117a7baa6f', size: "small", "icon-variant": this.copyrightIconVariant, class: "spw-hero__copyright", icon: this.copyrightIcon, href: this.copyrightHref || undefined, target: this.copyrightHref ? this.copyrightTarget : undefined }, this.copyrightText));
         const isImageVariant = this.variant === 'grey' || this.variant === 'white';
-        return (h(Host, { key: '6a988f43a904de9d21b18ab6e1b7c858182e393c' }, h("div", { key: '04e08e104d6f13c7d3ae089adab727c02427a816', class: this.elementClass }, this.imageSrc && (h("div", { key: '0d72d17189c3dc16f69bc3b5a427743ec59cbfe5', class: "spw-hero__image" }, this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (h("div", { key: '028199366202af583392dfc8cf87b0ba48195db9', class: "spw-hero__image-play", onClick: this.triggerModal, onKeyDown: this.handleKeyDown, tabIndex: 0, role: "button", "aria-label": this.accPlayButtonAriaLabel }, h("spw-icon", { key: 'ba15bc4f44a1e11c808558b8884a4336325bbb24', icon: "fa-play" }))), h("div", { key: 'bf12f98d4140ce1102367cef736dd686d8b15a4c', class: "spw-hero__overlay", style: this.overlayStyle }), h("img", { key: 'e2083a424b8b0b4138efb2a03d8c91c469161986', src: this.imageSrc, alt: this.imageAlt }), isImageVariant && copyrightTag)), this.variant === 'mini' ? contentSlot : h("div", { class: "spw-ds-container spw-hero__container" }, contentSlot), !isImageVariant && copyrightTag)));
+        return (h(Host, { key: 'd554ccbfe45abfd12afcee69a58149c0303af7ae' }, h("div", { key: 'e30a08f985824cc31b8e71e4f66446d14903a85e', class: this.elementClass }, this.imageSrc && (h("div", { key: 'ed0e6bd2355fe2e80ea396f9917a2862b35cc21e', class: "spw-hero__image" }, this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (h("div", { key: '1df3416086c2bbeaee445c7e689e2eb3b1cbdc70', class: "spw-hero__image-play", onClick: this.triggerModal, onKeyDown: this.handleKeyDown, tabIndex: 0, role: "button", "aria-label": this.accPlayButtonAriaLabel }, h("spw-icon", { key: '51de08b74473fbf2c5a2165493c49baff423f2ca', icon: "fa-play" }))), h("div", { key: 'd6a568dfde8a27a88812610924a37bae4b787da6', class: "spw-hero__overlay", style: this.overlayStyle }), h("img", { key: 'cb3745cbfdb19a48ba94d94a65e47d8ae658008b', src: this.imageSrc, alt: this.imageAlt, style: this.imagePosition ? { objectPosition: this.imagePosition } : undefined }), isImageVariant && copyrightTag)), this.variant === 'mini' ? contentSlot : h("div", { class: "spw-ds-container spw-hero__container" }, contentSlot), !isImageVariant && copyrightTag)));
     }
     static get is() { return "spw-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -434,6 +435,25 @@ export class SpwHero {
                 "reflect": false,
                 "attribute": "copyright-target",
                 "defaultValue": "'_blank'"
+            },
+            "imagePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position de l'image (object-position), ex: 'top left', 'center center', 'bottom right'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-position"
             }
         };
     }

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

@@ -377,9 +377,13 @@ template {
 
 :host {
   display: block;
+  /** @prop --spw-ds-illustration-max-width: Largeur maximale de l'illustration */
   --spw-ds-illustration-max-width: 400px;
+  /** @prop --spw-ds-illustration-max-height: Hauteur maximale de l'illustration */
   --spw-ds-illustration-max-height: 100%;
+  /** @prop --spw-ds-illustration-width: Largeur de l'illustration */
   --spw-ds-illustration-width: 100%;
+  /** @prop --spw-ds-illustration-height: Hauteur de l'illustration */
   --spw-ds-illustration-height: 100%;
 }
 

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -376,16 +377,22 @@ template {
 }
 
 :host {
-  display: inline;
+  /** @prop --spw-link-display: Mode d'affichage du lien */
+  --spw-link-display: inline;
+  /** @prop --spw-link-color: Couleur du lien */
   --spw-link-color: var(--spw-ds-primary);
+  /** @prop --spw-link-hover-color: Couleur du lien au survol */
   --spw-link-hover-color: var(--spw-ds-variant);
+  /** @prop --spw-link-active-color: Couleur du lien à l'état actif */
   --spw-link-active-color: var(--spw-ds-active);
+  /** @prop --spw-link-font-weight: Graisse de la police du lien */
   --spw-link-font-weight: 700;
+  /** @prop --spw-link-padding: Espacement autour de l'icône */
   --spw-link-padding: 6px;
 }
 
 .spw-link {
-  display: inline;
+  display: var(--spw-link-display);
   text-decoration: none;
   cursor: pointer;
   color: var(--spw-link-color);

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

@@ -30,10 +30,14 @@ export class SpwListItem {
             titleElement && titleElement.classList.add(variantClass);
             titleElement && titleElement.classList.add(surfaceClass);
             titleElement && this.icon && titleElement.setAttribute('icon', this.icon);
-            titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);
+            if (titleElement && !titleElement.hasAttribute('line-clamp')) {
+                titleElement.setAttribute('line-clamp', this.lineClamp);
+            }
             descriptionElement && descriptionElement.classList.add(variantClass);
             descriptionElement && this.icon && descriptionElement.classList.add(iconClass);
-            descriptionElement && descriptionElement.setAttribute('line-clamp', this.lineClamp);
+            if (descriptionElement && !descriptionElement.hasAttribute('line-clamp')) {
+                descriptionElement.setAttribute('line-clamp', this.lineClamp);
+            }
         });
     }
     onMouseEnter() {
@@ -102,7 +106,7 @@ export class SpwListItem {
                 href,
                 target,
             };
-        return (h(Host, { key: 'ceaa44c8debb33008c08accfdf2b7418d7a960e2' }, h("li", { key: '09ade83d6d1e1cf8ef9eb4b76aa328a55f60525f', role: "listitem", class: this.elementClass }, this.category && (h("span", { key: 'e9b14d16ac184cc0ee0bea9c33b6f51e3de50a54', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: '09e1b530905f31ed910b951a7c3199084098f88b', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '2a7adaba74d089541151a67a9a61aea5354ec42c' }, attrs), h("slot", { key: '99a22ce4d2288697e8a96e8b00caef29b0c5a121' })))));
+        return (h(Host, { key: '1127ccb2fbe7b6089d4d204954dd62fc732ad35b' }, h("li", { key: 'e27994831fd4d9e822f3965a5b717447f1111594', role: "listitem", class: this.elementClass }, this.category && (h("span", { key: '24b24b9b7473ee44a9087a263b2aaac68d4588fe', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: '28cb8fbb60f5477f2d3987bc1dd8a3a2ec8fc4b3', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: 'b179fd8a6a20642f45794827e60175b794eae5cd' }, attrs), h("slot", { key: '0736948a1637037e5ef414bd2e9e2c5671715bfe' })))));
     }
     static get is() { return "spw-list-item"; }
     static get encapsulation() { return "shadow"; }