[add] toggle control api events

docs/form/api/api_overview.md

@@ -834,3 +834,28 @@ description: You can explore the API of Form in the documentation of the DHTMLX
 ### Timepicker properties
 
 [List of the Timepicker properties](form/api/timepicker/api_timepicker_properties.md)
+
+## Toggle API
+
+### Toggle methods
+
+| Name                                             	 | Description                                             	 |
+| :------------------------------------------------- | :-------------------------------------------------------- |
+| [](form/api/toggle/toggle_blur_method.md)        	 | @getshort(form/api/toggle/toggle_blur_method.md)        	 |
+| [](form/api/toggle/toggle_destructor_method.md)  	 | @getshort(form/api/toggle/toggle_destructor_method.md)  	 |
+| [](form/api/toggle/toggle_disable_method.md)     	 | @getshort(form/api/toggle/toggle_disable_method.md)     	 |
+| [](form/api/toggle/toggle_enable_method.md)      	 | @getshort(form/api/toggle/toggle_enable_method.md)      	 |
+| [](form/api/toggle/toggle_focus_method.md)         | @getshort(form/api/toggle/toggle_focus_method.md)       	 |
+| [](form/api/toggle/toggle_getproperties_method.md) | @getshort(form/api/toggle/toggle_getproperties_method.md) |
+| [](form/api/toggle/toggle_getvalue_method.md)      | @getshort(form/api/toggle/toggle_getvalue_method.md)      |
+| [](form/api/toggle/toggle_hide_method.md)          | @getshort(form/api/toggle/toggle_hide_method.md)        	 |
+| [](form/api/toggle/toggle_isdisabled_method.md)    | @getshort(form/api/toggle/toggle_isdisabled_method.md)    |
+| [](form/api/toggle/toggle_isselected_method.md)    | @getshort(form/api/toggle/toggle_isselected_method.md)    |
+| [](form/api/toggle/toggle_isvisible_method.md)     | @getshort(form/api/toggle/toggle_isvisible_method.md)     |
+| [](form/api/toggle/toggle_setproperties_method.md) | @getshort(form/api/toggle/toggle_setproperties_method.md) |
+| [](form/api/toggle/toggle_setvalue_method.md)    	 | @getshort(form/api/toggle/toggle_setvalue_method.md)    	 |
+| [](form/api/toggle/toggle_show_method.md)    		 | @getshort(form/api/toggle/toggle_show_method.md)    		 |
+
+
+### Toggle events
+

docs/form/api/checkbox/checkbox_blur_event.md

@@ -17,6 +17,6 @@ description: You can explore the blur event of the Checkbox control of Form in t
 form.getItem("checkbox").events.on("blur", (value) => {
     console.log("blur", value);
 });
-@examplestop:
+
 
 @changelog: added in v7.2

docs/form/api/toggle/toggle_afterchangeproperties_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: afterChangeProperties
+title: JavaScript Form - afterChangeProperties Toggle Event 
+description: You can explore the afterChangeProperties event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# afterChangeProperties
+
+@short: fires after configuration attributes of the control have been changed dynamically
+
+@signature: {'afterChangeProperties: (properties: object) => void;'}
+
+@params:
+- `properties: object` - an object with [configuration attributes](form/api/toggle/toggle_setproperties_method.md) of the control and their new values
+
+@example:
+form.getItem("toggle").events.on("afterChangeProperties", function(properties) {
+    console.log("afterChangeProperties", properties);
+});
+
+@descr:

docs/form/api/toggle/toggle_afterhide_event.md

@@ -0,0 +1,22 @@
+---
+sidebar_label: afterHide
+title: JavaScript Form - afterHide Toggle Event 
+description: You can explore the afterHide event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# afterHide
+
+@short: fires after a control is hidden
+
+@signature: {'afterHide: (value: string | number | boolean, init: boolean) => void;'}
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+- `init: boolean` - *true*, if the event is triggered on the toggle control initialization; otherwise, *false*
+
+@example:
+form.getItem("toggle").events.on("afterHide", function(value, init) {
+    console.log("afterHide", value, init);
+});
+
+@descr:

docs/form/api/toggle/toggle_aftershow_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: afterShow
+title: JavaScript Form - afterShow Toggle Event 
+description: You can explore the afterShow event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# afterShow
+
+@short: fires after a control is shown
+
+@signature: {'afterShow: (value: string | number | boolean) => void;'}
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+
+@example:
+form.getItem("toggle").events.on("afterShow", function(value) {
+    console.log("afterShow", value);
+});
+
+@descr:

docs/form/api/toggle/toggle_beforechange_event.md

@@ -0,0 +1,25 @@
+---
+sidebar_label: beforeChange
+title: JavaScript Form - beforeChange Toggle Event 
+description: You can explore the beforeChange event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# beforeChange
+
+@short: fires before changing the value of a control
+
+@signature: {'beforeChange: (value: string | number | boolean) => boolean | void;'}
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+
+@returns:
+Return `false` to prevent changing the value of the control; otherwise, `true`.
+
+@example:
+form.getItem("toggle").events.on("beforeChange", function(value) {
+    console.log("beforeChange", value);
+    return true;
+});
+
+@descr:

