@reltio/components 1.4.701 → 1.4.702

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

@@ -0,0 +1,99 @@
+"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 Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
+var Edit_1 = __importDefault(require("@material-ui/icons/Edit"));
+var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeValue"));
+var DropDownMenuButton_1 = __importDefault(require("../../../DropDownMenuButton/DropDownMenuButton"));
+var SimpleAttributeEditor_1 = require("../SimpleAttributeEditor/SimpleAttributeEditor");
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var IgnoreButton_1 = __importDefault(require("../common/IgnoreButton"));
+var PinButton_1 = __importDefault(require("../common/PinButton"));
+var CrosswalkMenuItem_1 = __importDefault(require("./CrosswalkMenuItem/CrosswalkMenuItem"));
+var useAttributeState_1 = require("../hooks/useAttributeState");
+var contexts_1 = require("../../../../contexts");
+var styles_1 = require("./styles");
+var SimpleAttribute = function (_a) {
+    var className = _a.className, _b = _a.attributeType, attributeType = _b === void 0 ? null : _b, attributeValue = _a.attributeValue, crosswalk = _a.crosswalk, _c = _a.allowEdit, allowEdit = _c === void 0 ? true : _c, _d = _a.allowDelete, allowDelete = _d === void 0 ? true : _d, onIgnore = _a.onIgnore, onEdit = _a.onEdit, onPin = _a.onPin, onDelete = _a.onDelete;
+    var _e = useAttributeState_1.useAttributeState(), isReadingMode = _e.isReadingMode, isEditingMode = _e.isEditingMode, isHovered = _e.isHovered, onMouseOver = _e.onMouseOver, onMouseOut = _e.onMouseOut, setReadingMode = _e.setReadingMode, setEditingMode = _e.setEditingMode;
+    var containerRef = react_1.useRef();
+    var id = mdm_sdk_1.getLastUriPart(attributeValue.uri);
+    var canEdit = allowEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType) && !attributeType.system;
+    var canDelete = allowDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType) && !attributeType.system;
+    var isTemporary = mdm_sdk_1.isTempUri(attributeValue.uri);
+    var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
+    var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
+    var color = contexts_1.useCrosswalkColor(crosswalk);
+    var _f = contexts_1.useCrosswalkHighlight(crosswalk), isHighlighted = _f.isHighlighted, isDimmed = _f.isDimmed, highlightCrosswalk = _f.highlightCrosswalk, removeHighlight = _f.removeHighlight;
+    var styles = styles_1.useStyles({ isFilled: isHighlighted, isOpaque: !isDimmed, color: color });
+    var actions = [
+        {
+            crosswalk: crosswalk,
+            color: color
+        },
+        {
+            disabled: !canEdit,
+            text: ui_i18n_1.default.text('Edit'),
+            icon: react_1.default.createElement(Edit_1.default, null),
+            tooltip: canEdit ? null : ui_i18n_1.default.text("You don't have permissions to edit"),
+            onClick: function () { return setEditingMode(); },
+            id: 'edit'
+        },
+        {
+            disabled: !canDelete,
+            text: ui_i18n_1.default.text('Delete'),
+            icon: react_1.default.createElement(Delete_1.default, null),
+            tooltip: canDelete ? null : ui_i18n_1.default.text("You don't have permissions to delete"),
+            onClick: function () {
+                return onDelete({
+                    attributeType: attributeType,
+                    attributeValue: attributeValue,
+                    crosswalks: [crosswalk]
+                });
+            },
+            id: 'delete'
+        }
+    ];
+    var onClose = function () {
+        removeHighlight();
+        setReadingMode();
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: classnames_1.default(className, styles.root), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); }, onMouseOver: onMouseOver, onMouseOut: onMouseOut },
+        react_1.default.createElement("div", { className: styles.attributeValue },
+            react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType) })),
+        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 }); } })),
+            isHovered && (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: CrosswalkMenuItem_1.default, menuId: "simple-attribute-additional-actions-" + id, buttonComponent: SmallIconButton_1.SmallIconButton, buttonProps: {
+                    icon: MoreVert_1.default,
+                    size: 'XS'
+                }, onMenuClose: onClose, menuItems: actions }))),
+        isEditingMode && (react_1.default.createElement(SimpleAttributeEditor_1.SimpleAttributeEditor, { attributeType: attributeType, attributeValue: attributeValue, color: color, onClose: onClose, onEdit: function (value) { return onEdit({ attributeType: attributeType, attributeValue: value, crosswalk: crosswalk }); }, containerRef: containerRef }))));
+};
+exports.default = SimpleAttribute;

