@reltio/components 1.4.698 → 1.4.702

package/components/attributes/readMode/AttributesPager/OneLineRenderer.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var constants_1 = require("../../../../constants");
+var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/CommentsContainer"));
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var OvIcon_1 = __importDefault(require("../../OvIcon"));
+var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
+var styles_1 = require("./styles");
+var OneLineRenderer = function (_a) {
+    var value = _a.value, nonOvValues = _a.nonOvValues, attributeType = _a.attributeType, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b;
+    var styles = styles_1.useOneLineStyles();
+    var label = attributeType.label;
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.collaborationWrapper, constants_1.COMMENTS_CONTAINER_VISIBILITY_AREA) },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.titleRow, styles.wrapper) },
+            showTitle && (react_1.default.createElement(Title_1.default, { label: label, className: classnames_1.default(styles.title, titleClassName), attributeType: attributeType })),
+            react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonOvValues, attributeType: attributeType, className: styles.ovIcon }),
+            react_1.default.createElement(Attribute_1.default, { className: classnames_1.default(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, inlined: true })),
+        react_1.default.createElement(CommentsContainer_1.default, { uri: value.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
+                uri: value.uri
+            }), objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE })));
+};
+exports.default = OneLineRenderer;

package/components/attributes/readMode/AttributesPager/SpecialRenderer.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var LocalOffer_1 = __importDefault(require("@material-ui/icons/LocalOffer"));
+var styles_1 = require("./styles");
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
+var Roles_1 = __importDefault(require("../SpecialAttributes/Roles"));
+var Tags_1 = __importDefault(require("../SpecialAttributes/Tags"));
+var SpecialRenderer = function (_a) {
+    var values = _a.values, attributeType = _a.attributeType, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b;
+    var styles = styles_1.useOneLineStyles();
+    var label = attributeType.label;
+    var renderIcon = function (className) {
+        return attributeType.uri === mdm_sdk_1.EntityAttrTypes.tags.uri ? react_1.default.createElement(LocalOffer_1.default, { className: className }) : null;
+    };
+    var renderValue = function (className) {
+        switch (attributeType.uri) {
+            case mdm_sdk_1.EntityAttrTypes.tags.uri:
+                return react_1.default.createElement(Tags_1.default, { className: className, values: values });
+            case mdm_sdk_1.EntityAttrTypes.roles.uri: {
+                return react_1.default.createElement(Roles_1.default, { className: className, values: values });
+            }
+            default: {
+                //startDate, endDate
+                return (react_1.default.createElement(Attribute_1.default, { className: className, attributeValue: { value: values[0] }, attributeType: attributeType, inlined: true }));
+            }
+        }
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.titleRow, styles.wrapper) },
+        showTitle && (react_1.default.createElement(react_1.default.Fragment, null,
+            renderIcon(styles.titleIcon),
+            react_1.default.createElement(Title_1.default, { label: label, className: styles.title, attributeType: attributeType }))),
+        renderValue(styles.attribute)));
+};
+exports.default = SpecialRenderer;

package/components/attributes/readMode/AttributesPager/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributesPager = void 0;
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = require("@reltio/mdm-module");
+var AttributesPager_1 = __importDefault(require("./AttributesPager"));
+exports.AttributesPager = AttributesPager_1.default;
+var mapStateToProps = null;
+var mapDispatchToProps = {
+    requestNextPageOfAttributeValues: mdm_module_1.profile.actions.requestNextPageOfAttributeValues
+};
+exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(AttributesPager_1.default);

package/components/attributes/readMode/AttributesPager/styles.js

