@widergy/energy-ui 3.173.2 → 3.173.4

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

@@ -1,94 +1 @@
-"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 _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const PageWizard = _ref => {
-  let {
-    canvasRef,
-    classNames,
-    clickedSection,
-    isChangingTab,
-    isMobileSize,
-    isSheetOpen,
-    onSectionChange,
-    page,
-    scaleConfig = {
-      extraSpacingLeft: _constants.DEFAULT_SPACING_LEFT,
-      extraSpacingRight: _constants.DEFAULT_SPACING_RIGHT,
-      extraSpacingTop: _constants.DEFAULT_SPACING_TOP,
-      extraSpacingBottom: _constants.DEFAULT_SPACING_BOTTOM,
-      scale: _constants.DEFAULT_SCALE
-    },
-    sectionSelected,
-    sections
-  } = _ref;
-  const sectionsBadgeCoord = {};
-  const sectionsCoord = {};
-  const animations = (0, _react.useRef)({});
-  const isPointer = false;
-  const {
-    extraSpacingLeft,
-    extraSpacingRight,
-    extraSpacingTop,
-    extraSpacingBottom,
-    scale
-  } = scaleConfig;
-  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 dpi = window.devicePixelRatio || 1;
-      const userScale = scale;
-      const padLeft = extraSpacingLeft;
-      const padRight = extraSpacingRight;
-      const padTop = extraSpacingTop;
-      const padBottom = extraSpacingBottom;
-      canvas.width = (image.width + padLeft + padRight) * dpi;
-      canvas.height = (image.height + padTop + padBottom) * dpi;
-      canvas.style.width = "".concat((image.width + padLeft + padRight) * userScale, "px");
-      canvas.style.height = "".concat((image.height + padTop + padBottom) * userScale, "px");
-      ctx.setTransform(dpi, 0, 0, dpi, padLeft, padTop);
-      ctx.clearRect(-padLeft, -padTop, canvas.width, canvas.height);
-      ctx.drawImage(image, 0, 0);
-      sections.forEach(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(classNames === null || classNames === void 0 ? void 0 : classNames.canvasContainer, " ").concat(isChangingTab ? _stylesModule.default.displayNone : _stylesModule.default.displayFlex),
-    onClick: onClick,
-    onMouseMove: onMouseMove
-  });
-};
-PageWizard.propTypes = {
-  canvasRef: _propTypes.object,
-  classNames: _propTypes.object,
-  clickedSection: _propTypes.string,
-  isChangingTab: _propTypes.bool,
-  isMobileSize: _propTypes.bool,
-  isSheetOpen: _propTypes.bool,
-  page: _propTypes.object,
-  scaleConfig: _propTypes.object,
-  sectionSelected: _propTypes.object,
-  sections: (0, _propTypes.arrayOf)({}),
-  onSectionChange: _propTypes.func
-};
-var _default = exports.default = PageWizard;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _propTypes=require("prop-types"),_react=_interopRequireWildcard(require("react")),_utils=require("./utils"),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,r,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?o:a){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((r=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(r.get||r.set)?n(s,t,r):s[t]=e[t]);return s})(e,t)}const PageWizard=e=>{let{canvasRef:t,classNames:a,clickedSection:o,isChangingTab:n,isMobileSize:r,isSheetOpen:s,onSectionChange:i,page:c,scaleConfig:p={extraSpacingLeft:_constants.DEFAULT_SPACING_LEFT,extraSpacingRight:_constants.DEFAULT_SPACING_RIGHT,extraSpacingTop:_constants.DEFAULT_SPACING_TOP,extraSpacingBottom:_constants.DEFAULT_SPACING_BOTTOM,scale:_constants.DEFAULT_SCALE},sectionSelected:l,sections:u}=e;const _={},d={},f=(0,_react.useRef)({}),g=!1,{extraSpacingLeft:y,extraSpacingRight:h,extraSpacingTop:T,extraSpacingBottom:S,scale:b}=p;return(0,_react.useEffect)(()=>{const e=t.current;if(!e)return;const a=e.getContext("2d"),n=new Image;n.src=c.image,n.onload=()=>{const t=window.devicePixelRatio||1,i=b,p=y,g=h,x=T,M=S;e.width=(n.width+p+g)*t,e.height=(n.height+x+M)*t,e.style.width="".concat((n.width+p+g)*i,"px"),e.style.height="".concat((n.height+x+M)*i,"px"),a.setTransform(t,0,0,t,p,x),a.clearRect(-p,-x,e.width,e.height),a.drawImage(n,0,0),u.forEach(e=>(0,_utils.drawSection)(a,n,e,c,o,d,_,l,f,s,r))}},[c.image,u,o,f.current,g,s]),(0,_react.useEffect)(()=>{i(null)},[c.image]),_react.default.createElement("canvas",{ref:t,tabIndex:"0",className:"".concat(_stylesModule.default.container," ").concat(null==a?void 0:a.canvasContainer," ").concat(n?_stylesModule.default.displayNone:_stylesModule.default.displayFlex),onClick:e=>(0,_utils.handleCanvasClick)(e,t,i,_,d),onMouseMove:e=>(0,_utils.handleMouseMove)(e,t,_,d,g)})};PageWizard.propTypes={canvasRef:_propTypes.object,classNames:_propTypes.object,clickedSection:_propTypes.string,isChangingTab:_propTypes.bool,isMobileSize:_propTypes.bool,isSheetOpen:_propTypes.bool,page:_propTypes.object,scaleConfig:_propTypes.object,sectionSelected:_propTypes.object,sections:(0,_propTypes.arrayOf)({}),onSectionChange:_propTypes.func};var _default=exports.default=PageWizard;

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

