@anji-dashing/dam-solution-v2 5.8.173

package/build/ImagePicker/TestImgFromMetaData.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FETCH_ASSET_URL, FETCH_META_FIELD_FILES_URL, } from "../utilities/constants/apiUrls";
+import { NotificationStatus, } from "../utilities/constants/interface";
+import { get, map, reduce, slice } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { showNotification } from "../common/notifications";
+import { SOMETHING_WENT_WRONG } from "../utilities/constants/messages";
+import Loader from "../common/loader/loader";
+import { Form } from "antd";
+import PageTitle from "../ui/pageTitle";
+import MetaFieldOptions from "./MetaFieldOptions";
+import { FiImage } from "react-icons/fi";
+import { createApiClient } from "../hocs/configureAxios";
+import { useDamConfig } from "../hocs/DamConfigContext";
+const FiImageIcon = FiImage;
+function TestImageFromMetalData({ imagePicker, selectedPickerFile, setSelectedFile, }) {
+    const [form] = Form.useForm();
+    const [state, setState] = useState({
+        templateLoading: false,
+        assetTemplate: {},
+        loading: false,
+        files: [],
+    });
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { templateLoading, assetTemplate, loading, files } = state;
+    const fetchTemplate = (assetId) => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { templateLoading: true })));
+        try {
+            const response = yield api.get(`${FETCH_ASSET_URL.replace(":assetId", assetId)}`);
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { assetTemplate: get(response, "data", {}), templateLoading: false })));
+        }
+        catch (error) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { assetTemplate: {}, templateLoading: false })));
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+    });
+    const handleFinalFilterSelect = (filters) => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+        try {
+            const response = yield api.put(FETCH_META_FIELD_FILES_URL.replace(":id", get(imagePicker, "_id")), { filters });
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, files: get(response, "data", []) })));
+        }
+        catch (err) {
+            showNotification(SOMETHING_WENT_WRONG, NotificationStatus.ERROR);
+            setState((prev) => (Object.assign(Object.assign({}, prev), { images: [], loading: false })));
+        }
+    });
+    useEffect(() => {
+        if (get(imagePicker, "assetId")) {
+            fetchTemplate(get(imagePicker, "assetId"));
+        }
+    }, [imagePicker]);
+    const handleMetaFieldChange = (...args_1) => __awaiter(this, [...args_1], void 0, function* (filters = {}, index) {
+        const allFieldIds = map(get(assetTemplate, "metadataFields", []), "_id");
+        const succeedingFieldIds = slice(allFieldIds, index + 1);
+        form.setFieldsValue(reduce(succeedingFieldIds, (acc, id) => {
+            acc[id] = undefined;
+            return acc;
+        }, {}));
+        handleFinalFilterSelect(filters);
+    });
+    return (_jsx("div", { children: templateLoading ? (_jsx(Loader, {})) : (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-gap-3", children: [_jsx(PageTitle, { label: get(assetTemplate, "name", "Asset Template") }), _jsx(Form, { layout: "vertical", form: form, children: map(get(assetTemplate, "metadataFields", []), (meta, index) => {
+                        const metadataFields = get(assetTemplate, "metadataFields", []);
+                        const allFieldIds = map(metadataFields, "_id");
+                        const nextField = metadataFields[index + 1];
+                        const nextFieldId = get(nextField, "_id");
+                        return (_jsx(MetaFieldOptions, { meta: meta, imagePickerId: get(imagePicker, "_id"), form: form, previousMetaFields: slice(metadataFields, 0, index), index: index, totalFields: metadataFields.length, onMetaFieldChange: handleMetaFieldChange, nextFieldId: nextFieldId, allFieldIds: allFieldIds }, index));
+                    }) }), loading ? (_jsx(Loader, {})) : (_jsx(_Fragment, { children: get(files, "length") > 0 && (_jsx("div", { className: "md-lib-grid md-lib-grid-cols-1 sm:md-lib-grid-cols-2 md:md-lib-grid-cols-3 lg:md-lib-grid-cols-4 xl:md-lib-grid-cols-5 md-lib-gap-4 md-lib-p-4", children: map(files, (file) => (_jsxs("div", { onClick: () => setSelectedFile(file), className: `md-lib-flex md-lib-flex-col md-lib-items-center md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-rounded-md md-lib-p-3 dark:md-lib-bg-darkPrimaryBg ${get(file, "_id") === get(selectedPickerFile, "_id")
+                                ? "md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor"
+                                : ""}`, children: [_jsx("div", { className: "md-lib-w-full md-lib-aspect-square md-lib-flex md-lib-items-center md-lib-justify-center md-lib-rounded md-lib-border md-lib-border-dashed md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-overflow-hidden", children: get(file, `${get(imagePicker, "_id")}.s3Url`) ? (_jsx("img", { src: get(file, `s3Url`), alt: get(file, `name`, "Unknown"), width: 200, height: 200, className: "md-lib-object-contain md-lib-w-full md-lib-h-full" })) : (_jsx(FiImageIcon, { className: "md-lib-text-4xl md-lib-text-borderColor dark:md-lib-text-darkBorderColor" })) }), _jsx("div", { className: "md-lib-font-medium md-lib-text-sm md-lib-mt-3 md-lib-text-center md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-truncate md-lib-w-[80px]", title: get(file, "name"), children: get(file, "name") })] }, get(file, "_id")))) })) }))] })) }));
+}
+export default TestImageFromMetalData;

