@widergy/energy-ui 3.149.0 → 3.150.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/UTCarousel/README.md +65 -0
  3. package/dist/components/UTCarousel/components/Legend/index.js +1 -0
  4. package/dist/components/UTCarousel/components/Slider/component/Slide/index.js +15 -5
  5. package/dist/components/UTCarousel/components/Slider/layout.js +7 -1
  6. package/dist/components/UTCarousel/index.js +8 -3
  7. package/dist/components/UTLabel/index.js +3 -0
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [3.150.0](https://github.com/widergy/energy-ui/compare/v3.149.0...v3.150.0) (2026-05-08)
2
+
3
+
4
+ ### Features
5
+
6
+ * [CX-2272] extend UTCarousel and UTLabel for custom slide content ([#790](https://github.com/widergy/energy-ui/issues/790)) ([244111f](https://github.com/widergy/energy-ui/commit/244111fc15e0186aa52794434b74982d2e145a97))
7
+
1
8
  # [3.149.0](https://github.com/widergy/energy-ui/compare/v3.148.0...v3.149.0) (2026-05-08)
2
9
 
3
10
 
package/dist/components/UTCarousel/README.md ADDED
@@ -0,0 +1,65 @@
1
+ # UTCarousel
2
+
3
+ Carousel de imágenes con soporte para autoplay, swipe táctil, flechas de navegación y puntos indicadores. Cada slide puede renderizar una imagen de fondo o contenido React custom.
4
+
5
+ ## Props
6
+
7
+ | Prop | Tipo | Default | Descripción |
8
+ |---|---|---|---|
9
+ | `imgArray` | `array` | — | Array de slides. Ver estructura abajo. |
10
+ | `autoPlay` | `bool` | `false` | Activa el avance automático entre slides. |
11
+ | `autoPlayDelay` | `number` | `2000` | Milisegundos entre slides en autoplay. |
12
+ | `height` | `string` | valor SCSS | Altura del carousel (ej. `'200px'`, `'var(--carousel-banner-height)'`). |
13
+ | `legend` | `shape` | — | Configuración de puntos indicadores. `{ position: 'inside' \| 'outside' }`. Si no se pasa, no se muestran puntos. |
14
+ | `arrow` | `shape` | — | Configuración de flechas. `{ position: 'inside' \| 'outside', arrowCustomLeft, arrowCustomRight, callbackLeft, callbackRight }`. |
15
+ | `activeEvents` | `bool` | — | Habilita/deshabilita eventos de puntero. |
16
+ | `borderSize` | `number` | — | Tamaño del borde entre slides. |
17
+ | `className` | `string` | — | Clase CSS adicional para el contenedor. |
18
+ | `classes` | `object` | — | Override de clases CSS internas (ej. `{ image: 'miClase' }`). |
19
+
20
+ ### Estructura de `imgArray`
21
+
22
+ ```js
23
+ [
24
+ {
25
+ id: 1, // recomendado para keys estables
26
+ imgSrc: '...', // URL de imagen de fondo (cuando no se usa renderContent)
27
+ onClick: fn, // handler de click (cuando no se usa renderContent)
28
+ renderContent: <MiComponente /> // contenido React custom (reemplaza imgSrc)
29
+ }
30
+ ]
31
+ ```
32
+
33
+ Cuando se provee `renderContent`, el slide renderiza ese nodo directamente en lugar de la imagen de fondo. El componente pasado es responsable de manejar su propio click y dimensiones.
34
+
35
+ ## Uso básico — imágenes
36
+
37
+ ```jsx
38
+ <UTCarousel
39
+ imgArray={[
40
+ { imgSrc: '/banner1.jpg', onClick: () => navigate('/promo1') },
41
+ { imgSrc: '/banner2.jpg', onClick: () => navigate('/promo2') }
42
+ ]}
43
+ autoPlay
44
+ autoPlayDelay={5000}
45
+ height="200px"
46
+ />
47
+ ```
48
+
49
+ ## Uso con contenido custom
50
+
51
+ ```jsx
52
+ <UTCarousel
53
+ imgArray={[
54
+ { id: 1, renderContent: <BannerItem item={item1} onClick={fn1} /> },
55
+ { id: 2, renderContent: <BannerItem item={item2} onClick={fn2} /> }
56
+ ]}
57
+ autoPlay
58
+ autoPlayDelay={7000}
59
+ height="var(--carousel-banner-height)"
60
+ />
61
+ ```
62
+
63
+ ## Sin puntos indicadores
64
+
65
+ No pasar la prop `legend` para ocultar los dots.
package/dist/components/UTCarousel/components/Legend/index.js CHANGED
@@ -20,6 +20,7 @@ const LegendContainer = _ref => {
20
20
  const handleOnClick = () => onClick(index + 1);
21
21
  const isActive = currentSlide === index;
22
22
  return LegendCustom ? /*#__PURE__*/_react.default.createElement(LegendCustom, {
23
+ isActive: isActive,
23
24
  onClick: handleOnClick
24
25
  }) : /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
25
26
  className: classes.legendStyleTouchable,
package/dist/components/UTCarousel/components/Slider/component/Slide/index.js CHANGED
@@ -19,17 +19,26 @@ const Slide = _ref => {
19
19
  imgSrc,
20
20
  onClick,
21
21
  position,
22
+ renderContent,
22
23
  shouldAnimate,
23
24
  widthContainer
24
25
  } = _ref;
25
26
  const slide = currentSlide === position ? border / 2 : currentSlide === position - 1 ? -border / 4 : currentSlide === position + 1 && border + border / 4;
27
+ const containerStyle = {
28
+ left: position * (slide ? widthContainer + slide : widthContainer),
29
+ width: "".concat(border ? widthContainer - border : widthContainer, "px"),
30
+ transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
31
+ };
32
+ if (renderContent) {
33
+ return /*#__PURE__*/_react.default.createElement("div", {
34
+ className: _stylesModule.default.imageContainer,
35
+ style: containerStyle,
36
+ draggable: "false"
37
+ }, renderContent);
38
+ }
26
39
  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
27
40
  className: "".concat(_stylesModule.default.imageContainer),
28
- style: {
29
- left: position * (slide ? widthContainer + slide : widthContainer),
30
- width: "".concat(border ? widthContainer - border : widthContainer, "px"),
31
- transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
32
- },
41
+ style: containerStyle,
33
42
  draggable: "false",
34
43
  onClick: onClick
35
44
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -48,6 +57,7 @@ Slide.propTypes = {
48
57
  imgSrc: _propTypes.string,
49
58
  onClick: _propTypes.func,
50
59
  position: _propTypes.number,
60
+ renderContent: _propTypes.node,
51
61
  shouldAnimate: _propTypes.bool,
52
62
  widthContainer: _propTypes.number
53
63
  };
package/dist/components/UTCarousel/components/Slider/layout.js CHANGED
@@ -56,10 +56,16 @@ class Slider extends _react.PureComponent {
56
56
  key: "slide-".concat(slide.id || slide.imgSrc),
57
57
  onClick: slide.onClick,
58
58
  position: _index - 1,
59
+ renderContent: slide.renderContent,
59
60
  shouldAnimate: shouldAnimate,
60
61
  widthContainer: containerWidth
61
62
  }))), legend && legend.position === _constants.INSIDE && /*#__PURE__*/_react.default.createElement("div", {
62
- className: _stylesModule.default.legendContainer
63
+ className: _stylesModule.default.legendContainer,
64
+ style: {
65
+ justifyContent: legend.align || 'center',
66
+ paddingBottom: legend.paddingBottom,
67
+ paddingLeft: legend.paddingLeft
68
+ }
63
69
  }, /*#__PURE__*/_react.default.createElement("div", {
64
70
  className: _stylesModule.default.legend
65
71
  }, slides.map((slide, itemIndex) => /*#__PURE__*/_react.default.createElement(_Legend.default, {
package/dist/components/UTCarousel/index.js CHANGED
@@ -46,11 +46,16 @@ UTCarousel.propTypes = {
46
46
  callbackRight: _propTypes.func
47
47
  }),
48
48
  legend: (0, _propTypes.shape)({
49
- position: _propTypes.string,
50
- legendCustom: _propTypes.node
49
+ align: _propTypes.string,
50
+ legendCustom: _propTypes.func,
51
+ paddingBottom: _propTypes.string,
52
+ paddingLeft: _propTypes.string,
53
+ position: _propTypes.string
51
54
  }),
52
55
  imgArray: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
53
- imgSrc: _propTypes.string
56
+ id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
57
+ imgSrc: _propTypes.string,
58
+ renderContent: _propTypes.node
54
59
  })),
55
60
  borderSize: _propTypes.number,
56
61
  autoPlay: _propTypes.bool,
package/dist/components/UTLabel/index.js CHANGED
@@ -25,6 +25,7 @@ const UTLabel = _ref => {
25
25
  dataTestId,
26
26
  markdownExtended,
27
27
  markdownRenderers,
28
+ style,
28
29
  title,
29
30
  variant,
30
31
  withMarkdown
@@ -38,6 +39,7 @@ const UTLabel = _ref => {
38
39
  return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
39
40
  className: componentClassname.trim(),
40
41
  "data-testid": dataTestId,
42
+ style: style,
41
43
  title: title
42
44
  }, withMarkdown && /*#__PURE__*/_react.default.createElement(_Markdown.default, {
43
45
  classes: classes,
@@ -53,6 +55,7 @@ UTLabel.propTypes = {
53
55
  dataTestId: _propTypes.string,
54
56
  markdownExtended: _propTypes.bool,
55
57
  markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
58
+ style: _propTypes.object,
56
59
  title: _propTypes.string,
57
60
  variant: _propTypes.string,
58
61
  withMarkdown: _propTypes.bool
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.149.0",
3
+ "version": "3.150.0",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",