swing-ui 0.1.25 → 1.0.1

package/classes/Tabs.js

@@ -0,0 +1,228 @@
+
+import {ComponentContainer} from "./ComponentContainer.js";
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * A Tabs UI component is a set of linked panels where only one panel is visible at a time, and users can switch between them by clicking tab headers. It’s commonly used to organize related content into separate views. This helps save space and makes navigation more intuitive.
+ * Extends ComponentContainer, which extends UIComponent.
+ * @class
+ * @global
+ * @see ComponentContainer
+ * @example
+ * // Usage example
+ *
+ * // create new Tabs component
+ * this.tabs = new Tabs().addTo(this).position(15, 15, 15, 15).anchor("top right bottom left");
+ *
+ * // One way to add a Panel to Tabs
+ * this.loginPanel = new Panel().background(null);
+ * this.tabs.add(this.loginPanel, {text: "Sign In", enabled: true, tooltip: "Log in to your account", icon: "images/user.png"});
+ *
+ * // second way to add same panel and options
+ * this.loginPanel = new Panel("Sign In").background(null).icon("images/user.png").addTo(this.tabs);
+ * this.tabs.tooltipAt(0, "Log in to your account");
+ *
+ * // third way to add same panel and options
+ * this.loginPanel = new Panel().background(null);
+ * this.tabs.add(this.loginPanel).textAt(0, "Sign In").iconAt(0, "images/user.png").tooltipAt(0, "Log in to your account").enabledAt(0, true);
+ */
+export class Tabs extends ComponentContainer
+{
+	/**
+	 * Creates a new Tabs component.
+	 */
+	constructor()
+	{
+		super("Tabs", (new.target === Tabs));
+		
+		this.finalize(Tabs, ComponentContainer);
+	}
+	
+	/**
+	 * Adds a new tab with provided component as the main component of that tab. If options are passed, they will be used for tab text, icon, tooltip, etc.
+	 *
+	 * @param {object} component - A component that is allowed to be added to Tabs:
+	 * @param {string|object|undefined} [options=undefined] - Text of the new tab or an object containing one or more options {text:string, icon: string, tooltip: string, enabled: boolean, index: number}.
+	 * @param {number|undefined} [index=undefined] - Index at which to insert the new tab. Default is last tab.
+	 * @returns {Tabs} Returns `this` Tabs component for method chaining.
+	 * @example
+	 * // Setting multiple tab options
+	 * tabs.add(panel, {text:"Tab Name",icon:"icons/user.png",enabled:true,tooltip:"Create new user"});
+	 *
+	 * // Setting tab name only (as a string)
+	 * tabs.add(panel, "Tab Name");
+	 *
+	 * // Setting insert index
+	 * tabs.add(panel, "Tab Name", 2);
+	 */
+	add(component, options = undefined, index = undefined)
+	{
+		if(!(component instanceof UIComponent)) throw new Error(`Invalid first argument "${typeof component === "object" ? component.constructor.name : typeof component}" provided to Tabs.add(component). Expected swing-ui component or its derivative.`);
+		component.verifyComponent();
+		
+		let data = {};
+		
+		if(index != null) data.index = index;
+		
+		if(options != null)
+		{
+			if(typeof options === "object")
+			{
+				Object.assign(data, options);
+			}
+			else
+			{
+				data.text = String(options);
+			}
+		}
+		
+		return this.addChild(component, data);
+	}
+	
+	/**
+	 * Sets or gets a selected tab index.
+	 *
+	 * @param {number} [index] - Index of the tab to select. Out of bounds integer will not select anything)
+	 * @returns {number|Tabs} When setting an index, `this` Tabs component is returned; otherwise currently selected tab index is returned.
+	 */
+	selected()
+	{
+		if(arguments.length > 1 && arguments[1] !== null) arguments[1] = parseInt(arguments[1]);
+		return this.property("selected", arguments);
+	}
+	
+	/**
+	 * Gets information about selected Tab.
+	 * Returned object format is: {index:number, text:string, tooltip:string, enables:boolean, component: object}.
+	 *
+	 * @type {object|null}
+	 * @readonly
+	 */
+	get selectedItem()
+	{
+		let item = this.property("selectedItem", []);
+		
+		if(item === undefined) return null;
+		item.component = UIComponent.get(item.component);
+		return item;
+	}
+	
+	/**
+	 * Gets an array of objects about each tab.
+	 * Each object format is: {text:string, tooltip:string, enables:boolean, selected:boolean, component: object}.
+	 *
+	 * @type {object[]}
+	 * @readonly
+	 */
+	get items()
+	{
+		let _items = this.property("items", []);
+		
+		let _c = this.children;
+		for(let i in _items) _items[i].component = _c[i];
+		
+		return _items;
+	}
+	
+	/**
+	 * Sets or gets whether the tab at specified index is enabled. Setting it to `false` makes it disabled.
+	 *
+	 * @param {number} i - Index of the tab
+	 * @param {boolean} [enabled] - Set to `true` to enabled the tab, `false` to disable.
+	 * @return {boolean|Tabs} When setting `enabled` argument, `this` Tabs component object is returned; otherwise current `enabled` state is returned.
+	 */
+	enabledAt(i)
+	{
+		if(arguments.length > 1)
+		{
+			ui.sendToGUI({control: this.id, set: "enabledAt", value: arguments[1], data: i});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.id, get: "enabledAt", data: i});
+		}
+	}
+	
+	/**
+	 * Sets or gets the text of the tab at specified index.
+	 *
+	 * @param {number} i - Index of the tab
+	 * @param {string} [text] - New text for the tab
+	 * @return {string|Tabs} When setting `text` argument, `this` Tabs component object is returned; otherwise current text is returned.
+	 */
+	textAt(i)
+	{
+		if(arguments.length > 1)
+		{
+			ui.sendToGUI({control: this.id, set: "textAt", value: arguments[1], data: i});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.id, get: "textAt", data: i});
+		}
+	}
+	
+	/**
+	 * Sets or gets the tooltip text for the tab at specified index.
+	 *
+	 * @param {number} i - Index of the tab
+	 * @param {string} [tooltip] - New tooltip text for the tab
+	 * @return {string|Tabs} When setting `tooltip` argument, `this` Tabs component object is returned; otherwise current tooltip text is returned.
+	 */
+	tooltipAt(i)
+	{
+		if(arguments.length > 1)
+		{
+			ui.sendToGUI({control: this.id, set: "tooltipAt", value: arguments[1], data: i});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.id, get: "tooltipAt", data: i});
+		}
+	}
+	
+	/**
+	 * Sets or gets the icon for the tab at specified index.
+	 *
+	 * @param {number} i - Index of the tab
+	 * @param {string|null} [icon] - Icon's path (URL, relative or absolute path) or base64 encoded image. Set `null` to remove current icon.
+	 * @return {string|null|Tabs} When setting `icon` argument, `this` Tabs component object is returned; otherwise current icon is returned as base64 encoded string or `null` if the icon was not set.
+	 */
+	iconAt(i)
+	{
+		if(arguments.length > 1)
+		{
+			ui.sendToGUI({control: this.id, set: "iconAt", value: arguments[1], data: i});
+			return this;
+		}
+		else
+		{
+			return ui.sendToGUI({control: this.id, get: "iconAt", data: i});
+		}
+	}
+	
+	/**
+	 * Position of tabs: left, right, top, or bottom. Default is top.
+	 *
+	 * @param {string} [position] - "top", "bottom", "left", or "right.
+	 * @return {string|Tabs} If setting value, `this` Tabs component object is returned; otherwise current value is returned.
+	 */
+	tabPosition(...args)
+	{
+		return this.property("tabPosition", args);
+	}
+	
+	/**
+	 * Sets or gets whether tabs on left or right side should be displayed vertically to take less space. Has no affect when tabs are at the top or bottom. Default is false.
+	 *
+	 * @param {boolean} [vertical] - `true` for vertical, `false` for horizontal menu-like tab list (default).
+	 * @return {boolean|Tabs} If setting value, `this` Tabs component object is returned; otherwise current value is returned.
+	 */
+	sideTabsVertical(...args)
+	{
+		return this.property("sideTabsVertical", args);
+	}
+}

