@reltio/components 1.4.698 → 1.4.702

package/components/MultipliableSelect/styles.js

@@ -0,0 +1,14 @@
+"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({
+    multiSelect: {
+        padding: '3px 48px 3px 8px !important',
+        minHeight: '34px !important'
+    },
+    chips: {
+        display: 'flex',
+        flexWrap: 'wrap'
+    }
+});

package/components/Popper/Popper.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Popper_1 = __importDefault(require("@material-ui/core/Popper"));
+var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var utils_1 = require("../../core/utils");
+var utils_2 = require("./utils");
+var Popper = react_1.forwardRef(function (_a, ref) {
+    var modifiersProp = _a.modifiers, _b = _a.modal, modal = _b === void 0 ? true : _b, onClose = _a.onClose, anchorEl = _a.anchorEl, open = _a.open, className = _a.className, otherProps = __rest(_a, ["modifiers", "modal", "onClose", "anchorEl", "open", "className"]);
+    var styles = styles_1.useStyles();
+    var leftBackdropRef = react_1.useRef();
+    var rightBackdropRef = react_1.useRef();
+    var topBackdropRef = react_1.useRef();
+    var bottomBackdropRef = react_1.useRef();
+    var rafIdRef = react_1.useRef();
+    react_1.useEffect(function () {
+        if (open && modal) {
+            utils_2.resizeBackdrops({
+                anchorEl: anchorEl,
+                leftBackdropRef: leftBackdropRef,
+                rightBackdropRef: rightBackdropRef,
+                topBackdropRef: topBackdropRef,
+                bottomBackdropRef: bottomBackdropRef,
+                rafIdRef: rafIdRef
+            });
+            return function () { return cancelAnimationFrame(rafIdRef.current); }; //eslint-disable-line
+        }
+    }, [anchorEl, open, modal]);
+    var modifiers = react_1.useMemo(function () { return (__assign(__assign({}, modifiersProp), (utils_1.isIE()
+        ? {
+            computeStyle: {
+                gpuAcceleration: false
+            }
+        }
+        : {}))); }, [modifiersProp]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        modal && open && (react_1.default.createElement(Portal_1.default, { container: document.body },
+            react_1.default.createElement("div", { ref: topBackdropRef, className: styles.backdrop, onClick: onClose }),
+            react_1.default.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
+            react_1.default.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
+            react_1.default.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))),
+        react_1.default.createElement(Popper_1.default, __assign({ open: open, anchorEl: anchorEl }, otherProps, { modifiers: modifiers, className: classnames_1.default(className, styles.popper), ref: ref }))));
+});
+Popper.displayName = 'Popper';
+Popper.defaultProps = {
+    modifiers: {}
+};
+exports.default = Popper;

package/components/Popper/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({
+    backdrop: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 10
+    },
+    popper: {
+        zIndex: 100
+    }
+});

package/components/Popper/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resizeBackdrops = exports.RAF_THROTTLE_INTERVAL = void 0;
+exports.RAF_THROTTLE_INTERVAL = 100;
+var resizeBackdrops = function (_a) {
+    var anchorEl = _a.anchorEl, leftBackdropRef = _a.leftBackdropRef, rightBackdropRef = _a.rightBackdropRef, topBackdropRef = _a.topBackdropRef, bottomBackdropRef = _a.bottomBackdropRef, rafIdRef = _a.rafIdRef, _b = _a.lastResizeTimestamp, lastResizeTimestamp = _b === void 0 ? 0 : _b;
+    if (anchorEl) {
+        if (Date.now() - lastResizeTimestamp > exports.RAF_THROTTLE_INTERVAL &&
+            topBackdropRef.current &&
+            leftBackdropRef.current &&
+            rightBackdropRef.current &&
+            bottomBackdropRef.current) {
+            var rect = anchorEl.getBoundingClientRect();
+            topBackdropRef.current.style.top = '0';
+            topBackdropRef.current.style.left = '0';
+            topBackdropRef.current.style.right = '0';
+            topBackdropRef.current.style.height = rect.top + 'px';
+            leftBackdropRef.current.style.top = '0';
+            leftBackdropRef.current.style.left = '0';
+            leftBackdropRef.current.style.width = rect.left + 'px';
+            leftBackdropRef.current.style.bottom = '0';
+            rightBackdropRef.current.style.top = '0';
+            rightBackdropRef.current.style.left = rect.right + 'px';
+            rightBackdropRef.current.style.right = '0';
+            rightBackdropRef.current.style.bottom = '0';
+            bottomBackdropRef.current.style.top = rect.bottom + 'px';
+            bottomBackdropRef.current.style.left = '0';
+            bottomBackdropRef.current.style.right = '0';
+            bottomBackdropRef.current.style.bottom = '0';
+            lastResizeTimestamp = Date.now();
+        }
+        rafIdRef.current = requestAnimationFrame(function () {
+            return exports.resizeBackdrops({
+                anchorEl: anchorEl,
+                leftBackdropRef: leftBackdropRef,
+                rightBackdropRef: rightBackdropRef,
+                topBackdropRef: topBackdropRef,
+                bottomBackdropRef: bottomBackdropRef,
+                rafIdRef: rafIdRef,
+                lastResizeTimestamp: lastResizeTimestamp
+            });
+        });
+    }
+};
+exports.resizeBackdrops = resizeBackdrops;

