@reltio/components 1.4.1790 → 1.4.1824-hf

package/esm/components/attributes/readMode/AttributesPager/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"paddingWrapper" | "paddingWrapperWithLines">;
+export declare const useOneLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "attribute" | "wrapper" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon" | "descriptionIcon">;
+export declare const useMultiLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"attributes" | "title" | "attribute" | "wrapper" | "titleRow" | "ovIcon" | "descriptionIcon">;

package/esm/components/attributes/readMode/AttributesView/AttributesView.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AttributesViewProps } from '../../types';
+type Props = Omit<AttributesViewProps, 'mode' | 'pinnedAttributes'>;
+declare const AttributesView: ({ className, entity, caption, excludeUris, includeUris, attributesCount: attributesCountProp }: Props) => JSX.Element;
+export default AttributesView;

package/esm/components/attributes/readMode/AttributesView/AttributesView.js

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+import { getAttributesListForReadMode, isEmptyValue } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { PivotingAttributeContext, useMdmMetadata, useMdmPivotingAttributes } from '../../../../contexts';
+import BasicView from '../../../BasicView/BasicView';
+import FacetViewHeader from '../../../FacetViewHeader/FacetViewHeader';
+import AttributesList from '../AttributesList';
+import { getFilteredAttrTypes } from '../../helpers/attributesView';
+import { useStyles } from './styles';
+var DEFAULT_ATTRIBUTES_COUNT = 16;
+var AttributesView = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f, attributesCountProp = _a.attributesCount;
+    var styles = useStyles();
+    var metadata = useMdmMetadata();
+    var pivotingAttributes = useMdmPivotingAttributes();
+    var filteredAttrTypes = useMemo(function () { return getFilteredAttrTypes(metadata, entity.type, includeUris, excludeUris); }, [excludeUris, includeUris, metadata, entity.type]);
+    var attributesCount = attributesCountProp || DEFAULT_ATTRIBUTES_COUNT;
+    var attributesList = getAttributesListForReadMode(filteredAttrTypes, entity);
+    var isShowAttributeList = attributesList.filter(function (_a) {
+        var values = _a.values;
+        return !isEmptyValue(values);
+    }).length > 0;
+    return isShowAttributeList || !isEmptyValue(caption) ? (React.createElement(PivotingAttributeContext.Provider, { value: pivotingAttributes },
+        React.createElement(BasicView, { className: className },
+            caption && React.createElement(FacetViewHeader, { title: caption }),
+            React.createElement(Box, { className: classnames(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) }, isShowAttributeList ? (React.createElement(AttributesList, { entity: entity, attrTypes: filteredAttrTypes, parentUri: entity.uri, drawLines: false, max: attributesCount })) : (React.createElement(Typography, { className: styles.noData }, i18n.text('No data found'))))))) : null;
+};
+export default AttributesView;

package/esm/components/attributes/readMode/ComplexAttribute/ComplexAttribute.d.ts

@@ -0,0 +1,46 @@
+export default ComplexAttribute;
+declare function ComplexAttribute({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType, LabelRenderer, RightSlot }: {
+    attributeTypesList: any;
+    attributeValue: any;
+    label: any;
+    expanded?: boolean;
+    children: any;
+    showNonOv: any;
+    attributeType: any;
+    LabelRenderer: any;
+    RightSlot: any;
+}): JSX.Element;
+declare namespace ComplexAttribute {
+    namespace propTypes {
+        export let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export let label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        export let attributeTypesList: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            hidden: PropTypes.Requireable<boolean>;
+            faceted: PropTypes.Requireable<boolean>;
+            searchable: PropTypes.Requireable<boolean>;
+            uri: PropTypes.Requireable<string>;
+            access: PropTypes.Requireable<string[]>;
+            cardinality: PropTypes.Requireable<PropTypes.InferProps<{
+                minValue: PropTypes.Requireable<number>;
+                maxValue: PropTypes.Requireable<number>;
+            }>>;
+        }>[]>;
+        export let attributeValue: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<object>;
+            ov: PropTypes.Requireable<boolean>;
+            type: PropTypes.Requireable<string>;
+            uri: PropTypes.Requireable<string>;
+        }>>>;
+        export let expanded: PropTypes.Requireable<boolean>;
+        export let showNonOv: PropTypes.Requireable<boolean>;
+        export { AttributeTypeType as attributeType };
+        export let LabelRenderer: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        export let RightSlot: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    }
+}
+import PropTypes from 'prop-types';
+import { AttributeTypeType } from '@reltio/mdm-sdk';

