@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTBaseInputField/index.js

@@ -1 +1,187 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.propTypes=exports.default=void 0;var _propTypes=require("prop-types"),_react=_interopRequireWildcard(require("react")),_TextField=_interopRequireDefault(require("@material-ui/core/TextField")),_classesUtils=require("../../utils/classesUtils"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_constants=require("./constants"),_theme=require("./theme"),_utils=require("./utils"),_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)}const UTBaseInputField=_ref=>{let{autocomplete:autocomplete,classes:theme,classNames:classNames={},dataKeyboard:dataKeyboard,dataTestId:dataTestId,disabled:disabled,error:error,id:id,inputRef:inputRef,leftAdornments:leftAdornments=[],maxLength:maxLength,maxRows:maxRows=1,minRows:minRows,muiProps:muiProps,name:name,onBlur:onBlur,onChange:onChange=()=>{},onFocus:onFocus,onKeyDown:onKeyDown=()=>{},placeholder:placeholder,readOnly:readOnly,rightAdornments:rightAdornments=[],showCharacterCount:showCharacterCount,type:type,value:value=null}=_ref;const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(theme,classNames),[classNames,theme]),[focused,setFocused]=(0,_react.useState)(!1),handleFocus=(0,_react.useCallback)(event=>{setFocused(!0),null==onFocus||onFocus(event)},[onFocus]),handleBlur=(0,_react.useCallback)(event=>{setFocused(!1),null==onBlur||onBlur(event)},[onBlur]),handleChange=(0,_react.useCallback)(event=>{const inputValue=event.target.value;if("numeric"===type){const numericValue=inputValue.replace(/\D/g,"");null==onChange||onChange(numericValue)}else null==onChange||onChange(inputValue)},[onChange,type]),handleKeyDown=(0,_react.useCallback)(event=>{const allowedKey=["Backspace","ArrowLeft","ArrowRight","Delete","Tab","Enter"].includes(event.key),isNumericKey=/^[0-9]$/.test(event.key);"numeric"!==type||isNumericKey||allowedKey?allowedKey||event.stopPropagation():event.preventDefault(),onKeyDown(event)},[type]),multiline=maxRows>1,hasCharactersCount=(0,_react.useMemo)(()=>showCharacterCount&&maxLength&&!disabled&&!readOnly,[showCharacterCount,maxLength,disabled,readOnly]),validLeftAdornments=(0,_react.useMemo)(()=>(0,_utils.validateAdornments)(leftAdornments)?leftAdornments:[],[leftAdornments]),validRightAdornments=(0,_react.useMemo)(()=>(0,_utils.validateAdornments)(rightAdornments)?rightAdornments:[],[rightAdornments]),renderAdornment=(0,_react.useCallback)(adornment=>{const Component=_constants.COMPONENTS_MAPPER[adornment.name],adornmentProps={...adornment.props,error:error,focused:focused,disabled:disabled&&!readOnly,classNames:adornment.name===_constants.COMPONENT_KEYS.ACTION?{root:_stylesModule.default.actionButton}:void 0};return Component?_react.default.createElement(Component,_extends({},adornmentProps,{key:adornment.key||adornment.name})):null},[error,disabled,readOnly,focused]);return _react.default.createElement(_TextField.default,_extends({autocomplete:autocomplete||"new-password",className:classes.container,disabled:disabled||readOnly,error:error,form:{autocomplete:"off"},id:id,inputRef:inputRef,margin:"none",maxRows:maxRows,minRows:minRows||maxRows,multiline:multiline,onBlur:handleBlur,onChange:handleChange,onFocus:handleFocus,onKeyDown:handleKeyDown,placeholder:placeholder,type:"numeric"===type?"text":type,value:value,variant:"outlined"},muiProps,{InputProps:{inputProps:{autocomplete:autocomplete,"data-testid":dataTestId,"data-keyboard":dataKeyboard,maxLength:maxLength,name:name,readOnly:readOnly,...null==muiProps?void 0:muiProps.inputProps},classes:{adornedEnd:_stylesModule.default.elementsContainer,adornedStart:_stylesModule.default.elementsContainer,input:classes.input,notchedOutline:"".concat(classes.inputContainer," ").concat(focused&&classes.focusedInputContainer),root:"".concat(classes.root," ").concat(focused&&classes.focusedRoot," ").concat(value&&classes.withValueRoot)},startAdornment:validLeftAdornments.length>0?_react.default.createElement("div",{className:_stylesModule.default.adornmentsContainer},validLeftAdornments.map(renderAdornment)):hasCharactersCount&&_react.default.createElement(_UTLabel.default,{className:classes.charactersCount,colorTheme:"gray",variant:"small"},(null==value?void 0:value.length)||0,"/",maxLength),endAdornment:validRightAdornments.length>0&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.adornmentsContainer," ").concat(multiline&&_stylesModule.default.multilineAdornmentsContainer)},validRightAdornments.map(renderAdornment)),...null==muiProps?void 0:muiProps.InputProps}}))},propTypes=exports.propTypes={alwaysShowPlaceholder:_propTypes.bool,autocomplete:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),dataKeyboard:_propTypes.string,dataTestId:_propTypes.string,disabled:_propTypes.bool,error:(0,_propTypes.oneOfType)([_propTypes.bool,_propTypes.string]),id:_propTypes.string,inputRef:(0,_propTypes.oneOfType)([_propTypes.func,(0,_propTypes.shape)({current:(0,_propTypes.instanceOf)(Element)})]),leftAdornments:(0,_propTypes.arrayOf)((0,_propTypes.shape)({name:_propTypes.string.isRequired,props:_propTypes.object})),maxLength:_propTypes.number,maxRows:_propTypes.number,minRows:_propTypes.number,muiProps:(0,_propTypes.shape)({inputProps:_propTypes.object,InputProps:_propTypes.object}),name:_propTypes.string,onBlur:_propTypes.func,onChange:_propTypes.func,onFocus:_propTypes.func,onKeyDown:_propTypes.func,placeholder:_propTypes.string,readOnly:_propTypes.bool,rightAdornments:(0,_propTypes.arrayOf)((0,_propTypes.shape)({name:_propTypes.string.isRequired,props:_propTypes.object})),showCharacterCount:_propTypes.bool,type:_propTypes.string,value:_propTypes.string,variant:_propTypes.string};UTBaseInputField.propTypes=propTypes;var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTBaseInputField);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _classesUtils = require("../../utils/classesUtils");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _constants = require("./constants");
+var _theme = require("./theme");
+var _utils = require("./utils");
+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); }
+const UTBaseInputField = _ref => {
+  let {
+    autocomplete,
+    classes: theme,
+    classNames = {},
+    dataKeyboard,
+    dataTestId,
+    disabled,
+    error,
+    id,
+    inputRef,
+    leftAdornments = [],
+    maxLength,
+    maxRows = 1,
+    minRows,
+    muiProps,
+    name,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    onKeyDown = () => {},
+    placeholder,
+    readOnly,
+    rightAdornments = [],
+    showCharacterCount,
+    type,
+    value = null
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const handleFocus = (0, _react.useCallback)(event => {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 || onFocus(event);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(event => {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 || onBlur(event);
+  }, [onBlur]);
+  const handleChange = (0, _react.useCallback)(event => {
+    const inputValue = event.target.value;
+    if (type === 'numeric') {
+      const numericValue = inputValue.replace(/\D/g, '');
+      onChange === null || onChange === void 0 || onChange(numericValue);
+    } else {
+      onChange === null || onChange === void 0 || onChange(inputValue);
+    }
+  }, [onChange, type]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    const allowedKey = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab', 'Enter'].includes(event.key);
+    const isNumericKey = /^[0-9]$/.test(event.key);
+    if (type === 'numeric' && !isNumericKey && !allowedKey) event.preventDefault();else if (!allowedKey) event.stopPropagation();
+    onKeyDown(event);
+  }, [type]);
+  const multiline = maxRows > 1;
+  const hasCharactersCount = (0, _react.useMemo)(() => showCharacterCount && maxLength && !disabled && !readOnly, [showCharacterCount, maxLength, disabled, readOnly]);
+  const validLeftAdornments = (0, _react.useMemo)(() => (0, _utils.validateAdornments)(leftAdornments) ? leftAdornments : [], [leftAdornments]);
+  const validRightAdornments = (0, _react.useMemo)(() => (0, _utils.validateAdornments)(rightAdornments) ? rightAdornments : [], [rightAdornments]);
+  const renderAdornment = (0, _react.useCallback)(adornment => {
+    const Component = _constants.COMPONENTS_MAPPER[adornment.name];
+    const adornmentProps = {
+      ...adornment.props,
+      error,
+      focused,
+      disabled: disabled && !readOnly,
+      classNames: adornment.name === _constants.COMPONENT_KEYS.ACTION ? {
+        root: _stylesModule.default.actionButton
+      } : undefined
+    };
+    return Component ? /*#__PURE__*/_react.default.createElement(Component, _extends({}, adornmentProps, {
+      key: adornment.key || adornment.name
+    })) : null;
+  }, [error, disabled, readOnly, focused]);
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
+    autocomplete: autocomplete || 'new-password',
+    className: classes.container,
+    disabled: disabled || readOnly,
+    error: error,
+    form: {
+      autocomplete: 'off'
+    },
+    id: id,
+    inputRef: inputRef,
+    margin: "none",
+    maxRows: maxRows,
+    minRows: minRows || maxRows,
+    multiline: multiline,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    placeholder: placeholder,
+    type: type === 'numeric' ? 'text' : type,
+    value: value,
+    variant: "outlined"
+  }, muiProps, {
+    InputProps: {
+      inputProps: {
+        autocomplete,
+        'data-testid': dataTestId,
+        'data-keyboard': dataKeyboard,
+        maxLength,
+        name,
+        readOnly,
+        ...(muiProps === null || muiProps === void 0 ? void 0 : muiProps.inputProps)
+      },
+      classes: {
+        adornedEnd: _stylesModule.default.elementsContainer,
+        adornedStart: _stylesModule.default.elementsContainer,
+        input: classes.input,
+        notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
+        root: "".concat(classes.root, " ").concat(focused && classes.focusedRoot, " ").concat(value && classes.withValueRoot)
+      },
+      startAdornment: validLeftAdornments.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _stylesModule.default.adornmentsContainer
+      }, validLeftAdornments.map(renderAdornment)) : hasCharactersCount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        className: classes.charactersCount,
+        colorTheme: "gray",
+        variant: "small"
+      }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", maxLength),
+      endAdornment: validRightAdornments.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_stylesModule.default.adornmentsContainer, " ").concat(multiline && _stylesModule.default.multilineAdornmentsContainer)
+      }, validRightAdornments.map(renderAdornment)),
+      ...(muiProps === null || muiProps === void 0 ? void 0 : muiProps.InputProps)
+    }
+  }));
+};
+const propTypes = exports.propTypes = {
+  alwaysShowPlaceholder: _propTypes.bool,
+  autocomplete: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataKeyboard: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  error: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string]),
+  id: _propTypes.string,
+  inputRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
+    current: (0, _propTypes.instanceOf)(Element)
+  })]),
+  leftAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string.isRequired,
+    props: _propTypes.object
+  })),
+  maxLength: _propTypes.number,
+  maxRows: _propTypes.number,
+  minRows: _propTypes.number,
+  muiProps: (0, _propTypes.shape)({
+    inputProps: _propTypes.object,
+    InputProps: _propTypes.object
+  }),
+  name: _propTypes.string,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  onKeyDown: _propTypes.func,
+  placeholder: _propTypes.string,
+  readOnly: _propTypes.bool,
+  rightAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string.isRequired,
+    props: _propTypes.object
+  })),
+  showCharacterCount: _propTypes.bool,
+  type: _propTypes.string,
+  value: _propTypes.string,
+  variant: _propTypes.string
+};
+UTBaseInputField.propTypes = propTypes;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBaseInputField);

