From 15d5c67cd3192ba65ff72ec4416ff7eeb8c3d22c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 25 Mar 2019 13:42:05 +0100
Subject: [PATCH 1/5] global text-color variables

---
 src/Umbraco.Web.UI.Client/src/less/variables.less | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 6400ae032193..55be161cf8d5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -112,7 +112,7 @@
 @blueExtraDark:         #1b264f;// added 2019
 @blueLight:             #ADD8E6;
 @blueNight:             #162335;// added 2019
-@orange:                #f79c37;// updated 2019
+//@orange:              #f79c37;// updated 2019
 @pink:                  #D93F4C;// #C3325F;// update 2019
 @pinkLight:             #f5c1bc;// added 2019
 @pinkRedLight:          #ff8a89;// added 2019
@@ -199,6 +199,16 @@
 .turquoise{color: @turquoise;}
 .turquoise-d1{color: @turquoise-d1;}
 
+.text-warning {
+    color: @orange;
+}
+.text-error {
+    color: @red;
+}
+.text-success {
+    color: @green;
+}
+
 
 //icon colors for tree icons
 .color-red, .color-red i{color: @red-d1 !important;}

From 0cc6e51b7a9ae3999a9ddfdaa089cc20e7186821 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 25 Mar 2019 13:43:03 +0100
Subject: [PATCH 2/5] simplify controller + only show text when near limit +
 different text when exceeding limit

---
 .../textarea/textarea.controller.js           | 24 +++-----------
 .../propertyeditors/textarea/textarea.html    |  9 ++++--
 .../textbox/textbox.controller.js             | 31 +++----------------
 .../propertyeditors/textbox/textbox.html      |  9 ++++--
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml |  5 +--
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  5 +--
 .../Umbraco/config/lang/en_us.xml             |  5 +--
 7 files changed, 31 insertions(+), 57 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
