import { BubbleDataPoint } from 'chart.js/auto';
import { Chart as Chart_2 } from 'chart.js/auto';
import { ChartData } from 'chart.js/auto';
import { CSSResult } from 'lit';
import { html } from 'lit';
import { LitElement } from 'lit';
import { nothing } from 'lit';
import { Placement } from '@floating-ui/dom';
import { Point } from 'chart.js/auto';
import { PropertyValues } from 'lit';
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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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;
contextMenuTemplate?: () => TemplateResult;
private get _contextMenu();
private showContextMenu;
connectedCallback(): void;
disconnectedCallback(): void;
protected render(): TemplateResult<1>;
}
/**
* Calculates the CSS styles needed for a divider element. Handles positioning, transforms, and sizing based on divider type and grid gaps.
*
* @param divider - The divider information
* @param computedStyles - The computed styles of the grid element
* @returns Object with CSS properties for the divider
*/
export declare function calculateDividerStyles(divider: GridDividerInfo, computedStyles: CSSStyleDeclaration): Record;
/**
* Calculates new sizes for a horizontal resize operation.
*
* @param state - The current resize state
* @param dy - Delta Y (vertical movement)
* @param row - Row index being resized
* @param isLastRow - Whether this is the last row
* @returns Object with new top and bottom row sizes
*/
export declare function calculateHorizontalResize(state: GridResizeState, dy: number, row: number, isLastRow: boolean): {
top: number;
bottom: number;
};
/**
* Calculates new sizes for a vertical resize operation.
*
* @param state - The current resize state
* @param dx - Delta X (horizontal movement)
* @param col - Column index being resized
* @param isLastCol - Whether this is the last column
* @returns Object with new left and right column sizes
*/
export declare function calculateVerticalResize(state: GridResizeState, dx: number, col: number, isLastCol: boolean): {
left: number;
right: number;
};
/**
* Represents the detail of a cell created event.
*/
export declare interface CellCreatedEventDetail {
cell: TableCell;
}
export declare type CellRenderValue = TableCellValue | HTMLElement | TemplateResult;
/** A flexible and customizable chart component that acts as a wrapper around Chart.js. */
export declare class Chart extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
generateColor(index: number): string;
/** The colors used for the chart datasets. If not enough colors are provided, new colors will be generated automatically. */
colors?: string[];
/** The type of chart to be displayed (e.g., 'bar', 'line', 'pie'). */
type: Types | null;
/** Specifies whether the x-axis should start at zero. */
xBeginAtZero?: boolean;
/** Specifies whether the y-axis should start at zero. */
yBeginAtZero?: boolean;
/** The axis to use for indexing the data ('x' or 'y'). */
indexAxis?: "x" | "y";
/** Specifies whether the bars on the x-axis should be stacked. */
xStacked?: boolean;
/** Specifies whether the bars on the y-axis should be stacked. */
yStacked?: boolean;
/** When true, a loading skeleton is shown. */
loading: boolean;
/** The border color of chart elements when hovered. */
hoverBorderColor?: string;
/** Human readable title shown in the chart */
label?: string;
/** The style of the points in a line chart (e.g., 'circle', 'rect'). */
linePointStyle: LinePointStyleType;
/** The radius of the points in a line chart. */
pointRadius: number;
/** Defines how to fill the area under the line in a line chart. */
lineFill: LineFillType | false;
/** Specifies whether the background of the chart elements should be transparent. */
transparentBackground: boolean;
/** Specifies whether to display labels on the chart data points. */
displayLabels: boolean;
/** The color of the data labels shown on the chart. */
dataLabelsColor: string;
/** Specifies whether to draw smooth lines (tension > 0) in a line chart. */
smoothLine: boolean;
/** The border color of the chart elements. */
borderColor: string;
/** Current input data in library-friendly shape. Implementations should keep this in sync. */
inputData: ChartInputData;
/** Specifies whether each bar in a bar chart should have a different color. */
colorfulBars?: boolean;
private _errorLoading;
/**
* The function to be executed when loading async data using Chart.loadData
*/
loadFunction?: ChartLoadFunction;
/** Asynchronously loads chart data using the provided loadFunction. */
loadData(force?: boolean): Promise;
/** The Chart.js data object. */
get data(): ChartData;
protected _options: typeof Chart_2.prototype.options;
protected _chartCfg: {
type: Types | null;
data: {
labels: never[];
datasets: never[];
};
options: any;
};
/** The HTML canvas element where the chart is rendered. */
protected readonly _canvas: HTMLCanvasElement;
/** Chart.js instance used by the concrete chart. */
protected chart?: Chart_2;
/** Color generation function to get default colors */
private _getDefaultColors;
/**
* Type guard to check if data is ScatterInputData
*/
private isScatterData;
/**
* Parse the external input data shape into Chart.js data.
*/
protected parseInputData(value: ChartInputData): {
labels: string[];
datasets: ChartDataSet[];
};
/** A utility function to make a color transparent. */
transparentize(color: string, opacity?: number): string;
/** Convert the provided table into the internal inputData and update the chart. */
updateFromTable(table: Table): void;
/** Highlight chart elements that match the predicate. */
highlight(filterFunction: (entry: ChartInputValues) => boolean): void;
/** Remove or hide values that don't match the predicate. */
filterByValue(filterFunction: (entry: ChartInputValues) => boolean): void;
private triggerFilter;
/** Filter chart by label. */
filterByLabel(label: string): void;
/** Reset chart to original input data. */
reset(): void;
/** Handles property updates and redraws the chart if necessary. */
protected updated(changedProperties: Map): void;
/**
* Helper: update the Chart.js title from the `chartTitle` property if a chart exists.
* Subclasses can call this from their lifecycle hooks (for example, in updated()).
*/
protected updateChartTitle(): void;
/** Creates the chart instance after the component is first rendered. */
protected firstUpdated(): void;
/** Renders the chart canvas and any slotted content. */
protected render(): TemplateResult<1>;
}
/** The structure for a single dataset to be used in Chart.js. */
export declare type ChartDataSet = {
label: string;
data: any[];
backgroundColor?: string | string[];
borderColor?: string;
pointStyle?: LinePointStyleType;
pointRadius?: number;
pointBackgroundColor?: string;
fill?: LineFillType;
hoverBorderColor?: string;
};
/** The required data structure for populating a chart. */
export declare type ChartInputData = {
labels: string[];
datasets: {
[datasetLabel: string]: Array;
};
backgroundColor?: string;
};
/** Union type for all chart data points. The specific type depends on the chart type. */
export declare type ChartInputValues = ScatterInputData | GeneralInputData;
/** A component that displays a legend for charts, allowing filtering by clicking on them. */
export declare class ChartLegend extends LitElement {
/** The CSS styles for the component. */
static styles: CSSResult;
/** The list of charts to which the labels are associated. */
charts: Chart[];
/** The internal, sanitized list of charts. */
private _charts;
/** The list of labels to be displayed. */
labels: string[];
/** Processes the `charts` property before the component updates. */
protected willUpdate(_changedProperties: PropertyValues): void;
/** A helper method to create a map between chart labels and their corresponding colors. */
private _getLabelColorMap;
/** Gets the data associated with each label for the hide event. */
private _getHideEventData;
/** Renders the labels with their colors and click handlers. */
protected render(): TemplateResult_2<1>;
}
/** The function signature for asynchronously loading chart data. */
export declare type ChartLoadFunction = () => Promise;
/**
* 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
* @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 \ element.
* @type {string}
* @default undefined
* @example
* @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
* @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 \ 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
* @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
*
* @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
* @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
*
* @example
* const colorInput = document.createElement('bim-color-input');
* colorInput.name = 'colorInput';
*/
name?: string;
/**
* The label for the color input.
* @type {string}
* @default undefined
* @example
*
* @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
*
* @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
*
* @example
* const colorInput = document.createElement('bim-color-input');
* colorInput.vertical = true;
*/
vertical: boolean;
/**
* The opacity of the color input.
* @type {number}
* @default undefined
* @example
*
* @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
*
* @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.
* @property virtual - Whether this is a virtual column (doesn't exist in data)
*/
export declare interface ColumnData {
/** 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;
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>(template: StatefullComponent, state: S): [element: T, update: UpdateFunction, utils: ComponentUtils];
/**
* 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(template: StatelessComponent): T;
}
/**
* Utility interface providing methods for component state and element management.
*/
export declare interface ComponentUtils {
getElement: (name: string) => T | null;
getCurrentState: () => S;
dispose: () => void;
updates: Record>>;
}
/**
* 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 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;
connectedCallback(): void;
protected render(): TemplateResult_2<1>;
}
/** The detail object for the 'sectionclick' event, containing information about the clicked chart element. */
export declare interface DataClickDetail {
datasetIndex: number;
index: number;
label: string;
values: ChartInputValues[];
value: {
["value"]: number;
};
}
export declare interface DataSelectedEventDetail {
data: Partial;
}
declare class DataSet extends Set {
readonly onUpdated: Event_2;
readonly onItemAdded: Event_2;
readonly onBeforeDelete: Event_2;
readonly onItemDeleted: Event_2;
readonly onCleared: Event_2;
set eventsEnabled(value: boolean);
constructor(iterable?: Iterable | null);
clear(): void;
add(...value: T[]): this;
guard: (value: T) => boolean;
deleteGuard: (value: T) => boolean;
delete(value: T): boolean;
deleteIf(predicate: (value: T) => boolean): void;
getIndex(item: T): number;
dispose(): void;
}
/**
* Removes duplicate area names from divider area arrays. Each adjacent area should only appear once in the divider's area list.
*
* @param dividers - Array of dividers to deduplicate
* @returns The same array with deduplicated area names
*/
export declare function deduplicateDividerAreas(dividers: GridDividerInfo[]): GridDividerInfo[];
/**
* Detects all dividers (vertical and horizontal) in a grid matrix. A divider exists where two adjacent areas have different names.
*
* @param gridMatrix - 2D array representing the grid structure
* @returns Array of divider information including type, position, and adjacent areas
*/
export declare function detectDividers(gridMatrix: (string | null)[][]): GridDividerInfo[];
/**
* 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
*
* @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
*
* @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
*
* @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
*
* @example
* const dropdown = document.createElement('bim-dropdown');
* dropdown.multiple = true;
*/
multiple: boolean;
/**
* Indicates whether a selection is required in the dropdown.
* @default false
* @example
*
* @example
* const dropdown = document.createElement('bim-dropdown');
* dropdown.required = true;
*/
required: boolean;
/**
* Indicates whether the dropdown should be displayed vertically.
* @default false
* @example
*
* @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
*
*/
placeholder?: string;
private _visible;
searchBox?: boolean;
/**
* Indicates whether the dropdown it-self (not the component) is visible.
* @type {boolean}
* @default false
* @example
*
* @example
* const dropdown = document.createElement('bim-dropdown');
* dropdown.visible = true;
*/
set visible(value: boolean);
get visible(): boolean;
private _value;
private _hasVisibleOptions;
/**
* 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 onSearch;
private onSlotChange;
private updateOptionsState;
private findOption;
protected render(): TemplateResult_2<1>;
}
export declare interface ElementCreatedEventDetail {
name: string;
element: T;
}
/**
* Represents a single query condition.
*/
export declare interface EntryQuery {
operator?: QueryOperators;
key: string;
condition: QueryCondition;
value: string | number | boolean;
}
declare class Event_2 {
enabled: boolean;
add(handler: (data: T) => void): void;
remove(handler: (data: T) => void): void;
trigger: (data?: T) => void;
reset(): void;
private handlers;
}
declare type ExtractName = T extends {
name: infer N extends string;
} ? N : T;
declare type ExtractState = T extends {
state: infer N extends Record;
} ? N : never;
declare type ExtractStateByElement = T extends {
name: U;
state: infer N extends Record;
} ? N : never;
/**
* Extracts unique area names from a grid template string. Filters out empty cells (dots) and returns only unique area names.
* Content inside brackets is preserved as part of the area name token.
*
* @param template - The grid template string
* @returns An array of unique area names
*
* @example
* ```ts
* const template = `
* "header header"
* "sidebar main"
* `;
* const areas = extractUniqueAreas(template);
* // Returns: ['header', 'sidebar', 'main']
* ```
*/
export declare function extractUniqueAreas(template: string): string[];
/** The structure for individual data points within general charts (bar, line, pie, etc). Use a single numeric value. */
export declare type GeneralInputData = {
value: number;
data?: Record;
};
/**
* 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: = Record>(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 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
* @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
* @example
* const grid = document.createElement('bim-grid');
* grid.layout = 'default';
* document.body.appendChild(grid);
*/
layout?: L[number];
/**
* Enables resize functionality for grid areas.
* When true, dividers will appear between areas allowing manual resizing.
* Areas can be excluded from resizing using nonResizeableAreas.
*
* @defaultValue false
*
* @example
* ```html
*
* ```
*
* @example
* ```typescript
* grid.resizeableAreas = true;
* grid.nonResizeableAreas = ['ribbon', 'statusBar']; // Lock specific areas
* ```
*/
resizeableAreas: boolean;
areasResizeExceptions: string[];
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);
get layouts(): GridLayoutsDefinition;
private _elements;
set elements(value: GridComponents);
get elements(): GridComponents;
areaGroups: Record;
private getLayoutAreas;
private setUpdateFunctions;
disconnectedCallback(): void;
private _templateIds;
private _updateFunctions;
private _slotNames;
private getTemplateId;
private _colSizesRaw;
private _rowSizesRaw;
private _colSizesComputed;
private _rowSizesComputed;
private _start;
layoutsResize: Record;
private isAreaResizeable;
private canResizeVerticalDivider;
private canResizeHorizontalDivider;
private computeDividers;
private _onMouseMove;
private _onMouseUp;
updateComponent: UpdateGridComponents;
private parseTabToken;
private parseTabElementTokens;
private extractElementKeys;
private cleanUpdateFunctions;
private clean;
private emitElementCreation;
private emitLayoutChange;
private getSanitizedLayoutTemplate;
private createElementFromDefinition;
protected render(): TemplateResult<1>;
}
export declare interface GridAreaGroupConfig {
/** Applies switchers-full attribute to bim-tabs groupers */
switchersFull?: boolean;
/** Applies switchers-compact attribute to bim-tabs groupers */
switchersCompact?: boolean;
/** Applies a label to bim-panel and bim-tab groupers */
label?: string;
/** Applies an icon to bim-panel and bim-tab groupers */
icon?: string;
}
export declare type GridComponentDefinition = (string | {
name: string;
state: Record;
})[];
export declare type GridComponents = {
[P in ExtractName]?: HTMLElement | StatelessComponent | {
template: StatefullComponent>;
initialState: ExtractStateByElement;
label?: string;
icon?: string;
};
};
export declare interface GridDividerInfo {
type: "horizontal" | "vertical";
from: number[];
to: number[];
above?: string[];
below?: string[];
left?: string[];
right?: string[];
}
/**
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 = {
[K in L[number]]: {
template: string;
elements?: GridComponents;
guard?: () => boolean;
icon?: string;
};
};
export declare interface GridResizeState {
x: number;
y: number;
divider: GridDividerInfo;
colSizesRaw: string[];
rowSizesRaw: string[];
colSizesComputed: string[];
rowSizesComputed: string[];
}
/**
* 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;
set value(data: Record);
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 `![]()
` 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 My 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 My 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 `` component in the shadow DOM.
* @type {String}
* @default undefined
* @example My 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 My 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 My Label
* @example
* const labelComponent = document.createElement('bim-label');
* labelComponent.vertical = true;
* document.body.appendChild(labelComponent);
*/
vertical: boolean;
get value(): string | number | boolean | null;
private _imgTemplate;
private _iconTemplate;
protected render(): TemplateResult_2<1>;
}
/** The data associated with a chart label. */
export declare type LabelData = {
[label: string]: any;
};
/** The event data dispatched when a label is clicked. */
export declare type LabelEventData = {
label: string;
visibility: boolean;
data: LabelData;
};
/** The fill options for the area under a line in a line chart. */
export declare type LineFillType = "origin" | "start" | "end" | false;
/** The possible styles for points in a line chart. */
export declare type LinePointStyleType = "circle" | "cross" | "crossRot" | "dash" | "line" | "rect" | "rectRounded" | "rectRot" | "triangle" | "star" | false;
export declare const loadingSkeleton: () => 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);
static get config(): Required;
private static addGlobalStyles;
static preloadIcons(icons: string[], printLog?: boolean): void;
static addIconsCollection(icons: Record, config?: {
prefix?: string;
}): void;
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;
internalComponentNameAttribute: string;
}
/**
* 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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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
* @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 }
declare type Orientation = "portrait" | "landscape";
/**
* 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
* @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
* @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
* @example
* const panel = document.createElement('bim-panel');
* panel.label = 'User Settings';
* document.body.appendChild(panel);
*/
label?: string;
readonly onValueChange: Event;
private _hidden;
/**
* Sets the hidden state of the panel.
*
* @param value - The new hidden state. If `true`, the panel will be hidden. If `false`, the panel will be shown.
* @fires hiddenchange - Fired when the hidden state changes.
*/
set hidden(value: boolean);
get hidden(): boolean;
/**
* The `value` getter computes and returns the current state of the panel's form elements as an object. This property is dynamic and reflects the current input values within the panel. When accessed, it traverses the panel's child elements, collecting values from those that have a `name` or `label` attribute, and constructs an object where each key corresponds to the `name` or `label` of the element, and the value is the element's value. This property is particularly useful for forms or interactive panels where the user's input needs to be retrieved programmatically. The value returned is a snapshot of the panel's state at the time of access, and it does not maintain a live link to the input elements.
*
* @default {}
* @example
* @example
* const panel = document.createElement('bim-panel');
* document.body.appendChild(panel);
* console.log(panel.value); // Logs the current value object of the panel
*/
get value(): Record;
/**
* The `value` setter allows programmatically updating the values of the panel's form elements. When a data object is passed to this property, it attempts to match the object's keys with the `name` or `label` attributes of the panel's child elements. If a match is found, the corresponding element's value is updated to the value associated with the key in the data object. This property is useful for initializing the panel with specific data or updating its state based on external inputs. Note that this operation does not affect elements without a matching `name` or `label`, and it only updates the values of elements that are direct children of the panel.
*
* @type {Record}
* @example
* @example
* const panel = document.createElement('bim-panel');
* document.body.appendChild(panel);
* panel.value = { 'input-name': 'John Doe', 'checkbox-name': true };
*/
set value(data: Record);
/**
* Represents a boolean property that controls the visibility of the panel's header.
* When `true`, the header (containing the label and icon) is hidden.
* When `false`, the header is visible.
*
* @property headerHidden - The boolean value indicating whether the header should be hidden.
* @default false
* @attribute header-hidden - The attribute that reflects the `headerHidden` property to the HTML element.
* @reflect true - Indicates that the property should be reflected to the HTML attribute.
*
* @example
* // Setting the `headerHidden` property to `true`
* panel.headerHidden = true;
*
* // Setting the `header-hidden` attribute to `true`
* panel.setAttribute('header-hidden', 'true');
*
* // Getting the `headerHidden` property value
* console.log(panel.headerHidden); // Output: true
*
* // Getting the `header-hidden` attribute value
* console.log(panel.getAttribute('header-hidden')); // Output: 'true'
*/
headerHidden: boolean;
/**
* A record that maps element names or labels to transformation functions.
* This record is used to transform the values from elements before they are returned as part of the `value` property.
*
* @example
* // Example usage of ValueTransform
* const valueTransform = {
* date: (value: string) => new Date(value), // Transform date value from string to Date object
* };
*
* const panel = document.getElementById('your-bim-panel'); // should have some inputs inside
* panel.valueTransform = valueTransform;
*
* // Now, when accessing the `value` property of the panel, the values of the specified elements will be transformed accordingly
* console.log(panel.value); // Output: { date: Date object }
*/
valueTransform: Record any>;
readonly activationButton: Button;
private animatePanles;
private _sectionsObserver;
private updateSectionsHeight;
private handleSlotChange;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* Collapses all `bim-panel-section` elements within the panel.
* This method iterates over each `bim-panel-section` found within the panel's DOM and sets their `collapsed` property to `true`,
* effectively hiding their content from view. This can be used to programmatically minimize the space taken up by sections
* within the panel, making the panel more compact or to hide details that are not immediately necessary.
*/
collapseSections(): void;
/**
* Expands all `bim-panel-section` elements within the panel.
* This method iterates over each `bim-panel-section` found within the panel's DOM and sets their `collapsed` property to `false`,
* effectively showing their content. This can be used to programmatically reveal the content of sections within the panel,
* making the panel more informative or to display details that are necessary for the user.
*/
expandSections(): void;
protected render(): TemplateResult_2<1>;
}
/**
* A custom panel section web component for BIM applications. HTML tag: bim-panel-section
*/
export declare class PanelSection extends LitElement implements HasName, HasValue {
/**
* CSS styles for the component.
*/
static styles: CSSResult[];
/**
* Represents the icon to be displayed within the panel section. This icon is a visual cue that can be used alongside the label to provide additional context or to represent the section's content visually. When the `icon` property changes, the displayed icon updates accordingly. This property is reflected to an attribute, allowing for declarative usage in HTML as well as programmatic control in JavaScript.
* @type {String}
* @default undefined
* @example
* @example
* const section = document.createElement('bim-panel-section');
* section.icon = 'settings';
* document.body.appendChild(section);
*/
icon?: string;
/**
* Specifies the label for the panel section. This label is displayed prominently at the top of the section and serves as a title or heading. When the `label` property changes, the section's header updates to reflect the new label. This property takes precedence over the `name` property for display purposes and is also reflected to an attribute for HTML declaration or JavaScript manipulation.
* @type {String}
* @default undefined
* @example
* @example
* const section = document.createElement('bim-panel-section');
* section.label = 'User Settings';
* document.body.appendChild(section);
*/
label?: string;
/**
* Defines the name of the panel section, acting as an identifier. While similar to `label`, `name` is more suited for identification purposes rather than display. If `label` is not set, `name` can be displayed as a fallback in the section's header. The `name` property is reflected to an attribute, enabling both HTML and JavaScript interactions.
* @type {String}
* @default undefined
* @example
* @example
* const section = document.createElement('bim-panel-section');
* section.name = 'user-settings';
* document.body.appendChild(section);
*/
name?: string;
/**
* Determines whether the panel section is fixed, meaning it cannot be collapsed or expanded. This is useful for sections that should always remain visible. When `fixed` is true, the collapse/expand icon is hidden, and clicking the header does not toggle the `collapsed` state. This property is reflected to an attribute, allowing it to be set declaratively in HTML or programmatically via JavaScript.
* @type {Boolean}
* @default undefined
* @example
* @example
* const section = document.createElement('bim-panel-section');
* section.fixed = true;
* document.body.appendChild(section);
*/
fixed?: boolean;
/**
* Controls the collapsed state of the panel section. When `collapsed` is true, the content of the section is hidden, and only the header is visible. This property can be toggled to show or hide the section's content, and is reflected to an attribute for easy HTML or JavaScript manipulation. Note that sections marked as `fixed` ignore changes to this property.
* @type {Boolean}
* @default undefined
* @example
* @example
* const section = document.createElement('bim-panel-section');
* section.collapsed = true;
* document.body.appendChild(section);
*/
collapsed?: boolean;
connectedCallback(): void;
readonly onValueChange: Event;
/**
* The `value` getter computes and returns the current state of the panel section's form elements as an object. This object's keys are the `name` or `label` attributes of the child elements, and the values are the corresponding values of these elements. This property is particularly useful for retrieving a consolidated view of the user's input or selections within the panel section. When the value of any child element changes, the returned object from this getter will reflect those changes, providing a dynamic snapshot of the panel section's state. Note that this property does not have a default value as it dynamically reflects the current state of the panel section's form elements.
* @example
* @example
* const section = document.createElement('bim-panel-section');
* console.log(section.value); // Logs the current value object
*/
get value(): Record;
/**
* The `value` setter allows programmatically updating the values of the panel section's child elements. It accepts an object where keys correspond to the `name` or `label` attributes of the child elements, and the values are the new values to be set for these elements. This property is useful for initializing the panel section with specific values or updating its state based on external data. When the property changes, the corresponding child elements' values are updated to reflect the new state. This does not have a default value as it is a method for updating child elements' values.
* @type {Record}
* @default undefined
* @example
* @example
* const section = document.createElement('bim-panel-section');
* section.value = { 'user-settings': 'John Doe' }; // Programmatically sets the value of a child element named 'user-settings'
*/
set value(data: Record);
/**
* A record that maps element names or labels to transformation functions.
* This record is used to transform the values from elements before they are returned as part of the `value` property.
*
* @example
* // Example usage of ValueTransform
* const valueTransform = {
* date: (value: string) => new Date(value), // Transform date value from string to Date object
* };
*
* const panelSection = document.getElementById('your-bim-panel-section'); // should have some inputs inside
* panelSection.valueTransform = valueTransform;
*
* // Now, when accessing the `value` property of the panelSection, the values of the specified elements will be transformed accordingly
* console.log(panelSection.value); // Output: { date: Date object }
*/
valueTransform: Record any>;
private setFlexAfterTransition;
private componentHeight;
private animateHeader;
private onHeaderClick;
private handelSlotChange;
private handlePointerEnter;
private handlePointerLeave;
protected render(): TemplateResult_2<1>;
}
/**
* Paper sizes according to ISO 216 standard (in millimeters)
*/
declare type PaperSize = "A0" | "A1" | "A2" | "A3" | "A4";
export declare class PaperSpace extends LitElement {
static styles: CSSResult;
/**
* Human-readable label for this paper sheet.
*/
label: string;
/**
* Sheet number (e.g. "A-01", "S-02"). Displayed alongside the label.
*/
sheetNumber: string;
/**
* Paper size (ISO 216)
*/
size: PaperSize;
/**
* Paper orientation
*/
orientation: Orientation;
/**
* Margin in millimeters (applies to all sides)
*/
margin: number;
/**
* Enable debug mode (shows printable area border)
*/
debug: boolean;
/**
* Enable ruler for scale validation (debug tool)
*/
ruler: boolean;
/**
* Ruler length in millimeters
*/
rulerLength: number;
/**
* Title block template function
* Receives:
* - mm: function to convert millimeters to pixel strings
* - drawingArea: slot for the drawing area content
* Developers can position the drawing area slot wherever they want in the template
*/
titleBlockTemplate?: (mm: (mm: number) => string, drawingArea: TemplateResult, info: {
label: string;
sheetNumber: string;
}) => TemplateResult;
/**
* Pixels per millimeter calibration value
* This is measured at runtime and updated on resize
*/
private _pxPerMm;
/**
* Ruler gizmo position (x, y in pixels from top-left)
*/
private _rulerPosition;
/**
* Dragging state for ruler
*/
private _rulerDragging;
/**
* Ruler orientation
*/
private _rulerOrientation;
/**
* Paper width in millimeters
*/
get widthMm(): number;
/**
* Paper height in millimeters
*/
get heightMm(): number;
/**
* Public getter for pxPerMm
* Children can use this for their own metric calculations
*/
get pxPerMm(): number;
/**
* The element that represents the printable drawing area (inside the margin).
* External renderers (e.g. SheetBoard) use this to compute scissor rects.
*/
get drawingAreaEl(): HTMLElement;
/**
* The element that wraps the drawing content slot.
* When a `titleBlockTemplate` is set, this element occupies only the
* drawing portion of the printable area (excluding the title block).
* SheetBoard uses this to constrain viewport placement to the drawing area.
*/
get drawingSlotEl(): HTMLElement | null;
/**
* Convert millimeters to pixels
*/
private mmToPx;
/**
* Convert millimeters to CSS pixel string
* Public API for developers to use in their title block templates
*/
mm(mm: number): string;
/**
* Calibrate pixels per millimeter by measuring a 100mm CSS element
*/
private calibrate;
/**
* Media query listener for device pixel ratio changes
* Detects monitor changes, OS scaling changes, etc.
*/
private _mediaQueryList;
private _mediaQueryListener;
/**
* Setup listener for devicePixelRatio changes
*/
private setupDPRListener;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* Ruler drag state
*/
private _rulerDragStart;
/**
* Handle ruler mousedown
*/
private handleRulerMouseDown;
/**
* Handle ruler mousemove
*/
private handleRulerMouseMove;
/**
* Handle ruler mouseup
*/
private handleRulerMouseUp;
/**
* Remove ruler drag listeners
*/
private removeRulerDragListeners;
/**
* Toggle ruler orientation
*/
private toggleRulerOrientation;
/**
* Render ruler gizmo
*/
private renderRulerGizmo;
render(): TemplateResult<1>;
}
/**
* Parses a grid template string and returns a 2D matrix representation. Handles both quoted strings and newline-delimited formats.
* Content inside brackets (e.g. area names with grouping syntax) is treated as a single token.
*
* @param template - The grid template string to parse
* @returns A 2D array where each cell contains the area name or null for empty cells
*
* @example
* ```ts
* const template = `
* "header header"
* "sidebar main"
* `;
* const matrix = parseGridTemplate(template);
* // Returns: [['header', 'header'], ['sidebar', 'main']]
* ```
*/
export declare function parseGridTemplate(template: string): (string | null)[][];
/**
* Represents a query, which can be a single query or a group of queries.
*/
export declare type Query = (EntryQuery | QueryGroup)[];
/**
* Represents a condition used in query building.
*/
export declare type QueryCondition = "=" | ">" | ">=" | "<" | "<=" | "?" | "/" | "#";
/**
* Represents a group of queries with an operator.
*/
export declare interface QueryGroup {
operator?: QueryOperators;
queries: (EntryQuery | QueryGroup)[];
}
/**
* Represents an operator used in query building.
*/
export declare type QueryOperators = "&" | "|";
export { ref }
export declare interface ResizeCalculation {
newValue: number;
oppositeValue: number;
}
/**
* Represents the detail of a row created event.
*/
export declare interface RowCreatedEventDetail {
row: TableRow;
}
/**
* Represents the detail of a row deselected event.
*/
export declare interface RowDeselectedEventDetail {
data: Partial;
}
/**
* Represents the detail of a row selected event.
*/
export declare interface RowSelectedEventDetail {
data: Partial;
}
/** The structure for individual data points within a scatter or bubble chart. Use x and y coordinates. */
export declare type ScatterInputData = {
x: number;
y: number;
r?: number;
data?: Record;
};
/**
* A custom selector web component for BIM applications. HTML tag: bim-selector
*/
export declare class Selector extends LitElement implements HasValue, HasName {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
name?: string;
icon?: string;
label?: string;
vertical: boolean;
/**
* Sets the visual variant of the selector.
* - `undefined` (default): Filled animated background behind the active option.
* - `"underline"`: No background; the active option gets an accent-colored
* bottom border and text, while inactive options are muted.
*/
variant?: "underline";
readonly onValueChange: Event;
private _canEmitEvents;
private get _options();
private _value;
/**
* Sets the value of the selector.
* It finds the matching option based on the provided value and sets it as the selected option.
* If no matching option is found, it does nothing.
*
* @param value - The value to set for the selector.
*/
set value(value: any);
get value(): any;
private onSlotChange;
private onOptionClick;
private findOption;
private doubleRequestAnimationFrames;
private setAnimatedBackgound;
protected firstUpdated(): void;
protected render(): TemplateResult_2<1>;
}
/**
* A custom slider web component for BIM applications. HTML tag: bim-slider
*/
export declare class Slider extends LitElement implements HasValue, HasName {
static styles: CSSResult;
/**
* The name of the slider. Useful for form integration.
* @type {String}
* @default undefined
* @example
*/
name?: string;
/**
* Optional label rendered above the track via bim-input.
* @type {String}
* @default undefined
* @example
*/
label?: string;
/**
* Optional Iconify icon shown in the label row.
* @type {String}
* @default undefined
* @example
*/
icon?: string;
/**
* The minimum value of the slider.
* @type {Number}
* @default 0
* @example
*/
min: number;
/**
* The maximum value of the slider.
* @type {Number}
* @default 100
* @example
*/
max: number;
/**
* The granularity of each step. Set to null to snap only to marks.
* @type {Number | null}
* @default 1
* @example
*/
step: number | null;
/**
* The larger step size used when the user holds Shift + Arrow key.
* @type {Number}
* @default 10
* @example
*/
shiftStep: number;
/**
* An array of mark objects ({ value, label? }) that define snap points.
* When step is null, the thumb snaps only to these marks.
* @type {SliderMark[]}
* @default []
* @example
* slider.marks = [{ value: 0, label: 'Jan' }, { value: 6, label: 'Jul' }];
*/
marks: SliderMark[];
/**
* Whether to show mark dots on the track even when step is not null.
* @default false
* @example
*/
showMarks: boolean;
private _value;
/**
* The current value. Pass a tuple [number, number] to enable range mode
* (two thumbs). Changing this property updates the rendered thumb position(s).
* @type {number | [number, number]}
* @default 0
* @example
* @example slider.value = [20, 80]; // range mode
*/
set value(v: number | [number, number]);
get value(): number | [number, number];
/**
* Controls when the value label (tooltip) is displayed.
* - `"auto"` — shown on hover/drag
* - `"on"` — always visible
* - `"off"` — never shown
* @default "auto"
* @example
*/
valueLabelDisplay: "auto" | "on" | "off";
/**
* A format function or fixed string to transform the displayed value in the
* value label. Receives the raw numeric value and returns a string.
* @type {((value: number) => string) | string}
* @default undefined
* @example slider.valueLabelFormat = (v) => `${v}°C`;
*/
valueLabelFormat?: ((value: number) => string) | string;
/**
* A scale function to transform the internal numeric value for display
* purposes only (does not affect snapping or stored value).
* @type {(value: number) => number}
* @default undefined
* @example slider.scale = (x) => Math.pow(2, x);
*/
scale?: (value: number) => number;
/**
* When true, swapping thumbs is disabled in range mode.
* @default false
* @example
*/
disableSwap: boolean;
/**
* Disables the slider, preventing all interaction.
* @default false
* @example
*/
disabled: boolean;
/**
* Renders the slider vertically instead of horizontally.
* @default false
* @example
*/
vertical: boolean;
/**
* Controls the orientation of mark labels below the track.
* Useful when many marks have long labels that would overlap.
* - `"horizontal"` — default, labels rendered flat
* - `"vertical"` — labels rotated -90° (bottom-up)
* - `"diagonal"` — labels rotated -45°
* @default "horizontal"
* @example
*/
markLabelOrientation: "horizontal" | "vertical" | "diagonal";
private _activeThumb;
/** Fired continuously while dragging. */
readonly onValueChange: Event;
/** Fired once when the thumb is released (mouseup / touchend). */
readonly onChangeCommitted: Event;
/** Clamp a value between min and max. */
private _clamp;
/** Convert a value to a 0–100 percentage along the track. */
private _valueToPercent;
/** Convert a 0–1 fraction (cursor position) to a raw value. */
private _percentToValue;
/** Round a raw value to the nearest step, anchored at min. */
private _roundToStep;
/** Find the index of the closest value in an array. */
private _findClosest;
/** Compute the snapped value from a 0–1 cursor fraction. */
private _getSnappedValue;
/** Format a value for display in the value label. */
private _formatValue;
/**
* Compute the cursor fraction (0–1) from a mouse or touch event
* relative to the track element bounding rect.
*/
private _getFraction;
/** Handle mousedown / touchstart on the track wrapper. */
private _onPointerDown;
/** Apply the new snapped value and fire onChange. */
private _updateValue;
private _onKeyDown;
protected render(): TemplateResult_2<1>;
}
export declare interface SliderChangedEventDetail {
value: number | [number, number];
}
export declare interface SliderMark {
/** The numeric position of this mark on the slider axis. */
value: number;
/** Optional text rendered below the mark dot. */
label?: string;
}
/**
* Represents a function that returns a TemplateResult for a stateful component.
*
* @template S - The type of the component state.
*
* @param state - The current state of the component.
* @param update - An update function you can call inside the template.
* WARNING! It can cause infinite loops if not used properly.
*
* @returns A TemplateResult that represents the UI of the component based on the current state.
*/
export declare type StatefullComponent = Record> = (state: S, update: UpdateFunction) => TemplateResult;
/**
* Represents a function that returns a TemplateResult for a stateless component.
*
* @returns A TemplateResult that represents the UI of the component.
*/
export declare type StatelessComponent = () => TemplateResult;
export { styleMap }
/**
* A custom tab web component for BIM applications. HTML tag: bim-tab
*/
export declare class Tab extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
private _defaultName;
/**
* The name of the tab. If not provided, a default name will be assigned based on its position in the parent element.
*/
name: string;
private _label?;
/**
* The label of the tab. This property is optional and can be used to display a custom label instead of the tab's name.
*/
set label(value: string | undefined);
get label(): string | undefined;
private _icon?;
/**
* The icon of the tab. This property is optional and can be used to display an icon next to the tab's label or name.
*/
set icon(value: string | undefined);
get icon(): string | undefined;
private _hidden;
/**
* Sets the hidden state of the tab.
*
* @param value - The new hidden state. If `true`, the tab will be hidden. If `false`, the tab will be visible.
* @fires hiddenchange - Dispatched when the hidden state changes.
*
* @example
* ```typescript
* const tab = document.querySelector('bim-tab');
* tab.hidden = true; // hides the tab
* ```
*/
set hidden(value: boolean);
get hidden(): boolean;
connectedCallback(): void;
protected render(): TemplateResult_2<1>;
}
/**
* A custom table web component for BIM applications. HTML tag: bim-table
*/
export declare class Table extends LitElement {
static flattenData(data: TableGroupData[]): TableGroupData[];
/**
* CSS styles for the component.
*/
static styles: CSSResult[];
private _value;
/**
* A boolean property that determines whether the table headers are hidden.
*
* @remarks
* This property can be used to hide the table headers when needed.
*
* @defaultValue false
*
* @example
* ```typescript
* table.headersHidden = true;
* ```
* @example
* ```html
*
* ```
*/
headersHidden: boolean;
minColWidth: string;
private _columns;
/**
* Sets the columns for the table.
* This property allows you to define the columns order for the table.
* If this is not set, it will be computed from the `table.data` object.
* The columns can be provided as an array of strings or objects of type `ColumnData`.
* If the columns are provided as strings, they will be converted to `ColumnData` objects with a default width.
*
* @param value - An array of strings or objects of type `ColumnData`.
*
* @example
* ```typescript
* const columns: (string | ColumnData)[] = [
* "Column 1",
* "Column 2",
* { name: "Column 3", width: "200px" },
* ];
* table.columns = columns;
* ```
*/
set columns(value: (keyof T | ColumnData)[]);
get columns(): ColumnData[];
private get _headerRowData();
private _textDelimiters;
/**
* Returns the computed data including filters and groupings.
*
* @example
* ```typescript
* const tableValue = table.value;
* console.log(tableValue);
* ```
*/
get value(): TableGroupData[];
private _expandedBeforeFilter?;
private _queryString;
/**
* Sets the search string for filtering the table data.
* This property allows you to filter the table data based on a search string.
* If a search string is provided, the table will only display rows that match the search criteria.
* The search criteria can be a simple string or a complex query.
* If a simple string is provided, the table will filter rows based on the string's presence in any column.
* If a complex query is provided, the table will filter rows based on the query's conditions and values.
*
* @example Simple Query
* ```typescript
* table.queryString = "example";
* ```
*
* @example Complex Query
* ```typescript
* table.queryString = "column1="Jhon Doe" & column2=20";
* ```
*/
set queryString(_value: string | null);
get queryString(): string | null;
private _data;
/**
* Sets the data for the table.
* This property allows you to define the data that will be displayed in the table.
* The data is expected to be an array of `TableGroupData` objects.
* If the columns are not explicitly set, they will be computed from the `data` object.
*
* @param value - An array of `TableGroupData` objects representing the table data.
*
* @example
* ```typescript
* const data: TableGroupData[] = [
* { data: { "Column 1": "Value 1", "Column 2": "Value 2" } },
* { data: { "Column 1": "Value 3", "Column 2": "Value 4" } },
* ];
* table.data = data;
* ```
*/
set data(value: TableGroupData[]);
get data(): TableGroupData[];
get dataAsync(): Promise;
/**
* A boolean property that determines whether the table is expanded or not.
* When `true`, the table will be expanded to show all rows.
* When `false`, the table will be collapsed to show only the top-level rows.
*
* @defaultValue false
*
* @example
* ```typescript
* table.expanded = true;
* ```
* @example
* ```html
*
* ```
*/
expanded: boolean;
/**
* A boolean property that determines whether the table preserves its structure when filtering.
* When `true`, the table will preserve its structure, showing only the filtered rows and their parents.
* When `false`, the table will not preserve its structure, showing only the filtered rows.
*
* @defaultValue false
*
* @example
* ```typescript
* table.preserveStructureOnFilter = true;
* ```
*/
preserveStructureOnFilter: boolean;
/**
* A boolean property that determines whether the table indentation should be included in the exported text.
*
* @defaultValue false
*
* @example
* ```typescript
* table.indentationInText = true;
* ```
*/
indentationInText: boolean;
/**
* A property representing the rules for transforming table data.
* The keys of the object are the column names, and the values are functions that define the transformation logic.
*
* @defaultValue An empty object.
*/
dataTransform: TableDataTransform;
/**
* An object of functions used to transform data values before they are used for grouping logic.
* Each function is keyed by the column name and will be used to transform the value before grouping.
* This allows creating custom grouping categories (e.g., grouping S1,S2,S3,S4 all under "S").
*
* @defaultValue An empty object.
*/
groupingTransform: TableGroupingTransform;
selectableRows: boolean;
selection: DataSet>;
noIndentation: boolean;
noCarets: boolean;
loading: boolean;
/**
* Defines the columns to group by. Can be set as a comma-separated string attribute
* or as an array of column names programmatically.
* When the data changes, the grouping will be automatically reapplied.
*
* @example
* ```html
*
* ```
*
* @example
* ```typescript
* table.groupedBy = ['Company', 'Job'];
* ```
*/
set groupedBy(value: (keyof T)[]);
get groupedBy(): (keyof T)[];
private _groupedBy;
/* Excluded from this release type: _lastSelectedData */
/**
* The modifier key used for range selection (click one row, hold key, click another to select all in between).
*
* @defaultValue "ctrlKey"
*/
rangeSelectKey: "ctrlKey" | "shiftKey" | "altKey" | "metaKey";
private _errorLoading;
private _defaultVisibility;
/**
* Determines the default visibility state for all columns.
* When true, all columns are visible by default (except those in visibilityExceptions).
* When false, all columns are hidden by default (except those in visibilityExceptions).
*
* @defaultValue true
*
* @example
* ```typescript
* // Hide all columns by default, show only exceptions
* table.defaultVisibility = false;
* table.visibilityExceptions = ['name', 'id'];
* ```
*/
set defaultVisibility(value: boolean);
get defaultVisibility(): boolean;
/**
* Array of column names that should have the opposite visibility of defaultVisibility.
* If defaultVisibility is true, these columns will be hidden.
* If defaultVisibility is false, these columns will be visible.
* Can be set as a comma-separated string attribute or as an array programmatically.
*
* @example
* ```html
*
* ```
*
* @example
* ```typescript
* // Show only 'name' and 'id' columns, hide all others
* table.defaultVisibility = false;
* table.visibilityExceptions = ['name', 'id'];
* ```
*
* @example
* ```typescript
* // Show all columns except 'internalId' and 'metadata'
* table.defaultVisibility = true;
* table.visibilityExceptions = ['internalId', 'metadata'];
* ```
*/
private _visibilityExceptions;
set visibilityExceptions(value: (keyof T)[]);
get visibilityExceptions(): (keyof T)[];
/**
* Sets the columns to be hidden from the table display.
* @param value - Array of column keys to hide
*/
set hiddenColumns(value: (keyof T)[]);
get hiddenColumns(): (keyof T)[];
/**
* Sets the columns to be visible from the table display.
* @param value - Array of column keys to show
*/
set visibleColumns(value: (keyof T)[]);
get visibleColumns(): (keyof T)[];
private emitDataSelected;
private emitDataDeselected;
private emitDataCleared;
constructor();
private filterData;
private computeMissingColumns;
private generateText;
defaultContentTemplate: (value: string | boolean | number, data: Partial, group: TableGroup | null) => TemplateResult;
/**
* A getter function that generates a CSV (Comma Separated Values) representation of the table data.
*
* @returns A string containing the CSV representation of the table data.
*
* @example
* ```typescript
* const csvData = table.csv;
* console.log(csvData); // Output: "Column 1,Column 2\nValue 1,Value 2\nValue 3,Value 4"
* ```
*/
get csv(): string;
/**
* A getter function that generates a Tab Separated Values (TSV) representation of the table data.
*
* @returns A string containing the TSV representation of the table data.
*
* @example
* ```typescript
* const tsvData = table.tsv;
* console.log(tsvData); // Output: "Column 1\tColumn 2\nValue 1\tValue 2\nValue 3\tValue 4"
* ```
*/
get tsv(): string;
/**
* Returns all unique keys found in the table data and its children.
* This method traverses through all data rows including nested children
* to collect all possible column keys.
*
* @returns An array of all unique keys found in the data
*
* @example
* ```typescript
* const allKeys = table.getAllKeys();
* console.log(allKeys); // ['Column1', 'Column2', 'NestedColumn', ...]
* ```
*/
get dataKeys(): (keyof T)[];
applyDataTransform(group: TableGroup | null): Partial>;
/**
* The `downloadData` method is used to download the table data in different formats.
*
* @param fileName - The name of the downloaded file. Default is "BIM Table Data".
* @param format - The format of the downloaded file. Can be "json", "tsv", or "csv". Default is "json".
*
* @returns - This method does not return any value.
*
* @example
* ```typescript
* table.downloadData("MyTableData", "tsv");
* ```
*/
downloadData(fileName?: string, format?: "json" | "tsv" | "csv"): void;
getRowIndentation(target: Partial, tableGroups?: TableGroupData[], level?: number): number | null;
getGroupIndentation(target: TableGroupData, tableGroups?: TableGroupData[], level?: number): number | null;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* The function to be executed when loading async data using Table.loadData
*/
loadFunction?: TableLoadFunction;
/**
* Asynchronously loads data into the table based on Table.loadFunction.
* If the data is already available, just set it in Table.data.
*
* @param force - A boolean indicating whether to force loading even if the table already has data.
*
* @returns - A promise that resolves to a boolean indicating whether the data loading was successful.
* If the promise resolves to `true`, the data loading was successful.
* If the promise resolves to `false`, the data loading was not successful.
*
* @remarks - If the table already has data and `force` is `false`, the function resolves to `false` without making any changes.
* If the table already has data and `force` is `true`, the existing data is discarded before loading the new data.
* If an error occurs during data loading, the function sets the `errorLoadingMessage` property with the error message and resolves to `false`.
*/
loadData(force?: boolean): Promise;
/**
* Groups the current table data by the specified columns.
* Creates virtual grouped data without modifying the original table.data.
* If data already has manual grouping (children), automatic grouping is skipped.
*
* @param columns - Array of column names to group by
* @returns The virtual grouped data structure or original data if manually grouped
*
* @example
* ```typescript
* // Group by job
* table.groupBy(['Job']);
*
* // Group by company, then by job
* table.groupBy(['Company', 'Job']);
* ```
*/
private groupData;
private updateValue;
/**
* A function type representing the filter function for the table.
* This function is used to determine whether a given row of data should be included in the filtered results.
*
* @param queryString - The search string used to filter the data.
* @param data - The data row to be filtered.
*
* @returns A boolean value indicating whether the data row should be included in the filtered results.
* If the function returns `true`, the data row will be included in the filtered results.
* If the function returns `false`, the data row will be excluded from the filtered results.
*/
filterFunction?: (queryString: string, data: TableGroupData) => boolean;
private _stringFilterFunction;
private _queryFilterFunction;
private filter;
private get _missingDataElement();
/**
* Renders the grouping message when the table is grouped.
* Shows "Grouped By: Column1 > Column2" format.
*/
private getGroupingMessageTemplate;
protected render(): TemplateResult<1>;
}
export declare class TableCell extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
column: keyof T;
columnIndex: number;
table: Table | null;
group: TableGroup | null;
row: TableRow | null;
rowData: Partial;
get data(): Partial[keyof T] | null;
get dataTransform(): NonNullable[keyof T]> | undefined;
get templateValue(): HTMLElement | TemplateResult_2 | typeof nothing;
connectedCallback(): void;
protected render(): TemplateResult_2<1>;
}
export declare type TableCellValue = string | number | boolean;
export declare class TableChildren extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
private _groups;
group: TableGroup | null;
private _data;
get data(): TableGroupData[];
set data(value: TableGroupData[]);
table: Table | null;
private clean;
protected render(): TemplateResult_2<1>;
}
/**
* Represents a transformation function for table data.
*/
export declare type TableDataTransform = {
[K in keyof T]?: (value: T[K], data: Partial, group: TableGroup) => CellRenderValue;
};
export declare class TableGroup extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
childrenHidden: boolean;
table: Table | null;
data: TableGroupData;
get rowElement(): TableRow | null;
get childrenElement(): TableChildren | null;
private get _isChildrenEmpty();
connectedCallback(): void;
disconnectedCallback(): void;
toggleChildren(force?: boolean): void;
private animateTableChildren;
protected firstUpdated(): void;
protected render(): TemplateResult<1>;
}
/**
* Represents a group of table rows with optional children.
*/
export declare interface TableGroupData {
data: Partial;
children?: TableGroupData[];
_isComputedGroup?: boolean;
}
/**
* Represents a transformation function for grouping table data. Used to transform values before they are used for grouping logic. ALWAYS returns an array of strings representing the hierarchical path. Examples: Simple grouping: ["Architecture"], Two-level: ["Shared Information", "S1 - Coordination"], Multi-level: ["Shared Information", "S1 - Coordination", "S1.1 - Initial Coordination"]. The array length determines the hierarchy depth, independent of groupBy columns.
*/
export declare type TableGroupingTransform = {
[K in keyof T]?: (value: T[K], data: Partial) => string[];
};
/**
* Represents a template for rendering a group of table rows in a table.
*/
export declare interface TableGroupTemplate {
data: T;
children?: TableGroupTemplate[];
}
export declare type TableLoadFunction = () => Promise[]>;
export declare class TableRow extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
selected: boolean;
get columns(): ColumnData[];
get hiddenColumns(): (keyof T)[];
group: TableGroup | null;
get groupData(): TableGroupData | undefined;
private _data;
get data(): Partial;
set data(value: Partial);
isHeader: boolean;
private get _columnNames();
private get _columnWidths();
table: Table | null;
private onTableColumnsChange;
private _intersecting;
private _intersectTimeout?;
private _timeOutDelay;
private _observer;
private get _isSelected();
private _isRangeClick;
private _onCheckboxClick;
private onSelectionChange;
protected firstUpdated(_changedProperties: PropertyValues): void;
private _onDataSelected;
private _onDataDeselected;
private _onDataSelectionCleared;
connectedCallback(): void;
disconnectedCallback(): void;
dataTransform: TableDataTransform | null;
private _interval;
private clearDataTransform;
applyAdaptativeDataTransform(dataTransform: TableDataTransform): void;
protected render(): TemplateResult_2<1>;
}
/**
* Represents a row of data for a table.
*/
export declare type TableRowData = Record> = Record;
/**
* Represents a template for rendering a row of data in a table.
*/
export declare type TableRowTemplate = Partial>;
/**
* A custom tabs web component for BIM applications. HTML tag: bim-tabs
*/
export declare class Tabs extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult[];
private _switchers;
private _tab?;
/**
* Indicates whether the tabs are positioned at the bottom of the container.
*
* @default false
*/
bottom: boolean;
/**
* Indicates whether the tab switchers are hidden or not.
*
* @default false
*/
switchersHidden: boolean;
floating: boolean;
/**
* Sets the active tab based on the provided name.
*
* @param value - The name of the tab to be set as active. If `undefined`, no tab will be selected.
*
* @remarks
* This method iterates through all child elements, finds the matching tab by name,
* and sets its `hidden` property to `false`. It also updates the corresponding tab switcher's
* `data-active` attribute to reflect the active state.
*
* If the provided `value` does not match any tab name, no tab will be selected.
*
* If the `tab` property is already set to the provided `value`, this method will deselect all tabs
* by setting the `tab` property to `undefined`.
*
* @example
* ```typescript
* // Set the active tab to "tab1"
* tabs.tab = "tab1";
*
* // Deselect all tabs
* tabs.tab = undefined;
* ```
*/
set tab(value: string | undefined);
get tab(): string | undefined;
switchersFull: boolean;
switchersCompact: boolean;
private getTabSwitcher;
private onTabHiddenChange;
private createSwitchers;
updateSwitchers(): void;
private onSlotChange;
protected render(): TemplateResult_2<1>;
}
export { TemplateResult }
/**
* A custom text input web component for BIM applications. HTML tag: bim-text-input
*/
export declare class TextInput extends LitElement implements HasName, HasValue {
/**
* CSS styles for the component.
*/
static styles: CSSResult[];
private _debounceTimeoutID?;
private _inputTypes;
/**
* Represents the icon property of the TextInput component.
* This property is used to display an icon next to the input field.
*
* @example
*
*/
icon?: string;
/**
* Represents the label property of the TextInput component.
* This property is used to display a label above or next to the input field.
*
* @example
*
*/
label?: string;
/**
* Represents the name property of the TextInput component.
* This property is used to uniquely identify the input field within a form or group of inputs.
*
* @example
*
*/
name?: string;
/**
* Represents the placeholder property of the TextInput 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
*
*/
placeholder?: string;
/**
* Represents the value property of the TextInput component.
* This property is used to get or set the current value of the input field.
*
* @example
* // Get the current value
* const currentValue = textInput.value;
*
* // Set a new value
* textInput.value = "New Value";
*/
value: string;
/**
* Represents the vertical property of the TextInput component.
* This property is used to control the layout of the input field.
* When set to `true`, the input field will be displayed vertically.
*
* @default false
*
* @example
*
*/
vertical: boolean;
/**
* Represents the debounce property of the TextInput component.
* This property is used to control the delay in milliseconds before the `input` event is fired.
* The `input` event is debounced to prevent excessive event firing when the user types rapidly.
*
* @default undefined
*
* @example
*
*/
debounce?: number;
rows?: number;
/**
* Represents the disabled property of the TextInput component.
* This property is used to disable the input field.
* When set to `true`, the input field will be disabled and the user will not be able to interact with it.
*
* @default false
*
* @example
*
*/
disabled: boolean;
/**
* Represents the resize property of the TextInput component.
* This property controls how the textarea can be resized.
* Possible values: "none", "both", "horizontal", "vertical", "block", "inline"
*
* @default "vertical"
*
* @example
*
*/
resize: "none" | "both" | "horizontal" | "vertical" | "block" | "inline";
private _type;
/**
* Sets the type of the input field.
* The type property determines the behavior of the input field.
* It can be any of the following: "date", "datetime-local", "email", "month", "password", "search", "tel", "text", "time", "url", "week".
* If an invalid type is provided, the type will not be changed.
*
* @example
* // Set the type to "email"
* textInput.type = "email";
*/
set type(value: string);
get type(): string;
/**
* Gets the query value derived from the current input value.
* The `getQuery` function is assumed to be a utility function that takes a string as input
* and returns a processed query value based on the input.
*
* @returns The processed query value derived from the current input value.
*
* @example
* ```typescript
* const textInput = new TextInput();
* textInput.value = "Key?Value";
* console.log(textInput.query);
* ```
*/
get query(): Query | null;
onValueChange: Event;
private onInputChange;
focus(): void;
protected render(): TemplateResult_2<1>;
}
/**
* A custom toolbar web component for BIM applications. HTML tag: bim-toolbar
*/
export declare class Toolbar extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
icon?: string;
/**
* Property indicating whether labels are hidden in the toolbar.
* When `labelsHidden` is `true`, labels in the toolbar sections will be hidden.
* When `labelsHidden` is `false`, labels in the toolbar sections will be visible.
*
* @defaultValue false
*/
labelsHidden: boolean;
private _vertical;
/**
* Sets the vertical property of the toolbar.
* When vertical is true, the toolbar will be displayed in a vertical layout.
* When vertical is false, the toolbar will be displayed in a horizontal layout.
*/
set vertical(value: boolean);
get vertical(): boolean;
private _hidden;
set hidden(value: boolean);
get hidden(): boolean;
private updateSections;
protected render(): TemplateResult_2<1>;
}
/**
* A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group
*/
export declare class ToolbarGroup extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
/**
* The number of rows to display in the toolbar group.
*
* @defaultValue 2
*/
rows: number;
private _vertical;
/**
* Sets the vertical property of the ToolbarGroup.
* When vertical is true, the toolbar group will display its children vertically.
* When vertical is false, the toolbar group will display its children horizontally.
*/
set vertical(value: boolean);
get vertical(): boolean;
private updateChildren;
protected render(): TemplateResult_2<1>;
}
/**
* A custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section
*/
export declare class ToolbarSection extends LitElement implements HasName {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
label?: string;
icon?: string;
private _vertical;
set vertical(value: boolean);
get vertical(): boolean;
private _labelHidden;
/**
* Sets the value of the `labelHidden` property and updates the children accordingly.
*
* @example
* ```typescript
* toolbarSection.labelHidden = true;
* ```
* @example
* ```html
*
* ```
*/
set labelHidden(value: boolean);
get labelHidden(): boolean;
private updateChildren;
protected render(): TemplateResult_2<1>;
}
/**
* A custom tooltip web component for BIM applications. HTML tag: bim-tooltip
*/
export declare class Tooltip extends LitElement {
static styles: CSSResult;
private static _container;
private static get container();
visible: boolean;
timeout?: number;
placement?: Placement;
private timeoutId?;
private _previousContainer;
private _showToolTip;
private _hideToolTip;
private computePosition;
connectedCallback(): void;
disconnectedCallback(): void;
protected render(): TemplateResult_2<1>;
}
/** The available chart types. */
export declare type Types = "bar" | "line" | "pie" | "scatter" | "radar" | "bubble" | "doughnut" | "polarArea";
export declare type UpdateFunction> = (state?: Partial) => S;
export declare type UpdateGridComponents = {
[K in keyof T as T[K] extends GridComponentDefinition[number] ? T[K] extends {
name: infer N extends string;
} ? N : never : never]: (state?: Partial>) => void;
};
/**
* Validates if a horizontal resize operation is allowed. Prevents resizing if it would make an area smaller than the minimum size. Only blocks movement in the direction that would shrink an area below the minimum.
*
* @param topValue - New size for the top row
* @param bottomValue - New size for the bottom row
* @param dy - Delta Y (vertical movement)
* @param minSize - Minimum allowed size in pixels
* @returns true if the resize is allowed, false otherwise
*/
export declare function validateHorizontalResize(topValue: number, bottomValue: number, dy: number, minSize: number): boolean;
/**
* Validates if a vertical resize operation is allowed. Prevents resizing if it would make an area smaller than the minimum size. Only blocks movement in the direction that would shrink an area below the minimum.
*
* @param leftValue - New size for the left column
* @param rightValue - New size for the right column
* @param dx - Delta X (horizontal movement)
* @param minSize - Minimum allowed size in pixels
* @returns true if the resize is allowed, false otherwise
*/
export declare function validateVerticalResize(leftValue: number, rightValue: number, dx: number, minSize: number): boolean;
/**
* A custom viewport web component for BIM applications. HTML tag: bim-viewport
*/
export declare class Viewport extends LitElement {
/**
* CSS styles for the component.
*/
static styles: CSSResult;
name?: string;
private _onResize;
constructor();
protected render(): TemplateResult_2<1>;
}
export { }