package/dist/components/UTBaseInputField/theme.js

@@ -1 +1,197 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _theme=require("../UTLabel/theme"),_utils=require("./utils");const charactersCountRowHeight=20,PADDING={HORIZONTAL:16,VERTICAL:12},SMALL_PADDING={HORIZONTAL:12,VERTICAL:8},GRID_GAP=16,getPaddingValues=inputSize=>{const vertical="small"===inputSize?SMALL_PADDING.VERTICAL:PADDING.VERTICAL,horizontal="small"===inputSize?SMALL_PADDING.HORIZONTAL:PADDING.HORIZONTAL,multiline=vertical+16+20;return{verticalPadding:"".concat(vertical,"px"),horizontalPadding:"".concat(horizontal,"px"),multilineVerticalPadding:"".concat(multiline,"px")}},getBackgroundColor=_ref=>{let{theme:theme,variant:variant,error:error,disabled:disabled,readOnly:readOnly}=_ref;return readOnly?"transparent":"gray"===variant?theme.Palette.light["04"]:"transparent"===variant&&error?theme.Palette.error["01"]:"transparent"===variant?"transparent":disabled?theme.Palette.light["03"]:theme.Palette.light["01"]},getBorderColor=_ref2=>{let{theme:theme,variant:variant,error:error,readOnly:readOnly,disabled:disabled}=_ref2;return"gray"===variant||"transparent"===variant||readOnly||disabled?"transparent !important":"".concat(error?theme.Palette.error["04"]:theme.Palette.light["05"]," !important")},getBackgroundColorOnHover=_ref3=>{let{theme:theme,variant:variant,error:error,readOnly:readOnly}=_ref3;return"gray"===variant?theme.Palette.light["05"]:"transparent"===variant&&error?theme.Palette.error["02"]:readOnly?void 0:theme.Palette.light["03"]},retrieveStyle=_ref4=>{let{alwaysShowPlaceholder:alwaysShowPlaceholder,disabled:receivedDisabled,error:error,inputSize:inputSize,maxLength:maxLength,readOnly:readOnly,showCharacterCount:showCharacterCount,theme:theme,variant:variant}=_ref4;const disabled=receivedDisabled&&!readOnly,hasCharactersCount=showCharacterCount&&maxLength&&!disabled&&!readOnly,actionPalette=(0,_utils.getActionPalette)(theme),{verticalPadding:verticalPadding,horizontalPadding:horizontalPadding,multilineVerticalPadding:multilineVerticalPadding}=getPaddingValues(inputSize);return{charactersCount:{bottom:verticalPadding,position:"absolute"},root:{backgroundColor:getBackgroundColor({theme:theme,variant:variant,error:error,disabled:disabled,readOnly:readOnly}),paddingBottom:hasCharactersCount?multilineVerticalPadding:verticalPadding,paddingLeft:horizontalPadding,paddingRight:horizontalPadding,paddingTop:verticalPadding,...readOnly&&{paddingLeft:0,paddingRight:0},"&:hover":{backgroundColor:getBackgroundColorOnHover({theme:theme,variant:variant,error:error,readOnly:readOnly})},"&:active":{...!disabled&&!readOnly&&{backgroundColor:theme.Palette.light["01"],"& $inputContainer":{borderColor:"".concat(error?theme.Palette.error["04"]:actionPalette["04"]," !important"),borderWidth:"2px"},"& $input":{"&::placeholder":{color:"".concat(theme.Palette.gray["02"]," !important"),opacity:1}}}}},inputContainer:{borderColor:getBorderColor({theme:theme,variant:variant,error:error,readOnly:readOnly,disabled:disabled}),borderRadius:"4px",borderWidth:"1px"},focusedRoot:{backgroundColor:"transparent"===variant?theme.Palette.light["03"]:theme.Palette.light["01"],"&:hover":{backgroundColor:"transparent"===variant?theme.Palette.light["03"]:theme.Palette.light["01"]}},withValueRoot:{..."transparent"===variant&&!error&&{backgroundColor:"transparent"}},focusedInputContainer:{..."transparent"!==variant&&!error&&{borderColor:"".concat(actionPalette["04"]," !important"),borderWidth:"2px"},..."transparent"!==variant&&error&&{borderColor:"".concat(theme.Palette.error["04"]," !important")}},input:{...(0,_theme.getFontStyles)({theme:theme,variant:"body",weight:"regular"}),caretColor:actionPalette["04"],color:theme.Palette.dark["05"],minHeight:"22px",overflow:"auto",padding:0,textOverflow:"ellipsis","&::placeholder":{color:"transparent"!==variant||disabled?theme.Palette.gray["02"]:theme.Palette.dark["05"],opacity:alwaysShowPlaceholder?1:0,transition:"none",userSelect:"none"},"&::selection":{backgroundColor:actionPalette["02"]},"&:focus":{"&::placeholder":{color:"".concat(theme.Palette.gray["02"]," !important"),opacity:1}},...disabled&&{color:theme.Palette.gray["04"]}}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _theme = require("../UTLabel/theme");
+var _utils = require("./utils");
+const charactersCountRowHeight = 20;
+const PADDING = {
+  HORIZONTAL: 16,
+  VERTICAL: 12
+};
+const SMALL_PADDING = {
+  HORIZONTAL: 12,
+  VERTICAL: 8
+};
+const GRID_GAP = 16;
+const getPaddingValues = inputSize => {
+  const vertical = inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL;
+  const horizontal = inputSize === 'small' ? SMALL_PADDING.HORIZONTAL : PADDING.HORIZONTAL;
+  const multiline = vertical + GRID_GAP + charactersCountRowHeight;
+  return {
+    verticalPadding: "".concat(vertical, "px"),
+    horizontalPadding: "".concat(horizontal, "px"),
+    multilineVerticalPadding: "".concat(multiline, "px")
+  };
+};
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant,
+    error,
+    disabled,
+    readOnly
+  } = _ref;
+  if (readOnly) return 'transparent';
+  if (variant === 'gray') return theme.Palette.light['04'];
+  if (variant === 'transparent' && error) return theme.Palette.error['01'];
+  if (variant === 'transparent') return 'transparent';
+  if (disabled) return theme.Palette.light['03'];
+  return theme.Palette.light['01'];
+};
+const getBorderColor = _ref2 => {
+  let {
+    theme,
+    variant,
+    error,
+    readOnly,
+    disabled
+  } = _ref2;
+  if (variant === 'gray' || variant === 'transparent' || readOnly || disabled) return 'transparent !important';
+  if (error) return "".concat(theme.Palette.error['04'], " !important");
+  return "".concat(theme.Palette.light['05'], " !important");
+};
+const getBackgroundColorOnHover = _ref3 => {
+  let {
+    theme,
+    variant,
+    error,
+    readOnly
+  } = _ref3;
+  if (variant === 'gray') return theme.Palette.light['05'];
+  if (variant === 'transparent' && error) return theme.Palette.error['02'];
+  if (!readOnly) return theme.Palette.light['03'];
+  return undefined;
+};
+const retrieveStyle = _ref4 => {
+  let {
+    alwaysShowPlaceholder,
+    disabled: receivedDisabled,
+    error,
+    inputSize,
+    maxLength,
+    readOnly,
+    showCharacterCount,
+    theme,
+    variant
+  } = _ref4;
+  const disabled = receivedDisabled && !readOnly;
+  const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
+  const actionPalette = (0, _utils.getActionPalette)(theme);
+  const {
+    verticalPadding,
+    horizontalPadding,
+    multilineVerticalPadding
+  } = getPaddingValues(inputSize);
+  return {
+    charactersCount: {
+      bottom: verticalPadding,
+      position: 'absolute'
+    },
+    root: {
+      backgroundColor: getBackgroundColor({
+        theme,
+        variant,
+        error,
+        disabled,
+        readOnly
+      }),
+      paddingBottom: hasCharactersCount ? multilineVerticalPadding : verticalPadding,
+      paddingLeft: horizontalPadding,
+      paddingRight: horizontalPadding,
+      paddingTop: verticalPadding,
+      ...(readOnly && {
+        paddingLeft: 0,
+        paddingRight: 0
+      }),
+      '&:hover': {
+        backgroundColor: getBackgroundColorOnHover({
+          theme,
+          variant,
+          error,
+          readOnly
+        })
+      },
+      '&:active': {
+        ...(!disabled && !readOnly && {
+          backgroundColor: theme.Palette.light['01'],
+          '& $inputContainer': {
+            borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(actionPalette['04'], " !important"),
+            borderWidth: '2px'
+          },
+          '& $input': {
+            '&::placeholder': {
+              color: "".concat(theme.Palette.gray['02'], " !important"),
+              opacity: 1
+            }
+          }
+        })
+      }
+    },
+    inputContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant,
+        error,
+        readOnly,
+        disabled
+      }),
+      borderRadius: '4px',
+      borderWidth: '1px'
+    },
+    focusedRoot: {
+      backgroundColor: variant === 'transparent' ? theme.Palette.light['03'] : theme.Palette.light['01'],
+      '&:hover': {
+        backgroundColor: variant === 'transparent' ? theme.Palette.light['03'] : theme.Palette.light['01']
+      }
+    },
+    withValueRoot: {
+      ...(variant === 'transparent' && !error && {
+        backgroundColor: 'transparent'
+      })
+    },
+    focusedInputContainer: {
+      ...(variant !== 'transparent' && !error && {
+        borderColor: "".concat(actionPalette['04'], " !important"),
+        borderWidth: '2px'
+      }),
+      ...(variant !== 'transparent' && error && {
+        borderColor: "".concat(theme.Palette.error['04'], " !important")
+      })
+    },
+    input: {
+      ...(0, _theme.getFontStyles)({
+        theme,
+        variant: 'body',
+        weight: 'regular'
+      }),
+      caretColor: actionPalette['04'],
+      color: theme.Palette.dark['05'],
+      minHeight: '22px',
+      overflow: 'auto',
+      padding: 0,
+      textOverflow: 'ellipsis',
+      '&::placeholder': {
+        color: variant === 'transparent' && !disabled ? theme.Palette.dark['05'] : theme.Palette.gray['02'],
+        opacity: alwaysShowPlaceholder ? 1 : 0,
+        transition: 'none',
+        userSelect: 'none'
+      },
+      '&::selection': {
+        backgroundColor: actionPalette['02']
+      },
+      '&:focus': {
+        '&::placeholder': {
+          color: "".concat(theme.Palette.gray['02'], " !important"),
+          opacity: 1
+        }
+      },
+      ...(disabled && {
+        color: theme.Palette.gray['04']
+      })
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTBaseInputField/utils.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.validateColorTheme=exports.validateAdornments=exports.getActionPalette=void 0;var _constants=require("./constants");const validateAdornments=adornments=>adornments.every(adornment=>_constants.COMPONENTS_MAPPER[adornment.name]);exports.validateAdornments=validateAdornments;const validateColorTheme=colorTheme=>colorTheme||_constants.DEFAULT_PROPS.colorTheme;exports.validateColorTheme=validateColorTheme;const getActionPalette=theme=>{var _theme$Palette$action,_theme$Palette$action2;const colorThemeToUse=(null==theme?void 0:theme[_constants.UT_BASE_INPUT_COLOR_BORDER_FOCUS])||_constants.DEFAULT_PROPS.colorTheme;return(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action[colorThemeToUse])||theme.Palette[colorThemeToUse]||(null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2[_constants.DEFAULT_PROPS.colorTheme])||theme.Palette[_constants.DEFAULT_PROPS.colorTheme]};exports.getActionPalette=getActionPalette;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateColorTheme = exports.validateAdornments = exports.getActionPalette = void 0;
+var _constants = require("./constants");
+const validateAdornments = adornments => adornments.every(adornment => _constants.COMPONENTS_MAPPER[adornment.name]);
+exports.validateAdornments = validateAdornments;
+const validateColorTheme = colorTheme => colorTheme || _constants.DEFAULT_PROPS.colorTheme;
+exports.validateColorTheme = validateColorTheme;
+const getActionPalette = theme => {
+  var _theme$Palette$action, _theme$Palette$action2;
+  const colorThemeToUse = (theme === null || theme === void 0 ? void 0 : theme[_constants.UT_BASE_INPUT_COLOR_BORDER_FOCUS]) || _constants.DEFAULT_PROPS.colorTheme;
+  return ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorThemeToUse]) || theme.Palette[colorThemeToUse] || ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2[_constants.DEFAULT_PROPS.colorTheme]) || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
+};
+exports.getActionPalette = getActionPalette;

