@edifice.io/react 2.5.9 → 2.5.10-develop-pedago.20260216173040

package/README.md

@@ -105,6 +105,11 @@ export interface ButtonProps {
 export * from './Button';
 ```
 
+## Adding Icons
+
+https://edifice-community.atlassian.net/wiki/spaces/ODE/pages/4371611649/Overview#Ajout-de-l%E2%80%99ic%C3%B4ne
+
 ## Dev
 
 You can build your component using `Storybook`. See [README](../../docs//README.md)
+

package/dist/_virtual/isSameOrAfter.js

@@ -0,0 +1,4 @@
+var isSameOrAfter = { exports: {} };
+export {
+  isSameOrAfter as __module
+};

package/dist/_virtual/isToday.js

@@ -0,0 +1,4 @@
+var isToday = { exports: {} };
+export {
+  isToday as __module
+};

package/dist/components/AddAttachments/AddAttachments.d.ts

@@ -0,0 +1,18 @@
+import { Attachment } from './models/attachment';
+export interface AddAttachmentsProps {
+    attachments: Attachment[];
+    onFilesSelected: (files: File[]) => void;
+    onRemoveAttachment: (attachmentId: string) => void;
+    editMode?: boolean;
+    isMutating?: boolean;
+    onCopyToWorkspace?: (attachments: Attachment[], folderId: string) => Promise<boolean>;
+    /** Si fourni, chaque pièce jointe affiche un bouton télécharger avec l'URL retournée. */
+    getDownloadUrl?: (attachmentId: string) => string;
+    /** Si fourni et qu'il y a plusieurs pièces jointes, affiche un bouton « télécharger tout ». */
+    downloadAllUrl?: string;
+}
+export declare const AddAttachments: {
+    ({ attachments, onFilesSelected, onRemoveAttachment, editMode, isMutating, onCopyToWorkspace, getDownloadUrl, downloadAllUrl, }: AddAttachmentsProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default AddAttachments;

package/dist/components/AddAttachments/AddAttachments.js

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useRef, useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconDelete from "../../modules/icons/components/IconDelete.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconFolderAdd from "../../modules/icons/components/IconFolderAdd.js";
+import SvgIconPlus from "../../modules/icons/components/IconPlus.js";
+import { AddAttachmentToWorkspaceModal } from "./components/AddAttachmentToWorkspaceModal.js";
+import { SingleAttachment } from "./components/SingleAttachment.js";
+import Flex from "../Flex/Flex.js";
+import IconButton from "../Button/IconButton.js";
+import Button from "../Button/Button.js";
+function fileToAttachment(file) {
+  return {
+    id: `${file.name}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    charset: "UTF-8",
+    contentTransferEncoding: "binary",
+    contentType: file.type || "application/octet-stream",
+    filename: file.name,
+    name: file.name,
+    size: file.size
+  };
+}
+const AddAttachments = ({
+  attachments,
+  onFilesSelected,
+  onRemoveAttachment,
+  editMode = !1,
+  isMutating = !1,
+  onCopyToWorkspace,
+  getDownloadUrl,
+  downloadAllUrl
+}) => {
+  const {
+    t
+  } = useTranslation(), inputRef = useRef(null), [optimisticAttachments, setOptimisticAttachments] = useState([]), [attachmentsToAddToWorkspace, setAttachmentsToAddToWorkspace] = useState(void 0), prevAttachmentsLengthRef = useRef(attachments.length), displayedAttachments = [...attachments, ...optimisticAttachments];
+  if (useEffect(() => {
+    attachments.length > prevAttachmentsLengthRef.current && setOptimisticAttachments([]), prevAttachmentsLengthRef.current = attachments.length;
+  }, [attachments.length]), !editMode && !displayedAttachments.length) return null;
+  const resetInputValue = () => {
+    inputRef.current && (inputRef.current.value = "");
+  }, handleAttachClick = () => {
+    var _a;
+    return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
+  }, handleFileChange = (event) => {
+    const files = Array.from(event.target.files ?? []);
+    if (files.length > 0) {
+      onFilesSelected(files);
+      const newOptimistic = files.map(fileToAttachment);
+      setOptimisticAttachments((prev) => [...prev, ...newOptimistic]);
+    }
+    resetInputValue();
+  }, handleDetachAllClick = () => {
+    setOptimisticAttachments([]), attachments.forEach((attachment) => {
+      onRemoveAttachment(attachment.id);
+    }), resetInputValue();
+  }, handleDetachClick = (attachmentId) => {
+    optimisticAttachments.some((attachment) => attachment.id === attachmentId) ? setOptimisticAttachments((prev) => prev.filter((attachment) => attachment.id !== attachmentId)) : onRemoveAttachment(attachmentId), resetInputValue();
+  }, handleCopyToWorkspace = (attachments2) => {
+    setAttachmentsToAddToWorkspace(attachments2);
+  }, className = clsx("bg-gray-200 rounded px-12 py-8 message-attachments align-self-start gap-8 d-flex flex-column mw-100", {
+    "border add-attachments-edit mx-16": editMode
+  });
+  return /* @__PURE__ */ jsxs("div", { className, "data-drag-handle": !0, children: [
+    !!displayedAttachments.length && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", justify: "between", className: "border-bottom", children: [
+        /* @__PURE__ */ jsx("span", { className: "caption fw-bold my-8", children: t("attachments") }),
+        displayedAttachments.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
+          onCopyToWorkspace && /* @__PURE__ */ jsx(IconButton, { title: t("conversation.copy.all.toworkspace"), color: "tertiary", type: "button", icon: /* @__PURE__ */ jsx(SvgIconFolderAdd, {}), onClick: () => handleCopyToWorkspace(displayedAttachments), variant: "ghost" }),
+          downloadAllUrl && /* @__PURE__ */ jsx("a", { href: downloadAllUrl, download: !0, children: /* @__PURE__ */ jsx(IconButton, { title: t("download.all.attachment"), color: "tertiary", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDownload, {}), variant: "ghost" }) }),
+          editMode && /* @__PURE__ */ jsx(IconButton, { title: t("remove.all.attachment"), color: "danger", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), variant: "ghost", onClick: handleDetachAllClick, disabled: isMutating })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "d-flex gap-8 flex-column list-unstyled m-0", children: displayedAttachments.map((attachment) => /* @__PURE__ */ jsx("li", { className: "mw-100", children: /* @__PURE__ */ jsx(SingleAttachment, { attachment, editMode, onDelete: handleDetachClick, onCopyToWorkspace: onCopyToWorkspace ? (attachment2) => handleCopyToWorkspace([attachment2]) : void 0, getDownloadUrl, disabled: isMutating }) }, attachment.id)) })
+    ] }),
+    editMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "secondary", variant: "ghost", isLoading: isMutating, onClick: handleAttachClick, disabled: isMutating, className: "align-self-start", leftIcon: /* @__PURE__ */ jsx(SvgIconPlus, {}), children: t("add.attachment") }),
+      /* @__PURE__ */ jsx("input", { ref: inputRef, multiple: !0, type: "file", name: "attachment-input", id: "attachment-input", onChange: handleFileChange, hidden: !0 })
+    ] }),
+    onCopyToWorkspace && !!attachmentsToAddToWorkspace && /* @__PURE__ */ jsx(AddAttachmentToWorkspaceModal, { isOpen: !0, onModalClose: () => setAttachmentsToAddToWorkspace(void 0), attachments: attachmentsToAddToWorkspace, onCopyToWorkspace })
+  ] });
+};
+export {
+  AddAttachments,
+  AddAttachments as default
+};

