@widergy/energy-ui 3.66.2 → 3.67.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.67.0](https://github.com/widergy/energy-ui/compare/v3.66.3...v3.67.0) (2025-03-25)
+
+
+### Features
+
+* updates readme ([3d5e1de](https://github.com/widergy/energy-ui/commit/3d5e1debf9da328f12ddbf2de64efec019667cfc))
+
+## [3.66.3](https://github.com/widergy/energy-ui/compare/v3.66.2...v3.66.3) (2025-03-20)
+
+
+### Bug Fixes
+
+* fix message error ([35bfdaa](https://github.com/widergy/energy-ui/commit/35bfdaa436a7fd087beb3fec4d0ba8f6c022ada4))
+
 ## [3.66.2](https://github.com/widergy/energy-ui/compare/v3.66.1...v3.66.2) (2025-03-19)
 
 

package/README.md

@@ -1,5 +1,3 @@
-![EnergyUILogo](http://funkyimg.com/i/2RdwU.png)
-
 > Widergy Web Components
 
 ![WidergyWeb](https://img.shields.io/badge/WIDERGY-WEB-00d564.svg)

package/dist/components/UTAttachmentList/index.js

@@ -140,6 +140,7 @@ const AttachmentContainer = _ref => {
                 validation = await (0, _utils.pdfAspectRatioValidation)(file, allowedPDFUploadSizes);
                 if (!validation) {
                   onFailValidation(fileErrorTexts.aspectRatioError);
+                  return;
                 }
               }
               if (!validation && !disableResize && (0, _utils.isImage)(file) && !(0, _browser.isIE)()) {

package/dist/components/UTButton/theme.js

@@ -8,9 +8,9 @@ var _classesUtils = require("../../utils/classesUtils");
 var _shadowUtils = require("../../utils/shadowUtils");
 var _constants = require("./constants");
 const variantsColorTheme = (theme, colorTheme, variant) => {
-  var _theme$Palette$shadow;
+  var _theme$Palette, _theme$Palette$shadow;
   const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const actionPaletteColors = theme.Palette.actions || theme.Palette;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
   const actionTheme = actionPaletteColors[actionColorName];
   const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]]) || 'transparent';
   const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];

package/dist/components/UTDocumentWizard/README.md

@@ -0,0 +1,109 @@
+# UTDocumentWizard
+
+A component that provides an interactive document viewer with navigable sections. It allows users to explore different sections of a document (like a bill or form) through an intuitive interface with clickable areas and detailed information panels.
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| pages | array | [] | Array of page objects that define the document pages to be displayed. |
+| sections | array | [] | Array of section objects that define the interactive areas within each page. |
+| labels | object | {} | Object containing text labels for UI elements. |
+
+### pages
+
+Each page object in the `pages` array should have the following structure:
+
+```javascript
+{
+  id: number,       // Unique identifier for the page
+  image: string,    // URL of the page image
+  name: string      // Display name of the page
+}
+```
+
+### sections
+
+Each section object in the `sections` array should have the following structure:
+
+```javascript
+{
+  id: number,                  // Unique identifier for the section
+  page_id: number,             // ID of the page this section       belongs to
+  label: string,               // Short label for the section (e.g., "1", "2")
+  title: string,               // Title of the section
+  description: string,         // Detailed description of the section
+  section_coordinates: array,  // Coordinates [x1, y1, x2, y2] defining the clickable area
+  section_number: number,      // Order number of the section
+}
+```
+
+### translations
+
+The translations object should have the following structure:
+
+```javascript
+{
+  chevronsManagerTitle: string,  // Title for the chevrons manager
+  sectionDetails: {
+    titleDefault: string,       // Default title for section details
+    descriptionDefault: string  // Default description for section details
+  }
+}
+```
+
+## Example Usage
+
+```jsx
+import { UTDocumentWizard } from 'energy-ui';
+
+const pages = [
+  {
+    id: 1,
+    image: 'https://example.com/front.png',
+    name: 'Front'
+  },
+  {
+    id: 2,
+    image: 'https://example.com/back.png',
+    name: 'Back'
+  }
+];
+
+const sections = [
+  {
+    id: 1001,
+    page_id: 1,
+    label: '1',
+    title: 'Section 1',
+    description: 'Description of section 1',
+    section_coordinates: [40, 45, 990, 152],
+    section_number: 1
+  }
+  // ... more sections
+];
+
+const translations = {
+  chevronsManagerTitle: 'Explore your document!',
+  sectionDetails: {
+    titleDefault: 'Explore your document!',
+    descriptionDefault: 'Click on different sections to see detailed information'
+  }
+};
+
+const MyComponent = () => (
+  <UTDocumentWizard
+    pages={pages}
+    sections={sections}
+    labels={labels}
+  />
+);
+```
+
+## Features
+
+- Interactive document navigation
+- Mobile-responsive design
+- Clickable sections with detailed information panels
+- Support for multiple pages
+- Customizable text labels

package/dist/components/UTDocumentWizard/components/ChevronsManager/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ChevronsManager = _ref => {
+  let {
+    prevDisabled,
+    nextDisabled,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    variant: "semitransparent",
+    colorTheme: "accent",
+    disabled: prevDisabled,
+    Icon: "IconArrowNarrowLeft",
+    onClick: () => onClick(_constants.PREV)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.marginRight
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    variant: "semitransparent",
+    colorTheme: "accent",
+    disabled: nextDisabled,
+    Icon: "IconArrowNarrowRight",
+    onClick: () => onClick(_constants.NEXT)
+  }));
+};
+ChevronsManager.propTypes = {
+  prevDisabled: _propTypes.bool,
+  nextDisabled: _propTypes.bool,
+  onClick: _propTypes.func
+};
+var _default = exports.default = ChevronsManager;

package/dist/components/UTDocumentWizard/components/ChevronsManager/styles.module.scss

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  max-width: 92px;
+}
+
+.marginRight {
+  margin-right: 12px;
+}

package/dist/components/UTDocumentWizard/components/PageWizard/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PageWizard = _ref => {
+  let {
+    canvasRef,
+    clickedSection,
+    isChangingTab,
+    isMobileSize,
+    isSheetOpen,
+    onSectionChange,
+    page,
+    sectionSelected,
+    sections
+  } = _ref;
+  const sectionsBadgeCoord = {};
+  const sectionsCoord = {};
+  const animations = (0, _react.useRef)({});
+  const isPointer = false;
+  const onClick = e => (0, _utils.handleCanvasClick)(e, canvasRef, onSectionChange, sectionsBadgeCoord, sectionsCoord);
+  const onMouseMove = e => (0, _utils.handleMouseMove)(e, canvasRef, sectionsBadgeCoord, sectionsCoord, isPointer);
+  (0, _react.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const image = new Image();
+    image.src = page.image;
+    image.onload = () => {
+      const scale = window.devicePixelRatio || 1;
+      canvas.width = image.width * scale;
+      canvas.height = image.height * scale;
+      canvas.style.width = "".concat(image.width, "px");
+      canvas.style.height = "".concat(image.height, "px");
+      ctx.scale(scale, scale);
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+      sections.map(section => (0, _utils.drawSection)(ctx, image, section, page, clickedSection, sectionsCoord, sectionsBadgeCoord, sectionSelected, animations, isSheetOpen, isMobileSize));
+    };
+  }, [page.image, sections, clickedSection, animations.current, isPointer, isSheetOpen]);
+  (0, _react.useEffect)(() => {
+    onSectionChange(null);
+  }, [page.image]);
+  return /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: canvasRef,
+    tabIndex: "0",
+    className: "".concat(_stylesModule.default.container, " ").concat(isChangingTab ? _stylesModule.default.displayNone : _stylesModule.default.displayFlex),
+    onClick: onClick,
+    onMouseMove: onMouseMove
+  });
+};
+PageWizard.propTypes = {
+  canvasRef: _propTypes.object,
+  clickedSection: _propTypes.string,
+  isChangingTab: _propTypes.bool,
+  isMobileSize: _propTypes.bool,
+  isSheetOpen: _propTypes.bool,
+  page: _propTypes.object,
+  sectionSelected: _propTypes.object,
+  sections: (0, _propTypes.arrayOf)({}),
+  onSectionChange: _propTypes.func
+};
+var _default = exports.default = PageWizard;

