npm - @oneblink/apps-react - Versions diffs - 12.0.0 → 13.0.0-beta.10 - Mend

@oneblink/apps-react 12.0.0 → 13.0.0-beta.10

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 (207) hide show

package/dist/form-elements/FormElementSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,kBAAkB,MAAM,2CAA2C,CAAA;AAC1E,OAAO,qBAAqB,MAAM,gCAAgC,CAAA;AAClE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,iBAAiB,MAAM,0CAA0C,CAAA;AAOxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;~~AAgB9F~~,SAAS,iBAAiB,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,gCAAgC,EAChC,oBAAoB,EACpB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,OAAO;QACP,KAAK;QACL,QAAQ;QACR,gCAAgC;QAChC,oBAAoB;KACrB,CAAC,CAAA;IAEF,MAAM,qBAAqB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAA;QACtC,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QAC7C,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,wBAAwB,YACrC,KAAC,yBAAyB,IACxB,SAAS,EAAC,WAAW,EACrB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAE1B,MAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,gCAAgC,EAAE,gCAAgC,aAEjE,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,YAAY,IAAI,CACxC,KAAC,iBAAiB,IAChB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,qBAAqB,EAC/B,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,QAAQ,EAAE,QAAmD,GAC7D,CACH,EACA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,qBAAqB,YAClC,cAAK,SAAS,EAAC,qBAAqB,YAClC,kBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0DAA0D,EACpE,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,aAE/B,iBAAQ,KAAK,EAAC,EAAE,8BAAuB,EACtC,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACzC,iBAAoB,KAAK,EAAE,KAAK,YAC7B,KAAK,IADK,KAAK,CAET,CACV,CAAC,IACK,GACL,GACF,GACF,CACP,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,4BAA4B,aACzC,iBACE,QAAQ,QACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,2DAA2D,EACrE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACxC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oCACd,MAAM,IAAI,GAAG,EAAE,CAAA;oCACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;wCACzD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;oCAC9C,CAAC;oCACD,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;qCACtC,CAAC,CAAA;gCACJ,CAAC,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,MAAM,EAAE,UAAU,sBACA,eAAe,mBAClB,OAAO,CAAC,QAAQ,YAE9B,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACzC,iBAAoB,KAAK,EAAE,KAAK,YAC7B,KAAK,IADK,KAAK,CAET,CACV,CAAC,GACK,EAET,KAAC,YAAY,IACX,YAAY,QACZ,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,CACP,EAEA,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACkB,GACK,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.SelectElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string \| string[]>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n conditionallyShownOptionsElement:\n \| FormElementConditionallyShownElement\n \| undefined\n onUpdateFormElements: UpdateFormElementsHandler\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementSelect({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const selectedValuesAsArray = React.useMemo(() => {\n if (Array.isArray(value)) return value\n if (typeof value === 'string') return [value]\n return []\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-select-element\">\n <FormElementLabelContainer\n className=\"ob-select\"\n id={id}\n element={element}\n required={element.required}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.multi && element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValuesAsArray}\n disabled={~~element.~~readOnly}\n onChange={onChange as FormElementValueChangeHandler<string[]>}\n />\n )}\n {!element.multi ? (\n <div className=\"field has-addons\">\n <div className=\"control is-expanded\">\n <div className=\"select is-fullwidth\">\n <select\n id={id}\n name={element.name}\n className=\"cypress-select-single-control ob-input ob-select__single\"\n value={typeof value === 'string' ? value : ''}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={~~element.~~readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n >\n <option value=\"\">Please choose</option>\n {filteredOptions.map(({ label, value }) => (\n <option key={value} value={value}>\n {label}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n ) : (\n <div className=\"select is-multiple control\">\n <select\n multiple\n id={id}\n name={element.name}\n className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n value={Array.isArray(value) ? value : []}\n onChange={(e) => {\n const vals = []\n for (let i = 0; i < e.target.selectedOptions.length; i++) {\n vals.push(e.target.selectedOptions[i].value)\n }\n onChange(element, {\n value: vals.length ? vals : undefined,\n })\n }}\n required={element.required}\n disabled={~~element.~~readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n aria-required={element.required}\n >\n {filteredOptions.map(({ label, value }) => (\n <option key={value} value={value}>\n {label}\n </option>\n ))}\n </select>\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n )}\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementOptions>\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSelect)\n"]}
1	+ {"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.SelectElement\n readOnly: boolean\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string \| string[]>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n conditionallyShownOptionsElement:\n \| FormElementConditionallyShownElement\n \| undefined\n onUpdateFormElements: UpdateFormElementsHandler\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementSelect({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const selectedValuesAsArray = React.useMemo(() => {\n if (Array.isArray(value)) return value\n if (typeof value === 'string') return [value]\n return []\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-select-element\">\n <FormElementLabelContainer\n className=\"ob-select\"\n id={id}\n element={element}\n required={element.required}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.multi && element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValuesAsArray}\n disabled={readOnly}\n onChange={onChange as FormElementValueChangeHandler<string[]>}\n />\n )}\n {!element.multi ? (\n <div className=\"field has-addons\">\n <div className=\"control is-expanded\">\n <div className=\"select is-fullwidth\">\n <select\n id={id}\n name={element.name}\n className=\"cypress-select-single-control ob-input ob-select__single\"\n value={typeof value === 'string' ? value : ''}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n >\n <option value=\"\">Please choose</option>\n {filteredOptions.map(({ label, value }) => (\n <option key={value} value={value}>\n {label}\n </option>\n ))}\n </select>\n </div>\n </div>\n </div>\n ) : (\n <div className=\"select is-multiple control\">\n <select\n multiple\n id={id}\n name={element.name}\n className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n value={Array.isArray(value) ? value : []}\n onChange={(e) => {\n const vals = []\n for (let i = 0; i < e.target.selectedOptions.length; i++) {\n vals.push(e.target.selectedOptions[i].value)\n }\n onChange(element, {\n value: vals.length ? vals : undefined,\n })\n }}\n required={element.required}\n disabled={readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n aria-required={element.required}\n >\n {filteredOptions.map(({ label, value }) => (\n <option key={value} value={value}>\n {label}\n </option>\n ))}\n </select>\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n )}\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementOptions>\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSelect)\n"]}

package/dist/form-elements/FormElementSignature.d.ts CHANGED Viewed

@@ -6,11 +6,12 @@ import { IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.DrawElement;
+    readOnly: boolean;
     value: FormElementBinaryStorageValue;
     onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
 } & IsDirtyProps;
-declare function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, setIsDirty, isDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementSignature({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, setIsDirty, isDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementSignature>;
 export default _default;

package/dist/form-elements/FormElementSignature.js CHANGED Viewed

@@ -13,16 +13,16 @@ import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePre
 import useIsPageVisible from '../hooks/useIsPageVisible';
 import ProgressBar from '../components/renderer/attachments/ProgressBar';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementSignature({ id, element, value, onChange, validationMessage, displayValidationMessage, setIsDirty, isDirty, }) {
+function FormElementSignature({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, setIsDirty, isDirty, }) {
     const isPageVisible = useIsPageVisible();
     const handleChange = React.useCallback((formElement, newValue) => {
         setIsDirty();
         onChange(formElement, newValue);
     }, [onChange, setIsDirty]);
-    return (_jsx("div", { className: "cypress-signature-element", children: _jsxs(FormElementLabelContainer, { className: "ob-signature", id: id, element: element, required: element.required, children: [_jsx("div", { className: "control", children: value ? (_jsx(SignatureDisplay, { element: element, value: value, onChange: handleChange })) : isPageVisible ? (_jsx(SignatureDrawing, { element: element, onChange: handleChange })) : null }), (isDirty || displayValidationMessage) && !!validationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+    return (_jsx("div", { className: "cypress-signature-element", children: _jsxs(FormElementLabelContainer, { className: "ob-signature", id: id, element: element, required: element.required, children: [_jsx("div", { className: "control", children: value ? (_jsx(SignatureDisplay, { element: element, readOnly: readOnly, value: value, onChange: handleChange })) : isPageVisible ? (_jsx(SignatureDrawing, { element: element, readOnly: readOnly, onChange: handleChange })) : null }), (isDirty || displayValidationMessage) && !!validationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementSignature);
-const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChange, }) {
+const SignatureDrawing = React.memo(function SignatureDrawing({ element, readOnly, onChange, }) {
     const canvasRef = React.useRef(null);
     const [isEmpty, setIsEmpty] = React.useState(true);
     const [canvasDimensions, setCanvasDimensions] = React.useState({
@@ -65,21 +65,21 @@ const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChang
     React.useEffect(() => {
         if (!canvasRef.current)
             return;
-        if (element.readOnly) {
+        if (readOnly) {
             canvasRef.current.off();
         }
         else {
             canvasRef.current.on();
         }
-    }, [canvasRef, element.readOnly]);
+    }, [canvasRef, readOnly]);
     return (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, children: _jsx(SignatureCanvas, { ref: canvasRef, canvasProps: {
                         ...canvasDimensions,
                         className: 'input ob-signature__control cypress-signature-control signature-pad',
                         // @ts-expect-error ???
-                        disabled: element.readOnly,
-                    }, onEnd: handleEndDraw, onBegin: window.cordova ? scrollingService.disableScrolling : undefined }) }), _jsxs("div", { className: "buttons ob-buttons", children: [_jsx("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: handleClear, disabled: element.readOnly || isEmpty, children: "Clear" }), _jsx("button", { type: "button", className: "button ob-button ob-button__done is-primary cypress-done-signature-button", onClick: handleDone, disabled: element.readOnly || isEmpty, children: "Save Signature" })] })] }));
+                        disabled: readOnly,
+                    }, onEnd: handleEndDraw, onBegin: window.cordova ? scrollingService.disableScrolling : undefined }) }), _jsxs("div", { className: "buttons ob-buttons", children: [_jsx("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: handleClear, disabled: readOnly || isEmpty, children: "Clear" }), _jsx("button", { type: "button", className: "button ob-button ob-button__done is-primary cypress-done-signature-button", onClick: handleDone, disabled: readOnly || isEmpty, children: "Save Signature" })] })] }));
 });
-const SignatureDisplay = React.memo(function SignatureDisplay({ element, value, onChange, }) {
+const SignatureDisplay = React.memo(function SignatureDisplay({ element, readOnly, value, onChange, }) {
     const result = useAttachment(value, element, React.useCallback((id, attachment) => {
         onChange(element, {
             value: attachment,
@@ -104,7 +104,7 @@ const SignatureDisplay = React.memo(function SignatureDisplay({ element, value,
     }, [element, onChange, value]);
     return (_jsxs(_Fragment, { children: [_jsx("figure", { className: "ob-figure", children: _jsx(DisplayImage, { ...result, alt: `${element.label}: Signature` }) }), _jsxs("div", { className: "buttons ob-buttons", children: [result.uploadErrorMessage && handleRetry && (_jsx("button", { type: "button", className: "button ob-button ob-button__retry is-light cypress-retry-file-button", onClick: handleRetry, children: "Retry" })), _jsx("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: () => onChange(element, {
                             value: undefined,
-                        }), disabled: element.readOnly, children: "Clear" })] })] }));
+                        }), disabled: readOnly, children: "Clear" })] })] }));
 });
 const DisplayImage = React.memo(function DisplayImage({ alt, uploadErrorMessage, isUploading, isLoadingAttachmentUrl, attachmentUrl, loadAttachmentUrlError, progress, }) {
     if (uploadErrorMessage) {

package/dist/form-elements/FormElementSignature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,eAAe,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAG/C,OAAO,gBAAgB,MAAM,+BAA+B,CAAA;AAC5D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,SAAS,MAAM,kCAAkC,CAAA;AACxD,OAAO,aAAa,MAAM,oCAAoC,CAAA;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,gBAAgB,MAAM,qDAAqD,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,uBAAuB,MAAM,4DAA4D,CAAA;AAEhG,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AACxD,OAAO,WAAW,MAAM,gDAAgD,CAAA;AAExE,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAW9F,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,UAAU,EACV,OAAO,GACD;IACN,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAGpC,CAAC,WAAW,EAAE,QAAQ,EAAE,EAAE;QACxB,UAAU,EAAE,CAAA;QACZ,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;IACjC,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAA;IAED,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,MAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,cAAK,SAAS,EAAC,SAAS,YACrB,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAClB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,CAC/D,CAAC,CAAC,CAAC,IAAI,GACJ,EAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;AAE/C,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,gBAAgB,CAAC,EAC5D,OAAO,EACP,QAAQ,GAIT;IACC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAA;IAErD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAClD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAE5D;QACA,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;KAClB,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;YACpC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QAC3B,CAAC;QACD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAM;QAC9B,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAA;QAE1D,yDAAyD;QACzD,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,aAAa,CAAC,CAAA;QAC9C,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,oBAAoB,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,CAAC;SAC5D,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,yBAAyB;IACzB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE9C,iBAAiB,CAAiB;QAChC,uEAAuE;QACvE,GAAG;QACH,QAAQ,EAAE,mBAAmB;KAC9B,CAAC,CAAA;IAEF,+BAA+B;IAC/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAM;QAC9B,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;YACrB,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,CAAA;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEjC,OAAO,CACL,8BACE,cAAK,GAAG,EAAE,GAAG,YACX,KAAC,eAAe,IACd,GAAG,EAAE,SAAS,EACd,WAAW,EAAE;wBACX,GAAG,gBAAgB;wBACnB,SAAS,EACP,qEAAqE;wBACvE,uBAAuB;wBACvB,QAAQ,EAAE,OAAO,CAAC,QAAQ;qBAC3B,EACD,KAAK,EAAE,aAAa,EACpB,OAAO,EACL,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,GAEhE,GACE,EAEN,eAAK,SAAS,EAAC,oBAAoB,aACjC,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oEAAoE,EAC9E,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,OAAO,sBAG9B,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2EAA2E,EACrF,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,OAAO,+BAG9B,IACL,IACL,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,gBAAgB,CAAC,EAC5D,OAAO,EACP,KAAK,EACL,QAAQ,GAKT;IACC,MAAM,MAAM,GAAG,aAAa,CAC1B,KAAK,EACL,OAAO,EACP,KAAK,CAAC,WAAW,CACf,CAAC,EAAE,EAAE,UAAU,EAAE,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,UAAU;SAClB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CACF,CAAA;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAM;QAE/C,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACzC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,IAAI,EAAE,KAAK,CAAC,IAAI;wBAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,SAAS,EAAE,KAAK,CAAC,SAAS;qBAC3B;iBACF,CAAC,CAAA;YACJ,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9B,OAAO,CACL,8BACE,iBAAQ,SAAS,EAAC,WAAW,YAC3B,KAAC,YAAY,OAAK,MAAM,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,aAAa,GAAI,GACzD,EAET,eAAK,SAAS,EAAC,oBAAoB,aAChC,MAAM,CAAC,kBAAkB,IAAI,WAAW,IAAI,CAC3C,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sEAAsE,EAChF,OAAO,EAAE,WAAW,sBAGb,CACV,EACD,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oEAAoE,EAC9E,OAAO,EAAE,GAAG,EAAE,CACZ,QAAQ,CAAC,OAAO,EAAE;4BAChB,KAAK,EAAE,SAAS;yBACjB,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,sBAGnB,IACL,IACL,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EACpD,GAAG,EACH,kBAAkB,EAClB,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,QAAQ,GAGT;IACC,IAAI,kBAAkB,EAAE,CAAC;QACvB,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAC1C,aAAI,SAAS,EAAC,YAAY,8BAAmB,EAC7C,4EACkD,gCAAY,SAAI,GAAG,EACnE,gCAAY,uBACV,IACA,CACP,CAAA;IACH,CAAC;IAED,IAAI,sBAAsB,EAAE,CAAC;QAC3B,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAC1C,aAAI,SAAS,EAAC,YAAY,+BAAoB,EAC9C,sBAAI,sBAAsB,CAAC,OAAO,GAAK,IACnC,CACP,CAAA;IACH,CAAC;IAED,IAAI,sBAAsB,EAAE,CAAC;QAC3B,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,SAAS,IAAC,KAAK,QAAC,SAAS,EAAC,iCAAiC,GAAG,GAC3D,CACP,CAAA;IACH,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,mBAAmB,YACjC,KAAC,gBAAgB,IACf,sBAAsB,EAAE,sBAAsB,EAC9C,sBAAsB,EAAE,sBAAsB,EAC9C,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GAClB,GACG,EACP,cACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,2CAA2C,EACrD,GAAG,EAAE,GAAG,GACR,EACF,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GAAI,IACvD,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,YAC1C,KAAC,uBAAuB,KAAG,GACvB,CACP,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { useResizeObserver } from 'usehooks-ts'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.DrawElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n setIsDirty,\n isDirty,\n}: Props) {\n const isPageVisible = useIsPageVisible()\n\n const handleChange = React.useCallback<\n FormElementValueChangeHandler<FormElementBinaryStorageValue>\n >(\n (formElement, newValue) => {\n setIsDirty()\n onChange(formElement, newValue)\n },\n [onChange, setIsDirty],\n )\n\n return (\n <div className=\"cypress-signature-element\">\n <FormElementLabelContainer\n className=\"ob-signature\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n {value ? (\n <SignatureDisplay\n element={element}\n value={value}\n onChange={handleChange}\n />\n ) : isPageVisible ? (\n <SignatureDrawing element={element} onChange={handleChange} />\n ) : null}\n </div>\n\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n element,\n onChange,\n}: {\n element: Props['element']\n onChange: Props['onChange']\n}) {\n const canvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isEmpty, setIsEmpty] = React.useState(true)\n const [canvasDimensions, setCanvasDimensions] = React.useState<\n React.CanvasHTMLAttributes<HTMLCanvasElement>\n >({\n width: undefined,\n height: undefined,\n })\n\n const handleClear = React.useCallback(() => {\n if (canvasRef.current) {\n console.log('Clearing signature...')\n canvasRef.current.clear()\n }\n setIsEmpty(true)\n }, [])\n\n const handleDone = React.useCallback(async () => {\n if (!canvasRef.current) return\n const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n // Convert base64 data uri to blob and send it on its way\n const blob = await canvasToBlob(trimmedCanvas)\n onChange(element, {\n value: prepareNewAttachment(blob, 'signature.png', element),\n })\n }, [element, onChange])\n\n // HANDLING CANVAS CHANGE\n const handleEndDraw = React.useCallback(() => {\n if (window.cordova) {\n scrollingService.enableScrolling()\n }\n if (isEmpty) {\n setIsEmpty(false)\n }\n }, [isEmpty])\n\n const ref = React.useRef<HTMLDivElement>(null)\n\n useResizeObserver<HTMLDivElement>({\n // @ts-expect-error https://github.com/juliencrn/usehooks-ts/issues/663\n ref,\n onResize: setCanvasDimensions,\n })\n\n // REACTIVE DISABLING OF CANVAS\n React.useEffect(() => {\n if (!canvasRef.current) return\n if (element.readOnly) {\n canvasRef.current.off()\n } else {\n canvasRef.current.on()\n }\n }, [canvasRef, element.readOnly])\n\n return (\n <>\n <div ref={ref}>\n <SignatureCanvas\n ref={canvasRef}\n canvasProps={{\n ...canvasDimensions,\n className:\n 'input ob-signature__control cypress-signature-control signature-pad',\n // @ts-expect-error ???\n disabled: element.readOnly,\n }}\n onEnd={handleEndDraw}\n onBegin={\n window.cordova ? scrollingService.disableScrolling : undefined\n }\n />\n </div>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={handleClear}\n disabled={element.readOnly \|\| isEmpty}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n onClick={handleDone}\n disabled={element.readOnly \|\| isEmpty}\n >\n Save Signature\n </button>\n </div>\n </>\n )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n element,\n value,\n onChange,\n}: {\n element: Props['element']\n value: Props['value']\n onChange: Props['onChange']\n}) {\n const result = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, {\n value: attachment,\n })\n },\n [element, onChange],\n ),\n )\n\n const handleRetry = React.useMemo(() => {\n if (!value \|\| typeof value !== 'object') return\n\n if (value.type === 'ERROR' && value.data) {\n return () => {\n onChange(element, {\n value: {\n type: 'NEW',\n _id: value._id,\n data: value.data,\n fileName: value.fileName,\n isPrivate: value.isPrivate,\n },\n })\n }\n }\n }, [element, onChange, value])\n\n return (\n <>\n <figure className=\"ob-figure\">\n <DisplayImage {...result} alt={`${element.label}: Signature`} />\n </figure>\n\n <div className=\"buttons ob-buttons\">\n {result.uploadErrorMessage && handleRetry && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n onClick={handleRetry}\n >\n Retry\n </button>\n )}\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={() =>\n onChange(element, {\n value: undefined,\n })\n }\n disabled={element.readOnly}\n >\n Clear\n </button>\n </div>\n </>\n )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n alt,\n uploadErrorMessage,\n isUploading,\n isLoadingAttachmentUrl,\n attachmentUrl,\n loadAttachmentUrlError,\n progress,\n}: ReturnType<typeof useAttachment> & {\n alt: string\n}) {\n if (uploadErrorMessage) {\n return (\n <div className=\"figure-content\" role=\"alert\">\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your signature failed to upload, please use the <b>Retry</b> or{' '}\n <b>Clear</b> buttons below.\n </p>\n </div>\n )\n }\n\n if (loadAttachmentUrlError) {\n return (\n <div className=\"figure-content\" role=\"alert\">\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadAttachmentUrlError.message}</p>\n </div>\n )\n }\n\n if (isLoadingAttachmentUrl) {\n return (\n <div className=\"figure-content\">\n <OnLoading small className=\"cypress-signature-loading-image\" />\n </div>\n )\n }\n\n if (attachmentUrl) {\n return (\n <div className=\"figure-content\">\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n loadAttachmentUrlError={loadAttachmentUrlError}\n isUploading={isUploading}\n attachmentUrl={attachmentUrl}\n progress={progress}\n />\n </span>\n <img\n src={attachmentUrl}\n className=\"cypress-signature-image ob-signature__img\"\n alt={alt}\n />\n <ProgressBar progress={progress} isShowing={isUploading} />\n </div>\n )\n }\n\n return (\n <div className=\"figure-content\" role=\"alert\">\n <ImagePreviewUnavailable />\n </div>\n )\n})\n"]}
1	+ {"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { useResizeObserver } from 'usehooks-ts'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.DrawElement\n readOnly: boolean\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n setIsDirty,\n isDirty,\n}: Props) {\n const isPageVisible = useIsPageVisible()\n\n const handleChange = React.useCallback<\n FormElementValueChangeHandler<FormElementBinaryStorageValue>\n >(\n (formElement, newValue) => {\n setIsDirty()\n onChange(formElement, newValue)\n },\n [onChange, setIsDirty],\n )\n\n return (\n <div className=\"cypress-signature-element\">\n <FormElementLabelContainer\n className=\"ob-signature\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n {value ? (\n <SignatureDisplay\n element={element}\n readOnly={readOnly}\n value={value}\n onChange={handleChange}\n />\n ) : isPageVisible ? (\n <SignatureDrawing\n element={element}\n readOnly={readOnly}\n onChange={handleChange}\n />\n ) : null}\n </div>\n\n {(isDirty \|\| displayValidationMessage) && !!validationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n element,\n readOnly,\n onChange,\n}: {\n element: Props['element']\n readOnly: boolean\n onChange: Props['onChange']\n}) {\n const canvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isEmpty, setIsEmpty] = React.useState(true)\n const [canvasDimensions, setCanvasDimensions] = React.useState<\n React.CanvasHTMLAttributes<HTMLCanvasElement>\n >({\n width: undefined,\n height: undefined,\n })\n\n const handleClear = React.useCallback(() => {\n if (canvasRef.current) {\n console.log('Clearing signature...')\n canvasRef.current.clear()\n }\n setIsEmpty(true)\n }, [])\n\n const handleDone = React.useCallback(async () => {\n if (!canvasRef.current) return\n const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n // Convert base64 data uri to blob and send it on its way\n const blob = await canvasToBlob(trimmedCanvas)\n onChange(element, {\n value: prepareNewAttachment(blob, 'signature.png', element),\n })\n }, [element, onChange])\n\n // HANDLING CANVAS CHANGE\n const handleEndDraw = React.useCallback(() => {\n if (window.cordova) {\n scrollingService.enableScrolling()\n }\n if (isEmpty) {\n setIsEmpty(false)\n }\n }, [isEmpty])\n\n const ref = React.useRef<HTMLDivElement>(null)\n\n useResizeObserver<HTMLDivElement>({\n // @ts-expect-error https://github.com/juliencrn/usehooks-ts/issues/663\n ref,\n onResize: setCanvasDimensions,\n })\n\n // REACTIVE DISABLING OF CANVAS\n React.useEffect(() => {\n if (!canvasRef.current) return\n if (readOnly) {\n canvasRef.current.off()\n } else {\n canvasRef.current.on()\n }\n }, [canvasRef, readOnly])\n\n return (\n <>\n <div ref={ref}>\n <SignatureCanvas\n ref={canvasRef}\n canvasProps={{\n ...canvasDimensions,\n className:\n 'input ob-signature__control cypress-signature-control signature-pad',\n // @ts-expect-error ???\n disabled: readOnly,\n }}\n onEnd={handleEndDraw}\n onBegin={\n window.cordova ? scrollingService.disableScrolling : undefined\n }\n />\n </div>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={handleClear}\n disabled={readOnly \|\| isEmpty}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n onClick={handleDone}\n disabled={readOnly \|\| isEmpty}\n >\n Save Signature\n </button>\n </div>\n </>\n )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n element,\n readOnly,\n value,\n onChange,\n}: {\n element: Props['element']\n readOnly: boolean\n value: Props['value']\n onChange: Props['onChange']\n}) {\n const result = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, {\n value: attachment,\n })\n },\n [element, onChange],\n ),\n )\n\n const handleRetry = React.useMemo(() => {\n if (!value \|\| typeof value !== 'object') return\n\n if (value.type === 'ERROR' && value.data) {\n return () => {\n onChange(element, {\n value: {\n type: 'NEW',\n _id: value._id,\n data: value.data,\n fileName: value.fileName,\n isPrivate: value.isPrivate,\n },\n })\n }\n }\n }, [element, onChange, value])\n\n return (\n <>\n <figure className=\"ob-figure\">\n <DisplayImage {...result} alt={`${element.label}: Signature`} />\n </figure>\n\n <div className=\"buttons ob-buttons\">\n {result.uploadErrorMessage && handleRetry && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n onClick={handleRetry}\n >\n Retry\n </button>\n )}\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={() =>\n onChange(element, {\n value: undefined,\n })\n }\n disabled={readOnly}\n >\n Clear\n </button>\n </div>\n </>\n )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n alt,\n uploadErrorMessage,\n isUploading,\n isLoadingAttachmentUrl,\n attachmentUrl,\n loadAttachmentUrlError,\n progress,\n}: ReturnType<typeof useAttachment> & {\n alt: string\n}) {\n if (uploadErrorMessage) {\n return (\n <div className=\"figure-content\" role=\"alert\">\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your signature failed to upload, please use the <b>Retry</b> or{' '}\n <b>Clear</b> buttons below.\n </p>\n </div>\n )\n }\n\n if (loadAttachmentUrlError) {\n return (\n <div className=\"figure-content\" role=\"alert\">\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadAttachmentUrlError.message}</p>\n </div>\n )\n }\n\n if (isLoadingAttachmentUrl) {\n return (\n <div className=\"figure-content\">\n <OnLoading small className=\"cypress-signature-loading-image\" />\n </div>\n )\n }\n\n if (attachmentUrl) {\n return (\n <div className=\"figure-content\">\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n loadAttachmentUrlError={loadAttachmentUrlError}\n isUploading={isUploading}\n attachmentUrl={attachmentUrl}\n progress={progress}\n />\n </span>\n <img\n src={attachmentUrl}\n className=\"cypress-signature-image ob-signature__img\"\n alt={alt}\n />\n <ProgressBar progress={progress} isShowing={isUploading} />\n </div>\n )\n }\n\n return (\n <div className=\"figure-content\" role=\"alert\">\n <ImagePreviewUnavailable />\n </div>\n )\n})\n"]}

package/dist/form-elements/FormElementSummary.js CHANGED Viewed

@@ -140,11 +140,13 @@ function FormElementSummary({ element, onChange, value }) {
         if (summary.length) {
             onChange(element, {
                 value: summary,
+                isDerivedChange: true,
             });
         }
         else {
             onChange(element, {
                 value: undefined,
+                isDerivedChange: true,
             });
         }
     }, [

package/dist/form-elements/FormElementSummary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementSummary.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\n\nimport { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext'\nimport useFlattenElements from '../hooks/useFlattenElementsContext'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\ntype Props = {\n element: FormTypes.SummaryElement\n onChange: FormElementValueChangeHandler\n value: unknown\n}\n\nconst arraysAreEqual = (a: unknown[], b: unknown[]) => {\n if (!Array.isArray(a) \|\| !Array.isArray(b)) {\n if (a !== b) return false\n return true\n }\n if (a.length !== b.length) return false\n\n for (let i = 0; i < a.length; i++) {\n if (Array.isArray(a[i]) && Array.isArray(b[i])) {\n const areEqual = arraysAreEqual(a[i] as unknown[], b[i] as unknown[])\n if (!areEqual) return false\n continue\n }\n if (a[i] !== b[i]) return false\n }\n return true\n}\nfunction FormElementSummary({ element, onChange, value }: Props) {\n const { formSubmissionModel } = useFormSubmissionModelParent()\n const flattenedElements = useFlattenElements()\n\n const reducer = React.useCallback(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n submission: SubmissionTypes.S3SubmissionData['submission'],\n ) => {\n if (!('name' in formElement)) return partialSummary\n if (\n formElement.type !== 'repeatableSet' &&\n formElement.type !== 'form' &&\n !element.elementIds.some((elementId) => elementId === formElement.id)\n ) {\n return partialSummary\n }\n\n const formElementValue = submission[formElement.name]\n if (!formElementValue && formElementValue !== 0) {\n return partialSummary\n }\n\n switch (formElement.type) {\n case 'repeatableSet': {\n if (!Array.isArray(formElementValue)) return partialSummary\n // If we found a repeatable set, look through child elements\n // to find the summary elements. Need to start a new array for\n // this structure and look at each entry in the repeatable set\n for (const entry of formElementValue) {\n const repeatableSetSummaryValues = formElement.elements.reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n // eslint-disable-next-line react-hooks/immutability\n reducer(\n partialSummary,\n formElement,\n // Pleasing TypeScript\n entry instanceof Object ? entry : {},\n ),\n [],\n )\n if (repeatableSetSummaryValues.length) {\n partialSummary.push(repeatableSetSummaryValues)\n }\n }\n break\n }\n case 'form': {\n const formSummaryValues = (formElement.elements \|\| []).reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n reducer(\n partialSummary,\n formElement,\n // @ts-expect-error Pleasing TypeScript\n formElementValue instanceof Object ? formElementValue : {},\n ),\n [],\n )\n if (formSummaryValues.length) {\n partialSummary.push(formSummaryValues)\n }\n\n break\n }\n case 'select':\n case 'autocomplete':\n case 'radio':\n case 'checkboxes': {\n const optionValues = []\n if (Array.isArray(formElementValue)) {\n optionValues.push(...formElementValue)\n } else {\n optionValues.push(formElementValue)\n }\n if (Array.isArray(formElement.options)) {\n partialSummary.push(\n ...optionValues.reduce((optionLabels, optionValue) => {\n const option = formElement.options?.find(\n ({ value }: FormTypes.ChoiceElementOption) =>\n optionValue === value,\n )\n if (option) {\n optionLabels.push(option.label)\n }\n return optionLabels\n }, []),\n )\n }\n break\n }\n case 'date': {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value: formElementValue as string,\n })\n if (date) {\n partialSummary.push(localisationService.formatDate(date))\n }\n break\n }\n case 'datetime': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatDatetime(new Date(formElementValue)),\n )\n break\n }\n case 'time': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatTime(new Date(formElementValue)),\n )\n break\n }\n default: {\n // Pleasing TypeScript WHILE COVERING ALL BASES\n if (\n typeof formElementValue !== 'string' &&\n typeof formElementValue !== 'object' &&\n typeof formElementValue !== 'number' &&\n typeof formElementValue !== 'function' &&\n typeof formElementValue !== 'boolean'\n ) {\n return partialSummary\n }\n\n partialSummary.push(formElementValue.toString())\n }\n }\n return partialSummary\n },\n [element.elementIds],\n )\n\n // MODEL LISTENER\n React.useEffect(() => {\n const summary = flattenedElements.reduce<FormElementSummaryResults>(\n (partialSummary, formElement) => {\n return reducer(partialSummary, formElement, formSubmissionModel)\n },\n\n [],\n )\n\n if (value === undefined) {\n if (!summary.length) return\n }\n if (arraysAreEqual(value as FormElementSummaryResults, summary)) {\n return\n }\n if (summary.length) {\n onChange(element, {\n value: summary,\n })\n } else {\n onChange(element, {\n value: undefined,\n })\n }\n }, [\n element,\n flattenedElements,\n formSubmissionModel,\n onChange,\n reducer,\n value,\n ])\n\n return (\n <div className=\"ob-form__element ob-summary cypress-summary-result \">\n {!!value && Array.isArray(value) && (\n <SummaryResult results={value}></SummaryResult>\n )}\n </div>\n )\n}\n\ntype FormElementSummaryResults = Array<string \| FormElementSummaryResults>\ntype FormElementSummaryResultProps = {\n results: FormElementSummaryResults\n}\n\nconst SummaryResult = React.memo<FormElementSummaryResultProps>(\n function SummaryResult({ results }) {\n return (\n <>\n {results.map((result, i) => {\n return (\n <div\n key={`${result.toString()}-${i}`}\n className=\"ob-summary__result-container\"\n >\n {typeof result === 'string' ? (\n <p className=\"ob-summary__result has-line-breaks cypress-summary-result-text\">\n {result}\n </p>\n ) : (\n <SummaryResult results={result}></SummaryResult>\n )}\n </div>\n )\n })}\n </>\n )\n },\n)\n\nexport default React.memo(FormElementSummary)\n"]}
1	+ {"version":3,"file":"FormElementSummary.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\n\nimport { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext'\nimport useFlattenElements from '../hooks/useFlattenElementsContext'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\ntype Props = {\n element: FormTypes.SummaryElement\n onChange: FormElementValueChangeHandler\n value: unknown\n}\n\nconst arraysAreEqual = (a: unknown[], b: unknown[]) => {\n if (!Array.isArray(a) \|\| !Array.isArray(b)) {\n if (a !== b) return false\n return true\n }\n if (a.length !== b.length) return false\n\n for (let i = 0; i < a.length; i++) {\n if (Array.isArray(a[i]) && Array.isArray(b[i])) {\n const areEqual = arraysAreEqual(a[i] as unknown[], b[i] as unknown[])\n if (!areEqual) return false\n continue\n }\n if (a[i] !== b[i]) return false\n }\n return true\n}\nfunction FormElementSummary({ element, onChange, value }: Props) {\n const { formSubmissionModel } = useFormSubmissionModelParent()\n const flattenedElements = useFlattenElements()\n\n const reducer = React.useCallback(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n submission: SubmissionTypes.S3SubmissionData['submission'],\n ) => {\n if (!('name' in formElement)) return partialSummary\n if (\n formElement.type !== 'repeatableSet' &&\n formElement.type !== 'form' &&\n !element.elementIds.some((elementId) => elementId === formElement.id)\n ) {\n return partialSummary\n }\n\n const formElementValue = submission[formElement.name]\n if (!formElementValue && formElementValue !== 0) {\n return partialSummary\n }\n\n switch (formElement.type) {\n case 'repeatableSet': {\n if (!Array.isArray(formElementValue)) return partialSummary\n // If we found a repeatable set, look through child elements\n // to find the summary elements. Need to start a new array for\n // this structure and look at each entry in the repeatable set\n for (const entry of formElementValue) {\n const repeatableSetSummaryValues = formElement.elements.reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n // eslint-disable-next-line react-hooks/immutability\n reducer(\n partialSummary,\n formElement,\n // Pleasing TypeScript\n entry instanceof Object ? entry : {},\n ),\n [],\n )\n if (repeatableSetSummaryValues.length) {\n partialSummary.push(repeatableSetSummaryValues)\n }\n }\n break\n }\n case 'form': {\n const formSummaryValues = (formElement.elements \|\| []).reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n reducer(\n partialSummary,\n formElement,\n // @ts-expect-error Pleasing TypeScript\n formElementValue instanceof Object ? formElementValue : {},\n ),\n [],\n )\n if (formSummaryValues.length) {\n partialSummary.push(formSummaryValues)\n }\n\n break\n }\n case 'select':\n case 'autocomplete':\n case 'radio':\n case 'checkboxes': {\n const optionValues = []\n if (Array.isArray(formElementValue)) {\n optionValues.push(...formElementValue)\n } else {\n optionValues.push(formElementValue)\n }\n if (Array.isArray(formElement.options)) {\n partialSummary.push(\n ...optionValues.reduce((optionLabels, optionValue) => {\n const option = formElement.options?.find(\n ({ value }: FormTypes.ChoiceElementOption) =>\n optionValue === value,\n )\n if (option) {\n optionLabels.push(option.label)\n }\n return optionLabels\n }, []),\n )\n }\n break\n }\n case 'date': {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value: formElementValue as string,\n })\n if (date) {\n partialSummary.push(localisationService.formatDate(date))\n }\n break\n }\n case 'datetime': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatDatetime(new Date(formElementValue)),\n )\n break\n }\n case 'time': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatTime(new Date(formElementValue)),\n )\n break\n }\n default: {\n // Pleasing TypeScript WHILE COVERING ALL BASES\n if (\n typeof formElementValue !== 'string' &&\n typeof formElementValue !== 'object' &&\n typeof formElementValue !== 'number' &&\n typeof formElementValue !== 'function' &&\n typeof formElementValue !== 'boolean'\n ) {\n return partialSummary\n }\n\n partialSummary.push(formElementValue.toString())\n }\n }\n return partialSummary\n },\n [element.elementIds],\n )\n\n // MODEL LISTENER\n React.useEffect(() => {\n const summary = flattenedElements.reduce<FormElementSummaryResults>(\n (partialSummary, formElement) => {\n return reducer(partialSummary, formElement, formSubmissionModel)\n },\n\n [],\n )\n\n if (value === undefined) {\n if (!summary.length) return\n }\n if (arraysAreEqual(value as FormElementSummaryResults, summary)) {\n return\n }\n if (summary.length) {\n onChange(element, {\n value: summary,\n isDerivedChange: true,\n })\n } else {\n onChange(element, {\n value: undefined,\n isDerivedChange: true,\n })\n }\n }, [\n element,\n flattenedElements,\n formSubmissionModel,\n onChange,\n reducer,\n value,\n ])\n\n return (\n <div className=\"ob-form__element ob-summary cypress-summary-result \">\n {!!value && Array.isArray(value) && (\n <SummaryResult results={value}></SummaryResult>\n )}\n </div>\n )\n}\n\ntype FormElementSummaryResults = Array<string \| FormElementSummaryResults>\ntype FormElementSummaryResultProps = {\n results: FormElementSummaryResults\n}\n\nconst SummaryResult = React.memo<FormElementSummaryResultProps>(\n function SummaryResult({ results }) {\n return (\n <>\n {results.map((result, i) => {\n return (\n <div\n key={`${result.toString()}-${i}`}\n className=\"ob-summary__result-container\"\n >\n {typeof result === 'string' ? (\n <p className=\"ob-summary__result has-line-breaks cypress-summary-result-text\">\n {result}\n </p>\n ) : (\n <SummaryResult results={result}></SummaryResult>\n )}\n </div>\n )\n })}\n </>\n )\n },\n)\n\nexport default React.memo(FormElementSummary)\n"]}

package/dist/form-elements/FormElementTelephone.d.ts CHANGED Viewed

@@ -4,12 +4,13 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.TelephoneElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementTelephone({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementTelephone>;
 export default _default;

package/dist/form-elements/FormElementTelephone.js CHANGED Viewed

@@ -7,14 +7,14 @@ import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import MaterialIcon from '../components/MaterialIcon';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementTelephone({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const text = typeof value === 'string' ? value : '';
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (_jsx("div", { className: "cypress-telephone-element", children: _jsxs(FormElementLabelContainer, { className: "ob-telephone", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "tel", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-telephone-control", value: text, onChange: (e) => onChange(element, {
                                         value: e.target.value || undefined,
-                                    }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "phone" }) })] }), !!element.readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+                                    }), required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "phone" }) })] }), !!readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementTelephone);
 //# sourceMappingURL=FormElementTelephone.js.map

package/dist/form-elements/FormElementTelephone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementTelephone.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTelephone.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;~~AAY9F~~,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,MAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAK,SAAS,EAAC,qCAAqC,aAClD,gBACE,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,EACF,eAAM,SAAS,EAAC,sCAAsC,YACpD,KAAC,YAAY,IAAC,SAAS,EAAC,WAAW,sBAAqB,GACnD,IACH,EACL,CAAC,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,~~CAChC~~,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,EAEL,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.TelephoneElement\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTelephone({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const text = typeof value === 'string' ? value : ''\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-telephone-element\">\n <FormElementLabelContainer\n className=\"ob-telephone\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <div className=\"control is-expanded has-icons-right\">\n <input\n type=\"tel\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-telephone-control\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={~~element.~~readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n <span className=\"ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5\">phone</MaterialIcon>\n </span>\n </div>\n {!!~~element.~~readOnly && !!value && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementTelephone)\n"]}
1	+ {"version":3,"file":"FormElementTelephone.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTelephone.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAa9F,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,MAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAK,SAAS,EAAC,qCAAqC,aAClD,gBACE,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,EACF,eAAM,SAAS,EAAC,sCAAsC,YACpD,KAAC,YAAY,IAAC,SAAS,EAAC,WAAW,sBAAqB,GACnD,IACH,EACL,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CACxB,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,EAEL,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.TelephoneElement\n readOnly: boolean\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTelephone({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const text = typeof value === 'string' ? value : ''\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-telephone-element\">\n <FormElementLabelContainer\n className=\"ob-telephone\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <div className=\"control is-expanded has-icons-right\">\n <input\n type=\"tel\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-telephone-control\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n <span className=\"ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5\">phone</MaterialIcon>\n </span>\n </div>\n {!!readOnly && !!value && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementTelephone)\n"]}

package/dist/form-elements/FormElementText.d.ts CHANGED Viewed

@@ -4,12 +4,13 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.TextElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementText({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementText>;
 export default _default;

package/dist/form-elements/FormElementText.js CHANGED Viewed

@@ -7,14 +7,14 @@ import FormElementLabelContainer from '../components/renderer/FormElementLabelCo
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import { ValidationIcon } from '../components/renderer/FormElementValidationMessage';
-function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementText({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const text = typeof value === 'string' ? value : '';
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (_jsx("div", { className: "cypress-text-element", children: _jsxs(FormElementLabelContainer, { className: "ob-text", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: "control is-expanded", children: _jsx("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-text-control", value: text, onChange: (e) => onChange(element, {
                                     value: e.target.value || undefined,
-                                }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), !!element.readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), (isDisplayingValidationMessage || !!element.maxLength) && (_jsx("div", { className: "has-margin-top-8", children: _jsxs("div", { className: "is-flex is-justify-content-space-between", children: [isDisplayingValidationMessage ? (_jsxs("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message", children: [_jsx(ValidationIcon, {}), validationMessage] })) : (_jsx("div", {})), !!element.maxLength && (_jsxs("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                                }), required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), !!readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), (isDisplayingValidationMessage || !!element.maxLength) && (_jsx("div", { className: "has-margin-top-8", children: _jsxs("div", { className: "is-flex is-justify-content-space-between", children: [isDisplayingValidationMessage ? (_jsxs("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message", children: [_jsx(ValidationIcon, {}), validationMessage] })) : (_jsx("div", {})), !!element.maxLength && (_jsxs("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
                                     'has-text-danger': text.length > element.maxLength,
                                 }), children: [text.length, " / ", element.maxLength] }))] }) }))] }) }));
 }

package/dist/form-elements/FormElementText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementText.js","sourceRoot":"","sources":["../../src/form-elements/FormElementText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAA;~~AAYpF~~,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YACnC,MAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cAAK,SAAS,EAAC,qBAAqB,YAClC,gBACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;oCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;iCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,GACE,EACL,CAAC,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,~~CAChC~~,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,EACL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,cAAK,SAAS,EAAC,kBAAkB,YAC/B,eAAK,SAAS,EAAC,0CAA0C,aACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,eACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2DAA2D,aAErE,KAAC,cAAc,KAAG,EACjB,iBAAiB,IACd,CACP,CAAC,CAAC,CAAC,CACF,eAAO,CACR,EACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,eACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;oCACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;iCACnD,CACF,aAEA,IAAI,CAAC,MAAM,SAAK,OAAO,CAAC,SAAS,IAC9B,CACP,IACG,GACF,CACP,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.TextElement\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementText({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const text = typeof value === 'string' ? value : ''\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-text-element\">\n <FormElementLabelContainer\n className=\"ob-text\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <div className=\"control is-expanded\">\n <input\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-text-control\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={~~element.~~readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n </div>\n {!!~~element.~~readOnly && !!value && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n {(isDisplayingValidationMessage \|\| !!element.maxLength) && (\n <div className=\"has-margin-top-8\">\n <div className=\"is-flex is-justify-content-space-between\">\n {isDisplayingValidationMessage ? (\n <div\n role=\"alert\"\n className=\"has-text-danger ob-error__text cypress-validation-message\"\n >\n <ValidationIcon />\n {validationMessage}\n </div>\n ) : (\n <div />\n )}\n {!!element.maxLength && (\n <div\n className={clsx(\n 'ob-max-length__text cypress-max-length-message',\n {\n 'has-text-danger': text.length > element.maxLength,\n },\n )}\n >\n {text.length} / {element.maxLength}\n </div>\n )}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementText)\n"]}
1	+ {"version":3,"file":"FormElementText.js","sourceRoot":"","sources":["../../src/form-elements/FormElementText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.TextElement\n readOnly: boolean\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementText({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const text = typeof value === 'string' ? value : ''\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-text-element\">\n <FormElementLabelContainer\n className=\"ob-text\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <div className=\"control is-expanded\">\n <input\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-text-control\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n </div>\n {!!readOnly && !!value && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n {(isDisplayingValidationMessage \|\| !!element.maxLength) && (\n <div className=\"has-margin-top-8\">\n <div className=\"is-flex is-justify-content-space-between\">\n {isDisplayingValidationMessage ? (\n <div\n role=\"alert\"\n className=\"has-text-danger ob-error__text cypress-validation-message\"\n >\n <ValidationIcon />\n {validationMessage}\n </div>\n ) : (\n <div />\n )}\n {!!element.maxLength && (\n <div\n className={clsx(\n 'ob-max-length__text cypress-max-length-message',\n {\n 'has-text-danger': text.length > element.maxLength,\n },\n )}\n >\n {text.length} / {element.maxLength}\n </div>\n )}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementText)\n"]}

package/dist/form-elements/FormElementTextarea.d.ts CHANGED Viewed

@@ -4,12 +4,13 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.TextareaElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementTextarea({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementTextarea>;
 export default _default;

package/dist/form-elements/FormElementTextarea.js CHANGED Viewed

@@ -11,16 +11,16 @@ import { ValidationIcon } from '../components/renderer/FormElementValidationMess
 const StyledTextareaAutosize = styled(TextareaAutosize)(() => ({
     resize: 'vertical',
 }));
-function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementTextarea({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const text = typeof value === 'string' ? value : '';
-    const isDisplayingCopyButton = !!element.readOnly && !!value;
+    const isDisplayingCopyButton = !!readOnly && !!value;
     const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (_jsx("div", { className: "cypress-textarea-element", children: _jsxs(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required, children: [_jsx("div", { className: "control", children: _jsx(StyledTextareaAutosize, { placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, {
                             value: e.target.value || undefined,
-                        }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required, minRows: 4 }) }), (isDisplayingValidationMessage || !!element.maxLength) && (_jsx("div", { className: "has-margin-top-8", children: _jsxs("div", { className: "is-flex is-justify-content-space-between", children: [isDisplayingValidationMessage ? (_jsxs("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message", children: [_jsx(ValidationIcon, {}), validationMessage] })) : (_jsx("div", {})), !!element.maxLength && (_jsxs("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                        }), required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required, minRows: 4 }) }), (isDisplayingValidationMessage || !!element.maxLength) && (_jsx("div", { className: "has-margin-top-8", children: _jsxs("div", { className: "is-flex is-justify-content-space-between", children: [isDisplayingValidationMessage ? (_jsxs("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message", children: [_jsx(ValidationIcon, {}), validationMessage] })) : (_jsx("div", {})), !!element.maxLength && (_jsxs("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
                                     'has-text-danger': text.length > element.maxLength,
                                 }), children: [text.length, " / ", element.maxLength] }))] }) })), (isDisplayingLookupButton || isDisplayingCopyButton) && (_jsxs("div", { className: "buttons ob-buttons has-margin-top-8", children: [isDisplayingCopyButton && (_jsx(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })), isDisplayingLookupButton && (_jsx(LookupButton, { value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined }))] }))] }) }));
 }