package/dist/components/UTBodyPlaceholder/UTBodyPlaceholder.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Playground = void 0;
+var _utils = require("stories/utils");
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  args: {
+    size: 'large',
+    subtitle: undefined,
+    title: undefined
+  },
+  argTypes: {
+    classNames: {
+      description: 'Clases personalizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['icon', 'bodyPlaceholderTextContainer', 'bodyPlaceholderText', 'bodyPlaceholder'])
+        }
+      }
+    },
+    size: {
+      control: 'radio',
+      description: 'Tamaño del placeholder.',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['large', 'small'])
+        }
+      }
+    },
+    subtitle: {
+      description: 'Subtítulo del placeholder.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_TEXTS.subtitle
+        }
+      }
+    },
+    title: {
+      description: 'Título del placeholder.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_TEXTS.title
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classNames']
+    },
+    docs: {
+      description: {
+        component: 'Placeholder para el body de componentes que wrappean varios tipos de contenido.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTBodyPlaceholder'
+};
+const Playground = exports.Playground = {
+  name: 'Playground'
+};

package/dist/components/UTBodyPlaceholder/constants.js

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SIZES=exports.DEFAULT_TEXTS=void 0;const SIZES=exports.SIZES={L:"large",S:"small"},DEFAULT_TEXTS=exports.DEFAULT_TEXTS={subtitle:"Reemplazar por otro componente",title:"Body content"};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.DEFAULT_TEXTS = void 0;
+const SIZES = exports.SIZES = {
+  L: 'large',
+  S: 'small'
+};
+const DEFAULT_TEXTS = exports.DEFAULT_TEXTS = {
+  subtitle: 'Reemplazar por otro componente',
+  title: 'Body content'
+};

package/dist/components/UTBodyPlaceholder/index.js

@@ -1 +1,45 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTIcon=_interopRequireDefault(require("../UTIcon")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UTBodyPlaceholder=_ref=>{var _classNames$bodyPlace,_classNames$icon,_classNames$bodyPlace2,_classNames$bodyPlace3,_classNames$bodyPlace4;let{classNames:classNames={},size:size=_constants.SIZES.L,subtitle:subtitle=_constants.DEFAULT_TEXTS.subtitle,title:title=_constants.DEFAULT_TEXTS.title}=_ref;return _react.default.createElement("div",{className:"".concat(_stylesModule.default.bodyPlaceholder," ").concat(_stylesModule.default.bodyPlaceholderWidth," ").concat(null!==(_classNames$bodyPlace=classNames.bodyPlaceholder)&&void 0!==_classNames$bodyPlace?_classNames$bodyPlace:"")},_react.default.createElement(_UTIcon.default,{className:"".concat(_stylesModule.default.icon," ").concat(null!==(_classNames$icon=classNames.icon)&&void 0!==_classNames$icon?_classNames$icon:""),name:"IconReplace",size:40}),size===_constants.SIZES.L&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.bodyPlaceholderTextContainer," ").concat(null!==(_classNames$bodyPlace2=classNames.bodyPlaceholderTextContainer)&&void 0!==_classNames$bodyPlace2?_classNames$bodyPlace2:"")},_react.default.createElement(_UTLabel.default,{className:"".concat(_stylesModule.default.bodyPlaceholderText," ").concat(null!==(_classNames$bodyPlace3=classNames.bodyPlaceholderText)&&void 0!==_classNames$bodyPlace3?_classNames$bodyPlace3:""),weight:"medium",variant:"subtitle1"},title),_react.default.createElement(_UTLabel.default,{className:"".concat(_stylesModule.default.bodyPlaceholderText," ").concat(null!==(_classNames$bodyPlace4=classNames.bodyPlaceholderText)&&void 0!==_classNames$bodyPlace4?_classNames$bodyPlace4:""),variant:"small"},subtitle)))};UTBodyPlaceholder.propTypes={classNames:(0,_propTypes.objectOf)(_propTypes.string),size:_propTypes.string,subtitle:_propTypes.string,title:_propTypes.string};var _default=exports.default=UTBodyPlaceholder;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTBodyPlaceholder = _ref => {
+  var _classNames$bodyPlace, _classNames$icon, _classNames$bodyPlace2, _classNames$bodyPlace3, _classNames$bodyPlace4;
+  let {
+    classNames = {},
+    size = _constants.SIZES.L,
+    subtitle = _constants.DEFAULT_TEXTS.subtitle,
+    title = _constants.DEFAULT_TEXTS.title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.bodyPlaceholder, " ").concat(_stylesModule.default.bodyPlaceholderWidth, " ").concat((_classNames$bodyPlace = classNames.bodyPlaceholder) !== null && _classNames$bodyPlace !== void 0 ? _classNames$bodyPlace : '')
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: "".concat(_stylesModule.default.icon, " ").concat((_classNames$icon = classNames.icon) !== null && _classNames$icon !== void 0 ? _classNames$icon : ''),
+    name: "IconReplace",
+    size: 40
+  }), size === _constants.SIZES.L && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.bodyPlaceholderTextContainer, " ").concat((_classNames$bodyPlace2 = classNames.bodyPlaceholderTextContainer) !== null && _classNames$bodyPlace2 !== void 0 ? _classNames$bodyPlace2 : '')
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.bodyPlaceholderText, " ").concat((_classNames$bodyPlace3 = classNames.bodyPlaceholderText) !== null && _classNames$bodyPlace3 !== void 0 ? _classNames$bodyPlace3 : ''),
+    weight: "medium",
+    variant: "subtitle1"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.bodyPlaceholderText, " ").concat((_classNames$bodyPlace4 = classNames.bodyPlaceholderText) !== null && _classNames$bodyPlace4 !== void 0 ? _classNames$bodyPlace4 : ''),
+    variant: "small"
+  }, subtitle)));
+};
+UTBodyPlaceholder.propTypes = {
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  size: _propTypes.string,
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+};
+var _default = exports.default = UTBodyPlaceholder;

