@widergy/energy-ui 3.181.0 → 3.183.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -2
- package/dist/components/UTActionCard/components/HeaderActions/index.js +1 -1
- package/dist/components/UTActionCard/index.js +1 -1
- package/dist/components/UTCheckList/versions/V1/README.MD +91 -61
- package/dist/components/UTCheckList/versions/V1/index.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/constants.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/index.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/theme.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/utils.js +1 -0
- package/dist/components/UTChip/constants.js +1 -1
- package/dist/components/UTChip/index.js +1 -1
- package/dist/components/UTChip/styles.module.scss +35 -8
- package/dist/components/UTChip/utils.js +1 -1
- package/dist/components/UTIcon/constants.js +1 -1
- package/dist/components/UTIcon/index.js +1 -1
- package/dist/components/UTIcon/styles.module.scss +6 -0
- package/dist/components/UTIcon/theme.js +1 -1
- package/dist/components/UTRadioGroup/versions/V1/components/Radio/theme.js +1 -1
- package/dist/components/UTStatusMessage/index.js +1 -1
- package/dist/constants/testIds.js +1 -1
- package/dist/esm/components/UTActionCard/components/HeaderActions/index.js +1 -1
- package/dist/esm/components/UTActionCard/index.js +1 -1
- package/dist/esm/components/UTCheckList/versions/V1/README.MD +91 -61
- package/dist/esm/components/UTCheckList/versions/V1/index.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/constants.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/index.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/theme.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/utils.js +1 -0
- package/dist/esm/components/UTChip/constants.js +1 -1
- package/dist/esm/components/UTChip/index.js +1 -1
- package/dist/esm/components/UTChip/styles.module.scss +35 -8
- package/dist/esm/components/UTChip/utils.js +1 -1
- package/dist/esm/components/UTIcon/constants.js +1 -1
- package/dist/esm/components/UTIcon/index.js +1 -1
- package/dist/esm/components/UTIcon/styles.module.scss +6 -0
- package/dist/esm/components/UTIcon/theme.js +1 -1
- package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/theme.js +1 -1
- package/dist/esm/components/UTStatusMessage/index.js +1 -1
- package/dist/esm/constants/testIds.js +1 -1
- package/dist/esm/utils/hooks/useCSSVariables/constants.js +1 -0
- package/dist/esm/utils/hooks/useCSSVariables/dimensionTokens.js +1 -1
- package/dist/esm/utils/hooks/useCSSVariables/index.js +1 -1
- package/dist/utils/hooks/useCSSVariables/constants.js +1 -0
- package/dist/utils/hooks/useCSSVariables/dimensionTokens.js +1 -1
- package/dist/utils/hooks/useCSSVariables/index.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,29 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.183.0](https://github.com/widergy/energy-ui/compare/v3.182.0...v3.183.0) (2026-09-02)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [AXCH-1879] area style for container in uticon ([#857](https://github.com/widergy/energy-ui/issues/857)) ([0f32b9d](https://github.com/widergy/energy-ui/commit/0f32b9dec93af332b69e4470f97e446b8398bc72))
|
|
2
7
|
|
|
3
8
|
|
|
4
9
|
### Features
|
|
5
10
|
|
|
6
|
-
* [
|
|
11
|
+
* [WDS-18] add chip support in status message and color support i… ([#853](https://github.com/widergy/energy-ui/issues/853)) ([6d14e2e](https://github.com/widergy/energy-ui/commit/6d14e2e046020ead0ac0d59eda7281ebda66666f))
|
|
12
|
+
|
|
13
|
+
# [3.182.0](https://github.com/widergy/energy-ui/compare/v3.181.0...v3.182.0) (2026-09-01)
|
|
14
|
+
|
|
15
|
+
### Novedades y Mejoras
|
|
16
|
+
|
|
17
|
+
* Los casilleros de selección múltiple ahora cuentan con una variante visual de tarjeta: permiten mostrar un ícono, título, descripción y texto de ayuda emergente, manteniendo una apariencia consistente con los botones de opción única en formato tarjeta. [#856](https://github.com/widergy/Energy-UI/pull/856) [WDS-22](https://widergy.atlassian.net/browse/WDS-22)
|
|
18
|
+
* Se unificó el estilo visual de los controles de selección no marcados y deshabilitados entre casilleros y botones de opción, logrando mayor coherencia en toda la interfaz. [#856](https://github.com/widergy/Energy-UI/pull/856) [WDS-22](https://widergy.atlassian.net/browse/WDS-22)
|
|
19
|
+
* Mejoras internas de la plataforma. [`a7826d1`](https://github.com/widergy/Energy-UI/commit/a7826d1)
|
|
20
|
+
|
|
21
|
+
# [3.181.0](https://github.com/widergy/energy-ui/compare/v3.180.3...v3.181.0) (2026-08-31)
|
|
22
|
+
|
|
23
|
+
### Novedades y Mejoras
|
|
24
|
+
|
|
25
|
+
* Las etiquetas de texto del dashboard ahora pueden mostrarse con un degradado de color acorde a su categoría semántica, en lugar de un color plano, mejorando la expresividad visual de los componentes de diagnóstico inteligente. [#854](https://github.com/widergy/Energy-UI/pull/854) [CX-2943](https://widergy.atlassian.net/browse/CX-2943)
|
|
26
|
+
* Se incorporó un nuevo ícono de documento con destello disponible para su uso en la interfaz. [#854](https://github.com/widergy/Energy-UI/pull/854) [CX-2943](https://widergy.atlassian.net/browse/CX-2943)
|
|
7
27
|
|
|
8
28
|
## [3.180.3](https://github.com/widergy/energy-ui/compare/v3.180.2...v3.180.3) (2026-08-28)
|
|
9
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../UTButton")),_UTButtonGroup=_interopRequireDefault(require("../../../UTButtonGroup")),_UTMenu=_interopRequireDefault(require("../../../UTMenu")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_constants=require("../../constants"),_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,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?o:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?n(s,t,a):s[t]=e[t]);return s})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}const HeaderActions=e=>{var t,r;let{headerActions:o,headerActionsProps:n,setMainActionHoverVisible:a}=e;const[s,p]=(0,_react.useState)(),[l,i]=(0,_react.useState)(null===(t=o.find(e=>{let{selectedDefault:t}=e;return t}))||void 0===t?void 0:t.id),u=n.variant===_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP,{colorTheme:c="secondary",shape:_}=(null==n?void 0:n.buttonGroupProps)||{},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../UTButton")),_UTButtonGroup=_interopRequireDefault(require("../../../UTButtonGroup")),_UTMenu=_interopRequireDefault(require("../../../UTMenu")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_constants=require("../../constants"),_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,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?o:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?n(s,t,a):s[t]=e[t]);return s})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}const HeaderActions=e=>{var t,r;let{headerActions:o,headerActionsProps:n,setMainActionHoverVisible:a}=e;const[s,p]=(0,_react.useState)(),[l,i]=(0,_react.useState)(null===(t=o.find(e=>{let{selectedDefault:t}=e;return t}))||void 0===t?void 0:t.id),u=n.variant===_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP,{colorTheme:c="secondary",shape:_,size:d}=(null==n?void 0:n.buttonGroupProps)||{},f=()=>a(!0),T=()=>{f(),p()},{primaryActions:y,secondaryActions:m}=(0,_utils.processActions)(o,u?null:T),E=(null==n?void 0:n.buttonSize)||"medium";return _react.default.createElement("div",{className:"".concat(_stylesModule.default.headerActionsContainer," ").concat(_stylesModule.default["placeSelf-".concat(n.alignment)]),onClick:e=>e.stopPropagation(),onMouseEnter:()=>a(!1),onMouseLeave:f},y.map(e=>_react.default.createElement(_UTTooltip.default,{tippyProps:{appendTo:()=>document.body,interactive:!1},content:e.label&&_react.default.createElement("span",null,e.label)},_react.default.createElement("div",null,_react.default.createElement(_UTButton.default,_extends({},e,{classNames:{root:_stylesModule.default.zIndex},size:E,variant:"text"}),e.title)))),!(0,_isEmpty.default)(m)&&(u?_react.default.createElement(_UTButtonGroup.default,{actions:m.map(e=>({...e,onClick:()=>{i(e.id),e.onClick()}})),colorTheme:c,selected:l||(null===(r=m[0])||void 0===r?void 0:r.id),shape:_,size:d}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_UTMenu.default,{anchor:s,iconBefore:!0,items:m,menuPlacement:"bottom-end",onClose:T,scrollBarProps:{options:{suppressScrollY:!0,suppressScrollX:!0}}}),_react.default.createElement(_UTButton.default,{classNames:{root:_stylesModule.default.zIndex},Icon:"IconDots",onClick:e=>{e.stopPropagation(),s?p():p(e.currentTarget)},size:"medium",variant:"text"}))))};HeaderActions.propTypes={headerActions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({Icon:(0,_propTypes.oneOfType)([_propTypes.elementType,_propTypes.string]),id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string]),isPrimary:_propTypes.bool,title:_propTypes.string,label:_propTypes.string,loading:_propTypes.bool,onClick:_propTypes.func,selectedDefault:_propTypes.bool})),headerActionsProps:(0,_propTypes.shape)({alignment:(0,_propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER,_constants.PLACE_SELF_TYPES.END,_constants.PLACE_SELF_TYPES.START]),buttonGroupProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,shape:_propTypes.string}),variant:(0,_propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT,_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])}),setMainActionHoverVisible:_propTypes.func};var _default=exports.default=(0,_react.memo)(HeaderActions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_array=require("@widergy/web-utils/lib/array"),_object=require("@widergy/web-utils/lib/object"),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../UTTouchableWithoutFeedback")),_BottomActions=_interopRequireDefault(require("./components/BottomActions")),_AdditionalMessage=_interopRequireDefault(require("./components/AdditionalMessage")),_Header=_interopRequireDefault(require("./components/Header")),_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 s=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(r=t?o:s){if(r.has(e))return r.get(e);r.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(a,t,n):a[t]=e[t]);return a})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var o in s)({}).hasOwnProperty.call(s,o)&&(e[o]=s[o])}return e},_extends.apply(null,arguments)}const UTActionCard=e=>{let{additionalMessage:t,adornment:s,BackgroundImage:o,bottomActions:r,bottomActionsVariant:n,children:a,classNames:p={},description:i,descriptionProps:c={},headerActions:_,headerActionsProps:l={variant:_constants.HEADER_ACTIONS_VARIANTS.DEFAULT},hideHeader:d=!1,mainAction:T,size:u=_constants.SIZES.MEDIUM,status:y,statusAlignment:f,statusLabel:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_array=require("@widergy/web-utils/lib/array"),_object=require("@widergy/web-utils/lib/object"),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../UTTouchableWithoutFeedback")),_BottomActions=_interopRequireDefault(require("./components/BottomActions")),_AdditionalMessage=_interopRequireDefault(require("./components/AdditionalMessage")),_Header=_interopRequireDefault(require("./components/Header")),_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 s=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(r=t?o:s){if(r.has(e))return r.get(e);r.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(a,t,n):a[t]=e[t]);return a})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var o in s)({}).hasOwnProperty.call(s,o)&&(e[o]=s[o])}return e},_extends.apply(null,arguments)}const UTActionCard=e=>{let{additionalMessage:t,adornment:s,BackgroundImage:o,bottomActions:r,bottomActionsVariant:n,children:a,classNames:p={},description:i,descriptionProps:c={},headerActions:_,headerActionsProps:l={variant:_constants.HEADER_ACTIONS_VARIANTS.DEFAULT},hideHeader:d=!1,mainAction:T,size:u=_constants.SIZES.MEDIUM,status:y,statusAlignment:f,statusLabel:g,testIds:E={},title:A,titleProps:m={},withBodyPadding:b=!0}=e;const[h,P]=(0,_react.useState)(!0),{backgroundDataTestId:S,containerDataTestId:I,statusDataTestId:C}=E;return _react.default.createElement("div",{className:"".concat(_stylesModule.default.cardContainer," ").concat(p.container)},_react.default.createElement(_UTTouchableWithoutFeedback.default,{className:"".concat(_stylesModule.default.innerContainer," ").concat(p.innerContainer," ").concat(T?"".concat(_stylesModule.default.withMainAction," ").concat(h&&"".concat(_stylesModule.default.mainActionHover," ").concat(p.mainActionHover)):_stylesModule.default.withoutMainAction),dataTestId:I,onClick:()=>null==T?void 0:T()},o&&_react.default.createElement(o,{className:"".concat(_stylesModule.default.backgroundImage," ").concat(p.backgroundImage),"data-testid":S}),_react.default.createElement("div",{className:"".concat(_stylesModule.default.headerAndChildrenContainer," ").concat(p.headerAndChildrenContainer)},!d&&_react.default.createElement(_Header.default,{adornment:s,classNames:p,description:i,descriptionProps:c,headerActions:_,headerActionsProps:l,mainAction:T,setMainActionHoverVisible:P,size:u,status:y,statusAlignment:f,statusDataTestId:C,statusLabel:g,title:A,titleProps:m}),a&&_react.default.createElement("div",{className:"".concat(d?_stylesModule.default.withoutHeader:""," ").concat(b?_stylesModule.default["bodyPadding-".concat(u)]:_stylesModule.default["withoutBodyPadding-".concat(u)])},a))),!(0,_object.objectIsEmpty)(t)&&_react.default.createElement(_AdditionalMessage.default,_extends({},t,{size:u})),!(0,_array.isEmpty)(r)&&_react.default.createElement(_BottomActions.default,{actions:r,bottomActionsVariant:n,size:u}))};UTActionCard.propTypes={additionalMessage:(0,_propTypes.shape)({Icon:_propTypes.elementType,iconProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,size:_propTypes.string}),labelProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,variant:_propTypes.string}),message:_propTypes.string}),adornment:(0,_propTypes.shape)({alignment:(0,_propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER,_constants.PLACE_SELF_TYPES.END,_constants.PLACE_SELF_TYPES.START]),position:_propTypes.string,props:_propTypes.object,type:_propTypes.string}),BackgroundImage:_propTypes.elementType,bottomActions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({colorTheme:_propTypes.string,disabled:_propTypes.bool,Icon:_propTypes.elementType,label:_propTypes.string,loading:_propTypes.bool,onClick:_propTypes.func})),bottomActionsVariant:(0,_propTypes.oneOf)([_constants.ACTION_TYPES.DEFAULT,_constants.ACTION_TYPES.REDIRECTION]),classNames:(0,_propTypes.objectOf)(_propTypes.string),description:_propTypes.string,descriptionProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,variant:_propTypes.string}),headerActions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({Icon:(0,_propTypes.oneOfType)([_propTypes.elementType,_propTypes.string]),iconProps:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string]),label:_propTypes.string,loading:_propTypes.bool,onClick:_propTypes.func})),headerActionsProps:(0,_propTypes.shape)({alignment:(0,_propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER,_constants.PLACE_SELF_TYPES.END,_constants.PLACE_SELF_TYPES.START]),buttonGroupProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,shape:_propTypes.string,size:_propTypes.string}),variant:(0,_propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT,_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])}),hideHeader:_propTypes.bool,mainAction:_propTypes.func,size:(0,_propTypes.oneOf)([_constants.SIZES.MEDIUM,_constants.SIZES.SMALL]),status:_propTypes.string,statusLabel:_propTypes.string,statusAlignment:(0,_propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER,_constants.PLACE_SELF_TYPES.END,_constants.PLACE_SELF_TYPES.START]),testIds:(0,_propTypes.shape)({backgroundDataTestId:_propTypes.string,containerDataTestId:_propTypes.string,statusDataTestId:_propTypes.string}),title:_propTypes.string,titleProps:(0,_propTypes.shape)({variant:_propTypes.string,weight:_propTypes.string}),withBodyPadding:_propTypes.bool};var _default=exports.default=(0,_react.memo)(UTActionCard);
|
|
@@ -1,56 +1,58 @@
|
|
|
1
1
|
# UTCheckList
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Descripción
|
|
4
4
|
|
|
5
|
-
`UTCheckList`
|
|
5
|
+
`UTCheckList` es un componente personalizable que renderiza una lista de checkboxes, permitiendo a los usuarios seleccionar múltiples opciones de una lista. Soporta funcionalidades como "seleccionar todos", estado indeterminado, mensaje de error y opciones dinámicas. El checkbox de "Seleccionar todos" solo afecta a las opciones que no están deshabilitadas. Además, permite agrupar opciones por categoría, mostrando primero las que no tienen categoría.
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
8
|
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
| actions | object | |
|
|
12
|
-
| classNames | objectOf(string) | |
|
|
13
|
-
| CustomRow | elementType | |
|
|
14
|
-
| disabled | bool | false |
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| disabled
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
9
|
+
| Nombre | Tipo | Default | Descripción |
|
|
10
|
+
| ------------------ | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| actions | object | | Acciones a renderizar dentro de `UTFieldLabel`. |
|
|
12
|
+
| classNames | objectOf(string) | | Nombres de clase personalizados para distintos elementos del checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`). |
|
|
13
|
+
| CustomRow | elementType | | Componente custom para renderizar el contenido de cada checkbox. |
|
|
14
|
+
| disabled | bool | false | Deshabilita todos los checkboxes del checklist cuando es `true`. |
|
|
15
|
+
| error | string | | Mensaje de error a mostrar. |
|
|
16
|
+
| horizontalSpacing | string | medium | Espaciado horizontal entre el checkbox y el título. |
|
|
17
|
+
| isSimple | bool | false | Simplifica la selección para permitir marcar un solo checkbox a la vez. |
|
|
18
|
+
| onChange | func.isRequired | | Función a llamar cuando cambia la selección. |
|
|
19
|
+
| options | arrayOf(shape) | | Array de opciones a mostrar como checkboxes. Ver [Objeto Option](#objeto-option). |
|
|
20
|
+
| required | bool | false | Indica si el checklist es obligatorio. |
|
|
21
|
+
| reversed | bool | false | Si es `true`, invierte el orden del título y el checkbox. |
|
|
22
|
+
| selectAllLabel | string | | Etiqueta para el checkbox de "Seleccionar todos". |
|
|
23
|
+
| showSelectAll | bool | true | Determina si se muestra el checkbox de "Seleccionar todos". |
|
|
24
|
+
| title | string | | Título del checklist. |
|
|
25
|
+
| value | arrayOf(string) | [] | Array de valores seleccionados. |
|
|
26
|
+
| variant | string | | Variante visual del checklist (`default`, `button` o `card`, según lo soportado por `UTCheckbox`). |
|
|
27
|
+
| verticalSpacing | string | medium | Espaciado vertical entre los items. |
|
|
28
|
+
|
|
29
|
+
### Objeto Option
|
|
30
|
+
|
|
31
|
+
El prop `options` es un array de objetos. Cada campo del objeto se reenvía al `UTCheckbox` correspondiente cuando aplica (por ejemplo `description`, `tooltip` e `icon` solo tienen efecto visual en la variante `card`):
|
|
32
|
+
|
|
33
|
+
| Nombre | Tipo | Descripción |
|
|
34
|
+
| ----------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| category | string | (Opcional) Categoría bajo la cual se agrupa la opción. Sin categoría, la opción aparece sin agrupar arriba. |
|
|
36
|
+
| checked | bool | Indica si la opción está marcada. |
|
|
37
|
+
| description | string | (Opcional) Texto secundario bajo el título. **Solo tiene efecto en la variante `card`.** |
|
|
38
|
+
| disabled | bool | Indica si la opción está deshabilitada. |
|
|
39
|
+
| icon | string \| elementType \| `{ src, alt }` | (Opcional) Ícono de la opción. En variantes `default`/`button` es el nombre de un ícono de `UTIcon`. En la variante `card` admite además un componente custom o un objeto `{ src, alt }` para una imagen. |
|
|
40
|
+
| name | string | Etiqueta a mostrar para la opción. |
|
|
41
|
+
| tooltip | string | (Opcional) Texto de ayuda junto al título. **Solo tiene efecto en la variante `card`.** |
|
|
42
|
+
| value | string | Valor de la opción. |
|
|
43
|
+
|
|
44
|
+
## Uso
|
|
45
|
+
|
|
46
|
+
### Ejemplo básico
|
|
45
47
|
|
|
46
48
|
```jsx
|
|
47
49
|
import React from 'react';
|
|
48
50
|
import UTCheckList from './UTCheckList';
|
|
49
51
|
|
|
50
52
|
const options = [
|
|
51
|
-
{ name: '
|
|
52
|
-
{ name: '
|
|
53
|
-
{ name: '
|
|
53
|
+
{ name: 'Opción 1', value: '1' },
|
|
54
|
+
{ name: 'Opción 2', value: '2' },
|
|
55
|
+
{ name: 'Opción 3', value: '3', disabled: true, checked: true }
|
|
54
56
|
];
|
|
55
57
|
|
|
56
58
|
const Example = () => {
|
|
@@ -58,12 +60,12 @@ const Example = () => {
|
|
|
58
60
|
|
|
59
61
|
return (
|
|
60
62
|
<UTCheckList
|
|
61
|
-
error="
|
|
62
|
-
title="
|
|
63
|
+
error="Selecciona al menos una opción"
|
|
64
|
+
title="Selecciona opciones"
|
|
63
65
|
onChange={setSelectedOptions}
|
|
64
66
|
options={options}
|
|
65
67
|
required
|
|
66
|
-
selectAllLabel="
|
|
68
|
+
selectAllLabel="Seleccionar todos"
|
|
67
69
|
value={selectedOptions}
|
|
68
70
|
/>
|
|
69
71
|
);
|
|
@@ -72,17 +74,17 @@ const Example = () => {
|
|
|
72
74
|
export default Example;
|
|
73
75
|
```
|
|
74
76
|
|
|
75
|
-
###
|
|
77
|
+
### Ejemplo categorizado
|
|
76
78
|
|
|
77
79
|
```jsx
|
|
78
80
|
import React from 'react';
|
|
79
81
|
import UTCheckList from './UTCheckList';
|
|
80
82
|
|
|
81
83
|
const options = [
|
|
82
|
-
{ name: '
|
|
83
|
-
{ name: '
|
|
84
|
-
{ name: '
|
|
85
|
-
{ name: '
|
|
84
|
+
{ name: 'Opción 1', value: '1' },
|
|
85
|
+
{ name: 'Opción 2', value: '2', category: 'Grupo A' },
|
|
86
|
+
{ name: 'Opción 3', value: '3', category: 'Grupo B', disabled: true },
|
|
87
|
+
{ name: 'Opción 4', value: '4', category: 'Grupo A' }
|
|
86
88
|
];
|
|
87
89
|
|
|
88
90
|
const Example = () => {
|
|
@@ -90,11 +92,11 @@ const Example = () => {
|
|
|
90
92
|
|
|
91
93
|
return (
|
|
92
94
|
<UTCheckList
|
|
93
|
-
error="
|
|
94
|
-
title="
|
|
95
|
+
error="Selecciona al menos una opción"
|
|
96
|
+
title="Checklist categorizado"
|
|
95
97
|
onChange={setSelectedOptions}
|
|
96
98
|
options={options}
|
|
97
|
-
selectAllLabel="
|
|
99
|
+
selectAllLabel="Seleccionar todos"
|
|
98
100
|
value={selectedOptions}
|
|
99
101
|
/>
|
|
100
102
|
);
|
|
@@ -103,32 +105,60 @@ const Example = () => {
|
|
|
103
105
|
export default Example;
|
|
104
106
|
```
|
|
105
107
|
|
|
106
|
-
###
|
|
108
|
+
### Ejemplo con variante `card`
|
|
107
109
|
|
|
108
110
|
```jsx
|
|
109
111
|
import React from 'react';
|
|
110
112
|
import UTCheckList from './UTCheckList';
|
|
111
113
|
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
const options = [
|
|
115
|
+
{
|
|
116
|
+
name: 'Plan Residencial',
|
|
117
|
+
value: '1',
|
|
118
|
+
icon: 'IconHome',
|
|
119
|
+
description: 'Cubre el consumo de un hogar estándar',
|
|
120
|
+
tooltip: 'Ideal para tu hogar'
|
|
121
|
+
},
|
|
122
|
+
{ name: 'Plan Comercial', value: '2', icon: 'IconBuildingStore', description: 'Pensado para pequeños comercios' }
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
const Example = () => {
|
|
126
|
+
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
127
|
+
|
|
128
|
+
return (
|
|
129
|
+
<UTCheckList
|
|
130
|
+
title="Selecciona un plan"
|
|
131
|
+
onChange={setSelectedOptions}
|
|
132
|
+
options={options}
|
|
133
|
+
value={selectedOptions}
|
|
134
|
+
variant="card"
|
|
135
|
+
/>
|
|
136
|
+
);
|
|
116
137
|
};
|
|
117
138
|
|
|
139
|
+
export default Example;
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Ejemplo con estilos personalizados
|
|
143
|
+
|
|
144
|
+
```jsx
|
|
145
|
+
import React from 'react';
|
|
146
|
+
import UTCheckList from './UTCheckList';
|
|
147
|
+
|
|
118
148
|
const Example = () => {
|
|
119
149
|
const options = [
|
|
120
|
-
{ name: '
|
|
121
|
-
{ name: '
|
|
150
|
+
{ name: 'Opción 1', value: '1' },
|
|
151
|
+
{ name: 'Opción 2', value: '2' }
|
|
122
152
|
];
|
|
123
153
|
|
|
124
154
|
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
125
155
|
|
|
126
156
|
return (
|
|
127
157
|
<UTCheckList
|
|
128
|
-
title="
|
|
158
|
+
title="Checklist con estilos personalizados"
|
|
129
159
|
onChange={setSelectedOptions}
|
|
130
160
|
options={options}
|
|
131
|
-
|
|
161
|
+
classNames={{ root: 'custom-root', checkboxesContainer: 'custom-container', header: 'custom-header' }}
|
|
132
162
|
value={selectedOptions}
|
|
133
163
|
/>
|
|
134
164
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_buttonTypes=require("../../../../types/buttonTypes"),_utils=require("../../../UTValidation/utils"),_constants=require("../../../UTCheckbox/versions/V1/constants"),_UTCheckbox=_interopRequireDefault(require("../../../UTCheckbox")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils2=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants2=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(s=t?r:a){if(s.has(e))return s.get(e);s.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(l,t,o):l[t]=e[t]);return l})(e,t)}const UTCheckList=e=>{let{actions:t,classNames:a={},CustomRow:r,dataTestId:s,disabled:o,error:l,horizontalSpacing:n="medium",isSimple:i=!1,itemDataTestId:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_buttonTypes=require("../../../../types/buttonTypes"),_utils=require("../../../UTValidation/utils"),_constants=require("../../../UTCheckbox/versions/V1/constants"),_UTCheckbox=_interopRequireDefault(require("../../../UTCheckbox")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils2=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants2=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(s=t?r:a){if(s.has(e))return s.get(e);s.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(l,t,o):l[t]=e[t]);return l})(e,t)}const UTCheckList=e=>{let{actions:t,classNames:a={},CustomRow:r,dataTestId:s,disabled:o,error:l,horizontalSpacing:n="medium",isSimple:i=!1,itemDataTestId:p,onChange:c=()=>{},options:u,required:_,reversed:d,selectAllLabel:T,showSelectAll:y=!0,title:f,value:m=null,variant:g,verticalSpacing:v="medium"}=e;const b=(0,_utils2.getPropValueBasedOnVariant)(g,d,!0),h=(0,_utils2.getPropValueBasedOnVariant)(g,v,_constants.SPACING.SMALL)===_constants.SPACING.SMALL?_stylesModule.default.smallVerticalSpacing:"",C=(0,_react.useMemo)(()=>l&&(0,_utils.formatErrorToValidation)(l,{withIcon:!1}),[l]);(0,_react.useEffect)(()=>{if(m){const e=(0,_utils2.convertIfIsString)(m);JSON.stringify(e)!==JSON.stringify(m)&&c(e)}},[m,c]);const O=(0,_react.useMemo)(()=>{const e=u.reduce((e,t)=>{const a=t.category||_constants2.NO_CATEGORY;return e[a]||(e[a]=[]),e[a].push(t),e},{NO_CATEGORY:[]});return Object.entries(e).filter(e=>{let[,t]=e;return t.length>0}).sort((e,t)=>{let[a]=e,[r]=t;return a===_constants2.NO_CATEGORY?-1:r===_constants2.NO_CATEGORY?1:0})},[u]),q=(0,_react.useMemo)(()=>u.filter(e=>!e.disabled),[u]),k=(0,_react.useMemo)(()=>q.every(e=>null==m?void 0:m.includes(e.value)),[q,m]),M=(0,_react.useMemo)(()=>q.some(e=>null==m?void 0:m.includes(e.value))&&!k,[q,m,k]),N=(0,_react.useCallback)(e=>{if(i)c([e]);else{var t;const a=null!=m&&null!==(t=m.some)&&void 0!==t&&t.call(m,t=>t===e)?m.filter(t=>t!==e):[...m||[],e];c(a)}},[m,c,i]),U=(0,_react.useCallback)(()=>{c(k?[]:q.map(e=>e.value))},[k,q,c]);return _react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(h," ").concat(a.root),"data-testid":s},(f||C)&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.headerContainer," ").concat(a.header)},f&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:_},f),C&&_react.default.createElement(_UTValidation.default,{validationData:C})),_react.default.createElement("div",{className:"".concat(_stylesModule.default.checkboxesContainer," ").concat(h," ").concat(g===_constants.BUTTON_VARIANT&&_stylesModule.default.buttonVariant," ").concat(a.checkboxesContainer)},y&&!i&&_react.default.createElement(_UTCheckbox.default,{className:a.selectAll,dataTestId:p?"".concat(p,".selectAll"):null,disabled:o,indeterminate:M,onChange:U,reversed:b,spacing:n,title:T,value:k,variant:g,version:"V1"}),O.map((e,t)=>{let[s,l]=e;const c="".concat(s,"-").concat(l.map(e=>e.value).join("-"));return _react.default.createElement("div",{className:"".concat(_stylesModule.default.categoryContainer," ").concat(h),key:c},s!==_constants2.NO_CATEGORY&&_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},s.toUpperCase()),l.map((e,s)=>_react.default.createElement(_UTCheckbox.default,{classNames:a.item,CustomComponent:r?_react.default.createElement(r,{item:e,isChecked:(0,_utils2.isChecked)(e,m)}):void 0,dataTestId:p?"".concat(p,".category_").concat(t,".").concat(s):null,description:e.description,disabled:e.disabled||o,isSimple:i,key:e.value,icon:e.icon,onChange:()=>N(e.value),reversed:i?b:d,spacing:n,title:e.name,tooltip:e.tooltip,value:(0,_utils2.isChecked)(e,m),variant:g,version:"V1"})))})))};UTCheckList.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),classNames:(0,_propTypes.objectOf)(_propTypes.string),CustomRow:_propTypes.elementType,dataTestId:_propTypes.string,disabled:_propTypes.bool,error:_propTypes.string,horizontalSpacing:_propTypes.string,isSimple:_propTypes.bool,itemDataTestId:_propTypes.string,onChange:_propTypes.func,options:(0,_propTypes.arrayOf)((0,_propTypes.shape)({category:_propTypes.string,checked:_propTypes.bool,description:_propTypes.string,disabled:_propTypes.bool,icon:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.elementType,(0,_propTypes.shape)({alt:_propTypes.string,src:_propTypes.string})]),name:_propTypes.string,tooltip:_propTypes.string,value:_propTypes.string})),required:_propTypes.bool,reversed:_propTypes.bool,selectAllLabel:_propTypes.string,showSelectAll:_propTypes.bool,title:_propTypes.string,value:(0,_propTypes.arrayOf)(_propTypes.string),variant:_propTypes.string,verticalSpacing:_propTypes.string};var _default=exports.default=UTCheckList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SPACING=exports.INDETERMINATE_ICON=exports.CHECKED_ICON=exports.BUTTON_VARIANT=void 0;const CHECKED_ICON=exports.CHECKED_ICON="IconCheck",INDETERMINATE_ICON=exports.INDETERMINATE_ICON="IconMinus",SPACING=exports.SPACING={SMALL:"small",MEDIUM:"medium"},BUTTON_VARIANT=exports.BUTTON_VARIANT="button";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SPACING=exports.INDETERMINATE_ICON=exports.ICON_CONTENT_TYPES=exports.CHECKED_ICON=exports.CARD_VARIANT=exports.CARD_ICON_SIZE=exports.CARD_ICON_AREA_SIZE=exports.CARD_ICON_AREA_RADIUS=exports.BUTTON_VARIANT=void 0;const CHECKED_ICON=exports.CHECKED_ICON="IconCheck",INDETERMINATE_ICON=exports.INDETERMINATE_ICON="IconMinus",SPACING=exports.SPACING={SMALL:"small",MEDIUM:"medium"},BUTTON_VARIANT=exports.BUTTON_VARIANT="button",CARD_VARIANT=exports.CARD_VARIANT="card",CARD_ICON_SIZE=exports.CARD_ICON_SIZE=16,CARD_ICON_AREA_SIZE=exports.CARD_ICON_AREA_SIZE=32,CARD_ICON_AREA_RADIUS=exports.CARD_ICON_AREA_RADIUS="var(--UT-checkbox-card-icon-area-radius, 8px)",ICON_CONTENT_TYPES=exports.ICON_CONTENT_TYPES={UT_ICON:"utIcon",IMAGE:"image",COMPONENT:"component"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_classesUtils=require("../../../../utils/classesUtils"),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../../../UTTouchableWithoutFeedback")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_utils=require("../../../UTValidation/utils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_constants=require("./constants"),_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
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_classesUtils=require("../../../../utils/classesUtils"),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../../../UTTouchableWithoutFeedback")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_utils=require("../../../UTValidation/utils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_constants=require("./constants"),_theme=require("./theme"),_utils2=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 a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?r:a){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?l(n,t,o):n[t]=e[t]);return n})(e,t)}const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:a,classes:r,classNames:l,CustomComponent:o,dataTestId:n,description:s,disabled:i,icon:c,indeterminate:u,isSimple:d=!1,meta:_,onChange:p=()=>{},required:T,title:m,tooltip:f,value:y=!1,variant:h="default",withUpperTitle:b}=e;const E=(0,_react.useMemo)(()=>(0,_classesUtils.mergeMultipleClassNames)(r,l),[l,r]),N=h===_constants.CARD_VARIANT,U=(0,_react.useMemo)(()=>u?_constants.INDETERMINATE_ICON:!0===y?_constants.CHECKED_ICON:"",[u,y]),I=()=>{!i&&p&&p(!y)},q=!0===y&&h===_constants.BUTTON_VARIANT,C=_&&(0,_form.shouldShowErrors)(_)&&_.error||"",g=(0,_utils.formatErrorToValidation)(C);return N?_react.default.createElement(_react.default.Fragment,null,b&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:T},m),_react.default.createElement(_UTTouchableWithoutFeedback.default,{className:E.container,dataTestId:n,disabled:i,onMouseDown:I},_react.default.createElement("div",{className:E.content},(()=>{if(!c)return null;const e=(0,_utils2.getIconContentType)(c);if(e===_constants.ICON_CONTENT_TYPES.IMAGE)return _react.default.createElement("img",{alt:c.alt||"",className:E.iconImage,src:c.src});if(e===_constants.ICON_CONTENT_TYPES.COMPONENT){const e=c;return _react.default.createElement(e,{className:E.icon})}return _react.default.createElement(_UTIcon.default,{area:!0,areaBackground:"var(--light01)",areaBorderColor:"var(--light04)",areaRadius:_constants.CARD_ICON_AREA_RADIUS,areaSize:_constants.CARD_ICON_AREA_SIZE,colorTheme:"dark",name:c,size:_constants.CARD_ICON_SIZE})})(),_react.default.createElement("div",{className:E.contentContainer},f?_react.default.createElement("div",{className:E.titleAndTooltip},_react.default.createElement(_UTLabel.default,{className:E.name,colorTheme:"dark"},m),_react.default.createElement(_UTTooltip.default,{content:f},_react.default.createElement("span",{className:E.tooltip},_react.default.createElement(_UTIcon.default,{className:E.infoIcon,colorTheme:y?"accent":i?"gray":"dark",name:"IconHelp",size:20})))):_react.default.createElement(_UTLabel.default,{className:E.name,colorTheme:"dark"},m),s&&_react.default.createElement(_UTLabel.default,{className:E.description,colorTheme:"gray",variant:"body"},s))),_react.default.createElement("div",{className:E.boxContainer,"data-testid":a},_react.default.createElement("div",{className:E.box},_react.default.createElement("div",{className:E.iconContainer},U&&_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:u?"IconMinus":"IconCheck",size:10})))),C&&_react.default.createElement(_UTValidation.default,{className:E.validation,validationData:g}))):_react.default.createElement(_react.default.Fragment,null,b&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:T},m),_react.default.createElement(_UTTouchableWithoutFeedback.default,{className:E.container,dataTestId:n,disabled:i,onMouseDown:I},_react.default.createElement("div",{className:E.content},_react.default.createElement("div",{className:E.boxContainer,"data-testid":a},d?_react.default.createElement(_UTIcon.default,{name:"IconCheck",shade:"04",colorTheme:"accent",className:y?void 0:_stylesModule.default.hidden}):_react.default.createElement("div",{className:E.box},_react.default.createElement("div",{className:E.iconContainer},U&&_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:u?"IconMinus":"IconCheck",size:10})))),o||_react.default.createElement(_UTFieldLabel.default,{className:E.title,highlighted:q,icon:c,required:T},m)),C&&_react.default.createElement(_UTValidation.default,{className:E.validation,validationData:g})))};UTCheckbox.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),checkboxDataTestId:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),CustomComponent:_propTypes.elementType,dataTestId:_propTypes.string,description:_propTypes.string,disabled:_propTypes.bool,icon:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.elementType,(0,_propTypes.shape)({alt:_propTypes.string,src:_propTypes.string})]),indeterminate:_propTypes.bool,isSimple:_propTypes.bool,meta:_formTypes.metaPropTypes.isRequired,onChange:_propTypes.func,required:_propTypes.bool,title:_propTypes.string,tooltip:_propTypes.string,value:_propTypes.bool,variant:_propTypes.string,withUpperTitle:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTCheckbox);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _form=require("@widergy/web-utils/lib/form"),_constants=require("./constants");const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"}}),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _form=require("@widergy/web-utils/lib/form"),_constants=require("./constants");const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"},contentContainer:{display:"flex",flexDirection:"column",gap:"var(--UT-checkbox-content-gap, 4px)"},titleAndTooltip:{alignItems:"center",display:"flex",gap:"var(--gap-xs, 4px)"},tooltip:{display:"flex"},icon:{flexShrink:0,height:"36px",width:"36px"},iconImage:{borderRadius:"50%",flexShrink:0,height:"36px",objectFit:"cover",width:"36px"},infoIcon:{flexShrink:0},name:{},description:{}}),getCardTheme=e=>{var t,o,a,n;let{theme:r,error:i}=e;const c=(null===(t=r.Palette.actions)||void 0===t?void 0:t.accent["01"])||r.Palette.accent["01"],l=(null===(o=r.Palette.actions)||void 0===o?void 0:o.accent["02"])||r.Palette.accent["02"],d=(null===(a=r.Palette.actions)||void 0===a?void 0:a.accent["03"])||r.Palette.accent["03"],s=(null===(n=r.Palette.actions)||void 0===n?void 0:n.accent["05"])||r.Palette.accent["05"];return{base:{backgroundColor:r.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(i?r.Palette.error["04"]:r.Palette.light["04"]," !important"),"&:hover":{backgroundColor:i?r.Palette.error["01"]:r.Palette.light["03"]},"&:active":{backgroundColor:i?r.Palette.error["02"]:r.Palette.light["04"],"& $description":{color:r.Palette.gray["03"]}}},selected:{boxShadow:"none",outline:"2px solid ".concat(d," !important"),"& $icon path":{fill:s},"&:hover":{backgroundColor:c,outline:"2px solid ".concat(d," !important")},"&:active":{backgroundColor:l,outline:"2px solid ".concat(d," !important")}},disabled:{backgroundColor:r.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent !important",pointerEvents:"none","& $name, & $description":{color:r.Palette.gray["04"]},"& $icon path":{fill:r.Palette.gray["04"]}}}},getCardCheckboxColors=e=>{var t;let{isMarked:o,disabled:a,theme:n}=e;const r=(null===(t=n.Palette.actions)||void 0===t?void 0:t.accent["04"])||n.Palette.accent["04"],i=n.Palette.gray["04"];return{backgroundColor:o?a?i:r:"transparent",borderColor:o?a?i:r:n.Palette.light["05"]}},conditionalStyles=e=>{var t,o,a,n,r;let{value:i,indeterminate:c,reversed:l,spacing:d,variant:s,theme:p,disabled:v,error:x}=e;const h=d===_constants.SPACING.SMALL?SMALL_SPACING:MEDIUM_SPACING,b=s===_constants.CARD_VARIANT,g=b&&getCardTheme({theme:p,error:x}),u=!0===i||c;return{container:{...l&&{flexDirection:"row-reverse",justifyContent:"space-between"},...v&&!b&&{opacity:.5},...s===_constants.BUTTON_VARIANT&&{borderRadius:"8px",padding:"small"===d?"8px 12px":"12px 16px",backgroundColor:x?p.Palette.error["01"]:"transparent","&:active, &:hover":{transition:"background-color 0.1s ease-in-out"},"&:active":{backgroundColor:x?p.Palette.error["02"]:p.Palette.light["04"]},"&:hover":{backgroundColor:x?p.Palette.error["02"]:p.Palette.light["03"]}},...b&&{borderRadius:"var(--UT-checkbox-card-radius, 12px)",gap:h,minHeight:"var(--UT-checkbox-card-min-height, 24px)",overflow:"visible",padding:"var(--UT-checkbox-card-padding-y, 12px) var(--UT-checkbox-card-padding-x, 16px)",...v?g.disabled:i?g.selected:g.base}},content:{...l&&{flexDirection:"row-reverse",justifyContent:"space-between",...s===_constants.BUTTON_VARIANT&&{width:"100%"}},...b&&{gap:h,marginRight:"auto"}},iconContainer:{...x&&{borderColor:p.Palette.error["04"]},...u&&{backgroundColor:(null===(t=p.Palette.actions)||void 0===t?void 0:t.accent["04"])||p.Palette.accent["04"],borderColor:(null===(o=p.Palette.actions)||void 0===o?void 0:o.accent["04"])||p.Palette.accent["04"]},...b&&getCardCheckboxColors({isMarked:u,disabled:v,theme:p})},boxContainer:{...b?{}:l?{marginLeft:h,marginRight:0}:{marginRight:h},...s!==_constants.BUTTON_VARIANT&&!b&&{"&:active, &:hover":{"& $box":{borderColor:x?p.Palette.error["03"]:(null===(a=p.Palette.actions)||void 0===a?void 0:a.accent["03"])||p.Palette.accent["03"],borderWidth:1,overflow:"hidden",transition:"background-color 0.1s ease-in-out"}},"&:active":{"& $box":{backgroundColor:x?p.Palette.error["02"]:(null===(n=p.Palette.actions)||void 0===n?void 0:n.accent["02"])||p.Palette.accent["02"]}},"&:hover":{"& $box":{backgroundColor:x?p.Palette.error["01"]:(null===(r=p.Palette.actions)||void 0===r?void 0:r.accent["01"])||p.Palette.accent["01"]}}}},title:s===_constants.BUTTON_VARIANT&&{userSelect:"none"}}},retrieveStyle=e=>{let{value:t,disabled:o,indeterminate:a,reversed:n,spacing:r,theme:i,variant:c,meta:l}=e;const d=baseCheckBoxTheme(i),s=l&&(0,_form.shouldShowErrors)(l),{container:p,content:v,iconContainer:x,boxContainer:h,title:b}=conditionalStyles({value:t,disabled:o,indeterminate:a,reversed:n,spacing:r,variant:c,theme:i,error:s});return{box:d.box,content:{...d.content,...v},container:{...d.container,...p},iconContainer:{...d.iconContainer,...x},boxContainer:h,title:b,validation:d.validation,contentContainer:d.contentContainer,titleAndTooltip:d.titleAndTooltip,tooltip:d.tooltip,icon:d.icon,iconImage:d.iconImage,infoIcon:d.infoIcon,name:d.name,description:d.description}};exports.retrieveStyle=retrieveStyle;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getIconContentType=void 0;var _componentUtils=require("../../../../utils/componentUtils"),_constants=require("./constants");const getIconContentType=t=>(0,_componentUtils.isUTIcon)(t)?_constants.ICON_CONTENT_TYPES.UT_ICON:t&&"object"==typeof t&&t.src?_constants.ICON_CONTENT_TYPES.IMAGE:_constants.ICON_CONTENT_TYPES.COMPONENT;exports.getIconContentType=getIconContentType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CHIP_VARIANT=exports.CHIP_SIZES=exports.ADORNMENT_TYPES=exports.ADORNMENT_COMPONENT_MAPPER=void 0;var _UTIcon=_interopRequireDefault(require("../UTIcon")),_UTAvatar=_interopRequireDefault(require("../UTAvatar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const CHIP_VARIANT=exports.CHIP_VARIANT={DEFAULT:"default",OUTLINE:"outline"},CHIP_SIZES=exports.CHIP_SIZES={MEDIUM:"medium",SMALL:"small"},ADORNMENT_TYPES=exports.ADORNMENT_TYPES={ICON:"icon",AVATAR:"avatar",IMAGE:"image"},ADORNMENT_COMPONENT_MAPPER=exports.ADORNMENT_COMPONENT_MAPPER={[ADORNMENT_TYPES.ICON]:_UTIcon.default,[ADORNMENT_TYPES.AVATAR]:_UTAvatar.default,[ADORNMENT_TYPES.IMAGE]:"img"};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DEFAULT_COLOR=exports.CHIP_VARIANT=exports.CHIP_SIZES=exports.CHIP_ICON_SIZE=exports.ADORNMENT_TYPES=exports.ADORNMENT_COMPONENT_MAPPER=void 0;var _UTIcon=_interopRequireDefault(require("../UTIcon")),_UTAvatar=_interopRequireDefault(require("../UTAvatar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const CHIP_VARIANT=exports.CHIP_VARIANT={DEFAULT:"default",OUTLINE:"outline",SOLID:"solid"},DEFAULT_COLOR=exports.DEFAULT_COLOR=null,CHIP_SIZES=exports.CHIP_SIZES={MEDIUM:"medium",SMALL:"small"},CHIP_ICON_SIZE=exports.CHIP_ICON_SIZE={[CHIP_SIZES.MEDIUM]:"var(--UT-chip-icon-size-md, 20px)",[CHIP_SIZES.SMALL]:"var(--UT-chip-icon-size-sm, 16px)"},ADORNMENT_TYPES=exports.ADORNMENT_TYPES={ICON:"icon",AVATAR:"avatar",IMAGE:"image"},ADORNMENT_COMPONENT_MAPPER=exports.ADORNMENT_COMPONENT_MAPPER={[ADORNMENT_TYPES.ICON]:_UTIcon.default,[ADORNMENT_TYPES.AVATAR]:_UTAvatar.default,[ADORNMENT_TYPES.IMAGE]:"img"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../UTButton")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_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 n=new WeakMap,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../UTButton")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_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 n=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,s,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(r=t?o:n){if(r.has(e))return r.get(e);r.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?r(a,t,s):a[t]=e[t]);return a})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}const UTChip=e=>{let{active:t,adornment:n,children:o,color:r=_constants.DEFAULT_COLOR,dataTestId:s,disabled:a,isDragging:l,onClick:i,onClose:p,size:c=_constants.CHIP_SIZES.MEDIUM,textColor:u,variant:_=_constants.CHIP_VARIANT.DEFAULT}=e;const d=(0,_utils.getColorStyle)({color:r,textColor:u,variant:_}),{Adornment:f,adornmentProps:T,buttonProps:y,Container:I,containerProps:C,labelProps:g}=(0,_utils.getItemsProps)({active:t,adornment:n,dataTestId:s,disabled:a,isDragging:l,onClick:i,resolvedTextColor:d.color,size:c,variant:_}),M=p?e=>{e.stopPropagation(),p(e)}:void 0;return _react.default.createElement(I,_extends({className:"\n ".concat(_stylesModule.default.chipContainer,"\n ").concat(_stylesModule.default[c],"\n ").concat(_stylesModule.default[_],"\n ").concat(t?_stylesModule.default.active:"","\n ").concat(a?_stylesModule.default.disabled:"","\n ").concat(l?_stylesModule.default.dragging:"","\n ").concat(i&&!a?_stylesModule.default.interactive:_stylesModule.default.nonInteractive,"\n "),style:d},C),f&&_react.default.createElement(f,T),_react.default.createElement(_UTLabel.default,g,o),M&&_react.default.createElement(_UTButton.default,_extends({},y,{Icon:"IconX",onClick:M,size:"small",variant:"text"})))};UTChip.propTypes={active:_propTypes.bool,adornment:(0,_propTypes.shape)({props:_propTypes.object,type:(0,_propTypes.oneOf)([_constants.ADORNMENT_TYPES.ICON,_constants.ADORNMENT_TYPES.AVATAR,_constants.ADORNMENT_TYPES.IMAGE])}),color:_propTypes.string,dataTestId:_propTypes.string,disabled:_propTypes.bool,isDragging:_propTypes.bool,onClick:_propTypes.func,onClose:_propTypes.func,size:(0,_propTypes.oneOf)([_constants.CHIP_SIZES.MEDIUM,_constants.CHIP_SIZES.SMALL]),textColor:_propTypes.string,variant:(0,_propTypes.oneOf)([_constants.CHIP_VARIANT.DEFAULT,_constants.CHIP_VARIANT.OUTLINE,_constants.CHIP_VARIANT.SOLID])};var _default=exports.default=(0,_react.memo)(UTChip);
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
$dragging-shadow-color: rgba(0, 0, 0, 0.25);
|
|
2
|
+
|
|
1
3
|
.chipContainer {
|
|
2
4
|
align-items: center;
|
|
3
5
|
border-style: solid;
|
|
4
|
-
border-radius:
|
|
6
|
+
border-radius: var(--UT-chip-radius, 9999px);
|
|
5
7
|
border-width: 1px;
|
|
6
8
|
display: flex;
|
|
7
9
|
flex-direction: row;
|
|
8
10
|
flex-shrink: 0;
|
|
9
|
-
grid-gap: 8px;
|
|
10
11
|
transition:
|
|
11
12
|
background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
|
12
13
|
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
|
@@ -17,11 +18,13 @@
|
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
.small {
|
|
20
|
-
|
|
21
|
+
gap: var(--UT-chip-gap-sm, 4px);
|
|
22
|
+
padding: var(--UT-chip-padding-y-sm, 4px) var(--UT-chip-padding-x-sm, 8px);
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.medium {
|
|
24
|
-
|
|
26
|
+
gap: var(--UT-chip-gap-md, 8px);
|
|
27
|
+
padding: var(--UT-chip-padding-y-md, 8px) var(--UT-chip-padding-x-md, 12px);
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
.interactive {
|
|
@@ -49,7 +52,7 @@
|
|
|
49
52
|
|
|
50
53
|
&.dragging {
|
|
51
54
|
background-color: var(--light01);
|
|
52
|
-
box-shadow: 0 4px 4px
|
|
55
|
+
box-shadow: 0 4px 4px 0 $dragging-shadow-color;
|
|
53
56
|
}
|
|
54
57
|
|
|
55
58
|
&:not(.dragging) {
|
|
@@ -83,7 +86,7 @@
|
|
|
83
86
|
|
|
84
87
|
&.dragging {
|
|
85
88
|
background-color: var(--light01);
|
|
86
|
-
box-shadow: 0 4px 4px
|
|
89
|
+
box-shadow: 0 4px 4px 0 $dragging-shadow-color;
|
|
87
90
|
}
|
|
88
91
|
|
|
89
92
|
&:not(.dragging) {
|
|
@@ -100,8 +103,32 @@
|
|
|
100
103
|
}
|
|
101
104
|
}
|
|
102
105
|
|
|
106
|
+
.solid {
|
|
107
|
+
border-color: transparent;
|
|
108
|
+
|
|
109
|
+
&:not(.disabled) {
|
|
110
|
+
&:hover {
|
|
111
|
+
filter: brightness(0.92);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.interactive {
|
|
115
|
+
&:active {
|
|
116
|
+
filter: brightness(0.85);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&.dragging {
|
|
121
|
+
box-shadow: 0 4px 4px 0 $dragging-shadow-color;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&.disabled {
|
|
126
|
+
opacity: 0.5;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
103
130
|
.imageAdornment {
|
|
104
|
-
height: 24px;
|
|
131
|
+
height: var(--UT-chip-image-size, 24px);
|
|
105
132
|
object-fit: cover;
|
|
106
|
-
width: 24px;
|
|
133
|
+
width: var(--UT-chip-image-size, 24px);
|
|
107
134
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getTextVariant=exports.getTextColorTheme=exports.getItemsProps=exports.getDefaultAdornmentProps=exports.getButtonColorTheme=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_Palette=require("../../constants/Palette"),_constants=require("../UTLabel/constants"),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../UTTouchableWithoutFeedback")),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.parseLinearGradient=exports.isGradientColor=exports.getTextVariant=exports.getTextColorTheme=exports.getItemsProps=exports.getDefaultAdornmentProps=exports.getColorStyle=exports.getButtonColorTheme=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_Palette=require("../../constants/Palette"),_constants=require("../UTIcon/constants"),_constants2=require("../UTLabel/constants"),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../UTTouchableWithoutFeedback")),_constants3=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}const GRADIENT_REGEX=/^linear-gradient\(([\s\S]+)\)$/i,splitTopLevel=t=>{const{parts:e,current:r}=t.split("").reduce((t,e)=>{const r=t.depth+("("===e?1:")"===e?-1:0);return","===e&&0===r?{parts:[...t.parts,t.current],current:"",depth:r}:{...t,current:t.current+e,depth:r}},{parts:[],current:"",depth:0});return r.trim()?[...e,r]:e},isGradientColor=t=>"string"==typeof t&&GRADIENT_REGEX.test(t.trim());exports.isGradientColor=isGradientColor;const DIRECTION_REGEX=/^(-?\d+(?:\.\d+)?(?:deg|grad|rad|turn)|to\s)/i,parseLinearGradient=t=>{const e=isGradientColor(t)&&t.trim().match(GRADIENT_REGEX);if(!e)return null;const r=splitTopLevel(e[1]).map(t=>t.trim()),o=DIRECTION_REGEX.test(r[0]),n=o?r[0]:null,a=o?r.slice(1):r;return{direction:n,stops:a.map((t,e)=>{const r=t.trim().split(/\s+/),o=r[r.length-1],n=/%$/.test(o);return{color:n?r.slice(0,-1).join(" "):r.join(" "),offset:n?o:"".concat(e/Math.max(a.length-1,1)*100,"%")}})}};exports.parseLinearGradient=parseLinearGradient;const getTintedGradient=(t,e)=>{const r=parseLinearGradient(t);if(!r)return null;const o=r.stops.map(t=>"color-mix(in srgb, ".concat(t.color," ").concat(e,"%, transparent) ").concat(t.offset)).join(", ");return"linear-gradient(".concat(r.direction?"".concat(r.direction,", "):"").concat(o,")")},getColorStyle=t=>{var e;let{color:r,textColor:o,variant:n}=t;if(!r&&!o)return{};const a=isGradientColor(r),s=a?null===(e=parseLinearGradient(r))||void 0===e||null===(e=e.stops[0])||void 0===e?void 0:e.color:r;return n===_constants3.CHIP_VARIANT.SOLID?{...r&&(a?{backgroundImage:r}:{backgroundColor:r}),borderColor:"transparent",color:o||"#FFFFFF"}:n===_constants3.CHIP_VARIANT.OUTLINE?{backgroundColor:"transparent",...s&&{borderColor:"color-mix(in srgb, ".concat(s," 40%, transparent)")},color:o||"var(--dark05)"}:{...a?{backgroundImage:getTintedGradient(r,14)}:s&&{backgroundColor:"color-mix(in srgb, ".concat(s," 14%, transparent)")},borderColor:"transparent",color:o||s}};exports.getColorStyle=getColorStyle;const getTextColorTheme=t=>{let{active:e,disabled:r,isDragging:o,variant:n}=t;return!e||r||o?_Palette.COLOR_THEMES.gray:n===_constants3.CHIP_VARIANT.DEFAULT?_Palette.COLOR_THEMES.light:_Palette.COLOR_THEMES.accent};exports.getTextColorTheme=getTextColorTheme;const getButtonColorTheme=t=>{let{active:e,disabled:r,isDragging:o,variant:n}=t;return!e||r||o?_Palette.COLOR_THEMES.gray:n===_constants3.CHIP_VARIANT.DEFAULT?_Palette.COLOR_THEMES.negative:_Palette.COLOR_THEMES.primary};exports.getButtonColorTheme=getButtonColorTheme;const getTextVariant=t=>t===_constants3.CHIP_SIZES.SMALL?_constants2.VARIANTS_NAMES.SMALL:_constants2.VARIANTS_NAMES.BODY;exports.getTextVariant=getTextVariant;const getDefaultAdornmentProps=t=>{var e;let{active:r,adornment:o,disabled:n,isDragging:a,resolvedTextColor:s,size:i,variant:l}=t;return(0,_isEmpty.default)(o)||!o.type?{}:o.type===_constants3.ADORNMENT_TYPES.ICON?{...o.props,colorTheme:s?_constants.CURRENT_COLOR:getTextColorTheme({active:r,disabled:n,isDragging:a,variant:l}),size:_constants3.CHIP_ICON_SIZE[i]}:o.type===_constants3.ADORNMENT_TYPES.AVATAR?{...o.props,size:"small"}:o.type===_constants3.ADORNMENT_TYPES.IMAGE?{...o.props,className:"".concat(_stylesModule.default.imageAdornment," ").concat((null===(e=o.props)||void 0===e?void 0:e.className)||"")}:{}};exports.getDefaultAdornmentProps=getDefaultAdornmentProps;const getItemsProps=t=>{let{active:e,adornment:r,dataTestId:o,disabled:n,isDragging:a,onClick:s,resolvedTextColor:i,size:l,variant:c}=t;return{Adornment:null!=r&&r.type?_constants3.ADORNMENT_COMPONENT_MAPPER[null==r?void 0:r.type]:null,adornmentProps:getDefaultAdornmentProps({active:e,adornment:r,disabled:n,isDragging:a,resolvedTextColor:i,size:l,variant:c}),Container:s&&!n?_UTTouchableWithoutFeedback.default:"div",containerProps:s&&!n?{onClick:s,dataTestId:o}:{"data-testid":o},labelProps:{colorTheme:i?void 0:getTextColorTheme({active:e,disabled:n,isDragging:a,variant:c}),style:i?{color:i}:void 0,variant:getTextVariant(l)},buttonProps:{colorTheme:getButtonColorTheme({active:e,disabled:n,isDragging:a,variant:c})}}};exports.getItemsProps=getItemsProps;
|