@thatopen/ui/dist/index.d.ts

Collection of web components (UI components) meant to be used, but not limited to, BIM applications.

import { CSSResult } from 'lit';
import { html } from 'lit';
import { LitElement } from 'lit';
import { Placement } from '@floating-ui/dom';
import { ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
import { TemplateResult } from 'lit';
import { TemplateResult as TemplateResult_2 } from 'lit-html';

/**
 * A custom button web component for BIM applications. HTML tag: bim-button
 *
 * @fires click - Fired when the button is clicked.
 */
export declare class Button extends LitElement {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * The label to be displayed on the button.
     * @type {string}
     * @default undefined
     * @example <bim-button label="Click me"></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     */
    label?: string;
    /**
     * A boolean attribute which, if present, indicates that the label should be hidden.
     * @default false
     * @example <bim-button label="Click me" label-hidden></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.labelHidden = true;
     */
    labelHidden: boolean;
    /**
     * A boolean attribute which, if present, indicates that the button is active.
     * @default false
     * @example <bim-button label="Click me" active></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.active = true;
     */
    active: boolean;
    /**
     * A boolean attribute which, if present, indicates that the button is disabled.
     * @default false
     * @example <bim-button label="Click me" disabled></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.disabled = true;
     */
    disabled: boolean;
    /**
     * The icon to be displayed on the button.
     * @type {string}
     * @default undefined
     * @example <bim-button icon="my-icon"></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.icon = 'my-icon';
     */
    icon?: string;
    /**
     * A boolean attribute which, if present, indicates that the button should be displayed vertically.
     * @default false
     * @example <bim-button label="Click me" vertical></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.vertical = true;
     */
    vertical: boolean;
    /**
     * The time (in milliseconds) to wait before showing the tooltip when hovering over the button.
     * @type {number}
     * @default 700
     * @example <bim-button label="Click me" tooltip-time="1000"></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.tooltipTime = 1000;
     */
    tooltipTime?: number;
    /**
     * A boolean attribute which, if present, indicates that the tooltip should be visible.
     * @default false
     * @example <bim-button label="Click me" tooltip-visible></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.tooltipVisible = true;
     */
    tooltipVisible: boolean;
    /**
     * The title of the tooltip to be displayed when hovering over the button.
     * @type {string}
     * @default undefined
     * @example <bim-button label="Click me" tooltip-title="Button Tooltip"></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.tooltipTitle = 'Button Tooltip';
     */
    tooltipTitle?: string;
    /**
     * The text of the tooltip to be displayed when hovering over the button.
     * @type {string}
     * @default undefined
     * @example <bim-button label="Click me" tooltip-text="This is a tooltip"></bim-button>
     * @example const button = document.createElement('bim-button');
     *          button.label = 'Click me';
     *          button.tooltipText = 'This is a tooltip';
     */
    tooltipText?: string;
    private _stateBeforeLoading;
    private _loading;
    /**
     * Attribute to set the loading state of the button.
     * When the loading state is set to true, the button is disabled and the icon is changed to a loading spinner.
     * When the loading state is set to false, the button is reverted to its previous state.
     */
    set loading(value: boolean);
    get loading(): boolean;
    private _parent;
    private _tooltip;
    private timeoutID?;
    private _mouseLeave;
    private set mouseLeave(value);
    private get mouseLeave();
    constructor();
    private computeTooltipPosition;
    private onMouseEnter;
    private onClick;
    closeNestedContexts(): void;
    click(): void;
    private get _contextMenu();
    private showContextMenu;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected render(): TemplateResult_2<1>;
}

/**
 * Represents the detail of a cell created event.
 */
export declare interface CellCreatedEventDetail<T extends TableRowData = TableRowData> {
    cell: TableCell<T>;
}

export declare type CellRenderValue = TableCellValue | HTMLElement | TemplateResult;

/**
 * A custom checkbox web component for BIM applications. HTML tag: bim-checkbox
 *
 * @fires change - Fired when the checkbox changes.
 */
export declare class Checkbox extends LitElement implements HasValue {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * Represents the icon associated with the checkbox label. This icon is displayed next to the label text if provided. Changing this property dynamically updates the displayed icon if the label is present. It is used to visually enhance the checkbox by adding an icon.
     * @type {string}
     * @default undefined
     * @example <bim-checkbox icon="check"></bim-checkbox>
     * @example
     * const checkbox = document.createElement('bim-checkbox');
     * checkbox.icon = 'check';
     * document.body.appendChild(checkbox);
     */
    icon?: string;
    /**
     * The name attribute of the checkbox. It can be used to identify the checkbox when submitting a form or to reference the checkbox in JavaScript. Changing this property dynamically updates the name attribute of the internal \<input\> element.
     * @type {string}
     * @default undefined
     * @example <bim-checkbox name="agreement"></bim-checkbox>
     * @example
     * const checkbox = document.createElement('bim-checkbox');
     * checkbox.name = 'agreement';
     * document.body.appendChild(checkbox);
     */
    name?: string;
    /**
     * The label text associated with the checkbox. This text is displayed next to the checkbox itself. Changing this property dynamically updates the displayed label. If an icon is also specified, it will be displayed alongside this label.
     * @type {string}
     * @default undefined
     * @example <bim-checkbox label="Accept Terms"></bim-checkbox>
     * @example
     * const checkbox = document.createElement('bim-checkbox');
     * checkbox.label = 'Accept Terms';
     * document.body.appendChild(checkbox);
     */
    label?: string;
    /**
     * Indicates whether the checkbox is checked or not. This property reflects the checked state of the internal \<input\> element and can be used to set or get the checkbox's state. Changing this property dynamically updates the checkbox's visual state and its checked attribute.
     * @default false
     * @example <bim-checkbox checked></bim-checkbox>
     * @example
     * const checkbox = document.createElement('bim-checkbox');
     * checkbox.checked = true;
     * document.body.appendChild(checkbox);
     */
    checked: boolean;
    /**
     * Indicates whether the checkbox is displayed with an inverted disposition.
     * @default false
     * @example
     * <bim-checkbox inverted></bim-checkbox>
     * @example
     * const checkbox = document.createElement('bim-checkbox');
     * checkbox.inverted = true;
     * document.body.appendChild(checkbox);
     */
    inverted: boolean;
    /**
     * A getter that returns the current checked state of the checkbox. This is useful for retrieving the checkbox's value in form submissions or JavaScript interactions as it provides a consistent `value` property as many other components.
     * @type {boolean}
     * @default false
     * @example <script>console.log(document.querySelector('bim-checkbox').value);</script>
     * @example
     * const checkbox = document.createElement('bim-checkbox');
     * document.body.appendChild(checkbox);
     * console.log(checkbox.value); // false initially
     */
    get value(): boolean;
    /**
     * Event that is dispatched when the checkbox's checked state changes.
     * This event can be used to listen for changes to the checkbox's value and perform
     * necessary actions when the value changes.
     *
     * @event change
     * @example
     * checkbox.addEventListener('change', (event) => {
     *   console.log('Checkbox value changed:', event.target.checked);
     * });
     */
    readonly onValueChange: Event;
    private onChange;
    protected render(): TemplateResult_2<1>;
}

/**
 * A custom color input web component for BIM applications. HTML tag: bim-color-input
 *
 * @fires input - Fired when the color input changes.
 */
export declare class ColorInput extends LitElement implements HasValue, HasName {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * The name of the color input.
     * @type {string}
     * @default undefined
     * @example
     * <bim-color-input name="colorInput"></bim-color-input>
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.name = 'colorInput';
     */
    name?: string;
    /**
     * The label for the color input.
     * @type {string}
     * @default undefined
     * @example
     * <bim-color-input label="Select a color"></bim-color-input>
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.label = 'Select a color';
     */
    label?: string;
    /**
     * The icon for the color input.
     * @type {string}
     * @default undefined
     * @example
     * <bim-color-input icon="palette"></bim-color-input>
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.icon = 'palette';
     */
    icon?: string;
    /**
     * A boolean attribute which, if present, indicates that the color input should be displayed vertically.
     * @default false
     * @example
     * <bim-color-input vertical></bim-color-input>
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.vertical = true;
     */
    vertical: boolean;
    /**
     * The opacity of the color input.
     * @type {number}
     * @default undefined
     * @example
     * <bim-color-input opacity="0.5"></bim-color-input>
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.opacity = 0.5;
     */
    opacity?: number;
    /**
     * The color value of the color input in hexadecimal format.
     * @default #bcf124
     * @example
     * <bim-color-input color="#ff0000"></bim-color-input>
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.color = '#ff0000';
     */
    color: string;
    /**
     * Disables the input, preventing user interaction.
     */
    disabled: boolean;
    private _colorInput;
    private _textInput;
    onValueChange: Event;
    /**
     * Represents both the color and opacity values combined into a single object. This is an instance property, not an HTMLElement attribute.
     * @type {Object}
     * @example
     * const colorInput = document.createElement('bim-color-input');
     * colorInput.value = { color: '#ff0000', opacity: 0.5 };
     */
    set value(_value: {
        color: string;
        opacity?: number;
    });
    get value(): {
        color: string;
        opacity?: number;
    };
    private onColorInput;
    private onTextInput;
    private onOpacityInput;
    /**
     * Focuses on the color input by programmatically triggering a click event on the underlying color input element.
     * If the color input element is not available, the function does nothing.
     */
    focus(): void;
    protected render(): TemplateResult_2<1>;
}

/**
 * Represents a column in the table.
 *
 * @property name - The name of the column.
 * @property width - The width of the column.
 */
export declare interface ColumnData<T extends TableRowData = TableRowData> {
    /** The name of the column. */
    name: keyof T;
    /** The width of the column. */
    width: string;
    forceDataTransform?: boolean;
}

/**
 * A base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer.
 */
export declare class Component extends LitElement {
    private _lazyLoadObserver;
    private _visibleElements;
    protected ELEMENTS_BEFORE_OBSERVER: number;
    protected useObserver: boolean;
    protected elements: Set<HTMLElement>;
    protected set visibleElements(value: HTMLElement[]);
    protected get visibleElements(): HTMLElement[];
    private getLazyObserver;
    private observeLastElement;
    protected resetVisibleElements(): void;
    protected observe: (elements: HTMLElement[]) => void;
    /**
     * Creates a new UI component instance based on the provided template and initial state.
     *
     * @template T - The type of the UI component element.
     * @template S - The type of the component state.
     *
     * @param template - The stateful component template function.
     * @param state - The initial state of the component.
     * @returns An array containing the created UI component element and a function to update its state.
     */
    static create<T extends HTMLElement, S extends Record<string, any>>(template: StatefullComponent<S>, state: S): [element: T, update: UpdateFunction<S>, currentState: () => S];
    /**
     * Creates a new UI component instance based on the provided template and initial state.
     *
     * @template T - The type of the UI component element.
     * @template S - The type of the component state.
     *
     * @param template - The stateless component template function.
     * @returns The created UI component element.
     */
    static create<T extends HTMLElement>(template: StatelessComponent): T;
}

/**
 * Represents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition.
 */
export declare type ConditionFunctions = {
    [queryCondition in QueryCondition]: (leftValue: string | boolean | number, rightValue: string | boolean | number) => boolean;
};

export declare class ContextMenu extends LitElement {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult[];
    private _previousContainer;
    private _placement?;
    get placement(): Placement | undefined;
    set placement(value: Placement | undefined);
    static dialog: HTMLDialogElement;
    static menus: HTMLElement[];
    static removeMenus(): void;
    private _visible;
    get visible(): boolean;
    set visible(value: boolean);
    /**
     * Asynchronously updates the position of the context menu relative to a target element.
     * If no target element is provided, it attempts to use the parent node as the target.
     * The position is calculated using the `computePosition` function from `@floating-ui/dom`,
     * which considers various adjustments like offset, inline positioning, flipping, and shifting
     * to ensure the context menu is properly placed relative to the target element.
     *
     * @param [target] - The target element relative to which the context menu should be positioned.
     *                                 If not provided, the parent node is used as the target.
     * @returns A promise that resolves once the position has been updated. This method
     *                          does not explicitly return a value but updates the context menu's style
     *                          properties to position it on the screen.
     */
    updatePosition(): Promise<void>;
    connectedCallback(): void;
    protected render(): TemplateResult_2<1>;
}

/**
 * A custom dropdown web component for BIM applications.
 */
export declare class Dropdown extends Component implements HasValue, HasName {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult[];
    /**
     * The name of the dropdown.
     * @type {string}
     * @default undefined
     * @example
     * <bim-dropdown name="exampleName"></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.name = 'exampleName';
     */
    name?: string;
    /**
     * The icon to be displayed in the dropdown.
     * @type {string}
     * @default undefined
     * @example
     * <bim-dropdown icon="exampleIcon"></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.icon = 'exampleIcon';
     */
    icon?: string;
    /**
     * The label to be displayed in the dropdown.
     * @type {string}
     * @default undefined
     * @example
     * <bim-dropdown label="Example Label"></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.label = 'Example Label';
     */
    label?: string;
    /**
     * Indicates whether multiple options can be selected in the dropdown.
     * @default false
     * @example
     * <bim-dropdown multiple></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.multiple = true;
     */
    multiple: boolean;
    /**
     * Indicates whether a selection is required in the dropdown.
     * @default false
     * @example
     * <bim-dropdown required></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.required = true;
     */
    required: boolean;
    /**
     * Indicates whether the dropdown should be displayed vertically.
     * @default false
     * @example
     * <bim-dropdown vertical></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.vertical = true;
     */
    vertical: boolean;
    /**
     * Represents the placeholder property of the component.
     * This property is used to display a hint or a placeholder text inside the input field.
     * The placeholder text is displayed when the input field is empty and loses focus.
     *
     * @example
     * <bim-dropdown placeholder="Select something.."></bim-dropdown>
     */
    placeholder?: string;
    private _visible;
    /**
     * Indicates whether the dropdown it-self (not the component) is visible.
     * @type {boolean}
     * @default false
     * @example
     * <bim-dropdown visible></bim-dropdown>
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.visible = true;
     */
    set visible(value: boolean);
    get visible(): boolean;
    private _value;
    /**
     * The selected values in the dropdown.
     * @type {any[]}
     * @example
     * const dropdown = document.createElement('bim-dropdown');
     * dropdown.value = ['option1', 'option2'];
     */
    set value(value: any[]);
    get value(): any[];
    private get _options();
    /**
     * Event that is fired when the value of the dropdown changes.
     * This event is fired when the user selects or deselects an option.
     *
     * @event change
     * @example
     * dropdown.addEventListener('change', (event) => {
     *   console.log('Dropdown value changed:', event.target.value);
     * });
     */
    onValueChange: Event;
    private _contextMenu;
    constructor();
    private onOptionClick;
    private onSlotChange;
    private updateOptionsState;
    private findOption;
    protected render(): TemplateResult_2<1>;
}

export declare interface ElementCreatedEventDetail<T extends HTMLElement = HTMLElement> {
    name: string;
    element: T;
}

/**
 * Represents a single query condition.
 */
export declare interface EntryQuery {
    operator?: QueryOperators;
    key: string;
    condition: QueryCondition;
    value: string | number | boolean;
}

declare type ExtractName<T> = T extends {
    name: infer N extends string;
} ? N : T;

declare type ExtractState<T> = T extends {
    state: infer N extends Record<string, any>;
} ? N : never;

declare type ExtractStateByElement<T, U> = T extends {
    name: U;
    state: infer N extends Record<string, any>;
} ? N : never;

/**
 * Extracts and returns the value of an HTML element's attributes.
 * @param child - The HTML element to extract values from.
 * @param recursive - Whether to recursively extract values from child elements. Default is true.
 * @returns An object containing the extracted values.
 */
export declare const getElementValue: <T extends Record<string, any> = Record<string, any>>(child: HTMLElement, transform?: { [K in keyof T]?: ((value: any) => any) | undefined; }, recursive?: boolean) => T;

/**
 * A custom grid component for web applications.
 * @element bim-grid
 */
export declare class Grid<L extends string[] = [], E extends GridComponentDefinition = []> extends LitElement {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * Indicates whether the grid should be displayed in a floating state. When set to true, the grid and its children may have different styling to indicate a floating state, such as being absolutely positioned and having pointer-events set to none. This property is reflected to an attribute, allowing it to be set directly in HTML.
     *
     * @default false
     * @example <bim-grid floating></bim-grid>
     * @example
     * const grid = document.createElement('bim-grid');
     * grid.floating = true;
     * document.body.appendChild(grid);
     */
    floating: boolean;
    /**
     * Represents the layout configuration of the grid. The layout is defined by a string identifier which corresponds to a predefined grid template in the `layouts` object of the Grid component. Setting this property updates the grid's template and triggers a reconfiguration of the grid's containers based on the new layout. If the specified layout is not defined, a warning is logged, and the layout remains unchanged. This property is reflected to an attribute, allowing it to be set directly in HTML. Changing the layout will dispatch a "layoutchange" event, which can be used to react to layout changes.
     *
     * @default undefined
     * @example <bim-grid layout="default"></bim-grid>
     * @example
     * const grid = document.createElement('bim-grid');
     * grid.layout = 'default';
     * document.body.appendChild(grid);
     */
    layout?: L[number];
    private _layouts;
    /**
     * Represents a collection of predefined grid layouts for the Grid component.
     * Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances or
     * Statefull/Stateless component definitions.
     * The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances.
     * The HTMLElement instances are used to populate the grid with content.
     * @remarks Once defined, the layout is meant to be immutable.
     */
    set layouts(value: GridLayoutsDefinition<L, E>);
    get layouts(): GridLayoutsDefinition<L, E>;
    private _elements;
    set elements(value: GridComponents<E>);
    get elements(): GridComponents<E>;
    private getLayoutAreas;
    private _onLayoutChange?;
    protected firstUpdated(): void;
    private _templateIds;
    private _updateFunctions;
    private getTemplateId;
    updateComponent: UpdateGridComponents<E>;
    private cleanUpdateFunctions;
    private emitElementCreation;
    protected render(): TemplateResult_2<1>;
}

export declare type GridComponentDefinition = (string | {
    name: string;
    state: Record<string, any>;
})[];

export declare type GridComponents<T extends GridComponentDefinition> = {
    [P in ExtractName<T[number]>]?: HTMLElement | StatelessComponent | {
        template: StatefullComponent<ExtractStateByElement<T[number], P>>;
        initialState: ExtractStateByElement<T[number], P>;
    };
};

/**
 Represents a collection of predefined grid layouts for the Grid component. Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances. The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances. The HTMLElement instances are used to populate the grid with content.
 */
export declare type GridLayoutsDefinition<L extends string[], E extends GridComponentDefinition> = {
    [K in L[number]]: {
        template: string;
        icon?: string;
        elements?: GridComponents<E>;
    };
};

/**
 * Represents an object that has a name and an optional label.
 */
export declare interface HasName {
    name?: string;
    label?: string;
}

/**
 * Represents an object that has a value and an event for value changes.
 */
export declare interface HasValue {
    value: any;
    onValueChange: Event;
}

export { html }

/**
 * A custom icon web component for BIM applications. HTML tag: bim-icon
 */
export declare class Icon extends LitElement {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    static properties: {
        icon: {
            type: StringConstructor;
        };
    };
    icon?: string;
    render(): TemplateResult_2<1>;
}

/**
 * A custom input web component for BIM applications. HTML tag: bim-input
 */
export declare class Input extends LitElement implements HasValue, HasName {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    name?: string;
    label?: string;
    icon?: string;
    vertical: boolean;
    onValueChange: Event;
    get value(): Record<string, any>;
    set value(data: Record<string, any>);
    protected render(): TemplateResult_2<1>;
}

/**
 * A custom label web component for BIM applications. HTML tag: bim-label
 */
export declare class Label extends LitElement {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * Specifies the image URL for the component. When set, an `<img>` element is rendered within the component.
     * Changing this property updates the source of the image. If the property is not set or removed, the image will not be displayed.
     * @type {String}
     * @default undefined
     * @example <bim-label img="path/to/image.png">My Label</bim-label>
     * @example
     * const labelComponent = document.createElement('bim-label');
     * labelComponent.img = 'path/to/image.png';
     * document.body.appendChild(labelComponent);
     */
    img?: string;
    /**
     * Controls the visibility of the label text. When `true`, the label text is not rendered to the user.
     * Changing this property to `true` hides the label text if it was previously visible. Setting it to `false` will show the label text if it is defined.
     * @default false
     * @example <bim-label label-hidden>My Label</bim-label>
     * @example
     * const labelComponent = document.createElement('bim-label');
     * labelComponent.labelHidden = true;
     * document.body.appendChild(labelComponent);
     */
    labelHidden: boolean;
    /**
     * Specifies the icon to be used in the component. This property is intended for displaying an icon alongside the label or image.
     * When the `icon` property changes, the displayed icon updates accordingly. If the icon is hidden (controlled by `iconHidden`), changing this property will not affect the visibility of the icon.
     * Note: The actual rendering of the icon is managed by a nested `<bim-icon>` component in the shadow DOM.
     * @type {String}
     * @default undefined
     * @example <bim-label icon="solar:settings-bold">My Label</bim-label>
     * @example
     * const labelComponent = document.createElement('bim-label');
     * labelComponent.icon = 'example-icon';
     * document.body.appendChild(labelComponent);
     */
    icon?: string;
    /**
     * Controls the visibility of the icon. When `true`, the icon is not rendered to the user.
     * Changing this property to `true` hides the icon if it was previously visible. Setting it to `false` will show the icon if it is defined.
     * Note: This does not affect the visibility of the label or image, only the icon.
     * @default false
     * @example <bim-label icon-hidden>My Label</bim-label>
     * @example
     * const labelComponent = document.createElement('bim-label');
     * labelComponent.iconHidden = true;
     * document.body.appendChild(labelComponent);
     */
    iconHidden: boolean;
    /**
     * Determines the orientation of the component. When `true`, the component's contents (label, image, and icon) are stacked vertically.
     * Changing this property affects the layout of the component, switching between a horizontal and vertical arrangement of its contents.
     * @default false
     * @example <bim-label vertical icon="solar:settings-bold">My Label</bim-label>
     * @example
     * const labelComponent = document.createElement('bim-label');
     * labelComponent.vertical = true;
     * document.body.appendChild(labelComponent);
     */
    vertical: boolean;
    get value(): string | number | boolean | null;
    protected render(): TemplateResult_2<1>;
}

/**
 * Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options.
 *
 */
export declare class Manager {
    private static _config;
    static set config(value: Partial<ManagerConfig>);
    static get config(): Required<ManagerConfig>;
    private static addGlobalStyles;
    static defineCustomElement(tag: string, constructor: new () => HTMLElement): void;
    /**
     * @deprecated Use `Manager.init()` instead.
     */
    static registerComponents(): void;
    /**
     * Initializes the BIM UI library by defining custom elements.
     * It ensures that all necessary styles and custom elements are registered for use in BIM UI components.
     *
     * @example
     * ```typescript
     * import { Manager } from "@thatopen/ui";
     * Manager.init();
     * ```
     */
    static init(querySelectorElements?: string, animateOnLoad?: boolean): void;
    static newRandomId(): string;
    private static animateOnLoad;
    static toggleTheme(animate?: boolean): void;
}

/**
 * Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager.
 */
export declare interface ManagerConfig {
    /**
     * Determines whether section labels should be displayed on the vertical toolbar.
     * Default value is `false`.
     */
    sectionLabelOnVerticalToolbar: boolean;
}

/**
 * A custom number input web component for BIM applications. HTML tag: bim-number-input
 */
export declare class NumberInput extends LitElement implements HasValue, HasName {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * The `name` property is used to specify the name of the number input component.
     * This can be useful for identifying the component in forms or JavaScript.
     * When the property changes, it updates the component's attribute to reflect the new name.
     *
     * @type {String}
     * @default undefined
     * @example <bim-number-input name="age"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.name = 'age';
     * document.body.appendChild(numberInput);
     */
    name?: string;
    /**
     * The `icon` property allows specifying an icon identifier to be used within the number input component,
     * potentially for decorative or instructional purposes. Changes to this property may affect the appearance
     * or layout of the component, depending on how the icon is used within the component's template.
     *
     * @type {String}
     * @default undefined
     * @example <bim-number-input icon="user-icon"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.icon = 'user-icon';
     * document.body.appendChild(numberInput);
     */
    icon?: string;
    /**
     * The `label` property is used to define a text label associated with the number input component.
     * This label can provide context or instructions to the user. When the label property changes,
     * the component updates to display the new label text.
     *
     * @type {String}
     * @default undefined
     * @example <bim-number-input label="Enter your age"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.label = 'Enter your age';
     * document.body.appendChild(numberInput);
     */
    label?: string;
    /**
     * The `pref` property is used to specify a prefix for the value in the number input component.
     * This could be a currency symbol, a unit, or any other kind of prefix. The prefix is displayed
     * inside the input field before the value. When the property changes, the displayed prefix updates accordingly.
     *
     * @type {String}
     * @default undefined
     * @example <bim-number-input pref="$"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.pref = '$';
     * document.body.appendChild(numberInput);
     */
    pref?: string;
    /**
     * The `min` property defines the minimum value that can be entered in the number input component.
     * It is used to validate the input and ensure that the value does not go below this minimum.
     * When the property changes, the component enforces the new minimum value.
     *
     * @type {Number}
     * @default undefined
     * @example <bim-number-input min="0"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.min = 0;
     * document.body.appendChild(numberInput);
     */
    min?: number;
    private _value;
    /**
     * The `value` property represents the current value of the number input component.
     * It is a crucial property that holds the actual number input by the user or set programmatically.
     * Changes to this property update the displayed value in the component and can trigger validation
     * against the `min` and `max` properties if they are set.
     *
     * @type {Number}
     * @default 0
     * @example <bim-number-input value="10"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.value = 10;
     * document.body.appendChild(numberInput);
     */
    set value(data: number);
    get value(): number;
    /**
     * The `step` property determines the amount by which the value should increase or decrease
     * when the user interacts with the component's stepping mechanism. It is used for incremental
     * changes to the value. When the property changes, the step size for value changes is updated.
     *
     * @type {Number}
     * @default undefined
     * @example <bim-number-input step="5"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.step = 5;
     * document.body.appendChild(numberInput);
     */
    step?: number;
    /**
     * The `sensitivity` property affects how sensitive the slider is to mouse movements when adjusting
     * the value. A higher sensitivity means smaller movements are needed to change the value. This property
     * is particularly relevant when the `slider` property is enabled. Changes to this property adjust how
     * the slider responds to input.
     *
     * @type {Number}
     * @default undefined
     * @example <bim-number-input sensitivity="10"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.sensitivity = 10;
     * document.body.appendChild(numberInput);
     */
    sensitivity?: number;
    /**
     * The `max` property defines the maximum value that can be entered in the number input component.
     * It is used to validate the input and ensure that the value does not exceed this maximum.
     * When the property changes, the component enforces the new maximum value.
     *
     * @type {Number}
     * @default undefined
     * @example <bim-number-input max="100"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.max = 100;
     * document.body.appendChild(numberInput);
     */
    max?: number;
    /**
     * The `suffix` property is used to specify a suffix for the value in the number input component.
     * Similar to the `pref` property, but the suffix is displayed after the value. It could be a unit of measure,
     * a percentage symbol, etc. When the property changes, the displayed suffix updates accordingly.
     *
     * @type {String}
     * @default undefined
     * @example <bim-number-input suffix="%"></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.suffix = '%';
     * document.body.appendChild(numberInput);
     */
    suffix?: string;
    /**
     * The `vertical` property indicates whether the slider (if enabled) should be displayed vertically.
     * This can affect the layout and behavior of the slider component within the number input.
     * When the property changes, the orientation of the slider adjusts accordingly.
     *
     * @default false
     * @example <bim-number-input vertical></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.vertical = true;
     * document.body.appendChild(numberInput);
     */
    vertical: boolean;
    /**
     * The `slider` property enables a slider interface for the number input component, allowing users
     * to adjust the value by dragging the slider. When enabled, it changes the component's UI to include
     * a slider. When the property changes, the component toggles between a regular input field and a slider view.
     *
     * @default false
     * @example <bim-number-input slider></bim-number-input>
     * @example
     * const numberInput = document.createElement('bim-number-input');
     * numberInput.slider = true;
     * document.body.appendChild(numberInput);
     */
    slider: boolean;
    private _input;
    readonly onValueChange: Event;
    private onChange;
    private setValue;
    private onBlur;
    private onSliderMouseDown;
    private onFocus;
    connectedCallback(): void;
    /**
     * Sets focus to the input element of the number input component.
     * This method is useful for programmatically focusing the input element, for example,
     * in response to a user action or to emphasize the input in the UI.
     *
     * If the input element reference is not available (not yet rendered or disconnected),
     * this method will do nothing.
     */
    focus(): void;
    protected render(): TemplateResult_2<1>;
}

/**
 * A custom option web component for BIM applications. HTML tag: bim-option
 */
declare class Option_2 extends LitElement {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult;
    /**
     * Represents the image URL for the component. When set, it displays an image inside the component.
     * Changing this property dynamically updates the component to show the specified image.
     * This property is managed by the `bim-label` component nested within the shadow DOM of this component.
     *
     * @type {String}
     * @default undefined
     * @example <bim-option img="path/to/image.png"></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.img = 'path/to/image.png';
     * document.body.appendChild(option);
     */
    img?: string;
    /**
     * Specifies the label text for the component. This text is displayed inside the component.
     * When the label property changes, the component updates to display the new label text.
     * This property is also passed down to the `bim-label` component nested within the shadow DOM, affecting its display.
     *
     * @type {String}
     * @default undefined
     * @example <bim-option label="Option Label"></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.label = 'Option Label';
     * document.body.appendChild(option);
     */
    label?: string;
    /**
     * Defines the icon to be displayed inside the component. The icon is specified by its name or path.
     * Changing this property will dynamically update the component to display the specified icon.
     * This property is utilized by the `bim-label` component nested within the shadow DOM to render the icon.
     *
     * @type {String}
     * @default undefined
     * @example <bim-option icon="icon-name"></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.icon = 'icon-name';
     * document.body.appendChild(option);
     */
    icon?: string;
    /**
     * Indicates whether the option is checked. This boolean property can be used to mark the option as selected or not.
     * When toggled, it visually updates the component to reflect the checked state.
     *
     * @default false
     * @example <bim-option checked></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.checked = true;
     * document.body.appendChild(option);
     */
    checked: boolean;
    /**
     * Determines whether a checkbox is displayed alongside the label. When true, a checkbox is shown.
     * This property affects the internal layout and display of the component, specifically adding a `bim-checkbox` element when enabled.
     *
     * @default false
     * @example <bim-option checkbox></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.checkbox = true;
     * document.body.appendChild(option);
     */
    checkbox: boolean;
    /**
     * Controls the visibility of the mark or checkbox when the option is checked. If true, the mark or checkbox is not displayed even if the option is checked.
     * This property allows for a cleaner look in certain UI designs where the checked state is indicated without a visual mark.
     *
     * @default false
     * @example <bim-option no-mark></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.noMark = true;
     * document.body.appendChild(option);
     */
    noMark: boolean;
    private _value;
    /**
     * Represents the dynamic value of the component which can be of different types based on the attribute's value.
     * This property is designed to accept various types of inputs: boolean values (true/false as strings), numbers, or any other value as a string.
     * The conversion logic in the `converter` method ensures that the attribute value is correctly interpreted and stored in the appropriate data type.
     * If you need to use complex data types for the value as arrays or objects, you must do it using the corresponding property in JavaScript
     * as handling those types of data types using HTML attributes is not recommended.
     * The `value` property does not reflect, meaning if you change the value using JavaScript, you won't find the same data in the attributes.
     * However, if you have set the value in the property and then you change the attribute, the `value` will be set at the data from the attribute.
     * By default, if no value is set, `value` will return the `label` value in case there is one defined.
     *
     * @type {any}
     * @example <bim-option value="10"></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * // option.setAttribute('value', 'true');
     * // option.setAttribute('value', '10');
     * // option.setAttribute('value', 'some string');
     * document.body.appendChild(option);
     * @example
     * const option = document.createElement('bim-option');
     * option.label = "At origin"
     * option.value = {x: 0, y: 0, z: 0} // As this is an object, it must be set in the property and not in the attribute.
     * document.body.appendChild(option);
     */
    get value(): any;
    set value(val: any);
    /**
     * Sets the orientation of the label and icon/image within the component. When true, they are arranged vertically.
     * This property influences the internal layout of the component, specifically affecting how the `bim-label` is displayed.
     *
     * @default false
     * @example <bim-option vertical></bim-option>
     * @example
     * const option = document.createElement('bim-option');
     * option.vertical = true;
     * document.body.appendChild(option);
     */
    vertical: boolean;
    protected render(): TemplateResult_2<1>;
}
export { Option_2 as Option }

/**
 * A custom panel web component for BIM applications. HTML tag: bim-panel
 */
export declare class Panel extends LitElement implements HasName, HasValue {
    /**
     * CSS styles for the component.
     */
    static styles: CSSResult[];
    /**
     * Represents the icon to be displayed on the and panel and panel's activation button. This icon is a visual representation
     * that can be used to give users a hint about the panel's purpose or content. When the `icon` property changes,
     * the icon on the activation button is updated accordingly. This property is reflected to an attribute, meaning
     * any changes to the property will also update the corresponding attribute on the HTML element, and vice versa.
     *
     * @type {String}
     * @default undefined
     * @example <bim-panel icon="settings"></bim-panel>
     * @example
     * const panel = document.createElement('bim-panel');
     * panel.icon = 'settings';
     * document.body.appendChild(panel);
     */
    icon?: string;
    /**
     * The name of the panel. This property serves as an identifier and can also be displayed on the panel's
     * activation button if the `label` property is not set. Changing the `name` property will update the label
     * of the activation button to reflect the new name if no label is explicitly provided. This property is
     * reflected to an attribute, allowing for synchronization between the property and the HTML attribute.
     *
     * @type {String}
     * @default undefined
     * @example <bim-panel name="user-settings"></bim-panel>
     * @example
     * const panel = document.createElement('bim-panel');
     * panel.name = 'user-settings';
     * document.body.appendChild(panel);
     */
    name?: string;
    /**
     * The label of the panel, which is displayed on the panel's activation button. This property is intended
     * for a more descriptive text than what `name` might provide. If the `label` property is set, it takes
     * precedence over the `name` property for the button's display. When the `label` changes, the activation
     * button's label is updated to reflect this change. This property is also reflected to an attribute, ensuring
     * consistency between the property value and the HTML attribute.
     *
     * @type {String}
     * @default undefined
     * @example <bim-panel label="User Settings"></bim-panel>
     * @example
     * const panel = document.createElement('bim-panel');
     * panel.label = 'User Settings';
     * document.body.appendChild(panel);
     */
    label?: string;
    readonly onValueChange: Event;
    private _hidden;
    /**