package/dist/components/AddAttachments/components/AddAttachmentToWorkspaceModal.d.ts

@@ -0,0 +1,9 @@
+import { Attachment } from '../models/attachment';
+interface AddAttachmentToWorkspaceModalProps {
+    attachments: Attachment[];
+    onModalClose: () => void;
+    isOpen?: boolean;
+    onCopyToWorkspace: (attachments: Attachment[], folderId: string) => Promise<boolean>;
+}
+export declare function AddAttachmentToWorkspaceModal({ attachments, isOpen, onModalClose, onCopyToWorkspace, }: AddAttachmentToWorkspaceModalProps): import('react').ReactPortal;
+export {};

package/dist/components/AddAttachments/components/AddAttachmentToWorkspaceModal.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import Modal from "../../Modal/Modal.js";
+import WorkspaceFolders from "../../../modules/multimedia/WorkspaceFolders/WorkspaceFolders.js";
+import Button from "../../Button/Button.js";
+function AddAttachmentToWorkspaceModal({
+  attachments,
+  isOpen = !1,
+  onModalClose,
+  onCopyToWorkspace
+}) {
+  const {
+    t
+  } = useTranslation(), [selectedFolderIdToCopyFile, setSelectedFolderIdToCopyFile] = useState(void 0), [isLoading, setIsLoading] = useState(!1), [disabled, setDisabled] = useState(!1), handleFolderSelected = (folderId, canCopyFileInto) => {
+    setSelectedFolderIdToCopyFile(canCopyFileInto ? folderId : void 0);
+  }, handleAddAttachmentToWorkspace = async () => {
+    if (selectedFolderIdToCopyFile === void 0) return;
+    setIsLoading(!0), await onCopyToWorkspace(attachments, selectedFolderIdToCopyFile) ? onModalClose() : toast.error(t("attachments.add.to.folder.modal.error")), setIsLoading(!1);
+  };
+  return useEffect(() => {
+    setDisabled(selectedFolderIdToCopyFile === void 0);
+  }, [selectedFolderIdToCopyFile]), /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { isOpen, onModalClose, id: "add-attachment-to-workspace-modal", size: "md", children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("attachments.add.to.folder.modal.title") }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12", children: [
+      /* @__PURE__ */ jsx("p", { children: t("attachments.add.to.folder.modal.description", {
+        count: attachments.length
+      }) }),
+      /* @__PURE__ */ jsx(WorkspaceFolders, { onFolderSelected: handleFolderSelected })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", color: "tertiary", variant: "ghost", onClick: onModalClose, children: t("attachments.add.to.folder.modal.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", variant: "filled", onClick: handleAddAttachmentToWorkspace, disabled: isLoading || disabled, isLoading, children: t("attachments.add.to.folder.modal.add") })
+    ] })
+  ] }), document.getElementById("portal"));
+}
+export {
+  AddAttachmentToWorkspaceModal
+};