package/esm/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -0,0 +1,66 @@
+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);
+};
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { AttributeTypeType, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isOv, isRelationAttrType, isSpecialAttribute } from '@reltio/mdm-sdk';
+import Typography from '@mui/material/Typography';
+import AttributesList from '../AttributesList/AttributesList';
+import ArrowExpandButton from '../../../ArrowExpandButton/ArrowExpandButton';
+import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
+import { HighlightedValuesContext } from '../../../../contexts';
+import { useOvValueStyles } from '../helpers/commonStyles';
+import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
+import { useStyles } from './styles';
+var ComplexAttribute = function (_a) {
+    var _b;
+    var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot;
+    var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
+    var uri = attributeValue.uri;
+    var _d = useState(false), expanded = _d[0], setExpanded = _d[1];
+    var _e = useContext(HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
+    useEffect(function () {
+        setExpanded(expandedProp);
+    }, [expandedProp]);
+    var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return isAnalyticAttribute(attributeType); });
+    var attributeListEntity = useMemo(function () { return (__assign({ attributes: hasAnalyticValue ? null : attributeValue.value, analyticsAttributes: hasAnalyticValue ? attributeValue.value : null }, (isSpecialAttribute(attributeType) ? attributeValue.value : {}))); }, [attributeValue, hasAnalyticValue, attributeType]);
+    var objectType = isRelationAttrType(attributeType)
+        ? CollaborationObjectTypes.RELATION_ATTRIBUTE
+        : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
+    return (React.createElement("div", { className: styles.complexContainer },
+        React.createElement("div", { className: classnames(styles.labelContainer, COMMENTS_CONTAINER_VISIBILITY_AREA) },
+            React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
+            LabelRenderer ? (React.createElement(LabelRenderer, { attributeType: attributeType, attributeValue: attributeValue })) : (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label }, className: classnames((_b = {},
+                        _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+                        _b[ovValueStyles.ovFalse] = !isOv(attributeValue),
+                        _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
+                React.createElement("div", { className: styles.spacer }),
+                RightSlot && React.createElement(RightSlot, { attributeType: attributeType, attributeValue: attributeValue }),
+                React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
+                        uri: attributeValue.uri
+                    }), objectType: objectType })))),
+        expanded && (React.createElement(AttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv }, children))));
+};
+ComplexAttribute.propTypes = {
+    children: PropTypes.node,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    attributeTypesList: PropTypes.arrayOf(AttributeTypeType),
+    attributeValue: PropTypes.oneOfType([NestedAttributeValueType, ReferenceAttributeValueType]),
+    expanded: PropTypes.bool,
+    showNonOv: PropTypes.bool,
+    attributeType: AttributeTypeType,
+    LabelRenderer: PropTypes.elementType,
+    RightSlot: PropTypes.elementType
+};
+export default ComplexAttribute;

package/esm/components/attributes/readMode/ComplexAttribute/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "spacer" | "complexContainer" | "labelContainer">;

package/esm/components/attributes/readMode/ComplexAttribute/styles.js

@@ -0,0 +1,20 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    complexContainer: {
+        marginTop: '1px'
+    },
+    labelContainer: {
+        display: 'flex',
+        minHeight: '18px'
+    },
+    label: {
+        display: 'inline-flex',
+        fontSize: '13px',
+        lineHeight: '16px',
+        letterSpacing: 'normal',
+        marginLeft: '2px'
+    },
+    spacer: {
+        flex: 1
+    }
+});

package/esm/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AttributeType, ImageAttributeValue, Paging, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
+import { SIZES_TYPE } from '../../ImageAttributesLine/styles';
+type Props = {
+    attributeValues: ImageAttributeValue[];
+    attributeType: AttributeType;
+    imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    parentUri?: string;
+    showNonOv?: boolean;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+};
+declare const ImageAttributesLine: ({ attributeType, attributeValues, paging, parentUri, requestNextPageOfAttributeValues, showNonOv, imageSize }: Props) => JSX.Element;
+export default ImageAttributesLine;

