oolib 2.63.1 → 2.63.2

package/dist/components/ImageInput/comps/GallerySlider/comps/SliderShell/styled.js

@@ -0,0 +1,49 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledXOfY = exports.StyledCaretRight = exports.StyledCaretLeft = exports.StyledFlexItem = exports.StyledFlexWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../../../themes");
+var mixins_1 = require("../../../../../../themes/mixins");
+exports.StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow: hidden;\n  position: relative;\n"], ["\n  display: flex;\n  overflow: hidden;\n  position: relative;\n"])));
+exports.StyledFlexItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n  width: 100%;\n  position: relative;\n  margin-left: ", ";\n  ", ";\n"], ["\n  flex-shrink: 0;\n  width: 100%;\n  position: relative;\n  margin-left: ", ";\n  ", ";\n"])), function (_a) {
+    var marginLeft = _a.marginLeft;
+    return marginLeft;
+}, (0, mixins_1.transition)("margin-left"));
+var caretCommonCss = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  z-index: 100;\n  top: ", ";\n"], ["\n  position: absolute;\n  cursor: pointer;\n  z-index: 100;\n  top: ", ";\n"])), function (_a) {
+    var imageMinusCaptionHeight = _a.imageMinusCaptionHeight;
+    return imageMinusCaptionHeight && (imageMinusCaptionHeight / 2) + 'px';
+});
+exports.StyledCaretLeft = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  transform: translateY(-50%);\n  left: 0;\n  \n"], ["\n  ", ";\n  transform: translateY(-50%);\n  left: 0;\n  \n"])), caretCommonCss);
+exports.StyledCaretRight = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  transform: translateY(-50%);\n  right: 0;\n"], ["\n  ", ";\n  transform: translateY(-50%);\n  right: 0;\n"])), caretCommonCss);
+exports.StyledXOfY = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  width: 4rem;\n  left: 50%;\n  transform: translate(-50%, -100%);        \n  text-align: center;\n"], ["\n  position: absolute;\n  top: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  width: 4rem;\n  left: 50%;\n  transform: translate(-50%, -100%);        \n  text-align: center;\n"])), function (_a) {
+    var imageMinusCaptionHeight = _a.imageMinusCaptionHeight;
+    return imageMinusCaptionHeight && (imageMinusCaptionHeight - 10) + 'px';
+}, themes_1.colors.greyColor10, themes_1.colors.white_opacity80);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/ImageInput/comps/GallerySlider/index.d.ts

@@ -0,0 +1,3 @@
+export default GallerySlider;
+declare function GallerySlider(): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/comps/GallerySlider/index.js

@@ -0,0 +1,69 @@
+"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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ImageInputContext_1 = require("../../ImageInputContext");
+var Placeholder_1 = __importDefault(require("../Placeholder"));
+var styled_1 = require("./styled");
+var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
+var SingleImageInput_1 = require("../SingleImageInput");
+var GalleryThumbnails_1 = require("./comps/GalleryThumbnails");
+var SliderShell_1 = require("./comps/SliderShell");
+var GallerySlider = function () {
+    var _a = (0, ImageInputContext_1.useImageInputContext)(), value = _a.value, noOfImagesUploading = _a.noOfImagesUploading, invert = _a.invert;
+    var _b = (0, react_1.useState)(0), activeIdx = _b[0], setActiveIdx = _b[1];
+    (0, react_1.useEffect)(function () { return setActiveIdx(0); }, [value === null || value === void 0 ? void 0 : value.length]); // reset the activeidx with uploading new images(focus on the newly added Images)
+    var uploadingPlaceholders = (0, makeArrayFromLength_1.makeArrayFromLength)(noOfImagesUploading).map(function (d) { return undefined; });
+    return (react_1.default.createElement(styled_1.StyledGallery, { invert: invert },
+        react_1.default.createElement(GalleryThumbnails_1.GalleryThumbnails, { setActiveIdx: setActiveIdx, activeIdx: activeIdx }),
+        (value === null || value === void 0 ? void 0 : value.length) > 0 ? (react_1.default.createElement(SliderShell_1.SliderShell, { value: __spreadArray(__spreadArray([], uploadingPlaceholders, true), value, true), activeIdx: activeIdx, setActiveIdx: setActiveIdx, render: function (v) { return (react_1.default.createElement(SingleImageInput_1.SingleImageInput, __assign({}, {
+                value: v,
+                // key: v?.publicUrl || idx, //cuz this is done inside the SliderShell
+            }))); } })) : (react_1.default.createElement(Placeholder_1.default, null))));
+};
+exports.default = GallerySlider;

