@reltio/components 1.4.699 → 1.4.703

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

@@ -0,0 +1,70 @@
+"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 enzyme_1 = require("enzyme");
+var react_1 = __importDefault(require("react"));
+var reactRedux = __importStar(require("react-redux"));
+var SourceIcon_1 = __importDefault(require("../../../../SourceIcon/SourceIcon"));
+var SourceItem_1 = __importDefault(require("../SourceItem"));
+var createStore = function () {
+    return {
+        tenant: { id: 't1' },
+        metadata: {
+            t1: {
+                sources: [
+                    {
+                        uri: 'configuration/sources/Reltio',
+                        label: 'Reltio',
+                        icon: 'images/source/reltio.png',
+                        abbreviation: 'Reltio'
+                    }
+                ]
+            }
+        }
+    };
+};
+var mockUseSelector = function (store) {
+    return jest.spyOn(reactRedux, 'useSelector').mockImplementation(function (selector) { return selector(store); });
+};
+var crosswalk = {
+    uri: 'entities/10wb4hEF/crosswalks/1PPwRPuk.3h28qA5Qw',
+    type: 'configuration/sources/Reltio',
+    value: '1PPwRPuk',
+    createDate: '2021-05-14T05:21:14.532Z',
+    updateDate: '2021-05-14T05:21:14.532Z',
+    reltioLoadDate: '2019-07-24T06:18:18.041Z',
+    singleAttributeUpdateDates: {
+        '123/attributes/String/123': '2021-07-08T07:09:14.781Z'
+    },
+    attributes: ['123/attributes/String/123']
+};
+describe('Source item tests', function () {
+    it('should show source icon and label and crosswalk value', function () {
+        mockUseSelector(createStore());
+        var wrapper = enzyme_1.shallow(react_1.default.createElement(SourceItem_1.default, { color: "color", crosswalk: crosswalk }));
+        expect(wrapper.find(SourceIcon_1.default).prop('sourceType')).toBe('configuration/sources/Reltio');
+        expect(wrapper.find('.label').text()).toBe('Reltio');
+        expect(wrapper.find('.crosswalkValue').text()).toBe('1PPwRPuk');
+    });
+});

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComplexAttributeLabelStyles = exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    sourceItem: {
+        display: 'flex',
+        overflow: 'hidden'
+    },
+    eyeIcon: {
+        height: '16px',
+        width: '16px',
+        marginLeft: '10px'
+    },
+    label: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        verticalAlign: 'top',
+        fontSize: '13px',
+        lineHeight: '16px'
+    },
+    sourceInfo: {
+        overflow: 'hidden'
+    },
+    crosswalkValue: {
+        color: 'rgba(0, 0, 0, 0.54)',
+        fontSize: '12px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    sourceIcon: function (_a) {
+        var color = _a.color;
+        return ({
+            height: '16px',
+            width: '16px',
+            marginRight: '9px',
+            fontSize: '14px',
+            backgroundColor: color
+        });
+    },
+    crosswalkIcon: function (_a) {
+        var color = _a.color, isOpaque = _a.isOpaque;
+        return ({
+            backgroundColor: color,
+            height: '12px',
+            width: '12px',
+            borderRadius: '30px',
+            opacity: isOpaque ? 1 : 0.38,
+            transition: 'opacity 0.3s'
+        });
+    }
+});
+exports.useComplexAttributeLabelStyles = styles_1.makeStyles(function () { return ({
+    label: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 'normal',
+        marginLeft: '2px',
+        marginRight: '8px'
+    }
+}); });

