import "bootstrap-icons/font/bootstrap-icons.min.css";
import '../src/css/patch.css';
export declare class Widget {
    #private;
    /**
    * @param tag - The tag type of the widget.
    * @param ns - The namespace of the widget.
    */
    constructor(tag?: string | HTMLElement, ns?: string);
    /**
     * Adds child widget to the widget.
     * @param child - The child widget to add.
     * @returns - Itself.
     */
    addChild(child: Widget): this;
    /**
     * Adds child widgets to the widget.
     * @param children - The child widgets to add.
     * @returns - Itself.
     */
    addChildren(...args: Widget[]): this;
    /**
     * Adds given CSS classes to the widget.
     * @param args
     * @returns - Itself.
     */
    addClass(...args: string[]): this;
    /**
     * Attaches an event handler to the widget
     * @param event - A String that specifies the name of the {@link https://developer.mozilla.org/en-US/docs/Web/Events | event.}
     * @param callback - Specifies the function to run when the event occurs.
     * @param options - A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.
     * @example
     * ```javascript
     * myWidget.addEventListener("click", () => consoleLog("clicked"))
     * ```
     * @returns - Itself.
     */
    addEventListener(event: string, callback: EventListener, options?: boolean | AddEventListenerOptions): this;
    /**
     * The classes are named using the format {property}{sides}-{size} for xs and
     * {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl. <br>
     * <br>
     * Where property is one of: <br>
     * - m - for classes that set margin <br>
     * - p - for classes that set padding <br>
     *  <br>
     * Where sides is one of: <br>
     * - t - for classes that set margin-top or padding-top <br>
     * - b - for classes that set margin-bottom or padding-bottom <br>
     * - s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL <br>
     * - e - for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL <br>
     * - x - for classes that set both *-left and *-right <br>
     * - y - for classes that set both *-top and *-bottom <br>
     * - blank - for classes that set a margin or padding on all 4 sides of the element <br>
     *  <br>
     * Where size is one of: <br>
     * - 0 - for classes that eliminate the margin or padding by setting it to 0 <br>
     * - 1 - (by default) for classes that set the margin or padding to $spacer * .25 <br>
     * - 2 - (by default) for classes that set the margin or padding to $spacer * .5 <br>
     * - 3 - (by default) for classes that set the margin or padding to $spacer <br>
     * - 4 - (by default) for classes that set the margin or padding to $spacer * 1.5 <br>
     * - 5 - (by default) for classes that set the margin or padding to $spacer * 3 <br>
     * - auto - for classes that set the margin to auto <br>
     *
     * @example
     * ```javascript
     * myWidget.setSpace("m-2", "ps-1")
     * ```
     * @param args
     * @returns - Itself.
     */
    addSpacing(...args: string[]): this;
    /**
    * Sets alignment of the widget along the {@link ALIGN_CROSS | cross axis} in parent layout space. This is the vertical axis for {@link Row | Row}, horizontal axis for {@link Column | Column}.
    * @param alignment
    * @param breakpoint
    * @example
    * ```javascript
    * // Button will be aligned to center position in it's parent space.
    * myWidget.align("center")
    * // Button will be aligned to start position in it's parent space.
    * // Once small breakpoint is reached, button will be aligned to end position.
    * myWidget.align("start").align("end", "sm")
    * ```
    * @returns - Itself.
    */
    align(alignment?: ALIGNMENT, breakpoint?: BREAKPOINT): this;
    /**
    * Sets the alingment of the widget's inner text.
    * @param value
    * @param breakpoint
    * @returns - Itself.
    */
    alignText(value?: "start" | "center" | "end", breakpoint?: BREAKPOINT): this;
    /**
    * Allows performing additional computations inside method chain by providing object - Itself..
    * @param callback
    * @example
    * ```javascript
    * myWidget.addChild(
    *   new Text().apply(self => {
    *       count(self, 0);
    *   })
    * )
    * function count(widget, timer) {
    *   widget.setText(`${timer++} seconds passed.`);
    *   setTimeout(()=>count(widget, timer), 1000);
    * }
    * ```
    * @returns - Itself.
    */
    apply(callback: (self: Widget) => void): this;
    /**
     * Applies a Gaussian blur to the input image.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    blur(value?: number, unit?: UNIT): this;
    /**
     * Clears all children from the widget.
     * @returns - Itself.
     */
    clearChildren(): this;
    /**
     * Clears all events from the widget.
     * @returns - Itself.
     */
    clearEventListeners(): this;
    /**
     * Clears space classes from the widget.
     * @returns - Itself.
     */
    clearSpacing(): this;
    click(): this;
    /**
     * Disables the widget for user interaction.
     * @returns - Itself.
     */
    disable(): this;
    /**
     * Sets the visibility property of element.
     * @param value
     * @param breakpoint
     * @returns - Itself.
     */
    display(value?: boolean, breakpoint?: BREAKPOINT): this;
    /**
     * Enables the widget for user interaction.
     * @returns - Itself.
     */
    enable(): this;
    /**
     * Fills the widget on parent's available space on main axis relative to its content size or width value if its set.
     * @param value
     * @param breakpoint
     * @returns - Itself.
     */
    fill(value?: boolean, breakpoint?: BREAKPOINT): this;
    /**
     * Fixes position on the screen. It will only work if parent's overflow poroperty not set.
     * @param value
     * @returns - Itself.
     */
    fixPosition(value?: "fixed-top" | "fixed-bottom" | "sticky-top" | "sticky-sm-top" | "sticky-md-top" | "sticky-lg-top" | "sticky-xl-top"): this;
    /**
     * Sets focus on the widget, if it can be focused. The focused widget will receive keyboard and similar events by default
     * @returns - Itself.
     */
    focus(): this;
    /**
     * Sets the font type to italic.
     * @param value
     * @returns - Itself.
     */
    fontItalic(value?: boolean): this;
    /**
     * Sets font type to monospace.
     * @param value
     * @returns - Itself.
     */
    fontMonospace(value?: boolean): this;
    /**
     * Returns the value of a specified attribute on the widget.
     * @returns Attribute value of specified attribute.
     */
    getAttribute(attribute: string): string | undefined;
    /**
     * Returns child widget from the specified index.
     * @param idx
     * @returns Child widget from the specified index.
     */
    getChild(idx: number): Widget;
    /**
     * Returns children widgets as array.
     * @returns Children widgets as array.
     */
    getChildren(): Widget[];
    /**
     * Returns the inner height of an element in pixels.
     * @returns The inner height of an element in pixels.
     */
    getClientHeight(): number;
    /**
     * Returns the width of the left border of an element in pixels.
     * @returns The width of the left border of an element in pixels.
     */
    getClientLeft(): number;
    /**
     * Returns the width of the top border of an element in pixels.
     * @returns The width of the top border of an element in pixels.
     */
    getClientTop(): number;
    /**
     * Returns the inner width of an element in pixels.
     * @returns The inner width of an element in pixels.
     */
    getClientWidth(): number;
    /**
     * Returns height value of the widget.
     * @returns height of the widget.
     */
    getHeight(): string;
    /**
     * Returns inner html value of the widget.
     * @returns Inner html value of the widget.
     */
    getInnerHTML(): any;
    /**
     * Returns html dom element of the widget.
     * @returns Html dom element of the widget.
     */
    getDom(): HTMLElement;
    /**
     * Returns max height value of the widget.
     * @returns Max height value of the widget.
     */
    getMaxHeight(): string;
    /**
     * Returns max width value of the widget.
     * @returns Max width value of the widget.
     */
    getMaxWidth(): string;
    /**
     * Returns min height value of the widget.
     * @returns Min height value of the widget.
     */
    getMinHeight(): string;
    /**
     * Returns min width value of the widget.
     * @returns Min width value of the widget.
     */
    getMinWidth(): string;
    /**
     * Returns the height of an element, including vertical padding and borders, as an integer.
     * @returns the height of an element, including vertical padding and borders, as an integer.
     */
    getOffsetHeight(): number;
    /**
     * Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.
     * @returns The number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.
     */
    getOffsetLeft(): number;
    /**
     * Returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.
     * @returns The distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.
     */
    getOffsetTop(): number;
    /**
     * Returns the layout width of an element as an integer.
     * @returns The layout width of an element as an integer.
     */
    getOffsetWidth(): number;
    /**
     * Returns parent widget of the widget.
     * @returns Parent widget of the widget.
     */
    getParent(): Widget | undefined;
    /**
     * Returns the value of a specified property of the widget's dom element.
     * @returns Value of a specified property.
     */
    getProperty(property: string): any;
    /**
     * Returns the height of an element's content, including content not visible on the screen due to overflow
     * @returns the height of an element's content, including content not visible on the screen due to overflow.
     */
    getScrollHeight(): number;
    /**
     * Returns the number of pixels that an element's content is scrolled from its left edge.
     * @returns the number of pixels that an element's content is scrolled from its left edge.
     */
    getScrollLeft(): number;
    /**
     * Returns the number of pixels that an element's content is scrolled vertically.
     * @returns the number of pixels that an element's content is scrolled vertically.
     */
    getScrollTop(): number;
    /**
     * Returns the width of an element's content, including content not visible on the screen due to overflow.
     * @returns the width of an element's content, including content not visible on the screen due to overflow.
     */
    getScrollWidth(): number;
    /**
     * Returns the specified style property of the widget.
     * @param style
     * @returns Style property
     */
    getStyle(style: string): string;
    /**
     * Returns inner text of the widget.
     * @returns Inner text of the widget.
     */
    getText(): any;
    /**
     * Transform value of the widget.
     * @returns Transform value.
     */
    getTransform(): string;
    /**
     * Returns width value of the widget.
     * @returns width of the widget.
     */
    getWidth(): string;
    /**
     * It will grow on its parent main axis.
     * @param {number|string} [value = 1] - { 0 | 1 | "none"}
     * @param {BREAKPOINT} [breakpoint] - { "sm" | "md" | "lg" | "xl" | "xxl" | "none" }
     * @returns {Widget} - Self.
     */
    /**
     * Fills the widget on parent's available space on main axis.
     * @param value
     * @returns - Itself.
     */
    grow(value?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "clear"): this;
    /**
     * Checks if specified attribute is present in the widget.
     * @param attribute
     * @returns
     */
    hasAttribute(attribute: string): boolean;
    /**
     * Checks if specified widget is child of the widget.
     * @param child
     * @returns
     */
    hasChild(child: Widget): boolean;
    /**
     * Checks if specified CSS class is present in the widget.
     * @param child
     * @returns
     */
    hasClass(className: string): boolean;
    /**
     * Hides the widget and removes element space in the page.
     * @returns - Itself.
     */
    hide(): this;
    /**
     * Hides tooltip of the widget.
     * @returns - Itself.
     */
    hideTooltip(): this;
    /**
     * Inserts child widget at specified index.
     * @param idx
     * @param child
     * @returns - Itself.
     */
    insertChild(idx: number, child: Widget): this;
    /**
     * Inverts the color samples in the input image.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    invert(value?: number, unit?: UNIT): this;
    /**
     * Returns hidden state of the widget.
     * @returns {boolean}
     */
    isHidden(): boolean;
    /**
     * Checks if widget is in the visible DOM hierarch.
     * @returns
     */
    isInViewport(): boolean;
    onClick(callback?: (self: Widget, e: Event) => void): this;
    /**
     * Removes given attributes from widget.
     * @param args
     * @returns - Itself.
     */
    removeAttribute(...args: string[]): this;
    /**
     * Removes given children from widget.
     * @param args
     * @returns - Itself.
     */
    removeChild(...args: Widget[]): this;
    /**
     * Removes child from widget at given index.
     * @param idx
     * @returns - Itself.
     */
    removeChildAt(idx: number): this;
    /**
     * Removes given CSS classes from widget.
     * @param args
     * @returns - Itself.
     */
    removeClass(...args: string[]): this;
    /**
     * Removes specified listener from widget.
     * @param callback
     * @param evnt
     * @returns - Itself.
     */
    removeEventListener(callback: EventListener, evnt?: string): this;
    /**
     * Removes given styles from widget.
     * @param args
     * @returns - Itself.
     */
    removeStyle(...args: string[]): this;
    /**
     * Removes given space classes from widget.
     * @param args
     * @returns - Itself.
     */
    removeSpacing(...args: string[]): this;
    /**
     * Renders widget to given html element once document is loaded.
     * @param dom
     * @returns - Itself.
     */
    render(dom?: HTMLElement): this;
    /**
     * Replaces child widget at specified index.
     * @param child
     * @param idx
     * @returns - Itself.
     */
    replaceChild(idx: number, child: Widget): this;
    replaceChildren(...child: Widget[]): this;
    /**
     * Defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.
     * @param value
     * @param unit
     * @example
     * ```javascript
     * // Rotates element by 90 degrees
     * myWidget.rotate(90)
     *
     * // Rotates element by 2 turns
     * myWidget.rotate(2, "turn")
     * ```
     * @returns - Itself.
     */
    rotate(value?: number, unit?: ANGLE): this;
    /**
    * Runs given function after widget dom is mounted to document. Runs immediately if dom is already mounted.
    * @param callback - Function to run after widget's dom is mounted to document.
    * @example
    * ```javascript
    * myWidget.runOnMount(() => console.log("dom is mounted!"))
    * ```
    * @returns - Itself.
    */
    runOnMount(callback: ((self: Widget) => void)): this;
    /**
     * Saturates or desaturates the input image.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    saturate(value?: number, unit?: UNIT): this;
    /**
     * Defines a transformation that resizes an element on the 2D plane
     * @param x
     * @param y
     * @example
     * ```javascript
     * myWidget.scale(2, 2)
     * ```
     * @returns - Itself.
     */
    scale(x?: number, y?: number): this;
    /**
     * Scrolls widget into view.
     * @param alignToTop
     * @example
     * ```javascript
     * myWidget.scrollIntoView()
     * ```
     * @returns - Itself.
     */
    scrollIntoView(alignToTop?: boolean | ScrollIntoViewOptions): void;
    /**
     * Defines a transformation that skews an element on the 2D plane.
     * @param x
     * @param y
     * @param unit
     * @example
     * ```javascript
     * myWidget.skew(.2, .4, "rad")
     * ```
     * @returns - Itself.
     */
    skew(x?: number, y?: number, unit?: ANGLE): this;
    /**
     * Sets given attributes to widget's HTML element.
     * @param attribute
     * @param value
     * @returns - Itself.
     */
    setAttribute(attribute: string, value: any): this;
    /**
     * Sets background color of widget.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     * @returns - this.
     */
    setBgColor(value?: BG_COLOR, gradient?: boolean): this;
    /**
     * Sets background images on the widget.
     * @param value - Path to image, valid inputs: "url", "none", "initial", "inherit", "revert", "unset"
     * @returns - Itself.
     */
    setBgImage(value?: "inherit" | "initial" | "revert" | "unset" | string): this;
    /**
     * Creates an image consisting of a progressive transition between two or more colors.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() | linear-gradient}
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient() | radial-gradient}
     * @param values
     * @param options
     * @param options.type
     * @param options.repeat
     * @param options.angleOrPos - The angle or position of the gradient.
     * @example
     * ```javascript
     * myWidget.setBgGradient([green, "red 50%"], {type: linear, angleOrPos:60})
     * myWidget.setBgGradient([green %10, "red 50%"], {type: linear, angleOrPos:"to bottom right"})
     * myWidget.setBgGradient([green, "red 50%"], {type: radial, angleOrPos:"closest-corner"})
     * ```
     * @returns - Itself.
     */
    setBgGradient(values?: string[], options?: {
        type?: "linear" | "radial";
        repeat?: boolean;
        angleOrPos?: number | string;
    }): this;
    /**
     * Sets the initial position for each background image.
     * @param x
     * @param y
     * @param unit
     * @returns - Itself.
     */
    setBgPosition(x?: "left" | "center" | "right" | "inherit" | "initial" | "revert" | "unset" | number, y?: "top" | "center" | "bottom" | number, unit?: UNIT): this;
    /**
     * Sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
     * @param x
     * @param y
     * @returns - Itself.
     */
    setBgRepeat(x?: "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y" | "inherit" | "initial" | "revert" | "unset", y?: "repeat" | "space" | "round" | "no-repeat"): this;
    /**
     * Sets the size of the widgets's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
     * @param x
     * @param y
     * @param unit
     * @returns - Itself.
     */
    setBgSize(x?: "cover" | "contain" | "inherit" | "initial" | "revert" | "unset" | "auto" | number, y?: "auto" | number, unit?: UNIT): this;
    /**
     * Enables backgroud hover color effect.
     * @param value - Dark or light, disables if undefined.
     * @returns
     */
    setBgHoverColor(value?: "dark" | "light"): this;
    /**
     * Adds or removes this element’s borders
     * @param value - Additive border value.
     * @param parameters
     * @param parameters.subtractive - Reverts border value.
     * @param parameters.color - Hex color code, valid inputs: "rgb", "rgba", "rrggbb", "rrggbbaa", "#rgb", "#rgba", "#rrggbb", "#rrggbbaa" | "initial" | "inherit"
     * @param parameters.width - Line thickness.
     * @returns - Itself.
     */
    setBorder(value?: BORDER | BORDER[], options?: {
        subtractive?: boolean;
        color?: COLOR;
        width?: 1 | 2 | 3 | 4 | 5;
    }): this;
    /**
     * The bottom property participates in setting the vertical position of a {@link POSITION | positioned element.} It has no effect on non-positioned elements.
     * @param value
     * @param unit
     * @returns
     */
    setBottomPos(value?: number | string, unit?: UNIT): this;
    /**
     * Applies a linear multiplier to the input image, making it appear brighter or darker
     * @param value
     * @param unit
     * @returns
     */
    setBrightness(value?: number, unit?: UNIT): this;
    /**
     * Replaces children with the given ones.
     * @param args
     * @returns - Itself.
     */
    setChild(child?: Widget): this;
    /**
     * Replaces CSS classes with the given ones.
     * @param args
     * @returns - Itself.
     */
    setClass(...args: string[]): this;
    /**
     * Adjusts the contrast of the input image.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setContrast(value?: number, unit?: UNIT): this;
    /**
     * The {@link https://developer.mozilla.org/en-US/docs/Web/CSS/cursor | cursor} property sets the type of mouse cursor, if any, to show when the mouse pointer is over an widget.
     * @param value
     * @returns - Itself.
     */
    setCursor(value?: CURSOR): this;
    /**
     * Sets the display order of item.
     * @param value
     * @param breakpoint
     * @returns - Itself.
     */
    setDisplayOrder(value?: 0 | 1 | 2 | 3 | 4 | 5 | "first" | "last", breakpoint?: BREAKPOINT): this;
    /**
     * Applies a drop shadow effect to the input image.
     * @param x
     * @param y
     * @param options
     * @param options.blur
     * @param options.color
     * @param options.unit
     * @returns - Itself.
     */
    setDropShadow(x?: number, y?: number, options?: {
        blur?: number;
        color?: string;
        unit?: UNIT;
    }): this;
    /**
     * Specifies whether the content of an widget should be editable.
     * @param value
     * @returns - Itself.
     */
    setEditable(value?: boolean): this;
    /**
     * Sets the size of the font.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setFontSize(value?: number | string, unit?: UNIT): this;
    /**
     * Sets the tickness of the font.
     * @param value
     * @returns - Itself.
     */
    setFontWeight(value?: "bold" | "bolder" | "normal" | "light" | "lighter"): this;
    /**
     * Converts the input image to grayscale.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setGrayscale(value?: number, unit?: UNIT): this;
    /**
     * Sets height of the widget.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setHeight(value?: number | string, unit?: UNIT): this;
    /**
     * Rotates the hue of an widget and its contents.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setHue(value?: number, unit?: ANGLE): this;
    /**
     * Sets the inner HTML of the widget.
     * @param value
     * @returns - Itself.
     */
    setInnerHTML(value?: string): this;
    /**
     * The left property participates in setting the horizontal position of a {@link POSITION | positioned element.} It has no effect on non-positioned elements.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setLeftPos(value?: number | string, unit?: UNIT): this;
    /**
     * Sets max height of the widget.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setMaxHeight(value?: number | string, unit?: UNIT): this;
    /**
     * Sets max width and max height of the widget.
     * @param width
     * @param height
     * @param unit
     * @returns - Itself.
     */
    setMaxSize(width?: number | string, height?: number | string, unit?: UNIT): this;
    /**
     * Sets max width of the widget.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setMaxWidth(value?: number | string, unit?: UNIT): this;
    /**
     * Sets min height of the widget.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setMinHeight(value?: number | string, unit?: UNIT): this;
    /**
     * Sets min width and min height of the widget.
     * @param width
     * @param height
     * @param unit
     * @returns - Itself.
     */
    setMinSize(width?: number | string, height?: number | string, unit?: UNIT): this;
    /**
     * Sets min width of the widget.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setMinWidth(value?: number | string, unit?: UNIT): this;
    /**
     * A string representing the attribute's qualified name.
     * @param {string} value
     */
    setName(name?: string): this;
    /**
     * A string representing the attribute's qualified name.
     */
    getName(): string | undefined;
    /**
     * Sets the opacity of an widget. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
     * @param value
     * @returns - Itself.
     */
    setOpacity(value?: number): this;
    /**
     * Sets the rotation origin. Clears if nothing is passed.
     * @param x
     * @param y
     * @param unit
     * @returns - Itself.
     */
    setOrigin(x?: "left" | "center" | "right" | number, y?: "top" | "center" | "bottom" | number, unit?: UNIT): this;
    /**
     * Sets the desired behavior for an element's overflow. Clears if nothing is passed.
     * @param value
     * @returns - Itself.
     */
    setOverflow(value?: OVERFLOW, breakpoint?: BREAKPOINT): this;
    /**
     * Set parent of the widget. Use addChild instead.
     * @param parent
     * @returns - Itself.
     */
    private setParent;
    /**
     * Arrange elements with the edge.
     * @param args
     * @returns - Itself.
     */
    setPlacement(...args: PLACEMENT[]): this;
    /**
     * Enables or disables cursor interaction for this element.
     * @param value
     * @returns - Itself.
     */
    setPointerInteraction(value?: "none" | "auto"): this;
    /**
     * Adds given propery to widget's DOM object.
     * @param property
     * @param value
     * @returns
     */
    setProperty(property: string, value: any): this;
    /**
     * Sets the position of the element. Clears if nothing is passed.
     * @param value
     * @param unit
     * @returns - Itself.
     * @example
     * ```javascript
     * widget.setPosition("center")
     * widget.setPosition(["left", "top"])
     * widget.setPosition({top: 10, left: 20})
     * widget.setPosition({bottom: 10, right: 20}, "em")
     * ```
     */
    setPosition(value?: SIDE | SIDE[] | {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    }, unit?: UNIT): this;
    /**
    * The position property sets how an element is positioned in a document. The setTopPos, setRightPos, setBottomPos, and setLeftPos properties determine the final location of positioned elements.
    * @param value
    * @returns - Itself.
    */
    setPositioning(value?: POSITION): this;
    /**
     * Manages the aspect ratios of content. Width needs to be defined.
     * @param ratio
     * @returns - Itself.
     */
    setRatio(ratio?: "1x1" | "4x3" | "16x9" | "21x9"): this;
    expose(key: string, obj: any | null): this;
    /**
     * Sets the resizing methot of layout. The resize property does not apply to inline elements or to block elements where overflow="visible".
     * So, make sure that overflow is set to "scroll", "auto", or "hidden".
     * @param value
     * @returns - Itself.
     */
    setResizable(value?: string | "both" | "horizontal" | "none" | "vertical" | "inherit" | "initial" | "unset"): this;
    /**
     * The right property participates in setting the horizontal position of a {@link POSITION | positioned element.} It has no effect on non-positioned elements.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setRightPos(value?: number | string, unit?: UNIT): this;
    /**
     * Sets or removes round corners.
     * @param value
     * @param size
     * @returns Itsellf
     */
    setRound(value?: "all" | "top" | "end" | "bottom" | "start" | "circle" | "pill" | "none", size?: 0 | 1 | 2 | 3 | 4 | 5): this;
    /**
     * Sets the number of pixels that an element's content is scrolled from its left edge.
     * @param - The number of pixels to scroll.
     * @returns Itself
     */
    setScrollLeft(value: number): this;
    /**
     * Sets the number of pixels that an element's content is scrolled vertically.
     * @param - The number of pixels to scroll.
     * @returns Itself
     */
    setScrollTop(value: number): this;
    /**
     * Sets shadow of the widget.
     * @param value
     * @returns - Itself.
     */
    setShadow(value?: "sm" | "md" | "lg" | "xl"): this;
    /**
     * Sets width and height of the widget.
     * @param width
     * @param height
     * @param unit
     * @returns - Itself.
     */
    setSize(width?: number | string, height?: number | string, unit?: UNIT): this;
    /**
     * Set a specific style of an element using different CSS properties.
     * @param type
     * @param value
     *
     * @example
     * ```javascript
     * myWidget.setStyle("backgroundColor", "white")
     * ```
     */
    setStyle(type: string, value: any): this;
    /**
     * Sets the tab index of the widget.
     * @param value
     * @returns - Itself.
     * @example
     * ```javascript
     * myWidget.setTabIndex(1)
     * ```
     */
    setTabIndex(value?: number | string): this;
    /**
     * Returns the tab index of the widget.
     * @returns - string
     */
    getTabIndex(): string | null;
    /**
     * Sets the inner text of the widget.
     * @param value
     * @returns - Itself.
     */
    setText(value?: string): this;
    /**
     * Sets the text color. Reset inherits the color from its parent. None removes color class.
     * @param value
     * @returns - Itself.
     */
    setTextColor(value?: TEXT_COLOR): this;
    /**
     * Sets text decoration style.
     * @param value
     * @returns - Itself.
     */
    setTextDecoration(value?: "none" | "underline" | "line-through"): this;
    /**
     * Sets the selectable state of the widget's inner text.
     * @param value
     * @returns - Itself.
     */
    setTextInteraction(value?: "none" | "all" | "auto"): this;
    /**
     * Sets text line height.
     * @param value
     * @returns - Itself.
     */
    setTextLineHeight(value?: "1" | "sm" | "base" | "lg"): this;
    /**
     * Sets text overflow behavior.
     * @param value
     * @returns - Itself.
     */
    setTextOverflow(value?: "clip" | "ellipsis"): this;
    /**
     * Sets text shadow.
     * @param value
     * @param color
     * @returns - Itself.
     */
    setTextShadow(value?: "sm" | "md" | "lg"): this;
    /**
     * @param {"lowercase" | "uppercase" | "capitalize" | "none"} value - { "lowercase" | "uppercase" | "capitalize" | "none" }
     * @returns {Widget} - Self.
     */
    setTextTransform(value?: "lowercase" | "uppercase" | "capitalize"): this;
    /**
     * @param {"wrap" | "nowrap" | "none"} value - { "wrap" | "nowrap" | "none" }
     * @returns {Widget} - Self.
     */
    setTextWrap(value?: "wrap" | "nowrap"): this;
    /**
    * Adds tooltip to given position. Existing tooltip will be removed if title is not given.
    * @param title - Default value of the title.
    * @param options
    * @param options.animation - Apply a CSS fade transition to the popover
    * @param options.content - Default value of the body
    * @param options.delay - Delay showing the popover (ms)
    * @param options.placement - How to position the popover { "top" | "bottom" | "right" | "left" | "auto" }
    * @param options.trigger -  How popover is triggered { "click" | "hover" | "focus" | "manual" }
    * @param options.offset - Offset of the popover relative to its target
    * @returns - Itself.
    */
    setTooltip(content?: string, options?: {
        animation?: boolean;
        delay?: number;
        hide?: number;
        placement?: "top" | "bottom" | "right" | "left" | "auto";
        title?: string;
        trigger?: "click" | "hover" | "focus" | "manual";
        offset?: [number, number];
        onShow?: (() => any);
        onHide?: (() => any);
    }): this;
    /**
     * The top property participates in setting the vertical position of a {@link POSITION | positioned element.} It has no effect on non-positioned elements.
     * @param value
     * @param unit
     * @returns
     */
    setTopPos(value?: number | string, unit?: UNIT): this;
    /**
     * The transform CSS property lets you rotate, scale, skew, or translate an element.
     * @param value
     * @returns - Itself.
     */
    setTransform(value?: string): this;
    /**
     * Sets width of the widget.
     * @param value
     * @param unit
     * @returns - Itself.
     */
    setWidth(value?: number | string, unit?: UNIT): this;
    /**
     * Control the visibility of elements, without modifying their display, with visibility utilities. Invisible widgets still take up space in the page.
     * @param value
     * @returns - Itself.
     */
    setVisibility(value?: boolean): this;
    /**
     * Sets z depth of the widget.
     * @param value
     * @returns - Itself.
     */
    setZIndex(value?: number): this;
    /**
     * Makes the widget visible by modifying display property.
     * @returns - Itself.
     */
    show(): this;
    /**
     * Shows tooltip.
     * @returns - Itself.
     */
    showTooltip(): this;
    /**
     * Shrinks on its parent main axis.
     * @param value
     * @param breakpoint
     * @returns - Itself.
     */
    shrink(value?: 0 | 1 | "clear", breakpoint?: BREAKPOINT): this;
    /**
     * Stretches widget to parent width and height. Margings should not be set to be able to work properly.
     * @param x
     * @param y
     * @returns - Itself.
     */
    stretch(x?: SIZING, y?: SIZING): this;
    /**
     * Stretches widget to parent width. Margings should not be set to be able to work properly.
     * @param value
     * @param breakpoint
     * @returns - Itself.
     */
    stretchX(value?: SIZING, breakpoint?: BREAKPOINT): this;
    /**
     * Stretches widget to parent height. Margings should not be set to be able to work properly.
     * @param value
     * @param breakpoint
     * @returns - Itself.
     */
    stretchY(value?: SIZING, breakpoint?: BREAKPOINT): this;
    /**
     * Prevent long strings of text from breaking your components.
     * @param value
     * @returns Itelf
     */
    textBreak(value?: boolean): this;
    /**
     * Repositions an element in the horizontal and/or vertical directions
     * @param x
     * @param y
     * @param unit
     * @example
     * ```javascript
     * myWidget.translate(100, 80)
     * ```
     * @returns - Itself.
     */
    translate(x?: number, y?: number, unit?: UNIT): this;
    /**
     * Applies the transformations translateX(-50%) and translateY(-50%) to the element which,
     * in combination with the edge positioning utilities, allows you to absolute center an element.
     * @param value
     * @returns - Itself.
     */
    translateMiddle(value?: "x" | "y" | "both" | "clear"): this;
    /**
     * Sets truncate behaviour.
     * @param value
     * @returns - Itself.
     */
    truncateText(value?: boolean): this;
    /**
     * Removes keyboard focus from the current element.
     * @returns - Itself.
     */
    unfocus(): this;
}
export declare class Layout extends Widget {
    #private;
    constructor(type?: "row" | "col");
    /**
     * Add fake element to push all other elements to the side. This element won't be added to the children list.
     * @returns - Itself.
     * @example
     * ```javascript
     * const layout = new Row().addChild(new Text("Test"))
     *                         .addStretch();
     * ```
     */
    addStretch(): this;
    /**
     * Removes all fake elements.
     * @returns - Itself.
     * @example
     * ```javascript
     * layout.clearStretches();
     * ```
     */
    clearStretches(): this;
    /**
     * Aligns this element on the cross axis of parent.
     * @param crossAxis
     * @param breakpoint
     * @returns - Itself.
     */
    alignItems(crossAxis: ALIGNMENT, breakpoint?: BREAKPOINT): this;
    /**
     * Aligns this element on the cross axis of parent.
     * @param mainAxis
     * @param breakpoint
     * @returns - Itself.
     */
    justifyItems(mainAxis: JUSTIFY, breakpoint?: BREAKPOINT): this;
    /**
     * Adds or removes this element’s borders
     * @param {Object} [parameters]
     * @param {boolean} [parameters.reverse = false]
     * @param {BREAKPOINT} [parameters.breakpoint] - { "sm" | "md" | "lg" | "xl" | "xxl" | "none" }
     * @returns {Widget} - Self.
     */
    column(breakpoint?: BREAKPOINT, reverse?: boolean): this;
    reverse(breakpoint?: BREAKPOINT): this;
    /**
     * Adds or removes this element’s borders
     * @param {Object} [parameters]
     * @param {boolean} [parameters.reverse = false]
     * @param {BREAKPOINT} [parameters.breakpoint] - { "sm" | "md" | "lg" | "xl" | "xxl" | "none" }
     * @returns {Widget} - Self.
     */
    row(breakpoint?: BREAKPOINT, reverse?: boolean): this;
    snapToBreakpoints(value?: boolean, breakpoint?: BREAKPOINT): this;
    /**
     * Enables scroll spy for sub elements.
     * - It must be used on a Nav component or List group.
     * - Scrollspy requires position: relative; on the element you’re spying on.
     * - Anchors required and must point to an element with that id.
     * - If you’re making a scrollable container (other than the <body>), be sure to have a height set and overflow-y: scroll; applied to it—alongside a tabindex="0" to ensure keyboard access.
     *
     * @param {boolean} value
     * @param {object} options
     * @param {string} options.target - ID the parent element of spy controls.
     * @param {string} options.offset - Scroll offset
     * @param {string} options.tabindex
     * @returns {Widget} - Self.
     */
    scrollSpy(value?: boolean, options?: {
        target?: string;
        offset?: number;
        tabindex?: number;
    }): this;
    /**
     * @param {ContextMenu} menu
     * @param {boolean} triggerOnChild - Allows child elements trigger context menu
     * @returns {Widget} - Self.
    */
    setContextMenu(menu?: ContextMenu): this;
    /**
     * Sets the gap between children.
     * @param {number} value
     * @param {string} [unit="px"]
     * @returns {Widget} - Self.
     */
    setGap(value: number, unit?: UNIT): this;
    /**
     * Change how items wrap in a this container.
     * @param {boolean} [value = 1] - { 0 | 1 | "none" }
     * @param {Object} [parameters]
     * @param {BREAKPOINT} [parameters.breakpoint] - { "sm" | "md" | "lg" | "xl" | "xxl" }
     * @param {boolean} [parameters.reverse = false]
     * @returns {Widget} - Self.
     */
    wrapItems(value?: boolean | null, breakpoint?: BREAKPOINT, reverse?: boolean): this;
    onScrollToBottom(callback?: (self: Widget) => void, offset?: number): this;
}
export declare class Row extends Layout {
    constructor();
}
export declare class Column extends Layout {
    constructor();
}
export declare class Stack extends Widget {
    constructor();
}
export declare const Router: {
    "__#3@#routes": any;
    add(path: string, handler?: ((args: {
        [key: string]: any;
    }) => void) | undefined): any;
    parse(path: string): {
        handler: any;
        params: {
            [key: string]: any;
        };
        searchParams: {
            [key: string]: any;
        };
        anchor: string;
        path: string;
    } | undefined;
    _navigate(path: string, options?: {
        message?: any;
        history?: boolean;
    }): any;
    navigate(path: string, options?: {
        message?: any;
        history?: boolean;
    }): void;
};
export declare class Route extends Column {
    #private;
    constructor(baseRoute?: string, defaultRoute?: string);
    addRoute(route: string, element: () => Widget, handler?: (args: {
        [key: string]: any;
    }) => void): this;
    setBaseRoute(route: string): this;
}
export declare class App extends Route {
    #private;
    constructor();
    onLoad(cb: (self: Widget) => {}): this;
    loadTheme(theme: string): this;
    render(dom?: HTMLElement): this;
}
export declare class Input extends Widget {
    #private;
    constructor(type: string);
    /**
     * Controls whether and how text input is automatically capitalized
     * @param { off | on | words | characters | string } value - Supported types: "url" | "email" | "password"
     */
    setAutocapitalize(value?: "off" | "on" | "words" | "characters" | "none" | string): this;
    /**
     * Whether is automatically capitalized or not
     */
    getAutocapitalize(): string | undefined;
    /**
     * Specifies hint for form autofill feature
     * @param {string} autocomplete - Valid input: "all"
     */
    autocomplete(autocomplete: string): this;
    /**
     * Hint for form autofill feature
     */
    isAutocomplete(): boolean;
    /**
     * Automatically focus the control when the page is loaded
     * @param {boolean} autofocus
     */
    autofocus(autofocus: boolean): this;
    /**
     * Focus state
     */
    isAutofocus(): boolean;
    /**
     * Specifies the default value of the input
     * @param {any} dv - Valid input: "all"
     */
    setDefaultValue(dv: any): this;
    /**
     * Default value of the input
     */
    getDefaultValue(): any;
    /**
     * Specifies name of form field to use for sending the element's directionality in form submission
     * @param {string} value - Valid input: "text" | "search"
     */
    setDirname(dirname: string): this;
    /**
     * Name of form field to use for sending the element's directionality in form submission
     */
    getDirname(): string | undefined;
    /**
     * Specifies id of the form that this input element belongs to
     */
    setFormId(formId: string): this;
    /**
     * Id of the form element this input element belongs to
     */
    getFormId(): string | undefined;
    /**
     * Specifies the width (in characters) of an input field
     */
    setInputLength(inputLength: number): this;
    /**
     * Width (in characters) of an input field
     */
    getInputLength(): string | undefined;
    /**
     * Specifies the value of the id attribute of the <datalist> of autocomplete options
     * @param {"string"} list - Valid input: almost all
     */
    list(list: string): this;
    /**
     * Value of the id attribute of the <datalist>
     */
    getList(): string | undefined;
    /**
     * Specifies the maximum value of an input field
     * @param {number} value - Valid input: "number" | "range"
     *  */
    setMax(value: number): this;
    /**
     * Specifies the maximum number of character for an input field
     * @param {number} maxLength - Valid input: "password" | "search" | "tel"| "text" | "url"
     */
    setMaxLength(maxLength: number): this;
    /**
     * Maximum number of character for an input field
     */
    getMaxLength(): number;
    /**
     * Specifies the minimum value of an input field
     * @param {number} value - Valid input: "number" | "range"
     *  */
    setMin(value: number): this;
    /**
     * Specifies the minimum number of character for an input field
     * @param {number} minLength - Valid input: "password" | "search" | "tel"| "text" | "url"
     */
    setMinLength(minLength: number): this;
    /**
     * Minimum number of character for an input field
     */
    getMinLength(): string | undefined;
    /**
     * Specifies a regular expression to check the input value against
     * @param {string} pattern - Valid input: "password" | "text" | "tel"
     */
    setPattern(pattern: string): this;
    /**
     * Regular expression to check the input value against
     */
    getPattern(): string | undefined;
    /**
     * Specifies a short hint that describes the expected value of the input field
     * @param {string} placeholder - Valid input: "password" | "search" | "tel" | "text" | "url"
     */
    setPlaceholder(placeholder: string): this;
    /**
     * Expected value of the input field
     */
    getPlaceholder(): string | undefined;
    /**
     * Specifies that an input field is read only (cannot be changed)
     * @param {boolean} readonly - Valid input: almost all
     */
    readonly(readonly: boolean): this;
    /**
     * Read only state of input value
     */
    isReadonly(): boolean;
    /**
     * Specifies that an input field is required (must be filled out)
     * @param {boolean} value - Valid input: almost all
     */
    required(value?: boolean): this;
    /**
     * Required state of input
     */
    isRequired(): boolean;
    /**
     * Specifies whether or not to enable spell checking
     * @param {boolean} spellCheck - Valid input: almost all
     */
    spellCheck(spellCheck?: boolean): this;
    /**
     * SpellCheck state of input
     */
    isSpellCheck(): boolean;
    /**
    * Specifies the value for the input field
    * @param {any} value - Valid input: all
    */
    setValue(this: any, value: any): any;
    /**
     * Value of the input field
     * @returns {any} - Valid input: all
     */
    getValue(this: any): any;
    /**
     * Sets the size of button
     * @param {string} inputSize - { "sm" | "md" | "lg" | "none" }
     */
    setInputSize(inputSize: string): this;
    setCustomValidation(callback?: (value: any) => boolean): this;
    validate(): boolean;
    clearValidation(): this;
    onChange(callback?: (val: string, component: Input) => void): this;
    onInput(callback?: (val: string, component: Input) => void): this;
}
export declare class Anchor extends Widget {
    constructor(value?: SIDE | SIDE[] | {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    }, unit?: UNIT);
}
export declare class Accordion extends Widget {
    #private;
    /**
     * @param {boolean} [syncronized=true] - Allows only one accordion open at a time.
     */
    constructor(syncronized?: boolean);
    addChildren(...args: AccordionItem[]): this;
    getChild(idx: number): Widget;
    /**
     * One accordion will be open at a time.
     * It will be set as syncronized if no parameter given.
     * @param {boolean} [value]
     */
    syncronized(value?: boolean): this;
    /**
     * It will remove given item
     * @param {Widget} value
     */
    removeChild(item: Widget): this;
    /**
     * It will remove given item
     * @param {number} value
     */
    removeChildAt(idx: number): this;
    clearChildren(): this;
    flush(value?: number): this;
    expand(...indices: number[]): this;
    showButton(side?: "start" | "end"): this;
    collapse(...indices: number[]): this;
    /**
     * Callback will be called when state is changed
     * @param {function(boolean, number, AccordionItem)} callback
     */
    addChangeCallback(callback: (expanded: boolean, idx: number, item: AccordionItem) => void): this;
    removeChangeCallback(callback: (expanded: boolean, idx: number, item: AccordionItem) => void): this;
    clearChangeCallbacks(): this;
    fireChangeEvenet: (expanded: boolean, idx: number, item: AccordionItem) => void;
    onChange(callback: (expanded: boolean, idx: number, item: AccordionItem) => void): this;
}
export declare class AccordionItem extends Widget {
    #private;
    constructor(title?: string, bodyText?: string, startState?: boolean);
    setAccordionId(accordionId: string): void;
    expand(value?: boolean): this;
    showButton(side?: "start" | "end"): this;
    setTitleAttr(title: string): this;
    setTitle(title?: string): this;
    setHeaderContent(content?: Widget): this;
    getHeaderContent(): Widget | undefined;
    setBodyText(text?: string): this;
    setBodyContent(content?: Widget): this;
    getBodyContent(): Widget | undefined;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (expanded: boolean) => void): this;
    removeChangeCallback(callback: (expanded: boolean) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (expanded: boolean) => void): this;
}
export declare class Alert extends Widget {
    #private;
    constructor(text?: string, color?: COLOR, dismissible?: boolean);
    /**
     * Sets the color of alert.
     * @param value - primary, secondary, success, danger, warning, info, light, dark
     */
    setColor(value: COLOR): this;
    getColor(): COLOR;
    dismissible(value: boolean): this;
    close(): this;
    dispose(): this;
    onClose(callback: EventListener): this;
    onClosed(callback: EventListener): this;
}
export declare class Badge extends Widget {
    #private;
    constructor(value?: number | string);
    getValue(): string | number;
    setValue(value: number | string): this;
    isRound(): boolean;
    rounded(): this;
    cornered(): this;
    /**
     * Sets the color of badge.
     * @param value - primary, secondary, success, danger, warning, info, light, dark
     */
    setColor(value: COLOR): this;
    getColor(): COLOR;
}
export declare var Body: Widget;
export declare class Breadcrumb extends Widget {
    #private;
    constructor();
    setDividerCharacter(divider: string): this;
    addChildren(...args: Link[]): this;
    clearChildren(): this;
    getChild(idx: number): Widget;
    getChildren(): Widget[];
    removeChild(...args: Link[]): this;
    replaceChild(idx: number, link: Link): this;
    setChild(...args: Link[]): this;
    setActive(activeLink: number | Link): this;
    private applyActiveListener;
}
export declare class Button extends Widget {
    #private;
    constructor(text?: string, color?: BUTTON_COLOR);
    /**
     * Sets the color of button.
     * @param value - primary, secondary, success, danger, warning, info, light, dark
     */
    setColor(value: BUTTON_COLOR): this;
    getColor(): BUTTON_COLOR;
    /**
     * Specifies the type of button.
     * @param {"button" | "submit" | "reset"} value
     */
    setActionType(type: "button" | "submit" | "reset"): this;
    /**
     * Type of the button.
     * @returns {string}
     */
    getTypeAttr(): void;
    /**
     * Removes all background images and colors.
     * @param {boolean} value
     */
    setOutlined(value?: boolean): this;
    /**
     * Sets the size of button
     * @param {string} size - { "sm" | "md" | "lg" | "none" }
     */
    setButtonSize(size: string): this;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getContent(): Widget;
}
export declare class ButtonGroup extends Widget {
    #private;
    /** Groups button components */
    constructor();
    addChildren(...args: Widget[]): this;
    vertical(): this;
    horizontal(): this;
    /**
     * Sets the size of button
     * @param {string} size { "sm" | "md" | "lg" | "none" }
     */
    setGroupSize(size: "sm" | "md" | "lg" | "none"): this;
    truncateText(value?: boolean): this;
    /**
     * Callback will be called when state is changed
     * @param {callback} callback
     * @param {boolean} callback.value
     * @param {number} callback.idx
     * @param {Widget} callback.element
     */
    addChangeCallback(callback: (val: boolean, idx: number, child: Widget) => void): this;
    removeChangeCallback(callback: (val: boolean, idx: number, child: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: boolean, idx: number, child: Widget) => void): this;
}
export declare class Blockquote extends Widget {
    constructor(text?: string, source?: string);
}
export declare class Carousel extends Widget {
    #private;
    constructor(options?: {
        interval?: number;
        keyboard?: boolean;
        pause?: "hover" | boolean;
        wrap?: boolean;
        ride?: "carousel" | boolean;
        touch?: boolean;
    });
    setActive(idx: number): this;
    getActive(): CarouselItem;
    getActiveIdx(): number;
    addChild(child: CarouselItem): this;
    addChildren(...args: CarouselItem[]): this;
    clearChildren(): this;
    getChild(idx: number): CarouselItem;
    getChildren(): CarouselItem[];
    removeChild(...args: CarouselItem[]): this;
    replaceChild(idx: number, child: CarouselItem): this;
    setChild(...args: CarouselItem[]): this;
    showControls(value?: boolean): this;
    showIndicators(value?: boolean): this;
    crossfade(value?: boolean): this;
    dark(value?: boolean): this;
    setInterval(ms: number): this;
    keyboard(value: boolean): this;
    setPause(value: "hover" | boolean): this;
    wrap(value: boolean): this;
    setRide(value: 'carousel' | boolean): this;
    touch(value: boolean): this;
    private updateBs;
    cycle(): this;
    pause(): this;
    prev(): this;
    next(): this;
    nextWhenVisible(): this;
    to(idx: number): this;
    dispose(): this;
    onSlide(callback: EventListener): this;
    onSlid(callback: EventListener): this;
}
export declare class CarouselItem extends Widget {
    #private;
    constructor();
    setActive(value?: boolean): this;
    isActive(): boolean;
    getImage(): Widget | undefined;
    setImage(image?: Widget): this;
    getCaptionHeader(): any;
    setCaptionHeader(text: string): this;
    getCaptionBody(): any;
    setCaptionBody(text: string): this;
}
export declare class Card extends Widget {
    #private;
    constructor(options?: {
        headerTitle?: string;
        image?: Widget;
        bodyTitle?: string;
        bodySubtitle?: string;
        bodyText?: string;
        footerTitle?: string;
        width?: string;
    });
    showHeader(): this;
    hideHeader(): this;
    setHeaderTitle(title: string): this;
    setHeaderContent(content?: Widget): this;
    getHeaderContent(): Widget | undefined;
    setImage(image?: Widget): this;
    showBody(): this;
    hideBody(): this;
    setBodyTitle(title: string): this;
    setBodySubtitle(subtitle: string): this;
    setBodyText(text: string): this;
    /**
     * Replaces default body content which are body title, body subtitle and body text.
     * @param {Widget} content - Content to replace.
     * @returns {Widget} - Itself.
     */
    setBodyContent(content?: Widget): this;
    getBodyContent(): Widget | undefined;
    showFooter(): this;
    hideFooter(): this;
    setFooterTitle(title: string): this;
    setFooterContent(content?: Widget): this;
    getFooterContent(): Widget | undefined;
}
export declare class Checkbox extends Widget {
    #private;
    constructor(text?: string, startState?: boolean);
    /**
     * A string representing the attribute's qualified name.
     * @param {string} value
     */
    setName(name?: string): this;
    /**
     * A string representing the attribute's qualified name.
     */
    getName(): string | undefined;
    asSwitch(): this;
    asTick(): this;
    /**
     * Toggles the button if it is set as toggle button.
     */
    toggle(): this;
    /**
     * Sets checked if it is a toggle button.
     * @param {boolean} [value]
     */
    setChecked(value?: boolean): this;
    setDefault(value: boolean): this;
    /**
     * Returns if this toggle is active or not.
     */
    isChecked(): any;
    disable(): this;
    enable(): this;
    /**
    * Sets the indeterminate state of the checkbox
    * @param {boolean} value
    */
    indeterminate(value: boolean): this;
    /**
     * Indeterminate state of the checkbox
     * @returns {boolean}
     */
    isIndeterminate(): boolean;
    setLabel(label?: string): this;
    getLabel(): any;
    truncateText(value?: boolean): this;
    /**
     * Specifies that an input field is required (must be filled out)
     * @param {boolean} value - Valid input: almost all
     */
    required(value?: boolean): this;
    /**
     * Required state of input
     * @returns {boolean} - Valid input: almost all
     */
    isRequired(): boolean;
    /**
    * Specifies the value for the input field
    * @param {any} value - Valid input: all
    */
    setValue(value: any): this;
    /**
     * Value of the input field
     * @returns {any} - Valid input: all
     */
    getValue(): any;
    /**
     * Callback will be called when state is changed
     * @param {function(boolean, Widget)} callback
     */
    addChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    removeChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: boolean, component: Widget) => void): this;
    setCustomValidation(callback: (value: any) => boolean, errorMessage?: string): this;
    removeCustomValidation(): this;
    validate(): this;
    setValid(value: boolean): this;
    isValid(): boolean;
    clearValidation(): this;
}
export declare class Collapse extends Widget {
    #private;
    constructor(startState?: boolean);
    toggle(): this;
    isOpen(): boolean;
    open(): this;
    close(): this;
    dispose(): this;
    vertical(): this;
    horizontal(): this;
    onShow(callback: EventListener): this;
    onShown(callback: EventListener): this;
    onHide(callback: EventListener): this;
    onHidden(callback: EventListener): this;
    onChange(callback: (val: boolean, component: Widget) => void): this;
}
export declare class ColorInput extends Input {
    constructor(color?: string);
}
export declare class ContextMenu extends Widget {
    constructor(open?: boolean);
    open(): this;
    close(): this;
    addChildren(...args: DropdownItem[] | DropdownDivider[]): this;
    removeChild(...args: Widget[]): this;
    removeChildAt(idx: number): this;
    /**
     *Sets the menu alignment.
     * @param {"start" | "end" | "none"} alignment - { "start" | "end" | "none" }
     */
    alignMenu(alignment: "start" | "end" | "none"): this;
    /**
     * Switches the menu color light and dark.
     * @param { boolean } value
     */
    dark(value?: boolean): this;
}
export declare class Divider extends Widget {
    #private;
    constructor(color?: COLOR);
    vertical(): this;
    horizontal(): this;
    setLength(value: number, unit?: UNIT): this;
    /**
     * @param {number} value { 1 | 2 | 3 | 4 | 5 }
     * @returns {Widget} this
     */
    setWidth(value: 1 | 2 | 3 | 4 | 5): this;
    /**
     * Sets the color of divider.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     */
    setColor(value: COLOR): this;
}
export declare class DisplayHeading extends Widget {
    constructor(size: 1 | 2 | 3 | 4 | 5 | 6, text?: string);
}
export declare class DropdownButton extends Widget {
    #private;
    constructor(text?: string, togglable?: boolean);
    setActive(idx: number | undefined): this;
    setTogglable(value?: boolean): this;
    setAutoclose(value?: 'inside' | 'outside' | boolean | undefined): this;
    showArrow(): this;
    hideArrow(): this;
    addChildren(...args: Widget[]): this;
    clearChildren(): this;
    getChildren(): Widget[];
    removeChild(...args: Widget[]): this;
    removeChildAt(idx: number): this;
    /**
     * Sets the color of button.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     * @returns this
     */
    setColor(value: COLOR): this;
    /**
     * Removes all background images and colors.
     * @param {boolean} value
     */
    setOutlined(value?: boolean): this;
    /**
     * Sets the size of button
     * @param { "sm" | "md" | "lg" | "none" } size
     */
    setButtonSize(size: "sm" | "md" | "lg" | "none"): this;
    getContent(): Widget;
    /**
     * Replaces all childs of the button with given one.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getText(): any;
    /**
     * Sets the text of the button.
     * @param {string} text
     */
    setText(text: string): this;
    click(): this;
    close(): void;
    open(): void;
    onClick(callback?: (self: Widget, e: Event) => void): this;
    onChange(callback: (item: DropdownItem, idx: number) => void): this;
    /**
     * Sets the where dropdown menu show up.
     * @param {"dropup" | "dropdown" | "dropstart" | "dropend"} side - { "dropup" | "dropdown" | "dropstart" | "dropend" }
     */
    setDropSide(side: "dropup" | "dropdown" | "dropstart" | "dropend"): this;
    /**
     *Sets the menu alignment.
     * @param {"start" | "end" | "none"} alignment - { "start" | "end" | "none" }
     */
    alignMenu(alignment: "start" | "end" | "none"): this;
    /**
     * Switches the menu color light and dark.
     * @param { boolean } value
     */
    dark(value?: boolean): this;
    truncateText(value?: boolean): this;
    onShow(callback: EventListener): this;
    onShown(callback: EventListener): this;
    onHide(callback: EventListener): this;
    onHidden(callback: EventListener): this;
}
export declare class DropdownDivider extends Widget {
    constructor();
}
export declare class DropdownItem extends Widget {
    #private;
    constructor(text?: string, value?: string);
    setActive(value?: boolean): this;
    getContent(): Widget;
    setValue(value: string): this;
    getValue(): string | undefined;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    /**
     * Aligns content and label horizontally.
     * @param {"start" | "center" | "end" | "none"} value - { "start" | "center" | "end" | "none" }
     */
    alignContent(value: "start" | "center" | "end"): this;
    getText(): any;
    setText(text: string): this;
    onClick(callback?: (self: Widget, e: Event) => void): this;
    addChildren(...args: Widget[]): this;
    getChild(idx: number): Widget;
    getChildren(): Widget[];
    removeChild(...args: Widget[]): this;
    replaceChild(idx: number, child: Widget): this;
    setChild(...args: Widget[]): this;
    truncateText(value?: boolean): this;
    addEventListener(evnt: string, callback: EventListener, options?: boolean | AddEventListenerOptions | undefined): this;
    removeEventListener(callback: EventListener, evnt?: string): this;
    clearEventListeners(): this;
}
export declare class DropdownLink extends Widget {
    #private;
    constructor(text?: string, color?: COLOR);
    setActive(idx: number | undefined): this;
    showArrow(value?: boolean): this;
    addChildren(...args: Widget[]): this;
    removeChild(...args: Widget[]): this;
    removeChildAt(idx: number): this;
    getContent(): Widget;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getText(): any;
    /**
     * Sets the text of the button.
     * @param {string} text
     */
    setText(text: string): this;
    close(): void;
    open(): void;
    /**
     * Sets the color of link.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     */
    setColor(value: COLOR): this;
    onClick(callback?: (self: Widget, e: Event) => void): this;
    onChange(callback: (item: DropdownItem, idx: number) => void): this;
    /**
     * Sets the where dropdown menu show up.
     * @param {"dropup" | "dropdown" | "dropstart" | "dropend"} side - {} "dropup" | "dropdown" | "dropstart" | "dropend" }
     */
    setDropSide(side: "dropup" | "dropdown" | "dropstart" | "dropend"): this;
    /**
     *Sets the menu alignment.
     * @param {"start" | "end" | "none" } alignment - { "start" | "end" | "none" }
     */
    alignMenu(alignment: "start" | "end" | "none"): this;
    /**
    * Switches the menu color light and dark.
    * @param { boolean } value
    */
    dark(value?: boolean): this;
    truncateText(value?: boolean): this;
    onShow(callback: EventListener): this;
    onShown(callback: EventListener): this;
    onHide(callback: EventListener): this;
    onHidden(callback: EventListener): this;
}
export declare class Figure extends Widget {
    #private;
    constructor(caption?: string, image?: Image);
    getCaption(): any;
    setCaption(caption: string): this;
    setImage(image?: Image): this;
    getImage(): Image | undefined;
}
export declare class FloatingInput extends Widget {
    #private;
    constructor(label?: string, input?: Input | SelectionBox);
    setInput(input?: Input | SelectionBox): this;
    getInput(): Input | SelectionBox | undefined;
    setLabel(value: string): this;
    getLabel(): any;
}
export declare class Form extends Widget {
    #private;
    constructor();
    disable(): this;
    enable(): this;
    /**
     * Submits the form to the server.
     * @returns {this}
     */
    submit(): this;
    /**
     * Requests that the form be submitted using the specified submit button and its corresponding configuration.
     * @returns {this}
     */
    requestSubmit(): this;
    /**
     * Resets the form to its initial state.
     * @returns {this}
     */
    reset(): this;
    /**
     * Enable bypassing form control validation for form submission
     * @param {boolean} value
     */
    enableBrowserValidation(): this;
    /**
     * Disable bypassing form control validation for form submission
     * @param {boolean} value
     */
    disableBrowserValidation(): this;
    /**
     * Enable custom validation for form submission, it will enable bootstrap validation styles
     * @returns {this}
     *  */
    enableCustomValidation(): this;
    /**
     * Disable custom validation for form submission
     * @returns {this}
     */
    disableCustomValidation(): this;
    /**
     * Validation for form submission
     * @returns {boolean}
     */
    isBrowserValidation(): boolean;
    isCustomValidation(): boolean;
    getFormData(): FormData;
    onSubmit(cb?: (self: Widget, e: Event) => void): this;
    validate(): boolean;
    clearValidation(): this;
}
/**
* Label for input, needs to be specified with for
*/
export declare class FormLabel extends Widget {
    constructor(text?: string, inputId?: string);
    setInputId(inputId: string): void;
    /**
     * Sets the size of button
     * @param {string} size - { "sm" | "md" | "lg" | "none" }
     */
    setLabelSize(size: string): this;
}
/**
* Help text sits on the bottom of input
*/
export declare class FormText extends Widget {
    constructor(text?: string);
}
export declare class Heading extends Widget {
    constructor(size: 1 | 2 | 3 | 4 | 5 | 6, text?: string);
}
export declare var HTML: Widget;
export declare class Icon extends Widget {
    #private;
    constructor(iconName?: string);
    getIcon(): string;
    setIcon(iconName: string): this;
}
/**
 * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe | IFrame}
 * Represents a nested browsing context, embedding another HTML page into the current one.
 * @param src
 * @example
 * ```javascript
 * const myIFrame = new IFrame("/frame.html").sandbox("allow-scripts").csp("default-src 'self')
 * ```
 * @returns - Itself.
 */
