@reltio/components 1.4.701 → 1.4.705

package/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.js

@@ -0,0 +1,81 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../../contexts");
+var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var historyAppearance_1 = require("../helpers/historyAppearance");
+var styles_1 = __importDefault(require("./styles"));
+var ReferenceAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, metadata = _a.metadata, attributeType = _a.attributeType, uiPath = _a.uiPath, otherProps = __rest(_a, ["attributeValue", "metadata", "attributeType", "uiPath"]);
+    var styles = styles_1.default();
+    var refEntityURI = mdm_sdk_1.getReferencedEntityUriFromAttrValue(attributeValue);
+    var attributeTypeList = react_1.useMemo(function () { return mdm_sdk_1.getAttributeTypeSubAttributes(metadata, attributeType); }, [
+        attributeType,
+        metadata
+    ]);
+    var appearance = react_1.useContext(contexts_1.HistoryDiffContext).appearance;
+    var entityLabel = react_1.useMemo(function () {
+        var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
+        var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
+        return (react_1.default.createElement("a", { href: mdm_sdk_1.isEmptyValue(appearance) ? mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames_1.default(styles.label, styles[historyAttributesClassName]) },
+            mdm_sdk_1.getLabel(attributeValue.label),
+            attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
+    }, [
+        attributeValue.uri,
+        attributeValue.label,
+        attributeValue.relationshipLabel,
+        appearance,
+        refEntityURI,
+        styles,
+        uiPath
+    ]);
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel }, otherProps)));
+};
+ReferenceAttribute.propTypes = mdm_sdk_1.ReferenceAttributeType;
+exports.default = react_1.memo(ReferenceAttribute);

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

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

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

@@ -0,0 +1,30 @@
+"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(function (theme) { return ({
+    label: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none',
+        padding: '0 4px'
+    },
+    relationshipLabel: {
+        marginLeft: '4px',
+        color: theme.palette.text.primary
+    },
+    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])
+}); });
+exports.default = styles;

package/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var classnames_1 = __importDefault(require("classnames"));
+var classnames_2 = require("../../../../constants/classnames");
+var HistoryAppearanceContext_1 = require("../../../../contexts/HistoryAppearanceContext");
+var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/CommentsContainer"));
+var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeValue"));
+var PivotingTooltip_1 = require("../../PivotingAttributes/PivotingTooltip");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+var styles_1 = require("./styles");
+var SimpleAttribute = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.attributeType, attributeType = _c === void 0 ? null : _c, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var styles = styles_1.useStyles();
+    var appearance = react_1.useContext(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
+    var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
+    var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
+    var dataTypeValue = (react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType) }));
+    return inlined || historyClassName ? (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames_1.default((_b = {}, _b[styles.multilineAttribute] = !inlined, _b)) },
+            react_1.default.createElement("span", { className: styles[historyClassName] }, dataTypeValue)))) : (react_1.default.createElement("div", { className: classnames_1.default(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
+        react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
+            react_1.default.createElement("span", { className: styles.attributeValue }, dataTypeValue)),
+        react_1.default.createElement(CommentsContainer_1.default, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
+                uri: attributeValue.uri
+            }), objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE })));
+};
+exports.default = SimpleAttribute;

package/components/attributes/readMode/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/readMode/SimpleAttribute/styles.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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'start',
+        justifyContent: 'space-between'
+    },
+    commentsContainer: {
+        height: '15px',
+        marginRight: '-4px' // AttributesPager padding compensation
+    },
+    attributeValue: {
+        flex: 1,
+        padding: '0 4px'
+    },
+    updateAttribute: __assign({ width: 'fit-content', padding: '0 4px' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.updateAttribute]),
+    insertAttribute: __assign({ width: 'fit-content', padding: '0 4px' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.insertAttribute]),
+    deleteAttribute: __assign({ width: 'fit-content', padding: '0 4px', textDecoration: 'line-through' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.deleteAttribute]),
+    multilineAttribute: {
+        width: 'fit-content'
+    }
+});

package/components/attributes/readMode/SpecialAttributes/Roles/Role.js