package/components/attributes/inline/SimpleAttribute/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 SimpleAttribute_1 = require("./SimpleAttribute");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SimpleAttribute_1).default; } });

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

@@ -0,0 +1,32 @@
+"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: function (_a) {
+        var isFilled = _a.isFilled, isOpaque = _a.isOpaque, color = _a.color;
+        return ({
+            height: '28px',
+            borderRadius: '4px',
+            background: isFilled ? color : "linear-gradient(to right, " + color + " 8px, rgba(0, 0, 0, 0.05) 8px)",
+            display: 'flex',
+            alignItems: 'center',
+            maxWidth: '230px',
+            opacity: isOpaque ? 1 : 0.38,
+            transition: 'opacity 0.3s'
+        });
+    },
+    attributeValue: {
+        marginLeft: '16px',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        flex: 1
+    },
+    actions: {
+        display: 'flex',
+        width: '71px',
+        justifyContent: 'flex-end',
+        marginRight: '4px'
+    }
+}); });

package/components/attributes/inline/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -0,0 +1,88 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleAttributeEditor = void 0;
+var react_1 = __importStar(require("react"));
+var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var editors_1 = require("../../../editors");
+var utils_1 = require("../../editMode/SimpleAttributeEditor/utils");
+var styles_1 = require("./styles");
+var SimpleAttributeEditor = function (_a) {
+    var _b;
+    var attributeType = _a.attributeType, attributeValue = _a.attributeValue, color = _a.color, containerRef = _a.containerRef, onClose = _a.onClose, onEdit = _a.onEdit;
+    var styles = styles_1.useStyles({
+        color: color,
+        containerWidth: containerRef.current ? containerRef.current.getBoundingClientRect().width : 0
+    });
+    var dataTypeDefinition = mdm_sdk_1.getAttrDataTypeDefinition(attributeType);
+    var initEditorValue = utils_1.attributeValueToEditorValue(attributeValue, dataTypeDefinition);
+    var _c = react_1.useState(initEditorValue), editorValue = _c[0], changeEditorValue = _c[1];
+    var TextFieldProps = {
+        className: styles.input,
+        InputProps: {
+            disableUnderline: true
+        }
+    };
+    var applyChangesAndClose = function () {
+        var editedValue = utils_1.editorValueToAttributeValue(attributeType, editorValue);
+        if (!ramda_1.isNil(editorValue) && !ramda_1.equals(editorValue, initEditorValue)) {
+            var editedAttributeValue = mdm_sdk_1.isLookupAttrType(attributeType)
+                ? {
+                    value: editedValue.value,
+                    lookupCode: editedValue.lookupCode
+                }
+                : {
+                    value: editorValue === '' && mdm_sdk_1.isNumericType(dataTypeDefinition.type) ? null : editedValue
+                };
+            onEdit(__assign(__assign({}, attributeValue), editedAttributeValue));
+        }
+        onClose();
+    };
+    var onKeyUp = function (event) {
+        if (event.key === 'Enter')
+            applyChangesAndClose();
+        else if (event.key === 'Escape')
+            onClose();
+    };
+    return (react_1.default.createElement(Popover_1.default, { open: !!containerRef, anchorEl: containerRef.current, anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, classes: {
+            paper: classnames_1.default(styles.paper, (_b = {}, _b["" + styles.booleanInput] = mdm_sdk_1.isBooleanType(dataTypeDefinition.type), _b)),
+            root: styles.popoverRoot
+        }, onKeyUp: onKeyUp, onBackdropClick: applyChangesAndClose },
+        react_1.default.createElement(editors_1.DataTypeValueEditor, { autoFocus: true, dataTypeDefinition: dataTypeDefinition, fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue, fullWidth: true })));
+};
+exports.SimpleAttributeEditor = SimpleAttributeEditor;