package/build/ImagePicker/imagePickerComponent.d.ts

@@ -0,0 +1,6 @@
+declare function ImagePicker({ id, onSelect, url, }: {
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+}): JSX.Element;
+export default ImagePicker;

package/build/ImagePicker/imagePickerComponent.js

@@ -0,0 +1,63 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import { FETCH_IMAGEPICKER_URL } from "../utilities/constants/apiUrls";
+import { get } from "lodash";
+import { FiImage } from "react-icons/fi";
+import CustomButton from "../common/Button";
+import TestImagePickerModal from "./TestImagePickerModal";
+const FiImageIcon = FiImage;
+function ImagePicker({ id, onSelect, url, }) {
+    const damConfig = useDamConfig();
+    const { brand } = damConfig;
+    const [picker, setPicker] = useState({});
+    const [imagePickerUrl, setImagePickerUrl] = useState("");
+    const [show, setShow] = useState(false);
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (url) {
+            setImagePickerUrl(url);
+        }
+    }, [url]);
+    useEffect(() => {
+        if (brand) {
+            getImagePicker();
+        }
+    }, [brand]);
+    const getImagePicker = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setLoading(true);
+            const response = yield api.get(FETCH_IMAGEPICKER_URL.replace(":id", id));
+            setPicker(get(response, "data", {}));
+            setLoading(false);
+        }
+        catch (err) {
+            console.log("Error while fetching image picker", err);
+        }
+    });
+    const onImageSelect = (url, value) => {
+        setImagePickerUrl(url);
+        toggleShow();
+        if (onSelect) {
+            onSelect(url, value);
+        }
+    };
+    const toggleShow = () => {
+        setShow(!show);
+    };
+    return (_jsxs(_Fragment, { children: [" ", _jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-items-center md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-rounded-md md-lib-p-3 dark:md-lib-bg-darkPrimaryBg md-lib-w-56 md-lib-h-72", children: [_jsx("div", { className: "md-lib-w-full md-lib-aspect-square md-lib-flex md-lib-items-center md-lib-justify-center md-lib-rounded md-lib-border md-lib-border-dashed md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-overflow-hidden", children: imagePickerUrl ? (_jsx("img", { src: imagePickerUrl, alt: get(picker, "name", "Unknown"), width: 200, height: 200, className: "md-lib-object-contain md-lib-w-full md-lib-h-full" })) : (_jsx(FiImageIcon, { className: "md-lib-text-4xl md-lib-text-borderColor dark:md-lib-text-darkBorderColor" })) }), _jsx("div", { className: "md-lib-font-medium md-lib-text-sm md-lib-mt-3 md-lib-text-center md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-truncate md-lib-w-[150px]", title: get(picker, "name"), children: get(picker, "name") }), _jsx("div", { className: "md-lib-flex md-lib-items-center md-lib-justify-between md-lib-w-full md-lib-mt-3", children: _jsx(CustomButton, { type: "primary", label: "Select", className: "md-lib-w-11/12", onClick: toggleShow }) })] }, get(picker, "_id")), show && (_jsx(TestImagePickerModal, { open: show, toggleModal: toggleShow, imagePicker: picker, setSelectedFile: (thumbnailUrl, value) => {
+                    onImageSelect(thumbnailUrl, value);
+                } }))] }));
+}
+export default ImagePicker;

