@laerdal/life-react-components 3.2.3-dev.4 → 3.2.3-dev.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/InputFields/RichTextField.cjs +8 -3
  2. package/dist/InputFields/RichTextField.cjs.map +1 -1
  3. package/dist/InputFields/RichTextField.js +8 -3
  4. package/dist/InputFields/RichTextField.js.map +1 -1
  5. package/dist/Modals/ModalContent.cjs +1 -1
  6. package/dist/Modals/ModalContent.cjs.map +1 -1
  7. package/dist/Modals/ModalContent.js +1 -1
  8. package/dist/Modals/ModalContent.js.map +1 -1
  9. package/dist/styles/global.cjs +2 -1
  10. package/dist/styles/global.cjs.map +1 -1
  11. package/dist/styles/global.js +2 -1
  12. package/dist/styles/global.js.map +1 -1
  13. package/package.json +1 -1
package/dist/InputFields/RichTextField.cjs CHANGED
@@ -18,11 +18,11 @@ var _styles = require("../styles");
18
18
  var _systemicons = require("../icons/systemicons");
19
19
  require("react-quill/dist/quill.snow.css");
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
- var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules"];
21
+ var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
22
22
  var _templateObject;
23
23
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
24
24
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
- var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor{\n ", "\n }\n .ql-editor.ql-blank::before {\n ", "\n }\n \n &.medium {\n .ql-editor{\n ", "\n }\n .ql-editor.ql-blank::before {\n ", "\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container{\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
25
+ var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n\n &.medium {\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
26
26
  exports.RichTextFieldContainer = RichTextFieldContainer;
27
27
  var RichTextFieldFormats;
28
28
  exports.RichTextFieldFormats = RichTextFieldFormats;
@@ -67,17 +67,22 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
67
67
  state = _ref.state,
68
68
  resizable = _ref.resizable,
69
69
  modules = _ref.modules,
70
+ formats = _ref.formats,
70
71
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
71
72
  var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
72
73
  toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
73
74
  });
75
+ var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
76
+ return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
77
+ });
74
78
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
75
79
  className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
76
80
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
77
81
  ref: ref,
78
82
  readOnly: readOnly || disabled,
79
83
  modules: m,
80
- theme: 'snow'
84
+ theme: 'snow',
85
+ formats: f
81
86
  }, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
82
87
  className: size || '',
83
88
  type: state !== null && state !== void 0 ? state : _types.States.Invalid,