package/esm/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.js

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import { getHistoryAppearanceByUri, getHistoryAttributeClassName, getImageAttributeOvThumbnailUrl } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import { HistoryDiffContext } from '../../../../contexts';
+import Image from '../../../Image/Image';
+import ImageAttributesLineCommon from '../../ImageAttributesLine';
+import { DEFAULT_IMAGE_SIZE } from '../../ImageAttributesLine/constants';
+import { useStyles } from './styles';
+var ImageAttributesLine = function (_a) {
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, paging = _a.paging, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, _c = _a.imageSize, imageSize = _c === void 0 ? DEFAULT_IMAGE_SIZE : _c;
+    var styles = useStyles(imageSize);
+    var appearance = useContext(HistoryDiffContext).appearance;
+    var renderImage = function (_a) {
+        var onOpenImageGalleryDialog = _a.onOpenImageGalleryDialog;
+        var renderImage = function (attribute) {
+            var _a;
+            var src = getImageAttributeOvThumbnailUrl(attribute);
+            var uri = attribute.uri;
+            var imageAppearance = getHistoryAppearanceByUri(uri, appearance);
+            var historyAttributesClassName = getHistoryAttributeClassName(imageAppearance);
+            return (React.createElement("div", { className: classnames(styles.image, (_a = {},
+                    _a[styles[historyAttributesClassName + 'Image']] = historyAttributesClassName,
+                    _a)), key: uri, "data-reltio-id": "reltio-attribute-value" },
+                React.createElement(Image, { onClick: function () { return onOpenImageGalleryDialog(uri); }, className: styles[historyAttributesClassName], src: src, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
+        };
+        return renderImage;
+    };
+    return (React.createElement(ImageAttributesLineCommon, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv }));
+};
+export default ImageAttributesLine;

package/esm/components/attributes/readMode/ImageAttributesLine/cross.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const CROSS_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"stroke: #D1051E; stroke-width: 1\" viewBox=\"0 0 114 114\">\n\t<line x1=\"5\" y1=\"109\" x2=\"109\" y2=\"5\" />\n</svg>";

package/esm/components/attributes/readMode/ImageAttributesLine/cross.inline.svg.js

@@ -0,0 +1 @@
+export var CROSS_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"stroke: #D1051E; stroke-width: 1\" viewBox=\"0 0 114 114\">\n\t<line x1=\"5\" y1=\"109\" x2=\"109\" y2=\"5\" />\n</svg>";

package/esm/components/attributes/readMode/ImageAttributesLine/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ImageAttributesLine';

package/esm/components/attributes/readMode/ImageAttributesLine/index.js

@@ -0,0 +1 @@
+export { default } from './ImageAttributesLine';

package/esm/components/attributes/readMode/ImageAttributesLine/styles.d.ts

@@ -0,0 +1,2 @@
+import { SIZES_TYPE } from '../../ImageAttributesLine/styles';
+export declare const useStyles: (props: SIZES_TYPE) => import("@mui/styles").ClassNameMap<"number" | "insertAttribute" | "updateAttribute" | "deleteAttribute" | "image" | "deleteAttributeImage" | "updateAttributeImage">;

package/esm/components/attributes/readMode/ImageAttributesLine/styles.js

@@ -0,0 +1,86 @@
+import { makeStyles } from '@mui/styles';
+import { CROSS_ICON } from './cross.inline.svg';
+import { HistoryOperations, historyPalettes, svg2Url } from '@reltio/mdm-sdk';
+var BORDER_WIDTH = '3px';
+export var useStyles = makeStyles(function (theme) { return ({
+    image: function (_a) {
+        var imageMargin = _a.imageMargin, imageHeight = _a.imageHeight, imageWidth = _a.imageWidth;
+        return {
+            marginRight: imageMargin,
+            width: imageWidth,
+            height: imageHeight,
+            cursor: 'pointer',
+            '&:last-child': {
+                marginRight: 0
+            }
+        };
+    },
+    deleteAttributeImage: {
+        position: 'relative',
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            background: "url('".concat(svg2Url(CROSS_ICON), "') no-repeat"),
+            backgroundColor: historyPalettes[HistoryOperations.deleteAttribute].backgroundColor,
+            pointerEvents: 'none'
+        }
+    },
+    updateAttributeImage: {
+        position: 'relative',
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: historyPalettes[HistoryOperations.updateAttribute].backgroundColor,
+            pointerEvents: 'none'
+        }
+    },
+    deleteAttribute: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            width: imageWidth,
+            height: imageHeight,
+            boxSizing: 'border-box',
+            outline: "".concat(BORDER_WIDTH, " solid ").concat(historyPalettes[HistoryOperations.deleteAttribute].color),
+            outlineOffset: "-".concat(BORDER_WIDTH)
+        };
+    },
+    insertAttribute: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            width: imageWidth,
+            height: imageHeight,
+            boxSizing: 'border-box',
+            outline: "".concat(BORDER_WIDTH, " solid ").concat(historyPalettes[HistoryOperations.insertAttribute].color),
+            outlineOffset: "-".concat(BORDER_WIDTH)
+        };
+    },
+    updateAttribute: function (_a) {
+        var imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            width: imageWidth,
+            height: imageHeight,
+            boxSizing: 'border-box',
+            outline: "".concat(BORDER_WIDTH, " solid ").concat(historyPalettes[HistoryOperations.updateAttribute].color),
+            outlineOffset: "-".concat(BORDER_WIDTH)
+        };
+    },
+    number: {
+        color: theme.palette.primary.main,
+        fontSize: '24px',
+        lineHeight: '42px',
+        letterSpacing: 0,
+        padding: '36px 8px',
+        textAlign: 'center',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }
+}); });

