@widergy/energy-ui 3.172.2 → 3.173.0

package/dist/esm/components/UTRadioGroup/versions/V1/styles.module.scss

@@ -17,6 +17,11 @@ $spacing-small: 8px;
   grid-gap: $spacing-small;
 }
 
+.noneCategoryContainer {
+  @extend %categoryContainer;
+  grid-gap: 0;
+}
+
 .categoryTitle {
   padding: 8px 0;
 }

package/dist/esm/components/UTRadioGroup/versions/V1/utils.js

@@ -0,0 +1,34 @@
+import { COLOR_SHADES, COLOR_THEMES, VALID_PALETTE_COLOR_THEMES } from '../../../../constants/Palette';
+import { getPaletteCssVar } from '../../../../utils/colorUtils';
+
+// colorTheme sin entrada real en la paleta del tenant (ej. 'primary', o un valor inválido) -> se trata como si no
+// se hubiera pasado ningún colorTheme (getAreaStyle no agrega fondo/borde para ese lado del área).
+const resolvePaletteColorTheme = colorTheme => VALID_PALETTE_COLOR_THEMES.has(colorTheme) ? colorTheme : undefined;
+
+/**
+ * Calcula el estilo del área de fondo de UTRadioGroup según areaProps. Sin `area`, no agrega borde ni fondo.
+ * A diferencia de UTDataCategory/UTDataElement, acá el fondo no tiene un colorTheme por defecto: solo se
+ * aplica si `areaProps.colorTheme` está configurado explícitamente.
+ * @param {boolean} area - Si el área debe mostrarse.
+ * @param {{ colorTheme?: string, shade?: string, borderColorTheme?: string, borderShade?: string }} [areaProps] - Personalización del área. Sin `colorTheme` no se agrega fondo; sin `borderColorTheme` no se agrega borde.
+ * @returns {object} Estilos inline a aplicar sobre el contenedor.
+ */
+export const getAreaStyle = function (area) {
+  let areaProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!area) return {};
+  const colorTheme = resolvePaletteColorTheme(areaProps.colorTheme);
+  const borderColorTheme = resolvePaletteColorTheme(areaProps.borderColorTheme);
+  const shade = areaProps.shade || (colorTheme === COLOR_THEMES.light ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
+  const borderShade = areaProps.borderShade || (borderColorTheme === COLOR_THEMES.light ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
+  return {
+    ...(colorTheme && {
+      backgroundColor: getPaletteCssVar(colorTheme, shade)
+    }),
+    ...(borderColorTheme && {
+      border: "1px solid ".concat(getPaletteCssVar(borderColorTheme, borderShade))
+    }),
+    borderRadius: 8,
+    boxSizing: 'border-box',
+    padding: 8
+  };
+};

package/dist/esm/constants/Palette.js

@@ -17,4 +17,20 @@ export const COLOR_THEMES = {
   primary: 'primary',
   success: 'success',
   warning: 'warning'
-};
+};
+
+// Prefijo real de la CSS var de la paleta multi-tenant para cada colorTheme (ej. 'accent' -> 'actionAccent01').
+// Los themes sin entrada acá (dark, gray, light, primary) no llevan prefijo: la CSS var coincide con el colorTheme.
+export const PALETTE_CSS_VAR_PREFIX_MAPPER = {
+  [COLOR_THEMES.accent]: 'actionAccent',
+  [COLOR_THEMES.error]: 'semanticError',
+  [COLOR_THEMES.information]: 'semanticInformation',
+  [COLOR_THEMES.negative]: 'actionNegative',
+  [COLOR_THEMES.neutral]: 'actionNeutral',
+  [COLOR_THEMES.success]: 'semanticSuccess',
+  [COLOR_THEMES.warning]: 'semanticWarning'
+};
+
+// colorTheme de COLOR_THEMES que sí tienen una entrada real en la paleta de cada tenant (ver .storybook/palettes/palette.js).
+// 'primary' queda afuera a propósito: es un valor válido de COLOR_THEMES pero ningún tenant define esa key.
+export const VALID_PALETTE_COLOR_THEMES = new Set([COLOR_THEMES.accent, COLOR_THEMES.dark, COLOR_THEMES.error, COLOR_THEMES.gray, COLOR_THEMES.information, COLOR_THEMES.light, COLOR_THEMES.negative, COLOR_THEMES.neutral, COLOR_THEMES.success, COLOR_THEMES.warning]);

