@reltio/components 1.4.701 → 1.4.702

package/components/attributes/editMode/AttributesPager/AttributeRenderer.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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var ErrorMessage_1 = __importDefault(require("../../../ErrorWrapper/ErrorMessage"));
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var ShowLess_1 = __importDefault(require("../../pagersCommon/ShowLess"));
+var ShowMore_1 = __importDefault(require("../../pagersCommon/ShowMore"));
+var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
+var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
+var styles_1 = require("./styles");
+var utils_1 = require("./utils");
+var AttributeRenderer = function (_a) {
+    var max = _a.max, values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, showEmptyEditors = _a.showEmptyEditors, errorMessage = _a.errorMessage, errors = _a.errors, paging = _a.paging, crosswalks = _a.crosswalks, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useState(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
+    var _c = react_1.useState(false), hadDeletions = _c[0], setHadDeletions = _c[1];
+    var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri;
+    var isEditableMode = mdm_sdk_1.isEditableMode(mode);
+    var isEmptyValues = mdm_sdk_1.isEmptyValue(values);
+    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired) && isEmptyValues;
+    var emptyEditorValue = react_1.useRef(mdm_sdk_1.createNewAttribute({
+        parentUri: parentUri,
+        attributeType: attributeType
+    }));
+    var onAddOneMore = react_1.useCallback(function () {
+        setVisibleValuesCount(visibleValuesCount + 1);
+        var attribute = {
+            parentUri: parentUri,
+            index: visibleValuesCount,
+            attributeType: attributeType
+        };
+        return onAddAttributes(showEmpty && !mdm_sdk_1.isComplexAttribute(attributeType.type) ? [attribute, attribute] : [attribute]);
+    }, [visibleValuesCount, onAddAttributes, parentUri, attributeType, showEmpty]);
+    var onDelete = react_1.useCallback(ramda_1.pipe(onDeleteAttribute, ramda_1.T, setHadDeletions), [onDeleteAttribute, setHadDeletions]);
+    if (isEmptyValues && !showEmpty) {
+        return null;
+    }
+    if (showEmpty && isEmptyValues) {
+        values = [emptyEditorValue.current];
+    }
+    if (mdm_sdk_1.isEmptyValue(values)) {
+        return null;
+    }
+    var newValuesCount = (utils_1.filterNewValues(values) || []).length;
+    var totalOvValues = ramda_1.ifElse(ramda_1.has('totalOvValues'), ramda_1.pipe(ramda_1.prop('totalOvValues'), ramda_1.add(newValuesCount)), ramda_1.always(values.length))(paging);
+    var hasPaging = max < totalOvValues;
+    var showMore = hasPaging && visibleValuesCount < totalOvValues;
+    var showLess = hasPaging && visibleValuesCount >= totalOvValues;
+    var onShowMore = function () {
+        if (values.length < totalOvValues) {
+            requestNextPageOfAttributeValues({
+                parentUri: parentUri,
+                attributeTypeUri: attributeTypeUri,
+                attributeTypeName: name,
+                values: values,
+                defaultMaxValues: max
+            });
+        }
+        setVisibleValuesCount(visibleValuesCount + max);
+    };
+    var onShowLess = function () {
+        setVisibleValuesCount(max);
+    };
+    var shownValues = values.slice(0, visibleValuesCount);
+    var lastIndex = shownValues ? shownValues.length - 1 : 0;
+    var hiddenValuesCount = totalOvValues - visibleValuesCount;
+    return (react_1.default.createElement("div", { className: styles.wrapper },
+        react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title, attributeType: attributeType }),
+        isEditableMode && react_1.default.createElement(CardinalityMessage_1.default, { cardinality: cardinality }),
+        isEditableMode && react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage }),
+        react_1.default.createElement("div", { className: styles.attributesWrapper }, shownValues.map(function (value, idx) { return (react_1.default.createElement(Attribute_1.default, { key: value.uri, attributeValue: value, attributeType: attributeType, lazy: showEmpty && !isRequired, showEmptyEditors: showEmptyEditors, errors: errors, ownError: mdm_sdk_1.getAttributeOwnError(value, idx, errors), mode: mode, crosswalks: crosswalks, onAddOneMore: lastIndex === idx ? onAddOneMore : null, onAddAttributes: onAddAttributes, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute, onDeactivateError: onDeactivateError, additionalControlsRenderer: additionalControlsRenderer })); })),
+        showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: ramda_1.min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
+        showLess && react_1.default.createElement(ShowLess_1.default, { onClick: onShowLess })));
+};
+exports.default = AttributeRenderer;