package/components/PopupWithArrow/PopupWithArrow.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupWithArrow = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var ClickAwayListener_1 = __importDefault(require("@material-ui/core/ClickAwayListener"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Popper_1 = __importDefault(require("../Popper/Popper"));
+var styles_1 = require("./styles");
+var PopupWithArrow = function (_a) {
+    var anchorEl = _a.anchorEl, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.arrow, arrow = _c === void 0 ? true : _c, open = _a.open, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, children = _a.children, className = _a.className, popperRef = _a.popperRef;
+    var styles = styles_1.useStyles();
+    var _e = react_1.default.useState(null), arrowRef = _e[0], setArrowRef = _e[1];
+    return (react_1.default.createElement(Popper_1.default, { anchorEl: anchorEl, placement: placement, className: classnames_1.default(styles.popper, className), modifiers: {
+            preventOverflow: {
+                enabled: true,
+                boundariesElement: 'window'
+            },
+            arrow: {
+                enabled: arrow,
+                element: arrowRef
+            }
+        }, open: open, modal: false, popperRef: popperRef },
+        react_1.default.createElement(Box_1.default, null,
+            react_1.default.createElement(ClickAwayListener_1.default, { onClickAway: onClose },
+                react_1.default.createElement(Paper_1.default, { className: styles.popoverRoot },
+                    arrow ? react_1.default.createElement("span", { className: styles.arrow, ref: setArrowRef }) : null,
+                    react_1.default.createElement(Box_1.default, null, children))))));
+};
+exports.PopupWithArrow = PopupWithArrow;

package/components/PopupWithArrow/styles.js

@@ -0,0 +1,75 @@
+"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 (theme) {
+    var color = theme.palette.background.paper;
+    return {
+        popoverRoot: {
+            backgroundColor: color,
+            maxWidth: 1000
+        },
+        popper: {
+            '&[x-placement*="bottom"] $arrow': {
+                top: 0,
+                left: 0,
+                marginTop: '-0.71em',
+                marginLeft: 4,
+                marginRight: 4,
+                '&::before': {
+                    transformOrigin: '0 100%'
+                }
+            },
+            '&[x-placement*="top"] $arrow': {
+                bottom: 0,
+                left: 0,
+                marginBottom: '-0.71em',
+                marginLeft: 4,
+                marginRight: 4,
+                '&::before': {
+                    transformOrigin: '100% 0'
+                }
+            },
+            '&[x-placement*="right"] $arrow': {
+                left: 0,
+                marginLeft: '-0.71em',
+                height: '1em',
+                width: '0.71em',
+                marginTop: 4,
+                marginBottom: 4,
+                '&::before': {
+                    transformOrigin: '100% 100%'
+                }
+            },
+            '&[x-placement*="left"] $arrow': {
+                right: 0,
+                marginRight: '-0.71em',
+                height: '1em',
+                width: '0.71em',
+                marginTop: 4,
+                marginBottom: 4,
+                '&::before': {
+                    transformOrigin: '0 0'
+                }
+            }
+        },
+        arrow: {
+            overflow: 'hidden',
+            position: 'absolute',
+            width: '1em',
+            height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
+            boxSizing: 'border-box',
+            color: color,
+            '&::before': {
+                content: '""',
+                margin: 'auto',
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                boxShadow: theme.shadows[1],
+                backgroundColor: 'currentColor',
+                transform: 'rotate(45deg)'
+            }
+        }
+    };
+});

package/components/PotentialMatchReviewCard/PotentialMatchReviewCard.js

