@reltio/components 1.4.1790 → 1.4.1824-hf

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

@@ -0,0 +1,163 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var Add_1 = __importDefault(require("@mui/icons-material/Add"));
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeValue"));
+var DataTypeValueEditor_1 = __importDefault(require("../../../editors/DataTypeValueEditor/DataTypeValueEditor"));
+var ErrorWrapper_1 = __importDefault(require("../../../ErrorWrapper/ErrorWrapper"));
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
+var utils_1 = require("./utils");
+var withAsyncMount_1 = __importDefault(require("../../../../HOCs/withAsyncMount/withAsyncMount"));
+var HOCs_1 = require("../../../../HOCs");
+var contexts_1 = require("../../../../contexts");
+var hooks_1 = require("../../../../hooks");
+var useAutopopulationContextValue_1 = require("./useAutopopulationContextValue");
+var useAttributeValuePermissions_1 = require("./useAttributeValuePermissions");
+var styles_1 = require("./styles");
+var AsyncMountPlaceholder = function () {
+    var styles = (0, styles_1.useStyles)();
+    return react_1.default.createElement("div", { className: styles.placeholder });
+};
+var SimpleAttributeEditor = function (_a) {
+    var _b, _c;
+    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, highlightedError = _a.highlightedError, _d = _a.isEmptyEditor, isEmptyEditor = _d === void 0 ? false : _d, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state", "highlightedError", "isEmptyEditor"]);
+    var styles = (0, styles_1.useStyles)();
+    var deleted = state === 'deleted';
+    var edited = state === 'edited';
+    var isEditableMode = (0, mdm_sdk_1.isEditableMode)(mode);
+    var _e = (0, useAttributeValuePermissions_1.useAttributeValuePermissions)({
+        attributeValue: attributeValue,
+        attributeType: attributeType,
+        mode: mode,
+        isReltioCrosswalk: isReltioCrosswalk
+    }), canCreate = _e.canCreate, canEdit = _e.canEdit, canDelete = _e.canDelete;
+    var showToEdit = canEdit && isEditableMode;
+    var errorMessage = (0, mdm_sdk_1.getErrorMessage)(ownError);
+    var dependentLookupEditorContext = (0, contexts_1.useMdmDependentLookupEditorContext)(attributeValue, attributeType);
+    var _f = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _f.ref, errorClassName = _f.errorClassName;
+    (0, react_1.useEffect)(function () {
+        // when editor is empty but has default lookup code, onChangeAttribute will be called by useLookupsResolver
+        if (isEmptyEditor && (0, mdm_sdk_1.isDependentLookupAttrType)(attributeType) && !(0, ramda_1.has)('lookupCode', attributeValue)) {
+            onChangeAttribute({
+                attributeType: attributeType,
+                uri: attributeValue.uri,
+                value: attributeValue.value,
+                silent: true
+            });
+        }
+    }, [isEmptyEditor]);
+    var dataTypeDefinition = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType); }, [attributeType]);
+    var value = (0, react_1.useMemo)(function () { return (0, utils_1.attributeValueToEditorValue)(attributeValue, dataTypeDefinition); }, [attributeValue, dataTypeDefinition]);
+    var deactivateError = (0, react_1.useCallback)(function () {
+        if (ownError) {
+            onDeactivateError((0, mdm_sdk_1.getErrorId)(ownError));
+        }
+    }, [ownError, onDeactivateError]);
+    var onValueEditorChange = (0, react_1.useCallback)((0, ramda_1.pipe)((0, utils_1.prepareChangeData)(attributeValue, attributeType), onChangeAttribute, deactivateError), [attributeValue, attributeType, onChangeAttribute, deactivateError]);
+    var onDelete = function () {
+        onDeleteAttribute({ uri: attributeValue.uri, attributeType: attributeType });
+        if ((0, mdm_sdk_1.getErrorType)(ownError) !== mdm_sdk_1.ErrorType.missed) {
+            deactivateError();
+        }
+    };
+    var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue;
+    var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
+    var hasError = !!errorMessage;
+    var deletedProps = deleted ? { disabled: true, isCrossedOut: true } : {};
+    var isProfilePerspectiveView = (0, react_1.useContext)(contexts_1.ProfilePerspectiveViewContext);
+    var autopopulationContextValue = (0, useAutopopulationContextValue_1.useAutopopulationContextValue)({
+        enabled: isProfilePerspectiveView && (0, mdm_sdk_1.isDependentLookupAttrType)(attributeType),
+        attributeTypeUri: attributeType === null || attributeType === void 0 ? void 0 : attributeType.uri,
+        valueUri: attributeValue.uri
+    }).autopopulationContextValue;
+    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)(styles.editor, className, errorClassName) },
+        react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage, className: styles.errorWrapper },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (react_1.default.createElement(contexts_1.DependentLookupAutopopulationContext.Provider, { value: autopopulationContextValue },
+                react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: onValueEditorChange, fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps)))) : (react_1.default.createElement(DataTypeValue_1.default, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
+        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: (0, classnames_1.default)(styles.addButton, styles.button), "data-reltio-id": "reltio-add-one-more-simple-attribute-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", "data-reltio-id": "reltio-delete-simple-attribute-button" })))));
+};
+SimpleAttributeEditor.propTypes = {
+    className: prop_types_1.default.string,
+    attributeValue: mdm_sdk_1.SimpleAttributeValueType,
+    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,
+    onChangeAttribute: prop_types_1.default.func,
+    onDeactivateError: prop_types_1.default.func,
+    additionalControlsRenderer: prop_types_1.default.func,
+    highlightedError: prop_types_1.default.object,
+    isEmptyEditor: prop_types_1.default.bool
+};
+var SimpleAttributeEditorWithScrollToElementContext = (0, HOCs_1.withContext)(contexts_1.ScrollToElementContext, function (contextValue, _a) {
+    var attributeValue = _a.attributeValue;
+    var _b = contextValue || {}, element = _b.element, type = _b.type;
+    var isHighlighted = (0, contexts_1.isHighlightedErrorType)(type) && (element === null || element === void 0 ? void 0 : element.uri) === attributeValue.uri;
+    return { highlightedError: isHighlighted ? contextValue : null };
+}, SimpleAttributeEditor);
+exports.default = (0, withAsyncMount_1.default)(SimpleAttributeEditorWithScrollToElementContext, AsyncMountPlaceholder);

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"deleted" | "button" | "placeholder" | "editor" | "wrapper" | "addButton" | "errorWrapper" | "editor-value" | "editor-read-only-value" | "editor-actions" | "editedLabel">;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAttributeValuePermissions = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../../contexts");
+var useAttributeValuePermissions = function (_a) {
+    var attributeType = _a.attributeType, attributeValue = _a.attributeValue, isReltioCrosswalk = _a.isReltioCrosswalk, mode = _a.mode;
+    var _b = (0, contexts_1.useAttributeValueConfigPermissions)(attributeValue.uri), configCanCreate = _b.canCreate, configCanUpdate = _b.canUpdate, configCanDelete = _b.canDelete;
+    var canCreate = configCanCreate && (0, mdm_sdk_1.checkCanCreateAttribute)({ attributeType: attributeType, mode: mode });
+    var canEdit = configCanUpdate && (0, mdm_sdk_1.checkCanEditAttribute)({ attributeType: attributeType, attributeValue: attributeValue, mode: mode, isReltioCrosswalk: isReltioCrosswalk });
+    var canDelete = configCanDelete && (0, mdm_sdk_1.checkCanDeleteAttribute)({ attributeType: attributeType, attributeValue: attributeValue, mode: mode, isReltioCrosswalk: isReltioCrosswalk });
+    return { canCreate: canCreate, canEdit: canEdit, canDelete: canDelete };
+};
+exports.useAttributeValuePermissions = useAttributeValuePermissions;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutopopulationContextValue = void 0;
+var react_1 = require("react");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../../contexts");
+var useAutopopulationContextValue = function (_a) {
+    var enabled = _a.enabled, attributeTypeUri = _a.attributeTypeUri, valueUri = _a.valueUri;
+    var dependentLookupsEditorTouched = (0, contexts_1.useMdmAction)('dependentLookupsEditorTouched');
+    var autocompleteConfig = (0, contexts_1.useMdmLookupAutocomplete)();
+    var dependentLookupEditorState = (0, contexts_1.useMdmDependentLookupEditorState)(valueUri);
+    var autopopulationEnabled = enabled && (0, mdm_sdk_1.isAutopopulationEnabled)(autocompleteConfig, attributeTypeUri);
+    var autopopulationId = autopopulationEnabled ? valueUri : null;
+    var _b = ((autopopulationEnabled && dependentLookupEditorState) || {}).isTouched, isTouched = _b === void 0 ? false : _b;
+    var onTouch = (0, react_1.useCallback)(function (valueUri) {
+        dependentLookupsEditorTouched({ uri: valueUri, isTouched: true });
+    }, [dependentLookupsEditorTouched]);
+    var autopopulationContextValue = (0, react_1.useMemo)(function () {
+        return autopopulationId
+            ? {
+                id: autopopulationId,
+                isTouched: isTouched,
+                onTouch: onTouch
+            }
+            : null;
+    }, [autopopulationId, isTouched, onTouch]);
+    return { autopopulationContextValue: autopopulationContextValue };
+};
+exports.useAutopopulationContextValue = useAutopopulationContextValue;