index 60d762738fdd..4934adb5dd52 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
@@ -13,25 +13,11 @@ function textAreaController($scope) {
     $scope.model.maxlength = false;
     if ($scope.model.config && $scope.model.config.maxChars) {
         $scope.model.maxlength = true;
-        if($scope.model.value == undefined) {
-            $scope.model.count = ($scope.model.config.maxChars * 1);
-        } else {
-            $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-        }
     }
-
-    $scope.model.change = function() {
-        if ($scope.model.config && $scope.model.config.maxChars) {
-            if($scope.model.value == undefined) {
-                $scope.model.count = ($scope.model.config.maxChars * 1);
-            } else {
-                $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-            }
-            if($scope.model.count < 0) {
-                $scope.model.value = $scope.model.value.substring(0, ($scope.model.config.maxChars * 1));
-                $scope.model.count = 0;
-            }
-        }
+    
+    $scope.model.change = function () {
+        $scope.model.count = $scope.model.value.length;
     }
+    $scope.model.change();
 }
-angular.module('umbraco').controller("Umbraco.PropertyEditors.textAreaController", textAreaController);
\ No newline at end of file
+angular.module('umbraco').controller("Umbraco.PropertyEditors.textAreaController", textAreaController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
index 2fdca5d65455..80da759fba20 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
@@ -7,9 +7,12 @@
             <span class="help-inline" ng-message="valServer">{{textareaFieldForm.textarea.errorMsg}}</span>
         </span>
 
-        <div class="help" ng-if="model.maxlength">
-            <strong>{{model.count}}</strong>
-            <localize key="textbox_characters_left">characters left</localize>
+        <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
+            <localize key="textbox_characters_left" tokens="[model.count, model.config.maxChars]">characters left</localize>
         </div>
+        <div class="help text-error" ng-if="model.maxlength === true && model.count > model.config.maxChars">
+            <localize key="textbox_characters_exceed" tokens="[model.count, model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
+        </div>
+
     </ng-form>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
index 734903e46c5e..4ab827db592e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
@@ -4,39 +4,18 @@ function textboxController($scope) {
     if (!$scope.model.config) {
         $scope.model.config = {};
     }
-
-    $scope.model.maxlength = false;
-    if ($scope.model.config && $scope.model.config.maxChars) {
-        $scope.model.maxlength = true;
-    }
-
+    
     if (!$scope.model.config.maxChars) {
         // 500 is the maximum number that can be stored
         // in the database, so set it to the max, even
         // if no max is specified in the config
         $scope.model.config.maxChars = 500;
     }
-
-    if ($scope.model.maxlength) {
-        if ($scope.model.value === undefined) {
-            $scope.model.count = ($scope.model.config.maxChars * 1);
-        } else {
-            $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-        }
-    }
-
+    
     $scope.model.change = function () {
-        if ($scope.model.config && $scope.model.config.maxChars) {
-            if ($scope.model.value === undefined) {
-                $scope.model.count = ($scope.model.config.maxChars * 1);
-            } else {
-                $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-            }
-            if ($scope.model.count < 0) {
-                $scope.model.value = $scope.model.value.substring(0, ($scope.model.config.maxChars * 1));
-                $scope.model.count = 0;
-            }
-        }
+        $scope.model.count = $scope.model.value.length;
     }
+    $scope.model.change();
+    
 }
 angular.module('umbraco').controller("Umbraco.PropertyEditors.textboxController", textboxController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
index 6f6ed6bdf64c..0e041e7f34d1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
@@ -12,9 +12,12 @@
             <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
         </span>
 
-        <div class="help" ng-if="model.maxlength">
-            <strong>{{model.count}}</strong>
-            <localize key="textbox_characters_left">characters left</localize>
+        <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
+            <localize key="textbox_characters_left" tokens="[model.count, model.config.maxChars]">characters left</localize>
         </div>
+        <div class="help text-error" ng-if="model.count > model.config.maxChars">
+            <localize key="textbox_characters_exceed" tokens="[model.count, model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
+        </div>
+
     </ng-form>
 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 875948d4d23a..11dcd6ac575e 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1568,8 +1568,9 @@ Mange hilsner fra Umbraco robotten
   <area alias="emptyStates">
     <key alias="emptyDictionaryTree">Ingen ordbog elementer at vælge imellem</key>
   </area>
-  <area alias="textbox">
-    <key alias="characters_left">Karakterer tilbage</key>
+  <area alias="textbox">
+    <key alias="characters_left">><![CDATA[<strong>{0}</strong> tegn tilbage.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maksimum {0} tegn, <strong>{1}</strong> for mange.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Slettet indhold med Id: {0} Relateret til original "parent" med id: {1}</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index fa6f6898452b..d10bc6ea0cb9 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2078,8 +2078,9 @@ To manage your website, simply open the Umbraco back office and start adding con
   <area alias="emptyStates">
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
-  <area alias="textbox">
-    <key alias="characters_left">characters left</key>
+  <area alias="textbox">
+    <key alias="characters_left">><![CDATA[<strong>{0}</strong> characters left.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maximum {0} characters, <strong>{1}</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Trashed content with Id: {0} related to original parent content with Id: {1}</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 6ff4d32f08f7..c04f639c3a42 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2090,8 +2090,9 @@ To manage your website, simply open the Umbraco back office and start adding con
   <area alias="emptyStates">
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
-  <area alias="textbox">
-    <key alias="characters_left">characters left</key>
+  <area alias="textbox">
+    <key alias="characters_left">><![CDATA[<strong>{0}</strong> characters left.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maximum {0} characters, <strong>{1}</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Trashed content with Id: {0} related to original parent content with Id: {1}</key>

From 286978647eb57371bddee1b58a4a0026da8bce2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 25 Mar 2019 14:04:31 +0100
Subject: [PATCH 3/5] fix type mistake, plus correcting math.

---
 .../src/views/propertyeditors/textarea/textarea.html          | 4 ++--
 .../src/views/propertyeditors/textbox/textbox.html            | 4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml                 | 2 +-
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml                 | 2 +-
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml              | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
index 80da759fba20..e08668fb207a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
@@ -8,10 +8,10 @@
         </span>
 
         <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.count, model.config.maxChars]">characters left</localize>
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">characters left</localize>
         </div>
         <div class="help text-error" ng-if="model.maxlength === true && model.count > model.config.maxChars">
-            <localize key="textbox_characters_exceed" tokens="[model.count, model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
         </div>
 
     </ng-form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
index 0e041e7f34d1..8385c951b1f6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
@@ -13,10 +13,10 @@
         </span>
 
         <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.count, model.config.maxChars]">characters left</localize>
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">characters left</localize>
         </div>
         <div class="help text-error" ng-if="model.count > model.config.maxChars">
-            <localize key="textbox_characters_exceed" tokens="[model.count, model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
         </div>
 
     </ng-form>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 11dcd6ac575e..52be26e2fc01 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1569,7 +1569,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="emptyDictionaryTree">Ingen ordbog elementer at vælge imellem</key>
   </area>
   <area alias="textbox">
-    <key alias="characters_left">><![CDATA[<strong>{0}</strong> tegn tilbage.]]></key>
+    <key alias="characters_left"><![CDATA[<strong>{0}</strong> tegn tilbage.]]></key>
     <key alias="characters_exceed"><![CDATA[Maksimum {0} tegn, <strong>{1}</strong> for mange.]]></key>
   </area>
   <area alias="recycleBin">
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index d10bc6ea0cb9..218812270d59 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2079,7 +2079,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
   <area alias="textbox">
-    <key alias="characters_left">><![CDATA[<strong>{0}</strong> characters left.]]></key>
+    <key alias="characters_left"><![CDATA[<strong>{0}</strong> characters left.]]></key>
     <key alias="characters_exceed"><![CDATA[Maximum {0} characters, <strong>{1}</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index c04f639c3a42..9f578da1b6dd 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2091,7 +2091,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
   <area alias="textbox">
-    <key alias="characters_left">><![CDATA[<strong>{0}</strong> characters left.]]></key>
+    <key alias="characters_left"><![CDATA[<strong>{0}</strong> characters left.]]></key>
     <key alias="characters_exceed"><![CDATA[Maximum {0} characters, <strong>{1}</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">

From 50ee60e8c35eb4b8f4ed7fcf666950c369eb1ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 25 Mar 2019 14:09:29 +0100
Subject: [PATCH 4/5] correcting translate tokens to use %

---
 .../src/views/propertyeditors/textarea/textarea.html          | 4 ++--
 .../src/views/propertyeditors/textbox/textbox.html            | 4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml                 | 4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml                 | 4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml              | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
index e08668fb207a..94935423e895 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
@@ -8,10 +8,10 @@
         </span>
 
         <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">characters left</localize>
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">%0% characters left.</localize>
         </div>
         <div class="help text-error" ng-if="model.maxlength === true && model.count > model.config.maxChars">
-            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
         </div>
 
     </ng-form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
index 8385c951b1f6..6e8543de2662 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
@@ -13,10 +13,10 @@
         </span>
 
         <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">characters left</localize>
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">%0% characters left.</localize>
         </div>
         <div class="help text-error" ng-if="model.count > model.config.maxChars">
-            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum {0} characters ({1} too many)</localize>
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
         </div>
 
     </ng-form>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 52be26e2fc01..b7a8196e9294 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1569,8 +1569,8 @@ Mange hilsner fra Umbraco robotten
     <key alias="emptyDictionaryTree">Ingen ordbog elementer at vælge imellem</key>
   </area>
   <area alias="textbox">
-    <key alias="characters_left"><![CDATA[<strong>{0}</strong> tegn tilbage.]]></key>
-    <key alias="characters_exceed"><![CDATA[Maksimum {0} tegn, <strong>{1}</strong> for mange.]]></key>
+    <key alias="characters_left"><![CDATA[<strong>%0%</strong> tegn tilbage.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maksimum %0% tegn, <strong>%1%</strong> for mange.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Slettet indhold med Id: {0} Relateret til original "parent" med id: {1}</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 218812270d59..ab3a281114ad 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2079,8 +2079,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
   <area alias="textbox">
-    <key alias="characters_left"><![CDATA[<strong>{0}</strong> characters left.]]></key>
-    <key alias="characters_exceed"><![CDATA[Maximum {0} characters, <strong>{1}</strong> too many.]]></key>
+    <key alias="characters_left"><![CDATA[<strong>%0%</strong> characters left.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maximum %0% characters, <strong>%1%</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Trashed content with Id: {0} related to original parent content with Id: {1}</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 9f578da1b6dd..9c66d1bef8c1 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2091,8 +2091,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
   <area alias="textbox">
-    <key alias="characters_left"><![CDATA[<strong>{0}</strong> characters left.]]></key>
-    <key alias="characters_exceed"><![CDATA[Maximum {0} characters, <strong>{1}</strong> too many.]]></key>
+    <key alias="characters_left"><![CDATA[<strong>%0%</strong> characters left.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maximum %0% characters, <strong>%1%</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Trashed content with Id: {0} related to original parent content with Id: {1}</key>

From 118f6c7e50c1619bfb6e1f24b5832829754fbe4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 25 Mar 2019 14:46:42 +0100
Subject: [PATCH 5/5] added the ability to watch tokens in localization service

---
 .../localization/localize.directive.js        | 19 +++++++---
 .../common/services/localization.service.js   | 36 +++++++++++++------
 .../propertyeditors/textarea/textarea.html    |  4 +--
 .../propertyeditors/textbox/textbox.html      |  4 +--
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js
index c3093eee9e14..df3770056e30 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js
@@ -32,16 +32,27 @@ angular.module("umbraco.directives")
             restrict: 'E',
             scope:{
                 key: '@',
-                tokens: '='
+                tokens: '=',
+                watchTokens: '@'
             },
             replace: true,
 
             link: function (scope, element, attrs) {
                 var key = scope.key;
-                var tokens = scope.tokens ? scope.tokens : null;
-                localizationService.localize(key, tokens).then(function(value){
-                    element.html(value);
+                scope.text = "";
+                
+                // A render function to be able to update tokens as values update.
+                function render() {
+                    element.html(localizationService.tokenReplace(scope.text, scope.tokens || null));
+                }
+                
+                localizationService.localize(key).then(function(value){
+                    scope.text = value;
+                    render();
                 });
+                if (scope.watchTokens === 'true') {
+                    scope.$watch("tokens", render, true);
+                }
             }
         };
     })
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/localization.service.js b/src/Umbraco.Web.UI.Client/src/common/services/localization.service.js
index 2a9afdfa9405..ea2ad732631f 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/localization.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/localization.service.js
@@ -43,16 +43,11 @@ angular.module('umbraco.services')
 
         var entry = dictionary[value];
         if (entry) {
-            if (tokens) {
-                for (var i = 0; i < tokens.length; i++) {
-                    entry = entry.replace("%" + i + "%", tokens[i]);
-                }
-            }
-            return entry;
+            return service.tokenReplace(entry, tokens);
         }
         return "[" + value + "]";
     }
-
+    
     var service = {
         // array to hold the localized resource string entries
         dictionary: [],
@@ -127,7 +122,29 @@ angular.module('umbraco.services')
             }
             return value;
         },
-
+        
+        
+        /**
+         * @ngdoc method
+         * @name umbraco.services.localizationService#tokenReplace
+         * @methodOf umbraco.services.localizationService
+         *
+         * @description
+         * Helper to replace tokens
+         * @param {String} value the text-string to manipulate
+         * @param {Array} tekens An array of tokens values 
+         * @returns {String} Replaced test-string
+         */
+        tokenReplace: function (text, tokens) {
+            if (tokens) {
+                for (var i = 0; i < tokens.length; i++) {
+                    text = text.replace("%" + i + "%", tokens[i]);
+                }
+            }
+            return text;
+        },
+        
+        
         /**
          * @ngdoc method
          * @name umbraco.services.localizationService#localize
@@ -146,8 +163,7 @@ angular.module('umbraco.services')
          */
         localize: function (value, tokens) {
             return service.initLocalizedResources().then(function (dic) {
-                var val = _lookup(value, tokens, dic);
-                return val;
+                return _lookup(value, tokens, dic);
             });
         },
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
index 94935423e895..1be37d92d627 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
@@ -8,10 +8,10 @@
         </span>
 
         <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">%0% characters left.</localize>
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize>
         </div>
         <div class="help text-error" ng-if="model.maxlength === true && model.count > model.config.maxChars">
-            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
         </div>
 
     </ng-form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
index 6e8543de2662..92f02b9f5b4b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
@@ -13,10 +13,10 @@
         </span>
 
         <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]">%0% characters left.</localize>
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize>
         </div>
         <div class="help text-error" ng-if="model.count > model.config.maxChars">
-            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
         </div>
 
     </ng-form>