package/classes/TextArea.js

@@ -0,0 +1,125 @@
+import zlib from "zlib"; // https://nodejs.org/api/zlib.html#class-options
+import {TextComponent} from "./TextComponent.js";
+import {ScrollableComponent} from "./ScrollableComponent.js";
+
+/**
+ * TextArea is a multi-line text field with multiple text-wrapping modes.
+ * TextArea extends TextComponent and ScrollableComponent classes, which extend UIComponent class.
+ * @class
+ * @global
+ * @see TextComponent
+ * @see ScrollableComponent
+ */
+class TextArea extends TextComponent
+{
+	/**
+	 * Creates an instance of TextArea object.
+	 *
+	 * @param {string} [text] - Initial text value of the component.
+	 */
+	constructor()
+	{
+		super("TextArea", (new.target === TextArea), ...arguments);
+
+		this.prop.rows = 1;
+		this.prop.columns = 1;
+
+		this.finalize(TextArea, TextComponent);
+	}
+
+	/**
+	 * Sets or Gets the text value of the text area.
+	 *
+	 * @param {string} [text=undefined] - Text value to replace existing text.
+	 * @param {TextAction} [action=TextAction.Set] - Specific action to perform with text. One of: TextAction.Set, TextAction.Prepend, TextAction.Append, TextAction.Insert, TextAction.ReplaceSelection.
+	 * @param {number} [insert_position=undefined)] - Position where to insert text. Applies only if `action` argument is TextAction.Insert.
+	 * @return {string|TextArea} When setting text, `this` TextArea component is returned; otherwise current text is returned.
+	 * @example
+	 * const txt = textarea.text(); // gets text value
+	 * textarea.text("New Text"); // sets new text value
+	 * textarea.text("Appended Text", TextAction.Append); // Appends new text to the end of current text
+	 * textarea.text("Inserted Text", TextAction.Insert); // Inserts at current caret position
+	 * textarea.text("Inserted Text", TextAction.Insert, textarea.caretPosition() - 50); // Inserts at specified position
+	 * textarea.text("New Text", TextAction.ReplaceSelection); // Replaces selected text or inserts at current cursor position if no text is selected
+	 */
+	text(text = undefined, action = TextAction.Set, i = undefined)
+	{
+		if(text !== undefined)
+		{
+			text = String(text ?? "");
+			const opt = {action: action, index: i};
+
+			// Gzip and Base64Encode long text
+			if(text.length > 200)
+			{
+				text = zlib.gzipSync(text, {
+					level: zlib.constants.Z_BEST_COMPRESSION,
+					strategy: zlib.constants.Z_DEFAULT_STRATEGY
+				}).toString("base64");
+				opt.zipped = true;
+			}
+
+			ui.sendToGUI({control: this.id, set: "text", value: text, data: opt});
+			return this;
+		}
+		else
+		{
+			let r = this.property("text", arguments);
+
+			// base64 decode and Gunzip value before returning
+			return zlib.gunzipSync(Buffer.from(r, "base64"), {}).toString();
+		}
+	}
+
+	/**
+	 * @internal
+	 * @ignore
+	 */
+	rows()
+	{
+		if(arguments.length > 0)
+		{
+			this.prop.rows = arguments[0];
+			ui.sendToGUI({control: this.id, set: "rows", value: arguments[0]});
+			return this;
+		}
+		else
+		{
+			return this.prop.rows;
+		}
+	}
+
+	/**
+	 * @internal
+	 * @ignore
+	 */
+	columns()
+	{
+		if(arguments.length > 0)
+		{
+			this.prop.columns = arguments[0];
+			ui.sendToGUI({control: this.id, set: "columns", value: arguments[0]});
+			return this;
+		}
+		else
+		{
+			return this.prop.columns;
+		}
+	}
+
+	/**
+	 * Sets or gets line wrapping mode. Line wrapping helps to display long lines without having to scroll horizontally.
+	 *
+	 * @param {LineWrap} [value] - One of: LineWrap.Word, LineWrap.Character, LineWrap.None (default).
+	 * @return {LineWrap|TextArea} When setting a value, `this` TextArea component is returned; otherwise a current line wrapping value is returned.
+	 * @see LineWrap
+	 */
+	lineWrap(...args)
+	{
+		return this.property("lineWrap", args);
+	}
+}
+
+TextComponent.implementClass(TextArea, ScrollableComponent);
+
+export {TextArea};

