[add] avatar form control api

docs/form/api/avatar/avatar_afterchangeproperties_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: afterChangeProperties
+title: JavaScript Form - afterChangeProperties Avatar Event 
+description: You can explore the afterChangeProperties event of the Avatar 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 the [configuration attributes](form/api/avatar/avatar_setproperties_method.md) of the control and their new values
+
+@example:
+form.getItem("avatar").events.on("afterChangeProperties", properties => {
+    console.log("afterChangeProperties", properties);
+});
+
+@descr:

docs/form/api/avatar/avatar_afterhide_event.md

@@ -0,0 +1,22 @@
+---
+sidebar_label: afterHide
+title: JavaScript Form - afterHide Avatar Event 
+description: You can explore the afterHide event of the Avatar 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: object, init: boolean) => void;'}
+
+@params:
+- `value: object` - the current value of the control
+- `init: boolean` - *true*, if the event is triggered on the control initialization; otherwise, *false*
+
+@example:
+form.getItem("avatar").events.on("afterHide", value => {
+    console.log("afterHide", value);
+});
+
+@descr:

docs/form/api/avatar/avatar_aftershow_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: afterShow
+title: JavaScript Form - afterShow Avatar Event 
+description: You can explore the afterShow event of the Avatar 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: object) => void;'}
+
+@params:
+- `value: object` - the current value of the control
+
+@example:
+form.getItem("avatar").events.on("afterShow", value => {
+    console.log("afterShow", value);
+});
+
+@descr:

docs/form/api/avatar/avatar_beforechange_event.md

@@ -0,0 +1,27 @@
+---
+sidebar_label: beforeChange
+title: JavaScript Form - beforeChange Avatar Event 
+description: You can explore the beforeChange event of the Avatar 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: object) => boolean | void;'} 
+
+@params: 
+
+- `value: object` - the value expected to be applied after changes 
+
+@returns:
+Return `false` to prevent changing the value of the control; otherwise, `true`.
+
+@example:
+form.getItem("avatar").events.on("beforeChange", value => {
+    return (value.file && value.file?.name?.length > 10) ?? true; 
+    // prevent changes if the name of the uploaded file is 
+    // less than 10 characters including the extension 
+});
+
+@descr:

docs/form/api/avatar/avatar_beforechangeproperties_event.md

@@ -0,0 +1,25 @@
+---
+sidebar_label: beforeChangeProperties
+title: JavaScript Form - beforeChangeProperties Avatar Event 
+description: You can explore the beforeChangeProperties event of the Avatar 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 the [configuration attributes](form/api/avatar/avatar_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("avatar").events.on("beforeChangeProperties", properties => {
+    console.log("beforeChangeProperties", properties);
+    return false;
+});
+
+@descr:

docs/form/api/avatar/avatar_beforehide_event.md

@@ -0,0 +1,26 @@
+---
+sidebar_label: beforeHide
+title: JavaScript Form - beforeHide Avatar Event 
+description: You can explore the beforeHide event of the Avatar 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: object, init: boolean) => boolean | void;'}
+
+@params:
+- `value: object` - 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("avatar").events.on("beforeHide", value => {
+    console.log("beforeHide", value);
+    return true;
+});
+
+@descr:

docs/form/api/avatar/avatar_beforeshow_event.md

@@ -0,0 +1,25 @@
+---
+sidebar_label: beforeShow
+title: JavaScript Form - beforeShow Avatar Event 
+description: You can explore the beforeShow event of the Avatar 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: object) => boolean | void;'}
+
+@params:
+- `value: object` - the current value of the control
+
+@returns:
+Return `false` to prevent a control from being shown; otherwise, `true`.
+
+@example:
+form.getItem("avatar").events.on("beforeShow", value => {
+    console.log("beforeShow", value);
+    return true;
+});
+
+@descr:

docs/form/api/avatar/avatar_beforeuploadfile_event.md

@@ -0,0 +1,25 @@
+---
+sidebar_label: beforeUploadFile
+title: JavaScript Form - beforeUploadFile Avatar Event 
+description: You can explore the beforeUploadFile event of the Avatar 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.
+---
+
+# beforeUploadFile
+
+@short: fires before file upload begins
+
+@signature: {'beforeUploadFile: (value: object) => boolean | void;'}
+
+@params:
+- `value: object` - the current value of the control
+
+@returns:
+Return `false` to cancel file uploading; otherwise, `true`.
+
+@example:
+form.getItem("avatar").events.on("beforeUploadFile", (value) => {
+    console.log("beforeUploadFile", value);
+    return true;
+});
+
+@descr:

