@reltio/components 1.4.876 → 1.4.880

package/components/ImageDetailsView/ImageDetailsViewCarousel/ImageDetailsViewCarousel.js

@@ -1,53 +1,27 @@
-"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) {
+import React from 'react';
+import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+import { getImageAttributeOvPreviewUrl } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import Image, { ImageSizesStyles } from '../../Image/Image';
+import { SmallIconButton } from '../../SmallIconButton';
+import { useStyles } from './styles';
+import { Thumbnails } from './Thumbnails/Thumbnails';
+export var ImageDetailsViewCarousel = function (_a) {
     var className = _a.className, attributeValues = _a.attributeValues, attributeValueIndex = _a.attributeValueIndex, setAttributeValueIndex = _a.setAttributeValueIndex;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var attributeValue = attributeValues[attributeValueIndex];
-    var mainImageSrc = mdm_sdk_1.getImageAttributeOvPreviewUrl(attributeValue);
+    var mainImageSrc = 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 })));
+    return (React.createElement("div", { className: classnames(styles.root, className) },
+        React.createElement("div", { className: styles.main },
+            attributeValueIndex > 0 && (React.createElement(SmallIconButton, { icon: NavigateBeforeIcon, className: classnames(styles.arrowButton, styles.arrowButtonPrev), onClick: onPrevImageButtonClick, size: "XL" })),
+            React.createElement(Image, { containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
+            attributeValueIndex !== attributeValues.length - 1 && (React.createElement(SmallIconButton, { icon: NavigateNextIcon, className: classnames(styles.arrowButton, styles.arrowButtonNext), onClick: onNextImageButtonClick, size: "XL" }))),
+        React.createElement(Thumbnails, { attributeValues: attributeValues, attributeValueIndex: attributeValueIndex, setAttributeValueIndex: setAttributeValueIndex })));
 };
-exports.ImageDetailsViewCarousel = ImageDetailsViewCarousel;

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

@@ -1,72 +1,46 @@
-"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) {
+import React, { useEffect, useRef } from 'react';
+import Grid from '@material-ui/core/Grid';
+import { getImageAttributeOvThumbnailUrl } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import Image from '../../../Image/Image';
+import { useStyles } from './styles';
+export var IMAGE_WIDTH = 96;
+export var IMAGE_PADDING = 16;
+export var CONTAINER_MARGIN = 12;
+export 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 () {
+    var styles = useStyles();
+    var gridRef = useRef(null);
+    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;
+            var currentElementPosition = attributeValueIndex * IMAGE_WIDTH + attributeValueIndex * IMAGE_PADDING + CONTAINER_MARGIN;
             if (containerWidth < currentElementPosition) {
                 if (gridRef.current.scroll) {
-                    if (currentElementPosition > containerWidth + exports.IMAGE_WIDTH + exports.IMAGE_PADDING) {
+                    if (currentElementPosition > containerWidth + IMAGE_WIDTH + IMAGE_PADDING) {
                         gridRef.current.scroll(currentElementPosition, 0);
                     }
                     else {
-                        gridRef.current.scroll(exports.IMAGE_WIDTH + exports.IMAGE_PADDING + containerScrollLeft, 0);
+                        gridRef.current.scroll(IMAGE_WIDTH + IMAGE_PADDING + containerScrollLeft, 0);
                     }
                 }
             }
-            else if (containerScrollLeft + exports.IMAGE_WIDTH > currentElementPosition) {
+            else if (containerScrollLeft + IMAGE_WIDTH > currentElementPosition) {
                 if (gridRef.current.scroll) {
-                    gridRef.current.scroll(currentElementPosition - exports.IMAGE_WIDTH, 0);
+                    gridRef.current.scroll(currentElementPosition - 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) {
+    return (React.createElement("div", { ref: gridRef, className: styles.thumbnails },
+        React.createElement(Grid, { 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 = {},
+            return (React.createElement(Grid, { item: true, key: uri },
+                React.createElement(Image, { onClick: function () { return setAttributeValueIndex(index); }, className: classnames(styles.thumb, (_b = {},
                         _b[styles.inactiveThumb] = attributeValueIndex !== index,
-                        _b)), src: mdm_sdk_1.getImageAttributeOvThumbnailUrl({ value: value }) })));
+                        _b)), src: getImageAttributeOvThumbnailUrl({ value: value }) })));
         }))));
 };