package/classes/TextComponent.js

@@ -0,0 +1,207 @@
+
+import {UIComponent} from "./UIComponent.js";
+
+/**
+ * TextComponent is not a standalone component. TextComponent extends {@link UIComponent} and serves a purpose to implement text editor related methods and properties.
+ *
+ * TextComponent is extended by {@link TextField}, {@link PasswordField}, {@link TextArea}, {@link DocumentEditor}, {@link Spinner} and {@link ComboBox}.
+ * @class
+ * @global
+ */
+export class TextComponent extends UIComponent
+{
+	/**
+	 * TextComponent constructor.
+	 * @internal
+	 * @ignore
+	 */
+	constructor(...args)
+	{
+		super(...args);
+	}
+
+	/**
+	 * Sets or gets whether component's text can be edited by user typing. Applies to components such as TextField, TextArea, DocumentEditor, ComboBox, Password, Spinner, Tree (to edit list item).
+	 *
+	 * @param {boolean} [editable] - enables or disables editing
+	 * @return {Object|boolean} If arguments is passed, returns `this` component instance, otherwise returns `boolean` value.
+	 */
+	editable()
+	{
+		return this.property("editable", arguments);
+	}
+
+	/**
+	 * Gets a boolean indicating if undo operation can be performed on the text. Only applies to components where text can be types (excluding Table cell editor).
+	 * @readonly
+	 * @type {boolean}
+	 */
+	get canUndo()
+	{
+		return this.property("canUndo", []);
+	}
+
+	/**
+	 * Gets a boolean indicating if redo operation can be performed on the text. Only applies to components where text can be types (excluding Table cell editor).
+	 * @readonly
+	 * @type boolean
+	 */
+	get canRedo()
+	{
+		return this.property("canRedo", []);
+	}
+
+	/**
+	 * Attempts to perform undo operation and returns boolean specifying if undo operations can be performed on the text again. Only applies to components where text can be types (excluding Table cell editor).
+	 * @return boolean
+	 */
+	undo()
+	{
+		return this.property("undo", []);
+	}
+
+	/**
+	 * Attempts to perform redo operation and returns boolean specifying if redo operations can be performed on the text again. Only applies to components where text can be types (excluding Table cell editor).
+	 * @return boolean
+	 */
+	redo()
+	{
+		return this.property("redo", []);
+	}
+
+	/**
+	 * Sets or gets the maximum amount of last edits that can be undone.
+	 * @param {number} [limit] - Value 0 disabled undo/redo operation. Default is 100.
+	 * @return {this|number} Returns `this` component if argument is provided, otherwise returns `number` value.
+	 */
+	undoLimit(...args)
+	{
+		if(args.length > 0) args[0] = Math.max(0, parseInt(args[0]));
+		return this.property("undoLimit", args);
+	}
+
+	/**
+	 * Sets or gets whether GUI should handle key combinations CTRL+Z and CTRL+Y to perform undo and redo actions for text editing components. If disabled, undo and redo can still be performed by calling undo() and redo() methods.
+	 * @param {boolean} enable - Enables/disables undo/redo performed by keyboard keys. Default is `true`.
+	 * @return {this|boolean} Returns `this` component if argument is provided, otherwise returns `boolean` value.
+	 */
+	undoEnabled(...args)
+	{
+		return this.property("undoEnabled", args);
+	}
+
+	/**
+	 * Copies selected text to clipboard and removes it from text. Applies only to some text editing components, such as TextArea.
+	 *
+	 * @return {this} Returns `this` component
+	 */
+	cutSelection()
+	{
+		return this.property("cutSelection", [true]);
+	}
+
+	/**
+	 * Copies selected text to clipboard. Applies only to some text editing components, such as TextArea.
+	 *
+	 * @return {this} Returns `this` component
+	 */
+	copySelection()
+	{
+		return this.property("copySelection", [true]);
+	}
+
+	/**
+	 * Inserts clipboard text into component's text as current caret position. Applies only to some text editing components, such as TextArea.
+	 *
+	 * @return {this} Returns `this` component
+	 */
+	paste()
+	{
+		return this.property("paste", [true]);
+	}
+
+	/**
+	 * Removes selected text. Applies only to some text editing components, such as TextArea, Password, DocumentEditor, etc.
+	 *
+	 * @return {this} Returns `this` component instance for method chaining.
+	 */
+	deleteSelection()
+	{
+		return this.property("deleteSelection", [true]);
+	}
+
+	/**
+	 * Selects/deselects all text of the component. Applies only to some text editing components, such as TextArea.
+	 *
+	 * @param {boolean} [selected=true] - `true` to select all, `false` to deselect all.
+	 * @return {this} Returns `this` component
+	 */
+	selectAll(selected = true)
+	{
+		return this.property("selectAll", [selected === true]);
+	}
+
+	/**
+	 * Selects text at specified position and length or gets current selection as an object {start:number, length:number, text:string}.
+	 *
+	 * @param {number} [start] - Beginning position of text to be selected.
+	 * @param {number} [end] - End position of text to be selected. If `start` argument is provided but `end` is omitted, `end` will be same as `start`, simply placing cursor at the `start` position.
+	 * @return {{start:number, end:number, text:string}|this} If arguments are provided, `this` TextField component is returned; otherwise current selection is returned as object {start:number, end:number, text:string}.
+	 * @example
+	 * // Setting selection
+	 * textfield.selection(10, 30);
+	 * @example
+	 * // getting selection
+	 * let s = textfield.selection();
+	 * console.log(`Selected from ${s.start} to ${s.end}: ${s.text}`);
+	 */
+	selection(...args)
+	{
+		let _param = [];
+		if(args.length > 0)
+		{
+			_param = [{start: Math.max(0, parseInt(args[0]))}];
+			_param[0].end = (args.length > 1) ? Math.max(0, parseInt(args[1])) : _param[0].start;
+		}
+
+		return this.property("selection", _param);
+	}
+
+	/**
+	 * Set or gets a position of caret in text editing components. Used in some text editing components only.
+	 *
+	 * @param {number} [position] - The zero-based caret position to set. If omitted, returns current caret position.
+	 * @return {this|number} If argument is provided, returns an instance of `this` component, otherwise a current caret position.
+	 */
+	caretPosition(...args)
+	{
+		return this.property("caretPosition", args);
+	}
+
+	/**
+	 * Gets, registers or unregisters an event handler function for caret position changes and text selection changes in text editing components.
+	 *
+	 * @param {function(CaretEvent): any} [callback=undefined] - The event handler function that receives a {@link CaretEvent} 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 CaretEvent
+	 * @example
+	 * // Example event object:
+	 * const e = {
+	 *   target: object,          // The component that triggered the event.
+	 *   type: string,            // `change`.
+	 *   position: number,        // New caret position
+	 *   selectionStart: number,  // Start position of selected text
+	 *   selectionEnd: number,    // End position of selected text
+	 *   line: number,            // Line of text where caret is now. Present only in some components, such as DocumentEditor.
+	 *   column: number,          // Position of caret from the beginning of the line where caret is now. Present only in multi-line text editing components, such as DocumentEditor.
+	 *   styles: object           // Text formatting information of the text segment where caret is now. Present only for DocumentEditor component when HTML is enabled.
+	 *   path: string[],          // HTML tag hierarchy. Present only for DocumentEditor component when HTML is enabled.
+	 * };
+	 */
+	onCaretEvents(...args)
+	{
+		if(args.length === 0) return this.event("onCaretEvents");
+		return this.event("onCaretEvents", args[0], args[1] ?? false);
+	}
+}