package/dist/components/UTBreadcrumbs/constants.js

@@ -1 +1,39 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DEFAULT_SEPARATOR=exports.DEFAULT_ELIPSIS_WIDTH_ESTIMATE=exports.DEFAULT_ELIPSIS=exports.COMPONENTS_THEME_PROPS=exports.COLOR_THEMES_MAPPER=exports.COLOR_THEMES=void 0;const DEFAULT_SEPARATOR=exports.DEFAULT_SEPARATOR="/",DEFAULT_ELIPSIS=exports.DEFAULT_ELIPSIS="...",DEFAULT_ELIPSIS_WIDTH_ESTIMATE=exports.DEFAULT_ELIPSIS_WIDTH_ESTIMATE=100,COLOR_THEMES=exports.COLOR_THEMES={DARK:"dark",LIGHT:"light"},COMPONENTS_THEME_PROPS=exports.COMPONENTS_THEME_PROPS={[COLOR_THEMES.DARK]:{button:{colorTheme:"secondary"},label:{colorTheme:"gray"}},[COLOR_THEMES.LIGHT]:{button:{colorTheme:"negative"},label:{colorTheme:"negative",shade:"03"}}},COLOR_THEMES_MAPPER=exports.COLOR_THEMES_MAPPER={negative:COLOR_THEMES.LIGHT,primary:COLOR_THEMES.DARK,secondary:COLOR_THEMES.DARK};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_SEPARATOR = exports.DEFAULT_ELIPSIS_WIDTH_ESTIMATE = exports.DEFAULT_ELIPSIS = exports.COMPONENTS_THEME_PROPS = exports.COLOR_THEMES_MAPPER = exports.COLOR_THEMES = void 0;
+const DEFAULT_SEPARATOR = exports.DEFAULT_SEPARATOR = '/';
+const DEFAULT_ELIPSIS = exports.DEFAULT_ELIPSIS = '...';
+const DEFAULT_ELIPSIS_WIDTH_ESTIMATE = exports.DEFAULT_ELIPSIS_WIDTH_ESTIMATE = 100;
+const COLOR_THEMES = exports.COLOR_THEMES = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+const COMPONENTS_THEME_PROPS = exports.COMPONENTS_THEME_PROPS = {
+  [COLOR_THEMES.DARK]: {
+    button: {
+      colorTheme: 'secondary'
+    },
+    label: {
+      colorTheme: 'gray'
+    }
+  },
+  [COLOR_THEMES.LIGHT]: {
+    button: {
+      colorTheme: 'negative'
+    },
+    label: {
+      colorTheme: 'negative',
+      shade: '03'
+    }
+  }
+};
+
+// temporary mapper for compatibility with 'buttonColorTheme' attribute  in office-web-edenor
+const COLOR_THEMES_MAPPER = exports.COLOR_THEMES_MAPPER = {
+  negative: COLOR_THEMES.LIGHT,
+  primary: COLOR_THEMES.DARK,
+  secondary: COLOR_THEMES.DARK
+};