@reltio/components 1.4.808 → 1.4.812

package/components/ReltioMap/index.js

@@ -0,0 +1,162 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReltioMap = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+var MapControlContrainer_1 = require("./MapControls/MapControlContainer/MapControlContrainer");
+var TopRightMapControls_1 = require("./MapControls/TopRightMapControls/TopRightMapControls");
+var TopCenterMapControls_1 = require("./MapControls/TopCenterMapControls/TopCenterMapControls");
+var helpers_1 = require("./helpers");
+var EntityMarker_1 = __importDefault(require("./EntityMarker/EntityMarker"));
+var constants_1 = require("../../constants");
+var styles_1 = require("./styles");
+var hooks_1 = require("../../hooks");
+var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
+var libraries = ['drawing'];
+var useFitMapBounds = function (_a) {
+    var markers = _a.markers, activeOverlay = _a.activeOverlay, isSearchOnMapMove = _a.isSearchOnMapMove, map = _a.map;
+    var prevMarkers = hooks_1.usePrevious(markers);
+    var prevActiveOverlay = hooks_1.usePrevious(activeOverlay);
+    var apiIsLoaded = map && window.google;
+    react_1.useEffect(function () {
+        if (apiIsLoaded && !isSearchOnMapMove && markers.length && markers !== prevMarkers) {
+            helpers_1.fitMapBoundsForMarkers(markers, map, activeOverlay);
+        }
+        else if (apiIsLoaded && activeOverlay && activeOverlay !== prevActiveOverlay) {
+            helpers_1.fitMapBoundsForOverlay(map, activeOverlay);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, markers, activeOverlay]);
+};
+var ReltioMap = function (_a) {
+    var _b = _a.markers, markers = _b === void 0 ? [] : _b, mapKey = _a.mapKey, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, overlayOptions = _a.overlayOptions, _c = _a.drawingModes, drawingModes = _c === void 0 ? [] : _c, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, mapContainerClassName = _a.mapContainerClassName, onMapBoundsChanged = _a.onMapBoundsChanged, onOverlayUpdated = _a.onOverlayUpdated, onMarkerClicked = _a.onMarkerClicked;
+    var styles = styles_1.useStyles();
+    var _d = api_1.useJsApiLoader({
+        googleMapsApiKey: mapKey,
+        libraries: libraries
+    }), isLoaded = _d.isLoaded, loadError = _d.loadError;
+    var mapMoveEndTimer = react_1.useRef(null);
+    var _e = react_1.useState(null), map = _e[0], setMap = _e[1];
+    var _f = react_1.useState(null), polygon = _f[0], setPolygon = _f[1];
+    var _g = react_1.useState(null), drawingMode = _g[0], setDrawingMode = _g[1];
+    useFitMapBounds({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
+    var allOverlayOptions = react_1.useMemo(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), (overlayOptions || {}))); }, [overlayOptions]);
+    var handleChangeIsSearchOnMapMove = react_1.useCallback(function (isSearchOnMapMove) {
+        onMapBoundsChanged(isSearchOnMapMove ? helpers_1.getMapBoundsPolygon(map) : null);
+        setDrawingMode(null);
+        clearTimeout(mapMoveEndTimer.current);
+    }, [map, onMapBoundsChanged]);
+    var handleMapMoveStart = react_1.useCallback(function () {
+        clearTimeout(mapMoveEndTimer.current);
+    }, []);
+    var handleMapMoveEnd = react_1.useCallback(function () {
+        if (isSearchOnMapMove) {
+            onMapBoundsChanged(helpers_1.getMapBoundsPolygon(map));
+        }
+    }, [isSearchOnMapMove, map, onMapBoundsChanged]);
+    var handleMapIdle = react_1.useCallback(function () {
+        if (isSearchOnMapMove) {
+            clearTimeout(mapMoveEndTimer.current);
+            mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
+        }
+    }, [handleMapMoveEnd, isSearchOnMapMove]);
+    var handleOverlayChange = react_1.useCallback(function (e, propOverlay) {
+        var _a;
+        var stateOverlay = propOverlay ||
+            (polygon && {
+                type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                overlay: polygon
+            });
+        if (!ramda_1.isEmpty(stateOverlay) && typeof onOverlayUpdated === 'function') {
+            var overlay_1 = stateOverlay.overlay, type = stateOverlay.type;
+            var typeActions = (_a = {},
+                _a[constants_1.MAP_DRAWING_MODES.POLYGON] = function () {
+                    return overlay_1
+                        .getPath()
+                        .getArray()
+                        .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
+                },
+                _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = function () {
+                    return { radius: overlay_1.getRadius() / 1000, center: overlay_1.getCenter() };
+                },
+                _a);
+            var data = typeActions[type] && typeActions[type]();
+            data && onOverlayUpdated({ data: data, type: type });
+        }
+    }, [onOverlayUpdated, polygon]);
+    var handleOverlayComplete = react_1.useCallback(function (type) { return function (overlay) {
+        handleOverlayChange(null, { type: type, overlay: overlay });
+        overlay.setMap(null);
+        setDrawingMode(null);
+    }; }, [handleOverlayChange]);
+    var handleClearOverlay = react_1.useCallback(function () {
+        onOverlayUpdated(null);
+    }, [onOverlayUpdated]);
+    var renderMarkers = function (clusterer) {
+        return markers
+            .filter(ramda_1.prop('point'))
+            .map(function (marker) { return (react_1.default.createElement(EntityMarker_1.default, { key: marker.id, marker: marker, clusterer: clusterer, onClick: onMarkerClicked })); });
+    };
+    var renderMarkerClusterer = function (options) {
+        return react_1.default.createElement(api_1.MarkerClusterer, { options: options }, renderMarkers);
+    };
+    if (loadError) {
+        return null;
+    }
+    if (!isLoaded) {
+        return loadingElement;
+    }
+    return (react_1.default.createElement(api_1.GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: {
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: false
+        }, onLoad: setMap, zoom: defaultZoom, center: defaultCenter, onZoomChanged: handleMapMoveStart, onDragStart: handleMapMoveStart, onIdle: handleMapIdle, mapContainerClassName: mapContainerClassName },
+        map && isSearchEnabled && Boolean(drawingModes.length) && (react_1.default.createElement(MapControlContrainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_RIGHT, map: map },
+            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        map && isSearchEnabled && (react_1.default.createElement(MapControlContrainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_CENTER, map: map },
+            react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
+        markerClusterer ? renderMarkerClusterer(markerClustererOptions) : renderMarkers(),
+        !helpers_1.getDrawingMode(drawingMode) &&
+            activeOverlay &&
+            ramda_1.propEq('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay) && (react_1.default.createElement(api_1.Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        isSearchEnabled && Boolean(drawingModes.length) && (react_1.default.createElement(api_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: helpers_1.getDrawingMode(drawingMode), options: {
+                drawingControl: false,
+                circleOptions: allOverlayOptions,
+                polygonOptions: allOverlayOptions
+            } }))));
+};
+exports.ReltioMap = ReltioMap;