export declare class IFrame extends Widget {
    #private;
    constructor(src?: string);
    /**
     * {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy | Feature Policy}
     * @param values
     * @example
     * ```javascript
     * myIFrame.allow("camera", "layout-animations 'none'", "geolocation 'self' https://example.com")
     * ```
     * @returns - Itself.
     */
    allow(...values: ALLOW[]): this;
    /**
     * Allows activating fullscreen mode by calling the requestFullscreen() method.
     * @param value
     * @returns - Itself.
     */
    allowFullscreen(value?: boolean): this;
    /**
     * Sets the cross-origin iframe should be allowed to invoke the Payment Request API.
     * @param value
     * @returns - Itself.
     */
    allowPaymentRequest(value?: boolean): this;
    /**
     * {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP | Content Security Policy}
     * @param values
     * @example
     * ```javascript
     * myIFrame.csp("default-src 'self' trusted.com *.trusted.com", "img-src *")
     * ```
     * @returns - Itself.
     */
    csp(...values: string[]): this;
    /**
     *  Sets the URL of the page to embed.
     * @param src
     * @returns
     */
    setSrc(src: string): this;
    /**
    * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-referrerpolicy | Referrer Policy}
    * Indicates which referrer to send when fetching the frame's resource.
    * @param values
    * @example
    * ```javascript
    * myIFrame.setReferrerPolicy("same-origin)
    * ```
    * @returns - Itself.
    */
    setReferrerPolicy(...values: REFERRER[]): this;
    /**
    * Applies extra restrictions to the content in the frame.
    * @param values
    * @example
    * ```javascript
    * myIFrame.sandbox("allow-forms", "allow-scripts")
    * ```
    * @returns - Itself.
    */
    sandbox(...values: SANDBOX[]): this;
    /**
    * Indicates how the browser should load the iframe.
    * @param value
    * - eager: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
    * - lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
    * @returns - Itself.
    */
    setLoading(value?: "eager" | "lazy"): this;
    /**
    * Sends message object to iframe window.
    * @param message Data to be sent to the other window.
    * @param targetOrigin Specifies what the origin of targetWindow.
    * @returns - Itself.
    */
    postMessage(message: any, targetOrigin?: string): this;
    /**
     * Triggers the given callback function when iframe window receives message
     * @param callback
     * @returns - Itself.
     */
    onMessageReceived(callback: EventListener): this;
}
export declare class CodeBlock extends IFrame {
    #private;
    src: string;
    data: string;
    language: string;
    theme: "dark" | "light";
    lineNumbers: boolean;
    minimap: boolean;
    automaticLayout: boolean;
    fontSize: number;
    scrollBeyondLastLine: boolean;
    constructor(data?: string, language?: string, options?: {
        theme?: "light" | "dark";
        lineNumbers?: boolean;
        minimap?: boolean;
        automaticLayout?: boolean;
        fontSize?: number;
        scrollBeyondLastLine?: boolean;
    });
    private reload;
    showLineNumbers(): this;
    hideLineNumbers(): this;
    setCode(data: string): this;
    getCode(): string;
    setFontSize(value: number): this;
    setAutomaticLayout(value: boolean): this;
    setScrollBeyondLastLine(value: boolean): this;
    showMinimap(): this;
    hideMinimap(): this;
    setTheme(value?: "dark" | "light"): this;
    setLanguage(language: string): this;
    onChange(callback?: (data: string) => void): this;
    onSave(callback?: (data: string) => void): this;
}
export declare class RichText extends Column {
    #private;
    src: string;
    content: string;
    toolbar: boolean;
    textTools: boolean;
    blockTools: boolean;
    fileTools: boolean | {
        preview?: {
            presentation?: string;
            caption?: {
                name?: boolean;
                size?: boolean;
            };
        };
        file?: {
            caption?: {
                size?: boolean;
            };
        };
    };
    historyTools: boolean;
    mentions: {
        "key": string;
        value: string;
        link?: string;
    }[];
    trixElement: any;
    trixEditor: any;
    trix: any;
    tribute: any;
    initCallbacks: ((self: RichText) => void)[];
    constructor(content?: string, options?: {
        toolbar?: boolean;
        textTools?: boolean;
        blockTools?: boolean;
        fileTools?: boolean | {
            preview?: {
                presentation?: string;
                caption?: {
                    name?: boolean;
                    size?: boolean;
                };
            };
            file?: {
                caption?: {
                    size?: boolean;
                };
            };
        };
        historyTools?: boolean;
        mentions?: {
            "key": string;
            value: string;
            link: string;
        }[];
    });
    onInit(callback: (self: RichText) => void): this;
    setContent(content: string): this;
    setMentions(mentions: {
        "key": string;
        value: string;
        link?: string;
    }[]): this;
    private reload;
    addEventListener(event: string, callback: EventListener, options?: boolean | AddEventListenerOptions): this;
    getText(): any;
    getHTML(): any;
    getEditor(): any;
    getTrix(): any;
    getTribute(): any;
    showToolbar(): this;
    hideToolbar(): this;
    showTextTools(): this;
    hideTextTools(): this;
    showBlockTools(): this;
    hideBlockTools(): this;
    showFileTools(): this;
    hideFileTools(): this;
}
export declare class Image extends Widget {
    constructor(src?: string, alt?: string);
    setSrc(src: string): this;
    getSrc(): string | undefined;
    fit(value?: "contain" | "cover" | "fill" | "none" | "scale-down" | string): this;
    fluid(value?: boolean): this;
    thumbnail(value?: boolean): this;
    /**
     * Specifies the vertical dimension
     * @param {number} value - Valid input: "image"
     */
    setImageHeight(value: number): this;
    /**
     * Vertical dimension
     * @returns {number} - Valid input: "image"
     */
    getImageHeight(): number;
    /**
     * Specifies the horizontal dimension
     * @param {number} value - Valid input: "image"
     */
    setImageWidth(value: number): this;
    /**
     * Horizontal dimension
     * @returns {number} - Valid input: "image"
     */
    getImageWidth(): number;
}
/**
* Validation feedback text sits bottom of the input. Must be placed under input.
*/
declare class InputFeedback extends Widget {
    constructor(text?: string, type?: "valid" | "invalid");
    setFeedbackType(type?: "valid" | "invalid"): void;
}
export declare class InputValidFeedback extends InputFeedback {
    constructor(text?: string);
}
export declare class InputInvalidFeedback extends InputFeedback {
    constructor(text?: string);
}
export declare class InputGroup extends Widget {
    #private;
    constructor();
    addChildren(...controls: Widget[]): this;
    hasValidation(value?: boolean): this;
    insertChild(idx: number, ...controls: Button[] | Label[] | Icon[]): this;
    removeChild(...controls: Button[] | Label[] | Icon[]): this;
    removeChildAt(idx: number): this;
    disable(): this;
    enable(): this;
    /**
     * Sets the size of button
     * @param { "sm" | "md" | "lg" | "none" } size
     */
    setGroupSize(size: "sm" | "md" | "lg" | "none"): this;
}
declare class InputTooltip extends Widget {
    constructor(text?: string, type?: "valid" | "invalid");
    setFeedbackType(type?: "valid" | "invalid"): void;
}
export declare class InputValidTooltip extends InputTooltip {
    constructor(text?: string);
}
export declare class InputInvalidTooltip extends InputTooltip {
    constructor(text?: string);
}
export declare class Label extends Widget {
    constructor(text?: string);
}
export declare class Link extends Widget {
    #private;
    constructor(text?: string, link?: string, color?: COLOR);
    getLink(): string | undefined;
    setLink(link: string): this;
    setActive(value?: boolean): this;
    isActive(): boolean;
    setTarget(value: "_blank" | "_self" | "_parent" | "_top" | string): this;
    setDisplayType(value: "button" | "outlined-button" | "link"): this;
    /**
     * Sets the size of button, only for button type.
     * @param {string} size - { "sm" | "md" | "lg" | "none" }
     */
    setButtonSize(size: string): this;
    /**
     * Sets the color of link.
     * @param value - "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"
     * @returns {Link} - Self.
     */
    setColor(value: COLOR): this;
    setScrollSpyTarget(targetId?: string): this;
}
export declare class ListGroup extends Widget {
    #private;
    constructor(text?: string);
    toggleable(value?: boolean): this;
    vertical(): this;
    horizontal(): this;
    /**
     * Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
     * @param {boolean} value
     * @returns {ListGroup} - Self.
     */
    flush(value?: boolean): this;
    numbered(value?: boolean): this;
    addChildren(...args: Widget[]): this;
    setActiveLink(child: Widget): void;
    private applyActiveListener;
}
export declare class ListGroupItem extends Widget {
    #private;
    constructor(text?: string, color?: COLOR);
    asButton(value?: boolean): this;
    setActive(value?: boolean): this;
    isActive(): boolean;
    /**
     * Sets the color of list group item.
     * @param value - "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"
     * @returns this
     */
    setColor(value: COLOR): this;
    getColor(): COLOR;
}
export declare class ListItem extends Widget {
    constructor(text?: string);
    inline(value?: boolean): this;
}
/**
 * Represents text which is marked or highlighted for reference or notation purposes
 */
