@oneblink/apps-react 0.6.2 → 1.0.0-beta.3

package/dist/form-elements/FormElementCompliance.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles, { PossibleFileConfiguration } from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ninterface Props {\n  id: string\n  element: FormTypes.ComplianceElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined\n  isEven?: boolean\n}\n\nexport interface Value {\n  value?: string\n  notes?: string\n  files?: PossibleFileConfiguration[]\n}\n\nconst baseElement = {\n  conditionallyShow: false,\n  isDataLookup: false,\n  isElementLookup: false,\n  required: false,\n  requiresAllConditionallyShowPredicates: false,\n}\n\nfunction FormElementCompliance({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptions,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n}: Props) {\n  const typedValue = value as Value | undefined\n\n  const notesElement = React.useMemo<FormTypes.TextareaElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-notes`,\n      label: 'Notes',\n      name: `${element.name}_notes`,\n      type: 'textarea',\n    }),\n    [element.id, element.name, element.readOnly],\n  )\n  const filesElement = React.useMemo<FormTypes.FilesElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-files`,\n      label: 'Media',\n      name: `${element.name}_files`,\n      type: 'files',\n      maxEntries: undefined,\n      minEntries: undefined,\n      restrictFileTypes: false,\n      storageType: element.storageType,\n    }),\n    [element.id, element.name, element.readOnly, element.storageType],\n  )\n\n  const handleValueChange = React.useCallback<\n    FormElementValueChangeHandler<string>\n  >(\n    (fe, v) => {\n      onChange(fe, (existingValue: Value | undefined) => {\n        let newValue = undefined\n        if (typeof v === 'function') {\n          newValue = v(existingValue ? existingValue.value : undefined)\n        } else {\n          newValue = v\n        }\n        if (!newValue) {\n          return\n        }\n        return {\n          ...existingValue,\n          value: newValue,\n        }\n      })\n    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\n        if (!existingValue) {\n          return\n        }\n        let newNotes = undefined\n        if (typeof v === 'function') {\n          newNotes = v(existingValue.notes)\n        } else {\n          newNotes = v\n        }\n        return {\n          ...existingValue,\n          notes: newNotes,\n        }\n      })\n    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\n        if (!existingValue) {\n          return\n        }\n        let newFiles = undefined\n        if (typeof v === 'function') {\n          newFiles = v(existingValue.files)\n        } else {\n          newFiles = v\n        }\n        return {\n          ...existingValue,\n          files: newFiles && newFiles.length ? newFiles : undefined,\n        }\n      })\n    },\n    [element, onChange],\n  )\n\n  const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.notes,\n    handleNotesChange,\n  )\n  const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.files,\n    handleFilesChange,\n  )\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptions,\n  })\n\n  return (\n    <div className=\"cypress-compliance-element\">\n      <FormElementLabelContainer\n        className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"ob-compliance__container\">\n          <FormElementOptions options={element.options}>\n            <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n              {filteredOptions.map((option) => {\n                const isSelected = typedValue?.value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        handleValueChange(element, option.value)\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n          <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n            <ComplianceButton\n              isActive={isShowingNotes}\n              icon=\"notes\"\n              onClick={toggleIsShowingNotes}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Notes\n            </ComplianceButton>\n            <ComplianceButton\n              isActive={isShowingFiles}\n              icon=\"perm_media\"\n              onClick={toggleIsShowingFiles}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Media\n            </ComplianceButton>\n          </div>\n          {isShowingNotes && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementTextarea\n                id={`${id}-notes`}\n                onChange={handleNotesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.notes}\n                element={notesElement}\n              />\n            </div>\n          )}\n          {isShowingFiles && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementFiles\n                id={`${id}-files`}\n                onChange={handleFilesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.files}\n                element={filesElement}\n              />\n            </div>\n          )}\n        </div>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementCompliance)\n"]}
+{"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles, { PossibleFileConfiguration } from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ninterface Props {\n  id: string\n  element: FormTypes.ComplianceElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined\n  isEven?: boolean\n}\n\nexport interface Value {\n  value?: string\n  notes?: string\n  files?: PossibleFileConfiguration[]\n}\n\nconst baseElement = {\n  conditionallyShow: false,\n  isDataLookup: false,\n  isElementLookup: false,\n  required: false,\n  requiresAllConditionallyShowPredicates: false,\n}\n\nfunction FormElementCompliance({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptions,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n}: Props) {\n  const typedValue = value as Value | undefined\n\n  const notesElement = React.useMemo<FormTypes.TextareaElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-notes`,\n      label: 'Notes',\n      name: `${element.name}_notes`,\n      type: 'textarea',\n    }),\n    [element.id, element.name, element.readOnly],\n  )\n  const filesElement = React.useMemo<FormTypes.FilesElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-files`,\n      label: 'Media',\n      name: `${element.name}_files`,\n      type: 'files',\n      maxEntries: undefined,\n      minEntries: undefined,\n      restrictFileTypes: false,\n      storageType: element.storageType,\n    }),\n    [element.id, element.name, element.readOnly, element.storageType],\n  )\n\n  const handleValueChange = React.useCallback<\n    FormElementValueChangeHandler<string>\n  >(\n    (fe, v) => {\n      onChange(fe, (existingValue: Value | undefined) => {\n        let newValue = undefined\n        if (typeof v === 'function') {\n          newValue = v(existingValue ? existingValue.value : undefined)\n        } else {\n          newValue = v\n        }\n        if (!newValue) {\n          return\n        }\n        return {\n          ...existingValue,\n          value: newValue,\n        }\n      })\n    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\n        if (!existingValue) {\n          return\n        }\n        let newNotes = undefined\n        if (typeof v === 'function') {\n          newNotes = v(existingValue.notes)\n        } else {\n          newNotes = v\n        }\n        return {\n          ...existingValue,\n          notes: newNotes,\n        }\n      })\n    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\n        if (!existingValue) {\n          return\n        }\n        let newFiles = undefined\n        if (typeof v === 'function') {\n          newFiles = v(existingValue.files)\n        } else {\n          newFiles = v\n        }\n        return {\n          ...existingValue,\n          files: newFiles && newFiles.length ? newFiles : undefined,\n        }\n      })\n    },\n    [element, onChange],\n  )\n\n  const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.notes,\n    handleNotesChange,\n  )\n  const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.files,\n    handleFilesChange,\n  )\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptions,\n  })\n\n  return (\n    <div className=\"cypress-compliance-element\">\n      <FormElementLabelContainer\n        className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"ob-compliance__container\">\n          <FormElementOptions options={element.options}>\n            <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n              {filteredOptions.map((option) => {\n                const isSelected = typedValue?.value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        handleValueChange(element, option.value)\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n          <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n            <ComplianceButton\n              isActive={isShowingNotes}\n              icon=\"notes\"\n              onClick={toggleIsShowingNotes}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Notes\n            </ComplianceButton>\n            <ComplianceButton\n              isActive={isShowingFiles}\n              icon=\"perm_media\"\n              onClick={toggleIsShowingFiles}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Media\n            </ComplianceButton>\n          </div>\n          {isShowingNotes && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementTextarea\n                id={`${id}-notes`}\n                onChange={handleNotesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.notes}\n                element={notesElement}\n              />\n            </div>\n          )}\n          {isShowingFiles && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementFiles\n                id={`${id}-files`}\n                onChange={handleFilesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.files}\n                element={filesElement}\n              />\n            </div>\n          )}\n        </div>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementCompliance)\n"]}

