@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.12

package/dist/Modals/ModalContent.js

@@ -1,246 +1,159 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["icon", "componentType"],
-  _excluded2 = ["componentType"],
-  _excluded3 = ["componentType"],
-  _excluded4 = ["text", "variant", "action"],
-  _excluded5 = ["text", "variant", "action"],
-  _excluded6 = ["action", "text"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
-import { Size } from '../types';
-import { ModalContainer } from './index';
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling, Note, scrollBarStyling } from '../styles';
-import { TooltipContainer, TooltipWrapper } from '../Tooltips';
-import { Button, IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { HyperLink } from '../HyperLink';
-import { DropdownButton } from "../Dropdown";
-import { ToggleButton } from "../Toggles";
-import { ImageWithFallbacks } from "../Image";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"])));
-var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
-var HeaderActions = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
-var HeaderWithImageActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
-var HeaderWithImage = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"])));
-var Header = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
-var Content = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), scrollBarStyling(Size.Small));
-var FooterLeftContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var FooterLeftNote = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var FooterLeftLink = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500));
-var FooterRightContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  gap: 8px;\n  margin-left: auto;\n"])));
-var Footer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
-var Wrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, ComponentLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentLStyling(ComponentTextStyle.Bold, null), FooterRightContainer);
-var ModalContent = function ModalContent(props) {
-  var _props$size, _props$footerActions;
-  var tooltip = function tooltip() {
-    return !!props.tooltip && /*#__PURE__*/_jsx(TooltipWrapper, {
-      delay: "0s",
-      size: Size.XSmall,
-      align: "center",
-      position: "bottom",
-      withArrow: false,
-      label: props.tooltip,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        style: {
-          cursor: 'help'
-        },
-        action: function action() {},
-        children: /*#__PURE__*/_jsx(SystemIcons.Help, {
-          size: "24px",
-          color: COLORS.neutral_600
-        })
-      })
-    });
-  };
-  var headerActions = function headerActions() {
-    var _props$headerActions;
-    return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
-      switch (action.componentType) {
-        case 'icon':
-          {
-            var icon = action.icon,
-              componentType = action.componentType,
-              rest = _objectWithoutProperties(action, _excluded);
-            return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, rest), {}, {
-              children: icon
-            }), action.id || index);
-          }
-        case 'dropdown':
-          {
-            var _componentType = action.componentType,
-              _rest = _objectWithoutProperties(action, _excluded2);
-            return /*#__PURE__*/_jsx(DropdownButton, _objectSpread({
-              type: 'icon',
-              size: props.size
-            }, _rest));
-          }
-        case 'toggle':
-          {
-            var _componentType2 = action.componentType,
-              _rest2 = _objectWithoutProperties(action, _excluded3);
-            return /*#__PURE__*/_jsx(ToggleButton, _objectSpread({}, _rest2));
-          }
-      }
-    });
-  };
-  var getLeftActionIconElement = function getLeftActionIconElement() {
-    var _props$leftFooterActi, _props$leftFooterActi2;
-    return !!((_props$leftFooterActi = props.leftFooterAction) !== null && _props$leftFooterActi !== void 0 && _props$leftFooterActi.icon) && /*#__PURE__*/React.cloneElement((_props$leftFooterActi2 = props.leftFooterAction) === null || _props$leftFooterActi2 === void 0 ? void 0 : _props$leftFooterActi2.icon, {
-      size: props.size === Size.Small ? '20px' : props.size === Size.Large ? '28px' : '24px'
-    });
-  };
-  var leftFooterAction = function leftFooterAction() {
-    if (!props.leftFooterAction) return null;
-    switch (props.leftFooterAction.actionType) {
-      case 'button':
-        {
-          var _ref = props.leftFooterAction,
-            text = _ref.text,
-            variant = _ref.variant,
-            action = _ref.action,
-            rest = _objectWithoutProperties(_ref, _excluded4);
-          return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
-            size: props.size,
-            onClick: action,
-            variant: variant !== null && variant !== void 0 ? variant : 'secondary',
-            children: text
-          }));
-        }
-      case 'hyperlink':
-        {
-          var _ref2 = props.leftFooterAction,
-            _text = _ref2.text,
-            _variant = _ref2.variant,
-            _action = _ref2.action,
-            _rest3 = _objectWithoutProperties(_ref2, _excluded5);
-          return /*#__PURE__*/_jsx(FooterLeftLink, {
-            children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, _rest3), {}, {
-              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
-              onClick: function onClick(e) {
-                if (_action) {
-                  e.preventDefault();
-                  _action(e);
-                }
-              },
-              children: [_text, getLeftActionIconElement()]
-            }))
-          });
-        }
-      case 'note':
-        {
-          var _text2 = props.leftFooterAction.text;
-          return /*#__PURE__*/_jsxs(FooterLeftNote, {
-            children: [getLeftActionIconElement(), /*#__PURE__*/_jsx("span", {
-              children: _text2
-            })]
-          });
-        }
-    }
-  };
-  return /*#__PURE__*/_jsx(ModalContainer, {
-    showModal: props.isModalOpen,
-    closeModal: props.closeAction,
-    children: /*#__PURE__*/_jsxs(Wrapper, {
-      className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : Size.Medium,
-      children: [props.image && /*#__PURE__*/_jsxs(HeaderWithImage, {
-        children: [/*#__PURE__*/_jsx(ImageWithFallbacks, _objectSpread({}, props.image)), /*#__PURE__*/_jsxs(HeaderWithImageActions, {
-          children: [props.onBack && /*#__PURE__*/_jsx(IconButton, {
-            variant: "secondary",
-            shape: "circular",
-            action: props.onBack,
-            children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {})
-          }), /*#__PURE__*/_jsx(IconButton, {
-            dataTestId: 'content-modal-close-button',
-            id: 'content-modal-close-button',
-            variant: "secondary",
-            shape: "circular",
-            action: props.closeAction,
-            children: /*#__PURE__*/_jsx(SystemIcons.Close, {
-              size: "24px",
-              color: COLORS.neutral_600
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(Header, {
-          children: [/*#__PURE__*/_jsxs(HeaderText, {
-            children: [/*#__PURE__*/_jsx(HeaderTitle, {
-              children: props.title
-            }), !!props.note && /*#__PURE__*/_jsx(Note, {
-              children: props.note
-            })]
-          }), /*#__PURE__*/_jsxs(HeaderActions, {
-            children: [tooltip(), headerActions()]
-          })]
-        })]
-      }), !props.image && /*#__PURE__*/_jsxs(Header, {
-        children: [props.onBack && /*#__PURE__*/_jsx(IconButton, {
-          variant: "secondary",
-          shape: "circular",
-          action: props.onBack,
-          children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {})
-        }), /*#__PURE__*/_jsxs(HeaderText, {
-          children: [/*#__PURE__*/_jsx(HeaderTitle, {
-            children: props.title
-          }), !!props.note && /*#__PURE__*/_jsx(Note, {
-            children: props.note
-          })]
-        }), /*#__PURE__*/_jsxs(HeaderActions, {
-          children: [tooltip(), headerActions(), /*#__PURE__*/_jsx(IconButton, {
-            dataTestId: 'content-modal-close-button',
-            id: 'content-modal-close-button',
-            variant: "secondary",
-            shape: "circular",
-            action: props.closeAction,
-            children: /*#__PURE__*/_jsx(SystemIcons.Close, {
-              size: "24px",
-              color: COLORS.neutral_600
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Content, {
-        children: props.children
-      }), /*#__PURE__*/_jsxs(Footer, {
-        children: [/*#__PURE__*/_jsx(FooterLeftContainer, {
-          children: leftFooterAction()
-        }), /*#__PURE__*/_jsx(FooterRightContainer, {
-          children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
-            var action = item.action,
-              text = item.text,
-              rest = _objectWithoutProperties(item, _excluded6);
-            return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
-              onClick: action,
-              size: props.size,
-              onKeyDown: function onKeyDown(a) {
-                return (a.key === 'Enter' || a.key === ' ') && action(a);
-              },
-              children: text
-            }), rest.id || index);
-          })
-        })]
-      })]
-    })
-  });
-};
-ModalContent.propTypes = {
-  isModalOpen: _pt.bool.isRequired,
-  closeAction: _pt.func.isRequired,
-  onBack: _pt.func,
-  title: _pt.string.isRequired,
-  note: _pt.string,
-  headerActions: _pt.array,
-  footerActions: _pt.array,
-  tooltip: _pt.string,
-  zIndex: _pt.number,
-  children: _pt.node
-};
-export default ModalContent;
-//# sourceMappingURL=ModalContent.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Size } from '../types';
+import { ModalContainer } from './index';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling, Note, scrollBarStyling } from '../styles';
+import { TooltipContainer, TooltipWrapper } from '../Tooltips';
+import { Button, IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { HyperLink } from '../HyperLink';
+import { DropdownButton } from "../Dropdown";
+import { ToggleButton } from "../Toggles";
+import { ImageWithFallbacks } from "../Image";
+var HeaderText = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"])));
+var HeaderTitle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
+var HeaderActions = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
+var HeaderWithImageActions = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
+var HeaderWithImage = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"])));
+var Header = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
+var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"], ["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+var FooterLeftContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var FooterLeftNote = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterLeftLink = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"], ["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500));
+var FooterRightContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  gap: 8px;\n  margin-left: auto;\n"], ["\n  gap: 8px;\n  margin-left: auto;\n"])));
+var Footer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+var Wrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, ComponentLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentLStyling(ComponentTextStyle.Bold, null), FooterRightContainer);
+var ModalContent = function (props) {
+    var _a, _b;
+    var tooltip = function () {
+        return !!props.tooltip &&
+            React.createElement(TooltipWrapper, { delay: "0s", size: Size.XSmall, align: "center", position: "bottom", withArrow: false, label: props.tooltip },
+                React.createElement(IconButton, { variant: "secondary", shape: "circular", style: { cursor: 'help' }, action: function () {
+                    } },
+                    React.createElement(SystemIcons.Help, { size: "24px", color: COLORS.neutral_600 })));
+    };
+    var headerActions = function () {
+        var _a;
+        return (_a = props.headerActions) === null || _a === void 0 ? void 0 : _a.map(function (action, index) {
+            switch (action.componentType) {
+                case 'icon': {
+                    var icon = action.icon, componentType = action.componentType, rest = __rest(action, ["icon", "componentType"]);
+                    return React.createElement(IconButton, __assign({ key: action.id || index }, rest), icon);
+                }
+                case 'dropdown': {
+                    var componentType = action.componentType, rest = __rest(action, ["componentType"]);
+                    return React.createElement(DropdownButton, __assign({ type: 'icon', size: props.size }, rest));
+                }
+                case 'toggle': {
+                    var componentType = action.componentType, rest = __rest(action, ["componentType"]);
+                    return React.createElement(ToggleButton, __assign({}, rest));
+                }
+            }
+        });
+    };
+    var getLeftActionIconElement = function () {
+        var _a, _b;
+        return !!((_a = props.leftFooterAction) === null || _a === void 0 ? void 0 : _a.icon) &&
+            React.cloneElement((_b = props.leftFooterAction) === null || _b === void 0 ? void 0 : _b.icon, {
+                size: props.size === Size.Small
+                    ? '20px'
+                    : props.size === Size.Large
+                        ? '28px'
+                        : '24px'
+            });
+    };
+    var leftFooterAction = function () {
+        if (!props.leftFooterAction)
+            return null;
+        switch (props.leftFooterAction.actionType) {
+            case 'button': {
+                var _a = props.leftFooterAction, text = _a.text, variant = _a.variant, action = _a.action, rest = __rest(_a, ["text", "variant", "action"]);
+                return (React.createElement(Button, __assign({}, rest, { size: props.size, onClick: action, variant: variant !== null && variant !== void 0 ? variant : 'secondary' }), text));
+            }
+            case 'hyperlink': {
+                var _b = props.leftFooterAction, text = _b.text, variant = _b.variant, action_1 = _b.action, rest = __rest(_b, ["text", "variant", "action"]);
+                return (React.createElement(FooterLeftLink, null,
+                    React.createElement(HyperLink, __assign({}, rest, { variant: variant !== null && variant !== void 0 ? variant : 'default', onClick: function (e) {
+                            if (action_1) {
+                                e.preventDefault();
+                                action_1(e);
+                            }
+                        } }),
+                        text,
+                        getLeftActionIconElement())));
+            }
+            case 'note': {
+                var text = props.leftFooterAction.text;
+                return (React.createElement(FooterLeftNote, null,
+                    getLeftActionIconElement(),
+                    React.createElement("span", null, text)));
+            }
+        }
+    };
+    return (React.createElement(ModalContainer, { showModal: props.isModalOpen, closeModal: props.closeAction },
+        React.createElement(Wrapper, { className: (_a = props.size) !== null && _a !== void 0 ? _a : Size.Medium },
+            props.image &&
+                React.createElement(HeaderWithImage, null,
+                    React.createElement(ImageWithFallbacks, __assign({}, props.image)),
+                    React.createElement(HeaderWithImageActions, null,
+                        props.onBack &&
+                            React.createElement(IconButton, { variant: "secondary", shape: "circular", action: props.onBack },
+                                React.createElement(SystemIcons.ArrowLineLeft, null)),
+                        React.createElement(IconButton, { dataTestId: 'content-modal-close-button', id: 'content-modal-close-button', variant: "secondary", shape: "circular", action: props.closeAction },
+                            React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 }))),
+                    React.createElement(Header, null,
+                        React.createElement(HeaderText, null,
+                            React.createElement(HeaderTitle, null, props.title),
+                            !!props.note && React.createElement(Note, null, props.note)),
+                        React.createElement(HeaderActions, null,
+                            tooltip(),
+                            headerActions()))),
+            !props.image &&
+                React.createElement(Header, null,
+                    props.onBack &&
+                        React.createElement(IconButton, { variant: "secondary", shape: "circular", action: props.onBack },
+                            React.createElement(SystemIcons.ArrowLineLeft, null)),
+                    React.createElement(HeaderText, null,
+                        React.createElement(HeaderTitle, null, props.title),
+                        !!props.note && React.createElement(Note, null, props.note)),
+                    React.createElement(HeaderActions, null,
+                        tooltip(),
+                        headerActions(),
+                        React.createElement(IconButton, { dataTestId: 'content-modal-close-button', id: 'content-modal-close-button', variant: "secondary", shape: "circular", action: props.closeAction },
+                            React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 })))),
+            React.createElement(Content, null, props.children),
+            React.createElement(Footer, null,
+                React.createElement(FooterLeftContainer, null, leftFooterAction()),
+                React.createElement(FooterRightContainer, null, (_b = props.footerActions) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
+                    var action = item.action, text = item.text, rest = __rest(item, ["action", "text"]);
+                    return React.createElement(Button, __assign({ key: rest.id || index }, rest, { onClick: action, size: props.size, onKeyDown: function (a) { return (a.key === 'Enter' || a.key === ' ') && action(a); } }), text);
+                }))))));
+};
+export default ModalContent;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/Modals/ModalDialog.d.ts

