@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTGraph/utils.js

@@ -1 +1,159 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getValuesMapByCategory=exports.getSeriesForSide=exports.getRowList=exports.getClusters=exports.detectAxisSides=exports.computeMainAxisExtentNumerical=exports.computeCrossAxisDomainForSide=exports.computeCrossAxisDomain=exports.applyHeadroom=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const computeCrossAxisDomain=(tab,dataset)=>{if(!dataset)return[0,1];const{yMin:yMin,yMax:yMax}=dataset.domain.reduce((acc,record)=>{const clusterMaxValues=tab.subitems.map(cluster=>{const typeGroups=cluster.reduce((groups,series)=>(groups[series.type]||(groups[series.type]=[]),groups[series.type].push(series),groups),{}),typeSums=Object.entries(typeGroups).map(_ref=>{let[type,typeSeries]=_ref;return{type:type,positiveSum:typeSeries.map(series=>{var _record$concepts$find,_record$concepts$find2;return null!==(_record$concepts$find=null===(_record$concepts$find2=record.concepts.find(datum=>datum.code===series.bindings.range))||void 0===_record$concepts$find2?void 0:_record$concepts$find2.value)&&void 0!==_record$concepts$find?_record$concepts$find:0}).filter(Number.isFinite).reduce((sum,v)=>v>=0?sum+v:sum,0),negativeSum:typeSeries.map(series=>{var _record$concepts$find3,_record$concepts$find4;return null!==(_record$concepts$find3=null===(_record$concepts$find4=record.concepts.find(datum=>datum.code===series.bindings.range))||void 0===_record$concepts$find4?void 0:_record$concepts$find4.value)&&void 0!==_record$concepts$find3?_record$concepts$find3:0}).filter(Number.isFinite).reduce((sum,v)=>v<0?sum+v:sum,0)}});return{positiveSum:Math.max(...typeSums.map(g=>g.positiveSum)),negativeSum:Math.min(...typeSums.map(g=>g.negativeSum))}}),maxPos=Math.max(...clusterMaxValues.map(g=>g.positiveSum),acc.yMax);return{yMin:Math.min(...clusterMaxValues.map(g=>g.negativeSum),acc.yMin),yMax:maxPos}},{yMin:0,yMax:0});return 0===yMax&&0===yMin?[0,1]:[Math.min(0,yMin),Math.max(0,yMax)]};exports.computeCrossAxisDomain=computeCrossAxisDomain;const computeCrossAxisDomainForSide=(tab,dataset,side)=>{const filteredTab={...tab,subitems:tab.subitems.map(cluster=>cluster.filter(series=>(series.range||_constants.LEFT_SIDE)===side))};return filteredTab.subitems=filteredTab.subitems.filter(cluster=>cluster.length>0),computeCrossAxisDomain(filteredTab,dataset)};exports.computeCrossAxisDomainForSide=computeCrossAxisDomainForSide;const applyHeadroom=function(_ref2){let[min,max]=_ref2,{padBottom:padBottom=0,padTop:padTop=.08}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return[min*(1-padBottom),max*(1+padTop)]};exports.applyHeadroom=applyHeadroom;const getValuesMapByCategory=dataset=>{const map=new Map;return dataset?(dataset.domain.forEach(record=>{map.set(record.domain_value,Object.fromEntries(record.concepts.map(datum=>[datum.code,datum.value])))}),map):map};exports.getValuesMapByCategory=getValuesMapByCategory;const detectAxisSides=tab=>{let hasLeft=!1,hasRight=!1;return tab.subitems.forEach(cluster=>{cluster.forEach(s=>{if(s.type===_constants.LINE_TYPE||s.type===_constants.BAR_TYPE||s.type===_constants.POINT_TYPE){const side=s.range||_constants.LEFT_SIDE;side===_constants.LEFT_SIDE&&(hasLeft=!0),side===_constants.RIGHT_SIDE&&(hasRight=!0)}})}),{hasLeft:hasLeft,hasRight:hasRight}};exports.detectAxisSides=detectAxisSides;const computeMainAxisExtentNumerical=(tab,dataset)=>{if(!tab||!dataset)return[0,1];const domainCodes=new Set;if(tab.subitems.forEach(cluster=>cluster.forEach(series=>{var _series$bindings;const code=null==series||null===(_series$bindings=series.bindings)||void 0===_series$bindings?void 0:_series$bindings.domain;code&&domainCodes.add(code)})),0===domainCodes.size)return[0,1];let min=Number.POSITIVE_INFINITY,max=Number.NEGATIVE_INFINITY;return dataset.domain.forEach(record=>{const dict=Object.fromEntries(record.concepts.map(d=>[d.code,d.value]));domainCodes.forEach(code=>{const v=dict[code];Number.isFinite(v)&&(v<min&&(min=v),v>max&&(max=v))})}),Number.isFinite(min)&&Number.isFinite(max)&&min!==max?[min,max]:[0,1]};exports.computeMainAxisExtentNumerical=computeMainAxisExtentNumerical;const getRowList=dataset=>dataset&&Array.isArray(dataset.domain)?dataset.domain.map(record=>Object.fromEntries(record.concepts.map(d=>[d.code,d.value]))):[];exports.getRowList=getRowList;const getSeriesForSide=(series,side)=>series.filter(s=>(s.range||_constants.LEFT_SIDE)===side).map(s=>{var _s$bindings,_s$bindings2,_s$bindings3,_s$bindings4;return{rangeCode:null===(_s$bindings=s.bindings)||void 0===_s$bindings?void 0:_s$bindings.range,domainCode:null===(_s$bindings2=s.bindings)||void 0===_s$bindings2?void 0:_s$bindings2.domain,sizeCode:null===(_s$bindings3=s.bindings)||void 0===_s$bindings3?void 0:_s$bindings3.size,colorCode:null===(_s$bindings4=s.bindings)||void 0===_s$bindings4?void 0:_s$bindings4.color}});exports.getSeriesForSide=getSeriesForSide;const getClusters=(tab,type)=>tab.subitems.map(cluster=>{const series=cluster.filter(s=>s.type===type);return{leftItems:getSeriesForSide(series,_constants.LEFT_SIDE),rightItems:getSeriesForSide(series,_constants.RIGHT_SIDE)}}).filter(_ref3=>{let{leftItems:leftItems,rightItems:rightItems}=_ref3;return!(0,_isEmpty.default)(leftItems)||!(0,_isEmpty.default)(rightItems)});exports.getClusters=getClusters;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValuesMapByCategory = exports.getSeriesForSide = exports.getRowList = exports.getClusters = exports.detectAxisSides = exports.computeMainAxisExtentNumerical = exports.computeCrossAxisDomainForSide = exports.computeCrossAxisDomain = exports.applyHeadroom = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const computeCrossAxisDomain = (tab, dataset) => {
+  if (!dataset) return [0, 1];
+  const {
+    yMin,
+    yMax
+  } = dataset.domain.reduce((acc, record) => {
+    const clusterMaxValues = tab.subitems.map(cluster => {
+      const typeGroups = cluster.reduce((groups, series) => {
+        if (!groups[series.type]) groups[series.type] = [];
+        groups[series.type].push(series);
+        return groups;
+      }, {});
+      const typeSums = Object.entries(typeGroups).map(_ref => {
+        let [type, typeSeries] = _ref;
+        const positiveSum = typeSeries.map(series => {
+          var _record$concepts$find, _record$concepts$find2;
+          return (_record$concepts$find = (_record$concepts$find2 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find2 === void 0 ? void 0 : _record$concepts$find2.value) !== null && _record$concepts$find !== void 0 ? _record$concepts$find : 0;
+        }).filter(Number.isFinite).reduce((sum, v) => v >= 0 ? sum + v : sum, 0);
+        const negativeSum = typeSeries.map(series => {
+          var _record$concepts$find3, _record$concepts$find4;
+          return (_record$concepts$find3 = (_record$concepts$find4 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find4 === void 0 ? void 0 : _record$concepts$find4.value) !== null && _record$concepts$find3 !== void 0 ? _record$concepts$find3 : 0;
+        }).filter(Number.isFinite).reduce((sum, v) => v < 0 ? sum + v : sum, 0);
+        return {
+          type,
+          positiveSum,
+          negativeSum
+        };
+      });
+      return {
+        positiveSum: Math.max(...typeSums.map(g => g.positiveSum)),
+        negativeSum: Math.min(...typeSums.map(g => g.negativeSum))
+      };
+    });
+    const maxPos = Math.max(...clusterMaxValues.map(g => g.positiveSum), acc.yMax);
+    const minNeg = Math.min(...clusterMaxValues.map(g => g.negativeSum), acc.yMin);
+    return {
+      yMin: minNeg,
+      yMax: maxPos
+    };
+  }, {
+    yMin: 0,
+    yMax: 0
+  });
+  if (yMax === 0 && yMin === 0) return [0, 1];
+  return [Math.min(0, yMin), Math.max(0, yMax)];
+};
+exports.computeCrossAxisDomain = computeCrossAxisDomain;
+const computeCrossAxisDomainForSide = (tab, dataset, side) => {
+  const filteredTab = {
+    ...tab,
+    subitems: tab.subitems.map(cluster => cluster.filter(series => (series.range || _constants.LEFT_SIDE) === side))
+  };
+  filteredTab.subitems = filteredTab.subitems.filter(cluster => cluster.length > 0);
+  return computeCrossAxisDomain(filteredTab, dataset);
+};
+exports.computeCrossAxisDomainForSide = computeCrossAxisDomainForSide;
+const applyHeadroom = function (_ref2) {
+  let [min, max] = _ref2;
+  let {
+    padBottom = 0,
+    padTop = 0.08
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return [min * (1 - padBottom), max * (1 + padTop)];
+};
+exports.applyHeadroom = applyHeadroom;
+const getValuesMapByCategory = dataset => {
+  const map = new Map();
+  if (!dataset) return map;
+  dataset.domain.forEach(record => {
+    map.set(record.domain_value, Object.fromEntries(record.concepts.map(datum => [datum.code, datum.value])));
+  });
+  return map;
+};
+exports.getValuesMapByCategory = getValuesMapByCategory;
+const detectAxisSides = tab => {
+  let hasLeft = false;
+  let hasRight = false;
+  tab.subitems.forEach(cluster => {
+    cluster.forEach(s => {
+      if (s.type === _constants.LINE_TYPE || s.type === _constants.BAR_TYPE || s.type === _constants.POINT_TYPE) {
+        const side = s.range || _constants.LEFT_SIDE;
+        if (side === _constants.LEFT_SIDE) hasLeft = true;
+        if (side === _constants.RIGHT_SIDE) hasRight = true;
+      }
+    });
+  });
+  return {
+    hasLeft,
+    hasRight
+  };
+};
+exports.detectAxisSides = detectAxisSides;
+const computeMainAxisExtentNumerical = (tab, dataset) => {
+  if (!tab || !dataset) return [0, 1];
+  const domainCodes = new Set();
+  tab.subitems.forEach(cluster => cluster.forEach(series => {
+    var _series$bindings;
+    const code = series === null || series === void 0 || (_series$bindings = series.bindings) === null || _series$bindings === void 0 ? void 0 : _series$bindings.domain;
+    if (code) domainCodes.add(code);
+  }));
+  if (domainCodes.size === 0) return [0, 1];
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  dataset.domain.forEach(record => {
+    const dict = Object.fromEntries(record.concepts.map(d => [d.code, d.value]));
+    domainCodes.forEach(code => {
+      const v = dict[code];
+      if (Number.isFinite(v)) {
+        if (v < min) min = v;
+        if (v > max) max = v;
+      }
+    });
+  });
+  if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+    return [0, 1];
+  }
+  return [min, max];
+};
+exports.computeMainAxisExtentNumerical = computeMainAxisExtentNumerical;
+const getRowList = dataset => {
+  if (!dataset || !Array.isArray(dataset.domain)) return [];
+  return dataset.domain.map(record => Object.fromEntries(record.concepts.map(d => [d.code, d.value])));
+};
+exports.getRowList = getRowList;
+const getSeriesForSide = (series, side) => series.filter(s => (s.range || _constants.LEFT_SIDE) === side).map(s => {
+  var _s$bindings, _s$bindings2, _s$bindings3, _s$bindings4;
+  return {
+    rangeCode: (_s$bindings = s.bindings) === null || _s$bindings === void 0 ? void 0 : _s$bindings.range,
+    domainCode: (_s$bindings2 = s.bindings) === null || _s$bindings2 === void 0 ? void 0 : _s$bindings2.domain,
+    sizeCode: (_s$bindings3 = s.bindings) === null || _s$bindings3 === void 0 ? void 0 : _s$bindings3.size,
+    colorCode: (_s$bindings4 = s.bindings) === null || _s$bindings4 === void 0 ? void 0 : _s$bindings4.color
+  };
+});
+exports.getSeriesForSide = getSeriesForSide;
+const getClusters = (tab, type) => tab.subitems.map(cluster => {
+  const series = cluster.filter(s => s.type === type);
+  const leftItems = getSeriesForSide(series, _constants.LEFT_SIDE);
+  const rightItems = getSeriesForSide(series, _constants.RIGHT_SIDE);
+  return {
+    leftItems,
+    rightItems
+  };
+}).filter(_ref3 => {
+  let {
+    leftItems,
+    rightItems
+  } = _ref3;
+  return !(0, _isEmpty.default)(leftItems) || !(0, _isEmpty.default)(rightItems);
+});
+exports.getClusters = getClusters;

package/dist/components/UTHeader/README.md

@@ -0,0 +1,27 @@
+# UTHeader
+
+### Description
+
+This component displays a series of texts in different variants. It also handles a dropdown menu for actions in the top right corner
+
+## Props
+
+| Name              | Type             | Default | Description                                                                                                                                                              |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| actions           | actionType       |         | Actions to be displayed in a dropdown menu at the top right corner, the first one that has the prop `main` as true will be displayed next to the menu with its own icon. |
+| banner            | bannerType       |         | If present, it will render a banner at the bottom.                                                                                                                       |
+| classes           | object of string |         | Classes returned by UTHeader's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                              |
+| classNames        | object of string |         | Additional classes.                                                                                                                                                      |
+| helpText          | string           |         | Text that will be rendered above the banner.                                                                                                                             |
+| requiredFieldInfo | string           |         | Text to display as a helper for required fields, it will be rendered below the description.                                                                              |
+| subtitle          | string           |         | Text that will be rendered below the title.                                                                                                                              |
+| tagline           | string           |         | Text that will be rendered in uppercase on top of the title.                                                                                                             |
+| title             | string           |         | Text that will be rendered between the stages and the content.                                                                                                           |
+| TitleIcon         | element          |         | Icon that will be rendered on top of the title.                                                                                                                          |
+
+### Custom Types
+
+| Type       | Shape                                                         |
+| ---------- | ------------------------------------------------------------- |
+| actionType | `{ label: string, onClick: func, main: bool, Icon: element }` |
+| bannerType | `{ Icon: element, text: string }`                             |

package/dist/components/UTHeader/index.js

@@ -1 +1,192 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTBanner=_interopRequireDefault(require("../UTBanner")),_classesUtils=require("../../utils/classesUtils"),_UTMenu=_interopRequireDefault(require("../UTMenu")),_UTButton=_interopRequireDefault(require("../UTButton")),_theme=require("./theme"),_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)}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)}var Ellipsis=function(props){return _react.default.createElement("svg",props,_react.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"}))};Ellipsis.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};var Edit=function(props){return _react.default.createElement("svg",props,_react.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"}))};Edit.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};const UTHeader=_ref=>{var _titleProps$variant,_titleProps$weight;let{actions:actions,banner:banner,classNames:classNames,classes:themeClasses={},helpText:helpText,helpTextDataTestId:helpTextDataTestId,isLastStep:isLastStep,requiredFieldInfo:requiredFieldInfo,requiredFieldInfoDataTestId:requiredFieldInfoDataTestId,subtitle:subtitle,subtitleDataTestId:subtitleDataTestId,tagline:tagline,taglineDataTestId:taglineDataTestId,title:title,titleDataTestId:titleDataTestId,TitleIcon:TitleIcon,titleProps:titleProps}=_ref;const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(themeClasses,classNames),[classNames]),mainAction=actions.find(action=>action.main),moreActions=actions.filter((_action,index)=>index!==actions.indexOf(mainAction)),MainIcon=(null==mainAction?void 0:mainAction.Icon)||Edit,hasHeader=tagline||title||subtitle||requiredFieldInfo||helpText||banner,[menuAnchor,setMenuAnchor]=(0,_react.useState)(),renderComponent=(prop,standardComponent)=>_react.default.isValidElement(prop)?prop:standardComponent,Tagline=renderComponent(tagline,_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.stepTitle,colorTheme:"gray",dataTestId:taglineDataTestId,variant:"small",weight:"medium"},tagline)),Title=renderComponent(title,_react.default.createElement(_UTLabel.default,_extends({className:"".concat(_stylesModule.default.title," ").concat(titleProps.className),dataTestId:titleDataTestId,variant:null!==(_titleProps$variant=titleProps.variant)&&void 0!==_titleProps$variant?_titleProps$variant:"title2",weight:null!==(_titleProps$weight=titleProps.weight)&&void 0!==_titleProps$weight?_titleProps$weight:"medium"},titleProps,{withMarkdown:!0}),title)),Subtitle=renderComponent(subtitle,_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.subtitle,colorTheme:"gray",dataTestId:subtitleDataTestId,variant:"body",withMarkdown:!0},subtitle)),RequiredFieldInfo=renderComponent(requiredFieldInfo,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:requiredFieldInfoDataTestId,variant:"small",withMarkdown:!0},requiredFieldInfo)),HelpText=renderComponent(helpText,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:helpTextDataTestId,variant:"small"},helpText));return _react.default.createElement("div",{className:classes.outerContainer},_react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(!hasHeader&&_stylesModule.default.containerMargin," ")},_react.default.createElement("div",{className:"".concat(_stylesModule.default.header," ").concat((null==banner?void 0:banner.text)&&_stylesModule.default.bottomPadding)},tagline&&!isLastStep&&Tagline,_react.default.createElement("div",{className:"".concat(_stylesModule.default.titles," ").concat(classes.titles)},_react.default.createElement("div",{className:_stylesModule.default.titleAndActionsContainer},TitleIcon&&_react.default.createElement(TitleIcon,{className:classes.titleIcon}),Title,!(0,_isEmpty.default)(actions)&&_react.default.createElement("div",{className:_stylesModule.default.actionsContainer},mainAction&&(mainAction.Component?_react.default.createElement(mainAction.Component,null):_react.default.createElement(_UTButton.default,{colorTheme:"primary",Icon:MainIcon,onClick:mainAction.onClick,variant:"text"})),!(0,_isEmpty.default)(moreActions)&&_react.default.createElement("div",null,_react.default.createElement(_UTButton.default,{onClick:event=>setMenuAnchor(event.target),variant:"text",Icon:Ellipsis}),_react.default.createElement(_UTMenu.default,{anchor:menuAnchor,items:moreActions.map(_ref2=>{let{label:label,onClick:onClick}=_ref2;return{key:label,label:label,onClick:onClick}}),menuPlacement:"bottom-end",onClose:()=>setMenuAnchor()})))),subtitle&&Subtitle),requiredFieldInfo&&RequiredFieldInfo,helpText&&HelpText),(null==banner?void 0:banner.text)&&_react.default.createElement(_UTBanner.default,{classNames:{infoContainer:_stylesModule.default.bannerContainer},iconProps:{height:"20px",width:"20px"},Icon:banner.Icon,title:banner.text})))};UTHeader.propTypes={actions:(0,_propTypes.arrayOf)(_propTypes.object),banner:(0,_propTypes.shape)({Icon:_propTypes.object,text:_propTypes.string}),classNames:(0,_propTypes.objectOf)(_propTypes.string),classes:(0,_propTypes.objectOf)(_propTypes.string),helpText:_propTypes.string,helpTextDataTestId:_propTypes.string,isLastStep:_propTypes.bool,requiredFieldInfo:_propTypes.string,requiredFieldInfoDataTestId:_propTypes.string,subtitle:_propTypes.string,subtitleDataTestId:_propTypes.string,tagline:_propTypes.string,taglineDataTestId:_propTypes.string,title:_propTypes.string,titleDataTestId:_propTypes.string,TitleIcon:_propTypes.element,titleProps:(0,_propTypes.shape)({align:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,dataTestId:_propTypes.string,markdownRenderers:(0,_propTypes.objectOf)(_propTypes.func),title:_propTypes.string,variant:_propTypes.string,withMarkdown:_propTypes.bool})};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTHeader);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTBanner = _interopRequireDefault(require("../UTBanner"));
+var _classesUtils = require("../../utils/classesUtils");
+var _UTMenu = _interopRequireDefault(require("../UTMenu"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _theme = require("./theme");
+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); }
+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); }
+var Ellipsis = function Ellipsis(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
+  }));
+};
+Ellipsis.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var Edit = function Edit(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"
+  }));
+};
+Edit.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const UTHeader = _ref => {
+  var _titleProps$variant, _titleProps$weight;
+  let {
+    actions,
+    banner,
+    classNames,
+    classes: themeClasses = {},
+    helpText,
+    helpTextDataTestId,
+    isLastStep,
+    requiredFieldInfo,
+    requiredFieldInfoDataTestId,
+    subtitle,
+    subtitleDataTestId,
+    tagline,
+    taglineDataTestId,
+    title,
+    titleDataTestId,
+    TitleIcon,
+    titleProps
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const mainAction = actions.find(action => action.main);
+  const moreActions = actions.filter((_action, index) => index !== actions.indexOf(mainAction));
+  const MainIcon = (mainAction === null || mainAction === void 0 ? void 0 : mainAction.Icon) || Edit;
+  const hasHeader = tagline || title || subtitle || requiredFieldInfo || helpText || banner;
+  const [menuAnchor, setMenuAnchor] = (0, _react.useState)();
+  const openMenu = event => setMenuAnchor(event.target);
+  const closeMenu = () => setMenuAnchor();
+  const BANNER_ICON_SIZE = '20px';
+  const renderComponent = (prop, standardComponent) => /*#__PURE__*/_react.default.isValidElement(prop) ? prop : standardComponent;
+  const Tagline = renderComponent(tagline, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.stepTitle,
+    colorTheme: "gray",
+    dataTestId: taglineDataTestId,
+    variant: "small",
+    weight: "medium"
+  }, tagline));
+  const Title = renderComponent(title, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: "".concat(_stylesModule.default.title, " ").concat(titleProps.className),
+    dataTestId: titleDataTestId,
+    variant: (_titleProps$variant = titleProps.variant) !== null && _titleProps$variant !== void 0 ? _titleProps$variant : 'title2',
+    weight: (_titleProps$weight = titleProps.weight) !== null && _titleProps$weight !== void 0 ? _titleProps$weight : 'medium'
+  }, titleProps, {
+    withMarkdown: true
+  }), title));
+  const Subtitle = renderComponent(subtitle, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.subtitle,
+    colorTheme: "gray",
+    dataTestId: subtitleDataTestId,
+    variant: "body",
+    withMarkdown: true
+  }, subtitle));
+  const RequiredFieldInfo = renderComponent(requiredFieldInfo, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    dataTestId: requiredFieldInfoDataTestId,
+    variant: "small",
+    withMarkdown: true
+  }, requiredFieldInfo));
+  const HelpText = renderComponent(helpText, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    dataTestId: helpTextDataTestId,
+    variant: "small"
+  }, helpText));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.outerContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(!hasHeader && _stylesModule.default.containerMargin, " ")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && _stylesModule.default.bottomPadding)
+  }, tagline && !isLastStep && Tagline, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.titles, " ").concat(classes.titles)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titleAndActionsContainer
+  }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
+    className: classes.titleIcon
+  }), Title, !(0, _isEmpty.default)(actions) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsContainer
+  }, mainAction && (mainAction.Component ? /*#__PURE__*/_react.default.createElement(mainAction.Component, null) : /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "primary",
+    Icon: MainIcon,
+    onClick: mainAction.onClick,
+    variant: "text"
+  })), !(0, _isEmpty.default)(moreActions) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    onClick: openMenu,
+    variant: "text",
+    Icon: Ellipsis
+  }), /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+    anchor: menuAnchor,
+    items: moreActions.map(_ref2 => {
+      let {
+        label,
+        onClick
+      } = _ref2;
+      return {
+        key: label,
+        label,
+        onClick
+      };
+    }),
+    menuPlacement: "bottom-end",
+    onClose: closeMenu
+  })))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/_react.default.createElement(_UTBanner.default, {
+    classNames: {
+      infoContainer: _stylesModule.default.bannerContainer
+    },
+    iconProps: {
+      height: BANNER_ICON_SIZE,
+      width: BANNER_ICON_SIZE
+    },
+    Icon: banner.Icon,
+    title: banner.text
+  })));
+};
+UTHeader.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_propTypes.object),
+  banner: (0, _propTypes.shape)({
+    Icon: _propTypes.object,
+    text: _propTypes.string
+  }),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  helpText: _propTypes.string,
+  helpTextDataTestId: _propTypes.string,
+  isLastStep: _propTypes.bool,
+  requiredFieldInfo: _propTypes.string,
+  requiredFieldInfoDataTestId: _propTypes.string,
+  subtitle: _propTypes.string,
+  subtitleDataTestId: _propTypes.string,
+  tagline: _propTypes.string,
+  taglineDataTestId: _propTypes.string,
+  title: _propTypes.string,
+  titleDataTestId: _propTypes.string,
+  TitleIcon: _propTypes.element,
+  titleProps: (0, _propTypes.shape)({
+    align: _propTypes.string,
+    classes: (0, _propTypes.objectOf)(_propTypes.string),
+    className: _propTypes.string,
+    dataTestId: _propTypes.string,
+    markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
+    title: _propTypes.string,
+    variant: _propTypes.string,
+    withMarkdown: _propTypes.bool
+  })
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTHeader);