package/components/attributes/editMode/AttributesPager/AttributesPager.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 });
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var BranchDecorator_1 = __importDefault(require("../../BranchDecorator/BranchDecorator"));
+var ImageAttributesLine_1 = __importDefault(require("../ImageAttributesLine"));
+var AttributeRenderer_1 = __importDefault(require("./AttributeRenderer"));
+var SpecialRenderer_1 = __importDefault(require("./SpecialRenderer"));
+var styles_1 = require("./styles");
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var RENDERER_TYPES;
+(function (RENDERER_TYPES) {
+    RENDERER_TYPES["imageLine"] = "imageLine";
+    RENDERER_TYPES["special"] = "special";
+    RENDERER_TYPES["default"] = "default";
+})(RENDERER_TYPES || (RENDERER_TYPES = {}));
+var AttributesPager = function (_a) {
+    var values = _a.values, //only ov
+    attributeType = _a.attributeType, _b = _a.mode, mode = _b === void 0 ? mdm_sdk_1.Mode.Viewing : _b, crosswalks = _a.crosswalks, drawLines = _a.drawLines, _c = _a.paging, paging = _c === void 0 ? {} : _c, parentUri = _a.parentUri, errors = _a.errors, errorMessage = _a.errorMessage, _d = _a.max, max = _d === void 0 ? Infinity : _d, showEmptyEditors = _a.showEmptyEditors, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
+    var styles = styles_1.useStyles();
+    var partitionByOv = ramda_1.partition(mdm_sdk_1.isOv);
+    var ovValues = partitionByOv(values)[0];
+    var commonProps = {
+        errorMessage: errorMessage,
+        errors: errors,
+        mode: mode,
+        parentUri: parentUri,
+        onAddAttributes: onAddAttributes,
+        onDeleteAttribute: onDeleteAttribute,
+        onChangeAttribute: onChangeAttribute,
+        onDeactivateError: onDeactivateError,
+        additionalControlsRenderer: additionalControlsRenderer
+    };
+    var renderAttribute = function () {
+        var type = ramda_1.cond([
+            [mdm_sdk_1.isSpecialAttribute, ramda_1.always(RENDERER_TYPES.special)],
+            [mdm_sdk_1.isImage, ramda_1.always(RENDERER_TYPES.imageLine)],
+            [ramda_1.T, ramda_1.always(RENDERER_TYPES.default)]
+        ])(attributeType);
+        switch (type) {
+            case RENDERER_TYPES.special: {
+                return (react_1.default.createElement(SpecialRenderer_1.default, __assign({ values: ovValues, attributeType: attributeType }, commonProps)));
+            }
+            case RENDERER_TYPES.imageLine:
+                return (react_1.default.createElement("div", { className: styles.wrapper },
+                    react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, attributeType: attributeType }),
+                    react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: ovValues, attributeType: attributeType, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute })));
+            default:
+                return (react_1.default.createElement(AttributeRenderer_1.default, __assign({ values: ovValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, showEmptyEditors: showEmptyEditors, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues }, commonProps)));
+        }
+    };
+    return react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines }, renderAttribute());
+};
+exports.default = react_1.memo(AttributesPager);

