@reltio/components 1.4.701 → 1.4.702

package/components/attributes/inline/AttributesPager/AttributesPager.js

@@ -0,0 +1,96 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ShowMore_1 = __importDefault(require("../../pagersCommon/ShowMore"));
+var ShowLess_1 = __importDefault(require("../../pagersCommon/ShowLess"));
+var SimpleAttributesBlock_1 = __importDefault(require("../SimpleAttributesBlock/SimpleAttributesBlock"));
+var NestedAttributesBlock_1 = __importDefault(require("../NestedAttributesBlock/NestedAttributesBlock"));
+var ReferenceAttributesBlock_1 = __importDefault(require("../ReferenceAttributesBlock/ReferenceAttributesBlock"));
+var ImageAttributesBlock_1 = __importDefault(require("../ImageAttributesBlock/ImageAttributesBlock"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var AttributesPager = function (_a) {
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, _c = _a.paging, paging = _c === void 0 ? {} : _c, _d = _a.max, max = _d === void 0 ? Infinity : _d, requestNextPage = _a.requestNextPage, props = __rest(_a, ["attributeType", "attributeValues", "paging", "max", "requestNextPage"]);
+    var styles = styles_1.useStyles();
+    var _e = react_1.useState(max), visibleValuesCount = _e[0], setVisibleValuesCount = _e[1];
+    var totalValues = ramda_1.propOr(attributeValues.length, 'totalValues', paging);
+    var hasPaging = max < totalValues;
+    var showMore = hasPaging && visibleValuesCount < totalValues;
+    var showLess = hasPaging && visibleValuesCount >= totalValues;
+    var onShowMore = function () {
+        if (attributeValues.length < totalValues) {
+            requestNextPage(); // TODO: implement
+        }
+        setVisibleValuesCount(visibleValuesCount + max);
+    };
+    var onShowLess = function () {
+        setVisibleValuesCount(max);
+    };
+    var shownValues = attributeValues.slice(0, visibleValuesCount);
+    var hiddenValuesCount = totalValues - visibleValuesCount;
+    var renderValues = function (values) {
+        switch (attributeType.type) {
+            case mdm_sdk_1.DataTypes.TYPE_NESTED:
+                return (react_1.default.createElement(NestedAttributesBlock_1.default, __assign({ className: styles.complexAttributesWrapper, attributeValues: values, attributeType: attributeType }, props)));
+            case mdm_sdk_1.DataTypes.TYPE_REFERENCE: {
+                var crosswalksMap = props.crosswalksMap, other = __rest(props, ["crosswalksMap"]);
+                return (react_1.default.createElement(ReferenceAttributesBlock_1.default, __assign({ className: styles.complexAttributesWrapper, attributeValues: values, attributeType: attributeType, crosswalksMap: crosswalksMap }, other)));
+            }
+            case mdm_sdk_1.DataTypes.TYPE_IMAGE: {
+                return (react_1.default.createElement(ImageAttributesBlock_1.default, __assign({ className: styles.complexAttributesWrapper, attributeValues: values, attributeType: attributeType }, props)));
+            }
+            default:
+                return react_1.default.createElement(SimpleAttributesBlock_1.default, __assign({ attributeValues: values, attributeType: attributeType }, props));
+        }
+    };
+    return (react_1.default.createElement("div", { className: styles.wrapper },
+        renderValues(shownValues),
+        showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: Math.min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
+        showLess && react_1.default.createElement(ShowLess_1.default, { onClick: onShowLess })));
+};
+exports.default = AttributesPager;

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

@@ -0,0 +1,14 @@
+"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 ({
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+    },
+    complexAttributesWrapper: {
+        width: '100%'
+    }
+}); });