package/components/attributes/inline/hooks/useAttributeState.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAttributeState = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_1 = require("react");
+var AttributeStates;
+(function (AttributeStates) {
+    AttributeStates["READING"] = "READING";
+    AttributeStates["HOVERED"] = "HOVERED";
+    AttributeStates["EDITING"] = "EDITING";
+})(AttributeStates || (AttributeStates = {}));
+var HIDE_INTERVAL = 50;
+var useAttributeState = function () {
+    var _a = react_1.useState(null), attributeState = _a[0], setAttributeState = _a[1];
+    var isReadingMode = attributeState === AttributeStates.READING;
+    var isEditingMode = attributeState === AttributeStates.EDITING;
+    var isHovered = attributeState === AttributeStates.HOVERED;
+    react_1.useEffect(function () {
+        setAttributeState(AttributeStates.READING);
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var setAttributeStateDebounced = react_1.useCallback(mdm_sdk_1.debounce(setAttributeState, HIDE_INTERVAL), []);
+    var onMouseOver = react_1.useCallback(function () {
+        if (!isEditingMode)
+            setAttributeStateDebounced(AttributeStates.HOVERED);
+    }, [setAttributeStateDebounced, isEditingMode]);
+    var onMouseOut = react_1.useCallback(function () {
+        if (!isEditingMode)
+            setAttributeStateDebounced(AttributeStates.READING);
+    }, [setAttributeStateDebounced, isEditingMode]);
+    var setReadingMode = react_1.useCallback(function () { return setAttributeState(AttributeStates.READING); }, [setAttributeState]);
+    var setEditingMode = react_1.useCallback(function () { return setAttributeState(AttributeStates.EDITING); }, [setAttributeState]);
+    return {
+        setReadingMode: setReadingMode,
+        setEditingMode: setEditingMode,
+        onMouseOut: onMouseOut,
+        onMouseOver: onMouseOver,
+        isReadingMode: isReadingMode,
+        isEditingMode: isEditingMode,
+        isHovered: isHovered
+    };
+};
+exports.useAttributeState = useAttributeState;

package/components/attributes/inline/index.js

@@ -0,0 +1,25 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineImageAttribute = exports.InlineReferenceAttribute = exports.InlineAttributesPager = exports.InlineNestedAttribute = void 0;
+__exportStar(require("./types"), exports);
+var NestedAttribute_1 = require("./NestedAttribute/NestedAttribute");
+Object.defineProperty(exports, "InlineNestedAttribute", { enumerable: true, get: function () { return __importDefault(NestedAttribute_1).default; } });
+var AttributesPager_1 = require("./AttributesPager/AttributesPager");
+Object.defineProperty(exports, "InlineAttributesPager", { enumerable: true, get: function () { return __importDefault(AttributesPager_1).default; } });
+var ReferenceAttribute_1 = require("./ReferenceAttribute/ReferenceAttribute");
+Object.defineProperty(exports, "InlineReferenceAttribute", { enumerable: true, get: function () { return __importDefault(ReferenceAttribute_1).default; } });
+var ImageAttribute_1 = require("./ImageAttribute/ImageAttribute");
+Object.defineProperty(exports, "InlineImageAttribute", { enumerable: true, get: function () { return __importDefault(ImageAttribute_1).default; } });

package/components/attributes/inline/types/AddAttributeEvent.js

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

package/components/attributes/inline/types/CrosswalksMap.js

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

package/components/attributes/inline/types/DeleteAttributeEvent.js

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

package/components/attributes/inline/types/EditAttributeEvent.js

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

package/components/attributes/inline/types/IgnoreAttributeEvent.js

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

package/components/attributes/inline/types/PinAttributeEvent.js

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

package/components/attributes/inline/types/index.js

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

package/components/attributes/pagersCommon/ShowLess.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var KeyboardArrowUp_1 = __importDefault(require("@material-ui/icons/KeyboardArrowUp"));
+var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var ShowLess = function (_a) {
+    var onClick = _a.onClick;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Link_1.default, { component: "button", variant: "caption", className: styles.link, onClick: onClick, underline: "none" },
+        react_1.default.createElement(KeyboardArrowUp_1.default, { className: styles['svg-icon__root'] }),
+        ui_i18n_1.default.text('Show less')));
+};
+exports.default = ShowLess;