package/esm/components/attributes/readMode/NestedAttribute/NestedAttribute.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { memo, useContext, useMemo } from 'react';
+import Box from '@mui/material/Box';
+import classnames from 'classnames';
+import { evaluateDeepEntityLabel, getAttributeTypeSubAttributes, getHistoryAppearanceByUri, getHistoryAttributeClassName, getLabel, NestedAttributeType } from '@reltio/mdm-sdk';
+import { HistoryDiffContext } from '../../../../contexts';
+import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
+import { PivotingTooltip } from '../../PivotingAttributes/PivotingTooltip';
+import SearchHighlighter from '../../../SearchHighlighter/SearchHighlighter';
+import useStyles from './styles';
+var NestedAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, otherProps = __rest(_a, ["attributeValue", "attributeType"]);
+    var styles = useStyles();
+    var appearance = useContext(HistoryDiffContext).appearance;
+    var attributeLabel = useMemo(function () {
+        var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
+        var historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
+        var label = attributeValue.label
+            ? attributeValue.label
+            : evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern);
+        return (React.createElement(PivotingTooltip, { className: styles.pivotingTooltip, value: attributeValue, attributeType: attributeType },
+            React.createElement(Box, { component: "span", className: classnames(styles[historyAttributesClassName], styles.label) },
+                React.createElement(SearchHighlighter, { text: getLabel(label) }))));
+    }, [appearance, styles, attributeValue, attributeType]);
+    return (React.createElement(ComplexAttribute, __assign({ label: attributeLabel, attributeValue: attributeValue, attributeTypesList: getAttributeTypeSubAttributes({}, attributeType), attributeType: attributeType }, otherProps)));
+};
+NestedAttribute.propTypes = NestedAttributeType;
+export default memo(NestedAttribute);

package/esm/components/attributes/readMode/NestedAttribute/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./NestedAttribute";

package/esm/components/attributes/readMode/NestedAttribute/index.js

@@ -0,0 +1 @@
+export { default } from './NestedAttribute';

