swing-ui 0.1.25 → 1.0.3

package/classes/ProgressBar.js

@@ -0,0 +1,62 @@
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * Progress bar component is used to show progress visually, from 0% to 100%. Valid value range is from 0 to 100.
+ * For simplicity the ProgressBar does not have min() and max() properties. Min is always 0, max is always 100.
+ * Using multiple of these components in vertical position can be used to show audio spectrum analyzer.
+ * @class
+ * @global
+ */
+export class ProgressBar extends UIComponent
+{
+	/**
+	 * ProgressBar constructor. Creates an instance of ProgressBar UI component.
+	 * @param {number} [value] - Numeric value between 0 and 100.
+	 */
+	constructor(...args)
+	{
+		if(args.length > 0)
+		{
+			super("ProgressBar", (new.target === ProgressBar), args[0]);
+		}
+		else
+		{
+			super("ProgressBar", (new.target === ProgressBar));
+		}
+		
+		this.finalize(ProgressBar);
+	}
+	
+	/**
+	 * Sets or get a numeric value as percent of process (value between 0 and 100).
+	 *
+	 * @param {number} [value] - Numeric value between 0 and 100 that represents percent of progress.
+	 * @return {number|ProgressBar} Returns `this` instance of ProgressBar when setting a value, otherwise returns current value.
+	 */
+	value(...args)
+	{
+		return this.property("value", args);
+	}
+	
+	/**
+	 * Sets or get an orientation of the progress bar as horizontal or vertical.
+	 *
+	 * @param {Orientation} orientation - Orientation of progress bar. Default is horizontal.
+	 * @return {Orientation|ProgressBar} Returns `this` component instance when setting value, otherwise returns current value.
+	 */
+	orientation(...args)
+	{
+		return this.property("orientation", args);
+	}
+
+	/**
+	 * Sets or gets wether the state of the progress is indeterminate.
+	 *
+	 * @param {boolean} is_indeterminate Sets a boolean stating if the state of progress is indeterminate. Omit to get the current state.
+	 * @return {boolean|ProgressBar} Returns `this` component instance when setting value, otherwise returns current value.
+	 */
+	indeterminate(...args)
+	{
+		return this.property("indeterminate", args.length > 0 ? [args[0] === true] : []);
+	}
+}

package/classes/RadioButton.js

