@oneblink/apps-react 8.6.1 → 8.7.0-beta.2

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 { FormTypes } from '@oneblink/types'\nimport { Sentry } from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { GoogleMap, Marker } from '@react-google-maps/api'\nimport queryString from 'query-string'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport * as geolocation from '../services/geolocation'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogle from '../hooks/useGoogle'\nimport useGoogleMapsApiKey from '../hooks/useGoogleMapsApiKey'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport { useReverseGeocodeContext } from '../components/renderer/ReverseGeocode'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\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} & IsDirtyProps\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\nexport function 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'\n\nfunction FormElementLocation({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\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, {\n      value: undefined,\n    })\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, {\n      value: location,\n    })\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  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const { isReverseGeocoding, reverseGeocodingErrorMsg } =\n    useReverseGeocodeContext()\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 || isReverseGeocoding ? (\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 || isReverseGeocoding}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    'is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button',\n                    {\n                      'is-loading': isReverseGeocoding,\n                    },\n                  )}\n                  onClick={onConfirm}\n                  disabled={element.readOnly || !location || isReverseGeocoding}\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                  onBlur={setIsDirty}\n                  id={id}\n                  aria-describedby={ariaDescribedby}\n                >\n                  Locate\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {isDisplayingValidationMessage && (\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        {reverseGeocodingErrorMsg && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {reverseGeocodingErrorMsg}\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\" role=\"alert\">\n          You are currently offline\n        </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 = useGoogleMapsApiKey()\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 LocationPicker({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const { isLoaded } = useGoogle()\n\n  return (\n    <figure className=\"ob-figure\">\n      {isLoaded && (\n        <GoogleLocationPicker location={location} onChange={onChange} />\n      )}\n    </figure>\n  )\n})\n\nconst GoogleLocationPicker = React.memo(function GoogleLocationPicker({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const [map, setMap] = React.useState<google.maps.Map | null>(null)\n  const [marker, setMarker] = React.useState<google.maps.Marker | null>(null)\n\n  const originalCenter = React.useRef<{ lat: number; lng: number }>({\n    lat: location.latitude,\n    lng: location.longitude,\n  })\n\n  const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, [])\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  const handleDragEnd = React.useCallback(\n    (e: google.maps.MapMouseEvent) => {\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      if (map) {\n        map.panTo(e.latLng)\n      }\n    },\n    [location.zoom, map, onChange],\n  )\n\n  const handleClick = React.useCallback(\n    (e: google.maps.MapMouseEvent) => {\n      handleDragEnd(e)\n\n      if (!e.latLng || !marker) {\n        return\n      }\n\n      marker.setPosition(e.latLng)\n      // this enables the marker to animate after moving it\n      marker.setMap(null)\n      marker.setAnimation(markerAnimation)\n      marker.setMap(map)\n    },\n    [handleDragEnd, map, marker, markerAnimation],\n  )\n\n  return (\n    <GoogleMap\n      onLoad={(map) => setMap(map)}\n      onUnmount={() => setMap(null)}\n      mapContainerStyle={{\n        height: 300,\n      }}\n      center={originalCenter.current}\n      zoom={location.zoom}\n      onZoomChanged={onZoomChanged}\n      onClick={handleClick}\n      options={{ draggableCursor: 'pointer' }}\n    >\n      <Marker\n        onLoad={(marker) => setMarker(marker)}\n        onUnmount={() => setMarker(null)}\n        animation={markerAnimation}\n        position={originalCenter.current}\n        draggable\n        onDragEnd={handleDragEnd}\n      ></Marker>\n    </GoogleMap>\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 { FormTypes } from '@oneblink/types'\nimport { Sentry } from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { GoogleMap, Marker } from '@react-google-maps/api'\nimport queryString from 'query-string'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport * as geolocation from '../services/geolocation'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogle from '../hooks/useGoogle'\nimport useGoogleMapsApiKey from '../hooks/useGoogleMapsApiKey'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport { useReverseGeocodeContext } from '../components/renderer/ReverseGeocode'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\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} & IsDirtyProps\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\nexport function 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'\n\nfunction FormElementLocation({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\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, {\n      value: undefined,\n    })\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, {\n      value: location,\n    })\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  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const { isReverseGeocoding, reverseGeocodingErrorMsg } =\n    useReverseGeocodeContext()\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 || isReverseGeocoding ? (\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 || isReverseGeocoding}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    'is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button',\n                    {\n                      'is-loading': isReverseGeocoding,\n                    },\n                  )}\n                  onClick={onConfirm}\n                  disabled={element.readOnly || !location || isReverseGeocoding}\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                  onBlur={setIsDirty}\n                  id={id}\n                  aria-describedby={ariaDescribedby}\n                >\n                  Locate\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n        {reverseGeocodingErrorMsg && (\n          <FormElementValidationMessage message={reverseGeocodingErrorMsg} />\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\" role=\"alert\">\n          You are currently offline\n        </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 = useGoogleMapsApiKey()\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 LocationPicker({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const { isLoaded } = useGoogle()\n\n  return (\n    <figure className=\"ob-figure\">\n      {isLoaded && (\n        <GoogleLocationPicker location={location} onChange={onChange} />\n      )}\n    </figure>\n  )\n})\n\nconst GoogleLocationPicker = React.memo(function GoogleLocationPicker({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const [map, setMap] = React.useState<google.maps.Map | null>(null)\n  const [marker, setMarker] = React.useState<google.maps.Marker | null>(null)\n\n  const originalCenter = React.useRef<{ lat: number; lng: number }>({\n    lat: location.latitude,\n    lng: location.longitude,\n  })\n\n  const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, [])\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  const handleDragEnd = React.useCallback(\n    (e: google.maps.MapMouseEvent) => {\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      if (map) {\n        map.panTo(e.latLng)\n      }\n    },\n    [location.zoom, map, onChange],\n  )\n\n  const handleClick = React.useCallback(\n    (e: google.maps.MapMouseEvent) => {\n      handleDragEnd(e)\n\n      if (!e.latLng || !marker) {\n        return\n      }\n\n      marker.setPosition(e.latLng)\n      // this enables the marker to animate after moving it\n      marker.setMap(null)\n      marker.setAnimation(markerAnimation)\n      marker.setMap(map)\n    },\n    [handleDragEnd, map, marker, markerAnimation],\n  )\n\n  return (\n    <GoogleMap\n      onLoad={(map) => setMap(map)}\n      onUnmount={() => setMap(null)}\n      mapContainerStyle={{\n        height: 300,\n      }}\n      center={originalCenter.current}\n      zoom={location.zoom}\n      onZoomChanged={onZoomChanged}\n      onClick={handleClick}\n      options={{ draggableCursor: 'pointer' }}\n    >\n      <Marker\n        onLoad={(marker) => setMarker(marker)}\n        onUnmount={() => setMarker(null)}\n        animation={markerAnimation}\n        position={originalCenter.current}\n        draggable\n        onDragEnd={handleDragEnd}\n      ></Marker>\n    </GoogleMap>\n  )\n})\n\nexport default React.memo(FormElementLocation)\n"]}