@@ -2,18 +2,28 @@ import React from 'react';
 import { Size } from '../types';
 import { ButtonAction, LeftFooterAction } from './ModalTypes';
 import { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';
-interface NewModalProps {
-    size?: Size;
+export interface ModalDialogProps {
+    /** Optional. Size of the modal. Defaults to 'medium'  */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Required. Current state of the modal. */
     isModalOpen: boolean;
+    /** Optional. Content of the ModalDialog. */
     children?: React.ReactNode;
-    closeModalAndClearInput: any;
+    /** Optional. Title of the ModalDialog. */
     title?: string | React.ReactNode;
+    /** Optional. Content of the image to be shown in the header of the modal. */
     topImage?: any;
+    /** Optional. Serves same purpose as 'topImage' except adds support for fallback options. Has higher priority than 'topImage'. */
     topImageWithFallbacksProps?: ImageWithFallbacksProps;
+    /** Optional. If flag is set then overlay is added that converts image to grey color. */
     topImageGrayscale?: boolean;
+    /** Optional. Collection of Buttons that will be shown in the footer on the right side of the ModalDialog. */
     buttons?: ButtonAction[];
+    /** Optional. Left footer action that will be shown on the left side of the footer of ModalDialog. Can be a hyperlink, button or a note. */
     leftFooterAction?: LeftFooterAction;
+    /** Optional. Tooltip that will be shown */
     tooltip?: string;
+    /**  */
     backButton?: () => void;
     closeAction: () => void;
     submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;
@@ -25,5 +35,5 @@ interface NewModalProps {
     width?: string;
     hasContentBorders?: boolean;
 }
-export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
+export declare const ModalDialog: React.FunctionComponent<ModalDialogProps>;
 export default ModalDialog;