package/dist/form-elements/FormElementDate.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
-import CopyToClipboardButton from '../components/CopyToClipboardButton';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import useFlatpickr from '../hooks/useFlatpickr';
 import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/LookupButton';
-import FormElementLabelContainer from '../components/FormElementLabelContainer';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { generateDate, parseDateValue } from '../services/generate-default-data';
 function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
     const htmlDivElementRef = React.useRef(null);
@@ -13,7 +13,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
         const opts = {
             altInput: true,
             dateFormat: 'Y-m-d',
-            altFormat: localisationService.flatpickrDateFormat,
+            altFormat: localisationService.getDateFnsFormats().shortDate,
             allowInput: true,
             altInputClass: 'input ob-input cypress-date-control',
             minDate: parseDateValue({

package/dist/form-elements/FormElementDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,qCAAqC,CAAA;AACvE,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,YAAY,MAAM,4BAA4B,CAAA;AAErD,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAYhF,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAEpD,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,OAAO;YACnB,SAAS,EAAE,mBAAmB,CAAC,mBAAmB;YAClD,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,qCAAqC;YACpD,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,OAAO,CAAC,kBAAkB;gBACtC,KAAK,EAAE,OAAO,CAAC,QAAQ;aACxB,CAAC;YACF,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,OAAO,CAAC,gBAAgB;gBACpC,KAAK,EAAE,OAAO,CAAC,MAAM;aACtB,CAAC;YACF,WAAW,EAAE,SAAS;YACtB,mBAAmB,EAAE,IAAI;YACzB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE;QACD,OAAO,CAAC,QAAQ;QAChB,OAAO,CAAC,kBAAkB;QAC1B,OAAO,CAAC,MAAM;QACd,OAAO,CAAC,gBAAgB;QACxB,UAAU;KACX,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,EACzC,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,YAAY,CACV;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,IAAI;KACf,EACD,gBAAgB,EAChB,iBAAiB,CAClB,CAAA;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,IAAI,GAAG,YAAY,CAAC;gBACxB,UAAU,EAAE,SAAS;gBACrB,KAAK;gBACL,QAAQ,EAAE,IAAI;aACf,CAAC,CAAA;YACF,IAAI,IAAI,EAAE;gBACR,OAAO,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;aAC5C;SACF;QACD,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB,EAAC,GAAG,EAAE,iBAAiB;QAC1D,oBAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,SAAS,EAAC,gBAAgB,GAC1B;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,wDAAwD,EAClE,aAAa,QACb,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,GACpC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-d',\n      altFormat: localisationService.flatpickrDateFormat,\n      allowInput: true,\n      altInputClass: 'input ob-input cypress-date-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\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=\"date\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">event</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}
+{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-d',\n      altFormat: localisationService.getDateFnsFormats().shortDate,\n      allowInput: true,\n      altInputClass: 'input ob-input cypress-date-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\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=\"date\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">event</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}

package/dist/form-elements/FormElementDateTime.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
-import CopyToClipboardButton from '../components/CopyToClipboardButton';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import useFlatpickr from '../hooks/useFlatpickr';
 import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/LookupButton';
-import FormElementLabelContainer from '../components/FormElementLabelContainer';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { parseDateValue } from '../services/generate-default-data';
 function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
     const htmlDivElementRef = React.useRef(null);
@@ -13,7 +13,7 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
         const opts = {
             altInput: true,
             dateFormat: 'Y-m-dTH:i:S',
-            altFormat: localisationService.flatpickrDatetimeFormat,
+            altFormat: localisationService.getFlatpickrFormats().shortDateTime,
             allowInput: false,
             altInputClass: 'input ob-input cypress-date-time-control',
             minDate: parseDateValue({

package/dist/form-elements/FormElementDateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateTimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDateTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-dTH:i:S',\n      altFormat: localisationService.flatpickrDatetimeFormat,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-date-time-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      enableTime: true,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatDatetime(new Date(value))\n  }, [value])\n\n  return (\n    <div className=\"cypress-datetime-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\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=\"datetime-local\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">date_range</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}
+{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateTimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDateTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-dTH:i:S',\n      altFormat: localisationService.getFlatpickrFormats().shortDateTime,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-date-time-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      enableTime: true,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatDatetime(new Date(value))\n  }, [value])\n\n  return (\n    <div className=\"cypress-datetime-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\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=\"datetime-local\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">date_range</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}

package/dist/form-elements/FormElementEmail.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import CopyToClipboardButton from '../components/CopyToClipboardButton';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/LookupButton';
-import FormElementLabelContainer from '../components/FormElementLabelContainer';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
     const [isDirty, setIsDirty] = useBooleanState(false);
     const text = typeof value === 'string' ? value : '';

package/dist/form-elements/FormElementEmail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementEmail.js","sourceRoot":"","sources":["../../src/form-elements/FormElementEmail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,qCAAqC,CAAA;AACvE,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,YAAY,MAAM,4BAA4B,CAAA;AAErD,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAY/E,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAEpD,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,wDAAwD,EAClE,aAAa,QACb,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,GACpC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/FormElementLabelContainer'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.EmailElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementEmail({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-email-element\">\n      <FormElementLabelContainer\n        className=\"ob-email\"\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=\"email\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-email-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">email</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementEmail)\n"]}
+{"version":3,"file":"FormElementEmail.js","sourceRoot":"","sources":["../../src/form-elements/FormElementEmail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAEpD,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,wDAAwD,EAClE,aAAa,QACb,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,GACpC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.EmailElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementEmail({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-email-element\">\n      <FormElementLabelContainer\n        className=\"ob-email\"\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=\"email\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-email-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">email</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementEmail)\n"]}

package/dist/form-elements/FormElementFiles/FormElementFile.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import downloadAttachment from '../../services/download-file';
 import useAttachment from '../../hooks/attachments/useAttachment';
-import FileCard from '../../components/attachments/FileCard';
+import FileCard from '../../components/renderer/attachments/FileCard';
 const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, }) => {
     const attachmentResult = useAttachment(file, element, onChange, disableUpload);
     const handleRemove = React.useCallback(() => {

package/dist/form-elements/FormElementFiles/FormElementFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../../src/form-elements/FormElementFiles/FormElementFile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,8BAA8B,CAAA;AAE7D,OAAO,aAA2B,MAAM,uCAAuC,CAAA;AAC/E,OAAO,QAAQ,MAAM,uCAAuC,CAAA;AAW5D,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,aAAa,GACP,EAAE,EAAE;IACV,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAA;IAE9E,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;SACzB;QACD,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YACtC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE;oBACjB,IAAI,EAAE,KAAK;oBACX,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAA;YACJ,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,CAAC,WAAW,EACzC,cAAc,EAAE,aAAa,EAC7B,kBAAkB,EAAE,gBAAgB,CAAC,kBAAkB,EACvD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACrE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GACpB,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../../hooks/attachments/useAttachment'\nimport FileCard from '../../components/attachments/FileCard'\nimport { Attachment } from '../../types/attachments'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  onRemove: (id: string) => void\n  file: Attachment\n  disableUpload: boolean\n  onChange: OnChange\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n}: Props) => {\n  const attachmentResult = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useCallback(() => {\n    if (!file.type) {\n      return onRemove(file.id)\n    }\n    return onRemove(file._id)\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <FileCard\n      element={element}\n      isUploading={attachmentResult.isUploading}\n      isUploadPaused={disableUpload}\n      uploadErrorMessage={attachmentResult.uploadErrorMessage}\n      loadImageUrlError={attachmentResult.loadImageUrlError}\n      isLoadingImageUrl={attachmentResult.isLoadingImageUrl}\n      imageUrl={attachmentResult.imageUrl}\n      fileName={file.fileName}\n      onDownload={attachmentResult.canDownload ? handleDownload : undefined}\n      onRemove={handleRemove}\n      onRetry={handleRetry}\n    />\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}
+{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../../src/form-elements/FormElementFiles/FormElementFile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,8BAA8B,CAAA;AAE7D,OAAO,aAA2B,MAAM,uCAAuC,CAAA;AAC/E,OAAO,QAAQ,MAAM,gDAAgD,CAAA;AAWrE,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,aAAa,GACP,EAAE,EAAE;IACV,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAA;IAE9E,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;SACzB;QACD,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YACtC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE;oBACjB,IAAI,EAAE,KAAK;oBACX,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAA;YACJ,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,CAAC,WAAW,EACzC,cAAc,EAAE,aAAa,EAC7B,kBAAkB,EAAE,gBAAgB,CAAC,kBAAkB,EACvD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,iBAAiB,EAAE,gBAAgB,CAAC,iBAAiB,EACrD,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACrE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GACpB,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../../hooks/attachments/useAttachment'\nimport FileCard from '../../components/renderer/attachments/FileCard'\nimport { Attachment } from '../../types/attachments'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  onRemove: (id: string) => void\n  file: Attachment\n  disableUpload: boolean\n  onChange: OnChange\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n}: Props) => {\n  const attachmentResult = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useCallback(() => {\n    if (!file.type) {\n      return onRemove(file.id)\n    }\n    return onRemove(file._id)\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <FileCard\n      element={element}\n      isUploading={attachmentResult.isUploading}\n      isUploadPaused={disableUpload}\n      uploadErrorMessage={attachmentResult.uploadErrorMessage}\n      loadImageUrlError={attachmentResult.loadImageUrlError}\n      isLoadingImageUrl={attachmentResult.isLoadingImageUrl}\n      imageUrl={attachmentResult.imageUrl}\n      fileName={file.fileName}\n      onDownload={attachmentResult.canDownload ? handleDownload : undefined}\n      onRemove={handleRemove}\n      onRetry={handleRetry}\n    />\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}

package/dist/form-elements/FormElementFiles/FormElementFiles.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Files from '../../components/attachments/Files';
+import Files from '../../components/renderer/attachments/Files';
 import FormElementFile from './FormElementFile';
 import useAttachments from '../../hooks/attachments/useAttachments';
 import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../../services/form-validation';

package/dist/form-elements/FormElementFiles/FormElementFiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../../src/form-elements/FormElementFiles/FormElementFiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,MAAM,oCAAoC,CAAA;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,wCAAwC,CAAA;AACnE,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,gCAAgC,CAAA;AAYvC,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GACnE,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;IAEnC,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE,CAAA;IAE/B,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC9C,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;QACpB,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,aAAa,EACX,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,WAAW,CAAC,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;gBACjE,CAAC,oBAAoB,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC;gBACnD,CAAC,6BAA6B,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,GAE9D,CACH,CAAA;IACH,CAAC,EACD,CAAC,WAAW,CAAC,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAClE,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,wBAAwB,EAClD,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,cAAc,EAC1B,kBAAkB,EAAE,sBAAsB,GAC1C,CACH,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport Files from '../../components/attachments/Files'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../../hooks/attachments/useAttachments'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../../services/form-validation'\nimport { Attachment } from '../../types/attachments'\nimport { FormElementValueChangeHandler } from '../../types/form'\ntype Props = {\n  id: string\n  element: FormTypes.FilesElement\n  value?: Attachment[]\n  onChange: FormElementValueChangeHandler<Attachment[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const { isDirty, addAttachments, removeAttachment, changeAttachment } =\n    useAttachments(element, onChange)\n\n  const attachments = value || []\n\n  const handleRenderAttachment = React.useCallback(\n    (attachment, index) => {\n      return (\n        <FormElementFile\n          key={index}\n          element={element}\n          onRemove={removeAttachment}\n          file={attachment}\n          onChange={changeAttachment}\n          disableUpload={\n            (!!element.maxEntries && attachments.length > element.maxEntries) ||\n            !checkFileNameIsValid(element, attachment.fileName) ||\n            !checkFileNameExtensionIsValid(element, attachment.fileName)\n          }\n        />\n      )\n    },\n    [attachments.length, changeAttachment, element, removeAttachment],\n  )\n\n  return (\n    <Files\n      id={id}\n      isDirty={isDirty}\n      element={element}\n      attachments={attachments}\n      displayValidationMessage={displayValidationMessage}\n      validationMessage={validationMessage}\n      onAddFiles={addAttachments}\n      onRenderAttachment={handleRenderAttachment}\n    />\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
+{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../../src/form-elements/FormElementFiles/FormElementFiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,MAAM,6CAA6C,CAAA;AAC/D,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,wCAAwC,CAAA;AACnE,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,gCAAgC,CAAA;AAYvC,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GACnE,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;IAEnC,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE,CAAA;IAE/B,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC9C,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;QACpB,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,aAAa,EACX,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,WAAW,CAAC,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;gBACjE,CAAC,oBAAoB,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC;gBACnD,CAAC,6BAA6B,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,GAE9D,CACH,CAAA;IACH,CAAC,EACD,CAAC,WAAW,CAAC,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAClE,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,wBAAwB,EAClD,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,cAAc,EAC1B,kBAAkB,EAAE,sBAAsB,GAC1C,CACH,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport Files from '../../components/renderer/attachments/Files'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../../hooks/attachments/useAttachments'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../../services/form-validation'\nimport { Attachment } from '../../types/attachments'\nimport { FormElementValueChangeHandler } from '../../types/form'\ntype Props = {\n  id: string\n  element: FormTypes.FilesElement\n  value?: Attachment[]\n  onChange: FormElementValueChangeHandler<Attachment[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const { isDirty, addAttachments, removeAttachment, changeAttachment } =\n    useAttachments(element, onChange)\n\n  const attachments = value || []\n\n  const handleRenderAttachment = React.useCallback(\n    (attachment, index) => {\n      return (\n        <FormElementFile\n          key={index}\n          element={element}\n          onRemove={removeAttachment}\n          file={attachment}\n          onChange={changeAttachment}\n          disableUpload={\n            (!!element.maxEntries && attachments.length > element.maxEntries) ||\n            !checkFileNameIsValid(element, attachment.fileName) ||\n            !checkFileNameExtensionIsValid(element, attachment.fileName)\n          }\n        />\n      )\n    },\n    [attachments.length, changeAttachment, element, removeAttachment],\n  )\n\n  return (\n    <Files\n      id={id}\n      isDirty={isDirty}\n      element={element}\n      attachments={attachments}\n      displayValidationMessage={displayValidationMessage}\n      validationMessage={validationMessage}\n      onAddFiles={addAttachments}\n      onRenderAttachment={handleRenderAttachment}\n    />\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}

package/dist/form-elements/FormElementFiles/legacy/FormElementFiles.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import useBooleanState from '../../../hooks/useBooleanState';
 import useIsMounted from '../../../hooks/useIsMounted';
-import FileCard from '../../../components/attachments/FileCard';
+import FileCard from '../../../components/renderer/attachments/FileCard';
 import { downloadFileLegacy } from '../../../services/download-file';
-import Files from '../../../components/attachments/Files';
+import Files from '../../../components/renderer/attachments/Files';
 import { checkIfContentTypeIsImage, parseFilesAsAttachmentsLegacy, } from '../../../services/attachments';
 const FormElementFile = ({ element, onRemove, file, index }) => {
     const isImageType = React.useMemo(() => {

package/dist/form-elements/FormElementFiles/legacy/FormElementFiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../../../src/form-elements/FormElementFiles/legacy/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport useIsMounted from '../../../hooks/useIsMounted'\nimport FileCard from '../../../components/attachments/FileCard'\nimport { downloadFileLegacy } from '../../../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport Files from '../../../components/attachments/Files'\nimport {\n  checkIfContentTypeIsImage,\n  parseFilesAsAttachmentsLegacy,\n} from '../../../services/attachments'\nimport { FormElementValueChangeHandler } from '../../../types/form'\n\nexport type FilesElementFile = {\n  data: string\n  fileName: string\n}\n\ntype Props = {\n  id: string\n  element: FormTypes.FilesElement\n  value: FilesElementFile[] | undefined\n  onChange: FormElementValueChangeHandler<FilesElementFile[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\ntype ChildProps = {\n  element: FormTypes.FilesElement\n  onRemove: (index: number) => unknown\n  file: FilesElementFile\n  index: number\n}\n\nconst FormElementFile = ({ element, onRemove, file, index }: ChildProps) => {\n  const isImageType = React.useMemo(() => {\n    const matches = file.data.match(/data:(\\w*\\/\\w*);base64/)\n    if (!matches) {\n      return false\n    }\n    return checkIfContentTypeIsImage(matches[1])\n  }, [file.data])\n  const handleRemove = React.useCallback(\n    () => onRemove(index),\n    [index, onRemove],\n  )\n  const handleDownload = React.useCallback(async () => {\n    await downloadFileLegacy(file.data, file.fileName)\n  }, [file])\n\n  return (\n    <FileCard\n      element={element}\n      imageUrl={isImageType ? file.data : null}\n      fileName={file.fileName}\n      onDownload={handleDownload}\n      onRemove={handleRemove}\n    />\n  )\n}\n\nconst MemorisedFile = React.memo(FormElementFile)\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const isMounted = useIsMounted()\n\n  const addFile = React.useCallback(\n    async (newFiles) => {\n      const attachments = await parseFilesAsAttachmentsLegacy(newFiles)\n      if (!attachments.length) {\n        return\n      }\n\n      onChange(element, (existingAttachments) => {\n        if (!existingAttachments) {\n          return attachments\n        }\n        return [...existingAttachments, ...attachments]\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const handleRemove = React.useCallback(\n    (index: number) => {\n      onChange(element, (existingValue) => {\n        if (!existingValue) {\n          return\n        }\n        const newValue = existingValue.filter((file, i) => i !== index)\n        if (newValue.length) {\n          return newValue\n        }\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const handleRenderAttachment = React.useCallback(\n    (attachment, index) => {\n      return (\n        <MemorisedFile\n          key={index}\n          element={element}\n          onRemove={handleRemove}\n          file={attachment}\n          index={index}\n        />\n      )\n    },\n    [element, handleRemove],\n  )\n\n  return (\n    <Files\n      id={id}\n      element={element}\n      isDirty={isDirty}\n      attachments={value || []}\n      displayValidationMessage={displayValidationMessage}\n      validationMessage={validationMessage}\n      onAddFiles={addFile}\n      onRenderAttachment={handleRenderAttachment}\n    />\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
+{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../../../src/form-elements/FormElementFiles/legacy/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport useIsMounted from '../../../hooks/useIsMounted'\nimport FileCard from '../../../components/renderer/attachments/FileCard'\nimport { downloadFileLegacy } from '../../../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport Files from '../../../components/renderer/attachments/Files'\nimport {\n  checkIfContentTypeIsImage,\n  parseFilesAsAttachmentsLegacy,\n} from '../../../services/attachments'\nimport { FormElementValueChangeHandler } from '../../../types/form'\n\nexport type FilesElementFile = {\n  data: string\n  fileName: string\n}\n\ntype Props = {\n  id: string\n  element: FormTypes.FilesElement\n  value: FilesElementFile[] | undefined\n  onChange: FormElementValueChangeHandler<FilesElementFile[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\ntype ChildProps = {\n  element: FormTypes.FilesElement\n  onRemove: (index: number) => unknown\n  file: FilesElementFile\n  index: number\n}\n\nconst FormElementFile = ({ element, onRemove, file, index }: ChildProps) => {\n  const isImageType = React.useMemo(() => {\n    const matches = file.data.match(/data:(\\w*\\/\\w*);base64/)\n    if (!matches) {\n      return false\n    }\n    return checkIfContentTypeIsImage(matches[1])\n  }, [file.data])\n  const handleRemove = React.useCallback(\n    () => onRemove(index),\n    [index, onRemove],\n  )\n  const handleDownload = React.useCallback(async () => {\n    await downloadFileLegacy(file.data, file.fileName)\n  }, [file])\n\n  return (\n    <FileCard\n      element={element}\n      imageUrl={isImageType ? file.data : null}\n      fileName={file.fileName}\n      onDownload={handleDownload}\n      onRemove={handleRemove}\n    />\n  )\n}\n\nconst MemorisedFile = React.memo(FormElementFile)\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const isMounted = useIsMounted()\n\n  const addFile = React.useCallback(\n    async (newFiles) => {\n      const attachments = await parseFilesAsAttachmentsLegacy(newFiles)\n      if (!attachments.length) {\n        return\n      }\n\n      onChange(element, (existingAttachments) => {\n        if (!existingAttachments) {\n          return attachments\n        }\n        return [...existingAttachments, ...attachments]\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const handleRemove = React.useCallback(\n    (index: number) => {\n      onChange(element, (existingValue) => {\n        if (!existingValue) {\n          return\n        }\n        const newValue = existingValue.filter((file, i) => i !== index)\n        if (newValue.length) {\n          return newValue\n        }\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const handleRenderAttachment = React.useCallback(\n    (attachment, index) => {\n      return (\n        <MemorisedFile\n          key={index}\n          element={element}\n          onRemove={handleRemove}\n          file={attachment}\n          index={index}\n        />\n      )\n    },\n    [element, handleRemove],\n  )\n\n  return (\n    <Files\n      id={id}\n      element={element}\n      isDirty={isDirty}\n      attachments={value || []}\n      displayValidationMessage={displayValidationMessage}\n      validationMessage={validationMessage}\n      onAddFiles={addFile}\n      onRenderAttachment={handleRenderAttachment}\n    />\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}

package/dist/form-elements/FormElementForm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import OneBlinkFormElements from '../components/OneBlinkFormElements';
+import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
 function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, }) {
     const handleNestedChange = React.useCallback((nestedElement, nestedElementValue) => {
         if (nestedElement.type === 'page')

package/dist/form-elements/FormElementForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,oBAAoB,MAAM,oCAAoC,CAAA;AAqBrE,SAAS,eAAe,CAAC,EACvB,MAAM,EACN,OAAO,EACP,KAAK,EACL,EAAE,EACF,qBAAqB,EACrB,yBAAyB,EACzB,6BAA6B,EAC7B,QAAQ,EACR,QAAQ,GACF;IACN,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,aAAa,EAAE,kBAAkB,EAAE,EAAE;QACpC,IAAI,aAAa,CAAC,IAAI,KAAK,MAAM;YAAE,OAAM;QACzC,QAAQ,CAAC,OAAO,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACpC,GAAG,aAAa;YAChB,CAAC,aAAa,CAAC,IAAI,CAAC,EAClB,OAAO,kBAAkB,KAAK,UAAU;gBACtC,CAAC,CAAC,kBAAkB,CAChB,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAC9D;gBACH,CAAC,CAAC,kBAAkB;SACzB,CAAC,CAAC,CAAA;IACL,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,QAAQ,CAAC,CAAC,qBAAqB,EAAE,EAAE;YACjC,IAAI,KAAK,GAAG,qBAAqB,CAAC,UAAU,CAC1C,OAAO,CAAC,IAAI,CACU,CAAA;YACxB,MAAM,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBAClE,IACE,WAAW,CAAC,IAAI,KAAK,MAAM;oBAC3B,WAAW,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI;oBACjC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,EACnC;oBACA,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC;wBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;wBAC9B,UAAU,EAAE,KAAK;qBAClB,CAAC,CAAA;oBACF,KAAK,GAAG,UAAU,CAAA;oBAClB,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ;qBACT,CAAA;iBACF;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;YAEF,MAAM,UAAU,GAAG;gBACjB,GAAG,qBAAqB,CAAC,UAAU;gBACnC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK;aACtB,CAAA;YAED,OAAO;gBACL,QAAQ;gBACR,UAAU;aACX,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,CAAC,CAAC,qBAAqB;YAC5B,OAAO,qBAAqB,KAAK,QAAQ;YACzC,qBAAqB,CAAC,IAAI,KAAK,cAAc;YAC7C,CAAC,CAAC,qBAAqB,CAAC,YAAY;YACpC,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAA;IAE3B,MAAM,8BAA8B,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxD,OAAO,6BAA6B;YAClC,6BAA6B,CAAC,IAAI,KAAK,cAAc;YACrD,CAAC,CAAC,6BAA6B,CAAC,YAAY;YAC5C,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAEnC,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;SAClE,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,sBAAsB,EAAE,UAAU,EAClC,yBAAyB,EAAE,yBAAyB,EACpD,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,YAAY,EACtB,8BAA8B,EAAE,8BAA8B,EAC9D,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,GAAG,EAAE,GAAG,GAClB,CACH,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/OneBlinkFormElements'\nimport {\n  FormElementConditionallyShown,\n  FormElementLookupHandler,\n  FormElementValidation,\n  FormElementValueChangeHandler,\n  FormSubmissionModel,\n} from '../types/form'\n\nexport type Props = {\n  formId: number\n  id: string\n  element: FormTypes.FormFormElement | FormTypes.InfoPageElement\n  value: FormSubmissionModel | undefined\n  onChange: FormElementValueChangeHandler<FormSubmissionModel>\n  onLookup: FormElementLookupHandler\n  formElementValidation: FormElementValidation | undefined\n  displayValidationMessages: boolean\n  formElementConditionallyShown: FormElementConditionallyShown | undefined\n}\n\nfunction FormElementForm({\n  formId,\n  element,\n  value,\n  id,\n  formElementValidation,\n  displayValidationMessages,\n  formElementConditionallyShown,\n  onChange,\n  onLookup,\n}: Props) {\n  const handleNestedChange = React.useCallback(\n    (nestedElement, nestedElementValue) => {\n      if (nestedElement.type === 'page') return\n      onChange(element, (existingValue) => ({\n        ...existingValue,\n        [nestedElement.name]:\n          typeof nestedElementValue === 'function'\n            ? nestedElementValue(\n                existingValue ? existingValue[nestedElement.name] : undefined,\n              )\n            : nestedElementValue,\n      }))\n    },\n    [element, onChange],\n  )\n\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      onLookup((currentFormSubmission) => {\n        let model = currentFormSubmission.submission[\n          element.name\n        ] as FormSubmissionModel\n        const elements = currentFormSubmission.elements.map((formElement) => {\n          if (\n            formElement.type === 'form' &&\n            formElement.name === element.name &&\n            Array.isArray(formElement.elements)\n          ) {\n            const { elements, submission } = mergeLookupResults({\n              elements: formElement.elements,\n              submission: model,\n            })\n            model = submission\n            return {\n              ...formElement,\n              elements,\n            }\n          }\n          return formElement\n        })\n\n        const submission = {\n          ...currentFormSubmission.submission,\n          [element.name]: model,\n        }\n\n        return {\n          elements,\n          submission,\n        }\n      })\n    },\n    [element.name, onLookup],\n  )\n\n  const validation = React.useMemo(() => {\n    return !!formElementValidation &&\n      typeof formElementValidation !== 'string' &&\n      formElementValidation.type === 'formElements'\n      ? formElementValidation.formElements\n      : undefined\n  }, [formElementValidation])\n\n  const formElementsConditionallyShown = React.useMemo(() => {\n    return formElementConditionallyShown &&\n      formElementConditionallyShown.type === 'formElements'\n      ? formElementConditionallyShown.formElements\n      : undefined\n  }, [formElementConditionallyShown])\n\n  const parentElement = React.useMemo(() => {\n    return {\n      elements: Array.isArray(element.elements) ? element.elements : [],\n    }\n  }, [element.elements])\n\n  return (\n    <OneBlinkFormElements\n      formId={formId}\n      formElementsValidation={validation}\n      displayValidationMessages={displayValidationMessages}\n      elements={parentElement.elements}\n      onChange={handleNestedChange}\n      onLookup={handleLookup}\n      formElementsConditionallyShown={formElementsConditionallyShown}\n      model={value || {}}\n      parentElement={parentElement}\n      idPrefix={`${id}_`}\n    />\n  )\n}\n\nexport default React.memo(FormElementForm)\n"]}
+{"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n  FormElementConditionallyShown,\n  FormElementLookupHandler,\n  FormElementValidation,\n  FormElementValueChangeHandler,\n  FormSubmissionModel,\n} from '../types/form'\n\nexport type Props = {\n  formId: number\n  id: string\n  element: FormTypes.FormFormElement | FormTypes.InfoPageElement\n  value: FormSubmissionModel | undefined\n  onChange: FormElementValueChangeHandler<FormSubmissionModel>\n  onLookup: FormElementLookupHandler\n  formElementValidation: FormElementValidation | undefined\n  displayValidationMessages: boolean\n  formElementConditionallyShown: FormElementConditionallyShown | undefined\n}\n\nfunction FormElementForm({\n  formId,\n  element,\n  value,\n  id,\n  formElementValidation,\n  displayValidationMessages,\n  formElementConditionallyShown,\n  onChange,\n  onLookup,\n}: Props) {\n  const handleNestedChange = React.useCallback(\n    (nestedElement, nestedElementValue) => {\n      if (nestedElement.type === 'page') return\n      onChange(element, (existingValue) => ({\n        ...existingValue,\n        [nestedElement.name]:\n          typeof nestedElementValue === 'function'\n            ? nestedElementValue(\n                existingValue ? existingValue[nestedElement.name] : undefined,\n              )\n            : nestedElementValue,\n      }))\n    },\n    [element, onChange],\n  )\n\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      onLookup((currentFormSubmission) => {\n        let model = currentFormSubmission.submission[\n          element.name\n        ] as FormSubmissionModel\n        const elements = currentFormSubmission.elements.map((formElement) => {\n          if (\n            formElement.type === 'form' &&\n            formElement.name === element.name &&\n            Array.isArray(formElement.elements)\n          ) {\n            const { elements, submission } = mergeLookupResults({\n              elements: formElement.elements,\n              submission: model,\n            })\n            model = submission\n            return {\n              ...formElement,\n              elements,\n            }\n          }\n          return formElement\n        })\n\n        const submission = {\n          ...currentFormSubmission.submission,\n          [element.name]: model,\n        }\n\n        return {\n          elements,\n          submission,\n        }\n      })\n    },\n    [element.name, onLookup],\n  )\n\n  const validation = React.useMemo(() => {\n    return !!formElementValidation &&\n      typeof formElementValidation !== 'string' &&\n      formElementValidation.type === 'formElements'\n      ? formElementValidation.formElements\n      : undefined\n  }, [formElementValidation])\n\n  const formElementsConditionallyShown = React.useMemo(() => {\n    return formElementConditionallyShown &&\n      formElementConditionallyShown.type === 'formElements'\n      ? formElementConditionallyShown.formElements\n      : undefined\n  }, [formElementConditionallyShown])\n\n  const parentElement = React.useMemo(() => {\n    return {\n      elements: Array.isArray(element.elements) ? element.elements : [],\n    }\n  }, [element.elements])\n\n  return (\n    <OneBlinkFormElements\n      formId={formId}\n      formElementsValidation={validation}\n      displayValidationMessages={displayValidationMessages}\n      elements={parentElement.elements}\n      onChange={handleNestedChange}\n      onLookup={handleLookup}\n      formElementsConditionallyShown={formElementsConditionallyShown}\n      model={value || {}}\n      parentElement={parentElement}\n      idPrefix={`${id}_`}\n    />\n  )\n}\n\nexport default React.memo(FormElementForm)\n"]}

package/dist/form-elements/FormElementGeoscapeAddress.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { formService } from '@oneblink/apps';
-import AutocompleteDropdown from '../components/AutocompleteDropdown';
-import FormElementLabelContainer from '../components/FormElementLabelContainer';
+import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useIsMounted from '../hooks/useIsMounted';
 function FormElementGeoscapeAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }) {
     const isMounted = useIsMounted();

package/dist/form-elements/FormElementGeoscapeAddress.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementGeoscapeAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementGeoscapeAddress.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '@oneblink/apps'\n\nimport AutocompleteDropdown from '../components/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/FormElementLabelContainer'\nimport { FormTypes, GeoscapeTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.GeoscapeAddressElement\n  value: GeoscapeTypes.GeoscapeAddress | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<GeoscapeTypes.GeoscapeAddress>\n}\n\nfunction FormElementGeoscapeAddress({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n}: Props) {\n  const isMounted = useIsMounted()\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n    React.useState(false)\n\n  const handleSearch = React.useCallback(\n    async (query, abortSignal) => {\n      setError(undefined)\n\n      const params: {\n        query: string\n        maxNumberOfResults?: number\n        stateTerritory?: string\n      } = {\n        query,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateTerritory = element.stateTerritoryFilter.join(',')\n      }\n\n      const result = await formService.searchGeoscapeAddresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return result.suggest.map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [element.stateTerritoryFilter, formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, undefined)\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getGeoscapeAddress(formId, addressId)\n        onChange(element, result)\n      } catch (newError) {\n        if (isMounted.current) {\n          setError(newError as Error)\n        }\n      }\n      if (isMounted.current) {\n        setIsLoadingAddressDetails(false)\n      }\n    },\n    [isMounted, onChange, element, formId],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = value.addressDetails?.formattedAddress || value.addressId\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-geoscape-address-element\">\n      <FormElementLabelContainer\n        className=\"ob-geoscape-address ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={element.readOnly || isLoadingAddressDetails}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          isLoading={isLoadingAddressDetails}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <div role=\"alert\" className=\"has-margin-top-8\">\n          <div className=\"has-text-danger ob-error__text cypress-geoscape-address-details-error-message\">\n            {error.toString()}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(FormElementGeoscapeAddress)\n"]}
+{"version":3,"file":"FormElementGeoscapeAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementGeoscapeAddress.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '@oneblink/apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, GeoscapeTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.GeoscapeAddressElement\n  value: GeoscapeTypes.GeoscapeAddress | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<GeoscapeTypes.GeoscapeAddress>\n}\n\nfunction FormElementGeoscapeAddress({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n}: Props) {\n  const isMounted = useIsMounted()\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n    React.useState(false)\n\n  const handleSearch = React.useCallback(\n    async (query, abortSignal) => {\n      setError(undefined)\n\n      const params: {\n        query: string\n        maxNumberOfResults?: number\n        stateTerritory?: string\n      } = {\n        query,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateTerritory = element.stateTerritoryFilter.join(',')\n      }\n\n      const result = await formService.searchGeoscapeAddresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return result.suggest.map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [element.stateTerritoryFilter, formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, undefined)\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getGeoscapeAddress(formId, addressId)\n        onChange(element, result)\n      } catch (newError) {\n        if (isMounted.current) {\n          setError(newError as Error)\n        }\n      }\n      if (isMounted.current) {\n        setIsLoadingAddressDetails(false)\n      }\n    },\n    [isMounted, onChange, element, formId],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = value.addressDetails?.formattedAddress || value.addressId\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-geoscape-address-element\">\n      <FormElementLabelContainer\n        className=\"ob-geoscape-address ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={element.readOnly || isLoadingAddressDetails}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          isLoading={isLoadingAddressDetails}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <div role=\"alert\" className=\"has-margin-top-8\">\n          <div className=\"has-text-danger ob-error__text cypress-geoscape-address-details-error-message\">\n            {error.toString()}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(FormElementGeoscapeAddress)\n"]}

package/dist/form-elements/FormElementLocation.js

@@ -4,10 +4,10 @@ import useIsOffline from '../hooks/useIsOffline';
 import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
 import geolocation from '@blinkmobile/geolocation';
 import queryString from 'query-string';
-import OnLoading from '../components/OnLoading';
+import OnLoading from '../components/renderer/OnLoading';
 import defaultCoords from '../services/defaultCoordinates';
 import useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey';
-import FormElementLabelContainer from '../components/FormElementLabelContainer';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { Sentry } from '@oneblink/apps';
 export const stringifyLocation = (location) => {
     if (location) {

package/dist/form-elements/FormElementLocation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'\nimport geolocation from '@blinkmobile/geolocation'\nimport queryString from 'query-string'\nimport OnLoading from '../components/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.LocationElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<Coords>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\ntype Coords = {\n  latitude: number\n  longitude: number\n  zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n  if (location) {\n    return `${location.latitude},${location.longitude}`\n  }\n}\n\nfunction parseLocationValue(value: unknown): Coords | undefined {\n  if (!value || typeof value !== 'object') {\n    return\n  }\n\n  const { latitude, longitude, zoom } = value as Record<string, unknown>\n  if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n    return\n  }\n\n  return {\n    latitude,\n    longitude,\n    zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n  }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\nfunction FormElementLocation({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n    useBooleanState(false)\n\n  const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n  const onClear = React.useCallback(() => {\n    hideLocationPicker()\n    onChange(element, undefined)\n    setLocation(undefined)\n  }, [element, hideLocationPicker, onChange])\n\n  const onCancel = React.useCallback(() => {\n    hideLocationPicker()\n    setLocation(parseLocationValue(value))\n  }, [hideLocationPicker, value])\n\n  const onLocate = React.useCallback(async () => {\n    showLocationPicker()\n\n    if (location) {\n      return\n    }\n\n    let currentLocation = null\n    try {\n      const result = await geolocation.getCurrentPosition()\n      currentLocation = result.coords\n    } catch (err) {\n      console.error(\n        'Error while attempting to find the users current location',\n        err,\n      )\n      Sentry.captureException(err)\n    } finally {\n      setLocation(parseLocationValue(currentLocation || defaultCoords()))\n    }\n  }, [location, showLocationPicker])\n\n  const isLoadingLocation = !location && isLocationPickerOpen\n\n  const onConfirm = React.useCallback(() => {\n    setIsDirty()\n    hideLocationPicker()\n    onChange(element, location)\n  }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n  // SET DEFAULT/PREFILL DATA\n  React.useEffect(() => {\n    const newValue = parseLocationValue(value)\n    if (newValue) {\n      setLocation(newValue)\n    }\n  }, [value])\n\n  return (\n    <div className=\"cypress-location-element\">\n      <FormElementLabelContainer\n        className=\"ob-location\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <LocationDisplay\n            isOpen={isLocationPickerOpen}\n            isLoading={isLoadingLocation}\n            location={location}\n            onChange={setLocation}\n          />\n\n          <div className=\"buttons ob-buttons ob-location__buttons\">\n            {isLocationPickerOpen ? (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n                  onClick={onCancel}\n                  disabled={element.readOnly}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button\"\n                  onClick={onConfirm}\n                  disabled={element.readOnly || !location}\n                >\n                  Confirm\n                </button>\n              </>\n            ) : (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n                  onClick={onClear}\n                  disabled={element.readOnly}\n                >\n                  Clear\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n                  onClick={onLocate}\n                  disabled={element.readOnly}\n                >\n                  Locate\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n  isLoading,\n  isOpen,\n  location,\n  onChange,\n}: {\n  isLoading: boolean\n  isOpen: boolean\n  location: Coords | undefined\n  onChange: (location: Coords) => void\n}) {\n  const isOffline = useIsOffline()\n\n  if (isLoading) {\n    return (\n      <figure className=\"ob-figure\">\n        <div className=\"figure-content\">\n          <OnLoading small></OnLoading>\n        </div>\n      </figure>\n    )\n  }\n\n  if (isOffline) {\n    return <LocationIsOffline location={location} isOpen={isOpen} />\n  }\n\n  if (isOpen) {\n    if (!location) {\n      // There is no location to display while user is attempting to pick a location.\n      // This should never happen, if loading has finished a default should be set.\n      // Fail fast!!!\n      // https://en.wikipedia.org/wiki/Fail-fast\n      throw new Error(\n        'Default location was not set for \"location\" form element',\n      )\n    }\n\n    return <LocationPicker location={location} onChange={onChange} />\n  }\n\n  if (location) {\n    return <LocationImage location={location} />\n  }\n\n  return null\n})\n\nfunction LocationIsOfflineFigureContent({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <figure className=\"ob-figure\">\n      <div className=\"figure-content has-text-centered\">\n        <h4 className=\"title is-4\">You are currently offline</h4>\n        {children}\n      </div>\n    </figure>\n  )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n  location,\n  isOpen,\n}: {\n  location: Coords | undefined\n  isOpen: boolean\n}) {\n  if (isOpen) {\n    if (location) {\n      // If user is offline and attempting to pick a location and there is one set already\n      return (\n        <LocationIsOfflineFigureContent>\n          <p>\n            Click the <b>Confirm</b> button below to set the location to your\n            current position.\n          </p>\n        </LocationIsOfflineFigureContent>\n      )\n    }\n\n    // If user is offline and attempting to pick a location and there is one nothing set yet\n    return (\n      <LocationIsOfflineFigureContent>\n        <p>\n          We could not find your current location. Click the <b>Cancel</b>{' '}\n          button below to try again.\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // If user is offline and has confirmed a location\n  if (location) {\n    return (\n      <LocationIsOfflineFigureContent>\n        <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n        <p>\n          <b>{location.latitude}</b>\n        </p>\n        <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n        <p>\n          <b>{location.longitude}</b>\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // User is offline with no location set and not attempting to pick a location\n  return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n  location,\n}: {\n  location: Coords\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const staticUrl = React.useMemo(() => {\n    const center = `${location.latitude},${location.longitude}`\n    const queries = {\n      key: googleMapsApiKey,\n      size: `${mapHeight}x${mapHeight}`,\n      zoom: location.zoom,\n      center,\n      markers: `color:red|${center}`,\n    }\n    return `${apiUrl}?${queryString.stringify(queries)}`\n  }, [googleMapsApiKey, location])\n\n  return (\n    <figure className=\"ob-figure\">\n      <img\n        className=\"ob-location__map\"\n        alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n        src={staticUrl}\n        height={mapHeight}\n        width={mapHeight}\n      />\n    </figure>\n  )\n})\n\nconst LocationPicker = React.memo(function SummaryResult({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const [map, setMap] = React.useState<google.maps.Map | null>(null)\n\n  const center = React.useMemo(() => {\n    return {\n      lat: location.latitude,\n      lng: location.longitude,\n    }\n  }, [location.latitude, location.longitude])\n\n  const onZoomChanged = React.useCallback(() => {\n    if (!map) {\n      return\n    }\n\n    onChange({\n      latitude: location.latitude,\n      longitude: location.longitude,\n      zoom: map.getZoom(),\n    })\n  }, [location.latitude, location.longitude, map, onChange])\n\n  return (\n    <figure className=\"ob-figure\">\n      <LoadScript googleMapsApiKey={googleMapsApiKey || ''}>\n        <GoogleMap\n          onLoad={(map) => setMap(map)}\n          onUnmount={() => setMap(null)}\n          mapContainerStyle={{\n            height: 300,\n          }}\n          center={center}\n          zoom={location.zoom}\n          onZoomChanged={onZoomChanged}\n        >\n          <Marker\n            animation={2} // DOCUMENTATION IS POOR, THIS IS DROP ANIMATION\n            position={center}\n            draggable\n            onDragEnd={(e) => {\n              if (!e.latLng) {\n                return\n              }\n              const { lat, lng } = e.latLng.toJSON()\n              onChange({\n                latitude: lat,\n                longitude: lng,\n                zoom: location.zoom,\n              })\n            }}\n          ></Marker>\n        </GoogleMap>\n      </LoadScript>\n    </figure>\n  )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
+{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'\nimport geolocation from '@blinkmobile/geolocation'\nimport queryString from 'query-string'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.LocationElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<Coords>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\ntype Coords = {\n  latitude: number\n  longitude: number\n  zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n  if (location) {\n    return `${location.latitude},${location.longitude}`\n  }\n}\n\nfunction parseLocationValue(value: unknown): Coords | undefined {\n  if (!value || typeof value !== 'object') {\n    return\n  }\n\n  const { latitude, longitude, zoom } = value as Record<string, unknown>\n  if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n    return\n  }\n\n  return {\n    latitude,\n    longitude,\n    zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n  }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\nfunction FormElementLocation({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n    useBooleanState(false)\n\n  const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n  const onClear = React.useCallback(() => {\n    hideLocationPicker()\n    onChange(element, undefined)\n    setLocation(undefined)\n  }, [element, hideLocationPicker, onChange])\n\n  const onCancel = React.useCallback(() => {\n    hideLocationPicker()\n    setLocation(parseLocationValue(value))\n  }, [hideLocationPicker, value])\n\n  const onLocate = React.useCallback(async () => {\n    showLocationPicker()\n\n    if (location) {\n      return\n    }\n\n    let currentLocation = null\n    try {\n      const result = await geolocation.getCurrentPosition()\n      currentLocation = result.coords\n    } catch (err) {\n      console.error(\n        'Error while attempting to find the users current location',\n        err,\n      )\n      Sentry.captureException(err)\n    } finally {\n      setLocation(parseLocationValue(currentLocation || defaultCoords()))\n    }\n  }, [location, showLocationPicker])\n\n  const isLoadingLocation = !location && isLocationPickerOpen\n\n  const onConfirm = React.useCallback(() => {\n    setIsDirty()\n    hideLocationPicker()\n    onChange(element, location)\n  }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n  // SET DEFAULT/PREFILL DATA\n  React.useEffect(() => {\n    const newValue = parseLocationValue(value)\n    if (newValue) {\n      setLocation(newValue)\n    }\n  }, [value])\n\n  return (\n    <div className=\"cypress-location-element\">\n      <FormElementLabelContainer\n        className=\"ob-location\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <LocationDisplay\n            isOpen={isLocationPickerOpen}\n            isLoading={isLoadingLocation}\n            location={location}\n            onChange={setLocation}\n          />\n\n          <div className=\"buttons ob-buttons ob-location__buttons\">\n            {isLocationPickerOpen ? (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n                  onClick={onCancel}\n                  disabled={element.readOnly}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button\"\n                  onClick={onConfirm}\n                  disabled={element.readOnly || !location}\n                >\n                  Confirm\n                </button>\n              </>\n            ) : (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n                  onClick={onClear}\n                  disabled={element.readOnly}\n                >\n                  Clear\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n                  onClick={onLocate}\n                  disabled={element.readOnly}\n                >\n                  Locate\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n  isLoading,\n  isOpen,\n  location,\n  onChange,\n}: {\n  isLoading: boolean\n  isOpen: boolean\n  location: Coords | undefined\n  onChange: (location: Coords) => void\n}) {\n  const isOffline = useIsOffline()\n\n  if (isLoading) {\n    return (\n      <figure className=\"ob-figure\">\n        <div className=\"figure-content\">\n          <OnLoading small></OnLoading>\n        </div>\n      </figure>\n    )\n  }\n\n  if (isOffline) {\n    return <LocationIsOffline location={location} isOpen={isOpen} />\n  }\n\n  if (isOpen) {\n    if (!location) {\n      // There is no location to display while user is attempting to pick a location.\n      // This should never happen, if loading has finished a default should be set.\n      // Fail fast!!!\n      // https://en.wikipedia.org/wiki/Fail-fast\n      throw new Error(\n        'Default location was not set for \"location\" form element',\n      )\n    }\n\n    return <LocationPicker location={location} onChange={onChange} />\n  }\n\n  if (location) {\n    return <LocationImage location={location} />\n  }\n\n  return null\n})\n\nfunction LocationIsOfflineFigureContent({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <figure className=\"ob-figure\">\n      <div className=\"figure-content has-text-centered\">\n        <h4 className=\"title is-4\">You are currently offline</h4>\n        {children}\n      </div>\n    </figure>\n  )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n  location,\n  isOpen,\n}: {\n  location: Coords | undefined\n  isOpen: boolean\n}) {\n  if (isOpen) {\n    if (location) {\n      // If user is offline and attempting to pick a location and there is one set already\n      return (\n        <LocationIsOfflineFigureContent>\n          <p>\n            Click the <b>Confirm</b> button below to set the location to your\n            current position.\n          </p>\n        </LocationIsOfflineFigureContent>\n      )\n    }\n\n    // If user is offline and attempting to pick a location and there is one nothing set yet\n    return (\n      <LocationIsOfflineFigureContent>\n        <p>\n          We could not find your current location. Click the <b>Cancel</b>{' '}\n          button below to try again.\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // If user is offline and has confirmed a location\n  if (location) {\n    return (\n      <LocationIsOfflineFigureContent>\n        <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n        <p>\n          <b>{location.latitude}</b>\n        </p>\n        <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n        <p>\n          <b>{location.longitude}</b>\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // User is offline with no location set and not attempting to pick a location\n  return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n  location,\n}: {\n  location: Coords\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const staticUrl = React.useMemo(() => {\n    const center = `${location.latitude},${location.longitude}`\n    const queries = {\n      key: googleMapsApiKey,\n      size: `${mapHeight}x${mapHeight}`,\n      zoom: location.zoom,\n      center,\n      markers: `color:red|${center}`,\n    }\n    return `${apiUrl}?${queryString.stringify(queries)}`\n  }, [googleMapsApiKey, location])\n\n  return (\n    <figure className=\"ob-figure\">\n      <img\n        className=\"ob-location__map\"\n        alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n        src={staticUrl}\n        height={mapHeight}\n        width={mapHeight}\n      />\n    </figure>\n  )\n})\n\nconst LocationPicker = React.memo(function SummaryResult({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const [map, setMap] = React.useState<google.maps.Map | null>(null)\n\n  const center = React.useMemo(() => {\n    return {\n      lat: location.latitude,\n      lng: location.longitude,\n    }\n  }, [location.latitude, location.longitude])\n\n  const onZoomChanged = React.useCallback(() => {\n    if (!map) {\n      return\n    }\n\n    onChange({\n      latitude: location.latitude,\n      longitude: location.longitude,\n      zoom: map.getZoom(),\n    })\n  }, [location.latitude, location.longitude, map, onChange])\n\n  return (\n    <figure className=\"ob-figure\">\n      <LoadScript googleMapsApiKey={googleMapsApiKey || ''}>\n        <GoogleMap\n          onLoad={(map) => setMap(map)}\n          onUnmount={() => setMap(null)}\n          mapContainerStyle={{\n            height: 300,\n          }}\n          center={center}\n          zoom={location.zoom}\n          onZoomChanged={onZoomChanged}\n        >\n          <Marker\n            animation={2} // DOCUMENTATION IS POOR, THIS IS DROP ANIMATION\n            position={center}\n            draggable\n            onDragEnd={(e) => {\n              if (!e.latLng) {\n                return\n              }\n              const { lat, lng } = e.latLng.toJSON()\n              onChange({\n                latitude: lat,\n                longitude: lng,\n                zoom: location.zoom,\n              })\n            }}\n          ></Marker>\n        </GoogleMap>\n      </LoadScript>\n    </figure>\n  )\n})\n\nexport default React.memo(FormElementLocation)\n"]}

package/dist/form-elements/FormElementNumber.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import CopyToClipboardButton from '../components/CopyToClipboardButton';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import _debounce from 'lodash.debounce';
 import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/LookupButton';
-import FormElementLabelContainer from '../components/FormElementLabelContainer';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useIsPageVisible from '../hooks/useIsPageVisible';
 function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
     const isPageVisible = useIsPageVisible();