package/components/attributes/pagersCommon/ShowMore.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 KeyboardArrowDown_1 = __importDefault(require("@material-ui/icons/KeyboardArrowDown"));
+var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var ShowMore = function (_a) {
+    var moreNumber = _a.moreNumber, valueNumber = _a.valueNumber, onClick = _a.onClick;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Link_1.default, { component: "button", variant: "caption", className: styles.link, onClick: onClick, underline: "none" },
+        react_1.default.createElement(KeyboardArrowDown_1.default, { className: styles['svg-icon__root'] }),
+        moreNumber && valueNumber
+            ? ui_i18n_1.default.text('Show ${moreNumber} more of remaining ${valueNumber} value', { moreNumber: moreNumber, valueNumber: valueNumber })
+            : ui_i18n_1.default.text('Show more')));
+};
+exports.default = ShowMore;

package/components/attributes/pagersCommon/styles.js

@@ -0,0 +1,13 @@
+"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({
+    link: {
+        display: 'flex',
+        marginTop: 4
+    },
+    'svg-icon__root': {
+        fontSize: '1rem'
+    }
+});

package/components/attributes/readMode/AttributeValuesBlock/AttributeValuesBlock.js

@@ -0,0 +1,73 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_1 = __importStar(require("react"));
+var __1 = require("../../..");
+var ImageAttributesLine_1 = __importDefault(require("../ImageAttributesLine"));
+var renderAttributesList = function (_a) {
+    var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, (values || []).map(function (attributeValue) { return (react_1.default.createElement("div", { key: attributeValue.uri, className: valueContainerClassName },
+        react_1.default.createElement(__1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))); })));
+};
+var AttributeValuesBlock = function (_a) {
+    var expanded = _a.expanded, props = __rest(_a, ["expanded"]);
+    var attributeType = props.attributeType, values = props.values, valueContainerClassName = props.valueContainerClassName;
+    switch (attributeType.type) {
+        case mdm_sdk_1.DataTypes.TYPE_NESTED:
+        case mdm_sdk_1.DataTypes.TYPE_REFERENCE: {
+            return renderAttributesList(__assign({ expanded: expanded }, props));
+        }
+        case mdm_sdk_1.DataTypes.TYPE_IMAGE: {
+            return (react_1.default.createElement("div", { className: valueContainerClassName },
+                react_1.default.createElement(ImageAttributesLine_1.default, { attributeType: attributeType, attributeValues: values, imageSize: { imageHeight: 40, imageWidth: 40, imageMargin: 2 } })));
+        }
+        default: {
+            return renderAttributesList(__assign({}, props));
+        }
+    }
+};
+exports.default = react_1.memo(AttributeValuesBlock);

package/components/attributes/readMode/AttributesFactory/Attribute.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var AttributesFactory_1 = __importDefault(require("./AttributesFactory"));
+var Attribute = function (props) {
+    var attributeType = props.attributeType;
+    return AttributesFactory_1.default.build(attributeType, props);
+};
+exports.default = Attribute;

package/components/attributes/readMode/AttributesFactory/AttributesFactory.js

@@ -0,0 +1,38 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SimpleAttribute_1 = __importDefault(require("../SimpleAttribute"));
+var NestedAttribute_1 = __importDefault(require("../NestedAttribute"));
+var ReferenceAttribute_1 = __importDefault(require("../ReferenceAttribute"));
+var ReadModeAttributesFactory = /** @class */ (function () {
+    function ReadModeAttributesFactory() {
+    }
+    ReadModeAttributesFactory.build = function (attributeType, props) {
+        if (props === void 0) { props = {}; }
+        switch (attributeType.type) {
+            case mdm_sdk_1.DataTypes.TYPE_NESTED:
+                return react_1.default.createElement(NestedAttribute_1.default, __assign({}, props));
+            case mdm_sdk_1.DataTypes.TYPE_REFERENCE:
+                return react_1.default.createElement(ReferenceAttribute_1.default, __assign({}, props));
+            default:
+                return react_1.default.createElement(SimpleAttribute_1.default, __assign({}, props));
+        }
+    };
+    return ReadModeAttributesFactory;
+}());
+exports.default = ReadModeAttributesFactory;

