@widergy/energy-ui 3.66.0 → 3.66.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.66.2](https://github.com/widergy/energy-ui/compare/v3.66.1...v3.66.2) (2025-03-19)
+
+
+### Bug Fixes
+
+* [UGC-1228] workflow add class ([#593](https://github.com/widergy/energy-ui/issues/593)) ([3f3e8df](https://github.com/widergy/energy-ui/commit/3f3e8df0785a8919f285cca8e961ea5b60fa3679))
+
+## [3.66.1](https://github.com/widergy/energy-ui/compare/v3.66.0...v3.66.1) (2025-03-18)
+
+
+### Bug Fixes
+
+* [UGENSA-1485] map options markers ([#587](https://github.com/widergy/energy-ui/issues/587)) ([7559241](https://github.com/widergy/energy-ui/commit/7559241323ffa7744d86137f538191a04c4d6389))
+
 # [3.66.0](https://github.com/widergy/energy-ui/compare/v3.65.0...v3.66.0) (2025-03-06)
 
 

package/dist/components/UTMap/components/GoogleMaps/index.js

@@ -21,25 +21,29 @@ class GoogleMaps extends _react.PureComponent {
   constructor() {
     super(...arguments);
     _defineProperty(this, "handleMarkerRightClick", marker => this.props.onMarkerRightClick(marker));
+    _defineProperty(this, "handleMarkerClick", (marker, optionData) => this.props.onMarkerClick(marker, optionData));
   }
   render() {
     const {
-      onMapMounted,
-      onMapClick,
       center,
-      zoom,
-      usePolygon,
-      polygonPath,
-      onSearchBoxMounted,
+      colorBorderPolygon,
+      colorPolygon,
+      disabled,
+      markers,
+      MultipleMarkersIcon,
+      onMapClick,
+      onMapMounted,
       onPlacesChanged,
+      onSearchBoxMounted,
+      onSearchChange,
       placeholder,
+      polygonPath,
+      searchEnabled,
       searchValue,
-      onSearchChange,
-      disabled,
-      markers,
-      showOnlyMap,
-      colorPolygon,
-      colorBorderPolygon
+      selectedPosition,
+      singleMarker,
+      usePolygon,
+      zoom
     } = this.props;
     const polygonOptions = (0, _constants.polygonDefaultOptions)(colorPolygon, colorBorderPolygon);
     const handleStopPropagation = e => {
@@ -58,7 +62,7 @@ class GoogleMaps extends _react.PureComponent {
       defaultOptions: polygonOptions,
       onClick: onMapClick,
       path: polygonPath
-    }), !showOnlyMap && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    }), searchEnabled && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
       ref: onSearchBoxMounted,
       controlPosition: window.google.maps.ControlPosition.TOP_LEFT,
       onPlacesChanged: onPlacesChanged
@@ -70,10 +74,18 @@ class GoogleMaps extends _react.PureComponent {
       onChange: onSearchChange,
       disabled: disabled,
       onKeyDown: handleStopPropagation
-    })), markers.map(marker => /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, _extends({}, marker, {
-      key: marker.key,
-      onRightClick: this.handleMarkerRightClick
-    }))));
+    })), markers.map(marker => {
+      const label = marker.label || '';
+      const selected = marker.key === selectedPosition;
+      return /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, _extends({}, marker, {
+        key: marker.key,
+        onRightClick: this.handleMarkerRightClick,
+        onClick: markerData => this.handleMarkerClick(markerData, marker)
+      }, MultipleMarkersIcon && !singleMarker && {
+        icon: MultipleMarkersIcon(label, selected),
+        label: undefined
+      }));
+    }));
   }
 }
 GoogleMaps.propTypes = _types.GoogleMapsPropTypes;