@@ -0,0 +1,110 @@
+
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * RadioButton is a component used to select of multiple option by clicking on it.
+ * Multiple RadioButton components must be grouped for selection to work.
+ * To group them pick one main RadioButton and group other RadioButton components with it.
+ * For example if you have three RadioButton components, you must group second component with first one, then third component with any component that is already grouped (first or second).
+ * Then to detect selection changes add onChange(e => {console.log(e.value);}) to only one of the grouped RadioButton components, and e.value will be the value of currently selected RadioButton.
+ * @class
+ * @global
+ * @example
+ * // Example how to group RadioButton components and detect when selected value of a group changes.
+ *
+ * var mainForm = new Window("Demo").size(500, 300).show();
+ *
+ * // create first RadioButton and sets group value change handler function
+ * mainForm.radio1 = new RadioButton("Option 1").addTo(mainForm).position(10, 10).onChange(e => {console.log(e.value);});
+ *
+ * // create second RadioButton and group it with first one
+ * mainForm.radio2 = new RadioButton("Option 2").addTo(mainForm).position(10, 30).group(mainForm.radio1);
+ *
+ * // create third RadioButton and group it with first one
+ * mainForm.radio3 = new RadioButton("Option 3").addTo(mainForm).position(10, 50).group(mainForm.radio1);
+ *
+ * // now when user clicks on any of these radio buttons a new selected value will be logged in console.
+ */
+export class RadioButton extends UIComponent
+{
+	/**
+	 * RadioButton constructor. Creates an instance of RadioButton UI component.
+	 * @param {string} [text] - Text of the radio button component.
+	 */
+	constructor(...args)
+	{
+		super("RadioButton", (new.target === RadioButton), ...args);
+		this.finalize(RadioButton);
+	}
+	
+	/**
+	 * Sets or gets boolean indicating whether this component is selected.
+	 * @param {boolean} [selected] - `true` to select, `false` to deselect.
+	 * @return {RadioButtonMenuItem|boolean} Returns `this` CheckBoxMenuItem instance if argument is provided, otherwise returns `boolean` value.
+	 */
+	selected()
+	{
+		return this.property("selected", arguments.length > 0 ? [arguments[0] === true] : []);
+	}
+	
+	/**
+	 * Sets or gets a value of this component.
+	 * @param {*} [value] - Value to be held by this component
+	 * @return {RadioButton|*} If setting a value, then an instance of `this` component is returned, otherwise current value is returned.
+	 */
+	value()
+	{
+		return this.property("value", arguments);
+	}
+
+	/**
+	 * Gets or sets the selected value within this radio button group.
+	 *
+	 * If a value is provided, selects the radio button within the group that matches the given value (including this one).
+	 *
+	 * @param {number|string} [value] - Value to select within the group.
+	 * @return {RadioButton|number|string|null} If value is provided, an instance of `this` object is returned. If no argument is provided, a value of the currently selected ToggleButton within the group is returned, or `null`, if no button is selected or selected button doesn't have a value.
+	 */
+	selectedValue()
+	{
+		return this.property("selectedValue", arguments);
+	}
+	
+	/**
+	 * Adds this RadioButton to the group of another RadioButton while abandoning current group, or removes it from its current group and creates its own group when you pass `null`.
+	 *
+	 * - Call without parameters to get an Array of all components in its group.
+	 * - Pass another RadioButton to join its group.
+	 * - Pass `null` to leave the current group (if any) and create its own group.
+	 *
+	 * @param {RadioButton|null} [component] - A RadioButton to join, or `null` to leave the current group. Omit to get the RadioButton components of the same group.
+	 * @returns {RadioButton|RadioButton[]} This RadioButton, for chaining when called with parameter, otherwise an Array of all RadioButton components in its group.
+	 */
+	group(...args)
+	{
+		if(args.length > 0)
+		{
+			if(args[0] !== null && !(args[0] instanceof this.constructor)) throw new Error(`Invalid value passed to ${this.constructor.name}.group(). ${this.constructor.name} component or NULL is expected.`);
+			return this.property("group", [args[0] !== null ? args[0].id : null]);
+		}
+		else
+		{
+			let _items = this.property("group", []);
+
+			for(let i in _items) _items[i] = UIComponent.get(_items[i]);
+
+			return _items;
+		}
+	}
+	
+	/**
+	 * Deselect all ToggleButton elements grouped with this element.
+	 *
+	 * @return {ToggleButton} Returns `this` component instance.
+	 */
+	clearSelection()
+	{
+		ui.sendToGUI({control: this.id, set: "clearSelection"});
+		return this;
+	}
+}

package/classes/RadioButtonMenuItem.js

