smart-webcomponents-angular/fesm2020/smart-webcomponents-angular-threedchart.mjs.map

[](https://jqwidgets.com/license/)

{"version":3,"file":"smart-webcomponents-angular-threedchart.mjs","sources":["../../threedchart/src/smart.element.ts","../../threedchart/src/smart.threedchart.ts","../../threedchart/src/smart.threedchart.module.ts","../../threedchart/src/smart-webcomponents-angular-threedchart.ts"],"sourcesContent":["\ndeclare global {\n    interface Window {\n        Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n    constructor(ref: ElementRef) {\n        const that = this;\n        this.nativeElement = ref.nativeElement as any;\n\n        that.nativeElement.onAttached = () => {\n            that.onAttach.emit(that.nativeElement);\n        }\n\n        that.nativeElement.onDetached = () => {\n            that.onDetach.emit(that.nativeElement);\n        }\n    }\n\n    @Output() onCreate: EventEmitter<any> = new EventEmitter();\n    @Output() onReady: EventEmitter<any> = new EventEmitter();\n    @Output() onAttach: EventEmitter<any> = new EventEmitter();\n    @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n    public nativeElement: any;\n\n    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n        this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license.  */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { ThreeDChart } from './../index';\nimport { Animation, ThreeDChartColorScheme, ThreeDChartLegendIndex, ThreeDChartSelectionMode, ThreeDChartSymbolType, ThreeDChartType, ThreeDChartRangeSelectorSerieType, ThreeDChartXAxisType, ThreeDChartCameraPosition, ThreeDChartSeriesGroup, ThreeDChartBand, ThreeDChartFormatSettings, ThreeDChartSeriesGroupSerie, ThreeDChartLabels, ThreeDChartOffset, ThreeDChartPadding, ThreeDChartValueAxis, ThreeDChartLines, ThreeDChartXAxis, ThreeDChartRangeSelector, ThreeDChartZAxis, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ThreeDChartColorScheme, ThreeDChartLegendIndex, ThreeDChartSelectionMode, ThreeDChartSymbolType, ThreeDChartType, ThreeDChartRangeSelectorSerieType, ThreeDChartXAxisType, ThreeDChartCameraPosition, ThreeDChartSeriesGroup, ThreeDChartBand, ThreeDChartFormatSettings, ThreeDChartSeriesGroupSerie, ThreeDChartLabels, ThreeDChartOffset, ThreeDChartPadding, ThreeDChartValueAxis, ThreeDChartLines, ThreeDChartXAxis, ThreeDChartRangeSelector, ThreeDChartZAxis, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { ThreeDChart } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-3d-chart',\tselector: 'smart-3d-chart, [smart-3d-chart]'\n})\n\nexport class ThreeDChartComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<ThreeDChart>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as ThreeDChart;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: ThreeDChart;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <ThreeDChart>document.createElement('smart-3d-chart');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Gets or sets the animation mode for the component. If the property is set to 'none', all animations are disabled. Otherwise, enabling this property allows animations to play based on the selected mode. */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Specifies the speed at which the animation progresses. A rate of 1 represents the normal playback speed. Values greater than 1 will make the animation play faster, while values less than 1 will slow it down. By default, the animation rate is set to 1. */\n\t@Input()\n\tget animationSpeed(): number {\n\t\treturn this.nativeElement ? this.nativeElement.animationSpeed : undefined;\n\t}\n\tset animationSpeed(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.animationSpeed = value : undefined;\n\t}\n\n\t/** @description Determines if the chart automatically rotates through its data or views without user interaction. When enabled, the chart will transition between different data points or perspectives at set intervals. */\n\t@Input()\n\tget autoRotate(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoRotate : undefined;\n\t}\n\tset autoRotate(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoRotate = value : undefined;\n\t}\n\n\t/** @description Defines the speed at which the object or element automatically rotates. A higher value increases the rotation rate, while a lower value slows it down. Typically measured in degrees or radians per second, depending on implementation. */\n\t@Input()\n\tget autoRotateSpeed(): number {\n\t\treturn this.nativeElement ? this.nativeElement.autoRotateSpeed : undefined;\n\t}\n\tset autoRotateSpeed(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.autoRotateSpeed = value : undefined;\n\t}\n\n\t/** @description Specifies the background color of the chart area using a valid CSS color value. Accepts formats such as hexadecimal (e.g., '#DDFFE8'), RGB, RGBA, HSL, HSLA, or named colors. For example, setting this property to '#DDFFE8' applies a light green background to the chart. */\n\t@Input()\n\tget backgroundColor(): string | null {\n\t\treturn this.nativeElement ? this.nativeElement.backgroundColor : undefined;\n\t}\n\tset backgroundColor(value: string | null) {\n\t\tthis.nativeElement ? this.nativeElement.backgroundColor = value : undefined;\n\t}\n\n\t/** @description Configures the chart's background with a fixed linear gradient. To use this property, provide an array of strings, each representing a color stop in the format: '\"offset, color\"'. Here, 'offset' is a percentage (e.g., '0%', '100%') indicating the position of the color stop along the gradient, and 'color' is any valid CSS color value. The array should have at least two entries to define the gradient's start and end colors. For example:  '[\"0%, #fff\", \"100%, #ccc\"]'. */\n\t@Input()\n\tget backgroundGradient(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.backgroundGradient : undefined;\n\t}\n\tset backgroundGradient(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.backgroundGradient = value : undefined;\n\t}\n\n\t/** @description Specifies a static image as the background of the chart. You can provide the URL of an image (e.g., 'https://www.htmlelements.com/demos/images/stars.jpg'), which will be displayed behind the chart elements and remain fixed regardless of chart interactions such as zooming or panning. */\n\t@Input()\n\tget backgroundImage(): string {\n\t\treturn this.nativeElement ? this.nativeElement.backgroundImage : undefined;\n\t}\n\tset backgroundImage(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.backgroundImage = value : undefined;\n\t}\n\n\t/** @description Defines the chart's background as a dynamic, camera-synchronized image that rotates in tandem with the viewer's perspective. This property requires an array containing exactly six images, each representing one face of a cube map (for example: front, back, left, right, top, bottom). All provided images must be square, with a 1:1 aspect ratio, to ensure seamless rendering and correct alignment in the 3D environment. */\n\t@Input()\n\tget backgroundTexture(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.backgroundTexture : undefined;\n\t}\n\tset backgroundTexture(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.backgroundTexture = value : undefined;\n\t}\n\n\t/** @description Specifies the camera's position in 3D space. This property requires an object with three numeric properties: '{ x, y, z }', each representing the camera's coordinates along the respective axes. For example: '{ x: 0, y: 10, z: 50 }'. */\n\t@Input()\n\tget cameraPosition(): ThreeDChartCameraPosition {\n\t\treturn this.nativeElement ? this.nativeElement.cameraPosition : undefined;\n\t}\n\tset cameraPosition(value: ThreeDChartCameraPosition) {\n\t\tthis.nativeElement ? this.nativeElement.cameraPosition = value : undefined;\n\t}\n\n\t/** @description Specifies the initial zoom level of the camera when the view is first loaded. A value of 1 represents the default, unzoomed state. Higher values zoom in, showing a closer view, while lower values zoom out, displaying a wider area. */\n\t@Input()\n\tget cameraZoom(): number {\n\t\treturn this.nativeElement ? this.nativeElement.cameraZoom : undefined;\n\t}\n\tset cameraZoom(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.cameraZoom = value : undefined;\n\t}\n\n\t/** @description Defines the main title, or caption, that appears at the top of the chart, providing a clear and descriptive label for the chart’s content or purpose. */\n\t@Input()\n\tget caption(): string {\n\t\treturn this.nativeElement ? this.nativeElement.caption : undefined;\n\t}\n\tset caption(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.caption = value : undefined;\n\t}\n\n\t/** @description Defines the color palette used for the chart's visual elements. jqxChart supports 32 distinct color schemes, selectable by specifying a scheme name from 'scheme01' through 'scheme32'. Each scheme applies a predefined set of colors to the chart’s data series and components, allowing for easy customization of the chart's appearance. */\n\t@Input()\n\tget colorScheme(): ThreeDChartColorScheme | string {\n\t\treturn this.nativeElement ? this.nativeElement.colorScheme : undefined;\n\t}\n\tset colorScheme(value: ThreeDChartColorScheme | string) {\n\t\tthis.nativeElement ? this.nativeElement.colorScheme = value : undefined;\n\t}\n\n\t/** @description Configures the settings for the chart's interactive controls, such as filters, sliders, and buttons, allowing customization of their appearance and behavior. */\n\t@Input()\n\tget controlsSettings(): any {\n\t\treturn this.nativeElement ? this.nativeElement.controlsSettings : undefined;\n\t}\n\tset controlsSettings(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.controlsSettings = value : undefined;\n\t}\n\n\t/** @description Enables you to replace default items with custom 3D objects. To use this property, provide an array of objects, each specifying the location and source of a custom model in the following format:  '{ groupIndex, serieIndex, itemIndex, modelUrl }'.  - 'groupIndex': Index of the group containing the item to replace  - 'serieIndex': Index of the series within the group  - 'itemIndex': Index of the specific item within the series  - 'modelUrl': URL or path to the custom 3D model file to use as a replacement  Each object in the array defines a substitution for a specific default item. */\n\t@Input()\n\tget customModels(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.customModels : undefined;\n\t}\n\tset customModels(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.customModels = value : undefined;\n\t}\n\n\t/** @description Specifies the data source that populates the chart, determining the information displayed in the chart's visualization. This property accepts an array or object containing the data points or records to be rendered on the chart. */\n\t@Input()\n\tget dataSource(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.dataSource : undefined;\n\t}\n\tset dataSource(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.dataSource = value : undefined;\n\t}\n\n\t/** @description Specifies the descriptive text displayed on the chart, providing additional context or information to help users understand the chart's purpose, data, or insights. This text typically appears as a caption or annotation within or near the chart area. */\n\t@Input()\n\tget description(): string {\n\t\treturn this.nativeElement ? this.nativeElement.description : undefined;\n\t}\n\tset description(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.description = value : undefined;\n\t}\n\n\t/** @description Specifies whether the chart is visible or hidden. When set to true, the chart will be displayed; when set to false, the chart will be disabled. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Determines whether the chart's toolbar is displayed, allowing users to access interactive features such as exporting, zooming, or changing chart settings. Set to 'true' to show the toolbar, or 'false' to hide it. */\n\t@Input()\n\tget enableControlsToolbar(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.enableControlsToolbar : undefined;\n\t}\n\tset enableControlsToolbar(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.enableControlsToolbar = value : undefined;\n\t}\n\n\t/** @description  */\n\t@Input()\n\tget controlsToolbarItems(): any {\n\t\treturn this.nativeElement ? this.nativeElement.controlsToolbarItems : undefined;\n\t}\n\tset controlsToolbarItems(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.controlsToolbarItems = value : undefined;\n\t}\n\n\t/** @description Configures the appearance and behavior of the chart’s grid, including properties such as visibility, line style, color, spacing, and axis alignment. */\n\t@Input()\n\tget gridOptions(): any {\n\t\treturn this.nativeElement ? this.nativeElement.gridOptions : undefined;\n\t}\n\tset gridOptions(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.gridOptions = value : undefined;\n\t}\n\n\t/** @description Specifies whether the legend is generated based on individual chart series or grouped series. When set to \"auto\", the legend adapts dynamically—using series or series groups as the basis—depending on the current chart type. This ensures the legend remains relevant to how data is visually organized in each chart configuration. */\n\t@Input()\n\tget legendIndex(): ThreeDChartLegendIndex | string {\n\t\treturn this.nativeElement ? this.nativeElement.legendIndex : undefined;\n\t}\n\tset legendIndex(value: ThreeDChartLegendIndex | string) {\n\t\tthis.nativeElement ? this.nativeElement.legendIndex = value : undefined;\n\t}\n\n\t/** @description Specifies the arrangement of items within the legend, such as whether they are displayed in a horizontal row or a vertical column. This property controls the visual layout and orientation of the legend entries in the chart. */\n\t@Input()\n\tget legendLayout(): any {\n\t\treturn this.nativeElement ? this.nativeElement.legendLayout : undefined;\n\t}\n\tset legendLayout(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.legendLayout = value : undefined;\n\t}\n\n\t/** @description Defines the color of the lighting used within the 3D scene, affecting the appearance and shading of all objects rendered in the environment. Adjusting this value changes how surfaces reflect light, influencing the overall mood and visibility in the scene. Use a valid color format (e.g., hexadecimal, RGB, or named color). */\n\t@Input()\n\tget lightColor(): string {\n\t\treturn this.nativeElement ? this.nativeElement.lightColor : undefined;\n\t}\n\tset lightColor(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.lightColor = value : undefined;\n\t}\n\n\t/** @description Gets or sets the unlockKey property, which serves as the authentication key required to activate or access the product’s full features. Use this property to specify a valid unlock key for product authorization, or retrieve the currently assigned key. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the current locale (language and regional settings) for the component. This property is used together with the messages property to determine which localized messages or translations should be displayed. Changing the locale will update the component’s language-specific content accordingly. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves an object containing the set of user interface strings displayed by the widget, enabling support for multiple languages. This property works together with the locale property to allow localization, ensuring that text within the widget adapts appropriately to the selected language or region. Each key-value pair in the object represents a specific UI string that can be customized or translated as needed. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Gets or sets a boolean value that determines whether the Chart's layout is displayed in a mirrored (flipped horizontally) orientation. When enabled, the positions of chart elements such as axes, labels, and data series are reversed to create a mirrored effect. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection altogether. */\n\t@Input()\n\tget selectionMode(): ThreeDChartSelectionMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.selectionMode : undefined;\n\t}\n\tset selectionMode(value: ThreeDChartSelectionMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.selectionMode = value : undefined;\n\t}\n\n\t/** @description The 'seriesGroups' property defines the configuration for all data series displayed on the jqxChart. This property allows you to organize multiple series into separate groups, with each group potentially using a different chart type (such as line, column, or area) and having its own dedicated value axis (Y-axis). This enables the visualization of data with varying value ranges or units of measure on the same chart, making it possible to compare disparate datasets simultaneously.Each element in the 'seriesGroups' array is an object representing a single series group. Within each group object, you can specify the type of chart to be used for the series in that group (for example, '\"type\": \"line\"' or '\"type\": \"column\"'), define the configuration for the group's value axis, and provide the specific series data to be plotted. This flexible structure allows you to, for example, display all series in one group as lines, while rendering series in another group as columns—each with independently scaled Y-axes.In summary, 'seriesGroups' is an array of group configuration objects, and each group defines the chart type, associated value axis, and a collection of series to be rendered together within that group. This design supports advanced charting scenarios, such as displaying both temperature (on one Y-axis) and rainfall (on a separate Y-axis) within the same chart, using different series visualizations. */\n\t@Input()\n\tget seriesGroups(): ThreeDChartSeriesGroup[] {\n\t\treturn this.nativeElement ? this.nativeElement.seriesGroups : undefined;\n\t}\n\tset seriesGroups(value: ThreeDChartSeriesGroup[]) {\n\t\tthis.nativeElement ? this.nativeElement.seriesGroups = value : undefined;\n\t}\n\n\t/** @description Specifies whether the grid connecting lines should be displayed when a user hovers over a chart item. When enabled, grid lines related to the hovered data point will become visible, providing visual emphasis and aiding in data interpretation. */\n\t@Input()\n\tget showConnectionLines(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.showConnectionLines : undefined;\n\t}\n\tset showConnectionLines(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.showConnectionLines = value : undefined;\n\t}\n\n\t/** @description Specifies whether the chart series legend should be displayed or hidden. When set to true, the legend appears on the chart, helping users identify different data series. When set to false, the legend is not shown. */\n\t@Input()\n\tget showLegend(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.showLegend : undefined;\n\t}\n\tset showLegend(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.showLegend = value : undefined;\n\t}\n\n\t/** @description Specifies whether the chart’s series legend table is displayed. When set to true, the legend table appears, providing a visual key that identifies each data series within the chart. When set to false, the legend table is hidden, and no series identifiers are shown. This setting helps control the visibility of the chart legend for improved readability or a cleaner presentation. */\n\t@Input()\n\tget showLegendTable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.showLegendTable : undefined;\n\t}\n\tset showLegendTable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.showLegendTable = value : undefined;\n\t}\n\n\t/** @description Controls the visibility of chart tooltips. When enabled, tooltips appear to display additional information when users hover over or interact with chart elements; when disabled, tooltips are hidden and no additional data is shown on interaction. */\n\t@Input()\n\tget showToolTips(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.showToolTips : undefined;\n\t}\n\tset showToolTips(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.showToolTips = value : undefined;\n\t}\n\n\t/** @description Specifies the amount of space (padding) between the chart title (caption) and the edges of the chart area, allowing you to control the distance around the title for better visual separation and readability. */\n\t@Input()\n\tget titlePadding(): ThreeDChartPadding {\n\t\treturn this.nativeElement ? this.nativeElement.titlePadding : undefined;\n\t}\n\tset titlePadding(value: ThreeDChartPadding) {\n\t\tthis.nativeElement ? this.nativeElement.titlePadding = value : undefined;\n\t}\n\n\t/** @description Configuration options for formatting how the series values appear within tooltips. These settings control the display format, such as number precision, prefixes, suffixes, units, and other stylistic options specific to the values shown in the series tooltips. */\n\t@Input()\n\tget toolTipFormatFunction(): {(value?: any, index?: number, series?: any): string} {\n\t\treturn this.nativeElement ? this.nativeElement.toolTipFormatFunction : undefined;\n\t}\n\tset toolTipFormatFunction(value: {(value?: any, index?: number, series?: any): string}) {\n\t\tthis.nativeElement ? this.nativeElement.toolTipFormatFunction = value : undefined;\n\t}\n\n\t/** @description Defines the color of the tooltip's guideline or border that appears when hovering over chart elements. By default, this color matches the color of the item currently being hovered over. You can customize this property to use a specific color regardless of the hovered item's color. */\n\t@Input()\n\tget toolTipFormatSettings(): ThreeDChartFormatSettings {\n\t\treturn this.nativeElement ? this.nativeElement.toolTipFormatSettings : undefined;\n\t}\n\tset toolTipFormatSettings(value: ThreeDChartFormatSettings) {\n\t\tthis.nativeElement ? this.nativeElement.toolTipFormatSettings = value : undefined;\n\t}\n\n\t/** @description An object containing configuration settings for the y-axis (value axis) of the Chart. This includes properties such as axis labels, scaling options, tick marks, grid lines, range limits (minimum and maximum values), formatting, and other visual or functional parameters that control how the y-axis is displayed and behaves. */\n\t@Input()\n\tget toolTipLineColor(): string | null {\n\t\treturn this.nativeElement ? this.nativeElement.toolTipLineColor : undefined;\n\t}\n\tset toolTipLineColor(value: string | null) {\n\t\tthis.nativeElement ? this.nativeElement.toolTipLineColor = value : undefined;\n\t}\n\n\t/** @description Configures the properties of the chart's x-axis, such as its scale, labels, range, and appearance. This setting determines how data is displayed and organized along the horizontal axis of the chart. */\n\t@Input()\n\tget valueAxis(): ThreeDChartValueAxis {\n\t\treturn this.nativeElement ? this.nativeElement.valueAxis : undefined;\n\t}\n\tset valueAxis(value: ThreeDChartValueAxis) {\n\t\tthis.nativeElement ? this.nativeElement.valueAxis = value : undefined;\n\t}\n\n\t/** @description Defines the properties and configuration options for the Chart's z-axis, which controls the depth dimension in 3D charts. This setting allows you to specify parameters such as limits, labels, scaling, and appearance of the z-axis, enabling better representation and visualization of data in three-dimensional charts. */\n\t@Input()\n\tget xAxis(): ThreeDChartXAxis {\n\t\treturn this.nativeElement ? this.nativeElement.xAxis : undefined;\n\t}\n\tset xAxis(value: ThreeDChartXAxis) {\n\t\tthis.nativeElement ? this.nativeElement.xAxis = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget zAxis(): ThreeDChartZAxis {\n\t\treturn this.nativeElement ? this.nativeElement.zAxis : undefined;\n\t}\n\tset zAxis(value: ThreeDChartZAxis) {\n\t\tthis.nativeElement ? this.nativeElement.zAxis = value : undefined;\n\t}\n\n\t/** @description This event is triggered whenever the user clicks on any interactive element within the chart, such as bars, data points, or slices. It provides information about the specific chart element that was clicked, enabling you to implement custom responses or interactions based on user input.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\titemIndex, \tserieIndex, \tgroupIndex)\n\t*   itemIndex - The item index of the item.\n\t*   serieIndex - The serie index of the item.\n\t*   groupIndex - The group index of the item.\n\t*/\n\t@Output() onItemClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description The event is triggered whenever a chart element becomes visible on the chart, such as when a previously hidden data series, axis, label, or legend item is displayed to the user. This allows developers to execute custom logic in response to chart elements appearing in the visualization.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\titemIndex, \tserieIndex, \tgroupIndex)\n\t*   itemIndex - The item index of the item.\n\t*   serieIndex - The serie index of the item.\n\t*   groupIndex - The group index of the item.\n\t*/\n\t@Output() onShow: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a chart element (such as a data series, data point, or legend item) becomes hidden from view, either through user interaction or programmatic changes. It allows you to execute custom logic in response to elements being concealed within the chart.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\titemIndex, \tserieIndex, \tgroupIndex)\n\t*   itemIndex - The item index of the item.\n\t*   serieIndex - The serie index of the item.\n\t*   groupIndex - The group index of the item.\n\t*/\n\t@Output() onHide: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user selects an element within the chart, such as a bar, line point, or pie segment. It provides relevant details about the selected chart element, enabling interactive features like displaying tooltips, highlighting, or updating other components based on the user’s selection.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\titemIndex, \tserieIndex, \tgroupIndex)\n\t*   itemIndex - The item index of the item.\n\t*   serieIndex - The serie index of the item.\n\t*   groupIndex - The group index of the item.\n\t*/\n\t@Output() onSelect: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user deselects or removes selection from a chart element, such as a data point, bar, or segment. It allows you to execute custom logic in response to the unselection action, such as updating related UI components, clearing details panels, or modifying application state.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\titemIndex, \tserieIndex, \tgroupIndex)\n\t*   itemIndex - The item index of the item.\n\t*   serieIndex - The serie index of the item.\n\t*   groupIndex - The group index of the item.\n\t*/\n\t@Output() onUnselect: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered after the range selector’s position has changed and the chart has completed rendering. It is useful for executing custom logic that depends on the updated position of the range selector and the final, fully-rendered state of the chart.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tminValue, \tmaxValue)\n\t*   minValue - The start value of the range selector.\n\t*   maxValue - The end value of the range selector.\n\t*/\n\t@Output() onRangeSelectionChanged: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever the range selector position on the chart is modified, occurring just before the chart begins its rendering process. By handling this event, you have the opportunity to intercept the change; calling `preventDefault()` within the event handler will cancel the update, thereby stopping the chart from changing its displayed range and re-rendering. This allows for validation or custom logic to be executed in response to a user's attempt to adjust the range.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tminValue, \tmaxValue, \toldMinValue, \toldMaxValue)\n\t*   minValue - The start value of the range selector.\n\t*   maxValue - The end value of the range selector.\n\t*   oldMinValue - The previous start value of the range selector.\n\t*   oldMaxValue - The previous end value of the range selector.\n\t*/\n\t@Output() onRangeSelectionChanging: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered at the start of the chart's rendering process, before any visual elements are drawn. It provides an opportunity to perform actions or modify chart configurations just prior to display.\"\n\t*  @param event. The custom event. \t*/\n\t@Output() onRefreshBegin: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered after the chart has completed its rendering process and all visual elements have been fully drawn onto the page. You can listen for this event to perform actions that require the chart to be fully loaded, such as manipulating chart elements, updating data, or displaying additional content.\n\t*  @param event. The custom event. \t*/\n\t@Output() onRefreshEnd: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description The event is triggered when the chart starts its resizing process, allowing developers to execute custom logic or handle changes before the resize operation is complete. This can be used to adapt layout, update UI elements, or prepare data in response to the chart's imminent size adjustment.\n\t*  @param event. The custom event. \t*/\n\t@Output() onResizeBegin: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the chart has completed its resizing process, indicating that all layout adjustments and visual updates related to the size change are fully applied. Developers can use this event to perform actions that depend on the finalized dimensions of the chart.\n\t*  @param event. The custom event. \t*/\n\t@Output() onResizeEnd: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Adds a new color scheme to the collection. If a scheme with the specified name already exists, this method will update its color values instead of creating a duplicate. This ensures that each color scheme name remains unique, and existing schemes can be modified by providing the same name with new color definitions. \n\t* @param {string} schemeName. The name of the custom color scheme.\n\t* @param {any[]} colorsArray. An array of color values.\n\t*/\n    public addColorScheme(schemeName: string, colorsArray: any[]): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.addColorScheme(schemeName, colorsArray);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.addColorScheme(schemeName, colorsArray);\n            });\n        }\n    }\n\n\t/** @description Initiates an update operation on the chart, allowing multiple changes to be made without triggering a re-render after each modification. The chart’s rendering is deferred until the endUpdate method is called, at which point all accumulated updates are rendered in a single batch for improved performance. \n\t*/\n    public beginUpdate(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.beginUpdate();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.beginUpdate();\n            });\n        }\n    }\n\n\t/** @description Signals the completion of a batch update to the chart. Once the `endUpdate` method is called, all pending changes made since the last update will be processed, and the chart will be re-rendered to reflect these updates. This helps optimize performance by minimizing unnecessary redraws during multiple consecutive changes. \n\t* @param {boolean} refresh?. If set to true, the chart will complete a full refresh.\n\t*/\n    public endUpdate(refresh?: boolean): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.endUpdate(refresh);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.endUpdate(refresh);\n            });\n        }\n    }\n\n\t/** @description Retrieves the color palette associated with the specified color scheme name. If a color scheme with the provided name does not exist, the method returns undefined instead of a color palette. \n\t* @param {string} schemeName. The name of the color scheme.\n\t* @returns {any[]}\n  */\n\tpublic async getColorScheme(schemeName): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getColorScheme(schemeName);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getColorSchemeSync(schemeName): any[] {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getColorScheme(schemeName);\n        }\n        return null;\n    }\n\n\t/** @description Retrieves the item located at the specified index or indices within the collection. If multiple indexes are provided, the method accesses nested items accordingly. \n\t* @param {number | null} groupIndex?. Series group index.\n\t* @param {number | null} serieIndex?. Series index.\n\t* @param {number | null} itemIndex?. Item (data point) index.\n\t* @returns {any}\n  */\n\tpublic async getItemByIndexes(groupIndex?, serieIndex?, itemIndex?): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getItemByIndexes(groupIndex, serieIndex, itemIndex);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getItemByIndexesSync(groupIndex?, serieIndex?, itemIndex?): any {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getItemByIndexes(groupIndex, serieIndex, itemIndex);\n        }\n        return null;\n    }\n\n\t/** @description Returns an array of items that correspond to the specified indexes. If a particular index is set to null, the function will include all items that match the other provided indexes for that position. This allows for flexible selection based on partial index specification. \n\t* @param {number | null} groupIndex?. Series group index.\n\t* @param {number | null} serieIndex?. Series index.\n\t* @param {number | null} itemIndex?. Item (data point) index.\n\t* @returns {any}\n  */\n\tpublic async getItemsByIndexes(groupIndex?, serieIndex?, itemIndex?): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getItemsByIndexes(groupIndex, serieIndex, itemIndex);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getItemsByIndexesSync(groupIndex?, serieIndex?, itemIndex?): any {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getItemsByIndexes(groupIndex, serieIndex, itemIndex);\n        }\n        return null;\n    }\n\n\t/** @description Retrieves an array containing the indexes of all currently hidden series within the dataset. Each index corresponds to a series that is not visible in the chart or visualization. \n\t* @returns {{ groupIndex: number, serieIndex: number, itemIndex: number }[]}\n  */\n\tpublic async getHidden(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getHidden();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getHiddenSync(): { groupIndex: number, serieIndex: number, itemIndex: number }[] {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getHidden();\n        }\n        return null;\n    }\n\n\t/** @description Retrieves the currently selected items from the collection, returning them as an array. If no items are selected, an empty array is returned. \n\t* @returns {any[]}\n  */\n\tpublic async getSelection(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getSelection();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getSelectionSync(): any[] {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getSelection();\n        }\n        return null;\n    }\n\n\t/** @description Retrieves the displayed values of the valueAxis labels after they have been processed and rendered, reflecting any formatting, transformations, or customizations applied during chart rendering. \n\t* @returns {any}\n  */\n\tpublic async getValueAxisLabels(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getValueAxisLabels();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getValueAxisLabelsSync(): any {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getValueAxisLabels();\n        }\n        return null;\n    }\n\n\t/** @description Retrieves the fully rendered and formatted values of the xAxis labels as they appear on the chart, including any applied styles, formatting, or transformations. \n\t* @returns {any}\n  */\n\tpublic async getXAxisLabels(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getXAxisLabels();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getXAxisLabelsSync(): any {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getXAxisLabels();\n        }\n        return null;\n    }\n\n\t/** @description Retrieves the displayed text values of the zAxis labels as they appear on the chart, including any formatting or transformations applied during rendering. \n\t* @returns {any}\n  */\n\tpublic async getZAxisLabels(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getZAxisLabels();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\tpublic getZAxisLabelsSync(): any {\n        if (this.nativeElement.isRendered) {\n \t       return this.nativeElement.getZAxisLabels();\n        }\n        return null;\n    }\n\n\t/** @description Conceals all items within a specified chart group, making them invisible in the chart display. This action does not delete the items; it simply hides them from view while retaining their data and configuration. \n\t* @param {number} groupIndex. Series group index.\n\t*/\n    public hideGroup(groupIndex: number): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.hideGroup(groupIndex);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.hideGroup(groupIndex);\n            });\n        }\n    }\n\n\t/** @description Hides a specific chart item from view, making it invisible in the rendered chart without deleting the underlying data or configuration. This action can be used to temporarily remove a chart element such as a data series, bar, line, or point from display, while preserving its state for later use or re-display. \n\t* @param {number} groupIndex. Series group index.\n\t* @param {number} serieIndex. Series index.\n\t* @param {number} itemIndex?. Item (data point) index.\n\t*/\n    public hideItem(groupIndex: number, serieIndex: number, itemIndex?: number): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.hideItem(groupIndex, serieIndex, itemIndex);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.hideItem(groupIndex, serieIndex, itemIndex);\n            });\n        }\n    }\n\n\t/** @description Hides all data points belonging to a specific chart series from view, making the entire series invisible on the chart while preserving its data in the underlying structure. \n\t* @param {number} groupIndex. Series group index.\n\t* @param {number} serieIndex. Series index.\n\t*/\n    public hideSerie(groupIndex: number, serieIndex: number): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.hideSerie(groupIndex, serieIndex);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.hideSerie(groupIndex, serieIndex);\n            });\n        }\n    }\n\n\t/** @description Automatically updates and redraws the chart element to reflect the latest changes whenever its properties or underlying data are modified. This ensures that the displayed chart remains accurate and up-to-date following any updates. \n\t*/\n    public refresh(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.refresh();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.refresh();\n            });\n        }\n    }\n\n\t/** @description Removes a specified color scheme from the collection. If the color scheme with the given identifier does not exist, this method performs no action and does not raise an error. \n\t* @param {string} schemeName. The name of the custom color scheme.\n\t*/\n    public removeColorScheme(schemeName: string): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.removeColorScheme(schemeName);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.removeColorScheme(schemeName);\n            });\n        }\n    }\n\n\t/** @description Exports the chart’s current visual content as a JPEG image file, enabling users to save or share the chart in a widely supported image format. \n\t* @param {string} fileName?. File name.\n\t* @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file.\n\t* @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file.\n\t*/\n    public saveAsJPEG(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.saveAsJPEG(fileName, includeLegend, includeCaption);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.saveAsJPEG(fileName, in