@reltio/components 1.4.877 → 1.4.881

package/cjs/components/ImageAttributesGallery/ImageAttributesGallery.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable indent */
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ImageDetailsView_1 = require("../ImageDetailsView/ImageDetailsView");
+var ImageGalleryDialog_1 = require("../ImageGalleryDialog/ImageGalleryDialog");
+var GalleryView_1 = require("./GalleryView/GalleryView");
+var HeaderLeft_1 = require("./HeaderLeft/HeaderLeft");
+var HeaderRight_1 = require("./HeaderRight/HeaderRight");
+var ImageAttributesGallery = function (_a) {
+    var attributeValues = _a.attributeValues, open = _a.open, onClose = _a.onClose, currentAttributeValueUri = _a.currentAttributeValueUri, setCurrentAttributeValueUri = _a.setCurrentAttributeValueUri, attributeType = _a.attributeType, onDownload = _a.onDownload, onShareLink = _a.onShareLink, onSetAsDefault = _a.onSetAsDefault, onUpload = _a.onUpload, onDeleteAttribute = _a.onDeleteAttribute;
+    var _b = react_1.useState([]), selectedItems = _b[0], setSelectedItems = _b[1];
+    var _c = react_1.useState(ImageGalleryDialog_1.Mode.GALLERY_MODE), mode = _c[0], setMode = _c[1];
+    var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
+    react_1.useEffect(function () {
+        setMode(currentAttributeValueUri ? ImageGalleryDialog_1.Mode.DETAILS_MODE : ImageGalleryDialog_1.Mode.GALLERY_MODE);
+    }, [currentAttributeValueUri]);
+    var imageItems = attributeValues.map(function (attribute) { return ({
+        src: mdm_sdk_1.getImageAttributeOvThumbnailUrl(attribute),
+        downloadURL: mdm_sdk_1.getImageAttributeOvUrl(attribute),
+        id: attribute.uri
+    }); });
+    var handleSelect = function (id) {
+        setSelectedItems(function (items) { return __spreadArray(__spreadArray([], items), [id]); });
+    };
+    var handleDeselect = function (id) {
+        setSelectedItems(function (items) { return items.filter(function (item) { return item !== id; }); });
+    };
+    var handleSelectAll = function () {
+        setSelectedItems(ramda_1.pluck('id', imageItems));
+    };
+    var handleClearAll = function () {
+        setSelectedItems([]);
+    };
+    var handleDownloadSelectedItems = function () {
+        var downloadURLs = isGalleryMode
+            ? ramda_1.pipe(ramda_1.filter(function (_a) {
+                var id = _a.id;
+                return selectedItems.includes(id);
+            }), ramda_1.pluck('downloadURL'))(imageItems)
+            : [imageItems.find(ramda_1.propEq('id', currentAttributeValueUri)).downloadURL];
+        onDownload(downloadURLs);
+    };
+    var handleDownload = function (id) {
+        onDownload([imageItems.find(ramda_1.propEq('id', id)).downloadURL]);
+    };
+    var handleShareLink = function (id) {
+        onShareLink(imageItems.find(ramda_1.propEq('id', id)).downloadURL);
+    };
+    var handleSharedCurrentItem = function () {
+        handleShareLink(currentAttributeValueUri);
+    };
+    var handleSetAsDefault = function (id) {
+        var attributeValue = attributeValues.find(function (_a) {
+            var uri = _a.uri;
+            return uri === id;
+        });
+        onSetAsDefault(attributeValue);
+    };
+    var handleDelete = function (id) {
+        onDeleteAttribute({ uri: id, attributeType: attributeType });
+    };
+    var handleDeleteSelectedItems = function () {
+        var deleteUris = isGalleryMode ? selectedItems : [currentAttributeValueUri];
+        deleteUris.forEach(function (uri) {
+            handleDelete(uri);
+        });
+        if (selectedItems.length)
+            setSelectedItems([]);
+    };
+    var isGalleryMode = mode === ImageGalleryDialog_1.Mode.GALLERY_MODE;
+    var isDetailsMode = mode === ImageGalleryDialog_1.Mode.DETAILS_MODE;
+    var hasSelectedItems = selectedItems.length > 0;
+    var isHasSelectedItemsOrDetailsMode = isDetailsMode || (isGalleryMode && hasSelectedItems);
+    var isShowDeleteButton = !isViewMode && isHasSelectedItemsOrDetailsMode;
+    var isShowUploadButton = !isViewMode && (isDetailsMode || (isGalleryMode && !hasSelectedItems));
+    var headerLeft = isGalleryMode && hasSelectedItems && (react_1.default.createElement(HeaderLeft_1.HeaderLeft, { items: imageItems, selectedItems: selectedItems, onClearAll: handleClearAll, onSelectAll: handleSelectAll }));
+    var headerRight = (react_1.default.createElement(HeaderRight_1.HeaderRight, { onDelete: isShowDeleteButton ? handleDeleteSelectedItems : undefined, onDownload: isHasSelectedItemsOrDetailsMode ? handleDownloadSelectedItems : undefined, onShare: isDetailsMode ? handleSharedCurrentItem : undefined, onUpload: isShowUploadButton ? onUpload : undefined }));
+    var handleClickByImage = function (id) {
+        setCurrentAttributeValueUri(id);
+        setMode(ImageGalleryDialog_1.Mode.DETAILS_MODE);
+    };
+    return (react_1.default.createElement(ImageGalleryDialog_1.ImageGalleryDialog, { mode: mode, open: open, onChangeMode: setMode, header: {
+            left: headerLeft,
+            right: headerRight
+        }, onClose: onClose },
+        isGalleryMode && (react_1.default.createElement(GalleryView_1.GalleryView, { items: imageItems, selectedItems: selectedItems, onSelectImage: handleSelect, onDeselectImage: handleDeselect, onShareLink: handleShareLink, onSetAsDefault: handleSetAsDefault, onDownload: handleDownload, onClickImage: handleClickByImage, onDelete: !isViewMode ? handleDelete : undefined })),
+        isDetailsMode && (react_1.default.createElement(ImageDetailsView_1.ImageDetailsView, { handleSetAsDefault: handleSetAsDefault, setCurrentAttributeValueUri: setCurrentAttributeValueUri, currentAttributeValueUri: currentAttributeValueUri, attributeValues: attributeValues, attributeType: attributeType }))));
+};
+exports.default = ImageAttributesGallery;

