oolib 2.63.0 → 2.63.2

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

@@ -0,0 +1,5 @@
+export default Placeholder;
+declare function Placeholder({ aspectRatio: aspectRatioProp }: {
+    aspectRatio: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/comps/Placeholder/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;
+};
+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 ImageUploadShell_1 = __importDefault(require("../ImageUploadShell"));
+var AspectRatioShell_1 = __importDefault(require("../AspectRatioShell"));
+var styled_1 = require("./styled");
+var ImageInputContext_1 = require("../../ImageInputContext");
+var smallImageInputUIConditionsMet_1 = require("../ImageEditor/utils/smallImageInputUIConditionsMet");
+var icons_1 = require("../../../../icons");
+var themes_1 = require("../../../../themes");
+var Typo_1 = require("../../../Typo");
+var ProgressBar_1 = require("../../../LoadersAndProgress/ProgressBar");
+var ImageSquare = icons_1.icons.ImageSquare;
+var greyColor100 = themes_1.colors.greyColor100;
+var Placeholder = function (_a) {
+    var aspectRatioProp = _a.aspectRatio;
+    var _b = (0, ImageInputContext_1.useImageInputContext)(), aspectRatioFromContext = _b.aspectRatio, containerShape = _b.containerShape, uploadProgress = _b.uploadProgress, isLoading = _b.isLoading, dropzoneLabel = _b.dropzoneLabel, dropzoneSublabel = _b.dropzoneSublabel, stretchToFullHeight = _b.stretchToFullHeight, multiple = _b.multiple, showOptionalLabelInDropzone = _b.showOptionalLabelInDropzone, isRequired = _b.isRequired;
+    /** cuz in inlineimageinput we define an explicit aspect ratio for the placeholder only. since the image doesnt need an aspect ratio container */
+    var aspectRatio = aspectRatioProp || aspectRatioFromContext;
+    var styledPlaceholderWrapperRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), smallPlaceholderUI = _c[0], setSmallPlaceholderUI = _c[1];
+    var decideUIStyle = function () {
+        // This function makes sure that we have received actual width and height from AspectRatioShell comp, 
+        // onShellPrepared is the function that is getting called inside AspectRatioShell Comp to determine height and width of shell based on wrapper-Width and stretchToFullHeight prop inside <AspectRatioShell/> Comp
+        var width = styledPlaceholderWrapperRef.current.getBoundingClientRect().width;
+        if ((0, smallImageInputUIConditionsMet_1.smallImageInputUIConditionsMet)({ width: width, containerShape: containerShape })) {
+            setSmallPlaceholderUI(true);
+        }
+        else {
+            setSmallPlaceholderUI(false);
+        }
+    };
+    /**
+     * placeholder is shown only if:
+     * - no value is passed to the SingleImageInput
+     * - OR value is there, but the current image is being replaced
+     * In all other cases, i.e value exists and THIS image is not currently being replaced,
+     * then that image is rendered instead of placeholder
+     *
+     */
+    return (react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
+        aspectRatio: aspectRatio,
+        containerShape: containerShape,
+        stretchToFullHeight: stretchToFullHeight,
+        onShellPrepared: decideUIStyle,
+    }),
+        react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
+                ? uploadProgress + "%"
+                : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { multiple: multiple },
+            react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
+                react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel))) : (react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
+                react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && !isRequired
+                    ? "(optional)"
+                    : "")),
+                react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel)))))))));
+};
+exports.default = Placeholder;

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

