@zextras/carbonio-ui-preview 1.2.2 → 1.2.4

package/lib/preview/PreviewCriteriaAlternativeContent.module.css

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.fakeModal {
+    border-radius: 1rem;
+    padding: 2rem 4rem 2rem 4rem;
+    margin: auto;
+}
+
+.attachmentLink {
+    text-decoration: none;
+}

package/lib/preview/PreviewManager.d.ts

@@ -1,19 +1,42 @@
 import React from 'react';
-import { ImagePreviewProps } from './ImagePreview';
-import { PdfPreviewProps } from './PdfPreview';
-import { type MakeOptional } from '../utils/type-utils';
-type PreviewArgType = (MakeOptional<Omit<ImagePreviewProps, 'show'>, 'onClose'> | MakeOptional<Omit<PdfPreviewProps, 'show'>, 'onClose'>) & {
-    previewType: 'pdf' | 'image';
-    id?: string;
+import { ImagePreviewProps } from './ImagePreview.js';
+import { PdfPreviewProps } from './PdfPreview.js';
+import { type MakeOptional } from '../types/utils.js';
+/**
+ * Define an item for the preview. It can be of type 'image' or 'pdf'.
+ * The id is required to control the opening of the preview after its initialization.
+ */
+export type PreviewItem = ((MakeOptional<Omit<ImagePreviewProps, 'show'>, 'onClose'> & {
+    previewType: 'image';
+}) | (MakeOptional<Omit<PdfPreviewProps, 'show'>, 'onClose'> & {
+    previewType: 'pdf';
+})) & {
+    id: string;
 };
-export type PreviewManagerContextType = {
-    createPreview: (args: PreviewArgType) => void;
-    initPreview: (args: Array<PreviewArgType & {
-        id: string;
-    }>) => void;
+export interface PreviewManagerContextType {
+    /** Initialize and open the preview for the given item */
+    createPreview: (item: MakeOptional<PreviewItem, 'id'>) => void;
+    /**
+     * Initialize the preview for the given items. This function does not open the preview.
+     * Use openPreview to open the preview for one of the initialized items.
+     */
+    initPreview: (items: PreviewItem[]) => void;
+    /**
+     * Open the preview for the item with the given id. The item must have been initialized
+     * before with the initPreview method.
+     */
     openPreview: (id: string) => void;
+    /** Clear the initialized previews */
     emptyPreview: () => void;
-};
-declare const PreviewsManagerContext: React.Context<PreviewManagerContextType>;
-declare const PreviewManager: React.FC;
-export { PreviewsManagerContext, PreviewManager };
+}
+/**
+ * The context give access to the functions needed to manage multiple previews.
+ * It must be used together with the PreviewManager.
+ */
+export declare const PreviewsManagerContext: React.Context<PreviewManagerContextType>;
+/**
+ * The manager for showing multiple previews.
+ * From within it, the PreviewsManagerContext give access to the functions to initialize and open
+ * the previews of different items.
+ */
+export declare const PreviewManager: React.FC;

package/lib/preview/PreviewManager.js

@@ -1,43 +1,8 @@
-"use strict";
 /*
  * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -49,24 +14,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewManager = exports.PreviewsManagerContext = void 0;
-var react_1 = __importStar(require("react"));
-var findIndex_1 = __importDefault(require("lodash/findIndex"));
-var PreviewWrapper_1 = require("./PreviewWrapper");
-var PreviewsManagerContext = (0, react_1.createContext)({
-    createPreview: function () { return undefined; },
-    initPreview: function () { return undefined; },
-    openPreview: function () { return undefined; },
-    emptyPreview: function () { return undefined; }
+import React, { useCallback, createContext, useReducer, useState, useMemo } from 'react';
+import { findIndex } from 'lodash';
+import { PreviewWrapper } from './PreviewWrapper.js';
+/**
+ * The context give access to the functions needed to manage multiple previews.
+ * It must be used together with the PreviewManager.
+ */
+export const PreviewsManagerContext = createContext({
+    createPreview: () => undefined,
+    initPreview: () => undefined,
+    openPreview: () => undefined,
+    emptyPreview: () => undefined
 });
-exports.PreviewsManagerContext = PreviewsManagerContext;
-var PreviewManager = function (_a) {
-    var children = _a.children;
-    var _b = (0, react_1.useReducer)(function (state, action) {
+/**
+ * The manager for showing multiple previews.
+ * From within it, the PreviewsManagerContext give access to the functions to initialize and open
+ * the previews of different items.
+ */
+export const PreviewManager = ({ children }) => {
+    const [previews, dispatchPreviews] = useReducer((state, action) => {
         switch (action.type) {
             case 'init': {
                 return action.value;
@@ -78,61 +45,60 @@ var PreviewManager = function (_a) {
                 return state;
             }
         }
-    }, []), previews = _b[0], dispatchPreviews = _b[1];
-    var _c = (0, react_1.useState)(-1), openArrayIndex = _c[0], setOpenArrayIndex = _c[1];
-    var previewElement = (0, react_1.useMemo)(function () {
+    }, []);
+    const [openArrayIndex, setOpenArrayIndex] = useState(-1);
+    const previewElement = useMemo(() => {
         if (openArrayIndex >= 0) {
-            var _a = previews[openArrayIndex], onClose_1 = _a.onClose, props = __rest(_a, ["onClose"]);
-            var closePreview = function (ev) {
-                if (onClose_1)
-                    onClose_1(ev);
+            const _a = previews[openArrayIndex], { onClose } = _a, props = __rest(_a, ["onClose"]);
+            const closePreview = (ev) => {
+                if (onClose)
+                    onClose(ev);
                 setOpenArrayIndex(-1);
             };
-            var onPreviousPreviewCallback = openArrayIndex === 0
+            const onPreviousPreviewCallback = openArrayIndex === 0
                 ? undefined
-                : function (e) {
+                : (e) => {
                     e.stopPropagation();
                     setOpenArrayIndex(openArrayIndex - 1);
                 };
-            var onNextPreviewCallback = openArrayIndex === previews.length - 1
+            const onNextPreviewCallback = openArrayIndex === previews.length - 1
                 ? undefined
-                : function (e) {
+                : (e) => {
                     e.stopPropagation();
                     setOpenArrayIndex(openArrayIndex + 1);
                 };
-            return (react_1.default.createElement(PreviewWrapper_1.PreviewWrapper, __assign({}, props, { show: true, onClose: closePreview, onPreviousPreview: onPreviousPreviewCallback, onNextPreview: onNextPreviewCallback })));
+            return (React.createElement(PreviewWrapper, Object.assign({}, props, { show: true, onClose: closePreview, onPreviousPreview: onPreviousPreviewCallback, onNextPreview: onNextPreviewCallback })));
         }
         return undefined;
     }, [openArrayIndex, previews]);
-    var createPreview = (0, react_1.useCallback)(function (args) {
+    const createPreview = useCallback((args) => {
         dispatchPreviews({
             type: 'init',
-            value: [args]
+            value: [Object.assign({ id: 'default-id' }, args)]
         });
         setOpenArrayIndex(0);
     }, [dispatchPreviews]);
-    var emptyPreview = (0, react_1.useCallback)(function () {
+    const emptyPreview = useCallback(() => {
         dispatchPreviews({
             type: 'empty'
         });
         setOpenArrayIndex(-1);
     }, [dispatchPreviews]);
-    var initPreview = (0, react_1.useCallback)(function (args) {
+    const initPreview = useCallback((args) => {
         dispatchPreviews({
             type: 'init',
             value: args
         });
     }, [dispatchPreviews]);
-    var openPreview = (0, react_1.useCallback)(function (id) {
-        var index = (0, findIndex_1.default)(previews, function (preview) { return preview.id === id; });
+    const openPreview = useCallback((id) => {
+        const index = findIndex(previews, (preview) => preview.id === id);
         if (index >= 0) {
             setOpenArrayIndex(index);
         }
     }, [previews, setOpenArrayIndex]);
-    var previewManagerContextValue = (0, react_1.useMemo)(function () { return ({ createPreview: createPreview, initPreview: initPreview, openPreview: openPreview, emptyPreview: emptyPreview }); }, [createPreview, emptyPreview, initPreview, openPreview]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(PreviewsManagerContext.Provider, { value: previewManagerContextValue }, children),
+    const previewManagerContextValue = useMemo(() => ({ createPreview, initPreview, openPreview, emptyPreview }), [createPreview, emptyPreview, initPreview, openPreview]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PreviewsManagerContext.Provider, { value: previewManagerContextValue }, children),
         previewElement));
 };
-exports.PreviewManager = PreviewManager;
 //# sourceMappingURL=PreviewManager.js.map

package/lib/preview/PreviewManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../src/preview/PreviewManager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../src/preview/PreviewManager.tsx"],"names":[],"mappings":"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"}

package/lib/preview/PreviewNavigator.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { HeaderAction, HeaderProps } from './Header.js';
+export interface PreviewNavigatorProps extends Partial<Omit<HeaderProps, 'closeAction'>> {
+    /**
+     * Close action for the preview.
+     * The close action does not accept the onClick field, because its click callback
+     * is always set to be the onClose function.
+     */
+    closeAction?: Omit<HeaderAction, 'onClick'>;
+    /**
+     * Callback to hide the preview. This function is invoked by all events that must close the preview
+     * (closeAction, overlay click, keyboard shortcuts).
+     * In order to invoke the onClose only once when clicking on the closeAction, the event of the onClose
+     * should call preventDefault.
+     *
+     * @example
+     * ```ts
+     * const onClose = (e: React.SyntheticEvent | KeyboardEvent): void => {
+     *  // prevent the default to invoke the onClose callback only once
+     * 	e.preventDefault();
+     * }
+     * ```
+     */
+    onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
+    /**
+     * HTML node where to insert the Portal's children.
+     * The default value is 'window.top.document'.
+     */
+    container?: Element;
+    /** Flag to disable the Portal implementation */
+    disablePortal?: boolean;
+    /** Flag to show or hide Portal's content */
+    show: boolean;
+    /** Callback invoked when the next preview is requested */
+    onNextPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
+    /** Callback invoked when the previous preview is requested */
+    onPreviousPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
+    /** Callback invoked when the preview overlay is clicked */
+    onOverlayClick?: React.JSX.IntrinsicElements['div']['onClick'];
+}
+/** Define the preview main layout, allowing the navigation between multiple previews. */
+export declare const PreviewNavigator: ({ children, onPreviousPreview, onNextPreview, container, disablePortal, extension, show, filename, actions, size, onOverlayClick, closeAction, onClose }: React.PropsWithChildren<PreviewNavigatorProps>) => React.JSX.Element;

package/lib/preview/PreviewNavigator.js

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { useMemo } from 'react';
+import { IconButton, Portal, Container } from '@zextras/carbonio-design-system';
+import FocusWithin from './FocusWithin.js';
+import Header from './Header.js';
+import styles from './PreviewNavigator.module.css';
+/** Define the preview main layout, allowing the navigation between multiple previews. */
+export const PreviewNavigator = ({ children, onPreviousPreview, onNextPreview, container, disablePortal, extension = '', show, filename = '', actions = [], size = '', onOverlayClick, closeAction, onClose }) => {
+    const $closeAction = useMemo(() => {
+        if (closeAction) {
+            return Object.assign(Object.assign({}, closeAction), { onClick: onClose });
+        }
+        return undefined;
+    }, [closeAction, onClose]);
+    return (React.createElement(Portal, { show: show, disablePortal: disablePortal, container: container },
+        React.createElement("div", { onClick: onOverlayClick, className: styles.overlay },
+            React.createElement(FocusWithin, null,
+                React.createElement("div", { className: styles.externalContainer },
+                    React.createElement(Header, { actions: actions, filename: filename, extension: extension, size: size, closeAction: $closeAction }),
+                    React.createElement(Container, { orientation: "horizontal", crossAlignment: "unset", minHeight: 0, flexGrow: 1 },
+                        onPreviousPreview ? (React.createElement(IconButton, { className: styles.absoluteLeftIconButton, icon: "ArrowBackOutline", size: "medium", backgroundColor: "gray0", iconColor: "gray6", borderRadius: "round", onClick: onPreviousPreview })) : null,
+                        children,
+                        onNextPreview ? (React.createElement(IconButton, { className: styles.absoluteRightIconButton, icon: "ArrowForwardOutline", size: "medium", backgroundColor: "gray0", iconColor: "gray6", borderRadius: "round", onClick: onNextPreview })) : null))))));
+};
+//# sourceMappingURL=PreviewNavigator.js.map

package/lib/preview/PreviewNavigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewNavigator.js","sourceRoot":"","sources":["../../src/preview/PreviewNavigator.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEhF,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAqC,MAAM,aAAa,CAAC;AAChE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAyCnD,yFAAyF;AACzF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAChC,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,IAAI,GAAG,EAAE,EACT,cAAc,EACd,WAAW,EACX,OAAO,EACyC,EAAqB,EAAE;IACvE,MAAM,YAAY,GAAG,OAAO,CAA2B,GAAG,EAAE;QAC3D,IAAI,WAAW,EAAE,CAAC;YACjB,uCACI,WAAW,KACd,OAAO,EAAE,OAAO,IACf;QACH,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3B,OAAO,CACN,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS;QACrE,6BAAK,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO;YACtD,oBAAC,WAAW;gBACX,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oBAAC,MAAM,IACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,YAAY,GACxB;oBACF,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,cAAc,EAAC,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC;wBAClF,iBAAiB,CAAC,CAAC,CAAC,CACpB,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,sBAAsB,EACxC,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAE,iBAAiB,GACzB,CACF,CAAC,CAAC,CAAC,IAAI;wBACP,QAAQ;wBACR,aAAa,CAAC,CAAC,CAAC,CAChB,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,uBAAuB,EACzC,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAE,aAAa,GACrB,CACF,CAAC,CAAC,CAAC,IAAI,CACG,CACP,CACO,CACT,CACE,CACT,CAAC;AACH,CAAC,CAAC"}

package/lib/preview/PreviewNavigator.module.css

@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.overlay {
+    height: 100vh;
+    max-height: 100vh;
+    width: 100%;
+    max-width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1003;
+}
+
+.externalContainer {
+    height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.absoluteLeftIconButton {
+    position: absolute !important;
+    left: 0.5rem;
+    top: 50%;
+    z-index: 1;
+}
+
+.absoluteRightIconButton {
+    position: absolute !important;
+    right: 0.5rem;
+    top: 50%;
+}

package/lib/preview/PreviewWrapper.d.ts

@@ -1,9 +1,15 @@
 import React from 'react';
-import { ImagePreviewProps } from './ImagePreview';
-import { PdfPreviewProps } from './PdfPreview';
-type PreviewsProps = ImagePreviewProps | PdfPreviewProps;
-type PreviewWrapperProps = PreviewsProps & {
-    previewType: 'pdf' | 'image';
-};
-declare const PreviewWrapper: React.VFC<PreviewWrapperProps>;
-export { PreviewWrapper, PreviewWrapperProps };
+import { ImagePreviewProps } from './ImagePreview.js';
+import { PdfPreviewProps } from './PdfPreview.js';
+export type PreviewWrapperProps = (ImagePreviewProps & {
+    previewType: 'image';
+}) | (PdfPreviewProps & {
+    previewType: 'pdf';
+});
+/**
+ * Show the preview for either an image or a pdf.
+ * This component is just a wrapper on the two specific preview components.
+ * @param previewType - The type of the preview
+ * @param props - The item to show
+ */
+export declare const PreviewWrapper: React.VFC<PreviewWrapperProps>;

package/lib/preview/PreviewWrapper.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,22 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewWrapper = void 0;
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importDefault(require("react"));
-var ImagePreview_1 = require("./ImagePreview");
-var PdfPreview_1 = require("./PdfPreview");
-var PreviewWrapper = function (_a) {
-    var previewType = _a.previewType, props = __rest(_a, ["previewType"]);
-    return previewType === 'pdf' ? (react_1.default.createElement(PdfPreview_1.PdfPreview, __assign({}, props))) : (react_1.default.createElement(ImagePreview_1.ImagePreview, __assign({}, props)));
+import React from 'react';
+import { ImagePreview } from './ImagePreview.js';
+import { PdfPreview } from './PdfPreview.js';
+/**
+ * Show the preview for either an image or a pdf.
+ * This component is just a wrapper on the two specific preview components.
+ * @param previewType - The type of the preview
+ * @param props - The item to show
+ */
+export const PreviewWrapper = (_a) => {
+    var { previewType } = _a, props = __rest(_a, ["previewType"]);
+    return previewType === 'pdf' ? (React.createElement(PdfPreview, Object.assign({}, props))) : (React.createElement(ImagePreview, Object.assign({}, props)));
 };
-exports.PreviewWrapper = PreviewWrapper;
 //# sourceMappingURL=PreviewWrapper.js.map

package/lib/preview/PreviewWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewWrapper.js","sourceRoot":"","sources":["../../src/preview/PreviewWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;GAIG;AACH,gDAA0B;AAE1B,+CAAiE;AACjE,2CAA2D;AAQ3D,IAAM,cAAc,GAAmC,UAAC,EAAyB;IAAvB,IAAA,WAAW,iBAAA,EAAK,KAAK,cAAvB,eAAyB,CAAF;IAC9E,OAAA,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,CACvB,8BAAC,uBAAU,eAAM,KAAyB,EAAI,CAC9C,CAAC,CAAC,CAAC,CACH,8BAAC,2BAAY,eAAM,KAA2B,EAAI,CAClD,CAAA;CAAA,CAAC;AAEM,wCAAc"}
+{"version":3,"file":"PreviewWrapper.js","sourceRoot":"","sources":["../../src/preview/PreviewWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAqB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAmB,MAAM,iBAAiB,CAAC;AAQ9D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAmC,CAAC,EAAyB,EAAE,EAAE;QAA7B,EAAE,WAAW,OAAY,EAAP,KAAK,cAAvB,eAAyB,CAAF;IACrF,OAAA,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,CACvB,oBAAC,UAAU,oBAAM,KAAyB,EAAI,CAC9C,CAAC,CAAC,CAAC,CACH,oBAAC,YAAY,oBAAM,KAA2B,EAAI,CAClD,CAAA;CAAA,CAAC"}

package/lib/preview/ZoomController.d.ts

@@ -14,4 +14,5 @@ export interface ZoomControllerProps {
     upperLimitReachedLabel: string | undefined;
     increaseByStep: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
+/** Render a controller for the zoom */
 export declare const ZoomController: ({ decrementable, fitToWidth, fitToWidthActive, fitToWidthLabel, incrementable, lowerLimitReachedLabel, decreaseByStep, increaseByStep, resetWidth, resetZoomLabel, upperLimitReachedLabel, zoomInLabel, zoomOutLabel }: ZoomControllerProps) => React.JSX.Element;

package/lib/preview/ZoomController.js

@@ -1,58 +1,17 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomController = void 0;
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importDefault(require("react"));
-var carbonio_design_system_1 = require("@zextras/carbonio-design-system");
-var styled_components_1 = __importStar(require("styled-components"));
-var CustomIconButton = (0, styled_components_1.default)(carbonio_design_system_1.IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", ";\n\t& > svg {\n\t\twidth: 1.25rem;\n\t\theight: 1.25rem;\n\t}\n"], ["\n\t", ";\n\t& > svg {\n\t\twidth: 1.25rem;\n\t\theight: 1.25rem;\n\t}\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tbackground: rgba(204, 204, 204, 0.2);\n\t\t\t& > svg {\n\t\t\t\tbackground: unset;\n\t\t\t}\n\t\t"], ["\n\t\t\tbackground: rgba(204, 204, 204, 0.2);\n\t\t\t& > svg {\n\t\t\t\tbackground: unset;\n\t\t\t}\n\t\t"])));
-});
-var ZoomController = function (_a) {
-    var decrementable = _a.decrementable, fitToWidth = _a.fitToWidth, fitToWidthActive = _a.fitToWidthActive, _b = _a.fitToWidthLabel, fitToWidthLabel = _b === void 0 ? 'Fit to width' : _b, incrementable = _a.incrementable, _c = _a.lowerLimitReachedLabel, lowerLimitReachedLabel = _c === void 0 ? 'Minimum zoom level reached' : _c, decreaseByStep = _a.decreaseByStep, increaseByStep = _a.increaseByStep, resetWidth = _a.resetWidth, _d = _a.resetZoomLabel, resetZoomLabel = _d === void 0 ? 'Reset zoom' : _d, _e = _a.upperLimitReachedLabel, upperLimitReachedLabel = _e === void 0 ? 'Maximum zoom level reached' : _e, _f = _a.zoomInLabel, zoomInLabel = _f === void 0 ? 'Zoom in' : _f, _g = _a.zoomOutLabel, zoomOutLabel = _g === void 0 ? 'Zoom out' : _g;
-    return (react_1.default.createElement(carbonio_design_system_1.Container, { orientation: "horizontal", gap: "0.5rem", width: "fit" },
-        react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: decrementable ? zoomOutLabel : lowerLimitReachedLabel },
-            react_1.default.createElement(CustomIconButton, { disabled: !decrementable, icon: "Minus", size: "small", backgroundColor: "gray0", iconColor: "gray6", onClick: decreaseByStep })),
-        react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: fitToWidthActive ? resetZoomLabel : fitToWidthLabel },
-            react_1.default.createElement(CustomIconButton, { icon: fitToWidthActive ? 'MinimizeOutline' : 'MaximizeOutline', size: "small", backgroundColor: "gray0", iconColor: "gray6", onClick: fitToWidthActive ? resetWidth : fitToWidth })),
-        react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: incrementable ? zoomInLabel : upperLimitReachedLabel },
-            react_1.default.createElement(CustomIconButton, { icon: "Plus", size: "small", backgroundColor: "gray0", iconColor: "gray6", onClick: increaseByStep, disabled: !incrementable }))));
-};
-exports.ZoomController = ZoomController;
-var templateObject_1, templateObject_2;
+import React from 'react';
+import { Container, IconButton, Tooltip } from '@zextras/carbonio-design-system';
+import styles from './ZoomController.module.css';
+/** Render a controller for the zoom */
+export const ZoomController = ({ decrementable, fitToWidth, fitToWidthActive, fitToWidthLabel = 'Fit to width', incrementable, lowerLimitReachedLabel = 'Minimum zoom level reached', decreaseByStep, increaseByStep, resetWidth, resetZoomLabel = 'Reset zoom', upperLimitReachedLabel = 'Maximum zoom level reached', zoomInLabel = 'Zoom in', zoomOutLabel = 'Zoom out' }) => (React.createElement(Container, { orientation: "horizontal", gap: "0.5rem", width: "fit" },
+    React.createElement(Tooltip, { label: decrementable ? zoomOutLabel : lowerLimitReachedLabel },
+        React.createElement(IconButton, { disabled: !decrementable, icon: "Minus", size: "small", backgroundColor: "gray0", iconColor: "gray6", onClick: decreaseByStep, className: styles.zoomIconButton })),
+    React.createElement(Tooltip, { label: fitToWidthActive ? resetZoomLabel : fitToWidthLabel },
+        React.createElement(IconButton, { icon: fitToWidthActive ? 'MinimizeOutline' : 'MaximizeOutline', size: "small", backgroundColor: "gray0", iconColor: "gray6", onClick: fitToWidthActive ? resetWidth : fitToWidth, className: styles.zoomIconButton })),
+    React.createElement(Tooltip, { label: incrementable ? zoomInLabel : upperLimitReachedLabel },
+        React.createElement(IconButton, { icon: "Plus", size: "small", backgroundColor: "gray0", iconColor: "gray6", onClick: increaseByStep, disabled: !incrementable, className: styles.zoomIconButton }))));
 //# sourceMappingURL=ZoomController.js.map

package/lib/preview/ZoomController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomController.js","sourceRoot":"","sources":["../../src/preview/ZoomController.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;GAIG;AACH,gDAA0B;AAE1B,0EAAiF;AACjF,qEAAqE;AAErE,IAAM,gBAAgB,GAAG,IAAA,2BAAM,EAAC,mCAAU,CAAC,6IAAA,MACxC,EAOA,kEAKF,KAZE,UAAC,EAAY;QAAV,QAAQ,cAAA;IACZ,OAAA,QAAQ,QACR,uBAAG,+KAAA,2GAKF,IAAA;AAND,CAMC,CAKF,CAAC;AAkBK,IAAM,cAAc,GAAG,UAAC,EAcT;QAbrB,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAChB,uBAAgC,EAAhC,eAAe,mBAAG,cAAc,KAAA,EAChC,aAAa,mBAAA,EACb,8BAAqD,EAArD,sBAAsB,mBAAG,4BAA4B,KAAA,EACrD,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,sBAA6B,EAA7B,cAAc,mBAAG,YAAY,KAAA,EAC7B,8BAAqD,EAArD,sBAAsB,mBAAG,4BAA4B,KAAA,EACrD,mBAAuB,EAAvB,WAAW,mBAAG,SAAS,KAAA,EACvB,oBAAyB,EAAzB,YAAY,mBAAG,UAAU,KAAA;IACoB,OAAA,CAC7C,8BAAC,kCAAS,IAAC,WAAW,EAAC,YAAY,EAAC,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK;QAC3D,8BAAC,gCAAO,IAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,sBAAsB;YACpE,8BAAC,gBAAgB,IAChB,QAAQ,EAAE,CAAC,aAAa,EACxB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,cAAc,GACtB,CACO;QACV,8BAAC,gCAAO,IAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe;YAClE,8BAAC,gBAAgB,IAChB,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAC9D,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAClD,CACO;QACV,8BAAC,gCAAO,IAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,sBAAsB;YACnE,8BAAC,gBAAgB,IAChB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,CAAC,aAAa,GACvB,CACO,CACC,CACZ;AAhC6C,CAgC7C,CAAC;AA9CW,QAAA,cAAc,kBA8CzB"}
+{"version":3,"file":"ZoomController.js","sourceRoot":"","sources":["../../src/preview/ZoomController.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAEjF,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAkBjD,uCAAuC;AACvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,eAAe,GAAG,cAAc,EAChC,aAAa,EACb,sBAAsB,GAAG,4BAA4B,EACrD,cAAc,EACd,cAAc,EACd,UAAU,EACV,cAAc,GAAG,YAAY,EAC7B,sBAAsB,GAAG,4BAA4B,EACrD,WAAW,GAAG,SAAS,EACvB,YAAY,GAAG,UAAU,EACJ,EAAqB,EAAE,CAAC,CAC7C,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK;IAC3D,oBAAC,OAAO,IAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,sBAAsB;QACpE,oBAAC,UAAU,IACV,QAAQ,EAAE,CAAC,aAAa,EACxB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,MAAM,CAAC,cAAc,GAC/B,CACO;IACV,oBAAC,OAAO,IAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe;QAClE,oBAAC,UAAU,IACV,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAC9D,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EACnD,SAAS,EAAE,MAAM,CAAC,cAAc,GAC/B,CACO;IACV,oBAAC,OAAO,IAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,sBAAsB;QACnE,oBAAC,UAAU,IACV,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,OAAO,EACvB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,CAAC,aAAa,EACxB,SAAS,EAAE,MAAM,CAAC,cAAc,GAC/B,CACO,CACC,CACZ,CAAC"}

package/lib/preview/ZoomController.module.css

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.zoomIconButton:disabled {
+    background: rgba(204, 204, 204, 0.2);
+}
+
+.zoomIconButton:disabled > svg {
+    background: unset;
+}
+
+.zoomIconButton > svg {
+    width: 1.25rem;
+	height: 1.25rem;
+}