package/dist/components/UTDocumentWizard/components/PageWizard/styles.module.scss

@@ -0,0 +1,11 @@
+.container {
+  width: 100%;
+}
+
+.displayNone {
+  display: none;
+}
+
+.displayFlex {
+  display: flex;
+}

package/dist/components/UTDocumentWizard/components/PageWizard/utils.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMouseMove = exports.handleCanvasClick = exports.drawSection = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const drawRoundedStrokeRect = (ctx, x, y, width, height, radius) => {
+  ctx.fillStyle = 'rgba(37, 224, 166, 0.1)';
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.arcTo(x + width, y, x + width, y + height, radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+  ctx.lineTo(x + radius, y + height);
+  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+  ctx.lineTo(x, y + radius);
+  ctx.arcTo(x, y, x + radius, y, radius);
+  ctx.closePath();
+  ctx.fill();
+  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.lineWidth = 1;
+  ctx.stroke();
+};
+const resizeText = (ctx, text, maxWidth) => {
+  let fontSize = 24;
+  ctx.font = "600 ".concat(fontSize, "px Inter");
+  while (ctx.measureText(text).width > maxWidth && fontSize > 10) {
+    fontSize -= 1;
+    ctx.font = "600 ".concat(fontSize, "px Inter");
+  }
+  return fontSize;
+};
+const drawBadge = (ctx, x, y, radius, sectionLabel) => {
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(x, y, 24, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(37, 224, 166, 1)';
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = 'rgba(9, 30, 66, 1)';
+  const fontSize = resizeText(ctx, "".concat(sectionLabel), 48);
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText("".concat(sectionLabel), x, y + fontSize / 10);
+};
+const drawRoundedRect = (ctx, x, y, width, height, radius) => {
+  const PADDING_TITLE = 12;
+  ctx.beginPath();
+  ctx.arc(x - radius + PADDING_TITLE, y + radius, radius, Math.PI, 3 * Math.PI / 2);
+  ctx.arc(x + width - radius + PADDING_TITLE, y + radius, radius, -Math.PI / 2, 0);
+  ctx.arc(x + width - radius + PADDING_TITLE, y + height - radius, radius, 0, Math.PI / 2);
+  ctx.arc(x - radius + PADDING_TITLE, y + height - radius, radius, Math.PI / 2, Math.PI);
+  ctx.closePath();
+  ctx.fillStyle = 'rgb(255, 255, 255)';
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.beginPath();
+  ctx.moveTo(x - radius, y);
+  ctx.lineTo(x + PADDING_TITLE + width, y);
+  ctx.moveTo(x - radius, y + height);
+  ctx.lineTo(x + width - radius + PADDING_TITLE * 2, y + height);
+  ctx.stroke();
+};
+const drawBadgeSelected = (ctx, x, y, radius, sectionLabel, sectionTitle) => {
+  const fontSize = resizeText(ctx, "".concat(sectionLabel), 48);
+  const renderTitle = "".concat(sectionTitle);
+  const textMetrics = ctx.measureText(renderTitle);
+  const textWidth = textMetrics.width;
+  const INTERNAL_CIRCLE_SIZE = 24;
+  const PADDING_TITLE = 12;
+  const newX = x - (PADDING_TITLE + textWidth / 2);
+  ctx.beginPath();
+  ctx.arc(newX + PADDING_TITLE, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(newX + textWidth + PADDING_TITLE * 2, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.stroke();
+  drawRoundedRect(ctx, newX + PADDING_TITLE, y - 40, textWidth, radius * 2, Math.PI * 2);
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'middle';
+  ctx.fillStyle = 'rgba(9, 30, 66, 1)';
+  ctx.fillText(renderTitle, newX + textWidth + INTERNAL_CIRCLE_SIZE + PADDING_TITLE * 2, y + fontSize / 10);
+  ctx.beginPath();
+  ctx.arc(newX + PADDING_TITLE, y, INTERNAL_CIRCLE_SIZE, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(37, 224, 166, 1)';
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = 'rgba(9, 30, 66, 1)';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText("".concat(sectionLabel), newX + PADDING_TITLE, y + fontSize / 10);
+};
+const animateTransition = (ctx, image, sectionSelected, start, end, duration, onUpdate, isClickedSection, onComplete, animations, sectionId, isSheetOpen, isMobileSize) => {
+  var _animations$current;
+  if (!(0, _isEmpty.default)((_animations$current = animations.current) === null || _animations$current === void 0 ? void 0 : _animations$current[sectionId])) {
+    animations.current[sectionId].map(animationId => cancelAnimationFrame(animationId));
+    delete animations.current[sectionId];
+  }
+  let startTime;
+  const animate = timestamp => {
+    if (!startTime) startTime = timestamp;
+    const progress = Math.min((timestamp - startTime) / duration, 1);
+    const lerp = (a, b, t) => a + (b - a) * t;
+    const newPositions = {
+      x: lerp(start.x, end.x, progress),
+      y: lerp(start.y, end.y, progress),
+      radius: start.radius
+    };
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(newPositions.x - newPositions.radius, newPositions.y);
+    ctx.arcTo(newPositions.x + newPositions.radius, newPositions.y, newPositions.x + newPositions.radius, newPositions.y, newPositions.radius);
+    ctx.lineTo(newPositions.x + newPositions.radius + 10, newPositions.y + newPositions.radius * 2);
+    ctx.lineTo(newPositions.x - newPositions.radius - 10, newPositions.y + newPositions.radius * 2);
+    ctx.closePath();
+    ctx.clip();
+    ctx.drawImage(image, newPositions.x - newPositions.radius, newPositions.y - newPositions.radius, newPositions.radius * 2, newPositions.radius * 2 + 15, newPositions.x - newPositions.radius - 1, newPositions.y - newPositions.radius, newPositions.radius * 2 + 2, newPositions.radius * 2 + 15);
+    ctx.restore();
+    onUpdate(newPositions);
+    if (progress < 1 && !isMobileSize || progress < 1 && isSheetOpen && isMobileSize) {
+      animations.current[sectionId].push(requestAnimationFrame(animate));
+    } else {
+      if (isClickedSection) {
+        const x1Section = sectionSelected.section_coordinates[0];
+        const y1Section = sectionSelected.section_coordinates[1];
+        const x2Section = sectionSelected.section_coordinates[2];
+        const y2Section = sectionSelected.section_coordinates[3];
+        drawRoundedStrokeRect(ctx, x1Section, y1Section, x2Section - x1Section, y2Section - y1Section, 8);
+      }
+      if (onComplete) onComplete();
+    }
+  };
+  animations.current[sectionId] = [];
+  requestAnimationFrame(animate);
+};
+const drawSection = (ctx, image, section, actualPage, clickedSection, sectionsCoord, sectionsBadgeCoord, sectionSelected, animations, isSheetOpen, isMobileSize) => {
+  if (actualPage.id === section.page_id) {
+    const [x1, y1, x2, y2] = section.section_coordinates;
+    const width = x2 - x1;
+    const height = y2 - y1;
+    const isClickedSection = clickedSection === "".concat(section.id);
+    sectionsCoord[section.id] = {
+      x1,
+      y1,
+      width,
+      height,
+      radius: 8
+    };
+    const EXTERNAL_RADIUS = 40;
+    const xCircle = (x2 + x1) / 2;
+    const yCircle = isClickedSection ? y1 : (y2 + y1) / 2;
+    sectionsBadgeCoord[section.id] = {
+      x: xCircle,
+      y: yCircle,
+      radius: EXTERNAL_RADIUS
+    };
+    const initialPositions = {
+      x: xCircle,
+      y: (y2 + y1) / 2,
+      radius: EXTERNAL_RADIUS
+    };
+    const finalPositions = isClickedSection ? {
+      x: xCircle,
+      y: y1,
+      radius: EXTERNAL_RADIUS
+    } : initialPositions;
+    const timeAnimation = height < 300 ? 300 : 600;
+    animateTransition(ctx, image, sectionSelected, initialPositions, finalPositions, timeAnimation, newPositions => {
+      if (!isMobileSize || isMobileSize && isSheetOpen) drawBadge(ctx, newPositions.x, newPositions.y, newPositions.radius, section.label);
+    }, isClickedSection, () => {
+      if (isClickedSection) {
+        drawBadgeSelected(ctx, finalPositions.x, finalPositions.y, finalPositions.radius, section.label, section.title);
+      } else {
+        drawBadge(ctx, finalPositions.x, finalPositions.y, finalPositions.radius, section.label);
+      }
+    }, animations, section.id, isSheetOpen, isMobileSize);
+  }
+};
+exports.drawSection = drawSection;
+const handleCanvasClick = (e, canvasRef, onSectionChange, sectionsBadgeCoord, sectionsCoord) => {
+  const canvas = canvasRef.current;
+  const rect = canvas.getBoundingClientRect();
+  const xClick = e.clientX - rect.left;
+  const yClick = e.clientY - rect.top;
+  const onClick = key => {
+    onSectionChange(key);
+  };
+  Object.keys(sectionsBadgeCoord).forEach(key => {
+    const {
+      x,
+      y,
+      radius
+    } = sectionsBadgeCoord[key];
+    const distance = Math.sqrt((xClick - x) ** 2 + (yClick - y) ** 2);
+    if (distance <= radius) {
+      onClick(key);
+    }
+  });
+  Object.entries(sectionsCoord).forEach(_ref => {
+    let [key, {
+      x1,
+      y1,
+      width,
+      height,
+      radius
+    }] = _ref;
+    const isInsideRect = xClick >= x1 && xClick <= x1 + width && yClick >= y1 && yClick <= y1 + height;
+    const centerX = x1 + width / 2;
+    const centerY = y1 + height / 2;
+    const distance = Math.sqrt((xClick - centerX) ** 2 + (yClick - centerY) ** 2);
+    if (isInsideRect || distance <= radius) {
+      onClick(key);
+    }
+  });
+};
+exports.handleCanvasClick = handleCanvasClick;
+const handleMouseMove = (e, canvasRef, sectionsBadgeCoord, sectionsCoord, isPointer) => {
+  const canvas = canvasRef.current;
+  const rect = canvas.getBoundingClientRect();
+  const xMove = e.clientX - rect.left;
+  const yMove = e.clientY - rect.top;
+  Object.keys(sectionsBadgeCoord).forEach(key => {
+    const {
+      x,
+      y,
+      radius
+    } = sectionsBadgeCoord[key];
+    const distance = Math.sqrt((xMove - x) ** 2 + (yMove - y) ** 2);
+    if (distance <= radius) {
+      isPointer = true;
+    }
+  });
+  Object.entries(sectionsCoord).forEach(_ref2 => {
+    let [, {
+      x1,
+      y1,
+      width,
+      height,
+      radius
+    }] = _ref2;
+    const isInsideRect = xMove >= x1 && xMove <= x1 + width && yMove >= y1 && yMove <= y1 + height;
+    const centerX = x1 + width / 2;
+    const centerY = y1 + height / 2;
+    const distance = Math.sqrt((xMove - centerX) ** 2 + (yMove - centerY) ** 2);
+    if (isInsideRect || distance <= radius) {
+      isPointer = true;
+    }
+  });
+  canvas.style.cursor = isPointer ? 'pointer' : 'default';
+};
+exports.handleMouseMove = handleMouseMove;

package/dist/components/UTDocumentWizard/components/SectionDetails/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SectionDetails = _ref => {
+  let {
+    sectionSelected,
+    titleDefault,
+    descriptionDefault
+  } = _ref;
+  if (!sectionSelected) return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.containerDefault
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.iconContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    area: true,
+    colorTheme: "accent",
+    size: 32,
+    name: "IconClick"
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.titleDefault,
+    variant: "title3"
+  }, titleDefault), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "body",
+    className: _stylesModule.default.details
+  }, descriptionDefault));
+  const {
+    title,
+    description
+  } = sectionSelected;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.title,
+    variant: "title3"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "body"
+  }, description));
+};
+SectionDetails.propTypes = {
+  descriptionDefault: _propTypes.string,
+  sectionSelected: _propTypes.object,
+  titleDefault: _propTypes.string
+};
+var _default = exports.default = SectionDetails;