package/dist/form-elements/FormElementLookupButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementLookupHandler, FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
+type ValidationMessageProps = {
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+} & IsDirtyProps;
+type Props = {
+    id: string;
+    element: FormTypes.LookupButtonFormElement;
+} & ValidationMessageProps;
+declare function FormElementLookupButton({ id, element, onChange, onLookup, ...validationMessageProps }: Props & {
+    onChange: FormElementValueChangeHandler;
+    onLookup: FormElementLookupHandler;
+}): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementLookupButton>;
+export default _default;

package/dist/form-elements/FormElementLookupButton.js

@@ -0,0 +1,205 @@
+import React, { memo, useCallback, useContext, useEffect, useMemo } from 'react';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import LookupNotification from '../components/renderer/LookupNotification';
+import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
+import { formElementsService } from '@oneblink/sdk-core';
+import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
+function stringifyLookupButtonValue(v) {
+    return JSON.stringify(v);
+}
+const FormElementLookupButtonValidationMessage = memo(function _FormElementLookupButtonValidationMessage({ validationMessage, displayValidationMessage, isDirty, }) {
+    const { isLookingUp } = useContext(LookupNotificationContext);
+    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) &&
+        !!validationMessage &&
+        !isLookingUp;
+    if (!isDisplayingValidationMessage) {
+        return null;
+    }
+    return React.createElement(FormElementValidationMessage, { message: validationMessage });
+});
+function FormElementLookupButton({ id, element, onChange, onLookup, ...validationMessageProps }) {
+    const { formSubmissionModel, elements } = useFormSubmissionModel();
+    const { isAutoLookup, data } = useMemo(() => {
+        return generateLookupButtonValue(element.elementDependencies, elements, formSubmissionModel);
+    }, [element.elementDependencies, elements, formSubmissionModel]);
+    const handleLookup = useCallback((setter) => {
+        onLookup((data) => {
+            const dataAfterSetting = setter(data);
+            dataAfterSetting.submission[element.name] = true;
+            return dataAfterSetting;
+        });
+    }, [element.name, onLookup]);
+    const stringifyData = useMemo(() => {
+        if (!data) {
+            return undefined;
+        }
+        return stringifyLookupButtonValue(data);
+    }, [data]);
+    useEffect(() => {
+        onChange(element, {
+            value: false,
+        });
+    }, [element, onChange, stringifyData]);
+    const value = useMemo(() => {
+        // Want the value to be `true` if there is data or if there are
+        // no element dependencies i.e. the lookup can be run at any time.
+        if (!element.elementDependencies.length || data) {
+            return true;
+        }
+        return undefined;
+    }, [data, element.elementDependencies.length]);
+    return (React.createElement(LookupNotification, { autoLookupValue: isAutoLookup ? stringifyData : undefined, element: element, onLookup: handleLookup, stringifyAutoLookupValue: stringifyLookupButtonValue },
+        React.createElement("div", { className: "cypress-lookup-button-element" },
+            React.createElement(FormElementLabelContainer, { className: "ob-lookup-button", id: id, element: element, required: false },
+                React.createElement(LookupButton, { value: value, validationMessage: undefined, lookupButtonConfig: element.lookupButton }),
+                React.createElement(FormElementLookupButtonValidationMessage, { ...validationMessageProps })))));
+}
+export default memo(FormElementLookupButton);
+function generateLookupButtonValue(elementDependencies, elements, formSubmissionModel) {
+    if (!formSubmissionModel) {
+        return {
+            isAutoLookup: false,
+            data: undefined,
+        };
+    }
+    // "data" should be `undefined` if there are no dependent elements with a value.
+    // If a least one dependent element has a value, we will enable to lookup to run.
+    return elementDependencies.reduce((memo, elementDependency) => {
+        var _a, _b;
+        const formElement = formElementsService.findFormElement(elements, (formElement) => formElement.id === elementDependency.elementId);
+        if (!formElement || !('name' in formElement)) {
+            return memo;
+        }
+        const formElementValue = formSubmissionModel[formElement.name];
+        switch (elementDependency.type) {
+            case 'FORM_FORM_ELEMENT': {
+                if (formElement.type === 'form' &&
+                    Array.isArray(formElement.elements)) {
+                    const nestedLookupButtonValue = generateLookupButtonValue([elementDependency.elementDependency], formElement.elements, formElementValue);
+                    return {
+                        isAutoLookup: memo.isAutoLookup && nestedLookupButtonValue.isAutoLookup,
+                        data: nestedLookupButtonValue.data !== undefined
+                            ? {
+                                ...memo.data,
+                                [formElement.name]: {
+                                    ...(((_a = memo === null || memo === void 0 ? void 0 : memo.data) === null || _a === void 0 ? void 0 : _a[formElement.name]) || {}),
+                                    ...nestedLookupButtonValue.data,
+                                },
+                            }
+                            : memo.data,
+                    };
+                }
+                break;
+            }
+            case 'REPEATABLE_SET_FORM_ELEMENT': {
+                if (formElement.type === 'repeatableSet') {
+                    const entries = {
+                        isAutoLookup: memo.isAutoLookup,
+                        data: {},
+                    };
+                    let hasAnEntry = false;
+                    const existingEntries = ((_b = memo.data) === null || _b === void 0 ? void 0 : _b[formElement.name]) || undefined;
+                    if (Array.isArray(formElementValue)) {
+                        for (const entry of formElementValue) {
+                            const index = formElementValue.indexOf(entry);
+                            const nestedLookupButtonValue = generateLookupButtonValue([elementDependency.elementDependency], formElement.elements, entry);
+                            entries.isAutoLookup =
+                                entries.isAutoLookup && nestedLookupButtonValue.isAutoLookup;
+                            if (nestedLookupButtonValue.data || (existingEntries === null || existingEntries === void 0 ? void 0 : existingEntries[index])) {
+                                entries.data[index] = {
+                                    ...existingEntries === null || existingEntries === void 0 ? void 0 : existingEntries[index],
+                                    ...nestedLookupButtonValue.data,
+                                };
+                                hasAnEntry = true;
+                            }
+                            else {
+                                entries.data[index] = undefined;
+                            }
+                        }
+                    }
+                    return {
+                        isAutoLookup: memo.isAutoLookup && entries.isAutoLookup,
+                        data: hasAnEntry
+                            ? {
+                                ...memo.data,
+                                [formElement.name]: entries.data,
+                            }
+                            : memo.data,
+                    };
+                }
+                break;
+            }
+            default: {
+                if (formElement && 'name' in formElement) {
+                    const dependencyValue = formSubmissionModel[formElement.name];
+                    const isAutoLookupChecker = autoLookupElementMap[formElement.type];
+                    const isFormElementAutoLookup = typeof isAutoLookupChecker === 'function'
+                        ? isAutoLookupChecker(formElement)
+                        : isAutoLookupChecker;
+                    return {
+                        isAutoLookup: memo.isAutoLookup && isFormElementAutoLookup,
+                        data: dependencyValue !== undefined && dependencyValue !== null
+                            ? {
+                                ...memo.data,
+                                [formElement.name]: dependencyValue,
+                            }
+                            : memo.data,
+                    };
+                }
+                break;
+            }
+        }
+        return memo;
+    }, {
+        isAutoLookup: true,
+        data: undefined,
+    });
+}
+// Creating an object here so we get a Typescript error when adding a
+// new element type and forgetting to add to the array of allowed types
+const autoLookupElementMap = {
+    text: false,
+    textarea: false,
+    number: false,
+    email: false,
+    telephone: false,
+    barcodeScanner: false,
+    radio: true,
+    checkboxes: false,
+    select: (formElement) => formElement.type === 'select' && !formElement.multi,
+    autocomplete: true,
+    boolean: true,
+    date: false,
+    datetime: false,
+    time: false,
+    heading: false,
+    html: false,
+    image: false,
+    infoPage: false,
+    camera: false,
+    repeatableSet: false,
+    draw: false,
+    calculation: false,
+    location: true,
+    files: true,
+    captcha: false,
+    form: false,
+    summary: false,
+    compliance: true,
+    geoscapeAddress: true,
+    pointAddress: true,
+    googleAddress: false,
+    civicaStreetName: true,
+    civicaNameRecord: false,
+    section: false,
+    bsb: false,
+    abn: false,
+    freshdeskDependentField: false,
+    apiNSWLiquorLicence: true,
+    arcGISWebMap: true,
+    pointCadastralParcel: true,
+    lookupButton: false,
+};
+//# sourceMappingURL=FormElementLookupButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementLookupButton.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLookupButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useCallback, useContext, useEffect, useMemo } from 'react'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n  FormElementLookupHandler,\n  FormElementValueChangeHandler,\n  IsDirtyProps,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport LookupNotification from '../components/renderer/LookupNotification'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype ValidationMessageProps = {\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Props = {\n  id: string\n  element: FormTypes.LookupButtonFormElement\n} & ValidationMessageProps\n\nfunction stringifyLookupButtonValue(v: unknown): string {\n  return JSON.stringify(v) as string\n}\n\nconst FormElementLookupButtonValidationMessage = memo(\n  function _FormElementLookupButtonValidationMessage({\n    validationMessage,\n    displayValidationMessage,\n    isDirty,\n  }: ValidationMessageProps) {\n    const { isLookingUp } = useContext(LookupNotificationContext)\n    const isDisplayingValidationMessage =\n      (isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLookingUp\n\n    if (!isDisplayingValidationMessage) {\n      return null\n    }\n\n    return <FormElementValidationMessage message={validationMessage} />\n  },\n)\n\nfunction FormElementLookupButton({\n  id,\n  element,\n  onChange,\n  onLookup,\n  ...validationMessageProps\n}: Props & {\n  onChange: FormElementValueChangeHandler\n  onLookup: FormElementLookupHandler\n}) {\n  const { formSubmissionModel, elements } = useFormSubmissionModel()\n  const { isAutoLookup, data } = useMemo(() => {\n    return generateLookupButtonValue(\n      element.elementDependencies,\n      elements,\n      formSubmissionModel,\n    )\n  }, [element.elementDependencies, elements, formSubmissionModel])\n\n  const handleLookup = useCallback<FormElementLookupHandler>(\n    (setter) => {\n      onLookup((data) => {\n        const dataAfterSetting = setter(data)\n        dataAfterSetting.submission[element.name] = true\n        return dataAfterSetting\n      })\n    },\n    [element.name, onLookup],\n  )\n\n  const stringifyData = useMemo(() => {\n    if (!data) {\n      return undefined\n    }\n    return stringifyLookupButtonValue(data)\n  }, [data])\n\n  useEffect(() => {\n    onChange(element, {\n      value: false,\n    })\n  }, [element, onChange, stringifyData])\n\n  const value = useMemo(() => {\n    // Want the value to be `true` if there is data or if there are\n    // no element dependencies i.e. the lookup can be run at any time.\n    if (!element.elementDependencies.length || data) {\n      return true\n    }\n    return undefined\n  }, [data, element.elementDependencies.length])\n\n  return (\n    <LookupNotification\n      autoLookupValue={isAutoLookup ? stringifyData : undefined}\n      element={element}\n      onLookup={handleLookup}\n      stringifyAutoLookupValue={stringifyLookupButtonValue}\n    >\n      <div className=\"cypress-lookup-button-element\">\n        <FormElementLabelContainer\n          className=\"ob-lookup-button\"\n          id={id}\n          element={element}\n          required={false}\n        >\n          <LookupButton\n            value={value}\n            validationMessage={undefined}\n            lookupButtonConfig={element.lookupButton}\n          />\n          <FormElementLookupButtonValidationMessage\n            {...validationMessageProps}\n          />\n        </FormElementLabelContainer>\n      </div>\n    </LookupNotification>\n  )\n}\n\nexport default memo(FormElementLookupButton)\n\nfunction generateLookupButtonValue(\n  elementDependencies: FormTypes.LookupButtonFormElement['elementDependencies'],\n  elements: FormTypes.FormElement[],\n  formSubmissionModel:\n    | SubmissionTypes.S3SubmissionData['submission']\n    | undefined,\n): {\n  isAutoLookup: boolean\n  data: SubmissionTypes.S3SubmissionData['submission'] | undefined\n} {\n  if (!formSubmissionModel) {\n    return {\n      isAutoLookup: false,\n      data: undefined,\n    }\n  }\n\n  // \"data\" should be `undefined` if there are no dependent elements with a value.\n  // If a least one dependent element has a value, we will enable to lookup to run.\n  return elementDependencies.reduce<{\n    isAutoLookup: boolean\n    data: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  }>(\n    (memo, elementDependency) => {\n      const formElement = formElementsService.findFormElement(\n        elements,\n        (formElement) => formElement.id === elementDependency.elementId,\n      )\n      if (!formElement || !('name' in formElement)) {\n        return memo\n      }\n\n      const formElementValue = formSubmissionModel[formElement.name]\n\n      switch (elementDependency.type) {\n        case 'FORM_FORM_ELEMENT': {\n          if (\n            formElement.type === 'form' &&\n            Array.isArray(formElement.elements)\n          ) {\n            const nestedLookupButtonValue = generateLookupButtonValue(\n              [elementDependency.elementDependency],\n              formElement.elements,\n              formElementValue as SubmissionTypes.S3SubmissionData['submission'],\n            )\n            return {\n              isAutoLookup:\n                memo.isAutoLookup && nestedLookupButtonValue.isAutoLookup,\n              data:\n                nestedLookupButtonValue.data !== undefined\n                  ? {\n                      ...memo.data,\n                      [formElement.name]: {\n                        ...(memo?.data?.[formElement.name] || {}),\n                        ...nestedLookupButtonValue.data,\n                      },\n                    }\n                  : memo.data,\n            }\n          }\n          break\n        }\n        case 'REPEATABLE_SET_FORM_ELEMENT': {\n          if (formElement.type === 'repeatableSet') {\n            const entries: {\n              isAutoLookup: boolean\n              data: Record<\n                number,\n                SubmissionTypes.S3SubmissionData['submission'] | undefined\n              >\n            } = {\n              isAutoLookup: memo.isAutoLookup,\n              data: {},\n            }\n            let hasAnEntry = false\n            const existingEntries =\n              (memo.data?.[formElement.name] as object[]) || undefined\n            if (Array.isArray(formElementValue)) {\n              for (const entry of formElementValue) {\n                const index = formElementValue.indexOf(entry)\n                const nestedLookupButtonValue = generateLookupButtonValue(\n                  [elementDependency.elementDependency],\n                  formElement.elements,\n                  entry as SubmissionTypes.S3SubmissionData['submission'],\n                )\n                entries.isAutoLookup =\n                  entries.isAutoLookup && nestedLookupButtonValue.isAutoLookup\n                if (nestedLookupButtonValue.data || existingEntries?.[index]) {\n                  entries.data[index] = {\n                    ...existingEntries?.[index],\n                    ...nestedLookupButtonValue.data,\n                  }\n                  hasAnEntry = true\n                } else {\n                  entries.data[index] = undefined\n                }\n              }\n            }\n\n            return {\n              isAutoLookup: memo.isAutoLookup && entries.isAutoLookup,\n              data: hasAnEntry\n                ? {\n                    ...memo.data,\n                    [formElement.name]: entries.data,\n                  }\n                : memo.data,\n            }\n          }\n          break\n        }\n        default: {\n          if (formElement && 'name' in formElement) {\n            const dependencyValue = formSubmissionModel[formElement.name]\n            const isAutoLookupChecker = autoLookupElementMap[formElement.type]\n            const isFormElementAutoLookup =\n              typeof isAutoLookupChecker === 'function'\n                ? isAutoLookupChecker(formElement)\n                : isAutoLookupChecker\n            return {\n              isAutoLookup: memo.isAutoLookup && isFormElementAutoLookup,\n              data:\n                dependencyValue !== undefined && dependencyValue !== null\n                  ? {\n                      ...memo.data,\n                      [formElement.name]: dependencyValue,\n                    }\n                  : memo.data,\n            }\n          }\n          break\n        }\n      }\n\n      return memo\n    },\n    {\n      isAutoLookup: true,\n      data: undefined,\n    },\n  )\n}\n\n// Creating an object here so we get a Typescript error when adding a\n// new element type and forgetting to add to the array of allowed types\nconst autoLookupElementMap: Record<\n  Exclude<FormTypes.FormElement['type'], 'page'>,\n  boolean | ((element: FormTypes.FormElement) => boolean)\n> = {\n  text: false,\n  textarea: false,\n  number: false,\n  email: false,\n  telephone: false,\n  barcodeScanner: false,\n  radio: true,\n  checkboxes: false,\n  select: (formElement) => formElement.type === 'select' && !formElement.multi,\n  autocomplete: true,\n  boolean: true,\n  date: false,\n  datetime: false,\n  time: false,\n  heading: false,\n  html: false,\n  image: false,\n  infoPage: false,\n  camera: false,\n  repeatableSet: false,\n  draw: false,\n  calculation: false,\n  location: true,\n  files: true,\n  captcha: false,\n  form: false,\n  summary: false,\n  compliance: true,\n  geoscapeAddress: true,\n  pointAddress: true,\n  googleAddress: false,\n  civicaStreetName: true,\n  civicaNameRecord: false,\n  section: false,\n  bsb: false,\n  abn: false,\n  freshdeskDependentField: false,\n  apiNSWLiquorLicence: true,\n  arcGISWebMap: true,\n  pointCadastralParcel: true,\n  lookupButton: false,\n}\n"]}