package/cjs/components/ImageDetailsView/ImageDetailsView.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageDetailsView = void 0;
+var react_1 = __importStar(require("react"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var ImageDetailsViewCarousel_1 = require("./ImageDetailsViewCarousel/ImageDetailsViewCarousel");
+var ImageDetailsViewSidebar_1 = require("./ImageDetailsViewSidebar/ImageDetailsViewSidebar");
+var styles_1 = require("./styles");
+var ImageDetailsView = function (_a) {
+    var _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, currentAttributeValueUri = _a.currentAttributeValueUri, setCurrentAttributeValueUri = _a.setCurrentAttributeValueUri, handleSetAsDefault = _a.handleSetAsDefault, attributeType = _a.attributeType;
+    var _c = react_1.useState(0), attributeValueIndex = _c[0], setAttributeValueIndex = _c[1];
+    react_1.useEffect(function () {
+        if (!currentAttributeValueUri) {
+            onChangeAttributeValueIndex(0);
+        }
+        else {
+            onChangeAttributeValueIndex(attributeValues.findIndex(function (value) { return value.uri === currentAttributeValueUri; }));
+        }
+    }, [currentAttributeValueUri, attributeValues]);
+    var onChangeAttributeValueIndex = react_1.useCallback(function (index) {
+        var _a;
+        setAttributeValueIndex(index);
+        setCurrentAttributeValueUri((_a = attributeValues[index]) === null || _a === void 0 ? void 0 : _a.uri);
+    }, [attributeValues]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+        react_1.default.createElement(ImageDetailsViewCarousel_1.ImageDetailsViewCarousel, { attributeValueIndex: attributeValueIndex, setAttributeValueIndex: onChangeAttributeValueIndex, attributeValues: attributeValues, className: styles.main }),
+        react_1.default.createElement(ImageDetailsViewSidebar_1.ImageDetailsViewSidebar, { handleSetAsDefault: handleSetAsDefault, attributeValue: attributeValues[attributeValueIndex], className: styles.details, attributeType: attributeType })));
+};
+exports.ImageDetailsView = ImageDetailsView;

package/cjs/components/ImageDetailsView/ImageDetailsViewCarousel/ImageDetailsViewCarousel.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageDetailsViewCarousel = void 0;
+var react_1 = __importDefault(require("react"));
+var NavigateBefore_1 = __importDefault(require("@material-ui/icons/NavigateBefore"));
+var NavigateNext_1 = __importDefault(require("@material-ui/icons/NavigateNext"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = __importStar(require("../../Image/Image"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var styles_1 = require("./styles");
+var Thumbnails_1 = require("./Thumbnails/Thumbnails");
+var ImageDetailsViewCarousel = function (_a) {
+    var className = _a.className, attributeValues = _a.attributeValues, attributeValueIndex = _a.attributeValueIndex, setAttributeValueIndex = _a.setAttributeValueIndex;
+    var styles = styles_1.useStyles();
+    var attributeValue = attributeValues[attributeValueIndex];
+    var mainImageSrc = mdm_sdk_1.getImageAttributeOvPreviewUrl(attributeValue);
+    var onPrevImageButtonClick = function () {
+        setAttributeValueIndex(attributeValueIndex - 1);
+    };
+    var onNextImageButtonClick = function () {
+        setAttributeValueIndex(attributeValueIndex + 1);
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement("div", { className: styles.main },
+            attributeValueIndex > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: NavigateBefore_1.default, className: classnames_1.default(styles.arrowButton, styles.arrowButtonPrev), onClick: onPrevImageButtonClick, size: "XL" })),
+            react_1.default.createElement(Image_1.default, { containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && Image_1.ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
+            attributeValueIndex !== attributeValues.length - 1 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: NavigateNext_1.default, className: classnames_1.default(styles.arrowButton, styles.arrowButtonNext), onClick: onNextImageButtonClick, size: "XL" }))),
+        react_1.default.createElement(Thumbnails_1.Thumbnails, { attributeValues: attributeValues, attributeValueIndex: attributeValueIndex, setAttributeValueIndex: setAttributeValueIndex })));
+};
+exports.ImageDetailsViewCarousel = ImageDetailsViewCarousel;