-exports.Thumbnails = Thumbnails;

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

@@ -1,8 +1,5 @@
-"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 ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     thumbnails: {
         marginLeft: '12px',
         marginBottom: '12px',

package/components/ImageDetailsView/ImageDetailsViewCarousel/styles.js

@@ -1,8 +1,5 @@
-"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 ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         display: 'flex',
         alignContent: 'center',

package/components/ImageDetailsView/ImageDetailsViewSidebar/ImageDetailsViewSidebar.js

@@ -1,61 +1,35 @@
-"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) {
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import i18n from 'ui-i18n';
+import Box from '@material-ui/core/Box';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import mdm from '@reltio/mdm-module';
+import classnames from 'classnames';
+import { MetaInfo } from '../MetaInfo/MetaInfo';
+import { useStyles } from './styles';
+export 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 styles = useStyles();
+    var entity = useSelector(mdm.selectors.getEntity) || {};
+    var modifiedEntity = useSelector(function (state) { return mdm.selectors.getModifiedEntity(state, entity === null || entity === void 0 ? void 0 : entity.uri); }) || {};
+    var isViewMode = useSelector(mdm.selectors.getIsViewMode);
     var entityToShow = isViewMode ? entity : modifiedEntity;
-    var imageAttributeConfig = react_redux_1.useSelector(mdm_module_1.default.selectors.getImageAttributesFieldsOrder) || {};
+    var imageAttributeConfig = useSelector(mdm.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 () {
+    var _b = useState(false), isDefault = _b[0], setIsDefault = _b[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 () {
+    var handleChange = 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 })))));
+    return (React.createElement(Box, { className: classnames(styles.root, className) },
+        React.createElement(Box, { className: styles.header },
+            React.createElement(Typography, { className: styles.headerTitle }, i18n.text('Details'))),
+        React.createElement(Box, { className: styles.bodyWrapper },
+            React.createElement(Box, { className: styles.body },
+                React.createElement(FormControlLabel, { classes: { root: styles.formControlLabel, label: styles.checkboxLabel }, control: React.createElement(Checkbox, { className: styles.checkbox, checked: isDefault, onChange: handleChange, color: "default" }), label: i18n.text('Set as default') }),
+                React.createElement(MetaInfo, { attributeType: attributeType, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeValue: attributeValue })))));
 };
-exports.ImageDetailsViewSidebar = ImageDetailsViewSidebar;

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

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

package/components/ImageDetailsView/ImageDetailsViewSidebar/styles.js

@@ -1,8 +1,5 @@
-"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 ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         position: 'relative',
         backgroundColor: '#333',

package/components/ImageDetailsView/MetaInfo/MetaInfo.js