package/components/attributes/inline/ComplexAttribute/ComplexAttribute.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 });
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var useAttributeState_1 = require("../hooks/useAttributeState");
+var index_1 = require("../../../index");
+var CrosswalkIcon_1 = __importDefault(require("../common/CrosswalkIcon"));
+var ramda_1 = require("ramda");
+var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
+var AttributesList_1 = __importDefault(require("../AttributesList/AttributesList"));
+var PinButton_1 = __importDefault(require("../common/PinButton"));
+var IgnoreButton_1 = __importDefault(require("../common/IgnoreButton"));
+var DeleteButton_1 = __importDefault(require("../common/DeleteButton"));
+var hooks_1 = require("../../../../hooks");
+var styles_1 = require("./styles");
+var ComplexAttribute = function (_a) {
+    var attributeType = _a.attributeType, attributeValue = _a.attributeValue, attributeTypesList = _a.attributeTypesList, label = _a.label, expandedProp = _a.expanded, crosswalksMap = _a.crosswalksMap, _b = _a.allowEdit, allowEdit = _b === void 0 ? true : _b, _c = _a.allowDelete, allowDelete = _c === void 0 ? true : _c, onPin = _a.onPin, onIgnore = _a.onIgnore, onDelete = _a.onDelete, onEdit = _a.onEdit, onAdd = _a.onAdd;
+    var styles = styles_1.useStyles();
+    var _d = useAttributeState_1.useAttributeState(), isReadingMode = _d.isReadingMode, onMouseOver = _d.onMouseOver, onMouseOut = _d.onMouseOut;
+    var canEdit = allowEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType);
+    var canDelete = allowDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType);
+    var isTemporary = mdm_sdk_1.isTempUri(attributeValue.uri);
+    var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
+    var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
+    var showDelete = !isReadingMode && canDelete;
+    var _e = react_1.useState(expandedProp || isTemporary), expanded = _e[0], setExpanded = _e[1];
+    hooks_1.useDidUpdateEffect(function () {
+        setExpanded(expandedProp);
+    }, [expandedProp]);
+    var crosswalks = ramda_1.pipe(ramda_1.pickBy(function (val, attrUri) { return mdm_sdk_1.areOneHierarchyUris(attrUri, attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri); }), ramda_1.values, ramda_1.flatten, ramda_1.uniqBy(ramda_1.prop('uri')))(crosswalksMap);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: styles.root, onMouseOver: onMouseOver, onMouseOut: onMouseOut },
+            react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
+            react_1.default.createElement("span", null,
+                label,
+                crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: crosswalk.value, crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
+            react_1.default.createElement(index_1.Spacer, null),
+            react_1.default.createElement("div", { className: styles.actions },
+                showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),
+                showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
+                showDelete && (react_1.default.createElement(DeleteButton_1.default, { onClick: function () {
+                        return onDelete({
+                            attributeType: attributeType,
+                            attributeValue: attributeValue,
+                            crosswalks: crosswalksMap[attributeValue.uri]
+                        });
+                    } })))),
+        expanded && (react_1.default.createElement(AttributesList_1.default, { attributeTypes: attributeTypesList, attributes: attributeValue.value, parentUri: attributeValue.uri, crosswalksMap: crosswalksMap, allowEdit: canEdit, allowDelete: canDelete, onPin: onPin, onIgnore: onIgnore, onDelete: onDelete, onEdit: onEdit, onAdd: onAdd }))));
+};
+exports.default = ComplexAttribute;

package/components/attributes/inline/ComplexAttribute/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(function () { return ({
+    root: {
+        display: 'flex',
+        minHeight: '20px'
+    },
+    actions: {
+        display: 'flex',
+        width: '65px',
+        justifyContent: 'flex-end',
+        flexShrink: 0,
+        alignSelf: 'center'
+    },
+    crosswalkIcon: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        '& + &': {
+            marginLeft: '4px'
+        }
+    }
+}); });

package/components/attributes/inline/ImageAttribute/ImageAttribute.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Image_1 = __importDefault(require("../../../Image/Image"));
+var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var styles_1 = require("./styles");
+var IMAGE_SIZE = { imageWidth: 55, imageHeight: 45 };
+var ImageAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, other = __rest(_a, ["attributeValue", "attributeType"]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ attributeValue: attributeValue, attributeType: attributeType, attributeTypesList: attributeType.attributes, label: react_1.default.createElement(Image_1.default, { containerClassName: styles.imageContainer, className: styles.image, src: mdm_sdk_1.getImageAttributeThumbnailUrl(attributeValue), size: IMAGE_SIZE }) }, other)));
+};
+exports.default = ImageAttribute;

package/components/attributes/inline/ImageAttribute/styles.js

@@ -0,0 +1,17 @@
+"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 ({
+    image: {
+        borderRadius: '4px',
+        background: 'white',
+        display: 'inline-block',
+        verticalAlign: 'middle'
+    },
+    imageContainer: {
+        display: 'inline',
+        lineHeight: '45px',
+        paddingRight: '8px'
+    }
+}); });

package/components/attributes/inline/ImageAttributesBlock/ImageAttributesBlock.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ImageAttribute_1 = __importDefault(require("../ImageAttribute/ImageAttribute"));
+var ImageAttributesBlock = function (_a) {
+    var className = _a.className, attributeValues = _a.attributeValues, props = __rest(_a, ["className", "attributeValues"]);
+    return (react_1.default.createElement("div", { className: className }, attributeValues.map(function (value) { return (react_1.default.createElement(ImageAttribute_1.default, __assign({ key: value.uri, attributeValue: value }, props))); })));
+};
+exports.default = ImageAttributesBlock;

package/components/attributes/inline/NestedAttribute/NestedAttribute.js

@@ -0,0 +1,37 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var ComplexAttributeLabel_1 = require("../common/ComplexAttributeLabel");
+var NestedAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, other = __rest(_a, ["attributeValue", "attributeType"]);
+    var label = (react_1.default.createElement(ComplexAttributeLabel_1.ComplexAttributeLabel, null, mdm_sdk_1.getLabel(mdm_sdk_1.evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern))));
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ attributeValue: attributeValue, attributeType: attributeType, attributeTypesList: attributeType.attributes, label: label }, other)));
+};
+exports.default = NestedAttribute;

