@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/FileItem/PreUploadFileThumbnail/FileThumbnail.js

@@ -0,0 +1,61 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import { Image } from '@scaleflex/widget-common';
+import LinkHelper from '@scaleflex/widget-utils/lib/LinkHelper';
+import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
+import { useExplorer } from '../../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileThumbnail = function FileThumbnail(_ref) {
+  var _file$data;
+  var file = _ref.file,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    isUploadsPanel = _ref.isUploadsPanel,
+    previewUrl = _ref.previewUrl;
+  var _useExplorer = useExplorer(),
+    isDevEnv = _useExplorer.isDevEnv,
+    container = _useExplorer.container;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    fallbackIcon = _useState2[0],
+    setFallbackIcon = _useState2[1];
+  var itemPreview = new LinkHelper({
+    href: previewUrl || ''
+  }).appendSearchParams({
+    org_if_sml: 1,
+    w: 400,
+    h: 300
+  });
+  var fileIcon = file.preview || file.thumbnail || ((_file$data = file.data) === null || _file$data === void 0 ? void 0 : _file$data.thumbnail) || !isUploadsPanel && itemPreview || getItemIcon({
+    fileOrFolder: file,
+    forceIcon: true,
+    showVideoGif: isUploadsPanel
+  });
+  var _onError = function _onError(error) {
+    setFallbackIcon(getFormattedPreviewUrl({
+      url: getItemIcon({
+        fileOrFolder: file,
+        forceIcon: true
+      }),
+      isDevEnv: isDevEnv,
+      containerToken: container
+    }));
+    if (onError) {
+      onError(error);
+    }
+  };
+  return /*#__PURE__*/_jsx(Image, {
+    className: "filerobot-Explorer-Item-fileThumbnail",
+    alt: file.name,
+    src: fallbackIcon || fileIcon,
+    onLoad: onLoad,
+    onError: _onError
+  });
+};
+export default FileThumbnail;

package/lib/components/FileItem/PreUploadFileThumbnail/PreUploadFileThumbnail.styled.js

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+var PreUploadFileThumbnail = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 3px 0 0 0;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px 4px;\n"])));
+var Styled = {
+  PreUploadFileThumbnail: PreUploadFileThumbnail
+};
+export default Styled;

package/lib/components/FileItem/PreUploadFileThumbnail/index.js

@@ -0,0 +1,27 @@
+import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import FileThumbnail from './FileThumbnail';
+import { useExplorer } from '../../../hooks';
+import Styled from './PreUploadFileThumbnail.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+function PreUploadFileThumbnail(_ref) {
+  var file = _ref.file,
+    isUploadsPanel = _ref.isUploadsPanel;
+  var _useExplorer = useExplorer(),
+    isDevEnv = _useExplorer.isDevEnv,
+    container = _useExplorer.container;
+  var previewUrl = getFormattedPreviewUrl({
+    url: getFileLink(file),
+    isDevEnv: isDevEnv,
+    containerToken: container
+  });
+  return /*#__PURE__*/_jsx(Styled.PreUploadFileThumbnail, {
+    className: "filerobot-Explorer-Item-previewInnerWrap",
+    children: /*#__PURE__*/_jsx(FileThumbnail, {
+      file: file,
+      isUploadsPanel: isUploadsPanel,
+      previewUrl: previewUrl
+    })
+  });
+}
+export default PreUploadFileThumbnail;

package/lib/components/FileItem/index.js