package/components/attributes/editMode/AttributesPager/CardinalityMessage.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var valueCaption = function (value) {
+    return ui_i18n_1.default.text('${value}', {
+        value: value === 1 ? ui_i18n_1.default.text('value') : ui_i18n_1.default.text('values')
+    });
+};
+var hasMinValue = ramda_1.has('minValue');
+var hasMaxValue = ramda_1.has('maxValue');
+var noMaxValue = ramda_1.pipe(hasMaxValue, ramda_1.not);
+var minValueIsOne = ramda_1.propSatisfies(function (minValue) { return minValue === 1; }, 'minValue');
+var exactCardinality = function (_a) {
+    var minValue = _a.minValue, maxValue = _a.maxValue;
+    return minValue && minValue === maxValue;
+};
+var generateMinCardinality = function (_a) {
+    var minValue = _a.minValue;
+    return ui_i18n_1.default.text('This attribute can have minimum ${minValue} ${minValueCaption}', {
+        minValue: ui_i18n_1.default.number(minValue, '0'),
+        minValueCaption: valueCaption(minValue)
+    });
+};
+var generateMaxCardinality = function (_a) {
+    var maxValue = _a.maxValue;
+    return ui_i18n_1.default.text('This attribute can have maximum ${maxValue} ${maxValueCaption}', {
+        maxValue: ui_i18n_1.default.number(maxValue, '0'),
+        maxValueCaption: valueCaption(maxValue)
+    });
+};
+var generateExactCardinality = function (_a) {
+    var minValue = _a.minValue;
+    return ui_i18n_1.default.text('This attribute should have ${minValue} ${minValueCaption}', {
+        minValue: ui_i18n_1.default.number(minValue, '0'),
+        minValueCaption: valueCaption(minValue)
+    });
+};
+var generateMinMaxCardinality = function (_a) {
+    var minValue = _a.minValue, maxValue = _a.maxValue;
+    return ui_i18n_1.default.text('${minCardinality} and maximum ${maxValue} ${maxValueCaption}', {
+        minCardinality: generateMinCardinality({ minValue: minValue }),
+        maxValue: ui_i18n_1.default.number(maxValue, '0'),
+        maxValueCaption: valueCaption(maxValue)
+    });
+};
+var getCardinalityMessage = ramda_1.cond([
+    [ramda_1.isNil, ramda_1.always('')],
+    [exactCardinality, generateExactCardinality],
+    [ramda_1.allPass([minValueIsOne, hasMaxValue]), generateMaxCardinality],
+    [ramda_1.allPass([minValueIsOne, noMaxValue]), ramda_1.always('')],
+    [ramda_1.allPass([hasMinValue, hasMaxValue]), generateMinMaxCardinality],
+    [hasMaxValue, generateMaxCardinality],
+    [hasMinValue, generateMinCardinality],
+    [ramda_1.T, ramda_1.always('')]
+]);
+var CardinalityMessage = function (_a) {
+    var cardinality = _a.cardinality;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.caption }, getCardinalityMessage(cardinality)));
+};
+CardinalityMessage.propTypes = {
+    cardinality: mdm_sdk_1.CardinalityType
+};
+exports.default = CardinalityMessage;

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

@@ -0,0 +1,86 @@
+"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 Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
+var ErrorMessage_1 = __importDefault(require("../../../ErrorWrapper/ErrorMessage"));
+var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
+var Tags_1 = __importDefault(require("../../readMode/SpecialAttributes/Tags")); //TODO: should be edit mode
+var Roles_1 = __importDefault(require("../../readMode/SpecialAttributes/Roles")); //TODO: should be edit mode
+var styles_1 = require("./styles");
+var SpecialRenderer = function (_a) {
+    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage"]);
+    var styles = styles_1.useStyles();
+    var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
+    var isEditableMode = mdm_sdk_1.isEditableMode(mode);
+    var emptyEditorValue = react_1.useRef(mdm_sdk_1.createNewAttribute({
+        parentUri: parentUri,
+        attributeType: attributeType
+    }));
+    var renderValue = function () {
+        switch (attributeType.uri) {
+            case mdm_sdk_1.EntityAttrTypes.tags.uri:
+                return react_1.default.createElement(Tags_1.default, { values: values });
+            case mdm_sdk_1.EntityAttrTypes.roles.uri: {
+                return react_1.default.createElement(Roles_1.default, { values: values });
+            }
+            default: {
+                //startDate, endDate
+                var value = __assign(__assign({}, emptyEditorValue.current), { value: values[0] || '' });
+                return react_1.default.createElement(Attribute_1.default, __assign({ attributeValue: value, attributeType: attributeType, mode: mode }, otherProps));
+            }
+        }
+    };
+    return (react_1.default.createElement(Box_1.default, { className: styles.wrapper },
+        react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title, attributeType: attributeType }),
+        isEditableMode && react_1.default.createElement(CardinalityMessage_1.default, { cardinality: cardinality }),
+        isEditableMode && react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage }),
+        react_1.default.createElement(Box_1.default, { className: styles.attributesWrapper }, renderValue())));
+};
+exports.default = SpecialRenderer;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributesPager = void 0;
+var react_redux_1 = require("react-redux");
+var re_reselect_1 = __importDefault(require("re-reselect"));
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var AttributesPager_1 = __importDefault(require("./AttributesPager"));
+exports.AttributesPager = AttributesPager_1.default;
+var permanentEmptyArray = [];
+var cachedErrorsSelector = re_reselect_1.default(mdm_module_1.default.selectors.getProfileErrors, function (_, _a) {
+    var parentUri = _a.parentUri;
+    return parentUri;
+}, function (_, _a) {
+    var attributeType = _a.attributeType;
+    return attributeType;
+}, function (errors, parentUri, attributeType) {
+    var pagerErrors = mdm_sdk_1.getAttributePagerActiveErrors(parentUri, attributeType, errors);
+    return pagerErrors.length === 0 ? permanentEmptyArray : pagerErrors;
+})(function (state, _a) {
+    var parentUri = _a.parentUri, attributeType = _a.attributeType;
+    return parentUri + "-" + attributeType.uri;
+});
+var mapStateToProps = function (state, ownProps) { return ({
+    errors: cachedErrorsSelector(state, ownProps),
+    errorMessage: mdm_sdk_1.getAttributePagerActiveTypeErrorMessage(ownProps.parentUri, ownProps.attributeType, mdm_module_1.default.selectors.getProfileErrors(state))
+}); };
+var mapDispatchToProps = {
+    requestNextPageOfAttributeValues: mdm_module_1.profile.actions.requestNextPageOfAttributeValues,
+    onDeactivateError: mdm_module_1.profile.errors.actions.errorDeactivated
+};
+exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(AttributesPager_1.default);

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