package/dist/components/UTDocumentWizard/components/SectionDetails/styles.module.scss

@@ -0,0 +1,49 @@
+@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.containerDefault {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 854px;
+  padding-left: 24px;
+  padding-top: 32px;
+  width: 40%;
+  @media #{$mobile} {
+    display: none;
+  }
+}
+
+.iconContainer {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 12px 12px 36px 12px;
+}
+
+.titleDefault {
+  padding-bottom: 8px;
+}
+
+.details {
+  color: #677489;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 854px;
+  padding-bottom: 24px;
+  padding-left: 24px;
+  width: 40%;
+  @media #{$mobile} {
+    display: none;
+  }
+}
+
+.title {
+  padding-bottom: 24px;
+}

package/dist/components/UTDocumentWizard/components/Sheet/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Sheet = _ref => {
+  let {
+    sectionSelected
+  } = _ref;
+  const {
+    title,
+    description
+  } = sectionSelected;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.swipeContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.swipe
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.title,
+    variant: "title3"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "secondary",
+    className: _stylesModule.default.description,
+    variant: "body"
+  }, description));
+};
+Sheet.propTypes = {
+  sectionSelected: _propTypes.object
+};
+var _default = exports.default = Sheet;

package/dist/components/UTDocumentWizard/components/Sheet/styles.module.scss