package/components/attributes/inline/SimpleAttributeEditor/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 ({
+    input: {
+        margin: 0
+    },
+    booleanInput: {
+        paddingLeft: '10px'
+    },
+    paper: function (_a) {
+        var color = _a.color, containerWidth = _a.containerWidth;
+        return ({
+            border: "3px solid " + color,
+            borderRadius: '4px',
+            width: containerWidth,
+            minWidth: '160px'
+        });
+    },
+    popoverRoot: {
+        zIndex: '10!important'
+    }
+}); });

package/components/attributes/inline/SimpleAttributesBlock/SimpleAttributesBlock.js

@@ -0,0 +1,61 @@
+"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 SimpleAttribute_1 = __importDefault(require("../SimpleAttribute"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_dnd_1 = require("react-dnd");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var SimpleAttributesBlock = function (_a) {
+    var attributeValues = _a.attributeValues, attributeType = _a.attributeType, parentUri = _a.parentUri, allowEdit = _a.allowEdit, crosswalksMap = _a.crosswalksMap, onAdd = _a.onAdd, props = __rest(_a, ["attributeValues", "attributeType", "parentUri", "allowEdit", "crosswalksMap", "onAdd"]);
+    var styles = styles_1.useStyles();
+    var _b = react_dnd_1.useDrop({
+        accept: 'Crosswalk',
+        canDrop: function (_a) {
+            var crosswalk = _a.crosswalk;
+            return (mdm_sdk_1.checkMetadataForCreate(mdm_sdk_1.ModeTypes.EDITING, attributeType) &&
+                allowEdit !== false &&
+                ((crosswalk.ownerType === 'relation' && mdm_sdk_1.isRelationTypeUri(attributeType.uri)) ||
+                    (crosswalk.ownerType === 'entity' && mdm_sdk_1.isEntityTypeUri(attributeType.uri))));
+        },
+        collect: function (monitor) { return ({
+            isDragItemOver: monitor.isOver() && monitor.canDrop()
+        }); },
+        drop: function (_a, monitor) {
+            var crosswalk = _a.crosswalk;
+            onAdd({ attributeType: attributeType, crosswalk: crosswalk, parentUri: parentUri, index: attributeValues.length });
+        }
+    }), isDragItemOver = _b[0].isDragItemOver, drop = _b[1];
+    return (react_1.default.createElement("div", { ref: drop, className: styles.simpleAttributesWrapper },
+        attributeValues.map(function (value) {
+            var _a;
+            return (_a = crosswalksMap[value.uri]) === null || _a === void 0 ? void 0 : _a.map(function (crosswalk) { return (react_1.default.createElement(SimpleAttribute_1.default, __assign({ key: value.uri + crosswalk.uri, attributeType: attributeType, attributeValue: value, crosswalk: crosswalk, allowEdit: allowEdit }, props))); });
+        }),
+        isDragItemOver && react_1.default.createElement("div", { className: styles.dropIndicator }, ui_i18n_1.default.text('Drop here'))));
+};
+exports.default = SimpleAttributesBlock;

package/components/attributes/inline/SimpleAttributesBlock/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 ({
+    simpleAttributesWrapper: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '4px',
+        width: '100%',
+        minHeight: '28px'
+    },
+    dropIndicator: {
+        height: '28px',
+        color: '#828282',
+        fontSize: '13px',
+        lineHeight: '28px',
+        background: 'rgba(0, 0, 0, 0.04)',
+        border: '1px dashed #828282',
+        borderRadius: '4px',
+        boxSizing: 'border-box',
+        padding: '0 12px'
+    }
+}); });

package/components/attributes/inline/common/ComplexAttributeLabel.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.ComplexAttributeLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var ComplexAttributeLabel = function (_a) {
+    var children = _a.children;
+    var styles = styles_1.useComplexAttributeLabelStyles();
+    return (react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label } }, children));
+};
+exports.ComplexAttributeLabel = ComplexAttributeLabel;

package/components/attributes/inline/common/CrosswalkIcon.js