package/components/ReltioMap/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"mapControlContainer">;

package/components/ReltioMap/styles.js

@@ -0,0 +1,12 @@
+"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({
+    mapControlContainer: {
+        borderRadius: '2px',
+        backgroundColor: '#FFFFFF',
+        boxShadow: '0 1px 3px 0 rgba(0,0,0,0.15)',
+        margin: '10px'
+    }
+});

package/components/ReltioMap/types.d.ts

@@ -0,0 +1,23 @@
+import { Entity } from '@reltio/mdm-sdk';
+export declare type DrawingMode = 'circle' | 'polygon';
+export declare type DrawingModes = DrawingMode[];
+export declare type EntityMarker = {
+    entity: Entity;
+    id: string;
+    label: string;
+    point: {
+        lat: number;
+        lng: number;
+    };
+    visible?: boolean;
+};
+export declare type OverlayPath = Array<{
+    lat: number;
+    lng: number;
+}>;
+export declare type Overlay = {
+    path: OverlayPath;
+    type: string;
+};
+export declare type MapInstance = any;
+export declare type MapBounds = [number, number][];

package/components/ReltioMap/types.js

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

package/components/attributes/PivotingAttributes/PivotingTooltipContent.js

@@ -43,19 +43,21 @@ var EntityAvatar_1 = __importDefault(require("../../EntityAvatar/EntityAvatar"))
 var EntityUriLink_1 = __importDefault(require("../../EntityUriLink/EntityUriLink"));
 var styles_1 = require("./styles");
 var helpers_1 = require("./helpers");