@@ -0,0 +1,65 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var Flag_1 = __importDefault(require("@material-ui/icons/Flag"));
+var CollapseButton_1 = __importDefault(require("../CollapseButton/CollapseButton"));
+var PmIcon_1 = __importDefault(require("../../icons/PmIcon"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var PotentialMatchReviewCard = function (_a) {
+    var _b;
+    var date = _a.date, type = _a.type, createdBy = _a.createdBy, step = _a.step, children = _a.children, Actions = _a.Actions;
+    var styles = styles_1.useStyles();
+    var _c = react_1.useState(false), isExpanded = _c[0], setExpanded = _c[1];
+    return (react_1.default.createElement("div", { className: styles.pmReviewCard },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.header, (_b = {}, _b[styles.expanded] = isExpanded, _b)) },
+            react_1.default.createElement(PmIcon_1.default, { className: styles.icon }),
+            react_1.default.createElement("div", { className: styles.mainInfo },
+                react_1.default.createElement("div", { className: styles.title },
+                    react_1.default.createElement("div", { className: classnames_1.default(styles.caption, styles.flex) }, ui_i18n_1.default.text('Match review')),
+                    react_1.default.createElement(Flag_1.default, { className: styles.flag }),
+                    react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(date, 'L')),
+                    react_1.default.createElement(CollapseButton_1.default, { isOpen: isExpanded, onClick: function () {
+                            setExpanded(!isExpanded);
+                        } })),
+                react_1.default.createElement("div", { className: styles.infoBlock },
+                    react_1.default.createElement("div", { className: styles.flex },
+                        react_1.default.createElement("div", { className: styles.info }, type),
+                        react_1.default.createElement("div", { className: styles.info }, ui_i18n_1.default.text('Created by ${createdBy}', { createdBy: createdBy })),
+                        react_1.default.createElement("div", { className: styles.info }, ui_i18n_1.default.text('Step: ${step}', { step: step }))),
+                    Actions))),
+        isExpanded ? children : null));
+};
+PotentialMatchReviewCard.propTypes = {
+    date: prop_types_1.default.number,
+    createdBy: prop_types_1.default.string,
+    type: prop_types_1.default.string,
+    step: prop_types_1.default.string,
+    children: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.arrayOf(prop_types_1.default.node)]),
+    Actions: prop_types_1.default.node
+};
+exports.default = PotentialMatchReviewCard;

package/components/PotentialMatchReviewCard/styles.js

@@ -0,0 +1,65 @@
+"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 (theme) { return ({
+    expanded: {
+        backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    },
+    info: {
+        fontSize: '13px',
+        color: theme.palette.text.secondary,
+        wordWrap: 'break-word'
+    },
+    icon: {
+        width: '32px',
+        height: '32px',
+        fill: '#fff',
+        backgroundColor: 'rgba(177, 92, 189, 1)',
+        borderRadius: '50%',
+        margin: '5px 12px 0 8px'
+    },
+    infoBlock: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    header: {
+        display: 'flex',
+        flexDirection: 'row',
+        paddingBottom: '5px'
+    },
+    flex: {
+        flex: 1
+    },
+    caption: {
+        fontSize: '16px',
+        color: 'rgba(0, 0, 0, 0.87)'
+    },
+    title: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: '6px 0 8px 0'
+    },
+    flag: {
+        height: '12px',
+        width: '12px',
+        stroke: '#000000',
+        fill: 'none',
+        margin: '2px 5px 0 5px'
+    },
+    pmReviewCard: {
+        borderTop: '3px solid #E83D40',
+        flexDirection: 'column',
+        width: '100%'
+    },
+    date: {
+        fontSize: '13px',
+        color: 'rgba(0, 0, 0, 0.87)'
+    },
+    mainInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1
+    }
+}); });

package/components/ProfileBand/ProfileBand.js