package/dist/components/ImageInput/comps/GallerySlider/styled.d.ts

@@ -0,0 +1,3 @@
+export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledFlexItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledGallery: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/ImageInput/comps/GallerySlider/styled.js

@@ -0,0 +1,23 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledGallery = exports.StyledFlexItem = exports.StyledFlexWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var themes_1 = require("../../../../themes");
+exports.StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow: hidden;\n"], ["\n  display: flex;\n  overflow: hidden;\n"])));
+exports.StyledFlexItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n  width: 100%;\n  margin-left: ", ";\n  ", ";\n"], ["\n  flex-shrink: 0;\n  width: 100%;\n  margin-left: ", ";\n  ", ";\n"])), function (_a) {
+    var marginLeft = _a.marginLeft;
+    return marginLeft;
+}, (0, mixins_1.transition)("margin-left"));
+exports.StyledGallery = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-top: 1rem;\n  border-top: 2px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n"], ["\n  padding-top: 1rem;\n  border-top: 2px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5;
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/ImageInput/comps/ImageEditor/comps/ConfirmDeleteModal/index.d.ts

@@ -0,0 +1,6 @@
+export function ConfirmDeleteModal({ showDeleteImageModal, setShowDeleteImageModal, handleDeleteSingleImage }: {
+    showDeleteImageModal: any;
+    setShowDeleteImageModal: any;
+    handleDeleteSingleImage: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/comps/ImageEditor/comps/ConfirmDeleteModal/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDeleteModal = void 0;
+var react_1 = __importDefault(require("react"));
+var ModalConfirm_1 = require("../../../../../Modals/derivedComps/ModalConfirm");
+var ConfirmDeleteModal = function (_a) {
+    var showDeleteImageModal = _a.showDeleteImageModal, setShowDeleteImageModal = _a.setShowDeleteImageModal, handleDeleteSingleImage = _a.handleDeleteSingleImage;
+    return (react_1.default.createElement(ModalConfirm_1.ModalConfirm, { title: "Are you sure you want to delete this image?", subTitle: "Once you delete an image it cannot be undone", onClose: function () {
+            setShowDeleteImageModal(false);
+        }, onConfirm: function () {
+            handleDeleteSingleImage({
+                publicUrl: showDeleteImageModal.publicUrl,
+            });
+            setShowDeleteImageModal(false);
+        } }));
+};
+exports.ConfirmDeleteModal = ConfirmDeleteModal;

package/dist/components/ImageInput/comps/ImageEditor/comps/EditToolbar/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
+ */
+export function EditToolbar({ setUnderEditImageData, underEditImageData, imageData, handleSingleImageDataChange, setImageUnderEdit, imageSpread, publicUrl, defaultImageSpread, omitEditorTools }: {
+    setUnderEditImageData: any;
+    underEditImageData: any;
+    imageData: any;
+    handleSingleImageDataChange: any;
+    setImageUnderEdit: any;
+    imageSpread: any;
+    publicUrl: any;
+    defaultImageSpread: any;
+    omitEditorTools: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/comps/ImageEditor/comps/EditToolbar/index.js

@@ -0,0 +1,96 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditToolbar = void 0;
+var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var changesMadeToUnderEditImageData_1 = require("../../utils/changesMadeToUnderEditImageData");
+var themes_1 = require("../../../../../../themes");
+var Buttons_1 = require("../../../../../Buttons");
+/**
+ * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
+ */
+function EditToolbar(_a) {
+    var setUnderEditImageData = _a.setUnderEditImageData, underEditImageData = _a.underEditImageData, imageData = _a.imageData, handleSingleImageDataChange = _a.handleSingleImageDataChange, setImageUnderEdit = _a.setImageUnderEdit, //comes from ImageInput context if used inside it
+    imageSpread = _a.imageSpread, publicUrl = _a.publicUrl, defaultImageSpread = _a.defaultImageSpread, omitEditorTools = _a.omitEditorTools;
+    return (react_1.default.createElement("div", { style: {
+            width: "100%",
+            padding: "0.5rem",
+            display: "flex",
+            justifyContent: "space-between",
+            backgroundColor: themes_1.colors.black_opacity80,
+        } },
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                gap: "0.5rem",
+            } },
+            !omitEditorTools.includes('cover_contain') &&
+                react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, S: true, iconSize: "M", onClick: function () {
+                        return setUnderEditImageData(function (prev) {
+                            var spreadToSet = imageSpread === "cover" ? "contain" : "cover";
+                            return __assign(__assign(__assign({}, prev), { imageSpread: spreadToSet }), (spreadToSet === "contain" ? { cropX: 0, cropY: 0 } : {}));
+                        });
+                    }, icon: imageSpread === "cover" ? "ArrowsIn" : "ArrowsOut" }),
+            !omitEditorTools.includes('rotate') &&
+                react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, icon: "ArrowsClockwise", iconSize: "M", S: true, onClick: function () {
+                        setUnderEditImageData(function (prev) { return (__assign(__assign({}, prev), { imageRotate: ((prev.imageRotate || 0) + 90) % 360 })); });
+                    } })),
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                gap: "0.5rem",
+            } },
+            (0, changesMadeToUnderEditImageData_1.changesMadeToUnderEditImageData)({
+                imageData: imageData,
+                underEditImageData: underEditImageData,
+                defaultImageSpread: defaultImageSpread,
+            }) && (react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { invert: true, S: true, onClick: function () {
+                        setUnderEditImageData((0, lodash_1.cloneDeep)(imageData));
+                    } }, "Revert"),
+                react_1.default.createElement(Buttons_1.ButtonPrimary, { invert: true, S: true, onClick: function () {
+                        handleSingleImageDataChange({
+                            publicUrl: publicUrl,
+                            imageData: __assign(__assign({}, underEditImageData), { caption: imageData.caption //cuz caption edits are made directly to imageData and we dont want underEditImageData to overwrite that.
+                             }),
+                        });
+                        setUnderEditImageData(undefined);
+                        setImageUnderEdit && setImageUnderEdit(false);
+                    } }, "Save"))),
+            react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, icon: "X", S: true, onClick: function () {
+                    setUnderEditImageData(undefined);
+                } }))));
+}
+exports.EditToolbar = EditToolbar;

