swing-ui 0.1.25 → 1.0.1

package/classes/UIComponent.js

@@ -0,0 +1,2113 @@
+import {ShortcutScope} from "swing-ui/enums.js";
+
+/**
+ * Base component class that other UI components extend. Not to be instantiated by itself.
+ * Most methods in this class are used by other classes that extend this class.
+ * @class
+ * @global
+ */
+class UIComponent
+{
+	#id = null; // keep it private
+	#token = null;
+	parent_id = null;
+	#context_menu = null;
+	#prop = {
+		class: null, // instantiated class prototype
+		type: "UIComponent",
+		leaf: true, // true if the class is not extended by another class
+		visible: !(this instanceof Window), // true, unless it's a Window
+		size: {},
+		location: {x: 0, y: 0},
+		dragAction: DragDropAction.None,
+		dropAction: DragDropAction.None,
+		container: null // default NULL until container() getter is called.
+	};
+	callback = {
+		"onError": [e => ui.callback.onError.call(this, e)], // Default error event callback. Can be changed by .onError(callback)
+		"onRectangleUpdate": [e =>
+		{
+			if(e.type === "resize")
+			{
+				this.#prop.size.width = e.width ?? this.#prop.size.width;
+				this.#prop.size.height = e.height ?? this.#prop.size.height;
+			}
+			if(e.type === "move")
+			{
+				this.#prop.location.x = e.x ?? this.#prop.location.x;
+				this.#prop.location.y = e.y ?? this.#prop.location.y;
+			}
+		}]
+	};
+
+	static #controls_id = 0;
+	static #_freed_ids = [];
+	static #_components = []; // all components
+
+	/**
+	 * This is used to be notified when the component loses all references to it, to notify SwingUI to destroy the component for garbage collection
+	 * @private
+	 */
+	static #refRegistry = new FinalizationRegistry(id => { UIComponent.destroy(id); });
+
+	/**
+	 * Makes one class implements methods, setters, and getters of another class.
+	 * @param toClass
+	 * @param fromClass
+	 * @throws {Error} When one or more parameters are `null`.
+	 * @internal
+	 * @ignore
+	 */
+	static implementClass(toClass, fromClass)
+	{
+		if(toClass == null || fromClass == null) throw new Error(`Invalid class parameters provided to implementClass(toClass, fromClass)`);
+
+		Object.getOwnPropertyNames(fromClass.prototype).forEach(key =>
+		{
+			if(key !== 'constructor')
+			{
+				const desc = Object.getOwnPropertyDescriptor(fromClass.prototype, key);
+				desc.configurable = false;
+				if(typeof desc.value === "function") desc.writable = false;
+				Object.defineProperty(toClass.prototype, key, desc);
+			}
+		});
+	}
+
+	/**
+	 * Removes references to UI component with provided ID. Make sure to destroy  all other references to the component to truly destroy it to free RAM.
+	 *
+	 * @internal
+	 * @ignore
+	 * @private
+	 * @param {number} id - ID of a component to be destroyed
+	 * @return {void} Doesn't return a value
+	 */
+	static destroy(id)
+	{
+		// makes sure that component is garbage collected and new one is not created with same ID yet before this one is not garbage collected
+		// this._components[id] should have a WeakReference object, but deref() should be undefined.
+		if(UIComponent.#_components[id] === undefined) return;
+
+		const component = UIComponent.#_components[id].deref();
+		if(component !== undefined) component.emit("onDispose", {type: "dispose"});
+
+		// if this was initiated by FinalizationRegistry for GC, then remove weak reference
+		UIComponent.#_components[id] = undefined;
+		delete UIComponent.#_components[id];
+
+		// send "delete" command to GUI
+		ui.sendToGUI({control: id, delete: true});
+
+		// recycle component's ID at a delay, to prevent events from destroyed component reach a new component with recycled ID
+		setTimeout(() => {UIComponent.#_freed_ids.push(id);}, 5000);
+	}
+
+	/**
+	 * Get UI component by ID.
+	 *
+	 * @param {number} id - ID of requested component
+	 * @return {any|undefined} Returns UI component or `undefined` if there is no valid component with specified ID.
+	 */
+	static get(id)
+	{
+		return UIComponent.#_components[id]?.deref();
+	}
+
+	/**
+	 * Returns last visible non-PopUp Window or null if no Window component is not found.
+	 *
+	 * @internal
+	 * @static
+	 * @readonly
+	 * @returns {Window|null} Returns Window component or null.
+	 */
+	static getVisibleWindow()
+	{
+		const _ids = Object.keys(UIComponent.#_components);
+
+		for(let i = _ids.length - 1; i >= 0; i--)
+		{
+			const c = UIComponent.#_components[_ids[i]].deref();
+			if(c instanceof Window && c.visible() && c.type !== Window.Type.Popup) return c;
+		}
+
+		return null;
+	}
+
+	/**
+	 * Not to be instantiated by itself. This call is extended dby other UI components.
+	 *
+	 * @param {string} type - Component type.
+	 * @param {boolean} leaf - `true` if the UI component was not extended by a custom class.
+	 * @param {...any} [data] - Additional component init data (used by some UI components).
+	 * @internal
+	 * @ignore
+	 */
+	constructor(type, leaf, ...data)
+	{
+		this.#prop.class = new.target;
+		this.#prop.type = type;
+		this.#prop.leaf = leaf;
+
+		if(this.#prop.class === UIComponent) throw new Error(`Class UIComponent cannot not to be instantiated. It must be extended by one of swing-ui components.`);
+
+		// reuse freed IDs or create a new one
+		this.#id = (UIComponent.#_freed_ids.length > 0) ? UIComponent.#_freed_ids.shift() : ++UIComponent.#controls_id;
+
+		// register it in array of components
+		UIComponent.#_components[this.#id] = new WeakRef(this);
+
+		// Create a token to be able to unregister this component when it's manually destroyed
+		this.#token = {id: this.#id};
+
+		// register this component for deletion when all references to it are lost (garbage collection).
+		UIComponent.#refRegistry.register(this, this.#id, this.#token); // token must be a Symbol, Number doesn't work.
+
+		// tell GUI about the new component
+		let msg = {control: this.#id, create: this.#prop.type};
+		if(data.length > 0) msg.data = data[0];
+		ui.sendToGUI(msg);
+	}
+
+	/**
+	 * Locks methods from being overwritten or deleted.
+	 * @param {Function} prototype_class
+	 * @ignore
+	 * @internal
+	 */
+	finalize(..._classes)
+	{
+		_classes.push(UIComponent); // UIComponent must be last in array
+
+		for(const c of _classes)
+		{
+			Object.getOwnPropertyNames(c.prototype).forEach(key=>
+			{
+				if(key === "constructor" || key === "finalize" || key === "isFinalized") return;
+				if(this.isFinalized(key)) return; // skip already locked method/setter/getter
+
+				const desc = Object.getOwnPropertyDescriptor(c.prototype, key);
+
+				if(typeof desc.value === "function") // lock function
+				{
+
+					Object.defineProperty(this, key, {
+						value: desc.value.bind(this),
+						writable: false,
+						configurable: false,
+						enumerable: desc.enumerable
+					});
+				}
+				else if((desc.get || desc.set) && !this.isFinalized(key)) // lock getter and setter
+				{
+					Object.defineProperty(this, key, {
+						get: desc.get?.bind(this),
+						set: desc.set?.bind(this),
+						configurable: false,
+						enumerable: desc.enumerable
+					});
+				}
+			});
+		}
+
+		// these are no longer needed
+		this.finalize = null;
+		this.isFinalized = null;
+	}
+
+	/**
+	 * @internal
+	 * @ignore
+	 */
+	isFinalized(methodName)
+	{
+		const desc = Object.getOwnPropertyDescriptor(this, methodName);
+		if(!desc) return false; // not directly defined on the object
+		return desc.writable === false && desc.configurable === false;
+	}
+
+	/**
+	 * @internal
+	 * @readonly
+	 * @ignore
+	 * @type {object}
+	 */
+	get prop()
+	{
+		return this.#prop;
+	}
+
+	//region Property setters/getters
+
+	/**
+	 * Returns a unique ID of the component. ID is reusable, so one component may have an ID of a previously destroyed component.
+	 * @readonly
+	 * @type {number}
+	 */
+	get id()
+	{
+		return this.#id;
+	}
+
+	/**
+	 * Gets a parent Object. If this component wasn't added to any container component, then `null` is returned.
+	 * @readonly
+	 * @type {Object|undefined}
+	 */
+	get parent()
+	{
+		this.verifyComponent();
+
+		if(this.parent_id == null) return null;
+		return UIComponent.get(this.parent_id);
+	}
+
+	/**
+	 * Gets a Window component containing this component. Returns `null` if no Window contain this component.
+	 * @readonly
+	 * @type {Window|null}
+	 */
+	get window()
+	{
+		if(this instanceof Window) return this;
+		return this.parent?.window ?? null;
+	}
+
+	/**
+	 *  Returns `true` if the component is a container (other components can be added to it), otherwise returns false.
+	 *  @readonly
+	 *  @type {boolean}
+	 */
+	get isContainer()
+	{
+		if(this.#prop.container == null) this.#prop.container = this instanceof ComponentContainer; // cache answer
+		return this.#prop.container;
+	}
+
+	/**
+	 * Gets a position of this component relative to primary screen. Returns `null` if the component wasn't added to a container that is visible, or of this component is a Window and it was never visible.
+	 *
+	 * @readonly
+	 * @type {Point|null}
+	 * @see Point
+	 * @see ui#screens
+	 */
+	get screenPosition()
+	{
+		return this.property("screenLocation", []);
+	}
+
+	/**
+	 * Adds this component to a parent container component. An optional index specifies the Z-order position at which to insert the component. It calls {@link ComponentContainer#addChild}.
+	 *
+	 * @param {ComponentContainer} parent - The container component to which this component will be added.
+	 * @param {number|object} [data_or_index] - An parameter to pass some extra data (such as Tab Name to add Panel to Tabs), or index at which to insert the child.
+	 * @returns {this} Returns an instance of this component for chaining.
+	 * @see ComponentContainer#addChild
+	 * @example <h2>Adding a component at specified index</h2>
+	 * let checkbox = new CheckBox("Enabled checkbox").addTo(panel, 5).position(10, 15); // adds to panel and positions at (10,15) coordinates
+	 *
+	 * @example <h2>Adding a component at specified index</h2>
+	 * let panel = new Panel().addTo(tabs, {text: "Registration", enabled: true, tooltip: "Create new account", icon: "images/user.png"});
+	 */
+	addTo(parent, ...args)
+	{
+		// making sure that parent is instance of UIComponent
+		if(typeof parent !== "object" || !(parent instanceof UIComponent)) throw Error(`'parent' component must be derived from UIComponent of swing-ui module. ${ui._msg[2]}`);
+
+		parent.addChild(this, ...args);
+		return this;
+	}
+
+	/**
+	 * Removes this component from its parent.
+	 *
+	 * @param {boolean} [recursive] - Boolean indicates if all descendents of this child should also be removed.
+	 * @returns {this} Returns this component for method chaining
+	 * @example
+	 * child.remove(); // Removes child from it's parent container
+	 * child.remove(true); // Removes child component from it's parent and all its descendants recursively
+	 */
+	remove()
+	{
+		let recursive = false;
+
+		if(arguments.length > 0)
+		{
+			if(typeof arguments[0] !== "boolean") throw new Error(`Invalid argument passed to remove(recursive). Boolean is expected, but received ${typeof recursive}.`);
+			recursive = arguments[0];
+		}
+
+		if(this instanceof Window) // don't remove window, but only it's children, if recursive
+		{
+			// remove recursively, from back
+			if(recursive) for(let c = this.childCount - 1; c >= 0; c--) this.removeChild(c, true);
+		}
+		else
+		{
+			if(this.parent != null && this.parent instanceof UIComponent) this.parent.removeChild(this, recursive);
+		}
+
+		return this;
+	}
+
+	/**
+	 * Removes the component from its container, destroys event callbacks, unregisters the component, recycles the component ID. Also prepares this component to be garbage-collected in JavaScript and GUI to free RAM.
+	 *
+	 * @param {boolean} [recursive=false] - Set to true to also destroy all of its descendants recursively
+	 * @returns {void}
+	 */
+	destroy(...args)
+	{
+		if(this.destroyed) return;
+
+		UIComponent.#refRegistry.unregister(this.#token);
+
+		try
+		{
+			this.remove(); // remove this element from its parent
+		}catch(ex)
+		{
+			console.error(ex);
+		}
+
+		// remove context menu
+		if(this.#context_menu != null) this.contextMenu(null);
+
+		// remove references
+		UIComponent.destroy(this.#id);
+
+		// remove all properties
+		for(let prop of Object.keys(this))
+		{
+			if(prop !== "verifyComponent" && typeof this[prop] !== "function") delete this[prop];
+		}
+
+		this.destroyed = true;
+	}
+
+	/**
+	 * This function may be called to make sure the component wasn't destroyed yet before performing another operation with the component. If it's already destroyed, Exception is thrown.
+	 *
+	 * @return {this} Returns this component.
+	 */
+	verifyComponent()
+	{
+		if(this.destroyed ?? false)
+		{
+			throw new Error(ui._msg[0] + " (" + this.constructor.name + ")");
+		}
+
+		return this;
+	}
+
+	/**
+	 * Checks if this component is inside specified ancestor component (at any level, not just direct child).
+	 * @param {Object} ancestor - Ancestor component to test against
+	 * @return {boolean}
+	 * @see ComponentContainer#contains
+	 */
+	insideOf(ancestor)
+	{
+		if(!(ancestor instanceof ComponentContainer)) return false;
+		return ancestor.contains(this);
+	}
+
+	/**
+	 * Sets or gets component's visibility.
+	 * NOTE: Window and InternalWindow components visibility is set to `false` by default. Use .visible(true) or .show() to make it visible.
+	 *
+	 * @param {boolean} [visible] - `true` to make it visible, `false` to hide it.
+	 * @return {boolean|this} If called with an argument, then `this` component instance is returned, otherwise `boolean` value is returned.
+	 */
+	visible(...args)
+	{
+		this.verifyComponent();
+
+		if(args.length === 0)
+		{
+			return this.#prop.visible;
+		}
+		else
+		{
+			if(args[0] == null) return this; // ignore null or undefined
+			this.#prop.visible = (args[0] === true);
+		}
+		return this.property("visible", [this.#prop.visible]);
+	}
+
+	/**
+	 * Convenience function that calls this.visible(true)
+	 * @return {this}
+	 */
+	show()
+	{
+		return this.visible(true);
+	}
+
+	/**
+	 * Convenience function that calls this.visible(false)
+	 * @return {this}
+	 */
+	hide()
+	{
+		return this.visible(false);
+	}
+
+	/**
+	 * Enables or disables the component.
+	 *
+	 * @param {boolean} [enabled] `true` to enable, `false` to disable the component. Omit to get current value.
+	 * @return {boolean|this} If called with an argument, then `this` component instance is returned, otherwise `boolean` value is returned.
+	 */
+	enabled(...args)
+	{
+		return this.property("enabled", args);
+	}
+
+	/**
+	 * Sets or gets the size of the component.
+	 *
+	 * For {@link Window}, the returned and assigned size represents the entire window, including the title bar and borders. The actual area available for placing child components is smaller. Use {@link Window#innerSize} when you need to specify the content area size instead.
+	 *
+	 * @param {number|Size} [width_or_size] - Number as width, or `Size` formatted object.
+	 * @param {number} [height] - Height of component. Required if first argument is `number`.
+	 * @return {Size|this} Component size object if no arguments are set, otherwise returns `this` component.
+	 * @see Size
+	 * @example
+	 * // Usage examples:
+	 * button.size(100, 25);
+	 * button.size({width: 100, height: 25});
+	 * let size = button.size();
+	 */
+	size(...args)
+	{
+		if(args.length > 0)
+		{
+			const size = (args.length > 1) ? {
+				width: args[0],
+				height: args[1]
+			} : (args[0] != null && typeof args[0] === "object") ? {
+				width: args[0].width ?? this.#prop.size.width,
+				height: args[0].height ?? this.#prop.size.height
+			} : null;
+
+			if(size == null)
+			{
+				this.#prop.size = {}; // reset, to be retrieved from GUI on next request
+				return this;
+			}
+			if(this.parent instanceof Tabs || this.parent instanceof ScrollPane) return this;
+			if(size.width == null || (typeof size.width !== "string" && isNaN(size.width))) size.width = this.#prop.size.width ?? this.width();
+			if(size.height == null || (typeof size.height !== "string" && isNaN(size.height))) size.height = this.#prop.size.height ?? this.height();
+
+			// check if width is in %
+			if(typeof size.width === "string" && size.width.indexOf("%") > 0)
+			{
+				const m = parseFloat(size.width.replace("%", "")) / 100;
+				size.width = (this.parent != null) ? (("innerSize" in this.parent) ? this.parent.innerSize().width : this.parent.width()) * m : this.width();
+			}
+
+			// check if height is in %
+			if(typeof size.height === "string" && size.height.indexOf("%") > 0)
+			{
+				const m = parseFloat(size.height.replace("%", "")) / 100;
+				size.height = (this.parent != null) ? (("innerSize" in this.parent) ? this.parent.innerSize().height : this.parent.height()) * m : this.height();
+			}
+
+			// if size changed, then send to GUI
+			if(this.#prop.size.width !== size.width || this.#prop.size.height !== size.height)
+			{
+				this.#prop.size = size;
+				return this.property("size", [this.#prop.size]);
+			}
+			else
+			{
+				return this;
+			}
+		}
+		else
+		{
+			this.verifyComponent();
+
+			// if size isn't known yet, retrieve it from GUI
+			if(!("width" in this.#prop.size && "height" in this.#prop.size))
+			{
+				const size = this.property("size", []);
+				Object.assign(this.#prop.size, size);
+			}
+
+			return {...this.#prop.size};
+		}
+	}
+
+	/**
+	 * Convenience method to set or get the width of component.
+	 *
+	 * @param {number} [width] - New width of the component.
+	 * @return {number|UIComponent} Returns width if no argument is set, otherwise returns `this` component.
+	 * @see UIComponent#size
+	 */
+	width(...args)
+	{
+		const size = this.size();
+
+		if(args.length === 0)
+		{
+			return size.width;
+		}
+		else
+		{
+			return this.size(parseInt(args[0]), size.height);
+		}
+	}
+
+	/**
+	 * Convenience method to set or get the height of component.
+	 *
+	 * @param {number} [height] - New height of the component.
+	 * @return {number|UIComponent} Returns height if no argument is set, otherwise returns `this` component.
+	 * @see UIComponent#size
+	 */
+	height(...args)
+	{
+		if(args.length === 0)
+		{
+			return this.size().height;
+		}
+		else
+		{
+			return this.size(this.size().width, parseInt(args[0]));
+		}
+	}
+
+	/**
+	 * Sets or gets text content of the component. Even though some components don't show text, you can still set text to it.
+	 *
+	 * @param {string} [text=undefined] - Can be plain text or HTML. HTML is only supported in some components (e.g. Label, Button, TextDocument, ...) and should be surrounded with HTML tags. Check example below.
+	 * @param {TextAction} [action=TextAction.Set] - Specific action to perform with text. Replace, append, prepend, or insert. Applies only to some components. Do not use this argument for HTML content.
+	 * @param {number} [insert_position=undefined] - Position where to insert text. Applies only if `action` argument is TextAction.Insert.
+	 * @return {string|this} Returns text value if no argument is set, otherwise returns `this` component.
+	 * @example
+	 * const txt = textfield.text(); // gets text value
+	 * textfield.text("New Text"); // sets new text value
+	 * textfield.text("Appended Text", TextAction.Append); // Appends new text to the end of current text
+	 * textfield.text("Inserted Text", TextAction.Insert); // Inserts at current caret position
+	 * textfield.text("Inserted Text", TextAction.Insert, textfield.caretPosition() - 50); // Inserts at specified position
+	 * textfield.text("New Text", TextAction.ReplaceSelection); // Replaces selected text or inserts at current cursor position if no text is selected (applies only to text editing components, like TextField, TextArea, ...).
+	 */
+	text(...args)
+	{
+		if(args.length > 0)
+		{
+			ui.sendToGUI({
+				control: this.#id,
+				set: "text",
+				value: String(args[0]),
+				data: {
+					action: args.length > 1 ? args[1] : TextAction.Set,
+					index: args.length > 2 && args[1] === TextAction.Insert ? parseInt(args[2]) : undefined
+				}
+			});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.#id, get: "text"});
+		}
+	}
+
+	/**
+	 * @internal
+	 * @ignore
+	 * @private
+	 * @param {string} property
+	 * @param {any} value
+	 * @return {any}
+	 */
+	property(property, ...args)
+	{
+		if(args.length > 0) args = args[0];
+
+		this.verifyComponent();
+
+		if(args.length > 0)
+		{
+			ui.sendToGUI({control: this.#id, set: property, value: args[0]});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.#id, get: property});
+		}
+	}
+
+	/**
+	 * Registers, unregisters, and gets an event handler callback function for a specified events.
+	 *
+	 *  - component.event(name, function, true); // unregisters one callback function (even if the same callback was registered multiple times)
+	 *  - component.event(name, function); // registers callback to be called when the event is emitted
+	 *  - component.event(name); // returns all callback functions for specified event
+	 *
+	 * @param {string} name - Name of event
+	 * @param {function(Object):any|null} [callback=undefined] - Callback function. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to true to unregister the callback function.
+	 * @return {Function[]|this} If only the `name` argument is provided, returns an array of registered callback functions. Otherwise, returns `this` component.
+	 * @internal
+	 * @ignore
+	 * @private
+	 * @example
+	 * const _callbacks_array = button.event("onAction"); // gets an array of previously registered handler functions
+	 * button.event("onAction", _callbacks_array[0], true); // unregisters callback function, same as button.onAction(_callbacks_array[0], true);
+	 * button.event("onAction", e => {console.debug(e);}); // registers new event handler function, same as button.onAction(e => {console.debug(e);});
+	 */
+	event(name, callback = undefined, remove = false)
+	{
+		if(this.callback === undefined) return this; // in case the component is disposed already
+
+		// return callbacks
+		if(callback === undefined) return Array.isArray(this.callback[name]) ? [...this.callback[name]] : [];
+
+		// remove callback
+		if(remove === true || callback === null) // removes one or all callbacks
+		{
+			if(!Array.isArray(this.callback[name])) return this;
+
+			if(callback === null)
+			{
+				this.callback[name].length = 0;
+			}
+			else
+			{
+				const i = this.callback[name].indexOf(callback); // find callback
+				if(i === -1) return this; // return if not found
+				this.callback[name].splice(i, 1); // remove it
+			}
+
+			if(this.callback[name].length === 0)
+			{
+				delete this.callback[name]; // delete array
+				this.property(name, [false]); // notify GUI
+			}
+		}
+		// add callback
+		else
+		{
+			// make sure callback is function
+			if(typeof callback !== "function") throw new Error(`"callback" argument must be of type "function".`);
+
+			if(!Array.isArray(this.callback[name]))
+			{
+				this.callback[name] = []; // create array
+				this.property(name, [true]); // notify GUI
+			}
+
+			this.callback[name].push(callback); // add callback (don't bind to `this` here, it's done when called)
+		}
+
+		return this;
+	}
+
+	/**
+	 * Sets or gets the background color of the component. <br />
+	 * <br />
+	 * Accepts three formats: <br />
+	 * - RGB hex (e.g. `"#FF0000"`) <br />
+	 * - RGBA hex with alpha (e.g. `"#FF000050"`) <br />
+	 * - The string `"transparent"` (equivalent to `"#00000000"`)
+	 *
+	 * @param {string} [value] - Background color in supported formats. Panel and Window components also accept gradient, image position and other info like in CSS. If omitted, returns the current value.
+	 * @param {boolean} [update] - For Panel or Window only. Specifies whether to update specified background attributes instead of replacing all previously set background attributes.
+	 * @returns {this|string} Returns `this` when setting value, or the current background color string when getting.
+	 *
+	 * @example
+	 * component.background("#FF0000");         // Red background
+	 * component.background("#00FF0080");       // Semi-transparent green
+	 * component.background("transparent");     // Fully transparent
+	 *
+	 * // For Panel and Window components the background value can be a string that contains a mixture of background color,
+	 * // image, linear-gradient, radial-gradient, like in CSS in web browsers. Some features may not be supported though.
+	 * panel.background("#FF000055 url(images/bg.png) center no-repeat opacity=0.6 10px 15px linear-gradient(#DDDDDD55, #F8F8F855 10%) / auto);
+	 * panel.background("url(data:image/png;base64,As8fE4fdt1r.....)", true); // supports base64 encoded image string
+	 */
+	background(...args)
+	{
+		if(args.length > 1 && args[1] === true && (this instanceof Panel || this instanceof Window))
+		{
+			args[0] = {
+				value: args[0],
+				update: true
+			};
+		}
+
+		return this.property("background", args);
+	}
+
+	/**
+	 * Sets or gets a foreground color of component (usually text color).
+	 *
+	 * @param {string} value Three formats are acceptable, regular RGB "#FF0000", with alpha RGBA "#FF000050", and "transparent" string, which is equivalent to "#00000000".
+	 * @return {string|this} Returns color value if no argument is set, otherwise returns `this` component.
+	 */
+	color(...args)
+	{
+		return this.property("color", args);
+	}
+
+	/**
+	 * Sets or gets the position of the component relative to its parent component's top-let corner (or to the screen's top-left corner when component is Window).
+	 *
+	 * @param {number|Point} [x_or_position] - X position. Alternatively, provide a single `Point` object parameter to specify the position.
+	 * @param {number} [y] - Y position.
+	 * @param {number} [right] - Resizes the component so that its right edge is this many pixels from the right edge of the parent component or screen.
+	 * @param {number} [bottom] - Resizes the component so that its bottom edge is this many pixels from the bottom edge of the parent component or screen.
+	 * @return {Point|this} If no arguments are provided, returns a {x: number, y: number} position object. Otherwise, returns `this` component.
+	 * @see Point
+	 * @example
+	 * panel.size(50, 100); // sets position
+	 * panel.size({x: 50, y: 100}); // sets position
+	 * panel.size(50, 100, 20); // sets position of left, top and right sides relative to sides of parent component.
+	 * const window = new Window("New Window").size(50, 100, 20, 20); // sets position of each side relative to sides of screen.
+	 */
+	position(...args)
+	{
+		if(args.length > 0)
+		{
+			delete this.#prop.location.right;
+			delete this.#prop.location.bottom;
+			let changed = false;
+
+			try
+			{
+				if(args[0] == null)
+				{
+					this.#prop.location = {}; // reset position to make it load from GUI on next request
+					return this;
+				}
+
+				if(this.parent instanceof Tabs || this.parent instanceof ScrollPane) return this; // ignore position for tabs' or scroll pane's direct children
+
+				const position = (typeof args[0] === "object") ? {x: args[0].x, y: args[0].y} : {
+					x: args[0],
+					y: args[1]
+				};
+
+				if(Number.isFinite(position.x)) position.x = Number.parseInt(position.x);
+				if(Number.isFinite(position.y)) position.y = Number.parseInt(position.y);
+
+				if(isNaN(position.x) || isNaN(position.y)) throw new TypeError(`Invalid arguments for position():\n\n${stringify(args)}`);
+
+				// check if the size changed
+				if(position.x !== this.#prop.location.x || position.y !== this.#prop.location.y)
+				{
+					this.#prop.location = position;
+					this.property("location", [this.#prop.location]); // make sure this position is set before size is changed below
+				}
+
+				if(args.length > 2 && Number.isFinite(args[2])) args[2] = Number.parseInt(args[2]); // fix right
+				if(args.length > 3 && Number.isFinite(args[3])) args[3] = Number.parseInt(args[3]); // fix bottom
+
+				// resize to right edge
+				if(args.length > 2 && !isNaN(args[2]))
+				{
+					const parent = this.parent;
+
+					if(parent != null || this instanceof Window)
+					{
+						// get parent's or screen size
+						const containerSize = (parent != null) ? ((parent instanceof Window || parent instanceof InternalWindow) ? parent.innerSize() : parent.size()) : this.screenSize;
+
+						const w = containerSize.width - this.#prop.location.x - args[2];
+
+						// resize to bottom edge
+						if(args.length > 3 && !isNaN(args[3]))
+						{
+							const h = containerSize.height - this.#prop.location.y - args[3];
+							this.size(w, h);
+						}
+						else
+						{
+							this.width(w);
+						}
+					}
+					else
+					{
+						// save for later to be applied when component gets added to a parent
+						this.#prop.size.right = args[2];
+						if(args.length > 3 && !isNaN(args[3])) this.#prop.size.bottom = args[3];
+					}
+				}
+			}catch(ex)
+			{
+				throw new TypeError(ex.message + ".\n\nArguments must be one of following:\n    position(number x, number y)\n    position(number x, number y, number right, number bottom)\n    position(number x, number y, number right)\n    position({x: number, y: number})\n");
+			}
+
+			return this;
+		}
+		else
+		{
+			this.verifyComponent();
+
+			// if location isn't known, retrieve it from GUI
+			if(!("x" in this.#prop.location || "y" in this.#prop.location))
+			{
+				({x: this.#prop.location.x, y: this.#prop.location.y} = this.property("location", []));
+			}
+
+			return {...this.#prop.location};
+		}
+	}
+
+	/**
+	 * Convenience method to set or get left position of component.
+	 *
+	 * @param {number} [value]
+	 * @return {number} Returns left position if no argument is set, otherwise returns `this` component.
+	 * @see UIComponent#position
+	 */
+	x(...args)
+	{
+		if(args.length > 0)
+		{
+			if(Number.isFinite(args[0])) args[0] = Number.parseInt(args[0]);
+			if(this.parent instanceof Tabs) return this; // can't set position for tabs direct children
+			if(isNaN(args[0])) throw new TypeError(`Invalid argument type for x(). Argument is '${args[0]}' of type '${typeof args[0]}'. Must be a number.`);
+
+			delete this.#prop.location.right; // in case it was set
+			if(this.#prop.location.x !== args[0]) // check if changed
+			{
+				this.#prop.location.x = args[0];
+				return this.property("location", [this.#prop.location]);
+			}
+			return this;
+		}
+		else
+		{
+			this.verifyComponent();
+			return this.#prop.location.x;
+		}
+	}
+
+	/**
+	 * Convenience method to set or get top position of component.
+	 *
+	 * @param {number} [value]
+	 * @return {number} Returns top position if no argument is set, otherwise returns `this` component.
+	 * @see UIComponent#position
+	 */
+	y(...args)
+	{
+		if(args.length > 0)
+		{
+			if(Number.isFinite(args[0])) args[0] = Number.parseInt(args[0]);
+			if(this.parent instanceof Tabs) return this; // can't set position for tabs direct children
+			if(isNaN(args[0])) throw new TypeError(`Invalid argument type for y(). Argument is '${args[0]}' of type '${typeof args[0]}'. Must be a number.`);
+
+			delete this.#prop.location.bottom; // in case it was set
+			args[0] = parseInt(args[0]);
+			if(this.#prop.location.y !== args[0]) // check if changed
+			{
+				this.#prop.location.y = args[0];
+				return this.property("location", [this.#prop.location]);
+			}
+			return this;
+		}
+		else
+		{
+			this.verifyComponent();
+			return this.#prop.location.y;
+		}
+	}
+
+	/**
+	 * Convenience method to get or set the distance between the right edge of this component and the right edge of its parent.
+	 *
+	 * @param {number} [value] - Distance from the parent's right edge.
+	 * @param {boolean} [reize] - `True` to resize the width to accommodate for specified `right` position instead of moving the object. `false` to move the component.
+	 * @return {number|this} Returns the current right distance if no argument is provided; otherwise, returns `this` component.
+	 */
+	right(...args)
+	{
+		const parent = this.parent;
+
+		if(args.length > 0)
+		{
+			if(Number.isFinite(args[0])) args[0] = Number.parseInt(args[0]);
+
+			if(isNaN(args[0])) throw new Error(`Invalid argument for right() method. Argument is '${args[0]}' of type '${typeof args[0]}'. Must be a number.`);
+
+			if(parent !== null)
+			{
+				if(parent instanceof Window || parent instanceof InternalWindow)
+				{
+					if(args[1] === true)
+					{
+						this.width(Math.max(0, this.parent.innerSize().width - this.x() - args[0]));
+					}
+					else
+					{
+						this.x(this.parent.innerSize().width - this.width() - args[0]);
+					}
+				}
+				else
+				{
+					if(args[1] === true)
+					{
+						this.width(Math.max(0, this.parent.width() - this.x() - args[0]));
+					}
+					else
+					{
+						this.x(this.parent.width() - this.width() - args[0]);
+					}
+				}
+			}
+			else
+			{
+				if(args[1] !== true) this.#prop.location.right = args[0]; // set to be applied when added to component
+			}
+			return this;
+		}
+		else
+		{
+			if(parent === null) return NaN;
+
+			if(parent instanceof Window || parent instanceof InternalWindow)
+			{
+				return this.parent.innerSize().width - (this.x() + this.width()); // calculate
+			}
+			else
+			{
+				return this.parent.width() - (this.x() + this.width()); // calculate
+			}
+		}
+	}
+
+	/**
+	 * Convenience method to get or set the distance between the bottom edge of this component and the bottom edge of its parent.
+	 *
+	 * @param {number} [value] - Distance from the parent's bottom edge to this component's bottom edge.
+	 * @param {boolean} [reize] - `True` to resize the height to accommodate for specified `bottom` position instead of moving the object. `false` to move the component.
+	 * @return {number|this} Returns the current bottom distance if no argument is provided; otherwise, returns `this` component.
+	 */
+	bottom(...args)
+	{
+		if(args.length > 0)
+		{
+			if(Number.isFinite(args[0])) args[0] = Number.parseInt(args[0]);
+
+			if(isNaN(args[0])) throw new Error(`Invalid argument for bottom() function. Argument is '${args[0]}' of type '${typeof args[0]}'. Must be a number.`);
+
+			if(this.parent !== null)
+			{
+				if(this.parent instanceof Window || this.parent instanceof InternalWindow)
+				{
+					if(args[1] === true)
+					{
+						this.height(Math.max(0, this.parent.innerSize().height - this.y() - args[0]));
+					}
+					else
+					{
+						this.y(this.parent.innerSize().height - this.height() - args[0]);
+					}
+				}
+				else
+				{
+					if(args[1] === true)
+					{
+						this.height(Math.max(0, this.parent.height() - this.y() - args[0]));
+					}
+					else
+					{
+						this.y(this.parent.height() - this.height() - args[0]);
+					}
+				}
+			}
+			else
+			{
+				if(args[1] !== true) this.#prop.location.bottom = args[0]; // set to be applied when added to component
+			}
+			return this;
+		}
+		else
+		{
+			if(this.parent === null) return NaN;
+
+			if(this.parent instanceof Window || this.parent instanceof InternalWindow)
+			{
+				return this.parent.innerSize().height - (this.y() + this.height()); // calculate
+			}
+			else
+			{
+				return this.parent.height() - (this.y() + this.height()); // calculate
+			}
+		}
+	}
+
+	/**
+	 * Moves the component by adding the specified x and y values to its current position.
+	 * The function shifts the element's position relative to current position.
+	 *
+	 * @param {number} [dx=0] - Delta x (can be positive or negative number)
+	 * @param {number} [dy=0] - Delta y (can be positive or negative number)
+	 * @return {this} Returns `this` component.
+	 */
+	move(dx = 0, dy = 0)
+	{
+		if(Number.isFinite(dx)) dx = Number.parseInt(dx);
+		if(Number.isFinite(dy)) dy = Number.parseInt(dy);
+
+		if((!isNaN(dx) && !isNaN(dy)) && !(dx === 0 && dy === 0))
+		{
+			const _args = [];
+			const p = this.#prop.location;
+			_args.push(p.x + dx);
+			_args.push(p.y + dy);
+
+			// update possible `right` and `bottom` in location
+			if("right" in p) _args.push(p.right - dx);
+			if("bottom" in p) _args.push(p.bottom - dy);
+
+			return this.position.apply(this, _args);
+		}
+
+		return this;
+	}
+
+	/**
+	 * When called without arguments and repainting is not disabled, it flushes message queue, revalidates and repaints the component.
+	 * When the first argument is `true`, it enables repainting (enabled by default) and flushes the message queue.
+	 * When the first argument is `false`, it disables repainting.
+	 *
+	 * @param {boolean} repaint_enabled - `false` to pause repainting this element. `true` to resume repainting
+	 * @return {this} Returns `this` component.
+	 */
+	update(...args)
+	{
+		if(args.length === 0)
+		{
+			if(this.#prop.update !== false)
+			{
+				ui.sendToGUI({control: this.#id, set: "update", value: true});
+				ui.sendMessageQueue();
+			}
+		}
+		else if((args[0] === true) !== (this.#prop.update !== false))
+		{
+			this.#prop.update = (args[0] === true);
+			ui.sendToGUI({control: this.#id, set: "update", value: this.#prop.update});
+			ui.sendMessageQueue();
+		}
+
+		return this;
+	}
+
+	/**
+	 * Sets or gets context menu component for this UI component.
+	 *
+	 * @param {ContextMenu} [menu] - ContextMenu component to be assigned to this component. Set to `null` to remove ContextMenu.
+	 * @return {ContextMenu|null|this} Returns the current context menu if no argument is provided; otherwise, returns `this` component.
+	 */
+	contextMenu(...args)
+	{
+		if(args.length === 0) return this.#context_menu;
+
+		let menu = args[0];
+
+		if(menu === null) // remove context menu
+		{
+			if(this.#context_menu != null && typeof this.#context_menu === "object" && this.#context_menu instanceof globalThis.ContextMenu && this.#context_menu.destroyed !== true)
+			{
+				let i = this.#context_menu._parents.indexOf(this);
+
+				if(i > -1)
+				{
+					this.#context_menu._parents.splice(i, 1);
+					ui.sendToGUI({control: this.#context_menu.id, set: "removeFrom", value: this.#id});
+				}
+			}
+
+			this.#context_menu = null;
+		}
+		else // add context menu
+		{
+			if(this === menu || typeof menu !== "object" || !(menu instanceof globalThis.ContextMenu)) // can't use !(menu instanceof ContextMenu) because ContextMenu imports this class, thus would create circular import.
+			{
+				throw new Error(ui._msg[10]);
+				return this;
+			}
+
+			if(this.#context_menu != null) this.contextMenu(null); // remove existing menu before setting a new one
+
+			this.#context_menu = menu;
+			menu._parents.push(this);
+
+			const resp = ui.sendToGUI({control: menu.id, get: "parent", data: {parent: this.#id}});
+		}
+
+		return this;
+	}
+
+	/**
+	 * Sets or gets component `focusable` property whether component can retain focus.
+	 *
+	 * @param {boolean} [value]
+	 * @return {boolean|this} If called with an argument, then `this` component instance is returned, otherwise `boolean` value is returned.
+	 */
+	focusable(...args)
+	{
+		return this.property("focusable", args);
+	}
+
+	/**
+	 * If value is passed, it makes component to get or loose focus, otherwise returns `boolean` indicating if it has focus or not.
+	 *
+	 * @param {boolean} [value] - `true` to get focus, `false` to attempt to shift focus to next component (if it has focus), usually by switching focus to next component.
+	 * @returns {boolean|this} If called with an argument, then `this` component instance is returned, otherwise `boolean` value is returned.
+	 */
+	focused(...args)
+	{
+		return this.property("focused", args);
+	}
+
+	/**
+	 * Sets or gets an index (z-order) of this component if it is added to a container, otherwise returns null.
+	 * Larger value brings component forward, smaller to the back, like z-index in CSS.
+	 *
+	 * @param {number} [index]
+	 * @returns {this|null|number} If called with an argument, then `this` component instance is returned, if component has no parent then `null` is returned, otherwise index is returned.
+	 */
+	index(...args)
+	{
+		if(this.parent == null) return args.length === 0 ? null : this; // if no parent
+
+		return this.parent.childIndex(this, ...args);
+	}
+
+	/**
+	 * Sets or gets a layer at which this component resides in Panel container. This is separate from z-index.
+	 * This applies only to components that are added to Panel or Window components.
+	 * For example components in layer 2 are always on top of components in layer 1, regardless on their z-index.
+	 * Larger value brings component forward, smaller to the back, like width z-index.
+	 *
+	 * @param {number} layer_index
+	 * @returns {number|this} If called with an argument, then `this` component instance is returned, otherwise `number` value is returned.
+	 */
+	layer(...args)
+	{
+		if(args.length > 0) args[0] = Math.max(0, parseInt(args[0]));
+		return this.property("layer", args);
+	}
+
+	/**
+	 * Gets or sets the font used for the component's text. See the example for font object format.
+	 *
+	 * @param {Font} [font] - Font formatted object.
+	 * @param {boolean} [update] - If `true`, only the specified font properties will be updated instead of replacing the entire font.
+	 * @return {this|Font}
+	 * @see Font
+	 * @example <h2>Full list of supported font properties:</h2>
+	 * Font {
+	 *     name: string,           // Font name or family name from {@link FontFamily} enum (e.g., "sans-serif")
+	 *     size: number,           // Font size in pixels
+	 *     bold: boolean,          // Whether the text is bold
+	 *     italic: boolean,        // Whether the text is italic
+	 *     underlined: boolean,    // Whether the text is underlined
+	 *     strikethrough: boolean, // Whether the text has a strikethrough
+	 *     direction: string,      // Text direction: "ltr" or "rtl"
+	 *     kerning: boolean,       // Enable or disable kerning
+	 *     ligatures: boolean,     // Enable or disable font ligatures
+	 *     tracking: number        // Letter spacing adjustment: -1, 0 (default), or 1
+	 * };
+	 * @example <h2>Usage examples:</h2>
+	 * // Sets new font
+	 * textarea.font({name: "sans-serif", size: 14, italic: true});
+	 *
+	 * // Set a new font; previously set italic style will be removed
+	 * textarea.font({name: "sans-serif", size: 14});
+	 *
+	 * // Update only the font size, preserving other properties
+	 * textarea.font({size: 20}, true);
+	 *
+	 * // get component's font
+	 * const font = textarea.font();
+	 * @see Font
+	 * @see FontFamily
+	 */
+	font(...args)
+	{
+		if(args.length > 0)
+		{
+			if(typeof args[0] !== "object") throw new Error("Font argument must be an Object");
+			const msg = {control: this.id, set: "font", value: args[0]};
+			if(args[1] === true) msg.update = true;
+			ui.sendToGUI(msg);
+			return this;
+		}
+		else
+		{
+			return this.property("font", []);
+		}
+	}
+
+	/**
+	 * Sets or gets an icon image of this component. You can set icon to any component even though not all components display the icon.
+	 * When a component is added to Tabs, that component's icon is used as a Tab icon by default.
+	 * Following image types are supported: ICO, PNG, JPG, JPEG, GIF, BMP, WBMP, TIFF/TIF, and base64 encoded images of such types.
+	 * If FFMPEG with support of these image types is installed, the following image types are also supported from local relative or absolute paths: WEBP, HEIC, HEIF, AVIF.
+	 *
+	 * @param {string|null} image_path - Relative or absolute path to image file, base64 encoded image string, or NULL to remove existing icon.
+	 * @returns {this|string|null} Returns `this` component if no arguments are set, a string of a previously set icon, or `null` if icon hasn't been set.
+	 */
+	icon(...args)
+	{
+		return this.property("icon", args);
+	}
+
+	/**
+	 * Sets an cursor to the control. Passing NULL value removes custom cursor.
+	 *
+	 * @param {number|null|string} cursor - A value from Cursor enum, or a relative path to image file for custom cursor icon.
+	 * @param {number} x - Used with custom image cursor to set pointer point on the image.
+	 * @param {number} y - Used with custom image cursor to set pointer point on the image.
+	 * @returns {this} Returns `this` component.
+	 */
+	cursor(cursor, ...point)
+	{
+		const msg = {control: this.#id, set: "cursor", value: cursor};
+
+		if(point.length > 1)
+		{
+			msg.x = parseInt(point[0]);
+			msg.y = parseInt(point[1]);
+		}
+
+		ui.sendToGUI(msg);
+		return this;
+	}
+
+	/**
+	 * Sets or gets the drag action for this component (e.g., `Copy`, `Move`), and enables or disables dragging accordingly.
+	 * Passing `None` disables dragging; all other values enable it.
+	 *
+	 * @param {DragDropAction} [action] - One of enum values: DragDropAction.[None|Copy|Move|CopyOrMove|Link]. `None` is default.
+	 * @returns {string|this} Returns `this` component if argument is provided, otherwise returns `string` value as one of the DragDropAction enum values.
+	 */
+	dragAction(...args)
+	{
+		if(args.length > 0)
+		{
+			if(!DragDropAction.hasOwnProperty(args[0])) return this; // validate argument
+			this.#prop.dragAction = args[0];
+		}
+		return this.property("dragAction", args);
+	}
+
+	/**
+	 * Sets or gets which type of drop action is accepted by the component (e.g., `Copy`, `Move`). Setting any action other
+	 * than `None` enables dropping on the component. Action `None` disables dropping.
+	 *
+	 * @param {DragDropAction} [action] - One of enum values: DragDropAction.[None|Copy|Move|CopyOrMove|Link]. `None` is default.
+	 * @returns {string|this} Returns `this` component if argument is provided, otherwise returns `string` value as one of the DragDropAction enum values.
+	 */
+	dropAction(...args)
+	{
+		if(args.length > 0)
+		{
+			if(!DragDropAction.hasOwnProperty(args[0])) return this; // validate argument
+			this.#prop.dropAction = args[0];
+		}
+		return this.property("dropAction", args);
+	}
+
+	/**
+	 * Sets or gets the types of data that should be transffered during drag operation. The data itself can be set using dragData(...) method.
+	 * More than one type can be specified by setting multiple arguments or passing an array of values.
+	 *
+	 * @param {...DataType|DataType[]} data_type - DataType.[None|Text|Image|...]
+	 * @returns {string[]|this}
+	 * @example
+	 * // Usage examples:
+	 * label.dragDataType(DataType.Text, DataType.HTML); // setting by multiple arguments
+	 * label.dragDataType([DataType.Text, DataType.HTML]); // setting by an array of values
+	 * const _types = label.dragDataType(); // getting an array of data types
+	 */
+	dragDataType(...args)
+	{
+		if(Array.isArray(args[0])) args = args[0];
+		let _args = [];
+		for(let v of args) if(DataType.hasOwnProperty(v) && _args.indexOf(v) === -1) _args.push(v); // validate argument and remove duplicates
+
+		return this.property("dragDataType", _args.length > 0 ? [_args] : []);
+	}
+
+	/**
+	 * Sets custom data that should be passed when dragging this component instead of passing component's data, such as text or icon.
+	 * Without setting this data a default component data will be dragged, such as text, list item, icon, what what ever applies to this component.
+	 *
+	 * @arg {string|string[]} data - String data or array of strings. For a list of files or URLs use array or separate them by new line character \n.
+	 * @return {this} Returns `this` component.
+	 */
+	dragData(...args)
+	{
+		if(args.length === 0) return this.property("dragDataType", []);
+
+		if(Array.isArray(args[0])) args = args[0];
+		let _args = [];
+		for(let v of args)
+		{
+			if(!(typeof v === "string")) continue;
+			if((DataType.hasOwnProperty(v) || v.startsWith("component/")) && _args.indexOf(v) === -1) _args.push(v);// validate argument and remove duplicates
+		}
+
+		return this.property("dragDataType", [_args]);
+	}
+
+	/**
+	 * Sets acceptable data types that may be dropped on this component during drag and drop operation.
+	 *
+	 * @param {...DataType|DataType[]} data_type - DataType.[None|All|Text|Image|...]. Use `All` to accept all data types.
+	 * @return {string[]|this} Returns `this` component is argument is provided, otherwise returns `string[]` value.
+	 * @example
+	 * // Usage examples:
+	 * label.dropDataType(DataType.All); // Setting to accept all data types
+	 * label.dropDataType(.DataType.Text, DataType.HTML); // setting by multiple arguments
+	 * label.dropDataType([DataType.Text, DataType.HTML]); // setting by an array of values
+	 * const _types = label.dropDataType(); // getting an array of data types
+	 */
+	dropDataType(...args)
+	{
+		if(args.length === 0) return this.property("dropDataType", []);
+
+		if(Array.isArray(args[0])) args = args[0];
+		let _args = [];
+		for(let v of args)
+		{
+			if(!(typeof v === "string")) continue;
+			if((DataType.hasOwnProperty(v) || v.startsWith("component/")) && _args.indexOf(v) === -1) _args.push(v);// validate argument and remove duplicates
+		}
+
+		return this.property("dropDataType", [_args]);
+	}
+
+	/**
+	 * Sets a drop mode for components: Table, List, Tree.
+	 *
+	 * @param {DropMode} [mode] - Enum value: DropMode.[On|Insert|OnOrInsert]. On - allows data to be dropped on list items. Insert - allows to drop data between list items.
+	 * @returns {DropMode|this} Returns `this` component if an argument is provided; otherwise, returns the current drop mode as one of the DropMode enum values.
+	 * @see DropMode
+	 */
+	dropMode(...args)
+	{
+		if(args.length > 0) args[0] = String(args[0]);
+		return this.property("dropMode", args);
+	}
+
+	/**
+	 * Sets, updates, or gets component border object. Border object should contain only properties that you want to set or update.
+	 *
+	 * @param {Border} [border] - Border object.
+	 * @param {boolean} [update] - Set to `true` to only change specified border properties instead of replacing existing border.
+	 * @return {this|Border|null} - If called without arguments a `Border` object is returned or `null` if the component's border wasn't set. Otherwise and instance of the component is returned.
+	 * @see UIComponent#border
+	 */
+	border(...args)
+	{
+		if(args.length > 0)
+		{
+			if(typeof args[0] !== "object") throw new Error("Border argument must be an Object");
+			const msg = {control: this.id, set: "border", value: args[0]};
+			if(args[1] === true) msg.update = true;
+			ui.sendToGUI(msg);
+			return this;
+		}
+		else
+		{
+			return this.property("border", []);
+		}
+	}
+
+	/**
+	 * Sets or gets an alignment of icon relative to text of a Label, Button, or items of a List.
+	 *
+	 * @param {string} [alignment] - A combination of one or more words: "top right bottom left center leading trailing"
+	 * @return {this|string} Returns `this` component if an argument is provided, otherwise returns `string` value.
+	 */
+	iconAlignment(...args)
+	{
+		return this.property("iconAlignment", args);
+	}
+
+	/**
+	 * Sets or gets an alignment of the component's content relative to the component, such as Label, Button, CheckBox, RadioBox, or items of a List.
+	 *
+	 * @param {string} [alignment] - A combination of one or more words: "top bottom right left center leading trailing"
+	 * @return {this|string} Returns `this` component if an argument is provided, otherwise returns `string` value.
+	 */
+	alignment()
+	{
+		return this.property("alignment", arguments);
+	}
+
+	/**
+	 * Sets or get a gap in pixel between icon and text of a List item, Button, Label, ComboBox, CheckBox, and RadioBox.
+	 *
+	 * @param {number} [gap] - The gap in pixels (must be an integer ≥ 0). If omitted, returns the current gap.
+	 * @return {this|number} Returns `number` if argument is omitted, otherwise returns `this` component instance.
+	 */
+	iconTextGap(...args)
+	{
+		return this.property("iconTextGap", args);
+	}
+
+	/**
+	 * Captures an image of the component and all subcomponents. Returns the image as a base 64 encoded string in format "data:image/FORMAT;base64,As8fE4fdt1r.....".
+	 *
+	 * @param {string} [format="png"] - Image format: `png`, `jpg`, `jpeg`, `bmp`, `gif`.
+	 * @param {Object} [crop] - Object that holds position and size of the cropped area. Format: {x: number, y: number, width: number, height: number}.
+	 * @return {string} Returns base 64 encoded string representation of the image. To get its binary data you must extract the base 64 string, then decode it from base 64 to bytes.
+	 */
+	snapshot(format = "png", crop = null)
+	{
+		return ui.sendToGUI({control: this.#id, get: "snapshot", data: {format: format.toUpperCase(), crop: crop}});
+	}
+
+	/**
+	 * Sets or gets the anchor style of the component that indicates how to resize this component based on the resizing parent component.
+	 * Anchor defines which sides (top, right, bottom, left) of the component stay attached to the parent's edge when parent gets resized.
+	 * Set anchors after the component and its ancestors are added to a container to ensure expected behaviour.
+	 *
+	 * @param {string} [anchors] - Space-separated list of sides to anchor (e.g., `"top left"`). If omitted, returns the current anchor value.
+	 * @returns {this|string} Returns `this` component when setting, or the current anchor `string` when getting value.
+	 * @example
+	 * const txt1 = new TextArea().anchor("top left right"); // Horizontally resizable
+	 * const txt2 = new TextArea().anchor("top left bottom"); // Vertically resizable
+	 */
+	anchor(...args)
+	{
+		if(args.length > 0 && typeof args[0] !== "string") return this; // enforce string
+		return this.property("anchor", args);
+	}
+
+	/**
+	 * Sets or gets tooltip text for the component. It's the text that pops up when cursor hovers the component.
+	 *
+	 * @param {string} text - Can be plain text or HTML. HTML string should be surrounded with HTML tags. See example.
+	 * @return {string|this} Returns `this` component if argument is set, otherwise returns `string` value.
+	 * @example
+	 * button.tooltip("<html>This is line 1<br />This is line 2</html>"); // Setting HTML string with 2 lines of text
+	 */
+	tooltip(...args)
+	{
+		return this.property("tooltip", args);
+	}
+
+	/**
+	 * Indicates the minimum size the component can be resized to.
+	 *
+	 * @param {number|Size} width_or_size - Minimum width, or a Size formatted object as a sole parameter.
+	 * @param {number} height - Minimum height of the component.
+	 * @returns {Size|this|null} If called without parameters, current minimum Size is returned or `null` if it wasn't previously set; otherwise returns `this` component instance for chaining.
+	 * @see Size
+	 */
+	minSize(...args)
+	{
+		if(args.length > 1) // convert (width, height) params to object
+		{
+			args = [{width: parseInt(args[0]), height: parseInt(args[1])}];
+		}
+		else if(args.length === 1 && typeof args[0] !== "object") // if only 1 arg and it's not an object, then ignore
+		{
+			return this;
+		}
+
+		return this.property("minSize", args);
+	}
+
+	/**
+	 * Indicates the maximum size the component can be resized to.
+	 *
+	 * @param {number|Size} width_or_size - Maximum width, or a Size formatted object as a sole parameter.
+	 * @param {number} height - Maximum height of the component.
+	 * @returns {Size|this|null} If called without parameters, current maximum Size is returned or `null` if it wasn't previously set; otherwise returns `this` component instance for chaining.
+	 * @see Size
+	 */
+	maxSize(...args)
+	{
+		if(args.length > 1) // convert (width, height) params to object
+		{
+			args = [{width: parseInt(args[0]), height: parseInt(args[1])}];
+		}
+		else if(args.length > 0 && typeof args[0] !== "object") // if only 1 arg and it's not an object, then ignore
+		{
+			return this;
+		}
+
+		return this.property("maxSize", args);
+	}
+
+	/**
+	 * Positions the component in the center of it's parent component, owner Window (if Window has an owner Window), or screen (Window only).
+	 * Applies only to components that have position() property (not like menu, menu item, tray icon, etc.)
+	 *
+	 * @arg {Object} [component] - If provided, `this` component will be positioned in the center of the provided component.
+	 * @return {this} Returns `this` component.
+	 */
+	center(component = null)
+	{
+		let parentSize = null;
+		let offset = {x: 0, y: 0};
+
+		if(component !== null) // if relative component was specified
+		{
+			if(!(component instanceof UIComponent)) throw new Error(`"component" argument must be of type derived from UIComponent that have size and position properties.`);
+			if(this === component) throw new Error(`"component" should not be same object as you are trying to center.`);
+
+			parentSize = component.size();
+			if(component !== this.parent) offset = component.position();
+		}
+		else if(this.parent !== null) // this has parent, then center to it
+		{
+			parentSize = (this.parent instanceof Window || this.parent instanceof InternalWindow) ? this.parent.innerSize() : this.parent.size();
+		}
+		else if(this instanceof Window) // if this is a Window
+		{
+			if(this.owner !== null) // if this Window has owner, then center to it
+			{
+				parentSize = this.owner.size();
+				offset = this.owner.position();
+			}
+			else
+			{
+				parentSize = this.screenSize; // center to screen
+			}
+		}
+
+		if(parentSize !== null) this.position(offset.x + ((parentSize.width - this.width()) / 2), offset.y + ((parentSize.height - this.height()) / 2));
+
+		return this;
+	}
+
+	/**
+	 * Enables/disables onKey() events to be emitted for focus traversal key (usually Tab key). By default onKey() event doesn't emit for such keys.
+	 *
+	 * @param {boolean} [enable] - `true` - enabled. `false` - disabled.
+	 * @return {this|boolean} Returns `this` component if argumen is provided, otherwise returns `boolean` value.
+	 */
+	emitFocusKeyEvents(...args)
+	{
+		if(args.length > 0) args[0] = (args[0] === true);
+		return this.property("emitFocusKeyEvents", args);
+	}
+
+	/**
+	 * Finds and returns first ancestor component of specified class. e.g. panel.getAncestor(Window) will return Window component that panel is in, or null if panel doesn't have a parent or ancestor with specified class.
+	 *
+	 * @param {Function} ancestor_class - UI Component class that comes with `swing-ui` module.
+	 * @return {Object|null}
+	 */
+	getAncestor(ancestor_class)
+	{
+		if(this.parent == null) return null;
+		if(this.parent instanceof ancestor_class) return this.parent;
+		return this.parent.getAncestor(ancestor_class);
+	}
+
+	/**
+	 * Emits a specified event with a custom event object for this component. This event will be sent to all event handlers registered with the specified event name.
+	 *
+	 * @param {string} event_name - Name of the event is same as name of an event handler registering function, such as `onAction` or `onChange`.
+	 * @param {object} event - Custom event object
+	 * @returns {this} Returns an instance of this component.
+	 * @example
+	 * button.emit("onAction", {type: "action", command: "Click Me"}); // emits a custom event without user clicking on the button
+	 */
+	emit(event_name, event = {type: "custom"})
+	{
+		this.verifyComponent();
+		if(!Array.isArray(this.callback[event_name])) return this;
+		if(typeof event !== "object") throw new Error(`"properties" argument must be an object.`);
+
+		event.event = event_name;
+		event.target = this;
+
+		for(const callback of this.callback[event_name])
+		{
+			try
+			{
+				callback.call(this, event);
+			}catch(ex)
+			{
+				error(`${ui._msg[6]}${this.constructor.name}: ${event} \n\n${ex.stack}\n\nEvent ${stringify(event)}`, false);
+			}
+		}
+
+		return this;
+	}
+
+	/**
+	 * Gets or sets the minimum size of the icon's largest side (in pixels).
+	 * If the icon's largest side is smaller than the specified minimum, it will be scaled up proportionally.
+	 * Applies to Button, Label, List, and ComboBox.
+	 *
+	 * @param {number|null} [min_size] - Sets the minimum size of a larger side of icon, or resets to no minimum when `null` is passed.
+	 * @return {number|null|Object} If called without arguments, returns `number` value, otherwise returns `this` component instance.
+	 */
+	minIconSize()
+	{
+		return this.property("minIconSize", arguments);
+	}
+
+	/**
+	 * Gets or sets the maximum size of the icon's largest side (in pixels).
+	 * If the icon's largest side is larger than the specified maximum, it will be scaled down proportionally.
+	 * Applies to Button, Label, List, and ComboBox.
+	 *
+	 * @param {number|null} [max_size] - Sets the maximum size of a larger side of icon, or resets to no maximum when `null` is passed.
+	 * @return {number|null|Object} If called without arguments, returns `number` value, otherwise returns `this` component instance.
+	 */
+	maxIconSize()
+	{
+		return this.property("maxIconSize", arguments);
+	}
+
+	/**
+	 * Sets or gets an array of keyboard shortcuts handled by {@link UIComponent#onShortcut|onShortcut()} event handler.
+	 *
+	 * @param {object[]|string[]} [shortcuts] - An array of shortcut objects {shortcut:{string}, scope: {ShortcutScope}}, or an Array of String shortcuts (for strings a default {@link ShortcutScope} will be assigned).
+	 * @returns {this|object[]} If called without arguments, then current shortcuts array is returned, otherwise an instance of `this` component is returned.
+	 * @see ShortcutScope
+	 * @example <h2>Setting shortcuts as strings</h2>
+	 * window.shortcuts(["f1", "ctrl+s"]);
+	 * @example <h2>Setting shortcuts as objects</h2>
+	 * window.shortcuts([
+	 *     {
+	 *         key: "control+s",
+	 *         scope: ShortcutScope.Window, // optional
+	 *         action: "save_file" // optional
+	 *     }
+	 * ]);
+	 * @example <h2>Clearing all shortcuts</h2>
+	 * window.shortcuts([]); // pass an empty array
+	 * @example <h2>Retrieving current shortcuts</h2>
+	 * const shortcuts = window.shortcuts(); // returns an Array of objects with `key` and `scope` properties.
+	 */
+	shortcuts()
+	{
+		if(arguments.length > 0)
+		{
+			if(!Array.isArray(arguments[0])) throw new TypeError(`First argument to shortcuts() method must be an array, not '${typeof arguments[0]}'`);
+
+			for(let i = 0; i < arguments[0].length; i++)
+			{
+				if(typeof arguments[0][i] === "string")
+				{
+					arguments[0][i] = {key: arguments[0][i]};
+				}
+				else if(typeof arguments[0][i] !== "object" || typeof arguments[0][i].key !== "string")
+				{
+					arguments[0].splice(i--, 1); // remove invalid type
+					continue;
+				}
+
+				if(typeof arguments[0][i].scope !== "string")
+				{
+					arguments[0][i].scope = this instanceof Window ? ShortcutScope.Window : (this instanceof ComponentContainer ? ShortcutScope.Ancestor : ShortcutScope.Focused) // set default scope
+				}
+
+				if(typeof arguments[0][i].action !== "string") arguments[0][i].action = arguments[0][i].key; // default action is the key value
+			}
+		}
+
+		return this.property("shortcuts", arguments);
+	}
+
+	//endregion
+
+	//region Event Handlers
+
+	/**
+	 * Overrides current error handler.
+	 *
+	 * @param {function(ErrorEvent): any} [callback=undefined] - The event handler function receiving an {@link ErrorEvent} object. Pass `null` to unregister all handler functions.
+	 * @return {this}
+	 * @see ErrorEvent
+	 */
+	onError(callback)
+	{
+		if(typeof callback === "function") this.callback.onError = [callback];
+		return this;
+	}
+
+	/**
+	 * Registers or unregisters a handler function for an event when the component gets disposed, either by calling destroy() method or loosing all references to the component.
+	 *
+	 * @param {function(DisposeEvent): any} [callback=undefined] - The event handler function receiving {@link DisposeEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to remove this event handler
+	 * @return {this}
+	 * @see DisposeEvent
+	 */
+	onDispose(callback, remove = false)
+	{
+		const name = "onDispose";
+
+		// return callbacks
+		if(callback === null)
+		{
+			return Array.isArray(this.callback[name]) ?? [];
+		}
+		// remove callback
+		else if(remove === true)
+		{
+			if(Array.isArray(this.callback[name]))
+			{
+				const i = this.callback[name].indexOf(callback); // find callback
+				if(i > -1) this.callback[name].splice(i, 1); // remove it
+				if(this.callback[name].length === 0) delete this.callback[name]; // delete array
+			}
+		}
+		// add callback
+		else if(typeof callback === "function")
+		{
+			if(!Array.isArray(this.callback[name])) this.callback[name] = []; // create array
+			this.callback[name].push(callback); // add callback (don't bind to this here, do it at call)
+		}
+
+		return this;
+	}
+
+	/**
+	 * Gets, registers or unregisters a handler function for component's primary action event.
+	 *
+	 * @param {function(ActionEvent): any} [callback=undefined] - The event handler function that receives a {@link ActionEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see ActionEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,        // The component that triggered the event.
+	 *   command: string,       // Button text or a specified command using .command("") method
+	 *   modifiers: number,     // Keyboard modifiers (bitmask or flags).
+	 *   alt: boolean,          // Indicates if ALT key was pressed.
+	 *   shift: boolean,        // Indicates if SHIFT key was pressed.
+	 *   ctrl: boolean,         // Indicates if CTRL key was pressed.
+	 *   type: string,          // `action` or `index_change`. Present when applicable.
+	 *   x: number,             // Mouse x position relative to component
+	 *   y: number,             // Mouse y position relative to component
+	 *   screenX: number,       // Mouse x position relative to default screen
+	 *   screenY: number,       // Mouse y position relative to default screen
+	 *   interactive: boolean,  // Indicates if the action was triggered by user's interaction (not programmatically). Present when applicable.
+	 *   selected: false        // Present when applicable.
+	 * };
+	 */
+	onAction(...args)
+	{
+		if(args.length === 0) return this.event("onAction");
+		return this.event("onAction", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a mouse buttons event handler function.
+	 *
+	 * @param {function(MouseEvent): any} [callback=undefined] - The event handler function that receives a {@link MouseEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see MouseEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,    // The component that triggered the event.
+	 *   type: string,      // `click`, `down`, `up`, `enter`, or `leave`.
+	 *   button: number,    // Button number. One of MouseButton enum values.
+	 *   clicks: number,    // Amount of time the click happened. Present when applicable.
+	 *   modifiers: number, // Keyboard modifiers (bitmask or flags).
+	 *   alt: boolean,      // Indicates if ALT key was pressed.
+	 *   shift: boolean,    // Indicates if SHIFT key was pressed.
+	 *   ctrl: boolean,     // Indicates if CTRL key was pressed.
+	 *   x: number,         // Present when applicable.
+	 *   y: number,         // Present when applicable.
+	 *   screenX: number,   // Present when applicable.
+	 *   screenY: number,   // Present when applicable.
+	 * };
+	 */
+	onMouseEvents(...args)
+	{
+		if(args.length === 0) return this.event("onMouseEvents");
+		return this.event("onMouseEvents", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a mouse motion event handler function.
+	 *
+	 * @param {function(MouseMotionEvent): any} [callback=undefined] - The event handler function that receives a {@link MouseMotionEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see MouseMotionEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,     // The component that triggered the event.
+	 *   type: string,       // `move` or `drag`.
+	 *   button: number,     // Button number. One of MouseButton enum values. Present when applicable.
+	 *   modifiers: number,  // Keyboard modifiers (bitmask or flags).
+	 *   x: number,          // Mouse x position relative to component
+	 *   y: number,          // Mouse y position relative to component
+	 *   screenX: number,    // Mouse x position relative to default screen
+	 *   screenY: number,    // Mouse y position relative to default screen
+	 * };
+	 */
+	onMouseMotion(...args)
+	{
+		if(args.length === 0) return this.event("onMouseMotion");
+		return this.event("onMouseMotion", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a mouse wheel event handler function.
+	 *
+	 * @param {function(MouseWheelEvent): any} [callback=undefined] - The event handler function that receives a {@link MouseWheelEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see MouseWheelEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,        // The component that triggered the event.
+	 *   type: string,          // `wheel`.
+	 *   button: number,        // Button number. One of MouseButton enum values. Present when applicable.
+	 *   scrollAmount: number,  // Returns the number of units that should be scrolled per click of mouse wheel rotation.
+	 *   rotation: number,      // Indicates the number of "clicks" the mouse wheel was rotated.
+	 *                          // A partial rotation may occur if the mouse supports a high-resolution wheel.
+	 *                          // In this case, the number is zero until a full "click" has been accumulated.
+	 *   modifiers: number,     // Keyboard modifiers (bitmask or flags).
+	 *   alt: boolean,          // Indicates if ALT key was pressed.
+	 *   shift: boolean,        // Indicates if SHIFT key was pressed.
+	 *   ctrl: boolean,         // Indicates if CTRL key was pressed.
+	 *   x: number,             // Mouse x position relative to component
+	 *   y: number,             // Mouse y position relative to component
+	 *   screenX: number,       // Mouse x position relative to default screen
+	 *   screenY: number,       // Mouse y position relative to default screen
+	 * };
+	 */
+	onMouseWheel(...args)
+	{
+		if(args.length === 0) return this.event("onMouseWheel");
+		return this.event("onMouseWheel", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a keyboard keys' event handler function.
+	 *
+	 * @param {function(KeyEvent): any} [callback=undefined] - The event handler function that receives a {@link KeyEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see KeyEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,           // The component that triggered the event.
+	 *   type: string,             // `up`, `down`, `type`.
+	 *   keyCode: number           // Numeric code associated with the key
+	 *   extendedKeyCode: number   // The extended key code is a unique id assigned to a key on the keyboard just like keyCode. However, unlike keyCode, this value depends on the current keyboard layout.
+	 *   keyChar: string           // Key character
+	 *   modifiers: number,        // Keyboard modifiers (bitmask or flags).
+	 *   modifiersText: string     // Modifiers representation as a string.
+	 *   alt: boolean,             // Indicates if ALT key was pressed.
+	 *   shift: boolean,           // Indicates if SHIFT key was pressed.
+	 *   ctrl: boolean,            // Indicates if CTRL key was pressed.
+	 *   keyLocation: string       // `standard`, `numpad`, `left`, `right`. Location of the key on keyboard. Only present when type is `up` or `down`.
+	 * };
+	 */
+	onKey(...args)
+	{
+		if(args.length === 0) return this.event("onKey");
+		return this.event("onKey", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a focus event handler function.
+	 *
+	 * @param {function(FocusEvent): any} [callback=undefined] - The event handler function that receives a {@link FocusEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see FocusEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,     // The component that triggered the event.
+	 *   type: string,       // `focus`, `blur`.
+	 *   cause: string       // `UNKNOWN`, `ACTIVATION`, `TRAVERSAL_FORWARD`, `TRAVERSAL_BACKWARD`.
+	 *   temporary: boolean, // Identifies the focus change event as temporary or permanent
+	 * };
+	 */
+	onFocusEvents(...args)
+	{
+		if(args.length === 0) return this.event("onFocusEvents");
+		return this.event("onFocusEvents", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters an event handler function for events: resize, move, show, hide.
+	 *
+	 * @param {function(ComponentEvent): any} [callback=undefined] - The event handler function that receives a {@link ComponentEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see ComponentEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *  target: object,       // The component that triggered the event.
+	 *  type: string,         // `resize`, `move`, `show`, `hide`.
+	 *  interactive: boolean, // Indicates if the event was triggered by user's interaction (not programmatically). Present when e.type is `move` or `resize`.
+	 *  x: number,            // New x position of component.
+	 *  y: number,            // New y position of component.
+	 *  width: number,        // New width of component. Present when e.type is `resize`.
+	 *  height: number,       // New height of component. Present when e.type is `resize`.
+	 *  innerWidth: number,   // New width of content area of the component. Present when e.type is `resize` and component is Window or InternalWindow.
+	 *  innerHeight: number,  // New height of content area of the component. Present when e.type is `resize` and component is Window or InternalWindow.
+	 *};
+	 */
+	onComponentEvents(...args)
+	{
+		if(args.length === 0) return this.event("onComponentEvents");
+		return this.event("onComponentEvents", args[0], args[0] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters an event handler that listens for changes to this component's properties.
+	 *
+	 * @param {function(PropertyChangeEvent): any} [callback=undefined] - The event handler function that receives a {@link PropertyChangeEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see PropertyChangeEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,     // The container component that triggered the event.
+	 *   type: string,       // `change`.
+	 *   property: string,   // The property that was changed
+	 *   oldValue: any,      // Previous value of the changed property
+	 *   newValue: any       // New value of the changed property
+	 * };
+	 */
+	onPropertyChange(...args)
+	{
+		if(args.length === 0) return this.event("onPropertyChange");
+		return this.event("onPropertyChange", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a handler function for drag related events. Call without parameters to get an array of already registered handler functions.
+	 *
+	 * @param {function(DragEvent): any} [callback=undefined] - The event handler function that receives a {@link DragEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see DragEvent
+	 *
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,         // The component that triggered the event.
+	 *   type: string,           // `dragstart`, `dragend`, `cancel`.
+	 *   action: string          // One of DragDropAction enum values. Present when applicable.
+	 *   x: number,              // X position of a pointer relative to this component. Present when e.type is `dragstart` or `dragend`.
+	 *   y: number,              // Y position of a pointer relative to this component. Present when e.type is `dragstart` or `dragend`.
+	 *   screenX: number,        // X position of a pointer relative to default screen. Present when e.type is `dragstart` or `dragend`.
+	 *   screenY: number,        // Y position of a pointer relative to default screen. Present when e.type is `dragstart` or `dragend`.
+	 *   button: number,         // Indicates a pointing device button involved in dragging. Value of MouseButton enum.
+	 *   modifiers: number,      // Keyboard modifiers (bitmask or flags). Present when e.type is `dragstart`.
+	 *   modifiersText: string,  // Keyboard modifiers. Present when e.type is `dragstart`.
+	 *   alt: boolean,           // Indicates if ALT key was pressed. Present when e.type is `dragstart`.
+	 *   shift: boolean,         // Indicates if SHIFT key was pressed. Present when e.type is `dragstart`.
+	 *   ctrl: boolean,          // Indicates if CTRL key was pressed. Present when e.type is `dragstart`.
+	 *   selected: number[]      // Array of selected indexes of a List component whose items are being dragged. Present when List items are being dragged.
+	 * };
+	 */
+	onDragEvents(...args)
+	{
+		if(args.length === 0) return this.event("onDragEvents");
+		return this.event("onDragEvents", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a handler function for drop related events. Call without parameters to get an array of already registered handler functions.
+	 *
+	 * @param {function(DropEvent): any} [callback=undefined] - The event handler function that receives a {@link DropEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see DropEvent
+	 * @example <h2>{@link DropEvent} object format:</h2>
+	 * const e = {
+	 *   target: object,    // The component that triggered the event.
+	 *   type: string,      // `dragenter`, `dragover`, `dragleave`, `drop`.
+	 *   action: string     // One of the values of enum DragDropAction. Present when applicable.
+	 *   data: object       // An object that contains the data that is being dropped. Present only when e.type is `drop` or `dragenter`.
+	 *   source: object,    // A component that is being dragged or dropped onto this component.
+	 *                      // Present only when a another UI component is dragged onto this component and `DataType.Component` is of the types set by dragDataType().
+	 *   x: number,         // X position of a pointer relative to this component. Present when e.type is `dragstart` or `drop`.
+	 *   y: number,         // Y position of a pointer relative to this component. Present when e.type is `dragstart` or `drop`.
+	 *   screenX: number,   // X position of a pointer relative to default screen. Present when e.type is `dragstart` or `drop`.
+	 *   screenY: number,   // Y position of a pointer relative to default screen. Present when e.type is `dragstart` or `drop`.
+	 *   selected: number[] // Array of selected indexes of a List component whose items are being dragged. Present when List items are being dragged.
+	 * };
+	 */
+	onDropEvents(...args)
+	{
+		if(args.length === 0) return this.event("onDropEvents");
+
+		return this.event("onDropEvents", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a handler function for component's text value change event. Applied to components where text can be changed by user, such as TextField, PasswordField, TextArea, DocumentEditor, ComboBox, Spinner, etc.
+	 *
+	 * @param {function(ChangeEvent): any} [callback=undefined] - The event handler function that receives a {@link ChangeEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see ChangeEvent
+	 */
+	onChange(...args)
+	{
+		if(args.length === 0) return this.event("onChange");
+		return this.event("onChange", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a handler function for component's event when ancestor is added, removed, or moved.
+	 *
+	 * @param {function(AncestorEvent): any} [callback=undefined] - The event handler function that receives a {@link AncestorEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {this|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+	 * @see AncestorEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,    // The component that triggered the event.
+	 *   type: string,      // `add`, `remove`, `move`.
+	 *   ancestor: object,  // The ancestor component.
+	 * };
+	 */
+	onAncestorEvents(...args)
+	{
+		if(args.length === 0) return this.event("onAncestorEvents");
+		return this.event("onAncestorEvents", args[0], args[1] ?? false);
+	}
+
+	/**
+	 * Gets, registers or unregisters a handler function for component's {@link ShortcutEvent} when a shortcut is invoked.
+	 *
+	 * @param {function(ShortcutEvent): any} [callback=undefined] - The event handler function that receives a {@link ShortcutEvent} object. Pass `null` to unregister all handler functions.
+	 * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+	 * @returns {Function[]|UIComponent}
+	 */
+	onShortcut(...args)
+	{
+		if(args.length === 0) return this.event("onShortcut");
+		return this.event("onShortcut", args[0], args[1] ?? false);
+	}
+
+	//endregion
+}
+
+export {UIComponent};