export declare class Mark extends Widget {
    constructor(text?: string);
}
export declare class Markdown extends Column {
    #private;
    constructor(markdownText?: string, highlight?: boolean);
    enableHighlight(): this;
    setText(text: string): this;
    addChildren(...args: Widget[]): this;
    replaceChild(idx: number, child: Widget): this;
    setChild(...args: Widget[]): this;
    private markdown;
    private reorganizeChildren;
    private addHighlightStyle;
    private addMarkdownStyle;
}
export declare class Modal extends Widget {
    #private;
    constructor(headerTitle?: string);
    toggle(): this;
    open(): this;
    close(): this;
    isActive(): boolean;
    onShow(callback: EventListener): this;
    onShown(callback: EventListener): this;
    onHide(callback: EventListener): this;
    onHidden(callback: EventListener): this;
    setModalSize(size: "sm" | "md" | "lg" | "xl" | "none"): this;
    scrollable(value?: boolean): this;
    staticBackdrop(value?: boolean): this;
    /**
     * @param {boolean} value
     * @param {BREAKPOINT} [breakpoint]
     * @returns {Widget} - Self.
     */
    fullscreen(value?: boolean, breakpoint?: BREAKPOINT): this;
    setCentered(value?: boolean): this;
    showHeader(): this;
    hideHeader(): this;
    setHeaderTitle(value: string): this;
    setHeaderContent(content?: Widget): this;
    getHeaderContent(): Widget | undefined;
    showBody(): this;
    hideBody(): this;
    setBodyContent(content?: Widget): this;
    getBodyContent(): Widget | undefined;
    showFooter(): this;
    hideFooter(): this;
    setFooterContent(content?: Widget): this;
    getFooterContent(): Widget | undefined;
}
export declare class Nav extends Widget {
    constructor();
    vertical(): this;
    horizontal(): this;
    setDisplayType(type: "tab" | "pill" | "link"): this;
}
export declare class Navbar extends Widget {
    #private;
    constructor(color?: COLOR);
    setBreakpoint(breakpoint?: BREAKPOINT): this;
    setBrand(title: string | undefined, imageUrl: string | undefined, imageSize?: number): this;
    setBrandContent(brand: Widget | undefined): this;
    snapToBreakpoints(value?: boolean, breakpoint?: BREAKPOINT): this;
    expand(value?: boolean, breakpoint?: BREAKPOINT): this;
    setDisplayType(type: "link" | "pill" | "tab"): this;
    setFolding(value?: "collapsed" | "sidebar"): this;
    justifyLinks(value: JUSTIFY, breakpoint?: BREAKPOINT): this;
    alignLinks(value: ALIGNMENT, breakpoint?: BREAKPOINT): this;
    wrapItems(value?: boolean, breakpoint?: BREAKPOINT, reverse?: boolean): this;
    column(breakpoint?: BREAKPOINT, reverse?: boolean): this;
    row(breakpoint?: BREAKPOINT, reverse?: boolean): this;
    scrollable(value?: boolean, scrollHeight?: number): this;
    /**
     * Sets the color of navbar.
     * @param value - primary, secondary, success, danger, warning, info, light, dark
     */
    setColor(value: COLOR): this;
    _getChildrenRecursive(widget: Widget, arr: NavLink[]): NavLink[];
    setActiveLink(activeLink: NavLink | number | undefined): void;
    addChildren(...args: Widget[]): this;
    getChild(idx: number): Widget;
    getChildren(): Widget[];
    removeChild(...args: Widget[]): this;
    replaceChild(idx: number, child: Widget): this;
    setChild(...args: Widget[]): this;
}
export declare class NavLink extends Link {
    constructor(text?: string, link?: string);
}
export declare class Offcanvas extends Widget {
    #private;
    constructor(title?: string);
    toggle(): this;
    open(): this;
    close(): this;
    onShow(callback: EventListener): this;
    onShown(callback: EventListener): this;
    onHide(callback: EventListener): this;
    onHidden(callback: EventListener): this;
    isActive(): boolean;
    setPlace(value?: "start" | "end" | "top" | "bottom"): this;
    scrollable(value?: boolean): this;
    backdrop(value?: boolean): this;
    keyboard(value?: boolean): this;
    private updateBs;
    setHeaderContent(content: Widget): this;
    getHeaderContent(): Widget | undefined;
    setBodyContent(content?: Widget): this;
    getBodyContent(): Widget | undefined;
}
export declare class OrderedList extends Widget {
    constructor(...items: string[]);
    unstyled(value?: boolean): void;
}
export declare class PaginationLink extends Widget {
    #private;
    constructor();
    /**
     * Sets the size of button
     * @param {string} size { "sm" | "md" | "lg" | "none" }
     */
    setButtonSize(size: "sm" | "md" | "lg" | "none"): this;
    addChildren(...args: Link[]): this;
    clearChildren(): this;
    getChild(idx: number): Link;
    getChildren(): Link[];
    removeChild(...args: Link[]): this;
    replaceChild(idx: number, link: Link): this;
    setChild(...args: Link[]): this;
    prev(): this;
    next(): this;
    setActive(idx: number): this;
    getActive(): number;
    private applyActiveListener;
}
export declare class Pagination extends Row {
    #private;
    prev: Button;
    next: Button;
    pagination: PaginationLink;
    current: number;
    offset: number;
    length: number;
    constructor(length: number, activeIdx?: number);
    updatePageNumbers(): this;
    onChange(callback?: (idx: number) => void): this;
}
export declare class PlaceholderImage extends Widget {
    constructor(text?: string, color?: string, size?: [number | string, number | string]);
}
export declare class Progressbar extends Widget {
    #private;
    constructor(label?: string);
    setLabel(value: string): this;
    getLabel(): any;
    animated(value?: boolean): this;
    /**
     * Sets the color of progressbar.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     * @returns this
     */
    setColor(color: COLOR): this;
    striped(value?: boolean): this;
    setProgress(value: number): this;
    getProgress(): string;
}
export declare class Radio extends Widget {
    #private;
    constructor(label?: string, startState?: boolean);
    /**
     * A string representing the attribute's qualified name.
     * @param {string} value
     */
    setName(name?: string): this;
    /**
     * A string representing the attribute's qualified name.
     */
    getName(): string | undefined;
    setLabel(label?: string): this;
    getLabel(): any;
    truncateText(value?: boolean): this;
    /**
     * Toggles the button if it is set as toggle button.
     */
    toggle(): this;
    /**
     * Sets checked if it is a toggle button.
     * @param {boolean} [value]
     */
    setChecked(value?: boolean): this;
    setDefault(value: boolean): this;
    /**
     * Returns if this toggle is active or not.
     */
    isChecked(): any;
    /**
     * Specifies that an input field is required (must be filled out)
     * @param {boolean} value - Valid input: almost all
     */
    required(value: boolean): this;
    /**
     * Required state of input
     * @returns {boolean} - Valid input: almost all
     */
    isRequired(): boolean;
    disable(): this;
    enable(): this;
    /**
    * Specifies the value for the input field
    * @param {any} value - Valid input: all
    */
    setValue(value: any): this;
    /**
     * Value of the input field
     * @returns {any} - Valid input: all
     */
    getValue(): any;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    removeChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: boolean, component: Widget) => void): this;
}
export declare class RadioButton extends Widget {
    #private;
    constructor(text?: string, startState?: boolean, color?: COLOR);
    /**
     * A string representing the attribute's qualified name.
     * @param {string} value
     */
    setName(name?: string): this;
    /**
     * A string representing the attribute's qualified name.
     */
    getName(): string | undefined;
    /**
     * Sets the color of button.
     * @param {string} value - primary, secondary, success, danger, warning, info, light, dark
     */
    setColor(value: COLOR): this;
    getColor(): COLOR;
    /**
     * Sets the size of button
     * @param {"sm" | "md" | "lg" | "none"} size {"sm" | "md" | "lg" | "none"}
     */
    setButtonSize(size: "sm" | "md" | "lg" | "none"): this;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getText(): any;
    /**
     * Sets the text of the button.
     * @param {string} text
     */
    setText(text: string): this;
    /**
     * Toggles the button if it is set as toggle button.
     */
    toggle(): this;
    /**
     * Sets checked if it is a toggle button.
     * @param {boolean} [value]
     */
    setChecked(value?: boolean): this;
    setDefault(value: boolean): this;
    /**
     * Returns if this toggle is active or not.
     */
    isChecked(): any;
    truncateText(value?: boolean): this;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    removeChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: boolean, component: Widget) => void): this;
}
export declare class SelectionBox extends Widget {
    #private;
    constructor(startIdx?: number);
    getDom(): HTMLSelectElement;
    getValue(): any;
    getSelectedIndex(): number;
    addChildren(...args: SelectionItem[]): this;
    /**
     * Sets the size of button
     * @param { "sm" | "md" | "lg" | "none" } size { "sm" | "md" | "lg" | "none" }
     */
    setSelectSize(size: "sm" | "md" | "lg" | "none"): this;
    /**
     * Show all items.
     * @param { boolean } value
     */
    multiple(value?: boolean): this;
    /**
     * @param {1 | 2 | 3} value
     */
    setDisplaySize(value: 1 | 2 | 3): this;
    setSelected(idx: number): this;
    /**
     * Specifies that an input field is required (must be filled out)
     * @param {boolean} required - Valid input: almost all
     */
    required(value?: boolean): this;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (val: string, idx: number, component: Widget) => void): this;
    removeChangeCallback(callback: (val: string, idx: number, component: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: string, idx: number, component: Widget) => void): this;
}
export declare class SelectionItem extends Widget {
    constructor(text?: string, value?: string | number);
    /**
    * Specifies the value for the input field
    * @param {any} value - Valid input: all
    */
    setValue(this: any, value: any): any;
    /**
     * Value of the input field
     * @returns {any} - Valid input: all
     */
    getValue(this: any): any;
    getContent(): Widget;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
}
export declare class Slider extends Input {
    constructor(options?: {
        min?: number;
        max?: number;
        dValue?: number;
        step?: number;
    });
}
/**
 * Represents side-comments and small print, like copyright and legal text
 */