package/dist/components/AddAttachments/components/SingleAttachment.d.ts

@@ -0,0 +1,13 @@
+import { Attachment } from '../models/attachment';
+export interface SingleAttachmentProps {
+    attachment: Attachment;
+    onDelete: (attachmentId: string) => void;
+    editMode?: boolean;
+    /** Si fourni, affiche le bouton « copier vers l'espace » et appelle ce callback au clic. */
+    onCopyToWorkspace?: (attachment: Attachment) => void;
+    /** Si fourni, affiche le bouton télécharger avec l'URL retournée. */
+    getDownloadUrl?: (attachmentId: string) => string;
+    /** Désactive les boutons d'action (ex. pendant une suppression). */
+    disabled?: boolean;
+}
+export declare function SingleAttachment({ attachment, onDelete, editMode, onCopyToWorkspace, getDownloadUrl, disabled, }: SingleAttachmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AddAttachments/components/SingleAttachment.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import SvgIconDelete from "../../../modules/icons/components/IconDelete.js";
+import SvgIconDownload from "../../../modules/icons/components/IconDownload.js";
+import SvgIconFolderAdd from "../../../modules/icons/components/IconFolderAdd.js";
+import { useTranslation } from "react-i18next";
+import Attachment from "../../Attachment/Attachment.js";
+import IconButton from "../../Button/IconButton.js";
+function SingleAttachment({
+  attachment,
+  onDelete,
+  editMode = !1,
+  onCopyToWorkspace,
+  getDownloadUrl,
+  disabled = !1
+}) {
+  const {
+    t
+  } = useTranslation(), downloadUrl = getDownloadUrl == null ? void 0 : getDownloadUrl(attachment.id);
+  return /* @__PURE__ */ jsx(Attachment, { name: attachment.filename, options: /* @__PURE__ */ jsxs(Fragment, { children: [
+    onCopyToWorkspace && /* @__PURE__ */ jsx(IconButton, { title: t("conversation.copy.toworkspace"), color: "tertiary", type: "button", icon: /* @__PURE__ */ jsx(SvgIconFolderAdd, {}), variant: "ghost", onClick: () => onCopyToWorkspace(attachment), disabled }),
+    downloadUrl !== void 0 && /* @__PURE__ */ jsx("a", { href: downloadUrl, download: !0, children: /* @__PURE__ */ jsx(IconButton, { title: t("download.attachment"), color: "tertiary", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDownload, {}), variant: "ghost", disabled }) }),
+    editMode && /* @__PURE__ */ jsx(IconButton, { title: t("remove.attachment"), color: "danger", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), variant: "ghost", onClick: () => onDelete(attachment.id), disabled })
+  ] }) });
+}
+export {
+  SingleAttachment
+};

