/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/DevExtreme */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; import { Palette, PaletteExtensionMode, Font, TextOverflow, Theme, WordWrap, DashStyle } from 'devextreme/common/charts'; import { TreeMapColorizerType, TreeMapLayoutAlgorithm, TreeMapLayoutDirection, ClickEvent, DisposingEvent, DrawnEvent, DrillEvent, ExportedEvent, ExportingEvent, FileSavingEvent, HoverChangedEvent, IncidentOccurredEvent, InitializedEvent, NodesInitializedEvent, NodesRenderingEvent, OptionChangedEvent, SelectionChangedEvent, dxTreeMapNode } from 'devextreme/viz/tree_map'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { ExportFormat, SingleMultipleOrNone, HorizontalAlignment, VerticalEdge } from 'devextreme/common'; import { Format } from 'devextreme/common/core/localization'; import DxTreeMap from 'devextreme/viz/tree_map'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core'; import type * as DxTreeMapTypes from "devextreme/viz/tree_map_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/tree-map/nested"; import * as i3 from "devextreme-angular/core"; /** * The TreeMap is a UI component that displays hierarchical data by using nested rectangles. */ export declare class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; instance: DxTreeMap; /** * Specifies the name of the data source field that provides nested items for a group. Applies to hierarchical data sources only. */ get childrenField(): string; set childrenField(value: string); /** * Specifies the name of the data source field that provides colors for tiles. */ get colorField(): string; set colorField(value: string); /** * Manages the color settings. */ get colorizer(): { colorCodeField?: string | undefined; colorizeGroups?: boolean; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; range?: Array; type?: TreeMapColorizerType | undefined; }; set colorizer(value: { colorCodeField?: string | undefined; colorizeGroups?: boolean; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; range?: Array; type?: TreeMapColorizerType | undefined; }); /** * Binds the UI component to data. */ get dataSource(): Array | DataSource | DataSourceOptions | null | Store | string; set dataSource(value: Array | DataSource | DataSourceOptions | null | Store | string); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record; set elementAttr(value: Record); /** * Configures the exporting and printing features. */ get export(): { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }; set export(value: { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }); /** * Configures groups. */ get group(): { border?: { color?: string | undefined; width?: number | undefined; }; color?: string; headerHeight?: number | undefined; hoverEnabled?: boolean | undefined; hoverStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; label?: { font?: Font; textOverflow?: TextOverflow; visible?: boolean; }; padding?: number; selectionStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; }; set group(value: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string; headerHeight?: number | undefined; hoverEnabled?: boolean | undefined; hoverStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; label?: { font?: Font; textOverflow?: TextOverflow; visible?: boolean; }; padding?: number; selectionStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; }); /** * Specifies whether tiles and groups change their style when a user pauses on them. */ get hoverEnabled(): boolean | undefined; set hoverEnabled(value: boolean | undefined); /** * Specifies the name of the data source field that provides IDs for items. Applies to plain data sources only. */ get idField(): string | undefined; set idField(value: string | undefined); /** * Specifies whether the user will interact with a single tile or its group. */ get interactWithGroup(): boolean; set interactWithGroup(value: boolean); /** * Specifies the name of the data source field that provides texts for tile and group labels. */ get labelField(): string; set labelField(value: string); /** * Specifies the layout algorithm. */ get layoutAlgorithm(): ((e: { items: Array; rect: Array; sum: number; }) => void) | TreeMapLayoutAlgorithm; set layoutAlgorithm(value: ((e: { items: Array; rect: Array; sum: number; }) => void) | TreeMapLayoutAlgorithm); /** * Specifies the direction in which the items will be laid out. */ get layoutDirection(): TreeMapLayoutDirection; set layoutDirection(value: TreeMapLayoutDirection); /** * Configures the loading indicator. */ get loadingIndicator(): { backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }; set loadingIndicator(value: { backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }); /** * Specifies how many hierarchical levels must be visualized. */ get maxDepth(): number | undefined; set maxDepth(value: number | undefined); /** * Specifies the name of the data source field that provides parent IDs for items. Applies to plain data sources only. */ get parentField(): string | undefined; set parentField(value: string | undefined); /** * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path. */ get pathModified(): boolean; set pathModified(value: boolean); /** * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates. */ get redrawOnResize(): boolean; set redrawOnResize(value: boolean); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies whether a single or multiple nodes can be in the selected state simultaneously. */ get selectionMode(): SingleMultipleOrNone | undefined; set selectionMode(value: SingleMultipleOrNone | undefined); /** * Specifies the UI component's size in pixels. */ get size(): { height?: number | undefined; width?: number | undefined; }; set size(value: { height?: number | undefined; width?: number | undefined; }); /** * Sets the name of the theme the UI component uses. */ get theme(): Theme; set theme(value: Theme); /** * Configures tiles. */ get tile(): { border?: { color?: string | undefined; width?: number | undefined; }; color?: string; hoverStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; label?: { font?: Font; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; selectionStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; }; set tile(value: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string; hoverStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; label?: { font?: Font; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; selectionStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; }); /** * Configures the UI component's title. */ get title(): string | { font?: Font; horizontalAlignment?: HorizontalAlignment; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }; set title(value: string | { font?: Font; horizontalAlignment?: HorizontalAlignment; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }); /** * Configures tooltips - small pop-up rectangles that display information about a data-visualizing UI component element being pressed or hovered over with the mouse pointer. */ get tooltip(): { arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((info: { node: dxTreeMapNode; value: number; valueText: string; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }; set tooltip(value: { arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((info: { node: dxTreeMapNode; value: number; valueText: string; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }); /** * Specifies the name of the data source field that provides values for tiles. */ get valueField(): string; set valueField(value: string); /** * A function that is executed when a node is clicked or tapped. */ onClick: EventEmitter; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function that is executed when the UI component's rendering has finished. */ onDrawn: EventEmitter; /** * A function that is executed when a user drills up or down. */ onDrill: EventEmitter; /** * A function that is executed after the UI component is exported. */ onExported: EventEmitter; /** * A function that is executed before the UI component is exported. */ onExporting: EventEmitter; /** * A function that is executed before a file with exported UI component is saved to the user's local storage. */ onFileSaving: EventEmitter; /** * A function that is executed after the pointer enters or leaves a node. */ onHoverChanged: EventEmitter; /** * A function that is executed when an error or warning occurs. */ onIncidentOccurred: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed only once, after the nodes are initialized. */ onNodesInitialized: EventEmitter; /** * A function that is executed before the nodes are displayed and each time the collection of active nodes is changed. */ onNodesRendering: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * A function that is executed when a node is selected or selection is canceled. */ onSelectionChanged: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ childrenFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ colorFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ colorizerChange: EventEmitter<{ colorCodeField?: string | undefined; colorizeGroups?: boolean; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; range?: Array; type?: TreeMapColorizerType | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataSourceChange: EventEmitter | DataSource | DataSourceOptions | null | Store | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ exportChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ groupChange: EventEmitter<{ border?: { color?: string | undefined; width?: number | undefined; }; color?: string; headerHeight?: number | undefined; hoverEnabled?: boolean | undefined; hoverStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; label?: { font?: Font; textOverflow?: TextOverflow; visible?: boolean; }; padding?: number; selectionStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ idFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ interactWithGroupChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ layoutAlgorithmChange: EventEmitter<((e: { items: Array; rect: Array; sum: number; }) => void) | TreeMapLayoutAlgorithm>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ layoutDirectionChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ loadingIndicatorChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ maxDepthChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ parentFieldChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pathModifiedChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ redrawOnResizeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectionModeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ sizeChange: EventEmitter<{ height?: number | undefined; width?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ themeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tileChange: EventEmitter<{ border?: { color?: string | undefined; width?: number | undefined; }; color?: string; hoverStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; label?: { font?: Font; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; selectionStyle?: { border?: { color?: string | undefined; width?: number | undefined; }; color?: string | undefined; }; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ titleChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tooltipChange: EventEmitter<{ arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((info: { node: dxTreeMapNode; value: number; valueText: string; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valueFieldChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxTreeMap; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxTreeMapModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/tree-map/nested'; export { DxTreeMapTypes };