allaw-ui 5.1.6 → 5.1.8

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -289,8 +289,8 @@ var FileUploader = function (_a) {
                             var cropAreaWidth = 280; // Dimensions réelles du cadre de crop pour square/circle
                             var cropAreaHeight = 280;
                             if (cropMetadata.shape === "banner") {
-                                cropAreaWidth = 320;
-                                cropAreaHeight = 60;
+                                cropAreaWidth = 360;
+                                cropAreaHeight = 120;
                             }
                             // Le zoom dans cropMetadata est le zoom total (baseZoom * zoom relatif)
                             // baseZoom est calculé dans le modal comme Math.max(cropWidth / imgWidth, cropHeight / imgHeight)
@@ -528,11 +528,11 @@ var FileUploader = function (_a) {
                     }
                 } },
                 React.createElement("div", { className: "".concat(styles.preview_image_container, " ").concat(styles["preview_image_".concat((cropMetadata === null || cropMetadata === void 0 ? void 0 : cropMetadata.shape) || cropShape)]), onClick: function () { return enableCropping && openCropModal(); } },
-                    React.createElement("div", { className: styles.preview_image_wrapper, style: {
-                            transform: cropMetadata
-                                ? "translate(".concat(cropMetadata.offsetX, "px, ").concat(cropMetadata.offsetY, "px) scale(").concat(cropMetadata.zoom, ")")
-                                : "scale(1)",
-                        } },
+                    React.createElement("div", { className: styles.preview_image_wrapper, style: cropMetadata
+                            ? {
+                                transform: "translate(".concat(cropMetadata.offsetX, "px, ").concat(cropMetadata.offsetY, "px) scale(").concat(cropMetadata.zoom, ")"),
+                            }
+                            : undefined },
                         React.createElement("img", { src: previewUrl, alt: displayFileName, className: styles.preview_image, draggable: false }))),
                 enableCropping && (React.createElement("div", { className: styles.edit_button_container, onClick: function (e) {
                         e.stopPropagation();

package/dist/components/molecules/fileUploader/FileUploader.module.css

@@ -328,7 +328,7 @@
 
 /* Ajuste la hauteur du conteneur pour la bannière */
 .preview_container.preview_container_banner {
-  height: 120px;
+  height: 200px;
 }
 
 .preview_image_container {
@@ -350,8 +350,10 @@
 }
 
 .preview_image_banner {
-  width: 320px;
-  height: 60px;
+  width: 90%;
+  max-width: 600px;
+  height: auto;
+  aspect-ratio: 3 / 1;
   border-radius: 4px;
 }
 
@@ -380,6 +382,19 @@
   -webkit-user-drag: none;
 }
 
+/* Pour les bannières avec clientSideCrop, l'image est déjà croppée */
+.preview_image_banner > .preview_image_wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.preview_image_banner > .preview_image_wrapper > .preview_image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .edit_button_container {
   position: absolute;
   bottom: 12px;

package/dist/components/molecules/fileUploader/FileUploader.stories.d.ts

@@ -44,54 +44,66 @@ declare namespace _default {
             let description_4: string;
             export { description_4 as description };
         }
-        namespace iconUrl {
+        namespace clientSideCrop {
             let control_5: string;
             export { control_5 as control };
             let description_5: string;
             export { description_5 as description };
         }
-        namespace buttonLabel {
+        namespace cropOutputDimensions {
             let control_6: string;
             export { control_6 as control };
             let description_6: string;
             export { description_6 as description };
         }
-        namespace acceptedLabel {
+        namespace iconUrl {
             let control_7: string;
             export { control_7 as control };
             let description_7: string;
             export { description_7 as description };
         }
-        namespace maxSizeLabel {
+        namespace buttonLabel {
             let control_8: string;
             export { control_8 as control };
             let description_8: string;
             export { description_8 as description };
         }
-        namespace uploadProgress {
-            export namespace control_9 {
-                let type_1: string;
-                export { type_1 as type };
-                export let min: number;
-                export let max: number;
-                export let step: number;
-            }
+        namespace acceptedLabel {
+            let control_9: string;
             export { control_9 as control };
             let description_9: string;
             export { description_9 as description };
         }
-        namespace isLoading {
+        namespace maxSizeLabel {
             let control_10: string;
             export { control_10 as control };
             let description_10: string;
             export { description_10 as description };
         }
-        namespace errorMessage {
-            let control_11: string;
+        namespace uploadProgress {
+            export namespace control_11 {
+                let type_1: string;
+                export { type_1 as type };
+                export let min: number;
+                export let max: number;
+                export let step: number;
+            }
             export { control_11 as control };
             let description_11: string;
             export { description_11 as description };
         }
+        namespace isLoading {
+            let control_12: string;
+            export { control_12 as control };
+            let description_12: string;
+            export { description_12 as description };
+        }
+        namespace errorMessage {
+            let control_13: string;
+            export { control_13 as control };
+            let description_13: string;
+            export { description_13 as description };
+        }
     }
 }
 export default _default;
@@ -104,4 +116,5 @@ export const MultipleExtensions: any;
 export const WithSquareCropping: any;
 export const WithCircleCropping: any;
 export const WithPreloadedImage: any;
+export const WithBannerCropping: any;
 import FileUploader from "./FileUploader";

package/dist/components/molecules/fileUploader/FileUploader.stories.js

@@ -82,8 +82,16 @@ export default {
             description: "Active/désactive le cadrage pour les images",
         },
         cropShape: {
-            control: { type: "select", options: ["circle", "square"] },
-            description: "Forme du masque de cadrage (cercle ou carré)",
+            control: { type: "select", options: ["circle", "square", "banner"] },
+            description: "Forme du masque de cadrage (cercle, carré ou bannière)",
+        },
+        clientSideCrop: {
+            control: "boolean",
+            description: "Active le crop côté client (l'image est croppée avant d'être envoyée)",
+        },
+        cropOutputDimensions: {
+            control: "object",
+            description: "Dimensions de sortie pour chaque forme (ex: { banner: { width: 1200, height: 400 } })",
         },
         iconUrl: {
             control: "text",
@@ -230,3 +238,32 @@ export var WithPreloadedImage = Template.bind({});
 WithPreloadedImage.args = __assign(__assign({}, Default.args), { 
     // On simule un fichier déjà chargé pour la story
     fileName: "logo-entreprise.png", fileSize: 1.2 * 1024 * 1024, filePresentationLabel: "Voici votre logo." });
+// Exemple avec le cadrage d'image en bannière (format 3:1)
+export var WithBannerCropping = Template.bind({});
+WithBannerCropping.args = {
+    acceptedExtensions: [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".webp",
+        ".gif",
+        ".ico",
+        ".bmp",
+        ".tiff",
+        ".heic",
+        ".heif",
+        ".hevc",
+    ],
+    maxFileSizeMB: 3,
+    enableDragAndDrop: true,
+    enableCropping: true,
+    cropShape: "banner",
+    clientSideCrop: true,
+    cropOutputDimensions: {
+        banner: { width: 1200, height: 400 },
+    },
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
+    maxSizeLabel: "Taille maximale :",
+    filePresentationLabel: "Voici votre bannière.",
+};

package/dist/components/molecules/fileUploader/ImageCropperModal.module.css

@@ -79,8 +79,8 @@
 }
 
 .crop_area_banner {
-  width: 320px;
-  height: 60px;
+  width: 360px;
+  height: 120px;
   border-radius: 4px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "5.1.6",
+  "version": "5.1.8",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",