@@ -0,0 +1,4 @@
+export const StyledPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const SstyledPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const SstyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,41 @@
+"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.SstyledPlaceholder = exports.SstyledPlaceholderWrapper = exports.StyledPlaceholder = exports.StyledPlaceholderWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../../../themes");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var greyColor100 = themes_1.colors.greyColor100;
+exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color : ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n"], ["\n  background-color : ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
+}, function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI;
+    return !smallPlaceholderUI && '1.2rem';
+});
+exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", " ;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", "; \n  padding: ", "; \n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", " ;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", "; \n  padding: ", "; \n  cursor: pointer;\n"])), function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI;
+    return !smallPlaceholderUI && "0.3rem";
+}, function (_a) {
+    var containerShape = _a.containerShape;
+    return containerShape === 'circle' ? '50%' : 'unset';
+}, greyColor100, function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI;
+    return !smallPlaceholderUI && "2rem";
+});
+//
+exports.SstyledPlaceholderWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color : ", ";\n  padding: 1.2rem;\n  width: 100%;\n  height: 100%;\n"], ["\n  background-color : ", ";\n  padding: 1.2rem;\n  width: 100%;\n  height: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
+});
+exports.SstyledPlaceholder = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"])), function (_a) {
+    var containerShape = _a.containerShape;
+    return containerShape === 'circle' ? '50%' : 'unset';
+}, greyColor100);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,4 @@
+export function SingleImageInput({ value, }: {
+    value: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,57 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleImageInput = void 0;
+var react_1 = __importDefault(require("react"));
+var ImageInputContext_1 = require("../../ImageInputContext");
+var ImageEditor_1 = require("../ImageEditor");
+var Placeholder_1 = __importDefault(require("../Placeholder"));
+/**
+ * PLEASE READ
+ *
+ * note value prop here is a single object with image data. NOT an array of objects.
+ * We are sticking to the word 'value' as opposed to something else, since this consistency
+ * will be required if the ImageEditor will be rendered at some point by the card generator
+ * or table generator etc.
+ *
+ */
+var SingleImageInput = function (_a) {
+    var value = _a.value;
+    var _b = (0, ImageInputContext_1.useImageInputContext)(), id = _b.id, aspectRatio = _b.aspectRatio, onChange = _b.onChange, handleUpload = _b.handleUpload, publicUrlBeingReplaced = _b.publicUrlBeingReplaced, readOnly = _b.readOnly, enableCaptions = _b.enableCaptions, invert = _b.invert, containerShape = _b.containerShape, defaultImageSpread = _b.defaultImageSpread, handleSingleImageDataChange = _b.handleSingleImageDataChange, handleDeleteSingleImage = _b.handleDeleteSingleImage, handleReplaceSingleImage = _b.handleReplaceSingleImage, setImageUnderEdit = _b.setImageUnderEdit, stretchToFullHeight = _b.stretchToFullHeight, disableImageBorder = _b.disableImageBorder, omitEditorTools = _b.omitEditorTools, isInRTE = _b.isInRTE;
+    //this helps for the ImageSlider, since ImageSlider uses SingleImageInput as child
+    var isBeingReplaced = publicUrlBeingReplaced && publicUrlBeingReplaced === (value === null || value === void 0 ? void 0 : value.publicUrl);
+    return !value || !value.publicUrl || isBeingReplaced ? (react_1.default.createElement(Placeholder_1.default, null)) : (react_1.default.createElement(ImageEditor_1.ImageEditor, __assign({}, {
+        id: id,
+        value: value,
+        aspectRatio: aspectRatio,
+        invert: invert,
+        containerShape: containerShape,
+        readOnly: readOnly,
+        onChange: onChange,
+        enableCaptions: enableCaptions,
+        defaultImageSpread: defaultImageSpread,
+        handleSingleImageDataChange: handleSingleImageDataChange,
+        handleDeleteSingleImage: handleDeleteSingleImage,
+        handleReplaceSingleImage: handleReplaceSingleImage,
+        handleUpload: handleUpload,
+        setImageUnderEdit: setImageUnderEdit,
+        stretchToFullHeight: stretchToFullHeight,
+        disableImageBorder: disableImageBorder,
+        omitEditorTools: omitEditorTools,
+        isInRTE: isInRTE
+    })));
+};
+exports.SingleImageInput = SingleImageInput;

package/dist/components/ImageInput/derivedComps/ImageDisplayInMask/index.d.ts

@@ -0,0 +1,6 @@
+export function ImageDisplayInMask({ maskAspectRatio, aspectRatio, ...imageInputProps }: {
+    [x: string]: any;
+    maskAspectRatio: any;
+    aspectRatio: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/derivedComps/ImageDisplayInMask/index.js

@@ -0,0 +1,53 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageDisplayInMask = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("../..");
+var decideIfFullWidthOrFullHeightImg_1 = require("../../comps/ImageEditor/utils/decideIfFullWidthOrFullHeightImg");
+var styled_1 = require("./styled");
+var ImageDisplayInMask = function (_a) {
+    /**
+     * now this is a complex one:
+     * our image renderer renders the image at a certain aspect ratio
+     * our thumbnail has a fixed aspect ratio of itself that is '1/1'
+     * This means that, if the imageeditor is more vertical, it needs to take full width within the thumbnail
+     * and full height if it is more horizontal.
+     * Basically what happens inside the imageEditor, needs to repeat itself over here..
+     *
+     */
+    var maskAspectRatio = _a.maskAspectRatio, aspectRatio = _a.aspectRatio, //this is the aspectRatio prop that is passed to ImageInput
+    imageInputProps = __rest(_a, ["maskAspectRatio", "aspectRatio"]);
+    var rendererStretch = (0, decideIfFullWidthOrFullHeightImg_1.decideIfFullWidthOrFullHeightImg)({
+        imgWidth: parseInt(aspectRatio.split("/")[0]),
+        imgHeight: parseInt(aspectRatio.split("/")[1]),
+        wrapperAspectRatio: maskAspectRatio,
+    });
+    return (react_1.default.createElement(styled_1.StyledAbsPosShellImageEditor, __assign({}, { rendererStretch: rendererStretch }),
+        react_1.default.createElement(__1.ImageInput, __assign({}, imageInputProps, { aspectRatio: aspectRatio, stretchToFullHeight: rendererStretch === "fullHeight" && true, readOnly: true, enableCaptions: false }))));
+};
+exports.ImageDisplayInMask = ImageDisplayInMask;

package/dist/components/ImageInput/derivedComps/ImageDisplayInMask/styled.d.ts

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

package/dist/components/ImageInput/derivedComps/ImageDisplayInMask/styled.js

@@ -0,0 +1,37 @@
+"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.StyledAbsPosShellImageEditor = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.StyledAbsPosShellImageEditor = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\nposition: absolute;\n  ", ";\n"], ["\nposition: absolute;\n  ", ";\n"])), function (_a) {
+    var rendererStretch = _a.rendererStretch;
+    return rendererStretch === 'fullHeight'
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n    "], ["\n      height: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n    "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n    "], ["\n      width: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n    "])));
+});
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,34 @@
+/**
+ * maybe should pass uploading placeholders for gallery thumbnails from gallery slider (just like its done for slider shell)
+ *
+ * stuff that needs to move to oolib if we wanna migrate this comp to oolib:
+ * - bannerContext
+ * - richInputHasValue (util)
+ * - RichTextEditor
+ */
+export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, showOptionalLabelInDropzone, isRequired, files, isInRTE }: {
+    id: any;
+    value: any;
+    onChange: any;
+    readOnly: any;
+    multiple: any;
+    stretchToFullHeight?: boolean;
+    aspectRatio?: string;
+    containerShape?: string;
+    invert: any;
+    enableCaptions?: boolean;
+    defaultImageSpread?: string;
+    allowedFormats?: string[];
+    folderName?: string;
+    bucketEnv: any;
+    formatConvertConfig: any;
+    dropzoneLabel: any;
+    dropzoneSublabel: any;
+    disableImageBorder?: boolean;
+    omitEditorTools?: any[];
+    showOptionalLabelInDropzone: any;
+    isRequired: any;
+    files: any;
+    isInRTE: any;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/index.js

@@ -0,0 +1,72 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageInput = void 0;
+var react_1 = __importDefault(require("react"));
+var GallerySlider_1 = __importDefault(require("./comps/GallerySlider"));
+var SingleImageInput_1 = require("./comps/SingleImageInput");
+var InlineImageInput_1 = require("./comps/InlineImageInput");
+var ImageInputContext_1 = require("./ImageInputContext");
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+/**
+ * maybe should pass uploading placeholders for gallery thumbnails from gallery slider (just like its done for slider shell)
+ *
+ * stuff that needs to move to oolib if we wanna migrate this comp to oolib:
+ * - bannerContext
+ * - richInputHasValue (util)
+ * - RichTextEditor
+ */
+function ImageInput(_a) {
+    var id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, multiple = _a.multiple, _b = _a.stretchToFullHeight, stretchToFullHeight = _b === void 0 ? false : _b, _c = _a.aspectRatio, aspectRatio = _c === void 0 ? '5/3' : _c, _d = _a.containerShape, containerShape = _d === void 0 ? 'rectangle' : _d, //alt = circle
+    invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'contain' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
+    showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
+    isInRTE = _a.isInRTE;
+    var props = arguments[0];
+    return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, __assign({}, {
+        value: value,
+        onChange: onChange,
+        id: id,
+        allowedFormats: allowedFormats,
+        formatConvertConfig: formatConvertConfig,
+        folderName: folderName,
+        bucketEnv: bucketEnv,
+        multiple: multiple,
+        aspectRatio: aspectRatio,
+        readOnly: readOnly,
+        enableCaptions: enableCaptions,
+        defaultImageSpread: defaultImageSpread,
+        invert: invert,
+        containerShape: containerShape,
+        stretchToFullHeight: stretchToFullHeight,
+        disableImageBorder: disableImageBorder,
+        omitEditorTools: omitEditorTools,
+        dropzoneLabel: dropzoneLabel || (multiple ? "Add Images ( max 10 )" : "Add Image"),
+        dropzoneSublabel: dropzoneSublabel ||
+            "Supports: ".concat(allowedFormats.map(function (f) { return f.toUpperCase(); }).join(", ")),
+        showOptionalLabelInDropzone: showOptionalLabelInDropzone,
+        isRequired: isRequired,
+        files: files,
+        isInRTE: isInRTE
+    }),
+        react_1.default.createElement("div", { style: { height: stretchToFullHeight ? "100%" : "auto", } },
+            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(__assign(__assign({}, props), { hideOptionalLabel: showOptionalLabelInDropzone })))),
+            multiple ? (react_1.default.createElement(GallerySlider_1.default, null)) : isInRTE
+                ? react_1.default.createElement(InlineImageInput_1.InlineImageInput, null)
+                : (react_1.default.createElement(SingleImageInput_1.SingleImageInput, { value: value && value[0] })))));
+}
+exports.ImageInput = ImageInput;
+;