@@ -0,0 +1,96 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_redux_1 = require("react-redux");
+var ramda_1 = require("ramda");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var EntityAvatar_1 = __importDefault(require("../EntityAvatar/EntityAvatar"));
+var Score_1 = __importDefault(require("../Score/Score"));
+var EntityTypeBadge_1 = __importDefault(require("../EntityTypeBadge/EntityTypeBadge"));
+var styles_1 = __importDefault(require("./styles"));
+var ProfileBand = function (_a) {
+    var _b;
+    var className = _a.className, entity = _a.entity, scoresToShow = _a.scoresToShow, rangeColorsConfig = _a.rangeColorsConfig, children = _a.children, classes = _a.classes;
+    var styles = styles_1.default({ classes: classes });
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var handleCopyEntityIdToClipboard = react_1.useCallback(function () {
+        navigator.clipboard.writeText(mdm_sdk_1.getEntityId(entity));
+    }, [entity]);
+    if (ramda_1.isNil(entity)) {
+        return null;
+    }
+    var label = mdm_sdk_1.getLabel(entity.label);
+    var secondaryLabel = entity.secondaryLabel;
+    var businessCardText = mdm_sdk_1.getBusinessCardAttributesText(metadata, entity);
+    var isActive = mdm_sdk_1.isActiveObject(entity);
+    var scores = mdm_sdk_1.getScores(metadata, entity, scoresToShow);
+    var entityUri = entity.uri;
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.profileBandWrapper, className) },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.profileBand, (_b = {},
+                _b[styles.inactive] = !isActive,
+                _b)), "data-entity-uri": entityUri },
+            react_1.default.createElement(EntityAvatar_1.default, { key: entity.uri, entity: entity, avatarClassName: styles.profileIcon, imageClassName: styles.imageProfileIcon }),
+            react_1.default.createElement("div", { className: styles.profileInfo },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(Typography_1.default, { variant: "h6", className: styles.label }, label),
+                    secondaryLabel && (react_1.default.createElement(Typography_1.default, { variant: "subtitle2", className: styles.secondaryLabel }, secondaryLabel)),
+                    businessCardText && (react_1.default.createElement(Typography_1.default, { variant: "subtitle1", className: styles.businessCard }, businessCardText))),
+                react_1.default.createElement("div", { className: styles.specialInfo },
+                    react_1.default.createElement("div", { className: styles.entityType },
+                        react_1.default.createElement(EntityTypeBadge_1.default, { entity: entity, size: "medium", className: styles.badge }),
+                        scores.length > 0 && (react_1.default.createElement("div", { className: styles.scores }, scores.map(function (score) { return (react_1.default.createElement(Score_1.default, __assign({ key: score.uri }, score, { rangeColorsConfig: rangeColorsConfig }))); }))),
+                        react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Copy to clipboard') },
+                            react_1.default.createElement(Typography_1.default, { display: "inline", variant: "body2", className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
+                                ui_i18n_1.default.text('Entity ID'),
+                                ": ",
+                                mdm_sdk_1.getEntityId(entity)))))),
+            children && react_1.default.createElement("div", null, children))));
+};
+ProfileBand.propTypes = {
+    className: prop_types_1.default.string,
+    entity: prop_types_1.default.object,
+    scoresToShow: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    rangeColorsConfig: prop_types_1.default.object,
+    children: prop_types_1.default.node,
+    classes: prop_types_1.default.object
+};
+exports.default = ProfileBand;

package/components/ProfileBand/styles.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles(function (theme) { return ({
+    profileBandWrapper: {
+        // especially for IE (overflow fix)
+        flexShrink: 0
+    },
+    profileBand: {
+        display: 'flex',
+        padding: '16px 12px 16px 16px',
+        alignItems: 'flex-start',
+        backgroundColor: '#fff',
+        boxShadow: 'inset 0 -1px 0 0 rgba(0,114,206,0.06), inset 0 1px 0 0 rgba(0,114,206,0.06);',
+        '&:after': {
+            // IE workaround for minHeight and centering items
+            content: '""',
+            minHeight: 'inherit',
+            fontSize: 0
+        }
+    },
+    inactive: {
+        background: theme.inactiveBackground
+    },
+    profileIcon: {
+        marginRight: '12px'
+    },
+    imageProfileIcon: {
+        width: '48px',
+        height: '48px'
+    },
+    profileInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
+    },
+    badge: {},
+    label: {
+        lineHeight: '1.2',
+        letterSpacing: '0.25px',
+        color: theme.palette.text.primary,
+        wordBreak: 'break-word',
+        '&+ $specialInfo': {
+            marginTop: '4px'
+        }
+    },
+    secondaryLabel: {
+        display: 'inline-flex',
+        color: theme.palette.text.primary,
+        marginTop: '2px',
+        lineHeight: '16px',
+        fontSize: '14px',
+        fontWeight: 400,
+        '&+ $businessCard': {
+            marginLeft: '12px'
+        }
+    },
+    businessCard: {
+        color: theme.palette.text.secondary,
+        display: 'inline-flex',
+        fontSize: '14px',
+        marginTop: '4px',
+        lineHeight: '1.2'
+    },
+    specialInfo: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        width: '100%',
+        marginTop: '8px'
+    },
+    entityType: {
+        display: 'flex',
+        flexWrap: 'wrap'
+    },
+    entityId: {
+        fontSize: '13px',
+        color: theme.palette.text.secondary,
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        '&:hover': {
+            textDecoration: 'underline'
+        }
+    },
+    scores: {
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'flex-end',
+        paddingRight: '20px'
+    }
+}); });
+exports.default = useStyles;