@widergy/energy-ui 3.167.0 → 3.168.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 (52) hide show
  1. package/CHANGELOG.md +19 -2
  2. package/dist/components/UTDatePicker/assets/calendar.svg +3 -13
  3. package/dist/components/UTDatePicker/versions/V0/assets/calendar.svg +3 -13
  4. package/dist/components/UTDatePicker/versions/V0/index.js +3 -10
  5. package/dist/components/UTDatePicker/versions/V1/index.js +2 -1
  6. package/dist/components/UTLoading/README.md +85 -0
  7. package/dist/components/UTLoading/components/Spinner/index.js +1 -1
  8. package/dist/components/UTLoading/index.js +17 -7
  9. package/dist/components/UTLoading/versions/V0/index.js +32 -0
  10. package/dist/components/UTLoading/versions/V1/components/LogoLoader/components/GradientTrack/index.js +65 -0
  11. package/dist/components/UTLoading/versions/V1/components/LogoLoader/constants.js +14 -0
  12. package/dist/components/UTLoading/versions/V1/components/LogoLoader/index.js +54 -0
  13. package/dist/components/UTLoading/versions/V1/components/LogoLoader/styles.module.scss +107 -0
  14. package/dist/components/UTLoading/versions/V1/components/LogoLoader/theme.js +18 -0
  15. package/dist/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/constants.js +7 -0
  16. package/dist/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/index.js +57 -0
  17. package/dist/components/UTLoading/versions/V1/components/Spinner/constants.js +12 -0
  18. package/dist/components/UTLoading/versions/V1/components/Spinner/index.js +56 -0
  19. package/dist/components/UTLoading/versions/V1/components/Spinner/styles.module.scss +39 -0
  20. package/dist/components/UTLoading/versions/V1/components/Spinner/theme.js +21 -0
  21. package/dist/components/UTLoading/versions/V1/constants.js +11 -0
  22. package/dist/components/UTLoading/versions/V1/index.js +30 -0
  23. package/dist/components/UTLoading/versions/V1/stories/UTLoadingV1.mdx +67 -0
  24. package/dist/components/UTLoading/versions/V1/stories/UTLoadingV1.stories.js +369 -0
  25. package/dist/constants/testIds.js +4 -0
  26. package/dist/esm/components/UTDatePicker/assets/calendar.svg +3 -13
  27. package/dist/esm/components/UTDatePicker/versions/V0/assets/calendar.svg +3 -13
  28. package/dist/esm/components/UTDatePicker/versions/V0/index.js +3 -10
  29. package/dist/esm/components/UTDatePicker/versions/V1/index.js +2 -1
  30. package/dist/esm/components/UTLoading/README.md +85 -0
  31. package/dist/esm/components/UTLoading/components/Spinner/index.js +1 -1
  32. package/dist/esm/components/UTLoading/index.js +18 -8
  33. package/dist/esm/components/UTLoading/versions/V0/index.js +25 -0
  34. package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/components/GradientTrack/index.js +58 -0
  35. package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/constants.js +8 -0
  36. package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/index.js +47 -0
  37. package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/styles.module.scss +107 -0
  38. package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/theme.js +11 -0
  39. package/dist/esm/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/constants.js +1 -0
  40. package/dist/esm/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/index.js +50 -0
  41. package/dist/esm/components/UTLoading/versions/V1/components/Spinner/constants.js +6 -0
  42. package/dist/esm/components/UTLoading/versions/V1/components/Spinner/index.js +49 -0
  43. package/dist/esm/components/UTLoading/versions/V1/components/Spinner/styles.module.scss +39 -0
  44. package/dist/esm/components/UTLoading/versions/V1/components/Spinner/theme.js +14 -0
  45. package/dist/esm/components/UTLoading/versions/V1/constants.js +5 -0
  46. package/dist/esm/components/UTLoading/versions/V1/index.js +23 -0
  47. package/dist/esm/components/UTLoading/versions/V1/stories/UTLoadingV1.mdx +67 -0
  48. package/dist/esm/components/UTLoading/versions/V1/stories/UTLoadingV1.stories.js +362 -0
  49. package/dist/esm/constants/testIds.js +4 -0
  50. package/dist/esm/utils/hooks/useCSSVariables/constants.js +16 -1
  51. package/dist/utils/hooks/useCSSVariables/constants.js +16 -1
  52. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,9 +1,26 @@