package/dist/InputFields/RichTextField.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","rest","m","toolbar","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","formats","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor{\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n \n &.medium {\n .ql-editor{\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container{\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
1
+ {"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n\n &.medium {\n .ql-editor {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n formats,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n formats={f}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
package/dist/InputFields/RichTextField.js CHANGED
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
4
4
  import _pt from "prop-types";
5
- var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules"];
5
+ var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
6
6
  var _templateObject;
7
7
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
8
8
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -16,7 +16,7 @@ import { CheckMark, TechnicalWarning } from "../icons/systemicons";
16
16
  import 'react-quill/dist/quill.snow.css';
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
- export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor{\n ", "\n }\n .ql-editor.ql-blank::before {\n ", "\n }\n \n &.medium {\n .ql-editor{\n ", "\n }\n .ql-editor.ql-blank::before {\n ", "\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container{\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
19
+ export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n\n &.medium {\n .ql-editor {\n ", "\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
20
20
  export var RichTextFieldFormats;
21
21
  (function (RichTextFieldFormats) {
22
22
  RichTextFieldFormats["Background"] = "background";
@@ -59,17 +59,22 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
59
59
  state = _ref.state,
60
60
  resizable = _ref.resizable,
61
61
  modules = _ref.modules,
62
+ formats = _ref.formats,
62
63
  rest = _objectWithoutProperties(_ref, _excluded);
63
64
  var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
64
65
  toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
65
66
  });
67
+ var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
68
+ return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
69
+ });
66
70
  return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
67
71
  className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
68
72
  children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({
69
73
  ref: ref,
70
74
  readOnly: readOnly || disabled,
71
75
  modules: m,
72
- theme: 'snow'
76
+ theme: 'snow',
77
+ formats: f
73
78
  }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
74
79
  className: size || '',
75
80
  type: state !== null && state !== void 0 ? state : States.Invalid,
package/dist/InputFields/RichTextField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","rest","m","toolbar","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","formats","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor{\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n \n &.medium {\n .ql-editor{\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container{\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
1
+ {"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Regular","black","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n\n &.medium {\n .ql-editor {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n .ql-container {\n font-family: unset !important;\n }\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n resize: vertical;\n }\n\n .ql-editor {\n height: 100%;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n formats,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n formats={f}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
package/dist/Modals/ModalContent.cjs CHANGED
@@ -34,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
34
34
  var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
35
35
  var HeaderTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
36
36
  var HeaderActions = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n"])));
37
- var HeaderWithImageActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\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"])));
37
+ var HeaderWithImageActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));
38
38
  var HeaderWithImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])));
39
39
  var Header = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ", " {\n height: max-content;\n }\n"])), _Tooltips.TooltipContainer);
40
40
  var Content = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
package/dist/Modals/ModalContent.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","ComponentXXSStyling","neutral_600","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","React","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n ButtonAction,\n ModalHeaderIconButton,\n LeftFooterAction,\n LeftFooterButton,\n LeftFooterHyperlink,\n ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling, Note,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\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`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\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\nconst HeaderWithImage = styled.div`\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\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\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 ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n image?: ImageWithFallbacksProps;\n headerActions?: ModalHeaderButtons[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n switch (action.componentType) {\n case 'icon': {\n const {icon, componentType, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n case 'dropdown': {\n const {componentType, ...rest} = action;\n return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n }\n case 'toggle': {\n const {componentType, ...rest} = action;\n return <ToggleButton {...rest}/>\n }\n }\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n {\n props.image &&\n <HeaderWithImage>\n <ImageWithFallbacks {...props.image}/>\n <HeaderWithImageActions>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n\n }\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderWithImageActions>\n\n <Header>\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n </HeaderActions>\n </Header>\n </HeaderWithImage>\n }\n {\n !props.image &&\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n }\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","ComponentXXSStyling","neutral_600","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","React","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n ButtonAction,\n ModalHeaderIconButton,\n LeftFooterAction,\n LeftFooterButton,\n LeftFooterHyperlink,\n ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling, Note,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\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`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\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\nconst HeaderWithImage = styled.div`\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\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\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 ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n image?: ImageWithFallbacksProps;\n headerActions?: ModalHeaderButtons[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n switch (action.componentType) {\n case 'icon': {\n const {icon, componentType, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n case 'dropdown': {\n const {componentType, ...rest} = action;\n return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n }\n case 'toggle': {\n const {componentType, ...rest} = action;\n return <ToggleButton {...rest}/>\n }\n }\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n {\n props.image &&\n <HeaderWithImage>\n <ImageWithFallbacks {...props.image}/>\n <HeaderWithImageActions>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n\n }\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderWithImageActions>\n\n <Header>\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n </HeaderActions>\n </Header>\n </HeaderWithImage>\n }\n {\n !props.image &&\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n }\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AASA;AACA;AACA;AASA;AACA;AACA;AACA;AAEA;AACA;AACA;AAA4C;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA;AAAA;AAE5C,IAAMA,UAAU,GAAGC,yBAAM,CAACC,GAAG,0RAa5B;AACD,IAAMC,WAAW,GAAGF,yBAAM,CAACC,GAAG,gGAC1B,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,CAC3D;AAED,IAAMC,aAAa,GAAGR,yBAAM,CAACC,GAAG,iIAG/B;AAED,IAAMQ,sBAAsB,GAAGT,yBAAM,CAACC,GAAG,8aAyBxC;AAED,IAAMS,eAAe,GAAGV,yBAAM,CAACC,GAAG,yaAwBjC;AAED,IAAMU,MAAM,GAAGX,yBAAM,CAACC,GAAG,8LAKrBW,0BAAgB,CAGnB;AAED,IAAMC,OAAO,GAAGb,yBAAM,CAACC,GAAG,qKAKtB,IAAAa,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAED,IAAMC,mBAAmB,GAAGjB,yBAAM,CAACC,GAAG,iIAGrC;AAED,IAAMiB,cAAc,GAAGlB,yBAAM,CAACC,GAAG,iLAM7B,IAAAkB,2BAAmB,EAACf,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACc,WAAW,CAAC,CACnE;AAED,IAAMC,cAAc,GAAGrB,yBAAM,CAACC,GAAG,qMAC7B,IAAAqB,yBAAiB,EAAClB,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACiB,WAAW,CAAC,CAOjE;AAED,IAAMC,oBAAoB,GAAGxB,yBAAM,CAACC,GAAG,4HAGtC;AAED,IAAMwB,MAAM,GAAGzB,yBAAM,CAACC,GAAG,yJAIxB;AAGD,IAAMyB,OAAO,GAAG1B,yBAAM,CAACC,GAAG,m2CAYpBU,MAAM,EAGJZ,UAAU,EAIRG,WAAW,EACT,IAAAyB,yBAAiB,EAACvB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAKtDQ,OAAO,EAIPY,MAAM,EAGJP,cAAc,EACZ,IAAAU,0BAAkB,EAACxB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAInDgB,cAAc,EAKZ,IAAAlB,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAGlDmB,oBAAoB,EAUtBb,MAAM,EAGJZ,UAAU,EAIRG,WAAW,EACT,IAAA2B,0BAAkB,EAACzB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAKvDQ,OAAO,EAIPY,MAAM,EAGJP,cAAc,EACZ,IAAAI,yBAAiB,EAAClB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAIlDgB,cAAc,EAKZ,IAAAM,yBAAiB,EAACvB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAGlDmB,oBAAoB,CAK3B;AAmBD,IAAMM,YAAyC,GAAG,SAA5CA,YAAyC,CAAIC,KAAK,EAAK;EAAA;EAE3D,IAAMC,OAAO,GAAG,SAAVA,OAAO;IAAA,OACX,CAAC,CAACD,KAAK,CAACC,OAAO,iBACf,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEjB,WAAI,CAACkB,MAAO;MAAC,KAAK,EAAC,QAAQ;MAAC,QAAQ,EAAC,QAAQ;MAAC,SAAS,EAAE,KAAM;MAChF,KAAK,EAAEF,KAAK,CAACC,OAAQ;MAAA,uBACnC,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QAAC,KAAK,EAAC,UAAU;QAAC,KAAK,EAAE;UAACE,MAAM,EAAE;QAAM,CAAE;QAAC,MAAM,EAAE,kBAAM,CACxF,CAAE;QAAA,uBACA,qBAAC,kBAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAE5B,cAAM,CAACc;QAAY;MAAE;IAC/C,EACE;EAAA;EAEnB,IAAMe,aAAa,GAAG,SAAhBA,aAAa;IAAA;IAAA,+BAASJ,KAAK,CAACI,aAAa,yDAAnB,qBAAqBC,GAAG,CAAC,UAACC,MAAM,EAAEC,KAAK,EAAK;MACpE,QAAQD,MAAM,CAACE,aAAa;QAC1B,KAAK,MAAM;UAAE;YACX,IAAOC,IAAI,GAA4BH,MAAM,CAAtCG,IAAI;cAAED,aAAa,GAAaF,MAAM,CAAhCE,aAAa;cAAKE,IAAI,0CAAIJ,MAAM;YAC7C,oBAAO,qBAAC,kBAAU,kCACKI,IAAI;cAAA,UACxBD;YAAI,IAFiBH,MAAM,CAACK,EAAE,IAAIJ,KAAK,CAG7B;UACf;QACA,KAAK,UAAU;UAAE;YACf,IAAOC,cAAa,GAAaF,MAAM,CAAhCE,aAAa;cAAKE,KAAI,0CAAIJ,MAAM;YACvC,oBAAO,qBAAC,wBAAc;cAAC,IAAI,EAAE,MAAO;cAAC,IAAI,EAAEN,KAAK,CAACY;YAAK,GAAKF,KAAI,EAAG;UACpE;QACA,KAAK,QAAQ;UAAE;YACb,IAAOF,eAAa,GAAaF,MAAM,CAAhCE,aAAa;cAAKE,MAAI,0CAAIJ,MAAM;YACvC,oBAAO,qBAAC,qBAAY,oBAAMI,MAAI,EAAG;UACnC;MAAC;IAEL,CAAC,CACF;EAAA;EAED,IAAMG,wBAAwB,GAAG,SAA3BA,wBAAwB;IAAA;IAAA,OAC5B,CAAC,2BAACb,KAAK,CAACc,gBAAgB,kDAAtB,sBAAwBL,IAAI,kBAC9BM,cAAK,CAACC,YAAY,2BAAChB,KAAK,CAACc,gBAAgB,2DAAtB,uBAAwBL,IAAI,EAAwB;MACrEG,IAAI,EACFZ,KAAK,CAACY,IAAI,KAAK5B,WAAI,CAACC,KAAK,GACrB,MAAM,GACNe,KAAK,CAACY,IAAI,KAAK5B,WAAI,CAACiC,KAAK,GACvB,MAAM,GACN;IACV,CAAC,CAAC;EAAA;EAEJ,IAAMH,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAI,CAACd,KAAK,CAACc,gBAAgB,EAAE,OAAO,IAAI;IAExC,QAAQd,KAAK,CAACc,gBAAgB,CAACI,UAAU;MACvC,KAAK,QAAQ;QAAE;UACb,WAAyClB,KAAK,CAACc,gBAAgB;YAAxDK,IAAI,QAAJA,IAAI;YAAEC,OAAO,QAAPA,OAAO;YAAEd,MAAM,QAANA,MAAM;YAAKI,IAAI;UACrC,oBACE,qBAAC,cAAM,kCAAIA,IAAI;YACR,IAAI,EAAEV,KAAK,CAACY,IAAK;YACjB,OAAO,EAAEN,MAAO;YAChB,OAAO,EAAEc,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,WAAY;YAAA,UACpCD;UAAI,GACE;QAEb;MACA,KAAK,WAAW;QAAE;UAChB,YAAyCnB,KAAK,CAACc,gBAAgB;YAAxDK,KAAI,SAAJA,IAAI;YAAEC,QAAO,SAAPA,OAAO;YAAEd,OAAM,SAANA,MAAM;YAAKI,MAAI;UACrC,oBACE,qBAAC,cAAc;YAAA,uBACb,sBAAC,oBAAS,kCAAKA,MAAI;cACR,OAAO,EAAEU,QAAO,aAAPA,QAAO,cAAPA,QAAO,GAAI,SAAU;cAC9B,OAAO,EAAE,iBAACC,CAAC,EAAK;gBACd,IAAIf,OAAM,EAAE;kBACVe,CAAC,CAACC,cAAc,EAAE;kBAClBhB,OAAM,CAACe,CAAC,CAAC;gBACX;cACF,CAAE;cAAA,WACVF,KAAI,EACJN,wBAAwB,EAAE;YAAA;UACjB,EACG;QAGrB;MACA,KAAK,MAAM;QAAE;UACX,IAAOM,MAAI,GAAInB,KAAK,CAACc,gBAAgB,CAA9BK,IAAI;UACX,oBACE,sBAAC,cAAc;YAAA,WACZN,wBAAwB,EAAE,eAC3B;cAAA,UAAOM;YAAI,EAAQ;UAAA,EACJ;QAErB;IAAC;EAEL,CAAC;EAGD,oBACE,qBAAC,qBAAc;IAAC,SAAS,EAAEnB,KAAK,CAACuB,WAAY;IAAC,UAAU,EAAEvB,KAAK,CAACwB,WAAY;IAAA,uBAC1E,sBAAC,OAAO;MAAC,SAAS,iBAAExB,KAAK,CAACY,IAAI,qDAAI5B,WAAI,CAACyC,MAAO;MAAA,WAE1CzB,KAAK,CAAC0B,KAAK,iBACX,sBAAC,eAAe;QAAA,wBACd,qBAAC,yBAAkB,oBAAK1B,KAAK,CAAC0B,KAAK,EAAG,eACtC,sBAAC,sBAAsB;UAAA,WAEnB1B,KAAK,CAAC2B,MAAM,iBACZ,qBAAC,kBAAU;YAAC,OAAO,EAAC,WAAW;YAAC,KAAK,EAAC,UAAU;YAAC,MAAM,EAAE3B,KAAK,CAAC2B,MAAO;YAAA,uBACpE,qBAAC,kBAAW,CAAC,aAAa;UAAE,EACjB,eAGf,qBAAC,kBAAU;YAAC,UAAU,EAAE,4BAA6B;YAAC,EAAE,EAAE,4BAA6B;YAC3E,OAAO,EAAC,WAAW;YACnB,KAAK,EAAC,UAAU;YAChB,MAAM,EAAE3B,KAAK,CAACwB,WAAY;YAAA,uBACpC,qBAAC,kBAAW,CAAC,KAAK;cAAC,IAAI,EAAC,MAAM;cAAC,KAAK,EAAEjD,cAAM,CAACc;YAAY;UAAE,EAChD;QAAA,EACU,eAEzB,sBAAC,MAAM;UAAA,wBACL,sBAAC,UAAU;YAAA,wBACT,qBAAC,WAAW;cAAA,UAAEW,KAAK,CAAC4B;YAAK,EAAe,EACvC,CAAC,CAAC5B,KAAK,CAAC6B,IAAI,iBAAI,qBAAC,YAAI;cAAA,UAAE7B,KAAK,CAAC6B;YAAI,EAAQ;UAAA,EAC/B,eACb,sBAAC,aAAa;YAAA,WACX5B,OAAO,EAAE,EACTG,aAAa,EAAE;UAAA,EACF;QAAA,EACT;MAAA,EACO,EAGlB,CAACJ,KAAK,CAAC0B,KAAK,iBACZ,sBAAC,MAAM;QAAA,WAEH1B,KAAK,CAAC2B,MAAM,iBACZ,qBAAC,kBAAU;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,UAAU;UAAC,MAAM,EAAE3B,KAAK,CAAC2B,MAAO;UAAA,uBACpE,qBAAC,kBAAW,CAAC,aAAa;QAAE,EACjB,eAEf,sBAAC,UAAU;UAAA,wBACT,qBAAC,WAAW;YAAA,UAAE3B,KAAK,CAAC4B;UAAK,EAAe,EACvC,CAAC,CAAC5B,KAAK,CAAC6B,IAAI,iBAAI,qBAAC,YAAI;YAAA,UAAE7B,KAAK,CAAC6B;UAAI,EAAQ;QAAA,EAC/B,eACb,sBAAC,aAAa;UAAA,WACX5B,OAAO,EAAE,EACTG,aAAa,EAAE,eAChB,qBAAC,kBAAU;YAAC,UAAU,EAAE,4BAA6B;YAAC,EAAE,EAAE,4BAA6B;YAC3E,OAAO,EAAC,WAAW;YACnB,KAAK,EAAC,UAAU;YAChB,MAAM,EAAEJ,KAAK,CAACwB,WAAY;YAAA,uBACpC,qBAAC,kBAAW,CAAC,KAAK;cAAC,IAAI,EAAC,MAAM;cAAC,KAAK,EAAEjD,cAAM,CAACc;YAAY;UAAE,EAChD;QAAA,EACC;MAAA,EACT,eAEX,qBAAC,OAAO;QAAA,UACLW,KAAK,CAAC8B;MAAQ,EACP,eACV,sBAAC,MAAM;QAAA,wBACL,qBAAC,mBAAmB;UAAA,UACjBhB,gBAAgB;QAAE,EACC,eACtB,qBAAC,oBAAoB;UAAA,kCAClBd,KAAK,CAAC+B,aAAa,yDAAnB,qBAAqB1B,GAAG,CAAC,UAAC2B,IAAI,EAAEzB,KAAK,EAAK;YACvC,IAAOD,MAAM,GAAmB0B,IAAI,CAA7B1B,MAAM;cAAEa,IAAI,GAAaa,IAAI,CAArBb,IAAI;cAAKT,IAAI,0CAAIsB,IAAI;YACpC,oBAAO,qBAAC,cAAM,kCACKtB,IAAI;cACR,OAAO,EAAEJ,MAAO;cAChB,IAAI,EAAEN,KAAK,CAACY,IAAK;cACjB,SAAS,EAAE,mBAAAqB,CAAC;gBAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK5B,MAAM,CAAE2B,CAAC,CAAC;cAAA,CAAC;cAAA,UAC/Ed;YAAI,IALaT,IAAI,CAACC,EAAE,IAAIJ,KAAK,CAM3B;UACX,CAAC;QACF,EACoB;MAAA,EAChB;IAAA;EACD,EACK;AAErB,CAAC;AAAC;EA7LAgB,WAAW;EACXC,WAAW;EACXG,MAAM;EACNC,KAAK;EACLC,IAAI;EAEJzB,aAAa;EACb2B,aAAa;EAEb9B,OAAO;EACPkC,MAAM;EACNL,QAAQ;AAAA;AAAA,eAoLK/B,YAAY;AAAA"}
package/dist/Modals/ModalContent.js CHANGED
@@ -28,7 +28,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
28
28
  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"])));
29
29
  var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
30
30
  var HeaderActions = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n"])));
31
- 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 justify-self: flex-end;\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"])));
31
+ 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"])));
32
32
  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"])));
33
33
  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);
34
34
  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));
package/dist/Modals/ModalContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","Note","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","DropdownButton","ToggleButton","ImageWithFallbacks","HeaderText","div","HeaderTitle","Bold","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","Content","Small","FooterLeftContainer","FooterLeftNote","neutral_600","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n ButtonAction,\n ModalHeaderIconButton,\n LeftFooterAction,\n LeftFooterButton,\n LeftFooterHyperlink,\n ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling, Note,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\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`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\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\nconst HeaderWithImage = styled.div`\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\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\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 ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n image?: ImageWithFallbacksProps;\n headerActions?: ModalHeaderButtons[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n switch (action.componentType) {\n case 'icon': {\n const {icon, componentType, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n case 'dropdown': {\n const {componentType, ...rest} = action;\n return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n }\n case 'toggle': {\n const {componentType, ...rest} = action;\n return <ToggleButton {...rest}/>\n }\n }\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n {\n props.image &&\n <HeaderWithImage>\n <ImageWithFallbacks {...props.image}/>\n <HeaderWithImageActions>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n\n }\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderWithImageActions>\n\n <Header>\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n </HeaderActions>\n </Header>\n </HeaderWithImage>\n }\n {\n !props.image &&\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n }\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","Note","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","DropdownButton","ToggleButton","ImageWithFallbacks","HeaderText","div","HeaderTitle","Bold","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","Content","Small","FooterLeftContainer","FooterLeftNote","neutral_600","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n ButtonAction,\n ModalHeaderIconButton,\n LeftFooterAction,\n LeftFooterButton,\n LeftFooterHyperlink,\n ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling, Note,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\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`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\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\nconst HeaderWithImage = styled.div`\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\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\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 ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n image?: ImageWithFallbacksProps;\n headerActions?: ModalHeaderButtons[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n switch (action.componentType) {\n case 'icon': {\n const {icon, componentType, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n case 'dropdown': {\n const {componentType, ...rest} = action;\n return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n }\n case 'toggle': {\n const {componentType, ...rest} = action;\n return <ToggleButton {...rest}/>\n }\n }\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n {\n props.image &&\n <HeaderWithImage>\n <ImageWithFallbacks {...props.image}/>\n <HeaderWithImageActions>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n\n }\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderWithImageActions>\n\n <Header>\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n </HeaderActions>\n </Header>\n </HeaderWithImage>\n }\n {\n !props.image &&\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n }\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
package/dist/styles/global.cjs CHANGED
@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _colors = _interopRequireDefault(require("./colors"));
9
9
  var _typography = require("./typography");
10
- var globalStyles = "\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ".concat(_colors.default.black, ";\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ").concat(_colors.default.primary_100, " !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n \n ").concat(_typography.Typography, "\n");
10
+ var _figmaSvg = require("@laerdal/figma-svg");
11
+ var globalStyles = "\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ".concat(_colors.default.black, ";\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ").concat(_colors.default.primary_100, " !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,").concat(btoa(_figmaSvg.SystemIcons.ExtendTextArea), "\");\n content: 'test';\n }\n\n \n \n \n ").concat(_typography.Typography, "\n");
11
12
  var _default = globalStyles;
12
13
  exports.default = _default;
13
14
  //# sourceMappingURL=global.cjs.map
package/dist/styles/global.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"global.cjs","names":["globalStyles","COLORS","black","primary_100","Typography"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,YAAY,sGAKLC,eAAM,CAACC,KAAK,83BAqDPD,eAAM,CAACE,WAAW,2NAahCC,sBAAU,OACb;AAAC,eAEaJ,YAAY;AAAA"}
1
+ {"version":3,"file":"global.cjs","names":["globalStyles","COLORS","black","primary_100","btoa","SystemIcons","ExtendTextArea","Typography"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\nimport {SystemIcons} from \"@laerdal/figma-svg\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,${btoa(SystemIcons.ExtendTextArea)}\");\n content: 'test';\n }\n\n \n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,YAAY,sGAKLC,eAAM,CAACC,KAAK,83BAqDPD,eAAM,CAACE,WAAW,oSAaqBC,IAAI,CAACC,qBAAW,CAACC,cAAc,CAAC,gEAOrFC,sBAAU,OACb;AAAC,eAEaP,YAAY;AAAA"}
package/dist/styles/global.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import COLORS from './colors';
2
2
  import { Typography } from "./typography";
3
- var globalStyles = "\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ".concat(COLORS.black, ";\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ").concat(COLORS.primary_100, " !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n \n ").concat(Typography, "\n");
3
+ import { SystemIcons } from "@laerdal/figma-svg";
4
+ var globalStyles = "\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ".concat(COLORS.black, ";\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ").concat(COLORS.primary_100, " !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,").concat(btoa(SystemIcons.ExtendTextArea), "\");\n content: 'test';\n }\n\n \n \n \n ").concat(Typography, "\n");
4
5
  export default globalStyles;
5
6
  //# sourceMappingURL=global.js.map
package/dist/styles/global.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"global.js","names":["COLORS","Typography","globalStyles","black","primary_100"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAEvC,IAAMC,YAAY,sGAKLF,MAAM,CAACG,KAAK,83BAqDPH,MAAM,CAACI,WAAW,2NAahCH,UAAU,OACb;AAED,eAAeC,YAAY"}
1
+ {"version":3,"file":"global.js","names":["COLORS","Typography","SystemIcons","globalStyles","black","primary_100","btoa","ExtendTextArea"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\nimport {SystemIcons} from \"@laerdal/figma-svg\";\n\nconst globalStyles = `\n html,\n body {\n height: 100%;\n font-family: 'Lato', sans-serif;\n color: ${COLORS.black};\n -webkit-font-smoothing: antialiased;\n }\n\n [lang^=\"ja\" i] {\n font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n }\n \n [lang^=\"ko\" i] {\n font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n }\n \n [lang^=\"zh\" i] {\n font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n }\n \n [lang=\"zh-cht\" i],\n [lang=\"zh-hant\" i],\n [lang=\"zh-hk\" i],\n [lang=\"zh-mo\" i],\n [lang=\"zh-tw\" i] {\n font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n }\n\n\n body {\n margin: 0;\n padding: 0;\n }\n\n main,\n aside,\n details {\n display: block;\n }\n\n summary {\n display: block;\n }\n\n #root {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n label {\n font-family: inherit;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${COLORS.primary_100} !important;\n opacity: 1 !important;\n }\n\n .react-resizable-handle {\n background-image: none !important;\n }\n\n .react-resizable-handle::after {\n border: none !important;\n }\n \n ::-webkit-resizer {\n background-image: url(\"data:image/svg+xml;base64,${btoa(SystemIcons.ExtendTextArea)}\");\n content: 'test';\n }\n\n \n \n \n ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,WAAW,QAAO,oBAAoB;AAE9C,IAAMC,YAAY,sGAKLH,MAAM,CAACI,KAAK,83BAqDPJ,MAAM,CAACK,WAAW,oSAaqBC,IAAI,CAACJ,WAAW,CAACK,cAAc,CAAC,gEAOrFN,UAAU,OACb;AAED,eAAeE,YAAY"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "3.2.3-dev.4",
3
+ "version": "3.2.3-dev.6",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],