package/cjs/components/attributes/editMode/SimpleAttributeEditor/utils.d.ts

@@ -0,0 +1,5 @@
+export function attributeValueToEditorValue(attributeValue: {}, { type }: {
+    type: any;
+}): any;
+export function editorValueToAttributeValue(attributeType: any, editorValue: any): any;
+export const prepareChangeData: any;

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareChangeData = exports.editorValueToAttributeValue = exports.attributeValueToEditorValue = void 0;
+var moment_1 = __importDefault(require("moment"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var mdm_sdk_2 = require("@reltio/mdm-sdk");
+var attributeValueToEditorValue = function (attributeValue, _a) {
+    if (attributeValue === void 0) { attributeValue = {}; }
+    var type = _a.type;
+    var value = attributeValue.value, lookupCode = attributeValue.lookupCode;
+    switch (type) {
+        case mdm_sdk_1.DataTypes.TYPE_BOOLEAN:
+        case mdm_sdk_1.DataTypes.TYPE_BOOLEAN_RADIO:
+        case mdm_sdk_1.DataTypes.TYPE_RDM_LOOKUPS_NOT_RESOLVED: {
+            return (0, mdm_sdk_1.parseBoolean)(value);
+        }
+        case mdm_sdk_1.DataTypes.TYPE_DATE:
+            return (value && mdm_sdk_2.utils.dates.toLocalDate(value)) || null;
+        case mdm_sdk_1.DataTypes.TYPE_LOCAL_DATE:
+        case mdm_sdk_1.DataTypes.TYPE_TIMESTAMP:
+        case mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE: {
+            return (value && new Date(value)) || null;
+        }
+        case mdm_sdk_1.DataTypes.TYPE_DEPENDENT_LOOKUP:
+        case mdm_sdk_1.DataTypes.TYPE_LOOKUP: {
+            return { value: value, lookupCode: lookupCode };
+        }
+        default:
+            return value;
+    }
+};
+exports.attributeValueToEditorValue = attributeValueToEditorValue;
+var editorValueToAttributeValue = function (attributeType, editorValue) {
+    var type = (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType).type;
+    switch (type) {
+        case mdm_sdk_1.DataTypes.TYPE_BOOLEAN:
+        case mdm_sdk_1.DataTypes.TYPE_BOOLEAN_RADIO:
+        case mdm_sdk_1.DataTypes.TYPE_RDM_LOOKUPS_NOT_RESOLVED:
+            return editorValue.toString();
+        case mdm_sdk_1.DataTypes.TYPE_DATE:
+            return (editorValue && (0, moment_1.default)(editorValue).format('YYYY-MM-DD')) || '';
+        case mdm_sdk_1.DataTypes.TYPE_TIMESTAMP: {
+            return (editorValue && (0, moment_1.default)(editorValue).utc().format()) || '';
+        }
+        case mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE:
+        case mdm_sdk_1.DataTypes.TYPE_LOCAL_DATE:
+            return editorValue && editorValue.valueOf();
+        default:
+            return editorValue || '';
+    }
+};
+exports.editorValueToAttributeValue = editorValueToAttributeValue;
+var prepareChangeData = (0, ramda_1.curry)(function (attributeValue, attributeType, editorValue) {
+    var value = editorValueToAttributeValue(attributeType, editorValue);
+    return {
+        value: value,
+        uri: attributeValue.uri,
+        attributeType: attributeType
+    };
+});
+exports.prepareChangeData = prepareChangeData;

package/cjs/components/attributes/editMode/Tags/Tags.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AttributeItem } from '@reltio/mdm-sdk';
+export type Props = {
+    className?: string;
+    values: string[];
+    onChange: (param: AttributeItem) => void;
+    onDelete?: (param: AttributeItem) => void;
+};
+declare const Tags: ({ className, values, onChange, onDelete }: Props) => JSX.Element;
+export default Tags;

package/cjs/components/attributes/editMode/Tags/Tags.js

@@ -0,0 +1,117 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var TypeaheadEditor_1 = __importDefault(require("../../../editors/TypeaheadEditor/TypeaheadEditor"));
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
+var contexts_1 = require("../../../../contexts");
+var styles_1 = require("./styles");
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
+    var styles = (0, styles_1.useStyles)();
+    var entityUri = (0, contexts_1.useMdmEntityUri)();
+    var globalSearchRequestOptions = (0, contexts_1.useMdmGlobalSearchRequestOptions)();
+    var getSuggestions = (0, react_1.useCallback)(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, mdm_sdk_1.getFacetedAttributeData)({
+                        fieldName: 'tags',
+                        searchValue: searchValue,
+                        options: __assign(__assign({}, globalSearchRequestOptions), { max: max, pageNo: pageNo })
+                    })];
+                case 1:
+                    response = _a.sent();
+                    return [2 /*return*/, Object.keys(response.tags)];
+            }
+        });
+    }); }, [globalSearchRequestOptions]);
+    var handleChange = (0, react_1.useCallback)(function (tags) {
+        onChange({
+            value: tags,
+            attributeType: mdm_sdk_1.EntityAttrTypes.tags,
+            uri: entityUri
+        });
+    }, [onChange, entityUri]);
+    var handleDelete = (0, react_1.useCallback)(function () {
+        onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.tags });
+    }, [entityUri, onDelete]);
+    return (react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
+        react_1.default.createElement(TypeaheadEditor_1.default, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
+        !!onDelete && (react_1.default.createElement(SmallIconButton_1.default, { "data-reltio-id": "reltio-tags-delete-button", className: styles.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
+};
+exports.default = Tags;

package/cjs/components/attributes/editMode/Tags/index.d.ts

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

package/cjs/components/attributes/editMode/Tags/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Tags_1 = require("./Tags");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tags_1).default; } });