package/components/attributes/readMode/AttributesList/AttributesList.js

@@ -0,0 +1,71 @@
+"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 ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var BranchDecorator_1 = __importDefault(require("../../BranchDecorator/BranchDecorator"));
+var AttributesPager_1 = __importDefault(require("../AttributesPager"));
+var ShowMore_1 = __importDefault(require("../../pagersCommon/ShowMore"));
+var ShowLess_1 = __importDefault(require("../../pagersCommon/ShowLess"));
+var constants_1 = require("../../../../constants");
+var attributesView_1 = require("../../helpers/attributesView");
+var AttributesList = function (_a) {
+    var attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, drawLines = _a.drawLines, children = _a.children, className = _a.className, max = _a.max, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? constants_1.ALWAYS_VISIBLE_TYPE_URIS : _b;
+    var _c = react_1.useState(max || Infinity), visibleValuesCount = _c[0], setVisibleValuesCount = _c[1];
+    var pagersData = react_1.useMemo(function () { return mdm_sdk_1.getAttributesListForReadMode(attrTypes, entity); }, [attrTypes, entity]);
+    var _d = react_1.useMemo(function () { return attributesView_1.splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _d[0], regularPagersData = _d[1];
+    var visibleAttributePagersData = regularPagersData.slice(0, visibleValuesCount);
+    var showMore = max && visibleAttributePagersData.length < regularPagersData.length;
+    var showLess = max && visibleAttributePagersData.length >= regularPagersData.length && max < visibleAttributePagersData.length;
+    var decoratorProps = {
+        enabled: drawLines
+    };
+    var onShowMore = function () {
+        setVisibleValuesCount(Infinity);
+    };
+    var onShowLess = function () {
+        setVisibleValuesCount(max);
+    };
+    return (react_1.default.createElement("div", { className: className },
+        children && react_1.default.createElement(BranchDecorator_1.default, __assign({}, decoratorProps), children),
+        visibleAttributePagersData.concat(alwaysVisiblePagersData).map(function (_a) {
+            var attrType = _a.attrType, values = _a.values;
+            return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: ramda_1.path(['paging', attrType.uri], entity.attributes), parentUri: parentUri }));
+        }),
+        showMore && react_1.default.createElement(ShowMore_1.default, { onClick: onShowMore }),
+        showLess && react_1.default.createElement(ShowLess_1.default, { onClick: onShowLess })));
+};
+exports.default = react_1.memo(AttributesList);

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

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