@@ -0,0 +1,41 @@
+"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 HistoryAppearanceContext_1 = require("../../../../../contexts/HistoryAppearanceContext");
+var historyAppearance_1 = require("../../helpers/historyAppearance");
+var styles_1 = require("../styles");
+var Role = function (_a) {
+    var value = _a.value;
+    var styles = styles_1.useCommonStyles();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var appearance = react_1.useContext(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
+    var attributeAppearance = historyAppearance_1.getHistoryAppearanceBySpecialAttributeValue('roles', value, appearance);
+    var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
+    return react_1.default.createElement("span", { className: styles[historyClassName] }, mdm_sdk_1.getRoleLabel(metadata, value));
+};
+exports.default = Role;

package/components/attributes/readMode/SpecialAttributes/Roles/Roles.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 SpecialAttributesArray_1 = __importDefault(require("../SpecialAttributesArray"));
+var Role_1 = __importDefault(require("./Role"));
+var Roles = function (_a) {
+    var className = _a.className, values = _a.values;
+    return (react_1.default.createElement(SpecialAttributesArray_1.default, { values: values, className: className, Component: Role_1.default }));
+};
+exports.default = Roles;

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

package/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.js

@@ -0,0 +1,29 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var SpecialAttributesArray = function (_a) {
+    var className = _a.className, values = _a.values, Component = _a.Component;
+    return (react_1.default.createElement("div", { className: className }, values.map(function (value, index) { return (react_1.default.createElement(react_1.Fragment, { key: value },
+        react_1.default.createElement(Component, { value: value }),
+        index < values.length - 1 && ', ')); })));
+};
+exports.default = SpecialAttributesArray;

package/components/attributes/readMode/SpecialAttributes/Tags/Tag.js

@@ -0,0 +1,43 @@
+"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 Link_1 = __importDefault(require("@material-ui/core/Link"));
+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 HistoryAppearanceContext_1 = require("../../../../../contexts/HistoryAppearanceContext");
+var historyAppearance_1 = require("../../helpers/historyAppearance");
+var styles_1 = require("../styles");
+var Tag = function (_a) {
+    var value = _a.value;
+    var styles = styles_1.useCommonStyles();
+    var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
+    var appearance = react_1.useContext(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
+    var attributeAppearance = historyAppearance_1.getHistoryAppearanceBySpecialAttributeValue('tags', value, appearance);
+    var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
+    return (react_1.default.createElement(Link_1.default, { underline: "none", className: styles[historyClassName], href: mdm_sdk_1.getTagLink({ uiPath: uiPath, tag: value, entityUri: entity.uri }) }, value));
+};
+exports.default = Tag;

package/components/attributes/readMode/SpecialAttributes/Tags/Tags.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 SpecialAttributesArray_1 = __importDefault(require("../SpecialAttributesArray"));
+var Tag_1 = __importDefault(require("./Tag"));
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values;
+    return (react_1.default.createElement(SpecialAttributesArray_1.default, { values: values, className: className, Component: Tag_1.default }));
+};
+exports.default = Tags;

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

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

@@ -0,0 +1,20 @@
+"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.useCommonStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var historyAppearance_1 = require("../helpers/historyAppearance");
+exports.useCommonStyles = styles_1.makeStyles({
+    insertAttribute: __assign({ width: 'fit-content' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.insertAttribute]),
+    deleteAttribute: __assign({ width: 'fit-content', textDecoration: 'line-through', padding: '0 4px' }, historyAppearance_1.historyPalettes[historyAppearance_1.HistoryOperations.deleteAttribute])
+});

package/components/attributes/readMode/helpers/historyAppearance.js

@@ -0,0 +1,65 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHistoryAppearanceBySpecialAttributeValue = exports.getHistoryAppearanceByUri = exports.getHistoryAttributeClassName = exports.historyPalettes = exports.HistoryOperations = void 0;
+var ramda_1 = require("ramda");
+var HistoryOperations;
+(function (HistoryOperations) {
+    HistoryOperations["insertAttribute"] = "insertAttribute";
+    HistoryOperations["updateAttribute"] = "updateAttribute";
+    HistoryOperations["deleteAttribute"] = "deleteAttribute";
+})(HistoryOperations = exports.HistoryOperations || (exports.HistoryOperations = {}));
+exports.historyPalettes = (_a = {},
+    _a[HistoryOperations.insertAttribute] = {
+        color: '#599E0E'
+    },
+    _a[HistoryOperations.updateAttribute] = {
+        backgroundColor: 'rgba(255, 187, 0, 0.12)',
+        color: '#CC7500'
+    },
+    _a[HistoryOperations.deleteAttribute] = {
+        backgroundColor: 'rgba(255, 50, 0, 0.2)',
+        color: '#CF0E26'
+    },
+    _a);
+var getHistoryAttributeClassName = function (type) {
+    switch (type) {
+        case 'UPDATE_ATTRIBUTE':
+            return HistoryOperations.updateAttribute;
+        case 'UNDO_IGNORE_ATTRIBUTE':
+        case 'INSERT_ATTRIBUTE':
+            return HistoryOperations.insertAttribute;
+        case 'IGNORE_ATTRIBUTE':
+        case 'DELETE_ATTRIBUTE':
+            return HistoryOperations.deleteAttribute;
+        default:
+            return '';
+    }
+};
+exports.getHistoryAttributeClassName = getHistoryAttributeClassName;
+var ATTRIBUTE_DELIMITER = '/';
+var hasParent = ramda_1.pipe(ramda_1.split(ATTRIBUTE_DELIMITER), ramda_1.propSatisfies(ramda_1.lte(2), 'length'));
+var getParentUri = ramda_1.pipe(ramda_1.split(ATTRIBUTE_DELIMITER), ramda_1.slice(0, -2), ramda_1.join(ATTRIBUTE_DELIMITER));
+var getParentHistoryAppearanceByUri = ramda_1.curry(function (uri, history) {
+    return ramda_1.cond([
+        [ramda_1.has(uri), ramda_1.prop(uri)],
+        [function () { return hasParent(uri); }, getParentHistoryAppearanceByUri(getParentUri(uri))]
+    ])(history);
+});
+var hasModifiedChildren = function (uri) { return ramda_1.pipe(ramda_1.keys, ramda_1.any(ramda_1.startsWith(uri + ATTRIBUTE_DELIMITER))); };
+var getHistoryAppearanceByUri = function (uri, history) {
+    if (uri === void 0) { uri = ''; }
+    if (history === void 0) { history = {}; }
+    var state = getParentHistoryAppearanceByUri(uri, history);
+    if (ramda_1.isNil(state)) {
+        return hasModifiedChildren(uri)(history) ? 'UPDATE_ATTRIBUTE' : '';
+    }
+    return state;
+};
+exports.getHistoryAppearanceByUri = getHistoryAppearanceByUri;
+var getHistoryAppearanceBySpecialAttributeValue = function (name, value, history) {
+    var _a;
+    if (history === void 0) { history = {}; }
+    return (_a = history === null || history === void 0 ? void 0 : history[name]) === null || _a === void 0 ? void 0 : _a[value];
+};
+exports.getHistoryAppearanceBySpecialAttributeValue = getHistoryAppearanceBySpecialAttributeValue;

package/components/attributes/types/attributesView.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/attributes/types/index.js

@@ -0,0 +1,13 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./attributesView"), exports);

package/components/charts/ActiveShape/ActiveShape.js

@@ -0,0 +1,52 @@
+"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 __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 recharts_1 = require("recharts");
+var ActiveShape = function (_a) {
+    var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, startAngle = _a.startAngle, endAngle = _a.endAngle, fill = _a.fill, percent = _a.percent, value = _a.value, label = _a.label;
+    var RADIAN = Math.PI / 180;
+    var sin = Math.sin(-RADIAN * midAngle);
+    var cos = Math.cos(-RADIAN * midAngle);
+    var sx = cx + (outerRadius + 10) * cos;
+    var sy = cy + (outerRadius + 10) * sin;
+    var mx = cx + (outerRadius + 30) * cos;
+    var my = cy + (outerRadius + 30) * sin;
+    var circleX = mx + (cos >= 0 ? 1 : -1) * 20;
+    var circleY = my;
+    var textX = circleX + (cos >= 0 ? 1 : -1) * 12;
+    var textAnchor = cos >= 0 ? 'start' : 'end';
+    var linePath = "M" + sx + "," + sy + "L" + mx + "," + my + "L" + circleX + "," + circleY;
+    var sectorProps = {
+        cx: cx,
+        cy: cy,
+        innerRadius: innerRadius,
+        outerRadius: outerRadius,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        fill: fill
+    };
+    return (react_1.default.createElement("g", null,
+        react_1.default.createElement(recharts_1.Sector, __assign({}, sectorProps)),
+        react_1.default.createElement(recharts_1.Sector, __assign({}, sectorProps, { innerRadius: outerRadius + 6, outerRadius: outerRadius + 10 })),
+        react_1.default.createElement("path", { d: linePath, stroke: fill, fill: "none" }),
+        react_1.default.createElement("circle", { cx: circleX, cy: circleY, r: 2, fill: fill }),
+        react_1.default.createElement("text", { x: textX, y: circleY, textAnchor: textAnchor, fill: "#444", fontSize: 12, fontWeight: 500 }, label),
+        react_1.default.createElement("text", { x: textX, y: circleY, dy: 14, textAnchor: textAnchor, fill: "#000", opacity: 0.6, fontSize: 12 },
+            react_1.default.createElement("tspan", { fontWeight: 500 }, value),
+            react_1.default.createElement("tspan", { fontWeight: 400 }, " (" + percent + "%)"))));
+};
+exports.default = ActiveShape;

package/components/charts/BarChart/BarChart.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 __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 recharts_1 = require("recharts");
+var getBarChartSettings_1 = __importDefault(require("./getBarChartSettings"));
+var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
+var useClickableStyle_1 = require("../hooks/useClickableStyle");
+var BarChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
+    var _c = getBarChartSettings_1.default(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
+    var onBarClick = onItemClick && (function (_a) {
+        var group = _a.group;
+        return onItemClick(group);
+    });
+    var clickable = useClickableStyle_1.useClickableStyle(onBarClick);
+    return (react_1.default.createElement(recharts_1.BarChart, __assign({ width: width, height: height, data: data }, barChart),
+        react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),
+        react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltip)),
+        react_1.default.createElement(recharts_1.Bar, __assign({}, bar, { shape: react_1.default.createElement(recharts_1.Rectangle, { className: clickable }), onClick: onBarClick })),
+        react_1.default.createElement(recharts_1.XAxis, __assign({}, xAxis)),
+        react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis))));
+};
+exports.default = BarChart;