@@ -1,286 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.handleMouseMove = exports.handleCanvasClick = exports.drawSection = void 0;
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _colorUtils = require("../../../../utils/colorUtils");
-var _classesUtils = require("../../../../utils/classesUtils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const drawRoundedStrokeRect = (ctx, x, y, width, height, radius) => {
-  ctx.save();
-  ctx.globalAlpha = 0.1;
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 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.restore();
-  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
-  ctx.lineWidth = 1;
-  ctx.stroke();
-};
-const resizeText = (ctx, text, maxWidth) => {
-  const fontFamily = (0, _classesUtils.resolveCssValue)('var(--fontFamily)') || 'Inter';
-  let fontSize = 14;
-  ctx.font = "600 ".concat(fontSize, "px ").concat(fontFamily);
-  while (ctx.measureText(text).width > maxWidth && fontSize > 10) {
-    fontSize -= 1;
-    ctx.font = "600 ".concat(fontSize, "px ").concat(fontFamily);
-  }
-  return fontSize;
-};
-const drawBadge = (ctx, x, y, radius, sectionLabel) => {
-  ctx.beginPath();
-  ctx.arc(x, y, radius, 0, Math.PI * 2);
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--light01', 'rgba(255, 255, 255, 1)');
-  ctx.fill();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(x, y, 14, 0, Math.PI * 2);
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
-  ctx.fill();
-  ctx.stroke();
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--dark05', '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, yProps, width, height, radius) => {
-  const PADDING_TITLE = 12;
-  const y = yProps + 18;
-  ctx.beginPath();
-  ctx.arc(x - radius + PADDING_TITLE, y + radius, radius, Math.PI, 3 * Math.PI / 2);
-  ctx.arc(x + width - radius + PADDING_TITLE + 2, 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 = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
-  ctx.beginPath();
-  ctx.moveTo(x - radius + 4, y);
-  ctx.lineTo(x + PADDING_TITLE + width, y);
-  ctx.moveTo(x - radius + 4, y + height);
-  ctx.lineTo(x + width - radius + PADDING_TITLE * 2 - 4, 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 = 14;
-  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 = (0, _colorUtils.getColorValue)('--light01', 'rgba(255, 255, 255, 1)');
-  ctx.fill();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(newX + textWidth + PADDING_TITLE * 2, y, radius, 0, Math.PI * 2);
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--light01', 'rgba(255, 255, 255, 1)');
-  ctx.fill();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', '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 = (0, _colorUtils.getColorValue)('--dark05', 'rgba(9, 30, 66, 1)');
-  ctx.fillText(renderTitle, newX + textWidth + INTERNAL_CIRCLE_SIZE + PADDING_TITLE * 2 - 4, y + fontSize / 10);
-  ctx.beginPath();
-  ctx.arc(newX + PADDING_TITLE, y, INTERNAL_CIRCLE_SIZE, 0, Math.PI * 2);
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
-  ctx.fill();
-  ctx.stroke();
-  ctx.fillStyle = (0, _colorUtils.getColorValue)('--dark05', '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 = 22;
-    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 ctx = canvas.getContext('2d');
-  const rect = canvas.getBoundingClientRect();
-  const px = (e.clientX - rect.left) * (canvas.width / rect.width);
-  const py = (e.clientY - rect.top) * (canvas.height / rect.height);
-  const inv = ctx.getTransform().invertSelf();
-  const point = new DOMPoint(px, py).matrixTransform(inv);
-  const xClick = point.x;
-  const yClick = point.y;
-  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 ctx = canvas.getContext('2d');
-  const rect = canvas.getBoundingClientRect();
-  const px = (e.clientX - rect.left) * (canvas.width / rect.width);
-  const py = (e.clientY - rect.top) * (canvas.height / rect.height);
-  const inv = ctx.getTransform().invertSelf();
-  const point = new DOMPoint(px, py).matrixTransform(inv);
-  const xMove = point.x;
-  const yMove = point.y;
-  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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleMouseMove=exports.handleCanvasClick=exports.drawSection=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_colorUtils=require("../../../../utils/colorUtils"),_classesUtils=require("../../../../utils/classesUtils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const drawRoundedStrokeRect=(e,t,i,o,l,r)=>{e.save(),e.globalAlpha=.1,e.fillStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.beginPath(),e.moveTo(t+r,i),e.lineTo(t+o-r,i),e.arcTo(t+o,i,t+o,i+l,r),e.lineTo(t+o,i+l-r),e.arcTo(t+o,i+l,t+o-r,i+l,r),e.lineTo(t+r,i+l),e.arcTo(t,i+l,t,i+l-r,r),e.lineTo(t,i+r),e.arcTo(t,i,t+r,i,r),e.closePath(),e.fill(),e.restore(),e.strokeStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.lineWidth=1,e.stroke()},resizeText=(e,t,i)=>{const o=(0,_classesUtils.resolveCssValue)("var(--fontFamily)")||"Inter";let l=14;for(e.font="600 ".concat(l,"px ").concat(o);e.measureText(t).width>i&&l>10;)l-=1,e.font="600 ".concat(l,"px ").concat(o);return l},drawBadge=(e,t,i,o,l)=>{e.beginPath(),e.arc(t,i,o,0,2*Math.PI),e.fillStyle=(0,_colorUtils.getColorValue)("--light01","rgba(255, 255, 255, 1)"),e.fill(),e.lineWidth=1,e.strokeStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.stroke(),e.beginPath(),e.arc(t,i,14,0,2*Math.PI),e.fillStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.fill(),e.stroke(),e.fillStyle=(0,_colorUtils.getColorValue)("--dark05","rgba(9, 30, 66, 1)");const r=resizeText(e,"".concat(l),48);e.textAlign="center",e.textBaseline="middle",e.fillText("".concat(l),t,i+r/10)},drawRoundedRect=(e,t,i,o,l,r)=>{const a=12,n=i+18;e.beginPath(),e.arc(t-r+a,n+r,r,Math.PI,3*Math.PI/2),e.arc(t+o-r+a+2,n+r,r,-Math.PI/2,0),e.arc(t+o-r+a,n+l-r,r,0,Math.PI/2),e.arc(t-r+a,n+l-r,r,Math.PI/2,Math.PI),e.closePath(),e.fillStyle="rgb(255, 255, 255)",e.fill(),e.lineWidth=1,e.strokeStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.beginPath(),e.moveTo(t-r+4,n),e.lineTo(t+a+o,n),e.moveTo(t-r+4,n+l),e.lineTo(t+o-r+24-4,n+l),e.stroke()},drawBadgeSelected=(e,t,i,o,l,r)=>{const a=resizeText(e,"".concat(l),48),n="".concat(r),s=e.measureText(n).width,d=12,c=t-(d+s/2);e.beginPath(),e.arc(c+d,i,o,0,2*Math.PI),e.fillStyle=(0,_colorUtils.getColorValue)("--light01","rgba(255, 255, 255, 1)"),e.fill(),e.lineWidth=1,e.strokeStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.stroke(),e.beginPath(),e.arc(c+s+24,i,o,0,2*Math.PI),e.fillStyle=(0,_colorUtils.getColorValue)("--light01","rgba(255, 255, 255, 1)"),e.fill(),e.lineWidth=1,e.strokeStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.stroke(),drawRoundedRect(e,c+d,i-40,s,2*o,2*Math.PI),e.textAlign="right",e.textBaseline="middle",e.fillStyle=(0,_colorUtils.getColorValue)("--dark05","rgba(9, 30, 66, 1)"),e.fillText(n,c+s+14+24-4,i+a/10),e.beginPath(),e.arc(c+d,i,14,0,2*Math.PI),e.fillStyle=(0,_colorUtils.getColorValue)("--identitySolidTone3","rgba(37, 224, 166, 1)"),e.fill(),e.stroke(),e.fillStyle=(0,_colorUtils.getColorValue)("--dark05","rgba(9, 30, 66, 1)"),e.textAlign="center",e.textBaseline="middle",e.fillText("".concat(l),c+d,i+a/10)},animateTransition=(e,t,i,o,l,r,a,n,s,d,c,u,h)=>{var g;let y;(0,_isEmpty.default)(null===(g=d.current)||void 0===g?void 0:g[c])||(d.current[c].map(e=>cancelAnimationFrame(e)),delete d.current[c]);const x=g=>{y||(y=g);const f=Math.min((g-y)/r,1),T=(e,t,i)=>e+(t-e)*i,b={x:T(o.x,l.x,f),y:T(o.y,l.y,f),radius:o.radius};if(e.save(),e.beginPath(),e.moveTo(b.x-b.radius,b.y),e.arcTo(b.x+b.radius,b.y,b.x+b.radius,b.y,b.radius),e.lineTo(b.x+b.radius+10,b.y+2*b.radius),e.lineTo(b.x-b.radius-10,b.y+2*b.radius),e.closePath(),e.clip(),e.drawImage(t,b.x-b.radius,b.y-b.radius,2*b.radius,2*b.radius+15,b.x-b.radius-1,b.y-b.radius,2*b.radius+2,2*b.radius+15),e.restore(),a(b),f<1&&!h||f<1&&u&&h)d.current[c].push(requestAnimationFrame(x));else{if(n){const t=i.section_coordinates[0],o=i.section_coordinates[1],l=i.section_coordinates[2],r=i.section_coordinates[3];drawRoundedStrokeRect(e,t,o,l-t,r-o,8)}s&&s()}};d.current[c]=[],requestAnimationFrame(x)},drawSection=(e,t,i,o,l,r,a,n,s,d,c)=>{if(o.id===i.page_id){const[o,u,h,g]=i.section_coordinates,y=h-o,x=g-u,f=l==="".concat(i.id);r[i.id]={x1:o,y1:u,width:y,height:x,radius:8};const T=22,b=(h+o)/2,S=f?u:(g+u)/2;a[i.id]={x:b,y:S,radius:T};const _={x:b,y:(g+u)/2,radius:T},m=f?{x:b,y:u,radius:T}:_;animateTransition(e,t,n,_,m,x<300?300:600,t=>{(!c||c&&d)&&drawBadge(e,t.x,t.y,t.radius,i.label)},f,()=>{f?drawBadgeSelected(e,m.x,m.y,m.radius,i.label,i.title):drawBadge(e,m.x,m.y,m.radius,i.label)},s,i.id,d,c)}};exports.drawSection=drawSection;const handleCanvasClick=(e,t,i,o,l)=>{const r=t.current,a=r.getContext("2d"),n=r.getBoundingClientRect(),s=(e.clientX-n.left)*(r.width/n.width),d=(e.clientY-n.top)*(r.height/n.height),c=a.getTransform().invertSelf(),u=new DOMPoint(s,d).matrixTransform(c),h=u.x,g=u.y,y=e=>{i(e)};Object.keys(o).forEach(e=>{const{x:t,y:i,radius:l}=o[e];Math.sqrt((h-t)**2+(g-i)**2)<=l&&y(e)}),Object.entries(l).forEach(e=>{let[t,{x1:i,y1:o,width:l,height:r,radius:a}]=e;const n=h>=i&&h<=i+l&&g>=o&&g<=o+r,s=i+l/2,d=o+r/2,c=Math.sqrt((h-s)**2+(g-d)**2);(n||c<=a)&&y(t)})};exports.handleCanvasClick=handleCanvasClick;const handleMouseMove=(e,t,i,o,l)=>{const r=t.current,a=r.getContext("2d"),n=r.getBoundingClientRect(),s=(e.clientX-n.left)*(r.width/n.width),d=(e.clientY-n.top)*(r.height/n.height),c=a.getTransform().invertSelf(),u=new DOMPoint(s,d).matrixTransform(c),h=u.x,g=u.y;Object.keys(i).forEach(e=>{const{x:t,y:o,radius:r}=i[e];Math.sqrt((h-t)**2+(g-o)**2)<=r&&(l=!0)}),Object.entries(o).forEach(e=>{let[,{x1:t,y1:i,width:o,height:r,radius:a}]=e;const n=h>=t&&h<=t+o&&g>=i&&g<=i+r,s=t+o/2,d=i+r/2,c=Math.sqrt((h-s)**2+(g-d)**2);(n||c<=a)&&(l=!0)}),r.style.cursor=l?"pointer":"default"};exports.handleMouseMove=handleMouseMove;

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

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

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

@@ -1,38 +1 @@
-"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: "gray",
-    variant: "body",
-    withMarkdown: true
-  }, description));
-};
-Sheet.propTypes = {
-  sectionSelected: _propTypes.object
-};
-var _default = exports.default = Sheet;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _propTypes=require("prop-types"),_react=_interopRequireDefault(require("react")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const Sheet=e=>{let{sectionSelected:t}=e;const{title:a,description:l}=t;return _react.default.createElement("div",{className:_stylesModule.default.container},_react.default.createElement("div",{className:_stylesModule.default.swipeContainer},_react.default.createElement("div",{className:_stylesModule.default.swipe})),_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.title,variant:"title3"},a),_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"body",withMarkdown:!0},l))};Sheet.propTypes={sectionSelected:_propTypes.object};var _default=exports.default=Sheet;

package/dist/components/UTDocumentWizard/constants.js

@@ -1,19 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SLIDE_PROPS = exports.PREV = exports.NEXT = 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 NEXT = exports.NEXT = 'next';
-const PREV = exports.PREV = 'prev';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SLIDE_PROPS=exports.PREV=exports.NEXT=exports.LAST_OPTION_PROPS=void 0;const SLIDE_PROPS=exports.SLIDE_PROPS={style:{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}},LAST_OPTION_PROPS=exports.LAST_OPTION_PROPS={style:{marginRight:"4px"}},NEXT=exports.NEXT="next",PREV=exports.PREV="prev";