+var hooks_1 = require("../../../hooks");
 var MAX_ENTITIES_PIVOTING_TOOLTIP = 6;
 var PivotingTooltipContent = function (_a) {
     var value = _a.value, attributeType = _a.attributeType, _b = _a.config, config = _b === void 0 ? {} : _b;
     var _c = react_1.useState([]), entities = _c[0], setEntities = _c[1];
     var _d = react_1.useState(0), total = _d[0], setTotal = _d[1];
     var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
+    var safePromise = hooks_1.useSafePromise();
     var styles = styles_1.useStyles();
     var globalSearchRequestOptions = react_redux_1.useSelector(mdm_module_1.default.selectors.getGlobalSearchRequestOptions) || {};
     var entityType = config.entityType || entity.type;
     react_1.useEffect(function () {
         var filters = helpers_1.getParamsFilteringEntities(value, attributeType, entityType);
         var options = __assign({ max: MAX_ENTITIES_PIVOTING_TOOLTIP }, globalSearchRequestOptions);
-        Promise.all([mdm_sdk_1.getFilteredEntities(filters, options), mdm_sdk_1.getTotals(filters, options)])
+        safePromise(Promise.all([mdm_sdk_1.getFilteredEntities(filters, options), mdm_sdk_1.getTotals(filters, options)]))
             .then(function (results) {
             var entities = results[0], total = results[1].total;
             setEntities(Array.isArray(entities) ? entities : []);

package/components/attributes/editMode/AttributesList/AttributesList.js

@@ -49,7 +49,7 @@ var AttributesList = function (_a) {
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var creatableAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
     var moreAttrTypes = helpers_1.getMoreAttrTypes(creatableAttrTypes, entity);
-    var pagersData = react_1.useMemo(function () { return helpers_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors); }, [
+    var pagersData = react_1.useMemo(function () { return mdm_sdk_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors); }, [
         attrTypes,
         mode,
         entity,

package/components/attributes/editMode/AttributesList/helpers.d.ts

@@ -1,3 +1,2 @@
-import { AttributeType, Entity, Mode } from '@reltio/mdm-sdk';
-export declare const getAttributesListForEditMode: (attrTypes: AttributeType[], mode: Mode, entity: Entity, showEmptyEditors: boolean) => any;
+import { AttributeType, Entity } from '@reltio/mdm-sdk';
 export declare const getMoreAttrTypes: (attrTypes: AttributeType[], entity: Entity) => AttributeType[];

package/components/attributes/editMode/AttributesList/helpers.js

@@ -1,11 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMoreAttrTypes = exports.getAttributesListForEditMode = void 0;
+exports.getMoreAttrTypes = void 0;
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var getCreatableAttributeTypesAndAnaliticsAttributes = ramda_1.curry(function (mode, attrTypes) {
-    return ramda_1.pipe(ramda_1.defaultTo([]), mdm_sdk_1.filterOutHiddenAttributes, ramda_1.filter(function (attributeType) { return mdm_sdk_1.checkMetadataForCreate(mode, attributeType); }))(attrTypes);
-});
 var getSource = function (attrType, entity) {
     var _a = entity.attributes, attributes = _a === void 0 ? {} : _a, _b = entity.analyticsAttributes, analyticsAttributes = _b === void 0 ? {} : _b;
     return ramda_1.cond([
@@ -17,22 +14,6 @@ var getSource = function (attrType, entity) {
 var getNameProp = function (attrType) {
     return mdm_sdk_1.isSpecialAttribute(attrType) ? 'uri' : 'name';
 };
-var getAttributesListForEditMode = function (attrTypes, mode, entity, showEmptyEditors) {
-    var creatableAttrTypes = getCreatableAttributeTypesAndAnaliticsAttributes(mode, attrTypes);
-    return creatableAttrTypes.reduce(function (result, attrType) {
-        var needShowAttribute = function (hasValues) {
-            return hasValues || showEmptyEditors || attrType.required;
-        };
-        var source = getSource(attrType, entity);
-        var nameProp = getNameProp(attrType);
-        var hasValues = ramda_1.has(attrType[nameProp])(source);
-        return ramda_1.when(function () { return needShowAttribute(hasValues); }, ramda_1.append({
-            attrType: attrType,
-            values: ramda_1.pipe(ramda_1.prop(attrType[nameProp]), ramda_1.defaultTo([]), mdm_sdk_1.wrapInArrayIfNeeded)(source)
-        }), result);
-    }, []);
-};
-exports.getAttributesListForEditMode = getAttributesListForEditMode;
 var getMoreAttrTypes = function (attrTypes, entity) {
     return attrTypes.filter(function (attrType) {
         var source = getSource(attrType, entity);

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

@@ -92,8 +92,9 @@ var AttributeRenderer = function (_a) {
         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 })));
+        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, attributeType.uri, 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/index.d.ts

@@ -2,6 +2,7 @@
 import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
 import { AttributeError, AttributeType, AttributeValue, Crosswalk, ImageAttributeValue, Mode, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import AttributesPager from './AttributesPager';
+import CardinalityMessage from './CardinalityMessage';
 export declare type AttributeItem = {
     uri?: string;
     parentUri?: string;
@@ -12,6 +13,7 @@ export declare type AttributeItem = {
 declare type StateProps = {
     errorMessage: string;
     errors: AttributeError[];
+    max: number;
 };
 declare type DispatchProps = {
     onDeactivateError: (id: string) => void;
@@ -33,6 +35,6 @@ declare type OwnProps = {
     additionalControlsRenderer?: (props: any) => JSX.Element;
 };
 export declare type AttributePagerProps = StateProps & DispatchProps & OwnProps;
-export { AttributesPager };
-declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>, import("react-redux").Omit<StateProps & DispatchProps & OwnProps, "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
+export { AttributesPager, CardinalityMessage };
+declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>, import("react-redux").Omit<StateProps & DispatchProps & OwnProps, "errorMessage" | "max" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
 export default _default;

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

@@ -22,31 +22,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AttributesPager = void 0;
+exports.CardinalityMessage = 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 CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
+exports.CardinalityMessage = CardinalityMessage_1.default;
+var mapStateToProps = function (state, _a) {
+    var parentUri = _a.parentUri, attributeType = _a.attributeType, max = _a.max;
+    return ({
+        errors: mdm_module_1.default.selectors.getActiveErrorsForAttributesPager(state, parentUri, attributeType),
+        errorMessage: mdm_sdk_1.getAttributePagerActiveTypeErrorMessage(parentUri, attributeType, mdm_module_1.default.selectors.getProfileErrors(state)),
+        max: max || mdm_module_1.default.selectors.getDefaultMaxValues(state)
+    });
+};
 var mapDispatchToProps = {
     requestNextPageOfAttributeValues: mdm_module_1.profile.actions.requestNextPageOfAttributeValues,
     onDeactivateError: mdm_module_1.profile.errors.actions.errorDeactivated

package/components/attributes/editMode/ComplexAttribute/ComplexAttribute.d.ts

@@ -1,5 +1,5 @@
 export default ComplexAttribute;
-declare function ComplexAttribute({ label, attributeTypesList, attributeType, attributeValue, children, errors, ownError, mode, metadata, crosswalks, lazy, showEmptyEditors, onAddOneMore, onAddAttributes, onDeleteAttribute, onChangeAttribute, additionalControlsRenderer, hideDeleteButton }: {
+declare function ComplexAttribute({ label, attributeTypesList, attributeType, attributeValue, children, errors, ownError, mode, metadata, crosswalks, lazy, showEmptyEditors, onAddOneMore, onAddAttributes, onDeleteAttribute, onChangeAttribute, additionalControlsRenderer, hideDeleteButton, state }: {
     label: any;
     attributeTypesList: any;
     attributeType: any;
@@ -18,6 +18,7 @@ declare function ComplexAttribute({ label, attributeTypesList, attributeType, at
     onChangeAttribute: any;
     additionalControlsRenderer: any;
     hideDeleteButton: any;
+    state: any;
 }): JSX.Element;
 declare namespace ComplexAttribute {
     const propTypes: {
@@ -126,6 +127,7 @@ declare namespace ComplexAttribute {
         onChangeAttribute: PropTypes.Requireable<(...args: any[]) => any>;
         additionalControlsRenderer: PropTypes.Requireable<(...args: any[]) => any>;
         hideDeleteButton: PropTypes.Requireable<boolean>;
+        state: PropTypes.Requireable<string>;
         label: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         attributeTypesList: PropTypes.Requireable<PropTypes.InferProps<{

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

@@ -35,9 +35,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
 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 Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var styles_1 = require("./styles");
@@ -45,11 +47,14 @@ 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 _b;
+    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, state = _a.state;
     var styles = styles_1.useStyles();
+    var deleted = state === 'deleted';
+    var edited = state === 'edited';
     var uri = attributeValue.uri;
     var isNew = mdm_sdk_1.isTempUri(uri);
-    var _b = react_1.useState(isNew), expanded = _b[0], setExpanded = _b[1];
+    var _c = react_1.useState(isNew), expanded = _c[0], setExpanded = _c[1];
     var canDelete = react_1.useMemo(function () {
         return mdm_sdk_1.checkCanDeleteAttribute({
             attributeType: attributeType,
@@ -59,7 +64,7 @@ var ComplexAttribute = function (_a) {
             isReltioCrosswalk: mdm_sdk_1.isReltioCrosswalk(crosswalks, attributeValue)
         });
     }, [attributeType, attributeValue, mode, metadata, crosswalks]);
-    var showDeleteButton = !hideDeleteButton && !!onDeleteAttribute && canDelete;
+    var showDeleteButton = !deleted && !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,
@@ -70,6 +75,11 @@ var ComplexAttribute = function (_a) {
             setExpanded(true);
         }
     }, [errors, hasDescendantsWithErrors]);
+    react_1.useEffect(function () {
+        if (deleted) {
+            setExpanded(false);
+        }
+    }, [deleted]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return mdm_sdk_1.isAnalyticAttribute(attributeType); });
     var attributeListEntity = react_1.useMemo(function () { return ({
         attributes: hasAnalyticValue ? null : attributeValue.value,
@@ -79,10 +89,14 @@ var ComplexAttribute = function (_a) {
     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(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton, disabled: deleted }),
                 react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
-                    react_1.default.createElement("div", { className: styles.label }, label))),
+                    react_1.default.createElement("div", { className: classnames_1.default(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)) }, label))),
             react_1.default.createElement("div", { className: styles.actions },
+                edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.editedLabel },
+                    "(",
+                    ui_i18n_1.default.text('edited'),
+                    ")")),
                 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))));

package/components/attributes/editMode/ComplexAttribute/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "expandButton" | "actions" | "editor" | "titleContainer">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"deleted" | "label" | "expandButton" | "actions" | "editor" | "editedLabel" | "titleContainer">;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
     editor: {
         display: 'flex',
         flex: 1,
@@ -27,5 +27,13 @@ exports.useStyles = styles_1.makeStyles({
     },
     expandButton: {
         marginTop: '2px'
+    },
+    deleted: {
+        color: theme.palette.text.secondary,
+        textDecoration: 'line-through'
+    },
+    editedLabel: {
+        fontStyle: 'italic',
+        color: theme.palette.text.secondary
     }
-});
+}); });

package/components/attributes/editMode/NestedAttribute/NestedAttribute.d.ts

@@ -106,6 +106,7 @@ declare var _default: React.MemoExoticComponent<{
         onChangeAttribute: import("prop-types").Requireable<(...args: any[]) => any>;
         additionalControlsRenderer: import("prop-types").Requireable<(...args: any[]) => any>;
         hideDeleteButton: import("prop-types").Requireable<boolean>;
+        state: import("prop-types").Requireable<string>;
         attributeValue: import("prop-types").Requireable<import("prop-types").InferProps<{
             value: import("prop-types").Requireable<object>;
             ov: import("prop-types").Requireable<boolean>;

package/components/attributes/editMode/ReferenceAttribute/ReferenceAttribute.d.ts

@@ -114,6 +114,7 @@ declare var _default: React.MemoExoticComponent<{
         onChangeAttribute: PropTypes.Requireable<(...args: any[]) => any>;
         additionalControlsRenderer: PropTypes.Requireable<(...args: any[]) => any>;
         hideDeleteButton: PropTypes.Requireable<boolean>;
+        state: PropTypes.Requireable<string>;
         attributeValue: PropTypes.Requireable<PropTypes.InferProps<{
             refEntity: PropTypes.Requireable<object>;
             refRelation: PropTypes.Requireable<object>;

package/components/attributes/editMode/ReferenceAttribute/index.d.ts

@@ -115,6 +115,7 @@ declare var _default: import("react-redux").ConnectedComponent<import("react").M
         onChangeAttribute: import("prop-types").Requireable<(...args: any[]) => any>;
         additionalControlsRenderer: import("prop-types").Requireable<(...args: any[]) => any>;
         hideDeleteButton: import("prop-types").Requireable<boolean>;
+        state: import("prop-types").Requireable<string>;
         attributeValue: import("prop-types").Requireable<import("prop-types").InferProps<{
             refEntity: import("prop-types").Requireable<object>;
             refRelation: import("prop-types").Requireable<object>;

package/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -51,6 +51,8 @@ var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var Add_1 = __importDefault(require("@material-ui/icons/Add"));
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var styles_1 = require("./styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeValue"));
@@ -65,8 +67,11 @@ var AsyncMountPlaceholder = function () {
     return react_1.default.createElement("div", { className: styles.placeholder });
 };
 var SimpleAttributeEditor = function (_a) {
-    var className = _a.className, attributeValue = _a.attributeValue, attributeType = _a.attributeType, isReltioCrosswalk = _a.isReltioCrosswalk, ownError = _a.ownError, mode = _a.mode, onAddOneMore = _a.onAddOneMore, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer"]);
+    var _b;
+    var className = _a.className, attributeValue = _a.attributeValue, attributeType = _a.attributeType, isReltioCrosswalk = _a.isReltioCrosswalk, ownError = _a.ownError, mode = _a.mode, onAddOneMore = _a.onAddOneMore, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, state = _a.state, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state"]);
     var styles = styles_1.useStyles();
+    var deleted = state === 'deleted';
+    var edited = state === 'edited';
     var isEditableMode = mdm_sdk_1.isEditableMode(mode);
     var dataTypeDefinition = mdm_sdk_1.getAttrDataTypeDefinition(attributeType);
     var value = utils_1.attributeValueToEditorValue(attributeValue, dataTypeDefinition);
@@ -93,13 +98,18 @@ var SimpleAttributeEditor = function (_a) {
     };
     if (showToEdit) {
         var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue;
-        var showDeleteButton = !!onDeleteAttribute && canDelete;
+        var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
         var hasError = !!errorMessage;
+        var deletedProps = deleted ? { disabled: true } : {};
         return (react_1.default.createElement("div", { className: classnames_1.default(styles.editor, className) },
             react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
-                react_1.default.createElement("div", { className: styles['editor-value'] },
-                    react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: ramda_1.pipe(utils_1.prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps)))),
+                react_1.default.createElement("div", { className: classnames_1.default(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b)) },
+                    react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: ramda_1.pipe(utils_1.prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps)))),
             react_1.default.createElement("div", { className: styles['editor-actions'] },
+                edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.editedLabel },
+                    "(",
+                    ui_i18n_1.default.text('edited'),
+                    ")")),
                 showAddButton && (react_1.default.createElement(SmallIconButton_1.default, { icon: Add_1.default, onClick: onAddOneMore, size: "L", className: classnames_1.default(styles.addButton, styles.button) })),
                 additionalControlsRenderer && additionalControlsRenderer({ attributeType: attributeType, attributeValue: attributeValue }),
                 showDeleteButton && (react_1.default.createElement(SmallIconButton_1.default, { className: styles.button, icon: Delete_1.default, onClick: onDelete, size: "L" })))));
@@ -115,6 +125,7 @@ SimpleAttributeEditor.propTypes = {
     attributeType: mdm_sdk_1.AttributeTypeType,
     ownError: mdm_sdk_1.AttributeErrorType,
     isReltioCrosswalk: prop_types_1.default.bool,
+    state: prop_types_1.default.oneOf(['deleted', 'edited']),
     mode: mdm_sdk_1.ModeType,
     onAddOneMore: prop_types_1.default.func,
     onDeleteAttribute: prop_types_1.default.func,

package/components/attributes/editMode/SimpleAttributeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "placeholder" | "wrapper" | "addButton" | "editor" | "editor-value" | "editor-actions">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"deleted" | "button" | "placeholder" | "wrapper" | "addButton" | "editor" | "editor-value" | "editor-actions" | "editedLabel">;

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

@@ -29,5 +29,13 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
     },
     placeholder: {
         height: 40 + marginBottom + "px"
+    },
+    deleted: {
+        color: theme.palette.text.secondary,
+        textDecoration: 'line-through'
+    },
+    editedLabel: {
+        fontStyle: 'italic',
+        color: theme.palette.text.secondary
     }
 }); });

package/components/attributes/inline/ComplexAttribute/ComplexAttribute.js

@@ -58,7 +58,7 @@ var ComplexAttribute = function (_a) {
             react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
             react_1.default.createElement("span", null,
                 label,
-                crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: crosswalk.value, crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
+                crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: mdm_sdk_1.getCrosswalkId(crosswalk), crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
             react_1.default.createElement(index_1.Spacer, null),
             react_1.default.createElement("div", { className: styles.actions },
                 showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),

package/components/attributes/readMode/AttributesPager/index.d.ts

@@ -21,6 +21,8 @@ declare var _default: import("react-redux").ConnectedComponent<import("react").M
     titleClassName?: string;
     contentClassName?: string;
     showTitle?: boolean;
-}, "requestNextPageOfAttributeValues">>;
+}, "max" | "requestNextPageOfAttributeValues"> & {
+    max?: any;
+}>;
 export default _default;
 import AttributesPager from "./AttributesPager";