Merge pull request #4906 from umbraco/temp8-ui-umb-checkbox-refactor-for-general-usage

changed umb-checkbox model to be the boolean property, not a object c…

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js

@@ -22,38 +22,51 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
+@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} 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.
 
 **/
 
 (function () {
     'use strict';
-
-    function CheckboxDirective() {
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            templateUrl: 'views/components/forms/umb-checkbox.html',
-            scope: {
-                model: "=",
-                value: "@",
-                name: "@",
-                text: "@",
-                disabled: "=",
-                required: "=",
-                onChange: "&"
-            }
-        };
-
-        return directive;
-
+    
+    
+    function UmbCheckboxController($timeout) {
+        
+        var vm = this;
+        
+        vm.callOnChange = function() {
+            $timeout(function() {
+                vm.onChange({model:vm.model, value:vm.value});
+            }, 0);
+        }
+        
     }
+    
+    
+    var component = {
+        templateUrl: 'views/components/forms/umb-checkbox.html',
+        controller: UmbCheckboxController,
+        controllerAs: 'vm',
+        bindings: {
+            model: "=",
+            inputId: "@",
+            value: "@",
+            name: "@",
+            text: "@",
+            serverValidationField: "@",
+            disabled: "<",
+            required: "<",
+            onChange: "&"
+        }
+    };
 
-    angular.module('umbraco.directives').directive('umbCheckbox', CheckboxDirective);
+    angular.module('umbraco.directives').component('umbCheckbox', component);
 
 })();

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.inputId}}"
+           name="{{vm.name}}"
+           value="{{vm.value}}"
            class="umb-form-check__input"
-           ng-model="model.checked"
-           ng-disabled="disabled"
-           ng-required="required"
-           ng-change="onChange(model)"/>
+           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>

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 === 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

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>