@laerdal/life-react-components 5.0.9 → 6.0.0-dev.1

package/dist/InputFields/RichTextField.d.ts

@@ -1,109 +1,109 @@
-import React from 'react';
-import { Range, UnprivilegedEditor } from "react-quill";
-import { TextFieldNote } from "./types";
-import { Size, States } from "../types";
-import { Sources, StringMap } from "quill";
-import 'react-quill/dist/quill.snow.css';
-export declare const RichTextFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare enum RichTextFieldFormats {
-    Background = "background",
-    Bold = "bold",
-    Color = "color",
-    Font = "font",
-    Code = "code",
-    Italic = "italic",
-    Link = "link",
-    Size = "size",
-    Strike = "strike",
-    Script = "script",
-    Underline = "underline",
-    Blockquote = "blockquote",
-    Header = "header",
-    Indent = "indent",
-    List = "list",
-    Align = "align",
-    Direction = "direction",
-    CodeBlock = "code-block",
-    Formula = "formula",
-    Image = "image",
-    Video = "video"
-}
-export interface RichTextFieldProps {
-    /**
-     * Optional. The ID of the rich text field.
-     */
-    id?: string;
-    /**
-     * Optional. The CSS class name of the rich text field.
-     */
-    className?: string;
-    /**
-     * Optional. The placeholder text to be displayed in the rich text field when it is empty.
-     */
-    placeholder?: string;
-    /**
-     * Optional. A boolean indicating whether the rich text field is read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * Optional. A boolean indicating whether the rich text field is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Optional. A boolean indicating whether the rich text field is resizable.
-     */
-    resizable?: boolean;
-    /**
-     * Optional. An object containing the modules to be used by the rich text field.
-     */
-    modules?: StringMap;
-    /**
-     * Optional. An array of formats to be used by the rich text field.
-     */
-    formats?: RichTextFieldFormats[];
-    /**
-     * Optional. A function to be called when the rich text field gains focus.
-     */
-    onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
-    /**
-     * Optional. A function to be called when the rich text field loses focus.
-     */
-    onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
-    /**
-     * Optional. A function to be called when a keydown event occurs in the rich text field.
-     */
-    onKeyDown?: React.EventHandler<any>;
-    /**
-     * Optional. A function to be called when a keypress event occurs in the rich text field.
-     */
-    onKeyPress?: React.EventHandler<any>;
-    /**
-     * Optional. A function to be called when a keyup event occurs in the rich text field.
-     */
-    onKeyUp?: React.EventHandler<any>;
-    /**
-     * Required. The current value of the rich text field.
-     */
-    value: any;
-    /**
-     * Required. A function to be called when the value of the rich text field changes.
-     */
-    onChange: (value: any) => void;
-    /**
-     * Optional. The validation message to be displayed when the rich text field is in an error state.
-     */
-    validationMessage?: string;
-    /**
-     * Optional. A note to be displayed below the rich text field.
-     */
-    note?: TextFieldNote;
-    /**
-     * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium;
-    /**
-     * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.
-     */
-    state?: States.Invalid | States.Valid;
-}
-export declare const RichTextField: React.ForwardRefExoticComponent<RichTextFieldProps & React.RefAttributes<any>>;
+import React from 'react';
+import { Range, UnprivilegedEditor } from "react-quill";
+import { TextFieldNote } from "./types";
+import { Size, States } from "../types";
+import { Sources, StringMap } from "quill";
+import 'react-quill/dist/quill.snow.css';
+export declare const RichTextFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare enum RichTextFieldFormats {
+    Background = "background",
+    Bold = "bold",
+    Color = "color",
+    Font = "font",
+    Code = "code",
+    Italic = "italic",
+    Link = "link",
+    Size = "size",
+    Strike = "strike",
+    Script = "script",
+    Underline = "underline",
+    Blockquote = "blockquote",
+    Header = "header",
+    Indent = "indent",
+    List = "list",
+    Align = "align",
+    Direction = "direction",
+    CodeBlock = "code-block",
+    Formula = "formula",
+    Image = "image",
+    Video = "video"
+}
+export interface RichTextFieldProps {
+    /**
+     * Optional. The ID of the rich text field.
+     */
+    id?: string;
+    /**
+     * Optional. The CSS class name of the rich text field.
+     */
+    className?: string;
+    /**
+     * Optional. The placeholder text to be displayed in the rich text field when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Optional. A boolean indicating whether the rich text field is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is resizable.
+     */
+    resizable?: boolean;
+    /**
+     * Optional. An object containing the modules to be used by the rich text field.
+     */
+    modules?: StringMap;
+    /**
+     * Optional. An array of formats to be used by the rich text field.
+     */
+    formats?: RichTextFieldFormats[];
+    /**
+     * Optional. A function to be called when the rich text field gains focus.
+     */
+    onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when the rich text field loses focus.
+     */
+    onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when a keydown event occurs in the rich text field.
+     */
+    onKeyDown?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keypress event occurs in the rich text field.
+     */
+    onKeyPress?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keyup event occurs in the rich text field.
+     */
+    onKeyUp?: React.EventHandler<any>;
+    /**
+     * Required. The current value of the rich text field.
+     */
+    value: any;
+    /**
+     * Required. A function to be called when the value of the rich text field changes.
+     */
+    onChange: (value: any) => void;
+    /**
+     * Optional. The validation message to be displayed when the rich text field is in an error state.
+     */
+    validationMessage?: string;
+    /**
+     * Optional. A note to be displayed below the rich text field.
+     */
+    note?: TextFieldNote;
+    /**
+     * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.
+     */
+    size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.
+     */
+    state?: States.Invalid | States.Valid;
+}
+export declare const RichTextField: React.ForwardRefExoticComponent<RichTextFieldProps & React.RefAttributes<any>>;