package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.d.ts

@@ -0,0 +1,9 @@
+import { ContextType } from 'react';
+import { ScrollToElementContext } from '../../../../../contexts';
+export declare const useScrollToAttribute: (context?: ContextType<typeof ScrollToElementContext>) => {
+    ref: import("react").MutableRefObject<HTMLDivElement>;
+    highlightedClassName: string;
+} | {
+    ref: import("react").MutableRefObject<HTMLDivElement>;
+    highlightedClassName?: undefined;
+};

package/cjs/components/attributes/helpers/attributesView.d.ts

@@ -0,0 +1,8 @@
+import { AttributeType, Metadata, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
+export declare const getFilteredAttrTypes: (metadata: Metadata, type: string, includeUris: string[], excludeUris: string[]) => any;
+type PagersData = {
+    attrType: AttributeType;
+    values: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue | string | number)[];
+};
+export declare const splitPagersData: (alwaysVisibleTypeUris: string[], pagersData: PagersData[]) => [PagersData[], PagersData[]];
+export {};

package/cjs/components/attributes/helpers/attributesView.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitPagersData = exports.getFilteredAttrTypes = void 0;
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getFilteredAttrTypes = function (metadata, type, includeUris, excludeUris) {
+    var attrTypes = (0, ramda_1.pipe)(mdm_sdk_1.getEntityType, (0, ramda_1.defaultTo)({}), (0, ramda_1.props)(['attributes', 'analyticsAttributes']), (0, ramda_1.reject)(ramda_1.isNil), ramda_1.flatten, (0, ramda_1.concat)(ramda_1.__, (0, ramda_1.pipe)(ramda_1.values, (0, ramda_1.reject)((0, ramda_1.propEq)('uri', mdm_sdk_1.EntityAttrTypes.id.uri)))(mdm_sdk_1.EntityAttrTypes)))(metadata, type);
+    return includeUris.length
+        ? attrTypes.filter(function (_a) {
+            var uri = _a.uri;
+            return includeUris.includes(uri);
+        })
+        : attrTypes.filter(function (_a) {
+            var uri = _a.uri;
+            return !excludeUris.includes(uri);
+        });
+};
+exports.getFilteredAttrTypes = getFilteredAttrTypes;
+var splitPagersData = function (alwaysVisibleTypeUris, pagersData) {
+    return (0, ramda_1.partition)((0, ramda_1.pipe)((0, ramda_1.path)(['attrType', 'uri']), (0, ramda_1.includes)(ramda_1.__, alwaysVisibleTypeUris)), pagersData);
+};
+exports.splitPagersData = splitPagersData;