docs/form/api/toggle/toggle_beforechangeproperties_event.md

@@ -0,0 +1,25 @@
+---
+sidebar_label: beforeChangeProperties
+title: JavaScript Form - beforeChangeProperties Toggle Event 
+description: You can explore the beforeChangeProperties event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# beforeChangeProperties
+
+@short: fires before configuration attributes of the control are changed dynamically
+
+@signature: {'beforeChangeProperties: (properties: object) => boolean | void;'}
+
+@params:
+- `properties: object` - an object with [configuration attributes](form/api/toggle/toggle_setproperties_method.md) of the control and their new values
+
+@returns:
+Return `false` to cancel the default action of the event; otherwise, `true`.
+
+@example:
+form.getItem("toggle").events.on("beforeChangeProperties", function(properties) {
+    console.log("beforeChangeProperties", properties);
+    return true;
+});
+
+@descr:

docs/form/api/toggle/toggle_beforehide_event.md

@@ -0,0 +1,26 @@
+---
+sidebar_label: beforeHide
+title: JavaScript Form - beforeHide Toggle Event 
+description: You can explore the beforeHide event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# beforeHide
+
+@short: fires before a control is hidden
+
+@signature: {'beforeHide: (value: string | number | boolean, init: boolean) => boolean | void;'} 
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+- `init: boolean` - *true*, if the event is triggered on the control initialization; otherwise, *false*
+
+@returns:
+Return `false` to prevent a control from being hidden; otherwise, `true`.
+
+@example:
+form.getItem("toggle").events.on("beforeHide", function(value, init) {
+    console.log("beforeHide", value, init);
+    return true;
+});
+
+@descr:

docs/form/api/toggle/toggle_beforeshow_event.md

@@ -0,0 +1,27 @@
+---
+sidebar_label: beforeShow
+title: JavaScript Form - beforeShow Toggle Event 
+description: You can explore the beforeShow event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# beforeShow
+
+@short: fires before a control is shown
+
+@signature: {'beforeShow: (value: string | number | boolean) => boolean | void;'}
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+
+@returns:
+Return `false` to prevent a control from being shown; otherwise, `true`.
+
+@example:
+form.getItem("toggle").events.on("beforeShow", function(value) {
+    console.log("beforeShow", value);
+    return true;
+});
+
+@descr:
+
+

docs/form/api/toggle/toggle_blur_event.md

@@ -0,0 +1,19 @@
+---
+sidebar_label: blur
+title: JavaScript Form - blur Toggle Event 
+description: You can explore the blur event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# blur
+
+@short: fires when a Toggle control has lost focus
+
+@signature: blur: (value: string | number | boolean) => void;
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+
+@example:
+form.getItem("toggle").events.on("blur", (value) => {
+    console.log("blur", value);
+});

docs/form/api/toggle/toggle_change_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: change
+title: JavaScript Form - change Toggle Event 
+description: You can explore the change event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# change
+
+@short: fires on changing the value of a control
+
+@signature: {'change: (value: string | number | boolean) => void;'}
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+
+@example:
+form.getItem("toggle").events.on("change", function(value) {
+    console.log("change", value);
+});
+
+@descr:

docs/form/api/toggle/toggle_focus_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: focus
+title: JavaScript Form - focus Toggle Event 
+description: You can explore the focus Toggle event of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# focus
+
+@short: fires when a Toggle control has received focus
+
+@signature: focus: (value: string | number | boolean) => void;
+
+@params:
+- `value: string | number | boolean` - the current value of the control
+
+@example:
+form.getItem("toggle").events.on("focus", (value) => {
+    console.log("focus", value);
+});
+
+@descr:

docs/form/api/toggle/toggle_keydown_event.md

@@ -0,0 +1,19 @@
+---
+sidebar_label: keydown 
+title: JavaScript Form - keydown Toggle Event 
+description: You can explore the keydown event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# keydown
+
+@short: fires when any key is pressed and the Toggle control is in focus
+
+@signature: keydown: (event: KeyboardEvent) => void;
+
+@params:
+- `event: KeyboardEvent` - a native KeyboardEvent object
+
+@example:
+form.getItem("toggle").events.on("keydown", function(event) {
+    console.log(event);
+});

sidebars.js

@@ -2250,8 +2250,20 @@ module.exports = {
                       image: '/img/docusaurus.png'
                     },
                     items: [
-                      /**/
-
+                      "form/api/toggle/toggle_blur_method",
+                      "form/api/toggle/toggle_destructor_method",
+                      "form/api/toggle/toggle_disable_method",
+                      "form/api/toggle/toggle_enable_method",
+                      "form/api/toggle/toggle_focus_method",
+                      "form/api/toggle/toggle_getproperties_method",
+                      "form/api/toggle/toggle_getvalue_method",
+                      "form/api/toggle/toggle_hide_method",
+                      "form/api/toggle/toggle_isdisabled_method",
+                      "form/api/toggle/toggle_isselected_method",
+                      "form/api/toggle/toggle_isvisible_method",
+                      "form/api/toggle/toggle_setproperties_method",
+                      "form/api/toggle/toggle_setvalue_method",
+                      "form/api/toggle/toggle_show_method"
                     ],
                   },
                   {