[ADD] web: add CustomCheckbox owl component

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

task id: 2193996

2 files changed, 73 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">