package/dist/form-elements/FormElementNumber.js

@@ -8,6 +8,7 @@ import useIsPageVisible from '../hooks/useIsPageVisible';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import MaterialIcon from '../components/MaterialIcon';
+import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 function FormElementNumber({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const isPageVisible = useIsPageVisible();
@@ -51,8 +52,7 @@ function FormElementNumber({ id, element, value, onChange, validationMessage, di
                 !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
                 React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton }))) : isPageVisible ? (React.createElement(SliderControl, { id: id, text: text, value: value, element: element, onChange: handleChange, onBlur: setIsDirty, ariaDescribedby: ariaDescribedby })) : undefined,
-            isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+            isDisplayingValidationMessage && (React.createElement(FormElementValidationMessage, { message: validationMessage })))));
 }
 const sliderBubbleWidthInPixels = 24;
 const SliderControl = React.memo(function SliderControl({ id, text, value, element, onChange, onBlur, ariaDescribedby, }) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '@oneblink/apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\n\ntype Props = {\n  id: string\n  element: FormTypes.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n                aria-required={element.required}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n              lookupButtonConfig={element.lookupButton}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n            ariaDescribedby={ariaDescribedby}\n          />\n        ) : undefined}\n\n        {isDisplayingValidationMessage && (\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 sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n  ariaDescribedby,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  ariaDescribedby: string | undefined\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={number}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        aria-describedby={ariaDescribedby}\n        aria-required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}
+{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAY9F,SAAS,iBAAiB,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,EAAE,CAAA;QACX,CAAC;QACD,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC;YAC9B,OAAO,mBAAmB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;QAClD,CAAC;QACD,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAA;IACzB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,KAA0C,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC/C,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;SAC9C,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAEhE,iEAAiE;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;;QACzC,IAAI,mBAAmB,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC3D,OAAM;QACR,CAAC;QACD,MAAA,mBAAmB,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA;QACnC,UAAU,CAAC,GAAG,EAAE;;YACd,MAAA,mBAAmB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,WAAW,EACrB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAEzB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CACnB,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAC7C,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,uCAAuC,EACjD,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,mBAAmB,EACxB,OAAO,EAAE,WAAW,sBACF,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,IAChC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CACtC,CACV,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE,CACP,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAClB,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,SAAS;YAEZ,6BAA6B,IAAI,CAChC,oBAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,MAAM,yBAAyB,GAAG,EAAE,CAAA;AAEpC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,EACtD,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,eAAe,GAShB;IACC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC7D,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE3D,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAe,CAAC,CAAC,EACvE,CAAC,KAAK,CAAC,CACR,CAAA;IAED,MAAM,qBAAqB,GAAG,KAAK,CAAC,OAAO,CACzC,GAAG,EAAE,CACH,SAAS,CAAC,CAAC,aAAgC,EAAE,EAAE;QAC7C,IAAI,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACpD,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,EAAE,GAAG,CAAC,EACT,EAAE,CACH,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IACE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;YACpB,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ;YACrC,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,EACrC,CAAC;YACD,OAAM;QACR,CAAC;QAED,MAAM,aAAa,GAAG,eAAe,CAAC,OAAO,CAAA;QAC7C,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAA;QAC3C,IAAI,aAAa,IAAI,YAAY,EAAE,CAAC;YAClC,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;YACnD,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAA;YACvD,MAAM,UAAU,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAA;YAC7D,MAAM,WAAW,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAA;YAC/D,MAAM,wBAAwB,GAC5B,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC,yBAAyB,CAAA;YAEjD,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,GAAG,UAAU,IAAI,CAAA;YACzD,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,IAC/B,WAAW,GAAG,CAAC,GAAG,wBACpB,IAAI,CAAA;YAEJ,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBACrD,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;YAC5C,CAAC;YACD,qBAAqB,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,gCACE,GAAG,EAAE,eAAe,EACpB,SAAS,EAAC,yCAAyC,EACnD,OAAO,EAAE,EAAE,IAEV,IAAI,CACE;QACT,+BACE,GAAG,EAAE,cAAc,EACnB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sGAAsG,EAChH,IAAI,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAC3D,GAAG,EAAE,OAAO,CAAC,SAAS,EACtB,GAAG,EAAE,OAAO,CAAC,SAAS,EACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ,sBACR,eAAe,mBAClB,OAAO,CAAC,QAAQ,EAC/B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,MAAM,GACd,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '@oneblink/apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n                aria-required={element.required}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n              lookupButtonConfig={element.lookupButton}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n            ariaDescribedby={ariaDescribedby}\n          />\n        ) : undefined}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n  ariaDescribedby,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  ariaDescribedby: string | undefined\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={number}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        aria-describedby={ariaDescribedby}\n        aria-required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}

package/dist/form-elements/FormElementPointAddress.js

@@ -6,6 +6,7 @@ import useIsMounted from '../hooks/useIsMounted';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import { Collapse } from '@mui/material';
 import { NotificationGrid, NotificationGridItem, } from '../components/NotificationGrid';
+import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 const pointAddressClass = 'ob-point-address';
 function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
     var _a, _b, _c;
@@ -70,8 +71,7 @@ function FormElementPointAddress({ formId, id, element, value, displayValidation
     return (React.createElement("div", { className: "cypress-point-address-element" },
         React.createElement(FormElementLabelContainer, { className: `${pointAddressClass} ob-autocomplete`, element: element, id: id, required: element.required },
             React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes })),
-        error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-            React.createElement("div", { className: "has-text-danger ob-error__text cypress-point-address-details-error-message" }, error.toString()))),
+        error && (React.createElement(FormElementValidationMessage, { message: error.toString(), className: "cypress-point-address-details-error-message" })),
         React.createElement(Collapse, { in: !!value && !!element.isDisplayingAddressInformation },
             React.createElement(NotificationGrid, { className: `${pointAddressClass}__record-display has-margin-top-6`, gridClassName: `${pointAddressClass}__container` },
                 React.createElement(PointAddressGridItem, { label: "Local Government Area", value: (_a = value === null || value === void 0 ? void 0 : value.localGovernmentArea) === null || _a === void 0 ? void 0 : _a.lgaName, classNameSuffix: "local-government-area-name" }),

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementPointAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointAddress.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, PointTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { Collapse } from '@mui/material'\nimport {\n  NotificationGrid,\n  NotificationGridItem,\n} from '../components/NotificationGrid'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.PointAddressElement\n  value: PointTypes.PointAddress | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointAddress>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype AddressType = 'all' | 'physical' | 'mailing'\nconst pointAddressClass = 'ob-point-address'\n\nfunction FormElementPointAddress({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\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 (address: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n\n      const params: {\n        address: string\n        maxNumberOfResults?: number\n        stateTerritory?: string\n        addressType?: AddressType\n      } = {\n        address,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateTerritory = element.stateTerritoryFilter.join(',')\n      }\n      if (element.addressTypeFilter) {\n        let addressType: AddressType = 'all'\n        if (element.addressTypeFilter.length === 1) {\n          addressType = element.addressTypeFilter[0] as AddressType\n        }\n        params.addressType = addressType\n      }\n\n      const result = await formService.searchPointAddresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return result.map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [element.addressTypeFilter, element.stateTerritoryFilter, formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, { value: undefined })\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getPointAddress(formId, addressId)\n        onChange(element, { value: 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    // we don't need this to run again when the label changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-point-address-element\">\n      <FormElementLabelContainer\n        className={`${pointAddressClass} 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          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\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-point-address-details-error-message\">\n            {error.toString()}\n          </div>\n        </div>\n      )}\n\n      <Collapse in={!!value && !!element.isDisplayingAddressInformation}>\n        <NotificationGrid\n          className={`${pointAddressClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointAddressClass}__container`}\n        >\n          <PointAddressGridItem\n            label=\"Local Government Area\"\n            value={value?.localGovernmentArea?.lgaName}\n            classNameSuffix=\"local-government-area-name\"\n          />\n          <PointAddressGridItem\n            label=\"Lot / Section / Plan No.\"\n            value={value?.addressDetails?.cadastralIdentifier}\n            classNameSuffix=\"cadastral-identifier\"\n          />\n          {value?.cadastralParcels?.map((cadastralParcel, index) => (\n            <PointAddressGridItem\n              key={cadastralParcel.propId || index}\n              label=\"Lot / DP Numbers\"\n              value={cadastralParcel?.parcelId?.join(', ')}\n              classNameSuffix=\"cadastral-parcel\"\n            />\n          ))}\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nfunction PointAddressGridItem({\n  label,\n  classNameSuffix,\n  value,\n}: {\n  label: string\n  classNameSuffix: string\n  value: string | undefined\n}) {\n  return (\n    <NotificationGridItem\n      className={`${pointAddressClass}__container-${classNameSuffix}`}\n      value={value}\n      label={label}\n      labelClassName={`${pointAddressClass}__detail-label`}\n      valueClassName={`${pointAddressClass}__detail-value`}\n    />\n  )\n}\n\nexport default React.memo(FormElementPointAddress)\n"]}
+{"version":3,"file":"FormElementPointAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointAddress.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, PointTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { Collapse } from '@mui/material'\nimport {\n  NotificationGrid,\n  NotificationGridItem,\n} from '../components/NotificationGrid'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.PointAddressElement\n  value: PointTypes.PointAddress | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointAddress>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype AddressType = 'all' | 'physical' | 'mailing'\nconst pointAddressClass = 'ob-point-address'\n\nfunction FormElementPointAddress({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\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 (address: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n\n      const params: {\n        address: string\n        maxNumberOfResults?: number\n        stateTerritory?: string\n        addressType?: AddressType\n      } = {\n        address,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateTerritory = element.stateTerritoryFilter.join(',')\n      }\n      if (element.addressTypeFilter) {\n        let addressType: AddressType = 'all'\n        if (element.addressTypeFilter.length === 1) {\n          addressType = element.addressTypeFilter[0] as AddressType\n        }\n        params.addressType = addressType\n      }\n\n      const result = await formService.searchPointAddresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return result.map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [element.addressTypeFilter, element.stateTerritoryFilter, formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, { value: undefined })\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getPointAddress(formId, addressId)\n        onChange(element, { value: 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    // we don't need this to run again when the label changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-point-address-element\">\n      <FormElementLabelContainer\n        className={`${pointAddressClass} 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          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-point-address-details-error-message\"\n        />\n      )}\n\n      <Collapse in={!!value && !!element.isDisplayingAddressInformation}>\n        <NotificationGrid\n          className={`${pointAddressClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointAddressClass}__container`}\n        >\n          <PointAddressGridItem\n            label=\"Local Government Area\"\n            value={value?.localGovernmentArea?.lgaName}\n            classNameSuffix=\"local-government-area-name\"\n          />\n          <PointAddressGridItem\n            label=\"Lot / Section / Plan No.\"\n            value={value?.addressDetails?.cadastralIdentifier}\n            classNameSuffix=\"cadastral-identifier\"\n          />\n          {value?.cadastralParcels?.map((cadastralParcel, index) => (\n            <PointAddressGridItem\n              key={cadastralParcel.propId || index}\n              label=\"Lot / DP Numbers\"\n              value={cadastralParcel?.parcelId?.join(', ')}\n              classNameSuffix=\"cadastral-parcel\"\n            />\n          ))}\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nfunction PointAddressGridItem({\n  label,\n  classNameSuffix,\n  value,\n}: {\n  label: string\n  classNameSuffix: string\n  value: string | undefined\n}) {\n  return (\n    <NotificationGridItem\n      className={`${pointAddressClass}__container-${classNameSuffix}`}\n      value={value}\n      label={label}\n      labelClassName={`${pointAddressClass}__detail-label`}\n      valueClassName={`${pointAddressClass}__detail-value`}\n    />\n  )\n}\n\nexport default React.memo(FormElementPointAddress)\n"]}

package/dist/form-elements/FormElementPointCadastralParcel.js

@@ -8,6 +8,7 @@ import { formService } from '@oneblink/apps';
 import { Collapse } from '@mui/material';
 import { NotificationGrid, NotificationGridItem, } from '../components/NotificationGrid';
 import MaterialIcon from '../components/MaterialIcon';
+import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 const pointCadastralParcelClass = 'ob-point-cadastral-parcel';
 function FormElementPointCadastralParcel({ id, formId, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
@@ -95,8 +96,7 @@ function FormElementPointCadastralParcel({ id, formId, element, value, onChange,
                     !isLoading && (React.createElement("span", { className: " ob-input-icon icon is-small is-right" }, value ? (React.createElement(MaterialIcon, { className: "is-size-5 has-text-success" }, "check")) : (error === null || error === void 0 ? void 0 : error.message) ? (React.createElement(MaterialIcon, { className: "is-size-5 has-text-danger" }, "error")) : (React.createElement(MaterialIcon, { className: "is-size-5" }, "map"))))),
                 hasCopyButton && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label })))),
-            isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, (error === null || error === void 0 ? void 0 : error.message) || validationMessage)))),
+            isDisplayingValidationMessage && (React.createElement(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))),
         React.createElement(Collapse, { in: !!value },
             React.createElement(NotificationGrid, { className: `${pointCadastralParcelClass}__record-display has-margin-top-6`, gridClassName: `${pointCadastralParcelClass}__container` },
                 React.createElement(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-address`, value: (_e = (_d = (_c = value === null || value === void 0 ? void 0 : value.features) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.formattedAddress, label: "Address", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` }),