@@ -0,0 +1,27 @@
+.container {
+  min-height: 300px;
+  padding: 16px;
+}
+
+.title {
+  padding-bottom: 8px;
+}
+
+.description {
+  color: #677489;
+}
+
+.swipeContainer {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.swipe {
+  background-color: #F4F5F7;
+  border-radius: 100px;
+  height: 8px;
+  margin-bottom: 16px;
+  width: 65px;
+}

package/dist/components/UTDocumentWizard/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SLIDE_PROPS = exports.PREV = exports.NEXT = exports.LOADING_THICKNESS = exports.LOADING_SIZE = exports.LAST_OPTION_PROPS = void 0;
+const SLIDE_PROPS = exports.SLIDE_PROPS = {
+  style: {
+    borderTopLeftRadius: '16px',
+    borderTopRightRadius: '16px'
+  }
+};
+const LAST_OPTION_PROPS = exports.LAST_OPTION_PROPS = {
+  style: {
+    marginRight: '4px'
+  }
+};
+const LOADING_SIZE = exports.LOADING_SIZE = 80;
+const LOADING_THICKNESS = exports.LOADING_THICKNESS = 5;
+const NEXT = exports.NEXT = 'next';
+const PREV = exports.PREV = 'prev';

package/dist/components/UTDocumentWizard/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
+var _UTTabs = _interopRequireDefault(require("../UTTabs"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _UTSheet = _interopRequireDefault(require("../UTSheet"));
+var _useScreenSize = require("../../utils/useScreenSize");
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _ChevronsManager = _interopRequireDefault(require("./components/ChevronsManager"));
+var _PageWizard = _interopRequireDefault(require("./components/PageWizard"));
+var _SectionDetails = _interopRequireDefault(require("./components/SectionDetails"));
+var _Sheet = _interopRequireDefault(require("./components/Sheet"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTDocumentWizard = _ref => {
+  let {
+    sections,
+    pages,
+    labels
+  } = _ref;
+  const canvasRef = (0, _react.useRef)(null);
+  const tabsOptions = (0, _utils.getTabsOptions)(pages);
+  const [selectedTab, setSelectedTab] = (0, _react.useState)(tabsOptions[0].value);
+  const currentIndex = tabsOptions.findIndex(tab => tab.value === selectedTab);
+  const prevDisabled = currentIndex <= 0;
+  const nextDisabled = currentIndex >= tabsOptions.length - 1;
+  const changeTimeoutRef = (0, _react.useRef)(null);
+  const [isChangingTab, setIsChangingTab] = (0, _react.useState)(false);
+  const [clickedSection, setClickedSection] = (0, _react.useState)(null);
+  const sectionSelected = sections.find(section => "".concat(section.id) === clickedSection);
+  const onChangeTab = newTab => {
+    if (isChangingTab) return;
+    if (changeTimeoutRef.current) {
+      clearTimeout(changeTimeoutRef.current);
+      changeTimeoutRef.current = null;
+    }
+    setIsChangingTab(true);
+    changeTimeoutRef.current = setTimeout(() => {
+      const isSameTab = newTab === selectedTab;
+      if (isSameTab) {
+        setIsChangingTab(false);
+        changeTimeoutRef.current = null;
+        return;
+      }
+      setSelectedTab(newTab);
+      setIsChangingTab(false);
+      changeTimeoutRef.current = null;
+    }, 600);
+  };
+  const onTabChange = newTab => {
+    onChangeTab(newTab);
+  };
+  const onClick = direction => {
+    let newTab = null;
+    if (direction === _constants.PREV && !prevDisabled) {
+      newTab = tabsOptions[currentIndex - 1].value;
+    } else if (direction === _constants.NEXT && !nextDisabled) {
+      newTab = tabsOptions[currentIndex + 1].value;
+    }
+    if (newTab === selectedTab) return;
+    onChangeTab(newTab);
+  };
+  const containerRef = (0, _react.useRef)(null);
+  const actualPage = pages === null || pages === void 0 ? void 0 : pages.find(page => "".concat(page.id) === "".concat(selectedTab));
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (changeTimeoutRef.current) {
+        clearTimeout(changeTimeoutRef.current);
+      }
+    };
+  }, []);
+  const [sheetOpen, setSheetOpen] = (0, _react.useState)(false);
+  const {
+    isMobileSize
+  } = (0, _useScreenSize.useScreenSize)();
+  const onSectionChange = newSectionSelected => {
+    setClickedSection(newSectionSelected);
+    if (isMobileSize) setSheetOpen(!!newSectionSelected);
+  };
+  const toggleDrawer = option => {
+    if (isMobileSize) {
+      if (!option) {
+        var _canvasRef$current;
+        const ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
+        if (ctx) {
+          var _canvasRef$current2;
+          ctx.restore();
+          (_canvasRef$current2 = canvasRef.current) === null || _canvasRef$current2 === void 0 || _canvasRef$current2.focus();
+        }
+      }
+      setSheetOpen(option);
+    }
+  };
+  const SheetChildren = /*#__PURE__*/_react.default.createElement(_Sheet.default, {
+    sectionSelected: sectionSelected
+  });
+  const {
+    chevronsManagerTitle,
+    sectionDetails
+  } = labels;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.pageWizardContainer,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.pageManagerSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.slidePageManagerContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "title2"
+  }, chevronsManagerTitle), /*#__PURE__*/_react.default.createElement(_ChevronsManager.default, {
+    prevDisabled: prevDisabled,
+    nextDisabled: nextDisabled,
+    onClick: onClick
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.pageManagerContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTTabs.default, {
+    options: tabsOptions,
+    value: selectedTab,
+    onChange: onTabChange,
+    classes: {
+      tabsRoot: _stylesModule.default.tabs,
+      tabRoot: _stylesModule.default.tabRoot,
+      label: _stylesModule.default.tab,
+      selected: _stylesModule.default.selected,
+      indicator: _stylesModule.default.indicator
+    },
+    lastOptionProps: _constants.LAST_OPTION_PROPS
+  }))), /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    className: _stylesModule.default.scrollContainer
+  }, isChangingTab && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.loadingContainer
+  }, /*#__PURE__*/_react.default.createElement(_Loading.default, {
+    size: _constants.LOADING_SIZE,
+    thickness: _constants.LOADING_THICKNESS
+  })), !isChangingTab && /*#__PURE__*/_react.default.createElement(_PageWizard.default, {
+    clickedSection: clickedSection,
+    canvasRef: canvasRef,
+    containerRef: containerRef,
+    sectionSelected: sectionSelected,
+    sections: sections,
+    onSectionChange: onSectionChange,
+    page: actualPage,
+    isChangingTab: isChangingTab,
+    isSheetOpen: sheetOpen,
+    isMobileSize: isMobileSize
+  }))), /*#__PURE__*/_react.default.createElement(_SectionDetails.default, _extends({
+    sectionSelected: sectionSelected
+  }, sectionDetails))), /*#__PURE__*/_react.default.createElement(_UTSheet.default, {
+    SlideProps: _constants.SLIDE_PROPS,
+    anchor: "bottom",
+    open: sheetOpen,
+    toggleDrawer: toggleDrawer
+  }, SheetChildren));
+};
+UTDocumentWizard.propTypes = {
+  pages: (0, _propTypes.arrayOf)({}),
+  sections: (0, _propTypes.arrayOf)({}),
+  labels: _propTypes.object
+};
+var _default = exports.default = UTDocumentWizard;

