swing-ui 0.1.25 → 1.0.3

package/types/classes/Ellipse.d.ts

@@ -0,0 +1,34 @@
+/**
+ * `Ellipse` shape can draw an oval (when height and width are different) or a circle (when height and width are same).
+ *
+ * Ellipse extends the {@link Shape} class.
+ * @class
+ * @global
+ * @see Shape
+ */
+export class Ellipse extends Shape {
+    /**
+     * Creates an instance of Arc 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?: Stroke, background?: string, opacity?: number, x?: number, y?: number, width?: number, height?: number);
+    _size: {
+        width: number;
+        height: number;
+    };
+    /**
+     * 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(include?: string): object;
+}
+import { Shape } from "./Shape.js";

package/types/classes/InternalWindow.d.ts

@@ -0,0 +1,163 @@
+/**
+ * InternalWindow UI component. Extends ComponentContainer, which extends UIComponent class.
+ * Internal window is a Window like component, but it can only be added to InternalWindowContainer for window-in-window experience.
+ * By default, InternalWindow is not visible. Use .visible(true) or .show() to make it visible.
+ *
+ * For more methods for this component check UIComponent class.
+ * @class
+ * @global
+ */
+export class InternalWindow extends ComponentContainer {
+    /**
+     * Sets or gets the operation to perform when the InternalWindow's close button is clicked by a user or a close() method is called on this InternalWindow.
+     *
+     * Default value is `Window.CloseOperation.Dispose`.
+     *
+     * @param {Window.CloseOperation} [operation] - One of Window.CloseOperation enum values. (default is `Dispose`)
+     * @return {InternalWindow|Window.CloseOperation} Returns `this` component if argument is provided, otherwise returns value.
+     */
+    closeOperation(...args: any[]): InternalWindow | Window.CloseOperation;
+    /**
+     * Gets, registers or unregisters an event handler for when the state of the Window changes between normal, minimized, maximized.
+     *
+     * @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 {this}
+     *
+     * @example
+     * // Example event object:
+     * const e = {
+     *   target: InternalWindow,    // The component that triggered the event.
+     *   type: string,              // `change`
+     *   fromState: Window.State,   // Previous state
+     *   toState: Window.State,     // New state
+     *   interactive: boolean       // Indicates if the state was changed by user's interaction with window
+     * };
+     */
+    onStateChange(callback?: (arg0: Object) => any, ...args: any[]): this;
+    /**
+     * Gets, registers or unregisters an event handler for window events, such as activate, deactivate, close, etc.
+     *
+     * @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 {this}
+     *
+     * @example
+     * // Example event object:
+     * const e = {
+     *   target: InternalWindow,    // The component that triggered the event.
+     *   type: string,              // `activate`, `deactivate`, `minimize`, `restore`, `closing`, `close`, `show`
+     *   interactive: boolean       // Indicates if triggered by user's interaction with window
+     * };
+     */
+    onWindowEvents(callback?: (arg0: Object) => any, ...args: any[]): this;
+    /**
+     * Performs previously specified close operation on this InternalWindow.
+     * To specify what operation should be performed use closeOperation(Window.CloseOperation.[Nothing|Exit|Hide|Dispose])
+     *
+     * @return {InternalWindow} Returns this window component
+     */
+    close(): InternalWindow;
+    /**
+     * Sets or get a window state. Use one of these enum values: Window.State.[Normal|Minimized|Maximized]
+     *
+     * @param {Window.State} [state] - Setting new window state
+     * @returns {Window.State|Window} Returns `this` Window if argument is provided, otherwise returns current state.
+     * @example
+     * window.state(Window.State.Maximized);
+     * if(window.state() === Window.State.Maximized) console.log("It works!");
+     */
+    state(...args: any[]): Window.State | Window;
+    /**
+     * Sets or gets whether minimize button in window title bar should be visible.
+     * @param {boolean} [value] - `true` to show (default), `false` - to hide.
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    minimizable(...args: any[]): InternalWindow | boolean;
+    /**
+     * Sets or gets whether maximize button in window title bar should be visible.
+     * @param {boolean} [value] - `true` to show (default), `false` - to hide.
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    maximizable(...args: any[]): InternalWindow | boolean;
+    /**
+     * Sets or gets whether close button in window title bar should be visible.
+     * @param {boolean} [value] - `true` to show (default), `false` - to hide.
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    closable(...args: any[]): InternalWindow | boolean;
+    /**
+     * Sets or gets the ability to resize the window in GUI. Programmatically it can still be resized even when this is disabled.
+     * @param {boolean} [value] - `true` to enable (default), `false` - to disable.
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    resizable(...args: any[]): InternalWindow | boolean;
+    /**
+     * Sets or gets the ability to move the window in GUI by dragging title bar or resizing. Programmatically it can still be moved and resized even when this is disabled.
+     * This may not be supported in Linux and some other systems.
+     *
+     * @param {boolean} [value] - `true` to enable (default), `false` - to disable.
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    movable(...args: any[]): InternalWindow | boolean;
+    /**
+     * Sets or gets whether the InternalWindow should be above other internal windows in default layer. It puts the InternalWindow component in a higher layer. More than one InternalWindow can be in the top layer.
+     *
+     * @param {boolean} [value] - `true` to set enable, `false` to disable (default).
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    alwaysOnTop(...args: any[]): InternalWindow | boolean;
+    /**
+     * Make this window be selected (activated) or not.
+     *
+     * @param {boolean} [selected] - `true` to activate, `false` to deactivate.
+     * @return {InternalWindow|boolean} Returns `this` component instance if argument is set, otherwise returns current value.
+     */
+    selected(...args: any[]): InternalWindow | boolean;
+    /**
+     * Sets or gets a size of content container of this Window (doesn't include the size of the window borders like size() function does).
+     *
+     * @param {number|Size} [width_or_size] - Width integer or a Size object as a sole parameter.
+     * @param {number} [height] - Integer height value (required if the first argument is a numeric width).
+     * @return {InternalWindow|Size} Returns `this` InternalWindow component if called with parameters, otherwise returns the inner size.
+     * @see Size
+     */
+    innerSize(...args: any[]): InternalWindow | Size;
+    /**
+     * Indicates the minimum size the content container of the InternalWindow it can be resized to. It overrides previously set minSize() value.
+     *
+     * @param {number|Size} width_or_size - Width, or a Size formatted object as a sole parameter.
+     * @param {number} height - Height of the component.
+     * @returns {Size|InternalWindow|null} If called without parameters, current minimum inner Size is returned or `null` if it wasn't previously set; otherwise returns `this` component instance for chaining.
+     * @see InternalWindow#maxInnerSize
+     * @see UIComponent#minSize
+     * @see Size
+     */
+    minInnerSize(...args: any[]): Size | InternalWindow | null;
+    /**
+     * Indicates the maximum size the content container of the InternalWindow it can be resized to. It overrides previously set maxSize() value.
+     *
+     * @param {number|Size} width_or_size - Width, or a Size formatted object as a sole parameter.
+     * @param {number} height - Height of the component.
+     * @returns {Size|InternalWindow|null} If called without parameters, current maximum inner Size is returned or `null` if it wasn't previously set; otherwise returns `this` component instance for chaining.
+     * @see InternalWindow#minInnerSize
+     * @see UIComponent#maxSize
+     * @see Size
+     */
+    maxInnerSize(...args: any[]): Size | InternalWindow | null;
+    /**
+     * Gets the offset (in pixels) from each edge of the window to the content container.
+     * @type {Object}
+     * @example
+     * // Returned offset object format:
+     * {
+     *     top: number,
+     *     right: number,
+     *     bottom: number,
+     *     left: number
+     * }
+     */
+    get innerOffset(): Object;
+    #private;
+}
+import { ComponentContainer } from "./ComponentContainer.js";

package/types/classes/InternalWindowContainer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * InternalWindowContainer UI component, extends ScrollableComponent class.
+ * Internal window container is a component designed to contain InternalWindow components.
+ *
+ * For more methods for this component check {@link ComponentContainer}, {@link ScrollableComponent} and {@link UIComponent} classes.
+ * @class
+ * @global
+ */
+export class InternalWindowContainer extends ComponentContainer {
+    /**
+     * Sets or gets currently selected InternalWindow component.
+     *
+     * @window [InternalWindow] [window] - InternalWindow component that should become selected.
+     * @return {InternalWindowContainer|InternalWindow|null} - If setting, returns `this` component instance. If getting, returns selected InternalWindow or `null` (if there are no windows added yet).
+     */
+    selectedWindow(...args: any[]): InternalWindowContainer | InternalWindow | null;
+    /**
+     * Sets or gets an index of a selected InternalWindow component.
+     *
+     * @param {number} [index] - Index of an item to select.
+     * @returns {number|InternalWindowContainer} If index is specified, then `this` component instance is returned, otherwise currently selected InternalWindow index is returned.
+     * @see InternalWindow
+     * @see InternalWindowContainer#selectedWindow
+     */
+    selectedIndex(...args: any[]): number | InternalWindowContainer;
+    /**
+     * Prevents internal windows from being moved outside of visible area of window container. Otherwise windows can be move beyond the boundaries and scroll bars would appear to scroll to those windows.
+     * This may not work on some systems yet.
+     *
+     * @param {boolean} [enforce] - To enable border enforcement set `true`, to disable set `false.
+     * @return {InternalWindowContainer|boolean} If setting, returns `this` component instance, otherwise returns `boolean` value.
+     */
+    enforceBoundaries(...args: any[]): InternalWindowContainer | boolean;
+}
+import { ComponentContainer } from "./ComponentContainer.js";
+import { InternalWindow } from "./InternalWindow.js";

package/types/classes/Label.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Label UI component, extends UIComponent class.
+ * Label can be used to display plain text, HTML content, and image as an icon.
+ *
+ * For more methods for this component check UIComponent class.
+ * @class
+ * @global
+ */
+export class Label extends UIComponent {
+    /**
+     * Label constructor.
+     * @param {string} [text] - Initial text to display in the label.
+     * @example <h2>Few ways to create and use Label:</h2>
+     * // Setting text in constructor
+     * const label1 = new Label("New label text");
+     *
+     * // Setting text after instantiation
+     * const label2 = new Label().text("Second label text");
+     *
+     * // setting an image icon
+     * const label2 = new Label().icon("images/icon.png");
+     *
+     * // setting HTML content to be rendered in the label component
+     * const label2 = new Label("<html><body><h1>Label Header</h1><p>New paragraph</p></body></html>");
+     */
+    constructor(...args: any[]);
+    /**
+     * Returns current size of an icon, or `undefined` when no icon has been set or icon failed to load.
+     * @type {Object|undefined}
+     */
+    get iconSize(): Object | undefined;
+}
+import { UIComponent } from "./UIComponent.js";

package/types/classes/Line.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A `Line` shape that extends the {@link Shape} class.
+ *
+ * Line is a geometric line that doesn't have an area to be filled. For the line to be visible you specify the stroke size to be more that 0.
+ *
+ * Line points are relative to the position of the `Line` shape. If you daw multiple lines that are related to each other, make sure to set same position for each of the lines.
+ * @class
+ * @global
+ * @see Shape
+ */
+export class Line extends Shape {
+    /**
+     * Creates an instance of a Line shape.
+     *
+     * @param {Stroke} stroke - A border of the shape.
+     * @param {number} opacity - Opacity of the shape (0 to 1).
+     * @param {number} [x] - Horizontal position from the left edge.
+     * @param {number} [y] - Vertical position from the top edge.
+     * @param {number} [point1] - An object with X and Y coordinates {x: number, y: number}.
+     * @param {number} [point2] - An object with X and Y coordinates {x: number, y: number}.
+     */
+    constructor(stroke: Stroke, opacity?: number, x?: number, y?: number, point1?: number, point2?: number);
+    _points: any[];
+    /**
+     * Sets or gets the first point of the line.
+     *
+     * @param {number|{x:number, y:number}} x - X  coordinate of the point, or an object with X and Y coordinates {x: number, y: number}.
+     * @param {number} [y] - Y coordinate of the point (required only if `x` parameter is a number).
+     * @returns {Line|Point} If called without parameters, returns current point; otherwise returns this Line shape for chaining.
+     */
+    point1(...args: any[]): Line | Point;
+    /**
+     * Sets or gets the second point of the line.
+     *
+     * @param {number|{x:number, y:number}} x - X  coordinate of the point, or an object with X and Y coordinates {x: number, y: number}.
+     * @param {number} [y] - Y coordinate of the point (required only if `x` parameter is a number).
+     * @return {Line|Point} If called without parameters, returns current point; otherwise returns this Line shape for chaining.
+     */
+    point2(...args: any[]): Line | Point;
+    /**
+     * 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(include?: string): object;
+}
+import { Shape } from "./Shape.js";

package/types/classes/List.d.ts

@@ -0,0 +1,223 @@
+/**
+ * List UI component, extends ScrollableComponent class, which extends UIComponent class.
+ * List can be a list of text items, icons, or icons and text. List direction can be vertical, horizontal with wrapping, and vertical with wrapping.
+ * Check example below to become familiar with how the item Object is formatted.
+ *
+ * For more methods for this component check UIComponent class.
+ * @class
+ * @global
+ * @see ScrollableComponent
+ * @see ListItem
+ * @example
+ *
+ * // Item Object format (All fields other than "text" are optional):
+ * {
+ *     text: string,           // Item text (Required)
+ *     [id]: string|number,    // Value that can be used by software logic to identify this item
+ *     [value]: string|number, // Additional value to be stored in the item for later use.
+ *     [icon]: string,         // Absolute or relative path to icon image, base64 encoded image string, or `null` to remove icon.
+ *     [color]: string,        // Item text color as a 6 character hex encoded color string (e.g. #665500)
+ *     [background]: string,   // Item background color as a 6 character hex encoded color string (e.g. #665500)
+ *     [tooltip]: string,      // Tooltip text to show when pointer hover the item. (in List and Tree components only)
+ *     [font]: font object     // Object{name: string, size: number, bold: boolean, ...}. See complete list of font properties in example of font() method.
+ * }
+ */
+export class List extends ScrollableComponent {
+    /**
+     * Layouts that can be used to display list items.
+     * @readonly
+     * @enum {number}
+     * @property {number} Vertical - Items are arranged in a single vertical column.
+     * @property {number} VerticalWrap - Items flow vertically and wrap into additional columns if needed.
+     * @property {number} HorizontalWrap - Items flow horizontally and wrap into additional rows if needed.
+     * @example
+     * list.layout(List.Layout.VerticalWrap);
+     */
+    static readonly Layout: Readonly<{
+        Vertical: 0;
+        VerticalWrap: 1;
+        HorizontalWrap: 2;
+    }>;
+    /**
+     * Adds a list item at the end of the list, or inserts the item at specified index.
+     *
+     * @param {string|number|ListItem} item - List item as a string, number, or ListItem formatted object.
+     * @param {number} index - Integer position at which to add the item.
+     * @returns {number} Returns an index at which the item was inserted, or -1 if item was not inserted for some reason.
+     * @see ListItem
+     * @example
+     * const i = combo1.add({text: "New Item", ...more optional properties}); // Adding item as object
+     * const i = combo1.add("New Item"); // Adding item as string
+     * const i = combo1.add(45); // Adding item as number
+     */
+    add(item: string | number | ListItem, index?: number): number;
+    /**
+     * If index argument is specified, N amount of items starting form specified index will be removed.
+     * If called without parameters, this component will be removed from it's parent. See examples below.
+     *
+     * @param {number} [index=undefined] - Index of the item to remove. If not provided, the component will be removed from its parent.
+     * @param {number} [deleteCount=1] - Amount of items to remove
+     * @returns {List} Returns `this` ComboBox instance.
+     * @example
+     * list.remove(); // removes the component from it's parent container
+     * list.remove(4); // removes list item at index 4
+     * list.remove(4, 3); // removes 3 items starting at index 4
+     */
+    remove(...args: any[]): List;
+    /**
+     * Gets the amount of items in the list.
+     * @readonly
+     * @type {number}
+     */
+    readonly get length(): number;
+    /**
+     * Gets, sets or updates an item at a specified index. Check usage examples below.
+     *
+     * @param {number} index - Index of the list item
+     * @param {ListItem} [item] - Item object. See object format in the example of ComboBox.add() documentation.
+     * @param {boolean} [update=false] - `true` to update specified item properties with provided item properties, `false` to replace the item with new one. Default is `false`.
+     * @returns {List|ListItem} If item argument is passed, then `this` List instance is returned, otherwise item at specified index is returned. If index is out of range, `undefined` is returned.
+     * @see ListItem
+     * @example
+     * const item = list.item(3); // gets the item at index 3
+     * list.item(3, {text: "New text", value:"new value"}); // replaces item at index 3
+     * list.item(3, {background: "#FF7777"}, true); // changes item's background color at index 3
+     */
+    item(i: any, ...args: any[]): List | ListItem;
+    /**
+     * Sets selected indexes of elements in the list or returns an array of selected indexes.
+     *
+     * @param {number[]|number|null} [indices] - Array of indexes to be selected, one index number, `null` or -1 to deselect all items
+     * @returns {List|Array} When setting, `this` component instance is returned, otherwise an array indexes of selected items is returned.
+     */
+    selection(...args: any[]): List | any[];
+    /**
+     * Gets an Array of selected items. Returns selected items as an Array of objects, or empty Array if no item is selected.
+     *
+     * @readonly
+     * @type {ListItem[]}
+     */
+    readonly get selectedItems(): ListItem[];
+    /**
+     * Sets or gets an index of a selected item. Can be used to make one item at certain index to be selected.
+     * To select more than one item make sure to enable multi-selection by selectionMode(SelectionMode.Multiple), and then use selection() method instead.
+     *
+     * @param {number} [index] - Index of an item to select.
+     * @returns {List|number} If index is specified, then `this` component instance is returned, otherwise currently selected index is returned.
+     */
+    selectedIndex(...args: any[]): List | number;
+    /**
+     * Sets or returns a selection mode, which defines how list items can be selected (only one item, multiple items together as a range, or any combination of items).
+     *
+     * @param {SelectionMode} mode - One of: SelectionMode.Single, SelectionMode.Multiple, SelectionMode.Range. See {@link SelectionMode}.
+     * @returns {SelectionMode|List}
+     * @see SelectionMode
+     */
+    selectionMode(...args: any[]): SelectionMode | List;
+    /**
+     * Selects/Deselects all items in the List
+     *
+     * @param {boolean} [selected=true] - `true` to select all items, `false` to deselect.
+     * @return {List} Returns an instance of `this` List for method chaining.
+     */
+    selectAll(selected?: boolean): List;
+    /**
+     * Sets or gets items of the list.
+     * @arg {Array.<(object|string|number)>} [items] - Array of items as objects or strings
+     * @returns {List|object[]} If items are passed, returns an instance of `this` List, otherwise returns an Object Array of items.
+     * @example
+     * list.items([{value:1, text:"Label 1", ...}, [{value:2, text:"Label 2", ...}); // Sets items by an array of objects
+     * list.items(["Label 1", "Label 2", ...]); // Sets items by an array of strings
+     * list.items(["Label 1", {value:1, text:"Label 1", ...}, 45); // Sets items as an array of strings, objects and numbers
+     */
+    items(...args: any[]): List | object[];
+    /**
+     * Removes all items from the list.
+     * @returns {List} Returns an instance of ths List.
+     */
+    clear(): List;
+    /**
+     * Sets or get layout of the list (Vertical, Horizontal Wrap, or Vertical Wrap).
+     * Default is Vertical.
+     *
+     * @param {List.Layout} [layout] - List.Layout.[Vertical|HorizontalWrap|VerticalWrap]
+     * @return {List.Layout|List} Returns `this` component instance if argument is provided, otherwise returns the current layout.
+     */
+    layout(...args: any[]): Readonly<{
+        Vertical: 0;
+        VerticalWrap: 1;
+        HorizontalWrap: 2;
+    }> | List;
+    /**
+     * Sets the size of each item in the list.
+     *
+     * @param {number|object} [width_or_both] - Width of items as a number, same width and height as a number, or size Object to set both width and height (see examples below).
+     * @param {number} [height] - Height of items.
+     * @return {object|List} Returns `this` component instance if at least one argument is provided, otherwise returns the current item size.
+     * @example
+     * itemSize(null) - Resets item size to default (auto size).
+     * itemSize(100) - Both width and height are set to 100px.
+     * itemSize(100, 150) - width 100, height 150
+     * itemSize({width:100, height:150})
+     * itemSize() - retrieves size and returns {width:number, height:number} or NULL if it was not previously set.
+     */
+    itemSize(...args: any[]): object | List;
+    /**
+     * Sets or gets an alignment of item's label and icon within a list item.
+     *
+     * @param {string} [alignment] - One or combination of alignment describing strings: top, bottom, left, right, and center. Maximum one horizontal and maximum one vertical alignment is allowed.
+     * @return {string|List} Returns `this` component instance if at least one argument is provided, otherwise returns the current layout.
+     * @example
+     * list.alignment("top left");   // positions label at the top left corner of list item
+     * list.alignment("bottom");     // positions label at the bottom-center of list item
+     * list.alignment("top center"); // positions label at the top-center of list item
+     * list.alignment("center");     // positions label at the center vertically and horizontally
+     */
+    alignment(...args: any[]): string | List;
+    /**
+     * Gets or sets a padding for each item in the list. See example below.
+     *
+     * @param {number|string} [padding] - Number for same padding on all sides, string to specify padding for each side "top right bottom left"
+     * @return {string|List} Returns `this` component instance if at least one argument is provided, otherwise returns current padding.
+     * @example
+     * list.itemPadding(3);                // defines same padding for top, right, bottom and left.
+     * list.itemPadding("5 0 5 3");        // defines padding for each side separately, top=5, right=0, bottom=5 and left=3.
+     * const padding = list.itemPadding(); // gets the padding object
+     */
+    itemPadding(...args: any[]): string | List;
+    /**
+     * Sets or gets whether to allow selecting list items with a click of a right mouse button.
+     * @param {boolean} [enable] - Boolean value that enables or disables right-click item selection.
+     * @return {boolean|List} Returns `this` component instance if at least one argument is provided, otherwise returns current value.
+     */
+    rightClickSelect(...args: any[]): boolean | List;
+    /**
+     * Finds items whose text matches the string argument. If item is {text: "First Item", value: "item1"}, it should be found by passing value "First Item".
+     *
+     * @param {string} value - Search by this text
+     * @return {ListItem[]} Returns an array of found items. Each found item will have an `index` property fo convenience.
+     */
+    findByText(value: string): ListItem[];
+    /**
+     * Finds first item whose value matches the argument. If item is {text: "First Item", value: "item1", id: 1}, it should be found by passing value "item1".
+     *
+     * @param {string|number} value - Search by this text or number
+     * @return {ListItem[]} Returns an array of found items. Each found item will have an `index` property fo convenience.
+     */
+    findByValue(value: string | number): ListItem[];
+    /**
+     * Finds first item whose ID matches the argument. If item is {text: "First Item", value: "item1", id: 1}, it should be found by passing value 1.
+     *
+     * @param {string|number} value - Search by this text or number
+     * @return {ListItem[]} Returns an array of found items. Each found item will have an `index` property fo convenience.
+     */
+    findByID(value: string | number): ListItem[];
+    /**
+     * Scrolls the scroll bars to make sure the item at specified index is visible. If position is specified, the item will be placed at the specified position between the top and bottom of the List component.
+     *
+     * @param {number} index - Index of a list item to make visible.
+     * @param {number} [position] - A decimal number between 0 and 1 indicating vertical position in percentages (0% - 100% of the height of the component). If omitted, the item will only become visible, but not at a specific location.
+     */
+    scrollToIndex(index?: number, position?: number): any;
+}
+import { ScrollableComponent } from "./ScrollableComponent.js";