@reltio/components 1.4.699 → 1.4.703

package/components/ExpandableSearchInput/ExpandableSearchInput.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandableSearchInput = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var Close_1 = __importDefault(require("@material-ui/icons/Close"));
+var IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
+var Input_1 = __importDefault(require("@material-ui/core/Input"));
+var InputAdornment_1 = __importDefault(require("@material-ui/core/InputAdornment"));
+var Search_1 = __importDefault(require("@material-ui/icons/Search"));
+var SmallIconButton_1 = require("../SmallIconButton");
+var core_1 = require("../../core");
+var styles_1 = require("./styles");
+var ExpandableSearchInput = function (_a) {
+    var query = _a.query, onChange = _a.onChange;
+    var _b = react_1.useState(query), value = _b[0], setValue = _b[1];
+    var _c = react_1.useState(!!query), isOpen = _c[0], setIsOpen = _c[1];
+    react_1.useEffect(function () {
+        setValue(query);
+    }, [query]);
+    var styles = styles_1.useStyles();
+    var hasValue = value && value.length;
+    return isOpen ? (react_1.default.createElement(Input_1.default, { className: styles.input, value: value, autoFocus: true, placeholder: ui_i18n_1.default.text('Search'), disableUnderline: true, onChange: ramda_1.pipe(core_1.getValue, setValue), startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
+            react_1.default.createElement(Search_1.default, { className: styles.startAdornment })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, hasValue && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, onClick: ramda_1.pipe(ramda_1.F, setIsOpen, ramda_1.always(''), ramda_1.tap(onChange), setValue) }))), onKeyPress: ramda_1.when(ramda_1.propEq('key', 'Enter'), ramda_1.pipe(ramda_1.always(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { className: styles.searchButton, onClick: ramda_1.pipe(ramda_1.T, setIsOpen) },
+        react_1.default.createElement(Search_1.default, null)));
+};
+exports.ExpandableSearchInput = ExpandableSearchInput;

package/components/ExpandableSearchInput/styles.js

@@ -0,0 +1,23 @@
+"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({
+    searchButton: {
+        marginLeft: 'auto !important',
+        marginRight: '-4px',
+        padding: '8px'
+    },
+    input: {
+        flex: '1 0 200px',
+        marginLeft: '70px',
+        fontSize: '14px',
+        background: 'rgba(0,0,0,0.03) 2px',
+        padding: '4px 0',
+        marginRight: '4px'
+    },
+    startAdornment: {
+        color: 'rgba(0,0,0,0.54)',
+        paddingLeft: '8px'
+    }
+});

package/components/ExpandedValueTooltip/ExpandedValueTooltip.js

@@ -0,0 +1,88 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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 });
+exports.ExpandedValueTooltipType = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var styles_1 = require("@material-ui/core/styles");
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var RootRef_1 = __importDefault(require("@material-ui/core/RootRef"));
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var useStyles = styles_1.makeStyles(function (theme) { return ({
+    tooltip: theme.tooltip,
+    popper: {
+        zIndex: 10000
+    }
+}); });
+// (el.scrollWidth - 1) because of IE issue with scrollWidth
+var checkOverflow = function (el, showOnExceededWidth, showOnExceededHeight) {
+    return (el &&
+        ((showOnExceededWidth && el.clientWidth < el.scrollWidth - 1) ||
+            (showOnExceededHeight && el.clientHeight < el.scrollHeight - 1)));
+};
+var ExpandedValueTooltip = function (_a) {
+    var children = _a.children, value = _a.value, className = _a.className, _b = _a.showOnExceededWidth, showOnExceededWidth = _b === void 0 ? true : _b, showOnExceededHeight = _a.showOnExceededHeight, otherProps = __rest(_a, ["children", "value", "className", "showOnExceededWidth", "showOnExceededHeight"]);
+    var childrenRef = react_1.useRef();
+    var tooltipStyles = useStyles();
+    var _c = react_1.useState(false), isOverflowing = _c[0], setIsOverflowing = _c[1];
+    var updateOverflowState = function () {
+        return setIsOverflowing(checkOverflow(childrenRef.current, showOnExceededWidth, showOnExceededHeight));
+    };
+    react_1.useEffect(updateOverflowState, [showOnExceededHeight, showOnExceededWidth, value]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_resize_detector_1.default, { handleWidth: showOnExceededWidth, handleHeight: showOnExceededHeight, onResize: updateOverflowState }),
+        react_1.default.createElement(RootRef_1.default, { rootRef: childrenRef },
+            react_1.default.createElement(Tooltip_1.default, __assign({ title: isOverflowing ? value : '', classes: __assign(__assign({}, tooltipStyles), { tooltip: className }) }, otherProps), children))));
+};
+exports.ExpandedValueTooltipType = {
+    children: prop_types_1.default.node,
+    value: prop_types_1.default.node,
+    className: prop_types_1.default.string,
+    showOnExceededWidth: prop_types_1.default.bool,
+    showOnExceededHeight: prop_types_1.default.bool
+};
+ExpandedValueTooltip.propTypes = exports.ExpandedValueTooltipType;
+exports.default = ExpandedValueTooltip;