package/dist/components/cards/CardContent/styled.js

@@ -37,6 +37,6 @@ var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObjec
 exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
 exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
 exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
-exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), greyColor5, greyColor5, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
+exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, greyColor5, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
 exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"])), flexColumn);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/cards/ListContent/styled.js

@@ -13,7 +13,7 @@ var themes_1 = require("../../../themes");
 var mixins_1 = require("../../../themes/mixins");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
-exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n  }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
+exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
 exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"])));
 exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"])));
 exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n"], ["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n"

package/dist/components/cards/comps/CardPlaceholder/index.js

@@ -1,4 +1,8 @@
 "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);
@@ -31,6 +35,9 @@ var react_1 = __importStar(require("react"));
 var cards_ph1_jpg_1 = __importDefault(require("../../../../assets/images/cards_ph1.jpg"));
 var cards_ph2_jpg_1 = __importDefault(require("../../../../assets/images/cards_ph2.jpg"));
 var cards_ph3_jpg_1 = __importDefault(require("../../../../assets/images/cards_ph3.jpg"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var StyledImg = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0.7;\n ", ";\n"], ["\n  opacity: 0.7;\n ", ";\n"])), (0, mixins_1.transition)('opacity'));
 var CardPlaceholder = function (_a) {
     var _b = _a.style, style = _b === void 0 ? { height: 'auto', width: '100%' } : _b;
     var placeholders = {
@@ -41,6 +48,7 @@ var CardPlaceholder = function (_a) {
     //useRef cuz we want this int only one time, which is on first mount.
     //else, everytime the parent comp rerenders, the placeholder changes, which looks quite bad
     var randomInt = (0, react_1.useRef)(Math.ceil(Math.random() * 3)); //will give us 1,2 or 3
-    return react_1.default.createElement("img", { style: style, src: placeholders["ph".concat(randomInt.current)] });
+    return react_1.default.createElement(StyledImg, { id: 'CardPlaceholder', style: style, src: placeholders["ph".concat(randomInt.current)] });
 };
 exports.CardPlaceholder = CardPlaceholder;
+var templateObject_1;

package/dist/components/cards/styled.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CSSTitleAnimationOnHover = exports.StyledTitleSpan = exports.StyledTitle = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
-var Typo_1 = require("../../components/Typo");
+var Typo_1 = require("../Typo");
 var utilsOolib_1 = require("../../utilsOolib");
 /** --- this bit handles the entire title underline hover animation --- */
 exports.StyledTitle = (0, styled_components_1.default)(Typo_1.SERIF_4_5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), (0, mixins_1.transition)("color"));

package/dist/index.d.ts

@@ -45,4 +45,6 @@ export { OptionsSingle } from "./components/Dropdowns/comps/OptionsSingle";
 export { generateOptions } from "./components/Dropdowns/utils/generateOptions";
 export { genTagComp } from "./components/Dropdowns/utils/genTagComp";
 export { HintsProvider } from "./components/Hints/contextApi";
+export { ImageInput } from "./components/ImageInput";
+export { default as VideoInput } from "./components/VideoInput";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.VideoInput = exports.ImageInput = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -111,3 +111,8 @@ Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: functio
 // export this
 //utility functions
 __exportStar(require("./utils/_EXPORTS"), exports);
+//template blocks
+var ImageInput_1 = require("./components/ImageInput");
+Object.defineProperty(exports, "ImageInput", { enumerable: true, get: function () { return ImageInput_1.ImageInput; } });
+var VideoInput_1 = require("./components/VideoInput");
+Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });

package/dist/utilsOolib/infoAlertBannerFnPlaceholder.d.ts

@@ -0,0 +1,4 @@
+export function infoAlertBannerFnPlaceholder(): {
+    SET_INFO_BANNER: (msg: any) => void;
+    SET_ALERT_BANNER: (msg: any) => void;
+};

package/dist/utilsOolib/infoAlertBannerFnPlaceholder.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.infoAlertBannerFnPlaceholder = void 0;
+var infoAlertBannerFnPlaceholder = function () {
+    return ({
+        SET_INFO_BANNER: function (msg) { return window.alert(msg); },
+        SET_ALERT_BANNER: function (msg) { return window.alert(msg); }
+    });
+};
+exports.infoAlertBannerFnPlaceholder = infoAlertBannerFnPlaceholder;

package/dist/utilsOolib/renderRTEPlaceholderForOolibPreview.d.ts

@@ -0,0 +1,2 @@
+export function renderRTEPlaceholderForOolibPreview(options?: {}): React.JSX.Element;
+import React from "react";

package/dist/utilsOolib/renderRTEPlaceholderForOolibPreview.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderRTEPlaceholderForOolibPreview = void 0;
+var react_1 = __importDefault(require("react"));
+var phosphor_react_1 = require("phosphor-react");
+var Tooltip_1 = require("../components/Tooltip");
+var themes_1 = require("../themes");
+var renderRTEPlaceholderForOolibPreview = function (options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.width, width = _a === void 0 ? "2rem" : _a, _b = options.height, height = _b === void 0 ? '2rem' : _b, _c = options.tooltipPos, tooltipPos = _c === void 0 ? 'bottom' : _c;
+    return (react_1.default.createElement("div", { style: {
+            width: width,
+            height: height,
+            background: themes_1.colors.lightRed,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: "0 0 auto",
+        } },
+        react_1.default.createElement(Tooltip_1.Tooltip, { popOutOfOverflowHiddenParent: true, position: tooltipPos, text: "RichTextEditor component needs to be provided via theme provider in order to render it", presetTarget: "infoIcon" })));
+};
+exports.renderRTEPlaceholderForOolibPreview = renderRTEPlaceholderForOolibPreview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.63.0",
+  "version": "2.63.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",