package/cjs/components/ImageDetailsView/ImageDetailsViewCarousel/Thumbnails/Thumbnails.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnails = exports.CONTAINER_MARGIN = exports.IMAGE_PADDING = exports.IMAGE_WIDTH = void 0;
+var react_1 = __importStar(require("react"));
+var Grid_1 = __importDefault(require("@material-ui/core/Grid"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = __importDefault(require("../../../Image/Image"));
+var styles_1 = require("./styles");
+exports.IMAGE_WIDTH = 96;
+exports.IMAGE_PADDING = 16;
+exports.CONTAINER_MARGIN = 12;
+var Thumbnails = function (_a) {
+    var attributeValues = _a.attributeValues, setAttributeValueIndex = _a.setAttributeValueIndex, attributeValueIndex = _a.attributeValueIndex;
+    var styles = styles_1.useStyles();
+    var gridRef = react_1.useRef(null);
+    react_1.useEffect(function () {
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            var containerScrollLeft = gridRef.current.scrollLeft;
+            var containerOffsetWidth = gridRef.current.offsetWidth;
+            var containerWidth = containerOffsetWidth + containerScrollLeft;
+            var currentElementPosition = attributeValueIndex * exports.IMAGE_WIDTH + attributeValueIndex * exports.IMAGE_PADDING + exports.CONTAINER_MARGIN;
+            if (containerWidth < currentElementPosition) {
+                if (gridRef.current.scroll) {
+                    if (currentElementPosition > containerWidth + exports.IMAGE_WIDTH + exports.IMAGE_PADDING) {
+                        gridRef.current.scroll(currentElementPosition, 0);
+                    }
+                    else {
+                        gridRef.current.scroll(exports.IMAGE_WIDTH + exports.IMAGE_PADDING + containerScrollLeft, 0);
+                    }
+                }
+            }
+            else if (containerScrollLeft + exports.IMAGE_WIDTH > currentElementPosition) {
+                if (gridRef.current.scroll) {
+                    gridRef.current.scroll(currentElementPosition - exports.IMAGE_WIDTH, 0);
+                }
+            }
+        }
+    }, [attributeValueIndex, gridRef]);
+    return (react_1.default.createElement("div", { ref: gridRef, className: styles.thumbnails },
+        react_1.default.createElement(Grid_1.default, { container: true, wrap: "nowrap", direction: "row", spacing: 1, className: styles.gridContainer }, attributeValues.map(function (_a, index) {
+            var _b;
+            var uri = _a.uri, value = _a.value;
+            return (react_1.default.createElement(Grid_1.default, { item: true, key: uri },
+                react_1.default.createElement(Image_1.default, { onClick: function () { return setAttributeValueIndex(index); }, className: classnames_1.default(styles.thumb, (_b = {},
+                        _b[styles.inactiveThumb] = attributeValueIndex !== index,
+                        _b)), src: mdm_sdk_1.getImageAttributeOvThumbnailUrl({ value: value }) })));
+        }))));
+};
+exports.Thumbnails = Thumbnails;

package/cjs/components/ImageDetailsView/ImageDetailsViewCarousel/Thumbnails/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function () { return ({
+    thumbnails: {
+        marginLeft: '12px',
+        marginBottom: '12px',
+        marginTop: 'auto',
+        width: 'calc(100vw - 364px)',
+        overflowX: 'auto',
+        overflowY: 'hidden'
+    },
+    gridContainer: {
+        width: '100%'
+    },
+    thumb: {
+        width: '96px',
+        height: '96px',
+        cursor: 'pointer',
+        userSelect: 'none'
+    },
+    inactiveThumb: {
+        filter: 'brightness(0.5)'
+    }
+}); });