package/dist/esm/utils/colorUtils.js

@@ -1,3 +1,18 @@
+import { PALETTE_CSS_VAR_PREFIX_MAPPER } from '../constants/Palette';
+
+/**
+ * Arma la referencia var(--prefijoShade) de la paleta multi-tenant, resolviendo el prefijo real de
+ * cada colorTheme vía PALETTE_CSS_VAR_PREFIX_MAPPER (ej. 'accent', '01' -> 'var(--actionAccent01)').
+ * Los colorTheme sin prefijo mapeado (ej. 'dark', 'light', 'gray') usan el colorTheme tal cual.
+ * @param {string} colorTheme - Color theme de la paleta (ver COLOR_THEMES).
+ * @param {string} shade - Shade de la paleta ('01' a '05').
+ * @param {string} [fallback] - Valor de fallback si la variable no está definida.
+ * @returns {string} Ej. 'var(--actionAccent01, #FFFFFF)'.
+ */
+export const getPaletteCssVar = (colorTheme, shade, fallback) => {
+  const prefix = PALETTE_CSS_VAR_PREFIX_MAPPER[colorTheme] || colorTheme;
+  return "var(--".concat(prefix).concat(shade).concat(fallback ? ", ".concat(fallback) : '', ")");
+};
 export const getColorValue = function (varName) {
   let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   if (typeof window === 'undefined' || typeof document === 'undefined') return fallback;

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -265,6 +265,7 @@ export const baseTokens = {
     'UT-dataElement-content-gap-x': 'gap-sm',
     'UT-dataElement-content-gap-y': 'gap-sm',
     'UT-dataElement-icon-size': 'size-icon-md',
+    'UT-dataElement-chevron-icon-size': 'size-icon-xs',
     'UT-dataElement-title-size': 'font-body-size-md',
     'UT-dataElement-title-weight': 'font-weight-medium',
     'UT-dataElement-prefix-size': 'font-body-size-md',

package/dist/utils/colorUtils.js

@@ -3,7 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColorValue = void 0;
+exports.getPaletteCssVar = exports.getColorValue = void 0;
+var _Palette = require("../constants/Palette");
+/**
+ * Arma la referencia var(--prefijoShade) de la paleta multi-tenant, resolviendo el prefijo real de
+ * cada colorTheme vía PALETTE_CSS_VAR_PREFIX_MAPPER (ej. 'accent', '01' -> 'var(--actionAccent01)').
+ * Los colorTheme sin prefijo mapeado (ej. 'dark', 'light', 'gray') usan el colorTheme tal cual.
+ * @param {string} colorTheme - Color theme de la paleta (ver COLOR_THEMES).
+ * @param {string} shade - Shade de la paleta ('01' a '05').
+ * @param {string} [fallback] - Valor de fallback si la variable no está definida.
+ * @returns {string} Ej. 'var(--actionAccent01, #FFFFFF)'.
+ */
+const getPaletteCssVar = (colorTheme, shade, fallback) => {
+  const prefix = _Palette.PALETTE_CSS_VAR_PREFIX_MAPPER[colorTheme] || colorTheme;
+  return "var(--".concat(prefix).concat(shade).concat(fallback ? ", ".concat(fallback) : '', ")");
+};
+exports.getPaletteCssVar = getPaletteCssVar;
 const getColorValue = function (varName) {
   let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   if (typeof window === 'undefined' || typeof document === 'undefined') return fallback;

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -271,6 +271,7 @@ const baseTokens = exports.baseTokens = {
     'UT-dataElement-content-gap-x': 'gap-sm',
     'UT-dataElement-content-gap-y': 'gap-sm',
     'UT-dataElement-icon-size': 'size-icon-md',
+    'UT-dataElement-chevron-icon-size': 'size-icon-xs',
     'UT-dataElement-title-size': 'font-body-size-md',
     'UT-dataElement-title-weight': 'font-weight-medium',
     'UT-dataElement-prefix-size': 'font-body-size-md',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.172.2",
+  "version": "3.173.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",