@@ -0,0 +1,92 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiLineStyles = exports.useOneLineStyles = exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var fontSize = '13px';
+var lineHeight = '15px';
+var commonStyles = {
+    titleRow: {
+        display: 'block',
+        minHeight: '16px',
+        textIndent: '-1em',
+        paddingLeft: '1em'
+    },
+    title: {
+        whiteSpace: 'nowrap'
+    },
+    ovIcon: {
+        marginLeft: '8px',
+        marginRight: '-3px',
+        marginTop: '-1px',
+        textIndent: 0
+    }
+};
+exports.useStyles = styles_1.makeStyles({
+    paddingWrapper: {
+        paddingTop: '3px',
+        paddingBottom: '5px',
+        '&:last-child': {
+            paddingBottom: '2px'
+        }
+    },
+    paddingWrapperWithLines: {
+        paddingBottom: '1px',
+        '&:last-child': {
+            paddingBottom: '2px'
+        }
+    }
+});
+exports.useOneLineStyles = styles_1.makeStyles(__assign({ wrapper: {
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        flex: 1
+    }, collaborationWrapper: {
+        display: 'flex',
+        alignItems: 'start',
+        minHeight: '18px'
+    }, attribute: {
+        marginLeft: '8px',
+        paddingLeft: '4px',
+        paddingRight: '4px',
+        display: 'inline',
+        overflow: 'hidden',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word'
+    }, titleIcon: {
+        width: '16px',
+        height: '16px',
+        marginBottom: '-3px',
+        marginRight: '8px',
+        marginLeft: '1px',
+        color: 'rgba(0, 0, 0, 0.38)'
+    } }, commonStyles));
+exports.useMultiLineStyles = styles_1.makeStyles(__assign(__assign({ wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        fontSize: fontSize,
+        lineHeight: lineHeight
+    }, attribute: {
+        '&:last-child': {
+            marginBottom: 0
+        },
+        paddingLeft: '4px',
+        paddingRight: '4px',
+        marginLeft: '5px',
+        marginBottom: '4px',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word'
+    }, attributes: {
+        alignSelf: 'stretch'
+    } }, commonStyles), { titleRow: __assign(__assign({}, commonStyles.titleRow), { marginBottom: '3px' }) }));

package/components/attributes/readMode/AttributesView/AttributesView.js

@@ -0,0 +1,60 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var contexts_1 = require("../../../../contexts");
+var BasicView_1 = __importDefault(require("../../../BasicView/BasicView"));
+var FacetViewHeader_1 = __importDefault(require("../../../FacetViewHeader/FacetViewHeader"));
+var AttributesList_1 = __importDefault(require("../AttributesList"));
+var attributesView_1 = require("../../helpers/attributesView");
+var styles_1 = require("./styles");
+var AttributesView = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, metadata = _a.metadata, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f, _g = _a.attributesCount, attributesCount = _g === void 0 ? 16 : _g;
+    var styles = styles_1.useStyles();
+    var pivotingAttributes = react_redux_1.useSelector(mdm_module_1.default.selectors.getPivotingAttributes);
+    var filteredAttrTypes = react_1.useMemo(function () { return attributesView_1.getFilteredAttrTypes(metadata, entity.type, includeUris, excludeUris); }, [
+        excludeUris,
+        includeUris,
+        metadata,
+        entity.type
+    ]);
+    var attributesList = mdm_sdk_1.getAttributesListForReadMode(filteredAttrTypes, entity);
+    var isShowAttributeList = attributesList.filter(function (_a) {
+        var values = _a.values;
+        return !mdm_sdk_1.isEmptyValue(values);
+    }).length > 0;
+    return isShowAttributeList || !mdm_sdk_1.isEmptyValue(caption) ? (react_1.default.createElement(contexts_1.PivotingAttributeContext.Provider, { value: pivotingAttributes },
+        react_1.default.createElement(BasicView_1.default, { className: className },
+            caption && react_1.default.createElement(FacetViewHeader_1.default, { className: styles.header, title: caption }),
+            react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) }, isShowAttributeList ? (react_1.default.createElement(AttributesList_1.default, { entity: entity, attrTypes: filteredAttrTypes, parentUri: entity.uri, drawLines: false, max: attributesCount })) : (react_1.default.createElement(Typography_1.default, { className: styles.noData }, ui_i18n_1.default.text('No data found'))))))) : null;
+};
+exports.default = AttributesView;

package/components/attributes/readMode/AttributesView/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributesView = void 0;
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var AttributesView_1 = __importDefault(require("./AttributesView"));
+exports.AttributesView = AttributesView_1.default;
+var mapStateToProps = function (state) { return ({
+    metadata: mdm_module_1.default.selectors.getMetadata(state)
+}); };
+exports.default = react_redux_1.connect(mapStateToProps)(AttributesView_1.default);

package/components/attributes/readMode/AttributesView/styles.js

@@ -0,0 +1,19 @@
+"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({
+    attributesContainer: {
+        padding: '0 16px 16px 16px'
+    },
+    header: {
+        marginBottom: '4px'
+    },
+    noCaption: {
+        paddingTop: '16px'
+    },
+    noData: {
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.54)'
+    }
+});