package/components/FacetViewHeader/FacetViewHeader.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var BasicViewHeader_1 = __importDefault(require("../BasicViewHeader/BasicViewHeader"));
+var styles_1 = require("./styles");
+var FacetViewHeader = function (_a) {
+    var className = _a.className, title = _a.title, children = _a.children;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(BasicViewHeader_1.default, { title: title, classes: { root: classnames_1.default(styles.container, className), title: styles.title } }, children));
+};
+exports.default = FacetViewHeader;

package/components/FacetViewHeader/styles.js

@@ -0,0 +1,17 @@
+"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({
+    container: {
+        padding: '0 16px',
+        minHeight: '48px'
+    },
+    title: {
+        fontSize: '16px',
+        lineHeight: '19px',
+        paddingTop: '16px',
+        paddingBottom: '13px',
+        justifyContent: 'flex-start'
+    }
+});

package/components/FlipCard/FlipCard.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("./styles");
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var FlipCard = react_1.forwardRef(function (_a, ref) {
+    var _b = _a.cardZIndex, cardZIndex = _b === void 0 ? 'auto' : _b, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, _d = _a.isCardFlipped, isCardFlipped = _d === void 0 ? false : _d, children = _a.children, className = _a.className;
+    var _e = react_1.useState(isCardFlipped), isFlipped = _e[0], setFlipped = _e[1];
+    var styles = styles_1.useStyles({ cardZIndex: cardZIndex, direction: direction, isFlipped: isFlipped });
+    react_1.useEffect(function () {
+        if (isCardFlipped !== isFlipped) {
+            setFlipped(isCardFlipped);
+        }
+    }, [isCardFlipped, isFlipped]);
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.flipper, className), ref: ref },
+        react_1.default.createElement("div", { "data-id": "front", className: styles.front }, children[0]),
+        react_1.default.createElement("div", { "data-id": "back", className: styles.back }, children[1])));
+});
+exports.default = FlipCard;

package/components/FlipCard/styles.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var frontRotateY = function (isFlipped) { return "rotateY(" + (isFlipped ? 180 : 0) + "deg)"; };
+var frontRotateX = function (isFlipped) { return "rotateX(" + (isFlipped ? 180 : 0) + "deg)"; };
+var backRotateY = function (isFlipped) { return "rotateY(" + (isFlipped ? 0 : -180) + "deg)"; };
+var backRotateX = function (isFlipped) { return "rotateX(" + (isFlipped ? 0 : -180) + "deg)"; };
+exports.useStyles = styles_1.makeStyles({
+    back: function (_a) {
+        var isFlipped = _a.isFlipped, direction = _a.direction;
+        return ({
+            WebkitBackfaceVisibility: 'hidden',
+            backfaceVisibility: 'hidden',
+            height: '100%',
+            left: '0',
+            position: isFlipped ? 'relative' : 'absolute',
+            top: '0',
+            transform: direction === 'horizontal' ? backRotateY(isFlipped) : backRotateX(isFlipped),
+            transformStyle: 'preserve-3d',
+            transition: '0.7s',
+            width: '100%',
+            display: 'flex'
+        });
+    },
+    container: function (_a) {
+        var cardZIndex = _a.cardZIndex;
+        return ({
+            perspective: '1000px',
+            zIndex: cardZIndex
+        });
+    },
+    flipper: {
+        height: '100%',
+        position: 'relative',
+        width: '100%'
+    },
+    front: function (_a) {
+        var isFlipped = _a.isFlipped, direction = _a.direction;
+        return ({
+            WebkitBackfaceVisibility: 'hidden',
+            backfaceVisibility: 'hidden',
+            height: '100%',
+            left: '0',
+            position: isFlipped ? 'absolute' : 'relative',
+            top: '0',
+            transform: direction === 'horizontal' ? frontRotateY(isFlipped) : frontRotateX(isFlipped),
+            transformStyle: 'preserve-3d',
+            transition: '0.7s',
+            width: '100%',
+            zIndex: 2,
+            display: 'flex'
+        });
+    }
+});