@@ -0,0 +1,106 @@
+
+import {MenuItem} from "./MenuItem.js";
+
+/**
+ * Radio button menu item UI component that extends MenuItem class.
+ *
+ * RadioButton is a component used to select of multiple option by clicking on it.
+ * Multiple RadioButton components must be grouped for selection to work as expected.
+ * To group them pick one main RadioButtonMenuItem and group other RadioButtonMenuItem with it.
+ * For example if you have three RadioButtonMenuItem components that you want to group, you must group second component with first one, then third component with any component that is already grouped (first or second).
+ * Then to detect selection changes add onChange(e => {console.log(e.value);}) to only one of the grouped RadioButton components, and e.value will be the value of currently selected RadioButton.
+ * See example below.
+ *
+ * @class
+ * @global
+ * @see MenuItem
+ * @extends MenuItem
+ * @example
+ * // Example how to group RadioButton components and detect when selected value of a group changes.
+ *
+ * var fileMenu = new Menu("Options").addTo(menuBar);
+ *
+ * // create first RadioButtonMenuItem and sets group value change handler function
+ * mainForm.radio1 = new RadioButtonMenuItem("Option 1").addTo(fileMenu).onChange(e => {console.log(e.value);});
+ *
+ * // create second RadioButtonMenuItem and group it with first one
+ * mainForm.radio2 = new RadioButtonMenuItem("Option 2").addTo(fileMenu).group(mainForm.radio1);
+ *
+ * // create third RadioButtonMenuItem and group it with first one
+ * mainForm.radio3 = new RadioButtonMenuItem("Option 3").addTo(fileMenu).group(mainForm.radio1);
+ *
+ * // now when user clicks on any of these radio buttons a new selected value will be logged in console.
+ */
+export class RadioButtonMenuItem extends MenuItem
+{
+	/**
+	 * Sets or gets boolean indicating whether this component is selected.
+	 * @param {boolean} [selected] - `true` to select, `false` to deselect.
+	 * @return {RadioButtonMenuItem|boolean} Returns `this` CheckBoxMenuItem instance if argument is provided, otherwise returns `boolean` value.
+	 */
+	selected()
+	{
+		return this.property("selected", arguments.length > 0 ? [arguments[0] === true] : []);
+	}
+	
+	/**
+	 * Sets or gets a value of this component.
+	 * @param {*} [value] - Value to be held by this component
+	 * @return {RadioButtonMenuItem|*} If setting a value, then an instance of `this` component is returned, otherwise current value is returned.
+	 */
+	value()
+	{
+		return this.property("value", arguments);
+	}
+
+	/**
+	 * Gets or sets the selected value within this radio button group.
+	 *
+	 * If a value is provided, selects the radio button within the group that matches the given value (including this one).
+	 *
+	 * @param {number|string} [value] - Value to select within the group.
+	 * @return {RadioButtonMenuItem|number|string|null} If value is provided, an instance of `this` object is returned. If no argument is provided, a value of the currently selected radio button in the group is returned, or `null`, if no button is selected or selected button doesn't have a value.
+	 */
+	selectedValue()
+	{
+		return this.property("selectedValue", arguments);
+	}
+
+	/**
+	 * Adds this RadioButtonMenuItem to the group of another RadioButtonMenuItem while abandoning current group, or removes it from its current group and creates its own when you pass `null`.
+	 *
+	 * - Call without parameters to get an Array of all components in its group.
+	 * - Pass another RadioButtonMenuItem to join its group.
+	 * - Pass `null` to leave the current group (if any) and create its own group.
+	 *
+	 * @param {RadioButtonMenuItem|null} [component] - A RadioButtonMenuItem to join, or `null` to leave the current group. Omit to get the grouped RadioButtonMenuItem components.
+	 * @returns {RadioButtonMenuItem|RadioButtonMenuItem[]} This RadioButtonMenuItem, for chaining when called with parameter, otherwise an Array of all RadioButtonMenuItem components in its group.
+	 */
+	group(...args)
+	{
+		if(args.length > 0)
+		{
+			if(args[0] !== null && !(args[0] instanceof this.constructor)) throw new Error(`Invalid value passed to ${this.constructor.name}.group(). ${this.constructor.name} component or NULL is expected.`);
+			return this.property("group", [args[0] !== null ? args[0].id : null]);
+		}
+		else
+		{
+			let _items = this.property("group", []);
+
+			for(let i in _items) _items[i] = UIComponent.get(_items[i]);
+
+			return _items;
+		}
+	}
+	
+	/**
+	 * Deselect all RadioButtonMenuItem elements grouped with this element.
+	 *
+	 * @return {RadioButtonMenuItem} Returns `this` component instance.
+	 */
+	clearSelection()
+	{
+		ui.sendToGUI({control: this.id, set: "clearSelection"});
+		return this;
+	}
+}

package/classes/Rectangle.js