package/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -0,0 +1,65 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var AttributesList_1 = __importDefault(require("../AttributesList/AttributesList"));
+var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
+var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/CommentsContainer"));
+var classnames_2 = require("../../../../constants/classnames");
+var styles_1 = require("./styles");
+var ComplexAttribute = function (_a) {
+    var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _b = _a.expanded, expandedProp = _b === void 0 ? false : _b, children = _a.children;
+    var styles = styles_1.useStyles();
+    var uri = attributeValue.uri;
+    var _c = react_1.useState(false), expanded = _c[0], setExpanded = _c[1];
+    react_1.useEffect(function () {
+        setExpanded(expandedProp);
+    }, [expandedProp]);
+    var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return mdm_sdk_1.isAnalyticAttribute(attributeType); });
+    var attributeListEntity = react_1.useMemo(function () { return ({
+        attributes: hasAnalyticValue ? null : attributeValue.value,
+        analyticsAttributes: hasAnalyticValue ? attributeValue.value : null
+    }); }, [attributeValue, hasAnalyticValue]);
+    return (react_1.default.createElement("div", { className: styles.complexContainer },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.labelContainer, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
+            react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
+            react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label } }, label),
+            react_1.default.createElement("div", { className: styles.spacer }),
+            react_1.default.createElement(CommentsContainer_1.default, { uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
+                    uri: attributeValue.uri
+                }), objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE })),
+        expanded && (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri }, children))));
+};
+ComplexAttribute.propTypes = {
+    children: prop_types_1.default.node,
+    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    attributeTypesList: prop_types_1.default.arrayOf(mdm_sdk_1.AttributeTypeType),
+    attributeValue: prop_types_1.default.oneOfType([mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]),
+    expanded: prop_types_1.default.bool
+};
+exports.default = ComplexAttribute;

package/components/attributes/readMode/ComplexAttribute/styles.js

@@ -0,0 +1,23 @@
+"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({
+    complexContainer: {
+        marginTop: '1px'
+    },
+    labelContainer: {
+        display: 'flex',
+        minHeight: '18px'
+    },
+    label: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 'normal',
+        paddingTop: '1px',
+        marginLeft: '-2px'
+    },
+    spacer: {
+        flex: 1
+    }
+});

package/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.js

@@ -0,0 +1,55 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var contexts_1 = require("../../../../contexts");
+var Image_1 = __importDefault(require("../../../Image/Image"));
+var ImageAttributesLine_1 = __importDefault(require("../../ImageAttributesLine"));
+var constants_1 = require("../../ImageAttributesLine/constants");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+var styles_1 = require("./styles");
+var ImageAttributesLine = function (_a) {
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, _c = _a.imageSize, imageSize = _c === void 0 ? constants_1.DEFAULT_IMAGE_SIZE : _c;
+    var styles = styles_1.useStyles(imageSize);
+    var appearance = react_1.useContext(contexts_1.HistoryDiffContext).appearance;
+    var renderImage = function (_a) {
+        var onOpenImageGalleryDialog = _a.onOpenImageGalleryDialog;
+        var renderImage = function (attribute) {
+            var _a;
+            var src = mdm_sdk_1.getImageAttributeOvThumbnailUrl(attribute);
+            var uri = attribute.uri;
+            var imageAppearance = historyAppearance_1.getHistoryAppearanceByUri(uri, appearance);
+            var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(imageAppearance);
+            return (react_1.default.createElement("div", { className: classnames_1.default(styles.image, (_a = {},
+                    _a[styles[historyAttributesClassName + 'Image']] = historyAttributesClassName,
+                    _a)), key: uri },
+                react_1.default.createElement(Image_1.default, { onClick: function () { return onOpenImageGalleryDialog(uri); }, className: styles[historyAttributesClassName], src: src, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
+        };
+        return renderImage;
+    };
+    return (react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, imageSize: imageSize }));
+};
+exports.default = ImageAttributesLine;

package/components/attributes/readMode/ImageAttributesLine/cross.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CROSS_ICON = void 0;
+exports.CROSS_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"stroke: #D1051E; stroke-width: 1\" viewBox=\"0 0 114 114\">\n\t<line x1=\"5\" y1=\"109\" x2=\"109\" y2=\"5\" />\n</svg>";

package/components/attributes/readMode/ImageAttributesLine/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImageAttributesLine_1 = require("./ImageAttributesLine");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImageAttributesLine_1).default; } });

