[IMP] web: convert FieldBoolean to Owl

This commit aims to convert the FieldBoolean into Owl. For this,
we also add missing features to AbstractFieldOwl (and to the
renderers that will use them), like the keyboard navigation.

Enterprise PR: https://github.com/odoo/enterprise/pull/8041
Task 2193996

closes odoo/odoo#44267

Related: odoo/enterprise#8041
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

1 files changed, 58 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;
+});