package/dist/components/UTDocumentWizard/styles.module.scss

@@ -0,0 +1,115 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+$assigned-to-icon-size: 24px;
+
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 32px;
+
+  @media #{$mobile} {
+    flex-direction: column;
+  }
+}
+
+.tabs {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.tabRoot {
+  background-color: transparent;
+  color: rgba(103, 116, 137, 1);
+  height: 46px;
+  margin-left: 4px;
+  margin-right: 8px;
+  min-height: auto;
+  min-width: auto;
+  padding: 0;
+  text-transform: none;
+  transition: none;
+}
+
+.tab {
+  height: 100%;
+  margin-left: 4px;
+  margin-right: 8px;
+  transition: border-bottom 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.selected {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  box-shadow: 0px 3px 6px 0px rgba(40, 90, 255, 0.1);
+  color: rgba(1, 54, 231, 1);
+  width: 100%;
+}
+
+.indicator {
+  display: none;
+}
+
+.pageWizardContainer{
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: 'hidden';
+  width: 60%;
+  @media #{$mobile} {
+    align-items: center;
+    width: 100%;
+  }
+}
+
+.pageManagerSection {
+  margin-bottom: 24px;
+    width: 100%;
+}
+
+.pageManagerContainer {
+  padding-top: 8px;
+  width: 100%;
+  @media #{$mobile} {
+    display: none;
+  }
+}
+
+.slidePageManagerContainer {
+  display: none;
+  @media #{$mobile} {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-right: 12px;
+    padding: 6.5px 0px 6.5px 0px;
+  }
+}
+
+.icon {
+  background-color: rgba(233, 239, 255, 1);
+  border-radius: 4px;
+  border-width: 0;
+}
+
+.iconDisabled {
+  background-color: rgba(233, 239, 255, 0.5)
+}
+
+.loadingContainer {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  min-height: 800px;
+}
+
+.scrollContainer {
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+  width: 100%;
+}