@@ -0,0 +1,199 @@
+
+import {Shape} from "./Shape.js";
+
+/**
+ * Rectangle shape can draw a rectangles (if width and height are different) and a square (when width and height are same.
+ *
+ * Rectangle class extends {@link Shape} class.
+ *
+ * @class
+ * @global
+ * @see Shape
+ */
+export class Rectangle extends Shape
+{
+	_points = [];
+	_arc_size = undefined;
+	_corner_radius = undefined;
+	_size = {width: 0, height: 0};
+	
+	/**
+	 * Creates an instance of Rectangle shape.
+	 *
+	 * @param {Stroke} [stroke=undefined] - A border of the shape.
+	 * @param {string} [background=undefined] - Color, gradient, or image background, similar to CSS. Use an empty string to remove the background.
+	 * @param {number} [opacity=1] - Opacity of the shape (0 to 1).
+	 * @param {number} [x=0] - Horizontal position from the left edge.
+	 * @param {number} [y=0] - Vertical position from the top edge.
+	 * @param {number} [width=100] - Width of the ellipse (horizontal diameter).
+	 * @param {number} [height=undefined] - Height of the ellipse (vertical diameter). If omitted, height will be same as width.
+	 */
+	constructor(stroke = undefined, background = undefined, opacity = 1, x = 0, y = 0, width = 100, height = undefined)
+	{
+		super(undefined, stroke, background, opacity, x, y);
+		this._type = "rectangle";
+		if(width == null) width = 100;
+		this._size = {width: width, height: height != null ? height : width};
+	}
+	
+	/**
+	 * Sets or gets the size of the `Rectangle`.
+	 *
+	 * @param {number|Size} width - Width of the Rectangle, or a `Size` object (e.g., {width:300,height:300}).
+	 * @param {number} [height] - Height of the Rectangle.
+	 * @returns {Size|Rectangle} If called without parameters, current size is returned; otherwise this Rectangle object is returned.
+	 * @see Size
+	 */
+	size(...args)
+	{
+		if(args.length > 0)
+		{
+			let new_size = {};
+			
+			if(typeof args[0] === "object")
+			{
+				if(args[0].constructor === Object)
+				{
+					new_size = {width: args[0].width, height: args[0].height};
+				}
+				else
+				{
+					throw new Error(`Invalid object type passed as an argument to Rectangle.size(). Standard Size formatted Object is expected, but ${args[0].constructor.name} was passed.`);
+				}
+			}
+			else
+			{
+				new_size = {width: args[0], height: args[1]};
+			}
+			
+			if(!("width" in new_size && "height" in new_size)) throw new Error(`Invalid argument passed to Rectangle.size(). Width and height are expected.`);
+			
+			this._size = new_size;
+			
+			if(typeof this._size !== "object") this._size = {width: this._size, height: this._size}; // If size is one number, set i to height and width
+			this.update("size");
+			return this;
+		}
+		else
+		{
+			return {width: this._size.width, height: this._size.height};
+		}
+	}
+	
+	/**
+	 * Sets corner radius if only one argument passed, or arc width and height if two arguments or size object supplied. The arc size is applied to all corners.
+	 *
+	 * This a way to create all rounded corners with arc of same or different width and height. If you want to specify corner radius for specific corners, use {@link Rectangle#cornerRadius} method: cornerRadius(...).
+	 *
+	 * @param {number|{width:number, height:number}} width - Width of the corner arc, or a size object (e.g., {width:300,height:300}).
+	 * @param {number} [height] - Height of the corner arc.
+	 * @return {{width:number, height:number}|Rectangle} If called without parameters, current arc size is returned; otherwise this Rectangle object is returned.
+	 * @see Rectangle#cornerRadius
+	 * @example <h2>Valid ways to set arc size:</h2>
+	 * rectangle.cornerArc(radius);
+	 * rectangle.cornerArc(width,height);
+	 * rectangle.cornerArc({width:5,height:10});
+	 */
+	cornerArc()
+	{
+		if(arguments.length > 0)
+		{
+			this._arc_size = (arguments.length > 1) ? {width: arguments[0], height: arguments[1]} : arguments[0];
+			
+			if(typeof this._arc_size !== "object") this._arc_size = {width: this._arc_size, height: this._arc_size};
+			
+			if(this._corner_radius != null)
+			{
+				this._corner_radius = undefined;
+				this.update("corner_radius");
+			}
+			
+			this.update("arc_size");
+			return this;
+		}
+		else
+		{
+			return {...this._arc_size};
+		}
+	}
+	
+	/**
+	 * Sets or gets a corner radius for each corner separately or for all corners at once.
+	 *
+	 * This method sets same width and height of the arc. If you need to set arc with different width and height, you can use {@link Rectangle#cornerArc} method: cornerArc(...).
+	 *
+	 * @param {number|string|object|undefined} topLeft_or_all - Radius for top-left corner, a `string` radii for all corners (e.g., "15 15 0 0"), or an `object` containing each corner in the same format as this method returns. If this is the only passed parameter, it will be used for all corners.
+	 * @param {number|undefined} topRight - Radius for top-right corner. If omitted, it defaults to topLeft corner.
+	 * @param {number|undefined} bottomRight - Radius for bottom-right corner. If omitted, it defaults to topRight corner.
+	 * @param {number|undefined} bottomLeft - Radius for bottom-left corner. If omitted, it defaults to bottomRight corner.
+	 * @return {{tl:number, tr:number, br:number, bl:number}|Rectangle} If called without parameters or `topLeft` is `undefined`, current corner radius object is returned. If called with arguments, this Rectangle shape is returned for chaining.
+	 * @see Rectangle#cornerArc
+	 *
+	 * @example <h2>3 ways to set radius for each corner separately:</h2>
+	 * rectangle.cornerRadius(10, 10, 0, 0); // as separate parameters
+	 * rectangle.cornerRadius("10 10 0 0"); // in a string (CSS style)
+	 * rectangle.cornerRadius({tl:10, tr:10, br:0, bl:0}); // In same object format as this method returns
+	 *
+	 * @example <h2>Setting radius for all corners at once:</h2>
+	 * rectangle.cornerRadius(10);
+	 */
+	cornerRadius(topLeft = undefined, topRight = undefined, bottomRight = undefined, bottomLeft = undefined)
+	{
+		// getter
+		if(topLeft == null) return this._corner_radius != null ? {...this._corner_radius} : undefined;
+		
+		// setter
+		if(typeof topLeft === "string")
+		{
+			let _r = topLeft.replace(/[^\d\s]+/g, "").split(/\s+/);
+			
+			topLeft = parseInt(_r[0] ?? 0);
+			topRight = parseInt(_r[1] ?? topRight);
+			bottomRight = parseInt(_r[2] ?? bottomRight);
+			bottomLeft = parseInt(_r[3] ?? bottomLeft);
+		}
+		else if(typeof topLeft === "object")
+		{
+			const obj = topLeft;
+			topLeft = obj.tl ?? 0;
+			topRight = obj.tr ?? topRight;
+			bottomRight = obj.br ?? bottomRight;
+			bottomLeft = obj.bl ?? bottomLeft;
+		}
+		
+		if(topRight == null) topRight = topLeft;
+		if(bottomRight == null) bottomRight = topRight;
+		if(bottomLeft == null) bottomLeft = bottomRight;
+		
+		this._corner_radius = {tl: topLeft, tr: topRight, br: bottomRight, bl: bottomLeft};
+		
+		if(this._arc_size != null)
+		{
+			this._arc_size = undefined;
+			this.update("arc_size");
+		}
+		
+		this.update("corner_radius");
+		return this;
+	}
+	
+	/**
+	 * Returns a JSON object that contains this shape properties. It may be converted back to this shape.
+	 *
+	 * @param {string} [include="all"] - Specified what to include. "all" is default. Valid values are: "all", "stroke", "background", "points", "basic".
+	 * @return {object} Returns an object containing this shape's properties.
+	 */
+	toObject(what = "all")
+	{
+		let shape = super.toObject(what);
+		
+		if(this._type === "rectangle")
+		{
+			if("all|size".indexOf(what) >= 0) shape.size = this._size;
+			if("all|arc_size".indexOf(what) >= 0) shape.arc_size = this._arc_size;
+			if("all|corner_radius".indexOf(what) >= 0) shape.corner_radius = this._corner_radius;
+		}
+		
+		return shape;
+	}
+}