@@ -1,29 +1,22 @@
-"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) {
+import React from 'react';
+import { useSelector } from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import { MetaInfoHeader } from '../MetaInfoHeader/MetaInfoHeader';
+import { MetaInfoList } from '../MetaInfoList/MetaInfoList';
+import { MetaInfoForm } from '../MetaInfoForm/MetaInfoForm';
+import { useEditMetaInfo } from '../hooks/useEditMetaInfo';
+import { darkTheme } from '../theme';
+var darkMuiTheme = createMuiTheme(darkTheme);
+export 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 })))));
+    var _b = 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 = useSelector(mdm.selectors.getMode);
+    var isEditableMode = useSelector(mdm.selectors.getIsEditableMode);
+    return (React.createElement(MuiThemeProvider, { theme: darkMuiTheme },
+        React.createElement(Box, null,
+            React.createElement(MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
+            React.createElement(MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
+            isEditableMode && (React.createElement(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/components/ImageDetailsView/MetaInfoForm/MetaInfoForm.js

@@ -1,32 +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.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) {
+import React from 'react';
+import i18n from 'ui-i18n';
+import { isTempUri } from '@reltio/mdm-sdk';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import Button from '@material-ui/core/Button';
+import AttributesPager from '../../attributes/editMode/AttributesPager';
+import { getNotSystemAttributesList } from '../helpers';
+import { useStyles } from './styles';
+export 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 styles = useStyles();
+    var notSystemAttributesList = 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) {
+    return (React.createElement(Box, { className: styles.root },
+        React.createElement(Box, { 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 }));
+            return (React.createElement(AttributesPager, { key: attrType.uri, parentUri: attributeValue.uri, attributeType: attrType, values: values, showEmptyEditors: 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')))))));
+        shouldShowActionButtons && (React.createElement(React.Fragment, null,
+            React.createElement(Divider, { className: styles.divider }),
+            React.createElement(Box, { className: styles.actions },
+                React.createElement(Button, { disabled: !hasChanges, onClick: onCancel, className: styles.cancelButton }, i18n.text('Cancel')),
+                React.createElement(Button, { disabled: !hasChanges, onClick: onApply, color: "primary" }, i18n.text('Apply')))))));
 };
-exports.MetaInfoForm = MetaInfoForm;

package/components/ImageDetailsView/MetaInfoForm/styles.js

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     root: {},
     form: {
         padding: '10px 0'

package/components/ImageDetailsView/MetaInfoHeader/MetaInfoHeader.js

@@ -1,52 +1,26 @@
-"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.MetaInfoHeader = void 0;
-var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var classnames_1 = __importDefault(require("classnames"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
-var MoreAttributesButton_1 = __importDefault(require("../../attributes/editMode/MoreAttributesButton"));
-var helpers_1 = require("../helpers");
-var styles_1 = require("./styles");
-var MetaInfoHeader = function (_a) {
+import React, { Fragment } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import MoreAttributesButton from '../../attributes/editMode/MoreAttributesButton';
+import { getMoreAttrTypes } from '../helpers';
+import { useStyles } from './styles';
+export var MetaInfoHeader = function (_a) {
     var _b;
     var attributeType = _a.attributeType, onAddAttributes = _a.onAddAttributes, uri = _a.uri;
-    var styles = styles_1.useStyles();
-    var moreAttrTypes = helpers_1.getMoreAttrTypes(attributeType);
+    var styles = useStyles();
+    var moreAttrTypes = getMoreAttrTypes(attributeType);
     var canAdd = Boolean(onAddAttributes);
     var handleApply = function (attrTypes) {
         if (onAddAttributes) {
             onAddAttributes(attrTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: uri }); }));
         }
     };
-    return (react_1.default.createElement(Box_1.default, null,
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.title, (_b = {}, _b[styles.canAdd] = canAdd, _b)) }, ui_i18n_1.default.text('Meta info')),
-        canAdd && (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(MoreAttributesButton_1.default, { label: ui_i18n_1.default.text('Attributes'), data: moreAttrTypes, dense: false, onApply: handleApply }),
-            react_1.default.createElement(Divider_1.default, { className: styles.divider })))));
+    return (React.createElement(Box, null,
+        React.createElement(Typography, { className: classnames(styles.title, (_b = {}, _b[styles.canAdd] = canAdd, _b)) }, i18n.text('Meta info')),
+        canAdd && (React.createElement(Fragment, null,
+            React.createElement(MoreAttributesButton, { label: i18n.text('Attributes'), data: moreAttrTypes, dense: false, onApply: handleApply }),
+            React.createElement(Divider, { className: styles.divider })))));
 };
-exports.MetaInfoHeader = MetaInfoHeader;

package/components/ImageDetailsView/MetaInfoHeader/styles.js

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     title: {
         marginBottom: '10px',
         color: 'white',

package/components/ImageDetailsView/MetaInfoList/MetaInfoItem/MetaInfoItem.js

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MetaInfoItem = void 0;
-var react_1 = __importDefault(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var styles_1 = require("./styles");
-var MetaInfoItem = function (_a) {
+import React from 'react';
+import i18n from 'ui-i18n';
+import { useStyles } from './styles';
+export var MetaInfoItem = function (_a) {
     var title = _a.title, content = _a.content, isLink = _a.isLink, children = _a.children;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement("span", { className: styles.title }, title),
-        isLink ? (react_1.default.createElement("a", { className: styles.link, href: content }, ui_i18n_1.default.text('link'))) : (react_1.default.createElement("span", { className: styles.content }, content || children))));
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.root },
+        React.createElement("span", { className: styles.title }, title),
+        isLink ? (React.createElement("a", { className: styles.link, href: content }, i18n.text('link'))) : (React.createElement("span", { className: styles.content }, content || children))));
 };
-exports.MetaInfoItem = MetaInfoItem;

package/components/ImageDetailsView/MetaInfoList/MetaInfoItem/styles.js

@@ -1,8 +1,5 @@
-"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 ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         fontSize: '13px',
         letterSpacing: 0,

package/components/ImageDetailsView/MetaInfoList/MetaInfoList.js

@@ -1,32 +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.MetaInfoList = 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 Box_1 = __importDefault(require("@material-ui/core/Box"));
-var AttributesPager_1 = __importDefault(require("../../attributes/readMode/AttributesPager"));
-var MetaInfoItem_1 = require("./MetaInfoItem/MetaInfoItem");
-var helpers_1 = require("../helpers");
-var styles_1 = require("./styles");
-var MetaInfoList = function (_a) {
+import React from 'react';
+import { useSelector } from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import Box from '@material-ui/core/Box';
+import AttributesPager from '../../attributes/readMode/AttributesPager';
+import { MetaInfoItem } from './MetaInfoItem/MetaInfoItem';
+import { getNotSystemAttributesList, getSystemAttributesList } from '../helpers';
+import { useStyles } from './styles';
+export var MetaInfoList = function (_a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType, imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder;
-    var styles = styles_1.useStyles();
-    var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
-    var systemAttributesList = helpers_1.getSystemAttributesList(attributeValue, imageAttributeFieldsOrder);
-    var notSystemAttributesList = helpers_1.getNotSystemAttributesList(attributeValue, attributeType, imageAttributeFieldsOrder);
-    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+    var styles = useStyles();
+    var isViewMode = useSelector(mdm.selectors.getIsViewMode);
+    var systemAttributesList = getSystemAttributesList(attributeValue, imageAttributeFieldsOrder);
+    var notSystemAttributesList = getNotSystemAttributesList(attributeValue, attributeType, imageAttributeFieldsOrder);
+    return (React.createElement(Box, { className: styles.root },
         systemAttributesList.map(function (_a) {
             var title = _a.title, value = _a.value, isLink = _a.isLink;
-            return (react_1.default.createElement(MetaInfoItem_1.MetaInfoItem, { key: title, isLink: isLink, title: title, content: value }));
+            return (React.createElement(MetaInfoItem, { key: title, isLink: isLink, title: title, content: value }));
         }),
         isViewMode &&
             notSystemAttributesList.map(function (_a) {
                 var attrType = _a.attrType, values = _a.values;
-                return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, attributeType: attrType, drawLines: false, values: values, titleClassName: styles.title, contentClassName: styles.content, parentUri: attributeValue.uri }));
+                return (React.createElement(AttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: false, values: values, titleClassName: styles.title, contentClassName: styles.content, parentUri: attributeValue.uri }));
             })));
 };
-exports.MetaInfoList = MetaInfoList;