1
- # [3.167.0](https://github.com/widergy/energy-ui/compare/v3.166.1...v3.167.0) (2026-06-17)
1
+ # [3.168.0](https://github.com/widergy/energy-ui/compare/v3.167.1...v3.168.0) (2026-06-18)
2
2
 
3
3
 
4
4
  ### Features
5
5
 
6
- * [AXCH-1778] button prop disabled in ut dot menu ([#819](https://github.com/widergy/energy-ui/issues/819)) ([14a1ccd](https://github.com/widergy/energy-ui/commit/14a1ccd7976107b661045c0ed2c9c959a050c29d))
6
+ * [CX-2398] new ut loading version ([#815](https://github.com/widergy/energy-ui/issues/815)) ([b115b7e](https://github.com/widergy/energy-ui/commit/b115b7ecabd6e84e4917381f0d7876207602ffae))
7
+
8
+ ## [3.167.1](https://github.com/widergy/energy-ui/compare/v3.167.0...v3.167.1) (2026-06-18)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * multiple fixes ([#822](https://github.com/widergy/energy-ui/issues/822)) ([c6ce17d](https://github.com/widergy/energy-ui/commit/c6ce17d96fc15531bbde7a390960bcf22e709da4))
14
+
15
+ # [3.167.0](https://github.com/widergy/energy-ui/compare/v3.166.1...v3.167.0) (2026-06-17)
16
+
17
+ ### Novedades y Mejoras
18
+
19
+ * El menú de opciones ahora puede mostrarse deshabilitado cuando la acción no está disponible para el usuario. [#819](https://github.com/widergy/Energy-UI/pull/819) [AXCH-1778](https://widergy.atlassian.net/browse/AXCH-1778)
20
+
21
+ ### Correcciones
22
+
23
+ * Mejoras internas de la plataforma. [`da99fe2`](https://github.com/widergy/Energy-UI/commit/da99fe2)
7
24
 
8
25
  ## [3.166.1](https://github.com/widergy/energy-ui/compare/v3.166.0...v3.166.1) (2026-06-16)
9
26
 
@@ -1,14 +1,4 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
- <defs>
4
- <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
5
- </defs>
6
- <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
7
- <g id="Group" transform="translate(-3.000000, -2.000000)">
8
- <mask id="mask-2" fill="white">
9
- <use xlink:href="#calendario"></use>
10
- </mask>
11
- <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
12
- </g>
13
- </g>
14
- </svg>
2
+ <svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
3
+ <path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
4
+ </svg>
@@ -1,14 +1,4 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
- <defs>
4
- <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
5
- </defs>
6
- <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
7
- <g id="Group" transform="translate(-3.000000, -2.000000)">
8
- <mask id="mask-2" fill="white">
9
- <use xlink:href="#calendario"></use>
10
- </mask>
11
- <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
12
- </g>
13
- </g>
14
- </svg>
2
+ <svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
3
+ <path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
4
+ </svg>
@@ -34,22 +34,15 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
34
34
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
35
35
  function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
36
36
  var CalendarIcon = function CalendarIcon(props) {
37
- return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("path", {
38
- d: "M8 15c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H6c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M6 6h1v1c0 .55.45 1 1 1s1-.45 1-1V6h6v1c0 .55.45 1 1 1s1-.45 1-1V6h1c.551 0 1 .449 1 1v4H5V7c0-.551.449-1 1-1m12-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1v1H9V3c0-.55-.45-1-1-1s-1 .45-1 1v1H6C4.346 4 3 5.346 3 7v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V7c0-1.654-1.346-3-3-3",
39
- id: "a"
40
- })), /*#__PURE__*/_react.default.createElement("use", {
41
- fillRule: "nonzero",
42
- xlinkHref: "#a",
43
- transform: "translate(-3 -2)",
44
- fill: "current"
37
+ return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
38
+ d: "M5 13c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1H9c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H3c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M3 4h1v1c0 .55.45 1 1 1s1-.45 1-1V4h6v1c0 .55.45 1 1 1s1-.45 1-1V4h1c.551 0 1 .449 1 1v4H2V5c0-.551.449-1 1-1m12-2h-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1H6V1c0-.55-.45-1-1-1S4 .45 4 1v1H3C1.346 2 0 3.346 0 5v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V5c0-1.654-1.346-3-3-3"
45
39
  }));
46
40
  };
47
41
  CalendarIcon.defaultProps = {
48
42
  width: "18",
49
43
  height: "20",
50
44
  viewBox: "0 0 18 20",
51
- xmlns: "http://www.w3.org/2000/svg",
52
- xmlnsXlink: "http://www.w3.org/1999/xlink"
45
+ xmlns: "http://www.w3.org/2000/svg"
53
46
  };
54
47
  _dayjs2.default.extend(_customParseFormat.default);
55
48
  _dayjs2.default.extend(_isBetween.default);
@@ -205,7 +205,8 @@ const UTDatePicker = _ref => {
205
205
  InputProps: {
206
206
  endAdornment
207
207
  },
208
- onChange: handleTextChange
208
+ onChange: handleTextChange,
209
+ fullWidth: true
209
210
  },
210
211
  onBlur: handleTextBlur,
211
212
  onFocus: openCalendar,
@@ -0,0 +1,85 @@
1
+ # UTLoading
2
+
3
+ Componente de carga con soporte de versiones. Muestra un indicador visual de carga mientras se obtienen datos. Soporta dos variantes internas: un Spinner circular y un LogoLoader con el logo/isologo del cliente.
4
+
5
+ ## Versiones
6
+
7
+ ### V0 (default)
8
+
9
+ Comportamiento original. Se activa cuando no se pasa la prop `version` o cuando se pasa `version="V0"`.
10
+
11
+ - `useUtilityLoading=false` → Spinner basado en Material UI `CircularProgress`
12
+ - `useUtilityLoading=true` → AnimatedCircles: logo + 3 puntos animados, siempre full screen
13
+
14
+ ### V1
15
+
16
+ Nueva versión con diseño actualizado. Se activa pasando `version="V1"`.
17
+
18
+ - `useUtilityLoading=false` → Nuevo Spinner CSS puro con línea más gruesa
19
+ - `useUtilityLoading=true` → LogoLoader: track de gradiente animado con logo del cliente, prop `fullScreen` para controlar comportamiento
20
+
21
+ ## Uso básico
22
+
23
+ ```jsx
24
+ import { UTLoading } from '@widergy/energy-ui';
25
+
26
+ // V0 (default — sin cambios)
27
+ <UTLoading loading>
28
+ <MiContenido />
29
+ </UTLoading>
30
+
31
+ // V1 — Spinner
32
+ <UTLoading version="V1" loading useUtilityLoading={false}>
33
+ <MiContenido />
34
+ </UTLoading>
35
+
36
+ // V1 — LogoLoader full screen
37
+ <UTLoading
38
+ version="V1"
39
+ loading
40
+ useUtilityLoading
41
+ Logo="https://mi-dominio.com/logo.svg"
42
+ fullScreen
43
+ />
44
+
45
+ // V1 — LogoLoader en contenedor
46
+ <UTLoading
47
+ version="V1"
48
+ loading
49
+ useUtilityLoading
50
+ fullScreen={false}
51
+ >
52
+ <MiContenido />
53
+ </UTLoading>
54
+ ```
55
+
56
+ ## Props
57
+
58
+ | Prop | Tipo | Default | Descripción |
59
+ |------|------|---------|-------------|
60
+ | `version` | `string` | `'V0'` | `'V0'` o `'V1'` — selecciona la versión a renderizar |
61
+ | `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
62
+ | `children` | `node` | — | Contenido a mostrar cuando `loading=false` |
63
+ | `useUtilityLoading` | `bool` | — | `true` → LogoLoader / AnimatedCircles; `false` → Spinner |
64
+ | `fullScreen` | `bool` | `true` | Solo V1 LogoLoader. `true`: `position: fixed` full screen. `false`: adaptado al contenedor |
65
+ | `Logo` | `string` | — | URL del asset SVG del logo/isologo del cliente |
66
+ | `text` | `string` | `'Cargando el contenido...'` | Texto de carga. Pasar `''` para ocultarlo (solo V1) |
67
+ | `dataTestId` | `string` | — | `data-testid` del elemento raíz (solo V1) |
68
+ | `color` | `string` | — | Color CSS explícito del spinner (solo V0 Spinner) |
69
+ | `size` | `number` | — | Tamaño del spinner en px (solo V0) |
70
+ | `thickness` | `number` | — | Grosor del spinner (solo V0) |
71
+ | `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (Spinner) |
72
+ | `className` | `string` | — | Clase adicional para el spinner (solo V0) |
73
+ | `textClassName` | `string` | — | Clase del texto (solo V0) |
74
+ | `wrapperClassName` | `string` | — | Clase del wrapper de children (Spinner) |
75
+ | `classNames` | `object` | — | Objeto de clases para AnimatedCircles (solo V0) |
76
+
77
+ ## Design tokens — V1
78
+
79
+ | Token | Descripción | Fallback |
80
+ |-------|-------------|---------|
81
+ | `--UT-loading-track-color-start` | Color inicial del gradiente del track | `identitySolidTone1` del cliente |
82
+ | `--UT-loading-track-color-end` | Color final del gradiente del track | `identitySolidTone2` del cliente |
83
+ | `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
84
+
85
+ > Los tokens de color del gradiente se derivan automáticamente de los colores de identidad de cada cliente. El ajuste de valores exactos queda pendiente de confirmación de Diseño en Figma (CX-2398).
@@ -21,7 +21,7 @@ const Spinner = _ref => {
21
21
  thickness,
22
22
  wrapperClassName
23
23
  } = _ref;
24
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, loading && /*#__PURE__*/_react.default.createElement(_Loading.default, {
24
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && /*#__PURE__*/_react.default.createElement(_Loading.default, {
25
25
  className: className,
26
26
  size: size,
27
27
  text: text,
@@ -6,19 +6,28 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = require("prop-types");
9
- var _AnimatedCircles = _interopRequireDefault(require("./components/AnimatedCircles"));
10
- var _Spinner = _interopRequireDefault(require("./components/Spinner"));
9
+ var _V = _interopRequireDefault(require("./versions/V0"));
10
+ var _V2 = _interopRequireDefault(require("./versions/V1"));
11
11
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
- const UTLoading = props => {
13
- const {
14
- useUtilityLoading
15
- } = props || {};
16
- return useUtilityLoading ? /*#__PURE__*/_react.default.createElement(_AnimatedCircles.default, props) : /*#__PURE__*/_react.default.createElement(_Spinner.default, props);
12
+ const COMPONENTS = {
13
+ V0: _V.default,
14
+ V1: _V2.default
15
+ };
16
+ const UTLoading = _ref => {
17
+ let {
18
+ version = 'V0',
19
+ ...props
20
+ } = _ref;
21
+ const Component = COMPONENTS[version] || _V.default;
22
+ return /*#__PURE__*/_react.default.createElement(Component, props);
17
23
  };
18
24
  UTLoading.propTypes = {
19
25
  children: _propTypes.node,
20
26
  className: _propTypes.string,
21
27
  color: _propTypes.string,
28
+ colors: (0, _propTypes.arrayOf)(_propTypes.string),
29
+ dataTestId: _propTypes.string,
30
+ fullScreen: _propTypes.bool,
22
31
  loading: _propTypes.bool,
23
32
  Logo: _propTypes.string,
24
33
  preventUnmount: _propTypes.bool,
@@ -27,6 +36,7 @@ UTLoading.propTypes = {
27
36
  textClassName: _propTypes.string,
28
37
  thickness: _propTypes.number,
29
38
  useUtilityLoading: _propTypes.bool,
39
+ version: _propTypes.string,
30
40
  wrapperClassName: _propTypes.string
31
41
  };
32
42
  var _default = exports.default = UTLoading;
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ var _AnimatedCircles = _interopRequireDefault(require("../../components/AnimatedCircles"));
10
+ var _Spinner = _interopRequireDefault(require("../../components/Spinner"));
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ const V0 = props => {
13
+ const {
14
+ useUtilityLoading
15
+ } = props;
16
+ return useUtilityLoading ? /*#__PURE__*/_react.default.createElement(_AnimatedCircles.default, props) : /*#__PURE__*/_react.default.createElement(_Spinner.default, props);
17
+ };
18
+ V0.propTypes = {
19
+ children: _propTypes.node,
20
+ className: _propTypes.string,
21
+ color: _propTypes.string,
22
+ loading: _propTypes.bool,
23
+ Logo: _propTypes.string,
24
+ preventUnmount: _propTypes.bool,
25
+ size: _propTypes.number,
26
+ text: _propTypes.string,
27
+ textClassName: _propTypes.string,
28
+ thickness: _propTypes.number,
29
+ useUtilityLoading: _propTypes.bool,
30
+ wrapperClassName: _propTypes.string
31
+ };
32
+ var _default = exports.default = V0;
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _constants = require("../../constants");
9
+ var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
10
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
+ const GradientTrack = () => /*#__PURE__*/_react.default.createElement("svg", {
12
+ className: _stylesModule.default.track,
13
+ overflow: "visible",
14
+ viewBox: "0 0 ".concat(_constants.TRACK_VIEW_BOX_SIZE, " ").concat(_constants.TRACK_VIEW_BOX_SIZE),
15
+ xmlns: "http://www.w3.org/2000/svg"
16
+ }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
17
+ id: _constants.GRADIENT_ID,
18
+ x1: "0%",
19
+ x2: "100%",
20
+ y1: "0%",
21
+ y2: "100%"
22
+ }, /*#__PURE__*/_react.default.createElement("stop", {
23
+ offset: "0%",
24
+ style: {
25
+ stopColor: 'var(--UT-loading-color-start, #25E0A6)'
26
+ }
27
+ }), /*#__PURE__*/_react.default.createElement("stop", {
28
+ offset: "100%",
29
+ style: {
30
+ stopColor: 'var(--UT-loading-color-end, #20BBFC)'
31
+ }
32
+ })), /*#__PURE__*/_react.default.createElement("filter", {
33
+ id: _constants.GLOW_FILTER_ID,
34
+ x: "-50%",
35
+ y: "-50%",
36
+ height: "200%",
37
+ width: "200%"
38
+ }, /*#__PURE__*/_react.default.createElement("feGaussianBlur", {
39
+ result: "blur",
40
+ stdDeviation: "12"
41
+ }))), /*#__PURE__*/_react.default.createElement("circle", {
42
+ className: _stylesModule.default.trackGlow,
43
+ cx: _constants.TRACK_CENTER,
44
+ cy: _constants.TRACK_CENTER,
45
+ filter: "url(#".concat(_constants.GLOW_FILTER_ID, ")"),
46
+ r: _constants.TRACK_RADIUS
47
+ }), /*#__PURE__*/_react.default.createElement("circle", {
48
+ className: _stylesModule.default.trackBackground,
49
+ cx: _constants.TRACK_CENTER,
50
+ cy: _constants.TRACK_CENTER,
51
+ r: _constants.TRACK_RADIUS,
52
+ strokeWidth: _constants.TRACK_STROKE_WIDTH
53
+ }), /*#__PURE__*/_react.default.createElement("circle", {
54
+ className: _stylesModule.default.innerFill,
55
+ cx: _constants.TRACK_CENTER,
56
+ cy: _constants.TRACK_CENTER,
57
+ r: _constants.INNER_CIRCLE_RADIUS
58
+ }), /*#__PURE__*/_react.default.createElement("circle", {
59
+ className: _stylesModule.default.trackGradient,
60
+ cx: _constants.TRACK_CENTER,
61
+ cy: _constants.TRACK_CENTER,
62
+ r: _constants.TRACK_RADIUS,
63
+ strokeWidth: _constants.TRACK_STROKE_WIDTH
64
+ }));
65
+ var _default = exports.default = GradientTrack;
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TRACK_VIEW_BOX_SIZE = exports.TRACK_STROKE_WIDTH = exports.TRACK_RADIUS = exports.TRACK_CENTER = exports.INNER_CIRCLE_RADIUS = exports.GRADIENT_ID = exports.GLOW_FILTER_ID = exports.DEFAULT_LOADING_TEXT = void 0;
7
+ const DEFAULT_LOADING_TEXT = exports.DEFAULT_LOADING_TEXT = 'Cargando...';
8
+ const TRACK_VIEW_BOX_SIZE = exports.TRACK_VIEW_BOX_SIZE = 120;
9
+ const TRACK_CENTER = exports.TRACK_CENTER = 60;
10
+ const TRACK_RADIUS = exports.TRACK_RADIUS = 53;
11
+ const TRACK_STROKE_WIDTH = exports.TRACK_STROKE_WIDTH = 11;
12
+ const INNER_CIRCLE_RADIUS = exports.INNER_CIRCLE_RADIUS = 47.5;
13
+ const GRADIENT_ID = exports.GRADIENT_ID = 'UTLoadingTrackGradient';
14
+ const GLOW_FILTER_ID = exports.GLOW_FILTER_ID = 'UTLoadingGlow';
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
10
+ var _WithTheme = _interopRequireDefault(require("../../../../../WithTheme"));
11
+ var _testIds = require("../../../../../../constants/testIds");
12
+ var _constants = require("./constants");
13
+ var _GradientTrack = _interopRequireDefault(require("./components/GradientTrack"));
14
+ var _theme = require("./theme");
15
+ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
16
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
+ const {
18
+ UTLoading: UTLoadingTestIds
19
+ } = _testIds.TEST_IDS;
20
+ const LogoLoader = _ref => {
21
+ let {
22
+ children,
23
+ classes,
24
+ dataTestId,
25
+ fullScreen,
26
+ loading,
27
+ Logo,
28
+ text = _constants.DEFAULT_LOADING_TEXT
29
+ } = _ref;
30
+ return loading ? /*#__PURE__*/_react.default.createElement("div", {
31
+ className: "".concat(_stylesModule.default.container, " ").concat(fullScreen ? _stylesModule.default.fullScreen : _stylesModule.default.contained, " ").concat(classes.root),
32
+ "data-testid": dataTestId || UTLoadingTestIds.logoLoader
33
+ }, /*#__PURE__*/_react.default.createElement("div", {
34
+ className: _stylesModule.default.loaderWrapper
35
+ }, /*#__PURE__*/_react.default.createElement(_GradientTrack.default, null), /*#__PURE__*/_react.default.createElement("div", {
36
+ className: _stylesModule.default.innerCircle
37
+ }, Logo && /*#__PURE__*/_react.default.createElement("img", {
38
+ alt: "",
39
+ className: _stylesModule.default.logo,
40
+ src: Logo
41
+ }))), text && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
42
+ className: _stylesModule.default.text
43
+ }, text)) : children;
44
+ };
45
+ LogoLoader.propTypes = {
46
+ children: _propTypes.node,
47
+ classes: (0, _propTypes.objectOf)(_propTypes.string),
48
+ dataTestId: _propTypes.string,
49
+ fullScreen: _propTypes.bool,
50
+ loading: _propTypes.bool,
51
+ Logo: _propTypes.string,
52
+ text: _propTypes.string
53
+ };
54
+ var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(LogoLoader);
@@ -0,0 +1,107 @@
1
+ @use '../../../../../../scss/variables/colors.module.scss' as *;
2
+
3
+ $animation-duration: 1.4s;
4
+ $fade-in-animation: fadeIn 0.7s ease-in-out forwards;
5
+ $default-container-background-color: #ffffff;
6
+
7
+ .contained {
8
+ height: 100%;
9
+ position: relative;
10
+ width: 100%;
11
+ }
12
+
13
+ .container {
14
+ align-items: center;
15
+ background-color: transparent;
16
+ display: flex;
17
+ flex-direction: column;
18
+ justify-content: center;
19
+ }
20
+
21
+ .fullScreen {
22
+ background-color: var(--light01, $default-container-background-color);
23
+ bottom: 0;
24
+ left: 0;
25
+ position: fixed;
26
+ right: 0;
27
+ top: 0;
28
+ z-index: 999;
29
+ }
30
+
31
+ .loaderWrapper {
32
+ align-items: center;
33
+ animation: $fade-in-animation;
34
+ display: flex;
35
+ justify-content: center;
36
+ position: relative;
37
+ }
38
+
39
+ .track {
40
+ animation: spin $animation-duration linear infinite;
41
+ display: block;
42
+ height: var(--UT-loading-size, 7.5rem);
43
+ width: var(--UT-loading-size, 7.5rem);
44
+ }
45
+
46
+ .trackGlow {
47
+ fill: none;
48
+ opacity: 0.72;
49
+ stroke: url('#UTLoadingTrackGradient');
50
+ stroke-width: 18;
51
+ }
52
+
53
+ .trackBackground {
54
+ fill: none;
55
+ stroke: var(--light02);
56
+ stroke-width: 11;
57
+ }
58
+
59
+ .innerFill {
60
+ fill: var(--light01, $white);
61
+ }
62
+
63
+ .trackGradient {
64
+ fill: none;
65
+ stroke: url('#UTLoadingTrackGradient');
66
+ stroke-linecap: round;
67
+ stroke-width: 11;
68
+ }
69
+
70
+ .innerCircle {
71
+ align-items: center;
72
+ display: flex;
73
+ justify-content: center;
74
+ left: 50%;
75
+ position: absolute;
76
+ top: 50%;
77
+ transform: translate(-50%, -50%);
78
+ }
79
+
80
+ .logo {
81
+ display: block;
82
+ height: var(--UT-loading-logo-width, 3.5rem);
83
+ object-fit: contain;
84
+ width: var(--UT-loading-logo-width, 3.5rem);
85
+ }
86
+
87
+ .text {
88
+ animation: $fade-in-animation;
89
+ font-size: var(--UT-loading-text-size, 0.875rem) !important;
90
+ margin-top: var(--UT-loading-gap, 1.5rem) !important;
91
+ }
92
+
93
+ @keyframes fadeIn {
94
+ from {
95
+ opacity: 0;
96
+ }
97
+
98
+ to {
99
+ opacity: 1;
100
+ }
101
+ }
102
+
103
+ @keyframes spin {
104
+ to {
105
+ transform: rotate(360deg);
106
+ }
107
+ }
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.retrieveStyle = void 0;
7
+ const retrieveStyle = _ref => {
8
+ var _theme$Palette;
9
+ let {
10
+ theme
11
+ } = _ref;
12
+ return {
13
+ root: {
14
+ backgroundColor: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.light) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette['01']) || '#FFFFFF'
15
+ }
16
+ };
17
+ };
18
+ exports.retrieveStyle = retrieveStyle;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.GRADIENT_ID = void 0;
7
+ const GRADIENT_ID = exports.GRADIENT_ID = 'ut-spinner-gradient';
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = require("prop-types");
9
+ var _constants = require("../../constants");
10
+ var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
11
+ var _constants2 = require("./constants");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ const SpinnerTrack = _ref => {
14
+ let {
15
+ classes = {},
16
+ colors
17
+ } = _ref;
18
+ const useGradient = colors && colors.length >= 2;
19
+ const solidColor = !useGradient && colors && colors.length === 1 ? colors[0] : undefined;
20
+ const arcStroke = useGradient ? "url(#".concat(_constants2.GRADIENT_ID, ")") : solidColor;
21
+ return /*#__PURE__*/_react.default.createElement("svg", {
22
+ className: _stylesModule.default.spinner,
23
+ viewBox: "0 0 ".concat(_constants.SPINNER_VIEW_BOX_SIZE, " ").concat(_constants.SPINNER_VIEW_BOX_SIZE),
24
+ xmlns: "http://www.w3.org/2000/svg"
25
+ }, useGradient && /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
26
+ id: _constants2.GRADIENT_ID,
27
+ x1: "0%",
28
+ y1: "0%",
29
+ x2: "0%",
30
+ y2: "100%"
31
+ }, /*#__PURE__*/_react.default.createElement("stop", {
32
+ offset: "0%",
33
+ stopColor: colors[0]
34
+ }), /*#__PURE__*/_react.default.createElement("stop", {
35
+ offset: "100%",
36
+ stopColor: colors[1]
37
+ }))), /*#__PURE__*/_react.default.createElement("circle", {
38
+ className: "".concat(_stylesModule.default.track, " ").concat(classes.track || ''),
39
+ cx: _constants.SPINNER_CENTER,
40
+ cy: _constants.SPINNER_CENTER,
41
+ r: _constants.SPINNER_RADIUS
42
+ }), /*#__PURE__*/_react.default.createElement("circle", {
43
+ className: "".concat(_stylesModule.default.arc, " ").concat(!arcStroke ? classes.arc || '' : ''),
44
+ cx: _constants.SPINNER_CENTER,
45
+ cy: _constants.SPINNER_CENTER,
46
+ r: _constants.SPINNER_RADIUS,
47
+ strokeDasharray: "".concat(_constants.SPINNER_ARC_LENGTH, " ").concat(_constants.SPINNER_CIRCUMFERENCE),
48
+ style: arcStroke ? {
49
+ stroke: arcStroke
50
+ } : undefined
51
+ }));
52
+ };
53
+ SpinnerTrack.propTypes = {
54
+ classes: (0, _propTypes.objectOf)(_propTypes.string),
55
+ colors: (0, _propTypes.arrayOf)(_propTypes.string)
56
+ };
57
+ var _default = exports.default = SpinnerTrack;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SPINNER_VIEW_BOX_SIZE = exports.SPINNER_RADIUS = exports.SPINNER_CIRCUMFERENCE = exports.SPINNER_CENTER = exports.SPINNER_ARC_LENGTH = exports.DEFAULT_LOADING_TEXT = void 0;
7
+ const DEFAULT_LOADING_TEXT = exports.DEFAULT_LOADING_TEXT = 'Cargando...';
8
+ const SPINNER_VIEW_BOX_SIZE = exports.SPINNER_VIEW_BOX_SIZE = 50;
9
+ const SPINNER_CENTER = exports.SPINNER_CENTER = 25;
10
+ const SPINNER_RADIUS = exports.SPINNER_RADIUS = 20;
11
+ const SPINNER_CIRCUMFERENCE = exports.SPINNER_CIRCUMFERENCE = 126;
12
+ const SPINNER_ARC_LENGTH = exports.SPINNER_ARC_LENGTH = 94;