package/cjs/components/attributes/inline/AttributesList/AttributesList.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { AttributeType, RecordAttributesType } from '@reltio/mdm-sdk';
+import { CrosswalksMap } from '../types';
+import { DeleteAttributeEvent } from '../types/DeleteAttributeEvent';
+import { PinAttributeEvent } from '../types/PinAttributeEvent';
+import { IgnoreAttributeEvent } from '../types/IgnoreAttributeEvent';
+import { EditAttributeEvent } from '../types/EditAttributeEvent';
+import { AddAttributeEvent } from '../types/AddAttributeEvent';
+type Props = {
+    attributeTypes: AttributeType[];
+    attributes: RecordAttributesType;
+    parentUri: string;
+    crosswalksMap: CrosswalksMap;
+    disableDelete?: boolean;
+    disableEdit?: boolean;
+    onPin: (event: PinAttributeEvent) => void;
+    onIgnore: (event: IgnoreAttributeEvent) => void;
+    onDelete: (event: DeleteAttributeEvent) => void;
+    onEdit: (event: EditAttributeEvent) => void;
+    onAdd: (event: AddAttributeEvent) => void;
+    emptyTempAttributeUris: string[];
+};
+declare const AttributesList: ({ attributeTypes, attributes, ...props }: Props) => JSX.Element;
+export default AttributesList;