export declare class Small extends Widget {
    constructor(text?: string);
}
export declare class Span extends Widget {
    constructor(text?: string);
}
export declare class Spinner extends Widget {
    #private;
    constructor(color?: TEXT_COLOR);
    /**
     *
     * @param {string} value - Hex color code, valid inputs: "rgb", "rgba", "rrggbb", "rrggbbaa", "#rgb", "#rgba", "#rrggbb", "#rrggbbaa" | "initial" | "inherit"
     * @returns
     */
    setColor(value: TEXT_COLOR): this;
    setDisplayType(type: "border" | "grow"): this;
    /**
     * Sets the size of button
     * @param {boolean} value
     */
    small(value?: boolean): this;
}
export declare class Split extends Row {
    #private;
    constructor(dividerPos?: number);
    private fixSize;
    private setDir;
    /**
     * Sets the color of button.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     * @returns - this
     */
    setDividerColor(value: COLOR): this;
    setDividerThickness(thickness: number): this;
    setRow(): this;
    setColumn(): this;
    setSnapTolerance(val: number): this;
    setFirstContent(value: Widget): this;
    getFirstContent(): Widget | undefined;
    setSecondContent(value: Widget): this;
    getSecondContent(): Widget | undefined;
    onSizeChange(callback: (...args: any[]) => void): this;
    setDividerPos(value: number, unit?: "px" | "%"): this;
    setStartSize(left?: number, right?: number): this;
    setMinSplitSize(value: number): this;
}
export declare class Stretch extends Widget {
    constructor();
}
export declare class SubmenuItem extends DropdownItem {
    #private;
    constructor(text?: string);
    addChildren(...args: Widget[]): this;
    removeChild(...args: Widget[]): this;
    removeChildAt(idx: number): this;
    getContent(): Widget;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getText(): any;
    /**
     * Sets the text of the button.
     * @param {string} text
     */
    setText(text: string): this;
    click(): this;
    onClick(callback?: (self: Widget, e: Event) => void): this;
    /**
     * Sets the where dropdown menu show up.
     * @param {"dropup" | "dropdown" | "dropstart" | "dropend"} value - { "dropup" | "dropdown" | "dropstart" | "dropend" }
     */
    setDropSide(value: "dropup" | "dropdown" | "dropstart" | "dropend"): this;
    /**
     *Sets the menu alignment.
     * @param {"start" | "end" | "none"} value - { "start" | "end" | "none" }
     */
    alignMenu(value: "start" | "end" | "none"): this;
    /**
    * Switches the menu color light and dark.
    * @param { boolean } value
    */
    dark(value?: boolean): this;
}
export declare class Switch extends Widget {
    #private;
    constructor(label?: string, startState?: boolean);
    setLabel(label?: string): this;
    getLabel(): any;
    truncateText(value?: boolean): this;
    /**
     * Toggles the button if it is set as toggle button.
     */
    toggle(): this;
    /**
     * Sets checked if it is a toggle button.
     * @param {boolean} [value]
     */
    setChecked(value?: boolean): this;
    /**
     * Returns if this toggle is active or not.
     */
    isChecked(): any;
    /**
     * Specifies that an input field is required (must be filled out)
     * @param {boolean} value - Valid input: almost all
     */
    required(value: boolean): this;
    /**
     * Required state of input
     * @returns {boolean} - Valid input: almost all
     */
    isRequired(): boolean;
    disable(): this;
    enable(): this;
    /**
    * Specifies the value for the input field
    * @param {any} value - Valid input: all
    */
    setValue(value: any): this;
    /**
     * Value of the input field
     * @returns {any} - Valid input: all
     */
    getValue(): any;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    removeChangeCallback(callback: (val: boolean, component: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: boolean, component: Widget) => void): this;
}
export declare class Table extends Widget {
    #private;
    constructor(rows: number, cols: number);
    private clampCol;
    private clampRow;
    showHeader(): this;
    hideHeader(): this;
    getHeaderCellText(col: number): any;
    setHeaderCellText(col: number, text: string): this;
    setHeaderCellContent(col: number, content: Widget): this;
    mergeHeaderColumns(startCol: number, endCol: number): this;
    alignHeaderCellVertical(value: "top" | "middle" | "bottom" | "none", col: number): this;
    alignHeaderCellHorizontal(value: "start" | "center" | "end", col: number): this;
    setHeaderColor(value?: COLOR): this;
    setHeaderCellColor(col: number, value: COLOR): this;
    private getCell;
    getCellText(row: number, col: number): any;
    setCellText(row: number, col: number, text: string): this;
    setCellContent(row: number, col: number, content: Widget): this;
    mergeColumns(row: number, startCol: number, endCol: number): this;
    mergeRows(col: number, startRow: number, endRow: number): this;
    alignCellVertical(value: "top" | "middle" | "bottom" | "none", row: number, col: number): this;
    alignCellHorizontal(value: "start" | "center" | "end", row: number, col: number): this;
    setRowColor(row: number, value: COLOR): this;
    setCellColor(row: number, col: number, value: COLOR): this;
    showFooter(): this;
    hideFooter(): this;
    getFooterCellText(col: number): any;
    setFooterCellText(col: number, text: string): this;
    setFooterCellContent(col: number, content?: Widget): this;
    mergeFooterColumns(startCol: number, endCol: number): this;
    alignFooterCellVertical(value: "top" | "middle" | "bottom" | "none", col: number): this;
    alignFooterCellHorizontal(value: "start" | "center" | "end", col: number): this;
    setFooterColor(value?: COLOR): this;
    setFooterCellColor(col: number, value: COLOR): this;
    setColor(value?: COLOR): this;
    striped(value?: boolean): this;
    hoverable(value?: boolean): this;
    bordered(value?: boolean): this;
    setBorderColor(value: string): this;
    setBorderless(value?: boolean): this;
    small(value?: boolean): this;
    setCaptionText(value: string, align?: "top" | "none"): this;
    responsive(value?: boolean, breakpoint?: BREAKPOINT): this;
}
export declare class TabPanel extends Row {
    #private;
    constructor(startIdx?: number);
    addChildren(...args: Tab[]): this;
    removeChild(tab: Tab): this;
    removeChildAt(idx: number): this;
    clearChildren(): this;
    setDisplayType(type: "tab" | "pill" | "link"): this;
    vertical(): this;
    horizontal(): void;
    /**
     * It will stretch tab buttons horizontally.
     * @param {"fill" | "justified" | "none"} value -
     *  - fill: Tab buttons will be stretched with respect to their content size
     *  - justify:  Tab buttons will be stretched equally
     *  - none: Remove stretch
     * @returns
     */
    stretchTabs(value?: "fill" | "justified" | "none"): this;
    showTab(idx: number): this;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (val: number, component: Widget) => void): this;
    removeChangeCallback(callback: (val: number, component: Widget) => void): this;
    clearChangeCallbacks(): this;
    onChange(callback: (val: number, component: Widget) => void): this;
}
export declare class Tab extends NavLink {
    #private;
    constructor(text?: string, content?: Widget);
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getContent(): TabContent;
    isActive(): boolean;
    /**
     * It starts this tab and its content as shown.
     */
    setActive(value?: boolean): this;
}
export declare class TabContent extends Widget {
    constructor(content?: Widget);
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    setActive(value?: boolean): this;
    isActive(): boolean;
}
export declare class Text extends Widget {
    constructor(text?: string);
    /**
     * Make a paragraph stand out by adding
     * @param {boolean} value
     * @returns {Widget} - Self.
     */
    lead(value?: boolean): this;
}
export declare class Toast extends Widget {
    #private;
    constructor(title?: string, text?: string, color?: COLOR);
    /**
     * Sets the color of the toast.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     */
    setColor(value: COLOR): this;
    showHeader(): this;
    hideHeader(): this;
    setHeaderText(title: string): this;
    setBodyText(text: string): this;
    setHeaderContent(content?: Widget): this;
    getHeaderContent(): Widget | undefined;
    setBodyContent(content?: Widget): this;
    getBodyContent(): Widget | undefined;
    show(): this;
    hide(): this;
    onShow(callback: EventListener): this;
    onShown(callback: EventListener): this;
    onHide(callback: EventListener): this;
    onHidden(callback: EventListener): this;
}
export declare class ToggleButton extends Widget {
    #private;
    constructor(text?: string, startState?: boolean, color?: COLOR);
    /**
     * Sets the color of button.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     */
    setColor(value: COLOR): this;
    getColor(): COLOR;
    /**
     * Sets the size of button
     * @param {"sm" | "md" | "lg" | "none"} size size { "sm" | "md" | "lg" | "none" }
     */
    setButtonSize(size: "sm" | "md" | "lg" | "none"): this;
    getContent(): Widget;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    getText(): any;
    /**
     * Sets the text of the button.
     * @param {string} text
     */
    setText(text: string): this;
    truncateText(value?: boolean): this;
    /**
     * Toggles the button if it is set as toggle button.
     */
    toggle(): this;
    /**
     * Sets checked if it is a toggle button.
     * @param {boolean} [value]
     */
    setChecked(value?: boolean): this;
    setDefault(value: boolean): this;
    /**
     * Returns if this toggle is active or not.
     */
    isChecked(): any;
    /**
     * Callback will be called when state is changed
     * @param {function(Widget, boolean)} callback
     */
    addChangeCallback(callback: (val: boolean, item: ToggleButton) => void): void;
    removeChangeCallback(callback: (val: boolean, item: ToggleButton) => void): void;
    clearChangeCallbacks(): void;
    onChange(callback: (val: boolean, item: ToggleButton) => void): this;
}
export declare class TreeView extends Widget {
    #private;
    constructor();
    /**
     * Sets the color of tree node text.
     * @param {string} value - primary | secondary | success | danger | warning | info | light | dark
     * @returns itseff
     */
    setTextColor(value: COLOR): this;
    /**
     * Sets the color of tree node bg.
     * @param value - primary | secondary | success | danger | warning | info | light | dark
     * @returns
     */
    setBgColor(value: BG_COLOR): this;
    private clearActive;
    private addListenerRecursive;
    setActive(elm: TreeNode): void;
    addChildren(...args: TreeNode[]): this;
}
export declare class TreeNode extends Widget {
    #private;
    constructor(text?: string, link?: string);
    private enableSublist;
    private disableSublist;
    getLink(): string | undefined;
    setLink(link: string): this;
    toggle(): this;
    isOpen(): boolean;
    open(): this;
    close(): this;
    /**
     * Replaces all childs of the button with given one. Leaving empty or passing null clears content.
     * @param {Widget} content
     */
    setContent(content?: Widget | null): this;
    addChildren(...args: TreeNode[]): this;
    getChild(idx: number): TreeNode;
    getChildren(): TreeNode[];
    removeChild(...args: TreeNode[]): this;
    replaceChild(idx: number, child: TreeNode): this;
    setChild(...args: TreeNode[]): this;
    addEventListener(evnt: string, callback: EventListener, options?: boolean | AddEventListenerOptions | undefined): this;
    removeEventListener(callback: EventListener, evnt?: string): this;
    clearEventListeners(): this;
    /**
     * Sets the color of tree node.
     * @param {string} value - primary, secondary, success, danger, warning, info, light, dark
     * @returns itself
     */
    setTextColor(color: COLOR): this;
    setActive(value?: boolean): this;
}
export declare class UnorderedList extends Widget {
    constructor(...items: string[]);
    unstyled(value?: boolean): void;
    setInline(value?: boolean): this;
}
export declare class Video extends Widget {
    #private;
    constructor(src?: string, options?: {
        controls: Boolean;
        autoplay: Boolean;
        muted: Boolean;
        loop: Boolean;
    });
    setSrc(src: string): this;
    fit(value?: "contain" | "cover" | "fill" | "none" | "scale-down" | string): this;
    /**
     * Specifies the vertical dimension
     * @param {number} value - Valid input: "image"
     */
    setVideoHeight(value: number): this;
    /**
     * Specifies the horizontal dimension
     * @param {number} value - Valid input: "image"
     */
    setVideoWidth(value: number): this;
    setControls(value?: boolean): this;
    setAutoplay(value?: boolean): this;
    setMuted(value?: boolean): this;
}
export declare function isMobileDevice(): boolean;
export declare class Color {
    color: string;
    textColor: string;
    name: string;
    static white: string;
    static black: string;
    static primary: string;
    static secondary: string;
    static success: string;
    static info: string;
    static warning: string;
    static danger: string;
    static light: string;
    static dark: string;
    /**
     * Accent color of the button, sets all secondary effects automatically depending on given color.
     * @param {string | number} color - Hex color code, valid inputs: "rgb", "rgba", "rrggbb", "rrggbbaa", "#rgb", "#rgba", "#rrggbb", "#rrggbbaa", 0xrgb, 0xrgba, 0xrrggbb, 0xrrggbbaa
     */
    constructor(color: string | number, textColor?: string, name?: string);
    static setOpacity(color: string, l: number): string;
    static invertColor(hex: string, bw?: boolean, treshold?: number): string;
    static brightness(hex: string): number;
    /**
    Generate a random number between the passed `min` and `max` values
    @method getRand
    @param {Number} min  Minimum value of calculated number
    @param {Number} max  Maximum value of calculated number
    @return {Number} Returns pseudo-random number between §min§ and §max§
    */
    static getRand(min: number, max: number): number;
    /**
    Convert a HEX color string to an RGB
    var color = hex2rgb('#FF0000');
    // color = [255,0,0]
    @method hex2rgb
    @param {String} hex HEX color string
    @return {Array} Returns array of red, blue and green components
    */
    static hex2rgb(hex: string): number[];
    /**  Convert an RGB array to a HEX color string
    var color = rgb2hex([255,0,0]);
    // color = '#FF0000'
    @method rgb2hex
    @param {Array} rgb Array of red, blue and green components
    @return {String} Returns HEX color string
    */
    static rgb2hex(rgb: number[]): string;
    /** Convert an RGB array to a HSV array
    var color = rgb2hsv([255,0,0]);
    // color = [0,100,100]
    @method rgb2hsv
    @param {Array} rgb  Array of red, blue and green components
    @return {Array} Returns array of hue, saturation and value components
    */
    static rgb2hsv(rgb: number[]): number[];
    /**
    Convert an HSV array to a RGB array
    var color = hsv2rgb([360,100,100]);
    // color = [255,0,0]
    @method hsv2rgb
    @param {Array} hsv Array of hue, saturation and value components
    @return {Array} Returns array of red, blue and green components
    */
    static hsv2rgb(hsv: number[]): number[];
    /**
    Convert an RGB array to a HSL array
    var color = rgb2hsl([255,0,0]);
    // color = [0,100,50]
    @method rgb2hsl
    @param {Array} RGB Array of red, green and blue components
    @return {Array} Returns array of hue, saturation and lightness components
    */
    static rgb2hsl(rgb: number[]): number[];
    /**
    Convert an HSL array to a RGB array
    var color = hsl2rgb([0,100,50]);
    // color = [255,0,0]
    @method hsl2rgb
    @param {Array} HSL Array of hue, saturation and lightness components
    @return {Array} Returns array of red, green and blue components
    */
    static hsl2rgb(hsl: number[]): number[];
    /**
    Convert a HEX color string to a HSL array
    var color= hex2hsl('#FF0000');
    // color = [0,100,50]
    @method hex2hsl
    @param {String} hex  HEX color string
    @return {Array} Returns array of hue, saturation and lightness components
    */
    static hex2hsl(hex: string): number[];
    /**
    Convert an HSL array to a HEX color string
    var color = hsl2hex([0,100,50]);
    // color = '#FF0000'
    @method hsl2hex
    @param {Array} hsl Array of hue, saturation and lightness components
    @return {String} Returns HEX color string
    */
    static hsl2hex(hsl: number[]): string;
    /**
    Convert an HSV array to HSL array
    var color = hsv2hsl([0,100,100]);
    // color = [0,100,50]
    @method hsv2hsl
    @param {Array} hsv Array of hue, saturation and value components
    @return {Array} Returns array of hue, saturation and lightness components
    */
    static hsv2hsl(hsv: number[]): number[];
    /**
    Convert an HSL array to HSV array
    var color = hsl2hsv([0,100,50]);
    // color = [0,100,100]
    @method hsl2hsv
    @param {Array} hsl Array of hue, saturation and lightness components
    @return {Array} Returns array of hue, saturation and value components
    */
    static hsl2hsv(hsl: number[]): number[];
    /**
    Convert a HEX color string to a HSV array
    var color= hex2hsv('#FF0000');
    // color = [0,100,100]
    @method hex2hsv
    @param {String} hex HEX color string
    @return {Array} Returns array of hue, saturation and value components
    */
    static hex2hsv(hex: string): number[];
    /**
    Convert an HSV array to a HEX color string
    var color = hsv2hex([360,100,100]);
    // color = '#FF0000'
    @method hsv2hex
    @param {Array}  hsv Array of hue, saturation and value components
    @return {String} Returns HEX color string
    */
    static hsv2hex(hsv: number[]): string;
    /**
    Generate a series of color biased (high saturation/lightness) randomized HEX color strings
    var palette= random(5);
    // palette = ["#efa6a8", "#91abb", "#ebac2c", "#2b561", "#7b4b51"]
    @method random
    @param {Number} count Number of random colors to generate
    @param {String} [hex1] HEX color string to set band to generate random color(s)
    @param {String} [hex2] HEX color string to set band to generate random color(s)
    @return {Array} Returns Array of HEX color strings
    */
    static random(count?: number, hex1?: string, hex2?: string): string | string[];
    /**
    Generate (palette of) complementary color(s) from passed HEX color string
    
    var palette= complement('#FF0000', 'split');
    // palette = ["#80ff00", "#00ffff", "#8000ff"]
        
    var palette= complement('#FF0000', 'double');
    // palette = ["#80ff00", "#00ff40", "#00ffff", "#0040ff", "#8000ff"]
    
    @method complement
    @param {String} hex HEX color string
    @param {String} [type] Type of complementary palette to create, defaults to single complementary color, can be `split` or `double`
    @return {Array} Returns array of HEX color strings
    */
    static complement(hex: string, type: string): string[] | undefined;
    /**
    Generate triadic color palette
    
    var palette= triadic('#FF0000');
    // palette = ["#ff0000", "#00ff00", "#0000ff"]
    
    @method triadic
    @param {String} hex HEX color string
    @return {Array} Returns array of HEX color strings
    */
    static triadic(hex: string): string[] | undefined;
    /**
    Generate tetradic color palette
    
    var palette = triadic('#FF0000');
    // palette = ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]
        
    @method tetradic
    @param {String} hex HEX color string
    @return {Array} Returns array of HEX color strings
    */
    static tetradic(hex: string): string[] | undefined;
    /**
    Generate pentadic color palette
    
    var palette= triadic('#FF0000');
    // palette = ["#ff0000", "#ccff00", "#00ff66", "#0066ff", "#cc00ff"]
        
    @method pentadic
    @param {String} hex HEX color string
    @return {Array} Returns array of HEX color strings
    */
    static pentadic(hex: string): string[] | undefined;
    static degrees(degrees: number, offset: number): number;
    /**
    Generate a color from a percentage point between two colors
    
    var color= percentage(0.5);
    // color = "#f2e600";
        
    @method percentage
    @param {Number} perc Percentage between first and second colors to generate color point from expressed as value between zero and one
    @param {String} [hex1=#ff0000] Starting color HEX value defaults to `#ff0000` red so 0% is red
    @param {String} [hex2=#27ae62] Starting color HEX value defaults to `#1ae500` green so 100% is green
    @return {String} Returns resulting HEX color
    */
    static percentage(perc: number, hex1: string, hex2: string): string;
    /**
    Scale either hue, saturation or value of a color by a percentage amount
    
    var scale= percentage(0.5);
    // color = "#f2e600";
        
    @method scale
    @param  {String} hex HEX color string
    @param {Number} perc Percentage to adjust color by
    @param {String} [type=hue] String, scale to adjust, either `hue`, `saturation` or `value`
    @param {Boolean} [abs] Define percentage as absolute value from base to max, defaults to relative value between current and max
    @return {String} Returns resulting HEX color
    */
    static scale(hex: string, perc: number, type: "hue" | "saturation" | "value", abs?: boolean): string;
    /**
    Lighten a color by a percentage amount
    
    var color = lighten('#840000', 70);
    // color = "#da0000";
        
    @method lighten
    @param {String} hex HEX color string
    @param {Number} perc Percentage to lighten color by
    @param {Boolean} [abs=lightness] Define percentage lightness as absolute value, defaults to relative
    @return {String} Returns resulting HEX color
    */
    static lighten(hex: string, perc: number, abs?: boolean): string;
    /**
    Darken a color by a percentage amount
    
    var color = darken('#840000', 70);
    // color = "#da0000";
        
    @method darken
    @param {String} hex HEX color string
    @param {Number} perc Percentage to darken color by
    @param {Boolean} [abs=lightness] Define percentage lightness as absolute value, defaults to relative
    @return {String} Returns resulting HEX color
    */
    static darken(hex: string, perc: number, abs?: boolean): string;
    /**
    Saturate a color by a percentage amount
    
    var color = saturate('#840000', 70);
    // color = "#820000";
        
    @method saturate
    @param {String} hex HEX color string
    @param {Number} perc Percentage to saturate color by
    @param {Boolean} [abs=lightness] Define percentage saturation as absolute value, defaults to relative
    @return {String} Returns resulting HEX color
    */
    static saturate(hex: string, perc: number, abs?: boolean): string;
    /**
    Desaturate a color by a percentage amount
    
    var color = desaturate('#840000', 70);
    // color = "#820000";
        
    @method desaturate
    @param {String} hex HEX color string
    @param {Number} perc Percentage to saturate color by
    @param {Boolean} [abs=lightness] Define percentage desaturation as absolute value, defaults to relative
    @return {String} Returns resulting HEX color
    */
    static desaturate(hex: string, perc: number, abs?: boolean): string;
    /**
    Generate algorithmic color palette
    
    var palett e= algorithmic ({hex:'#FF0000'});
    // palette = ["#ff0000", "#00ff00", "#0000ff"]
 
    var palett e= algorithmic ({hex:'#FF0000', count: 5});
    // palette = ["#ff0000", "#ccff00", "#00ff66", "#0066ff", "#cc00ff"]
 
    var palette = algorithmic ({hex:'#FF0000', scope: 100, count:4});
    // palette = ["#ff00d4", "#ff0047", "#ff4700", "#ffd500"]
    var palette = algorithmic ({hex:'#FF0000', type:'saturation', scope:50});
    // palette = ["#ffffff", "#ffbfbf", "#ff8080"]
        
    @method algorithmic
    @param {Object} options Algorithmic color transformation options
    @param {String} options.hex HEX color string
    @param {Number} [options.count=3] Number of colors to produce
    @param {String} [options.type=hue] Widget to calculate on, either `hue`, `saturation` or `value`
    @param {Number} [options.scope=360] Number of degrees of rotation to consider
    @param {Number} [options.rotation=0] Number of degrees of rotation to calculate from
    @return {Array} Returns array of HEX color strings
    */
    static algorithmic(opt: any): string[] | undefined;
}
export declare const GLOBALS: {};
export declare type COLOR = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
export declare type BUTTON_COLOR = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
export declare type TEXT_COLOR = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "body" | "muted" | "white" | "black-50" | "white-50" | "reset";
export declare type BG_COLOR = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "body" | "white" | "transparent";
/**
 * This defines the alignment along the main axis. This is the horizontal axis for {@link Row | Row}, vertical axis for {@link Column | Column}.
 * It helps distribute extra free space leftover items on the axis.
 * - start (default): items are packed toward the start of the flex-direction.
 * - end: items are packed toward the end of the flex-direction.
 * - center: items are centered along the line.
 * - between: items are evenly distributed in the line; first item is on the start line, last item on the end line.
 * - around: items are evenly distributed in the line with equal space around them.
 * - evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
 * @type {"start" | "end" | "center" | "baseline" | "stretch"}
 */