@@ -0,0 +1,164 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, memo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { Cross } from '@scaleflex/icons';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { selectUploadCapabilities } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { useContextMenu } from '@scaleflex/widget-core/lib/hooks';
+import { CONTEXTMENU_MODES } from '@scaleflex/widget-utils/lib/constants';
+import checkConnection from '@scaleflex/widget-utils/lib/checkConnection';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import PreUploadFileThumbnail from './PreUploadFileThumbnail';
+import FileInfo from './FileInfo';
+import Styled from './FileItem.styled';
+import { useExplorer } from '../../hooks';
+import { selectCurrentFileByIdOrUuid } from '../../slices/files.slice';
+import { fileWindowUpdated } from '../../slices/panels.slice';
+import FileUploadTopOptions from './FileUploadTopOptions';
+import FileTopOptions from '../AssetsList/GridView/FilesSection/FileOverlayOptions';
+
+// TODO: Since this is the same as the one of GridLi, also this is used in both upload & share we should make it common/reusable component.
+// and reuse it in the other places.
+// Same for folder for future use-cases.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FileItem = function FileItem(_ref) {
+  var _originalFile$respons, _originalFile$respons2;
+  var fileIdOrUuid = _ref.fileIdOrUuid,
+    role = _ref.role,
+    isUploadsPanel = _ref.isUploadsPanel,
+    onRemove = _ref.onRemove,
+    checkIsPrivateVisibilityFile = _ref.checkIsPrivateVisibilityFile,
+    showFloatyButton = _ref.showFloatyButton,
+    hideTopOptions = _ref.hideTopOptions,
+    ariaLabel = _ref.ariaLabel;
+  var dispatch = useDispatch();
+  var toggleContextMenu = useContextMenu();
+  var originalFile = useSelector(function (state) {
+    return selectCurrentFileByIdOrUuid(state, fileIdOrUuid);
+  });
+  var _useSelector = useSelector(selectUploadCapabilities),
+    allowResumableUploads = _useSelector.allowResumableUploads,
+    allowIndividualCancellation = _useSelector.allowIndividualCancellation;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    handleRequestThumbnail = _useExplorer.handleRequestThumbnail,
+    handleCancelThumbnail = _useExplorer.handleCancelThumbnail;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFileShareNotAllowed = _useState2[0],
+    setIsFileShareNotAllowed = _useState2[1];
+  var uploadedFile = originalFile === null || originalFile === void 0 ? void 0 : (_originalFile$respons = originalFile.response) === null || _originalFile$respons === void 0 ? void 0 : (_originalFile$respons2 = _originalFile$respons.body) === null || _originalFile$respons2 === void 0 ? void 0 : _originalFile$respons2.file;
+  var afterOrBeforeUploadFile = uploadedFile ? _objectSpread(_objectSpread({}, uploadedFile), {}, {
+    idBeforeUpload: originalFile.id
+  }) : originalFile;
+  useEffect(function () {
+    if (!(originalFile !== null && originalFile !== void 0 && originalFile.preview)) {
+      handleRequestThumbnail(originalFile);
+    }
+
+    // Since it is not possible to change the visibility while u are in share dialog, then the useEffect triggered on first render only is enough.
+    if (!isUploadsPanel && typeof checkIsPrivateVisibilityFile === 'function' && checkIsPrivateVisibilityFile(afterOrBeforeUploadFile)) {
+      setIsFileShareNotAllowed(true);
+    }
+    return function () {
+      if (!(originalFile !== null && originalFile !== void 0 && originalFile.preview)) {
+        handleCancelThumbnail(originalFile);
+      }
+    };
+  }, []);
+  if (!originalFile) {
+    return;
+  }
+  var isOnline = checkConnection();
+  var error = isUploadsPanel && !isOnline;
+  var triggerContextMenu = function triggerContextMenu(event, file) {
+    return toggleContextMenu({
+      event: event,
+      items: file.idBeforeUpload ? [file.idBeforeUpload] : [],
+      itemsPropName: 'filesIdsBeforeUpload',
+      filesUuids: [file.uuid || file.id],
+      mode: isUploadableFile(afterOrBeforeUploadFile) ? CONTEXTMENU_MODES.BEFORE_UPLOAD : CONTEXTMENU_MODES.FILE
+    });
+  };
+  var renderFileStatusLabel = function renderFileStatusLabel() {
+    if (error) return i18n('mutualizedUploadError');
+    if (isFileShareNotAllowed) return i18n('mutualizedNotShareable');
+    return i18n('mutualizedUploadWarning');
+  };
+  var openFileWindow = function openFileWindow(event) {
+    if (event.target.tagName === 'INPUT') return;
+    dispatch(fileWindowUpdated(afterOrBeforeUploadFile.uuid || afterOrBeforeUploadFile.id));
+  };
+  var openContextMenuIfNotUploading = function openContextMenuIfNotUploading(e) {
+    return !isUploadsPanel ? ignoreEvent(e) : triggerContextMenu(e, afterOrBeforeUploadFile);
+  };
+  var explorerItemClass = classNames({
+    'is-error': !!error,
+    'is-resumable': allowResumableUploads,
+    'is-noIndividualCancellation': !allowIndividualCancellation
+  });
+  return /*#__PURE__*/_jsxs(Styled.FileItem, {
+    id: "filerobot_".concat(afterOrBeforeUploadFile.uuid || afterOrBeforeUploadFile.id),
+    role: role,
+    "aria-label": ariaLabel,
+    className: explorerItemClass,
+    error: Boolean(error),
+    warning: isFileShareNotAllowed,
+    showFloatyButton: showFloatyButton,
+    onDoubleClick: openFileWindow,
+    onContextMenu: openContextMenuIfNotUploading,
+    children: [!hideTopOptions && (uploadedFile ? /*#__PURE__*/_jsx(FileTopOptions, {
+      file: afterOrBeforeUploadFile,
+      onContextMenu: openContextMenuIfNotUploading,
+      toggleFileWindow: openFileWindow
+    }) : /*#__PURE__*/_jsx(FileUploadTopOptions, {
+      file: originalFile,
+      openFileWindow: openFileWindow,
+      onRemove: onRemove
+    })), /*#__PURE__*/_jsxs(Styled.UploadInfoBar, {
+      error: Boolean(error),
+      warning: isFileShareNotAllowed,
+      children: [renderFileStatusLabel(), /*#__PURE__*/_jsx(TooltipV2, {
+        title: isFileShareNotAllowed ? i18n('explorerPrivateFileShareNotAllowed') : i18n('mutualizedUnknownErrorMessage'),
+        children: /*#__PURE__*/_jsx(Styled.InfoIcon, {
+          size: 12
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Styled.FloatyButton, {
+      onClick: function onClick() {
+        return onRemove(originalFile);
+      },
+      hide: !showFloatyButton,
+      color: "primary",
+      children: /*#__PURE__*/_jsx(Cross, {
+        size: 8.8
+      })
+    }), /*#__PURE__*/_jsx(Styled.FileItemIconWrapper, {
+      children: /*#__PURE__*/_jsx(PreUploadFileThumbnail, {
+        file: originalFile,
+        isUploadsPanel: isUploadsPanel
+      })
+    }), /*#__PURE__*/_jsx(FileInfo, {
+      file: afterOrBeforeUploadFile,
+      handleContextMenuToggle: openContextMenuIfNotUploading,
+      renameOnDblClick: true,
+      showMenuBtn: true,
+      showMeta: true,
+      noTruncate: true
+    })]
+  });
+};
+export default /*#__PURE__*/memo(FileItem);

package/lib/components/FileWindowPanel/Body/ActionButtons.js

@@ -0,0 +1,70 @@
+import { FitScreen, PositionCenter } from '@scaleflex/icons';
+import { BTN_ZOOM_RATIO_PERCENTAGE, DEFAULT_ZOOM_RATIO, MAX_ZOOM_RATIO } from './Body.constants';
+import Styled from './Body.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ActionButtons = function ActionButtons(_ref) {
+  var isImageOrPdf = _ref.isImageOrPdf,
+    zoomRatio = _ref.zoomRatio,
+    setZoomRatio = _ref.setZoomRatio,
+    setIsFileTabsHidden = _ref.setIsFileTabsHidden,
+    isFileTabsHidden = _ref.isFileTabsHidden,
+    useAssetsPicker = _ref.useAssetsPicker;
+  var zoomIn = function zoomIn() {
+    var nextZoomRatio = Math.min(zoomRatio + BTN_ZOOM_RATIO_PERCENTAGE, MAX_ZOOM_RATIO);
+    setZoomRatio(nextZoomRatio);
+  };
+  var zoomOut = function zoomOut() {
+    var nextZoomRatio = Math.min(Math.max(zoomRatio - BTN_ZOOM_RATIO_PERCENTAGE, BTN_ZOOM_RATIO_PERCENTAGE));
+    setZoomRatio(nextZoomRatio);
+  };
+  var resetZoom = function resetZoom() {
+    setZoomRatio(DEFAULT_ZOOM_RATIO);
+  };
+  return /*#__PURE__*/_jsxs(Styled.AssetsActionBtns, {
+    isVisible: isImageOrPdf,
+    children: [/*#__PURE__*/_jsx(Styled.FooterActionBtn, {
+      size: "lg",
+      color: "basic",
+      onClick: resetZoom,
+      isVisible: isImageOrPdf,
+      padding: "11px",
+      children: /*#__PURE__*/_jsx(PositionCenter, {
+        size: 18
+      })
+    }), /*#__PURE__*/_jsxs(Styled.FooterZoomBtns, {
+      isVisible: isImageOrPdf,
+      children: [/*#__PURE__*/_jsx(Styled.FooterActionBtn, {
+        size: "lg",
+        color: "basic",
+        onClick: zoomOut,
+        isVisible: isImageOrPdf,
+        children: /*#__PURE__*/_jsx(Styled.IconBox, {
+          children: /*#__PURE__*/_jsx(Styled.MinusOutline, {})
+        })
+      }), /*#__PURE__*/_jsxs("span", {
+        onClick: resetZoom,
+        children: [parseInt(zoomRatio * 100), "%"]
+      }), /*#__PURE__*/_jsx(Styled.FooterActionBtn, {
+        size: "lg",
+        color: "basic",
+        onClick: zoomIn,
+        isVisible: isImageOrPdf,
+        children: /*#__PURE__*/_jsx(Styled.IconBox, {
+          children: /*#__PURE__*/_jsx(Styled.PlusOutline, {})
+        })
+      })]
+    }), useAssetsPicker ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(Styled.FooterActionBtn, {
+      size: "lg",
+      color: "basic",
+      isVisible: isImageOrPdf,
+      onClick: function onClick() {
+        return setIsFileTabsHidden(!isFileTabsHidden);
+      },
+      padding: "11px",
+      children: /*#__PURE__*/_jsx(FitScreen, {
+        size: 18
+      })
+    })]
+  });
+};
+export default ActionButtons;

package/lib/components/FileWindowPanel/Body/Body.constants.js

@@ -0,0 +1,5 @@
+export var DEFAULT_ZOOM_RATIO = 1;
+export var BTN_ZOOM_RATIO_PERCENTAGE = 0.25;
+export var WHEEL_ZOOM_RATIO_PERCENTAGE = 0.1;
+export var MIN_ZOOM_RATIO = 0.1;
+export var MAX_ZOOM_RATIO = 5;

package/lib/components/FileWindowPanel/Body/Body.styled.js

@@ -0,0 +1,196 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { IconButton, Button, Input, Skeleton as SfxSkeleton } from '@scaleflex/ui/core';
+import { ArrowBottom, MinusOutline as SfxMinusOutline, NoImages, PlusOutline as SfxPlusOutline } from '@scaleflex/icons';
+import { FV, PC } from '@scaleflex/widget-common';
+import { FILE_TYPES_AND_ICONS } from '@scaleflex/widget-utils/lib/constants';
+var Container = styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  height: 100%;\n  flex-direction: column;\n  width: 60%;\n\n  ", " {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n\n  ", " & {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n\n  ", " & {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n"])), theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
+});
+var FilePaginationButtons = styled(IconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  padding: 10px;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.Accent_1_8_Opacity];
+}, function (_ref3) {
+  var left = _ref3.left;
+  return left ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 12px;\n  "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    right: 12px;\n  "])));
+});
+var Body = styled.div(function (_ref4) {
+  var theme = _ref4.theme,
+    $hidePagination = _ref4.$hidePagination,
+    $fullWidth = _ref4.$fullWidth,
+    isFileLoading = _ref4.isFileLoading;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  height: 250px;\n  width: ", " ;\n  margin: auto;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  -webkit-user-drag: none;\n  background-color: ", ";\n\n  &:hover {\n    ", " {\n      display: ", ";\n    }\n  }\n\n  ", " {\n    width: 100%;\n  }\n\n  ", " & {\n    width: 100%;\n  }\n\n  ", " & {\n    width: 100%;\n  }\n"])), $fullWidth ? '100%' : 'calc(100% - (24px * 2))', !isFileLoading && !$fullWidth ? theme.palette[PC.BackgroundHover] : 'none', FilePaginationButtons, $hidePagination ? 'none' : 'inline-flex', theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
+});
+var Skeleton = styled(SfxSkeleton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: ", ";\n  visibility: visible;\n  opacity: 1;\n  transition: all 150ms ease-out;\n  z-index: 1000;\n\n  ", "\n"])), function (_ref5) {
+  var absolutePosition = _ref5.absolutePosition;
+  return absolutePosition ? 'absolute' : 'relative';
+}, function (_ref6) {
+  var $hidden = _ref6.$hidden;
+  return $hidden && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n  "])));
+});
+
+// TODO: Remove Navigation Side and Center Icons when UI implement button
+var NavigationSideIcon = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 6px;\n  height: 10px;\n  background-color: ", ";\n  border-radius: 1.33333px;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette[PC.IconsPrimaryHover];
+});
+var NavigationCenterIcon = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 16px;\n  background: ", ";\n  margin: 0px 2px;\n  border-radius: 2.66667px;\n"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var IconWrap = styled.div(function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    align-self: center;\n    justify-content: center;\n    background: ".concat(palette[PC.Extra_0_7_Overlay], ";\n    width: 80px;\n    height: 80px;\n    border-radius: 50px;\n    color:").concat(palette[PC.ButtonPrimaryText], ";\n    position: absolute;\n    left: calc(50% - 80px/2);\n    top: calc(50% - 80px/2);\n\n    &:hover {\n      cursor: pointer;\n    }\n  ");
+});
+var BodyFile = styled.img.attrs(function (_ref10) {
+  var _ref10$$zoomRatio = _ref10.$zoomRatio,
+    $zoomRatio = _ref10$$zoomRatio === void 0 ? 1 : _ref10$$zoomRatio,
+    $pan = _ref10.$pan,
+    $isPanEnabled = _ref10.$isPanEnabled,
+    $isTransparencySupported = _ref10.$isTransparencySupported;
+  return {
+    style: {
+      transform: "scale(".concat($zoomRatio, ") translate(").concat($pan.x, "px, ").concat($pan.y, "px)"),
+      transition: $isPanEnabled ? 'none' : 'transform 150ms',
+      backgroundImage: $isTransparencySupported ? "url(".concat(FILE_TYPES_AND_ICONS.chess_bg, ")") : ''
+    }
+  };
+})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\n  max-width: 100%;\n  max-height: 100%;\n  user-select: none;\n  touch-action: none;\n  opacity: 1;\n  visibility: visible;\n  transition: all 150ms ease-out;\n  -webkit-user-drag: none;\n\n  ", ";\n"])), function (_ref11) {
+  var $hidden = _ref11.$hidden;
+  return $hidden && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n  "])));
+});
+var BodyFavBtn = styled(IconButton)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 30px;\n  right: 24px;\n  border: none;\n  padding: 8px;\n  border-radius: 50%;\n  background: ", ";\n  color: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme,
+    $isActive = _ref12.$isActive;
+  return theme.palette[PC[$isActive ? 'ButtonPrimaryText' : 'Extra_0_7_Overlay']];
+}, function (_ref13) {
+  var theme = _ref13.theme,
+    $isActive = _ref13.$isActive;
+  return theme.palette[PC[$isActive ? 'LinkPressed' : 'ButtonPrimaryText']];
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.palette[PC.Extra_0_9_Overlay];
+});
+var Footer = styled.div(function (_ref15) {
+  var theme = _ref15.theme,
+    $isPdfPreview = _ref15.$isPdfPreview;
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  bottom: 0;\n  height: 60px;\n  width: 100%;\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  justify-content: ", ";\n  padding: ", ";\n\n  ", " {\n    height: 52px;\n    border-bottom: 1px solid ", ";\n  }\n\n  ", " & {\n    height: 52px;\n    border-bottom: 1px solid ", ";\n  }\n\n  ", " & {\n    height: 52px;\n    border-bottom: 1px solid ", ";\n  }\n"])), $isPdfPreview ? 'none' : 'flex', function (_ref16) {
+    var $centered = _ref16.$centered;
+    return $centered ? 'center' : 'space-between';
+  }, function (_ref17) {
+    var $isPdfPreview = _ref17.$isPdfPreview;
+    return $isPdfPreview ? '0 calc(24px - 10px)' : '0 13px';
+  }, theme.breakpoints.down('lg'), theme.palette[PC.BordersSecondary], theme.breakpoints.classes.md, theme.palette[PC.BordersSecondary], theme.breakpoints.classes.sm, theme.palette[PC.BordersSecondary]);
+});
+var VariantsButton = styled(Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  visibility: ", ";\n  display: ", ";\n\n  .SfxButton-Label {\n    max-width: 100px;\n  }\n"])), function (_ref18) {
+  var isVisible = _ref18.isVisible;
+  return isVisible ? 'visible' : 'hidden';
+}, function (_ref19) {
+  var isPdfPreviewSupported = _ref19.isPdfPreviewSupported;
+  return isPdfPreviewSupported ? 'none' : 'flex';
+});
+var VariantsButtonArrowBottom = styled(ArrowBottom)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  transition: 0.2s all ease-in-out;\n  ", "\n"])), function (_ref20) {
+  var $isRotated = _ref20.$isRotated;
+  return $isRotated ? 'transform: rotate(-180deg);' : '';
+});
+var AssetsActionBtns = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  overflow-x: auto;\n"])), function (_ref21) {
+  var isVisible = _ref21.isVisible;
+  return isVisible ? '100%' : '80px';
+});
+var FooterZoomBtns = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 4px;\n  height: 32px;\n\n  span {\n    ", ";\n    color: ", ";\n    padding: 0 8px;\n    cursor: pointer;\n  }\n"])), function (_ref22) {
+  var isVisible = _ref22.isVisible;
+  return isVisible ? 'flex' : 'none';
+}, function (_ref23) {
+  var theme = _ref23.theme;
+  return theme.typography.font[FV.LabelMedium];
+}, function (_ref24) {
+  var theme = _ref24.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var FooterActionBtn = styled(IconButton)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n\n  &:hover {\n    svg {\n      color: ", ";\n    }\n  }\n\n  svg {\n    color: ", ";\n    flex-shrink: 0;\n  }\n"])), function (_ref25) {
+  var _ref25$padding = _ref25.padding,
+    padding = _ref25$padding === void 0 ? false : _ref25$padding;
+  return padding && "padding: ".concat(padding, ";");
+}, function (_ref26) {
+  var isVisible = _ref26.isVisible;
+  return isVisible ? 'inline-flex' : 'none';
+}, function (_ref27) {
+  var theme = _ref27.theme;
+  return theme.palette[PC.IconsPrimaryHover];
+}, function (_ref28) {
+  var theme = _ref28.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var MinusOutline = styled(SfxMinusOutline)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  width: 13.64px !important;\n  height: 1.5px !important;\n  flex-shrink: 0;\n"])));
+var PlusOutline = styled(SfxPlusOutline)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: 13.5px !important;\n  height: 13.5px !important;\n  flex-shrink: 0;\n"])));
+var PdfControlsWrapper = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n"])));
+var PagesInput = styled(Input)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  width: 48px;\n"])));
+var NumPagesLabel = styled.p(function (_ref29) {
+  var _ref29$theme = _ref29.theme,
+    typography = _ref29$theme.typography,
+    palette = _ref29$theme.palette;
+  return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  ", ";\n  margin: 0;\n  white-space: nowrap;\n  color: ", ";\n"])), typography.font[FV.LabelMedium], palette[PC.TextSecondary]);
+});
+var FilesNavigationButton = styled(IconButton)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  margin: auto;\n"])));
+var VideoWrapper = styled.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"])));
+var VideoActions = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
+var CanvasWrapper = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  > div {\n    justify-content: center;\n  }\n"])));
+var PlaceholderWrapper = styled.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"])));
+var PlaceholderTitle = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  margin: 8px 0;\n  ", ";\n  color: ", ";\n"])), function (_ref30) {
+  var theme = _ref30.theme;
+  return theme.typography.font[FV.LabelExtraLarge];
+}, function (_ref31) {
+  var theme = _ref31.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var PlaceholderHint = styled.p(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  margin: 0;\n"])), function (_ref32) {
+  var theme = _ref32.theme;
+  return theme.typography.font[FV.TextLarge];
+}, function (_ref33) {
+  var theme = _ref33.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var PlaceholderIcon = styled(NoImages)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref34) {
+  var theme = _ref34.theme;
+  return theme.palette[PC.IconsPlaceholder];
+});
+var RetryButton = styled.button(function (_ref35) {
+  var palette = _ref35.theme.palette;
+  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    border: 0;\n    cursor: pointer;\n    background: none;\n    color: ", ";\n  "])), palette[PC.AccentStateless]);
+});
+var IconBox = styled.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var Styled = {
+  Container: Container,
+  Body: Body,
+  Skeleton: Skeleton,
+  BodyFile: BodyFile,
+  IconWrap: IconWrap,
+  BodyFavBtn: BodyFavBtn,
+  Footer: Footer,
+  AssetsActionBtns: AssetsActionBtns,
+  FooterZoomBtns: FooterZoomBtns,
+  FooterActionBtn: FooterActionBtn,
+  VariantsButton: VariantsButton,
+  VariantsButtonArrowBottom: VariantsButtonArrowBottom,
+  PdfControlsWrapper: PdfControlsWrapper,
+  PagesInput: PagesInput,
+  NumPagesLabel: NumPagesLabel,
+  NavigationCenterIcon: NavigationCenterIcon,
+  NavigationSideIcon: NavigationSideIcon,
+  MinusOutline: MinusOutline,
+  PlusOutline: PlusOutline,
+  FilesNavigationButton: FilesNavigationButton,
+  FilePaginationButtons: FilePaginationButtons,
+  VideoActions: VideoActions,
+  VideoWrapper: VideoWrapper,
+  CanvasWrapper: CanvasWrapper,
+  PlaceholderWrapper: PlaceholderWrapper,
+  IconBox: IconBox,
+  PlaceholderTitle: PlaceholderTitle,
+  PlaceholderHint: PlaceholderHint,
+  PlaceholderIcon: PlaceholderIcon,
+  RetryButton: RetryButton
+};
+export default Styled;