From 8c28172efcae62eafbf1865180123667d900a982 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 7 Mar 2019 12:57:10 +0100
Subject: [PATCH 1/5] changed umb-checkbox model to be the boolean property,
 not a object containing a checked property. This means that the on-change
 callback will recive the model and the value instead.

---
 .../components/forms/umbcheckbox.directive.js    | 13 ++++++++++++-
 .../src/views/components/forms/umb-checkbox.html |  4 ++--
 .../checkboxlist/checkboxlist.controller.js      | 16 ++++++----------
 .../checkboxlist/checkboxlist.html               |  2 +-
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index d44ca36a5a..e858ecfdc7 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -35,6 +35,16 @@
     'use strict';
 
     function CheckboxDirective() {
+        
+        function link(scope, el, attr, ctrl) {
+            
+            scope.callOnChange = function() {
+                scope.onChange({model:scope.model, value:scope.value});
+            }
+            
+        }
+
+        
         var directive = {
             restrict: 'E',
             replace: true,
@@ -47,7 +57,8 @@
                 disabled: "=",
                 required: "=",
                 onChange: "&"
-            }
+            },
+            link: link
         };
 
         return directive;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index b11e682da8..0b90a62e0b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -2,10 +2,10 @@
     <input type="checkbox" name="{{name}}"
            value="{{value}}"
            class="umb-form-check__input"
-           ng-model="model.checked"
+           ng-model="model"
            ng-disabled="disabled"
            ng-required="required"
-           ng-change="onChange(model)"/>
+           ng-change="callOnChange()"/>
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
index be3d5217f5..fac14b772d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
@@ -50,8 +50,8 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
             //get all of the same values between the arrays
             var same = _.intersection($scope.model.value, selectedVals);
             //if the lengths are the same as the value, then we are in sync, just exit
-            if (same.length == $scope.model.value.length === selectedVals.length) {
-                return; 
+            if (same.length === $scope.model.value.length && same.length === selectedVals.length) {
+                return;
             }
 
             $scope.selectedItems = [];
@@ -66,18 +66,14 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
             }
         }
 