package/cjs/components/ImageDetailsView/ImageDetailsViewCarousel/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        display: 'flex',
+        alignContent: 'center',
+        flexDirection: 'column'
+    },
+    main: {
+        position: 'relative',
+        padding: '0 86px',
+        marginTop: 'auto'
+    },
+    mainImageContainer: {
+        display: 'flex',
+        alignContent: 'center',
+        height: '100%',
+        width: '100%'
+    },
+    mainImage: {
+        maxWidth: 'calc(100vw - 512px)',
+        maxHeight: 'calc(100vh - 192px)',
+        margin: '0 auto',
+        userSelect: 'none'
+    },
+    arrowButton: {
+        backgroundColor: theme.palette.divider,
+        color: 'white',
+        '&:hover': {
+            backgroundColor: theme.palette.divider
+        }
+    },
+    arrowButtonPrev: {
+        position: 'absolute',
+        top: '50%',
+        left: '16px',
+        transform: 'translateY(-50%)'
+    },
+    arrowButtonNext: {
+        position: 'absolute',
+        top: '50%',
+        right: '16px',
+        transform: 'translateY(-50%)'
+    }
+}); });

package/cjs/components/ImageDetailsView/ImageDetailsViewSidebar/ImageDetailsViewSidebar.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageDetailsViewSidebar = void 0;
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var classnames_1 = __importDefault(require("classnames"));
+var MetaInfo_1 = require("../MetaInfo/MetaInfo");
+var styles_1 = require("./styles");
+var ImageDetailsViewSidebar = function (_a) {
+    var className = _a.className, attributeValue = _a.attributeValue, handleSetAsDefault = _a.handleSetAsDefault, attributeType = _a.attributeType;
+    var styles = styles_1.useStyles();
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
+    var modifiedEntity = react_redux_1.useSelector(function (state) { return mdm_module_1.default.selectors.getModifiedEntity(state, entity === null || entity === void 0 ? void 0 : entity.uri); }) || {};
+    var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
+    var entityToShow = isViewMode ? entity : modifiedEntity;
+    var imageAttributeConfig = react_redux_1.useSelector(mdm_module_1.default.selectors.getImageAttributesFieldsOrder) || {};
+    var imageAttributeFieldsOrder = imageAttributeConfig[entity === null || entity === void 0 ? void 0 : entity.type] || (imageAttributeConfig === null || imageAttributeConfig === void 0 ? void 0 : imageAttributeConfig.default) || {};
+    var _b = react_1.useState(false), isDefault = _b[0], setIsDefault = _b[1];
+    react_1.useEffect(function () {
+        setIsDefault((entityToShow === null || entityToShow === void 0 ? void 0 : entityToShow.defaultProfilePic) === (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri));
+    }, [attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, entityToShow]);
+    var handleChange = react_1.useCallback(function () {
+        handleSetAsDefault(attributeValue.uri);
+    }, [attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri]);
+    return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Box_1.default, { className: styles.header },
+            react_1.default.createElement(Typography_1.default, { className: styles.headerTitle }, ui_i18n_1.default.text('Details'))),
+        react_1.default.createElement(Box_1.default, { className: styles.bodyWrapper },
+            react_1.default.createElement(Box_1.default, { className: styles.body },
+                react_1.default.createElement(FormControlLabel_1.default, { classes: { root: styles.formControlLabel, label: styles.checkboxLabel }, control: react_1.default.createElement(Checkbox_1.default, { className: styles.checkbox, checked: isDefault, onChange: handleChange, color: "default" }), label: ui_i18n_1.default.text('Set as default') }),
+                react_1.default.createElement(MetaInfo_1.MetaInfo, { attributeType: attributeType, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeValue: attributeValue })))));
+};
+exports.ImageDetailsViewSidebar = ImageDetailsViewSidebar;