@@ -0,0 +1,20 @@
+"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 contexts_1 = require("../../../../contexts");
+var SourceItem_1 = __importDefault(require("./SourceItem"));
+var LightArrowTooltip_1 = __importDefault(require("../../../LightArrowTooltip/LightArrowTooltip"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var CrosswalkIcon = function (_a) {
+    var crosswalk = _a.crosswalk, className = _a.className;
+    var color = contexts_1.useCrosswalkColor(crosswalk);
+    var _b = contexts_1.useCrosswalkHighlight(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
+    var styles = styles_1.useStyles({ isOpaque: !isDimmed, color: color });
+    return (react_1.default.createElement(LightArrowTooltip_1.default, { title: react_1.default.createElement(SourceItem_1.default, { crosswalk: crosswalk, color: color }), placement: 'top' },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
+};
+exports.default = CrosswalkIcon;

package/components/attributes/inline/common/DeleteButton.js

@@ -0,0 +1,13 @@
+"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 SmallIconButton_1 = require("../../../SmallIconButton");
+var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
+var DeleteButton = function (_a) {
+    var onClick = _a.onClick;
+    return react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Delete_1.default, onClick: onClick, size: "XS", disableRipple: true });
+};
+exports.default = DeleteButton;

package/components/attributes/inline/common/IgnoreButton.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 });
+var react_1 = __importDefault(require("react"));
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var Ignored_1 = __importDefault(require("../../../../icons/Ignored"));
+var IgnoredOutlined_1 = __importDefault(require("../../../../icons/IgnoredOutlined"));
+var IgnoreButton = function (_a) {
+    var isIgnored = _a.isIgnored, onClick = _a.onClick;
+    return (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: isIgnored ? Ignored_1.default : IgnoredOutlined_1.default, onClick: onClick, size: "XS", disableRipple: true }));
+};
+exports.default = IgnoreButton;

package/components/attributes/inline/common/PinButton.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 });
+var react_1 = __importDefault(require("react"));
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var Pin_1 = __importDefault(require("../../../../icons/Pin"));
+var PinOutlined_1 = __importDefault(require("../../../../icons/PinOutlined"));
+var PinButton = function (_a) {
+    var isPinned = _a.isPinned, onClick = _a.onClick;
+    return react_1.default.createElement(SmallIconButton_1.SmallIconButton, { onClick: onClick, icon: isPinned ? Pin_1.default : PinOutlined_1.default, size: "XS", disableRipple: true });
+};
+exports.default = PinButton;

package/components/attributes/inline/common/SourceItem.js

@@ -0,0 +1,27 @@
+"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_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_redux_1 = require("react-redux");
+var Eye_1 = __importDefault(require("../../../../icons/Eye"));
+var SourceIcon_1 = __importDefault(require("../../../SourceIcon/SourceIcon"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var SourceItem = function (_a) {
+    var crosswalk = _a.crosswalk, color = _a.color, className = _a.className;
+    var styles = styles_1.useStyles({ color: color });
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var label = mdm_sdk_1.findSourceSystemByUri(metadata, crosswalk.type).label;
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.sourceItem, className) },
+        react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: crosswalk.type }),
+        react_1.default.createElement("div", { className: styles.sourceInfo },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: styles.label }, label),
+                react_1.default.createElement(Eye_1.default, { className: styles.eyeIcon })),
+            react_1.default.createElement("div", { className: styles.crosswalkValue }, crosswalk.value))));
+};
+exports.default = SourceItem;

package/components/attributes/inline/common/__test__/CrosswalkIcon.spec.js