package/dist/components/AddAttachments/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AddAttachments } from './AddAttachments';
+export * from './AddAttachments';

package/dist/components/AddAttachments/models/attachment.d.ts

@@ -0,0 +1,9 @@
+export type Attachment = {
+    id: string;
+    charset: string;
+    contentTransferEncoding: string;
+    contentType: string;
+    filename: string;
+    name: string;
+    size: number;
+};

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { UserProfile } from '@edifice.io/client';
+import { IWebApp, UserProfile } from '@edifice.io/client';
 export type BadgeRef = HTMLSpanElement;
 /** Badge variant : notification */
 export type NotificationBadgeVariant = {
@@ -31,10 +31,16 @@ export type LinkBadgeVariant = {
  * Beta Badge is used to indicate that a feature is in beta phase.
  * The color prop allows to customize the badge color to match the app color.
  * Defaults to black if not provided.
+ * Beta Badge has a fixed text 'BÊTA' unless children is provided.
+ * If app is provided, the color of the Beta Badge is derived from the application colors.
+ * Example:
+ * <Badge variant={{ type: 'beta', color: '#823AA1', app: myApp }} />
+ * where myApp is of type IWebApp.
  */
 export type BetaBadgeVariant = {
     type: 'beta';
     color?: string;
+    app?: IWebApp;
 };
 export type BadgeVariants = NotificationBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant | BetaBadgeVariant;
 export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {

package/dist/components/Badge/Badge.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import clsx from "clsx";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
 const Badge = /* @__PURE__ */ forwardRef(({
   className,
   variant = {
@@ -10,17 +11,19 @@ const Badge = /* @__PURE__ */ forwardRef(({
   children,
   ...restProps
 }, ref) => {
-  const classes = clsx("badge rounded-pill", (variant.type === "content" || variant.type === "user") && "background" in variant ? "bg-gray-200" : (variant.type === "content" || variant.type === "user") && !("background" in variant) ? "border border-0" : "", variant.type === "content" && `text-${variant.level}`, variant.type === "notification" && `badge-notification bg-${variant.level} text-light border border-0`, variant.type === "user" && `badge-profile-${variant.profile.toLowerCase()}`, variant.type === "link" && "badge-link border border-0", variant.type === "chip" && "bg-gray-200", className);
-  return /* @__PURE__ */ jsxs("span", { ref, className: classes, style: (() => {
-    if (variant.type !== "beta") return;
-    const color = variant.color ?? "#000000";
-    return {
-      borderColor: color,
-      color,
-      backgroundColor: `${color}10`
-      // the 2 last hexadecimal numbers are for opacity
-    };
-  })(), ...restProps, children: [
+  const {
+    getIconClass,
+    getBackgroundLightIconClass,
+    getBorderIconClass
+  } = useEdificeIcons();
+  let badgeColorClassName = "";
+  if (variant.type === "beta" && variant.app) {
+    const colorAppClassName = getIconClass(variant.app), backgroundLightAppClassName = getBackgroundLightIconClass(variant.app), borderAppClassName = getBorderIconClass(variant.app);
+    badgeColorClassName = `${colorAppClassName} ${backgroundLightAppClassName} ${borderAppClassName}`;
+  }
+  console.log(badgeColorClassName);
+  const classes = clsx("badge rounded-pill", (variant.type === "content" || variant.type === "user") && "background" in variant ? "bg-gray-200" : (variant.type === "content" || variant.type === "user") && !("background" in variant) ? "border border-0" : "", variant.type === "content" && `text-${variant.level}`, variant.type === "notification" && `badge-notification bg-${variant.level} text-light border border-0`, variant.type === "user" && `badge-profile-${variant.profile.toLowerCase()}`, variant.type === "link" && "badge-link border border-0", variant.type === "chip" && "bg-gray-200", variant.type === "beta" && badgeColorClassName, className);
+  return /* @__PURE__ */ jsxs("span", { ref, className: classes, ...restProps, children: [
     variant.type === "chip" && /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }),
     variant.type === "beta" && (children ?? "BÊTA"),
     variant.type !== "chip" && variant.type !== "beta" && children

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,57 @@
+/**
+ * DatePicker component props
+ *
+ * Minimal interface that only exposes what is necessary.
+ * Ant Design implementation is hidden and no Ant Design-specific props are exposed.
+ * Standard HTML div attributes are supported (passed through to the underlying DOM element).
+ */
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     * Selected date values
+     * @default today's date is setted by ant design if no value is provided
+     */
+    value?: Date;
+    /**
+     * Callback called when date changes
+     */
+    onChange?: (date?: Date) => void;
+    /**
+     * Date format to display in the picker
+     * @default 'DD / MM / YYYY'
+     */
+    dateFormat?: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+}
+/**
+ * Type for DatePicker ref
+ */
+/**
+ * DatePicker component
+ *
+ * Date picker component for selecting a date.
+ *
+ * **Note:** This component uses Ant Design's DatePicker component internally.
+ * Only the props defined in DatePickerProps are allowed to prevent
+ * dependency on Ant Design-specific features. To replace the implementation,
+ * modify the component body below.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={(date) => setDate(date)}
+ *   dateFormat="YYYY-MM-DD"
+ *   minDate={new Date(today.setDate(today.getDate() - 2))}
+ *   maxDate={new Date(today.setDate(today.getDate() + 3))}
+ * />
+ * ```
+ */
+declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLElement>>;
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -16,7 +16,8 @@ const DatePicker = /* @__PURE__ */ forwardRef(({
   onChange,
   dateFormat = "DD / MM / YYYY",
   minDate,
-  maxDate
+  maxDate,
+  ...htmlProps
 }, ref) => {
   const handleChange = (date) => {
     onChange == null || onChange(date ? date.toDate() : void 0);
@@ -26,9 +27,11 @@ const DatePicker = /* @__PURE__ */ forwardRef(({
     format: dateFormat,
     minDate: minDate ? dayjs(minDate) : void 0,
     maxDate: maxDate ? dayjs(maxDate) : void 0,
-    ref
+    ref,
+    // Cast necessary because AntDatePicker expects a specific type, but our API exposes only HTMLElement to avoid dependency on Ant Design-specific features.
+    ...htmlProps
   };
-  return /* @__PURE__ */ jsx(DatePicker$1, { ...antProps });
+  return /* @__PURE__ */ jsx(DatePicker$1, { ...antProps, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body });
 });
 export {
   DatePicker as default

package/dist/components/Layout/components/WidgetApps.js

@@ -6,7 +6,7 @@ const WidgetAppsFooter = () => {
     t
   } = useTranslation();
   return /* @__PURE__ */ jsx("div", { className: "widget-footer", children: /* @__PURE__ */ jsx("div", { className: "widget-footer-action", children: /* @__PURE__ */ jsx("a", { href: "/welcome", className: "link", children: t("plus") }) }) });
-}, WidgetAppsBody = ({
+}, appToOpenOnBlank = ["Administration"], WidgetAppsBody = ({
   bookmarkedApps
 }) => {
   const {
@@ -14,7 +14,7 @@ const WidgetAppsFooter = () => {
   } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "widget-body d-flex flex-wrap", children: [
     !bookmarkedApps.length && /* @__PURE__ */ jsx("div", { className: "text-dark", children: t("navbar.myapps.more") }),
-    bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, className: "bookmarked-app", target: app.isExternal || app.category === "connector" ? "_blank" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
+    bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, className: "bookmarked-app", target: appToOpenOnBlank.includes(app.name) || app.isExternal || app.category === "connector" ? "_blank" : void 0, rel: appToOpenOnBlank.includes(app.name) || app.isExternal || app.category === "connector" ? "noopener noreferrer" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
   ] });
 };
 export {

package/dist/components/MediaViewer/MediaViewer.d.ts

@@ -0,0 +1,17 @@
+import { MediaLibraryType } from 'src/modules/multimedia';
+export interface MediaProps {
+    name: string;
+    url: string;
+    type: MediaLibraryType;
+    mimeType?: string;
+}
+interface MediaViewerProps {
+    onClose: () => void;
+    media: MediaProps[];
+    indexMedia?: number;
+}
+declare const MediaViewer: {
+    ({ onClose, media, indexMedia }: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MediaViewer;

package/dist/components/MediaViewer/MediaViewer.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Carousel } from "antd";
+import ToolbarZoom from "./ToolbarZoom.js";
+import useZoom from "../../hooks/useZoom/useZoom.js";
+import ToolbarViewer from "./ToolbarViewer.js";
+import { useState, useEffect } from "react";
+import { MediaWrapper } from "./MediaWrapper.js";
+import Flex from "../Flex/Flex.js";
+const MediaViewer = ({
+  onClose,
+  media,
+  indexMedia = 0
+}) => {
+  const {
+    zoomIn,
+    zoomOut,
+    setScale,
+    scale
+  } = useZoom(1), [currentIndex, setCurrentIndex] = useState(indexMedia);
+  return useEffect(() => {
+    setCurrentIndex(indexMedia);
+  }, [indexMedia]), /* @__PURE__ */ jsxs("div", { className: "media-viewer", children: [
+    /* @__PURE__ */ jsx(ToolbarViewer, { onClose, mediaUrl: media[currentIndex].url, mediaName: media[currentIndex].name, nbMedia: media.length, currentIndex }),
+    /* @__PURE__ */ jsx(Flex, { className: "media-viewer-inner-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "media-viewer-inner", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(Carousel, { initialSlide: indexMedia, dots: !1, arrows: !0, draggable: !0, infinite: !1, afterChange: (current) => {
+        setCurrentIndex(current);
+      }, beforeChange: () => {
+        setScale(1);
+      }, children: media.map((item, index) => /* @__PURE__ */ jsx("div", { className: "viewer-slide", children: /* @__PURE__ */ jsx(MediaWrapper, { mediaUrl: item.url, mediaType: item.type, mimeType: item.mimeType, scale: index === currentIndex ? scale : 1 }) }, index)) }),
+      /* @__PURE__ */ jsx(ToolbarZoom, { zoomIn, zoomOut })
+    ] }) })
+  ] });
+};
+export {
+  MediaViewer as default
+};

package/dist/components/MediaViewer/MediaWrapper.d.ts

@@ -0,0 +1,7 @@
+import { MediaLibraryType } from 'src/modules/multimedia';
+export declare const MediaWrapper: ({ mediaUrl, mediaType, mimeType, scale, }: {
+    mediaUrl: string;
+    mediaType: MediaLibraryType;
+    mimeType?: string;
+    scale?: number;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/MediaViewer/MediaWrapper.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import SvgIconTextPage from "../../modules/icons/components/IconTextPage.js";
+import SvgIconLink from "../../modules/icons/components/IconLink.js";
+import SvgIconHeadphone from "../../modules/icons/components/IconHeadphone.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconExternalLink from "../../modules/icons/components/IconExternalLink.js";
+import { useTranslation } from "react-i18next";
+import PdfViewer from "./PdfViewer.js";
+import Flex from "../Flex/Flex.js";
+import Button from "../Button/Button.js";
+import Image from "../Image/Image.js";
+const MediaWrapper = ({
+  mediaUrl,
+  mediaType,
+  mimeType,
+  scale
+}) => {
+  const {
+    t
+  } = useTranslation(), imageMediaStyle = {
+    flex: "none",
+    height: "100%",
+    transform: `scale(${scale})`,
+    maxHeight: "70vh"
+  }, audioStyle = {
+    width: "100%",
+    maxWidth: "500px"
+  }, videoMediaStyle = {
+    height: "100%",
+    objectFit: "cover",
+    transform: `scale(${scale})`
+  }, iframeMediaStyle = {
+    width: "100%",
+    height: "600px",
+    maxWidth: "900px",
+    transform: `scale(${scale})`
+  };
+  switch (mediaType) {
+    case "image":
+      return /* @__PURE__ */ jsx(Image, { className: "rounded-2", src: mediaUrl, alt: mediaType, width: "100%", objectFit: "contain", style: imageMediaStyle });
+    case "audio":
+      return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", style: {
+        height: "200px"
+      }, children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", className: "bg-gray-300 h-100 w-100 rounded-2 mb-8", style: {
+          maxWidth: "500px"
+        }, children: /* @__PURE__ */ jsx(SvgIconHeadphone, { width: 40, height: 40, color: "#B0B0B0" }) }),
+        /* @__PURE__ */ jsx("audio", { src: mediaUrl, className: "media-audio", controls: !0, style: audioStyle })
+      ] });
+    case "video":
+      return /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx("video", { src: mediaUrl, controls: !0, className: "media-video", style: videoMediaStyle }) });
+    case "embedder":
+      return /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx("iframe", { title: "Embedded media content", src: mediaUrl, className: "media-video", style: iframeMediaStyle }) });
+    case "hyperlink":
+    case "attachment":
+      return mimeType && mimeType === "application/pdf" ? /* @__PURE__ */ jsx(PdfViewer, { mediaUrl, scale }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", className: "bg-gray-300 w-100 rounded-2 mb-8", style: {
+          maxWidth: "500px",
+          height: "200px"
+        }, children: mediaType === "hyperlink" ? /* @__PURE__ */ jsx(SvgIconLink, { width: 40, height: 40, color: "#B0B0B0" }) : /* @__PURE__ */ jsx(SvgIconTextPage, { width: 40, height: 40, color: "#B0B0B0" }) }),
+        /* @__PURE__ */ jsx("a", { className: "w-100 d-flex justify-content-center", href: mediaUrl, download: mediaType !== "hyperlink", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Button, { className: "w-100", style: {
+          height: "40px",
+          maxWidth: "500px"
+        }, leftIcon: mediaType === "hyperlink" ? /* @__PURE__ */ jsx(SvgIconExternalLink, {}) : /* @__PURE__ */ jsx(SvgIconDownload, {}), color: "tertiary", children: t(mediaType === "hyperlink" ? "mediaWrapper.attachment.open" : "mediaWrapper.attachment.download") }) })
+      ] });
+    default:
+      return null;
+  }
+};
+export {
+  MediaWrapper
+};