export declare type JUSTIFY = "start" | "end" | "center" | "between" | "around" | "evenly";
/**
 * This defines the default behavior for how items are laid out along the cross axis on the current layout.
 * This is the vertical axis for {@link Row | Row}, horizontal axis for {@link Column | Column}.
 * - stretch (default): stretch to fill the container (still respect min-width/max-width).
 * - start: items are placed at the start of the cross axis.
 * - end: items are placed at the end of the cross axis.
 * - center: items are centered in the cross-axis.
 * - baseline: items are aligned such as their baselines align.
 * @type {"start" | "end" | "center" | "baseline" | "stretch"}
 */
export declare type ALIGNMENT = "stretch" | "start" | "end" | "center" | "baseline";
export declare type ANGLE = "deg" | "grad" | "rad" | "turn";
/**
 * Length units
 * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units | units}
 */
export declare type UNIT = "em" | "ex" | "ch" | "rem" | "lh" | "vw" | "vh" | "vmin" | "vmax" | "cm" | "mm" | "Q" | "in" | "pc" | "pt" | "px" | "%";
export declare type BORDER = "all" | "top" | "end" | "bottom" | "start";
export declare type SIDE = "top" | "left" | "bottom" | "right" | "center";
export declare type BREAKPOINT = "sm" | "md" | "lg" | "xl" | "xxl";
export declare type INPUT = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
export declare type OVERFLOW = "auto" | "hidden" | "visible" | "scroll";
export declare type POSITION = "static" | "relative" | "absolute" | "fixed" | "sticky";
export declare type ALLOW = "accelerometer" | "ambient-light-sensor" | "autoplay" | "battery" | "camera" | "fullscreen" | "geolocation" | "gyroscope" | "magnetometer" | "microphone" | "midi" | "payment" | "usb" | "vibrate" | string;
export declare type SANDBOX = "allow-forms" | "allow-modals" | "allow-orientation-lock" | "allow-pointer-lock" | "allow-popups" | "allow-popups-to-escape-sandbox" | "allow-presentation" | "allow-same-origin" | "allow-scripts" | "allow-top-navigation" | "allow-top-navigation-by-user-activation" | string;
export declare type REFERRER = "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | string;
export declare type PLACEMENT = "top-0" | "top-50" | "top-100" | "bot-0" | "bot-50" | "bot-100" | "start-0" | "start-50" | "start-100" | "end-0" | "end-50" | "end-100";
export declare type SIZING = 25 | 33 | 50 | 66 | 75 | 100 | "auto" | "none";
export declare type SPACES = 0 | 1 | 2 | 3 | 4 | 5 | "auto" | "none";
export declare type CURSOR = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "all-scroll" | "col-resize" | "row-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "zoom-in" | "zoom-out";
export {};