package/dist/components/UTMap/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_INITIAL = exports.ZOOM_ADDRESS_VALID = exports.TEXTS = exports.LOCATION_TYPES = exports.GMAP_PARAMS = exports.ADDRESS_TYPES = void 0;
+exports.ZOOM_INITIAL = exports.ZOOM_ADDRESS_VALID = exports.TEXTS = exports.MAP_PADDING = exports.LOCATION_TYPES = exports.GMAP_PARAMS = exports.ADDRESS_TYPES = void 0;
 const GMAP_PARAMS = exports.GMAP_PARAMS = {
   latitude: 'latitude',
   longitude: 'longitude',
@@ -25,4 +25,5 @@ const ADDRESS_TYPES = exports.ADDRESS_TYPES = {
   route: 'route'
 };
 const ZOOM_INITIAL = exports.ZOOM_INITIAL = 10;
-const ZOOM_ADDRESS_VALID = exports.ZOOM_ADDRESS_VALID = 15;
+const ZOOM_ADDRESS_VALID = exports.ZOOM_ADDRESS_VALID = 15;
+const MAP_PADDING = exports.MAP_PADDING = 60;

package/dist/components/UTMap/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _array = require("@widergy/web-utils/lib/array");
 var _form = require("@widergy/web-utils/lib/form");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _googleMapsTypes = require("../../types/googleMapsTypes");
 var _WithGoogleMaps = _interopRequireDefault(require("../WithGoogleMaps"));
@@ -22,7 +22,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class UTMap extends _react.PureComponent {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     _defineProperty(this, "handleSearchChange", event => this.setState({
       searchValue: event.target.value
     }));
@@ -40,12 +42,13 @@ class UTMap extends _react.PureComponent {
         }, () => {
           const {
             field,
-            onChange
+            onChange,
+            singleMarker
           } = this.props;
           const addressComponents = field.configuration.address_components;
           const addressValue = {};
           Object.keys(addressComponents).map(key => addressValue[addressComponents[key]] = (0, _utils.getValue)(address, latLng, key));
-          if (changeValue) onChange(addressValue);
+          if (changeValue && singleMarker) onChange(addressValue);
         });
       });
     });
@@ -56,23 +59,39 @@ class UTMap extends _react.PureComponent {
         defaultAnimation: 2,
         key: Date.now()
       };