@@ -0,0 +1,33 @@
+"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 ({
+    caption: {
+        fontSize: '0.7rem',
+        opacity: 0.54
+    },
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+    },
+    attributesWrapper: {
+        width: '100%',
+        marginBottom: '10px'
+    },
+    link: {
+        display: 'flex',
+        marginTop: 4
+    },
+    'svg-icon__root': {
+        fontSize: '1rem'
+    },
+    title: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        paddingLeft: '12px',
+        paddingBottom: '4px',
+        color: theme.palette.text.secondary
+    }
+}); });

package/components/attributes/editMode/AttributesPager/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterNewValues = void 0;
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var filterNewValues = ramda_1.filter(ramda_1.propSatisfies(mdm_sdk_1.isTempUri, 'uri'));
+exports.filterNewValues = filterNewValues;

package/components/attributes/editMode/AttributesView/AttributesView.js

@@ -0,0 +1,67 @@
+"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 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var BasicView_1 = __importDefault(require("../../../BasicView/BasicView"));
+var FacetViewHeader_1 = __importDefault(require("../../../FacetViewHeader/FacetViewHeader"));
+var AttributesList_1 = __importDefault(require("../AttributesList"));
+var contexts_1 = require("../../../../contexts");
+var attributesView_1 = require("../../helpers/attributesView");
+var styles_1 = require("./styles");
+var AttributesView = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, mode = _a.mode, metadata = _a.metadata, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f;
+    var styles = styles_1.useStyles();
+    var dispatch = react_redux_1.useDispatch();
+    var viewId = react_1.useContext(contexts_1.ViewIdContext);
+    var modifiedEntity = react_redux_1.useSelector(function (state) { return mdm_module_1.default.selectors.getModifiedEntity(state, entity.uri) || {}; });
+    var filteredAttrTypes = react_1.useMemo(function () { return attributesView_1.getFilteredAttrTypes(metadata, modifiedEntity.type, includeUris, excludeUris); }, [excludeUris, includeUris, metadata, modifiedEntity.type]);
+    var onAddAttributes = react_1.useCallback(function (params) {
+        return ramda_1.pipe(mdm_module_1.profile.actions.addAttributes, dispatch)(params.map(function (param) { return (__assign(__assign({}, param), { viewId: viewId })); }));
+    }, [viewId, dispatch]);
+    var onChangeAttribute = react_1.useCallback(function (params) { return ramda_1.pipe(mdm_module_1.profile.actions.modifyAttribute, dispatch)(__assign(__assign({}, params), { viewId: viewId })); }, [viewId, dispatch]);
+    var onDeleteAttribute = react_1.useCallback(function (params) { return ramda_1.pipe(mdm_module_1.profile.actions.removeAttribute, dispatch)(__assign(__assign({}, params), { viewId: viewId })); }, [viewId, dispatch]);
+    return (react_1.default.createElement(BasicView_1.default, { className: className },
+        caption && react_1.default.createElement(FacetViewHeader_1.default, { className: styles.header, title: caption }),
+        react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) },
+            react_1.default.createElement(AttributesList_1.default, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: mdm_sdk_1.isTempUri(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))));
+};
+exports.default = AttributesView;

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    attributesContainer: {
+        padding: '0 16px 16px 16px'
+    },
+    header: {
+        marginBottom: '4px'
+    },
+    noCaption: {
+        paddingTop: '16px'
+    }
+});