package/components/attributes/inline/NestedAttributesBlock/NestedAttributesBlock.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var NestedAttribute_1 = __importDefault(require("../NestedAttribute/NestedAttribute"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var NestedAttributesBlock = function (_a) {
+    var className = _a.className, attributeValues = _a.attributeValues, attributeType = _a.attributeType, onAdd = _a.onAdd, parentUri = _a.parentUri, props = __rest(_a, ["className", "attributeValues", "attributeType", "onAdd", "parentUri"]);
+    var canCreate = mdm_sdk_1.checkMetadataForCreate(mdm_sdk_1.ModeTypes.EDITING, attributeType);
+    return attributeValues.length === 0 && canCreate ? (react_1.default.createElement(Button_1.default, { variant: "text", color: "primary", onClick: function () {
+            return onAdd({
+                parentUri: parentUri,
+                attributeType: attributeType
+            });
+        } }, ui_i18n_1.default.text('Create attribute'))) : (react_1.default.createElement("div", { className: className }, attributeValues.map(function (value) { return (react_1.default.createElement(NestedAttribute_1.default, __assign({ key: value.uri, attributeValue: value, attributeType: attributeType, onAdd: onAdd }, props))); })));
+};
+exports.default = NestedAttributesBlock;

package/components/attributes/inline/ReferenceAttribute/ReferenceAttribute.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(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 ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var ramda_1 = require("ramda");
+var ComplexAttributeLabel_1 = require("../common/ComplexAttributeLabel");
+var styles_1 = require("./styles");
+var ReferenceAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, other = __rest(_a, ["attributeValue", "attributeType"]);
+    var styles = styles_1.useStyles();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
+    var entityLabel = (react_1.default.createElement(ComplexAttributeLabel_1.ComplexAttributeLabel, null,
+        react_1.default.createElement("a", { href: mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: mdm_sdk_1.getReferencedEntityUriFromAttrValue(attributeValue) }), className: styles.label },
+            mdm_sdk_1.getLabel(attributeValue.label),
+            attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel)))));
+    var attributeTypesList = ramda_1.pipe(mdm_sdk_1.getReferencedRelationAttrTypesUris, ramda_1.map(function (attrTypeUri) { return mdm_sdk_1.findAttributeTypeByUri(metadata, attrTypeUri); }), ramda_1.reject(ramda_1.isNil))(attributeType);
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ attributeValue: attributeValue, attributeType: attributeType, attributeTypesList: attributeTypesList, label: entityLabel }, other)));
+};
+exports.default = ReferenceAttribute;

package/components/attributes/inline/ReferenceAttribute/styles.js

@@ -0,0 +1,14 @@
+"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 ({
+    label: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none'
+    },
+    relationshipLabel: {
+        marginLeft: '4px',
+        color: theme.palette.text.primary
+    }
+}); });

package/components/attributes/inline/ReferenceAttributesBlock/ReferenceAttributesBlock.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ReferenceAttribute_1 = __importDefault(require("../ReferenceAttribute/ReferenceAttribute"));
+var ReferenceAttributesBlock = function (_a) {
+    var className = _a.className, attributeValues = _a.attributeValues, props = __rest(_a, ["className", "attributeValues"]);
+    return (react_1.default.createElement("div", { className: className }, attributeValues.map(function (value) { return (react_1.default.createElement(ReferenceAttribute_1.default, __assign({ key: value.uri, attributeValue: value }, props))); })));
+};
+exports.default = ReferenceAttributesBlock;

package/components/attributes/inline/SimpleAttribute/CrosswalkMenuItem/CrosswalkMenuItem.js

@@ -0,0 +1,50 @@
+"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 MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var react_1 = __importStar(require("react"));
+var withTooltip_1 = __importDefault(require("../../../../../HOCs/withTooltip/withTooltip"));
+var SourceItem_1 = __importDefault(require("../../common/SourceItem"));
+var styles_1 = require("./styles");
+var MenuItemWithTooltip = withTooltip_1.default(MenuItem_1.default);
+var MenuItemContent = function (_a) {
+    var styles = _a.styles, icon = _a.icon, text = _a.text;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        icon,
+        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
+};
+var CrosswalkMenuItem = react_1.forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? function () { } : _b;
+    var styles = styles_1.useStyles();
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c, icon = item.icon, crosswalk = item.crosswalk, color = item.color;
+    var handleClick = function (e) {
+        onMenuClose(e);
+        onClick(e);
+    };
+    return crosswalk ? (react_1.default.createElement(SourceItem_1.default, { className: styles.sourceItem, color: color, crosswalk: crosswalk })) : (react_1.default.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-reltio-id": "crosswalk-menu-item" + id },
+        react_1.default.createElement(MenuItemContent, { icon: icon, text: text, styles: styles })));
+});
+CrosswalkMenuItem.displayName = 'CrosswalkMenuItem';
+exports.default = CrosswalkMenuItem;

package/components/attributes/inline/SimpleAttribute/CrosswalkMenuItem/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(function (theme) { return ({
+    menuItem: {
+        minHeight: '32px',
+        color: theme.palette.text.secondary
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0,
+        marginLeft: '16px'
+    },
+    sourceItem: {
+        borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+        paddingBottom: '8px',
+        paddingLeft: '16px',
+        maxWidth: '200px'
+    }
+}); });