package/components/charts/BarChart/getBarChartSettings.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getBarChartSettings = function (_a) {
+    var margin = _a.margin, isHorizontal = _a.isHorizontal, isLabelRotated = _a.isLabelRotated;
+    return {
+        barChart: {
+            layout: isHorizontal ? 'vertical' : 'horizontal',
+            barCategoryGap: '30%',
+            margin: margin
+        },
+        bar: {
+            dataKey: 'value',
+            fill: isHorizontal ? '#9FC3FF' : '#0072CE'
+        },
+        xAxis: {
+            type: isHorizontal ? 'number' : 'category',
+            dataKey: isHorizontal ? '' : 'label',
+            tick: {
+                fill: '#000',
+                opacity: '0.54'
+            },
+            angle: isLabelRotated ? -45 : 0,
+            textAnchor: isLabelRotated ? 'end' : 'middle',
+            stroke: '#666'
+        },
+        yAxis: {
+            dataKey: isHorizontal ? 'label' : '',
+            type: isHorizontal ? 'category' : 'number',
+            tick: {
+                fill: '#000',
+                opacity: isHorizontal ? '0.87' : '0.54',
+                width: isHorizontal ? 150 : undefined
+            },
+            stroke: '#666',
+            tickCount: 8,
+            mirror: isHorizontal
+        },
+        cartesianGrid: {
+            strokeDasharray: '3 3',
+            stroke: '#666',
+            strokeOpacity: '0.4',
+            vertical: !isHorizontal
+        },
+        tooltip: {
+            cursor: {
+                fill: '#000',
+                opacity: '0.1'
+            }
+        }
+    };
+};
+exports.default = getBarChartSettings;