package/components/attributes/editMode/ComplexAttribute/ComplexAttribute.js

@@ -0,0 +1,91 @@
+"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 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
+var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var ErrorWrapper_1 = __importDefault(require("../../../ErrorWrapper/ErrorWrapper"));
+var AttributesList_1 = __importDefault(require("../AttributesList/AttributesList"));
+var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
+var ComplexAttribute = function (_a) {
+    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, mode = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton;
+    var styles = styles_1.useStyles();
+    var uri = attributeValue.uri;
+    var isNew = mdm_sdk_1.isTempUri(uri);
+    var _b = react_1.useState(isNew), expanded = _b[0], setExpanded = _b[1];
+    var canDelete = react_1.useMemo(function () {
+        return mdm_sdk_1.checkCanDeleteAttribute({
+            attributeType: attributeType,
+            attributeValue: attributeValue,
+            mode: mode,
+            metadata: metadata,
+            isReltioCrosswalk: mdm_sdk_1.isReltioCrosswalk(crosswalks, attributeValue)
+        });
+    }, [attributeType, attributeValue, mode, metadata, crosswalks]);
+    var showDeleteButton = !hideDeleteButton && !!onDeleteAttribute && canDelete;
+    var onDeleteThis = function () { return onDeleteAttribute({ uri: uri, attributeType: attributeType, attributeValue: attributeValue }); };
+    var hasDescendantsWithErrors = react_1.useMemo(function () { return mdm_sdk_1.hasAttributeDescendantsWithErrors(attributeValue, errors); }, [
+        errors,
+        attributeValue
+    ]);
+    react_1.useEffect(function () {
+        if (hasDescendantsWithErrors) {
+            setExpanded(true);
+        }
+    }, [errors, hasDescendantsWithErrors]);
+    var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return mdm_sdk_1.isAnalyticAttribute(attributeType); });
+    var attributeListEntity = react_1.useMemo(function () { return ({
+        attributes: hasAnalyticValue ? null : attributeValue.value,
+        analyticsAttributes: hasAnalyticValue ? attributeValue.value : null
+    }); }, [attributeValue, hasAnalyticValue]);
+    var errorMessage = mdm_sdk_1.getErrorMessage(ownError) || (hasDescendantsWithErrors && ui_i18n_1.default.text('Has an incorrect value')) || '';
+    return lazy ? (react_1.default.createElement(Button_1.default, { variant: "text", color: "primary", onClick: onAddOneMore }, "Create attribute")) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: styles.editor },
+            react_1.default.createElement("div", { className: styles.titleContainer },
+                react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton }),
+                react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
+                    react_1.default.createElement("div", { className: styles.label }, label))),
+            react_1.default.createElement("div", { className: styles.actions },
+                additionalControlsRenderer && additionalControlsRenderer({ attributeType: attributeType, attributeValue: attributeValue }),
+                showDeleteButton && react_1.default.createElement(SmallIconButton_1.default, { icon: Delete_1.default, onClick: onDeleteThis, size: "L" }))),
+        expanded && (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypesList, entity: attributeListEntity, showEmptyEditors: showEmptyEditors || isNew, drawLines: true, parentUri: uri, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer }, children))));
+};
+ComplexAttribute.propTypes = __assign({ label: prop_types_1.default.string, children: prop_types_1.default.node, attributeTypesList: prop_types_1.default.arrayOf(mdm_sdk_1.AttributeTypeType), attributeValue: prop_types_1.default.oneOfType([mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]) }, mdm_sdk_1.ComplexAttributeType);
+exports.default = ComplexAttribute;