package/cjs/components/ImageDetailsView/ImageDetailsViewSidebar/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "checkbox" | "header" | "root" | "headerTitle" | "bodyWrapper" | "formControlLabel" | "checkboxLabel">;

package/cjs/components/ImageDetailsView/ImageDetailsViewSidebar/styles.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        position: 'relative',
+        backgroundColor: '#333',
+        maxHeight: 'calc(100vh - 64px)',
+        overflow: 'hidden'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '56px',
+        paddingLeft: '16px',
+        boxShadow: "0 1px 0 0 " + theme.palette.divider
+    },
+    headerTitle: {
+        color: 'rgba(255, 255, 255, 0.87)',
+        fontSize: '16px',
+        lineHeight: '19px'
+    },
+    bodyWrapper: {
+        maxHeight: 'calc(100% - 56px)',
+        overflow: 'auto'
+    },
+    body: {
+        padding: '16px'
+    },
+    formControlLabel: {
+        marginLeft: 0,
+        marginBottom: '27px'
+    },
+    checkboxLabel: {
+        marginLeft: '8px',
+        color: 'rgba(255,255,255,0.87)',
+        fontSize: '13px',
+        lineHeight: '15px'
+    },
+    checkbox: {
+        color: 'white',
+        padding: 0
+    }
+}); });