package/esm/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ReferenceAttributeValue } from '@reltio/mdm-sdk';
+import { ComplexAttributeProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ attributeValue, attributeType, ...otherProps }: ComplexAttributeProps<ReferenceAttributeValue>) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, useMemo, memo } from 'react';
+import classnames from 'classnames';
+import { getAttributeTypeSubAttributes, getHistoryAppearanceByUri, getHistoryAttributeClassName, getLabel, getReferencedEntityUriFromAttrValue, isEmptyValue, isOv } from '@reltio/mdm-sdk';
+import { HistoryDiffContext, UrlGeneratorsContext, useMdmMetadata, useMdmUiPath } from '../../../../contexts';
+import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
+import InternalLink from '../../../InternalLink/InternalLink';
+import SearchHighlighter from '../../../SearchHighlighter/SearchHighlighter';
+import { useOvValueStyles } from '../helpers/commonStyles';
+import useStyles from './styles';
+var ReferenceAttribute = function (_a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType, otherProps = __rest(_a, ["attributeValue", "attributeType"]);
+    var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
+    var metadata = useMdmMetadata();
+    var uiPath = useMdmUiPath();
+    var refEntityURI = getReferencedEntityUriFromAttrValue(attributeValue);
+    var attributeTypeList = useMemo(function () { return getAttributeTypeSubAttributes(metadata, attributeType); }, [attributeType, metadata]);
+    var appearance = useContext(HistoryDiffContext).appearance;
+    var generateEntityUrl = useContext(UrlGeneratorsContext).generateEntityUrl;
+    var entityLabel = useMemo(function () {
+        var _a;
+        var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
+        var historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
+        var screen = (refEntityURI === null || refEntityURI === void 0 ? void 0 : refEntityURI.startsWith('changeRequests')) ? 'dcrReview' : 'profile';
+        return (React.createElement(InternalLink, { href: isEmptyValue(appearance) ? generateEntityUrl({ uiPath: uiPath, uri: refEntityURI, screen: screen }) : undefined, className: classnames(styles[historyAttributesClassName], (_a = {},
+                _a[ovValueStyles.ovFalse] = !isOv(attributeValue),
+                _a)) },
+            React.createElement(SearchHighlighter, { text: getLabel(attributeValue.label) }),
+            attributeValue.relationshipLabel && (React.createElement("span", { className: styles.relationshipLabel },
+                React.createElement(SearchHighlighter, { text: attributeValue.relationshipLabel })))));
+    }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse, generateEntityUrl]);
+    return (React.createElement(ComplexAttribute, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel, attributeType: attributeType }, otherProps)));
+};
+export default memo(ReferenceAttribute);

package/esm/components/attributes/readMode/ReferenceAttribute/index.d.ts

@@ -0,0 +1,2 @@
+import ReferenceAttribute from './ReferenceAttribute';
+export default ReferenceAttribute;

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

@@ -0,0 +1,2 @@
+import ReferenceAttribute from './ReferenceAttribute';
+export default ReferenceAttribute;

package/esm/components/attributes/readMode/ReferenceAttribute/styles.d.ts

@@ -0,0 +1,2 @@
+export default styles;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"relationshipLabel" | "insertAttribute" | "updateAttribute" | "deleteAttribute">;

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

@@ -0,0 +1,23 @@
+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);
+};
+import { makeStyles } from '@mui/styles';
+import { HistoryOperations, historyPalettes } from '@reltio/mdm-sdk';
+var styles = makeStyles(function (theme) { return ({
+    relationshipLabel: {
+        marginLeft: '4px',
+        color: theme.palette.text.primary
+    },
+    updateAttribute: __assign({ width: 'fit-content', padding: '0 4px', marginLeft: '-4px' }, historyPalettes[HistoryOperations.updateAttribute]),
+    insertAttribute: __assign({ width: 'fit-content' }, historyPalettes[HistoryOperations.insertAttribute]),
+    deleteAttribute: __assign({ width: 'fit-content', textDecoration: 'line-through', padding: '0 4px', marginLeft: '-4px' }, historyPalettes[HistoryOperations.deleteAttribute])
+}); });
+export default styles;

