UIComponent

const txt1 = new TextArea().anchor("top left right"); // Horizontally resizable
const txt2 = new TextArea().anchor("top left bottom"); // Vertically resizable

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.....)")); // supports base64 encoded image string

// Border object format with all possible options:
{
    style: string,       // (Required) Valid values: `none`, `line`, `dashed`, `metal`, `etched_raised`, `etched_lowered`, `bevel_raised`, `bevel_lowered`, `soft_raised`, `soft_lowered`
    size: number,        // Border size in pixels (size >= 1).
    padding: string,     // Format: "top right bottom left". Example: "5 10 5 10". Padding can be set even for border of style `none`.
    color: string,       // Only for `line` or `dashed` border style.
    rounded: boolean,    // Set to `true` to make corners rounded in `line` style, or rounded dashes in `dashed` style. Only for `line` or `dashed` border style.
    length: number,      // Length of dashes for `dashed` style.
    spacing: number,     // Length of spaces between dashes in `dashed` style.
    offset: number,      // Offset of dashes from starting location. Can be used to animate dashes.
    text: number,        // Text to show at the top left of the border to make a titled border.
    alignment: string    // A string that defines where border text is placed. Valid words: "left", "center", "right", "leading", "trailing", "above", "below", "top", "bottom". Default is "top left". "above" and "below" means above the border line of below.
    font: object         // Font to use for the border text. For details about font object check example of font() method of this component.
}

// 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

// 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

button.emit("onAction", {type: "action", command: "Click Me"}); // emits a custom event without user clicking on the button

<h2>Full list of supported font properties:</h2>
const font = {
    name: string,           // Font family name (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
};

<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();

// 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.
};

// Example event object:
const e = {
  target: object,    // The component that triggered the event.
  type: string,      // `add`, `remove`, `move`.
  ancestor: object,  // The ancestor component.
};

// 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.
};

// Example event object:
const e = {
  target: object,   // The component that triggered the event.
  type: string,     // `change`, `changing`.
                    // change - when value has changed and there is no prediction that it is still being changed by user.
                    // changing - when the value is still being changed, for example Slider object's knob is still being moved by user. Present when applicable.
  action: string,   // `inserted`, `removed`. Present for some text editing components. Indicates an action performed with text.
  position: number, // Indicates position at which text was inserted. Present when e.action is present.
  length: number    // Indicates amount of characters inserted or removed. Present when e.action is present.
};

// 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.
};

// Example event object:
const e = {
  target: object,  // The container component that triggered the event.
  type: string,    // `add`, `remove`.
  child: object    // The child component that was added or removed
};

// 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.
};

// Example event object:
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 component is dragged onto this component and dragDataType() of dragged component was set to `Component`.
  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.
};

// 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
};

// 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`.
};

// 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.
};

// 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
};

// 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
};

// 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
};

// 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
};

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.

child.remove(); // Removes child from it's parent container
child.remove(true); // Removes child component from it's parent and all its descendants recursively

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

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({h: false, v: null});  // makes horizontal scroll bar hidden, but vertical will become visible as needed

// Usage examples:
button.size(100, 25);
button.size({width: 100, height: 25});
let size = button.size();

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, ...).

button.tooltip("<html>This is line 1<br />This is line 2</html>"); // Setting HTML string with 2 lines of text