-      const markers = [...(this.props.singleMarker ? [] : [...this.state.markers]), newMarker];
+      const markers = this.props.singleMarker ? [newMarker] : [...this.state.markers];
       this.setState({
         markers
       });
     });
     _defineProperty(this, "handleMapClick", event => {
       // When user click on any place inside map
-      if (this.props.disabled) return;
-      if ((0, _utils.checkAddressIsValid)(event.latLng, this.state.usePolygon, this.props.polygonPath)) {
-        this.props.onChange(null);
-        this.updateMarker(event.latLng);
-        this.updateAddress(event.latLng, null, true);
-      } else if (this.props.onLocationOutOfBoundsCallback) {
+      const {
+        disabled,
+        singleMarker,
+        onChange,
+        polygonPath,
+        onLocationOutOfBoundsCallback,
+        zoomAddressInvalid
+      } = this.props;
+      const {
+        usePolygon
+      } = this.state;
+      const {
+        latLng
+      } = event;
+      if (disabled) return;
+      const isValid = (0, _utils.checkAddressIsValid)(latLng, usePolygon, polygonPath);
+      if (!isValid && onLocationOutOfBoundsCallback) {
         this.setState({
-          mapZoom: this.props.zoomAddressInvalid || 10
+          mapZoom: zoomAddressInvalid || 10
         });
-        this.props.onLocationOutOfBoundsCallback();
+        return onLocationOutOfBoundsCallback();
+      }
+      if (isValid && singleMarker) {
+        onChange(null);
+        this.updateMarker(latLng);
+        this.updateAddress(latLng, null, true);
       }
     });
     _defineProperty(this, "centerMap", latLng => this.setState({
@@ -85,12 +104,28 @@ class UTMap extends _react.PureComponent {
         markers: nextMarkers
       });
     });
+    _defineProperty(this, "handleMarkerClick", function (_) {
+      let optionData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const {
+        key,
+        value
+      } = optionData;
+      const {
+        onChange
+      } = _this.props;
+      const selected = _this.state.selectedPosition === key;
+      _this.setState({
+        selectedPosition: selected ? null : key
+      });
+      if (onChange) onChange(selected ? null : value);
+    });
     _defineProperty(this, "handleMapMounted", mapRef => {
       // When map is mounted on screen
       this.map = mapRef;
       const {
         input,
-        field
+        field,
+        singleMarker
       } = this.props;
       if (input.value) {
         const addressComponents = field.configuration.address_components;
@@ -101,27 +136,36 @@ class UTMap extends _react.PureComponent {
       if (this.props.useGeolocation) {
         // We try to recover user actual position with navigator geolocation
         (0, _utils.geolocation)(this.props.errors.retrieveLocationError).getCurrentPosition(userPosition => {
+          var _this$state$markers;
           // If we can retrieve user position...
+
+          const markerCoordinates = !singleMarker && ((_this$state$markers = this.state.markers) === null || _this$state$markers === void 0 || (_this$state$markers = _this$state$markers[0]) === null || _this$state$markers === void 0 ? void 0 : _this$state$markers.position);
+          const {
+            lat: optionLat,
+            lng: optionLng
+          } = markerCoordinates || {};
           const {
             latitude: userLatitude,
             longitude: userLongitude
           } = userPosition.coords;
-          const userLatLng = new window.google.maps.LatLng(userLatitude, userLongitude);
+          const searchLatitude = singleMarker ? userLatitude : optionLat;
+          const searchLongitude = singleMarker ? userLongitude : optionLng;
+          const userLatLng = new window.google.maps.LatLng(searchLatitude, searchLongitude);
           if ((0, _utils.checkAddressIsValid)(userLatLng, this.state.usePolygon, this.props.polygonPath)) {
             const actualPosition = {
-              lat: userLatitude,
-              lng: userLongitude
+              lat: searchLatitude,
+              lng: searchLongitude
             };
             this.setState({
               center: actualPosition,
-              markers: [{
+              markers: [...(this.props.singleMarker ? [{
                 position: actualPosition,
                 key: Date.now(),
                 defaultAnimation: 2
-              }],
+              }] : this.state.markers)],
               mapLoading: false
             }, () => {
-              const latlng = new window.google.maps.LatLng(userLatitude, userLongitude);
+              const latlng = new window.google.maps.LatLng(searchLatitude, searchLongitude);
               this.updateAddress(latlng, null, true);
             });
           } else {
@@ -136,6 +180,13 @@ class UTMap extends _react.PureComponent {
           this.updateAddress(latlng, null, true);
         });
       }
+      const bounds = new window.google.maps.LatLngBounds();
+      this.state.markers.forEach(marker => {
+        bounds.extend(new window.google.maps.LatLng(marker.position.lat, marker.position.lng));
+      });
+      if (this.map && !singleMarker) {
+        this.map.fitBounds(bounds, _constants.MAP_PADDING);
+      }
     });
     _defineProperty(this, "handleBoundsChanged", () => this.setState({
       center: this.map.getCenter()
@@ -144,7 +195,7 @@ class UTMap extends _react.PureComponent {
     _defineProperty(this, "handlePlacesChanged", () => {
       if (this.props.disabled) return;
       const places = this.searchBox.getPlaces();
-      const place = !(0, _array.isEmpty)(places) && (0, _utils.checkAddressIsValid)(places[0].geometry.location, this.state.usePolygon, this.props.polygonPath) && places[0];
+      const place = !(0, _isEmpty.default)(places) && (0, _utils.checkAddressIsValid)(places[0].geometry.location, this.state.usePolygon, this.props.polygonPath) && places[0];
       if (place) {
         this.props.onChange(null);
         this.updateMarker(place.geometry.location);
@@ -157,8 +208,9 @@ class UTMap extends _react.PureComponent {
       mapLoading: true,
       searchValue: '',
       mapZoom: this.props.zoomInitial || _constants.ZOOM_INITIAL,
-      usePolygon: this.props.usePolygon && !(0, _array.isEmpty)(this.props.polygonPath),
-      invalidConfiguration: false
+      usePolygon: this.props.usePolygon && !(0, _isEmpty.default)(this.props.polygonPath),
+      invalidConfiguration: false,
+      selectedPosition: null
     };
   }
   componentDidMount() {
@@ -171,7 +223,8 @@ class UTMap extends _react.PureComponent {
     const {
       input,
       startLocation,
-      field
+      field = {},
+      options = []
     } = this.props;
     if (!(0, _utils.isValidConfiguration)(field)) {
       this.setState({
@@ -180,6 +233,15 @@ class UTMap extends _react.PureComponent {
       });
       return;
     }
+    const coordinates = options.map(option => ({
+      key: option.id.toString(),
+      position: {
+        lat: option.configuration.coordinates.latitude,
+        lng: option.configuration.coordinates.longitude
+      },
+      label: "".concat(option.value),
+      value: option.value
+    }));
     if (input.value) {
       startPosition.position.lat = input.value[field.configuration.address_components[_constants.GMAP_PARAMS.latitude]];
       startPosition.position.lng = input.value[field.configuration.address_components[_constants.GMAP_PARAMS.longitude]];
@@ -197,35 +259,47 @@ class UTMap extends _react.PureComponent {
         mapLoading: false
       });
     }
+    if (!(0, _isEmpty.default)(coordinates)) {
+      this.setState({
+        center: coordinates[0].position,
+        markers: coordinates,
+        mapLoading: false
+      });
+    }
   }
   render() {
     const {
-      showOnlyMap
+      showOnlyMap = false
     } = this.props.field.configuration;
+    const searchEnabled = !showOnlyMap && this.props.singleMarker;
     return /*#__PURE__*/_react.default.createElement("div", null, this.state.center ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_GoogleMaps.default, {
+      center: this.state.center,
+      colorBorderPolygon: this.props.colorBorderPolygon,
+      colorPolygon: this.props.colorPolygon,
       containerElement: /*#__PURE__*/_react.default.createElement("div", {
         className: this.props.className
       }),
+      disabled: this.props.disabled,
       mapElement: /*#__PURE__*/_react.default.createElement("div", {
         className: this.props.className
       }),
+      markers: this.state.markers,
+      MultipleMarkersIcon: this.props.MultipleMarkersIcon,
       onMapClick: this.handleMapClick,
-      onMarkerRightClick: this.handleMarkerRightClick,
       onMapMounted: this.handleMapMounted,
-      onSearchBoxMounted: this.handleSearchBoxMounted,
+      onMarkerClick: this.handleMarkerClick,
+      onMarkerRightClick: this.handleMarkerRightClick,
       onPlacesChanged: this.handlePlacesChanged,
-      markers: this.state.markers,
-      center: this.state.center,
-      searchValue: this.state.searchValue,
+      onSearchBoxMounted: this.handleSearchBoxMounted,
       onSearchChange: this.handleSearchChange,
-      zoom: this.state.mapZoom,
+      placeholder: this.props.placeholder,
       polygonPath: this.props.polygonPath,
+      searchEnabled: searchEnabled,
+      searchValue: this.state.searchValue,
+      selectedPosition: this.state.selectedPosition,
+      singleMarker: this.props.singleMarker,
       usePolygon: this.state.usePolygon,
-      placeholder: this.props.placeholder,
-      disabled: this.props.disabled,
-      showOnlyMap: showOnlyMap,
-      colorPolygon: this.props.colorPolygon,
-      colorBorderPolygon: this.props.colorBorderPolygon
+      zoom: this.state.mapZoom
     })) : this.state.mapLoading ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, null, this.props.errors.retrievingLocation) : this.state.invalidConfiguration ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       colorTheme: "error",
       variant: "small"

package/dist/components/UTWorkflowContainer/versions/V1/index.js

@@ -143,7 +143,7 @@ const UTWorkflowContainer = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
   }, children))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.footer
+    className: "".concat(_stylesModule.default.footer, " ").concat(classes.footer)
   }, /*#__PURE__*/_react.default.createElement(_UTWizard.default, wizardConfig), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
   }, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.66.0",
+  "version": "3.66.2",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",