package/components/FlipCard/types/index.js

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

package/components/HideOnShrink/HideOnShrink.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var EmptyStub = function () { return react_1.default.createElement("div", { style: { display: 'none' } }); };
+var HideOnShrink = function (_a) {
+    var widthToHide = _a.widthToHide, children = _a.children;
+    return (react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, render: function (_a) {
+            var width = _a.width;
+            return (width > widthToHide ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(EmptyStub, null));
+        } }));
+};
+HideOnShrink.propTypes = {
+    children: prop_types_1.default.node,
+    widthToHide: prop_types_1.default.number.isRequired
+};
+exports.default = HideOnShrink;

package/components/HierarchicalAttributeTooltip/HierarchicalAttributeTooltip.js

@@ -0,0 +1,45 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var ramda_1 = require("ramda");
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var styles_1 = require("./styles");
+var HierarchicalAttributeTooltip = function (_a) {
+    var pathToTitle = _a.pathToTitle, children = _a.children, tooltipProps = __rest(_a, ["pathToTitle", "children"]);
+    var styles = styles_1.useStyles();
+    var tooltipContent = pathToTitle && pathToTitle.length ? (react_1.default.createElement("div", { className: styles.tooltipContent },
+        react_1.default.createElement("p", null, ramda_1.last(pathToTitle)),
+        pathToTitle.length > 2 && (react_1.default.createElement("ul", null, pathToTitle.map(function (label) { return (react_1.default.createElement("li", { key: label }, label)); }))))) : ('');
+    return (react_1.default.createElement(Tooltip_1.default, __assign({ title: tooltipContent, disableFocusListener: true, classes: { tooltip: styles.tooltip } }, tooltipProps), children));
+};
+HierarchicalAttributeTooltip.propTypes = {
+    pathToTitle: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    children: prop_types_1.default.node
+};
+exports.default = HierarchicalAttributeTooltip;

package/components/HierarchicalAttributeTooltip/styles.js

@@ -0,0 +1,54 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var ramda_1 = require("ramda");
+var nthLiStyles = ramda_1.range(2, 10).reduce(function (acc, i) {
+    var _a;
+    return (__assign(__assign({}, acc), (_a = {}, _a["&:nth-child(" + i + ")"] = {
+        paddingLeft: "calc(1em * (" + i + " - 2))",
+        '&::before': {
+            content: '"└"',
+            display: 'inline-block',
+            fontSize: '1em',
+            marginRight: '5px',
+            color: 'rgba(255, 255, 255, 0.28)'
+        }
+    }, _a)));
+}, {});
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    tooltip: theme.tooltip,
+    tooltipContent: {
+        minWidth: '165px',
+        padding: '4px 2px 2px',
+        '& p': {
+            fontSize: '11px',
+            lineHeight: '13px',
+            fontWeight: 500,
+            margin: 0,
+            color: 'white'
+        },
+        '& ul': {
+            listStyleType: 'none',
+            padding: 0,
+            margin: 0,
+            '& li': __assign(__assign({ fontSize: '10px', lineHeight: '11px', fontWeight: 500, color: 'rgba(255, 255, 255, 0.7)', marginTop: '4px' }, nthLiStyles), { '&:last-child': {
+                    color: 'white'
+                } }),
+            '& li + li': {
+                marginTop: '2px'
+            }
+        }
+    }
+}); });

package/components/Highlighter/Highlighter.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("./styles");
+var Highlighter = function (_a) {
+    var _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.highlight, highlight = _c === void 0 ? '' : _c, className = _a.className;
+    var styles = styles_1.useStyles();
+    var parts = highlight && text.split(new RegExp("(" + highlight + ")", 'gi'));
+    return (react_1.default.createElement("span", null, highlight
+        ? parts.map(function (part, i) { return (react_1.default.createElement("span", { key: i, className: part.toLocaleLowerCase() === highlight.toLocaleLowerCase()
+                ? className || styles.highlight
+                : '' }, part)); })
+        : text));
+};
+exports.default = Highlighter;