package/build/ImagePicker/index.d.ts

@@ -0,0 +1,13 @@
+declare function App(props: {
+    accessKey?: string;
+    secretKey?: string;
+    subdomain?: string;
+    teamIds?: string[];
+    styles?: any;
+    appType?: string;
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+    routerVersion: 4 | 5 | 6;
+}): JSX.Element;
+export default App;

package/build/ImagePicker/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DamConfigProvider } from "../hocs/DamConfigContext";
+import { ThemeProvider } from "../hocs/ThemeContext";
+import { ThemeModes } from "../utilities/constants/interface";
+import AppProvider from "../hocs/AppProvider";
+import ToastProvider from "../hocs/ToastProvider";
+// import { MemoryRouter } from "react-router-dom";
+import AppRoutes from "./routes";
+import process from "process";
+function App(props) {
+    const config = {
+        damAccessKey: props === null || props === void 0 ? void 0 : props.accessKey,
+        secretKey: props === null || props === void 0 ? void 0 : props.secretKey,
+        subdomain: props === null || props === void 0 ? void 0 : props.subdomain,
+        teamIds: props === null || props === void 0 ? void 0 : props.teamIds,
+        styles: props === null || props === void 0 ? void 0 : props.styles,
+        appType: props === null || props === void 0 ? void 0 : props.appType,
+    };
+    if (typeof window !== "undefined" && !window.process) {
+        window.process = process;
+    }
+    return (_jsx(DamConfigProvider, { config: config, children: _jsx(ThemeProvider, { styles: props === null || props === void 0 ? void 0 : props.styles, sessionTheme: ThemeModes.LIGHT, children: _jsxs(AppProvider, { children: [_jsx(AppRoutes, { id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url, routerVersion: (props === null || props === void 0 ? void 0 : props.routerVersion) || 6 }), _jsx(ToastProvider, {})] }) }) }));
+}
+export default App;

package/build/ImagePicker/routes.d.ts

@@ -0,0 +1,6 @@
+export default function AppRoutes(props: {
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+    routerVersion: 4 | 5 | 6;
+}): JSX.Element;

package/build/ImagePicker/routes.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IMAGE_PICKER_SCREEN } from "../utilities/constants/routes";
+import ImagePicker from "./imagePickerComponent";
+import { NavigatorProvider } from "../utilities/NavigatorProvider";
+export default function AppRoutes(props) {
+    const { routerVersion } = props;
+    if (routerVersion === 6) {
+        // ✅ React Router v6
+        const { Routes, Route } = require("react-router-dom");
+        return (_jsx(Routes, { children: _jsx(Route, { path: IMAGE_PICKER_SCREEN, element: _jsx(ImagePicker, { id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url }) }, IMAGE_PICKER_SCREEN) }));
+    }
+    // ✅ React Router v4/v5
+    const { Switch, Route, withRouter } = require("react-router-dom");
+    const Wrapper = ({ history }) => (_jsx(NavigatorProvider, { history: history, children: _jsx(Switch, { children: _jsx(Route, { path: IMAGE_PICKER_SCREEN, render: (props) => (_jsx(ImagePicker, Object.assign({ id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url }, props))) }, IMAGE_PICKER_SCREEN) }) }));
+    const WithRouterWrapper = withRouter(Wrapper);
+    return _jsx(WithRouterWrapper, {});
+}

