@laerdal/life-react-components 3.2.3-dev.2 → 3.2.3-dev.4
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.
- package/dist/InputFields/RichTextField.cjs +2 -2
- package/dist/InputFields/RichTextField.cjs.map +1 -1
- package/dist/InputFields/RichTextField.js +3 -3
- package/dist/InputFields/RichTextField.js.map +1 -1
- package/dist/InputFields/Textarea.cjs +2 -2
- package/dist/InputFields/Textarea.cjs.map +1 -1
- package/dist/InputFields/Textarea.js +2 -2
- package/dist/InputFields/Textarea.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "s
|
|
|
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.ql-blank::before {\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\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
|
|
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);
|
|
26
26
|
exports.RichTextFieldContainer = RichTextFieldContainer;
|
|
27
27
|
var RichTextFieldFormats;
|
|
28
28
|
exports.RichTextFieldFormats = RichTextFieldFormats;
|
|
@@ -72,7 +72,7 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
72
72
|
toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
|
|
73
73
|
});
|
|
74
74
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
|
|
75
|
-
className: "".concat(resizable ? 'resizable' : '', " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
75
|
+
className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
76
76
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
|
|
77
77
|
ref: ref,
|
|
78
78
|
readOnly: readOnly || disabled,
|
|
@@ -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","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, 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.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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\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
|
|
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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"}
|
|
@@ -11,12 +11,12 @@ import ReactQuill from "react-quill";
|
|
|
11
11
|
import styled from "styled-components";
|
|
12
12
|
import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
|
|
13
13
|
import { Size, States } from "../types";
|
|
14
|
-
import { COLORS, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
|
|
14
|
+
import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
|
|
15
15
|
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.ql-blank::before {\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\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
|
|
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);
|
|
20
20
|
export var RichTextFieldFormats;
|
|
21
21
|
(function (RichTextFieldFormats) {
|
|
22
22
|
RichTextFieldFormats["Background"] = "background";
|
|
@@ -64,7 +64,7 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
64
64
|
toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
|
|
65
65
|
});
|
|
66
66
|
return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
|
|
67
|
-
className: "".concat(resizable ? 'resizable' : '', " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
67
|
+
className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
68
68
|
children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({
|
|
69
69
|
ref: ref,
|
|
70
70
|
readOnly: readOnly || disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","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, 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.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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\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
|
|
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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"}
|
|
@@ -27,9 +27,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
27
27
|
var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n ", "\n"])), function (props) {
|
|
28
28
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
29
29
|
});
|
|
30
|
-
var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n background: ", ";\n border-radius: 4px;\n outline: none;\n margin-bottom: 4px;\n padding: 16px;\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n resize: ", ";\n\n ", "\n &.small {\n ", "\n width: 304px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.medium {\n ", "\n width: 344px;\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n cursor: not-allowed;\n border: 1px solid ", ";\n box-shadow: none !important;\n color: ", " !important;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &::placeholder {\n ", "\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_400, function (props) {
|
|
30
|
+
var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n background: ", ";\n border-radius: 4px;\n outline: none;\n margin-bottom: 4px;\n padding: 16px;\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n resize: ", ";\n\n ", "\n &.small {\n ", "\n width: 304px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.medium {\n ", "\n &::placeholder {\n ", "\n }\n width: 344px;\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n cursor: not-allowed;\n border: 1px solid ", ";\n box-shadow: none !important;\n color: ", " !important;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &::placeholder {\n ", "\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_400, function (props) {
|
|
31
31
|
return props.autoHeight ? 'none' : '';
|
|
32
|
-
}, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.
|
|
32
|
+
}, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (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.primary_800, _styles.focusStyles, _styles.COLORS.critical_500, _styles.COLORS.correct_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500));
|
|
33
33
|
var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
34
34
|
var id = _ref.id,
|
|
35
35
|
placeholder = _ref.placeholder,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","white","neutral_400","autoHeight","ComponentMStyling","ComponentTextStyle","
|
|
1
|
+
{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","white","neutral_400","autoHeight","ComponentMStyling","ComponentTextStyle","Regular","black","ComponentSStyling","Italic","neutral_500","primary_800","focusStyles","critical_500","correct_500","primary_700","readOnlyState","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\nimport { States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons } from '../icons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\nimport {useFocusVisibleRef} from \"../common\";\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n width: 100%;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n display: block;\n background: ${COLORS.white};\n border-radius: 4px;\n outline: none;\n margin-bottom: 4px;\n padding: 16px;\n border: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n\n resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n width: 304px;\n\n &::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n width: 344px;\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.focus-visible {\n ${focusStyles}\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &.active {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &:read-only:not(:disabled) {\n ${readOnlyState}\n }\n\n &:disabled {\n cursor: not-allowed;\n border: 1px solid ${COLORS.neutral_100};\n box-shadow: none !important;\n color: ${COLORS.neutral_300} !important;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n id,\n placeholder,\n state,\n value,\n size,\n disabled,\n validationMessage,\n onChange,\n margin,\n autoHeight,\n note,\n required,\n className,\n dataTestId,\n ...rest\n}: TextareaProps, ref) => {\n\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n return (\n <TextareaWrapper>\n <TextArea\n id={id}\n data-testid={dataTestId}\n ref={elementRef}\n value={value}\n placeholder={disabled ? undefined : placeholder}\n autoHeight={autoHeight}\n className={cls}\n disabled={disabled}\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n required={required}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <SystemIcons.TechnicalWarning color={COLORS.critical_400} />}\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 </TextareaWrapper>\n );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
|
|
@@ -35,9 +35,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
35
35
|
var TextareaWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n ", "\n"])), function (props) {
|
|
36
36
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
37
37
|
});
|
|
38
|
-
var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block;\n background: ", ";\n border-radius: 4px;\n outline: none;\n margin-bottom: 4px;\n padding: 16px;\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n resize: ", ";\n\n ", "\n &.small {\n ", "\n width: 304px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.medium {\n ", "\n width: 344px;\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n cursor: not-allowed;\n border: 1px solid ", ";\n box-shadow: none !important;\n color: ", " !important;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &::placeholder {\n ", "\n }\n"])), COLORS.white, COLORS.neutral_400, function (props) {
|
|
38
|
+
var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block;\n background: ", ";\n border-radius: 4px;\n outline: none;\n margin-bottom: 4px;\n padding: 16px;\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n resize: ", ";\n\n ", "\n &.small {\n ", "\n width: 304px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.medium {\n ", "\n &::placeholder {\n ", "\n }\n width: 344px;\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n cursor: not-allowed;\n border: 1px solid ", ";\n box-shadow: none !important;\n color: ", " !important;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &::placeholder {\n ", "\n }\n"])), COLORS.white, COLORS.neutral_400, function (props) {
|
|
39
39
|
return props.autoHeight ? 'none' : '';
|
|
40
|
-
}, ComponentMStyling(ComponentTextStyle.
|
|
40
|
+
}, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
|
|
41
41
|
var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
42
42
|
var id = _ref.id,
|
|
43
43
|
placeholder = _ref.placeholder,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","TextareaWrapper","div","props","margin","TextArea","textarea","white","neutral_400","autoHeight","
|
|
1
|
+
{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","TextareaWrapper","div","props","margin","TextArea","textarea","white","neutral_400","autoHeight","Regular","black","Italic","neutral_500","primary_800","critical_500","correct_500","primary_700","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\nimport { States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons } from '../icons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\nimport {useFocusVisibleRef} from \"../common\";\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n width: 100%;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n display: block;\n background: ${COLORS.white};\n border-radius: 4px;\n outline: none;\n margin-bottom: 4px;\n padding: 16px;\n border: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n\n resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n width: 304px;\n\n &::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n width: 344px;\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.focus-visible {\n ${focusStyles}\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &.active {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &:read-only:not(:disabled) {\n ${readOnlyState}\n }\n\n &:disabled {\n cursor: not-allowed;\n border: 1px solid ${COLORS.neutral_100};\n box-shadow: none !important;\n color: ${COLORS.neutral_300} !important;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n id,\n placeholder,\n state,\n value,\n size,\n disabled,\n validationMessage,\n onChange,\n margin,\n autoHeight,\n note,\n required,\n className,\n dataTestId,\n ...rest\n}: TextareaProps, ref) => {\n\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n return (\n <TextareaWrapper>\n <TextArea\n id={id}\n data-testid={dataTestId}\n ref={elementRef}\n value={value}\n placeholder={disabled ? undefined : placeholder}\n autoHeight={autoHeight}\n className={cls}\n disabled={disabled}\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n required={required}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <SystemIcons.TechnicalWarning color={COLORS.critical_400} />}\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 </TextareaWrapper>\n );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
|