package/classes/ScrollPane.js

@@ -0,0 +1,53 @@
+
+import {ComponentContainer} from "./ComponentContainer.js";
+import {ScrollableComponent} from "./ScrollableComponent.js";
+
+/**
+ * ScrollPane is a UI component used to display content that may not fit within the visible area, such as large images, scrollable lists, or lengthy forms.
+ *
+ * To use it, place another component (e.g., a Panel) inside the ScrollPane, and then add your scrollable items to that inner component.
+ * ScrollPane itself only provides scroll bars for scrolling and can contain only one child component at a time. Adding a second child component removes existing one.
+ *
+ * NOTE: DO NOT add components like List, Table, Tree, TextArea, InternalWindowContainer, or DocumentEditor directly to a ScrollPane, because these components already have built-in scroll bars.
+ *
+ * Extends {@link ComponentContainer} and {@link ScrollableComponent}, which extends {@link UIComponent}.
+ *
+ * @class
+ * @global
+ */
+class ScrollPane extends ComponentContainer
+{
+	/**
+	 * ScrollPane constructor. Creates an instance of ScrollPane UI component.
+	 *@param {string} [text] - Text associated with this ScrollPane. It will be used, for example, for a tab name when this ScrollPane is added to Tabs component.
+	 */
+	constructor()
+	{
+		if(arguments.length > 0)
+		{
+			super("ScrollPane", (new.target === ScrollPane), arguments[0]);
+		}
+		else
+		{
+			super("ScrollPane", (new.target === ScrollPane));
+		}
+		
+		this.finalize(ScrollPane, ComponentContainer);
+	}
+	
+	/**
+	 * Adds a child component to this container component.
+	 *
+	 * @param {Object} component - UI Component that can be a child of this component.
+	 * @returns {this} Returns an instance of `this` component.
+	 */
+	addChild(component, ...data)
+	{
+		if(this.childCount > 0) this.child(0)?.remove(); // remove previous child
+		return super.addChild(component, []);
+	}
+}
+
+ComponentContainer.implementClass(ScrollPane, ScrollableComponent);
+
+export {ScrollPane};

