@thatopen/ui
Classes
| Class | Description |
|---|---|
| Button | A custom button web component for BIM applications. HTML tag: bim-button |
| Chart | A flexible and customizable chart component that acts as a wrapper around Chart.js. |
| ChartLegend | A component that displays a legend for charts, allowing filtering by clicking on them. |
| Checkbox | A custom checkbox web component for BIM applications. HTML tag: bim-checkbox |
| ColorInput | A custom color input web component for BIM applications. HTML tag: bim-color-input |
| Component | 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. |
| Dropdown | A custom dropdown web component for BIM applications. |
| EmptyState | A simple empty-state placeholder for BIM applications. HTML tag: bim-empty-state |
Shows a static illustration, a message, and an optional slot for a call to
action (usually a bim-button). The illustration is currently dark-theme
only (translucent white over transparent). |
| Grid | A custom grid component for web applications. |
| Icon | A custom icon web component for BIM applications. HTML tag: bim-icon |
| Input | A custom input web component for BIM applications. HTML tag: bim-input |
| Label | A custom label web component for BIM applications. HTML tag: bim-label |
| Manager | Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options. |
| Modal | A modal dialog web component for BIM applications. HTML tag: bim-modal |
| NumberInput | A custom number input web component for BIM applications. HTML tag: bim-number-input |
| Option | Data node for dropdown and selector options. HTML tag: bim-option
This element has no shadow DOM — it is a lightweight data holder. Visual rendering is handled by the parent component (bim-dropdown, bim-selector). | | Panel | A custom panel web component for BIM applications. HTML tag: bim-panel | | PanelSection | A custom panel section web component for BIM applications. HTML tag: bim-panel-section | | Selector | A custom selector web component for BIM applications. HTML tag: bim-selector | | Slider | A custom slider web component for BIM applications. HTML tag: bim-slider | | SortableList | A sortable list component that lets users reorder items and toggle their active/available status. HTML tag: bim-sortable-list
Active items can be dragged to reorder. A checkbox on each active item moves
it to the Available section. A checkbox on each available item moves it back
to Active. When sortOnly is true the Available section is hidden and
checkboxes are removed — the list acts as a pure drag-to-reorder control. |
| Tab | A custom tab web component for BIM applications. HTML tag: bim-tab |
| Table | A custom table web component for BIM applications. HTML tag: bim-table |
| Tabs | A custom tabs web component for BIM applications. HTML tag: bim-tabs |
| TextInput | A custom text input web component for BIM applications. HTML tag: bim-text-input |
| Toolbar | A custom toolbar web component for BIM applications. HTML tag: bim-toolbar |
| ToolbarGroup | A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group |
| ToolbarSection | A custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section |
| Tooltip | A custom tooltip web component for BIM applications. HTML tag: bim-tooltip |
| Viewport | A custom viewport web component for BIM applications. HTML tag: bim-viewport |
Interfaces
| Interface | Description |
|---|---|
| CellCreatedEventDetail | Represents the detail of a cell created event. |
| ColumnData | Represents a column in the table. |
| ComponentUtils | Utility interface providing methods for component state and element management. |
| DataClickDetail | The detail object for the 'sectionclick' event, containing information about the clicked chart element. |
| EntryQuery | Represents a single query condition. |
| HasName | Represents an object that has a name and an optional label. |
| HasValue | Represents an object that has a value and an event for value changes. |
| ManagerConfig | Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager. |
| QueryGroup | Represents a group of queries with an operator. |
| RefreshRowsOptions | Options for Table.refreshRows. |
| RowCreatedEventDetail | Represents the detail of a row created event. |
| RowDeselectedEventDetail | Represents the detail of a row deselected event. |
| RowSelectedEventDetail | Represents the detail of a row selected event. |
| TableGroupData | Represents a group of table rows with optional children. |
| TableGroupTemplate | Represents a template for rendering a group of table rows in a table. |
Type Aliases
| Type alias | Description |
|---|---|
| ChartDataSet | The structure for a single dataset to be used in Chart.js. |
| ChartInputData | The required data structure for populating a chart. |
| ChartInputValues | Union type for all chart data points. The specific type depends on the chart type. |
| ChartLoadFunction | The function signature for asynchronously loading chart data. |
| ConditionFunctions | Represents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition. |
| GeneralInputData | The structure for individual data points within general charts (bar, line, pie, etc). Use a single numeric value. |
| GridLayoutsDefinition | 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. |
| HiddenChangeEvent | Emitted when a tab's hidden state changes. |
| LabelData | The data associated with a chart label. |
| LabelEventData | The event data dispatched when a label is clicked. |
| LineFillType | The fill options for the area under a line in a line chart. |
| LinePointStyleType | The possible styles for points in a line chart. |
| Query | Represents a query, which can be a single query or a group of queries. |
| QueryCondition | Represents a condition used in query building. |
| QueryOperators | Represents an operator used in query building. |
| ScatterInputData | The structure for individual data points within a scatter or bubble chart. Use x and y coordinates. |
| StatefullComponent | Represents a function that returns a TemplateResult for a stateful component. |
| StatelessComponent | Represents a function that returns a TemplateResult for a stateless component. |
| TableDataTransform | Represents a transformation function for table data. |
| TableGroupingTransform | 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. |
| TableHeadersTransform | Represents a transformation function for table headers. |
| TableRowData | Represents a row of data for a table. |
| TableRowTemplate | Represents a template for rendering a row of data in a table. |
| Types | The available chart types. |
Functions
| Function | Description |
|---|---|
| calculateDividerStyles | Calculates the CSS styles needed for a divider element. Handles positioning, transforms, and sizing based on divider type and grid gaps. |
| calculateHorizontalResize | Calculates new sizes for a horizontal resize operation. |
| calculateVerticalResize | Calculates new sizes for a vertical resize operation. |
| deduplicateDividerAreas | Removes duplicate area names from divider area arrays. Each adjacent area should only appear once in the divider's area list. |
| detectDividers | Detects all dividers (vertical and horizontal) in a grid matrix. A divider exists where two adjacent areas have different names. |
| extractUniqueAreas | Extracts unique area names from a grid template string. |
| getElementValue | Extracts and returns the value of an HTML element's attributes. |
| parseGridTemplate | Parses a grid template string and returns a 2D matrix representation. |
| validateHorizontalResize | 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. |
| validateVerticalResize | 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. |