package/classes/TextField.js

@@ -0,0 +1,128 @@
+
+import {TextComponent} from "./TextComponent.js";
+
+/**
+ * TextField component is the most popular text input component used for name, address, email, and many other data types. It can be formatted to define a specific input format. It can also use a regular expression to only accept specified characters or predefined input text format.
+ *
+ * @class
+ * @global
+ * @see TextComponent
+ */
+export class TextField extends TextComponent
+{
+	/**
+	 * Creates an instance of TextField component object.
+	 */
+	constructor()
+	{
+		if(arguments.length > 0)
+		{
+			super("FormattedTextField", (new.target === TextField), arguments[0]);
+		}
+		else
+		{
+			super("FormattedTextField", (new.target === TextField));
+		}
+		
+		this.finalize(TextField, TextComponent);
+	}
+	
+	/**
+	 * Sets or gets a text mask formatter with a specified mask string and a placeholder character.
+	 *
+	 * A mask string defines the allowed characters at each position.
+	 * Each special character in the mask has a meaning:
+	 *
+	 * - `#` — A digit (0–9).
+	 * - `U` — An uppercase letter (A–Z).
+	 * - `L` — A lowercase letter (a–z).
+	 * - `A` — Any letter (A–Z or a–z).
+	 * - `?` — Any letter (case-insensitive).
+	 * - `*` — Any character (letter or digit).
+	 * - `H` — A hexadecimal character (0–9, A–F, a–f).
+	 * - `.` , `,` , `:` , `-` , `/` — These are treated as **literal** characters and appear in the formatted text.
+	 * - `'` (single quote) — Escape character. Place before a literal mask character if you don’t want it treated specially.
+	 *   Example: `"'#'###"` means literal `#` followed by three digits.
+	 *
+	 * Example masks:
+	 * - `"###-##-####"` → U.S. Social Security number (digits with dashes).
+	 * - `"(###) ###-####"` → U.S. phone number.
+	 * - `"UUU-####"` → Three uppercase letters, dash, and four digits.
+	 *
+	 * @param {string} [mask] - Text mask string. Set to empty string or `null` to clear the mask.
+	 * @param {string} [placeholder="_"] - A character to use for empty characters in the mask. Default is "_" character.
+	 * @return {{mask:string, placeholder:string}|TextField} When setting a mask, returns `this` TextField component for chaining. When called without arguments, returns the current mask information object.
+	 * @example
+	 * // U.S. Phone number mask
+	 * textfield.mask("(###) ###-####", "_");
+	 *
+	 * @example
+	 * // Date input (MM/DD/YYYY)
+	 * textfield.mask("##/##/####", "_");
+	 *
+	 * @example
+	 * // Time input (HH:MM)
+	 * textfield.mask("##:##", "_");
+	 *
+	 * @example
+	 * // Product code input
+	 * textfield.mask("AAAA-####", "_");
+	 *
+	 * @example
+	 * // Get current mask settings
+	 * const info = textfield.mask();
+	 * console.log(info.mask, info.placeholder);
+	 */
+	mask(...args)
+	{
+		if(args.length > 0)
+		{
+			const msg = {mask: args[0]};
+			if(args.length > 1) msg.placeholder = args[1];
+			return this.property("mask", [msg]);
+		}
+		else
+		{
+			return this.property("mask", []);
+		}
+	}
+	
+	/**
+	 * Sets or gets a text input filter regular expression that filters the input of text to allow only text that matches filter.
+	 *
+	 * The filter must match the **entire text** of the field, not just a single character.
+	 *
+	 * NOTE: When setting text to TextField that doesn't match this filter, the text will not be set and previous text will remain in the text field.
+	 *
+	 * @param {string} [regex_filter] - Regular expression filter string. Set to empty string to remove existing filter.
+	 * @return {string|TextField} When setting a filter, `this` TextField component is returned. When called without arguments, returns the current filter string.
+	 * @example
+	 * // Allow only digits
+	 * textfield.filter("^\\d*$");
+	 *
+	 * @example
+	 * // Allow U.S. phone numbers in format 123-456-7890
+	 * textfield.filter("^\\d{3}-\\d{3}-\\d{4}$");
+	 *
+	 * // Allow only characters valid for email address
+	 * textfield.filter([A-Za-z0-9\.\_\%\+\-\@]);
+	 *
+	 * @example
+	 * // Allow basic email addresses (accepts partial email)
+	 * textfield.filter("^[a-zA-Z0-9.\\_\\%\\+\\-]+(@([a-zA-Z0-9-]*(\\.[a-zA-Z0-9-]*)*(\\.[a-zA-Z]*)?))?$");
+	 *
+	 * @example
+	 * // Allow basic email addresses (email cannot be typed one character at at time, only pasted in full)
+	 * textfield.filter("^[A-Za-z0-9\\.\\_\\%\\+\\-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$");
+	 *
+	 * @example
+	 * // Remove filter
+	 * textfield.filter("");
+	 *
+	 */
+	filter(...args)
+	{
+		if(args.length > 0 && args[0] != null) args[0] = String(args[0]);
+		return this.property("filter", args);
+	}
+}