package/components/attributes/readMode/ImageAttributesLine/styles.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var cross_inline_svg_1 = require("./cross.inline.svg");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+var BORDER_WIDTH = '3px';
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    image: function (_a) {
+        var imageMargin = _a.imageMargin, imageHeight = _a.imageHeight, imageWidth = _a.imageWidth;
+        return {
+            marginRight: imageMargin,
+            width: imageWidth,
+            height: imageHeight,
+            cursor: 'pointer',
+            '&:last-child': {
+                marginRight: 0
+            }
+        };
+    },
+    deleteAttributeImage: {
+        position: 'relative',
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            background: "url(" + mdm_sdk_1.svg2Url(cross_inline_svg_1.CROSS_ICON) + ") no-repeat",
+            backgroundColor: historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.deleteAttribute].backgroundColor,
+            pointerEvents: 'none'
+        }
+    },
+    updateAttributeImage: {
+        position: 'relative',
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.updateAttribute].backgroundColor,
+            pointerEvents: 'none'
+        }
+    },
+    deleteAttribute: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            width: imageWidth,
+            height: imageHeight,
+            boxSizing: 'border-box',
+            outline: BORDER_WIDTH + " solid " + historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.deleteAttribute].color,
+            outlineOffset: "-" + BORDER_WIDTH
+        };
+    },
+    insertAttribute: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            width: imageWidth,
+            height: imageHeight,
+            boxSizing: 'border-box',
+            outline: BORDER_WIDTH + " solid " + historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.insertAttribute].color,
+            outlineOffset: "-" + BORDER_WIDTH
+        };
+    },
+    updateAttribute: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            width: imageWidth,
+            height: imageHeight,
+            boxSizing: 'border-box',
+            outline: BORDER_WIDTH + " solid " + historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.updateAttribute].color,
+            outlineOffset: "-" + BORDER_WIDTH
+        };
+    },
+    number: {
+        color: theme.palette.primary.main,
+        fontSize: '24px',
+        lineHeight: '42px',
+        letterSpacing: 0,
+        padding: '36px 8px',
+        textAlign: 'center',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }
+}); });

package/components/attributes/readMode/NestedAttribute/NestedAttribute.js

@@ -0,0 +1,72 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../../contexts");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var PivotingTooltip_1 = require("../../PivotingAttributes/PivotingTooltip");
+var styles_1 = __importDefault(require("./styles"));
+var NestedAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, otherProps = __rest(_a, ["attributeValue", "attributeType"]);
+    var styles = styles_1.default();
+    var appearance = react_1.useContext(contexts_1.HistoryDiffContext).appearance;
+    var attributeLabel = react_1.useMemo(function () {
+        var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
+        var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
+        var label = attributeValue.label
+            ? attributeValue.label
+            : mdm_sdk_1.evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern);
+        return (react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { className: styles.pivotingTooltip, value: attributeValue, attributeType: attributeType },
+            react_1.default.createElement(Box_1.default, { component: "span", className: classnames_1.default(styles[historyAttributesClassName], styles.label) }, mdm_sdk_1.getLabel(label))));
+    }, [appearance, styles, attributeValue, attributeType]);
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ label: attributeLabel, attributeValue: attributeValue, attributeTypesList: mdm_sdk_1.getAttributeTypeSubAttributes({}, attributeType) }, otherProps)));
+};
+NestedAttribute.propTypes = mdm_sdk_1.NestedAttributeType;
+exports.default = react_1.memo(NestedAttribute);

package/components/attributes/readMode/NestedAttribute/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var NestedAttribute_1 = require("./NestedAttribute");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(NestedAttribute_1).default; } });

package/components/attributes/readMode/NestedAttribute/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+var styles = styles_1.makeStyles({
+    label: {
+        textDecoration: 'none',
+        padding: '0 4px'
+    },
+    updateAttribute: __assign({ width: 'fit-content' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.updateAttribute]),
+    insertAttribute: __assign({ width: 'fit-content' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.insertAttribute]),
+    deleteAttribute: __assign({ width: 'fit-content', textDecoration: 'line-through' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.deleteAttribute]),
+    pivotingTooltip: {
+        marginLeft: '4px'
+    }
+});
+exports.default = styles;