package/dist/InputFields/RichTextField.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
-var _templateObject;
+const _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -14,37 +12,124 @@ import { Size, States } from "../types";
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
 import { CheckMark, TechnicalWarning } from "../icons/systemicons";
 import 'react-quill/dist/quill.snow.css';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\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"])), function (props) {
-  return COLORS.getColor('neutral_400', props.theme);
-}, function (props) {
-  return COLORS.getColor('correct_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('critical_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
-}, function (props) {
-  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-}, scrollBarStyling(Size.Small), readOnlyState, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-export var RichTextFieldFormats;
-(function (RichTextFieldFormats) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RichTextFieldContainer = styled.div`
+  .quill {
+    width: 100%;
+    margin-bottom: 4px;
+    overflow: hidden;
+
+    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+    border-radius: 4px;
+  }
+
+  .quill.valid {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};
+  }
+
+  .quill.invalid {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};
+  }
+
+  .quill:hover {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};
+  }
+
+  .quill:focus-within {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+  }
+
+  .ql-editor,
+  .ql-editor p{
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  }
+
+  .ql-editor.ql-blank::before {
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  &.medium {
+    .ql-editor,
+    .ql-editor p{
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    }
+
+    .ql-editor.ql-blank::before {
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    }
+  }
+
+  .ql-toolbar.ql-snow {
+    border: none;
+    padding: 8px 7px;
+    margin: 0 1px;
+    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  }
+
+  .quill.valid .ql-toolbar,
+  .quill.invalid .ql-toolbar,
+  .quill:hover .ql-toolbar,
+  .quill:focus-within .ql-toolbar {
+    padding: 8px 6px;
+    margin: 0 2px;
+  }
+
+  .ql-container {
+    font-family: unset !important;
+  }
+
+  .ql-container.ql-snow {
+    border: none;
+    overflow-y: hidden;
+    padding: 8px;
+  }
+
+  .ql-editor {
+    padding: 8px;
+    overflow-y: auto;
+
+    ${scrollBarStyling(Size.Small)}
+  }
+
+  &.resizable {
+    height: initial;
+
+    .quill {
+      flex: none;
+      overflow: initial;
+    }
+
+    .ql-container {
+      flex: none;
+      resize: vertical;
+    }
+
+    .ql-editor {
+      height: 100%;
+    }
+  }
+
+  &.readonly {
+    .quill {
+      ${readOnlyState}
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .quill {
+      pointer-events: none;
+      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+
+      .ql-editor.ql-blank::before {
+        color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      }
+    }
+  }
+`;
+export let RichTextFieldFormats = /*#__PURE__*/function (RichTextFieldFormats) {
   RichTextFieldFormats["Background"] = "background";
   RichTextFieldFormats["Bold"] = "bold";
   RichTextFieldFormats["Color"] = "color";
@@ -66,36 +151,35 @@ export var RichTextFieldFormats;
   RichTextFieldFormats["Formula"] = "formula";
   RichTextFieldFormats["Image"] = "image";
   RichTextFieldFormats["Video"] = "video";
-})(RichTextFieldFormats || (RichTextFieldFormats = {}));
-var defaultToolBarOptions = [[{
+  return RichTextFieldFormats;
+}({});
+const defaultToolBarOptions = [[{
   header: [1, 2, 3, false]
 }], ['bold', 'italic', 'underline', 'strike'], [{
   'list': 'ordered'
 }, {
   'list': 'bullet'
 }], ['link'], ['clean']];
-export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _modules$toolbar;
-  var readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    note = _ref.note,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    state = _ref.state,
-    resizable = _ref.resizable,
-    modules = _ref.modules,
-    formats = _ref.formats,
+export const RichTextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      readOnly,
+      disabled,
+      validationMessage,
+      note,
+      size = Size.Medium,
+      state,
+      resizable,
+      modules,
+      formats
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
-    toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
-  });
-  var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
-    return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
+  const theme = useTheme();
+  let m = _objectSpread(_objectSpread({}, modules ?? {}), {}, {
+    toolbar: modules?.toolbar ?? defaultToolBarOptions
   });
+  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);
   return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