package/cjs/components/ImageDetailsView/MetaInfo/MetaInfo.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetaInfo = void 0;
+var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var styles_1 = require("@material-ui/core/styles");
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var MetaInfoHeader_1 = require("../MetaInfoHeader/MetaInfoHeader");
+var MetaInfoList_1 = require("../MetaInfoList/MetaInfoList");
+var MetaInfoForm_1 = require("../MetaInfoForm/MetaInfoForm");
+var useEditMetaInfo_1 = require("../hooks/useEditMetaInfo");
+var theme_1 = require("../theme");
+var darkMuiTheme = styles_1.createMuiTheme(theme_1.darkTheme);
+var MetaInfo = function (_a) {
+    var imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder, attributeType = _a.attributeType, initialAttributeValue = _a.attributeValue;
+    var _b = useEditMetaInfo_1.useEditMetaInfo({ attributeType: attributeType, initialAttributeValue: initialAttributeValue }), addAttributes = _b.addAttributes, changeAttribute = _b.changeAttribute, deleteAttribute = _b.deleteAttribute, clearLocalChanges = _b.clearLocalChanges, applyLocalChanges = _b.applyLocalChanges, attributeValue = _b.attributeValue, hasChanges = _b.hasChanges;
+    var mode = react_redux_1.useSelector(mdm_module_1.default.selectors.getMode);
+    var isEditableMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsEditableMode);
+    return (react_1.default.createElement(styles_1.MuiThemeProvider, { theme: darkMuiTheme },
+        react_1.default.createElement(Box_1.default, null,
+            react_1.default.createElement(MetaInfoHeader_1.MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
+            react_1.default.createElement(MetaInfoList_1.MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
+            isEditableMode && (react_1.default.createElement(MetaInfoForm_1.MetaInfoForm, { mode: mode, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeType: attributeType, attributeValue: attributeValue, hasChanges: hasChanges, onDeleteAttribute: deleteAttribute, onChangeAttribute: changeAttribute, onAddAttributes: addAttributes, onCancel: clearLocalChanges, onApply: applyLocalChanges })))));
+};
+exports.MetaInfo = MetaInfo;

package/cjs/components/ImageDetailsView/MetaInfoForm/MetaInfoForm.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetaInfoForm = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var AttributesPager_1 = __importDefault(require("../../attributes/editMode/AttributesPager"));
+var helpers_1 = require("../helpers");
+var styles_1 = require("./styles");
+var MetaInfoForm = function (_a) {
+    var attributeType = _a.attributeType, imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder, attributeValue = _a.attributeValue, hasChanges = _a.hasChanges, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onAddAttributes = _a.onAddAttributes, onCancel = _a.onCancel, onApply = _a.onApply, mode = _a.mode;
+    var styles = styles_1.useStyles();
+    var notSystemAttributesList = helpers_1.getNotSystemAttributesList(attributeValue, attributeType, imageAttributeFieldsOrder);
+    var shouldShowActionButtons = notSystemAttributesList.length !== 0 || (notSystemAttributesList.length === 0 && hasChanges);
+    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+        react_1.default.createElement(Box_1.default, { className: styles.form }, notSystemAttributesList.map(function (_a) {
+            var attrType = _a.attrType, values = _a.values;
+            return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, parentUri: attributeValue.uri, attributeType: attrType, values: values, showEmptyEditors: mdm_sdk_1.isTempUri(attributeValue.uri), mode: mode, drawLines: false, onDeleteAttribute: onDeleteAttribute, onChangeAttribute: onChangeAttribute, onAddAttributes: onAddAttributes }));
+        })),
+        shouldShowActionButtons && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Divider_1.default, { className: styles.divider }),
+            react_1.default.createElement(Box_1.default, { className: styles.actions },
+                react_1.default.createElement(Button_1.default, { disabled: !hasChanges, onClick: onCancel, className: styles.cancelButton }, ui_i18n_1.default.text('Cancel')),
+                react_1.default.createElement(Button_1.default, { disabled: !hasChanges, onClick: onApply, color: "primary" }, ui_i18n_1.default.text('Apply')))))));
+};
+exports.MetaInfoForm = MetaInfoForm;

package/cjs/components/ImageDetailsView/MetaInfoForm/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    root: {},
+    form: {
+        padding: '10px 0'
+    },
+    divider: {
+        width: '100%',
+        height: '1px',
+        background: 'rgba(255,255,255,0.12)'
+    },
+    actions: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: '4px'
+    },
+    cancelButton: {
+        color: 'white',
+        marginRight: '8px'
+    }
+});