swing-ui 0.1.25 → 1.0.3

package/types/classes/Tabs.d.ts

@@ -0,0 +1,118 @@
+/**
+ * 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();
+    /**
+     * 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: object, options?: string | object | undefined, index?: number | undefined): Tabs;
+    /**
+     * 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(...args: any[]): number | Tabs;
+    /**
+     * Gets information about selected Tab.
+     * Returned object format is: {index:number, text:string, tooltip:string, enables:boolean, component: object}.
+     *
+     * @type {object|null}
+     * @readonly
+     */
+    readonly get selectedItem(): object | null;
+    /**
+     * 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
+     */
+    readonly get items(): object[];
+    /**
+     * 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: number, ...args: any[]): boolean | Tabs;
+    /**
+     * 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: number, ...args: any[]): string | Tabs;
+    /**
+     * 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: number, ...args: any[]): string | Tabs;
+    /**
+     * 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: number, ...args: any[]): string | null | Tabs;
+    /**
+     * 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: any[]): string | Tabs;
+    /**
+     * 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: any[]): boolean | Tabs;
+}
+import { ComponentContainer } from "./ComponentContainer.js";

package/types/classes/TextArea.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+export class TextArea extends 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?: string, action?: TextAction, i?: undefined, ...args: any[]): string | TextArea;
+    /**
+     * @internal
+     * @ignore
+     */
+    rows(...args: any[]): any;
+    /**
+     * @internal
+     * @ignore
+     */
+    columns(...args: any[]): any;
+    /**
+     * 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: any[]): LineWrap | TextArea;
+}
+import { TextComponent } from "./TextComponent.js";

package/types/classes/TextComponent.d.ts

@@ -0,0 +1,136 @@
+/**
+ * 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: any[]);
+    /**
+     * 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(...args: any[]): Object | boolean;
+    /**
+     * 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}
+     */
+    readonly get canUndo(): boolean;
+    /**
+     * 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
+     */
+    readonly get canRedo(): boolean;
+    /**
+     * 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(): any;
+    /**
+     * 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(): any;
+    /**
+     * 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: any[]): this | number;
+    /**
+     * 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: any[]): this | boolean;
+    /**
+     * 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(): this;
+    /**
+     * Copies selected text to clipboard. Applies only to some text editing components, such as TextArea.
+     *
+     * @return {this} Returns `this` component
+     */
+    copySelection(): this;
+    /**
+     * 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(): this;
+    /**
+     * 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(): this;
+    /**
+     * 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?: boolean): this;
+    /**
+     * 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: any[]): {
+        start: number;
+        end: number;
+        text: string;
+    } | this;
+    /**
+     * 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: any[]): this | number;
+    /**
+     * 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: any[]): this | Function[];
+}
+import { UIComponent } from "./UIComponent.js";

package/types/classes/TextField.d.ts

@@ -0,0 +1,94 @@
+/**
+ * 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 {
+    /**
+     * 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: any[]): {
+        mask: string;
+        placeholder: string;
+    } | TextField;
+    /**
+     * 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: any[]): string | TextField;
+}
+import { TextComponent } from "./TextComponent.js";

package/types/classes/TextShape.d.ts

@@ -0,0 +1,73 @@
+/**
+ * TextShape is used to draw text as a shape. It can also have a {@link Stroke}, background, and everything like other shapes have.
+ *
+ * In Text shape you can also specify font parameters, like name, size, underlines, italic, bold, strikethrough and more. Check out {@link FontFamily} enum for generic font family names that can be used for cross-platform compatibility.
+ *
+ * @class
+ * @global
+ * @see Shape
+ */
+export class TextShape extends Shape {
+    /**
+     * Constructor of Text shape. Color, Gradient, or background image are specified in "background" argument, because it's a Shape.
+     *
+     * @param {string} text - Text to be drawn as shape
+     * @param {Font} [font=undefined] - Font object, such as {size: 13, name: "sans-serif", ...}.
+     * @param {Stroke} [stroke=null] - Stroke object.
+     * @param {string} [background="#000000"] - Background string, CSS style. See {@link Shape#background} for details.
+     * @param {number} [opacity=1] - Opacity of the shape. Valid value is a decimal between 0 - 1.
+     * @param {number} [x=0] - X position of top-left corner of text
+     * @param {number} [y=0] - Y position of top-left corner of text
+     * @see Font
+     * //@param {number} [width] - Width of the text bounding box. null means all in one line. No wrapping.
+     * //@param {number} [height] - Height of the text bounding box. null means auto-detect, without limit.
+     */
+    constructor(text: string, font?: Font, stroke?: Stroke, background?: string, opacity?: number, x?: number, y?: number);
+    _text: string;
+    _font: {
+        size: number;
+        name: any;
+    };
+    /**
+     * Sets new text to the shape. this will recreate the graphics of the shape for the new text.
+     *
+     * @param {string} text - New text for the shape.
+     * @return {string|TextShape} If called without parameters, current text value is returned; otherwise this `Text` shape object is returned.
+     */
+    text(...args: any[]): string | TextShape;
+    /**
+     * Gets or sets the font used for the `Text` shape. See the example for font object format.
+     *
+     * @param {Font} [font] - Font object.
+     * @return {TextShape|Font}
+     * @see Font
+     * @example
+     * textShape.font({name: "sans-serif", size: 14, italic: true}); // Sets new font.
+     * const font = textShape.font(); // gets component's font
+     *
+     * // Full list of supported font properties:
+     * const font = {
+     *     name: string,           // Font name or family name from {@link FontFamily} (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
+     * };
+     * @see Font
+     * @see FontFamily
+     */
+    font(...args: any[]): TextShape | Font;
+    /**
+     * 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?: string): object;
+}
+import { Shape } from "./Shape.js";

package/types/classes/ToggleButton.d.ts

@@ -0,0 +1,84 @@
+/**
+ * ToggleButton UI component that is similar to a `Button` component, but can be selected.
+ * @class
+ * @global
+ */
+export class ToggleButton extends UIComponent {
+    /**
+     * ToggleButton constructor.
+     *
+     * @param {string} [text] - Button text
+     * @example
+     * this.button1 = new ToggleButton().text("Click Me");
+     * this.button2 = new ToggleButton("Click Me");
+     */
+    constructor(...args: any[]);
+    /**
+     * Sets/Gets selection state of the toggle button.
+     *
+     * @param {boolean} [selected] - `true` to select, `false` to deselect the toggle button.
+     * @return {boolean|ToggleButton} If called without arguments, returns `boolean` value, otherwise returns `this` ToggleButton instance.
+     */
+    selected(...args: any[]): boolean | ToggleButton;
+    /**
+     * Sets/Gets whether the toggle button can be selected by the user.
+     *
+     * @param {boolean} [selectable] - `true` to allow selection, `false` to prevent the toggle button from being selected.
+     * @return {boolean|ToggleButton} If called without arguments, returns `boolean` value, otherwise returns `this` ToggleButton instance.
+     * @see ToggleButton#selected
+     */
+    selectable(...args: any[]): boolean | ToggleButton;
+    /**
+     * Sets or gets a value of this component.
+     * @param {*} [value] - Value to be held by this component
+     * @return {ToggleButton|*} If setting a value, then an instance of `this` component is returned, otherwise current value is returned.
+     */
+    value(...args: any[]): ToggleButton | any;
+    /**
+     * Gets or sets the selected value within this ToggleButton group.
+     *
+     * If a value is provided, selects a ToggleButton within the group that matches the given value (including this one).
+     *
+     * @param {number|string} [value] - Value to select within the group.
+     * @return {ToggleButton|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(...args: any[]): ToggleButton | number | string | null;
+    /**
+     * Adds this ToggleButton to the group of another ToggleButton 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 ToggleButton to join its group.
+     * - Pass `null` to leave the current group (if any) and create its own group.
+     *
+     * @param {ToggleButton|null} [component] - A ToggleButton to join, or `null` to leave the current group. Omit to get the grouped ToggleButton components.
+     * @returns {ToggleButton|ToggleButton[]} This ToggleButton, for chaining when called with parameter, otherwise an Array of all ToggleButton components in its group.
+     */
+    group(...args: any[]): ToggleButton | ToggleButton[];
+    /**
+     * Deselect all RadioButton elements grouped with this element.
+     *
+     * @return {RadioButton} Returns `this` component.
+     */
+    clearSelection(): RadioButton;
+    /**
+     * Sets or gets an action command. This command is specified in event object for onAction(e => {alert(e.command);}) event handler.
+     * Default value of action command for a Button is it's initial text.
+     *
+     * @param {string} [command] (Optional)
+     * @return {string|Button} If called without arguments, returns `number` value, otherwise returns `this` Button instance.
+     * @example
+     * const button = new Button("Activate").addTo(window).center();
+     * button.command("Activate Motor 1");
+     * button.onAction(e => {
+     *    alert(e.command); // shows a dialog window with a message "Activate Motor 1" when button is clicked.
+     * });
+     */
+    command(...args: any[]): string | Button;
+    /**
+     * Returns current size of an icon, or `null` when no icon has been set or icon failed to load.
+     * @readonly
+     * @type {Size|null}
+     */
+    readonly get iconSize(): Size | null;
+}
+import { UIComponent } from "./UIComponent.js";

package/types/classes/ToolBar.d.ts

@@ -0,0 +1,82 @@
+/**
+ * A toolbar component that is usually used at the top of window and can hold {@link Label}, {@link Button}, {@link TextField}, {@link ComboBox}, and a {@link Separator} to display useful tools for a user.
+ *
+ * Toolbar can be draggable and can be detached and displayed in a separate dedicated window. It can also be in horizontal (default) and vertical orientation.
+ *
+ * ToolBar extends ComponentContainer, which extends UIComponent.
+ *
+ * @class
+ * @global
+ */
+export class ToolBar extends ComponentContainer {
+    /**
+     * Create an instance of ToolBar component object.
+     */
+    constructor();
+    /**
+     * Sets of gets whether the ToolBar can be detached from the Window it was added to.
+     *
+     * @param {boolean} [detachable] - `true` to enable detaching, `false` to disable.
+     * @return {boolean|ToolBar} If no parameters were passed, current value is returned, otherwise `this` Toolbar component is returned for method chaining.
+     */
+    detachable(...args: any[]): boolean | ToolBar;
+    /**
+     * Sets or gets boolean whether the toolbar is attached to main Window. Has no affect if not attached to a Window yet.
+     *
+     * @param {boolean} [attached] - `true` to attach, `false` to detach from Window component the ToolBar is added to.
+     * @param {{x:number, y:number}} [floating_position] - Position on screen where toolbar should float {x:number, y:number}.
+     * @return {boolean|ToolBar} If no parameters were passed, current state is returned; otherwise `this` Toolbar component is returned for method chaining.
+     */
+    attached(...args: any[]): boolean | ToolBar;
+    /**
+     * Sets or gets vertical or horizontal orientation of the ToolBar.
+     *
+     * @param {Orientation} [orientation] - One of these values: Orientation.Horizontal (default) or Orientation.Vertical
+     * @return {Orientation|ToolBar} If no parameters were passed, current orientation is returned; otherwise `this` Toolbar component is returned for method chaining.
+     * @see Orientation
+     */
+    orientation(...args: any[]): Orientation | ToolBar;
+    /**
+     * Sets or gets a padding size between edge of the component and items inside it, and spacing between items.
+     *
+     * @param {number} padding - Padding size in pixels.
+     * @return {number|ToolBar} If no parameters were passed, current padding is returned; otherwise `this` Toolbar component is returned for method chaining.
+     */
+    padding(...args: any[]): number | ToolBar;
+    /**
+     * Set or get alignment of components within toolbar.
+     *
+     * @param {string} [alignment] - "leading|trailing|left|center|right"
+     * @return {string|ToolBar} If no parameters were passed, current alignment is returned; otherwise `this` Toolbar component is returned for method chaining.
+     */
+    alignment(...args: any[]): string | ToolBar;
+    /**
+     * Add an invisible spacer of specified width and height.
+     *
+     * @param {number} width - Width of the spacer block
+     * @param {number} height - Height of the spacer block
+     * @return {ToolBar} Returns `this` ToolBar component for method chaining.
+     */
+    addSpacer(width: number, height: number): ToolBar;
+    /**
+     * Gets, registers or unregisters a docking event handler function. This event handler is called when the ToolBar gets attached/detached.
+     *
+     * @param {function(Object): any} [callback] - The event handler function. Receives an event object.
+     * @param {boolean} [remove=false] - Set to `true` to unregister the event handler.
+     * @returns {ToolBar|function[]} An array of handler functions if no arguments are passed, otherwise `this` component for method chaining.
+     *
+     * @example
+     * // Event object format:
+     * const e = {
+     *   target: object,                        // The ToolBar component that triggered the event.
+     *   type: string,                          // "attached", "detached".
+     *   interactive: boolean                   // Only when type is "update". `true` when update was made by the user interacting with the GUI. `false` when update was made programmatically.
+     *   orientation: Orientation               // current orientation
+     *   location: string                       // "top", "bottom", "left", "right". Only when `e.interactive` is `true`.
+     *   mouseX: number                         // Mouse X position relative to Window's content area.  Only when `e.interactive` is `true`.
+     *   mouseY: number                         // Mouse Y position relative to Window's content area.  Only when `e.interactive` is `true`.
+     * };
+     */
+    onDockEvents(callback?: (arg0: Object) => any, ...args: any[]): ToolBar | Function[];
+}
+import { ComponentContainer } from "./ComponentContainer.js";