-    className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : ''),
+    className: `${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`,
     children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({
       ref: ref,
       readOnly: readOnly || disabled,
@@ -104,7 +188,7 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       formats: f
     }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
       className: size || '',
-      type: state !== null && state !== void 0 ? state : States.Invalid,
+      type: state ?? States.Invalid,
       children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {
         color: COLORS.getColor('correct_400', theme)
       }) : /*#__PURE__*/_jsx(TechnicalWarning, {

package/dist/InputFields/RichTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","_modules$toolbar","readOnly","disabled","validationMessage","note","_ref$size","size","Medium","state","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","concat","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  /**\r\n   * Optional. The ID of the rich text field.\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Optional. The CSS class name of the rich text field.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is resizable.\r\n   */\r\n  resizable?: boolean;\r\n\r\n  /**\r\n   * Optional. An object containing the modules to be used by the rich text field.\r\n   */\r\n  modules?: StringMap;\r\n\r\n  /**\r\n   * Optional. An array of formats to be used by the rich text field.\r\n   */\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field gains focus.\r\n   */\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field loses focus.\r\n   */\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n   */\r\n  onKeyDown?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n   */\r\n  onKeyPress?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n   */\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Required. The current value of the rich text field.\r\n   */\r\n  value: any;\r\n\r\n  /**\r\n   * Required. A function to be called when the value of the rich text field changes.\r\n   */\r\n  onChange: (value: any) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the rich text field.\r\n   */\r\n  note?: TextFieldNote;\r\n\r\n  /**\r\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  const theme = useTheme();\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.getColor('correct_400', theme)}/>\r\n              : <TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","getColor","theme","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  /**\r\n   * Optional. The ID of the rich text field.\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Optional. The CSS class name of the rich text field.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is resizable.\r\n   */\r\n  resizable?: boolean;\r\n\r\n  /**\r\n   * Optional. An object containing the modules to be used by the rich text field.\r\n   */\r\n  modules?: StringMap;\r\n\r\n  /**\r\n   * Optional. An array of formats to be used by the rich text field.\r\n   */\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field gains focus.\r\n   */\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field loses focus.\r\n   */\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n   */\r\n  onKeyDown?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n   */\r\n  onKeyPress?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n   */\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Required. The current value of the rich text field.\r\n   */\r\n  value: any;\r\n\r\n  /**\r\n   * Required. A function to be called when the value of the rich text field changes.\r\n   */\r\n  onChange: (value: any) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the rich text field.\r\n   */\r\n  note?: TextFieldNote;\r\n\r\n  /**\r\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  const theme = useTheme();\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.getColor('correct_400', theme)}/>\r\n              : <TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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","ignoreList":[]}