From 1bf593eae5673da70ff421b2d249e42544f74c12 Mon Sep 17 00:00:00 2001
From: Dave Woestenborghs <dave.woestenborghs@gmail.com>
Date: Mon, 14 Oct 2019 18:10:54 +0200
Subject: [PATCH 1/2] Fix displaying of title and description and also the
 localized values for title-key and description-key on the umb-box-header
 directive

---
 .../html/umbbox/umbboxheader.directive.js     | 24 +++++++++++++++++--
 .../html/umb-box/umb-box-header.html          | 12 ++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
index a0fbd2c24a46..d441f904a234 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
@@ -45,7 +45,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
 (function(){
     'use strict';
 
-    function BoxHeaderDirective() {
+    function BoxHeaderDirective(localizationService) {
 
         var directive = {
             restrict: 'E',
@@ -57,6 +57,26 @@ Use this directive to construct a title. Recommended to use it inside an {@link
                 title: "@?",
                 descriptionKey: "@?",
                 description: "@?"
+            },
+            link: function (scope) {
+
+                scope.titleLabel = scope.title;
+
+                if (scope.titleKey) {
+                    localizationService.localize(scope.titleKey).then((data) => {
+                        scope.titleLabel = data;
+                    });
+
+                }
+
+                scope.descriptionLabel = scope.description;
+
+                if (scope.descriptionKey) {
+                    localizationService.localize(scope.descriptionKey).then((data) => {
+                        scope.descriptionLabel = data;
+                    });
+
+                }
             }
         };
 
@@ -66,4 +86,4 @@ Use this directive to construct a title. Recommended to use it inside an {@link
 
     angular.module('umbraco.directives').directive('umbBoxHeader', BoxHeaderDirective);
 
-})();
\ No newline at end of file
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
index e9f771f09c98..bff03f8855c8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
@@ -1,13 +1,11 @@
 <div class="umb-box-header">
     <div>
-        <div class="umb-box-header-title" ng-if="title || titleKey">
-            <localize ng-if="titleKey" key="{{titleKey}}"></localize>
-            <span ng-if="title">{{title}}</span>
+        <div class="umb-box-header-title" ng-if="titleLabel">
+            {{titleLabel}}
         </div>
-        <div class="umb-box-header-description" ng-if="description || descriptionKey">
-            <localize ng-if="descriptionKey" key="{{descriptionKey}}"></localize>
-            <span ng-if="description">{{description}}</span>
+        <div class="umb-box-header-description" ng-if="descriptionLabel">
+            {{descriptionLabel}}
         </div>
     </div>
     <ng-transclude></ng-transclude>
-</div>
\ No newline at end of file
+</div>

From 557a3c6210bfbf4d27e622b60a6c67402bfe65dd Mon Sep 17 00:00:00 2001
From: Dave Woestenborghs <dave.woestenborghs@gmail.com>
Date: Mon, 14 Oct 2019 18:14:47 +0200
Subject: [PATCH 2/2] Handle invalide localization keys by setting a fall back
 value

---
 .../components/html/umbbox/umbboxheader.directive.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
index d441f904a234..21f0c33de5e4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
@@ -63,7 +63,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
                 scope.titleLabel = scope.title;
 
                 if (scope.titleKey) {
-                    localizationService.localize(scope.titleKey).then((data) => {
+                    localizationService.localize(scope.titleKey, [], scope.title).then((data) => {
                         scope.titleLabel = data;
                     });
 
@@ -72,7 +72,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
                 scope.descriptionLabel = scope.description;
 
                 if (scope.descriptionKey) {
-                    localizationService.localize(scope.descriptionKey).then((data) => {
+                    localizationService.localize(scope.descriptionKey, [], scope.description).then((data) => {
                         scope.descriptionLabel = data;
                     });