package/dist/components/ImageInput/comps/ImageEditor/comps/ImageActionsMenu/index.d.ts

@@ -0,0 +1,12 @@
+export function ImageActionsMenu({ invert, setUnderEditImageData, setImageUnderEdit, setShowDeleteImageModal, publicUrl, imageData, handleReplaceSingleImage, handleUpload, isInRTE }: {
+    invert: any;
+    setUnderEditImageData: any;
+    setImageUnderEdit: any;
+    setShowDeleteImageModal: any;
+    publicUrl: any;
+    imageData: any;
+    handleReplaceSingleImage: any;
+    handleUpload: any;
+    isInRTE: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/comps/ImageEditor/comps/ImageActionsMenu/index.js

@@ -0,0 +1,80 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageActionsMenu = void 0;
+var lodash_1 = require("lodash");
+var ActionMenu_1 = require("../../../../../ActionMenu");
+var react_1 = __importStar(require("react"));
+var ImageActionsMenu = function (_a) {
+    var invert = _a.invert, setUnderEditImageData = _a.setUnderEditImageData, setImageUnderEdit = _a.setImageUnderEdit, setShowDeleteImageModal = _a.setShowDeleteImageModal, publicUrl = _a.publicUrl, imageData = _a.imageData, handleReplaceSingleImage = _a.handleReplaceSingleImage, handleUpload = _a.handleUpload, isInRTE = _a.isInRTE;
+    var inputRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement("div", { style: __assign({ padding: "0.5rem" }, (isInRTE ? { display: 'none' } : {})) },
+        react_1.default.createElement("input", { ref: inputRef, type: "file", accept: "image/*", onChange: function (e) {
+                handleUpload({
+                    files: e.target.files,
+                    publicUrlToReplace: publicUrl,
+                    callback: function (_a) {
+                        var successfulUploads = _a.successfulUploads;
+                        handleReplaceSingleImage({
+                            publicUrl: publicUrl,
+                            newImage: successfulUploads[0],
+                        });
+                        //pending
+                    },
+                });
+            }, style: { display: "none" } }),
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonPrimary", iconSize: "M", invert: invert, actions: [
+                {
+                    id: 'editImage',
+                    display: "Edit",
+                    onClick: function (e) {
+                        setUnderEditImageData((0, lodash_1.cloneDeep)(imageData));
+                        setImageUnderEdit && setImageUnderEdit(true); //comes from ImageInput context if used inside it
+                    },
+                },
+                {
+                    id: 'replaceImage',
+                    display: "Replace",
+                    onClick: function () { return inputRef.current.click(); },
+                },
+                {
+                    id: 'deleteImage',
+                    display: "Delete",
+                    onClick: function (e) { return setShowDeleteImageModal({ publicUrl: publicUrl }); },
+                },
+            ] })));
+};
+exports.ImageActionsMenu = ImageActionsMenu;

