From 70b3bcb53ccf5c4c6b92bd592722e28745d5a676 Mon Sep 17 00:00:00 2001
From: Matthias Manoukian <matthias.manoukian@gmail.com>
Date: Wed, 6 Nov 2019 11:07:43 +0100
Subject: [PATCH] chore(checkbox): use ng-classe

---
 components/checkbox/js/checkbox_directive.js | 33 ++++++++++++++++++++
 components/checkbox/views/checkbox.html      |  9 +-----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/components/checkbox/js/checkbox_directive.js b/components/checkbox/js/checkbox_directive.js
index b6d48212d..c5b1b0e24 100644
--- a/components/checkbox/js/checkbox_directive.js
+++ b/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;
 }
diff --git a/components/checkbox/views/checkbox.html b/components/checkbox/views/checkbox.html
index 1bdf72539..4aef02b27 100644
--- a/components/checkbox/views/checkbox.html
+++ b/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"