package/build/ImagePickerFilters/ImagePickerFiltersComponent.d.ts

@@ -0,0 +1,8 @@
+declare function ImagePickerFiltersComponent({ id, onSelect, url, value, fileId, }: {
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+    value?: any;
+    fileId?: string;
+}): JSX.Element;
+export default ImagePickerFiltersComponent;

package/build/ImagePickerFilters/ImagePickerFiltersComponent.js

@@ -0,0 +1,223 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { NotificationStatus } from "../utilities/constants/interface";
+import { get } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { FETCH_ASSET_URL, FETCH_IMAGEPICKER_URL, FETCH_META_FIELD_FILES_URL, FETCH_META_FIELD_OPTIONS_URL, } from "../utilities/constants/apiUrls";
+import { createApiClient } from "../hocs/configureAxios";
+import { Empty, Form, Select, Spin } from "antd";
+import { showNotification } from "../common/notifications";
+import { SOMETHING_WENT_WRONG } from "../utilities/constants/messages";
+import { getFormattedValue } from "../hocs/helpers";
+function ImagePickerFiltersComponent({ id, onSelect, url, value, fileId, }) {
+    var _a, _b, _c;
+    const damConfig = useDamConfig();
+    const { brand } = damConfig;
+    const [state, setState] = useState({
+        assetType: null,
+        imagePicker: {},
+        loading: false,
+        fieldOptions: {},
+        filters: {},
+        fieldName: "",
+        files: [],
+        selectedFileUrl: null,
+        selectedFileId: null,
+        loaderType: "",
+        selectedFieldName: "",
+    });
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    useEffect(() => {
+        if (id && brand) {
+            getImagePicker();
+        }
+    }, [id, brand]);
+    const getImagePicker = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true, loaderType: "IMAGE_PICKER" })));
+            const response = yield api.get(FETCH_IMAGEPICKER_URL.replace(":id", id));
+            const assetId = get(response, "data.assetId", "");
+            const assetTemplateResponse = yield api.get(FETCH_ASSET_URL.replace(":assetId", assetId || ""));
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, loaderType: "", imagePicker: get(response, "data", {}), assetType: get(assetTemplateResponse, "data", {}) })));
+        }
+        catch (err) {
+            console.log("Error while fetching image picker", err);
+        }
+    });
+    const fields = ((_a = state === null || state === void 0 ? void 0 : state.assetType) === null || _a === void 0 ? void 0 : _a.metadataFields) || [];
+    const onFilter = (filters_1, fieldOptions_1, nextField_1, ...args_1) => __awaiter(this, [filters_1, fieldOptions_1, nextField_1, ...args_1], void 0, function* (filters, fieldOptions, nextField, fromValue = false) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const filtersObj = Object.keys(filters).reduce((acc, key) => {
+            const value = (filters === null || filters === void 0 ? void 0 : filters[key]) || "";
+            if (value) {
+                acc = Object.assign(Object.assign({}, acc), { [key]: value });
+            }
+            return acc;
+        }, {});
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { filters,
+                fieldOptions, loading: true, fieldName: nextField, selectedFieldName: null });
+        });
+        try {
+            const payload = {
+                distinctValuesKey: nextField,
+                filters: filtersObj,
+            };
+            const response = !nextField
+                ? yield api.put(FETCH_META_FIELD_FILES_URL.replace(":id", get(state, "imagePicker._id")), { filters })
+                : yield api.put(FETCH_META_FIELD_OPTIONS_URL.replace(":id", get(state, "imagePicker._id")), payload);
+            // console.log(response, nextField);
+            const filesResponse = ((_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) == 0
+                ? yield api.put(FETCH_META_FIELD_FILES_URL.replace(":id", get(state, "imagePicker._id")), { filters })
+                : null;
+            const currentFieldOptions = Object.assign(Object.assign({}, fieldOptions), { [nextField]: ((_c = response === null || response === void 0 ? void 0 : response.data) === null || _c === void 0 ? void 0 : _c.values) || [] });
+            const finalState = !nextField || ((_e = (_d = response === null || response === void 0 ? void 0 : response.data) === null || _d === void 0 ? void 0 : _d.values) === null || _e === void 0 ? void 0 : _e.length) == 0
+                ? {
+                    files: ((_g = (_f = response === null || response === void 0 ? void 0 : response.data) === null || _f === void 0 ? void 0 : _f.values) === null || _g === void 0 ? void 0 : _g.length) == 0
+                        ? (filesResponse === null || filesResponse === void 0 ? void 0 : filesResponse.data) || []
+                        : !nextField
+                            ? (response === null || response === void 0 ? void 0 : response.data) || []
+                            : [],
+                    loading: false,
+                }
+                : {
+                    fieldOptions: currentFieldOptions,
+                    loading: false,
+                    fieldName: "",
+                };
+            if (!fromValue) {
+                finalState["selectedFileId"] = null;
+                finalState["selectedFileUrl"] = null;
+            }
+            else if (nextField == "") {
+                const selectedFile = (_h = response === null || response === void 0 ? void 0 : response.data) === null || _h === void 0 ? void 0 : _h.find((item) => item._id == fileId);
+                finalState["selectedFileId"] = selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile._id;
+                finalState["selectedFileUrl"] = selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.thumbnailUrl;
+            }
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), finalState);
+            });
+            if (fromValue && nextField !== "") {
+                const index = fields === null || fields === void 0 ? void 0 : fields.findIndex((field) => {
+                    return field._id == nextField;
+                });
+                const nextNextField = fields.length !== index + 1 ? ((_j = fields === null || fields === void 0 ? void 0 : fields[index + 1]) === null || _j === void 0 ? void 0 : _j._id) || "" : "";
+                const prevFields = fields.slice(0, index + 1);
+                const allFilters = {};
+                const allFieldOptions = {};
+                prevFields.forEach((item) => {
+                    allFilters[item._id] = filters === null || filters === void 0 ? void 0 : filters[item._id];
+                    allFieldOptions[item._id] = currentFieldOptions === null || currentFieldOptions === void 0 ? void 0 : currentFieldOptions[item._id];
+                });
+                allFilters[nextField] = value === null || value === void 0 ? void 0 : value[nextField];
+                if (((_k = response === null || response === void 0 ? void 0 : response.data) === null || _k === void 0 ? void 0 : _k.length) == 0) {
+                    onFilter(allFilters, allFieldOptions, nextNextField, true);
+                }
+            }
+        }
+        catch (err) {
+            showNotification(get(err, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false, fieldName: "" });
+            });
+        }
+    });
+    useEffect(() => {
+        var _a, _b;
+        try {
+            if (fields.length > 0) {
+                if (value) {
+                    const fieldName = ((_a = fields === null || fields === void 0 ? void 0 : fields[0]) === null || _a === void 0 ? void 0 : _a._id) || "";
+                    const currentFilters = {
+                        [fieldName]: "",
+                    };
+                    onFilter(currentFilters, {}, fieldName, true);
+                }
+                else {
+                    const fieldName = ((_b = fields === null || fields === void 0 ? void 0 : fields[0]) === null || _b === void 0 ? void 0 : _b._id) || "";
+                    const currentFilters = {
+                        [fieldName]: "",
+                    };
+                    onFilter(currentFilters, {}, fieldName);
+                }
+            }
+        }
+        catch (err) {
+            console.log(err);
+        }
+    }, [fields, value]);
+    // console.log(
+    //   state?.filters,
+    //   state?.selectedFileUrl,
+    //   state?.fieldOptions,
+    //   state?.imagePicker,
+    //   state
+    // );
+    return (_jsx("div", { className: "image-picker-filters", style: { width: "100%" }, children: (state === null || state === void 0 ? void 0 : state.loading) && (state === null || state === void 0 ? void 0 : state.loaderType) == "IMAGE_PICKER" ? (_jsx("div", { className: "md-lib-h-full md-lib-flex md-lib-items-center md-lib-justify-center", children: _jsx(Spin, {}) })) : (_jsx("div", { className: "md-lib-border md-lib-p-4 md-lib-rounded", children: !(state === null || state === void 0 ? void 0 : state.assetType) ? (_jsx(Empty, { description: "Asset Type not found", image: Empty.PRESENTED_IMAGE_SIMPLE })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "md-lib-text-xl md-lib-font-semibold", children: (_b = state === null || state === void 0 ? void 0 : state.imagePicker) === null || _b === void 0 ? void 0 : _b.name }), _jsx("br", {}), _jsxs(Form, { layout: "vertical", children: [fields === null || fields === void 0 ? void 0 : fields.map((field, index) => {
+                                var _a, _b, _c, _d;
+                                // console.log(field);
+                                const fieldName = (field === null || field === void 0 ? void 0 : field._id) || "";
+                                const fieldLabel = (field === null || field === void 0 ? void 0 : field.name) || "";
+                                const nextField = fields.length !== index + 1
+                                    ? ((_a = fields === null || fields === void 0 ? void 0 : fields[index + 1]) === null || _a === void 0 ? void 0 : _a._id) || ""
+                                    : "";
+                                return (_jsx(Form.Item, { label: fieldLabel, children: _jsx(Select, { placeholder: fieldLabel, style: { width: "100%" }, options: (_c = (((_b = state === null || state === void 0 ? void 0 : state.fieldOptions) === null || _b === void 0 ? void 0 : _b[fieldName]) || [])) === null || _c === void 0 ? void 0 : _c.map((option) => {
+                                            return {
+                                                label: option,
+                                                value: option,
+                                            };
+                                        }), showSearch: true, value: ((_d = state === null || state === void 0 ? void 0 : state.filters) === null || _d === void 0 ? void 0 : _d[fieldName]) || null, onChange: (val) => {
+                                            const prevFields = fields.slice(0, index + 1);
+                                            const allFilters = {};
+                                            const allFieldOptions = {};
+                                            // console.log("onChange", val, prevFields);
+                                            prevFields.forEach((item) => {
+                                                var _a, _b;
+                                                allFilters[item._id] = (_a = state === null || state === void 0 ? void 0 : state.filters) === null || _a === void 0 ? void 0 : _a[item._id];
+                                                allFieldOptions[item._id] =
+                                                    (_b = state === null || state === void 0 ? void 0 : state.fieldOptions) === null || _b === void 0 ? void 0 : _b[item._id];
+                                            });
+                                            allFilters[fieldName] = val;
+                                            onFilter(allFilters, allFieldOptions, nextField);
+                                        }, loading: (state === null || state === void 0 ? void 0 : state.loading) && (state === null || state === void 0 ? void 0 : state.fieldName) == fieldName }, fieldName) }, fieldName));
+                            }), _jsxs(Form.Item, { label: "Image", children: [_jsx(Select, { placeholder: "Select Image", style: { width: "100%" }, loading: (state === null || state === void 0 ? void 0 : state.loading) && (state === null || state === void 0 ? void 0 : state.fieldName) == "", showSearch: true, options: (_c = state === null || state === void 0 ? void 0 : state.files) === null || _c === void 0 ? void 0 : _c.map((file) => {
+                                            return {
+                                                label: file === null || file === void 0 ? void 0 : file.name,
+                                                value: file === null || file === void 0 ? void 0 : file._id,
+                                                file,
+                                            };
+                                        }), optionLabelProp: "label", value: state === null || state === void 0 ? void 0 : state.selectedFileId, onChange: (val, option) => {
+                                            if (onSelect) {
+                                                const file = get(option, "file", {});
+                                                const imagePickerOutputFormat = get(state === null || state === void 0 ? void 0 : state.assetType, "imagePickerOutputFormat", []);
+                                                const metadataFields = get(state === null || state === void 0 ? void 0 : state.assetType, "metadataFields", []);
+                                                // console.log(imagePickerOutputFormat);
+                                                const formattedOutputFormat = imagePickerOutputFormat.map((field) => {
+                                                    // console.log("field", field);
+                                                    const metaField = metadataFields.find((item) => (item === null || item === void 0 ? void 0 : item.name) == (field === null || field === void 0 ? void 0 : field.name));
+                                                    return Object.assign(Object.assign({}, field), { fieldId: get(metaField, "_id") });
+                                                });
+                                                // console.log(formattedOutputFormat);
+                                                const value = getFormattedValue(formattedOutputFormat, file === null || file === void 0 ? void 0 : file.s3Url, get(file, "metadata", {}));
+                                                // console.log(val, value);
+                                                onSelect(val, value);
+                                            }
+                                            setState((prevState) => {
+                                                var _a;
+                                                return Object.assign(Object.assign({}, prevState), { selectedFileId: val, selectedFileUrl: (_a = option === null || option === void 0 ? void 0 : option.file) === null || _a === void 0 ? void 0 : _a.thumbnailUrl, selectedFieldName: "" });
+                                            });
+                                        } }, "IMAGE_THUMBNAIL"), (state === null || state === void 0 ? void 0 : state.selectedFileUrl) && (_jsx("img", { src: state === null || state === void 0 ? void 0 : state.selectedFileUrl, width: 200, style: {
+                                            borderRadius: "10px",
+                                            marginTop: "10px",
+                                        }, alt: "Selected file preview" }, state === null || state === void 0 ? void 0 : state.selectedFileUrl))] })] })] })) })) }));
+}
+export default ImagePickerFiltersComponent;