package/dist/form-elements/FormElementTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAExD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAC9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAA;AAEpF,MAAM,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE,UAAU;CACnB,CAAC,CAAC,CAAA;~~AAYH~~,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,sBAAsB,GAAG,CAAC,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,CAAC,CAAC,KAAK,CAAA;~~IAC5D~~,MAAM,wBAAwB,GAC5B,CAAC,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,CAAA;IAErD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,0BAA0B,YACvC,MAAC,yBAAyB,IACxB,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,sBAAsB,IACrB,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,yCAAyC,EACnD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAyC,EAAE,EAAE,CACtD,QAAQ,CAAC,OAAO,EAAE;4BAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;yBACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,EAC/B,OAAO,EAAE,CAAC,GACV,GACE,EAEL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,cAAK,SAAS,EAAC,kBAAkB,YAC/B,eAAK,SAAS,EAAC,0CAA0C,aACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,eACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2DAA2D,aAErE,KAAC,cAAc,KAAG,EACjB,iBAAiB,IACd,CACP,CAAC,CAAC,CAAC,CACF,eAAO,CACR,EACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,eACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;oCACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;iCACnD,CACF,aAEA,IAAI,CAAC,MAAM,SAAK,OAAO,CAAC,SAAS,IAC9B,CACP,IACG,GACF,CACP,EAEA,CAAC,wBAAwB,IAAI,sBAAsB,CAAC,IAAI,CACvD,eAAK,SAAS,EAAC,qCAAqC,aACjD,sBAAsB,IAAI,CACzB,KAAC,qBAAqB,IACpB,SAAS,EAAC,mDAAmD,EAC7D,IAAI,EAAE,IAAI,GACV,CACH,EACA,wBAAwB,IAAI,CAC3B,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,CACH,IACG,CACP,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport { TextareaAutosize, styled } from '@mui/material'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\nconst StyledTextareaAutosize = styled(TextareaAutosize)(() => ({\n resize: 'vertical',\n}))\n\ntype Props = {\n id: string\n element: FormTypes.TextareaElement\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const text = typeof value === 'string' ? value : ''\n const isDisplayingCopyButton = !!~~element.~~readOnly && !!value\n const isDisplayingLookupButton =\n !!element.isDataLookup \|\| !!element.isElementLookup\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-textarea-element\">\n <FormElementLabelContainer\n className=\"ob-textarea\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n <StyledTextareaAutosize\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-textarea-control\"\n value={text}\n onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={~~element.~~readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n minRows={4}\n />\n </div>\n\n {(isDisplayingValidationMessage \|\| !!element.maxLength) && (\n <div className=\"has-margin-top-8\">\n <div className=\"is-flex is-justify-content-space-between\">\n {isDisplayingValidationMessage ? (\n <div\n role=\"alert\"\n className=\"has-text-danger ob-error__text cypress-validation-message\"\n >\n <ValidationIcon />\n {validationMessage}\n </div>\n ) : (\n <div />\n )}\n {!!element.maxLength && (\n <div\n className={clsx(\n 'ob-max-length__text cypress-max-length-message',\n {\n 'has-text-danger': text.length > element.maxLength,\n },\n )}\n >\n {text.length} / {element.maxLength}\n </div>\n )}\n </div>\n </div>\n )}\n\n {(isDisplayingLookupButton \|\| isDisplayingCopyButton) && (\n <div className=\"buttons ob-buttons has-margin-top-8\">\n {isDisplayingCopyButton && (\n <CopyToClipboardButton\n className=\"button ob-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n )}\n {isDisplayingLookupButton && (\n <LookupButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n )}\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}
1	+ {"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport { TextareaAutosize, styled } from '@mui/material'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\nconst StyledTextareaAutosize = styled(TextareaAutosize)(() => ({\n resize: 'vertical',\n}))\n\ntype Props = {\n id: string\n element: FormTypes.TextareaElement\n readOnly: boolean\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const text = typeof value === 'string' ? value : ''\n const isDisplayingCopyButton = !!readOnly && !!value\n const isDisplayingLookupButton =\n !!element.isDataLookup \|\| !!element.isElementLookup\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-textarea-element\">\n <FormElementLabelContainer\n className=\"ob-textarea\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n <StyledTextareaAutosize\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-textarea-control\"\n value={text}\n onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={readOnly}\n onBlur={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n minRows={4}\n />\n </div>\n\n {(isDisplayingValidationMessage \|\| !!element.maxLength) && (\n <div className=\"has-margin-top-8\">\n <div className=\"is-flex is-justify-content-space-between\">\n {isDisplayingValidationMessage ? (\n <div\n role=\"alert\"\n className=\"has-text-danger ob-error__text cypress-validation-message\"\n >\n <ValidationIcon />\n {validationMessage}\n </div>\n ) : (\n <div />\n )}\n {!!element.maxLength && (\n <div\n className={clsx(\n 'ob-max-length__text cypress-max-length-message',\n {\n 'has-text-danger': text.length > element.maxLength,\n },\n )}\n >\n {text.length} / {element.maxLength}\n </div>\n )}\n </div>\n </div>\n )}\n\n {(isDisplayingLookupButton \|\| isDisplayingCopyButton) && (\n <div className=\"buttons ob-buttons has-margin-top-8\">\n {isDisplayingCopyButton && (\n <CopyToClipboardButton\n className=\"button ob-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n )}\n {isDisplayingLookupButton && (\n <LookupButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n )}\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}

package/dist/form-elements/FormElementTime.d.ts CHANGED Viewed

@@ -4,11 +4,12 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.TimeElement;
+    readOnly: boolean;
     value: unknown | undefined;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
 } & IsDirtyProps;
-declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementTime({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementTime>;
 export default _default;

package/dist/form-elements/FormElementTime.js CHANGED Viewed

@@ -10,7 +10,7 @@ import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 const timeFormat = localisationService.getDateFnsFormats().time;
-function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+function FormElementTime({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [commonProps, openTimePicker] = useFormDatePickerProps({
         id,
@@ -20,7 +20,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
         ariaDescribedby,
         placeholder: element.placeholderValue,
         className: 'cypress-time-control',
-        disabled: element.readOnly,
+        disabled: readOnly,
         required: element.required,
         onBlur: setIsDirty,
         onChange: (newDate) => {
@@ -43,7 +43,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (_jsx("div", { className: "cypress-time-element", children: _jsxs(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(TimePicker, { label: element.label, format: timeFormat, ...timeProps, timeSteps: { minutes: 1 } }), !element.readOnly && (_jsx(PickerInputButton, { tooltip: "Select time", onClick: openTimePicker, icon: "schedule" })), !!element.readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+    return (_jsx("div", { className: "cypress-time-element", children: _jsxs(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(TimePicker, { label: element.label, format: timeFormat, ...timeProps, timeSteps: { minutes: 1 } }), !readOnly && (_jsx(PickerInputButton, { tooltip: "Select time", onClick: openTimePicker, icon: "schedule" })), !!readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementTime);
 //# sourceMappingURL=FormElementTime.js.map