-        function changed(item) {
+        function changed(model, value) {
             
-            var index = _.findIndex($scope.model.value,
-                function (v) {
-                    return v === item.val;
-                }
-            );
+            var index = $scope.model.value.indexOf(value);
             
-            if (item.checked) {
+            if (model) {
                 //if it doesn't exist in the model, then add it
                 if (index < 0) {
-                    $scope.model.value.push(item.val);
+                    $scope.model.value.push(value);
                 }
             } else {
                 //if it exists in the model, then remove it
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
index 18089b022a..783b413d5e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
@@ -1,7 +1,7 @@
 <div class="umb-property-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
     <ul class="unstyled">
         <li ng-repeat="item in selectedItems track by item.key">
-            <umb-checkbox name="{{model.alias}}" value="{{item.val}}" model="item" text="{{item.val}}" on-change="changed(item)" required="model.validation.mandatory && !model.value.length"></umb-checkbox>
+            <umb-checkbox name="{{model.alias}}" value="{{item.val}}" model="item.checked" text="{{item.val}}" on-change="changed(model, value)" required="model.validation.mandatory && !model.value.length"></umb-checkbox>
         </li>
     </ul>
 </div>

From 320d2ae95356954e85ea671090833ba0544156a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 7 Mar 2019 14:46:50 +0100
Subject: [PATCH 2/5] Change umb-checkbox to AngularJs Component + fix for
 callback digest flow

---
 .../components/forms/umbcheckbox.directive.js | 58 ++++++++++---------
 .../views/components/forms/umb-checkbox.html  | 17 +++---
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index e858ecfdc7..9b59d9b81f 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -22,9 +22,11 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
+@param {string} id Set the id of the checkbox.
 @param {string} value Set the value of the checkbox.
 @param {string} name Set the name of the checkbox.
 @param {string} text Set the text for the checkbox label.
+@param {string} serverValidationField Set the val-server-field of the checkbox.
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
 @param {string} onChange Callback when the value of the input element changes.
@@ -33,38 +35,38 @@
 
 (function () {
     'use strict';
-
-    function CheckboxDirective() {
+    
+    
+    function UmbCheckboxController($timeout) {
         
-        function link(scope, el, attr, ctrl) {
-            
-            scope.callOnChange = function() {
-                scope.onChange({model:scope.model, value:scope.value});
-            }
-            
+        var vm = this;
+        
+        vm.callOnChange = function() {
+            $timeout(function(){
+                vm.onChange({model:vm.model, value:vm.value});
+            }, 0, false);
         }
-
         
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            templateUrl: 'views/components/forms/umb-checkbox.html',
-            scope: {
-                model: "=",
-                value: "@",
-                name: "@",
-                text: "@",
-                disabled: "=",
-                required: "=",
-                onChange: "&"
-            },
-            link: link
-        };
-
-        return directive;
-
     }
+    
+    
+    var component = {
+        templateUrl: 'views/components/forms/umb-checkbox.html',
+        controller: UmbCheckboxController,
+        controllerAs: 'vm',
+        bindings: {
+            model: "=",
+            id: "@",
+            value: "@",
+            name: "@",
+            text: "@",
+            serverValidationField: "@",
+            disabled: "<",
+            required: "<",
+            onChange: "&"
+        }
+    };
 
-    angular.module('umbraco.directives').directive('umbCheckbox', CheckboxDirective);
+    angular.module('umbraco.directives').component('umbCheckbox', component);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index 0b90a62e0b..4de97b7856 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,16 +1,19 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': disabled }">
-    <input type="checkbox" name="{{name}}"
-           value="{{value}}"
+    <input type="checkbox"
+           id="{{vm.id}}"
+           name="{{vm.name}}"
+           value="{{vm.value}}"
            class="umb-form-check__input"
-           ng-model="model"
-           ng-disabled="disabled"
-           ng-required="required"
-           ng-change="callOnChange()"/>
+           val-server-field="{{vm.serverValidationField}}"
+           ng-model="vm.model"
+           ng-disabled="vm.disabled"
+           ng-required="vm.required"
+           ng-change="vm.callOnChange()"/>
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check">
             <i class="umb-form-check__icon icon-check"></i>
         </span>
     </span>
-    <span class="umb-form-check__text">{{text}}</span>
+    <span class="umb-form-check__text">{{vm.text}}</span>
 </label>

From 62808958b091843abf687ccfb800eebdd8b79470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 7 Mar 2019 15:29:28 +0100
Subject: [PATCH 3/5] umb-checkbox callback should call a new digest for
 callbacks changes to take effect.

---
 .../directives/components/forms/umbcheckbox.directive.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index 9b59d9b81f..54c6c67755 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -42,9 +42,9 @@
         var vm = this;
         
         vm.callOnChange = function() {
-            $timeout(function(){
+            $timeout(function() {
                 vm.onChange({model:vm.model, value:vm.value});
-            }, 0, false);
+            }, 0);
         }
         
     }

From 0d58b4c42be414b192274528a8bba19095c89e08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 8 Mar 2019 14:37:23 +0100
Subject: [PATCH 4/5] renamed umb-checkbox id attribute to input-id to avoid
 colliding Ids

---
 .../directives/components/forms/umbcheckbox.directive.js  | 8 ++++----
 .../src/views/components/forms/umb-checkbox.html          | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index 54c6c67755..47381a15c0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -22,14 +22,14 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
-@param {string} id Set the id of the checkbox.
+@param {string} input-id Set the <code>id</code> of the checkbox.
 @param {string} value Set the value of the checkbox.
 @param {string} name Set the name of the checkbox.
 @param {string} text Set the text for the checkbox label.
-@param {string} serverValidationField Set the val-server-field of the checkbox.
+@param {string} server-validation-field Set the <code>val-server-field</code> of the checkbox.
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
-@param {string} onChange Callback when the value of the input element changes.
+@param {string} on-change Callback when the value of the checkbox changed by interaction.
 
 **/
 
@@ -56,7 +56,7 @@
         controllerAs: 'vm',
         bindings: {
             model: "=",
-            id: "@",
+            inputId: "@",
             value: "@",
             name: "@",
             text: "@",
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index 4de97b7856..d40263c6b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,6 +1,6 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': disabled }">
     <input type="checkbox"
-           id="{{vm.id}}"
+           id="{{vm.inputId}}"
            name="{{vm.name}}"
            value="{{vm.value}}"
            class="umb-form-check__input"

From 1509c7364cda342cbb59267e9ab54e1213f67eb3 Mon Sep 17 00:00:00 2001
From: Robert <copilaurobert@gmail.com>
Date: Tue, 12 Mar 2019 09:52:03 +0100
Subject: [PATCH 5/5] Reverted extra check

---
 .../propertyeditors/checkboxlist/checkboxlist.controller.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
index fac14b772d..3b6c47478e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
@@ -50,7 +50,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
             //get all of the same values between the arrays
             var same = _.intersection($scope.model.value, selectedVals);
             //if the lengths are the same as the value, then we are in sync, just exit
-            if (same.length === $scope.model.value.length && same.length === selectedVals.length) {
+            if (same.length === $scope.model.value.length === selectedVals.length) {
                 return;
             }