package/dist/components/MediaViewer/PdfViewer.d.ts

@@ -0,0 +1,4 @@
+export default function PdfViewer({ mediaUrl, scale, }: {
+    mediaUrl: string;
+    scale?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/PdfViewer.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Document, Page } from "react-pdf";
+import LoadingScreen from "../LoadingScreen/LoadingScreen.js";
+function PdfViewer({
+  mediaUrl,
+  scale
+}) {
+  const [numPages, setNumPages] = useState(null), pagesRef = useRef([]), onDocumentLoadSuccess = ({
+    numPages: numPages2
+  }) => {
+    setNumPages(numPages2);
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    width: `calc(600px * ${scale})`,
+    height: "calc(100vh - 52px)",
+    overflowY: "auto",
+    marginTop: "20px"
+  }, children: /* @__PURE__ */ jsx(Document, { file: mediaUrl, onLoadSuccess: onDocumentLoadSuccess, loading: /* @__PURE__ */ jsx(LoadingScreen, {}), children: Array.from(new Array(numPages), (_, index) => /* @__PURE__ */ jsx("div", { ref: (el) => pagesRef.current[index] = el, style: {
+    marginBottom: 32,
+    transformOrigin: "top center"
+  }, children: /* @__PURE__ */ jsx(Page, { className: "pdf-page", pageNumber: index + 1, renderTextLayer: !1, renderAnnotationLayer: !1, width: 600 * (scale ?? 1), loading: /* @__PURE__ */ jsx(LoadingScreen, {}) }) }, index)) }) });
+}
+export {
+  PdfViewer as default
+};

