From 1b1e420bc5b79377c03e349ca125be4cda6cef32 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Tue, 7 Jan 2025 23:00:38 +0100
Subject: [PATCH 1/2] buttongroup html option labels

---
 docs/nodes/widgets/ui-button-group.md            | 2 +-
 nodes/widgets/locales/en-US/ui_button_group.html | 2 +-
 ui/src/widgets/ui-button-group/UIButtonGroup.vue | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/nodes/widgets/ui-button-group.md b/docs/nodes/widgets/ui-button-group.md
index caaec8b5c..79c3449f3 100644
--- a/docs/nodes/widgets/ui-button-group.md
+++ b/docs/nodes/widgets/ui-button-group.md
@@ -9,7 +9,7 @@ props:
     Appearance: Specify whether the shape of the widget should be rectangular or have rounded corners.
     Use theme colors: Specify whether the theme colors should be used. If not active, custom colors can be specified for each option separately.
     Options:
-        description: Specify which options need to be displayed. Each option can specify a label, icon, value and color.
+        description: Specify which options need to be displayed. Each option can specify a label, icon, value and color.  Html content is allowed for the labels.
         dynamic: true
     Topic: The text that needs to be send in the msg.topic field.
     Passthrough: Specify whether input messages should be passed through as output messages.
diff --git a/nodes/widgets/locales/en-US/ui_button_group.html b/nodes/widgets/locales/en-US/ui_button_group.html
index d2d9e7c1d..ab8627f4b 100644
--- a/nodes/widgets/locales/en-US/ui_button_group.html
+++ b/nodes/widgets/locales/en-US/ui_button_group.html
@@ -16,7 +16,7 @@ <h3>Properties</h3>
     <p><strong>Options:</strong><br/>
     Specify which options need to be displayed:
         <ul>
-            <li><i>Label: </i>(optional) The description that will be displayed.</li>
+            <li><i>Label: </i>(optional) The description that will be displayed.  Html content is allowed</li>
             <li><i>Icon: </i>(optional) The icon to display for the given option. We use the Material Design Icons, you can see a full list of the available icons <a href="https://pictogrammers.com/library/mdi/">here</a>. There is no need to include the "mdi-" prefix, just the name of the icon.</li>
             <li><i>Value: </i>The value that will be send in input and output messages.</li>
             <li><i>Color: </i>The color of the option in the switch.</li>
diff --git a/ui/src/widgets/ui-button-group/UIButtonGroup.vue b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
index 4cfc2ff65..04f858ad4 100644
--- a/ui/src/widgets/ui-button-group/UIButtonGroup.vue
+++ b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
@@ -8,7 +8,8 @@
                     <v-icon size="x-large" :icon="`mdi-${option.icon.replace(/^mdi-/, '')}`" />
                 </template>
                 <v-icon v-if="option.icon && !option.label" :icon="`mdi-${option.icon.replace(/^mdi-/, '')}`" size="x-large" />
-                {{ option.label }}
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <span v-html="option.label"></span>
             </v-btn>
         </v-btn-toggle>
     </div>
@@ -47,8 +48,9 @@ export default {
             if (options) {
                 return options.map(option => {
                     if (typeof option === 'string') {
-                        return { label: option, value: option }
+                        return { label: DOMPurify.sanitize(option), value: option }
                     } else {
+                        option.label ? DOMPurify.sanitize(option.label) : option.label
                         return option
                     }
                 })

From 2c21492fcc6e77927c111d97fea2c178d0c89fdf Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Tue, 7 Jan 2025 23:11:10 +0100
Subject: [PATCH 2/2] lint fixes

---
 ui/src/widgets/ui-button-group/UIButtonGroup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/widgets/ui-button-group/UIButtonGroup.vue b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
index 04f858ad4..7969bcafe 100644
--- a/ui/src/widgets/ui-button-group/UIButtonGroup.vue
+++ b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
@@ -9,7 +9,7 @@
                 </template>
                 <v-icon v-if="option.icon && !option.label" :icon="`mdi-${option.icon.replace(/^mdi-/, '')}`" size="x-large" />
                 <!-- eslint-disable-next-line vue/no-v-html -->
-                <span v-html="option.label"></span>
+                <span v-html="option.label" />
             </v-btn>
         </v-btn-toggle>
     </div>
@@ -50,7 +50,7 @@ export default {
                     if (typeof option === 'string') {
                         return { label: DOMPurify.sanitize(option), value: option }
                     } else {
-                        option.label ? DOMPurify.sanitize(option.label) : option.label
+                        option.label = DOMPurify.sanitize(option.label)
                         return option
                     }
                 })