package/dist/components/UTDocumentWizard/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTabsOptions = void 0;
+const getTabsOptions = pages => {
+  var _pages$map;
+  return (_pages$map = pages === null || pages === void 0 ? void 0 : pages.map(page => ({
+    label: page.name,
+    value: "".concat(page.id)
+  }))) !== null && _pages$map !== void 0 ? _pages$map : [];
+};
+exports.getTabsOptions = getTabsOptions;

package/dist/components/UTLabel/theme.js

@@ -16,7 +16,8 @@ const variantsColorTheme = (colorTheme, shade, theme) => {
   return colorThemeDefinition[colorShade] || _colorsModule.default.black;
 };
 const linkColor = (theme, colorTheme) => {
-  const actionPaletteColors = theme.Palette.actions || theme.Palette;
+  var _theme$Palette;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
   const color = colorTheme === _Palette.COLOR_THEMES.light ? actionPaletteColors.negative[_Palette.COLOR_SHADES.shade05] : colorTheme === _Palette.COLOR_THEMES.error ? actionPaletteColors.error[_Palette.COLOR_SHADES.shade05] : actionPaletteColors.neutral[_Palette.COLOR_SHADES.shade05];
   return color;
 };

package/dist/components/UTSheet/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@material-ui/core");
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTSheet = _ref => {
+  let {
+    anchor,
+    children,
+    open,
+    toggleDrawer,
+    SlideProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_core.SwipeableDrawer, {
+    SlideProps: SlideProps,
+    anchor: anchor,
+    open: open,
+    onClose: () => toggleDrawer(false),
+    onOpen: () => toggleDrawer(true)
+  }, children);
+};
+UTSheet.propTypes = {
+  anchor: _propTypes.string,
+  open: _propTypes.func,
+  toggleDrawer: _propTypes.func,
+  SlideProps: _propTypes.object
+};
+var _default = exports.default = UTSheet;