package/esm/components/attributes/readMode/SimpleAttribute/SimpleAttribute.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
+type Props = {
+    className?: string;
+    attributeValue: SimpleAttributeValue;
+    attributeType: AttributeType;
+    inlined?: boolean;
+};
+declare const SimpleAttribute: ({ className, attributeType, attributeValue, inlined }: Props) => JSX.Element;
+export default SimpleAttribute;

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

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, CollaborationObjectTypes, createRelatedObjectUris, isOv, isRelationAttrType, getHistoryAttributeClassName } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
+import { HistoryDiffContext } from '../../../../contexts/HistoryAppearanceContext';
+import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
+import DataTypeValue from '../../../DataTypeValue/DataTypeValue';
+import { PivotingTooltip } from '../../PivotingAttributes/PivotingTooltip';
+import { useStyles } from './styles';
+import { HighlightedValuesContext } from '../../../../contexts';
+import { useOvValueStyles } from '../helpers/commonStyles';
+var SimpleAttribute = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
+    var _h = useContext(HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
+    var appearance = useContext(HistoryDiffContext).appearance;
+    var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
+    var historyClassName = getHistoryAttributeClassName(attributeAppearance);
+    var dataTypeValue = (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) }));
+    var objectType = isRelationAttrType(attributeType)
+        ? CollaborationObjectTypes.RELATION_ATTRIBUTE
+        : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
+    return inlined || historyClassName ? (React.createElement("div", { className: classnames(className, (_b = {},
+            _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+            _b)) },
+        React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
+            React.createElement("span", { className: classnames(styles.attributeValue, styles[historyClassName], (_d = {},
+                    _d[ovValueStyles.ovFalse] = !isOv(attributeValue),
+                    _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+            _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+            _e)) },
+        React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
+            React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[ovValueStyles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+        React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
+                uri: attributeValue.uri
+            }), objectType: objectType })));
+};
+export default SimpleAttribute;

package/esm/components/attributes/readMode/SimpleAttribute/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SimpleAttribute';

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

@@ -0,0 +1 @@
+export { default } from './SimpleAttribute';

package/esm/components/attributes/readMode/SimpleAttribute/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"attributeValue" | "insertAttribute" | "updateAttribute" | "deleteAttribute" | "root" | "commentsContainer" | "multilineAttribute">;

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

@@ -0,0 +1,40 @@
+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);
+};
+import { makeStyles } from '@mui/styles';
+import { HistoryOperations, historyPalettes } from '@reltio/mdm-sdk';
+export var useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'start',
+        justifyContent: 'space-between'
+    },
+    commentsContainer: {
+        height: '15px',
+        marginRight: '-4px' // AttributesPager padding compensation
+    },
+    attributeValue: {
+        verticalAlign: 'middle',
+        wordBreak: 'break-all'
+    },
+    updateAttribute: __assign(__assign({ width: 'fit-content', padding: '0 4px', marginLeft: '-4px' }, historyPalettes[HistoryOperations.updateAttribute]), { '& > a': {
+            color: historyPalettes[HistoryOperations.updateAttribute].color
+        } }),
+    insertAttribute: __assign(__assign({ width: 'fit-content' }, historyPalettes[HistoryOperations.insertAttribute]), { '& > a': {
+            color: historyPalettes[HistoryOperations.insertAttribute].color
+        } }),
+    deleteAttribute: __assign(__assign({ width: 'fit-content', padding: '0 4px', marginLeft: '-4px', textDecoration: 'line-through' }, historyPalettes[HistoryOperations.deleteAttribute]), { '& > a': {
+            color: historyPalettes[HistoryOperations.deleteAttribute].color
+        } }),
+    multilineAttribute: {
+        width: 'fit-content'
+    }
+});

package/esm/components/attributes/readMode/SpecialAttributes/Roles/Role.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    value: string;
+};
+declare const Role: ({ value }: Props) => JSX.Element;
+export default Role;

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

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { getHistoryAppearanceBySpecialAttributeValue, getHistoryAttributeClassName, getRoleLabel } from '@reltio/mdm-sdk';
+import { HistoryDiffContext } from '../../../../../contexts/HistoryAppearanceContext';
+import { useMdmMetadata } from '../../../../../contexts';
+import { useCommonStyles } from '../styles';
+var Role = function (_a) {
+    var value = _a.value;
+    var styles = useCommonStyles();
+    var appearance = useContext(HistoryDiffContext).appearance;
+    var metadata = useMdmMetadata();
+    var attributeAppearance = getHistoryAppearanceBySpecialAttributeValue('roles', value, appearance);
+    var historyClassName = getHistoryAttributeClassName(attributeAppearance);
+    return (React.createElement("span", { className: classnames(styles.attributeValue, styles[historyClassName]) }, getRoleLabel(metadata, value)));
+};
+export default Role;