package/dist/components/UTHeader/theme.js

@@ -1 +1,21 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;const retrieveStyle=_ref=>{var _theme$UTWorkflowCont,_theme$Palette$action;let{theme:theme}=_ref;return{titleIcon:{color:null===(_theme$UTWorkflowCont=theme.UTWorkflowContainer)||void 0===_theme$UTWorkflowCont||null===(_theme$UTWorkflowCont=_theme$UTWorkflowCont.titleIcon)||void 0===_theme$UTWorkflowCont?void 0:_theme$UTWorkflowCont.color},mainAction:{fill:(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action||null===(_theme$Palette$action=_theme$Palette$action.accent)||void 0===_theme$Palette$action?void 0:_theme$Palette$action["04"])||theme.Palette.accent["04"]}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    titleIcon: {
+      color: (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.titleIcon) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.color
+    },
+    mainAction: {
+      fill: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 || (_theme$Palette$action = _theme$Palette$action.accent) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action['04']) || theme.Palette.accent['04']
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTIcon/README.md

@@ -0,0 +1,73 @@
+# UTIcon
+
+### Description
+
+Icon component using Tabler Icons library.
+
+### Name
+
+The icon name must be with the first letter of each word in uppercase.
+
+### Props
+
+| Name       | Description                                                                                                                                         |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| area       | padding around the icon is shown when it is true. (Default: false).                                                                                 |
+| name       | The name of the icon in TablerIcons                                                                                                                 |
+| classname  | The classname to aplied to the Icon                                                                                                                 |
+| colorTheme | The icon color                                                                                                                                      |
+| dataTestId | Icon's data-testid                                                                                                                                  |
+| shade      | The icon color shade                                                                                                                                |
+| size       | The icon size in px                                                                                                                                 |
+| variant    | It depends on the `area` property and defines whether it should be displayed filled (`default`) or just with a border (`outlined`) around the icon. |
+
+## Fill Theme (optional)
+
+The `fillTheme` prop could be one of these values:
+
+- `accent`
+- `dark`
+- `error`
+- `gray`
+- `information`
+- `light`
+- `negative`
+- `neutral`
+- `success`
+- `warning`
+
+Clarifications:
+
+- Note that not all icons look good with an internal fill color.
+
+## Fill Shade (optional)
+
+The `fillShade` prop must be one of these:
+
+- `01`
+- `02`
+- `03`
+- `04`
+- `05`
+
+Clarifications:
+
+- The default shade is '02' (if 'fillTheme' exists).
+
+### Usage
+
+```javascript
+import React from 'react';
+import { UTIcon } from '@widergy/energy-ui';
+import styles from './styles.module.scss';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <UTIcon name="IconArrowLeft" colorTheme="dark" size={48} className={styles.iconClassname} />
+    </div>
+  );
+};
+
+export default MyComponent;
+```