@@ -0,0 +1,75 @@
+"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 __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 enzyme_1 = require("enzyme");
+var CrosswalkIcon_1 = __importDefault(require("../CrosswalkIcon"));
+var crosswalksDisplay = __importStar(require("../../../../../contexts/CrosswalksDisplayContext"));
+var LightArrowTooltip_1 = __importDefault(require("../../../../LightArrowTooltip/LightArrowTooltip"));
+describe('CrosswalkIcon tests', function () {
+    var highlightCrosswalk = jest.fn();
+    var removeHighlight = jest.fn();
+    var color = '#FF0000';
+    beforeAll(function () {
+        jest.spyOn(crosswalksDisplay, 'useCrosswalkColor').mockReturnValue(color);
+        jest.spyOn(crosswalksDisplay, 'useCrosswalkHighlight').mockReturnValue({
+            isHighlighted: true,
+            isDimmed: false,
+            highlightCrosswalk: highlightCrosswalk,
+            removeHighlight: removeHighlight
+        });
+    });
+    var props = {
+        crosswalk: { type: 'testType', uri: 'crosswalkUri', value: '20' },
+        className: 'testClassName'
+    };
+    it('should render CrosswalkIcon correctly', function () {
+        var wrapper = enzyme_1.shallow(react_1.default.createElement(CrosswalkIcon_1.default, __assign({}, props)));
+        var tooltip = wrapper.find(LightArrowTooltip_1.default);
+        var title = tooltip.prop('title');
+        expect(title.props.crosswalk).toEqual(props.crosswalk);
+        expect(title.props.color).toEqual(color);
+        expect(wrapper.find('div').length).toBe(1);
+    });
+    it('should support highlighting', function () {
+        var wrapper = enzyme_1.shallow(react_1.default.createElement(CrosswalkIcon_1.default, __assign({}, props)));
+        var div = wrapper.find('div');
+        expect(div.prop('className')).toBe('crosswalkIcon testClassName');
+        div.simulate('mouseenter');
+        expect(highlightCrosswalk).toBeCalledTimes(1);
+        div.simulate('mouseleave');
+        expect(removeHighlight).toBeCalledTimes(1);
+    });
+});

package/components/attributes/inline/common/__test__/IgnoreButton.spec.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 enzyme_1 = require("enzyme");
+var react_1 = __importDefault(require("react"));
+var SmallIconButton_1 = require("../../../../SmallIconButton");
+var Ignored_1 = __importDefault(require("../../../../../icons/Ignored"));
+var IgnoredOutlined_1 = __importDefault(require("../../../../../icons/IgnoredOutlined"));
+var IgnoreButton_1 = __importDefault(require("../IgnoreButton"));
+describe('Ignore button test', function () {
+    var component, onClickFn;
+    var getButton = function (component) { return component.find(SmallIconButton_1.SmallIconButton); };
+    beforeEach(function () {
+        onClickFn = jest.fn();
+        component = enzyme_1.mount(react_1.default.createElement(IgnoreButton_1.default, { isIgnored: false, onClick: onClickFn }));
+    });
+    it('should show correct icon', function () {
+        expect(getButton(component).prop('icon')).toBe(IgnoredOutlined_1.default);
+        component.setProps({ isIgnored: true });
+        expect(getButton(component).prop('icon')).toBe(Ignored_1.default);
+    });
+    it('should call onClick', function () {
+        component.simulate('click');
+        expect(onClickFn).toHaveBeenCalled();
+    });
+});

package/components/attributes/inline/common/__test__/PinButton.spec.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 enzyme_1 = require("enzyme");
+var react_1 = __importDefault(require("react"));
+var SmallIconButton_1 = require("../../../../SmallIconButton");
+var Pin_1 = __importDefault(require("../../../../../icons/Pin"));
+var PinOutlined_1 = __importDefault(require("../../../../../icons/PinOutlined"));
+var PinButton_1 = __importDefault(require("../PinButton"));
+describe('Pin button test', function () {
+    var component, onClickFn;
+    var getButton = function (component) { return component.find(SmallIconButton_1.SmallIconButton); };
+    beforeEach(function () {
+        onClickFn = jest.fn();
+        component = enzyme_1.mount(react_1.default.createElement(PinButton_1.default, { isPinned: false, onClick: onClickFn }));
+    });
+    it('should show correct icon', function () {
+        expect(getButton(component).prop('icon')).toBe(PinOutlined_1.default);
+        component.setProps({ isPinned: true });
+        expect(getButton(component).prop('icon')).toBe(Pin_1.default);
+    });
+    it('should call onClick', function () {
+        component.simulate('click');
+        expect(onClickFn).toHaveBeenCalled();
+    });
+});