package/dist/components/ImageInput/comps/ImageEditor/comps/ImageReposManager/index.d.ts

@@ -0,0 +1,7 @@
+export function ImageReposManager({ fullWidthOrFullHeightImg, wrapperRef, renderedImageRef, setUnderEditImageData, }: {
+    fullWidthOrFullHeightImg: any;
+    wrapperRef: any;
+    renderedImageRef: any;
+    setUnderEditImageData: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/comps/ImageEditor/comps/ImageReposManager/index.js

@@ -0,0 +1,129 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageReposManager = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+/**
+ * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
+ */
+var ImageReposManager = function (_a) {
+    var fullWidthOrFullHeightImg = _a.fullWidthOrFullHeightImg, wrapperRef = _a.wrapperRef, renderedImageRef = _a.renderedImageRef, setUnderEditImageData = _a.setUnderEditImageData;
+    var repositionDirection = fullWidthOrFullHeightImg === "fullWidth"
+        ? "vertical"
+        : fullWidthOrFullHeightImg === "fullHeight" && "horizontal"; //temp
+    var getRenderedImageHeight = function (imgRef) { var _a; return (_a = imgRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight; };
+    var getRenderedImageWidth = function (imgRef) { var _a; return (_a = imgRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth; };
+    var _b = (0, react_1.useState)(null), initialY = _b[0], setInitialY = _b[1];
+    var _c = (0, react_1.useState)(0), yOffset = _c[0], setYOffset = _c[1];
+    var _d = (0, react_1.useState)(null), initialX = _d[0], setInitialX = _d[1];
+    var _e = (0, react_1.useState)(0), xOffset = _e[0], setXOffset = _e[1];
+    var _f = (0, react_1.useState)(false), mouseIsDown = _f[0], setMouseIsDown = _f[1];
+    var onMouseDown = function (e) {
+        setMouseIsDown(true);
+        var clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        var clientY = e.touches ? e.touches[0].clientY : e.clientY;
+        repositionDirection === "horizontal"
+            ? setInitialX(clientX - xOffset)
+            : setInitialY(clientY - yOffset);
+        /*
+        If this function has been triggered by a touch event,
+        then, temp disable html scroll, else the image reposition 'drag' wont work.
+    
+        This ofcourse doesnt hold true for desktop.
+        */
+        // if(ops.isTouchStart){
+        //   document //this is so that on mobile repos works, else, it ends up scrolling the page
+        //   .getElementsByTagName('html')[0]
+        //   .setAttribute('style', 'overflow: hidden')  
+        // // }
+    };
+    var onMouseUp = function () {
+        setMouseIsDown(false);
+        // document.getElementsByTagName('html')[0].removeAttribute('style')
+    };
+    var onMouseOver = function () { return setMouseIsDown(false); };
+    var repositionVertical = function (e) {
+        if (mouseIsDown === true) {
+            var clientY = e.touches ? e.touches[0].clientY : e.clientY;
+            var currentY_1 = clientY - initialY;
+            var renderedImgHeight_1 = getRenderedImageHeight(renderedImageRef);
+            // (imgHeight * wrapperRef.current.clientWidth) / imgWidth; //actual rendered height of image
+            var wrapperHeight = wrapperRef.current.clientHeight;
+            if (currentY_1 <= 0 && currentY_1 >= -(renderedImgHeight_1 - wrapperHeight)) {
+                setYOffset(currentY_1);
+                setUnderEditImageData(function (prev) { return (__assign(__assign({}, prev), { cropY: (currentY_1 / renderedImgHeight_1) * 100 })); });
+                // setImgPosY((currentY / renderedImgHeight) * 100); //finally set the y-translate in percentage so that it works in different container sizes
+            }
+        }
+    };
+    var repositionHorizontal = function (e) {
+        if (mouseIsDown === true) {
+            var clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            var currentX_1 = clientX - initialX;
+            var renderedImgWidth_1 = getRenderedImageWidth(renderedImageRef);
+            // (imgWidth * wrapperRef.current.clientHeight) / imgHeight; //actual rendered width of image
+            var wrapperWidth = wrapperRef.current.clientWidth;
+            if (currentX_1 <= 0 && currentX_1 >= -(renderedImgWidth_1 - wrapperWidth)) {
+                setXOffset(currentX_1);
+                setUnderEditImageData(function (prev) { return (__assign(__assign({}, prev), { cropX: (currentX_1 / renderedImgWidth_1) * 100 })); });
+                // setImgPosX((currentX / renderedImgWidth) * 100); //finally set the x-translate in percentage so that it works in different container sizes
+            }
+        }
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(styled_1.StyledHorLayoutGrid, null),
+            react_1.default.createElement(styled_1.StyledVerLayoutGrid, null)),
+        react_1.default.createElement("div", { style: {
+                top: "0",
+                cursor: "move",
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                touchAction: 'none' //very important, ensures that touch drag doesnt scroll the page
+            }, onMouseDown: function (e) { return onMouseDown(e); }, onTouchStart: function (e) { return onMouseDown(e); }, onMouseUp: onMouseUp, onTouchEnd: onMouseUp, onMouseOver: onMouseOver, onMouseMove: function (e) {
+                return repositionDirection === "vertical"
+                    ? repositionVertical(e)
+                    : repositionHorizontal(e);
+            }, onTouchMove: function (e) {
+                e.preventDefault();
+                repositionDirection === "vertical"
+                    ? repositionVertical(e)
+                    : repositionHorizontal(e);
+            } })));
+};
+exports.ImageReposManager = ImageReposManager;

package/dist/components/ImageInput/comps/ImageEditor/comps/ImageReposManager/styled.d.ts

@@ -0,0 +1,2 @@
+export const StyledHorLayoutGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledVerLayoutGrid: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/ImageInput/comps/ImageEditor/comps/ImageReposManager/styled.js

@@ -0,0 +1,14 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledVerLayoutGrid = exports.StyledHorLayoutGrid = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledHorLayoutGrid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    height : 33.3333%;\n    position: absolute;\n    border-top: 1px solid white;\n    border-bottom: 1px solid white;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n"], ["\n    width: 100%;\n    height : 33.3333%;\n    position: absolute;\n    border-top: 1px solid white;\n    border-bottom: 1px solid white;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n"])));
+exports.StyledVerLayoutGrid = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 33.3333%;\n    position: absolute;\n    height: 100%;\n    border-left: 1px solid white;\n    border-right: 1px solid white;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n"], ["\n    width: 33.3333%;\n    position: absolute;\n    height: 100%;\n    border-left: 1px solid white;\n    border-right: 1px solid white;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/ImageInput/comps/ImageEditor/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
+ */
+export function ImageEditor({ id, readOnly, value: imageData, defaultImageSpread, handleSingleImageDataChange, handleDeleteSingleImage, handleReplaceSingleImage, aspectRatio, invert, handleUpload, setImageUnderEdit, disableImageBorder, stretchToFullHeight, containerShape, omitEditorTools, enableCaptions, underEditImageData: _underEditImageData, setUnderEditImageData: _setUnderEditImageData, isInPopUp, isInRTE }: {
+    id: any;
+    readOnly: any;
+    value: any;
+    defaultImageSpread: any;
+    handleSingleImageDataChange: any;
+    handleDeleteSingleImage: any;
+    handleReplaceSingleImage: any;
+    aspectRatio: any;
+    invert: any;
+    handleUpload: any;
+    setImageUnderEdit: any;
+    disableImageBorder: any;
+    stretchToFullHeight: any;
+    containerShape: any;
+    omitEditorTools: any;
+    enableCaptions: any;
+    underEditImageData: any;
+    setUnderEditImageData: any;
+    isInPopUp: any;
+    isInRTE: any;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";