@@ -0,0 +1,76 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var BranchDecorator_1 = __importDefault(require("../../BranchDecorator/BranchDecorator"));
+var OneLineRenderer_1 = __importDefault(require("./OneLineRenderer"));
+var MultiLineRenderer_1 = __importDefault(require("./MultiLineRenderer"));
+var ImageAttributesLine_1 = __importDefault(require("../ImageAttributesLine"));
+var SpecialRenderer_1 = __importDefault(require("./SpecialRenderer"));
+var RENDERER_TYPES = {
+    oneLine: 'oneLine',
+    multiLine: 'multiLine',
+    imageLine: 'imageLine',
+    special: 'special'
+};
+var AttributesPager = function (_a) {
+    var _b, _c;
+    var values = _a.values, attributeType = _a.attributeType, drawLines = _a.drawLines, _d = _a.paging, paging = _d === void 0 ? {} : _d, parentUri = _a.parentUri, _e = _a.max, max = _e === void 0 ? Infinity : _e, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, _f = _a.showTitle, showTitle = _f === void 0 ? true : _f;
+    var styles = styles_1.useStyles();
+    var partitionByOv = ramda_1.partition(mdm_sdk_1.isOv);
+    if (!values || !values.length) {
+        return null;
+    }
+    var _g = partitionByOv(values), ovValues = _g[0], nonOvValues = _g[1];
+    var totalOvValues = ramda_1.ifElse(ramda_1.has('totalOvValues'), ramda_1.prop('totalOvValues'), ramda_1.always(ovValues.length))(paging);
+    var isOneLineRender = totalOvValues === 1 && !mdm_sdk_1.isComplexAttribute(attributeType);
+    var render = 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.always(isOneLineRender), ramda_1.always(RENDERER_TYPES.oneLine)],
+            [ramda_1.T, ramda_1.always(RENDERER_TYPES.multiLine)]
+        ])(attributeType);
+        switch (type) {
+            case RENDERER_TYPES.oneLine:
+                return (react_1.default.createElement(OneLineRenderer_1.default, { value: ovValues[0], nonOvValues: nonOvValues, attributeType: attributeType, titleClassName: titleClassName, contentClassName: contentClassName, showTitle: showTitle }));
+            case RENDERER_TYPES.multiLine:
+                return (react_1.default.createElement(MultiLineRenderer_1.default, { values: ovValues, nonOvValues: nonOvValues, totalOvValues: totalOvValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, titleClassName: titleClassName, contentClassName: contentClassName, showTitle: showTitle }));
+            case RENDERER_TYPES.imageLine:
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    showTitle && 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 })));
+            case RENDERER_TYPES.special:
+                return react_1.default.createElement(SpecialRenderer_1.default, { values: ovValues, attributeType: attributeType, showTitle: showTitle });
+        }
+    };
+    return (react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines, className: classnames_1.default((_b = {}, _b[styles.paddingWrapperWithLines] = drawLines, _b)) },
+        react_1.default.createElement("div", { className: classnames_1.default((_c = {}, _c[styles.paddingWrapper] = !drawLines, _c)) }, render())));
+};
+exports.default = react_1.memo(AttributesPager);

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

@@ -0,0 +1,67 @@
+"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 ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var ShowMore_1 = __importDefault(require("../../pagersCommon/ShowMore"));
+var ShowLess_1 = __importDefault(require("../../pagersCommon/ShowLess"));
+var OvIcon_1 = __importDefault(require("../../OvIcon"));
+var MultiLineRenderer = function (_a) {
+    var max = _a.max, values = _a.values, nonOvValues = _a.nonOvValues, totalOvValues = _a.totalOvValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b;
+    var styles = styles_1.useMultiLineStyles();
+    var _c = react_1.useState(max), visibleValuesCount = _c[0], setVisibleValuesCount = _c[1];
+    var hasPaging = max < totalOvValues;
+    var showMore = hasPaging && visibleValuesCount < totalOvValues;
+    var showLess = hasPaging && visibleValuesCount >= totalOvValues;
+    var label = attributeType.label;
+    var onShowMore = function () {
+        if (values.length < totalOvValues) {
+            requestNextPageOfAttributeValues({
+                parentUri: parentUri,
+                attributeTypeUri: attributeType.uri,
+                attributeTypeName: attributeType.name,
+                values: values,
+                defaultMaxValues: max
+            });
+        }
+        setVisibleValuesCount(visibleValuesCount + max);
+    };
+    var onShowLess = function () {
+        setVisibleValuesCount(max);
+    };
+    var shownValues = values.slice(0, visibleValuesCount);
+    var hiddenValuesCount = totalOvValues - visibleValuesCount;
+    return (react_1.default.createElement("div", { className: styles.wrapper },
+        showTitle && (react_1.default.createElement("div", { className: styles.titleRow },
+            react_1.default.createElement(Title_1.default, { label: label, className: classnames_1.default(styles.title, titleClassName), attributeType: attributeType }),
+            react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonOvValues, attributeType: attributeType, className: styles.ovIcon }))),
+        react_1.default.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (react_1.default.createElement(Attribute_1.default, { key: value.uri, className: classnames_1.default(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType })); })),
+        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 = MultiLineRenderer;