package/components/Highlighter/styles.js

@@ -0,0 +1,9 @@
+"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({
+    highlight: {
+        fontWeight: 600
+    }
+});

package/components/Image/CheckedIcon/CheckedIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckedIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var RadioButtonUnchecked_1 = __importDefault(require("@material-ui/icons/RadioButtonUnchecked"));
+var CheckCircle_1 = __importDefault(require("@material-ui/icons/CheckCircle"));
+var styles_1 = require("./styles");
+var CheckedIcon = function (_a) {
+    var checked = _a.checked, className = _a.className, onClick = _a.onClick;
+    var styles = styles_1.useStyles();
+    var Icon = checked ? CheckCircle_1.default : RadioButtonUnchecked_1.default;
+    return react_1.default.createElement(Icon, { className: classnames_1.default(styles.root, className), onClick: onClick });
+};
+exports.CheckedIcon = CheckedIcon;

package/components/Image/CheckedIcon/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function () { return ({
+    root: {
+        fontSize: '24px',
+        color: '#fff'
+    }
+}); });

package/components/Image/Image.js

@@ -0,0 +1,104 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSizesStyles = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var BrokenImage_1 = __importDefault(require("@material-ui/icons/BrokenImage"));
+var DefaultImage_1 = __importDefault(require("../../icons/DefaultImage"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var ImageLoadingState = {
+    LOADING: 'loading',
+    LOADED: 'loaded',
+    ERROR: 'error'
+};
+exports.ImageSizesStyles = {
+    SMALL: {
+        imageWidth: 114,
+        imageHeight: 114
+    },
+    MEDIUM: {
+        imageWidth: 162,
+        imageHeight: 162
+    },
+    LARGE: {
+        imageWidth: 192,
+        imageHeight: 192
+    },
+    OVERRIDE: {
+        imageWidth: 'unset',
+        imageHeight: 'unset'
+    }
+};
+var Image = function (props) {
+    var _a;
+    var src = props.src, className = props.className, containerClassName = props.containerClassName, _b = props.size, size = _b === void 0 ? exports.ImageSizesStyles.SMALL : _b, _c = props.overlay, overlay = _c === void 0 ? null : _c, otherProps = __rest(props, ["src", "className", "containerClassName", "size", "overlay"]);
+    var sizeStyles = size || exports.ImageSizesStyles.SMALL;
+    var styles = styles_1.useStyles(sizeStyles);
+    var _d = react_1.useState(ImageLoadingState.LOADING), imageLoadingState = _d[0], setImageLoadingState = _d[1];
+    react_1.useEffect(function () {
+        setImageLoadingState(ImageLoadingState.LOADING);
+    }, [src]);
+    var onImageLoadFail = function () {
+        setImageLoadingState(ImageLoadingState.ERROR);
+    };
+    var onImageLoad = function () {
+        setImageLoadingState(ImageLoadingState.LOADED);
+    };
+    var imageIsLoading = imageLoadingState === ImageLoadingState.LOADING;
+    var imageIsLoaded = imageLoadingState === ImageLoadingState.LOADED;
+    var imageLoadingError = imageLoadingState === ImageLoadingState.ERROR;
+    return imageLoadingError ? (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles.defaultContainer, styles.image, className) }, otherProps),
+        react_1.default.createElement(BrokenImage_1.default, { className: styles.defaultImage }))) : (react_1.default.createElement("div", { className: classnames_1.default(styles.root, containerClassName) },
+        !mdm_sdk_1.isEmptyValue(src) && (react_1.default.createElement("img", __assign({ src: src, className: classnames_1.default(styles.image, className, (_a = {},
+                _a[styles.hideImage] = imageIsLoading,
+                _a)), onLoad: onImageLoad, onError: onImageLoadFail, alt: 'image' }, otherProps))),
+        imageIsLoading && (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles.defaultContainer, styles.image, className) }, otherProps),
+            react_1.default.createElement(DefaultImage_1.default, { className: styles.defaultImage }))),
+        imageIsLoaded && overlay));
+};
+exports.default = react_1.memo(Image);