package/dist/components/MediaViewer/ToolbarViewer.d.ts

@@ -0,0 +1,7 @@
+export default function ToolbarViewer({ onClose, mediaName, mediaUrl, nbMedia, currentIndex, }: {
+    onClose: () => void;
+    mediaName: string;
+    nbMedia?: number;
+    mediaUrl?: string;
+    currentIndex: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/ToolbarViewer.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconExternalLink from "../../modules/icons/components/IconExternalLink.js";
+import Flex from "../Flex/Flex.js";
+import IconButton from "../Button/IconButton.js";
+import SmartEllipsis from "../SmartEllipsis/SmartEllipsis.js";
+function ToolbarViewer({
+  onClose,
+  mediaName,
+  mediaUrl,
+  nbMedia,
+  currentIndex
+}) {
+  return useEffect(() => {
+    const handleKeyDown = (e) => {
+      e.key === "Escape" && onClose();
+    };
+    return window.addEventListener("keydown", handleKeyDown), () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]), /* @__PURE__ */ jsxs(Flex, { className: "media-viewer-toolbar p-8", align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "8", align: "center", style: {
+      minWidth: "50%"
+    }, children: [
+      /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconClose, { color: "#fff" }), onClick: onClose, variant: "ghost" }),
+      /* @__PURE__ */ jsx(SmartEllipsis, { text: mediaName })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "8", align: "center", justify: "between", className: "w-100", children: [
+      nbMedia ? /* @__PURE__ */ jsx("p", { children: `${currentIndex + 1}/${nbMedia} ` }) : /* @__PURE__ */ jsx("p", { children: `${currentIndex + 1}` }),
+      mediaUrl && /* @__PURE__ */ jsxs(Flex, { className: "ms-8", gap: "8", align: "center", children: [
+        /* @__PURE__ */ jsx("a", { href: mediaUrl, download: !0, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconDownload, { color: "#fff" }), variant: "ghost" }) }),
+        /* @__PURE__ */ jsx("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconExternalLink, { color: "#fff" }), variant: "ghost" }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ToolbarViewer as default
+};

package/dist/components/MediaViewer/ToolbarZoom.d.ts

@@ -0,0 +1,4 @@
+export default function ToolbarZoom({ zoomIn, zoomOut, }: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+}): import("react/jsx-runtime").JSX.Element;