package/cjs/components/attributes/inline/AttributesList/AttributesList.js

@@ -0,0 +1,42 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var AttributesPager_1 = __importDefault(require("../AttributesPager/AttributesPager"));
+var ramda_1 = require("ramda");
+var Title_1 = __importDefault(require("../../../Title/Title"));
+var BranchDecorator_1 = __importDefault(require("../../BranchDecorator/BranchDecorator"));
+var styles_1 = require("./styles");
+var AttributesList = function (_a) {
+    var attributeTypes = _a.attributeTypes, attributes = _a.attributes, props = __rest(_a, ["attributeTypes", "attributes"]);
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(react_1.default.Fragment, null, attributeTypes.filter(mdm_sdk_1.isReadableAttribute).map(function (attributeType) { return (react_1.default.createElement(BranchDecorator_1.default, { key: attributeType.uri, enabled: true },
+        react_1.default.createElement(Title_1.default, { className: styles.title, label: attributeType.label }),
+        react_1.default.createElement(AttributesPager_1.default, __assign({ attributeType: attributeType, attributeValues: attributes[attributeType.name], paging: (0, ramda_1.path)(['paging', attributeType.uri], attributes) }, props)))); })));
+};
+exports.default = AttributesList;

package/cjs/components/attributes/inline/AttributesPager/AttributesPager.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { AttributeType, AttributeValue, Paging } from '@reltio/mdm-sdk';
+import { CrosswalksMap } from '../types';
+import { DeleteAttributeEvent } from '../types/DeleteAttributeEvent';
+import { PinAttributeEvent } from '../types/PinAttributeEvent';
+import { IgnoreAttributeEvent } from '../types/IgnoreAttributeEvent';
+import { EditAttributeEvent } from '../types/EditAttributeEvent';
+import { AddAttributeEvent } from '../types/AddAttributeEvent';
+type Props = {
+    attributeType: AttributeType;
+    attributeValues: AttributeValue[];
+    parentUri: string;
+    paging?: Paging;
+    max?: number;
+    crosswalksMap: CrosswalksMap;
+    disableDelete?: boolean;
+    disableEdit?: boolean;
+    onPin: (event: PinAttributeEvent) => void;
+    onIgnore: (event: IgnoreAttributeEvent) => void;
+    onDelete: (event: DeleteAttributeEvent) => void;
+    onEdit: (event: EditAttributeEvent) => void;
+    onAdd: (event: AddAttributeEvent) => void;
+    emptyTempAttributeUris: string[];
+    requestNextPage?: () => void;
+};
+declare const AttributesPager: ({ attributeType, attributeValues, paging, max, requestNextPage, ...props }: Props) => JSX.Element;
+export default AttributesPager;