docs/form/api/avatar/avatar_change_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: change
+title: JavaScript Form - change Avatar Event 
+description: You can explore the change event of the Avatar 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: object) => void;'} 
+
+@params:
+- `value: object` - the current value of the control
+
+@example:
+form.getItem("avatar").events.on("change", value => {
+    console.log("change", value);
+});
+
+@descr:

docs/form/api/avatar/avatar_getproperties_method.md

@@ -0,0 +1,72 @@
+---
+sidebar_label: getProperties()
+title: JavaScript Form - getProperties Avatar Method 
+description: You can explore the getProperties method of the Avatar 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.
+---
+
+# getProperties()
+
+@short: returns an object with the available configuration attributes of the control
+
+@signature: {'getProperties(): object;'}
+
+@returns:
+An object with the available attributes of the control and their values.
+
+@example:
+const form = new dhx.Form("form_container", {
+    rows: [
+        {
+            type: "avatar",
+            name:"avatar",
+            helpMessage: "Help information",
+	    	required: true,
+	    	label: "Avatar",
+	    	labelWidth: 140,
+	    	target: "https://docs.dhtmlx.com/suite/backend/upload",
+        }
+    ]
+});
+
+form.getItem("avatar").getProperties();
+
+@descr:
+
+The returned object of the **Avatar** control looks like:
+
+~~~js
+{
+    "css": "",
+    "width": "content",
+    "height": "content",
+    "padding": undefined,
+    "label": "Avatar",
+    "labelWidth": 140,
+    "labelPosition": "top",
+    "hiddenLabel": false,
+    "helpMessage": "Help information",
+    "required": true,
+    "preMessage": "",
+    "successMessage": "",
+    "errorMessage": "",
+    "validation": undefined,
+    "readOnly": false,
+    "removeIcon": true,
+    "size": "medium",
+    "circle": false,
+    "alt": "",
+    "icon": "",
+    "placeholder": "",
+    "preview": "",
+    "accept": "",
+    "target": "https://docs.dhtmlx.com/suite/backend/upload",
+    "fieldName": "file",
+    "autosend": false,
+    "params": undefined,
+    "headerParams": undefined,
+    "updateFromResponse": true
+}
+~~~
+
+You will find the description of these properties [here](form/api/avatar/api_avatar_properties.md).
+

docs/form/api/avatar/avatar_setproperties_method.md

@@ -0,0 +1,66 @@
+---
+sidebar_label: setProperties()
+title: JavaScript Form - setProperties Avatar Method 
+description: You can explore the setProperties method of the Avatar 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.
+---
+
+# setProperties()
+
+@short: allows changing available configuration attributes of the control dynamically
+
+@signature: {'setProperties(properties: object): void;'}
+
+@params:
+- `properties: object` - an object with the available attributes of the control and their new values
+
+@example:
+form.getItem("avatar").setProperties({
+    labelWidth: "140px", 
+    labelPosition: "top"
+});
+
+@descr:
+
+:::info
+The method invokes the [](form/api/avatar/avatar_afterchangeproperties_event.md) and [](form/api/avatar/avatar_beforechangeproperties_event.md) events.
+:::
+
+It is possible to change values of the following configuration attributes of the **Avatar** control:
+
+~~~js
+{
+	css?: string;
+    width?: string | number | "content";
+    height?: string | number | "content";
+    padding?: string | number;
+    label?: string;
+    labelWidth?: string | number;
+    labelPosition?: "left" | "top";
+    hiddenLabel?: boolean;
+    helpMessage?: string;
+    required?: boolean;
+    preMessage?: string;
+    successMessage?: string;
+    errorMessage?: string;
+    validation?: (value: object) => boolean;
+    readOnly?: boolean;
+    removeIcon?: boolean;
+    size?: "small" | "medium" | "large" | number;
+    circle?: boolean;
+    alt?: string;
+    icon?: string;
+    placeholder?: string;
+    preview?: string;
+    accept?: string;
+    target?: string;
+    fieldName?: string;
+    autosend?: boolean;
+    params?: { [key: string]: any };
+    headerParams?: { [key: string]: any };
+    updateFromResponse?: boolean;
+}
+~~~
+
+You will find the description of these properties [here](form/api/avatar/api_avatar_properties.md).
+
+

docs/form/api/avatar/avatar_uploadbegin_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: uploadBegin
+title: JavaScript Form - uploadBegin Avatar Event 
+description: You can explore the uploadBegin event of the Avatar 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.
+---
+
+# uploadBegin
+
+@short: fires when file upload begins
+
+@signature: {'uploadBegin: (value: object) => void;'} 
+
+@params:
+- `value: object` - the current value of the control
+
+@example:
+form.getItem("avatar").events.on("uploadBegin", (value) => {
+    console.log("uploadBegin", value);
+});
+
+@descr: