chore(checkbox): use ng-classe

Author: matmkian

components/checkbox/js/checkbox_directive.js

@@ -18,6 +18,17 @@ function CheckboxController(LxUtilsService) {
     //                         //
     /////////////////////////////
 
+    /**
+     * The default props.
+     *
+     * @type {Object}
+     * @constant
+     * @readonly
+     */
+    const _DEFAULT_PROPS = {
+        theme: 'light',
+    };
+
     /**
      * The model controller.
      *
@@ -81,6 +92,27 @@ function CheckboxController(LxUtilsService) {
     //                         //
     /////////////////////////////
 
+    /**
+     * Get checkbox classes.
+     *
+     * @return {Array} The list of checkbox classes.
+     */
+    function getClasses() {
+        const classes = [];
+
+        const state = lx.viewValue ? 'checked' : 'unchecked';
+        const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme;
+
+        classes.push(`${CSS_PREFIX}-checkbox--is-${state}`);
+        classes.push(`${CSS_PREFIX}-checkbox--theme-${theme}`);
+
+        if (lx.customColors) {
+            classes.push(`${CSS_PREFIX}-custom-colors`);
+        }
+
+        return classes;
+    }
+
     /**
      * Set the model controller.
      *
@@ -110,6 +142,7 @@ function CheckboxController(LxUtilsService) {
 
     /////////////////////////////
 
+    lx.getClasses = getClasses;
     lx.setModelController = setModelController;
     lx.updateViewValue = updateViewValue;
 }

components/checkbox/views/checkbox.html

@@ -1,11 +1,4 @@
-<div
-    class="lumx-checkbox"
-    ng-class="{ 'lumx-checkbox--is-checked': lx.viewValue,
-                'lumx-checkbox--is-unchecked': !lx.viewValue,
-                'lumx-checkbox--theme-light': !lx.theme || lx.theme === 'light',
-                'lumx-checkbox--theme-dark': lx.theme === 'dark',
-                'lumx-custom-colors': lx.customColors }"
->
+<div class="lumx-checkbox" ng-class="lx.getClasses()">
     <div class="lumx-checkbox__input-wrapper">
         <input
             type="checkbox"