package/build/ImagePickerFilters/index.d.ts

@@ -0,0 +1,12 @@
+declare function App(props: {
+    accessKey?: string;
+    secretKey?: string;
+    subdomain?: string;
+    teamIds?: string[];
+    styles?: any;
+    appType?: string;
+    id: string;
+    onSelect?: (url: string, value: any) => void;
+    url?: string;
+}): JSX.Element;
+export default App;

package/build/ImagePickerFilters/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DamConfigProvider } from "../hocs/DamConfigContext";
+import { ThemeProvider } from "../hocs/ThemeContext";
+import { ThemeModes } from "../utilities/constants/interface";
+import AppProvider from "../hocs/AppProvider";
+import ToastProvider from "../hocs/ToastProvider";
+import ImagePickerFiltersComponent from "./ImagePickerFiltersComponent";
+function App(props) {
+    const config = {
+        damAccessKey: props === null || props === void 0 ? void 0 : props.accessKey,
+        secretKey: props === null || props === void 0 ? void 0 : props.secretKey,
+        subdomain: props === null || props === void 0 ? void 0 : props.subdomain,
+        teamIds: props === null || props === void 0 ? void 0 : props.teamIds,
+        styles: props === null || props === void 0 ? void 0 : props.styles,
+        appType: props === null || props === void 0 ? void 0 : props.appType,
+    };
+    return (_jsx(DamConfigProvider, { config: config, children: _jsx(ThemeProvider, { styles: props === null || props === void 0 ? void 0 : props.styles, sessionTheme: ThemeModes.LIGHT, children: _jsxs(AppProvider, { children: [_jsx(ImagePickerFiltersComponent, { id: props.id, onSelect: props === null || props === void 0 ? void 0 : props.onSelect, url: props === null || props === void 0 ? void 0 : props.url }), _jsx(ToastProvider, {})] }) }) }));
+}
+export default App;

package/build/MyDrive/ActionBar.d.ts

@@ -0,0 +1,8 @@
+import { FileEntity, FolderEntity } from "../utilities/constants/interface";
+declare const ActionsBar: ({ fileIds, folderIds, onCloseSelection, selectedFilesData, }: {
+    fileIds: string[];
+    folderIds: string[];
+    onCloseSelection: () => void;
+    selectedFilesData?: (FileEntity | FolderEntity)[];
+}) => JSX.Element;
+export default ActionsBar;