package/classes/ScrollableComponent.js

@@ -0,0 +1,141 @@
+
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * ScrollableComponent is not a standalone component. ScrollableComponent extends UIComponent and serves a purpose to implement text editor related methods and properties.
+ *
+ * ScrollableComponent is extended by {@link TextArea}, {@link DocumentEditor}, {@link List}, {@link Table}, {@link Tree}, {@link InternalWindowContainer} and {@link ScrollPane}.
+ * @class
+ * @global
+ */
+export class ScrollableComponent extends UIComponent
+{
+	/**
+	 * ScrollableComponent constructor.
+	 * @internal
+	 * @ignore
+	 */
+	constructor(...args)
+	{
+		super(...args);
+	}
+
+	/**
+	 * Sets or gets scroll bars visibility for horizontal and vertical scroll bars.
+	 *
+	 * @param {boolean|null|Scrollbars} [horizontal_or_both] - `true` = visible, `false` = hidden, `null` = auto. Also can be an Object of one or both values.
+	 * @param {boolean|null} [vertical] - `true` = visible, `false` = hidden, `null` = auto. When first argument is provided but this one is omitted, then this will match the first argument.
+	 * @return {this|Scrollbars} Returns `this` component if at least one argument is provided, otherwise returns current state of both scroll bars: {h:boolean|null, v: boolean|null}.
+	 * @example
+	 * textarea.scrollbars(true); // makes both scroll bars always visible
+	 * textarea.scrollbars(false, null); // makes horizontal scroll bar hidden, but vertical will become visible as needed
+	 * textarea.scrollbars({horizontal: false, vertical: null});  // makes horizontal scroll bar hidden, but vertical will become visible as needed
+	 */
+	scrollbars(...args)
+	{
+		let arg = {};
+
+		if(args.length === 1)
+		{
+			if(args[0] != null && typeof args[0] === "object")
+			{
+				if("horizontal" in args[0]) arg.h = args[0].horizontal == null ? null : (args[0].horizontal === true);
+				if("vertical" in args[0]) arg.v = args[0].vertical == null ? null : (args[0].vertical === true);
+			}
+			else
+			{
+				arg.h = args[0] == null ? null : (args[0] === true);
+				arg.v = arg.h;
+			}
+		}
+		else if(args.length === 2)
+		{
+			arg.h = args[0] == null ? null : (args[0] === true);
+			arg.v = args[1] == null ? null : (args[1] === true);
+		}
+
+		return this.property("scrollbars", Object.keys(arg).length > 0 ? [arg] : []);
+	}
+
+	/**
+	 *  Sets and gets horizontal (X) and vertical (y) scroll positions. Applies only to components that have scroll bars, such as TextField, List, Table, DocumentEditor, Tree, ScrollPane, and InternalWindowContainer.
+	 *
+	 * @param {number} [x=undefined] - Set integer number to set horizontal position, or `undefined` to not set horizontal position. Omit this argument to get scroll position.
+	 * @param {number} [y=undefined] - Set integer number to set vertical position, or `undefined` to not set vertical position.
+	 * @return {this|Object} Returns horizontal and vertical scroll positions as an Object{x:number, y:number} if no arguments are passed, otherwise returns `this` component instance.
+	 * @example
+	 * const position = textarea.scrollPosition(); // Gets horizontal and vertical scroll positions as an Object{x:number, y:number}
+	 * textarea.scrollPosition(40, 20); // sets horizontal and vertical scroll positions
+	 * textarea.scrollPosition(null, 20); // sets only vertical scroll position
+	 * textarea.scrollPosition(40, null); // sets only horizontal scroll position
+	 * textarea.scrollPosition(40); // sets only horizontal scroll position
+	 */
+	scrollPosition(x = undefined, y = undefined)
+	{
+		if(arguments.length > 0)
+		{
+			return this.property("scrollPosition", [{x: x ?? undefined, y: y ?? undefined}]);
+		}
+		else
+		{
+			return this.property("scrollPosition");
+		}
+	}
+
+	/**
+	 * Gets the size of scroll bars (horizontal and vertical). Setting is not supported yet.
+	 *
+	 * @returns {number[]|this} Returns a size Object {x:number, y:number} when arguments are omitted, otherwise `this` component instance.
+	 */
+	scrollBarSize(...args)
+	{
+		return this.property("scrollBarSize", args); // if return value is NULL, then return empty array
+	}
+
+	/**
+	 * Sets or get scroll increment of a scrollable component.
+	 *
+	 * @param {number} pixels - How many pixels the page is scrolled in one step of scrolling with up/down keys or mouse wheel.
+	 * @return {this|number} Returns `this` component if argument is provided, otherwise returns `number` value.
+	 */
+	scrollIncrement(...args)
+	{
+		if(args.length > 0) args[0] = Math.max(1, parseInt(args[0]));
+		return this.property("scrollIncrement", args);
+	}
+
+	/**
+	 * Sets or gets whether scrolling should be smooth (animated). Applies only to scrollable components.
+	 *
+	 * @param {boolean} enable - Enables or disables smooth scrolling
+	 * @return {this|number} Returns `this` component if argument is provided, otherwise returns `boolean` value.
+	 */
+	smoothScrolling(...args)
+	{
+		if(args.length > 0) args[0] = (args[0] === true);
+		return this.property("smoothScrolling", args);
+	}
+
+	/**
+	 * Gets, registers or unregisters an event handler function for scrolling of vertical and/or horizontal scroll bars. Applicable only to components with scroll bars.
+	 *
+	 * @param {function(ScrollEvent): any} [callback=undefined] - The event handler function that receives a {@link ScrollEvent} 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 ScrollEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,  // The component that triggered the event.
+	 *   type: string,    // `horizontal`, `vertical`.
+	 *   x: number,       // New value of horizontal scroll position
+	 *   y: number,       // New value of vertical scroll position
+	 *   maxX: number,    // Maximum value of horizontal scroll position
+	 *   maxY: number     // Maximum value of vertical scroll position
+	 * };
+	 */
+	onScroll(...args)
+	{
+		return this.event("onScroll", args[0], args[1] ?? false);
+	}
+}