From 5775e9cb1838d55b387b5a6618149289462a5627 Mon Sep 17 00:00:00 2001
From: Anders Bjerner <abjerner@skybrud.dk>
Date: Fri, 8 Dec 2023 13:52:52 +0100
Subject: [PATCH] Added fix for <umb-button-group /> label issues

---
 .../buttons/umbbuttongroup.directive.js       | 27 ++++++++++++++++++-
 .../components/buttons/umb-button-group.html  |  7 +++--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
index d9c18fac01..8c7836a2e6 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
@@ -93,7 +93,7 @@ Use this directive to render a button with a dropdown of alternative actions.
 
   function ButtonGroupDirective() {
 
-    function controller($scope) {
+    function controller($scope, localizationService) {
       $scope.toggleStyle = null;
       $scope.blockElement = false;
 
@@ -121,6 +121,31 @@ Use this directive to render a button with a dropdown of alternative actions.
           }
         }
       }
+
+      // As the <localize /> directive doesn't support Angular expressions as fallback, we instead listen for changes
+      // to the label key of the default button, and if detected, we update the button label with the localized value
+      // received from the localization service
+      $scope.$watch("defaultButton.labelKey", function () {
+        if (!$scope.defaultButton.labelKey) return;
+        localizationService.localize($scope.defaultButton.labelKey).then(value => {
+          if (value && value.indexOf("[") === 0) return;
+          $scope.defaultButton.label = value;
+        });
+      });
+
+      // In a similar way, we must listen for changes to the sub buttons (or their label keys), and if detected, update
+      // the label with the localized value received from the localization service
+      $scope.$watch("defaultButton.subButtons", function () {
+        if (!Array.isArray($scope.subButtons)) return;
+        $scope.subButtons.forEach(function (sub) {
+          if (!sub.labelKey) return;
+          localizationService.localize(sub.labelKey).then(value => {
+            if (value && value.indexOf("[") === 0) return;
+            sub.label = value;
+          });
+        });
+      }, true);
+
     }
 
     function link(scope) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
index f47b00913d..7c8799c8d8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
@@ -8,7 +8,7 @@
       href-target="{{defaultButton.hrefTarget}}"
       button-style="{{buttonStyle}}"
       state="state"
-      label="{{defaultButton.labelKey}}"
+      label="{{defaultButton.label}}"
       label-key="{{defaultButton.labelKey}}"
       shortcut="{{defaultButton.hotKey}}"
       shortcut-when-hidden="{{defaultButton.hotKeyWhenHidden}}"
@@ -29,7 +29,7 @@
       ng-disabled="disabled">
          <span class="caret">
             <span class="sr-only">
-               <localize key="{{labelKey}}">{{label}}</localize>
+               {{defaultButton.label}}
             </span>
          </span>
    </button>
@@ -48,8 +48,7 @@
             hotkey="{{subButton.hotKey}}"
             hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}"
             ng-disabled="disabled">
-               <localize ng-if="subButton.labelKey" key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
-               <span ng-if="subButton.label">{{subButton.label}}</span>
+               <span>{{subButton.label}}</span>
                <span ng-if="subButton.addEllipsis === 'true'">...</span>
          </button>
       </umb-dropdown-item>