[ADD] web: add CustomCheckbox owl component

This commit adds an owl component for the Odoo custom checkbox.

task id: 2193996

3 files changed, 129 insertions, 0 deletions

diff --git a/addons/web/static/src/js/components/custom_checkbox.js b/addons/web/static/src/js/components/custom_checkbox.js
new file mode 100644
index 00000000000..bc98dd7bab2
--- /dev/null
+++ b/addons/web/static/src/js/components/custom_checkbox.js
@@ -0,0 +1,58 @@
+odoo.define('web.CustomCheckbox', function (require) {
+    "use strict";
+
+    const utils = require('web.utils');
+
+    const { Component } = owl;
+
+    /**
+     * Custom checkbox
+     * 
+     * Component that can be used in templates to render the custom checkbox of Odoo.
+     * 
+     * <CustomCheckbox
+     *     value="boolean"
+     *     disabled="boolean"
+     *     text="'Change the label text'"
+     *     t-on-change="_onValueChange"
+     *     />
+     * 
+     * @extends Component
+     */
+    class CustomCheckbox extends Component {
+        /**
+         * @param {Object} [props]
+         * @param {string | number | null} [props.id]
+         * @param {boolean} [props.value=false]
+         * @param {boolean} [props.disabled=false]
+         * @param {string} [props.text]
+         */
+        constructor() {
+            super(...arguments);
+            this._id = `checkbox-comp-${utils.generateID()}`;
+        }
+    }
+
+    CustomCheckbox.props = {
+        id: {
+            type: [String, Number],
+            optional: 1,
+        },
+        disabled: {
+            type: Boolean,
+            optional: 1,
+        },
+        value: {
+            type: Boolean,
+            optional: 1,
+        },
+        text: {
+            type: String,
+            optional: 1,
+        },
+    };
+
+    CustomCheckbox.template = 'web.CustomCheckbox';
+
+    return CustomCheckbox;
+});
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 2b0ff6f31dd..db1e893c168 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -93,6 +93,21 @@
     </div>
 </t>
 
+<t t-name="web.CustomCheckbox" owl="1">
+    <div class="custom-control custom-checkbox">
+        <input
+            t-att-id="props.id or _id"
+            type="checkbox"
+            class="custom-control-input"
+            t-att-disabled="props.disabled"
+            t-att-checked="props.value"
+            />
+        <label t-att-for="props.id or _id" class="custom-control-label">
+            <t t-esc="props.text or '&#8203;'"/>
+        </label>
+    </div>
+</t>
+
 <t t-name="web.CustomFileInput" owl="1">
     <span class="o_file_input" aria-atomic="true">
         <span class="o_file_input_trigger" t-on-click.prevent="_onTriggerClicked">
diff --git a/addons/web/static/tests/components/custom_checkbox_tests.js b/addons/web/static/tests/components/custom_checkbox_tests.js
new file mode 100644
index 00000000000..21d7ae53af2
--- /dev/null
+++ b/addons/web/static/tests/components/custom_checkbox_tests.js
@@ -0,0 +1,56 @@
+odoo.define('web.custom_checkbox_tests', function (require) {
+    "use strict";
+
+    const CustomCheckbox = require('web.CustomCheckbox');
+    const testUtils = require('web.test_utils');
+
+    const { createComponent, dom: testUtilsDom } = testUtils;
+
+    QUnit.module('Components', {}, function () {
+
+        QUnit.module('CustomCheckbox');
+
+        QUnit.test('test checkbox: default values', async function(assert) {
+            assert.expect(6);
+
+            const checkbox = await createComponent(CustomCheckbox, {});
+
+            assert.containsOnce(checkbox.el, 'input');
+            assert.containsNone(checkbox.el, 'input:disabled');
+            assert.containsOnce(checkbox.el, 'label');
+
+            const input = checkbox.el.querySelector('input');
+            assert.notOk(input.checked, 'checkbox should be unchecked');
+            assert.ok(input.id.startsWith('checkbox-comp-'));
+
+            await testUtilsDom.click(checkbox.el.querySelector('label'));
+            assert.ok(input.checked, 'checkbox should be checked');
+
+            checkbox.destroy();
+        });
+
+        QUnit.test('test checkbox: custom values', async function(assert) {
+            assert.expect(6);
+
+            const checkbox = await createComponent(CustomCheckbox, {
+                props: {
+                    id: 'my-custom-checkbox',
+                    disabled: true,
+                    value: true,
+                    text: 'checkbox',
+                }
+            });
+
+            assert.containsOnce(checkbox.el, 'input');
+            assert.containsOnce(checkbox.el, 'input:disabled');
+            assert.containsOnce(checkbox.el, 'label');
+
+            const input = checkbox.el.querySelector('input');
+            assert.ok(input.checked, 'checkbox should be checked');
+            assert.strictEqual(input.id, 'my-custom-checkbox');
+            assert.ok(input.checked, 'checkbox should be checked');
+
+            checkbox.destroy();
+        });
+    });
+});