package/dist/components/UTTabs/index.js

@@ -37,6 +37,7 @@ class UTTabs extends _react.PureComponent {
       badges,
       classes: themeClasses,
       classNames,
+      lastOptionProps,
       options,
       tabProps,
       tabsProps,
@@ -63,6 +64,8 @@ class UTTabs extends _react.PureComponent {
         tooltip: opt.tooltip,
         tooltipProps: tabTooltipProps
       }))) : _constants.DEFAULT_TAB_COMPONENT;
+      const lastOption = i + 1 === options.length;
+      const lastOptionPropsFinal = lastOption && !!lastOptionProps ? lastOptionProps : {};
       return /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
         classes: {
           root: "".concat(styles.tabRoot, " ").concat(classes.tabRoot),
@@ -77,7 +80,7 @@ class UTTabs extends _react.PureComponent {
         icon: opt.icon,
         component: tabComponent,
         "data-testid": tabProps !== null && tabProps !== void 0 && tabProps.dataTestId ? "".concat(tabProps === null || tabProps === void 0 ? void 0 : tabProps.dataTestId).concat(i) : "".concat(tabId).concat(i)
-      }, tabProps));
+      }, tabProps, lastOptionPropsFinal));
     }), !(0, _array.isEmpty)(badges) && badges.map(badge => /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(badge.styles, " ").concat(!badge.show && _stylesModule.default.hiddenBadge)
     })));
@@ -105,6 +108,7 @@ UTTabs.propTypes = {
     label: _propTypes.string
   }),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  lastOptionProps: _propTypes.object,
   onChange: _propTypes.func.isRequired,
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     label: _propTypes.string,

package/dist/index.js

@@ -147,6 +147,12 @@ Object.defineProperty(exports, "UTDialog", {
     return _UTDialog.default;
   }
 });
+Object.defineProperty(exports, "UTDocumentWizard", {
+  enumerable: true,
+  get: function () {
+    return _UTDocumentWizard.default;
+  }
+});
 Object.defineProperty(exports, "UTDotMenu", {
   enumerable: true,
   get: function () {
@@ -535,4 +541,5 @@ var _UTVirtualKeyboard = _interopRequireDefault(require("./components/UTVirtualK
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
 var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
+var _UTDocumentWizard = _interopRequireDefault(require("./components/UTDocumentWizard"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

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