export interface ThreeDChartProperties {
  /**
   * 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.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * 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.
   * Default value: 1
   */
  animationSpeed?: number;
  /**
   * 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.
   * Default value: false
   */
  autoRotate?: boolean;
  /**
   * 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.
   * Default value: 1
   */
  autoRotateSpeed?: number;
  /**
   * 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.
   * Default value: #ffffff
   */
  backgroundColor?: string | null;
  /**
   * 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"]'.
   * Default value: []
   */
  backgroundGradient?: any[];
  /**
   * 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.
   * Default value: ""
   */
  backgroundImage?: string;
  /**
   * 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.
   * Default value: []
   */
  backgroundTexture?: any[];
  /**
   * 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 }'.
   * Default value: [object Object]
   */
  cameraPosition?: ThreeDChartCameraPosition;
  /**
   * 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.
   * Default value: 1
   */
  cameraZoom?: number;
  /**
   * 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.
   * Default value: "Caption"
   */
  caption?: string;
  /**
   * 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.
   * Default value: scheme01
   */
  colorScheme?: ThreeDChartColorScheme | string;
  /**
   * Configures the settings for the chart's interactive controls, such as filters, sliders, and buttons, allowing customization of their appearance and behavior.
   * Default value: [object Object]
   */
  controlsSettings?: any;
  /**
   * 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.
   * Default value: []
   */
  customModels?: any[];
  /**
   * 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.
   * Default value: 
   */
  dataSource?: any[];
  /**
   * 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.
   * Default value: "Description"
   */
  description?: string;
  /**
   * 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.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * 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.
   * Default value: true
   */
  enableControlsToolbar?: boolean;
  /**
   * 
   * Default value: reset-camera,zoom-in,zoom-out,save-image,camera-control
   */
  controlsToolbarItems?: any;
  /**
   * Configures the appearance and behavior of the chart’s grid, including properties such as visibility, line style, color, spacing, and axis alignment.
   * Default value: [object Object]
   */
  gridOptions?: any;
  /**
   * 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.
   * Default value: auto
   */
  legendIndex?: ThreeDChartLegendIndex | string;
  /**
   * 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.
   * Default value: [object Object]
   */
  legendLayout?: any;
  /**
   * 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).
   * Default value: "#ffffff"
   */
  lightColor?: string;
  /**
   * 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.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * 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.
   * Default value: "en"
   */
  locale?: string;
  /**
   * 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.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * 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.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection altogether.
   * Default value: multiple
   */
  selectionMode?: ThreeDChartSelectionMode | string;
  /**
   * 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.
   * Default value: 
   */
  seriesGroups?: ThreeDChartSeriesGroup[];
  /**
   * 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.
   * Default value: false
   */
  showConnectionLines?: boolean;
  /**
   * 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.
   * Default value: true
   */
  showLegend?: boolean;
  /**
   * 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.
   * Default value: false
   */
  showLegendTable?: boolean;
  /**
   * 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.
   * Default value: true
   */
  showToolTips?: boolean;
  /**
   * 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.
   * Default value: [object Object]
   */
  titlePadding?: ThreeDChartPadding;
  /**
   * Callback function that allows users to customize the formatting of tooltip text. This function receives relevant data and should return a string or HTML representing the tooltip content to be displayed.
   * Default value: null
   */
  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * 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.
   * Default value: [object Object]
   */
  toolTipFormatSettings?: ThreeDChartFormatSettings;
  /**
   * 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.
   * Default value: null
   */
  toolTipLineColor?: string | null;
  /**
   * 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.
   * Default value: [object Object]
   */
  valueAxis?: ThreeDChartValueAxis;
  /**
   * 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.
   * Default value: [object Object]
   */
  xAxis?: ThreeDChartXAxis;
  /**
   * 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.
   * Default value: [object Object]
   */
  zAxis?: ThreeDChartZAxis;
}
/**
 3D Chart is a feature-complete interactive WebGL 3D graph library that answers the data visualization needs of any modern web app.
*/
export interface ThreeDChart extends BaseElement, ThreeDChartProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(itemIndex, serieIndex, groupIndex)
   *  itemIndex - The item index of the item.
   *  serieIndex - The serie index of the item.
   *  groupIndex - The group index of the item.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(itemIndex, serieIndex, groupIndex)
   *  itemIndex - The item index of the item.
   *  serieIndex - The serie index of the item.
   *  groupIndex - The group index of the item.
   */
  onShow?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(itemIndex, serieIndex, groupIndex)
   *  itemIndex - The item index of the item.
   *  serieIndex - The serie index of the item.
   *  groupIndex - The group index of the item.
   */
  onHide?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(itemIndex, serieIndex, groupIndex)
   *  itemIndex - The item index of the item.
   *  serieIndex - The serie index of the item.
   *  groupIndex - The group index of the item.
   */
  onSelect?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(itemIndex, serieIndex, groupIndex)
   *  itemIndex - The item index of the item.
   *  serieIndex - The serie index of the item.
   *  groupIndex - The group index of the item.
   */
  onUnselect?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(minValue, maxValue)
   *  minValue - The start value of the range selector.
   *  maxValue - The end value of the range selector.
   */
  onRangeSelectionChanged?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event. Custom data event was created with: ev.detail(minValue, maxValue, oldMinValue, oldMaxValue)
   *  minValue - The start value of the range selector.
   *  maxValue - The end value of the range selector.
   *  oldMinValue - The previous start value of the range selector.
   *  oldMaxValue - The previous end value of the range selector.
   */
  onRangeSelectionChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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."
	* @param event. The custom event.    */
  onRefreshBegin?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event.    */
  onRefreshEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event.    */
  onResizeBegin?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
	* @param event. The custom event.    */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * 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.
   * @param {string} schemeName. The name of the custom color scheme.
   * @param {any[]} colorsArray. An array of color values.
   */
  addColorScheme(schemeName: string, colorsArray: any[]): void;
  /**
   * 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.
   */
  beginUpdate(): void;
  /**
   * 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.
   * @param {boolean} refresh?. If set to true, the chart will complete a full refresh.
   */
  endUpdate(refresh?: boolean): void;
  /**
   * 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.
   * @param {string} schemeName. The name of the color scheme.
   * @returns {any[]}
   */
  getColorScheme(schemeName: string): any[];
  /**
   * Retrieves the item located at the specified index or indices within the collection. If multiple indexes are provided, the method accesses nested items accordingly.
   * @param {number | null} groupIndex?. Series group index.
   * @param {number | null} serieIndex?. Series index.
   * @param {number | null} itemIndex?. Item (data point) index.
   * @returns {any}
   */
  getItemByIndexes(groupIndex?: number | null, serieIndex?: number | null, itemIndex?: number | null): any;
  /**
   * 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.
   * @param {number | null} groupIndex?. Series group index.
   * @param {number | null} serieIndex?. Series index.
   * @param {number | null} itemIndex?. Item (data point) index.
   * @returns {any}
   */
  getItemsByIndexes(groupIndex?: number | null, serieIndex?: number | null, itemIndex?: number | null): any;
  /**
   * 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.
   * @returns {{ groupIndex: number, serieIndex: number, itemIndex: number }[]}
   */
  getHidden(): { groupIndex: number, serieIndex: number, itemIndex: number }[];
  /**
   * Retrieves the currently selected items from the collection, returning them as an array. If no items are selected, an empty array is returned.
   * @returns {any[]}
   */
  getSelection(): any[];
  /**
   * 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.
   * @returns {any}
   */
  getValueAxisLabels(): any;
  /**
   * Retrieves the fully rendered and formatted values of the xAxis labels as they appear on the chart, including any applied styles, formatting, or transformations.
   * @returns {any}
   */
  getXAxisLabels(): any;
  /**
   * Retrieves the displayed text values of the zAxis labels as they appear on the chart, including any formatting or transformations applied during rendering.
   * @returns {any}
   */
  getZAxisLabels(): any;
  /**
   * 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.
   * @param {number} groupIndex. Series group index.
   */
  hideGroup(groupIndex: number): void;
  /**
   * 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.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex?. Item (data point) index.
   */
  hideItem(groupIndex: number, serieIndex: number, itemIndex?: number): void;
  /**
   * 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.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   */
  hideSerie(groupIndex: number, serieIndex: number): void;
  /**
   * 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.
   */
  refresh(): void;
  /**
   * 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.
   * @param {string} schemeName. The name of the custom color scheme.
   */
  removeColorScheme(schemeName: string): void;
  /**
   * 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.
   * @param {string} fileName?. File name.
   * @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file.
   * @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file.
   */
  saveAsJPEG(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void;
  /**
   * Exports the current chart as a PNG image file, capturing all visible elements and formatting. This allows users to download and share the chart as a high-quality raster image suitable for presentations, reports, or further editing.
   * @param {string} fileName?. File name.
   * @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file.
   * @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file.
   */
  saveAsPNG(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void;
  /**
   * Exports the current chart content as a PDF file, allowing users to easily save or share a high-quality, print-ready version of the chart. This function preserves the chart's visual elements, layout, and data in the resulting PDF document.
   * @param {string} fileName?. File name.
   * @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file.
   * @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file.
   */
  saveAsPDF(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void;
  /**
   * Selects a chart item. If selectionMode is set to 'one', selecting a new item will automatically deselect any previously selected item, ensuring that only one item is selected at a time.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex?. Item (data point) index.
   */
  selectItem(groupIndex: number, serieIndex: number, itemIndex?: number): void;
  /**
   * Displays every item belonging to a specific chart group, providing a comprehensive view of all elements associated with that group.
   * @param {number} groupIndex. Series group index.
   */
  showGroup(groupIndex: number): void;
  /**
   * Displays a single data item within a chart, representing a specific value or data point on the graph for visualization purposes.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex?. Item (data point) index.
   */
  showItem(groupIndex: number, serieIndex: number, itemIndex?: number): void;
  /**
   * Displays all data points contained within a chart series, providing a comprehensive view of each individual value represented in the selected series.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   */
  showSerie(groupIndex: number, serieIndex: number): void;
  /**
   * Restores the camera to its original position as defined during the initial setup or scene initialization. This function reverts any changes made to the camera’s position during runtime, ensuring it returns to the exact coordinates specified at the start.
   */
  setDefaultPosition(): void;
  /**
   * Configures the camera's interaction mode, which determines how mouse actions affect the camera's view. The available modes are:<br/><br/>- 'zoom': Mouse movements control zooming in and out of the scene.<br/>- 'pan': Mouse movements allow the camera to move (pan) horizontally and vertically across the scene.<br/>- 'default': Mouse interactions follow the standard behavior defined for the camera. Selecting a mode alters how users navigate or manipulate the view within the application using their mouse.
   * @param {string} mode. Camera mode.
   */
  setCameraMode(mode: string): void;
  /**
   * Defines the exact coordinates and orientation of the camera within the 3D scene, determining from which viewpoint the scene is rendered.
   * @param {number} x. X coordinate.
   * @param {number} y. Y coordinate.
   * @param {number} z. Z coordinate.
   * @param {boolean} animation?. Animation Enabled
   */
  setCameraPosition(x: number, y: number, z: number, animation?: boolean): void;
  /**
   * Adjusts the zoom level of the camera, allowing you to change how close or far the view appears. A higher value increases magnification and provides a closer, more detailed view of the scene, while a lower value zooms out to show a wider area.
   * @param {number} level. Zoom level.
   * @param {boolean} animation?. Animation Enabled
   */
  setCameraZoom(level: number, animation?: boolean): void;
  /**
   * Deselects a previously selected chart item, removing any highlighting or focus state applied to it. This action restores the item to its default, unselected appearance within the chart.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex?. Item (data point) index.
   */
  unselectItem(groupIndex: number, serieIndex: number, itemIndex?: number): void;
  /**
   * Efficiently updates the data values of the existing chart series without triggering a complete redraw of the entire chart. This method is ideal for animating rapidly changing data points, ensuring smooth transitions and improved performance by only modifying the necessary elements within the chart.
   */
  update(): void;
}

/**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 }'. */
export interface ThreeDChartCameraPosition {
  /**
   * Specifies the camera's position along the X axis, which controls its horizontal movement (left and right) within the scene. Adjusting this value moves the camera to the left or right.
   * Default value: 5
   */
  x?: number;
  /**
   * Sets the camera's vertical position along the y-axis. This determines the camera's height or elevation in the scene, controlling its movement up or down relative to the world coordinate system.
   * Default value: 20
   */
  y?: number;
  /**
   * Sets the camera's position along the z-axis, which controls its movement forward or backward in 3D space. Increasing the z value moves the camera further away from the scene, while decreasing it brings the camera closer to the scene.
   * Default value: 55
   */
  z?: number;
}

export interface ThreeDChartSeriesGroup {
  /**
   * Optional color bands dislayed in the chart's plot area.
   * Default value: null
   */
  bands?: ThreeDChartBand[];
  /**
   * Determines the data source of the serie
   * Default value: null
   */
  dataSource?: any;
  /**
   * Sets the Z-axis width of the series group. Can be set as number or percetage of the slot's width.
   * Default value: 2
   */
  depth?: number | string;
  /**
   * Callback function used to format series labels.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Object describing the format settings of series labels.
   * Default value: [object Object]
   */
  formatSettings?: ThreeDChartFormatSettings;
  /**
   * Sets the opacity of the series group.
   * Default value: 1
   */
  opacity?: number;
  /**
   * An array of chart series.
   * Default value: 
   */
  series?: ThreeDChartSeriesGroupSerie[];
  /**
   * When showLabels is set to true, the chart will render pie labels.
   * Default value: true
   */
  showLabels?: boolean;
  /**
   * The start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
   * Default value: 0
   */
  startAngle?: number;
  /**
   * Sets the chart type. jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, jqxChart supports the following series types:'column' - simple column series'stackedcolumn' - stacked column series'stackedcolumn100' - percentage stacked columns'rangecolumn' - floating column between two values'waterfall' - waterfall series'stackedwaterfall' - stacked waterfall series'line' - simple straight lines connecting the value points'stackedline' - stacked lines'stackedline100' - percentage stacked lines'spline' - smooth lines connecting the value points'stackedspline' - smooth stacked lines'stackedspline100' - percentage stacked smooth lines'stepline' - step line'stackedstepline' - stacked step line'stackedstepline100' - percentage stacked step line'area' - area connecting the value points with straight lines'stackedarea' - stacked area with straight lines between the points'stackedarea100' - percentage stacked area with straight lines between the points'rangearea' - floating area between pairs of value points'splinearea' - smooth area connecting the value points'stackedsplinearea' - stacked smooth area connecting the value points'stackedsplinearea100' - percentage stacked smooth area'splinerangearea' - smooth floating area between pairs of value points'steprangearea' - step area between pairs of value points'stackedsplineara' - smooth stacked area'steparea' - step area connecting the value points'stackedsteparea' - step stacked area'stackedsteparea100' - percentage stacked step area'pie' - circular chart divided into sectors, illustrating proportion'donut' - chart divided into circular sectors with different inner and outer radius'scatter' - data is displayed as a collection of points'stackedscatter' - data is displayed as a collection of points and the values are stacked'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked'bubble' - data is displayed as a collection of bubbles'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked'candlestick' - display candlestick series using open, high, low, close data points'ohlc' - display OHLC series using open, high, low, close data points
   * Default value: column
   */
  type?: ThreeDChartType | string;
  /**
   * Sets the Y-axis width of the series group. Used to set the thickness of the line series
   * Default value: 2
   */
  verticalWidth?: number;
  /**
   * Sets the X-axis width of the series group. Can be set as number or percetage of the slot's width.
   * Default value: 2
   */
  width?: number | string;
}

export interface ThreeDChartBand {
  /**
   * Color used to fill the area between the minValue and the maxValue.
   * Default value: null
   */
  color?: string | null;
  /**
   * Band line color.
   * Default value: null
   */
  lineColor?: string | null;
  /**
   * Band line width.
   * Default value: null
   */
  lineWidth?: string | number | null;
  /**
   * End value of the color band.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Start value of the color band.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Fraction indicating the fill opacity.
   * Default value: 1
   */
  opacity?: number;
}

/**Object describing the format settings of series labels. */
export interface ThreeDChartFormatSettings {
  /**
   * Optional date format string. This property is applicable only when displaying Date objects.
   * Default value: null
   */
  dateFormat?: string | null;
  /**
   * Decimal places of numeric values.
   * Default value: null
   */
  decimalPlaces?: number | null;
  /**
   * A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.
   * Default value: null
   */
  decimalSeparator?: string | null;
  /**
   * A boolean value indicating whether to display negative numbers in brackets.
   * Default value: false
   */
  negativeWithBrackets?: boolean;
  /**
   * Text to prepend to the value.
   * Default value: ""
   */
  prefix?: string;
  /**
   * Text to append to the value
   * Default value: ""
   */
  sufix?: string;
  /**
   * A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
   * Default value: null
   */
  thousandsSeparator?: string | null;
}

export interface ThreeDChartSeriesGroupSerie {
  /**
   * A custom function that returns the color of a data point. The function will receive the following parameters: dataValue, itemIndex, serie, group. The implementation of the function can return a single color which will be used as a fillColor and the other colors will be derived or it can return an object containing fillColor, fillColorSelected, etc.
   * Default value: null
   */
  colorFunction?: any;
  /**
   * Name of the field in the data source.
   * Default value: "null"
   */
  dataField?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldClose?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldHigh?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldLow?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldOpen?: string;
  /**
   * Data field used in in range column series as a start data field.
   * Default value: "null"
   */
  dataFieldFrom?: string;
  /**
   * Data field used in range column series as an end data field.
   * Default value: "null"
   */
  dataFieldTo?: string;
  /**
   * Data field used in bubble series.
   * Default value: "null"
   */
  radiusDataField?: string;
  /**
   * Name to display for this serie.
   * Default value: "null"
   */
  displayText?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextClose?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextHigh?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextLow?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextOpen?: string;
  /**
   * Callback function used to format the labels.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Object describing the format settings of the labels.
   * Default value: [object Object]
   */
  formatSettings?: ThreeDChartFormatSettings;
  /**
   * Specifies the summary of the series group.
   * Default value: ""
   */
  summary?: string;
  /**
   * Maximum angle in a pie, donut, polar and spider series.
   * Default value: 360
   */
  endAngle?: number;
  /**
   * Initial angle in pie and donut series.
   * Default value: 0
   */
  initialAngle?: number;
  /**
   * Inner radius of donut series in pixels or percents.
   * Default value: 0
   */
  innerRadius?: number;
  /**
   * Object describing the labels properties of the axis.
   * Default value: undefined
   */
  labels?: ThreeDChartLabels;
  /**
   * Fill color of the legend box. The default value is inherited from the serie's color.
   * Default value: null
   */
  legendFillColor?: string | null;
  /**
   * Legend data formatting function for the values in the serie.
   * Default value: null
   */
  legendFormatFunction?: any;
  /**
   * Legend data formatting settings for the values in the serie.
   * Default value: [object Object]
   */
  legendFormatSettings?: ThreeDChartFormatSettings;
  /**
   * Line color of the legend box. The default value is inherited from the serie's color.
   * Default value: null
   */
  legendLineColor?: string | null;
  /**
   * Line color for the serie.
   * Default value: null
   */
  lineColor?: string | null;
  /**
   * Line color for the serie when selected.
   * Default value: null
   */
  lineColorSelected?: string | null;
  /**
   * Line color for the marker symbols in serie.
   * Default value: null
   */
  lineColorSymbol?: string | null;
  /**
   * Determines the line tickness of the items in this serie.
   * Default value: null
   */
  lineWidth?: string | null | number;
  /**
   * Determines the line tickness of the items in this serie when selected.
   * Default value: null
   */
  lineWidthSelected?: string | null | number;
  /**
   * Min radius of bubble series in pixels or percents.
   * Default value: null
   */
  minRadius?: string | null | number;
  /**
   * Max radius of bubble series in pixels or percents.
   * Default value: null
   */
  maxRadius?: string | null | number;
  /**
   * Determines the opacity of the items in this serie.
   * Default value: 1
   */
  opacity?: number;
  /**
   * Outer radius of pie and donut series in pixels or percents.
   * Default value: null
   */
  radius?: number | null;
  /**
   * Radius change on selection of pie and donut series in pixels or percents.
   * Default value: null
   */
  selectedRadiusChange?: number | null;
  /**
   * Minimum angle in a pie, donut, polar and spider series.
   * Default value: 0
   */
  startAngle?: number;
  /**
   * Determines the size of the symbol element.
   * Default value: null
   */
  symbolSize?: number;
  /**
   * Determines the size of the symbol element. This property is applicable to line and area series only.
   * Default value: null
   */
  symbolSizeSelected?: number;
  /**
   * Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only.
   * Default value: none
   */
  symbolType?: ThreeDChartSymbolType | string;
  /**
   * Determines the tooltip's background.
   * Default value: null
   */
  toolTipBackground?: string | null;
  /**
   * Determines the tooltip's CSS class name.
   * Default value: null
   */
  toolTipClass?: string | null;
  /**
   * Tooltip data formatting function for the values in the serie.
   * Default value: null
   */
  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Tooltip data formatting settings for the values in the serie.
   * Default value: [object Object]
   */
  toolTipFormatSettings?: ThreeDChartFormatSettings;
  /**
   * Determines the tooltip's border lines color.
   * Default value: null
   */
  toolTipLineColor?: string | null;
  /**
   * Determines whether to use color gradients.
   * Default value: false
   */
  useGradientColors?: boolean;
}

/**Object describing the labels properties of the axis. */
export interface ThreeDChartLabels {
  /**
   * Text rotation angle.
   * Default value: 0
   */
  angle?: number;
  /**
   * Callback function used to format the labels.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Object describing the format settings of the labels.
   * Default value: [object Object]
   */
  formatSettings?: ThreeDChartFormatSettings;
  /**
   * Labels offset.
   * Default value: [object Object]
   */
  offset?: ThreeDChartOffset;
  /**
   * Radius of the labels in pie/donut series.
   * Default value: null
   */
  radius?: number | null;
  /**
   * Interval steps between label placements (multiples of the axis unit interval).
   * Default value: null
   */
  step?: number | null;
  /**
   * Sets the interval between the labels.
   * Default value: null
   */
  unitInterval?: number;
  /**
   * Possible values: true, false, 'custom'.Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
   * Default value: true
   */
  visible?: boolean | string;
}

/**Labels offset. */
export interface ThreeDChartOffset {
  /**
   * Horizontal offset.
   * Default value: 0
   */
  x?: number | null;
  /**
   * Vertical offset.
   * Default value: 0
   */
  y?: number | null;
  /**
   * Horizontal offset on Z-axis.
   * Default value: 0
   */
  z?: number | null;
}

/**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. */
export interface ThreeDChartPadding {
  /**
   * "Specifies the amount of padding applied to the bottom edge of an element, creating space between the element's content and its bottom border."
   * Default value: 10
   */
  bottom?: number;
  /**
   * Specifies the amount of space added to the left side of an element’s content, creating padding between the content and the element’s left border.
   * Default value: 5
   */
  left?: number;
  /**
   * Adds padding to the right side of an element, creating extra space between the element’s content and its right border.
   * Default value: 5
   */
  right?: number;
  /**
   * Sets the amount of padding space applied to the top of an element, creating vertical space between the element's top edge and its content. Accepts values in units such as pixels (px), ems (em), percentages (%), etc. This property is useful for adjusting layout and improving visual separation within the element.
   * Default value: 5
   */
  top?: number;
}

/**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. */
export interface ThreeDChartValueAxis {
  /**
   * Defines the starting reference point (baseline) from which the axis values are measured. This value determines where the axis begins, affecting how data is displayed in relation to this baseline. For example, setting a baseline to zero ensures that the axis starts at zero, which can be important for accurately representing data in charts and graphs.
   * Default value: 0
   */
  baselineValue?: any;
  /**
   * Specifies the label text that appears alongside the axis, providing context or a title for the axis values in the chart or graph.
   * Default value: null
   */
  displayText?: string | null;
  /**
   * A user-defined function that customizes how values are formatted and displayed along the chart axis. This function allows you to control the appearance of axis labels—for example, by adding units, adjusting decimal places, or implementing locale-specific number formatting.
   * Default value: null
   */
  formatFunction?: {(value?: any): string};
  /**
   * Defines configuration options for formatting how values appear along the axis, including number formats, date and time representations, currency symbols, decimal precision, or custom formatting patterns. These settings determine the visual presentation and readability of axis labels on charts or graphs.
   * Default value: [object Object]
   */
  formatSettings?: ThreeDChartFormatSettings;
  /**
   * An object that defines the properties and appearance of the grid lines associated with the valueAxis. This includes settings such as line color, thickness, dash style, visibility, and spacing, allowing customization of how the grid lines are rendered on the value axis of the chart.
   * Default value: [object Object]
   */
  gridLines?: ThreeDChartLines;
  /**
   * An object that defines the properties and configuration options for axis labels, including settings such as text content, font style, color, alignment, rotation, and formatting.
   * Default value: [object Object]
   */
  labels?: ThreeDChartLabels;
  /**
   * Specifies whether the data should be displayed using a logarithmic scale instead of a linear scale. When enabled, values are mapped logarithmically, which is useful for visualizing data that spans several orders of magnitude.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Specifies the base value for the logarithmic scale. Determines the mathematical base (e.g., 10 for log₁₀, 2 for log₂) used to calculate and display values along the axis when a logarithmic (non-linear) scale is applied. Adjusting this affects how data is distributed and visualized on the scale.
   * Default value: 10
   */
  logarithmicScaleBase?: number;
  /**
   * Specifies the highest numerical value that can be displayed on the valueAxis. Any data points exceeding this value will be capped at the specified maximum, effectively defining the upper boundary of the axis range.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Defines the lowest numerical value displayed on the valueAxis. This property determines the starting point of the axis scale, ensuring that no values below this minimum are shown in the chart or graph.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Specifies the time or distance gap separating each unit. This determines how much space or delay exists between consecutive units, allowing you to control the spacing or frequency at which units are displayed, executed, or processed.
   * Default value: null
   */
  unitInterval?: number | null;
  /**
   * Controls the visibility of the value axis on the chart. When enabled, the value axis is displayed; when disabled, it is hidden.
   * Default value: true
   */
  visible?: boolean;
}

/**An object that defines the properties and appearance of the grid lines associated with the valueAxis. This includes settings such as line color, thickness, dash style, visibility, and spacing, allowing customization of how the grid lines are rendered on the value axis of the chart. */
export interface ThreeDChartLines {
  /**
   * Specifies the color used to render the grid lines. Accepts any valid CSS color value (e.g., hex code, RGB, or color name).
   * Default value: ""
   */
  color?: string;
  /**
   * Specifies the spacing between consecutive grid lines, expressed as multiples of the axis unit interval. For example, a value of 2 places a grid line every 2 units along the axis instead of every single unit. This controls the density and visibility of grid lines on the chart or graph.
   * Default value: null
   */
  step?: number | null;
  /**
   * Possible values: true, false, 'custom'.  Controls the visibility of grid lines on the chart:      true: Displays all grid lines.    false: Hides all grid lines.    'custom': Only displays grid lines at specific positions or offsets defined in the gridLines.custom array.    When set to 'custom', be sure to provide desired values in the gridLines.custom array for them to be rendered.
   * Default value: true
   */
  visible?: boolean | string;
}

/**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. */
export interface ThreeDChartXAxis {
  /**
   * Indicates the specific field or property in the data source from which the value should be retrieved or to which data should be mapped. This allows the application to access and utilize the corresponding data for processing, display, or storage purposes.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Specifies an optional custom label to be displayed on the xAxis. If provided, this text will override the default xAxis label.
   * Default value: null
   */
  displayText?: string | null;
  /**
   * Determines if the values should be presented in the opposite sequence from their original order. When set to true, the values are displayed from last to first instead of the default first to last arrangement.
   * Default value: false
   */
  flip?: boolean;
  /**
   * A user-defined function that specifies how values are formatted and displayed along the axis, allowing customization of labels such as number formatting, prefixes/suffixes, or date formatting.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Settings that control how values are formatted and displayed along the axis, including options such as number formatting, date and time representation, decimal precision, and currency symbols.
   * Default value: [object Object]
   */
  formatSettings?: ThreeDChartFormatSettings;
  /**
   * An object that defines the properties and styling options for the grid lines displayed along the x-axis, including attributes such as color, width, dash pattern, and visibility.
   * Default value: [object Object]
   */
  gridLines?: ThreeDChartLines;
  /**
   * An object that defines the properties and configuration options for the axis labels, such as their text, font style, color, rotation, alignment, and formatting.
   * Default value: [object Object]
   */
  labels?: ThreeDChartLabels;
  /**
   * Specifies whether the scale should be displayed using a logarithmic axis instead of a linear axis. A true value enables logarithmic scaling, which is useful for visualizing data that spans several orders of magnitude. A false value uses the default linear scale.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Defines the numerical base used for the logarithmic scale (e.g., base 10 for common logarithms or base 2 for binary logarithms). Determines how values are spaced and displayed along the logarithmic axis.
   * Default value: 10
   */
  logarithmicScaleBase?: number;
  /**
   * Defines the upper limit for the x-axis, restricting the maximum data value that can be displayed. Any values exceeding this limit will not be shown on the x-axis.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Specifies the lowest numeric or categorical value that will be displayed on the x-axis. Data points with values below this threshold will not be shown on the chart. This setting is useful for customizing the visible range of the x-axis and focusing on a specific subset of the data.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * "Specifies the configuration for a range selector component displayed along the xAxis. The range selector enables users to interactively select and zoom into specific data ranges on the chart. This selector is implemented as an instance of smart-chart, allowing for consistent theming and behavior with the main charting components."
   * Default value: [object Object]
   */
  rangeSelector?: ThreeDChartRangeSelector;
  /**
   * Specifies the axis type, determining how data is displayed along the axis. The available options are:  'auto' &ndash; Automatically analyzes the dataset and selects the most suitable axis type among 'basic', 'linear', or 'date' for optimal data representation.  'date' &ndash; Formats the axis specifically for displaying date and time values, ensuring proper chronological ordering and labeling of date-based data.  'basic' &ndash; Presents all data points in their sequential order, without applying any scaling or special formatting. Ideal for categorical or non-numeric data.  'linear' &ndash; Arranges the axis based on the numerical values provided in the xAxis data field, using a continuous linear scale suitable for numeric data.
   * Default value: auto
   */
  type?: ThreeDChartXAxisType | string;
  /**
   * Specifies the amount of time or distance between each unit in the sequence, determining how far apart or how frequently the units are spaced. This value controls the regular interval that separates individual units within the set.
   * Default value: null
   */
  unitInterval?: number | null;
  /**
   * Controls the visibility of the x-axis on the chart. When set to true, the x-axis will be displayed; when set to false, the x-axis will be hidden from view.
   * Default value: true
   */
  visible?: boolean;
}

/**<br/><br/>"Specifies the configuration for a range selector component displayed along the xAxis. The range selector enables users to interactively select and zoom into specific data ranges on the chart. This selector is implemented as an instance of ${namespace.toLowerCase()}-chart, allowing for consistent theming and behavior with the main charting components." */
export interface ThreeDChartRangeSelector {
  /**
   * Defines the color used for the range selector chart. If a value is not specified (i.e., set to null), the range selector chart will automatically inherit and use the same color as the main chart. This property allows customization of the range selector chart's appearance to match or differentiate it from the main chart.
   * Default value: null
   */
  color?: string | null;
  /**
   * Callback function that receives a value as input and returns the value formatted for display. This function allows you to customize how values are presented (e.g., date formatting, adding currency symbols, controlling decimal places) before they are rendered in the UI.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Chart Format SettingsConfigure and customize the appearance and formatting options of your chart, including axis styles, gridlines, labels, colors, legend placement, and other visual elements to enhance data presentation and readability.
   * Default value: null
   */
  formatSettings?: any;
  /**
   * An object that defines the properties and configuration options for the labels displayed along the axis, such as font size, color, rotation, alignment, and formatting. This allows for customization of the appearance and behavior of axis labels.
   * Default value: [object Object]
   */
  labels?: ThreeDChartLabels;
  /**
   * Controls the transparency level of the range selector chart by setting its opacity value. A lower value (closer to 0) makes the chart more transparent, while a higher value (up to 1) makes it more opaque. This property allows you to adjust the visibility of the range selector chart within the overall visualization.
   * Default value: 1
   */
  opacity?: number;
  /**
   * Specifies the chart type to be used for the range selector component, determining how the selected data range will be visually represented (e.g., as a line, area, or bar chart) within the range selector interface.
   * Default value: area
   */
  serieType?: ThreeDChartRangeSelectorSerieType | string;
  /**
   * Controls the visibility of the range selector component, allowing you to display or hide the range selection interface within the application.
   * Default value: false
   */
  visible?: boolean;
}

/**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. */
export interface ThreeDChartZAxis {
  /**
   * Specifies the exact field within the data source from which data is retrieved or referenced. This enables the application to access and utilize specific information—such as a property or column—in the data structure.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Specifies optional custom display text for the zAxis label. If provided, this text will be shown instead of the default zAxis label.
   * Default value: null
   */
  displayText?: string | null;
  /**
   * Determines if the values are presented in the opposite sequence, displaying the items from last to first instead of the default first-to-last order.
   * Default value: false
   */
  flip?: boolean;
  /**
   * A user-defined function that customizes how values are displayed along the chart axis, allowing you to modify the formatting, style, or content of axis labels before they are rendered.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Defines the configuration options for formatting how values are displayed along the axis, including number formatting, units, date/time formats, and other visual representation settings.
   * Default value: [object Object]
   */
  formatSettings?: ThreeDChartFormatSettings;
  /**
   * An object that defines the visual and functional properties of the grid lines shown along the z-axis. This includes customizable attributes such as line color, width, style, visibility, and opacity, allowing detailed control over the appearance and behavior of z-axis grid lines in the chart or graph.
   * Default value: [object Object]
   */
  gridLines?: ThreeDChartLines;
  /**
   * An object that defines the properties for the axis labels, including their text content, font style, size, color, alignment, rotation, and other visual or behavioral settings related to the display of labels along the axis.
   * Default value: [object Object]
   */
  labels?: ThreeDChartLabels;
  /**
   * Specifies whether a logarithmic scale should be applied to the data visualization, enabling more effective representation of values that span several orders of magnitude. When set to true, data values are plotted on a logarithmic axis rather than a linear one.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Specifies the base value for the logarithmic scale. This determines the factor by which each successive tick on the axis increases. For example, a base of 10 produces a scale where each step represents a tenfold increase (10, 100, 1000, etc.), while a base of 2 results in a doubling at each step (2, 4, 8, 16, etc.).
   * Default value: 10
   */
  logarithmicScaleBase?: number;
  /**
   * Specifies the highest allowable value for the zAxis, effectively setting the upper limit that data points or chart elements can reach along the z-axis dimension. This is useful for constraining the range of the zAxis in visualizations such as 3D charts or scatter plots.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Specifies the lowest allowed value for the zAxis, determining the minimum boundary for data values displayed along the z-axis. Values below this limit will not be rendered or will be clipped at this threshold.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Specifies the amount of time or distance between each unit in a series, determining how frequently or sparsely the units are placed. For example, in a time-based sequence, this would control the number of seconds or minutes between each event; in a spatial layout, it would define the spacing between elements.
   * Default value: null
   */
  unitInterval?: number | null;
  /**
   * Controls the visibility of the z-axis in the chart. When enabled, the z-axis will be displayed; when disabled, the z-axis will be hidden. This setting is typically used for 3D charts or visualizations that support an additional z-axis dimension.
   * Default value: true
   */
  visible?: boolean;
}

declare global {
    interface Document {
        createElement(tagName: "smart-3d-chart"): ThreeDChart;
        querySelector(selectors: "smart-3d-chart"): ThreeDChart | null;
        querySelectorAll(selectors: "smart-3d-chart"): NodeListOf<ThreeDChart>;
        getElementsByTagName(qualifiedName: "smart-3d-chart"): HTMLCollectionOf<ThreeDChart>;
        getElementsByName(elementName: "smart-3d-chart"): NodeListOf<ThreeDChart>;
    }
}

/**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. */
export declare type Animation = 'none' | 'simple' | 'advanced';
/**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. */
export declare type ThreeDChartColorScheme = 'scheme01' | 'scheme02' | 'scheme03' | 'scheme04' | 'scheme05' | 'scheme06' | 'scheme07' | 'scheme08' | 'scheme09' | 'scheme10' | 'scheme11' | 'scheme12' | 'scheme13' | 'scheme14' | 'scheme15' | 'scheme16' | 'scheme17' | 'scheme18' | 'scheme19' | 'scheme20' | 'scheme21' | 'scheme22' | 'scheme23' | 'scheme24' | 'scheme25' | 'scheme26' | 'scheme27' | 'scheme28' | 'scheme29' | 'scheme30' | 'scheme31' | 'scheme32' | 'custom';
/**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. */
export declare type ThreeDChartLegendIndex = 'auto' | 'serie' | 'group';
/**Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection altogether. */
export declare type ThreeDChartSelectionMode = 'none' | 'single' | 'multiple';
/**Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only. */
export declare type ThreeDChartSymbolType = 'none' | 'circle' | 'square' | 'diamond' | 'triangle_up' | 'triangle_down' | 'triangle_left' | 'triangle_right';
/**Sets the chart type. jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, jqxChart supports the following series types:'column' - simple column series
'stackedcolumn' - stacked column series
'stackedcolumn100' - percentage stacked columns
'rangecolumn' - floating column between two values
'waterfall' - waterfall series
'stackedwaterfall' - stacked waterfall series
'line' - simple straight lines connecting the value points
'stackedline' - stacked lines
'stackedline100' - percentage stacked lines
'spline' - smooth lines connecting the value points
'stackedspline' - smooth stacked lines
'stackedspline100' - percentage stacked smooth lines
'stepline' - step line
'stackedstepline' - stacked step line
'stackedstepline100' - percentage stacked step line
'area' - area connecting the value points with straight lines
'stackedarea' - stacked area with straight lines between the points
'stackedarea100' - percentage stacked area with straight lines between the points
'rangearea' - floating area between pairs of value points
'splinearea' - smooth area connecting the value points
'stackedsplinearea' - stacked smooth area connecting the value points
'stackedsplinearea100' - percentage stacked smooth area
'splinerangearea' - smooth floating area between pairs of value points
'steprangearea' - step area between pairs of value points
'stackedsplineara' - smooth stacked area
'steparea' - step area connecting the value points
'stackedsteparea' - step stacked area
'stackedsteparea100' - percentage stacked step area
'pie' - circular chart divided into sectors, illustrating proportion
'donut' - chart divided into circular sectors with different inner and outer radius
'scatter' - data is displayed as a collection of points
'stackedscatter' - data is displayed as a collection of points and the values are stacked
'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked
'bubble' - data is displayed as a collection of bubbles
'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked
'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked
'candlestick' - display candlestick series using open, high, low, close data points
'ohlc' - display OHLC series using open, high, low, close data points
 */
export declare type ThreeDChartType = 'column' | 'stackedcolumn' | 'stackedcolumn100' | 'rangecolumn' | 'waterfall' | 'stackedwaterfall' | 'line' | 'stackedline' | 'stackedline100' | 'spline' | 'stackedspline' | 'stackedspline100' | 'stepline' | 'stackedstepline' | 'stackedstepline100' | 'area' | 'stackedarea' | 'stackedarea100' | 'rangearea' | 'splinearea' | 'stackedsplinearea' | 'stackedsplinearea100' | 'splinerangearea' | 'steprangearea' | 'stackedsplineara' | 'steparea' | 'stackedsteparea' | 'stackedsteparea100' | 'pie' | 'donut' | 'scatter' | 'stackedscatter' | 'stackedscatter100' | 'bubble' | 'stackedbubble' | 'stackedbubble100' | 'candlestick' | 'ohlc';
/**Specifies the chart type to be used for the range selector component, determining how the selected data range will be visually represented (e.g., as a line, area, or bar chart) within the range selector interface. */
export declare type ThreeDChartRangeSelectorSerieType = 'line' | 'area';
/**Specifies the axis type, determining how data is displayed along the axis. The available options are:<br/><br/><br/>  'auto' &ndash; Automatically analyzes the dataset and selects the most suitable axis type among 'basic', 'linear', or 'date' for optimal data representation.
<br/>  'date' &ndash; Formats the axis specifically for displaying date and time values, ensuring proper chronological ordering and labeling of date-based data.
<br/>  'basic' &ndash; Presents all data points in their sequential order, without applying any scaling or special formatting. Ideal for categorical or non-numeric data.
<br/>  'linear' &ndash; Arranges the axis based on the numerical values provided in the <code>xAxis</code> data field, using a continuous linear scale suitable for numeric data.
<br/> */
export declare type ThreeDChartXAxisType = 'auto' | 'date' | 'basic' | 'linear';
export interface AccordionProperties {
  /**
   * Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions without animated effects. Setting this property to other supported values enables different animation behaviors.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the data source to be loaded and displayed within the Accordion component. This property defines the collection of items or structured data that populates each section or panel of the Accordion, enabling dynamic rendering of its contents. The data source can typically be provided as an array of objects, JSON data, or via a remote endpoint depending on configuration.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Controls whether the accordion component is enabled or disabled. When set to disabled, all interactive functionality is turned off—users cannot expand, collapse, or interact with any accordion sections. Disabled accordions appear visually inactive to indicate their non-interactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the indexes of currently expanded items. By assigning an array of item indexes to this property, you can programmatically expand those specific items. The maximum number of items that can be expanded at once depends on the value specified in the expandMode property (for example, single or multiple expansion modes). When getting this property, it returns an array of the indexes of all expanded items.
   * Default value: 
   */
  expandedIndexes?: number[];
  /**
   * Sets or retrieves the current expand mode. The expand mode specifies how list or group items behave when expanding or collapsing—such as allowing multiple items to expand simultaneously or restricting expansion to a single item at a time.
   * Default value: singleFitHeight
   */
  expandMode?: AccordionExpandMode | string;
  /**
   * Retrieves or assigns the 'unlockKey' property, which serves as the access credential required to unlock and activate the product's full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., "en", "fr") for the component. This property works together with the messages property to determine which language-specific messages or translations are displayed. Use this to localize your application content based on user preference or locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized message output—such as applying dynamic content, adjusting text structure, or handling language-specific variations—before the messages are delivered to the client application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves an object containing the localized strings used throughout the widget interface. This allows you to define custom translations for various UI elements in different languages. Used together with the locale property to enable localization and internationalization support within the widget.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "accordionItemRequired": "' requires an item from type \"jqx-accordion-item\".",
   *     "indexOutOfBound": "' method.",
   *     "invalidSettings": "' method accepts a string or an object as it's second parameter.",
   *     "noItems": ": No child elements found.",
   *     "overridingProperties": "' property is used by default."
   *   }
   * }
   */
  messages?: any;
  /**
   * Indicates whether the element is read-only. When set to true, the element cannot be modified or interacted with by users; its value is fixed and user input is disabled. If false, the element remains editable and interactive.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Controls whether users can reorder accordion items by dragging and dropping them. When enabled, items within the accordion component can be rearranged interactively; when disabled, the order of items remains fixed.
   * Default value: false
   */
  reorder?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element is aligned to accommodate right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. This property ensures the element’s layout and text direction are properly adjusted to support RTL localization.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including aspects such as colors, fonts, and background.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies whether the element is capable of receiving keyboard focus, allowing users to navigate to it using the keyboard (such as the Tab key) and interact with it through assistive technologies.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Accordion organizes content within collapsable items.
*/
export interface Accordion extends BaseElement, AccordionProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Triggered when an item has completed its collapse animation and is no longer expanded or visible. This event occurs only after the item is fully collapsed, ensuring that any associated transitions or content hiding have finished.
	* @param event. The custom event. Custom data event was created with: ev.detail(content, index, label)
   *  content - The collapsed item's content.
   *  index - The index of the collapsed item.
   *  label - The label of the collapsed item.
   */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires immediately before an item begins its collapse animation, allowing you to perform actions or prevent the collapse from occurring.
	* @param event. The custom event. Custom data event was created with: ev.detail(content, index, label)
   *  content - The item content.
   *  index - The item's index.
   *  label - The item's label.
   */
  onCollapsing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user completes a drag-and-drop action to reorder items, indicating that the new order has been finalized and can be processed (e.g., saved or updated in the UI or backend).
	* @param event. The custom event. Custom data event was created with: ev.detail(position, target, content, index, label)
   *  position - Current top and left coordinates of the dragged item.
   *  target - The dragged item element.
   *  content - The dragged item's content.
   *  index - The dragged item's index.
   *  label - The dragged item's label.
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * Fires when the user initiates a drag-and-drop reorder action, signaling the start of an item being moved within a sortable list or container. This event provides an opportunity to perform setup tasks, such as highlighting the item being dragged or preparing the UI for reordering.
	* @param event. The custom event. Custom data event was created with: ev.detail(position, target, content, index, label)
   *  position - Initial top and left coordinates of the item being dragged.
   *  target - The item element being dragged.
   *  content - The dragged item's content.
   *  index - The dragged item's index.
   *  label - The dragged item's label.
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * Triggered when an item has completed its expansion and is fully visible to the user. This event occurs after any expansion animations or transitions have finished, ensuring that the item's contents are now accessible for interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(position, target, content, index, label)
   *  position - Current top and left coordinates of the expanded item.
   *  target - The expanded item element.
   *  content - The expanded item's content.
   *  index - The expanded item's index.
   *  label - The expanded item's label.
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires immediately before an item begins its expansion process, allowing you to perform actions or modify data right before the expansion occurs. This event provides an opportunity to prevent the expansion or make adjustments as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(content, index, label)
   *  content - The content of the item being expanded.
   *  index - The index of the item being expanded.
   *  label - The label of the item being expanded.
   */
  onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Collapses the item located at the specified index, hiding its associated content or details from view. This action typically updates the user interface to indicate that the item is no longer expanded.
   * @param {number} position. Index of the item to collapse.
   */
  collapse(position: number): void;
  /**
   * Expands the item located at the specified index in the collection, making its detailed content visible or accessible to the user.
   * @param {number} position. Index of the item to expand.
   */
  expand(position: number): void;
  /**
   * Inserts a new item into the array at the specified index, shifting existing elements to the right to accommodate the new entry. If the specified index is out of range, the operation will either append the item to the end or return an error, depending on the implementation.
   * @param {number} index. Index where the new item will be inserted.
   * @param {any} item. Object representing the new item's properties.
   */
  insert(index: number, item: any): void;
  /**
   * Removes the item located at the specified index from the array, shifting subsequent items one position to the left. The array's length is reduced by one, and the removed item is no longer accessible.
   * @param {number} position. Index of the item to remove.
   */
  removeAt(position: number): void;
  /**
   * Replaces the item at the given index in the collection with an updated version, incorporating the specified new property values while preserving any unchanged properties.
   * @param {number} index. Index of the item to update.
   * @param {any} settings. Object containing updated property values for the item.
   */
  update(index: number, settings: any): void;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-accordion"): Accordion;
        querySelector(selectors: "smart-accordion"): Accordion | null;
        querySelectorAll(selectors: "smart-accordion"): NodeListOf<Accordion>;
        getElementsByTagName(qualifiedName: "smart-accordion"): HTMLCollectionOf<Accordion>;
        getElementsByName(elementName: "smart-accordion"): NodeListOf<Accordion>;
    }
}

/**Sets or retrieves the current expand mode. The expand mode specifies how list or group items behave when expanding or collapsing—such as allowing multiple items to expand simultaneously or restricting expansion to a single item at a time. */
export declare type AccordionExpandMode = 'single' | 'singleFitHeight' | 'multiple' | 'toggle' | 'none';
export interface AccordionItemProperties {
  /**
   * Specifies or retrieves the position of the arrow indicator within the header. Accepts values such as 'left', 'right', or 'none'. When set to 'none', the arrow will not be displayed in the header.
   * Default value: left
   */
  arrow?: AccordionItemArrow | string;
  /**
   * Sets or retrieves the content of the item. Use this property to assign new content to the item or to access its current content value.
   * Default value: ''
   */
  content?: string | HTMLElement;
  /**
   * Gets or sets whether the element is in its expanded or collapsed state. When set to true, the element is expanded and its content is visible; when false, the element is collapsed and its content is hidden.
   * Default value: false
   */
  expanded?: boolean;
  /**
   * Gets or sets whether the element currently has input focus. When set to true, the element receives focus; when set to false, the element loses focus. This property reflects the element's current focus state within the user interface.
   * Default value: false
   */
  focused?: boolean;
  /**
   * Sets or retrieves the label of the item. This property allows you to assign a descriptive name to the item or access its current label.
   * Default value: ""
   */
  label?: string;
}
/**
 Single item in an Accordion view.
*/
export interface AccordionItem extends BaseElement, AccordionItemProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the item transitions from an expanded to a collapsed state, typically as a result of user interaction or a programmatic action. Use this event to execute custom logic or update the UI when the item is hidden or minimized.
	* @param event. The custom event.    */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It typically occurs after the expansion animation or transition is complete, indicating that the item is now fully visible. Use this event to perform actions that should only occur once the item has been expanded, such as loading related data or updating the user interface.
	* @param event. The custom event.    */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-accordion-item"): AccordionItem;
        querySelector(selectors: "smart-accordion-item"): AccordionItem | null;
        querySelectorAll(selectors: "smart-accordion-item"): NodeListOf<AccordionItem>;
        getElementsByTagName(qualifiedName: "smart-accordion-item"): HTMLCollectionOf<AccordionItem>;
        getElementsByName(elementName: "smart-accordion-item"): NodeListOf<AccordionItem>;
    }
}

/**Specifies or retrieves the position of the arrow indicator within the header. Accepts values such as 'left', 'right', or 'none'. When set to 'none', the arrow will not be displayed in the header. */
export declare type AccordionItemArrow = 'left' | 'right' | 'none';
export interface ArrayProperties {
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animation effects are disabled; no transitions or animated elements will occur. Use this property to enable, disable, or customize animation behaviors within the application.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Sets or retrieves the indexing mode used by the Array, determining how elements are accessed and referenced (e.g., zero-based, one-based, or custom indexing). This property controls whether the Array's indices start at zero, one, or another defined value, affecting how elements are read and assigned.
   * Default value: LabVIEW
   */
  arrayIndexingMode?: ArrayArrayIndexingMode | string;
  /**
   * A callback function that is triggered whenever the width, height, or disabled properties of the inner element require an update. This function is only used when the type property is set to 'custom'. The callback receives the updated values, allowing you to perform custom handling or side effects based on these property changes.
   * Default value: null
   */
  changeProperty?: any;
  /**
   * Specifies or retrieves the total number of columns currently visible in the Array. When set, this determines how many columns are displayed to the user; when accessed, it returns the current count of visible columns.
   * Default value: 1
   */
  columns?: number;
  /**
   * Defines or retrieves the default value assigned to inner elements when the type property is set to 'custom'. This property allows you to specify or access the initial value that inner elements will use or display when working with custom components.
   * Default value: null
   */
  customWidgetDefaultValue?: any;
  /**
   * Specifies or retrieves the number of dimensions (also known as the rank) of the Array, indicating how many levels of indices are required to access its elements.
   * Default value: 1
   */
  dimensions?: number;
  /**
   * Sets or retrieves the disabled state of the Array, indicating whether the Array is interactive or inactive. When set to true, all user interactions with the Array are prevented. When false, normal operations are enabled.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines or retrieves the height, in pixels, assigned to each element (row) within the Array. This property allows you to specify or access the vertical size of individual rows.
   * Default value: 25
   */
  elementHeight?: number;
  /**
   * A callback function designed for configuring settings on element widgets. When the type property is set to 'custom', this callback must also handle the initialization of the widgets, as they will not be initialized automatically. Use this function to apply custom logic or settings during the creation and setup of your widgets.
   * Default value: null
   */
  elementTemplate?: any;
  /**
   * Specifies or retrieves the width, in pixels, assigned to each element (or column) within the Array. This determines the horizontal space allocated for displaying each column's contents.
   * Default value: 75
   */
  elementWidth?: number;
  /**
   * A callback function invoked to retrieve the current value of an element widget. This function is typically used to access or extract the widget’s state or input data, and can be customized to handle different types of widgets as needed.
   * Default value: null
   */
  getElementValue?: any;
  /**
   * Sets or retrieves the height value for indexer elements. When a value is specified, it updates the height property of the indexers; when accessed without a value, it returns the current height setting for those indexers.
   * Default value: 25
   */
  indexerHeight?: number;
  /**
   * Defines or retrieves the width (in pixels or other CSS units) of indexer elements, allowing you to control or access the display width of these components programmatically.
   * Default value: 50
   */
  indexerWidth?: number;
  /**
   * Gets or sets the unlockKey property, which serves as the authentication key required to access or activate the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., "en", "fr", "es") to be used for translations. This setting works together with the messages property, which contains localized message data for each supported language. Changing the language will determine which set of messages is displayed or accessed.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle localization events or to process localization-related data (such as language changes, translations, or region-specific settings) within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing key-value pairs of user interface text strings that can be localized for different languages. This property works with the locale property to dynamically display the widget's labels, messages, buttons, and other text elements in the selected language. Use this property to provide custom translations and ensure a consistent multilingual experience for users.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "callbackFunctionRequired": "jqx-array: When \"type\" is 'custom', the  callback function has to be implemented."
   *   }
   * }
   */
  messages?: any;
  /**
   * If the element has the "readonly" attribute applied, users are unable to modify its value. However, they can still focus on the element and select its content. Unlike the "disabled" attribute, a readonly element remains functional for copying or submitting data, but it does not allow direct editing by the user.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves the number of rows displayed at one time within the Array, determining how many items are visible to the user without scrolling.
   * Default value: 1
   */
  rows?: number;
  /**
   * A callback function that allows you to programmatically set or update the value of element widgets. This function is typically invoked when the widget's value needs to be changed in response to user interactions or other application logic, enabling dynamic and flexible control over the widget's displayed content.
   * Default value: null
   */
  setElementValue?: any;
  /**
   * Determines whether the horizontal scrollbar is visible. When set to true, the horizontal scrollbar will be displayed if the content overflows horizontally; when set to false, the scrollbar will be hidden, regardless of content overflow. This property can be used to programmatically enable or disable horizontal scrolling.
   * Default value: false
   */
  showHorizontalScrollbar?: boolean;
  /**
   * Sets or retrieves a value that determines whether array indexers (e.g., [0], [1], [2]) are displayed alongside array elements. When enabled, the array index for each item will be shown in the user interface or output, providing clearer identification of array positions.
   * Default value: false
   */
  showIndexDisplay?: boolean;
  /**
   * Controls whether selected elements are visually highlighted. When set, selected elements will display a highlight to indicate their selection status. Can be used to enable or disable this visual feedback.
   * Default value: false
   */
  showSelection?: boolean;
  /**
   * Determines whether the vertical scrollbar is visible. When set, this property controls the display of the vertical scrollbar within the element. When retrieved, it returns the current visibility state of the vertical scrollbar.
   * Default value: false
   */
  showVerticalScrollbar?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the visual appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the component.
   * Default value: ""
   */
  theme?: string;
  /**
   * Configures or retrieves the data type and the specific widget components assigned to each element within the Array. This determines how the array’s values are stored and how individual items are rendered and interacted with in the user interface.
   * Default value: none
   */
  type?: ArrayType | string;
  /**
   * If set to true, the element will be excluded from the page’s tab order and cannot receive focus via keyboard navigation or mouse interaction.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Allows you to retrieve the current value of the array or assign a new value to it. When setting the value, the existing contents of the array will be replaced with the new array provided. When getting the value, it returns the current array contents.
   * Default value: 
   */
  value?: any;
}
/**
 Array is broadly used in Engineering applications and displays a Grid of values.
*/
export interface Array extends BaseElement, ArrayProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a visible row or column is either added to or removed from the data grid. It fires after the row or column becomes visible to the user, enabling developers to perform actions such as updating UI elements, recalculating layout, or synchronizing data in response to changes in the grid’s visible structure."
	* @param event. The custom event.    */
  onArraySizeChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the contents of the Array are modified. Changes can include adding or removing elements, updating existing values, or replacing the entire Array. The event allows you to respond dynamically to any updates made to the Array's data.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a dimension is either added to or removed from the system. It provides a notification that the set of dimensions has changed, allowing you to respond accordingly, such as updating the user interface or reprocessing related data.
	* @param event. The custom event.    */
  onDimensionChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a specific element within the Array. It allows you to execute custom logic in response to the user's selection of an individual Array item. The event provides context about which element was clicked, enabling dynamic interactions based on the selected item.
	* @param event. The custom event.    */
  onElementClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user scrolls the Array component using either the horizontal or vertical scrollbar. It activates in response to any scrollbar movement, allowing you to track or respond to changes in the visible portion of the Array.
	* @param event. The custom event.    */
  onScroll: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever there is a change to either a column’s width or a row’s height within the grid. It fires immediately after the user or an automated process resizes a column or row, allowing you to respond to layout adjustments or update related UI elements accordingly.
	* @param event. The custom event.    */
  onSizeChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Enhances the array by adding a new dimension.<br /> <em>Note:</em> If you need to add multiple dimensions at once, it is best to dynamically configure the <strong>dimensions</strong> property to specify all desired dimensions in a single operation. This approach ensures consistency and optimizes performance when modifying the array's structure.
   */
  addDimension(): void;
  /**
   * Removes any currently selected items or text, resulting in no active selection. This action resets the selection state to empty.
   */
  clearSelection(): void;
  /**
   * Copies the value of a specified array element to the user's clipboard, enabling easy sharing or pasting of the selected data elsewhere.
   * @param {number} Rowvisibleindex. The visible index of the row (y coordinate) of the element.
   * @param {number} Columnvisibleindex. The visible index of the column (x coordinate) of the element.
   */
  copyElementValueToClipboard(Rowvisibleindex: number, Columnvisibleindex: number): void;
  /**
   * Removes a specified column from the <strong>value</strong> array, eliminating all data contained in that column across every row.
   * @param {number} Columnindex. Index of the column to be deleted.
   */
  deleteColumn(Columnindex: number): void;
  /**
   * Removes a specific row from the <strong>value</strong> array, effectively deleting that element and shifting subsequent elements to maintain array order.
   * @param {number} Rowindex. Index of the row to be deleted.
   */
  deleteRow(Rowindex: number): void;
  /**
   * Clears all elements from the <strong>value</strong> array, resulting in an empty array. This operation removes all existing items, leaving the array with a length of zero.
   */
  emptyArray(): void;
  /**
   * Marks the endpoint of a selection range that was initiated using the <strong>startSelection</strong> method. This designation indicates where the selected content ends, completing the area or text chosen by the user.
   * @param {number} Rowboundindex. The bound index of the row (y coordinate) to end the selection to.
   * @param {number} Columnboundindex. The bound index of the column (x coordinate) to end the selection to.
   */
  endSelection(Rowboundindex: number, Columnboundindex: number): void;
  /**
   * Returns the HTML element located at the specified visible row and column coordinates within the Array's rendered grid. The coordinates refer to the zero-based indexes of the currently visible rows and columns, taking into account any scrolling or filtering applied to the Array's display.
   * @param {number} RowVisibleIndex. The visible index of the row (y coordinate) of the element.
   * @param {number} ColumnVisibleIndex. The visible index of the column (x coordinate) of the element.
   * @returns {HTMLElement}
   */
  getElement(RowVisibleIndex: number, ColumnVisibleIndex: number): HTMLElement;
  /**
   * Returns an object containing the width and height properties extracted from each element of the array. Each property in the resulting object corresponds to the respective width and height values of the array elements.
   * @returns {any}
   */
  getElementSize(): any;
  /**
   * Retrieves an array containing the values associated with all defined indexers in the collection. Each element in the array corresponds to a value stored at a specific indexer, allowing you to access the complete set of indexed values managed by the collection.
   * @returns {any[]}
   */
  getIndexerValue(): any[];
  /**
   * Returns the HTML element from the array located at the specified page coordinates, along with additional details about the element, such as its index in the array, bounding rectangle, and any relevant data attributes. This allows for precise identification and interaction with elements based on their position on the page.
   * @param {number} Pagexcoordinate. 
   * @param {number} Pageycoordinate. 
   * @returns {any}
   */
  hitTest(Pagexcoordinate: number, Pageycoordinate: number): any;
  /**
   * Inserts a new column into the <strong>value</strong> array at the specified position, placing it immediately before the given column index. The inserted column will be automatically populated with default values for each corresponding row, ensuring array structure consistency.
   * @param {number} Columnindex. Index of the column to add a new column before.
   */
  insertColumnBefore(Columnindex: number): void;
  /**
   * Inserts a new row with default values into the <strong>value</strong> array at the specified index, placing it immediately before the targeted row. All columns in the new row are initialized with their default values.
   * @param {number} Rowindex. Index of the row to add a new row before.
   */
  insertRowBefore(Rowindex: number): void;
  /**
   * Sets every element in the <strong>value</strong> array to its specified default value. This operation replaces the current contents of the array with the default, ensuring consistency across all elements.
   */
  reinitializeArray(): void;
  /**
   * Removes a specified dimension from the array.<br><em>Note:</em> If you need to remove multiple dimensions at once, it is recommended to dynamically update the <strong>dimensions</strong> property with the desired set of dimensions to ensure proper handling and improved performance.
   */
  removeDimension(): void;
  /**
   * Sets the array's <strong>type</strong> property to <em>'none'</em>, indicating that the array does not enforce a specific data type for its elements. This allows elements of any type to be stored within the array.
   */
  reset(): void;
  /**
   * Adjusts the dimensions of array elements by modifying both the width of each column and the height of each row, allowing for dynamic resizing of the entire array layout.
   * @param {number} Elementwidth. The new element (column) width.
   * @param {number} Elementheight. The new element (row) height.
   */
  resizeElement(Elementwidth: number, Elementheight: number): void;
  /**
   * Selects every element within the array, including all items from the first to the last, without omission.
   */
  selectAll(): void;
  /**
   * Selects an element located at the specified row and column indices within a grid or table structure. The indices provided are used as bounds to identify the exact element to retrieve or manipulate.
   * @param {number} Rowboundindex. 
   * @param {number} Columnboundindex. 
   */
  selectElement(Rowboundindex: number, Columnboundindex: number): void;
  /**
   * Specifies the width of a column or element, determining how much horizontal space it occupies. Accepts values in units such as pixels (px), percentages (%), or other valid CSS measurements. Use this property to control the layout and appearance of table columns or block-level elements.
   * @param {number} Columnwidth. The new column width.
   */
  setColumnWidth(Columnwidth: number): void;
  /**
   * Specifies the initial value assigned to each element in the array when it is first created. If no value is provided during array initialization, this default value will be used for all members.
   * @param {any} Defaultvalue. The new default value. Its data type should correspond to the <strong>type</strong> of the Array.
   */
  setDefaultValue(Defaultvalue: any): void;
  /**
   * Sets the value(s) at one or more specified indices within an array. This operation assigns new data to the given positions, updating the contents of the array at the corresponding indexes. Use this method to modify existing elements or insert new values at particular locations in the array by specifying the target index or indices.
   * @param {any[]} Settings. An array of objects with the fields index and value.
   */
  setIndexerValue(Settings: any[]): void;
  /**
   * Specifies the height of each row (element), determining the vertical space allocated to individual rows within the component or layout. This property controls how tall each row appears, impacting the overall layout and visibility of row content. Accepts values in pixels, percentages, or other valid CSS units.
   * @param {number} Rowheight. The new row height.
   */
  setRowHeight(Rowheight: number): void;
  /**
   * Reveals the last element in the array by changing its visibility property, ensuring it is displayed to the user.
   */
  showLastElement(): void;
  /**
   * Indicates the starting point of a selection range. To complete the selection, invoke the <strong>endSelection</strong> method, which marks the end point of the selection. This process allows you to define a specific range within the content for further manipulation or processing.
   * @param {number} Rowboundindex. The bound index of the row (y coordinate) to start the selection from.
   * @param {number} Columnboundindex. The bound index of the column (x coordinate) to start the selection from.
   */
  startSelection(Rowboundindex: number, Columnboundindex: number): void;
  /**
   * Adjusts the amount of visible spacing between each element in the array, either increasing or decreasing the gap to improve layout and readability on the user interface.
   */
  toggleElementGap(): void;
  /**
   * Transposes the given array by swapping its rows and columns. This operation is only applicable when the <strong>dimensions</strong> property is set to <em>2</em>, indicating a two-dimensional (2D) array. For example, a 2D array of size <code>m x n</code> will become an <code>n x m</code> array after transposition.
   */
  transposeArray(): void;
  /**
   * Allows you to retrieve the entire array's contents, assign a new value to the whole array, or update the value of a specific array element (member) by its index.
   * @param {any} Newvalue?. If the method is used for setting the value of the whole array, the expected value is an array. If it is used for setting the value of an array member, the value can be of any applicable type.
   * @param {number | number[]} Elementindexes?. If this parameter is passed, only the value of the array member with the provided dimension indexes is set. Dimension indexes that are not passed are considered to be 0.
   * @returns {any[]}
   */
  val(Newvalue?: any, Elementindexes?: number | number[]): any[];
}

declare global {
    interface Document {
        createElement(tagName: "smart-array"): Array;
        querySelector(selectors: "smart-array"): Array | null;
        querySelectorAll(selectors: "smart-array"): NodeListOf<Array>;
        getElementsByTagName(qualifiedName: "smart-array"): HTMLCollectionOf<Array>;
        getElementsByName(elementName: "smart-array"): NodeListOf<Array>;
    }
}

/**Sets or retrieves the indexing mode used by the Array, determining how elements are accessed and referenced (e.g., zero-based, one-based, or custom indexing). This property controls whether the Array's indices start at zero, one, or another defined value, affecting how elements are read and assigned. */
export declare type ArrayArrayIndexingMode = 'LabVIEW' | 'JavaScript';
/**Configures or retrieves the data type and the specific widget components assigned to each element within the Array. This determines how the array’s values are stored and how individual items are rendered and interacted with in the user interface. */
export declare type ArrayType = 'none' | 'boolean' | 'numeric' | 'string' | 'custom';
export interface BarcodeProperties {
  /**
   * Defines the background color that appears behind the barcode element. This setting determines the color fill for the area surrounding and underneath the barcode, helping to improve contrast and overall barcode visibility. Accepts color values in standard CSS formats (e.g., hex, RGB, or color names).
   * Default value: "white"
   */
  backgroundColor?: string;
  /**
   * Determines whether the barcode label is displayed on the interface. When set to true, the barcode label will be visible; when set to false, the label will be hidden.
   * Default value: true
   */
  displayLabel?: boolean;
  /**
   * Specifies the color used for the text label displayed below or alongside the barcode. This color determines how the label appears to users and can be set using standard color values, such as hex codes (e.g., #000000 for black) or color names (e.g., "red").
   * Default value: "black"
   */
  labelColor?: string;
  /**
   * Specifies the font family to be used for displaying the text on the barcode label. This determines the appearance of the label's text by applying the selected font style.
   * Default value: "monospace"
   */
  labelFont?: string;
  /**
   * Specifies the font size used for the text displayed on the barcode label, allowing you to control the readability and appearance of the label’s text. Accepts standard CSS font size units such as px, em, rem, or pt.
   * Default value: 14
   */
  labelFontSize?: number;
  /**
   * Specifies the amount of space, in pixels or other units, to be applied as the margin below the barcode label. This determines the distance between the bottom edge of the barcode label and any content or elements directly beneath it.
   * Default value: 5
   */
  labelMarginBottom?: number;
  /**
   * Specifies the amount of space added to the top of the barcode label by setting the top margin. This determines how far the label is positioned from the top edge of its container or surrounding elements. Accepts values in units such as pixels (px), em, or percentages (%).
   * Default value: 5
   */
  labelMarginTop?: number;
  /**
   * Specifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements.
   * Default value: bottom
   */
  labelPosition?: BarcodeLabelPosition | string;
  /**
   * Specifies the color to be used for the barcode lines or bars, allowing you to customize the appearance of the barcode by changing its foreground color. This setting does not affect the background color of the barcode. Use a valid color value (e.g., HEX, RGB, or color name) as supported by your implementation.
   * Default value: "black"
   */
  lineColor?: string;
  /**
   * Specifies the height, in pixels, of each individual barcode line. Increasing this value will make the barcode lines taller, while decreasing it will reduce their height. This property is useful for adjusting the overall visibility and scannability of the barcode.
   * Default value: 50
   */
  lineHeight?: number;
  /**
   * Specifies the thickness of each individual bar in the barcode, allowing you to control how wide the printed barcode lines appear. Adjusting this value can help improve barcode readability for different scanners and printing methods.
   * Default value: 4
   */
  lineWidth?: number;
  /**
   * Specifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode.
   * Default value: svg
   */
  renderAs?: BarcodeRenderAs | string;
  /**
   * Specifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode.
   * Default value: codabar
   */
  type?: BarcodeType | string;
  /**
   * Retrieves the current value of the barcode or updates it with a new value. This property allows you to access the existing barcode data or assign a new barcode value programmatically.
   * Default value: ""
   */
  value?: string;
  /**
   * Specifies or retrieves the width of the barcode in pixels. If the width is set to 0, the barcode’s width will be automatically calculated based on its content and type. Use this property to define a fixed width for the barcode, or set it to 0 to allow automatic sizing for optimal readability.
   * Default value: 0
   */
  width?: number;
  /**
   * Defines or retrieves the height of the barcode, in pixels. When a value of 0 is assigned, the barcode's height will be determined automatically based on its content and format, ensuring optimal sizing without manual specification. If a positive value is provided, the barcode will be rendered at that exact height.
   * Default value: 0
   */
  height?: number;
}
/**
 Barcodes encodes text value in a specific pattern.
*/
export interface Barcode extends BaseElement, BarcodeProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the scanned or entered barcode value does not meet the required validation criteria. It typically occurs when the barcode is missing, formatted incorrectly, or contains unsupported characters, allowing you to handle validation errors and provide appropriate feedback to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(invalidCharacters, lengthValidity, patternValidity, value)
   *  invalidCharacters - An array indicating the invalid characters.
   *  lengthValidity - A boolean indicating the length validity.
   *  patternValidity - A boolean indicating the pattern validity.
   *  value - the invalid value of the barcode.
   */
  onInvalid?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Exports the generated barcode image or data for use outside the application. This function typically saves or downloads the barcode in formats such as PNG, JPEG, or SVG, making it accessible for printing, sharing, or integration with other systems.
   * @param {string} format. The format of the exported file - svg, png, jpg
   * @param {string} fileName?. The name of the exported file
   */
  export(format: string, fileName?: string): void;
  /**
   * Retrieves the barcode image encoded as a Base64 string, allowing for convenient embedding or transmission of the barcode in web applications or APIs without needing a physical image file.
   * @param {string} format. The dataURL format of the string - svg, png, jpg
   * @returns {string}
   */
  getDataURL(format: string): string;
  /**
   * Retrieves the barcode image encoded as a Base64 string, allowing you to easily embed or transmit the barcode in formats such as HTML, CSS, or JSON.
   * @param {string} format. The dataURL format of the string - svg, png, jpg
   * @returns {any}
   */
  getDataURLAsync(format: string): any;
  /**
   * Retrieves the validation status of the barcode, indicating whether the scanned barcode meets the required format and integrity checks.
   * @returns {boolean}
   */
  isValid(): boolean;
}

declare global {
    interface Document {
        createElement(tagName: "smart-barcode"): Barcode;
        querySelector(selectors: "smart-barcode"): Barcode | null;
        querySelectorAll(selectors: "smart-barcode"): NodeListOf<Barcode>;
        getElementsByTagName(qualifiedName: "smart-barcode"): HTMLCollectionOf<Barcode>;
        getElementsByName(elementName: "smart-barcode"): NodeListOf<Barcode>;
    }
}

/**Specifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements. */
export declare type BarcodeLabelPosition = 'top' | 'bottom';
/**Specifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode. */
export declare type BarcodeRenderAs = 'svg' | 'canvas';
/**Specifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode. */
export declare type BarcodeType = 'pharmacode' | 'codabar' | 'code128a' | 'code128b' | 'code128c' | 'msi' | 'msi10' | 'msi11' | 'msi1010' | 'msi1110' | 'ean13' | 'ean8' | 'code39' | 'code93';
export interface BreadcrumbProperties {
  /**
   * Controls the visibility and functionality of the "Add new item" (+) button. When enabled, users can click the button to create and add new items. When disabled, the button is hidden or inactive, preventing the addition of new items.
   * Default value: false
   */
  addNewItem?: boolean;
  /**
   * Controls whether users can drag and reorder breadcrumb items. When enabled, breadcrumb items become draggable, allowing users to change their order within the breadcrumb navigation. When disabled, breadcrumb items remain static and cannot be moved.
   * Default value: false
   */
  allowDrag?: boolean;
  /**
   * Allows you to control whether users can drop dragged breadcrumb items onto the breadcrumb navigation. When enabled, users can rearrange breadcrumb items by dragging and dropping them; when disabled, dropping is prevented.
   * Default value: false
   */
  allowDrop?: boolean;
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, this property determines how animations are applied to the element.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls the visibility of the close (remove) button on individual breadcrumb items, allowing users to optionally display or hide the button for removing specific items from the breadcrumb navigation.
   * Default value: false
   */
  closeButtons?: boolean;
  /**
   * Specifies the data source used to populate the breadcrumb items. The data should be provided as an array of objects, where each object represents an individual breadcrumb item with its corresponding properties, such as label, link, and any additional attributes required for display or navigation.
   * Default value: []
   */
  dataSource?: {label: string, value: string}[];
  /**
   * Controls whether the Breadcrumb navigation component is disabled. When enabled, the Breadcrumb provides users with a navigational trail;
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines the template used to render each breadcrumb item. This property accepts either the ID of an '' element (as a string) or a reference to an actual 'HTMLTemplateElement'. When specified, the template determines the structure and content of each breadcrumb item. If set to 'null', the default rendering is used and no custom template is applied.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Sets or retrieves the value of the unlockKey property, a unique key required to unlock and access the product's features. Use this property to specify the unlock key when enabling product access, or to obtain the current unlock key associated with the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property to select and display the appropriate translation strings based on the specified language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Defines or retrieves an object containing all user-facing text strings within the widget that can be localized. This object allows customization of the widget’s displayed text in different languages and works in conjunction with the locale property to support internationalization and localization. Use this property to provide translations for messages, labels, and other interface text in the widget.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum width (in pixels) at which the Breadcrumb component transitions from its normal display to a minimized mode. If this value is set to null, the Breadcrumb will always remain in its normal mode and will not automatically minimize, regardless of the container's width.
   * Default value: null
   */
  minimizeWidth?: number;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus or being selected using keyboard navigation (such as with the Tab key). As a result, users will not be able to focus on this element using standard keyboard interactions.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Breadcrumbs allow users to make selections from a range of values.
*/
export interface Breadcrumb extends BaseElement, BreadcrumbProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a breadcrumb item is removed or closed by the user—such as when a close icon within a breadcrumb segment is clicked. It can be used to detect and respond to changes in the breadcrumb navigation, allowing you to update application state, UI elements, or perform cleanup tasks as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(item)
   *  item - The item that has been closed.
   */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired just before a Breadcrumb item begins the closing process. You can intercept and prevent the item from closing by invoking <code>event.preventDefault()</code> within your event handler. This allows you to add custom logic, such as displaying a confirmation dialog or validating conditions, before the Breadcrumb item is allowed to close.
	* @param event. The custom event. Custom data event was created with: ev.detail(item)
   *  item - The item that is going to be closed.
   */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user completes a drag-and-drop operation by dropping a Breadcrumb item into a new position. It signals that the item's placement has changed within the Breadcrumb navigation component and allows you to handle any necessary updates, such as reordering, data changes, or UI feedback.
	* @param event. The custom event.    */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a user starts dragging a Breadcrumb item, allowing you to handle custom logic during the drag initiation phase. It provides access to the item being dragged and relevant drag event data.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, originalEvent, target)
   *  item - The item that is being dragged.
   *  originalEvent - The original event that initiates the dragging operation.
   *  target - The original target.
   */
  onDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user clicks the "Add new item" (+) button. It typically indicates the user's intent to create or insert a new item into the current list, collection, or data structure. The event can be used to initialize the process for adding a new item, display a relevant input form, or handle any additional logic associated with item creation.
	* @param event. The custom event.    */
  onAddNewItem?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new item to the collection. The item is appended to the end of the array or list, increasing the total number of items by one. If additional properties (such as item details or metadata) are required, ensure they are included in the request.
   * @param {any} itemDetails. An Object with the fields "index", "label", and "value".
   */
  addItem(itemDetails: any): void;
  /**
   * Restores the Breadcrumb component from its minimized or collapsed state to its full, expanded view, making all breadcrumb navigation links visible to the user.
   */
  maximize(): void;
  /**
   * Collapses the breadcrumb navigation into a minimal or condensed state, reducing its visual footprint on the page while still maintaining navigational functionality. This is typically used to save space or enhance the user interface on smaller screens.
   */
  minimize(): void;
  /**
   * Removes a specified item from the collection. If the item exists, it will be deleted; otherwise, no action is taken.
   * @param {HTMLElement} item. The item to remove.
   */
  removeItem(item: HTMLElement): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-breadcrumb"): Breadcrumb;
        querySelector(selectors: "smart-breadcrumb"): Breadcrumb | null;
        querySelectorAll(selectors: "smart-breadcrumb"): NodeListOf<Breadcrumb>;
        getElementsByTagName(qualifiedName: "smart-breadcrumb"): HTMLCollectionOf<Breadcrumb>;
        getElementsByName(elementName: "smart-breadcrumb"): NodeListOf<Breadcrumb>;
    }
}

export interface ButtonProperties {
  /**
   * Specifies the animation mode for the element. When set to 'none', all animations are disabled. Use this property to enable, disable, or customize the animation behavior as needed. You can get the current animation mode or assign a new value to control how animations are applied.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies how the element responds to user click interactions, such as triggering specific actions, toggling states, or initiating custom event handling based on the selected mode.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Specifies the inner content of the element, such as text, HTML, or child elements, determining what is displayed inside the element on the web page.
   * Default value: ""
   */
  content?: any;
  /**
   * Determines whether the button is interactive. When enabled ('true'), users can click and interact with the button. When disabled ('false'), the button appears inactive and does not respond to user actions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Updates the contents of the element by setting its inner HTML to the specified value. This replaces all existing child elements and text within the element with the provided HTML markup. Use caution when inserting user-generated content to avoid security risks such as cross-site scripting (XSS).
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Handles the retrieval or assignment of the 'unlockKey', a unique value required to authorize and unlock access to the product's features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language code to use for retrieving or displaying messages. When set, it determines which localized message set from the messages property is used. Getting this property returns the current language code. Typically used for enabling multi-language support within the application.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define or modify the formatting of messages returned by the Localization Module. Use this callback to customize how localized messages are structured or displayed before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized strings for the widget's user interface. This property allows you to customize text displayed by the widget for different languages and regions, and works in conjunction with the locale property to ensure proper localization.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines or retrieves the name attribute of the element. The name attribute uniquely identifies form elements when submitting data through an HTML form, allowing the server to associate input values with their corresponding fields. This attribute is essential for processing form data correctly.
   * Default value: """"
   */
  name?: string;
  /**
   * If the custom element is set to readonly, users will not be able to modify its value or content through direct interaction (such as typing, selecting, or dragging). However, the element may still be focusable and its value can be changed programmatically via scripts. User-initiated actions that would normally alter its state are disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that determines whether the element's alignment supports right-to-left (RTL) text direction, which is typically used by languages such as Arabic or Hebrew. When enabled, the element is properly aligned to display content for RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme applied to the element, which controls its overall appearance, including colors, fonts, and styling. This property allows you to select a predefined look and feel for the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies or retrieves the button's type attribute, which determines the button's behavior—such as "submit" to submit a form, "reset" to reset form fields, or "button" for a general-purpose clickable button.
   * Default value: "Reset"
   */
  type?: string;
  /**
   * Sets or retrieves the button's value attribute, which typically defines the text displayed on the button or the value submitted when the button is used in a form.
   * Default value: ""
   */
  value?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using the Tab key or other navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.
*/
export interface Button extends BaseElement, ButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * The click event is triggered based on the selected clickMode, meaning the event behavior will vary depending on the current setting of the clickMode property.
	* @param event. The custom event.    */
  onClick: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-button"): Button;
        querySelector(selectors: "smart-button"): Button | null;
        querySelectorAll(selectors: "smart-button"): NodeListOf<Button>;
        getElementsByTagName(qualifiedName: "smart-button"): HTMLCollectionOf<Button>;
        getElementsByName(elementName: "smart-button"): NodeListOf<Button>;
    }
}

/**Specifies how the element responds to user click interactions, such as triggering specific actions, toggling states, or initiating custom event handling based on the selected mode. */
export declare type ClickMode = 'hover' | 'press' | 'release' | 'pressAndRelease';
export interface ButtonGroupProperties {
  /**
   * Sets or retrieves the current animation mode for the component. When the property is set to 'none', all animations are disabled, resulting in immediate transitions without visual effects. Otherwise, specifying a different mode enables animations according to the selected option.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Configures the set of buttons to be displayed. The dataSource property accepts multiple formats: it can be an array of strings or numbers—each representing a button—or an array of objects, where each object defines the properties of a button (for example, with attributes such as label for the button text and value for its underlying value). Alternatively, dataSource can be a function (callback) that returns an array in either of these formats. This flexibility allows you to define button configurations statically or generate them dynamically based on custom logic.
   * Default value: []
   */
  dataSource?: any;
  /**
   * Specifies how items within the element can be selected—for example, allowing single selection, multiple selections, or no selection at all.
   * Default value: one
   */
  selectionMode?: ButtonGroupSelectionMode | string;
  /**
   * Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element is non-interactive and usually appears visually distinct to indicate it is unavailable.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines or retrieves the unlockKey, a unique identifier or code required to activate and gain access to the product’s full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the currently selected language for the component. This property works together with messages, which provides the corresponding localized texts or translations for each available language. Changing the language will update the displayed messages based on the selected locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module before they are displayed to the user. Use this to modify, translate, or enrich message content based on your application's specific requirements.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing text strings used within the widget, allowing these strings to be localized for different languages. This property works in conjunction with the locale property to provide translated text for the widget's user interface, enabling support for internationalization.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting an HTML form, allowing the form data to be sent as key-value pairs to the server. This attribute is essential for grouping related input elements and accessing their submitted values on the server side.
   * Default value: """"
   */
  name?: string;
  /**
   * When the custom element has the 'readonly' attribute set, its value cannot be modified by the user. Interaction methods such as typing, selecting, or altering content are disabled; however, users are still able to focus on and copy content from the element if desired. Any attempts to change the value—either via keyboard, mouse, or programmatic user actions—will have no effect.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that determines whether the element’s layout and text direction are aligned for right-to-left (RTL) locales, such as those using Arabic or Hebrew scripts. When enabled, this property ensures proper alignment and rendering for languages that read from right to left."
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. The theme controls the overall appearance, including colors, typography, and style variations, ensuring the element is displayed consistently according to the selected design.
   * Default value: ""
   */
  theme?: string;
  /**
   * Gets or sets the selected values of the button group component as an array of strings. Each string in the array corresponds to the value attribute of a selected button within the group. This property can be used to programmatically read which buttons are currently selected or to define the initial selection state.
   * Default value: 
   */
  selectedValues?: string[];
  /**
   * Gets or sets the indexes of the selected buttons within the group as an array of numbers. Each number corresponds to the zero-based index of a selected button. Used to track multiple selected buttons within the group.
   * Default value: 
   */
  selectedIndexes?: number[];
  /**
   * If set to true, this property prevents the element from receiving keyboard focus, making it unreachable via keyboard navigation (such as the Tab key).
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 ButtonGroup creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.
*/
export interface ButtonGroup extends BaseElement, ButtonGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * The "change" event is triggered whenever the values of selectedValues or selectedIndexes are updated. This event occurs whenever the user selects or deselects an option, or when the selection state is modified programmatically. Use this event to respond to changes in the selection, such as updating the UI or performing validation.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Toggles the selection state of an item within the element, allowing users to either select or deselect the specified item based on its current state.
   * @param {number | string} value. The index or the value of the item to be selected/unselected.
   */
  select(value: number | string): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-button-group"): ButtonGroup;
        querySelector(selectors: "smart-button-group"): ButtonGroup | null;
        querySelectorAll(selectors: "smart-button-group"): NodeListOf<ButtonGroup>;
        getElementsByTagName(qualifiedName: "smart-button-group"): HTMLCollectionOf<ButtonGroup>;
        getElementsByName(elementName: "smart-button-group"): NodeListOf<ButtonGroup>;
    }
}

/**Specifies how items within the element can be selected—for example, allowing single selection, multiple selections, or no selection at all. */
export declare type ButtonGroupSelectionMode = 'none' | 'one' | 'zeroOrOne' | 'zeroOrMany';
export interface CalendarProperties {
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Enhances the animation behavior by applying new settings when enabled.Properties:      startSpeed – Specifies the initial speed at which the animation begins, allowing you to control how quickly the animation starts.        easeThreshold – Defines the point during the animation where the "ease effect" starts, meaning the animation begins to slow down for a smoother transition.        step – Sets the interval for each frame or update of the animation, effectively controlling how smoothly or incrementally the animation moves.        stepEaseSize – A coefficient used to calculate the updated step size once the animation passes the easeThreshold, increasing the ease-in/ease-out effect as the animation decelerates.        resetThreshold – Determines the point at which the animation will automatically reset and start from the beginning, allowing for looping or repeated motion.  
   * Default value: null
   */
  animationSettings?: any;
  /**
   * Specifies the configuration and behavior of the date selection controls displayed within the header section of the Calendar component, such as navigation buttons, month and year dropdowns, or other tools that allow users to change the visible date range.
   * Default value: default
   */
  calendarMode?: CalendarMode | string;
  /**
   * Specifies the display format for the names of the days of the week that appear as headers above the calendar grid. This setting controls whether the day names are shown in full (e.g., "Monday"), as abbreviations (e.g., "Mon"), or as single letters (e.g., "M").
   * Default value: firstTwoLetters
   */
  dayNameFormat?: DayFormat | string;
  /**
   * A callback function that allows you to customize the display format of month names when the calendarMode property is set to 'default'. Use this callback to define how month names should appear (e.g., full name, abbreviation, localization) in the calendar interface.
   * Default value: null
   */
  dateFormatFunction?: any;
  /**
   * Controls whether the Calendar feature is active or inactive. When enabled, the Calendar is accessible to users; when disabled, the Calendar is inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Prevents the calendar from automatically navigating to a different month when the user clicks on a date cell that belongs to a month other than the one currently displayed. This ensures that selecting dates outside the visible month will not change the current view.
   * Default value: false
   */
  disableAutoNavigation?: boolean;
  /**
   * Configures whether the mouse wheel can be used to navigate or change dates in the Calendar component. When enabled, scrolling the mouse wheel will move between calendar views or dates; when disabled, the mouse wheel will have no effect on the calendar.
   * Default value: false
   */
  disableMouseWheel?: boolean;
  /**
   * Specifies which date is initially displayed in the calendar when calendarMode is set to 'default'. This property controls the starting visible month or day in the calendar interface, allowing you to set the user's initial view to a specific date.
   * Default value: month
   */
  displayMode?: CalendarDisplayMode | string;
  /**
   * Specifies the layout style displayed for the month or year view when calendarMode is set to "Default." This setting controls how dates are visually organized and presented to the user, such as showing days within a month grid or listing months within a year, depending on the selected calendar mode.
   * Default value: table
   */
  displayModeView?: CalendarDisplayModeView | string;
  /**
   * Specifies the vertical height, in pixels, of the month selection dropdown within the Calendar component. This setting controls how much space the dropdown occupies when users select a month. Adjusting this value can improve usability and visual consistency with other UI elements.
   * Default value: 200
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the month selection dropdown within the Calendar component. This property controls how wide the dropdown appears, allowing you to adjust its size for better alignment or readability within the Calendar interface.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies which day is considered the start of the week, using a numeric value where 0 represents Sunday, 1 represents Monday, up to 6 for Saturday. For example, setting the value to 1 makes Monday the first day of the week.
   * Default value: 0
   */
  firstDayOfWeek?: number;
  /**
   * Defines a custom footer template for the component. You can provide either the ID of an existing '' element in the DOM, or pass a direct reference to an 'HTMLTemplateElement'. The specified template will be used to render the footer section of the component.
   * Default value: null
   */
  footerTemplate?: any;
  /**
   * Defines a custom header template for the component. You can provide either the string ID of an existing HTMLTemplateElement in the DOM or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section.
   * Default value: null
   */
  headerTemplate?: any;
  /**
   * Conceals the display of weekday names in the user interface, ensuring that the days of the week (e.g., Monday, Tuesday, etc.) are not visible to users.
   * Default value: false
   */
  hideDayNames?: boolean;
  /**
   * Prevents dates that belong to adjacent months from being displayed, ensuring that only the days within the current month are visible in the calendar view.
   * Default value: false
   */
  hideOtherMonthDays?: boolean;
  /**
   * Determines whether the tooltip’s arrow indicator is visible. When enabled, the arrow will be hidden and only the tooltip’s content will be displayed.
   * Default value: false
   */
  hideTooltipArrow?: boolean;
  /**
   * Defines the specific dates that will be visually highlighted or marked as important within the interface. These dates can be used to indicate events, deadlines, holidays, or other noteworthy occasions that should stand out to users when viewing the calendar or date selector component.
   * Default value: 
   */
  importantDates?: string[] | Date[];
  /**
   * Defines a template for displaying important dates. This property accepts either the ID of an HTML '' element present in the DOM, or a direct reference to that template element. The specified template will be used to render each important date in the component.
   * Default value: null
   */
  importantDatesTemplate?: any;
  /**
   * Sets or retrieves the unlockKey, a unique identifier or code used to grant access to the product's locked features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language used for displaying all calendar elements, such as month names, day labels, and interface text, ensuring the calendar is localized for the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to define a custom format for messages returned by the Localization Module, enabling you to modify, wrap, or translate message content before it is delivered to the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the latest selectable date for the Calendar component. Accepts JavaScript Date objects or valid date string formats (e.g., 'YYYY-MM-DD', ISO 8601). Dates beyond this value will be disabled and cannot be selected by the user.
   * Default value: new Date(2100, 1, 1)
   */
  max?: string | Date;
  /**
   * Sets or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages and regions. This property is intended for localization and works together with the locale property to support multiple languages in the widget’s user interface.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the earliest selectable date for the Calendar component. Accepts either JavaScript Date objects or strings in valid date formats (e.g., 'YYYY-MM-DD'). Dates earlier than this value will be disabled and cannot be selected.
   * Default value: new Date(1900, 1, 1)
   */
  min?: string | Date;
  /**
   * Specifies how many months are displayed simultaneously within the calendar interface. You can select any value between 1 and 12, with 12 being the maximum number of months shown at once. If this property is not set, the calendar will display only a single month by default.
   * Default value: 1
   */
  months?: number;
  /**
   * Specifies how month names are displayed in the header when DisplayMode is set to "Default" or when the Months property has a value greater than 1. This setting controls whether month names appear in their full, abbreviated, or custom format within the header section, improving readability and user interface customization.
   * Default value: long
   */
  monthNameFormat?: MonthFormat | string;
  /**
   * Sets or retrieves the value of the element’s name attribute. This attribute identifies the element when submitting HTML forms, allowing its data to be included with the specified name as part of the form data sent to the server.
   * Default value: ""
   */
  name?: string;
  /**
   * When the element is set to "readonly," users can see its content but cannot modify or edit its value. While the element remains focusable, all user input and changes are disabled, preventing any interaction that would alter its contents.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Defines a list of restricted dates that the user cannot select, hover over, or focus on within the date picker. These dates will be visually indicated as unavailable or disabled in the interface. Each restricted date can be provided as either a JavaScript Date object or a string in a recognized date format (such as 'YYYY-MM-DD'). Any date included in this list will be unselectable and visually styled to indicate its restricted status.
   * Default value: 
   */
  restrictedDates?: string[] | Date[];
  /**
   * Specifies or retrieves a value that determines whether the element's content alignment supports right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. Enabling this property ensures that text and layout are properly adjusted for locales that require RTL formatting.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the orientation (horizontal or vertical) of the navigation buttons displayed in the header, and sets the direction in which the accompanying animation plays.
   * Default value: landscape
   */
  scrollButtonsNavigationMode?: ViewLayout | string;
  /**
   * Specifies the alignment and placement of navigation buttons within the header section, controlling whether they appear on the left, center, or right side of the header.
   * Default value: both
   */
  scrollButtonsPosition?: LayoutPosition | string;
  /**
   * Specifies the dates that should appear as selected within the component. These selected dates are visually distinguished from unselected dates using a different style or highlight. You can provide the selected dates either as JavaScript Date objects or as strings formatted in any valid date representation (e.g., 'YYYY-MM-DD').
   * Default value: 
   */
  selectedDates?: string[] | Date[];
  /**
   * Specifies how users can select dates in the component, such as choosing a single date, a range of dates, or multiple individual dates.
   * Default value: default
   */
  selectionMode?: CalendarSelectionMode | string;
  /**
   * Specifies the amount of time (in milliseconds) that must pass between consecutive clicks of the calendar's date navigation buttons in the header. This delay helps prevent users from triggering rapid, repeated navigation actions and can be used to control the responsiveness of date changes in the calendar interface.
   * Default value: 80
   */
  spinButtonsDelay?: number;
  /**
   * Specifies the initial delay, in milliseconds, before the date navigation buttons in the Calendar header begin to respond when pressed. This delay applies to the first action after a button is engaged, allowing users control over how quickly navigation starts.
   * Default value: 0
   */
  spinButtonsInitialDelay?: number;
  /**
   * Specifies the visual theme applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the template to be used for the calendar's title section. This property accepts either the ID of an HTMLTemplate element present in the DOM or a direct reference to an HTMLTemplate element. The provided template will be rendered in place of the default title section, allowing for custom formatting and content.
   * Default value: null
   */
  titleTemplate?: any;
  /**
   * Controls whether tooltips are shown for important dates. When enabled, hovering over an important date will display a tooltip with additional information. When disabled, no tooltip will appear on hover.
   * Default value: false
   */
  tooltip?: boolean;
  /**
   * Controls the visibility of the tooltip arrow for important dates. When enabled (default), an arrow is displayed on the tooltip to indicate its reference point. Disabling this option will hide the arrow, resulting in a plain tooltip without a directional indicator.
   * Default value: true
   */
  tooltipArrow?: boolean;
  /**
   * Specifies the amount of time (in milliseconds) to wait before displaying the tooltip after a user hovers over or focuses on the target element. This controls how quickly the tooltip appears, allowing you to adjust the responsiveness of the tooltip based on user interaction.
   * Default value: 100
   */
  tooltipDelay?: number;
  /**
   * Specifies a custom offset for the tooltip's position. Accepts an array containing two numbers: the first value represents the horizontal (left) offset, and the second value represents the vertical (top) offset. These values determine how many pixels the tooltip is shifted from its default position along the X (left) and Y (top) axes, respectively.
   * Default value: 
   */
  tooltipOffset?: number[][];
  /**
   * Specifies the placement of the tooltip relative to its target element (e.g., top, right, bottom, or left).
   * Default value: top
   */
  tooltipPosition?: TooltipPosition | string;
  /**
   * Defines the template used for the tooltip's content. You can provide either the ID of an existing '' element in the DOM or a direct reference to an HTMLTemplateElement. The tooltip will render its content based on the markup and structure defined within the specified template.
   * Default value: null
   */
  tooltipTemplate?: any;
  /**
   * When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or programmatic focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the display orientation of the Calendar component (horizontal or vertical), affecting how dates and months are arranged within the calendar view.
   * Default value: portrait
   */
  view?: ViewLayout | string;
  /**
   * Specifies which sections of the Calendar component are displayed to the user. Available sections include: 'title', 'header', and 'footer'. You may enable any combination of these sections simultaneously by listing them together. If this setting is not specified, only the 'header' section will be shown by default.
   * Default value: header
   */
  viewSections?: string[];
  /**
   * Controls the display of week numbers within the calendar. When enabled, a week number is shown at the start of each week row, allowing users to easily reference and distinguish weeks. If disabled, week numbers are hidden, and only the standard calendar dates are displayed.
   * Default value: false
   */
  weekNumbers?: boolean;
  /**
   * Specifies how many weeks are displayed in the calendar view. This property accepts integer values from 1 to 6, where 1 displays a single week and 6 displays six weeks, representing a full month view.
   * Default value: 6
   */
  weeks?: number;
  /**
   * Specifies the format in which the year is displayed in the header when the DisplayMode property is set to "Default" or when the Months property has a value greater than 1. This setting controls how the year appears (e.g., "2024", "24") in the header section of the component.
   * Default value: numeric
   */
  yearFormat?: YearFormat | string;
}
/**
 Calendar allows user to easily select one or more dates. This control supports multi-calendar view, special dates, holidays, weekends, decade views.
*/
export interface Calendar extends BaseElement, CalendarProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a user selects or deselects a date. It fires each time the selection state of a date changes, allowing you to respond to both new date selections and the removal of existing selections.
	* @param event. The custom event. Custom data event was created with: ev.detail(value)
   *  value - An array of all currently selected dates.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired immediately before the displayMode changes, providing an opportunity to intercept the transition. Within the event handler, you can call event.preventDefault() to cancel the displayMode change and prevent the update from occurring. This allows developers to implement custom logic or validation before the displayMode actually switches.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldDisplayMode, newDisplayMode)
   *  oldDisplayMode - The previous display mode.
   *  newDisplayMode - The new display mode.
   */
  onDisplayModeChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the display mode of the application is changed (for example, switching between fullscreen, windowed, or split-screen modes). It allows developers to detect and respond to changes in how content is presented to the user.
	* @param event. The custom event.    */
  onDisplayModeChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the view is about to change, such as during navigation to a different page or section. Developers can intercept this event to perform custom logic before the navigation completes. If necessary, the navigation can be cancelled by calling the preventDefault method within the event handler, stopping the view from changing.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, type)
   *  value - The view's date.
   *  type - The view type - 'month', 'decade' or 'year'.
   */
  onNavigationChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user navigates to a different view or the current view is updated within the application. It provides an opportunity to execute custom logic in response to view transitions, such as loading new data, updating UI components, or tracking navigation events.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, type)
   *  value - The view's date.
   *  type - The view type - 'month', 'decade' or 'year'.
   */
  onNavigationChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered each time the tooltip associated with an important date becomes visible to the user, such as when they hover over or click on the date. Use this event to execute custom logic or display additional content whenever the important date's tooltip is opened.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, value)
   *  target - The event target - tooltip.
   *  value - The important date of the hovered cell.
   */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user closes the tooltip associated with an important date. It indicates that the tooltip has been dismissed, either by user interaction (such as clicking outside the tooltip or pressing a close button) or through programmatic means. Use this event to perform actions or update the UI in response to the tooltip being closed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, value)
   *  target - The event target - tooltip.
   *  value - The important date of the hovered cell.
   */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * Clears the current selection by removing all selected dates from the calendar. This action resets the calendar to its default unselected state, ensuring that no dates remain highlighted or chosen.
   */
  clearSelection(): void;
  /**
   * Determines the navigation direction based on the provided argument: navigates forward if the argument is positive or "next," and navigates backward if the argument is negative or "previous."
   * @param {number | Date | string} step. The argument can be the following: <ul><li> number -  representing the number of months to scroll. Can be negavtive. If negative it will scroll backwards.</li><li> Date - a date object representing the Date to navigate to.</li><li> string - a string representing a valid Date, e.g. "2020-10-1" </li></ul>
   * @returns {boolean}
   */
  navigate(step: number | Date | string): boolean;
  /**
   * Allows the user to select a date or deselect a previously selected date, updating the selection state accordingly.
   * @param {Date | string} date. The date to be selected or unselected. The date can be a Date object or a string in valid date format.
   */
  select(date: Date | string): void;
  /**
   * Selects the current date based on the user's system settings.
   * @returns {Date}
   */
  today(): Date;
}

declare global {
    interface Document {
        createElement(tagName: "smart-calendar"): Calendar;
        querySelector(selectors: "smart-calendar"): Calendar | null;
        querySelectorAll(selectors: "smart-calendar"): NodeListOf<Calendar>;
        getElementsByTagName(qualifiedName: "smart-calendar"): HTMLCollectionOf<Calendar>;
        getElementsByName(elementName: "smart-calendar"): NodeListOf<Calendar>;
    }
}

/**Specifies the configuration and behavior of the date selection controls displayed within the header section of the Calendar component, such as navigation buttons, month and year dropdowns, or other tools that allow users to change the visible date range. */
export declare type CalendarMode = 'default' | 'classic';
/**Specifies the display format for the names of the days of the week that appear as headers above the calendar grid. This setting controls whether the day names are shown in full (e.g., "Monday"), as abbreviations (e.g., "Mon"), or as single letters (e.g., "M"). */
export declare type DayFormat = 'narrow' | 'firstTwoLetters' | 'long' | 'short';
/**Specifies which date is initially displayed in the calendar when calendarMode is set to 'default'. This property controls the starting visible month or day in the calendar interface, allowing you to set the user's initial view to a specific date. */
export declare type CalendarDisplayMode = 'month' | 'year' | 'decade';
/**Specifies the layout style displayed for the month or year view when calendarMode is set to "Default." This setting controls how dates are visually organized and presented to the user, such as showing days within a month grid or listing months within a year, depending on the selected calendar mode. */
export declare type CalendarDisplayModeView = 'table' | 'list';
/**Specifies how month names are displayed in the header when DisplayMode is set to "Default" or when the Months property has a value greater than 1. This setting controls whether month names appear in their full, abbreviated, or custom format within the header section, improving readability and user interface customization. */
export declare type MonthFormat = 'narrow' | 'firstTwoLetters' | 'long' | 'short' | '2-digit' | 'numeric';
/**Specifies the display orientation of the Calendar component (horizontal or vertical), affecting how dates and months are arranged within the calendar view. */
export declare type ViewLayout = 'landscape' | 'portrait';
/**Specifies the alignment and placement of navigation buttons within the header section, controlling whether they appear on the left, center, or right side of the header. */
export declare type LayoutPosition = 'near' | 'far' | 'both';
/**Specifies how users can select dates in the component, such as choosing a single date, a range of dates, or multiple individual dates. */
export declare type CalendarSelectionMode = 'none' | 'default' | 'many' | 'one' | 'oneExtended' | 'oneOrMany' | 'range' | 'week' | 'zeroOrMany' | 'zeroOrOne';
/**Specifies the placement of the tooltip relative to its target element (e.g., top, right, bottom, or left). */
export declare type TooltipPosition = 'auto' | 'absolute' | 'bottom' | 'top' | 'left' | 'right';
/**Specifies the format in which the year is displayed in the header when the DisplayMode property is set to "Default" or when the Months property has a value greater than 1. This setting controls how the year appears (e.g., "2024", "24") in the header section of the component. */
export declare type YearFormat = '2-digit' | 'numeric';
export interface CardProperties {
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled; otherwise, the selected animation mode determines how animations are displayed.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * A callback function that allows you to attach event handlers and implement custom behaviors within the card element. Use this function to interact with or modify the card's content after it has been rendered, such as adding click listeners, updating UI components, or integrating additional logic specific to the card's context.
   * Default value: null
   */
  contentHandler?: any;
  /**
   * This object serves as the data source for populating a card template. Each key corresponds to a placeholder—enclosed in double curly braces within the item's template. The associated values are used to replace these placeholders during rendering, enabling dynamic content injection into the card layout.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Prevents user interactions with the element, such as clicking, typing, or focusing, effectively making the element unresponsive to input events.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies a custom card template for rendering card content. The template can be provided either as a string representing the ID of an '' element present in the DOM, or as a direct reference to an HTMLTemplateElement. Within the template’s HTML content, you may include one or more property placeholders using the double curly braces syntax. During rendering, each placeholder will be dynamically replaced with the corresponding property value from the associated 'dataSource' object. If you set this property using a template ID, the expected type is a string.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Retrieves or assigns the unlockKey used to activate and gain access to the product’s features. This property is typically required for enabling full functionality after purchase or authorization.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which set of localized messages, as defined in the messages property, will be used for display. Changing the language updates the interface text to match the corresponding translations in messages.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom format for localization messages returned by the Localization Module. Use this to modify or structure the message output according to specific requirements, such as adding prefixes, suffixes, or additional context for improved display or processing.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized string resources used within the widget's user interface. This enables the widget's labels, messages, and other text elements to be translated and displayed according to the selected language or region, as specified by the locale property. Use this property to provide custom translations and enhance the widget's internationalization support.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and interface components in a right-to-left direction, ensuring proper localization for RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme applied to the element. The theme controls the overall visual appearance, including colors, fonts, and styles, to ensure a consistent look and feel across the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from keyboard navigation and cannot receive focus via user interaction, such as tabbing or clicking.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Card component with header, footer and content sections.
*/
export interface Card extends BaseElement, CardProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user swipes the card downward, indicating a bottom swipe gesture on the card component.
	* @param event. The custom event.    */
  onSwipebottom?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user performs a left swipe gesture on the card, indicating that the card has been dismissed or rejected by swiping it in a leftward direction.
	* @param event. The custom event.    */
  onSwipeleft?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user performs a right-swipe gesture on the card element, typically indicating a positive action such as approval or selection. It allows you to execute custom logic in response to the card being swiped to the right.
	* @param event. The custom event.    */
  onSwiperight?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user swipes the card upwards (toward the top of the screen), indicating a "swipe up" gesture on the card component.
	* @param event. The custom event.    */
  onSwipetop?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-card"): Card;
        querySelector(selectors: "smart-card"): Card | null;
        querySelectorAll(selectors: "smart-card"): NodeListOf<Card>;
        getElementsByTagName(qualifiedName: "smart-card"): HTMLCollectionOf<Card>;
        getElementsByName(elementName: "smart-card"): NodeListOf<Card>;
    }
}

export interface CardViewProperties {
  /**
   * Controls the visibility and functionality of the button used to add new cards to the interface. When enabled, users can click the button to create and add additional cards; when disabled, the button is hidden or inactive, preventing new card additions.
   * Default value: false
   */
  addNewButton?: boolean;
  /**
   * Enables users to rearrange the order of cards within the interface by clicking and dragging individual cards to new positions. This drag-and-drop functionality provides an intuitive way to customize the card sequence.
   * Default value: false
   */
  allowDrag?: boolean;
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other valid values enables the corresponding animation behavior.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the height value assigned to each card component, determining how tall each card will appear within the user interface.
   * Default value: null
   */
  cardHeight?: number | null;
  /**
   * Specifies the layout direction of the card cells, determining whether they are arranged horizontally (side by side) or vertically (stacked one above the other) within the container. This setting controls the visual organization of the cards.
   * Default value: vertical
   */
  cellOrientation?: Orientation | string;
  /**
   * Enables users to expand or collapse the card’s content, allowing for a more compact view when the content is hidden and revealing additional details when expanded.
   * Default value: false
   */
  collapsible?: boolean;
  /**
   * Specifies the configuration properties for table columns:  label — Defines the display name or header text for the column as shown in the user interface.  dataField — Specifies the key or property name in the data source that this column should display.  icon — Allows you to assign an icon (e.g., as a URL or icon class) to be displayed in the column header or alongside cell values.  formatSettings — Provides formatting options for the column's values, such as date/time formats, number precision, or custom display rules.  formatFunction — Accepts a callback function to apply custom transformations or styling to the column's cell values before rendering.
   * Default value: 
   */
  columns?: CardViewColumn[];
  /**
   * Specifies the data field that should be used as the cover image or primary visual representation for the item.
   * Default value: "''"
   */
  coverField?: string;
  /**
   * Provides detailed information about the 'cover image fit' property, which defines how a cover image is resized or scaled to fit within its container. This property determines whether the image should fill, contain, cover, or be otherwise adjusted to cover the allotted space, often corresponding to CSS 'object-fit' values such as 'cover', 'contain', or 'fill'.
   * Default value: crop
   */
  coverMode?: CardViewCoverMode | string;
  /**
   * Specifies the origin or endpoint from which the item's data is retrieved for display within the card component. This property defines where the card fetches its content, such as a local data object, a remote API, or a database, ensuring the card displays up-to-date and relevant information.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Configures the grid's data source options, specifying how data should be loaded and managed when the dataSource property is assigned either an array of data objects or a remote data endpoint (URL). This includes settings for data retrieval, formatting, paging, sorting, and other data-related behaviors.
   * Default value: [object Object]
   */
  dataSourceSettings?: DataSourceSettings;
  /**
   * Enables the functionality for users to edit the content of individual cards. When this option is active, users can modify card details such as titles, descriptions, and other editable fields directly within the card interface.
   * Default value: false
   */
  editable?: boolean;
  /**
   * Sets or retrieves the position of the header section within the component. The header typically includes interactive elements such as the Customize, Filter, Sort, and Search buttons, allowing users to tailor the content display, apply filters, change sorting options, and perform searches.
   * Default value: none
   */
  headerPosition?: CardViewHeaderPosition | string;
  /**
   * Sets or retrieves the unlockKey value, a unique key required to unlock and gain access to the product's full features or content. Use this property to assign a new unlock key or to obtain the current key in use.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current locale (language and regional settings) to be used by the component. This is typically used together with the messages property, which provides localized text or translations for different locales. By specifying the locale, the component displays messages, labels, and other text elements in the appropriate language and format.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages. This property works in conjunction with the locale property to enable localization, so you can provide translations for various UI elements based on the user's selected language or region. Use this option to specify or override default widget labels and messages for internationalization purposes.
   * Default value:    * {
   *   "en": {
   *     "addFilter": "+ Add filter",
   *     "addImage": "Add",
   *     "and": "And",
   *     "apply": "Apply",
   *     "booleanFirst": "☐",
   *     "booleanLast": "☑",
   *     "cancel": "Cancel",
   *     "CONTAINS": "contains",
   *     "CONTAINS_CASE_SENSITIVE": "contains (case sensitive)",
   *     "coverField": "Cover field",
   *     "crop": "Crop",
   *     "customizeCards": "Customize cards",
   *     "dateFirst": "1",
   *     "dateLast": "9",
   *     "dateTabLabel": "DATE",
   *     "DOES_NOT_CONTAIN": "does not contain",
   *     "DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",
   *     "draggedRecord": "Record ",
   *     "EMPTY": "empty",
   *     "ENDS_WITH": "ends with",
   *     "ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",
   *     "EQUAL": "equal",
   *     "EQUAL_CASE_SENSITIVE": "equal (case sensitive)",
   *     "filter": "Filter",
   *     "filteredByMultiple": " filters",
   *     "filteredByOne": "1 filter",
   *     "find": "Find a field",
   *     "findInView": "Find in view",
   *     "firstBy": "Sort by",
   *     "fit": "Fit",
   *     "found": "",
   *     "from": "from",
   *     "GREATER_THAN": "greater than",
   *     "GREATER_THAN_OR_EQUAL": "greater than or equal",
   *     "imageUrl": "New image URL:",
   *     "incorrectStructure": "'dataSource' must be an instance of Smart.DataAdapter or an array of objects with key-value pairs.",
   *     "LESS_THAN": "less than",
   *     "LESS_THAN_OR_EQUAL": "less than or equal",
   *     "nextRecord": "Next record",
   *     "noCoverField": "No cover field",
   *     "noData": "No data to display",
   *     "noFilters": "No filters applied",
   *     "noMatches": "No matched records",
   *     "noSorting": "No sorting applied",
   *     "noResults": "No results",
   *     "NOT_EMPTY": "not empty",
   *     "NOT_EQUAL": "not equal",
   *     "NOT_NULL": "not null",
   *     "now": "Now",
   *     "NULL": "null",
   *     "numberFirst": "1",
   *     "numberLast": "9",
   *     "ok": "OK",
   *     "or": "Or",
   *     "pickAnother": "Pick another field to sort by",
   *     "previousRecord": "Previous record",
   *     "removeImage": "Remove",
   *     "sort": "Sort",
   *     "sortedByMultiple": "Sorted by  fields",
   *     "sortedByOne": "Sorted by 1 field",
   *     "STARTS_WITH": "starts with",
   *     "STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",
   *     "stringFirst": "A",
   *     "stringLast": "Z",
   *     "thenBy": "then by",
   *     "timeTabLabel": "TIME",
   *     "toggleVisibility": "Toggle field visibility",
   *     "where": "Where"
   *   }
   * }
   */
  messages?: any;
  /**
   * Determines or retrieves whether the element’s text direction is set to right-to-left (RTL), allowing proper alignment and rendering for languages and locales that use RTL scripts (such as Arabic or Hebrew). This ensures the element displays content correctly for users in RTL language environments.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, spacing, and style variations, ensuring a consistent and cohesive look for the element within the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Provides detailed configuration for how the element responds to user scrolling actions, specifying whether content scrolls automatically, remains stationary, or follows other predefined scrolling behaviors.
   * Default value: physical
   */
  scrolling?: Scrolling | string;
  /**
   * Specifies the data field that should be used as the title, typically for labeling or displaying the main identifier of an item.
   * Default value: ""
   */
  titleField?: string;
}
/**
 CardView creates Card-based layout. Supports Filtering, Sorting, Grouping, Editing and UI Virtualization.
*/
export interface CardView extends BaseElement, CardViewProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a user applies a filter to the data set, typically by selecting filter criteria or options in the interface. It signals that the displayed data has been updated based on the chosen filter parameters, allowing developers to execute additional logic in response, such as refreshing the view or fetching new data.
	* @param event. The custom event.    */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a sorting action is performed on the data set, such as when a user updates the sorting order of a table or list by clicking on a column header or selecting a sort option.
	* @param event. The custom event.    */
  onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after the window has been successfully opened, allowing you to execute code in response to the window becoming visible and accessible to the user. It is typically used to initialize resources, update the user interface, or perform actions that should occur as soon as the window appears.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before the window is opened, giving you an opportunity to perform additional logic or checks. To prevent the window from opening, call event.preventDefault() within your event handler. If preventDefault() is not called, the window will open as usual. This allows you to control whether or not the window opening operation proceeds based on your custom criteria.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately when the window is closed by the user or programmatically, allowing scripts to execute any necessary cleanup operations or final actions before the window is terminated.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered just before the window begins the closing process. It gives developers an opportunity to perform actions or prompt the user before the window actually closes. If you want to prevent the window from closing—for example, to confirm with the user or save data—you can call event.preventDefault() inside the event handler function. This will cancel the default close operation and keep the window open.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button or starting a touch gesture. It signals the beginning of the card's movement, allowing developers to implement custom behavior such as visual feedback or updating drag-related state.
	* @param event. The custom event.    */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered continuously while the user is actively dragging the card element with their cursor or finger, allowing you to track the card's position and respond to movement in real time.
	* @param event. The custom event.    */
  onDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button (or touching and holding on a touchscreen) and then moving the card to a different position within the interface.
	* @param event. The custom event.    */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * Enables advanced filtering functionality, allowing users to refine and display data based on specific criteria such as category, date range, status, or custom attributes. This feature improves data navigation and helps users quickly locate relevant information.
   * @param {string[]} filters. Filter information
   * @param {string} operator?. Logical operator between the filters of different fields
   */
  addFilter(filters: string[], operator?: string): void;
  /**
   * Creates and inserts a new record into the database or data collection, initializing all required fields with the provided values.
   * @param {number | string} recordId?. The id of the record to add
   * @param {any} data?. The data of the record to add
   * @param {string} position?. The position to add the record to. Possible values: 'first' and 'last'.
   */
  addRecord(recordId?: number | string, data?: any, position?: string): void;
  /**
   * Enables sorting functionality, allowing users to arrange data in ascending or descending order based on specified fields or columns. This feature enhances the user experience by making it easier to organize, locate, and analyze information within lists or tables.
   * @param {[] | string} dataFields. The data field(s) to sort by
   * @param {[] | string} orderBy. The sort direction(s) to sort the data field(s) by
   */
  addSort(dataFields: [] | string, orderBy: [] | string): void;
  /**
   * Initiates an edit transaction, allowing changes to be made to the data. This operation typically marks the start of a sequence where modifications can be performed, and may require committing or canceling the changes to finalize or discard the edits.
   * @param {number | string} recordId. The id of the record to edit
   */
  beginEdit(recordId: number | string): void;
  /**
   * Terminates the ongoing edit session and reverts any unsaved changes, ensuring that all modifications made during the current operation are discarded and the original state is restored.
   */
  cancelEdit(): void;
  /**
   * Closes any currently open header panel, such as a dropdown menu or navigation panel, ensuring that all header-related overlays are hidden from view.
   */
  closePanel(): void;
  /**
   * Finalizes the current editing session by committing all modifications made and persisting the changes to the data source or storage.
   */
  endEdit(): void;
  /**
   * Ensures that a specified record is brought into view by automatically scrolling to its position on the page. If the operation is successful, the method returns the HTML element representing the card associated with that record, allowing for further manipulation or interaction within the DOM.
   * @param {number | string} recordId. The id of the record to scroll to
   * @returns {HTMLElement}
   */
  ensureVisible(recordId: number | string): HTMLElement;
  /**
   * Opens the "Customize Cards" dropdown panel, allowing users to access and modify card display settings.
   */
  openCustomizePanel(): void;
  /**
   * Displays the "Filter" header panel as a drop-down menu, allowing users to view and select filtering options for the current data set.
   */
  openFilterPanel(): void;
  /**
   * Displays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the current data view.
   */
  openSortPanel(): void;
  /**
   * Removes any active filters, displaying the full, unfiltered dataset.
   */
  removeFilter(): void;
  /**
   * Deletes a specific record from the database or data collection, permanently removing all associated data for that entry.
   * @param {number | string} recordId. The id of the record to remove
   */
  removeRecord(recordId: number | string): void;
  /**
   * Disables any active sorting on the data, reverting the items to their original order.
   */
  removeSort(): void;
  /**
   * Displays a single vertical column within the layout, typically used to organize content or interface elements in a structured manner. This column can contain text, images, or other components, and its appearance (such as width, alignment, and styling) can be customized through additional properties or CSS classes.
   * @param {string} dataField. The data field of the column
   */
  showColumn(dataField: string): void;
  /**
   * Applies sorting to the CardView based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of CardView sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.
   * @param {string} dataField. The data field of the column to sort, e.g., 'firstName'.
   * @param {string | null} sortOrder. Sort order to apply: 'asc' for ascending, 'desc' for descending, or null to remove sorting.
   */
  sortBy(dataField: string, sortOrder: string | null): void;
  /**
   * Enhances and applies custom filter criteria to a specific column within the cardview. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `cardview.setFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.
   * @param {string} dataField. The data field name of the column to filter, e.g., 'firstName'.
   * @param {string} filter. The filter expression(s) to apply. Examples include 'startsWith B', ['contains Andrew or contains Nancy'], or ['quantity', '<= 3 and >= 8']. Supported operators: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.
   */
  setFilter(dataField: string, filter: string): void;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

export interface CardViewColumn {
  /**
   * Sets or gets the column's data source bound field.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the column's data type.
   * Default value: string
   */
  dataType?: CardViewColumnDataType | string;
  /**
   * Sets or gets the column's icon. Expects CSS class name.
   * Default value: 
   */
  icon?: any;
  /**
   * Sets or gets the column's image visibility.
   * Default value: false
   */
  image?: boolean;
  /**
   * Sets or gets the text displayed in the column's header.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Sets or gets the column's format function.
   * Default value: null
   */
  formatFunction?: { (settings: { template?: string, column?: any, record?: any, value?: any }): any };
  /**
   * Sets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: {  NumberFormat: {  style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: {  DateTimeFormat: {  dateStyle: \'full\' }}''
   * Default value: [object Object]
   */
  formatSettings?: any;
}

/**Configures the grid's data source options, specifying how data should be loaded and managed when the <em>dataSource</em> property is assigned either an array of data objects or a remote data endpoint (URL). This includes settings for data retrieval, formatting, paging, sorting, and other data-related behaviors. */
export interface DataSourceSettings {
  /**
   * Sets or gets whether a column will be auto-generated.
   * Default value: false
   */
  autoGenerateColumns?: boolean;
  /**
   * Sets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.
   * Default value: ""
   */
  childrenDataField?: string;
  /**
   * Sets or gets the XML binding root.
   * Default value: ""
   */
  root?: string;
  /**
   * Sets or gets the XML binding root.
   * Default value: blackList
   */
  sanitizeHTML?: DataSourceSettingsSanitizeHTML | string;
  /**
   * Sets or gets the XML binding record.
   * Default value: ""
   */
  record?: string;
  /**
   * Sets or gets the data fields to group by.
   * Default value: []
   */
  groupBy?: string[];
  /**
   * Sets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string']
   * Default value: null
   */
  dataFields?: DataSourceSettingsDataField[];
  /**
   * Sets or gets whether the data source type.
   * Default value: array
   */
  dataSourceType?: DataSourceSettingsDataSourceType | string;
  /**
   * Sets or gets the dataAdapter's id
   * Default value: ""
   */
  id?: string;
  /**
   * Sets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
   * Default value: ""
   */
  keyDataField?: string;
  /**
   * Sets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
   * Default value: ""
   */
  parentDataField?: string;
  /**
   * Sets the 'mapChar' data field of the record
   * Default value: "."
   */
  mapChar?: string;
  /**
   * Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.
   * Default value: null
   */
  virtualDataSource?: any;
  /**
   * Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too
   * Default value: null
   */
  virtualDataSourceOnExpand?: any;
}

export interface DataSourceSettingsDataField {
  /**
   * Sets the dataField name.
   * Default value: ""
   */
  name?: string;
  /**
   * Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
   * Default value: ""
   */
  map?: string;
  /**
   * Sets the dataField type.
   * Default value: string
   */
  dataType?: DataSourceSettingsDataFieldDataType | string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-card-view"): CardView;
        querySelector(selectors: "smart-card-view"): CardView | null;
        querySelectorAll(selectors: "smart-card-view"): NodeListOf<CardView>;
        getElementsByTagName(qualifiedName: "smart-card-view"): HTMLCollectionOf<CardView>;
        getElementsByName(elementName: "smart-card-view"): NodeListOf<CardView>;
    }
}

/**Specifies the layout direction of the card cells, determining whether they are arranged horizontally (side by side) or vertically (stacked one above the other) within the container. This setting controls the visual organization of the cards. */
export declare type Orientation = 'horizontal' | 'vertical';
/**Sets or gets the column's data type. */
export declare type CardViewColumnDataType = 'string' | 'date' | 'boolean' | 'number' | 'array' | 'any';
/**Provides detailed information about the 'cover image fit' property, which defines how a cover image is resized or scaled to fit within its container. This property determines whether the image should fill, contain, cover, or be otherwise adjusted to cover the allotted space, often corresponding to CSS 'object-fit' values such as 'cover', 'contain', or 'fill'. */
export declare type CardViewCoverMode = 'fit' | 'crop';
/**Sets or gets the XML binding root. */
export declare type DataSourceSettingsSanitizeHTML = 'all' | 'blackList' | 'none';
/**Sets the dataField type. */
export declare type DataSourceSettingsDataFieldDataType = 'string' | 'date' | 'boolean' | 'number' | 'array' | 'any';
/**Sets or gets whether the data source type. */
export declare type DataSourceSettingsDataSourceType = 'array' | 'json' | 'xml' | 'csv' | 'tsv';
/**Sets or retrieves the position of the header section within the component. The header typically includes interactive elements such as the Customize, Filter, Sort, and Search buttons, allowing users to tailor the content display, apply filters, change sorting options, and perform searches. */
export declare type CardViewHeaderPosition = 'none' | 'top' | 'bottom';
/**Provides detailed configuration for how the element responds to user scrolling actions, specifying whether content scrolls automatically, remains stationary, or follows other predefined scrolling behaviors. */
export declare type Scrolling = 'physical' | 'virtual' | 'infinite' | 'deferred';
export interface CarouselProperties {
  /**
   * Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled. Otherwise, the specified value determines how animations are applied to the element.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * When this property is set to true, items will automatically switch at a default interval. If set to a specific number, it defines the custom timeout duration in milliseconds between each automatic switch. Note: This property only takes effect if the slideShow property is enabled.
   * Default value: false
   */
  autoPlay?: boolean;
  /**
   * This JSON file contains an array of objects, with each object representing a single item. Each item object supports the following properties:  label: A string that specifies the display name or title of the item.  content: A string containing the main textual content or description associated with the item.  image: A string containing the URL of an image that visually represents or is related to the item.  HTMLcontent: A string containing HTML markup to be rendered as part of the item's content. This allows for custom formatting or the inclusion of HTML elements within the item.All properties are optional unless otherwise noted, and can be combined as needed for each item. This structure is designed to provide flexibility for displaying rich, media-enhanced content in dynamic web interfaces.
   * Default value: 
   */
  dataSource?: any[];
  /**
   * Specifies the delay, in milliseconds, before transitioning to the next or previous slide after a navigation button is pressed. Navigation buttons function as repeat buttons: if the button is held down, the slide change operation will automatically repeat at this interval after the initial delay, allowing continuous navigation through the slides.
   * Default value: 200
   */
  delay?: number;
  /**
   * Determines whether the element is interactive and can be used by the user. If enabled, the element is active and accepts input or actions. If disabled, the element is inactive, typically appears visually distinct (e.g., grayed out), and does not respond to user interactions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * "Disabled the ability for users to navigate to an item by clicking on it when displayMode is set to 3d. By default, users can click on non-active items to navigate to them, but this behavior is now prevented in 3d mode."
   * Default value: false
   */
  disableItemClick?: boolean;
  /**
   * Specifies how the content is visually presented to the user by selecting the appropriate display mode (e.g., fullscreen, minimal-ui, standalone, or browser). This controls the appearance and user interface elements shown when the application or page is loaded.
   * Default value: default
   */
  displayMode?: CarouselDisplayMode | string;
  /**
   * Conceals the navigation buttons from the user interface, making them invisible and inaccessible to the user.
   * Default value: false
   */
  hideArrows?: boolean;
  /**
   * Hides the slide indicator panel, which visually displays the current active item within a slideshow or carousel, helping users identify which slide they are viewing. When enabled, this option removes that indicator from view.
   * Default value: false
   */
  hideIndicators?: boolean;
  /**
   * Allows customization of the accordion’s slide indicator panel by specifying a template. This property accepts either a string—representing the ID of an HTMLTemplateElement present in the DOM—or a direct reference to the HTMLTemplateElement itself. Using this property, you can define a custom appearance and structure for the indicator panel within the accordion component.
   * Default value: null
   */
  indicatorTemplate?: any;
  /**
   * Specifies the time interval, in milliseconds, between each automatic slide transition when the slideShow feature is enabled. This value controls how long each slide is displayed before moving to the next one during the slideshow.
   * Default value: 5000
   */
  interval?: number;
  /**
   * This property allows full customization of an item's rendered content. It accepts either a string specifying the ID of an existing HTMLTemplateElement in the DOM, or a direct reference to such an element. The template's content can include property bindings, enabling dynamic data insertion from the associated dataSource. This makes it possible to define complex layouts and bind data-driven values for each item using standard template syntax.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Enables or disables keyboard navigation for the component. When set to true, users can navigate between items using keyboard controls (such as arrow keys). By default, keyboard navigation is disabled, meaning users cannot move between items using the keyboard unless this option is activated.
   * Default value: false
   */
  keyboard?: boolean;
  /**
   * Sets or retrieves the unlockKey, a unique identifier or code required to access or activate the product’s features. This property allows you to assign a new unlock key to enable product functionality or obtain the currently assigned unlock key for verification purposes.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property, determining which set of localized messages or translations should be applied based on the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or adjust message strings before they are delivered to the application, enabling more flexible localization and message presentation.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Controls whether the item list loops continuously, restarting from the first item after reaching the last, or from the last item after reaching the first. If enabled, navigation wraps around instead of stopping at the end or beginning.
   * Default value: false
   */
  loop?: boolean;
  /**
   * Configures or retrieves an object containing localized strings used throughout the widget interface, such as labels, tooltips, and messages. This property works together with the locale property to support multiple languages, allowing developers to provide translations and customize text displayed to users based on their locale settings.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ":  Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * When an element is set to readonly, users can view its content but cannot modify, edit, or change its value. However, the element may still allow actions such as copying text, but any direct input, selection, or alteration by the user is disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that determines whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures proper support for locales that use right-to-left reading order.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * When the slideShow property is set to true, the carousel automatically transitions to the next slide without requiring user interaction. The duration between each automatic slide change is determined by the value of the interval property, which specifies the delay in milliseconds between transitions.
   * Default value: false
   */
  slideShow?: boolean;
  /**
   * Allows users to navigate to the previous or next slide by swiping left or right on touch-enabled devices. When this option is enabled, swipe gestures will move between slides. By default, swipe navigation is disabled, so users will not be able to change slides using swipe gestures unless this setting is enabled.
   * Default value: false
   */
  swipe?: boolean;
  /**
   * Specifies the theme to be applied to the element. The theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent visual design for the element throughout the application.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving focus, meaning users will be unable to focus on the element using keyboard navigation (such as the Tab key) or by clicking it.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Enables or disables the ability to navigate between slides using the mouse wheel. When set to true, users can switch slides by scrolling the mouse wheel. By default, this feature is turned off (disabled).
   * Default value: false
   */
  wheel?: boolean;
}
/**
 Carousel is a slideshow component for cycling through elements—images or slides of text
*/
export interface Carousel extends BaseElement, CarouselProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Triggered whenever the currently visible slide in the carousel or slider component changes, indicating that a new slide has entered the viewport and become active. This event occurs both when users navigate manually (e.g., via next/previous buttons or swipe gestures) and when slides change automatically (e.g., through autoplay functionality).
	* @param event. The custom event. Custom data event was created with: ev.detail(index, previousIndex)
   *  index - The index of the new active slide.
   *  previousIndex - The index of the previous slide that was active.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Triggered at the moment when the slide transition begins, indicating that the process of changing from the current slide to the next or previous slide has started. This event allows developers to execute custom actions right as the slide change is initiated, before the transition animation completes.
	* @param event. The custom event. Custom data event was created with: ev.detail(index, previousIndex)
   *  index - The index of the new active slide.
   *  previousIndex - The index of the previous slide that was active.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a leftward swipe gesture within the Carousel component, typically indicating a request to navigate to the next item or slide in the sequence.
	* @param event. The custom event.    */
  onSwipeleft?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a rightward swipe gesture within the Carousel component, typically indicating a request to navigate to the previous item. It allows you to execute custom logic in response to user interactions such as navigating through Carousel slides by swiping right.
	* @param event. The custom event.    */
  onSwiperight?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Advances the presentation by transitioning to the next slide in the sequence, updating the display to show the subsequent slide content.
   */
  next(): void;
  /**
   * Pauses the slideshow when the <strong>slideShow</strong> option is enabled, temporarily stopping the automatic progression of slides until resumed.
   */
  pause(): void;
  /**
   * Initiates the slide show playback when the <strong>slideShow</strong> option is set to <code>true</code>. This will automatically cycle through the slides according to the configured settings.
   */
  play(): void;
  /**
   * Advances the slideshow to display the previous slide in the sequence, allowing users to review content shown earlier.
   */
  prev(): void;
  /**
   * Navigates to a specific slide within the presentation or carousel by using the provided slide index. The index should correspond to the zero-based position of the desired slide.
   * @param {number} index. The index of the target slide.
   */
  slideTo(index: number): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-carousel"): Carousel;
        querySelector(selectors: "smart-carousel"): Carousel | null;
        querySelectorAll(selectors: "smart-carousel"): NodeListOf<Carousel>;
        getElementsByTagName(qualifiedName: "smart-carousel"): HTMLCollectionOf<Carousel>;
        getElementsByName(elementName: "smart-carousel"): NodeListOf<Carousel>;
    }
}

/**Specifies how the content is visually presented to the user by selecting the appropriate display mode (e.g., fullscreen, minimal-ui, standalone, or browser). This controls the appearance and user interface elements shown when the application or page is loaded. */
export declare type CarouselDisplayMode = 'default' | 'multiple' | '3d';
export interface ChartProperties {
  /**
   * Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled and no animation effects will be applied. For other supported values, the property enables the corresponding animation behavior.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the duration of the animation, in milliseconds. Acceptable values range from 0 to 5000 inclusive. If a value outside this range is provided, jqxChart will automatically revert the animation duration to its default setting.
   * Default value: 300
   */
  animationDuration?: number;
  /**
   * Specifies the color used for the chart’s background. Accepts any valid CSS color format, such as hexadecimal (e.g., '#DDFFE8'), RGB (e.g., 'rgb(221,255,232)'), or color names (e.g., 'lightgreen'). This property controls the area behind all chart elements, providing visual distinction or branding.
   * Default value: null
   */
  backgroundColor?: string | null;
  /**
   * Specifies the URL of an image to be used as the chart’s background. For example, setting this property to 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg' will display that image as the backdrop behind the chart elements. This allows you to customize the chart’s appearance with any image of your choice.
   * Default value: ""
   */
  backgroundImage?: string;
  /**
   * Defines the color of the chart's border. Accepts any valid CSS color value, such as a hexadecimal code (e.g., "#098700"), RGB, RGBA, HSL, or named color. This property allows you to customize the appearance of the chart's outline to match your application's design.
   * Default value: null
   */
  borderLineColor?: string | null;
  /**
   * Specifies the thickness, in pixels, of the chart’s border line. A higher value results in a thicker border around the chart area.
   * Default value: 1
   */
  borderLineWidth?: number;
  /**
   * Defines the main title displayed at the top of the chart, providing a concise summary or description of the chart's data or purpose.
   * Default value: "Caption"
   */
  caption?: string;
  /**
   * Specifies whether plotted elements that extend beyond the axis boundaries should be visually clipped (hidden) rather than drawn outside the plotting area. When enabled, any portion of the elements that overflows the axis limits will not be displayed.
   * Default value: true
   */
  clip?: boolean;
  /**
   * Defines the color palette used for rendering the chart elements. jqxChart supports 32 built-in color schemes, which can be specified by setting this property to a string value from 'scheme01' to 'scheme32'. Each scheme applies a predefined set of colors to series, data points, and chart backgrounds, allowing you to easily customize the chart's appearance.
   * Default value: scheme01
   */
  colorScheme?: ChartColorScheme | string;
  /**
   * Controls whether the columns in the series are displayed overlapping each other or spaced apart. When enabled, columns from different series will overlap along the category axis. When disabled, columns will be shown side by side without overlapping.
   * Default value: false
   */
  columnSeriesOverlap?: boolean;
  /**
   * Specifies the color of the crosshairs lines displayed on the chart. This property is only effective when the 'enableCrosshairs' option is set to 'true'. Use a valid CSS color value (e.g., hex, RGB, or color name) to customize the appearance of the crosshairs.
   * Default value: null
   */
  crosshairsColor?: string | null;
  /**
   * Specifies the dash pattern for the crosshairs lines by accepting a comma-separated sequence of numbers. Each number represents the length (in pixels) of dashes and gaps, alternating between line segments and spaces. For example, a value of "3,3" will create a dashed line with 3 pixels of line followed by 3 pixels of space, repeating along the length of the crosshair. This property is only effective when the "enableCrosshairs" property is set to true.
   * Default value: "2,2"
   */
  crosshairsDashStyle?: string;
  /**
   * Sets or retrieves the thickness (in pixels) of the crosshair lines displayed on the chart. This property is only effective when 'enableCrosshairs' is set to 'true'; otherwise, the crosshair lines will not be shown regardless of this value.
   * Default value: 1
   */
  crosshairsLineWidth?: number;
  /**
   * Specifies the data set to be used as the source for the chart, determining which values and categories will be displayed. This property should be assigned an array or object containing the chart’s data points.
   * Default value: 
   */
  dataSource?: any[];
  /**
   * Specifies the descriptive text that appears on the chart, providing context or additional information to help users understand the chart’s content and purpose.
   * Default value: "Description"
   */
  description?: string;
  /**
   * Determines whether the chart is visible and interactive. Set to true to display and activate the chart; set to false to deactivate it.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the custom drawing function for jqxChart. By setting this property, you can override the default rendering behavior of jqxChart and implement your own drawing logic. This allows you to customize how chart elements are displayed according to your specific requirements.
   * Default value: null
   */
  draw?: any;
  /**
   * Allows you to draw custom graphics on the chart canvas before rendering the caption and all other standard chart elements. Use this function to add background visuals, watermarks, or any additional graphics that should appear beneath the main chart components.
   * Default value: null
   */
  drawBefore?: any;
  /**
   * Specifies whether the animation effect for the axis labels (text displayed along the axes) is enabled or disabled. When set to true, the axis labels will animate during rendering or updates; when set to false, the labels will remain static.
   * Default value: false
   */
  enableAxisTextAnimation?: boolean;
  /**
   * Controls the visibility of crosshair lines on the chart. When enabled, vertical and/or horizontal lines appear as you hover over data points in line and area series, helping to highlight the precise location of your cursor in relation to the data. Disabling this option will hide these crosshair indicators.
   * Default value: false
   */
  enableCrosshairs?: boolean;
  /**
   * Specifies whether the chart should be rendered using greyscale colors instead of the default color palette. When enabled, all chart elements (such as bars, lines, or areas) will appear in shades of grey rather than in color.
   * Default value: false
   */
  greyScale?: boolean;
  /**
   * Specifies the arrangement of items within the legend, such as displaying them in a vertical stack, a horizontal row, or a custom configuration. This property determines how legend entries are organized and presented in the chart.
   * Default value: [object Object]
   */
  legendLayout?: any;
  /**
   * Sets or retrieves the unlockKey, a unique code or token required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the current key that allows authorized access.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works together with the messages property to display localized text and content based on the selected locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A comprehensive localization object that includes culture-specific properties necessary for accurately formatting currencies, numbers, dates, and other locale-dependent values according to regional conventions.
   * Default value: [object Object]
   */
  localization?: ChartLocalization;
  /**
   * Configures or retrieves an object containing all user-facing text strings displayed by the widget, enabling localization into different languages. This property is used together with the locale option to provide translated text based on the selected language, ensuring the widget’s interface adapts to users’ regional preferences.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * Specifies the amount of padding to apply to the left, top, right, and bottom sides of the Chart, creating space between the chart's content and its outer edges. This padding can be used to adjust the position of the chart elements and prevent them from overlapping with the chart's border or surrounding elements.
   * Default value: [object Object]
   */
  padding?: Padding;
  /**
   * Specifies the rendering engine responsible for displaying the chart. If this property is left as an empty string, jqxChart will automatically detect and select the most suitable rendering engine based on the browser’s capabilities (such as SVG, Canvas, or VML). This ensures optimal performance and compatibility across different browsers.
   * Default value: 
   */
  renderEngine?: ChartRenderEngine | string;
  /**
   * Gets or sets a boolean value that determines whether the chart's layout is displayed in a mirrored (reversed) orientation. When set to true, all chart elements, such as axes and data series, are rendered as a mirror image of the default layout.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * The 'seriesGroups' property defines the configuration for all data series displayed within the chart. jqxChart supports visualizing multiple series, even of different chart types, by organizing them into groups called "series groups." Each series group is an object within the 'seriesGroups' array, and allows you to configure a set of series that will share common settings, such as the chart type, value axis (Y-axis), and appearance options.Importantly, each series group can have its own independently configured value axis (Y-axis). This flexibility enables you to plot data series with different value ranges or units on the same chart, as each group’s Y-axis can be scaled and labeled differently. Additionally, you can mix different visualization types (such as 'line', 'area', or 'column')—for instance, displaying one group as lines while representing another as columns—providing richer and more informative data presentations.In summary, the 'seriesGroups' property is an array where:- Each element is an object defining a series group.- Each group specifies its chart type and contains its own array of series, along with settings for axes, styling, and more.- Multiple series groups enable the chart to display series of different types and with different Y-axis scales simultaneously.This property is essential for building complex and customizable charts that present heterogeneous data in a clear and visually compelling way.
   * Default value: 
   */
  seriesGroups?: ChartSeriesGroup[];
  /**
   * Specifies whether a visible border line should be rendered around the chart area. Set this option to true to display the border, or false to hide it.
   * Default value: true
   */
  showBorderLine?: boolean;
  /**
   * Specifies whether the chart series legend should be displayed or hidden. When set to true, the legend appears on the chart, providing information about each data series. When set to false, the legend is not shown, resulting in a cleaner chart without series labels.
   * Default value: true
   */
  showLegend?: boolean;
  /**
   * Controls the visibility of chart tooltips by enabling or disabling them. When enabled, informational tooltips appear when users hover over or interact with chart elements; when disabled, tooltips are hidden and no additional information is displayed on interaction.
   * Default value: true
   */
  showToolTips?: boolean;
  /**
   * Specifies whether to display a single, combined tooltip that presents information for all data series at the hovered data point, instead of individual tooltips for each series.
   * Default value: false
   */
  showToolTipsOnAllSeries?: boolean;
  /**
   * Specifies the default set of colors to be applied to various chart elements, including the background, lines, text, and bands. These colors will be automatically used for the corresponding components in the chart unless individually overridden, ensuring a consistent visual theme throughout the chart.
   * Default value: "light"
   */
  theme?: string;
  /**
   * Specifies the amount of space (padding) applied around the chart’s title (caption), controlling the distance between the title text and the edges of its container. This affects the overall appearance and readability of the chart title.
   * Default value: [object Object]
   */
  titlePadding?: Padding;
  /**
   * Specifies the background color of the tooltip element, which appears when a user hovers over or focuses on a target component. This setting determines the visual background behind the tooltip text.
   * Default value: null
   */
  toolTipBackground?: string | null;
  /**
   * Callback function that allows users to customize the formatting of tooltip text. This function receives relevant data and returns a formatted string or HTML to be displayed as the tooltip content.
   * Default value: null
   */
  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Specifies the duration, in milliseconds, to wait before hiding the tooltip after a user interaction (such as mouseleave or blur) occurs. This delay allows the tooltip to remain visible for a short period before disappearing, improving the user experience.
   * Default value: 4000
   */
  toolTipHideDelay?: number;
  /**
   * Specifies the color of the lines (borders or dividers) displayed within the tooltip, such as axis markers or grid lines, enhancing tooltip visibility and aesthetics. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color name).
   * Default value: null
   */
  toolTipLineColor?: string | null;
  /**
   * Specifies the delay, in milliseconds, before a tooltip appears after a triggering event (such as mouse hover or focus). Acceptable values range from 0 to 10,000 milliseconds (ms), where 0 shows the tooltip immediately and 10,000 sets a maximum delay of 10 seconds.
   * Default value: 300
   */
  toolTipShowDelay?: number;
  /**
   * An object containing configuration settings for the chart's y-axis (also known as the value axis). This includes options for labels, scaling, grid lines, tick marks, axis titles, formatting, and other properties that control the appearance and behavior of the y-axis.
   * Default value: [object Object]
   */
  valueAxis?: ChartValueAxis;
  /**
   * Configures the x-axis properties of the chart, including its scale, labels, formatting, and appearance. This determines how data is displayed horizontally on the chart.
   * Default value: [object Object]
   */
  xAxis?: ChartXAxis;
}
/**
 Chart is a feature-complete interactive graph library that answers the data visualization needs of any modern web app.
*/
export interface Chart extends BaseElement, ChartProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a user clicks on an annotation element within the chart. It allows developers to respond to user interactions with chart annotations, such as displaying additional information, modifying the annotation, or performing custom actions based on the selected annotation.
	* @param event. The custom event.    */
  onAnnotationClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * The event is triggered when the user positions the cursor over a chart annotation, such as a label, marker, or highlighted region, within the chart area. This event can be used to implement interactive features like displaying tooltips, highlighting the annotation, or providing additional contextual information related to the annotation being hovered.
	* @param event. The custom event.    */
  onAnnotationMouseenter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user's cursor moves outside the boundaries of a chart annotation. It allows developers to detect when the cursor leaves an annotation area, enabling actions such as hiding tooltips, resetting highlight effects, or performing cleanup tasks related to annotation interactions.
	* @param event. The custom event.    */
  onAnnotationMouseleave?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * The event is triggered when the user clicks on a series element within the chart. This allows developers to respond to user interactions with individual data points, such as displaying details, highlighting the selected element, or performing custom actions based on the clicked series element.
	* @param event. The custom event.    */
  onClick: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the user's cursor leaves or exits a specific series element within the chart. It can be used to detect when a user stops hovering over a particular data series, allowing you to perform actions such as hiding tooltips, resetting styles, or updating related interface elements.
	* @param event. The custom event.    */
  onMouseout: ((this: any, ev: Event) => any) | null;
  /**
   * The event is triggered when the user's cursor hovers over a series element, such as a bar, line, or data point, within the chart. This event typically occurs as soon as the cursor enters the boundary of a specific series element, allowing you to respond to user interactions like highlighting the element, displaying tooltips, or updating related UI components.
	* @param event. The custom event.    */
  onMouseover: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered after the position of the chart's range selector has changed and the chart has finished rendering. It allows you to perform additional actions or updates in response to user interactions with the range selector, ensuring that any changes occur only after the chart rendering is complete.
	* @param event. The custom event.    */
  onRangeSelectionChanged?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * The event is triggered whenever the position of the chart's range selector is modified, occurring just before the chart begins its rendering process. This allows you to intercept and handle any changes to the range selector position prior to the chart's visual update.
	* @param event. The custom event.    */
  onRangeSelectionChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * The event is triggered when the chart rendering process starts, indicating that the chart is about to be displayed but has not yet completed drawing. This event can be used to execute custom code or display a loading indicator at the beginning of the chart rendering sequence.
	* @param event. The custom event.    */
  onRefreshBegin?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the chart has completed rendering all of its visual elements and is fully displayed in the browser. At this point, the chart is ready for user interaction or for further manipulation through scripts.
	* @param event. The custom event.    */
  onRefreshEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a series in the chart is shown or hidden, either by a user clicking on the series label in the chart's legend or programmatically via an API call. The event allows you to respond to visibility changes of chart series, enabling custom behaviors or updates when users interact with the legend or when series visibility is modified through code.
	* @param event. The custom event.    */
  onToggle: ((this: any, ev: Event) => any) | null;
  /**
   * Enhances the application's color scheme functionality by allowing you to add a new color scheme. If a color scheme with the specified name already exists, this method updates its color values instead of creating a duplicate. This ensures seamless management and updating of color schemes within the application.
   * @param {string} schemeName. The name of the custom color scheme.
   * @param {any[]} colorsArray. An array of color values.
   */
  addColorScheme(schemeName: string, colorsArray: any[]): void;
  /**
   * Returns the list of colors associated with the specified color scheme name. If the specified scheme does not exist, the method returns undefined.
   * @param {string} schemeName. The name of the color scheme.
   * @returns {any[]}
   */
  getColorScheme(schemeName: string): any[];
  /**
   * Retrieves the on-screen (pixel) coordinates where a specific data point element is rendered within the visualization. This allows you to determine the exact position of the data point as displayed to the user.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex. Item (data point) index.
   * @returns 
   */
  getItemCoord(groupIndex: number, serieIndex: number, itemIndex: number): { x: number, y: number, width: number, height: number, center: number, centerOffset: number, innerRadius: number, outerRadius: number, selectedRadiusChange: number, fromAngle: number, toAngle: number, radius: number };
  /**
   * Retrieves the total count of items that have been rendered within a specified series. This includes only those items currently visible or present in the rendered output for the given series.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @returns {number}
   */
  getItemsCount(groupIndex: number, serieIndex: number): number;
  /**
   * Retrieves the computed coordinates (positions) and corresponding values of the labels displayed along the valueAxis after rendering. This includes the exact pixel positions and the label values as they appear on the axis within the rendered chart, allowing for precise placement and manipulation of these labels in the UI.
   * @param {number} groupIndex. Series group index.
   * @returns {any}
   */
  getValueAxisLabels(groupIndex: number): any;
  /**
   * Retrieves the pixel coordinates and dimensions (as a rectangle) of the value axis associated with a specified series group after rendering. This includes the axis's position (x, y) and size (width, height) within the chart area, enabling precise alignment, customization, or interaction with the value axis for the targeted series group.
   * @param {number} groupIndex. Series group index.
   * @returns {DOMRect}
   */
  getValueAxisRect(groupIndex: number): DOMRect;
  /**
   * Retrieves the current value of the vertical axis (valueAxis), which represents the data values plotted along the y-axis of the chart.
   * @param {number} offset. Vertical offset.
   * @param {number} groupIndex. Series group index.
   * @returns {any}
   */
  getValueAxisValue(offset: number, groupIndex: number): any;
  /**
   * Retrieves the calculated screen coordinates and corresponding values for each label displayed on the xAxis after rendering. This includes both the label text/value and its precise position within the rendered chart, enabling advanced positioning or custom interactions with the xAxis labels.
   * @param {number} groupIndex. Series group index.
   * @returns {any}
   */
  getXAxisLabels(groupIndex: number): any;
  /**
   * Retrieves the rendered bounding rectangle coordinates (position and dimensions) of the x-axis associated with a specified series group. This includes properties such as top, left, width, and height, allowing precise placement and measurement of the x-axis within the chart layout.
   * @param {number} groupIndex. Series group index.
   * @returns {DOMRect}
   */
  getXAxisRect(groupIndex: number): DOMRect;
  /**
   * Retrieves the current value or position of the xAxis (horizontal axis), representing the horizontal coordinate in the relevant context (such as a chart, graph, or UI component). This value typically corresponds to the data point's horizontal placement or the current state of the axis.
   * @param {number} offset. Horizontal offset.
   * @param {number} groupIndex. Series group index.
   * @returns {any}
   */
  getXAxisValue(offset: number, groupIndex: number): any;
  /**
   * Programmatically hides a chart series from view. This function produces the same effect as if the user manually unchecked the corresponding series in the chart's legend, making the series invisible on the chart without deleting its data.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex?. Item (data point) index. Applicable to pie and donut series only.
   */
  hideSerie(groupIndex: number, serieIndex: number, itemIndex?: number): void;
  /**
   * Hides the currently displayed tooltip, if one is visible, by removing it from view and ensuring it is no longer accessible to the user.
   * @param {number} hideDelay?. Hide delay.
   */
  hideToolTip(hideDelay?: number): void;
  /**
   * Generates a printer-friendly version of the current chart and sends it to the print dialog, allowing the user to print a physical copy or save it as a PDF.
   */
  print(): void;
  /**
   * Automatically updates and redraws the chart element to reflect the latest changes made to its properties or data, ensuring the displayed information is current and accurate.
   */
  refresh(): void;
  /**
   * Removes a specified color scheme from the system. If the color scheme with the given identifier does not exist, this method performs no action and does not produce an error.
   * @param {string} schemeName. The name of the custom color scheme.
   */
  removeColorScheme(schemeName: string): void;
  /**
   * Exports the current chart as a JPEG image file, capturing all visible chart elements and data in the image for easy sharing or saving.
   * @param {string} fileName?. File name.
   */
  saveAsJPEG(fileName?: string): void;
  /**
   * Exports the current chart, including all visual elements and data, as a PNG image file. This allows users to save or download a snapshot of the chart in a widely supported image format for sharing, reporting, or offline use.
   * @param {string} fileName?. File name.
   */
  saveAsPNG(fileName?: string): void;
  /**
   * Generates and exports the current chart content as a PDF file, preserving the chart’s layout, styles, and data for easy sharing or printing.
   * @param {string} fileName?. File name.
   * @param {string} pageOrientation?. PDF page orientation. <strong>Possible values:</strong> 'portrait' (default), 'landscape'.
   */
  saveAsPDF(fileName?: string, pageOrientation?: string): void;
  /**
   * Reveals a previously hidden chart series, making it visible on the chart. Calling this function programmatically has the same effect as a user manually selecting (checking) the corresponding legend item to display the series.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex?. Item (data point) index. Applicable to pie and donut series only.
   */
  showSerie(groupIndex: number, serieIndex: number, itemIndex?: number): void;
  /**
   * Displays a tooltip containing detailed information for a specific data point, typically when the user hovers over or selects that point on a chart or graph.
   * @param {number} groupIndex. Series group index.
   * @param {number} serieIndex. Series index.
   * @param {number} itemIndex. Item (data point) index.
   * @param {number} showDelay?. Show delay.
   * @param {number} hideDelay?. Hide delay.
   */
  showToolTip(groupIndex: number, serieIndex: number, itemIndex: number, showDelay?: number, hideDelay?: number): void;
  /**
   * Efficiently updates the values of the chart series in real-time without requiring a complete chart re-render. This method is ideal for animating and reflecting rapidly changing data, ensuring smooth visual transitions and better performance during frequent updates.
   */
  update(): void;
}

/**A comprehensive localization object that includes culture-specific properties necessary for accurately formatting currencies, numbers, dates, and other locale-dependent values according to regional conventions. */
export interface ChartLocalization {
  /**
   * A character used as a decimal separator to clearly distinguish the integer part from the fractional part of a numerical value, such as a period (“.”) in 3.14 or a comma (“,”) in 3,14, depending on locale.
   * Default value: "."
   */
  decimalSeparator?: string;
  /**
   * An object that defines various datetime formatting patterns, where each key represents a specific format type (e.g., ISO, short date, long date, time), and each value is the corresponding string pattern used to format or parse datetime values. These patterns can be utilized for consistent date and time representation throughout an application.
   * Default value: null
   */
  patterns?: any;
  /**
   * A symbol that serves as a separator to group digits in large numbers, distinguishing thousands, millions, billions, and higher orders of magnitude for improved readability (e.g., the comma in "1,000,000" or the space in "1 000 000").
   * Default value: ""
   */
  thousandsSeparator?: string;
}

/**Specifies the amount of padding to apply to the left, top, right, and bottom sides of the Chart, creating space between the chart's content and its outer edges. This padding can be used to adjust the position of the chart elements and prevent them from overlapping with the chart's border or surrounding elements. */
export interface Padding {
  /**
   * Specifies the amount of space (padding) added to the bottom edge of the chart, creating distance between the chart content and the lower boundary of the chart area. Adjusting this value can help prevent labels, data points, or other chart elements from overlapping with the bottom of the chart.
   * Default value: 5
   */
  bottom?: number;
  /**
   * Specifies the amount of space, in pixels, between the left edge of the chart and its content. This padding can help prevent chart elements from being cut off or overlapping with the chart's border.
   * Default value: 5
   */
  left?: number;
  /**
   * Specifies the amount of space added to the right side of the chart area, creating padding between the chart content and the chart’s right edge. This helps control the layout and prevents elements from being clipped or overlapping with the chart boundary.
   * Default value: 5
   */
  right?: number;
  /**
   * Specifies the amount of space (in pixels) added to the top of the chart, creating padding between the chart’s upper edge and its content or border. This helps control the visual separation and overall layout of the chart within its container.
   * Default value: 5
   */
  top?: number;
}

export interface ChartSeriesGroup {
  /**
   * An array of chart annotation objects.
   * Default value: null
   */
  annotations?: ChartAnnotation[];
  /**
   * Optional color bands dislayed in the chart's plot area.
   * Default value: null
   */
  bands?: ChartBand[];
  /**
   * Percentage gap between columns within the same serie.
   * Default value: 25
   */
  columnsGapPercent?: number;
  /**
   * Maximum width of columns in column series.
   * Default value: null
   */
  columnsMaxWidth?: number | null;
  /**
   * Minimum width of columns in column series.
   * Default value: 1
   */
  columnsMinWidth?: number;
  /**
   * Columns bottom width (as percentage of the total width).
   * Default value: 100
   */
  columnsBottomWidthPercent?: number;
  /**
   * Columns top width (as percentage of the total width).
   * Default value: 100
   */
  columnsTopWidthPercent?: number;
  /**
   * Determines the drawing function of the series group. When the property is set, you can draw after the series group has been plotted.
   * Default value: null
   */
  draw?: any;
  /**
   * Determines the data source of the serie
   * Default value: null
   */
  dataSource?: any;
  /**
   * Function for custom drawing before the series group.
   * Default value: null
   */
  drawBefore?: any;
  /**
   * Determines whether series are selectable.
   * Default value: true
   */
  enableSelection?: boolean;
  /**
   * Determines whether to toggle series visibility after click on a legend's box.
   * Default value: true
   */
  enableSeriesToggle?: boolean;
  /**
   * The end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
   * Default value: 360
   */
  endAngle?: number;
  /**
   * Callback function used to format series labels.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Object describing the format settings of series labels.
   * Default value: [object Object]
   */
  formatSettings?: ChartFormatSettings;
  /**
   * Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.
   * Default value: default
   */
  linesUnselectMode?: ChartUnselectMode | string;
  /**
   * Horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.
   * Default value: null
   */
  offsetX?: number;
  /**
   * Vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.
   * Default value: null
   */
  offsetY?: number;
  /**
   * Specifies the orientation of the series group.
   * Default value: vertical
   */
  orientation?: Orientation | string;
  /**
   * Specifies the summary of the series group.
   * Default value: ""
   */
  summary?: string;
  /**
   * When polar is set to true, the chart will render in polar coordinates.
   * Default value: false
   */
  polar?: boolean;
  /**
   * The radius of the polar coordinate system. Applicable to polar and spider charts only.
   * Default value: null
   */
  radius?: number;
  /**
   * An array of chart series.
   * Default value: 
   */
  series?: ChartSeriesGroupSerie[];
  /**
   * Percentage gap between columns belonging to different series.
   * Default value: 10
   */
  seriesGapPercent?: number;
  /**
   * Determines whether to display overlapping data points in column, ohlc and candlestick series.
   * Default value: true
   */
  skipOverlappingPoints?: boolean;
  /**
   * When showLabels is set to true, the chart will render pie labels.
   * Default value: true
   */
  showLabels?: boolean;
  /**
   * When spider is set to true, the chart will render in polar coordinates.
   * Default value: false
   */
  spider?: boolean;
  /**
   * The start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
   * Default value: 0
   */
  startAngle?: number;
  /**
   * Sets the chart type. jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, jqxChart supports the following series types:'column' - simple column series'stackedcolumn' - stacked column series'stackedcolumn100' - percentage stacked columns'rangecolumn' - floating column between two values'waterfall' - waterfall series'stackedwaterfall' - stacked waterfall series'line' - simple straight lines connecting the value points'stackedline' - stacked lines'stackedline100' - percentage stacked lines'spline' - smooth lines connecting the value points'stackedspline' - smooth stacked lines'stackedspline100' - percentage stacked smooth lines'stepline' - step line'stackedstepline' - stacked step line'stackedstepline100' - percentage stacked step line'area' - area connecting the value points with straight lines'stackedarea' - stacked area with straight lines between the points'stackedarea100' - percentage stacked area with straight lines between the points'rangearea' - floating area between pairs of value points'splinearea' - smooth area connecting the value points'stackedsplinearea' - stacked smooth area connecting the value points'stackedsplinearea100' - percentage stacked smooth area'splinerangearea' - smooth floating area between pairs of value points'steprangearea' - step area between pairs of value points'stackedsplineara' - smooth stacked area'steparea' - step area connecting the value points'stackedsteparea' - step stacked area'stackedsteparea100' - percentage stacked step area'pie' - circular chart divided into sectors, illustrating proportion'donut' - chart divided into circular sectors with different inner and outer radius'scatter' - data is displayed as a collection of points'stackedscatter' - data is displayed as a collection of points and the values are stacked'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked'bubble' - data is displayed as a collection of bubbles'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked'candlestick' - display candlestick series using open, high, low, close data points'ohlc' - display OHLC series using open, high, low, close data points
   * Default value: column
   */
  type?: ChartType | string;
  /**
   * Object describing the format settings of series tooltips.
   * Default value: [object Object]
   */
  toolTipFormatSettings?: ChartFormatSettings;
  /**
   * Sets the tooltip format function. The function is used to format the tooltips of the Chart serie
   * Default value: null
   */
  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Determines whether to use color gradients.
   * Default value: false
   */
  useGradientColors?: boolean;
  /**
   * Object describing the valueAxis for this group. jqxChart allows you to use a common valueAxis and/or multiple value axes per serie group.
   * Default value: [object Object]
   */
  valueAxis?: ChartValueAxis;
  /**
   * Object describing the xAxis for this group.
   * Default value: [object Object]
   */
  xAxis?: ChartXAxis;
}

export interface ChartAnnotation {
  /**
   * Fill/background color of the annotation.
   * Default value: null
   */
  fillColor?: string | null;
  /**
   * Height of the annotation.
   * Default value: null
   */
  height?: number;
  /**
   * Line color of the annotation.
   * Default value: null
   */
  lineColor?: string | null;
  /**
   * Custom offset of the annotation relative to xValue & yValue.
   * Default value: [object Object]
   */
  offset?: Offset;
  /**
   * Line path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'.
   * Default value: null
   */
  path?: string | null;
  /**
   * Radius of the annotation in case its type is 'circle'.
   * Default value: null
   */
  radius?: number;
  /**
   * Object describing the text of the annotation.
   * Default value: [object Object]
   */
  text?: ChartAnnotationText;
  /**
   * Shape type of the annotation.
   * Default value: null
   */
  type?: ChartAnnotationType | string;
  /**
   * Width of the annotation.
   * Default value: null
   */
  width?: number;
  /**
   * Value to determine the horizontal offset of the annotation.
   * Default value: null
   */
  xValue?: number;
  /**
   * Optional 2nd value to determine the horizontal offset of the annotation bottom-right point.
   * Default value: null
   */
  xValue2?: number;
  /**
   * Value to determine the vertical offset of the annotation.
   * Default value: null
   */
  yValue?: number;
  /**
   * Optional 2nd value to determine the vertical offset of the annotation's bottom-right point.
   * Default value: null
   */
  yValue2?: number;
}

/**Custom offset of the annotation relative to <strong>xValue</strong> & <strong>yValue</strong>. */
export interface Offset {
  /**
   * Horizontal offset.
   * Default value: null
   */
  x?: number | null;
  /**
   * Vertical offset.
   * Default value: null
   */
  y?: number | null;
}

/**Object describing the text of the annotation. */
export interface ChartAnnotationText {
  /**
   * Text rotation angle.
   * Default value: null
   */
  angle?: number;
  /**
   * CSS class of the annotation.
   * Default value: null
   */
  class?: string | null;
  /**
   * Inner text color (fill).
   * Default value: null
   */
  fillColor?: string | null;
  /**
   * Horizontal text alignment.
   * Default value: center
   */
  horizontalAlignment?: HorizontalAlignment | string;
  /**
   * Outer text color (stroke).
   * Default value: null
   */
  lineColor?: string | null;
  /**
   * Offset of the annotation text relative to the base annotation offset.
   * Default value: [object Object]
   */
  offset?: Offset;
  /**
   * Position to rotate the text around.
   * Default value: centermiddle
   */
  rotationPoint?: ChartRotationPoint | string;
  /**
   * Text of the annotation.
   * Default value: null
   */
  value?: string | null;
  /**
   * Vertical text alignment.
   * Default value: center
   */
  verticalAlignment?: VerticalAlignment | string;
}

export interface ChartBand {
  /**
   * Color used to fill the area between the minValue and the maxValue.
   * Default value: null
   */
  color?: string | null;
  /**
   * Dash style of the band lines. The style is a series of numbers indicating line length followed by space length.
   * Default value: null
   */
  dashStyle?: string | null;
  /**
   * Band line color.
   * Default value: null
   */
  lineColor?: string | null;
  /**
   * Band line width.
   * Default value: null
   */
  lineWidth?: string | number | null;
  /**
   * End value of the color band.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Start value of the color band.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Fraction indicating the fill opacity.
   * Default value: 1
   */
  opacity?: number;
}

/**Object describing the format settings of series labels. */
export interface ChartFormatSettings {
  /**
   * Optional date format string. This property is applicable only when displaying Date objects.
   * Default value: null
   */
  dateFormat?: string | null;
  /**
   * Decimal places of numeric values.
   * Default value: null
   */
  decimalPlaces?: number | null;
  /**
   * A symbol used to mark the border between the integer and fractional parts of a number. The default value is inherited from localization.decimalSeparator.
   * Default value: null
   */
  decimalSeparator?: string | null;
  /**
   * A boolean value indicating whether to display negative numbers in brackets.
   * Default value: false
   */
  negativeWithBrackets?: boolean;
  /**
   * Text to prepend to the value.
   * Default value: ""
   */
  prefix?: string;
  /**
   * Text to append to the value
   * Default value: ""
   */
  sufix?: string;
  /**
   * A symbol used to mark the border between thousands, millions, billions, etc. The default value is inherited from localization.thousandsSeparator.
   * Default value: null
   */
  thousandsSeparator?: string | null;
}

export interface ChartSeriesGroupSerie {
  /**
   * Offset from the center point in a pie/donut series.
   * Default value: 0
   */
  centerOffset?: number;
  /**
   * A custom function that returns the color of a data point. The function will receive the following parameters: dataValue, itemIndex, serie, group. The implementation of the function can return a single color which will be used as a fillColor and the other colors will be derived or it can return an object containing fillColor, fillColorSelected, etc.
   * Default value: null
   */
  colorFunction?: any;
  /**
   * Color palette to use when rendering the serie.
   * Default value: scheme01
   */
  colorScheme?: ChartColorScheme | string;
  /**
   * Name of the field in the data source.
   * Default value: "null"
   */
  dataField?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldClose?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldHigh?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldLow?: string;
  /**
   * Data field used in candlestcik and ohlc series.
   * Default value: "null"
   */
  dataFieldOpen?: string;
  /**
   * Data field used in in range column series as a start data field.
   * Default value: "null"
   */
  dataFieldFrom?: string;
  /**
   * Data field used in range column series as an end data field.
   * Default value: "null"
   */
  dataFieldTo?: string;
  /**
   * Data field used in bubble series.
   * Default value: "null"
   */
  radiusDataField?: string;
  /**
   * Name to display for this serie.
   * Default value: "null"
   */
  displayText?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextClose?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextHigh?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextLow?: string;
  /**
   * Name to display for candlestick and ohlc series.
   * Default value: "null"
   */
  displayTextOpen?: string;
  /**
   * Determines how to display value gaps in line series.
   * Default value: skip
   */
  emptyPointsDisplay?: ChartSeriesGroupSerieEmptyPointsDisplay | string;
  /**
   * Determines whether the serie is selectable.
   * Default value: true
   */
  enableSelection?: boolean;
  /**
   * Determines whether to toggle the series visibility after click on a legend's box.
   * Default value: true
   */
  enableSeriesToggle?: boolean;
  /**
   * Determines the labels rotation radius when the Chart is 'pie' or 'donut'.
   * Default value: 0
   */
  labelRadius?: number;
  /**
   * Callback function used to format the labels.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Object describing the format settings of the labels.
   * Default value: [object Object]
   */
  formatSettings?: ChartFormatSettings;
  /**
   * Specifies the summary of the series group.
   * Default value: ""
   */
  summary?: string;
  /**
   * Maximum angle in a pie, donut, polar and spider series.
   * Default value: 360
   */
  endAngle?: number;
  /**
   * Fill color for the serie.
   * Default value: null
   */
  fillColor?: string | null;
  /**
   * Alternating fill color for the serie. Applicable to OHLC series only.
   * Default value: null
   */
  fillColorAlt?: string | null;
  /**
   * Alternating fill color for the serie when selected. Applicable to OHLC series only.
   * Default value: null
   */
  fillColorAltSelected?: string | null;
  /**
   * Fill color for the serie when selected.
   * Default value: null
   */
  fillColorSelected?: string | null;
  /**
   * Fill color for the marker symbols in the serie.
   * Default value: null
   */
  fillColorSymbol?: string | null;
  /**
   * Fill color for the the marker symbols in serie when selected.
   * Default value: null
   */
  fillColorSymbolSelected?: string | null;
  /**
   * Determines whether to display the serie in grey scale.
   * Default value: false
   */
  greyScale?: boolean | null;
  /**
   * Determines whether to hide slices of toggled points in pie and donut series.
   * Default value: false
   */
  hiddenPointsDisplay?: boolean;
  /**
   * Initial angle in pie and donut series.
   * Default value: 0
   */
  initialAngle?: number;
  /**
   * Inner radius of donut series in pixels or percents.
   * Default value: 0
   */
  innerRadius?: number;
  /**
   * Object describing the labels properties of the axis.
   * Default value: undefined
   */
  labels?: ChartLabels;
  /**
   * Fill color of the legend box. The default value is inherited from the serie's color.
   * Default value: null
   */
  legendFillColor?: string | null;
  /**
   * Legend data formatting function for the values in the serie.
   * Default value: null
   */
  legendFormatFunction?: any;
  /**
   * Legend data formatting settings for the values in the serie.
   * Default value: [object Object]
   */
  legendFormatSettings?: ChartFormatSettings;
  /**
   * Line color of the legend box. The default value is inherited from the serie's color.
   * Default value: null
   */
  legendLineColor?: string | null;
  /**
   * Line color for the serie.
   * Default value: null
   */
  lineColor?: string | null;
  /**
   * Line color for the serie when selected.
   * Default value: null
   */
  lineColorSelected?: string | null;
  /**
   * Line color for the marker symbols in serie.
   * Default value: null
   */
  lineColorSymbol?: string | null;
  /**
   * Line color for the marker symbols in the serie when selected.
   * Default value: null
   */
  lineColorSymbolSelected?: string | null;
  /**
   * A string sequence of numbers represening line and space lengths, e.g. '2,2'.
   * Default value: null
   */
  lineDashStyle?: string | null;
  /**
   * Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.
   * Default value: default
   */
  linesUnselectMode?: ChartUnselectMode | string;
  /**
   * Determines the line tickness of the items in this serie.
   * Default value: null
   */
  lineWidth?: string | null | number;
  /**
   * Determines the line tickness of the items in this serie when selected.
   * Default value: null
   */
  lineWidthSelected?: string | null | number;
  /**
   * Min radius of bubble series in pixels or percents.
   * Default value: null
   */
  minRadius?: string | null | number;
  /**
   * Max radius of bubble series in pixels or percents.
   * Default value: null
   */
  maxRadius?: string | null | number;
  /**
   * Determines the opacity of the items in this serie.
   * Default value: 1
   */
  opacity?: number;
  /**
   * Outer radius of pie and donut series in pixels or percents.
   * Default value: null
   */
  radius?: number | null;
  /**
   * Radius change on selection of pie and donut series in pixels or percents.
   * Default value: null
   */
  selectedRadiusChange?: number | null;
  /**
   * Minimum angle in a pie, donut, polar and spider series.
   * Default value: 0
   */
  startAngle?: number;
  /**
   * Determines the size of the symbol element.
   * Default value: null
   */
  symbolSize?: number;
  /**
   * Determines the size of the symbol element. This property is applicable to line and area series only.
   * Default value: null
   */
  symbolSizeSelected?: number;
  /**
   * Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only.
   * Default value: none
   */
  symbolType?: ChartSymbolType | string;
  /**
   * Determines the tooltip's background.
   * Default value: null
   */
  toolTipBackground?: string | null;
  /**
   * Determines the tooltip's CSS class name.
   * Default value: null
   */
  toolTipClass?: string | null;
  /**
   * Tooltip data formatting function for the values in the serie.
   * Default value: null
   */
  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Tooltip data formatting settings for the values in the serie.
   * Default value: [object Object]
   */
  toolTipFormatSettings?: ChartFormatSettings;
  /**
   * Determines the tooltip's border lines color.
   * Default value: null
   */
  toolTipLineColor?: string | null;
  /**
   * Determines whether to use color gradients.
   * Default value: false
   */
  useGradientColors?: boolean;
}

/**Object describing the labels properties of the axis. */
export interface ChartLabels {
  /**
   * Text rotation angle.
   * Default value: 0
   */
  angle?: number;
  /**
   * boolean determining if auto rotation is enabled.
   * Default value: false
   */
  autoRotate?: boolean;
  /**
   * Labels background color.
   * Default value: null
   */
  backgroundColor?: string | null;
  /**
   * Labels background opacity.
   * Default value: 1
   */
  backgroundOpacity?: number | null;
  /**
   * Labels border line color.
   * Default value: null
   */
  borderColor?: string | null;
  /**
   * Labels border line opacity.
   * Default value: 1
   */
  borderOpacity?: number | null;
  /**
   * CSS class of the labels.
   * Default value: null
   */
  class?: string | null;
  /**
   * An array of custom values/offsets where a label will be displayed. Applicable only if labels.visible is set to 'custom'.
   * Default value: null
   */
  custom?: [] | null;
  /**
   * Callback function used to format the labels.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Object describing the format settings of the labels.
   * Default value: [object Object]
   */
  formatSettings?: ChartFormatSettings;
  /**
   * Horizontal labels alignment.
   * Default value: center
   */
  horizontalAlignment?: HorizontalAlignment | string;
  /**
   * Determines whether to use direct lines for the labels in pie/donut series.
   * Default value: true
   */
  linesAngles?: boolean;
  /**
   * Determines whether to use lines for the labels in pie/donut series.
   * Default value: true
   */
  linesEnabled?: boolean;
  /**
   * Labels offset.
   * Default value: [object Object]
   */
  offset?: Offset;
  /**
   * Object describing the padding of the labels.
   * Default value: [object Object]
   */
  padding?: Padding;
  /**
   * Radius of the labels in pie/donut series.
   * Default value: null
   */
  radius?: number | null;
  /**
   * Position to rotate the text around.
   * Default value: auto
   */
  rotationPoint?: ChartRotationPoint | string;
  /**
   * Interval steps between label placements (multiples of the axis unit interval).
   * Default value: null
   */
  step?: number | null;
  /**
   * Sets the interval between the labels.
   * Default value: null
   */
  unitInterval?: number;
  /**
   * Vertical labels alignment.
   * Default value: center
   */
  verticalAlignment?: VerticalAlignment | string;
  /**
   * Possible values: true, false, 'custom'.Determines the visibility of labels. When 'custom' is set, displays only custom values/offsets from the labels.custom array.
   * Default value: true
   */
  visible?: boolean | string;
}

/**Object describing the valueAxis for this group. jqxChart allows you to use a common valueAxis and/or multiple value axes per serie group. */
export interface ChartValueAxis {
  /**
   * Alternating background color between grid lines.
   * Default value: ""
   */
  alternatingBackgroundColor?: string;
  /**
   * Second alternating background color.
   * Default value: ""
   */
  alternatingBackgroundColor2?: string;
  /**
   * Opacity of the alternating background.
   * Default value: 1
   */
  alternatingBackgroundOpacity?: number;
  /**
   * Sets the size of the axis.
   * Default value: null
   */
  axisSize?: number | string | null;
  /**
   * Optional color bands dislayed in the chart's plot area.
   * Default value: null
   */
  bands?: ChartBand[];
  /**
   * Sets the baseline value for the axis.
   * Default value: 0
   */
  baselineValue?: any;
  /**
   * boolean determining whether to draw the axis or the user will use APIs to draw it.
   * Default value: false
   */
  customDraw?: boolean;
  /**
   * Sets the description of the value axis.
   * Default value: ""
   */
  description?: string;
  /**
   * Specifies whether the values axis is displayed.
   * Default value: true
   */
  displayValueAxis?: boolean;
  /**
   * Specifies whether the values are displayed in reverse order.
   * Default value: false
   */
  flip?: boolean;
  /**
   * Custom function to format the displayed values along the axis.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Settings used to format the displayed values along the axis.
   * Default value: [object Object]
   */
  formatSettings?: ChartFormatSettings;
  /**
   * Object describing the grid lines properties of the valueAxis.
   * Default value: [object Object]
   */
  gridLines?: ChartLines;
  /**
   * Object describing the labels properties of the axis.
   * Default value: [object Object]
   */
  labels?: ChartLabels;
  /**
   * Object describing the line properties of the axis.
   * Default value: [object Object]
   */
  line?: ChartLine;
  /**
   * Determines whether to use logarithmic scale.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Base for logarithmic scale.
   * Default value: 10
   */
  logarithmicScaleBase?: number;
  /**
   * Sets the maximum value of the valueAxis.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Sets the minimum value of the valueAxis.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Object describing the padding of the axis.
   * Default value: [object Object]
   */
  padding?: Padding;
  /**
   * Sets the axis position. The values 'left' and 'right' are available in the default case. If the valueAxis is horizontal, only 'top' and 'bottom' are available.
   * Default value: left
   */
  position?: AxisPosition | string;
  /**
   * Text rotation angle.
   * Default value: null
   */
  textRotationAngle?: number | null;
  /**
   * Value Axis Type
   * Default value: ""
   */
  type?: string;
  /**
   * Position to rotate the text around.
   * Default value: auto
   */
  textRotationPoint?: ChartRotationPoint | string;
  /**
   * Object describing the tick marks properties of the valueAxis.
   * Default value: [object Object]
   */
  tickMarks?: ChartLines;
  /**
   * Object describing the title of the valueAxis.
   * Default value: [object Object]
   */
  title?: ChartTitle;
  /**
   * Color of tick marks.
   * Default value: ""
   */
  tickMarksColor?: string;
  /**
   * Sets the interval between the units.
   * Default value: null
   */
  unitInterval?: number | null;
  /**
   * Specifies whether the axis values will be aligned with the tick marks.
   * Default value: true
   */
  valuesOnTicks?: boolean;
  /**
   * Shows or hides the valueAxis.
   * Default value: true
   */
  visible?: boolean;
}

/**Object describing the grid lines properties of the valueAxis. */
export interface ChartLines {
  /**
   * Color of the grid lines.
   * Default value: ""
   */
  color?: string;
  /**
   * An array of custom values/offsets where a grid line will be displayed. Applicable only if gridLines.visible is set to 'custom'.
   * Default value: null
   */
  custom?: [] | null;
  /**
   * Grid lines dash style, e.g. '2,2'.
   * Default value: ""
   */
  dashStyle?: string;
  /**
   * Line width (in pixels) of the grid lines.
   * Default value: 1
   */
  lineWidth?: string | number | null;
  /**
   * Size (in pixels) of the tick marks.
   * Default value: 4
   */
  size?: string | number | null;
  /**
   * Interval steps between grid line placements (multiples of the axis unit interval).
   * Default value: null
   */
  step?: number | null;
  /**
   * Sets the interval between the grid lines.
   * Default value: null
   */
  unitInterval?: number;
  /**
   * Possible values: true, false, 'custom'.Determines the visibility of grid lines. When 'custom' is set, displays only custom values/offsets from the gridLines.custom array.
   * Default value: true
   */
  visible?: boolean | string;
}

/**Object describing the line properties of the axis. */
export interface ChartLine {
  /**
   * Color of axis line.
   * Default value: ""
   */
  color?: string;
  /**
   * Line dash style, e.g. '2,2'. The default is inherited from gridLines.dashStyle.
   * Default value: ""
   */
  dashStyle?: string;
  /**
   * Line width. The default is inherited from gridLines.lineWidth.
   * Default value: 1
   */
  lineWidth?: number;
  /**
   * boolean determining the visibility of the axis line.
   * Default value: true
   */
  visible?: boolean;
}

/**Object describing the title of the valueAxis. */
export interface ChartTitle {
  /**
   * CSS class of the title text.
   * Default value: null
   */
  class?: string | null;
  /**
   * Horizontal alignment.
   * Default value: center
   */
  horizontalAlignment?: HorizontalAlignment | string;
  /**
   * Text of the title.
   * Default value: ""
   */
  text?: string;
  /**
   * Vertical alignment.
   * Default value: center
   */
  verticalAlignment?: VerticalAlignment | string;
  /**
   * boolean determining the visibility of the title.
   * Default value: true
   */
  visible?: boolean;
}

/**Object describing the xAxis for this group. */
export interface ChartXAxis {
  /**
   * Alternating background color between grid lines.
   * Default value: ""
   */
  alternatingBackgroundColor?: string;
  /**
   * Second alternating background color.
   * Default value: ""
   */
  alternatingBackgroundColor2?: string;
  /**
   * Opacity of the alternating background.
   * Default value: 1
   */
  alternatingBackgroundOpacity?: number;
  /**
   * Sets the size of the xAxis.
   * Default value: null
   */
  axisSize?: number | string | null;
  /**
   * Optional color bands dislayed in the chart's plot area.
   * Default value: null
   */
  bands?: ChartBand[];
  /**
   * The base unit when used with 'date' axis.
   * Default value: null
   */
  baseUnit?: ChartBaseUnit | null | string;
  /**
   * boolean determining whether to draw the axis or the user will use APIs to draw it.
   * Default value: false
   */
  customDraw?: boolean;
  /**
   * Points to a data field in the data source.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Optional date format for parsing the data from the data source. Applicable when xAxis.type is set to 'date'.
   * Default value: null
   */
  dateFormat?: string | null;
  /**
   * Optional custom xAxis display text.
   * Default value: null
   */
  displayText?: string | null;
  /**
   * Specifies whether the values are displayed in reverse order.
   * Default value: false
   */
  flip?: boolean;
  /**
   * Custom function to format the displayed values along the axis.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Settings used to format the displayed values along the axis.
   * Default value: [object Object]
   */
  formatSettings?: ChartFormatSettings;
  /**
   * Object describing the grid lines properties of the xAxis.
   * Default value: [object Object]
   */
  gridLines?: ChartLines;
  /**
   * Object describing the labels properties of the axis.
   * Default value: [object Object]
   */
  labels?: ChartLabels;
  /**
   * Object describing the line properties of the axis.
   * Default value: [object Object]
   */
  line?: ChartLine;
  /**
   * Determines whether to use logarithmic scale.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Base for logarithmic scale.
   * Default value: 10
   */
  logarithmicScaleBase?: number;
  /**
   * Sets the maximum value of the xAxis.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Sets the minimum value of the xAxis.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Object describing the padding of the axis.
   * Default value: [object Object]
   */
  padding?: Padding;
  /**
   * Sets the axis position. The values 'bottom' and 'top' are available in the default case. If the xAxis is vertical, only 'left' and 'right' are available.
   * Default value: bottom
   */
  position?: AxisPosition | string;
  /**
   * Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.
   * Default value: [object Object]
   */
  rangeSelector?: ChartRangeSelector;
  /**
   * xAxis's text value.
   * Default value: ""
   */
  text?: string;
  /**
   * Text rotation angle.
   * Default value: null
   */
  textRotationAngle?: number | null;
  /**
   * Position to rotate the text around.
   * Default value: auto
   */
  textRotationPoint?: ChartRotationPoint | string;
  /**
   * Object describing the tick marks properties of the xAxis.
   * Default value: [object Object]
   */
  tickMarks?: ChartLines;
  /**
   * Object describing the title of the xAxis.
   * Default value: [object Object]
   */
  title?: ChartTitle;
  /**
   * Custom function to format xAxis values in tooltips.
   * Default value: null
   */
  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Settings used to format xAxis values in tooltips.
   * Default value: [object Object]
   */
  toolTipFormatSettings?: ChartFormatSettings;
  /**
   * The type of the axis. 'auto' - automatically detects and switches to 'basic', 'linear' or 'date'.'date' - when displaying dates.'basic' - displays all data points sequentially.'linear' - linear arrangement by the value of the xAxis data field.
   * Default value: auto
   */
  type?: ChartXAxisType | string;
  /**
   * Sets the interval between the units.
   * Default value: null
   */
  unitInterval?: number | null;
  /**
   * Specifies whether the axis values will be aligned with the tick marks.
   * Default value: true
   */
  valuesOnTicks?: boolean;
  /**
   * Shows or hides the xAxis.
   * Default value: true
   */
  visible?: boolean;
}

/**Definition of a range selector on the xAxis. The range selector itself is also an instance of ${namespace.toLowerCase()}-chart. */
export interface ChartRangeSelector {
  /**
   * Sets the range selector chart's background color.
   * Default value: null
   */
  backgroundColor?: string | null;
  /**
   * Sets the range selector chart's background image.
   * Default value: ""
   */
  backgroundImage?: string;
  /**
   * The base unit when used with 'date' axis.
   * Default value: null
   */
  baseUnit?: ChartBaseUnit | null | string;
  /**
   * Sets the range selector chart's border color.
   * Default value: null
   */
  borderLineColor?: string | null;
  /**
   * Sets the range selector chart's border line width.
   * Default value: null
   */
  borderLineWidth?: number | null;
  /**
   * Sets the caption (title) of the range selector chart.
   * Default value: ""
   */
  caption?: string;
  /**
   * Sets the range selector chart's color pallete. jqxChart suppports 32 color schemes from 'scheme01' to 'scheme32'.
   * Default value: scheme01
   */
  colorScheme?: ChartColorScheme | string;
  /**
   * Enables or disables overlapping of the column series.
   * Default value: false
   */
  columnSeriesOverlap?: boolean;
  /**
   * Percentage gap between columns within the same serie.
   * Default value: 25
   */
  columnsGapPercent?: number;
  /**
   * Points to a data field in the data source.
   * Default value: null
   */
  dataField?: string | null;
  /**
   * Sets the description text of the range selector chart.
   * Default value: ""
   */
  description?: string;
  /**
   * Determines whether to display the range selector chart using greyscale colors.
   * Default value: false
   */
  greyScale?: boolean | null;
  /**
   * Object describing the grid lines properties of the range selector chart's xAxis.
   * Default value: [object Object]
   */
  gridLines?: ChartLines;
  /**
   * Callback function used to format the values.
   * Default value: null
   */
  formatFunction?: {(value?: any, index?: number, series?: any): string};
  /**
   * Chart Format Settings
   * Default value: null
   */
  formatSettings?: any;
  /**
   * Object describing the labels properties of the axis.
   * Default value: [object Object]
   */
  labels?: ChartLabels;
  /**
   * Sets the maximum value of the range selector chart's xAxis.
   * Default value: NaN
   */
  maxValue?: any;
  /**
   * Sets the minimum value of the range selector chart's xAxis.
   * Default value: NaN
   */
  minValue?: any;
  /**
   * Object describing the padding of the range selector chart.
   * Default value: [object Object]
   */
  padding?: Padding;
  /**
   * Sets the range selector chart position.
   * Default value: left
   */
  position?: AxisPosition | string;
  /**
   * An HTML element outside the chart to render the range selector chart to.
   * Default value: null
   */
  renderTo?: HTMLElement | null;
  /**
   * Sets or gets a value indicating whether the range selector chart's layout is mirrored.
   * Default value: false
   */
  rightToLeft?: boolean | null;
  /**
   * Percentage gap between columns belonging to different series.
   * Default value: 10
   */
  seriesGapPercent?: number;
  /**
   * (Optional) The seriesGroups property is used to describe all series displayed on the range selector chart.Please refer to the main seriesGroups property entry for more information and a full subproperty list.
   * Default value: null
   */
  seriesGroups?: [] | null;
  /**
   * Sets the range selector chart type. jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, jqxChart supports the following series types:'column' - simple column series'stackedcolumn' - stacked column series'stackedcolumn100' - percentage stacked columns'rangecolumn' - floating column between two values'waterfall' - waterfall series'stackedwaterfall' - stacked waterfall series'line' - simple straight lines connecting the value points'stackedline' - stacked lines'stackedline100' - percentage stacked lines'spline' - smooth lines connecting the value points'stackedspline' - smooth stacked lines'stackedspline100' - percentage stacked smooth lines'stepline' - step line'stackedstepline' - stacked step line'stackedstepline100' - percentage stacked step line'area' - area connecting the value points with straight lines'stackedarea' - stacked area with straight lines between the points'stackedarea100' - percentage stacked area with straight lines between the points'rangearea' - floating area between pairs of value points'splinearea' - smooth area connecting the value points'stackedsplinearea' - stacked smooth area connecting the value points'stackedsplinearea100' - percentage stacked smooth area'splinerangearea' - smooth floating area between pairs of value points'steprangearea' - step area between pairs of value points'stackedsplineara' - smooth stacked area'steparea' - step area connecting the value points'stackedsteparea' - step stacked area'stackedsteparea100' - percentage stacked step area'pie' - circular chart divided into sectors, illustrating proportion'donut' - chart divided into circular sectors with different inner and outer radius'scatter' - data is displayed as a collection of points'stackedscatter' - data is displayed as a collection of points and the values are stacked'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked'bubble' - data is displayed as a collection of bubbles'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked'candlestick' - display candlestick series using open, high, low, close data points'ohlc' - display OHLC series using open, high, low, close data points
   * Default value: area
   */
  serieType?: ChartType | string;
  /**
   * Determines whether to display the range selector chart's border line.
   * Default value: false
   */
  showBorderLine?: boolean | null;
  /**
   * Sets the size of the range selector chart.
   * Default value: null
   */
  size?: number | null;
  /**
   * Determines whether to display overlapping data points in column, ohlc and candlestick series.
   * Default value: true
   */
  skipOverlappingPoints?: boolean;
  /**
   * Sets the padding of the chart's title (caption).
   * Default value: [object Object]
   */
  titlePadding?: Padding;
  /**
   * Sets the interval between the units.
   * Default value: null
   */
  unitInterval?: number | null;
  /**
   * An object with settings about the range selector Chart's y-axis (value axis).
   * Default value: [object Object]
   */
  valueAxis?: ChartValueAxis;
  /**
   * Shows or hides the range selector.
   * Default value: false
   */
  visible?: boolean;
}

declare global {
    interface Document {
        createElement(tagName: "smart-chart"): Chart;
        querySelector(selectors: "smart-chart"): Chart | null;
        querySelectorAll(selectors: "smart-chart"): NodeListOf<Chart>;
        getElementsByTagName(qualifiedName: "smart-chart"): HTMLCollectionOf<Chart>;
        getElementsByName(elementName: "smart-chart"): NodeListOf<Chart>;
    }
}

/**Sets the range selector chart's color pallete. jqxChart suppports 32 color schemes from 'scheme01' to 'scheme32'. */
export declare type ChartColorScheme = 'scheme01' | 'scheme02' | 'scheme03' | 'scheme04' | 'scheme05' | 'scheme06' | 'scheme07' | 'scheme08' | 'scheme09' | 'scheme10' | 'scheme11' | 'scheme12' | 'scheme13' | 'scheme14' | 'scheme15' | 'scheme16' | 'scheme17' | 'scheme18' | 'scheme19' | 'scheme20' | 'scheme21' | 'scheme22' | 'scheme23' | 'scheme24' | 'scheme25' | 'scheme26' | 'scheme27' | 'scheme28' | 'scheme29' | 'scheme30' | 'scheme31' | 'scheme32' | 'custom';
/**Specifies the rendering engine responsible for displaying the chart. If this property is left as an empty string, jqxChart will automatically detect and select the most suitable rendering engine based on the browser’s capabilities (such as SVG, Canvas, or VML). This ensures optimal performance and compatibility across different browsers. */
export declare type ChartRenderEngine = null | 'SVG' | 'HTML5';
/**Horizontal alignment. */
export declare type HorizontalAlignment = 'left' | 'center' | 'right';
/**Position to rotate the text around. */
export declare type ChartRotationPoint = 'auto' | 'left' | 'center' | 'right' | 'topleft' | 'topcenter' | 'topright' | 'bottomleft' | 'bottomcenter' | 'bottomright' | 'centermiddle';
/**Vertical alignment. */
export declare type VerticalAlignment = 'top' | 'center' | 'bottom';
/**Shape type of the annotation. */
export declare type ChartAnnotationType = 'text' | 'rect' | 'circle' | 'line' | 'path' | 'null';
/**Determines how line and area series are unselected based on mouse and touch events. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart. */
export declare type ChartUnselectMode = 'click' | 'default';
/**Determines how to display value gaps in line series. */
export declare type ChartSeriesGroupSerieEmptyPointsDisplay = 'connect' | 'skip' | 'zero';
/**Determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only. */
export declare type ChartSymbolType = 'none' | 'circle' | 'square' | 'diamond' | 'triangle_up' | 'triangle_down' | 'triangle_left' | 'triangle_right';
/**Sets the range selector chart type. jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently, jqxChart supports the following series types:'column' - simple column series
'stackedcolumn' - stacked column series
'stackedcolumn100' - percentage stacked columns
'rangecolumn' - floating column between two values
'waterfall' - waterfall series
'stackedwaterfall' - stacked waterfall series
'line' - simple straight lines connecting the value points
'stackedline' - stacked lines
'stackedline100' - percentage stacked lines
'spline' - smooth lines connecting the value points
'stackedspline' - smooth stacked lines
'stackedspline100' - percentage stacked smooth lines
'stepline' - step line
'stackedstepline' - stacked step line
'stackedstepline100' - percentage stacked step line
'area' - area connecting the value points with straight lines
'stackedarea' - stacked area with straight lines between the points
'stackedarea100' - percentage stacked area with straight lines between the points
'rangearea' - floating area between pairs of value points
'splinearea' - smooth area connecting the value points
'stackedsplinearea' - stacked smooth area connecting the value points
'stackedsplinearea100' - percentage stacked smooth area
'splinerangearea' - smooth floating area between pairs of value points
'steprangearea' - step area between pairs of value points
'stackedsplineara' - smooth stacked area
'steparea' - step area connecting the value points
'stackedsteparea' - step stacked area
'stackedsteparea100' - percentage stacked step area
'pie' - circular chart divided into sectors, illustrating proportion
'donut' - chart divided into circular sectors with different inner and outer radius
'scatter' - data is displayed as a collection of points
'stackedscatter' - data is displayed as a collection of points and the values are stacked
'stackedscatter100' - data is displayed as a collection of points and the values are percentage stacked
'bubble' - data is displayed as a collection of bubbles
'stackedbubble' - data is displayed as a collection of bubbles and the values are stacked
'stackedbubble100' - data is displayed as a collection of bubbles and the values are percentage stacked
'candlestick' - display candlestick series using open, high, low, close data points
'ohlc' - display OHLC series using open, high, low, close data points
 */
export declare type ChartType = 'column' | 'stackedcolumn' | 'stackedcolumn100' | 'rangecolumn' | 'waterfall' | 'stackedwaterfall' | 'line' | 'stackedline' | 'stackedline100' | 'spline' | 'stackedspline' | 'stackedspline100' | 'stepline' | 'stackedstepline' | 'stackedstepline100' | 'area' | 'stackedarea' | 'stackedarea100' | 'rangearea' | 'splinearea' | 'stackedsplinearea' | 'stackedsplinearea100' | 'splinerangearea' | 'steprangearea' | 'stackedsplineara' | 'steparea' | 'stackedsteparea' | 'stackedsteparea100' | 'pie' | 'donut' | 'scatter' | 'stackedscatter' | 'stackedscatter100' | 'bubble' | 'stackedbubble' | 'stackedbubble100' | 'candlestick' | 'ohlc';
/**Sets the range selector chart position. */
export declare type AxisPosition = 'bottom' | 'top' | 'left' | 'right';
/**The base unit when used with 'date' axis. */
export declare type ChartBaseUnit = null | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
/**The type of the axis. 'auto' - automatically detects and switches to 'basic', 'linear' or 'date'.
'date' - when displaying dates.
'basic' - displays all data points sequentially.
'linear' - linear arrangement by the value of the xAxis data field.
 */
export declare type ChartXAxisType = 'auto' | 'date' | 'basic' | 'linear';
export interface CheckBoxProperties {
  /**
   * Specifies the animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' will disable all animations; assigning other valid values will enable the corresponding animation effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Sets or retrieves the checked state of the component. If set to true, the component appears checked (selected); if false, it appears unchecked. Useful for managing selection or toggle controls such as checkboxes or radio buttons.
   * Default value: false
   */
  checked?: boolean;
  /**
   * Specifies the area or region of the element that users can interact with to expand, collapse, or toggle its state. This property defines which part of the element responds to toggle actions, such as clicks or taps.
   * Default value: both
   */
  checkMode?: CheckMode | string;
  /**
   * Specifies how the checkbox responds to user click interactions, such as toggling its checked state or triggering related events.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Determines whether the checkbox is interactive or not. When set to true, the checkbox is enabled and the user can select or deselect it. When set to false, the checkbox is disabled, preventing any user interaction.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the HTML markup contained within the element. When set, it updates the element’s contents by parsing the specified HTML string and replacing any existing child nodes. When accessed, it returns a string representing the element’s current HTML content.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Specifies or retrieves the unlockKey used to activate or grant access to the product. This key serves as a security credential required to unlock and use the product’s features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., 'en', 'fr') used for localization. This property works together with the messages property to select and display the appropriate set of localized messages based on the specified language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom formatting logic for messages returned by the Localization Module. Use this to adjust message content, structure, or variables before the final output is presented to the user.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized strings used throughout the widget’s interface. This property allows you to customize the text displayed by the widget for different languages or regions. It works in conjunction with the locale property, which determines the current language, ensuring that the appropriate set of strings is applied based on the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ":  Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element’s name attribute. The name attribute identifies form elements when submitting HTML forms, allowing their values to be sent to the server as key-value pairs. This is essential for server-side processing of form data.
   * Default value: """"
   */
  name?: string;
  /**
   * When the element is set to readonly, users can view its content but are unable to modify or edit it. However, the element may still receive focus and allow text selection or copying, depending on the element's type and browser behavior. User interaction that changes the value or state of the element is disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that determines whether the element’s layout is aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, ensuring proper text direction and alignment for users in those locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * When set to true, the element is rendered non-focusable, meaning it cannot receive keyboard or programmatic focus. This prevents users from navigating to the element using the keyboard (e.g., with the Tab key) or through scripts.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the element’s visual appearance, including colors, fonts, and overall style, ensuring a consistent and cohesive look throughout the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Retrieves the current value of the element or assigns a new value to it. This property allows you to programmatically read or update the element’s value—for example, reading user input from a form field or setting a default value dynamically.
   * Default value: """"
   */
  value?: string;
}
/**
 Checkbox is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys.
*/
export interface CheckBox extends BaseElement, CheckBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the widget's checked state changes, such as when the user selects or deselects (checks or unchecks) the widget. It allows you to respond dynamically whenever the widget transitions between checked and unchecked states.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, changeType)
   *  value - A boolean value indicating the new state of the button ( checked or not ).
   *  oldValue - A boolean value indicating the previous state of the button ( checked or not ).
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the widget's checked state changes from unchecked to checked, such as when a user selects or activates the widget. It allows you to execute custom logic in response to the widget being checked.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the widget transitions from a checked (selected) state to an unchecked (deselected) state, indicating that the user has cleared or deselected the widget (e.g., by unchecking a checkbox or turning off a toggle switch).
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onUncheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-check-box"): CheckBox;
        querySelector(selectors: "smart-check-box"): CheckBox | null;
        querySelectorAll(selectors: "smart-check-box"): NodeListOf<CheckBox>;
        getElementsByTagName(qualifiedName: "smart-check-box"): HTMLCollectionOf<CheckBox>;
        getElementsByName(elementName: "smart-check-box"): NodeListOf<CheckBox>;
    }
}

/**Specifies the area or region of the element that users can interact with to expand, collapse, or toggle its state. This property defines which part of the element responds to toggle actions, such as clicks or taps. */
export declare type CheckMode = 'both' | 'input' | 'label';
export interface CheckInputProperties {
  /**
   * Specifies or retrieves the current animation mode. When the property is set to 'none', all animation effects are disabled, resulting in instant transitions without visual motion. For other values, the property enables different types of animations, which govern how elements transition or change states on the interface.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the dropdown menu with autocomplete suggestions after the user begins typing. This delay helps control how quickly the matches appear, improving performance and user experience by preventing the dropdown from opening immediately with every keystroke.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Specifies the source of data that populates the Input component. The dataSource property accepts one of the following:- 'Array of primitive values': An array consisting of strings or numbers, where each element represents a list item.- 'Array of objects': An array of objects, where each object defines the properties of a list item—typically using keys such as label for display text and value for the underlying value.- 'Callback function': A function that, when called, returns either of the above array formats (strings, numbers, or objects).This flexibility allows you to provide static data inline, transform or fetch data dynamically, and customize which properties represent the list items.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Specifies whether the element is interactive and can accept user input. When enabled, the element is fully functional; when disabled, the element is rendered inactive and does not respond to user actions such as clicks, typing, or focus.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the placement of the dropdown button relative to its parent element (e.g., top, bottom, left, or right). This setting controls where the dropdown button will appear in the user interface.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. You can override the default behavior by explicitly setting a height value, otherwise the component will use the CSS variable to control its height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by a corresponding CSS variable. If a value is provided, it will override the CSS variable and explicitly set the width of the dropdown. This allows for flexible customization of the dropdown's appearance through either direct property assignment or external styling.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies the intended purpose of the input field and determines whether the user’s browser (user agent) is permitted to offer automated autofill suggestions when the input appears within a form. This attribute provides guidance to the browser about the type of information that should be entered, enhancing both user experience and data accuracy by suggesting relevant values. It corresponds to the standard HTML autocomplete attribute, which can accept a variety of predefined values such as 'on' (to enable autofill), 'off' (to disable autofill), 'name' (for personal names), 'organization' (for company names), 'street-address' (for addresses), and many others. By setting this attribute appropriately, developers can improve form usability and help browsers provide more accurate suggestions based on the expected input type.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the maximum number of matching items to display in the dropdown list when a new autoComplete query is performed. By default, up to 8 items will be shown in the dropdown. If the total number of matched items exceeds this limit, only the first 8 results will be visible to the user. Adjust this value to control how many suggestions are presented at once in the dropdown interface.
   * Default value: 8
   */
  items?: number;
  /**
   * Defines the unlockKey property, which stores the unique key required to unlock and access the product. Use this property to set a new unlock key or retrieve the current unlock key associated with the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which language-specific messages from the messages property are displayed. Changing the language will update the content shown to the user based on the corresponding localized messages defined in messages.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages generated by the Localization Module before they are returned to the application. This enables you to modify, translate, or format localization messages according to specific requirements or user preferences.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized string values used within the widget’s user interface, allowing for text elements to be easily translated into different languages. This property works in conjunction with the locale property to enable internationalization by customizing display text based on the selected language or regional setting.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must type into the input field before the autocomplete feature becomes active. Once this character threshold is reached, the dropdown will appear, displaying a list of items that match the entered text.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Sets or retrieves the value of the "name" attribute for the element. The "name" attribute identifies the element within an HTML form, and its value is used as the key when the form data is submitted to the server. This allows data associated with the element to be correctly grouped and processed on the server side.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the dropdown menu is currently expanded and visible (open) or collapsed and hidden (closed).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about what to enter.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies or retrieves the query string used to filter items in the data source. This query is utilized by the autoComplete functionality to determine which items should be displayed based on user input. If the query is an empty string, no filtering is applied and all items from the data source are shown.
   * Default value: 
   */
  query?: string | number;
  /**
   * Specifies the autocomplete query mode, which controls how search suggestions are generated and determines the matching algorithm used for the autocomplete operation. This property influences whether autocomplete suggestions are based on prefix matching, fuzzy matching, or other supported algorithms.
   * Default value: containsIgnoreCase
   */
  queryMode?: CheckInputQueryMode | string;
  /**
   * Specifies whether the user is allowed to enter text directly into the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the behavior of the component if a dataSource is provided:  - If readonly is false, the element functions as a ComboBox, allowing text input and selection from the data source.  - If readonly is true, it behaves as a DropDownList, restricting input to selection from the provided options only, and preventing manual text entry.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or returns a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, enabling proper display for languages and locales that use RTL scripts, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the character or string used to separate multiple selected items within the input field. This delimiter defines how individual selections are visually and programmatically distinguished from one another in the input’s value.
   * Default value: ","
   */
  separator?: string;
  /**
   * Specifies whether an extra option—typically "Select All" or "Deselect All"—is shown at the top of the options list. This option enables users to quickly select or unselect all available items in the list with a single action.
   * Default value: false
   */
  selectAll?: boolean;
  /**
   * Retrieves or assigns an array containing the currently selected values. This property allows you to access the full list of items that have been selected, or update the selection by providing a new array of values.
   * Default value: 
   */
  selectedValues?: any;
  /**
   * Specifies whether the items are arranged in alphabetical order. If set to true, the list will be sorted from A to Z based on item names; if false, the original order will be preserved.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order to be used when sort is enabled. Set to asc for ascending order or desc for descending order.
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the visual theme applied to the element, controlling its overall appearance such as colors, fonts, and styles. Themes allow for consistent and customizable styling across elements within the application.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type controls the kind of input users can enter and may also influence the on-screen keyboard and validation behavior in web browsers.
   * Default value: ""
   */
  type?: string;
  /**
   * When set to true, this property prevents the element from being focused, either by keyboard navigation (such as using the Tab key) or by mouse interaction. As a result, the element is removed from the page's tab order and cannot receive input focus.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Retrieves the current value of the element or assigns a new value to it. This property allows you to programmatically access or update the element's value, depending on whether it is used as a getter or a setter. Commonly used with form elements such as input, textarea, and select to read or change user input.
   * Default value: ""
   */
  value?: string;
}
/**
 CheckInput specifies an input field where the user can enter data. Auto-complete options with checkboxes are displayed for easier input. Checkboxes allow to select/unselect one or multiple items.
*/
export interface CheckInput extends BaseElement, CheckInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the current selection. It occurs whenever the selected item(s) change, allowing you to respond to user interactions such as clicking, typing, or using keyboard navigation to alter the selection state.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu, hiding all currently visible options and returning the component to its default collapsed state.
   */
  close(): void;
  /**
   * Ensures that the currently active (selected) item within the list is always scrolled into view, so users can see and interact with their selection even when navigating through long or overflowing content.
   */
  ensureVisible(): void;
  /**
   * Displays the dropdown menu, making its list of selectable options visible to the user.
   */
  open(): void;
  /**
   * Selects the text inside the input field. If the input field is set to <b>readonly</b>, the function does not select the text but instead sets focus to the element. This ensures interactive behavior depending on whether the input can be edited.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-check-input"): CheckInput;
        querySelector(selectors: "smart-check-input"): CheckInput | null;
        querySelectorAll(selectors: "smart-check-input"): NodeListOf<CheckInput>;
        getElementsByTagName(qualifiedName: "smart-check-input"): HTMLCollectionOf<CheckInput>;
        getElementsByName(elementName: "smart-check-input"): NodeListOf<CheckInput>;
    }
}

/**Specifies the placement of the dropdown button relative to its parent element (e.g., top, bottom, left, or right). This setting controls where the dropdown button will appear in the user interface. */
export declare type DropDownButtonPosition = 'none' | 'left' | 'right' | 'top' | 'bottom';
/**Specifies the autocomplete query mode, which controls how search suggestions are generated and determines the matching algorithm used for the autocomplete operation. This property influences whether autocomplete suggestions are based on prefix matching, fuzzy matching, or other supported algorithms. */
export declare type CheckInputQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
export interface ChipProperties {
  /**
   * Configures or retrieves the current animation mode for the component. When this property is set to 'none', all animations are disabled, resulting in immediate transitions without animation effects. For other values, the specified animation behavior is applied during state changes or interactions.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies a custom avatar displayed on the left side of the chip. The avatar can be an image (when provided as an image URL), plain text, or custom HTML content. This allows for flexible customization, enabling you to use user profile pictures, initials, icons, or any other visual elements as the chip’s avatar.
   * Default value: null
   */
  avatar?: string | null;
  /**
   * Specifies whether a close button should be visible on the right side of the element, allowing users to dismiss or remove the element when clicked.
   * Default value: false
   */
  closeButton?: boolean;
  /**
   * Determines whether the element is interactive. When set to true, the element is disabled, meaning users cannot interact with it (e.g., clicking, typing, or selecting). Disabled elements are typically visually distinct and do not respond to user actions or participate in form submissions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies a custom template for the chip component. The template can be provided either as a string representing the ID of an existing '' element in the DOM, or as a direct reference to an 'HTMLTemplateElement' instance. This allows developers to define and reuse custom chip layouts within the application.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Sets or retrieves the unlockKey, a unique identifier or code used to activate and grant access to the product's features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property works together with the messages property to determine which set of localized messages is displayed based on the selected language. Use this to change the application's language and ensure the appropriate message translations are shown.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom format for the messages returned by the Localization Module. This function enables you to modify or transform localized messages before they are displayed to users, such as adjusting placeholders, formatting variables, or applying additional string manipulation as needed.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages or regions. This property works in conjunction with locale to support localization, enabling the widget’s interface to adapt its text content based on the specified locale settings.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * When the element has the readonly attribute, users can view its value but cannot modify or interact with it. The element’s content cannot be changed by user input, though the element may still be focused and its value programmatically updated by scripts.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that determines whether the element's alignment is configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content and layout adapt to support locales that require right-to-left text direction.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied to the element. The theme controls the visual appearance and styling, including colors, fonts, and other design aspects, ensuring a consistent look and feel across the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When this property is set to true, the element will be excluded from keyboard navigation and cannot receive focus via mouse or keyboard interactions.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the text displayed within the chip component. This text serves as the chip's value and is used for display and identification purposes. The value must be a string; any other data type will not be accepted. If no value is provided, the chip's text content defaults to an empty string.
   * Default value: ""
   */
  value?: string;
}
/**
 Chip is a simple rounded box that displays a single value and optionally an icon.
*/
export interface Chip extends BaseElement, ChipProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when a user closes or removes a chip component, such as by clicking a close icon or performing an equivalent action. It can be used to execute custom logic, update state, or notify other components when a chip is dismissed from the interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(value)
   *  value - A string representing the current value of the element.
   */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * Removes the chip element from the DOM, effectively dismissing it from the interface and making it no longer visible or interactive to the user. This action is typically triggered when the user clicks the close or delete icon on the chip.
   */
  close(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-chip"): Chip;
        querySelector(selectors: "smart-chip"): Chip | null;
        querySelectorAll(selectors: "smart-chip"): NodeListOf<Chip>;
        getElementsByTagName(qualifiedName: "smart-chip"): HTMLCollectionOf<Chip>;
        getElementsByName(elementName: "smart-chip"): NodeListOf<Chip>;
    }
}

export interface CircularProgressBarProperties {
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies whether the element is interactive and can be used by the user. When enabled, the element is active and can receive user input; when disabled, the element is inactive and user interaction is prevented.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * A callback function that specifies how the Progress Bar label should be formatted. This function receives relevant parameters (such as the current value and maximum value) and returns a string that determines the label's display. Use this function to customize the content and format of the label shown on the Progress Bar.
   * Default value: null
   */
  formatFunction?: {(value: number): string};
  /**
   * Sets the value of the Circular Progress bar to an indeterminate state (null), indicating that progress is ongoing without a specific completion percentage. This action also initiates the progress bar’s continuous animation, signaling that a task is in progress but the duration or endpoint is unknown.
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Specifies the direction in which the Circular Progress Bar fills as progress increases, such as clockwise or counterclockwise.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * Retrieves or assigns the unlockKey, a unique value required to unlock access to the product features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language in use. This property is typically used together with the messages property to determine which set of localized messages should be displayed based on the selected language. Setting this property changes the language context for retrieving appropriate translated content.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle events or processes such as language changes, translation updates, or formatting adjustments based on user locale.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines the maximum value that the progress bar can represent, determining the upper limit for the progress indicator. Values above this threshold will be capped at this maximum.
   * Default value: 100
   */
  max?: number;
  /**
   * Defines or retrieves an object containing customizable strings used throughout the widget’s user interface, enabling support for multiple languages. This property works together with the locale property to provide localized text displayed in the widget, such as labels, tooltips, and messages. Use this object to supply translations and override the default UI text for different languages or regions.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ":  Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines the lowest value that the progress bar can represent, establishing the starting point of the progress range. This value determines the minimum limit for the progress indicator.
   * Default value: 0
   */
  min?: number;
  /**
   * Controls whether the label is displayed on the Progress Bar. When enabled, the label will be shown; when disabled, the label will be hidden.
   * Default value: false
   */
  showProgressValue?: boolean;
  /**
   * Sets or retrieves a value that determines whether the element’s alignment supports right-to-left (RTL) text direction, which is commonly used in languages such as Arabic or Hebrew. This property ensures the element displays content appropriately for RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied to the element, controlling its overall visual appearance—including colors, fonts, and styling. The selected theme determines how the element is displayed, ensuring consistency with the application's design guidelines.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or programmatic focus calls.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets or retrieves the current numerical value of the progress bar, representing the completion level of the task as a number within the defined minimum and maximum range.
   * Default value: 0
   */
  value?: number;
}
/**
 Progress Bar displayed as a circle.
*/
export interface CircularProgressBar extends BaseElement, CircularProgressBarProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value associated with this element changes, either through user input or programmatic updates. It allows you to respond dynamically whenever the value is modified.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-circular-progress-bar"): CircularProgressBar;
        querySelector(selectors: "smart-circular-progress-bar"): CircularProgressBar | null;
        querySelectorAll(selectors: "smart-circular-progress-bar"): NodeListOf<CircularProgressBar>;
        getElementsByTagName(qualifiedName: "smart-circular-progress-bar"): HTMLCollectionOf<CircularProgressBar>;
        getElementsByName(elementName: "smart-circular-progress-bar"): NodeListOf<CircularProgressBar>;
    }
}

export interface ColorInputProperties {
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Otherwise, the specified animation mode determines how animations are displayed.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing you to control how quickly the autocomplete dropdown appears in response to user input.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Specifies the source of data that provides the available color options to be loaded into the Input component. The dataSource property accepts one of the following formats:- 'Array of strings': Each string represents a valid color value.- 'Array of objects': Each object should contain attributes (such as label and value) that define the display properties and value of each color option in the list.- 'Callback function': A function that returns an array of items in either of the above formats (strings or objects with the specified attributes).This flexibility allows you to populate the Input with color choices from static lists or dynamic sources, ensuring seamless integration with various data structures.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and may appear visually subdued.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the color palette to be used, including the individual colors and their arrangement or positioning within the user interface. This setting controls both the selection of colors and how they are visually organized or applied throughout the application.
   * Default value: default
   */
  displayMode?: ColorInputDisplayMode | string;
  /**
   * Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This setting controls where the dropdown button will appear within the interface.
   * Default value: none
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this value is an empty string, which means the dropdown's height is determined by the associated CSS variable. If a specific height is provided, it will override the default CSS variable, allowing you to directly control the dropdown's height through this property.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown's width will be determined by the value of a corresponding CSS variable rather than an explicit pixel or percentage value. You can override the default behavior by providing a specific width (e.g., "200px", "50%") to directly control the dropdown’s size. If left empty, ensure the relevant CSS variable is defined to maintain consistent styling.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies the expected type of input for the form element and informs the browser about the purpose of the field. This allows the user agent (such as a web browser or password manager) to offer relevant, automated suggestions or autofill options to the user, based on previously entered or stored data. This property corresponds to the standard HTML autocomplete attribute, which accepts values like 'on' (enables autofill), 'off' (disables autofill), 'name', 'email', 'organization', 'street-address', and many others. Setting this attribute properly enhances accessibility, improves user experience, and ensures that the browser presents the correct input suggestions for each form field.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the maximum number of items that can be displayed in the dropdown list as results of a new autoComplete query. When a user enters a search term, only up to this number of matching items will be shown in the dropdown. By default, a maximum of 8 items are visible, ensuring that the dropdown remains manageable and user-friendly. If there are more matching items than the specified maximum, only the first set will be displayed.
   * Default value: 8
   */
  items?: number;
  /**
   * Sets or retrieves the unlockKey, a unique code or token required to unlock and activate access to the product’s full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Defines or retrieves the current language code (e.g., 'en', 'fr'), which determines the locale used for displaying messages. This property works together with the messages property to select the appropriate set of localized messages for the specified language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, localize, or adjust the appearance of messages before they are delivered to the user interface.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized string values used throughout the widget’s user interface. This property allows you to customize or translate text elements, such as labels, tooltips, and messages, enabling support for multiple languages. It should be used together with the locale property to ensure that the correct set of localized strings is applied based on the selected language or region.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown menu will open and display the list of matching items based on the user's input.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies the element within an HTML form and is used as the key when the form data is submitted to the server. This allows the submitted data to be organized and referenced by the specified name.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the dropdown menu is currently open (visible) or closed (hidden).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears within the input field when it is empty, providing a hint or example to guide users on the expected input format.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Defines or retrieves the filter query used to narrow down the displayed items. This query is utilized by the autoComplete operation to show only items that match the specified criteria. If the query is set to an empty string, no filtering is applied, and all items from the data source are displayed.
   * Default value: 
   */
  query?: string | number;
  /**
   * Specifies the query mode used for autocomplete operations. This property defines how the autocomplete engine interprets and matches user input against available data, determining the matching algorithm and search behavior (such as prefix, infix, or fuzzy matching) for generating autocomplete suggestions.
   * Default value: containsIgnoreCase
   */
  queryMode?: ColorQueryMode | string;
  /**
   * Specifies whether the input field is editable by the user. If set to true, the user can type text directly into the input. If set to false, the input becomes read-only, and the user can only select from the provided options. When a dataSource is supplied, this property also determines the component's behavior:  - If editable is true, the element functions as a ComboBox, allowing users to enter custom values or select from the list.  - If editable is false, the element acts as a DropDownList, restricting selection to the available options in the dataSource only.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that determines whether the element's content alignment is configured for right-to-left languages, such as Arabic or Hebrew. This ensures proper layout and text direction for locales that require right-to-left reading order.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, backgrounds, and other stylistic properties, to ensure a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from keyboard navigation and cannot receive focus via the Tab key or programmatically.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets or retrieves the current value of the element, allowing you to either update its content programmatically or access its existing value for processing. This is commonly used with form elements such as input, textarea, and select to manage user input dynamically.
   * Default value: ""
   */
  value?: string;
  /**
   * Specifies the content or controls that will appear within the action section of the color picker component. This determines which buttons, options, or interface elements are available to the user when interacting with the color picker’s action area.
   * Default value: default
   */
  valueDisplayMode?: ColorValueDisplayMode | string;
  /**
   * Specifies the format in which the color value is represented. Supported formats include HEX, RGB, and RGBA. By default, the color format is automatically selected based on the current displayMode setting.
   * Default value: default
   */
  valueFormat?: ColorValueFormat | string;
}
/**
 ColorInput is an input field with colors displayed in a DropDown grid like in Excel.
*/
export interface ColorInput extends BaseElement, ColorInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the current selection, such as highlighting a different range of text, choosing another item in a list, or altering the selected elements within an interface. It fires immediately after the selection change occurs, allowing you to respond dynamically to user interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected color.
   *  oldLabel - The label of the color that was previously selected before the event was triggered.
   *  oldValue - The value of the color that was previously selected before the event was triggered.
   *  value - The value of the new selected color.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu, hiding all currently visible options and returning the component to its default, collapsed state.
   */
  close(): void;
  /**
   * Displays the dropdown menu, allowing the user to view and select available options.
   */
  open(): void;
  /**
   * Selects the text inside the input element. If the input is set to <b>readonly</b>, the element will be focused instead, without selecting the text.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-color-input"): ColorInput;
        querySelector(selectors: "smart-color-input"): ColorInput | null;
        querySelectorAll(selectors: "smart-color-input"): NodeListOf<ColorInput>;
        getElementsByTagName(qualifiedName: "smart-color-input"): HTMLCollectionOf<ColorInput>;
        getElementsByName(elementName: "smart-color-input"): NodeListOf<ColorInput>;
    }
}

/**Specifies the color palette to be used, including the individual colors and their arrangement or positioning within the user interface. This setting controls both the selection of colors and how they are visually organized or applied throughout the application. */
export declare type ColorInputDisplayMode = 'default' | 'grid';
/**Specifies the query mode used for autocomplete operations. This property defines how the autocomplete engine interprets and matches user input against available data, determining the matching algorithm and search behavior (such as prefix, infix, or fuzzy matching) for generating autocomplete suggestions. */
export declare type ColorQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
/**Specifies the content or controls that will appear within the action section of the color picker component. This determines which buttons, options, or interface elements are available to the user when interacting with the color picker’s action area. */
export declare type ColorValueDisplayMode = 'default' | 'colorBox' | 'colorCode' | 'none';
/**Specifies the format in which the color value is represented. Supported formats include HEX, RGB, and RGBA. By default, the color format is automatically selected based on the current displayMode setting. */
export declare type ColorValueFormat = 'default' | 'rgb' | 'rgba' | 'hex';
export interface ColorPanelProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use this property to enable, disable, or specify the type of animation applied to the element.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Clarifies the method or rule by which the value is implemented or utilized within the system, detailing how the value influences functionality or behavior.
   * Default value: instantly
   */
  applyValueMode?: ColorApplyValueMode | string;
  /**
   * Specifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. This parameter controls the horizontal arrangement of color swatches, determining how many colors appear in each row of the color picker interface for these modes.
   * Default value: 8
   */
  columnCount?: number;
  /**
   * Determines whether the element is interactive or not. When set to 'disabled', the element becomes unresponsive to user interactions such as clicks, typing, or selection, and may also appear visually distinct (e.g., grayed out) to indicate its inactive state. When enabled, the element behaves normally and accepts user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the color palette to be used and defines how these colors are arranged or distributed within the user interface or visual component.
   * Default value: default
   */
  displayMode?: ColorDisplayMode | string;
  /**
   * By default, clicking on the color panel's preview container will revert the selected color to its previous value, effectively undoing any recent changes. Setting the 'disableUndo' option disables this undo functionality, so clicking the preview container will no longer restore the previous color value.
   * Default value: false
   */
  disableUndo?: boolean;
  /**
   * Enables users to adjust the alpha (transparency) level of colors using an editor or slider. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise transparency control while selecting colors in these layouts.
   * Default value: false
   */
  editAlphaChannel?: boolean;
  /**
   * Enables users to choose a custom color through an editor popup interface. This functionality extends custom color selection to modes where it is not included by default, such as 'grid', 'default', or 'spectrum grid', providing flexibility and a consistent color selection experience across different modes.
   * Default value: false
   */
  enableCustomColors?: boolean;
  /**
   * Specifies an array of color values to be used as the theme colors for the relevant section when displayMode is set to 'default'. These colors will determine the visual appearance and styling of the section under the default display mode.
   * Default value: null
   */
  gridThemeColors?: string[] | null;
  /**
   * Defines an array of color values to be used as shade colors in the section that appears when displayMode is set to 'default'. These colors determine the visual shading or accent colors applied within that display mode, allowing for customization of the section’s appearance.
   * Default value: null
   */
  gridShadeColors?: string[] | null;
  /**
   * Specifies an array of standard colors that will be applied in the corresponding section when the displayMode is set to 'default'. These colors determine the default color palette for that section's visual elements.
   * Default value: null
   */
  gridStandardColors?: [] | null;
  /**
   * Controls the visibility of the alpha editor, which is a UI input for adjusting the opacity (alpha value) of the selected color. The alpha editor is available in the 'radial', 'palette', and 'hexagonal' modes, and is displayed by default as long as there is enough space in the interface. Enabling this option will hide the alpha editor from view, preventing users from modifying color opacity directly.
   * Default value: false
   */
  hideAlphaEditor?: boolean;
  /**
   * Specifies the priority for hiding color editors when there is insufficient space to display all of them. By default, color editors are shown only in 'palette', 'radial', and 'hexagonal' display modes. Use this property to control the order in which editors are hidden, ensuring that the most important editors remain visible for as long as possible as space becomes limited. This allows for a customized and responsive user interface that adapts to varying display sizes.
   * Default value: RGB,HEX,alpha,previewContainer
   */
  hideContentToFit?: string[];
  /**
   * The HEX editor is an input field that allows users to enter or view a color's value in hexadecimal format (e.g., #FF5733). By default, the HEX editor is displayed in the UI. If the 'hideHEXeditor' property is set to true, this input will be hidden from view. Note: The 'hideRGBeditor' property controls the visibility of the separate RGB editor, not the HEX editor.
   * Default value: false
   */
  hideHEXEditor?: boolean;
  /**
   * Conceals the preview container, which displays the currently selected value in the 'palette', 'radial', and 'hexagonal' display modes. When this option is enabled, users will not see the visual representation of their selection within the interface.
   * Default value: false
   */
  hidePreviewContainer?: boolean;
  /**
   * Hides the RGB editor interface. This editor consists of three individual input fields, each allowing users to directly adjust the Red, Green, and Blue components of a color independently. Disabling this option will prevent users from modifying these color channels through the RGB editor.
   * Default value: false
   */
  hideRGBEditor?: boolean;
  /**
   * Inverts the color scheme of the interface when operating in the 'spectrumGrid', 'hexagonal', or 'radial' display modes, producing a visually reversed version of the original colors for enhanced contrast or alternative visual effects.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * Sets or retrieves the 'unlockKey' property, a unique key required to activate or grant access to the product. Assign a valid key string to unlock the product, or get the current key in use.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Defines or retrieves the current language setting for the application. This property works together with the messages property, allowing you to display localized content based on the selected language. Setting this value determines which language-specific message set from messages will be used throughout the interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or personalize message strings before they are displayed in your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves an object that defines the text strings used within the widget, allowing for easy localization of the widget's interface. This property works together with the locale property to support multiple languages by providing translated strings as needed. Use this to customize the widget's displayed text based on the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": ".",
   *     "redPrefix": "R:",
   *     "greenPrefix": "G:",
   *     "bluePrefix": "B:",
   *     "hexPrefix": "#:",
   *     "alphaPrefix": "Alpha:",
   *     "ok": "OK",
   *     "cancel": "CANCEL",
   *     "customColor": "CUSTOM COLOR ..."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. This attribute assigns a unique identifier to the element within an HTML form, allowing its value to be included as a key when the form is submitted to a server. The name attribute is essential for processing form data, as the server uses these names to identify and handle the values submitted by users.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the color palette used for rendering the color options within the 'spectrumGrid', 'grid', and 'hexagonal' display modes. This setting controls which color values are shown to users when these modes are active, directly affecting the available color choices in the UI.
   * Default value: default
   */
  palette?: ColorPalette | string;
  /**
   * Specifies an array of colors to create a custom color palette. When the palette property is set to custom, this palette is available for selection in the 'grid' and 'spectrum grid' display modes. The array can contain either color strings (such as HEX, RGB, or RGBA formats) or objects that define valid color values. This allows for flexible customization of the color selection options shown to users.
   * Default value: null
   */
  paletteColors?: any;
  /**
   * Specifies an array of colors that make up a predefined custom color palette. This palette is available for display modes 'grid', 'default', and 'spectrum grid'. When enabled via the enableCustomColors property, these custom colors appear at the bottom of the color grid, positioned below the button that allows users to select a custom color. If enableCustomColors is set to false, the custom color palette will not be visible to users.
   * Default value: null
   */
  paletteCustomColors?: string[] | null;
  /**
   * When the element has the "readonly" attribute, users can view its value but cannot modify, edit, or interact with its content in any way. The element remains visible and selectable, but user input and changes are disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Determines or retrieves whether the element’s text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied to the element, which controls its overall appearance—including colors, fonts, and style variations—ensuring visual consistency with the rest of the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the format and content used to display the color’s value in the tooltip when a user hovers over it. This setting controls how the color information (such as hexadecimal, RGB, or color name) appears in the tooltip for better clarity and user experience.
   * Default value: hex
   */
  tooltipDisplayMode?: ColorTooltipDisplayMode | string;
  /**
   * Represents the currently selected color value, typically formatted as a hexadecimal code (e.g., "#FF5733"), RGB value, or other standard color representation. This value is updated whenever the user selects a new color and can be used to apply the chosen color to UI elements or store user preferences.
   * Default value: "null"
   */
  value?: string;
  /**
   * Specifies the format in which the color value will be represented—either HEX, RGB, or RGBA. By default, the color format adapts automatically based on the selected displayMode.
   * Default value: default
   */
  valueFormat?: ColorValueFormat | string;
  /**
   * Specifies which object property should be used as the color value when paletteColors is an array of objects. This option is useful when your color data is structured as objects and the property representing the color value does not use the default key name 'value'. Set this attribute to the name of the property that contains the color value within each object.
   * Default value: "null"
   */
  valueMember?: string;
  /**
   * When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or other focus-related interactions.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 ColorPanel is an advanced color chooser with Pallete, Spectrum Grid, Radial Palette and Excel-like options.
*/
export interface ColorPanel extends BaseElement, ColorPanelProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the selected color value is modified by the user. It occurs both when the user chooses a new color or adjusts the current color selection, allowing developers to respond dynamically to changes in color input.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previously selected color.
   *  value - The new selected color.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the user clicks the "Cancel" button. Note: The "Cancel" button is displayed only when the <strong>applyValueMode</strong> property is set to <strong>useButtons</strong>. If <strong>applyValueMode</strong> has a different value, the "Cancel" button will not appear, and this event will not be triggered.
	* @param event. The custom event.    */
  onCancelButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the custom color selection view is either opened or closed by the user. Note that the custom color selection view is only accessible when the <strong>enableCustomColors</strong> property is set to <code>true</code>. This event allows you to perform actions in response to users interacting with the custom color picker interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(value)
   *  value - A boolean that indicates whether the custom color view is shown or not.
   */
  onCustomColorSelection?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the "OK" button is clicked by the user. Note that the "OK" button appears in the UI only if the <strong>applyValueMode</strong> property is set to <strong>useButtons</strong>. If <strong>applyValueMode</strong> has a different value, the "OK" button will not be displayed, and this event will not be triggered.
	* @param event. The custom event.    */
  onOkButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-color-panel"): ColorPanel;
        querySelector(selectors: "smart-color-panel"): ColorPanel | null;
        querySelectorAll(selectors: "smart-color-panel"): NodeListOf<ColorPanel>;
        getElementsByTagName(qualifiedName: "smart-color-panel"): HTMLCollectionOf<ColorPanel>;
        getElementsByName(elementName: "smart-color-panel"): NodeListOf<ColorPanel>;
    }
}

/**Clarifies the method or rule by which the value is implemented or utilized within the system, detailing how the value influences functionality or behavior. */
export declare type ColorApplyValueMode = 'instantly' | 'useButtons';
/**Specifies the color palette to be used and defines how these colors are arranged or distributed within the user interface or visual component. */
export declare type ColorDisplayMode = 'default' | 'grid' | 'palette' | 'radial' | 'hexagonal' | 'spectrumGrid' | 'materialGrid';
/**Specifies the color palette used for rendering the color options within the 'spectrumGrid', 'grid', and 'hexagonal' display modes. This setting controls which color values are shown to users when these modes are active, directly affecting the available color choices in the UI. */
export declare type ColorPalette = 'default' | 'gray' | 'red' | 'green' | 'blue' | 'custom';
/**Specifies the format and content used to display the color’s value in the tooltip when a user hovers over it. This setting controls how the color information (such as hexadecimal, RGB, or color name) appears in the tooltip for better clarity and user experience. */
export declare type ColorTooltipDisplayMode = 'none' | 'rgb' | 'rgba' | 'hex';
export interface ColorPickerProperties {
  /**
   * Specifies or retrieves the animation mode for the element. When set to 'none', all animations are disabled and no animation effects will be applied. Assigning other valid values enables different animation behaviors according to the selected mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * This property enables users to edit colors directly through the input field located within the element's action section. It accepts values in all supported color formats (such as HEX, RGB, or HSL). Please note, this property is effective only when the valueDisplayMode is set to either default or colorCode.
   * Default value: false
   */
  editable?: boolean;
  /**
   * Specifies the duration (in milliseconds) to wait before automatically closing the dropdown menu after it has been opened, applicable only when dropDownOpenMode is set to 'auto'. This delay allows users sufficient time to interact with the dropdown before it closes automatically.
   * Default value: 100
   */
  autoCloseDelay?: number;
  /**
   * Defines the method for confirming the user's selected value in the color picker.  - In ''instantly'' mode, the new value is applied immediately whenever the user selects a color, with no further confirmation required.  - In ''useButtons'' mode, 'OK' and 'Cancel' buttons appear at the bottom of the color picker’s dropdown. The color change is only applied when the user clicks the 'OK' button. Clicking 'Cancel' will close the dropdown without applying the selected value.
   * Default value: instantly
   */
  applyValueMode?: ColorApplyValueMode | string;
  /**
   * Specifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. Adjusting this value determines the width of the color palette layout for these modes.
   * Default value: 8
   */
  columnCount?: number;
  /**
   * Specifies the color palette to be used, including individual colors and their arrangement within the layout. This setting controls both which colors are displayed and how they appear in the user interface.
   * Default value: default
   */
  displayMode?: ColorDisplayMode | string;
  /**
   * Controls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element is not interactive and may appear visually distinct (e.g., grayed out) to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * By default, clicking on the color panel's preview container reverts the selected color value to its previous state, effectively functioning as an undo action. Setting the 'disableUndo' option disables this functionality, so clicking the preview container will no longer revert the color value.
   * Default value: false
   */
  disableUndo?: boolean;
  /**
   * Defines the parent container in which the dropDown (popup) will be rendered. Accepts a CSS selector string, an element ID, or the literal value 'body'. This setting is helpful when the dropDown’s visibility is affected by CSS properties (such as overflow or z-index) applied to its parent elements. Specify 'body' to attach the dropDown directly to the  element for maximum visibility. Example: 'body'.
   * Default value: "body"
   */
  dropDownAppendTo?: string;
  /**
   * Controls the direction or orientation in which the dropdown menu appears when activated (e.g., opening upwards, downwards, to the left, or to the right). This setting dictates the dropdown's display position relative to its trigger element.
   * Default value: default
   */
  dropDownOpenMode?: DropDownOpenMode | string;
  /**
   * Specifies the placement of the dropdown button relative to its parent element. This determines where the dropdown button will appear on the user interface, such as above, below, to the left, or to the right of the related element.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the vertical placement of the dropDown menu relative to its trigger element. When set to 'Auto', the component intelligently chooses to display the dropDown either above or below the trigger based on available space within the viewport, ensuring optimal visibility and user experience.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to null, which means the component will use CSS variables (custom properties) to determine its height. If the browser does not support CSS variables, set this property to a specific value (e.g., '200px' or '2.5em') to manually define the dropdown's height. Use this property only to ensure compatibility with browsers that lack support for CSS variables.
   * Default value: "auto"
   */
  dropDownHeight?: string;
  /**
   * When this property is enabled, opening the element’s dropdown will display a transparent overlay that covers the area between the dropdown menu and the rest of the page. This overlay visually separates the dropdown from other content and can help capture user interactions outside the dropdown, such as clicks to close the menu.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Defines the width of the dropdown component. By default, this property is set to null, which means the dropdown will use CSS variables (such as '--dropdown-width') to determine its width. If you need to support browsers that do not support CSS variables, explicitly set this property to a specific width value (e.g., ''200px'' or ''20em''). This ensures consistent dropdown sizing across all browsers, including those without CSS variable support.
   * Default value: "auto"
   */
  dropDownWidth?: string;
  /**
   * Enables users to adjust the alpha (transparency) level of colors through an editor or slider interface. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise control over color opacity in each mode.
   * Default value: false
   */
  editAlphaChannel?: boolean;
  /**
   * Enables users to choose a custom color through an editor popup interface. This feature provides custom color selection in modes where it is not available by default—such as 'grid', 'default', and 'spectrum grid'—enhancing flexibility and user experience across different color selection modes.
   * Default value: false
   */
  enableCustomColors?: boolean;
  /**
   * Defines an array of color values that serve as the theme colors for the component or section. These colors will be applied when the displayMode is set to either 'grid' or 'default', ensuring consistent theming across these display modes. Each color in the array should be specified in a valid CSS color format (e.g., HEX, RGB, or named color).
   * Default value: null
   */
  gridThemeColors?: string[] | null;
  /**
   * Specifies an array of color values to be used as shade colors within the relevant section when the displayMode is set to either 'grid' or 'default'. These colors determine the visual shading or background color scheme that appears in these display modes.
   * Default value: null
   */
  gridShadeColors?: string[] | null;
  /**
   * Specifies an array of colors to be used as the standard color palette within the relevant section when the displayMode is set to either 'grid' or 'default'. These colors will be available for selection or display in these display modes, providing a consistent and predefined set of color options for users.
   * Default value: null
   */
  gridStandardColors?: string[] | null;
  /**
   * Hides the alpha editor. The alpha editor is an input field that allows users to adjust the opacity (alpha value) of the currently selected color. It is available in the following display modes: 'radial', 'palette', and 'hexagonal'. The alpha editor is only shown when there is sufficient space in the UI. By default, this editor is visible unless explicitly hidden using this setting.
   * Default value: false
   */
  hideAlphaEditor?: boolean;
  /**
   * Specifies the priority order in which color editors are hidden when there is insufficient space to display them all. By default, these editors are only visible in the 'palette', 'radial', and 'hexagonal' display modes. This property enables you to control which editors remain visible by defining their visibility priority, ensuring that the most important editors are retained as the available space decreases.
   * Default value: RGB,HEX,alpha,previewContainer
   */
  hideContentToFit?: string[];
  /**
   * The HEX editor is a user input field that allows users to view and edit the hexadecimal (HEX) color code, representing the selected color. By default, the HEX editor is visible within the interface, enabling users to enter or modify HEX values such as #FF5733. To hide the HEX editor from the interface, set the 'hideHEXeditor' property to true. Note: Setting 'hideRGBeditor' to true only hides the RGB editor and does not affect the visibility of the HEX editor.
   * Default value: false
   */
  hideHEXEditor?: boolean;
  /**
   * Hides the preview container, which displays the currently selected value when using the 'palette', 'radial', or 'hexagonal' display modes. When this option is enabled, the user will not see the visual preview of their selection within the interface. This can be useful for creating a more compact UI or when the preview is not necessary for your workflow.
   * Default value: false
   */
  hidePreviewContainer?: boolean;
  /**
   * Hides the RGB editor interface. The RGB editor consists of three individual input fields, each allowing users to specify the Red, Green, and Blue components of a color separately. By hiding the RGB editor, users will no longer see or interact with these color value inputs.
   * Default value: false
   */
  hideRGBEditor?: boolean;
  /**
   * Displays supplementary helper text beneath the element, which becomes visible only when the element is focused, providing context-specific guidance to the user during interaction.
   * Default value: ""
   */
  hint?: string;
  /**
   * Inverts all colors displayed in the ‘spectrumGrid’, ‘hexagonal’, and ‘radial’ modes, producing their complementary (negative) color values for each element in these modes. This affects the entire color range shown, allowing for an alternative visual representation of the color palette.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * Displays a descriptive label above the element to provide context or identify its purpose for users.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or retrieves the unlockKey, a value required to activate or grant access to the product’s features. This key is typically used for licensing or security purposes, ensuring only authorized users can unlock the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., 'en', 'fr', 'es') to be used for localization purposes. This property works together with the messages property, which contains language-specific translations or text. Setting this value determines which set of messages is displayed to users based on their selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify the structure, content, or presentation of localized messages before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the localized strings used within the widget’s user interface. This property works in conjunction with the locale property to enable the display of text in different languages, allowing developers to customize and provide translations for all UI elements and messages.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": ".",
   *     "redPrefix": "R:",
   *     "greenPrefix": "G:",
   *     "bluePrefix": "B:",
   *     "hexPrefix": "#:",
   *     "alphaPrefix": "Alpha:",
   *     "ok": "OK",
   *     "cancel": "CANCEL",
   *     "customColor": "CUSTOM COLOR ..."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies or retrieves the value of the element’s name attribute. The name attribute is used to identify form controls when submitting an HTML form; its value is included as the key in the form-data sent to the server and allows the server to process user input correctly.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies if the popup component is currently visible (open) or hidden (closed).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the color palette that will appear in the 'spectrumGrid', 'grid', and 'hexagonal' display modes. These colors define the available color options shown to users when any of these display modes are active.
   * Default value: default
   */
  palette?: ColorPalette | string;
  /**
   * Defines a custom color palette as an array, which can be utilized in the display modes 'grid' and 'spectrum grid' when the palette property is set to custom. Each item in the array can either be a string representing a valid color format (such as HEX, RGB, or RGBA), or an object containing a color value. This allows you to specify a tailored set of colors for your application's interface, ensuring precise control over the available color options in supported display modes.
   * Default value: null
   */
  paletteColors?: {name: string, value: string}[] | string[] | null;
  /**
   * Specifies an array containing a predefined set of custom colors for use in the application's color picker component. This custom palette appears in the color grid when the color picker is in 'grid', 'default', or 'spectrum grid' displayModes. The custom colors are displayed below the custom color selection button, at the bottom of the color grid. These colors are only visible if the enableCustomColor property is set to true. This allows users to quickly access and select from your specified custom colors in supported display modes.
   * Default value: null
   */
  paletteCustomColors?: string[] | null;
  /**
   * The placeholder appears when no value has been entered, or if the current value is null. It provides a visual cue or hint to the user about the expected input until an actual value is provided.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Prevents any user interactions with the element, such as clicking, typing, or focusing, rendering it completely unresponsive to pointer and keyboard events.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Controls the visibility of the resize indicator located in the bottom-right corner of the dropdown menu. When set to true, the resize handle is displayed, allowing users to adjust the size of the dropdown. This property should be used alongside the resizeMode property to specify how resizing is handled.
   * Default value: false
   */
  resizeIndicator?: boolean;
  /**
   * Specifies whether the drop-down menu can be resized by the user. When this option is enabled, a resize handle appears on either the top or bottom edge of the drop-down, allowing users to adjust its height interactively. If disabled, the drop-down’s size remains fixed and cannot be modified by the user.
   * Default value: null
   */
  resizeMode?: ResizeMode | string;
  /**
   * Specifies or retrieves a value that determines whether the element's text direction is set to right-to-left (RTL) alignment, commonly used for languages such as Arabic or Hebrew. This property ensures the element properly supports locales that require right-to-left text display.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring visual consistency across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the format and content used by the tooltip to display the value of the color when a user hovers over it. This setting controls how the color value is presented to the user, such as showing it as a HEX code, RGB value, or color name, within the tooltip interface.
   * Default value: hex
   */
  tooltipDisplayMode?: ColorTooltipDisplayMode | string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatic focus methods (e.g., element.focus()).
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Represents the currently selected color value assigned to the element. This value is typically formatted as a hexadecimal color code (e.g., "#FF5733"), reflecting the user's choice in a color picker input.
   * Default value: "null"
   */
  value?: string;
  /**
   * Specifies the color format to be used, allowing selection between HEX, RGB, or RGBA formats. By default, the color format is automatically determined based on the current displayMode setting. This property ensures that colors are displayed in the preferred or most appropriate format for the context.
   * Default value: default
   */
  valueFormat?: ColorValueFormat | string;
  /**
   * Specifies which controls or buttons (such as ‘Apply’, ‘Cancel’, ‘Reset’, or custom actions) will appear in the action section of the color picker component. This determines the set of interactive elements available to users for confirming, cancelling, or modifying their color selection.
   * Default value: default
   */
  valueDisplayMode?: ColorValueDisplayMode | string;
}
/**
 ColorPicker is an advanced color picking component with Pallete, Spectrum Grid, Radial Palette and Excel-like options. Users can input colors either by a dropdown or input field.
*/
export interface ColorPicker extends BaseElement, ColorPickerProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user clicks the action button. The "Ok" button will only appear if the <strong>applyValueMode</strong> property is set to <strong>useButtons</strong>. In other modes, the "Ok" button is hidden and this event will not be available. This setting allows developers to control when value changes are confirmed by requiring explicit user action.
	* @param event. The custom event.    */
  onActionButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user clicks the 'Cancel' button. Note that the 'Cancel' button appears only if the <strong>applyValueMode</strong> property is set to <strong>useButtons</strong>. If a different value is set for <strong>applyValueMode</strong>, the 'Cancel' button will not be displayed, and this event will not be triggered.
	* @param event. The custom event.    */
  onCancelButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the color value is modified by the user or programmatically. It provides updated information about the new color selection, allowing you to perform actions—such as updating the UI or storing the new value—in response to the change.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previously selected color.
   *  value - The new selected color.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the dropdown menu is closed, either by selecting an option, clicking outside the dropdown, or pressing a key that dismisses the menu. It allows you to execute custom logic after the dropdown is no longer visible to the user.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired just before the dropdown menu is closed. By handling this event, you can intervene and prevent the dropdown from closing by calling event.preventDefault() within your event handler. This provides an opportunity to validate data, display a confirmation dialog, or perform any custom logic before the dropdown is hidden.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the custom color selection view is either opened or closed. The custom color selection view becomes accessible only when the <strong>enableCustomColors</strong> property is set to <code>true</code>. This event allows you to respond to user interactions with the custom color selector, such as initializing settings when the view opens or performing cleanup when it closes.
	* @param event. The custom event. Custom data event was created with: ev.detail(value)
   *  value - A boolean that indicates whether the custom color view is shown or not.
   */
  onCustomColorSelection?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user clicks on the dropdown button, indicating their intent to expand or collapse the dropdown menu. It can be used to execute custom logic—such as displaying options, updating UI elements, or tracking user interactions—whenever the dropdown button is activated.
	* @param event. The custom event.    */
  onDropDownButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user clicks the "OK" button. It can be used to execute custom logic in response to the user's confirmation action, such as submitting a form, closing a modal dialog, or proceeding to the next step in a workflow.
	* @param event. The custom event.    */
  onOkButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered each time the dropdown menu becomes visible to the user, such as when it is clicked or otherwise activated. Use this event to execute custom logic when the dropdown opens, for example, loading dynamic content or initializing UI elements within the dropdown.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the dropdown menu is opened. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This provides an opportunity to perform validation, execute custom logic, or conditionally cancel the opening of the dropdown based on specific criteria.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates the resizing action on the dropdown component, such as by clicking and dragging the resize handle or edge. It indicates the start of the resize interaction, allowing you to perform actions like displaying visual cues or preparing to handle the size change.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the resizing action of the dropdown component is complete, indicating that the user has finished adjusting its size. At this point, any changes to the dimensions of the dropdown are finalized, and you can safely perform operations that depend on its new size.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Displays the color picker’s drop-down panel, allowing users to select or customize a color.
   */
  open(): void;
  /**
   * Improved: "Closes the color picker dropdown menu, hiding the color selection options from view."
   */
  close(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-color-picker"): ColorPicker;
        querySelector(selectors: "smart-color-picker"): ColorPicker | null;
        querySelectorAll(selectors: "smart-color-picker"): NodeListOf<ColorPicker>;
        getElementsByTagName(qualifiedName: "smart-color-picker"): HTMLCollectionOf<ColorPicker>;
        getElementsByName(elementName: "smart-color-picker"): NodeListOf<ColorPicker>;
    }
}

/**Controls the direction or orientation in which the dropdown menu appears when activated (e.g., opening upwards, downwards, to the left, or to the right). This setting dictates the dropdown's display position relative to its trigger element. */
export declare type DropDownOpenMode = 'none' | 'default' | 'dropDownButton' | 'auto';
/**Specifies the vertical placement of the dropDown menu relative to its trigger element. When set to 'Auto', the component intelligently chooses to display the dropDown either above or below the trigger based on available space within the viewport, ensuring optimal visibility and user experience. */
export declare type DropDownPosition = 'auto' | 'top' | 'bottom' | 'overlay-top' | 'overlay-center' | 'overlay-bottom' | 'center-bottom' | 'center-top';
/**Specifies whether the drop-down menu can be resized by the user. When this option is enabled, a resize handle appears on either the top or bottom edge of the drop-down, allowing users to adjust its height interactively. If disabled, the drop-down’s size remains fixed and cannot be modified by the user. */
export declare type ResizeMode = 'none' | 'horizontal' | 'vertical' | 'both';
export interface ColumnPanelProperties {
  /**
   * Configures or retrieves the current animation mode for the element. When set to 'none', all animations are disabled and the element will update instantly without any animated transitions. Use this property to enable, disable, or specify different animation behaviors as needed.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the data source from which content will be retrieved and displayed in the column panel. This setting determines what data is loaded and shown within the column panel interface.
   * Default value: null
   */
  dataSource?: ColumnPanelDataSource[];
  /**
   * Determines whether the column panel is active. When enabled, the column panel is displayed, allowing users to view and manage available columns. When disabled, the column panel is inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the 'unlockKey' value, a unique key required to unlock and grant access to the product’s protected features or content. Use this property to securely store or obtain the unlock key as part of the product activation process.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Gets or sets the current language used for displaying messages or content. This property works together with the messages property, which contains localized text for each supported language. Selecting a language updates the displayed messages to their corresponding translations defined in the messages object.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to define or modify the formatting of messages returned by the Localization Module. Use this to customize how localized messages are displayed or structured before they are delivered to the application interface.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Handles the setting or retrieval of an object containing customizable strings used throughout the widget interface, enabling localization of text elements. This property works in tandem with the locale property to provide language-specific translations, ensuring the widget displays appropriate text based on the user's selected language or region.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "apply": "Apply",
   *     "cancel": "Cancel",
   *     "find": "Find a field",
   *     "noResults": "No results"
   *   }
   * }
   */
  messages?: any;
  /**
   * When an element is set to "readonly," users cannot modify its value or content. However, they can still focus on the element (for example, by tabbing to it) and select its text. Unlike disabled elements—which are neither interactive nor focusable—a readonly element remains accessible for review but does not allow user edits.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that specifies whether the element's layout direction is set to right-to-left, enabling proper alignment and display for languages and locales that use right-to-left text, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * If this property is set to true, the element will be unfocusable, meaning users will not be able to focus on it using keyboard navigation (such as the Tab key) or by clicking on it.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Column Panel allows toggling the visibility and changing the order of columns.
*/
export interface ColumnPanel extends BaseElement, ColumnPanelProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user clicks the "Apply" button on the interface, indicating their intent to submit or confirm the current selection or settings. It is typically used to initiate processes such as form submission, filtering data, or applying configuration changes, depending on the context of the application.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, positionChanged)
   *  value - The current configuration of columns (data source).
   *  positionChanged - A boolean detail that shows whether the columns have been reordered.
   */
  onApply?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user clicks the "Cancel" button, indicating their intention to abort or exit the current action or form. It can be used to execute custom logic, such as closing a dialog, discarding unsaved changes, or navigating away from the current view.
	* @param event. The custom event.    */
  onCancel: ((this: any, ev: Event) => any) | null;
}

export interface ColumnPanelDataSource {
  /**
   * The column's data field.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Determines whether the column's visibility can be toggled.
   * Default value: false
   */
  disableToggle?: boolean;
  /**
   * A valid CSS class name applied to the column's icon.
   * Default value: ""
   */
  icon?: string;
  /**
   * The column's label.
   * Default value: ""
   */
  label?: string;
  /**
   * Determines whether the column is visible in the panel.
   * Default value: true
   */
  visible?: boolean;
}

declare global {
    interface Document {
        createElement(tagName: "smart-column-panel"): ColumnPanel;
        querySelector(selectors: "smart-column-panel"): ColumnPanel | null;
        querySelectorAll(selectors: "smart-column-panel"): NodeListOf<ColumnPanel>;
        getElementsByTagName(qualifiedName: "smart-column-panel"): HTMLCollectionOf<ColumnPanel>;
        getElementsByName(elementName: "smart-column-panel"): NodeListOf<ColumnPanel>;
    }
}

export interface ComboBoxProperties {
  /**
   * This property is applicable only when dropDownOpenMode is set to 'auto'. It specifies the amount of time (in milliseconds) the dropdown will remain open after the pointer leaves the element, before it automatically closes. If the pointer is not hovering over the dropdown or its trigger element, the dropdown will close after this delay.
   * Default value: 100
   */
  autoCloseDelay?: number;
  /**
   * Specifies the autocomplete mode for the input field. The selected mode defines how the component filters and displays items from the dataSource, showing only those entries that match the user's input according to the chosen matching strategy. This setting directly impacts the suggestions presented to the user as they type.
   * Default value: none
   */
  autoComplete?: AutoComplete | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait after the user input before displaying the dropdown list of autocomplete suggestions. This delay helps control how quickly the suggestions appear, allowing for smoother user experience and reducing unnecessary searches as the user types.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Enables users to specify one or more custom key names that will trigger the opening of the popup when pressed. This allows for flexible keyboard shortcuts tailored to user preferences or application requirements.
   * Default value: 
   */
  autoOpenShortcutKey?: string[];
  /**
   * Specifies the source of data to populate the ComboBox. The dataSource can be provided in several formats:- An array of strings or numbers, where each item becomes a selectable option in the ComboBox.- An array of objects, where each object represents a list item and its properties define the displayed information and associated value (e.g., label for display text, value for the underlying value, and optionally group to categorize items).- A callback function that returns an array of items in either of the above formats, enabling dynamic or asynchronous data loading.This flexible dataSource configuration allows the ComboBox to support simple lists, categorized lists, or dynamically retrieved data.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Controls whether the combo box is active or inactive. When enabled, users can interact with the combo box to select or enter a value. When disabled, the combo box is non-interactive and appears grayed out, preventing any user input or selection.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data locally or when retrieving items from a remote source. This helps inform users that a filtering operation or data fetch is in progress.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Sets or retrieves the displayMember property. The displayMember property defines the specific field name within each data object in the collection provided by the 'dataSource' property. This field's value is used for displaying items in the UI component, allowing you to control which attribute of your data objects is shown to the user.
   * Default value: """"
   */
  displayMember?: string;
  /**
   * Specifies the parent container for the dropdown element. The dropDownAppendTo property accepts a CSS selector string, an element's ID, the string value 'body', or a direct reference to an HTML element. By default, the dropdown is appended to its original parent in the DOM. However, if one of the containing elements has CSS properties (such as overflow: hidden) that restrict the dropdown's visibility, you can set this property—commonly to 'body'—to append the dropdown directly to the &lt;body&gt; element and ensure it displays properly.Possible values:- A CSS selector string (e.g., '.container' or '#mainDiv')- The string 'body'- A direct reference to an existing HTML element- An element's ID (as a string)- null (to reset and move the dropdown back to its original parent)This property improves compatibility in layouts with restricted overflow by allowing the dropdown to be rendered in a container of your choosing. Resetting dropDownAppendTo to null restores the dropdown to its initial placement within the DOM.
   * Default value: "null"
   */
  dropDownAppendTo?: string;
  /**
   * Specifies the location of the dropdown button relative to its associated input field or container. Possible positions may include "left," "right," "top," or "bottom," allowing developers to control where the dropdown button appears in the user interface.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. If a specific value is provided, it will override the CSS variable and set the dropdown height explicitly.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the maximum height of the dropdown menu. By default, this value is set to an empty string, which means the dropdown's max-height will be controlled by a CSS variable instead of an explicit value. If you provide a specific value (e.g., "300px" or "50vh"), it will override the default CSS variable and directly set the maximum height of the dropdown.
   * Default value: 
   */
  dropDownMaxHeight?: string | number;
  /**
   * Defines the maximum width of the dropdown menu. By default, this value is set to an empty string, which means the dropdown's maximum width will be determined by a corresponding CSS variable. If a specific value is provided (e.g., "300px" or "50%"), it will override the CSS variable and directly set the maximum width of the dropdown.
   * Default value: 
   */
  dropDownMaxWidth?: string | number;
  /**
   * Defines the minimum height of the dropdown component. By default, this property is set to an empty string, which means the dropdown's minimum height is determined by a corresponding CSS variable. If a specific value is provided for this property, it will override the CSS variable and explicitly set the dropdown's minimum height.
   * Default value: 
   */
  dropDownMinHeight?: string | number;
  /**
   * Specifies the minimum width of the dropdown component. By default, this property is set to an empty string (""). When left unset, the dropdown’s minimum width is determined by a CSS variable, allowing for flexible styling through external stylesheets. To override the CSS value, assign a specific width value (e.g., "200px" or "10rem") to this property.
   * Default value: 
   */
  dropDownMinWidth?: string | number;
  /**
   * Specifies the direction or animation in which the dropdown menu will appear when activated, such as opening upwards, downwards, or with a specific transition effect.
   * Default value: default
   */
  dropDownOpenMode?: DropDownOpenMode | string;
  /**
   * If this property is enabled, opening the element's dropdown will insert a transparent overlay between the dropdown and the rest of the document. This overlay covers the entire viewport except for the dropdown itself, capturing all click events outside the dropdown. As a result, any clicks outside the popup will interact with the overlay instead of other elements on the page, allowing you to reliably detect and handle outside clicks (such as to close the dropdown) without unintentionally triggering other DOM elements.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the text or content to be shown in the dropdown as a placeholder when the dropdown contains no selectable items. This placeholder provides guidance or context to the user, indicating that there are currently no available options.
   * Default value: "No Items"
   */
  dropDownPlaceholder?: string;
  /**
   * Specifies the placement of the dropdown menu relative to its trigger element when opened (e.g., above, below, left, or right). This setting controls where the dropdown appears on the screen in relation to the element that activates it.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string, allowing the dropdown's width to be determined by the associated CSS variable (typically via custom properties or theme settings). If a value is provided, it overrides the CSS variable and directly sets the dropdown's width.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies how the element should respond when the Escape key is pressed by the user. This property allows you to define actions such as closing a modal, dismissing a dialog, or triggering a custom event when the Escape key is detected while the element is focused or active.
   * Default value: null
   */
  escKeyMode?: ComboBoxEscKeyMode | string;
  /**
   * Specifies whether the filtering feature is active. When set to true, users can apply filters to narrow down displayed data; when false, filtering options are disabled and all data is shown without restriction.
   * Default value: false
   */
  filterable?: boolean;
  /**
   * Specifies the placeholder text displayed inside the dropdown list’s filter input field, guiding users on what to enter when searching or filtering options.
   * Default value: ""
   */
  filterInputPlaceholder?: string;
  /**
   * Specifies the filtering behavior for the Combo Box, controlling how user input is matched against the available options (e.g., contains, starts with, or exact match). This property determines which options are displayed in the dropdown list as the user types.
   * Default value: startsWithIgnoreCase
   */
  filterMode?: FilterMode | string;
  /**
   * When enabled, this option automatically groups the items based on the first letter of each item's value or label. Note: This grouping feature is only available if the dataSource does not already include predefined groups. If the dataSource is already grouped, this setting will have no effect.
   * Default value: false
   */
  grouped?: boolean;
  /**
   * Specifies which attribute of the dataSource object should be used to group items in the ListBox. By default, if this property (groupMember) is not set, the ListBox will use the 'group' property from each dataSource item to organize groups. This property is particularly useful when loading data from a JSON file, allowing you to designate a specific property from your data objects to determine the grouping of items—especially if your JSON structure uses a different property name for grouping.
   * Default value: ""
   */
  groupMember?: string;
  /**
   * Displays supplementary helper text beneath the element. This hint is visible exclusively when the element is in focus, providing contextual guidance to users as they interact with the field.
   * Default value: ""
   */
  hint?: string;
  /**
   * Controls whether the horizontal scroll bar is displayed within the dropdown menu when the content exceeds the available width.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Represents the property name of a List item whose value will be displayed in the input field when a ListItem is selected. This allows developers to control which property of each item is shown in the input, such as displaying the item's value instead of its label. By default, the label property is used for display. This option is useful when you want to customize the displayed content, for example, to show a unique identifier or value rather than the descriptive label.
   * Default value: ""
   */
  inputMember?: string;
  /**
   * Specifies the expected type of information for the input field and informs the browser about the nature of the data to be entered. This guidance allows user agents (such as browsers and password managers) to determine if they can provide automated assistance—like autofilling relevant values—when the element is used in a form. The value assigned to this property directly maps to the standard HTML autocomplete attribute. Common values include 'on' (enable autocomplete), 'off' (disable autocomplete), 'name' (full name), 'organization' (company or organization), 'email', 'street-address', and many others, as specified by the HTML standard. Using an appropriate value improves user experience, enhances accessibility, and helps maintain privacy and security standards within web forms.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * The 'IncrementalSearchDelay' property defines the duration, in milliseconds, to wait after the user stops typing before clearing the previous search query. This timer begins as soon as the user finishes typing. During this delay period, no new search query will be initiated. Only after the specified delay has elapsed will the current search input be cleared, allowing a new search query to be started. This helps to optimize performance and user experience by preventing unnecessary or premature queries while the user is still entering their search terms.
   * Default value: 700
   */
  incrementalSearchDelay?: number;
  /**
   * Configures or retrieves the current mode of incremental search. By default, incremental search is enabled, allowing users to type while the dropdown is focused to quickly filter and highlight matching options. Modifying this setting controls how user input is processed for searching within the dropdown list.
   * Default value: startsWithIgnoreCase
   */
  incrementalSearchMode?: SearchMode | string;
  /**
   * Specifies the height (in pixels) for each list item when rendering the list. This property is only applicable when list virtualization is enabled, as it helps optimize rendering performance by allowing the component to calculate and render only the visible items.
   * Default value: null
   */
  itemHeight?: number;
  /**
   * Specifies the algorithm used to calculate the width of each item. This setting determines how the width of an item is measured, such as using the item's intrinsic content size, a fixed value, or a percentage of the container. Adjust this parameter to control how item widths are determined within the layout.
   * Default value: auto
   */
  itemMeasureMode?: ListItemMeasureMode | string;
  /**
   * A getter method that retrieves and returns an array containing all list ('') elements currently present within the dropdown menu. This allows you to easily access and manipulate every item displayed in the dropdown.
   * Default value: 
   */
  items?: {label: string, value: string}[];
  /**
   * The itemTemplate property is a string that specifies the ID of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of individual list items, allowing developers to control how each item appears when rendered in the list.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Displays a small text label positioned above the element, typically used to provide context, instructions, or additional information to users.
   * Default value: ""
   */
  label?: string;
  /**
   * Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at the top or bottom of the component. This text provides users with contextual information or status updates during loading.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the exact location on the user interface where the loading indicator will be displayed, such as at the top, center, or bottom of the screen or component.
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Sets or retrieves the unlockKey, a unique value required to grant access to the product’s premium features or activate its full functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for the component. This property determines which language is used when displaying content from the messages property, allowing for localization and internationalization of displayed messages. Set this property to a supported language code (e.g., "en", "fr") to load the corresponding translations from the messages object.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify message text, apply dynamic values, or implement custom formatting logic before the localized messages are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves an object containing localized string values used within the widget’s user interface. This property enables the customization and translation of UI text for different languages or regions. It is intended to be used together with the locale property, allowing you to easily provide or update localized strings according to the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must enter in the input field before the autocomplete feature is activated and suggestions are displayed.
   * Default value: 2
   */
  minLength?: number;
  /**
   * Specifies the maximum number of characters that can be entered into the input field. Any additional characters beyond this limit will not be accepted. This helps enforce data validation and consistency for user input.
   * Default value: -1
   */
  maxLength?: number;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when submitting HTML forms, allowing the form data to be organized and accessed by name on the server side. This attribute is essential for grouping form controls and accurately transmitting user input during form submission.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the popup is currently visible (open) or hidden (closed) in the user interface.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or example content to the user.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Prevents any user interactions with the element, including clicking, tapping, selecting, hovering, or focusing. While this is enabled, the element will not respond to mouse, keyboard, or touch events, effectively making it non-interactive for users.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s text direction is set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its content are aligned according to RTL formatting, ensuring proper display for locales that use right-to-left scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls the visibility of the resize indicator located in the bottom-right corner of the dropdown component. When this property is set to true, users will see a handle allowing them to resize the dropdown area. This property should be used together with the resizeMode property to define both the availability and behavior of the resizing feature.
   * Default value: false
   */
  resizeIndicator?: boolean;
  /**
   * Specifies whether the drop-down menu is resizable by the user. If resizing is enabled, a resize bar will be displayed along the top or bottom edge of the drop-down, allowing users to click and drag to adjust its height. Disabling this option removes the resize bar and prevents any manual resizing of the drop-down component.
   * Default value: null
   */
  resizeMode?: ResizeMode | string;
  /**
   * Specifies the content or value that will appear within the input field, either as a default value, user-entered data, or dynamically generated content. This setting controls what the user sees and interacts with inside the input element.
   * Default value: plain
   */
  selectionDisplayMode?: SelectionDisplayMode | string;
  /**
   * Sets or retrieves the selected indexes. The selected indexes property is an array containing the numeric indexes of the items that are currently selected. Each value in the array corresponds to the position of a selected item within the overall list or collection. Assigning a new array to this property updates the selection state to match the specified indexes; retrieving it returns the current selection as an array of indexes.
   * Default value: 
   */
  selectedIndexes?: number[];
  /**
   *   "Sets or retrieves the currently selected indexes. The 'selected' property holds an array of the indices corresponding to the items that are marked as selected. When setting this property, provide an array of indexes to specify which items should be selected. When getting this property, it returns the array of indexes for the currently selected items."
   * Default value: 
   */
  selectedValues?: string[];
  /**
   * Specifies the maximum number of items that a user is allowed to select at one time. If this value is set to 1, only single selection is permitted; higher values allow multiple selections up to the defined limit.
   * Default value: zeroAndOne
   */
  selectionMode?: ListSelectionMode | string;
  /**
   * Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted alphabetically; if false, the original order will be preserved.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order for data, allowing you to choose between ascending ("asc") for lowest-to-highest or alphabetical A–Z sorting, and descending ("desc") for highest-to-lowest or Z–A sorting.
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the visual theme to be applied to the element. The selected theme controls the element’s appearance, including colors, fonts, and other stylistic properties, ensuring a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Defines the custom content to display within each token when the selectionDisplayMode is set to "tokens". Tokens visually represent selected items in a multi-select interface and are only applicable when multiple selection is enabled. Use this option to customize how each token appears, such as displaying specific text, icons, or additional data for each selected item.
   * Default value: null
   */
  tokenTemplate?: any;
  /**
   * If set to true, the element will not be able to receive keyboard or mouse focus, making it inaccessible via tab navigation or programmatic focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Provides functionality to retrieve (get) or assign (set) the current value of the property. When used as a getter, it returns the property's current value. When used as a setter, it updates the property with the specified value.
   * Default value: ""
   */
  value?: string;
  /**
   * Specifies which property of each item object should be used as the value for that item. The value designated by valueMember will be stored in the item's value field. This property functions similarly to groupMember, but is focused on identifying the value rather than the group. valueMember is particularly useful when populating a ListBox from a JSON data source, as it allows you to specify which property of your data objects should serve as the unique value for each item in the ListBox.
   * Default value: """"
   */
  valueMember?: string;
  /**
   * Controls whether the vertical scroll bar is displayed within the content area, allowing users to scroll vertically when the content extends beyond the visible region.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
  /**
   * Determines whether virtualization is enabled for the ComboBox. When virtualization is enabled, the ComboBox can efficiently display a very large number of items—such as a million—by only rendering the visible items in the ListBox and dynamically loading items as needed. This significantly improves performance and reduces memory usage, especially with large data sets.
   * Default value: false
   */
  virtualized?: boolean;
}
/**
 ComboBox is the alternate for the HTML select tag with editable option. It supports data binding, auto-complete, filtering, grouping, cascading and more.
*/
export interface ComboBox extends BaseElement, ComboBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user changes the current selection, such as highlighting different text or selecting a new item in a list. It allows you to detect and respond to updates in the selected content or options within the interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(addedItems, disabled, index, label, removedItems, selected, value)
   *  addedItems - An array of List items that have been selected.
   *  disabled - A flag indicating whether or not the item that caused the change event is disabled.
   *  index - The index of the List item that triggered the event.
   *  label - The label of the List item that triggered the event.
   *  removedItems - An array of List items that have been unselected before the event was fired.
   *  selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
   *  value - The value of the List item that triggered the event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the drop-down list is closed, either by the user selecting an option or by clicking outside the menu. It occurs after the drop-down menu is no longer visible, allowing you to perform actions in response to the menu's closure.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered right before the dropdown list is about to close, providing an opportunity to intervene. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation, display a confirmation dialog, or execute custom logic before the dropdown is closed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a specific item, allowing you to execute custom actions in response to the user's selection. The event provides context about the clicked item, enabling you to access its properties or perform related updates within your application.
	* @param event. The custom event. Custom data event was created with: ev.detail(disabled, index, label, selected, value)
   *  disabled - Indicates whether the List item that was clicked is disabled or not.
   *  index - Indicates the index of the List item that was clicked.
   *  label - The label of the List item that was clicked.
   *  selected - Indicates whether the List item that was clicked is selected or not.
   *  value - The value of the List item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the dropdown list becomes visible to the user, such as when the user clicks or interacts with the control to expand and display the list of available options. Use this event to execute custom logic when the dropdown menu is opened.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the dropdown list is displayed to the user. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This allows you to implement custom logic to conditionally allow or block the opening of the dropdown, such as validating conditions or managing user permissions before the list is shown.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates the resizing action on the dropdown component, such as clicking and dragging a resize handle. It allows developers to detect the exact moment when a resize operation on the dropdown begins.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered after the user has completed resizing the dropdown menu, signaling that the resizing action has ended and the new dimensions have been set.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the bottom of the dropdown list, indicating that all available options have been displayed. It can be used to detect when additional data should be loaded or when no further options remain in the dropdown.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the very beginning (top) of the dropdown list, indicating that no more items are available above the current view.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a token item (also known as a 'pill') is clicked by the user. By handling this event, developers have the opportunity to intercept the default action that would normally occur when the token is clicked—such as opening a dropdown or performing another related operation. To prevent the default behavior from executing, call event.preventDefault() within your event handler function."
	* @param event. The custom event.    */
  onTokenClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Appends a new ListItem element to the end of the existing list of items within the specified container element, thereby updating the list to include the newly added item as its last entry.
   * @param {Node} node. A ListItem element that should be added to the rest of the items as the last item.
   * @returns {Node}
   */
  appendChild<T extends Node>(node: Node): T;
  /**
   * Creates and appends one or more new items to the collection or list.
   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
   */
  add(item: any): void;
  /**
   * Removes all existing items from the dropdown list, resulting in an empty list with no selectable options displayed to the user.
   */
  clearItems(): void;
  /**
   * Deselects all currently selected items, ensuring that no items remain selected. This action clears any existing selections and resets the selection state.
   */
  clearSelection(): void;
  /**
   * Closes the currently open drop-down list, hiding all available options from view and returning the component to its collapsed state. This action ensures that the drop-down menu is no longer visible to the user.
   */
  close(): void;
  /**
   * Initiates a data binding process, connecting UI components to the underlying data source. This method refreshes the data source, ensuring that any changes made to the data are reflected in the user interface. It can be used to update displayed information after modifying, adding, or deleting data.
   */
  dataBind(): void;
  /**
   * Scrolls the target item into view within its container, automatically adjusting the scroll position as needed to make sure the entire item is fully visible to the user.
   * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
   */
  ensureVisible(item: HTMLElement | string): void;
  /**
   * Returns a specific item instance from the dropDown list, allowing you to access the properties and methods of the selected list item. This can be used to retrieve information about the item, such as its value, label, or index within the dropDown.
   * @param {string} value. The value of an item from the drop down list.
   * @returns {HTMLElement}
   */
  getItem(value: string): HTMLElement;
  /**
   * Inserts a new item into the array at the specified index position, shifting existing elements to the right to accommodate the new item.
   * @param {number} position. The position where the item must be inserted.
   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
   */
  insert(position: number, item: any): void;
  /**
   * Inserts a new ListItem element directly before a specified existing ListItem within the list, preserving the order of the remaining items.
   * @param {Node} node. A ListItem element that should be added before the referenceItem in the list.
   * @param {Node | null} referenceNode. A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.
   * @returns {Node}
   */
  insertBefore<T extends Node>(node: Node, referenceNode: Node | null): T;
  /**
   * Displays and expands the drop-down list, making all available options visible for selection.
   */
  open(): void;
  /**
   * Removes the item located at the specified index or position within a collection (such as an array or list). After removal, the collection is updated so that subsequent items shift to fill the gap, ensuring contiguous indexing.
   * @param {number} position. The position of the removed item.
   */
  removeAt(position: number): void;
  /**
   * Removes a specified ListItem from the collection of items contained within the given element, updating the list to reflect the deletion.
   * @param {Node} node. A ListItem element that is part of the list of items inside the element.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Selects a specified item from the dropdown list, allowing users to choose one option from the available choices. This action updates the dropdown’s current selection and can trigger any associated event handlers or changes in the application’s state.
   * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
   */
  select(item: string | HTMLElement): void;
  /**
   * Deselects a specified item from the dropdown list, removing its selected state and reverting the dropdown to reflect that the item is no longer chosen by the user.
   * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
   */
  unselect(item: string | HTMLElement): void;
  /**
   * Updates the selected item in the dropDown list with new data or attributes. This action modifies the existing item rather than adding or removing items from the list, ensuring that any changes are reflected immediately in the user interface. Specify the target item and the updated values to complete the operation.
   * @param {number} position. The position where the item must be updated.
   * @param {any} value. The value of the updated item.
   */
  update(position: number, value: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-combo-box"): ComboBox;
        querySelector(selectors: "smart-combo-box"): ComboBox | null;
        querySelectorAll(selectors: "smart-combo-box"): NodeListOf<ComboBox>;
        getElementsByTagName(qualifiedName: "smart-combo-box"): HTMLCollectionOf<ComboBox>;
        getElementsByName(elementName: "smart-combo-box"): NodeListOf<ComboBox>;
    }
}

/**Specifies the autocomplete mode for the input field. The selected mode defines how the component filters and displays items from the dataSource, showing only those entries that match the user's input according to the chosen matching strategy. This setting directly impacts the suggestions presented to the user as they type. */
export declare type AutoComplete = 'none' | 'auto' | 'inline' | 'manual';
/**Specifies how the element should respond when the Escape key is pressed by the user. This property allows you to define actions such as closing a modal, dismissing a dialog, or triggering a custom event when the Escape key is detected while the element is focused or active. */
export declare type ComboBoxEscKeyMode = 'none' | 'previousValue' | 'clearValue';
/**Specifies the filtering behavior for the Combo Box, controlling how user input is matched against the available options (e.g., contains, starts with, or exact match). This property determines which options are displayed in the dropdown list as the user types. */
export declare type FilterMode = 'contains' | 'containsIgnoreCase' | 'custom' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
/**Controls whether the horizontal scroll bar is displayed within the dropdown menu when the content exceeds the available width. */
export declare type HorizontalScrollBarVisibility = 'auto' | 'disabled' | 'hidden' | 'visible';
/**Configures or retrieves the current mode of incremental search. By default, incremental search is enabled, allowing users to type while the dropdown is focused to quickly filter and highlight matching options. Modifying this setting controls how user input is processed for searching within the dropdown list. */
export declare type SearchMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
/**Specifies the algorithm used to calculate the width of each item. This setting determines how the width of an item is measured, such as using the item's intrinsic content size, a fixed value, or a percentage of the container. Adjust this parameter to control how item widths are determined within the layout. */
export declare type ListItemMeasureMode = 'auto' | 'precise';
/**Specifies the content or value that will appear within the input field, either as a default value, user-entered data, or dynamically generated content. This setting controls what the user sees and interacts with inside the input element. */
export declare type SelectionDisplayMode = 'plain' | 'placeholder' | 'tokens';
/**Specifies the maximum number of items that a user is allowed to select at one time. If this value is set to 1, only single selection is permitted; higher values allow multiple selections up to the defined limit. */
export declare type ListSelectionMode = 'none' | 'oneOrManyExtended' | 'zeroOrMany' | 'oneOrMany' | 'zeroAndOne' | 'zeroOrOne' | 'one' | 'checkBox' | 'radioButton';
/**Controls whether the vertical scroll bar is displayed within the content area, allowing users to scroll vertically when the content extends beyond the visible region. */
export declare type VerticalScrollBarVisibility = 'auto' | 'disabled' | 'hidden' | 'visible';
export interface CountryInputProperties {
  /**
   * Specifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, the element cannot be focused, clicked, or edited by the user.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Allows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling further customization of its appearance and styling.
   * Default value: 
   */
  dropDownClassList?: any;
  /**
   * Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This controls where the dropdown button appears in the user interface.
   * Default value: none
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown component. By default, this value is set to an empty string, which means the dropdown’s height will be determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown’s height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by a designated CSS variable rather than a fixed value. You can set this property to a specific CSS width value (e.g., "200px" or "50%") to override the default behavior and directly control the dropdown's width. If left empty, ensure the relevant CSS variable is properly defined to maintain consistent styling.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies or retrieves the value of the element’s name attribute. This attribute uniquely identifies the element within form data, allowing its value to be included when the form is submitted. The name attribute is essential for correctly grouping and processing user input on the server side during form submission.
   * Default value: ""
   */
  name?: string;
  /**
   * Indicates whether the dropdown menu is currently open or closed. This property returns true if the dropdown is visible to the user, and false if it is hidden.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Defines or retrieves an array of country codes to override the default list of all countries. Each country code in the array must be a valid ISO 3166-1 alpha-2 code (see: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), which consists of a two-letter uppercase abbreviation representing each country (e.g., 'US' for United States, 'FR' for France). Use this property to specify a custom subset of countries as needed.
   * Default value: []
   */
  onlyCountries?: any;
  /**
   * Specifies the placeholder text that appears inside the input field when it is empty, providing a hint to the user about the expected input format or content.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Gets or sets the currently selected country for the element. The value should be provided as an ISO 3166-1 alpha-2 country code (for example, "US" for the United States or "FR" for France). For the complete list of valid country codes, refer to the ISO 3166-1 alpha-2 standard: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2.
   * Default value: ""
   */
  selectedCountry?: string;
  /**
   * Gets or sets a value that determines whether the element's alignment supports right-to-left (RTL) locales and text direction, typically used for languages such as Arabic or Hebrew. When enabled, the element's content aligns according to RTL layout standards.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the visual style, including colors, typography, and other design attributes, ensuring consistency with the overall user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from keyboard navigation and cannot receive focus via the Tab key or other focus-related interactions.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves its current value, depending on whether an argument is provided. Use this to programmatically update or access the content, state, or data associated with the element (such as the value of an input field or the text of a form control).
   * Default value: ""
   */
  value?: string;
}
/**
 The Country Input specifies an input field where the user can select a country.
*/
export interface CountryInput extends BaseElement, CountryInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the current selection within the component changes, such as when a user selects a different item or option. It allows you to respond programmatically to selection changes, for example by updating related UI elements or processing the newly selected value.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered every time a key is released within the Input field, but only if the input’s value has changed since the last event. This allows you to respond specifically to user input modifications rather than all key releases.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user selects an item by clicking on it within the popup list. It allows you to respond to user interactions by executing custom logic—such as updating the UI or retrieving additional data—immediately after an item is chosen from the displayed list of options.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value)
   *  item - The item that was clicked.
   *  label - The label of the item that was clicked.
   *  value - The value of the item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the dropdown menu, hiding all currently visible options and returning the component to its inactive state.
   */
  close(): void;
  /**
   * Guarantees that the currently active (selected) item remains within the visible area of its container, automatically scrolling as needed to keep the item in view.
   */
  ensureVisible(): void;
  /**
   * Displays the drop-down menu, allowing users to view and select available options from the list.
   */
  open(): void;
  /**
   * Selects the text within the input field. If the input field is set to <b>readonly</b>, it will instead focus the element without selecting the text.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-country-input"): CountryInput;
        querySelector(selectors: "smart-country-input"): CountryInput | null;
        querySelectorAll(selectors: "smart-country-input"): NodeListOf<CountryInput>;
        getElementsByTagName(qualifiedName: "smart-country-input"): HTMLCollectionOf<CountryInput>;
        getElementsByName(elementName: "smart-country-input"): NodeListOf<CountryInput>;
    }
}

export interface CustomizationDialogProperties {
  /**
   * Sets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled. If set to other supported values, the corresponding animation effects will be enabled for transitions or interactions.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * An array containing the filtered fields, each with its associated configuration settings. Each element in the array represents a specific field and includes detailed settings such as field type, validation rules, display options, and other relevant properties.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Enhances or retrieves the value of the 'displayMember' property. The 'displayMember' determines which property of each object—within the collection referenced by the 'dataSource' property—will be displayed in the UI component. Set this property to the name of the object field you want to show as the display text for each item in the collection.
   * Default value: ""
   */
  displayMember?: string;
  /**
   * Controls whether the element is active and interactive (enabled) or inactive and unresponsive to user input (disabled).
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Determines whether the filtering tab is enabled or disabled, allowing you to control its availability to users. When set to true, the filtering tab will be accessible; when false, it will be hidden or inactive.
   * Default value: false
   */
  filtering?: boolean;
  /**
   * Controls whether the tab grouping feature is enabled or disabled. When enabled, users can organize multiple tabs into groups for improved navigation and management. When disabled, tab grouping functionality will not be available.
   * Default value: false
   */
  grouping?: boolean;
  /**
   * Specifies which buttons will be displayed in the header section. Provide an array of button identifiers to control the visibility and order of header buttons.
   * Default value: apply,close
   */
  headerButtons?: string[];
  /**
   * Sets or retrieves the unlockKey, a unique code used to authorize and grant access to the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property to provide language-specific content or translations. When the language is set, the corresponding localized messages from the messages property are used throughout the application.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle language changes, translations, or localization-related events within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines an object containing customizable strings used in the widget's user interface that support localization. This property allows you to set or retrieve these strings to provide translations or alternative text in different languages. Typically used together with the locale property to enable multi-language support within the widget.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "ambiguousIndexes": "jqx-tabs: Initially set jqx-tab-item indexes are ambiguous and are ignored in favour of the HTML structure.",
   *     "detailsObjectRequired": "jqx-tabs: The method \"insert\" requires a details Object to be passed as a second argument.",
   *     "invalidIndex": "jqx-tabs: '' method accepts an index of type number.",
   *     "referenceNodeNotChild": "jqx-tabs: Passed  is not part of this jqx-tabs element.",
   *     "tabItemRequired": "jqx-tabs: The method '' requires a \"jqx-tab-item\" element to be passed as an argument.",
   *     "sorting": "SORTING",
   *     "grouping": "GROUPING",
   *     "filtering": "FILTERING",
   *     "columnChooser": "COLUMN CHOOSER",
   *     "applyButton": "Apply",
   *     "closeButton": "Close",
   *     "columnsToSort": "Columns to Sort",
   *     "columnsToGroup": "Columns to Group",
   *     "placeholderSorting": "No sorting applied",
   *     "placeholderGrouping": "No grouping applied",
   *     "and": "And",
   *     "notand": "Not And",
   *     "or": "Or",
   *     "notor": "Not Or",
   *     "=": "Equals",
   *     "<>": "Does not equal",
   *     ">": "Greater than",
   *     ">=": "Greater than or equal to",
   *     "<": "Less than",
   *     "<=": "Less than or equal to",
   *     "startswith": "Starts with",
   *     "endswith": "Ends with",
   *     "contains": "Contains",
   *     "notcontains": "Does not contain",
   *     "isblank": "Is blank",
   *     "isnotblank": "Is not blank"
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies whether column reordering is enabled or retrieves the current state. When active, users can change the order of columns by dragging and dropping them.
   * Default value: false
   */
  reorder?: boolean;
  /**
   * Sets or retrieves the tab that is selected by default when the component is first initialized. This determines which tab is active and visible to the user upon loading.
   * Default value: 0
   */
  selectedTab?: number;
  /**
   * Determines whether the sorting tab is enabled or disabled. When set to true, the sorting tab will be available for user interaction; when set to false, the sorting tab will be hidden or inactive.
   * Default value: false
   */
  sorting?: boolean;
  /**
   * Specifies the theme to be applied to the element. The theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent visual presentation across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via the tab key or programmatic focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * "Sets or retrieves the value of the element. The value is represented as an object, which may contain various properties relevant to the element's data or state."
   * Default value: null
   */
  value?: any;
  /**
   * Specifies which property of the item object should be used as the item's value. The designated property will be accessed and stored as the value for each item in the list or collection. For example, if set to "id," the value from item.id will be used as the item's value.
   * Default value: ""
   */
  valueMember?: string;
  /**
   * Determines whether the columns within the element can be toggled between visible and hidden states. When set, it controls the ability to programmatically or interactively hide or show individual columns. When retrieved, it returns the current configuration indicating if column visibility can be altered.
   * Default value: false
   */
  visibility?: boolean;
}
/**
 Defines a dialog for customization of filtering, sorting.
*/
export interface CustomizationDialog extends BaseElement, CustomizationDialogProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered each time the dialog component becomes visible to the user, such as when it is opened programmatically or through user interaction.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the dialog component is closed, whether by user interaction (such as clicking a close button or pressing the Escape key) or programmatically through code. Use this event to perform cleanup actions, save state, or execute any logic that should occur after the dialog is dismissed.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the value of the value property is modified, either by user interaction or programmatic updates. It allows your application to respond in real time to changes in the data, ensuring that any dependent logic or UI is kept in sync with the current value.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the dialog is closed as a result of the user clicking the "Apply" button. It allows you to perform actions or process data after the user confirms their selections or changes within the dialog by applying them.
	* @param event. The custom event.    */
  onApply?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Opens a modal dialog window, allowing users to interact with additional content or options without navigating away from the current page.
   */
  open(): void;
  /**
   * Closes the dialog window, dismissing its content and returning focus to the underlying page or application. This action may also trigger any associated cleanup or callback functions.
   */
  close(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-customization-dialog"): CustomizationDialog;
        querySelector(selectors: "smart-customization-dialog"): CustomizationDialog | null;
        querySelectorAll(selectors: "smart-customization-dialog"): NodeListOf<CustomizationDialog>;
        getElementsByTagName(qualifiedName: "smart-customization-dialog"): HTMLCollectionOf<CustomizationDialog>;
        getElementsByName(elementName: "smart-customization-dialog"): NodeListOf<CustomizationDialog>;
    }
}

export interface DataAdapter {
  /**
   * Determines whether data binding is performed automatically upon the creation of a data adapter instance. When enabled, the binding process will commence immediately after the adapter is initialized, eliminating the need for manual binding. This property can both retrieve the current automatic binding status and enable or disable it as needed.
   * Default value: true
   */
  autoBind?: boolean;
  /**
   * Sets or retrieves a value indicating whether the binding operation executes asynchronously. When set to true, the binding occurs asynchronously, allowing other operations to run without waiting for the binding to complete. When false, the binding is performed synchronously, blocking further execution until the process finishes.
   * Default value: false
   */
  async?: boolean;
  /**
   * Retrieves the data source object that has been successfully bound to the component after the data binding process is completed. This allows you to access the actual data being used by the component following the completion of data binding.
   * Default value: 
   */
  boundSource?: any[];
  /**
   * Retrieves the hierarchical data source object that has been successfully bound after the data binding operation is completed. This provides access to the structured data as it is used by the control.
   * Default value: 
   */
  boundHierarchy?: any[];
  /**
   * Specifies the name of the data field (such as 'children' or 'items') in the data source that contains nested child items. When this property is set, the dataAdapter will use the specified field to identify and traverse child elements within each item. If this field is present in an item, the dataAdapter recognizes the structure as hierarchical and automatically constructs a nested data source, enabling support for tree or multi-level data representations. You can use this property both to retrieve the current field name or to set a custom field name for your data structure.
   * Default value: ""
   */
  childrenDataField?: string;
  /**
   * Specifies one or more data fields to use for grouping records. When set, it groups the dataset by the provided field(s); when retrieved, it returns the current grouping field(s) in use. Accepts a string for a single field or an array of strings for multiple fields.
   * Default value: []
   */
  groupBy?: string[];
  /**
   * Specifies or retrieves the definitions of data fields for the loaded dataset, including both the field name and its data type. For example: ['id: number', 'firstName: string', 'lastName: string'] describes a dataset where "id" is a number, and "firstName" and "lastName" are strings. This property ensures that the structure and types of the incoming data are clearly defined.
   * Default value: string[]
   */
  dataFields?: string[];
  /**
   * Defines or retrieves the data source that the adapter uses to populate and manage its items. This property allows you to assign a new data collection to the adapter or obtain the current data set being used for rendering content.
   * Default value: []
   */
  dataSource?: any;
  /**
   * Specifies or retrieves the type of data source being used. This property can be set to define the data source type or accessed to determine the current type assigned.
   * Default value: array
   */
  dataSourceType?: DataAdapterDataSourceType | string;
  /**
   * Gets or sets the unique identifier (id) associated with the dataAdapter. This property is used to retrieve the current id or assign a new one to distinguish the dataAdapter instance.
   * Default value: ""
   */
  id?: string;
  /**
   * Specifies the data field that uniquely identifies each item in the dataset and is used to construct the hierarchical structure. This property should be used together with the parentDataField property, which defines the field that references the parent item's key. Typically, the key data field is an 'id' property that provides a unique identifier for each item, while the parent data field, such as 'parentId', indicates the identifier of the item's parent, allowing the hierarchy to be established. This property can both set and retrieve the current key data field.
   * Default value: ""
   */
  keyDataField?: string;
  /**
   * Retrieves the total number of items currently available in the data source.
   * Default value: 0
   */
  length?: number;
  /**
   * Sets or retrieves the type of HTTP request (such as GET, POST, PUT, or DELETE) being used."If you know the specific property or method this applies to, you can make it even more precise.
   * Default value: GET
   */
  method?: DataAdapterMethod | string;
  /**
   * Specifies or retrieves the name of the data field that represents the parent relationship when constructing a hierarchical structure. This property works in conjunction with the keyDataField property: keyDataField identifies each item's unique key (typically the 'id' field), while parentDataField identifies the parent reference (typically the 'parentId' field) within the data source. Together, these properties enable the correct linking of child items to their parent items within the hierarchy.
   * Default value: ""
   */
  parentDataField?: string;
  /**
   * Provides a getter or setter for the onExpand callback used with virtual data sources. This function is triggered when nodes are expanded and on-demand data loading is required in Tree or TreeGrid components that have the virtualDataSource property configured. It is used to fetch additional data dynamically as users expand tree nodes, ensuring efficient data loading and rendering for large data sets.
   * Default value: null
   */
  virtualDataSourceOnExpand?: DataAdapterVirtualDataSourceOnExpand[];
  /**
   * Specifies or retrieves the total number of items. Assign a value to indicate the known length; otherwise, if the length is unknown or cannot be determined, omit this parameter.
   * Default value: 0
   */
  virtualDataSourceLength?: number;
  /**
   * Gets or sets a boolean parameter that controls whether newly loaded data should be cached. If set to true, the data will be stored in the cache upon loading; if false, the data will not be cached.
   * Default value: true
   */
  virtualDataSourceCache?: boolean;
  /**
   * Defines or retrieves the function responsible for providing data to the virtual data source. When set, this function is called to dynamically fetch or generate the data items used by the component, enabling efficient handling of large or remote datasets through virtualization.
   * Default value: null
   */
  virtualDataSource?: DataAdapterVirtualDataSource[];
  /**
   * Creates and adds a new item to the collection. This action typically involves validating the input data, assigning a unique identifier to the item, and updating the collection to include the new entry.
   * @param {any} item. A new data source item.
   * @param {string | number} parentId?. id of a parent data item, when we want to add a child in a hierarchy
   */
  add(item: any, parentId?: string | number): void;
  /**
   * Removes all data from the adapter, resetting it to an empty state. This operation clears any items currently managed or displayed by the adapter, ensuring that subsequent queries reflect the absence of data.
   */
  clear(): void;
  /**
   * Removes any applied sorting from the data set, returning it to its original, unsorted order.
   */
  clearSort(): void;
  /**
   * Removes all active filters and restores the original, unfiltered data set.
   */
  clearFilter(): void;
  /**
   * Removes any applied grouping from the data set, restoring it to an ungrouped or default state. This action ensures that records are displayed without any organizational grouping criteria.
   */
  clearGroup(): void;
  /**
   * Binds the adapter component to its designated data source, ensuring that the displayed information remains synchronized with the underlying data. When the data source is remote (such as an external API or server), initiating a fresh AJAX request is required to retrieve the latest data and update the UI accordingly.
   */
  dataBind(): void;
  /**
   * Notifies the application whenever data is modified, including events such as adding new items, removing existing items, or updating the details of current items. This ensures that any changes to the data are detected and can trigger appropriate UI updates or other actions.
   * @param {any} callback. The callback function which is called when a change happened. { action: 'add' | 'bindingComplete' | 'removeLast' | 'remove' | 'move' | 'update' | 'insert', data: [], index?: number }
   */
  notify(callback: any): void;
  /**
   * The `find` method searches through the provided array and returns the value of the first element that satisfies the specified testing function. If no element meets the criteria defined in the function, `find` returns `undefined`. This method does not modify the original array and stops searching once a matching element is found.
   * @param {any} callback. Function to execute on each value in the array, taking 2 arguments - element and index. The element is the current item in the array. The index is the index of the current element.
   * @returns {any}
   */
  find(callback: any): any;
  /**
   * Filters the data source by applying specified criteria to return only the records that match the given conditions. This allows users to narrow down large datasets based on customizable parameters such as field values, ranges, or patterns.
   * @param {string[]} dataFields. The data fields.
   * @param {any} filterGroups. The filter group objects.
   */
  filter(dataFields: string[], filterGroups: any): void;
  /**
   * Filters and refines the data source by applying specified criteria, returning only the records that meet the defined conditions.
   * @param {string} dataField. The data field.
   * @param {string[]} filterExpessions. Filter expression like '= 5'. Allowed operators '=', '<','>','<>', '<=', '>=', 'starts with','contains','ends with', '', 'null'
   */
  filterBy(dataField: string, filterExpessions: string[]): void;
  /**
   * Retrieves the zero-based index position of a specified item within a collection or array. If the item is not found, the function typically returns -1.
   * @param {number} index. The index of the item.
   * @returns {any}
   */
  indexOf(index: number): any;
  /**
   * Adds a new item to the collection or array. If applicable, the function allows you to specify the item's content and the position at which it should be inserted. Existing elements may be shifted to accommodate the new item.
   * @param {number} index. The index where to insert the item.
   * @param {any} item. An object containing the values for the properties of the item that will be updated.
   */
  insert(index: number, item: any): void;
  /**
   * Moves a specified item from its current position to a new target location within the data structure or list. This action updates the item's index or parent container to reflect the move operation.
   * @param {number} from. The item's old index.
   * @param {number} to. The item's new index.
   */
  move(from: number, to: number): void;
  /**
   * Removes the last item from the data source array, reducing its length by one. Returns the removed item. If the data source is empty, no item is removed and undefined is returned.
   */
  removeLast(): void;
  /**
   * Removes the item located at the specified index within the collection or array, effectively shifting all subsequent items one position toward the start and reducing the total number of items by one.
   * @param {number} position. The index of the item to be removed.
   */
  removeAt(position: number): void;
  /**
   * Sorts the data source in a specified order, arranging its items based on defined sorting criteria such as one or more fields and the chosen sort direction (ascending or descending). This process organizes the data to facilitate easier access, analysis, or display according to the application's requirements.
   * @param {string[]} dataFields. The data fields.
   * @param {string[]} sortOrders. The sort orders array with 'asc' or 'desc' or null values.
   */
  sort(dataFields: string[], sortOrders: string[]): void;
  /**
   * Organizes the data source elements in a specified order, such as ascending or descending, based on one or more designated fields or criteria.
   * @param {string} dataField. The data field.
   * @param {string} dataType. The type of the data field - string, number, date, boolean.
   * @param {string} sortOrder. The sort order - 'asc' or 'desc' or null.
   */
  sortBy(dataField: string, dataType: string, sortOrder: string): void;
  /**
   * Aggregates and summarizes data retrieved from the specified data source by performing operations such as grouping, counting, summing, or averaging, to produce consolidated results for further analysis or display.
   * @param {any[]} summaryItems. The summary items. Each summary item represents a data field with summary function: 'avg' - Average aggregate, 'count' - Count aggregate, 'min' - Min aggregate, 'max' - Max aggregate, 'sum' - Sum aggregate, 'product' - Product aggregate, 'stdev' - Standard deviation on a sample., 'stdevp' - Standard deviation on an entire population., 'varp' - Variance on an entire population., 'var' - Variance on a sample.
   */
  summarize(summaryItems: any[]): void;
  /**
   * Returns an array containing all items present in the collection, including their complete data and properties. The array maintains the original order of items and includes every item, regardless of filters or previous queries.
   * @returns {any[]}
   */
  toArray(): any[];
  /**
   * Enhances an existing item within the specified element by updating its properties with new values provided in the request. This operation modifies only the targeted item, leaving other items within the element unchanged. Ensure that the correct item identifier is supplied to perform the update successfully.
   * @param {number} index. The index of the item to be updated.
   * @param {any} item. An object containing the values for the properties of the item that will be updated.
   */
  update(index: number, item: any): void;
}

export interface DataAdapterVirtualDataSourceOnExpand {
  /**
   * Result callback function which is executed when the data loading is completed.
   * Default value: null
   */
  resultCallbackFunction?: DataAdapterVirtualDataSourceOnExpandResultCallbackFunction;
  /**
   * Details of the object, which made the request
   * Default value: null
   */
  details?: DataAdapterVirtualDataSourceOnExpandDetails;
}

/**Result callback function which is executed when the data loading is completed. */
export interface DataAdapterVirtualDataSourceOnExpandResultCallbackFunction {
(
  /**
   * result callback function settings
   * Default value: null
   */
  settings?: any

): void;
}

/**Details of the object, which made the request */
export interface DataAdapterVirtualDataSourceOnExpandDetails {
  /**
   * Data start index.
   * Default value: 0
   */
  first?: number;
  /**
   * Data end index.
   * Default value: 0
   */
  last?: number;
  /**
   * Sorting information.
   * Default value: null
   */
  sorting?: DataAdapterVirtualDataSourceOnExpandDetailsSorting;
  /**
   * Filtering information.
   * Default value: null
   */
  filtering?: any;
  /**
   * Grouping information
   * Default value: []
   */
  grouping?: string[];
  /**
   * Request action type
   * Default value: undefined
   */
  action?: DataAdapterVirtualDataSourceOnExpandDetailsAction | string;
}

/**Sorting information. */
export interface DataAdapterVirtualDataSourceOnExpandDetailsSorting {
  /**
   * Sort order.
   * Default value: asc
   */
  sortOrder?: DataAdapterVirtualDataSourceOnExpandDetailsSortingSortOrder | string;
  /**
   * Sort index.
   * Default value: -1
   */
  sortIndex?: number;
}

export interface DataAdapterVirtualDataSource {
  /**
   * Result callback function which is executed when the data loading is completed.
   * Default value: null
   */
  resultCallbackFunction?: DataAdapterVirtualDataSourceResultCallbackFunction;
  /**
   * Details of the object, which made the request
   * Default value: null
   */
  details?: DataAdapterVirtualDataSourceDetails;
}

/**Result callback function which is executed when the data loading is completed. */
export interface DataAdapterVirtualDataSourceResultCallbackFunction {
(
  /**
   * result callback function settings
   * Default value: null
   */
  settings?: any

): void;
}

/**Details of the object, which made the request */
export interface DataAdapterVirtualDataSourceDetails {
  /**
   * Data start index.
   * Default value: 0
   */
  first?: number;
  /**
   * Data end index.
   * Default value: 0
   */
  last?: number;
  /**
   * Sorting information.
   * Default value: null
   */
  sorting?: any;
  /**
   * Filtering information.
   * Default value: null
   */
  filtering?: any;
  /**
   * Grouping information
   * Default value: []
   */
  grouping?: string[];
  /**
   * Request action type
   * Default value: undefined
   */
  action?: DataAdapterVirtualDataSourceDetailsAction | string;
  /**
   * Expanded Row when data is loaded on demand in Tree Hierarchy scenarios.
   * Default value: undefined
   */
  row?: any;
}
/**Specifies or retrieves the type of data source being used. This property can be set to define the data source type or accessed to determine the current type assigned. */
export declare type DataAdapterDataSourceType = 'array' | 'json' | 'xml' | 'csv' | 'tsv';
/**Sets or retrieves the type of HTTP request (such as GET, POST, PUT, or DELETE) being used."<br/><br/>If you know the specific property or method this applies to, you can make it even more precise. */
export declare type DataAdapterMethod = 'GET' | 'POST';
/**Sort order. */
export declare type DataAdapterVirtualDataSourceOnExpandDetailsSortingSortOrder = 'asc' | 'desc';
/**Request action type */
export declare type DataAdapterVirtualDataSourceOnExpandDetailsAction = 'sort' | 'filter' | 'dataBind' | 'scroll' | 'group' | 'expand' | 'pageIndexChange' | 'pageSizeChange';
/**Request action type */
export declare type DataAdapterVirtualDataSourceDetailsAction = 'sort' | 'filter' | 'dataBind' | 'scroll' | 'group' | 'expand' | 'pageIndexChange' | 'pageSizeChange';
export interface DateInputProperties {
  /**
   * Specifies whether the calendar button pop-up should automatically close after a user selects a date or time. If set to true, the pop-up will close immediately upon selection; if false, the pop-up will remain open, allowing multiple selections or further interaction.
   * Default value: false
   */
  autoClose?: boolean;
  /**
   * Specifies the duration (in milliseconds) to wait before automatically closing the calendar pop-up after it is opened. This setting is effective only when autoClose is set to true; if autoClose is false, this option is ignored.
   * Default value: 500
   */
  autoCloseDelay?: number;
  /**
   * Specifies the configuration options and properties that will be applied to the popup calendar, such as date format, selectable date range, default view, and localization settings.
   * Default value: null
   */
  calendarProperties?: any;
  /**
   * Specifies the format in which dates are displayed within the input field. This property accepts a configuration object compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). You can customize the date format by providing options such as day, month, and year with values like 'numeric', '2-digit', 'long', etc. For example, { day: 'numeric', month: 'long', year: '2-digit' }. Internally, JavaScript’s Intl.DateTimeFormat is used to format the date strings according to these options. If not specified, the default format is { day: 'numeric', month: 'numeric', year: 'numeric' }, which displays dates using numeric day, month, and year values (e.g., 06/11/2024).
   * Default value: { day: 'numeric', month: 'numeric', year: 'numeric' }
   */
  dateTimeFormat?: any;
  /**
   * Determines whether the element is enabled and interactive, or disabled and non-interactive. When set to true, the element is disabled and cannot be interacted with by the user; when set to false, the element remains enabled and fully functional.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the placement of the dropdown button within its container, such as aligning it to the left, right, center, or another designated position. This setting affects where the button appears in relation to surrounding elements.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the drop-down menu. By default, the height is set to 'auto', allowing the drop-down to automatically adjust its size based on its content. You can set a specific value (e.g., '200px', '50%', etc.) to limit or customize the height as needed.
   * Default value: auto
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable. If a specific value is provided (such as "200px" or "50%"), it will override the CSS variable and explicitly set the dropdown's width to that value. Use this property to customize the dropdown’s width as needed.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Sets the custom date and time formatting pattern. When the 'formatString' property is set, it takes precedence over the 'dateTimeFormat' property, which will be disabled. The formatted output will strictly follow the pattern defined in 'formatString'.'Built-in Format Strings:'- ''d'': Short date pattern (e.g., 'M/d/yyyy')- ''D'': Long date pattern (e.g., 'dddd, MMMM dd, yyyy')- ''t'': Short time pattern (e.g., 'h:mm tt')- ''T'': Long time pattern (e.g., 'h:mm:ss tt')- ''f'': Long date, short time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm tt')- ''F'': Long date, long time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm:ss tt')- ''M'': Month/day pattern (e.g., 'MMMM dd')- ''Y'': Year/month pattern (e.g., 'yyyy MMMM')- ''S'': Sortable date/time pattern, culture-invariant (e.g., 'yyyy-MM-ddTHH:mm:ss')'Custom Format String Components:'- ''d'': Day of month (1–31)- ''dd'': Day of month, two digits (01–31)- ''ddd'': Abbreviated day name (e.g., Mon, Tue)- ''dddd'': Full day name (e.g., Monday, Tuesday)- ''h'': Hour (12-hour clock, 1–12)- ''hh'': Hour (12-hour clock, two digits, 01–12)- ''H'': Hour (24-hour clock, 0–23)- ''HH'': Hour (24-hour clock, two digits, 00–23)- ''m'': Minute (0–59)- ''mm'': Minute, two digits (00–59)- ''M'': Month (1–12)- ''MM'': Month, two digits (01–12)- ''MMM'': Abbreviated month name (e.g., Jan, Feb)- ''MMMM'': Full month name (e.g., January, February)- ''s'': Second (0–59)- ''ss'': Second, two digits (00–59)- ''t'': First character of the AM/PM designator (A or P)- ''tt'': AM/PM designator- ''y'': Year, last one or two digits (e.g., 0–99)- ''yy'': Year, last two digits (00–99)- ''yyy'': Year, minimum three digits- ''yyyy'': Year, four digits (e.g., 2024)- ''yyyyy'': Year, minimum five digits (pads with leading zeros if necessary)'Note:'  Use these format specifiers to customize how dates and times are displayed in your application. If you assign a value to 'formatString', make sure to use the correct pattern for your intended output. When this property is active, 'dateTimeFormat' settings are ignored.
   * Default value: ""
   */
  formatString?: string;
  /**
   * Defines the expected type of input data for the form element and specifies whether, and to what extent, the browser or user agent is allowed to provide automated autofill assistance. This value directly corresponds to the standard HTML autocomplete attribute and guides browsers in offering suggestions to the user, improving form completion speed and accuracy. Possible values include generic options such as 'on' or 'off', as well as more specific values describing the kind of information expected—such as 'name', 'email', 'organization', 'street-address', and others. Setting this attribute helps enhance both user experience and data accuracy by allowing browsers to match the input field with saved user data.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Retrieves or assigns the unlockKey value used to authenticate and grant access to the product. The unlockKey serves as a security credential required to unlock the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which language is used when displaying messages, in coordination with the messages property that holds localized message strings for different languages. Adjusting this property updates the displayed messages to match the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify or enhance the appearance, structure, or content of localization messages before they are rendered to the user.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the latest selectable date that can be displayed in the popup's Calendar. Dates beyond this value will be disabled and cannot be selected by the user.
   * Default value: new Date(2100, 1, 1)
   */
  max?: any;
  /**
   * Defines or retrieves an object containing the set of user-facing strings displayed by the widget, allowing them to be customized for different languages. This property works in conjunction with the locale property to support localization and internationalization of the widget interface. By providing translated strings in this object, you can ensure that all text elements within the widget match the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the earliest selectable date that can be shown in the Calendar component within the popup. Dates prior to this value will be disabled and cannot be selected by the user.
   * Default value: new Date(1900, 1, 1)
   */
  min?: any;
  /**
   * Enhances or retrieves the value of the 'name' attribute for the element. The 'name' attribute assigns a unique identifier to the element, which is essential when submitting form data. During form submission, the value of the element is sent to the server associated with this 'name', allowing the server to correctly process and recognize each field of the form.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the dropdown menu is currently open (visible to the user) or closed (hidden from view).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field before the user enters a value. This text provides guidance or an example of the expected input format.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Determines whether the user can enter or edit text in the input field. When the dropDownButtonPosition property is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the input's behavior:  - If readonly is false, the element functions as a ComboBox, allowing users to type custom values in addition to selecting from the drop-down list.  - If readonly is true, the element functions as a DropDownList, restricting user input to selections from the provided list only; manual text entry is disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that specifies whether the element’s text and layout are aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, ensuring proper display and reading order for locales that use RTL scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or script-based focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets or sets the value of the element. The value should be either a date string (e.g., "2024-06-01"), a JavaScript Date object, or null to indicate no value.
   * Default value: 
   */
  value?: any;
}
/**
 DateInput specifies an input field where the user can enter a date. It also has a popup with a Calendar that allows to pick a date.
*/
export interface DateInput extends BaseElement, DateInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user changes the current selection, such as highlighting different text, selecting a new item in a list, or modifying the currently selected elements. It allows you to execute custom code in response to any change in selection within the relevant component or interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu, hiding its options from view and returning the dropdown component to its inactive state.
   */
  close(): void;
  /**
   * Displays and expands the dropdown menu, allowing the user to view and select available options.
   */
  open(): void;
  /**
   * Enhancement:<br/><br/>"Selects the text within the input element. If the input is marked as <b>readonly</b>, the element will be focused without selecting its content."
   */
  select(): void;
  /**
   * Returns the value converted to the specified format, ensuring that the output matches the required data type or structure as requested.
   * @param {string | Date} value. The value to be formatted by the method. 
   * @param {any} format?. The object that contains the formatting properties. The argument should contain Intl.DateTimeFormat valid properties.
   */
  getFormattedValue(value: string | Date, format?: any): void;
  /**
   * Returns the date portion extracted from the provided input, which can be a date, datetime string, or timestamp. The output is formatted as a standard date (e.g., "YYYY-MM-DD"), omitting any time or timezone information present in the input.
   */
  getValue(): void;
  /**
   * Specifies the date value for the input field. This determines the preselected date that appears in the date picker when the input is rendered, or programmatically sets the input's current date. The value should follow the format 'YYYY-MM-DD' to ensure compatibility across browsers.
   * @param {string | Date} value. The value to be set. 
   */
  setValue(value: string | Date): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-date-input"): DateInput;
        querySelector(selectors: "smart-date-input"): DateInput | null;
        querySelectorAll(selectors: "smart-date-input"): NodeListOf<DateInput>;
        getElementsByTagName(qualifiedName: "smart-date-input"): HTMLCollectionOf<DateInput>;
        getElementsByName(elementName: "smart-date-input"): NodeListOf<DateInput>;
    }
}

export interface DateRangeInputProperties {
  /**
   * Sets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled, resulting in immediate visual changes without any transition effects. For other values, the corresponding animation style will be applied during state changes.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the format used to display dates within the input field. This property accepts any valid date formatting options supported by the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing for customized date representations based on user needs. By default, the date format adapts to the value provided in the 'locale' property, ensuring localization and regional date standards are respected. Under the hood, JavaScript's Intl.DateTimeFormat is utilized to generate the formatted date strings according to the specified format and locale settings.
   * Default value: {"day": "numeric", "month": "numeric", "year": "numeric" }
   */
  dateFormat?: DateRangeFormat;
  /**
   * Determines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to events. When disabled, the element appears visually distinct (usually grayed out) and does not respond to user actions such as clicks or keyboard input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the alignment and placement of the dropdown button relative to its parent element. This property controls whether the dropdown button appears to the left, right, above, or below its associated component.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this value is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. If a specific height is provided, it will override the CSS variable and explicitly set the dropdown’s height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string, meaning the dropdown's width will be determined by the associated CSS variable rather than a fixed value. You can override this behavior by explicitly setting a width value (e.g., '200px', '50%'), which will apply directly to the dropdown element. If left unset, ensure that the relevant CSS variable is defined to control the dropdown's width as needed.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Controls the visibility of the 'Today' and 'Clear' icons in the user interface. Set this option to display or hide these icons, allowing users to quickly select the current date or clear their selection.
   * Default value: false
   */
  icons?: boolean;
  /**
   * Specifies the autocomplete attribute for the input element, which informs the browser and user agents about the expected type of data to be entered. This attribute helps determine whether and how the browser may offer autocomplete suggestions or automatically fill in the input based on previously entered information. Setting this value provides guidance on the input’s purpose—such as 'on' (enable autocomplete), 'name' (person’s full name), 'organization' (company or organization name), 'street-address' (street address), and other standardized options—improving user experience and data accuracy in forms.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Defines or retrieves the unlockKey, a unique identifier or code required to activate or grant access to the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property works together with the messages property to display content in the selected language. When the language is set, the appropriate localized messages from the messages object are used.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom formatting logic for messages returned by the Localization Module. Use this to modify or enhance how localized messages are structured or displayed before they are delivered to the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the latest selectable date that can be displayed on the calendar within the popup. Users will not be able to select any date beyond this maximum limit.
   * Default value: new Date(2100, 1, 1)
   */
  max?: any;
  /**
   * Defines or retrieves an object containing the text strings displayed by the widget, allowing for easy localization and customization of user-facing messages, labels, and prompts. This property works together with the locale property to display content in the appropriate language for end users. Use this setting to provide translations and update UI text based on the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the earliest selectable date in the calendar that appears within the popup. Dates prior to this value will be disabled and cannot be selected by the user.
   * Default value: new Date(1900, 1, 1)
   */
  min?: any;
  /**
   * Specifies how many calendar months are visible within the popup interface at once. Increasing this number allows users to view and select dates across multiple months simultaneously.
   * Default value: 1
   */
  months?: number;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute is important when submitting data within an HTML form, as it identifies the form field's key in the submitted data, allowing the server to process the input correctly. Assigning a unique name to each form element ensures that their values are included in the form submission and can be accessed on the server side.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the dropdown menu is currently open ('true') or closed ('false'). This boolean value controls the visibility of the dropdown component on the user interface.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field when it is empty, providing a hint or example of the expected input value.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies whether the user can type text directly into the input field. When a dataSource is provided and dropDownButtonPosition is set to 'left' or 'right', setting readonly to true makes the element function as a DropDownList, allowing selection only from the provided options. Setting readonly to false enables ComboBox behavior, allowing the user to both select from the list and enter custom input.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element will be displayed in a manner consistent with locales that require right-to-left text direction, ensuring proper layout and text alignment for RTL fonts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the character or string used to separate the start date and end date within the input field when a date range is selected. This delimiter helps clearly distinguish between the beginning and ending dates entered by the user.
   * Default value: " - "
   */
  separator?: string;
  /**
   * Specifies the format in which dates are displayed within the input field. This property accepts date format options compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). If not explicitly set, the date format will automatically be determined based on the current value of the 'locale' property. Ensure the provided format object follows the valid options for Intl.DateTimeFormat to guarantee proper date rendering.
   * Default value: { hour: '2-digit', minute: '2-digit' }
   */
  timeFormat?: TimeRangeFormat;
  /**
   * Specifies whether users can select a time value in addition to a date. When enabled, a time picker will be displayed, allowing users to choose both date and time; when disabled, only date selection is available.
   * Default value: false
   */
  timepicker?: boolean;
  /**
   * Specifies the visual theme applied to the element. Themes control the appearance and styling of elements, including colors, fonts, spacing, and other design attributes, ensuring a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard or programmatic focus. As a result, users will not be able to navigate to the element using the Tab key or other focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets or sets the value of the element. The data type of value is determined by the valueType property; for example, if valueType is set to "number", value will hold a numeric value, while if valueType is "string", value will contain a text string. Use this property to reliably read from or assign a new value to the element in accordance with its specified type.
   * Default value: 
   */
  value?: any;
  /**
   * Specifies the data type that will be returned by the 'value' property, allowing developers to know what type of value (e.g., string, number, boolean, object) to expect when accessing this property.
   * Default value: string
   */
  valueType?: DateRangeInputValueType | string;
}
/**
 DateRangeInput specifies an input field where the user can enter a date range ( from date - to date ). It also has a popup with a Calendar that allows to select a date range. Time selection is an additional feature that can be enabled which allows to specify time for the date range.
*/
export interface DateRangeInput extends BaseElement, DateRangeInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the current selection, such as by selecting or deselecting text, items, or options within the interface. It fires each time the selection state changes, enabling developers to respond dynamically to user interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu by hiding all its options and returning the dropdown to its inactive state. This action ensures that no items are displayed and any selection process is canceled or finalized, depending on the current workflow.
   */
  close(): void;
  /**
   * Displays the dropdown menu, allowing users to view and select available options.
   */
  open(): void;
  /**
   * Selects the text within the input field. If the input is set to <b>readonly</b>, the element will be focused instead, but the text will not be selected.
   */
  select(): void;
}

/**Specifies the format used to display dates within the input field. This property accepts any valid date formatting options supported by the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing for customized date representations based on user needs. By default, the date format adapts to the value provided in the 'locale' property, ensuring localization and regional date standards are respected. Under the hood, JavaScript's Intl.DateTimeFormat is utilized to generate the formatted date strings according to the specified format and locale settings. */
export interface DateRangeFormat {
  /**
   * Day format.
   * Default value: numeric
   */
  day?: DateRangeFormatDay | string;
  /**
   * Month format.
   * Default value: numeric
   */
  month?: DateRangeFormatMonth | string;
  /**
   * Year format.
   * Default value: numeric
   */
  year?: DateRangeFormatYear | string;
}

/**Specifies the format in which dates are displayed within the input field. This property accepts date format options compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). If not explicitly set, the date format will automatically be determined based on the current value of the 'locale' property. Ensure the provided format object follows the valid options for Intl.DateTimeFormat to guarantee proper date rendering. */
export interface TimeRangeFormat {
  /**
   * Hour format.
   * Default value: 2-digit
   */
  hour?: TimeRangeFormatHour | string;
  /**
   * Minute format.
   * Default value: 2-digit
   */
  minute?: TimeRangeFormatMinute | string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-date-range-input"): DateRangeInput;
        querySelector(selectors: "smart-date-range-input"): DateRangeInput | null;
        querySelectorAll(selectors: "smart-date-range-input"): NodeListOf<DateRangeInput>;
        getElementsByTagName(qualifiedName: "smart-date-range-input"): HTMLCollectionOf<DateRangeInput>;
        getElementsByName(elementName: "smart-date-range-input"): NodeListOf<DateRangeInput>;
    }
}

/**Day format. */
export declare type DateRangeFormatDay = 'numeric' | '2-digit';
/**Month format. */
export declare type DateRangeFormatMonth = 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
/**Year format. */
export declare type DateRangeFormatYear = 'numeric' | '2-digit';
/**Hour format. */
export declare type TimeRangeFormatHour = 'numeric' | '2-digit';
/**Minute format. */
export declare type TimeRangeFormatMinute = 'numeric' | '2-digit';
/**Specifies the data type that will be returned by the 'value' property, allowing developers to know what type of value (e.g., string, number, boolean, object) to expect when accessing this property. */
export declare type DateRangeInputValueType = 'string' | 'object';
export interface DateTimePickerProperties {
  /**
   * Defines or retrieves the current animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Enhances the animation behavior of the calendar pop-up when it is enabled by applying customizable animation settings.'Properties:'- 'startSpeed': Specifies the initial velocity of the animation when the calendar pop-up appears, controlling how quickly the animation begins.- 'easeThreshold': Defines the point within the animation at which the "ease effect" takes place, causing the animation to gradually slow down for a smoother transition.- 'step': Sets the interval at which the animation progresses (e.g., the number of pixels or frames per update), determining the smoothness and speed of the animation.- 'stepEaseSize': A multiplier used to calculate the new step size after the ease threshold has been crossed; this value fine-tunes how much the animation slows down.- 'resetThreshold': Establishes the limit at which the animation resets. Once this value is reached, the animation sequence restarts from the beginning.These settings allow for precise control over the appearance and feel of the calendar pop-up’s animation, providing an improved and customizable user experience.
   * Default value: null
   */
  animationSettings?: any;
  /**
   * Specifies whether the calendar button pop-up should automatically close after a user selects a date or time. If enabled, the pop-up will be dismissed immediately upon selection, providing a streamlined user experience. If disabled, the pop-up will remain open, allowing for multiple selections or further interaction.
   * Default value: false
   */
  autoClose?: boolean;
  /**
   * Specifies the duration, in milliseconds, to wait before automatically closing the calendar pop-up after it is triggered. This setting is effective only when autoClose is set to true.
   * Default value: 500
   */
  autoCloseDelay?: number;
  /**
   * Controls the visibility of the calendar button. When visible, this button allows users to open the calendar popup and select a date. If hidden, users will not have access to the calendar popup from the interface.
   * Default value: false
   */
  calendarButton?: boolean;
  /**
   * Specifies the placement of the calendar button relative to the input field. For example, this setting can position the calendar button to the left, right, above, or below the input, allowing for flexible UI customization.
   * Default value: right
   */
  calendarButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the display style of the calendar pop-up header, such as showing only the month, only the year, or both, to control how navigation and information are presented to the user.
   * Default value: default
   */
  calendarMode?: CalendarMode | string;
  /**
   * Specifies or retrieves the display format used for the day names (such as "Mon", "Monday", or "M") shown in the calendar popup. This determines how the days of the week are presented to users within the calendar interface.
   * Default value: firstTwoLetters
   */
  dayNameFormat?: DayFormat | string;
  /**
   * Determines whether the element is interactive or not. When enabled, the element can receive user input and respond to actions; when disabled, the element becomes inactive and cannot be interacted with by the user.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Prevents the calendar pop-up from automatically navigating to a different month when the user clicks on a date that belongs to another month (outside of the currently displayed month). This ensures that clicking on dates not in the current month view will not change the visible month.
   * Default value: false
   */
  disableAutoNavigation?: boolean;
  /**
   * Specifies the time zone in which the value should be displayed, ensuring that all date and time information is presented according to the selected region's local time settings. This affects how timestamps are interpreted and shown to the user.
   * Default value: unspecified
   */
  displayKind?: DateTimePickerDisplayKind | string;
  /**
   * Specifies the display format (month or year view) shown in the calendar pop-up when the calendarMode property is set to "Default". This setting controls whether users initially see a grid of months or a list of years, allowing for quicker navigation and selection within the calendar component.
   * Default value: table
   */
  displayModeView?: CalendarDisplayModeView | string;
  /**
   * Defines a custom container element where the pop-up will be appended. By default, the pop-up is appended within the DateTimePicker component itself. You can specify this property by providing either an HTML element (such as a DOM node) or the string ID of an existing HTML element on the page. This allows you to control the positioning and containment of the pop-up within your application's layout.
   * Default value: "null"
   */
  dropDownAppendTo?: string;
  /**
   * Defines or retrieves the pop-up display mode, specifying which components are shown within the pop-up and controlling how it behaves (such as its appearance, interaction options, and dismissal rules).
   * Default value: default
   */
  dropDownDisplayMode?: DateTimePickerDropDownDisplayMode | string;
  /**
   * When this property is enabled, opening the element's dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the document. This overlay helps to visually separate the dropdown from other page content and can be used to intercept interactions with elements outside the dropdown while it is open.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the location on the screen where the pop-up will appear when it is activated, allowing you to control its alignment relative to a reference element or the viewport.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the permitted methods for modifying the input's value, such as whether users can manually enter or edit text, select from predefined options, or if the input is read-only and cannot be changed.
   * Default value: default
   */
  editMode?: DateTimePickerEditMode | string;
  /**
   * Specifies whether the input value can be increased or decreased using the mouse wheel when the cursor is hovering over the input field. When enabled, scrolling the mouse wheel up increments the value, while scrolling down decrements it.
   * Default value: false
   */
  enableMouseWheelAction?: boolean;
  /**
   * Specifies which day of the week should be displayed as the first column in the calendar pop-up. Accepts values from 0 (Sunday) to 6 (Saturday), where each number corresponds to a day of the week. For example, setting this value to 1 will make Monday the first day of the week in the calendar view.
   * Default value: 0
   */
  firstDayOfWeek?: number;
  /**
   * Defines or retrieves the footer template used in the calendar pop-up. This property accepts either the ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. Assigning null reverts the calendar's footer to the default template. If a valid template is provided, it will be rendered in the footer area of the calendar pop-up, allowing for customized content or functionality.
   * Default value: null
   */
  footerTemplate?: any;
  /**
   * Specifies whether the footer section should be visible on the interface. Set this option to 'true' to display the footer, or 'false' to hide it.
   * Default value: false
   */
  footer?: boolean;
  /**
   * Specifies the format pattern used to display date and time values. You can use standard built-in format specifiers or custom format strings to control the appearance of the output.'Built-in Date and Time Format Specifiers:'| Specifier | Description                              | Example Output                     ||-----------|------------------------------------------|------------------------------------|| 'd'       | Short date pattern                       | 'M/d/yyyy' (e.g., 4/9/2024)        || 'D'       | Long date pattern                        | 'dddd, MMMM dd, yyyy' (e.g., Tuesday, April 9, 2024) || 't'       | Short time pattern                       | 'h:mm tt' (e.g., 3:45 PM)          || 'T'       | Long time pattern                        | 'h:mm:ss tt' (e.g., 3:45:30 PM)    || 'f'       | Long date, short time                    | 'dddd, MMMM dd, yyyy h:mm tt' (e.g., Tuesday, April 9, 2024 3:45 PM) || 'F'       | Long date, long time                     | 'dddd, MMMM dd, yyyy h:mm:ss tt' (e.g., Tuesday, April 9, 2024 3:45:30 PM) || 'M'       | Month/day pattern                        | 'MMMM dd' (e.g., April 09)         || 'Y'       | Year/month pattern                       | 'yyyy MMMM' (e.g., 2024 April)     || 'S'       | Sortable, culture-invariant date/time    | 'yyyy-MM-ddTHH:mm:ss' (e.g., 2024-04-09T15:45:30) |'Custom Date and Time Format Strings:'- 'Day'  - ''d''   : Day of the month (1–31)  - ''dd''  : Day of the month, two digits (01–31)  - ''ddd'' : Abbreviated weekday name (e.g., Tue)  - ''dddd'': Full weekday name (e.g., Tuesday)- 'Hour'  - ''h''   : 12-hour clock hour (1–12)  - ''hh''  : 12-hour clock hour, two digits (01–12)  - ''H''   : 24-hour clock hour (0–23)  - ''HH''  : 24-hour clock hour, two digits (00–23)- 'Minute'  - ''m''   : Minutes (0–59)  - ''mm''  : Minutes, two digits (00–59)- 'Month'  - ''M''   : Month (1–12)  - ''MM''  : Month, two digits (01–12)  - ''MMM'' : Abbreviated month name (e.g., Apr)  - ''MMMM'': Full month name (e.g., April)- 'Second'  - ''s''   : Seconds (0–59)  - ''ss''  : Seconds, two digits (00–59)- 'AM/PM Designator'  - ''t''   : First character of AM/PM (e.g., A or P)  - ''tt''  : AM/PM designator (e.g., AM or PM)- 'Year'  - ''y''     : Year, one or two digits (e.g., 0–99)  - ''yy''    : Year, two digits (e.g., 00–99)  - ''yyy''   : Year, minimum three digits (e.g., 2024)  - ''yyyy''  : Year, four digits (e.g., 2024)  - ''yyyyy'' : Year, at least five digits (pads with leading zeros if needed)For detailed formatting, custom format strings can be combined as needed, for example: ''yyyy-MM-dd HH:mm:ss'' would display as '2024-04-09 15:45:30'.'Note:' The output may vary according to localization and culture settings unless otherwise specified (e.g., the 'S' format is culture-invariant).
   * Default value: "dd-MMM-yy HH:mm:ss.fff"
   */
  formatString?: string;
  /**
   * Defines a custom header template for the calendar pop-up. You can provide either the string ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section of the calendar's pop-up interface.
   * Default value: null
   */
  headerTemplate?: any;
  /**
   * This option removes or conceals the display of weekday names (such as "Monday," "Tuesday," etc.) from the calendar pop-up, leaving only the days of the month visible to the user.
   * Default value: false
   */
  hideDayNames?: boolean;
  /**
   * Specifies whether days from adjacent months (previous or next) are displayed in the calendar pop-up. When enabled, dates that fall outside the currently selected month are shown in the calendar view, typically in a muted or lighter style. Disabling this option will hide these out-of-month days, so only the dates belonging to the current month are visible.
   * Default value: false
   */
  hideOtherMonthDays?: boolean;
  /**
   * Prevents the arrow indicator from being displayed in the calendar tooltip pop-up, resulting in a cleaner appearance without the arrow pointing to the trigger element.
   * Default value: false
   */
  hideTooltipArrow?: boolean;
  /**
   * Displays supplementary helper text beneath the element, which becomes visible exclusively when the element is focused. This text is intended to provide contextual guidance or instructions to users as they interact with the element.
   * Default value: ""
   */
  hint?: string;
  /**
   * Highlights specific dates in the calendar pop-up, marking them as important to make them stand out visually to users. These dates can be used to indicate special events, deadlines, or other significant occurrences.
   * Default value: 
   */
  importantDates?: string[] | Date[];
  /**
   * Defines the template used to display important dates within the calendar pop-up. This property accepts either the ID of an existing '' element or a direct reference to an 'HTMLTemplateElement' in the DOM. The specified template determines how important dates are rendered inside the calendar interface, allowing for custom formatting and content.
   * Default value: null
   */
  importantDatesTemplate?: string | HTMLTemplateElement;
  /**
   * Defines or retrieves the time interval used to increment or decrement the value of the date/time input when no specific segment (such as hours, minutes, or seconds) is actively highlighted or selected by the user. By default, this interval is set to 1 second. If you provide a numeric value, it should be specified in milliseconds. For example, passing 500 will set the interval to half a second. This setting determines how quickly the value changes when the user uses controls to adjust the input without a segment highlighted.
   * Default value: new JQX.Utilities.TimeSpan(0, 0, 1)
   */
  interval?: any;
  /**
   * Displays a descriptive label above the element to provide context or identify its purpose for users.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or retrieves the unlockKey, a unique key required to activate or access the product's features. When provided, the unlockKey enables the user to unlock and use the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the locale setting that determines the language and regional formatting used to display labels and other text elements within the DateTimePicker. This affects how dates, times, and UI labels are presented to the user, ensuring localization according to the selected language and region.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to define a custom formatting for messages returned by the Localization Module. Use this to control how localized messages are structured or displayed before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the maximum permitted value for this property. When set, values greater than this limit are not accepted. When retrieved, returns the current maximum value constraint.
   * Default value: new JQX.Utilities.DateTime(3001, 1, 1)
   */
  max?: any;
  /**
   * Defines or retrieves an object containing the text strings displayed in the widget, allowing these strings to be customized for different languages or regions. This property works together with the locale setting to enable localization, ensuring that the widget’s UI elements can be translated and adapted to the user’s language preferences.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "now": "Now",
   *     "dateTabLabel": "DATE",
   *     "timeTabLabel": "TIME"
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the lowest permissible value that can be assigned. When setting, it defines the minimum value that is valid; when getting, it returns the current minimum constraint applied.
   * Default value: new JQX.Utilities.DateTime(1600, 1, 1)
   */
  min?: any;
  /**
   * Specifies or retrieves the value of the element's name attribute. This name is used as the key when the form data is submitted, allowing the server to identify and process the corresponding value for this element.
   * Default value: ""
   */
  name?: string;
  /**
   * Controls whether the value property can be set to null or an empty string. When this option is enabled and the user deletes the value in the input field, the value property is set to null, causing the placeholder text to be shown. If this option is disabled, deleting the input will automatically set the value property to the current date and time instead of null or an empty string.
   * Default value: false
   */
  nullable?: boolean;
  /**
   * Determines whether the calendar pop-up is currently open. You can use this property to programmatically open or close the calendar, or to check if it is visible to the user.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Defines the placeholder text displayed in the input field when the value property is null. This text provides a visual hint or example to users, indicating the expected input until a value is entered.
   * Default value: "Enter date"
   */
  placeholder?: string;
  /**
   * Prevents users from interacting with the element by disabling all input events, such as clicks, taps, keyboard input, and form submissions. The element will not respond to any user actions while this setting is enabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves an array of dates—either as DateTime strings or JavaScript Date objects—that are disabled and cannot be selected by the user. This prevents selection of any date included in the array within the date picker or calendar component.
   * Default value: 
   */
  restrictedDates?: Date[];
  /**
   * Sets or retrieves a value that specifies whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies whether the spin buttons are visible. Spin buttons allow users to increment or decrement the date or time value by clicking up or down arrows. When enabled, these controls provide a convenient way to adjust the input without manual typing.
   * Default value: false
   */
  spinButtons?: boolean;
  /**
   * Specifies the time interval, in milliseconds, between consecutive activations of the spin buttons when they are held down. This determines how quickly the value will change while the button is continuously pressed.
   * Default value: 75
   */
  spinButtonsDelay?: number;
  /**
   * Specifies the delay, in milliseconds, before the spin button begins repeating its action after being pressed and held for the first time. This determines how long the user needs to hold down the spin button before subsequent value changes occur automatically.
   * Default value: 0
   */
  spinButtonsInitialDelay?: number;
  /**
   * Configures or retrieves the position of the spin buttons relative to the input field, such as placing them on the left, right, or another specified location. This property allows developers to control the layout and visual alignment of the spin buttons within the component.
   * Default value: right
   */
  spinButtonsPosition?: DateTimePickerSpinButtonsPosition | string;
  /**
   * Defines or retrieves the element's visual theme, such as its color scheme, style, or appearance, to ensure consistency with the application's overall design.
   * Default value: ""
   */
  theme?: string;
  /**
   * Controls whether tooltips are displayed for important dates in the calendar pop-up. When enabled, hovering over an important date shows additional information in a tooltip; when disabled, no tooltip appears.
   * Default value: false
   */
  tooltip?: boolean;
  /**
   * Specifies the amount of time (in milliseconds) to wait before displaying the tooltip for the calendar pop-up after the user hovers over or focuses on the relevant element.
   * Default value: 100
   */
  tooltipDelay?: number;
  /**
   * Specifies the location where the tooltip will appear relative to the calendar pop-up, such as above, below, to the left, or to the right of the calendar. This setting determines the tooltip’s alignment and positioning when users interact with the calendar interface.
   * Default value: top
   */
  tooltipPosition?: TooltipPosition | string;
  /**
   * Defines a custom template for the tooltip content displayed in the calendar pop-up. This property accepts either the ID of an HTML  element or a direct reference to an HTMLTemplateElement. The specified template will be used to render the tooltip, allowing for customized layout and content in the calendar interface.
   * Default value: null
   */
  tooltipTemplate?: string | HTMLTemplateElement;
  /**
   * Determines whether the element can receive keyboard focus, allowing users to interact with it using the Tab key or other navigation methods. This property can be used to enable or disable focusability programmatically. When set, it also allows you to check if the element is currently focusable.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the validation method that enforces minimum and maximum value constraints. This determines how the input value is checked to ensure it falls within the defined minimum and maximum range.
   * Default value: strict
   */
  validation?: Validation | string;
  /**
   * Sets or retrieves the value of the element. This value represents the current date and time associated with the element, stored as a DateTime object. When setting the value, you provide a DateTime object to update the element’s date and time. When getting the value, it returns the currently assigned DateTime object reflecting the element’s date and time.
   * Default value: new JQX.Utilities.DateTime()
   */
  value?: any;
  /**
   * Controls whether week numbers are displayed in the calendar pop-up. When enabled, a numerical label appears next to each week, making it easier for users to reference specific weeks. When disabled, these week numbers will not be shown.
   * Default value: false
   */
  weekNumbers?: boolean;
  /**
   * Specifies how many weeks are displayed at once in the calendar pop-up view, allowing you to control the visible portion of the calendar grid when it is opened. Adjusting this value changes the number of week rows shown to the user.
   * Default value: 6
   */
  weeks?: number;
  /**
   * Specifies the starting year of a 100-year range used to interpret 2-digit year values. By default, this is set to 1926, meaning that 2-digit years from 26 to 99 will be mapped to the years 1926 to 1999, and 2-digit years from 00 to 25 will be interpreted as 2000 to 2025. This setting ensures that legacy 2-digit year inputs are correctly converted to their corresponding 4-digit year representations within the defined century span.
   * Default value: 1926
   */
  yearCutoff?: number;
}
/**
 Date & time selection component. It allows to select both date and time with the same control.
*/
export interface DateTimePicker extends BaseElement, DateTimePickerProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value associated with the component or input field is modified by the user or programmatically. It activates each time a change is detected, allowing you to respond to updates in real-time, such as validating input, updating UI elements, or saving new data.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The old value before it was changed presented as a DateTime object.
   *  value - The new value presented as a DateTime object.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the calendar pop-up is closed by the user, either by selecting a date or dismissing the pop-up through other means (such as clicking outside the calendar or pressing the Escape key).
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired immediately before the calendar pop-up is closed. At this stage, event handlers have the opportunity to intercept the closing action. If you want to prevent the calendar from closing—for example, to validate user input or display a confirmation message—you can call event.preventDefault() within your event handler. Doing so will cancel the close operation, keeping the calendar pop-up open until the condition is resolved.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the calendar pop-up component becomes visible to the user, such as when a user clicks on the input field or calendar icon to display the calendar interface.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event fires immediately before the calendar pop-up is displayed to the user. Developers can intercept this event and prevent the calendar from opening by invoking event.preventDefault() within the event handler. This allows for custom validation or logic to be executed prior to showing the calendar interface.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggers the closure of the calendar pop-up window, removing it from view and returning focus to the primary interface.
   */
  close(): void;
  /**
   * Sets the keyboard focus to the input field, allowing users to immediately begin typing without needing to click on the input. This improves usability by enabling faster and more intuitive data entry.
   */
  focus(): void;
  /**
   * Displays the calendar pop-up, allowing users to select a date from an interactive calendar interface.
   */
  open(): void;
  /**
   * Automatically highlights all the text contained within the input field, allowing users to easily copy, cut, or overwrite the current content.
   */
  select(): void;
  /**
   * Retrieves and returns a JavaScript Date object representing a specific point in time.
   * @returns {Date}
   */
  getDate(): Date;
  /**
   * Specifies the selected date to be displayed and managed by the DateTimePicker component. Setting this value determines the currently chosen date shown in the picker interface.
   * @param {Date} date. The date object to be set.
   */
  setDate(date: Date): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-date-time-picker"): DateTimePicker;
        querySelector(selectors: "smart-date-time-picker"): DateTimePicker | null;
        querySelectorAll(selectors: "smart-date-time-picker"): NodeListOf<DateTimePicker>;
        getElementsByTagName(qualifiedName: "smart-date-time-picker"): HTMLCollectionOf<DateTimePicker>;
        getElementsByName(elementName: "smart-date-time-picker"): NodeListOf<DateTimePicker>;
    }
}

/**Specifies the time zone in which the value should be displayed, ensuring that all date and time information is presented according to the selected region's local time settings. This affects how timestamps are interpreted and shown to the user. */
export declare type DateTimePickerDisplayKind = 'UTC' | 'local' | 'unspecified';
/**Defines or retrieves the pop-up display mode, specifying which components are shown within the pop-up and controlling how it behaves (such as its appearance, interaction options, and dismissal rules). */
export declare type DateTimePickerDropDownDisplayMode = 'auto' | 'default' | 'classic' | 'calendar' | 'timePicker';
/**Specifies the permitted methods for modifying the input's value, such as whether users can manually enter or edit text, select from predefined options, or if the input is read-only and cannot be changed. */
export declare type DateTimePickerEditMode = 'default' | 'full' | 'partial';
/**Configures or retrieves the position of the spin buttons relative to the input field, such as placing them on the left, right, or another specified location. This property allows developers to control the layout and visual alignment of the spin buttons within the component. */
export declare type DateTimePickerSpinButtonsPosition = 'left' | 'right';
/**Specifies the validation method that enforces minimum and maximum value constraints. This determines how the input value is checked to ensure it falls within the defined minimum and maximum range. */
export declare type Validation = 'strict' | 'interaction';
export interface DockingLayoutProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and will not play. For other supported values, animations are enabled and behave according to the specified mode. Use this property to control whether or how animations are rendered within the component.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * A getter method that returns an array containing all DockingLayout items that are currently set to auto-hide within the specified element. These items are not visible in the main layout but are accessible through auto-hide panels or tabs.
   * Default value: 
   */
  autoHideItems?: any;
  /**
   * Controls whether the automatic loading of a saved layout state is enabled or disabled. Note: For automatic loading to function, a layout state must have been previously saved; if no saved state exists, loading cannot occur.
   * Default value: false
   */
  autoLoadState?: boolean;
  /**
   * Controls whether the automatic saving and restoring of the element’s state is enabled.Note: To successfully save and restore the state, the element must have a unique id attribute assigned.
   * Default value: false
   */
  autoSaveState?: boolean;
  /**
   * Controls whether the element is active or inactive. When enabled, users can interact with the element; when disabled, the element is rendered non-interactive and may appear visually distinct to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * If set to false, this option disables the ability for users to reposition DockingLayout items using drag-and-drop in the UI. When disabled, items can only be moved or rearranged programmatically using the provided API methods; manual dragging by end-users will not be possible.
   * Default value: true
   */
  draggable: boolean;
  /**
   * When set to false, this option disables item floating within the DockingLayout. If a window is dragged in an attempt to float it, the window will automatically return to its original docked position, rather than being allowed to float outside the layout. Note that any LayoutPanel items which were already floating before this setting was applied will remain unaffected and will not be forced back into the docking structure.
   * Default value: true
   */
  floatable?: boolean;
  /**
   * Conceals all splitter bars within the specified element, preventing them from being visible or interactable by the user.
   * Default value: false
   */
  hideSplitterBars?: boolean;
  /**
   * A getter that retrieves an array containing all DockingLayout items currently docked within this element. The returned array includes each item that has been added to the DockingLayout as a docked component, allowing you to easily access and manipulate the docked items.
   * Default value: 
   */
  items?: any;
  /**
   * A getter method that retrieves and returns an array containing all DockingLayout items that have been closed by the user. Each item in the array represents a closed panel or component within the DockingLayout, allowing you to access and potentially restore their states or perform further operations on them.
   * Default value: 
   */
  closedItems?: any;
  /**
   * Defines the Element Structure'This property specifies the overall structure and hierarchy of the element. It accepts an array of objects, where each object defines a specific item within the element—along with its settings, type, and relationship to other items. The structure enables you to organize complex layouts such as split containers, tabbed panels, and tab items.'Item Object Types'Every object in the array must include a 'type' attribute, which determines its behavior and role within the layout. The following three types of objects are supported:---### 1. 'LayoutGroup'Represents a splitter or a group of layout panels. Use this type to create containers that organize multiple DockingLayout items (such as panels) in either horizontal or vertical arrangements.'Properties:'- 'type': '"LayoutGroup"' (required)- 'orientation': 'string' – Specifies the orientation of the splitter, either ''horizontal'' or ''vertical''.- 'size': 'string | number' – Sets the size of the splitter group.- 'items': 'Array' – An array of 'LayoutPanel' objects to be contained within this group.- 'resizeMode': 'string' – Specifies the resizing behavior. Valid values: ''none'', ''adjacent'', ''end'', ''proportional''.- 'resizeStep': 'number' – Determines the increment step used when resizing by splitter.- 'liveResize': 'boolean' – If true, resizing happens live as the splitter is dragged.---### 2. 'LayoutPanel'Represents a tabbed container (TabsWindow) within the DockingLayout. Each 'LayoutPanel' can hold one or more 'LayoutPanelItem' objects (tab items).'Properties:'- 'type': '"LayoutPanel"' (required)- 'id': 'string' – Unique identifier for the LayoutPanel.- 'autoHide': 'boolean' – If true, enables auto-hide for the panel.- 'autoHidePosition': 'string' – If 'autoHide' is enabled, specifies the hide position: ''top'', ''bottom'', ''left'', or ''right''.- 'dropPosition': 'string' – Determines where new items can be dropped when dragged. Options include: ''top'', ''bottom'', ''left'', ''right'', ''center'', ''header'', ''layout-top'', ''layout-bottom'', ''layout-left'', ''layout-right''. Positions with the 'layout-' prefix specifically refer to LayoutPanelItems within the panel.- 'label': 'string' – The visible label of the panel window.- 'tabPosition': 'string' – Controls the position of the tab labels within the panel.- 'layout': 'string | object' – Assigns the owning DockingLayout. Accepts either the string ID or a reference to the DockingLayout instance.- 'headerButtons': 'Array' – Defines which buttons are visible in the panel header. Options include '[]', or any combination of ''close'' and ''autoHide''.- 'tabCloseButtons': 'boolean' – Enables or disables a close button on each tab label within the panel.- 'tabOverflow': 'string' – Specifies how tab label overflow is handled (mirrors the jqxTabs 'overflow' property).- 'selectionMode': 'string' – Sets the tab selection mode (mirrors the jqxTabs 'selectionMode').- 'tabResize': 'boolean' – Allows resizing of tab labels (mirrors the jqxTabs 'resize' property).- 'locked': 'boolean' – Locks the panel size, preventing resizing.- 'max': 'number' – Sets the maximum allowed size for the panel.- 'min': 'number' – Sets the minimum allowed size for the panel.- 'size': 'string | number' – Defines the current size of the layout panel.- 'items': 'Array' – An array where each object defines a tab item in the panel.---### 3. 'LayoutPanelItem'Represents a single tab within a LayoutPanel (also known as a TabItem).'Properties:'- 'type': '"LayoutPanelItem"' (required)- 'id': 'string' – Unique identifier for this tab.- 'label': 'string' – The text label shown on the tab.- 'content': 'any' – The actual content of the tab. Can be any supported node, data, or HTML.- 'selected': 'boolean' – Indicates if this tab should be selected by default. By default, the first item is selected automatically.- 'draggable': 'boolean' – If false, disables drag-and-drop for the tab item.---'Summary'Use this property to configure complex, nested layouts comprising splitters (LayoutGroup), tabbed panels (LayoutPanel), and individual tab items (LayoutPanelItem). Each configuration object must specify a 'type', and each type includes a distinct set of properties to control behavior, appearance, and interaction within the layout hierarchy.
   * Default value: 
   */
  layout?: any;
  /**
   * When this option is enabled, resizing occurs in real time as the user drags the splitter, allowing them to see the panels adjust immediately. By default, this feature is disabled; instead, a highlighted guide or outline appears during the drag action, and the actual panels are resized only after the user releases the mouse button.
   * Default value: false
   */
  liveResize?: boolean;
  /**
   * Gets or sets the 'unlockKey', a unique code required to activate and access the full features of the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which set of localized messages from the messages property should be used or displayed. Assigning a language code (e.g., 'en' for English, 'fr' for French) allows the component to present its interface and messages in the corresponding language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function used within the localization module, typically invoked to handle language changes, update localized content, or process localization-specific events.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Manages an object containing all the text strings displayed by the widget, allowing these strings to be easily customized for different languages. This property works together with the locale property to support localization and internationalization, ensuring that users see the appropriate translations based on their selected language. When set, it updates the widget’s UI with the provided localized strings; when accessed, it returns the current set of localization strings in use.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "' method accepts an instance of JQX.TabsWindow",
   *     "invalidNodeRemove": "' method accepts an instance of JQX.TabsWindow that is a child of the DockingLayout.",
   *     "invalidNodeType": "' requires a \"jqx-tabs-window\" element to be passed as an argument.",
   *     "invalidTargetNode": "' requires an index of an item that is not hidden/closed. Only visible items that are part of the Layout are valid.",
   *     "invalidIndex": "' method accepts an index of type number.",
   *     "noId": "jqxDockingLayout requires an id in order to save/load a state."
   *   }
   * }
   */
  messages?: any;
  /**
   * When the element has the "readonly" attribute, users can view its content but cannot modify or interact with it. However, the element’s value can still be copied or selected, and it may receive focus via keyboard navigation, but any attempt to change its value will not be permitted.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that specifies whether the element's alignment supports right-to-left (RTL) languages, adjusting the text and layout direction for users of locales such as Arabic or Hebrew. This ensures that the element properly accommodates languages that are read and displayed from right to left.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the incremental value by which the size is increased or decreased during resizing operations. This determines how much the element's dimensions change with each resize step.
   * Default value: 5
   */
  resizeStep?: number;
  /**
   * Specifies the snap mode for drag-and-drop operations within the layout. There are two available modes:      simple – Enables the user to drag and drop a single tab item either within the layout or outside of it. When dragging begins, a semi-transparent highlighter appears to clearly indicate all the valid drop zones for the tab. The user must drop the dragged tab inside one of these highlighted zones to complete the operation.        advanced – Allows the dragging and dropping of an entire TabsWindow—containing all its tab items—or an individual tab. This mode adopts a Visual Studio-style visual feedback system: as an item is dragged, an overlay appears showing various possible drop locations, represented as icons. The user must drop the item directly onto one of these icons within the feedback overlay to position it in the desired location.  The highlighter or feedback overlay automatically appears as soon as a drag operation is initiated, visually guiding the user to all valid drop targets and enhancing the drag-and-drop experience.
   * Default value: advanced
   */
  snapMode?: DockingLayoutSnapMode | string;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance—including colors, fonts, and styles—ensuring a consistent look and feel that matches the application's design guidelines.
   * Default value: ""
   */
  theme?: string;
  /**
   * Provides a getter that returns an array containing all DockingLayout items that have been undocked. Undocked items are no longer part of the layout’s internal structure, meaning they have been removed from the main docking arrangement. However, these items remain available and can be reinserted into the layout by dragging and dropping them back in. This allows for flexible user interactions, such as temporarily removing panels and restoring them as needed.
   * Default value: 
   */
  undockedItems?: any;
  /**
   * If set to true, the element will be excluded from the tab order and cannot receive focus via keyboard navigation or mouse interaction.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 DockingLayout enables the creation of complex layouts consisting of panels that can be floated, docked, nested, resized, pinned.
*/
export interface DockingLayout extends BaseElement, DockingLayoutProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is fired whenever a different tab is selected by the user, indicating a change in the active tab.  <br/><strong>Note:</strong> The "change" event might also be emitted by other JQX custom elements that are embedded within the tab items, not just by the tab selection itself. If you are handling this event, ensure that your code appropriately distinguishes between changes to the tab selection and changes triggered by nested custom elements.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a Tab item or an entire Tabs Window (DockingLayout item) is closed by the user. It allows you to execute custom logic in response to the closing of individual tabs or when an entire collection of tabs (Tabs Window) is closed within the docking layout.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired just before a Tab item or Tabs Window is about to be closed. Within the event handler, you have the option to prevent the closing action by calling event.preventDefault(). This allows you to intercept the close operation—for example, to display a confirmation dialog or to perform cleanup tasks—before the Tab or Window is actually closed. If event.preventDefault() is not called, the Tab or Window will close as normal.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever an item's position within the Layout or its size has changed. It signifies that the item's state has been updated, allowing you to respond to layout or dimension adjustments in your application. Use this event to handle dynamic UI updates or to perform actions that depend on an item's current position or size.
	* @param event. The custom event.    */
  onStateChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered at the moment a user initiates the resizing action on an item, indicating the start of the resize operation.
	* @param event. The custom event.    */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user completes resizing an item, indicating that the resizing action has ended and the item's new dimensions have been set.
	* @param event. The custom event.    */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Creates a "smart-tabs-window" node as a child of the layout, configured to be auto-hidden by positioning it at the bottom of the container. This setup places the tab window along the bottom edge of the layout, where its content remains concealed by default. The content only becomes visible when the user clicks or selects one of the tab's labels, providing an unobtrusive way to access additional information or tools within the interface.
   * @param {HTMLElement | number | string} node. The "smart-tabs-window" or "smart-tab-item" node to append
   */
  autoHideBottom(node: HTMLElement | number | string): void;
  /**
   * Creates a "smart-tabs-window" node as a child element within the Layout, configuring it to be auto-hidden and docked to the left side of the layout. This means the tabs window will appear collapsed along the left edge of the application interface, keeping its content hidden by default. The content inside the "smart-tabs-window" will only be displayed when the user clicks or selects one of its tab labels, providing a space-saving and user-friendly navigation option.
   * @param {HTMLElement | number | string} node. The "smart-tabs-window" or "smart-tab-item" node to append
   */
  autoHideLeft(node: HTMLElement | number | string): void;
  /**
   * Creates a "smart-tabs-window" node as a child of the Layout and configures it to be auto-hidden by docking it to the right side of the layout. With this setting, the tabbed window will appear collapsed along the right edge of the layout. Its contents will remain hidden until the user clicks or hovers over one of its tab labels, causing the window to slide out and reveal its content. This behavior helps conserve space in the layout while still providing quick access to the window's features when needed.
   * @param {HTMLElement | number | string} node. The "smart-tabs-window" or "smart-tab-item" node to append
   */
  autoHideRight(node: HTMLElement | number | string): void;
  /**
   * Creates a "smart-tabs-window" node as a child of the Layout, configured to be auto-hidden and positioned at the top area of the layout. This setting causes the tabs window to appear as a hidden panel or tab strip along the top edge of the layout. The content of the panel remains concealed until the user selects one of its tab labels, at which point the associated content is displayed. This behavior is commonly used to maximize workspace while allowing users to quickly access tools or information as needed.
   * @param {HTMLElement | number | string} node. The "smart-tabs-window" or "smart-tab-item" node to append
   */
  autoHideTop(node: HTMLElement | number | string): void;
  /**
   * Removes all previously stored DockingLayout state information from localStorage, effectively resetting any cached layouts or user customizations and restoring the layout to its default configuration.
   */
  clearState(): void;
  /**
   * This method restores an auto-hidden item to its default (docked) state and allows you to re-insert it at a specified position within the layout. Additionally, you can use this method to insert new items directly into the DockingLayout.  <br/><strong>Note:</strong> All items inserted with this method become top-level elements in the DockingLayout hierarchy.
   * @param {string | number | Node} node. An autohidden "smart-tabs-window" item instance or a new "smart-tabs-window" instance.
   * @returns {Node}
   */
  dock(node: string | number | Node): Node;
  /**
   * Returns a layout item from the docking layout based on its Id.
   * @param {HTMLElement | number | string} id. The id of the item
   * @returns {any}
   */
  getItem(id: HTMLElement | number | string): any;
  /**
   * Inserts a new TabsWindow into the DockingLayout at the specified position. The position is determined by the index provided as the first argument, and the new TabsWindow will be placed immediately before the existing item at that index. The second argument can be either a TabsWindow instance or a plain object representing the TabsWindow's configuration; if an object is provided, a new TabsWindow instance will be created from it. This method ensures that the new TabsWindow is integrated seamlessly into the DockingLayout's existing structure.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertBeforeItem(index: number | HTMLElement | string, item: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout at a position immediately following the target item, as specified by the index provided as the first argument. The new TabsWindow can be created either as a blank instance or from an object supplied as the second argument to the method. This allows for flexible insertion of TabsWindows—either by reusing existing configuration objects or by creating new ones—while precisely controlling their placement within the layout."
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertAfterItem(index: number | HTMLElement | string, item: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout. This can be done by either creating a new TabsWindow instance or by using an existing object provided as the second argument. The new TabsWindow is added by splitting the target item—identified by the index supplied as the first argument—horizontally into two sections. The new TabsWindow is positioned to the immediate left of the target item within the layout.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertIntoLeft(index: number | HTMLElement | string, item: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout, or creates a TabsWindow instance from the object provided as the second argument. The method targets the item at the index specified by the first argument, splits this item horizontally into two, and places the new TabsWindow as the immediate right-side neighbor of the original item.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertIntoRight(index: number | HTMLElement | string, item: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout, or creates a new TabsWindow instance from an object provided as the second argument. The new TabsWindow is added by splitting the target layout item—identified by the index given as the first argument—into two. The new TabsWindow is then positioned vertically as the top neighbor of the target item, effectively placing it above the existing item within the layout.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertIntoTop(index: number | HTMLElement | string, item: any): void;
  /**
   * Inserts a new `TabsWindow` into the `DockingLayout`. The new `TabsWindow` can be either instantiated directly or created from an object provided as the second argument. The insertion is performed by splitting the target item—identified by the index specified as the first argument—into two, and then placing the new `TabsWindow` as the vertical bottom neighbor of the target item within the layout.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertIntoBottom(index: number | HTMLElement | string, item: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout. If an object is provided as the second argument, it creates a TabsWindow instance using the properties of that object. The newly created TabsWindow is added as a top-level item, positioned at the top region within the Layout, ensuring it appears as the foremost window in the layout’s hierarchy.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertLayoutTop(item: any): void;
  /**
   * Inserts a new `TabsWindow` into the `DockingLayout`, either by creating a fresh `TabsWindow` instance or by constructing one from an object provided as the second argument. The newly added item will appear as a top-level window docked to the bottom edge within the layout, making it easily accessible alongside other primary windows.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertLayoutBottom(item: any): void;
  /**
   * Inserts a new TabsWindow component into the DockingLayout, either by creating a fresh instance or by generating it from an object provided as the second argument. The newly added TabsWindow will appear as a top-level item, positioned on the left side within the layout container. This method ensures the TabsWindow becomes an immediate child of the layout, maintaining proper hierarchy and orientation.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertLayoutLeft(item: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout, or creates a TabsWindow instance from a provided configuration object (passed as the second argument). The new TabsWindow will be added as a top-level pane, positioned on the right side of the DockingLayout. This ensures the new item is immediately visible and accessible, docked alongside any existing top-level windows.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertLayoutRight(item: any): void;
  /**
   * Adds a new TabsWindow to the DockingLayout, or creates a TabsWindow instance from the object provided as the second argument. When invoked, this method groups the target item and its neighboring items within a new splitter component. This splitter then becomes the sibling (neighbor) of the newly added TabsWindow. The new TabsWindow is inserted above the target item (at the ‘Top’ position) within the layout, ensuring the original target and its neighbors maintain their relative positions inside the new splitter.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} tabsWindow. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertOutsideTargetGroupTop(index: number | HTMLElement | string, tabsWindow: any): void;
  /**
   * Inserts a new TabsWindow into the DockingLayout at the specified position, or instantiates a TabsWindow from the provided configuration object (second argument). When this method is called, the target item and its neighboring items are grouped within a new splitter component. This splitter acts as a sibling to the newly added TabsWindow within the layout hierarchy. The new TabsWindow is inserted below the specified target item (at the Bottom position), ensuring that the existing layout structure is preserved while accommodating the additional window.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} tabsWindow. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertOutsideTargetGroupBottom(index: number | HTMLElement | string, tabsWindow: any): void;
  /**
   * Inserts a new `TabsWindow` into the `DockingLayout` at a specified position, or creates a `TabsWindow` instance from an object provided as the second argument. When this method is called, the specified target item and its neighboring items are grouped into a new splitter container, which becomes the adjacent sibling of the newly added `TabsWindow`. The new item is inserted to the left of the target item, effectively placing it before the target within the splitter.
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} tabsWindow. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertOutsideTargetGroupLeft(index: number | HTMLElement | string, tabsWindow: any): void;
  /**
   * Inserts a new `TabsWindow` into the `DockingLayout`. You can either provide an existing `TabsWindow` instance or pass a configuration object as the second argument to create a new instance. When this method is called, the specified target item and its adjacent items are grouped together inside a new splitter container. This splitter container then becomes the neighbor of the newly added `TabsWindow`. The new `TabsWindow` is inserted immediately after the target item, positioned to the right. This allows you to easily add and organize tabbed windows within the docking layout, maintaining the correct structure and relationships between items."
   * @param {number | HTMLElement | string} index. The index to insert a new TabsWindow at.
   * @param {any} tabsWindow. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   */
  insertOutsideTargetGroupRight(index: number | HTMLElement | string, tabsWindow: any): void;
  /**
   * Inserts a new `TabsWindow` instance into the application interface. The newly created window appears in floating mode, meaning it is not docked to any edge of the main window and can be freely repositioned by the user. This allows for independent movement and placement on the screen, separate from other docked interface elements.
   * @param {any} item. An instance of a TabsWindow or an Object with the fields "label", "items" and other additional.
   * @param {number | string} left?. The left position of the new window. You can use number, px or %. For example: '10px'.
   * @param {number | string} top?. The top position of the new window. You can use number, px or %. For example: '10px'.
   */
  insertFloatingWindow(item: any, left?: number | string, top?: number | string): void;
  /**
   * Returns an array containing all items that have been automatically hidden by the system or application logic. Each element in the array represents an item that meets the auto-hide criteria, allowing developers to programmatically access or process these hidden items as needed.
   * @param {string} orientation?. Determines which auto hidden items to return ( vertical or horizontal ). If not set the method will return all autohidden items. Possible values: 'vertical', 'horizontal'.
   * @returns {any[]}
   */
  getAutoHideItems(orientation?: string): any[];
  /**
   * Returns the zero-based index of the first occurrence of the specified target item within the collection. If the target item is not found, the method returns -1.
   * @param {HTMLElement} node. Returns the index of the target item.
   * @returns {number}
   */
  getIndex(node: HTMLElement): number;
  /**
   * Returns an array of objects, where each object represents a layout item within the element. Each object contains detailed settings for the layout item—such as its type, properties, and configuration options—as well as information about its position and relationship to other items in the hierarchy. This provides a complete snapshot of the current structural organization and settings of the element.
   * @param {boolean} noInstances?. Determines if the returned array will contain HTML references or not. When saving to localStorage the resulted array should not contain any HTMLElement references.
   * @returns {any[]}
   */
  getState(noInstances?: boolean): any[];
  /**
   * Returns the parent Splitter component containing the specified Layout item. If the Layout item is nested within one or more Splitter containers, this method retrieves the immediate Splitter parent that manages the Layout item. If the Layout item is not inside a Splitter, the method returns null.
   * @param {HTMLElement} item?. DockingLayout item
   * @returns {HTMLElement}
   */
  getItemGroupElement(item?: HTMLElement): HTMLElement;
  /**
   * Returns a JSON array of objects, each representing the current structure and state of the element. This array is formatted to be directly compatible with LocalStorage, allowing you to easily save and restore the element's configuration as needed.
   * @returns {any[]}
   */
  getJSONStructure(): any[];
  /**
   * Loads a previously saved state of the element. If a state object is provided as an argument, the method will restore the element to that specific state. If no state is provided, the method will automatically attempt to retrieve the element's state from the browser's localStorage and apply it. This ensures that the element can be restored to its previous configuration either through a supplied state or from persistent storage.
   * @param {any[]} state?. An array of objects that represents a cached state of the DockingLayout. The result of calling the 'saveState' method.
   */
  loadState(state?: any[]): void;
  /**
   * Removes a TabsWindow item from the DockingLayout component, effectively detaching the specified tabbed window from the DockingLayout structure. This operation updates the layout by eliminating the designated TabsWindow and its associated content from the parent element.
   * @param {number | HTMLElement | string} index. The index of the TabsWindow to remove or a reference to it.
   */
  removeAt(index: number | HTMLElement | string): void;
  /**
   * Removes all child elements and content from the specified element, leaving it empty.
   */
  removeAll(): void;
  /**
   * Removes a "smart-tabs-window" node from the DockingLayout structure. The "smart-tabs-window" represents a tabbed window component within the layout; this operation fully deletes the specified window and all its contents from the DockingLayout hierarchy.
   * @param {Node} node. The "smart-tabs-window" node to remove.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Persists the current configuration of the DockingLayout to LocalStorage, capturing both the hierarchical structure and size of all layout components. This allows the layout—including panel arrangement, nesting, and dimensions—to be accurately restored in future sessions.
   * @returns {any}
   */
  saveState(): any;
  /**
   * This method detaches an item from the layout, removing it from the layout's structure while keeping its visual position unchanged. After calling this method, the item is no longer managed by the layout system and becomes an independent or 'floating' element. The undocked item can be reinserted into the layout at any time.
   * @param {string | number | Node} node. A "smart-tabs-window" instance that is part of the DockingLayout.
   */
  undock(node: string | number | Node): void;
  /**
   * Updates the properties of a TabsWindow and all of its contained tabs, including their order, content, and configuration settings.
   * @param {number | HTMLElement | string} index. The index of the TabsWindow to update.
   * @param {any} settings. An object that contains the new settings for the TabsWindow item. Settings object is the same as defining a new TabsWindow with the exception of 'items' array where the items are defined. In order to change the label or content of a Tab item the user has to specify the index of the target tab item.
   */
  update(index: number | HTMLElement | string, settings: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-docking-layout"): DockingLayout;
        querySelector(selectors: "smart-docking-layout"): DockingLayout | null;
        querySelectorAll(selectors: "smart-docking-layout"): NodeListOf<DockingLayout>;
        getElementsByTagName(qualifiedName: "smart-docking-layout"): HTMLCollectionOf<DockingLayout>;
        getElementsByName(elementName: "smart-docking-layout"): NodeListOf<DockingLayout>;
    }
}

/**Specifies the snap mode for drag-and-drop operations within the layout. There are two available modes:<br/><br/><br/>  <br/>    simple – Enables the user to drag and drop a single tab item either within the layout or outside of it. When dragging begins, a semi-transparent highlighter appears to clearly indicate all the valid drop zones for the tab. The user must drop the dragged tab inside one of these highlighted zones to complete the operation.<br/>  
<br/>  <br/>    advanced – Allows the dragging and dropping of an entire <code>TabsWindow</code>—containing all its tab items—or an individual tab. This mode adopts a Visual Studio-style visual feedback system: as an item is dragged, an overlay appears showing various possible drop locations, represented as icons. The user must drop the item directly onto one of these icons within the feedback overlay to position it in the desired location.<br/>  
<br/><br/><br/>The highlighter or feedback overlay automatically appears as soon as a drag operation is initiated, visually guiding the user to all valid drop targets and enhancing the drag-and-drop experience. */
export declare type DockingLayoutSnapMode = 'simple' | 'advanced';
export interface DropDownButtonProperties {
  /**
   * Specifies the animation mode for the component. When set to 'none', all animations are disabled. You can retrieve the current animation mode by getting this property, or change it by setting a new value. Use this property to control whether and how animations are applied to the component’s visual updates.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the time delay (in milliseconds) before the dropdown menu automatically closes when the dropDownOpenMode property is set to 'auto'. This allows you to control how long the dropdown remains visible after it has been opened and no further interactions are detected.
   * Default value: 100
   */
  autoCloseDelay?: number;
  /**
   * Determines whether the element is interactive or non-interactive. When enabled, users can interact with the element as intended. When disabled, the element becomes inactive, usually appearing visually distinct and not responding to user input or events.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the parent container for the dropDown popup element. This option is useful when a CSS property (such as overflow, z-index, or positioning) applied to one of the ancestor elements is affecting the display or visibility of the dropDown. By setting the parent container explicitly, you can ensure the dropDown renders correctly and is not hidden or clipped by conflicting CSS styles of its parent elements.
   * Default value: "null"
   */
  dropDownAppendTo?: string;
  /**
   * Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, center, or another defined position within the user interface.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. When set, this value overrides the default height controlled by CSS variables. By default, the property is an empty string, allowing the component to use CSS variables for height. Use this property to manually set the dropdown height in environments where CSS variables are not supported by the browser.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the maximum height of the dropdown menu. By default, the value is an empty string, which allows the component to use CSS variables for height customization. If you need to support browsers that do not support CSS variables, explicitly set this property to the desired height (e.g., '300px'). This ensures the dropdown displays with the correct maximum height even in environments without CSS variable support.
   * Default value: 
   */
  dropDownMaxHeight?: string | number;
  /**
   * Specifies the maximum width of the dropdown menu. By default, this property is an empty string, meaning the component relies on CSS variables to define its width. You should set this property only if the browser you are targeting does not support CSS variables. In such cases, provide a valid CSS value (e.g., "300px" or "50%") to explicitly set the maximum width of the dropdown.
   * Default value: 
   */
  dropDownMaxWidth?: string | number;
  /**
   * Specifies the minimum height of the dropdown component. By default, this property is set to an empty string, which allows the component to use CSS variables for height management. If the browser does not support CSS variables, you can manually assign a specific minimum height using this property to ensure proper rendering.
   * Default value: 
   */
  dropDownMinHeight?: string | number;
  /**
   * Specifies the minimum width of the dropdown menu. By default, this property is set to an empty string, allowing the component to use CSS variables for styling. If the browser does not support CSS variables, you should provide a specific value (e.g., '200px') for this property to ensure proper rendering and consistent appearance across all browsers.
   * Default value: 
   */
  dropDownMinWidth?: string | number;
  /**
   * Specifies the direction or behavior in which the dropdown menu will appear when activated (e.g., opening above, below, to the left, or to the right of the trigger element). This setting controls the initial placement and animation of the dropdown when it is opened.
   * Default value: default
   */
  dropDownOpenMode?: DropDownOpenMode | string;
  /**
   * When this property is enabled, opening the element's dropdown will render a transparent overlay that appears beneath the dropdown menu but above the rest of the document. This overlay separates the dropdown from the underlying page content, typically preventing interactions with other elements outside the dropdown while it is open.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the placeholder text that is displayed within the dropdown menu when no option has been selected or when the dropdown is empty. This text provides guidance or context to the user about the expected input or selection.
   * Default value: "No Items"
   */
  dropDownPlaceholder?: string;
  /**
   * Specifies the vertical placement of the dropdown menu relative to its trigger element. When set to 'auto', the dropdown automatically selects the optimal position (above or below the trigger) based on the available space in the viewport, ensuring that the menu is fully visible and not clipped by the window edges.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the width of the dropdown menu. By default, this property is an empty string, allowing the component to use CSS variables for width. If you need to support browsers that do not support CSS variables, set this property explicitly to define the dropdown’s width. Otherwise, leave it empty to leverage CSS variable-based styling.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Provides supplementary helper text displayed beneath the element. This hint appears only when the element is focused, offering contextual guidance to users during interaction.
   * Default value: ""
   */
  hint?: string;
  /**
   * Controls whether a horizontal scroll bar is displayed within the dropdown menu, allowing users to scroll horizontally if the dropdown’s content exceeds the available width.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Displays a label positioned above the element. The label remains constantly visible, providing context or instructions regardless of the element’s state (focused, filled, or empty).
   * Default value: ""
   */
  label?: string;
  /**
   * Defines or retrieves the unlockKey, a unique code required to access or activate the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting, determining which language is used for displaying messages. This property works in tandem with the messages property to select the appropriate set of localized messages based on the chosen language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define how messages returned by the Localization Module are formatted. Use this to customize the structure, content, or styling of localized messages before they are displayed or processed in your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object that contains the localized text strings used throughout the widget interface. This property enables customization of all user-facing text to support different languages and regions. It is typically used together with the locale property to display the widget in the selected language.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies whether the popup is currently visible (open) or hidden (closed) on the screen.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears within the action button container of the element. This text provides guidance or context to the user before any action is taken or value is entered.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies the template used as the placeholder within the element's action button container. Accepts a string (displayed as plain text), a function (which returns the desired content dynamically), or an HTMLTemplateElement (allowing for custom HTML markup). This template defines what users see in the action button area when no action is selected or before an action is initiated.
   * Default value: null
   */
  placeholderTemplate?: any;
  /**
   * Prevents users from interacting with the element, disabling all mouse, keyboard, and touch events such as clicking, typing, or tapping. The element remains visible but does not respond to any user input or actions.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies whether the resize indicator, located in the bottom-right corner of the element, is displayed to users. When enabled, users can see and interact with the indicator to manually resize the element; when disabled, the indicator is hidden and resizing via this handle is not available.
   * Default value: false
   */
  resizeIndicator?: boolean;
  /**
   * Specifies whether the drop-down menu is resizable by the user. If resizing is enabled, a resize bar will appear on either the top or bottom edge of the drop-down. Users can click and drag this bar to adjust the height of the drop-down menu according to their preference.
   * Default value: null
   */
  resizeMode?: ResizeMode | string;
  /**
   * Sets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is commonly used in languages such as Arabic and Hebrew. This property ensures proper display and alignment of content for locales that use RTL scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme for the element, which controls its overall appearance, including colors, fonts, and visual style. The selected theme determines how the element is visually presented to users.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from keyboard navigation and cannot receive focus, either by tabbing or programmatically.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Controls whether the vertical scroll bar is displayed, allowing users to scroll vertically when content exceeds the visible area. This setting can enable, disable, or automatically show the scroll bar based on content overflow.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
}
/**
 DropDownButton displays any type of content like components, text, images, etc in a DropDown.
*/
export interface DropDownButton extends BaseElement, DropDownButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user clicks on the action button. The action button becomes visible only when the <strong>placeholder</strong> property is defined. Use this event to handle custom logic in response to user actions.
	* @param event. The custom event.    */
  onActionButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the dropdown menu is closed, either by user interaction (such as clicking outside the dropdown or selecting an option) or programmatically via code. It can be used to perform actions or cleanup tasks after the dropdown is no longer visible.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired just before the dropdown list is closed. Within the event handler, you have the opportunity to prevent the dropdown from closing by calling event.preventDefault(). This allows you to implement custom logic—such as validating input or prompting the user—before the dropdown is dismissed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user interacts with the dropdown component by clicking the dropdown button. It signals the opening or toggling of the dropdown menu, allowing you to execute custom logic in response to user engagement with the dropdown interface.
	* @param event. The custom event.    */
  onDropDownButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered each time the drop-down menu becomes visible to the user, such as when a user clicks on the drop-down control to expand it and reveal its list of options. It does not fire if the drop-down is already open or when it is closed. Use this event to perform actions that need to occur immediately after the drop-down is displayed.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before the dropdown menu is opened, providing an opportunity to intervene in the opening process. Within the event handler, you can call event.preventDefault() to cancel the dropdown from opening. This is useful for implementing custom logic, such as validating conditions before the dropdown is displayed or preventing the dropdown from opening based on user interactions or application state.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates the resizing action on the dropdown component, such as clicking and dragging a resize handle. It marks the beginning of the user's interaction to adjust the dropdown's size.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user completes resizing the dropdown menu, indicating that the resizing action has ended and the final dimensions of the dropdown have been set.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new HTML element as a child to the dropdown menu, placing it at the end of the existing list of dropdown items.
   * @param {Node} node. The node to be appended
   * @returns {Node}
   */
  appendChild<T extends Node>(node: Node): T;
  /**
   * Closes the drop-down menu, hiding its list of options from view and resetting its open state to false.
   */
  close(): void;
  /**
   * Displays the drop-down menu, making its options visible and accessible to the user.
   */
  open(): void;
  /**
   * Clears all items from the dropdown menu, resulting in an empty list with no selectable options.
   */
  removeAll(): void;
  /**
   * Removes a specified child node from the dropdown menu, effectively deleting the selected option or item from the list of available choices displayed to the user.
   * @param {Node} node. The node to remove.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Scrolls the dropdown menu to a specified vertical position, ensuring that the desired item or area within the dropdown is brought into view for the user. This function is useful for highlighting or accessing items that are not currently visible due to scrolling.
   * @param {number} top. Y axis coordinate
   * @param {number} left. X axis coordinate
   */
  scrollTo(top: number, left: number): void;
   scrollTo(options?: ScrollToOptions): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-drop-down-button"): DropDownButton;
        querySelector(selectors: "smart-drop-down-button"): DropDownButton | null;
        querySelectorAll(selectors: "smart-drop-down-button"): NodeListOf<DropDownButton>;
        getElementsByTagName(qualifiedName: "smart-drop-down-button"): HTMLCollectionOf<DropDownButton>;
        getElementsByName(elementName: "smart-drop-down-button"): NodeListOf<DropDownButton>;
    }
}

export interface DropDownListProperties {
  /**
   * This property applies exclusively when dropDownOpenMode is set to 'auto'. It specifies the amount of time (in milliseconds) to wait before automatically closing the open drop-down if the user's pointer (mouse or touch) is no longer hovering over the drop-down element. A higher value increases the delay before closing, while a lower value causes the drop-down to close more quickly when the pointer leaves.
   * Default value: 100
   */
  autoCloseDelay?: number;
  /**
   * Specifies the source of data that populates the DropDownList. The 'dataSource' property accepts:- An array of strings or numbers (e.g., '['Option 1', 'Option 2']'), where each element becomes a list item.- An array of objects, where each object defines the properties of a list item. Common object attributes include:    - label: The text displayed for the list item.    - value: The underlying value associated with the list item.    - group (optional): Used to group items under a common category.- A callback function that returns an array in either of the above formats.This flexibility allows you to easily provide simple lists or complex, structured data for display in the DropDownList.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and may appear visually distinct (e.g., grayed out).
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies whether a visual indicator (such as a loading spinner or progress bar) is displayed while filtering data or loading items from a remote source. This helps inform users that a background operation is in progress.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Sets or retrieves the displayMember property. The displayMember defines which property of the objects within the collection (specified by the dataSource property) should be shown in the UI. When binding a data source containing objects, displayMember indicates the key whose corresponding value will be rendered for each item in the component's display.
   * Default value: """"
   */
  displayMember?: string;
  /**
   * ''Specifies the parent container for the dropdown menu. The value can be a CSS selector, an element ID, the string ''body'', or a direct reference to an HTML element. By default, the dropdown is rendered within its original parent. However, if a parent element restricts overflow (e.g., 'overflow: hidden'), setting this property to ''body'' or another container allows the dropdown to be rendered elsewhere in the DOM. This ensures that the dropdown remains visible and fully functional even when its original parent would otherwise clip or hide it.The dropDownAppendTo property accepts:- A string representing a CSS selector or element ID (e.g., ''#container'' or ''.custom-dropdown-wrapper''),- The string ''body'' to append directly to the document body,- Or a direct reference to an HTML element.To revert the dropdown to its original parent container, set dropDownAppendTo to 'null'. This flexibility helps accommodate layouts where dropdown overflow is restricted by ancestor elements.'Example Usage:''''json{  "dropDownAppendTo": "body"}'''or'''json{  "dropDownAppendTo": "#customContainer"}'''or'''json{  "dropDownAppendTo": null}'''
   * Default value: "null"
   */
  dropDownAppendTo?: string;
  /**
   * Specifies the alignment or placement of the dropdown button relative to its container or associated input field. This setting controls where the dropdown button appears—such as to the left, right, top, or bottom—within the user interface component.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown component. By default, this property is set to an empty string, which means the dropdown's height will be determined by a corresponding CSS variable. If a specific value is provided (e.g., "200px" or "50%"), it directly sets the dropdown's height, overriding the CSS variable.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Defines the maximum height of the dropdown component. By default, this property is set to an empty string, meaning the dropdown’s maximum height will be determined by the associated CSS variable rather than a fixed value. Setting a specific value (such as '"200px"' or '"50vh"') will override the CSS variable and directly control the dropdown's maximum height. If left as an empty string, ensure that the relevant CSS variable is defined to maintain consistent dropdown sizing.
   * Default value: 
   */
  dropDownMaxHeight?: string | number;
  /**
   * Specifies the maximum width of the dropdown menu. By default, this property is set to an empty string, meaning the dropdown's maximum width will be determined by a corresponding CSS variable (typically via a style such as --dropdown-max-width). To override the CSS variable and set a specific maximum width, provide a valid CSS width value (e.g., "300px" or "50%") for this property.
   * Default value: 
   */
  dropDownMaxWidth?: string | number;
  /**
   * Specifies the minimum height for the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's minimum height is determined by a corresponding CSS variable, allowing you to control the minimum height through your stylesheet. If a specific value is provided (such as '200px' or '3rem'), it directly sets the minimum height of the dropdown, overriding the CSS variable.
   * Default value: 
   */
  dropDownMinHeight?: string | number;
  /**
   * Specifies the minimum width of the dropdown menu. By default, this value is an empty string, which means the dropdown’s minimum width is determined by a CSS variable rather than a fixed value. If a specific width is provided, it overrides the CSS variable, setting the dropdown’s minimum width to the specified value.
   * Default value: 
   */
  dropDownMinWidth?: string | number;
  /**
   * Specifies the direction or animation style in which the dropdown menu will appear when activated, such as opening upwards, downwards, to the left, to the right, or with a specific transition effect.
   * Default value: default
   */
  dropDownOpenMode?: DropDownOpenMode | string;
  /**
   * If this property is enabled, opening the element’s dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the document. The overlay ensures that any clicks outside of the dropdown are captured by the overlay itself, rather than interacting with other DOM elements on the page. This behavior allows the dropdown to be closed when users click outside of it, and prevents unintended interactions with background content while the dropdown is open.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the text displayed in the dropdown list when no option is currently selected, serving as a placeholder to guide the user.
   * Default value: "No Items"
   */
  dropDownPlaceholder?: string;
  /**
   * Specifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, to the left, or to the right. This setting ensures the dropdown appears in the desired location on the screen when activated.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the width of the dropdown component. By default, this property is set to an empty string (""). When left empty, the dropdown’s width is determined by a corresponding CSS variable, allowing for flexible styling through external stylesheets. You can override this by providing a specific width value (e.g., "200px" or "50%"), which will directly set the dropdown’s width in the component’s inline styles.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies whether the filtering feature is active, allowing users to narrow down or refine the displayed data based on specific criteria. Set this option to true to enable filtering, or false to disable it.
   * Default value: false
   */
  filterable?: boolean;
  /**
   * Specifies the placeholder text displayed within the filter input field inside the dropdown. This input field is visible only when the filterable option is enabled, providing users with a prompt or hint about the expected input for filtering dropdown options.
   * Default value: ""
   */
  filterInputPlaceholder?: string;
  /**
   * Specifies the filtering behavior applied to the dropdown list, such as how user input is used to match and display available options. This setting controls whether the dropdown filters items by starting characters, contains matching text, or applies a custom filtering strategy.
   * Default value: startsWithIgnoreCase
   */
  filterMode?: FilterMode | string;
  /**
   * A callback function that must return a filtering condition (typically a boolean or a predicate function) to determine whether each item should be included or excluded from the results. This is specifically used when filterMode is set to 'custom', allowing you to implement your own custom filtering logic for items.
   * Default value: null
   */
  filterCallback?: any;
  /**
   * When enabled, this option will automatically group the items by the first letter of each item's value. Note: This setting cannot be used if the dataSource already includes predefined groups, as grouping by first letter is only applicable to flat, ungrouped data.
   * Default value: false
   */
  grouped?: boolean;
  /**
   * Specifies which property of each object in the dataSource should be used to group items in the ListBox. By default, the ListBox looks for a property named group in each data object to determine grouping. Setting the groupMember attribute allows you to define a custom property name to use for grouping instead. This is particularly useful when your data is loaded from a JSON file and the grouping property has a name other than "group".
   * Default value: null
   */
  groupMember?: string | null;
  /**
   * Specifies supplementary helper text that appears below the element. This hint is displayed exclusively when the element is in focus, providing contextual guidance to the user as they interact with the field.
   * Default value: ""
   */
  hint?: string;
  /**
   * Controls whether a horizontal scroll bar is displayed within the dropdown menu. Enabling this option allows users to scroll horizontally to view content that extends beyond the visible width of the dropdown.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Represents the specific property name of an item within a List that should be displayed in the input field when a ListItem is selected. This allows developers to control which attribute of the List data appears in the input—such as displaying an item's value (e.g., an ID or code) instead of its label or name. This property is useful when you want to show a value other than the default label in the input element. By default, the input will display the item's label unless a different property name is specified.
   * Default value: ""
   */
  inputMember?: string;
  /**
   * The 'IncrementalSearchDelay' property defines the time interval, in milliseconds, that must elapse after the user stops typing before the previous search query is automatically cleared. This delay timer begins counting once the user has stopped input, preventing the search from triggering immediately with each keystroke. Only after the specified delay has passed can a new search query be initiated, ensuring that searches are not executed too frequently and improving performance for incremental search operations.
   * Default value: 700
   */
  incrementalSearchDelay?: number;
  /**
   * Gets or sets the incremental search mode for the dropdown. When incremental search is enabled (the default setting), typing while the dropdown is focused will automatically search and highlight matching items based on the input characters. This property allows you to enable or disable this behavior as needed.
   * Default value: startsWithIgnoreCase
   */
  incrementalSearchMode?: SearchMode | string;
  /**
   * Specifies the height (in pixels) for each list item when rendering the component. This property takes effect only when virtualization is enabled, ensuring consistent and accurate item measurements for optimized scrolling performance.
   * Default value: null
   */
  itemHeight?: number | null;
  /**
   * Specifies the algorithm used to calculate the width of each item, affecting how items are sized and displayed within the layout. Select the desired measurement method to control item width behavior.
   * Default value: auto
   */
  itemMeasureMode?: ListItemMeasureMode | string;
  /**
   * A getter that retrieves and returns an array containing all list item elements ('') currently present within the dropdown menu. This allows easy access to each item for further processing or manipulation.
   * Default value: 
   */
  items?: any;
  /**
   * The 'itemTemplate' property accepts either a string representing the 'id' of an 'HTMLTemplateElement' present in the DOM, or a direct reference to an 'HTMLTemplateElement' object. This template is used to define and customize the layout and content of each item rendered within the list. By specifying an 'itemTemplate', developers can control exactly how each list item appears, enabling advanced customization beyond default rendering.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Displays a small text label positioned above the element, typically used to provide additional information or context, such as a tooltip, caption, or section heading.
   * Default value: ""
   */
  label?: string;
  /**
   * Specifies the text label that appears alongside the loading indicator when it is visible and positioned at either the top or bottom of the component. This text provides additional context or messaging to users during loading states.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the exact location on the user interface where the loading indicator will appear (e.g., top, center, bottom, or custom coordinates), allowing you to control its placement during loading operations.
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Defines or retrieves the 'unlockKey' property. The 'unlockKey' is a unique identifier or code required to unlock access to the product’s features or content. Setting this property assigns the key needed for authentication or activation, while getting it retrieves the currently assigned unlock key.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., 'en', 'es', 'fr') used by the application or component. This property works together with the messages property, allowing you to display localized content based on the selected language. When you change the language, the corresponding localized messages from the messages object will be used throughout the interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify or enhance how translated messages are structured, displayed, or processed before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines an object containing all text strings displayed by the widget, allowing for easy localization of the interface. This property can be used to get the current set of localizable strings or to provide custom translations for different languages. It works together with the locale property to determine which set of strings is shown to the user based on their selected language.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. This attribute assigns an identifier to the element, which is used when submitting HTML forms to associate the element's data with a key in the form submission. The name attribute is essential for correctly processing form data on the server side.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the popup is currently visible (open) or hidden (closed).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears within the selection field of the element when no option has been chosen. This text provides guidance or an example to the user before a selection is made.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Prevents any user interaction with the element, making it unresponsive to mouse, keyboard, touch, or other input events such as clicks, focus, or drag actions. While disabled, the element cannot be interacted with or activated by the user.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves whether the element's text direction is set to right-to-left (RTL) alignment, which is typically used for languages such as Arabic or Hebrew. This property ensures that the element correctly displays content according to the reading direction of right-to-left locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies whether the resize indicator, located in the bottom-right corner of the dropdown, should be visible. This visual cue allows users to resize the dropdown if enabled. This property works in combination with the resizeMode setting, which controls the behavior of resizing.
   * Default value: false
   */
  resizeIndicator?: boolean;
  /**
   * Specifies whether the drop-down menu can be resized by the user. If resizing is enabled, a resize handle appears at either the top or bottom edge of the drop-down, allowing users to adjust its height interactively. This enhances usability by enabling users to customize the visible area of the drop-down content.
   * Default value: none
   */
  resizeMode?: ResizeMode | string;
  /**
   * Specifies the content or list of options that will appear in the drop-down selection field for users to choose from.
   * Default value: plain
   */
  selectionDisplayMode?: SelectionDisplayMode | string;
  /**
   * Sets or retrieves the selected indexes. The selected indexes property is an array containing the numeric indexes of the items that are currently selected. You can assign an array of indexes to select specific items, or read this property to determine which items are currently selected.
   * Default value: 
   */
  selectedIndexes?: number[];
  /**
   * Gets or sets the indexes of selected items. The 'selected' values correspond to the indices of the items that are currently selected. When setting, provide an array of item indexes to indicate which items should be marked as selected. When getting, returns an array containing the indexes of the currently selected items.
   * Default value: 
   */
  selectedValues?: string[];
  /**
   * Specifies the maximum number of items that a user is allowed to select at one time. If set to 1, only single selection is permitted; higher values allow for multiple selections up to the defined limit.
   * Default value: zeroAndOne
   */
  selectionMode?: ListSelectionMode | string;
  /**
   * Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted alphabetically (A–Z); if false, the original order of the items will be preserved.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order for data:  - Use "asc" for ascending order (e.g., A-Z, 0-9).- Use "desc" for descending order (e.g., Z-A, 9-0).
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styles, ensuring a consistent and customized look for the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * Defines a custom template for rendering each token's content when the selectionDisplayMode property is set to 'tokens'. This allows you to control the appearance and structure of individual tokens displayed in the selection area.
   * Default value: null
   */
  tokenTemplate?: any;
  /**
   * If set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to navigate to the element using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets or retrieves the current selection values. When called, this function returns an array of objects representing the selected items, where each object has the following structure: { label: string, value: any }. Return type: Array.
   * Default value: null
   */
  value?: any;
  /**
   * Determines which property of each item object should be used as the item's value. The value specified by valueMember will be stored as the value of the ListBox item. This property is particularly useful when populating the ListBox from a JSON dataSource, and you want to designate a specific field from each JSON item (such as id, code, or another unique identifier) to serve as the item's value. Similar to groupMember, valueMember helps map a property in your JSON objects directly to the ListBox value, ensuring the correct data is referenced and used when working with item selections or submissions.
   * Default value: """"
   */
  valueMember?: string;
  /**
   * Controls whether the vertical scroll bar is displayed within the container. Set this property to enable, disable, or automatically show the scroll bar based on the content's height relative to the container.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
  /**
   * Specifies whether virtualization is enabled for the dropdown component. When virtualization is enabled, the dropdown can efficiently handle and display a large number of items—such as one million—by rendering only the visible items rather than all items at once. This significantly improves performance and responsiveness, even when working with vast datasets.
   * Default value: false
   */
  virtualized?: boolean;
}
/**
 The DropDownList is a form component that lets you choose a single predefined value from a list. It is a more advanced version of the 'select' tag.
*/
export interface DropDownList extends BaseElement, DropDownListProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user clicks the action button. Note that the action button is only visible if the dropDownOpenMode property is set to 'dropDownbutton'. If dropDownOpenMode is set to any other value, the action button will be hidden and this event will not be triggered.
	* @param event. The custom event.    */
  onActionButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user modifies their current selection, such as selecting or deselecting one or more items within a list, dropdown, or input field. It fires immediately after the selection change has occurred, allowing you to respond dynamically to user interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(addedItems, disabled, index, label, removedItems, selected, value)
   *  addedItems - An array of List items that have been selected.
   *  disabled - A flag indicating whether or not the item that caused the change event is disabled.
   *  index - The index of the List item that triggered the event.
   *  label - The label of the List item that triggered the event.
   *  removedItems - An array of List items that have been unselected before the event was fired.
   *  selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
   *  value - The value of the List item that triggered the event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the dropdown list is closed, either by selecting an item, clicking outside the dropdown, or pressing the Escape key. It allows you to execute custom actions after the dropdown is no longer visible to the user.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered just before the drop-down list is about to close. By handling this event, you have the opportunity to prevent the drop-down from closing by calling event.preventDefault() within your event handler function. This is useful if you need to perform additional validation or asynchronous operations before allowing the drop-down to close.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user clicks on the dropdown button, allowing you to execute custom logic in response to the user's action of opening or interacting with the dropdown menu.
	* @param event. The custom event.    */
  onDropDownButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on an individual item within the interface. It provides contextual information about the selected item, allowing you to perform actions such as displaying details, initiating edits, or handling custom behaviors in response to the user's selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(disabled, index, label, selected, value)
   *  disabled - Indicates whether the List item that was clicked is disabled or not.
   *  index - Indicates the index of the List item that was clicked.
   *  label - The label of the List item that was clicked.
   *  selected - Indicates whether the List item that was clicked is selected or not.
   *  value - The value of the List item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the dropdown list component becomes visible to the user, such as when a user clicks on the dropdown control to display its list of selectable options.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the dropdown list is displayed. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This provides an opportunity to execute custom logic or perform validation before allowing the dropdown to appear.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates the action of resizing the dropdown menu. It occurs as soon as the user begins to adjust the dropdown's dimensions, such as by clicking and dragging the resize handle or border.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered after the user has completed resizing the dropdown component. It fires once the resize action has ended, allowing you to perform actions such as updating the layout or saving the new dimensions of the dropdown.
	* @param event. The custom event. Custom data event was created with: ev.detail(position)
   *  position - An object containing the current left and top positions of the drop down.
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the bottom of the dropDown list, indicating that all available options have been displayed. It can be used to load additional items dynamically (infinite scroll) or to perform specific actions once the end of the list is reached.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the very top (beginning) of the drop-down list, indicating that there are no more items above the currently visible options.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Appends a new ListItem element to the end of the existing list of items within the specified parent element. This operation updates the parent element’s children by adding the new ListItem as the last item in the sequence, preserving the order of existing items.
   * @param {Node} node. A ListItem element that should be added to the rest of the items as the last item.
   * @returns {Node}
   */
  appendChild<T extends Node>(node: Node): T;
  /**
   * Adds one or more new items to the collection, array, or list. This action typically appends the provided item(s) to the existing data structure, increasing its size. Specify the items to be added as input parameters.
   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
   */
  add(item: any): void;
  /**
   * Removes all items from the drop-down list, clearing its contents and leaving the list empty. This action ensures that no selectable options remain within the drop-down component.
   */
  clearItems(): void;
  /**
   * Deselects all currently selected items, ensuring that no items remain selected.
   */
  clearSelection(): void;
  /**
   * Closes the currently open dropdown list, hiding all available options from view and returning the dropdown to its default collapsed state. This action does not select or modify any options within the list.
   */
  close(): void;
  /**
   * Initiates the data binding process, updating the user interface with the latest values from the data source. This method can be used to refresh or re-sync the UI whenever the underlying data changes, ensuring that displayed information remains current and accurate.
   */
  dataBind(): void;
  /**
   * Scrolls the view to bring the specified item into the visible area of its container, ensuring that the item is fully or partially visible to the user. This enables users to locate and interact with the desired item without manual scrolling.
   * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
   */
  ensureVisible(item: HTMLElement | string): void;
  /**
   * Returns the selected item instance from the dropDown list. This method retrieves the full object representing the currently chosen entry, including all associated properties and values, allowing further manipulation or data access within your application.
   * @param {string} value. The value of an item from the drop down list.
   * @returns {HTMLElement}
   */
  getItem(value: string): HTMLElement;
  /**
   * Inserts a new item into the collection at the specified index, shifting existing items at and after that position one place to the right.
   * @param {number} position. The position where the item must be inserted.
   * @param {any} value. The value of the new item.
   */
  insert(position: number, value: any): void;
  /**
   * Inserts a new ListItem element into the list directly before a specified existing ListItem, adjusting the list order accordingly.
   * @param {Node} node. A ListItem element that should be added before the referenceItem in the list.
   * @param {Node | null} referenceNode. A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.
   * @returns {Node}
   */
  insertBefore<T extends Node>(node: Node, referenceNode: Node | null): T;
  /**
   * Displays the drop-down list, allowing users to view and select from the available options.
   */
  open(): void;
  /**
   * Removes the item located at the specified index or position within the collection, shifting any subsequent items to fill the gap. If the specified position is out of range, no changes are made to the collection.
   * @param {number} position. The position of the removed item.
   */
  removeAt(position: number): void;
  /**
   * Removes a specified ListItem element from the collection of child items within the parent element, effectively updating the list's contents to exclude the targeted item.
   * @param {Node} node. A ListItem element that is part of the list of items inside the element.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Selects a specific item from the dropdown list based on the user's input or selection criteria. This action updates the dropdown's displayed value to the chosen item and may trigger any associated event handlers or callbacks.
   * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
   */
  select(item: string | HTMLElement): void;
  /**
   * Removes the currently selected item from the dropdown list, restoring the dropdown to its unselected or default state. This action ensures that no item remains highlighted or chosen within the dropdown component.
   * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
   */
  unselect(item: string | HTMLElement): void;
  /**
   * Updates the selected item in the dropDown list with new data or values. This action modifies the existing item rather than adding a new entry or removing an existing one, ensuring that the dropDown reflects the most current information.
   * @param {number} position. The position where the item must be updated.
   * @param {any} value. The value of the updated item.
   */
  update(position: number, value: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-drop-down-list"): DropDownList;
        querySelector(selectors: "smart-drop-down-list"): DropDownList | null;
        querySelectorAll(selectors: "smart-drop-down-list"): NodeListOf<DropDownList>;
        getElementsByTagName(qualifiedName: "smart-drop-down-list"): HTMLCollectionOf<DropDownList>;
        getElementsByName(elementName: "smart-drop-down-list"): NodeListOf<DropDownList>;
    }
}

export interface EditorProperties {
  /**
   * An object that defines configuration settings for integrating AI capabilities within the grid, including options for enabling AI features, specifying AI service endpoints, adjusting model parameters, and customizing AI-driven functionality in the grid interface.
   * Default value: [object Object]
   */
  ai?: EditorAi;
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the selected mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Automatically formats your text in real-time as you type, converting your input into structured elements such as bullet points, checkboxes, headings, and code blocks. This feature streamlines note-taking and writing by instantly applying consistent formatting without requiring manual markup or additional steps.
   * Default value: true
   */
  autoFormatting?: boolean;
  /**
   * Automatically restores the editor's most recently saved state from the browser's local storage when the element is initialized. To retrieve the correct saved state, you must specify a unique id that matches the one used during the saving process. Without this id, the editor cannot identify or load the previously stored state.
   * Default value: false
   */
  autoLoad?: boolean;
  /**
   * Automatically saves the editor's current content at regular intervals specified by the autoSaveInterval property, but only while the editor element is focused. To enable automatic saving, you must assign a unique id to the editor element; this id is used to store and retrieve the editor's saved state.
   * Default value: false
   */
  autoSave?: boolean;
  /**
   * Specifies the time interval, in milliseconds, at which the Editor automatically saves its state when the autoSave property is enabled. This property controls how frequently the Editor performs auto-save operations.
   * Default value: 1000
   */
  autoSaveInterval?: number;
  /**
   * A customizable formatting function for the character counter display in the Editor. This function receives two parameters:- chars: The current number of characters entered by the user in the Editor.- maxCharCount: The maximum allowed number of characters for the Editor input.The function should return a formatted string that represents the character count status, which will be shown in the Editor’s UI (for example, "25 / 100 characters"). This allows developers to define custom formats for how the character count is displayed to users.
   * Default value: null
   */
  charCountFormatFunction?: any;
  /**
   * Controls whether files are automatically uploaded immediately after the user selects them. When enabled, the upload process begins as soon as files are chosen. When disabled, file upload must be triggered manually. This property can be used to either retrieve the current auto-upload setting or update it.
   * Default value: false
   */
  autoUpload?: boolean;
  /**
   * Specifies the configuration for content filtering, allowing you to define which types of content are allowed or blocked according to the selected criteria or rules.
   * Default value: [object Object]
   */
  contentFiltering?: EditorContentFiltering;
  /**
   * Defines the CSS file(s) or styles to be applied to the content area within the Editor, allowing you to customize the appearance and formatting of the editor’s content.
   * Default value: ""
   */
  content_css?: string;
  /**
   * Specifies the items and structure of the context menu that appears when a user right-clicks within the Editor's content area. This setting allows you to customize which menu options are available based on the user's actions, providing tailored functionality and quick access to relevant commands.
   * Default value: default
   */
  contextMenu?: EditorContextMenu | string;
  /**
   * Enhances the Editor’s context menu by allowing you to customize its default items. This property accepts several formats:- 'Array of Items:'    You can provide an array where each item is either:    - A 'string' representing the value/action for the menu item.    - An 'object' in the format '{ label: string, value: string }', where:    - 'label' is the text displayed in the menu.    - 'value' is the action or identifier associated with that menu item.- 'Function:'    You can also pass a function that dynamically generates the array of menu items. The function receives the following parameters:    - 'target' ('HTMLElement'): The DOM element where the context menu is triggered.    - 'type' ('string'): The type or context of the menu (e.g., "table", "image", "link", or other relevant context types).    - 'defaultItems' ('string[]'): The default set of menu item identifiers for that context.    The function should return an array of menu items (as described above), which will be rendered in place of the default menu.'Example function signature:''''javascriptfunction (target: HTMLElement, type: string, defaultItems: string[]) {  return defaultItems;}'''This flexible property enables you to tailor the context menu based on the user's selection, the specific element targeted, or the context of the interaction, helping create a more intuitive and relevant editing experience.
   * Default value: null
   */
  contextMenuDataSource?: string[] | { label: string, value: 'string' }[] | Function | null;
  /**
   * Configures the available options for exporting data from the Editor, such as file formats (CSV, JSON, XML), export settings, and customization preferences. These settings determine how users can save or export content from the Editor.
   * Default value: [object Object]
   */
  dataExport?: EditorDataExport;
  /**
   * Controls whether the Editor component is active or inactive. When enabled, users can interact with and make changes within the Editor; when disabled, all editing functionalities are restricted or unavailable.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Prevents users from modifying or editing content within the Editor, making all content read-only.
   * Default value: false
   */
  disableEditing?: boolean;
  /**
   * Prevents the Quick Search Bar from appearing or being accessible to users, effectively disabling its functionality across the application.
   * Default value: false
   */
  disableSearchBar?: boolean;
  /**
   * Specifies the editing mode for the Editor component. By default, the Editor operates in standard HTML mode, allowing users to input and edit HTML content directly. In this mode, pressing Enter inserts line breaks or new paragraphs according to standard HTML behavior. When set to 'blockHtml', the Editor creates new DIV elements each time the user presses Enter, promoting a block-based editing experience. This mode also provides built-in commands tailored for structured data entry and manipulation.If set to 'markdown', the Editor functions as a dedicated Markdown editor. User input is interpreted as Markdown syntax, and the Editor automatically parses and converts the Markdown content into HTML for real-time preview. This enables a seamless writing and formatting workflow for users who prefer Markdown.Possible values:- 'html' (default): Accepts and parses HTML input.- 'blockHtml': Uses DIV tags for new blocks and offers additional commands for data input.- 'markdown': Enables Markdown syntax input with live HTML preview.
   * Default value: html
   */
  editMode?: EditMode | string;
  /**
   * Specifies whether the output from the getHTML method and the Source Code view should be HTML-encoded. When enabled, special characters in the code (such as , and &) are converted to their HTML entity equivalents, ensuring correct display and preventing unintended HTML rendering. When disabled, the values are returned as raw HTML without encoding.
   * Default value: false
   */
  enableHtmlEncode?: boolean;
  /**
   * Specifies whether pressing the Tab key inside the Editor will insert a tab character at the cursor position, or instead move focus to the next focusable element (default behavior). When enabled, Tab inserts a tab character; when disabled, Tab shifts focus as usual.
   * Default value: false
   */
  enableTabKey?: boolean;
  /**
   * Specifies the duration (in milliseconds) between consecutive result updates when using the "Find and Replace" and "Search Bar" features. Adjusting this interval can affect how quickly search results are refreshed and displayed to the user during searches.
   * Default value: 50
   */
  findAndReplaceTimeout?: number;
  /**
   * Specifies whether the Toolbar is visible or hidden. When set to true, the Toolbar will be hidden; when set to false, the Toolbar will be displayed.
   * Default value: false
   */
  hideToolbar?: boolean;
  /**
   * Specifies whether the Inline Toolbar is visible. If set to true, the toolbar will be hidden; if false, the toolbar will be displayed.
   * Default value: false
   */
  hideInlineToolbar?: boolean;
  /**
   * Specifies the file format for images or videos uploaded from local storage. By default, uploaded files are encoded and stored as base64 strings. This setting allows you to define or change the storage format as needed.
   * Default value: base64
   */
  imageFormat?: EditorImageFormat | string;
  /**
   * Automatically detects and sets the appropriate width for images pasted from the clipboard, ensuring consistent image display and optimal fit within the layout.
   * Default value: 0
   */
  imagePasteWidth?: number;
  /**
   * Automatically detects and sets the appropriate height for an image when it is pasted from the clipboard, ensuring correct aspect ratio and consistent display within the application.
   * Default value: 0
   */
  imagePasteHeight?: number;
  /**
   * Sets the content of the Editor using an HTML string. This method enables you to programmatically insert both plain text and HTML elements, including tags, formatting, and embedded media, directly into the Editor. Existing content will be replaced by the provided HTML. Use this to dynamically update the Editor's contents with custom HTML markup.
   * Default value: "en"
   */
  innerHTML: string;
  /**
   * Specifies the horizontal (x) and vertical (y) offset values used to adjust the position of the Inline Toolbar relative to its default placement on the page. This allows for precise positioning by shifting the toolbar along the x and y axes.
   * Default value: [0, -5]
   */
  inlineToolbarOffset?: number[];
  /**
   * Specifies the iframe configuration for the Editor. When enabled, the Editor's content is rendered within an isolated iframe, ensuring separation from the main DOM and preventing style or script conflicts. This option enhances content security and encapsulation. Additionally, it provides a mechanism to inject external resources (such as stylesheets or scripts) directly into the iframe environment if required.
   * Default value: [object Object]
   */
  iframeSettings?: EditorIframeSettings;
  /**
   * Gets or sets the unlockKey, a unique value required to activate or unlock the product’s features. Use this property to provide the unlock key when authorizing access, or retrieve the current unlock key associated with the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the current language code used for localization, such as "en" for English or "fr" for French. This property works together with the messages property to display the appropriate localized messages based on the selected language. Use it to get or set the active language for your application's interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Specifies the maximum number of characters that can be entered within the Editor. Once this limit is reached, users will be unable to input additional characters.
   * Default value: null
   */
  maxCharCount?: number;
  /**
   * Defines or retrieves an object containing all user-visible strings (such as labels, tooltips, and messages) used by the widget for display purposes and localization. This property works together with the language setting to enable customization and translation of the widget’s interface into different languages. The object allows developers to provide localized string values, ensuring the widget content is appropriately translated for end users.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownName": "Invalid property name: ''!",
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidValue": ".",
   *     "incorrectArgument": ".",
   *     "permissionsRequired": ".",
   *     "timeout": ": The import request has timed out.",
   *     "importError": ".",
   *     "exportError": ".",
   *     "ok": "Ok",
   *     "cancel": "Cancel",
   *     "alignLeft": "Align Left",
   *     "alignCenter": "Align Center",
   *     "alignRight": "Align Right",
   *     "alignJustify": "Align Justify",
   *     "segoeUi": "Segoe UI",
   *     "arial": "Arial",
   *     "georgia": "Georgia",
   *     "impact": "Impact",
   *     "tahoma": "Tahoma",
   *     "timesNewRoman": "Times New Roman",
   *     "verdana": "Verdana",
   *     "p": "Paragraph",
   *     "pre": "Code",
   *     "code": "Code",
   *     "blockquote": "Quotation",
   *     "h1": "Heading 1",
   *     "h2": "Heading 2",
   *     "h3": "Heading 3",
   *     "h4": "Heading 4",
   *     "h5": "Heading 5",
   *     "h6": "Heading 6",
   *     "bold": "Bold",
   *     "italic": "Italic",
   *     "underline": "Underline",
   *     "strikethrough": "Strikethrough",
   *     "orderedlist": "Ordered List",
   *     "unorderedlist": "Unordered List",
   *     "subscript": "Subscript",
   *     "superscript": "Superscript",
   *     "alignment": "Alignments",
   *     "fontname": "Font Name",
   *     "fontsize": "Font Size",
   *     "formats": "Formats",
   *     "backgroundcolor": "Background Color",
   *     "fontcolor": "Font Color",
   *     "redo": "Redo",
   *     "undo": "Undo",
   *     "indent": "Indent",
   *     "outdent": "Outdent",
   *     "createlink": "Hyperlink",
   *     "hyperlink": "Hyperlink",
   *     "editlink": "Hyperlink",
   *     "removelink": "Remove link",
   *     "openlink": "Open link",
   *     "image": "Image",
   *     "video": "Video",
   *     "table": "Table",
   *     "lowercase": "Lower Case",
   *     "uppercase": "Upper Case",
   *     "print": " Print",
   *     "cut": " Cut",
   *     "copy": " Copy",
   *     "paste": " Paste",
   *     "clearformat": "Clear Format",
   *     "fullscreen": "Full Screen",
   *     "restore": "Restore Screen",
   *     "sourcecode": "Source Code",
   *     "preview": "Preview",
   *     "splitmode": "Split Editor",
   *     "address": "Web Address",
   *     "text": "Display Text",
   *     "addressPlaceholder": "http://example.com",
   *     "textPlaceholder": "Enter Text",
   *     "targetPlaceholder": "Select Target",
   *     "titlePlaceholder": "Enter a Title",
   *     "urlPlaceholder": "http://example.com/image.png",
   *     "srcPlaceholder": "https://www.youtube.com/embed/video_link",
   *     "thumbnail": "Or provide a URL as a video thumbnail",
   *     "thumbnailPlaceholder": "https://www.link-to-thumbnail.jpg",
   *     "videoUrl": "Video URL",
   *     "videoUrlPlaceholder": "https://www.youtube.com/video_link",
   *     "captionPlaceholder": "Caption",
   *     "altPlaceholder": "Alternative Text",
   *     "widthPlaceholder": "auto",
   *     "heightPlaceholder": "auto",
   *     "target": "Open Link in",
   *     "linkBlankDescr": "New Window",
   *     "linkSelfDescr": "Same Window",
   *     "linkParentDescr": "Parent Frame",
   *     "linkTopDescr": "Full Body of the Window",
   *     "linkCustomDescr": "Custom Frame Name",
   *     "title": "Title",
   *     "url": "Or provide the URL to an image",
   *     "src": "Or provide the URL to an embed video",
   *     "width": "Width",
   *     "height": "Height",
   *     "alt": "Alternative Text",
   *     "caption": "Caption",
   *     "display": "Display",
   *     "displayPlaceholder": "Display",
   *     "displayBlock": "Block",
   *     "displayInline": "Inline",
   *     "draggable": "Enable Dragging",
   *     "resizable": "Enable Resizing",
   *     "browse": "Browse",
   *     "connectionError": ": File Upload requires connection to the server.",
   *     "wrongItemIndex": ": There is no file with such an index in the list of uploaded files.",
   *     "tooLongFileName": ": File name is too long.",
   *     "totalFiles": "Total files: ",
   *     "cancelFile": "Cancel File",
   *     "dashedborders": "Dashed Borders",
   *     "altrows": "Alternate Rows",
   *     "insertRowBefore": "Insert Row Before",
   *     "insertRowAfter": "Insert Row After",
   *     "deleteRow": "Delete Row",
   *     "insertColumnLeft": "Insert Column Left",
   *     "insertColumnRight": "Insert Column Right",
   *     "deleteColumn": "Delete Column",
   *     "alignTop": "Align Top",
   *     "alignMiddle": "Align Middle",
   *     "alignBottom": "Align Bottom",
   *     "delete": "Delete",
   *     "tablerows": "Table Rows",
   *     "tablecolumns": "Table Columns",
   *     "tablevalign": "Table Cell Vertical Align",
   *     "tablestyle": "Table Style",
   *     "tableheader": "Table Header",
   *     "buttonLabel": "Custom Table",
   *     "pasteLabel": "Choose the paste format action:",
   *     "cols": "Columns",
   *     "rows": "Rows",
   *     "alphabet": "abcdefghijklmnopqrstuvwxyz",
   *     "header": "Header",
   *     "column": "Column",
   *     "plainText": "Plain Text",
   *     "keepFormat": "Keep Format",
   *     "cleanFormat": "Clean Format",
   *     "roleDescription": "Text Editor",
   *     "iframeTitle": "Editor Content is Encloused in it's own DOM inside an iFrame",
   *     "toolbarButtonAriaLabel": "Toolbar Toggle Button",
   *     "primaryToolbarAriaLabel": "Primary Toolbar",
   *     "secondaryToolbarAriaLabel": "Secondary Toolbar",
   *     "inputAriaLabel": "Enter Text",
   *     "homeTab": "Home",
   *     "viewTab": "View",
   *     "insertTab": "Insert",
   *     "layoutTab": "Layout",
   *     "undoGroup": "Undo",
   *     "clipboardGroup": "Clipboard",
   *     "fontGroup": "Font",
   *     "paragraphGroup": "Paragraph",
   *     "editingGroup": "Editing",
   *     "tableGroup": "Tables",
   *     "imageGroup": "Images",
   *     "videoGroup": "Videos",
   *     "linkGroup": "Links",
   *     "viewsGroup": "Views",
   *     "deleteGroup": "Delete",
   *     "findandreplace": "Find and Replace",
   *     "requiredMessage": "The content of the Editor cannot be empty",
   *     "tableProperties": "Table Properties",
   *     "imageProperties": "Image Properties",
   *     "videoProperties": "Video Properties",
   *     "linkProperties": "Link Properties",
   *     "selectAll": "Select All",
   *     "deleteTable": "Delete Table",
   *     "deleteImage": "Delete Image",
   *     "deleteVideo": "Delete Video",
   *     "createLink": "Create Link",
   *     "deleteLink": "Delete Link",
   *     "copyImage": "Copy",
   *     "cutImage": "Cut",
   *     "copyVideo": "Copy",
   *     "cutVideo": "Cut",
   *     "find": "Find",
   *     "findPlaceholder": "",
   *     "replace": "Replace",
   *     "replaceWith": "Replace With",
   *     "replaceAll": "Replace All",
   *     "replacePlaceholder": "",
   *     "results": "Results",
   *     "resultsPlaceholder": "No match",
   *     "matchCase": "Match Case",
   *     "searchPlaceholder": "Search..."
   *   }
   * }
   */
  messages?: any;
  /**
   * Assigns the specified element to the property †a†, designating it as the form control responsible for submitting the Editor's value. This allows the Editor’s content to be included in form submissions, ensuring its data is sent when the form is submitted.
   * Default value: null
   */
  name?: string | null;
  /**
   * Specifies the format (such as plain text, HTML, or Markdown) in which content will be inserted into the Editor when a user pastes data, ensuring consistent formatting and correct rendering within the editing environment.
   * Default value: keepFormat
   */
  pasteFormat?: PasteFormat | string;
  /**
   * Specifies the placeholder text or element displayed within the Editor when it is empty, guiding users on what to enter or indicating the expected content.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies whether activating the clearFormat toolbar action should also remove any inline CSS styles (such as style attributes) applied to the currently selected node. When enabled, this option ensures that in addition to removing formatting tags (like &lt;b&gt;, &lt;i&gt;, etc.), all custom inline styles will be cleared from the selected content.
   * Default value: false
   */
  removeStylesOnClearFormat?: boolean;
  /**
   * Specifies whether the Editor's content is required. If this option is enabled and the Editor is left empty, a notification will be displayed indicating that the content cannot be empty and must be provided before proceeding.
   * Default value: false
   */
  required?: boolean;
  /**
   * Sets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures that the element displays its content in a manner appropriate for RTL locale support.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Indicates whether the value is sanitized to protect against Cross-Site Scripting (XSS) attacks. When enabled, any potentially malicious scripts, inline event handlers, or other XSS vulnerabilities are automatically removed from the HTML content entered in the Editor, ensuring only safe and clean HTML is allowed.
   * Default value: false
   */
  sanitized?: boolean;
  /**
   * Controls the visibility of the character counter. When enabled, the counter appears in the bottom right corner of the input field. If a maxCharCount value is set, the counter changes color to visually warn the user as they approach the character limit:- When the content length reaches 70% or more of the maximum, the counter displays a warning color.- At 90% or more of the maximum, the counter switches to a more prominent warning color, indicating that the limit is nearly reached.- Once the character count reaches the maximum limit, further text input is prevented.
   * Default value: false
   */
  showCharCount?: boolean;
  /**
   * Specifies if the editor enables spell checking, allowing the identification and highlighting of spelling errors within the text. If set to true, the editor will actively check and mark misspelled words as the user types. If set to false, spell checking functionality will be disabled.
   * Default value: true
   */
  spellCheck?: boolean;
  /**
   * Specifies the time interval, in milliseconds, at which the Source Code and Preview panels are automatically refreshed when Split Mode is active. Adjusting this value controls how frequently the panels update to reflect changes in real-time while Split Mode is enabled.
   * Default value: 100
   */
  splitModeRefreshTimeout?: number;
  /**
   * Defines the list of editor users for the application. Expects an array of user objects, each requiring the following properties:  - ''id'': A unique identifier for the user (string or number).  - ''name'': The display name of the user (string).  Each user object may also include the following optional properties:  - ''color'': A string specifying the user's color (e.g., HEX or CSS color value) for UI highlighting.  - ''image'': A string containing the URL of the user's avatar or profile image.
   * Default value: []
   */
  users?: any[];
  /**
   * Activates the editor pages functionality, allowing users to create, edit, and manage custom pages directly within the editor interface.
   * Default value: false
   */
  enablePages?: boolean;
  /**
   * Defines the editor pages by accepting an array of objects, where each object must include a 'label' property (a string representing the title or name of the page) and an 'innerHTML' property (a string containing the HTML content to be displayed on that page).
   * Default value: []
   */
  pages?: any[];
  /**
   * Specifies the URL endpoint used for file uploads. This property directly maps to the 'action' attribute of the upload form, determining where the uploaded data is sent on the server. For example, you can set the 'uploadUrl' property to the path of a server-side script such as a PHP file (e.g., "upload.php") that processes and handles incoming file uploads. Setting this property ensures that files selected by the user are transmitted to the specified server location when the upload form is submitted.
   * Default value: ""
   */
  uploadUrl?: string;
  /**
   * Defines or retrieves the URL used for the remove operation. This property corresponds to the form's action attribute and specifies the server endpoint that will handle item removal requests. For example, setting the removeUrl property to the path of a PHP file enables the server-side script to process and execute the removal action when triggered.
   * Default value: ""
   */
  removeUrl?: string;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * 'Provides the configuration for the Toolbar items in the editor.'  The value can be either an array of strings—where each string specifies the name of a default toolbar item—or an array of objects for more advanced configuration and customization.  - 'String Values:'    Each string refers to a toolbar item by its name. Names are case-insensitive.- 'Object Values:'    An object can define a custom toolbar item, or modify/add settings to an existing one.      - The object must include a 'name' property (case-insensitive) to refer to a default toolbar item’s functionality.    - If 'name' is set to "custom", you can define a fully custom toolbar item.    - If the 'name' attribute is missing or invalid, the entry is treated as a separator rather than a toolbar item.'Supported Default Toolbar Items'  Below is a list of default toolbar items supported by the editor, along with their descriptions and types:  - 'SourceCode': Toggles between the HTML source/preview panel and the input panel. *Type: Toggle button*- 'SplitMode': Splits the editor view to show both input and preview panels. *Type: Toggle button*- 'FullScreen': Expands the editor to fill the viewport, overlaying the page content. *Type: Toggle button*- 'Alignment': Controls the alignment (left, center, right, justify) of the selected content. *Type: Dropdown*- 'FontName': Sets the font family of the selected content. *Type: Dropdown*- 'FontSize': Sets the font size of the selected content. *Type: Dropdown*- 'Formats': Changes the format/style of the current selection (e.g., paragraph, heading). *Type: Dropdown*- 'TableRows': Insert or remove table rows in the selected table. *Type: Dropdown*- 'TableColumns': Insert or remove table columns in the selected table. *Type: Dropdown*- 'TableVAlign': Sets vertical alignment of a selected table cell. *Type: Dropdown*- 'TableStyle': Applies additional styling to the selected table. *Type: Dropdown*- 'BackgroundColor': Changes the background color of the current selection. *Type: Color input*- 'FontColor': Changes the font color of the current selection. *Type: Color input*- 'Bold': Toggles bold for the selected text. *Type: Button*- 'Italic': Toggles italic for the selected text. *Type: Button*- 'Underline': Toggles underline for the selected text. *Type: Button*- 'Strikethrough': Toggles strikethrough for the selected text. *Type: Button*- 'Delete': Deletes the current selection. *Type: Button*- 'Undo': Reverts the last operation. *Type: Button*- 'Redo': Redoes the previously undone operation. *Type: Button*- 'Indent': Increases the indentation of the current selection. *Type: Button*- 'Outdent': Decreases the indentation of the current selection. *Type: Button*- 'OpenLink': Opens the hyperlink of the current selection. *Type: Button*- 'EditLink', 'CreateLink', 'Hyperlink': Creates, edits, or triggers a dialog for hyperlink management. *Type: Button*- 'RemoveLink': Removes a hyperlink from the selected text. *Type: Button*- 'Cut': Cuts the selected content. *Type: Button*- 'Copy': Copies the selected content. *Type: Button*- 'Paste': Pastes from the clipboard.      - *Type: Button*      - *Type: Dropdown* (when the "advanced" property is set to true)- 'Image': Opens a dialog to insert or edit an image. *Type: Button*- 'Video': Opens a dialog to insert or edit a video. *Type: Button*- 'LowerCase': Converts current selection to lowercase letters. *Type: Button*- 'UpperCase': Converts current selection to uppercase letters. *Type: Button*- 'Print': Opens the browser's print preview window. *Type: Button*- 'Caption': Inserts or removes a caption in the selected table. *Type: Button*- 'ClearFormat': Removes all formatting from the current selection. *Type: Button*- 'Table': Opens a dialog to insert a new table. *Type: Button*- 'TableHeader': Adds or removes a header row in the selected table. *Type: Button*- 'OrderedList': Inserts or removes an ordered (numbered) list. *Type: Button*- 'UnorderedList': Inserts or removes a bulleted list. *Type: Button*- 'Subscript': Formats the selected text as subscript. *Type: Button*- 'Superscript': Formats the selected text as superscript. *Type: Button*- 'FindAndReplace': Opens a dialog to find and replace text in the editor. *Type: Button*'Note:' Separators between toolbar items can be added by using an object without a valid 'name' property.---'inlineToolbarItems'  - This property is applicable only for the following toolbar items: 'table', 'image', and 'hyperlink'.- Accepts the same value types and structure as 'toolbarItems'.- The specified items will be displayed in an inline floating toolbar when any of these elements is selected in the editor.---'Summary of Usage Examples:''''json[  "Bold",  "Italic",  { "name": "FontSize", "options": ["Small", "Medium", "Large"] },  {},  { "name": "custom", "label": "Custom Action", "icon": "..." }]'''- The above would provide bold and italic buttons, a dropdown with custom font size options, a separator, and a custom toolbar item.---This configuration enables full customization of the editor’s toolbar to suit different user requirements, offering both default and extendable options.
   * Default value: bold,italic,underline,|,formats,alignment,orderedList,unorderedList,|,hyperlink,image,video,|,sourceCode,redo,undo
   */
  toolbarItems?: ToolbarItem[];
  /**
   * Specifies the display style of the Editor’s main toolbar. You can choose between "Ribbon" mode, which presents the toolbar as a horizontal panel with grouped command icons similar to modern office applications, or "Menu" mode, which organizes commands in drop-down menus for a more compact, traditional interface. This setting controls how users interact with the Editor’s primary tools and functions.
   * Default value: menu
   */
  toolbarMode?: ToolbarMode | string;
  /**
   * Enables customization of the SingleLineRibbon's appearance by allowing you to modify the arrangement and selection of group items, as well as reorder the groups themselves. This provides flexibility in tailoring the ribbon layout to better suit your application's specific needs.
   * Default value: [{"name":"homeTab","groups":[{"name":"undoGroup","items":["undo","redo"]},{"name":"clipboardGroup","items":["cut","copy","paste"]},{"name":"fontGroup","items":["fontName","fontSize","backgroundColor","fontColor","clearFormat","formats","bold","italic","underline","strikethrough","superscript","subscript"]},{"name":"paragraphGroup","items":["orderedList","unorderedList","indent","outdent","alignment"]},{"name":"editingGroup","items":["findAndReplace"]}]},{"name":"insertTab","groups":[{"name":"tableGroup","items":["table"]},{"name":"imageGroup","items":["image"]}{"name":"videoGroup","items":["video"]},{"name":"linkGroup","items":["createLink","removeLink"]}]},{"name":"viewTab","groups":[{"name":"viewsGroup","items":["fullScreen","sourceCode","splitMode"]}]},{"name":"layoutTab","hidden":true,"groups":[{"name":"deleteGroup","items":["delete"]},{"name":"tableGroup","items":["table","tableHeader","tableRows","tableColumns","tableVAlign","tableStyle",""]},{"name":"imageGroup","items":["image","caption"]},{"name":"videoGroup","items":["video","caption"]}]}]
   */
  toolbarRibbonConfig?: { name: string, groups: { name: string, items: string[] }[] }[];
  /**
   * Specifies the format (such as plain text, HTML, or Markdown) that will be applied to content when it is pasted into the Editor. This setting controls how the pasted data is interpreted and ensures that it is correctly displayed within the Editor environment.
   * Default value: toggle
   */
  toolbarViewMode?: ToolbarViewMode | string;
  /**
   * Fixes the Toolbar to the top of the browser window, ensuring it remains visible at all times, even as the user scrolls through the page content.
   * Default value: false
   */
  toolbarSticky?: boolean;
  /**
   * If set to true, this property prevents the element from receiving keyboard or programmatic focus, making it impossible for users to interact with it using the keyboard or assistive technologies.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Provides methods to retrieve or update the current content within the Editor. Use this property to access the existing value or assign a new value to the Editor programmatically.
   * Default value: """"
   */
  value?: string;
  /**
   * A customizable function that allows you to fully modify the appearance and behavior of the Editor dialog used for inserting or editing tables, images, videos, and hyperlinks. The function receives two arguments:- 'target': The dialog element instance that is about to be displayed, representing the specific editor dialog (e.g., Table, Image, Video, or Hyperlink dialog) being opened.- 'item': The toolbar item object that triggered the opening of the dialog, allowing you to access information about the source of the dialog request or customize its settings based on the initiating toolbar action.Use this function to tailor the dialog's UI elements, default values, event handlers, or any other properties, providing a flexible way to match the dialog experience to your application's needs.
   * Default value: null
   */
  windowCustomizationFunction?: any;
}
/**
 jqxEditor represents an advanced HTML text editor which can simplify web content creation or be a replacement of your HTML/Markdown Text Areas.
*/
export interface Editor extends BaseElement, EditorProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when an element loses focus (blur event) and its content has been modified since it last received focus.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The old value before the change.
   *  value - The new value after the change.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered immediately after the user modifies the content through direct input, such as typing, pasting, or deleting text. It serves as a notification that the content has changed specifically due to user interaction, allowing you to respond to updates made by the user in real time.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The old value before the input change.
   *  value - The new value after the input change.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before a Toolbar action begins execution, allowing developers to intervene or modify behavior as needed. By invoking event.preventDefault() within the event handler, you can cancel the pending Toolbar action, preventing it from proceeding. This provides an opportunity to implement custom validation, confirmation prompts, or other pre-action logic before the Toolbar action is carried out.
	* @param event. The custom event. Custom data event was created with: ev.detail(name)
   *  name - The name of the action.
   */
  onActionStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered after a Toolbar action has been completed. It signifies that all processes related to the action, such as updating the UI or executing related logic, have finished. Use this event to perform any follow-up tasks when a Toolbar action concludes.
	* @param event. The custom event. Custom data event was created with: ev.detail(name)
   *  name - The name of the action.
   */
  onActionEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user selects and clicks on an item within the context menu. It allows you to execute custom logic in response to specific context menu actions, providing access to details about which menu item was clicked and the relevant context of the interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(originalEvent, value)
   *  originalEvent - The original click event.
   *  value - The value of the item.
   */
  onContextMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user opens the context menu, typically by right-clicking or using a designated keyboard shortcut on an element. It allows developers to execute custom logic or modify the context menu's content before it is displayed to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner)
   *  target - The toolbar that is the target of the operation.
   *  owner - The tooltip target (the owner of the tooltip).
   */
  onContextMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the context menu appears, typically as a result of a user right-clicking or performing a similar gesture. At this point, you have the opportunity to customize or modify the context menu, or to prevent the menu from opening entirely by calling event.preventDefault() within the event handler.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The toolbar that is the target of the operation.
   */
  onContextMenuOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the Context Menu is closed, either by user action (such as clicking outside the menu, selecting a menu item, or pressing the Escape key) or programmatically through the relevant API. Handlers for this event can be used to perform clean-up tasks or update the user interface in response to the Context Menu being dismissed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner)
   *  target - The toolbar that is the target of the operation.
   *  owner - The tooltip target (the owner of the tooltip).
   */
  onContextMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before the Context Menu begins to close. By calling event.preventDefault() within the event handler, you can cancel the closing action, allowing you to override or delay the default behavior based on custom logic.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The toolbar that is the target of the operation.
   */
  onContextMenuClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user initiates the resizing of an image, table, or video element. It indicates that the resizing operation has begun, allowing you to implement custom behaviors or UI updates in response to the start of a resize action.
	* @param event. The custom event.    */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user has completed resizing an image, table, or video element. It fires after the resizing action ends, allowing you to perform actions such as saving the new dimensions or updating the layout in response to the change.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The element that is resized (image/table or video).
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the inline Toolbar becomes visible to the user, such as when a user selects text or performs an action that causes the Toolbar to appear within the interface. Use this event to run custom logic or adjust UI elements in response to the Toolbar opening.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner)
   *  target - The toolbar that is the target of the operation.
   *  owner - The tooltip target (the owner of the tooltip).
   */
  onInlineToolbarOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before the inline Toolbar begins to open. Developers can intercept this event and prevent the Toolbar from opening by invoking event.preventDefault() within the event handler. This allows for conditional control over the Toolbar's visibility based on custom application logic.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The toolbar that is the target of the operation.
   */
  onInlineToolbarOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the inline toolbar is closed, either by user interaction (such as clicking outside the toolbar, pressing Esc, or selecting a toolbar option) or programmatically via code. It provides an opportunity to perform cleanup, update UI elements, or execute additional logic in response to the toolbar being dismissed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner)
   *  target - The toolbar that is the target of the operation.
   *  owner - The tooltip target (the owner of the tooltip).
   */
  onInlineToolbarClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the inline toolbar begins to close, allowing you to perform actions or cleanup tasks in response to the toolbar's closure.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The toolbar that is the target of the operation. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
   */
  onInlineToolbarClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered each time the Drop Down Toolbar becomes visible to the user, such as when it is expanded or opened. You can use this event to execute custom logic whenever the toolbar is displayed, for example, to load dynamic content or adjust UI elements within the toolbar.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner)
   *  target - The toolbar that is the target of the operation.
   *  owner - The tooltip target (the owner of the tooltip).
   */
  onDropDownToolbarOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered just before the Drop Down Toolbar begins to open. Within the event handler, you can call event.preventDefault() to cancel the opening operation, allowing you to customize or prevent the display of the toolbar based on specific conditions. This provides an opportunity to implement custom logic before the toolbar becomes visible to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The toolbar that is the target of the operation.
   */
  onDropDownToolbarOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the Drop Down Toolbar is closed, either by user interaction (such as clicking outside the toolbar or selecting an option) or programmatically via the application's code. Use this event to perform actions or update the user interface in response to the toolbar being dismissed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner)
   *  target - The toolbar that is the target of the operation.
   *  owner - The tooltip target (the owner of the tooltip).
   */
  onDropDownToolbarClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when the Drop Down Toolbar begins its closing process. Within the event handler, you can prevent the toolbar from closing by invoking event.preventDefault(). This provides an opportunity to execute custom logic, such as confirming the action with the user or validating conditions before allowing the toolbar to close.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The toolbar that is the target of the operation.
   */
  onDropDownToolbarClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the Dialog Window is successfully opened and becomes visible to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item)
   *  target - The window that is the target of the operation.
   *  item - The toolbar item is the target of the operation.
   */
  onDialogOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before the Dialog Window begins to open, giving developers an opportunity to perform actions or modify options prior to rendering. You can cancel the default behavior and prevent the Dialog Window from opening by calling event.preventDefault() within the event handler.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item)
   *  target - The window that is the target of the operation.
   *  item - The toolbar item that is the target of the operation.
   */
  onDialogOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the Dialog Window is closed by the user, either through clicking the close button, pressing the escape key, or programmatically via code. It allows developers to execute custom actions or clean up resources after the dialog has been dismissed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item)
   *  target - The window that is the target of the operation.
   *  item - The toolbar item that is the target of the operation.
   */
  onDialogClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before the Dialog Window begins to close. It provides an opportunity to execute custom logic or perform validation before the dialog is dismissed. The closure of the dialog can be canceled by calling event.preventDefault() within the event handler.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item)
   *  target - The window that is the target of the operation.
   *  item - The toolbar item that is the target of the operation.
   */
  onDialogClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when an image or video file has been uploaded successfully to the server. It indicates the completion of the upload process without errors, allowing you to perform additional actions such as displaying a success message or updating the user interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, filename, type, size, index, status, serverResponse)
   *  target - The file upload element that is the target of the operation.
   *  item - The toolbar item that is the target of the operation.
   *  filename - The name of the uploaded file.
   *  type - The type of the uploaded file.
   *  size - The size of the uploaded file.
   *  index - The index of the uploaded file.
   *  status - The status of the uploaded file. Whether there was an error or success.
   *  serverResponse - The response of the remote server.
   */
  onImageUploadSuccess?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when an attempt to upload an image or video fails, indicating that the file was not successfully transferred to the server due to an error or interruption during the upload process.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, filename, type, size, index, status, serverResponse)
   *  target - The file upload element that is the target of the operation.
   *  item - The toolbar item that is the target of the operation.
   *  filename - The name of the canceled file.
   *  type - The type of the canceled file.
   *  size - The size of the canceled file.
   *  index - The index of the canceled file.
   *  status - The status of the uploaded file. Whether there was an error or success.
   *  serverResponse - The response of the remote server.
   */
  onImageUploadFailed?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on an item within the Toolbar. It provides relevant information about the clicked item, allowing you to execute custom logic or actions in response to the user's interaction with the Toolbar.
	* @param event. The custom event. Custom data event was created with: ev.detail(originalEvent, value)
   *  originalEvent - The original click event.
   *  value - The name of the toolbar item that was clicked.
   */
  onToobarItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user closes a message, such as dismissing a notification or alert. It allows you to execute custom logic in response to the message being removed from the user interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(instance)
   *  instance - The toast item that is the target of the operation.
   */
  onMessageClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user opens or views a message, indicating that the message content has become visible or active in the user interface. It can be used to track message engagement, update message status, or initiate follow-up actions when a message is accessed.
	* @param event. The custom event. Custom data event was created with: ev.detail(instance)
   *  instance - The toast item that is the target of the operation.
   */
  onMessageOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Integrates a custom item into the editor’s toolbar. <br/><br/>**Example Usage:**<br/>```js<br/>editor.addToolbarItem({<br/>    name: 'customButton2',         // Unique identifier for the toolbar item<br/>    width: 100,                    // Width of the toolbar item in pixels<br/>    template: '<smart-button>Button2</smart-button>' // Custom HTML template defining the toolbar item's appearance and content<br/>});<br/>```<br/><br/>**Description:**  <br/>This method allows you to add a new, customizable button or element to the editor’s toolbar. You specify a unique name, the width, and provide an HTML template for the item’s content. This enables the creation of tailored toolbar controls to enhance your editor’s functionality according to your application’s needs.
   * @param {any} itemName. The toolbar item to be added
   */
  addToolbarItem(itemName: any): void;
  /**
   * Applies a blur effect to the content area of the Editor, visually obscuring text and elements to reduce readability while maintaining overall layout and structure. This feature is useful for masking sensitive information or creating a focus effect within the Editor interface.
   */
  blur(): void;
  /**
   * Removes all text and formatting from the Editor, resetting its content to an empty state.
   */
  clearContent(): void;
  /**
   * Collapse the toolbar when the <b>toolbarViewMode</b> property is set to <code>'toggle'</code>. This ensures that the toolbar is hidden or shown based on the toggle state, allowing for a dynamic and responsive user interface.
   */
  collapseToolbar(): void;
  /**
   * Prevents user interaction with the specified Toolbar item, making it inactive and visually indicating that it is disabled. The item remains visible but cannot be clicked or selected until re-enabled.
   * @param {string} itemName. The name of the toolbar item to disable.
   */
  disableToolbarItem(itemName: string): void;
  /**
   * Expands the Toolbar only when the <b>toolbarViewMode</b> property is set to <code>'toggle'</code>. When this mode is active, the Toolbar will automatically display its full set of options and controls as specified. If <b>toolbarViewMode</b> is set to another value, this expansion behavior will not occur.
   */
  expandToolbar(): void;
  /**
   * Restores the functionality of a Toolbar item that was previously disabled, allowing users to click or interact with it again. This action visually updates the item to indicate it is active and accessible within the Toolbar interface.
   * @param {string} itemName. The name of the toolbar item to enable.
   */
  enableToolbarItem(itemName: string): void;
  /**
   * Enhances the clarity, consistency, and completeness of the description:<br/><br/>---<br/><br/>Executes a command using the native <b>execCommand</b> method to modify the contents or formatting of the editor. This method returns <b>true</b> if the command executes successfully or <b>false</b> otherwise. You can use this function to apply a wide range of editing and formatting commands to the currently selected content, or at the current cursor position.<br/><br/>Supported commands include:<br/><br/><ul><br/>  <li><br/>    <b>bold</b>: Toggles bold formatting on the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('bold');</code><br/>  </li><br/>  <li><br/>    <b>italic</b>: Toggles italic formatting on the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('italic');</code><br/>  </li><br/>  <li><br/>    <b>underline</b>: Toggles underline formatting on the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('underline');</code><br/>  </li><br/>  <li><br/>    <b>strikeThrough</b>: Toggles strikethrough formatting on the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('strikeThrough');</code><br/>  </li><br/>  <li><br/>    <b>superscript</b>: Sets the selected text as superscript.<br><br/>    <b>Example:</b> <code>editor.executeCommand('superscript');</code><br/>  </li><br/>  <li><br/>    <b>subscript</b>: Sets the selected text as subscript.<br><br/>    <b>Example:</b> <code>editor.executeCommand('subscript');</code><br/>  </li><br/>  <li><br/>    <b>uppercase</b>: Converts the selected text to uppercase.<br><br/>    <b>Example:</b> <code>editor.executeCommand('uppercase');</code><br/>  </li><br/>  <li><br/>    <b>lowercase</b>: Converts the selected text to lowercase.<br><br/>    <b>Example:</b> <code>editor.executeCommand('lowercase');</code><br/>  </li><br/>  <li><br/>    <b>foreColor</b>: Changes the font color of the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('foreColor', '#000000');</code><br/>  </li><br/>  <li><br/>    <b>fontName</b>: Changes the font family of the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('fontName', 'Arial');</code><br/>  </li><br/>  <li><br/>    <b>fontSize</b>: Changes the font size of the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('fontSize', '15px');</code><br/>  </li><br/>  <li><br/>    <b>hiliteColor</b>: Changes the background color (highlight) of the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('hiliteColor', '#FFFF00');</code><br/>  </li><br/>  <li><br/>    <b>justifyCenter</b>: Aligns the selected content to the center.<br><br/>    <b>Example:</b> <code>editor.executeCommand('justifyCenter');</code><br/>  </li><br/>  <li><br/>    <b>justifyFull</b>: Justifies the selected content.<br><br/>    <b>Example:</b> <code>editor.executeCommand('justifyFull');</code><br/>  </li><br/>  <li><br/>    <b>justifyLeft</b>: Aligns the selected content to the left.<br><br/>    <b>Example:</b> <code>editor.executeCommand('justifyLeft');</code><br/>  </li><br/>  <li><br/>    <b>justifyRight</b>: Aligns the selected content to the right.<br><br/>    <b>Example:</b> <code>editor.executeCommand('justifyRight');</code><br/>  </li><br/>  <li><br/>    <b>undo</b>: Undoes the last editing operation.<br><br/>    <b>Example:</b> <code>editor.executeCommand('undo');</code><br/>  </li><br/>  <li><br/>    <b>redo</b>: Redoes the previously undone operation.<br><br/>    <b>Example:</b> <code>editor.executeCommand('redo');</code><br/>  </li><br/>  <li><br/>    <b>createLink</b>: Inserts a hyperlink at the current selection. Accepts an object with <code>text</code>, <code>url</code>, and <code>title</code> properties.<br><br/>    <b>Example:</b> <code>editor.executeCommand('createLink', { text: 'Link', url: 'https://example.com', title: 'Example Link' });</code><br/>  </li><br/>  <li><br/>    <b>indent</b>: Increases the indent level of the selected content.<br><br/>    <b>Example:</b> <code>editor.executeCommand('indent');</code><br/>  </li><br/>  <li><br/>    <b>outdent</b>: Decreases the indent level of the selected content.<br><br/>    <b>Example:</b> <code>editor.executeCommand('outdent');</code><br/>  </li><br/>  <li><br/>    <b>insertHTML</b>: Inserts an HTML string at the current cursor position.<br><br/>    <b>Example:</b> <code>editor.executeCommand('insertHTML', '&lt;p&gt;Text&lt;/p&gt;');</code><br/>  </li><br/>  <li><br/>    <b>insertOrderedList</b>: Inserts an ordered (numbered) list.<br><br/>    <b>Example:</b> <code>editor.executeCommand('insertOrderedList');</code><br/>  </li><br/>  <li><br/>    <b>insertUnorderedList</b>: Inserts an unordered (bulleted) list.<br><br/>    <b>Example:</b> <code>editor.executeCommand('insertUnorderedList');</code><br/>  </li><br/>  <li><br/>    <b>removeFormat</b>: Removes all formatting from the selected text.<br><br/>    <b>Example:</b> <code>editor.executeCommand('removeFormat');</code><br/>  </li><br/>  <li><br/>    <b>insertText</b>: Inserts plain text at the current cursor position.<br><br/>    <b>Example:</b> <code>editor.executeCommand('insertText', 'Some text to insert');</code><br/>  </li><br/>  <li><br/>    <b>insertImage</b>: Inserts an image at the current cursor position. Accepts an object with a <code>url</code> property.<br><br/>    <b>Example:</b> <code>editor.executeCommand('insertImage', { url: 'https://www.example.com/image.jpg' });</code><br/>  </li><br/></ul><br/><br/><b>Note:</b> Some commands may not be fully supported in all browsers due to the deprecated status of <code>execCommand</code>. Always test your implementation for compatibility with your target browsers.
   * @param {string} commandName. The name of the command to execute.
   * @param {string | number} value?. The value for the command. Some commands require a value to be passed, others do not.
   * @returns {boolean}
   */
  executeCommand(commandName: string, value?: string | number): boolean;
  /**
   * Sets the input focus to the Editor component, enabling users to interact with and edit its content directly (e.g., by typing or using keyboard shortcuts). This action ensures that keyboard events and commands are directed to the Editor.
   */
  focus(): void;
  /**
   * Returns the total number of characters currently present within the Editor's content, including spaces and special characters.
   * @returns {number}
   */
  getCharCount(): number;
  /**
   * Returns the current selection range within the editor. By default, this method returns an object of type Range, which represents the start and end positions of the selection as DOM nodes and offsets. However, if the <b>editMode</b> property is set to 'markdown', the method instead returns a plain object containing the numerical start and end indexes of the selection within the raw text content. This allows for consistent selection handling in both WYSIWYG and markdown editing modes.
   * @returns {any}
   */
  getSelectionRange(): any;
  /**
   * Returns the current content of the Editor as an HTML string. If <b>editMode</b> is set to 'markdown', the raw Markdown input is automatically parsed and converted to HTML before being returned. In all modes, the result is a well-formed HTML representation of the Editor's content, suitable for rendering in web pages or for further processing.
   * @returns {string}
   */
  getHTML(): string;
  /**
   * Returns the current contents of the Editor component as a plain text string, excluding any formatting or markup. This allows you to retrieve only the raw textual data entered by the user.
   * @returns {string}
   */
  getText(): string;
  /**
   * Conceals a specified message when an identifier is provided; if no identifier is given, all messages will be hidden.
   * @param {HTMLElement | string | number} item?. Hides a specific message. The argument can be a DOM reference to a specific item, it's index or it's id. If the argument is not provided then all messages will be closed.
   */
  hideMessage(item?: HTMLElement | string | number): void;
  /**
   * Conceals or removes the most recently displayed message from view on the user interface, ensuring it is no longer visible to the user.
   */
  hideLastMessage(): void;
  /**
   * Inserts a new custom Toolbar item into the editor.  <br/>For example, you can add a button with the following code:<br/>```javascript<br/>editor.insertToolbarItem({<br/>  name: 'customButton2',                    // Unique identifier for the toolbar item<br/>  width: 100,                               // Specifies the width of the toolbar item in pixels<br/>  template: '<smart-button>Button2</smart-button>' // The HTML template that defines the toolbar item's appearance and functionality<br/>});<br/>```<br/>This method allows you to extend the editor’s toolbar by specifying a unique name for the item, its display width, and a custom HTML template, such as a button or other UI component. This makes it easy to add interactive or specialized controls directly to your editor's toolbar.
   * @param {any} itemName. The toolbar item to be added
   * @param {number} index. The toolbar item's index
   */
  insertToolbarItem(itemName: any, index: number): void;
  /**
   * Displays a customizable message within the Editor interface, allowing users to present important information, instructions, or notifications directly inside the editing environment.
   * @param {string} message. The text message to be displayed.
   * @param {any} settings?. Additional settings that can be applied to the Toast element that handles the messages. This parameter should contain only valid Toast properties and values.
   * @returns {HTMLElement | undefined}
   */
  showMessage(message: string, settings?: any): HTMLElement | undefined;
  /**
   * Highlights and selects all text currently displayed within the Editor's content area, allowing users to easily copy, cut, or replace the selected text.
   */
  selectAll(): void;
  /**
   * Enhancement:<br/><br/>"Selects a specified range of text within the Editor based on provided start and end indexes. This method locates the DOM nodes containing the targeted text and creates selection ranges accordingly. Note that only Firefox currently supports selecting multiple, non-contiguous ranges; in other browsers, only the first corresponding node or range will be selected. If the editor is operating in 'html' <b>editMode</b>, the entire content is treated as a single node. As a result, the desired text range will be reliably selected across all browsers in this mode."
   * @param {number} startIndex. The start index to select from.
   * @param {number} endIndex. The end index to select to.
   */
  selectRange(startIndex: number, endIndex: number): void;
  /**
   * Removes all previously saved states associated with the current Editor's ID from the local storage. This ensures that any stored data related to this specific Editor instance is deleted, allowing for a fresh start or preventing data conflicts.
   */
  clearState(): void;
  /**
   * Persists the Editor’s current state to the browser’s local storage, allowing users to restore their work in future sessions. Note: An id property must be assigned to the Editor instance to uniquely identify and manage its saved data.
   */
  saveState(): void;
  /**
   * Restores the most recently saved state of the Editor from the browser’s local storage. To identify and retrieve the correct data, an id property must be assigned to the Editor instance. If no saved state exists for the specified id, the Editor will load with its default settings.
   */
  loadState(): void;
  /**
   * Enables Split Mode in the Editor. When Split Mode is active, both the HTML/Markdown editing panel and the Source Code/Preview panel are displayed side by side, allowing users to simultaneously view and edit the content along with its rendered output or source code. This mode enhances workflow by providing real-time feedback and easier navigation between editing and previewing.
   * @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
   */
  splitMode(value?: boolean): void;
  /**
   * Switches the Editor between Source Code and Preview modes. When activated, this mode displays the HTML view panel, allowing users to directly edit or review the underlying HTML code.
   * @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
   */
  previewMode(value?: boolean): void;
  /**
   * Removes a specified item from the Toolbar by its index.  <br/>For example, editor.removeToolbarItem(0) will remove the first item in the Toolbar.  <br/>Use this method to dynamically update the Toolbar based on user interaction or application state.
   * @param {number} index. The toolbar item's index
   */
  removeToolbarItem(index: number): void;
  /**
   * Enables Full Screen Mode for the Editor. When activated, the Editor expands to cover the entire viewport, overlaying all other page content and providing a distraction-free editing environment.
   * @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
   */
  fullScreenMode(value?: boolean): void;
  /**
   * Exports the content of the Editor in your chosen format. Currently supported export formats include HTML, Markdown, and PDF. This allows you to save or share your work in the format that best suits your needs.
   * @param {string} dataFormat. The expected file format.
   * @param {any} callback?. A callback that is executed before the data is exported. Allows to modify the output.
   */
  exportData(dataFormat: string, callback?: any): void;
  /**
   * Allows users to import the contents of a file directly into the Editor. Currently, only plain text (.txt) and HTML (.html) file formats are supported. Upon import, the file’s contents will be automatically loaded and displayed within the Editor for further editing or review.
   * @param {any} source. The url to the file or an object that defines settings for the Ajax request like url, timeput, etc. Object format: { url: string, type: string, data: object, timeout: number }
   * @param {any} settings?. Additional settings for the ajax request. Such as loadError function, contentType, etc. Format: { contentType: string, beforeSend: Function, loadError: Function, beforeLoadComplete: Function  }
   */
  importData(source: any, settings?: any): void;
  /**
   * Opens the browser’s Print Preview dialog, allowing users to view and print the current content displayed within the Editor. This feature provides a formatted preview of the Editor's contents as they will appear on the printed page before finalizing the print command.
   */
  print(): void;
  /**
   * Enables the modification of settings for a specified toolbar item. This method returns <b>true</b> if the update is applied successfully, indicating the toolbar item's settings were changed as requested. If the update fails, the method returns <b>false</b>.
   * @param {string | number} name. The name of the toolbar item or it's index inside the <b>toolbarItems</b> array.
   * @param {any} settings. A settings object for the toolbar item. It should have the same definition as when defining a custom toolbar item. You can read more about it in the dedicated topic for the Editor Toolbar on the website.
   * @returns {boolean | undefined}
   */
  updateToolbarItem(name: string | number, settings: any): boolean | undefined;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

/**An object that defines configuration settings for integrating AI capabilities within the grid, including options for enabling AI features, specifying AI service endpoints, adjusting model parameters, and customizing AI-driven functionality in the grid interface. */
export interface EditorAi {
  /**
   * The AI model used for text generation or other AI-powered features.
   * Default value: "gpt-3.5-turbo"
   */
  model?: string;
  /**
   * The maximum number of tokens (words/characters) the AI can generate in a single request
   * Default value: 200
   */
  maxTokens?: number;
  /**
   * Controls the randomness of AI output. Lower values produce more focused results; higher values are more creative.
   * Default value: 0.7
   */
  temperature?: number;
  /**
   * The endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.
   * Default value: ""
   */
  url?: string;
  /**
   * The API key used to authenticate requests to the AI provider.
   * Default value: ""
   */
  key?: string;
}

/**Specifies the configuration for content filtering, allowing you to define which types of content are allowed or blocked according to the selected criteria or rules. */
export interface EditorContentFiltering {
  /**
   * Determines which element attributes to filter.
   * Default value: null
   */
  attributes?: string[];
  /**
   * Determines whether to allow (whiteList) or remove (blackList) the specified attributes.
   * Default value: blackList
   */
  attributeFilterMode?: EditorContentFilteringAttributeFilterMode | string;
  /**
   * Determines which element tags to filter.
   * Default value: null
   */
  tags?: string[];
  /**
   * Determines whether to allow (whiteList) or remove (blackList) the specified tags.
   * Default value: blackList
   */
  tagFilterMode?: EditorContentFilteringTagFilterMode | string;
  /**
   * Determines which style attributes to filter.
   * Default value: null
   */
  styleAttributes?: string[];
  /**
   * Determines whether to allow (whiteList) or remove (blackList) the specified style attributes.
   * Default value: blackList
   */
  styleAttributeFilterMode?: EditorContentFilteringStyleAttributeFilterMode | string;
}

/**Configures the available options for exporting data from the Editor, such as file formats (CSV, JSON, XML), export settings, and customization preferences. These settings determine how users can save or export content from the Editor. */
export interface EditorDataExport {
  /**
   * Sets a custom style object of the dataExport. 
   * Default value: null
   */
  style?: any;
  /**
   * Sets the exported file's name.
   * Default value: "jqxScheduler"
   */
  fileName?: string;
  /**
   * Sets the page orientation, when exporting to PDF.
   * Default value: "portrait"
   */
  pageOrientation?: string;
}

/**Specifies the iframe configuration for the Editor. When enabled, the Editor's content is rendered within an isolated iframe, ensuring separation from the main DOM and preventing style or script conflicts. This option enhances content security and encapsulation. Additionally, it provides a mechanism to inject external resources (such as stylesheets or scripts) directly into the iframe environment if required. */
export interface EditorIframeSettings {
  /**
   * Determines the attributes and their values that will be set to the iframe. Here's how to define attributes: attributes: { height: 500 }
   * Default value: null
   */
  attributes?: any;
  /**
   * Enables/Disables the usage of an iframe for the content of the Editor.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Determines the resources like scripts/styles that will be imported into the iframe. Here's how to define resources: resources: { 'style': { href: 'styles.css' }, 'script': { src: 'index.js', type: 'module' }} 
   * Default value: "portrait"
   */
  resources?: string;
}

export interface ToolbarItem {
  /**
   * The unique name of the toolbar item. The list of all possible names is available in the description above.
   * Default value: 
   */
  name?: string | null;
  /**
   * Determines whethet the item is disabled or not.
   * Default value: false
   */
  disabled?: boolean | null;
  /**
   * Applicable only to item 'paste'. Transforms the type of the Paste toolbar item to drop down list with paste format options.
   * Default value: false
   */
  advanced?: boolean | null;
  /**
   * Allows to set a different dataSource for the toolbar items of type 'drop-down' or 'color-input.
   * Default value: 
   */
  dataSource?: any;
  /**
   * Defines the list of toolbar items for the Inline Toolbar. Accept the same values as toolbarItems property.
   * Default value: 
   */
  inlineToolbarItems?: any;
  /**
   * Allows to set predefined values for the Dialog Window of the following toolbar items: 'table', 'image', 'video', 'hyperlink'.
   * Default value: [object Object]
   */
  editor?: ToolbarItemEditor;
  /**
   * Allows to set a template for a custom Toolbar item when the name attribute is set to 'custom'.
   * Default value: null
   */
  template?: any;
  /**
   * Determines the width of the toolbar item.
   * Default value: 
   */
  width?: number | string | null;
}

/**Allows to set predefined values for the Dialog Window of the following toolbar items: 'table', 'image', 'video', 'hyperlink'. */
export interface ToolbarItemEditor {
  /**
   * Allows to preset the value for the hyperlink address field in the Dialog Window.
   * Default value: 
   */
  address?: string | null;
  /**
   * Allows to preset the value for the hyperlink target field in the Dialog Window.
   * Default value: 
   */
  target?: string | null;
  /**
   * Allows to preset the value for the hyperlink text field in the Dialog Window.
   * Default value: 
   */
  text?: string | null;
  /**
   * Allows to preset the value for the hyperlink/image title field in the Dialog Window.
   * Default value: 
   */
  title?: string | null;
  /**
   * Allows to preset the value for the image/video file uploader in the Dialog Window.
   * Default value: null
   */
  file?: any;
  /**
   * Allows to preset the value for the image/video alt field in the Dialog Window.
   * Default value: 
   */
  alt?: string | null;
  /**
   * Allows to preset the value for the image/video url field in the Dialog Window.
   * Default value: 
   */
  url?: string | null;
  /**
   * Allows to preset the value for the image/table/video width field in the Dialog Window.
   * Default value: 
   */
  width?: string | number;
  /**
   * Allows to preset the value for the image/table/video height field in the Dialog Window.
   * Default value: 
   */
  height?: string | number;
  /**
   * Allows to preset the value for the image/video caption field in the Dialog Window.
   * Default value: 
   */
  caption?: string | null;
  /**
   * Allows to preset the value for the image/video alignment field in the Dialog Window.
   * Default value: 
   */
  alignment?: string | null;
  /**
   * Allows to preset the value for the image/video display field in the Dialog Window.
   * Default value: 
   */
  display?: string | null;
  /**
   * Allows to preset the value for the image draggable field in the Dialog Window.
   * Default value: false
   */
  draggable?: boolean | null;
  /**
   * Allows to preset the value for the image/table/video resizable field in the Dialog Window.
   * Default value: false
   */
  resizable?: boolean | null;
  /**
   * Allows to preset the value for the table cols field in the Dialog Window.
   * Default value: 
   */
  cols?: number | string | null;
  /**
   * Allows to preset the value for the table rows field in the Dialog Window.
   * Default value: 
   */
  rows?: number | string | null;
  /**
   * Allows to preset the value for the table header field in the Dialog Window.
   * Default value: false
   */
  tableheader?: boolean | null;
  /**
   * Allows to preset the value for the table altrows field in the Dialog Window.
   * Default value: false
   */
  altrows?: boolean | null;
  /**
   * Allows to preset the value for the table dashedborders field in the Dialog Window.
   * Default value: false
   */
  dashedborders?: boolean | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-editor"): Editor;
        querySelector(selectors: "smart-editor"): Editor | null;
        querySelectorAll(selectors: "smart-editor"): NodeListOf<Editor>;
        getElementsByTagName(qualifiedName: "smart-editor"): HTMLCollectionOf<Editor>;
        getElementsByName(elementName: "smart-editor"): NodeListOf<Editor>;
    }
}

/**Determines whether to allow (whiteList) or remove (blackList) the specified attributes. */
export declare type EditorContentFilteringAttributeFilterMode = 'blackList' | 'whiteList';
/**Determines whether to allow (whiteList) or remove (blackList) the specified tags. */
export declare type EditorContentFilteringTagFilterMode = 'blackList' | 'whiteList';
/**Determines whether to allow (whiteList) or remove (blackList) the specified style attributes. */
export declare type EditorContentFilteringStyleAttributeFilterMode = 'blackList' | 'whiteList';
/**Specifies the items and structure of the context menu that appears when a user right-clicks within the Editor's content area. This setting allows you to customize which menu options are available based on the user's actions, providing tailored functionality and quick access to relevant commands. */
export declare type EditorContextMenu = 'default' | 'browser' | 'none';
/**Specifies the editing mode for the Editor component. By default, the Editor operates in standard HTML mode, allowing users to input and edit HTML content directly. In this mode, pressing Enter inserts line breaks or new paragraphs according to standard HTML behavior. <br/><br/>When set to 'blockHtml', the Editor creates new DIV elements each time the user presses Enter, promoting a block-based editing experience. This mode also provides built-in commands tailored for structured data entry and manipulation.<br/><br/>If set to 'markdown', the Editor functions as a dedicated Markdown editor. User input is interpreted as Markdown syntax, and the Editor automatically parses and converts the Markdown content into HTML for real-time preview. This enables a seamless writing and formatting workflow for users who prefer Markdown.<br/><br/>Possible values:<br/>- 'html' (default): Accepts and parses HTML input.<br/>- 'blockHtml': Uses DIV tags for new blocks and offers additional commands for data input.<br/>- 'markdown': Enables Markdown syntax input with live HTML preview. */
export declare type EditMode = 'html' | 'markdown' | 'blockHtml';
/**Specifies the file format for images or videos uploaded from local storage. By default, uploaded files are encoded and stored as base64 strings. This setting allows you to define or change the storage format as needed. */
export declare type EditorImageFormat = 'base64' | 'blob';
/**Specifies the format (such as plain text, HTML, or Markdown) in which content will be inserted into the Editor when a user pastes data, ensuring consistent formatting and correct rendering within the editing environment. */
export declare type PasteFormat = 'prompt' | 'plainText' | 'keepFormat' | 'cleanFormat';
/**Specifies the display style of the Editor’s main toolbar. You can choose between "Ribbon" mode, which presents the toolbar as a horizontal panel with grouped command icons similar to modern office applications, or "Menu" mode, which organizes commands in drop-down menus for a more compact, traditional interface. This setting controls how users interact with the Editor’s primary tools and functions. */
export declare type ToolbarMode = 'menu' | 'singleLineRibbon';
/**Specifies the format (such as plain text, HTML, or Markdown) that will be applied to content when it is pasted into the Editor. This setting controls how the pasted data is interpreted and ensures that it is correctly displayed within the Editor environment. */
export declare type ToolbarViewMode = 'toggle' | 'multiRow' | 'scroll';
export interface ElementProperties {
  /**
   * Configures or retrieves the current animation mode for the element. When set to 'none', all animations are disabled, resulting in immediate changes without transition effects. Otherwise, valid values enable corresponding animation behaviors during state changes.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Determines whether the accordion component is enabled or disabled. When set to disabled, all interactive elements within the accordion are inactive, preventing user interaction such as expanding or collapsing sections. Disabled sections appear visually distinct to indicate their non-interactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Returns true if the rendering process has successfully completed; otherwise, returns false, indicating that rendering is still in progress or has not started.
   * Default value: false
   */
  isRendered?: boolean;
  /**
   * Sets or retrieves the unlockKey value, a unique identifier or code required to unlock access to the product. This property is used to control and verify access permissions for the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language used for message localization. This property works together with the messages property, allowing you to display content in the selected language by loading the appropriate message translations.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module before they are delivered to the user. Use this to apply additional formatting, integrate dynamic content, or adjust message structure based on application requirements.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing all the display strings within the widget that can be localized for different languages. This property works together with the locale property to enable internationalization by allowing you to specify custom strings that will be shown to users based on their selected language or region. Use this option to provide translations or override default interface text in the widget.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "accordionItemRequired": "' requires an item from type \"jqx-accordion-item\".",
   *     "indexOutOfBound": "' method.",
   *     "invalidSettings": "' method accepts a string or an object as it's second parameter.",
   *     "noItems": ": No child elements found.",
   *     "overridingProperties": "' property is used by default."
   *   }
   * }
   */
  messages?: any;
  /**
   * Callback function that is executed when the element has been successfully added and attached to the DOM tree. This is typically used to perform setup tasks, initialize event listeners, or trigger actions that require the element to be present in the document.
   * Default value: null
   */
  onAttached?: any;
  /**
   * This callback function is invoked when the element is removed from the DOM, allowing you to handle cleanup operations or perform specific actions in response to the element’s detachment.
   * Default value: null
   */
  onDetached?: any;
  /**
   * Callback function that is invoked after the element has been successfully created and initialized. This allows you to perform custom actions or setup immediately upon the element's creation.
   * Default value: null
   */
  onCreated?: any;
  /**
   * This callback is invoked once, when the element is first added to the DOM. It is an ideal place to perform initial setup tasks, such as initializing properties, setting up event listeners, or rendering initial content.
   * Default value: null
   */
  onReady?: any;
  /**
   * Callback function invoked immediately after the element has been rendered to the DOM. This allows you to perform additional logic or side effects once the rendering is complete.
   * Default value: null
   */
  onRender?: any;
  /**
   * Specifies whether the element is read-only. When set to true, the element cannot be modified or interacted with by users—its value cannot be changed, and input events are disabled. When set to false, the element is fully interactive and users can input or edit its content.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies if the element is displayed automatically upon initialization, or if it requires an explicit call to the render method before it appears in the user interface.
   * Default value: auto
   */
  renderMode?: ElementRenderMode | string;
  /**
   * Specifies or retrieves whether the element's text direction and alignment are set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content is displayed in a manner consistent with RTL language conventions.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied, which controls the visual appearance and style of the element, including aspects such as colors, fonts, and overall layout.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies whether the element is eligible to receive keyboard focus, allowing users to navigate to it using the Tab key or other keyboard interactions. Setting this property controls if the element can become the active element when focusing.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 BaseElement extending the HTMLElement with localization, on-demand rendering, typed properties, two-way bound properties, property change notifications, lifecycle callbacks, automatic events listen and unlisten.
*/

declare global {
	interface Window {
		Smart: any;
		NG: any;
	}
}

export interface BaseElement extends HTMLElement, ElementProperties {
  /**
   * This event is triggered whenever the dimensions (width or height) of the element change, allowing you to execute custom logic in response to the element being resized. It is useful for implementing responsive layouts or updating content dynamically based on the element's new size.
	* @param event. The custom event.    */
  onResize: ((ev: Event) => any) | null;
  /**
   * This event is triggered whenever a style property that influences the element's layout (such as width, height, margin, padding, or position) is modified. It allows developers to respond whenever layout-related CSS changes occur on the element.
	* @param event. The custom event. Custom data event was created with: ev.detail(styleProperties)
   *  styleProperties - Array with changed style properties.
   */
  onStyleChanged?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Stops monitoring the specified element for changes or events. After calling this function, any previously set watchers or observers for the element will be removed, and no further updates or callbacks will be triggered in response to changes involving this element.
   */
  unwatch(): void;
  /**
   * Displays the specified element on the page by generating its associated HTML and inserting it into the Document Object Model (DOM). This process ensures the element is visible and interactive for users.
   */
  render(): void;
  /**
   * Monitor and detect any changes to property values in real time, enabling responsive updates or triggering specific actions whenever a property's state is modified.
   * @param {any[]} properties. Properties array to watch for changes.
   * @param {any} propertyChangedCallback. function(propertyName: string, oldValue: any, newValue: any)
   */
  watch(properties: any[], propertyChangedCallback: any): void;
  /**
   * Invokes the specified callback function once the rendering process has finished, allowing you to execute additional logic immediately after rendering is complete.
   * @param {any} renderCallback. Callback which is called, when the rendering is completed.
   */
  whenRendered(renderCallback: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-element"): Element;
        querySelector(selectors: "smart-element"): Element | null;
        querySelectorAll(selectors: "smart-element"): NodeListOf<Element>;
        getElementsByTagName(qualifiedName: "smart-element"): HTMLCollectionOf<Element>;
        getElementsByName(elementName: "smart-element"): NodeListOf<Element>;
    }
}

/**Specifies if the element is displayed automatically upon initialization, or if it requires an explicit call to the render method before it appears in the user interface. */
export declare type ElementRenderMode = 'auto' | 'manual';
export interface FileUploadProperties {
  /**
   * Defines the file types that are allowed for upload by specifying accepted MIME types or file extensions. This property maps directly to the HTML accept attribute on the hidden file input element, which determines which files users can select in the file dialog. These files are then uploaded to the server endpoint specified in the uploadUrl property. Setting this property ensures that only files matching the specified types can be chosen and submitted.
   * Default value: null
   */
  accept?: string | null;
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled and transitions will not be applied. Use this property to control whether animations are enabled or disabled within the component or element.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Appends the selected files list to a custom container specified by the user. If the property value is a string, it must correspond to the ID of an existing HTML element in the DOM. This element will serve as the new container where the uploaded files list will be rendered. If the provided ID does not match any element in the DOM, the operation will not proceed. This allows developers to control exactly where the files list appears in the application's interface.
   * Default value: "null"
   */
  appendTo?: string;
  /**
   * Determines whether files are automatically uploaded immediately after they are selected by the user. When set to true, the upload process begins as soon as files are chosen; when false, uploading must be triggered manually.
   * Default value: false
   */
  autoUpload?: boolean;
  /**
   * Enables users to upload an entire directory at once, including all files contained within any nested subfolders. When this option is selected, the upload process will automatically include every file from the selected directory and its subdirectories. Note: This feature is currently supported only in Firefox and Chrome browsers.
   * Default value: false
   */
  directory?: boolean;
  /**
   * Controls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element appears inactive and does not respond to user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies a custom container element to serve as the drop zone for file uploads. When files are dropped onto this container, they will be added to the fileUpload component’s file list. If the 'dropZone' property is set to true, the component will use its internal default drop zone. If 'dropZone' is assigned the ID of an existing HTML element in the DOM, that particular element will be used as the drop zone area for file uploads instead. This allows for flexible placement and styling of the drop zone within your application.
   * Default value: null
   */
  dropZone?: any;
  /**
   * Conceals the entire footer section, including all of its contents—specifically the "Upload All," "Pause All," and "Close All" buttons—preventing users from accessing these actions.
   * Default value: false
   */
  hideFooter?: boolean;
  /**
   * Enhances the file item display by applying a custom template to each item in the uploaded files list. This allows you to define the appearance and layout of uploaded file entries, enabling features such as displaying file names, sizes, icons, previews, or custom actions within each file item.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Defines the unlockKey property, which is used to retrieve or assign the unique key required to unlock access to the product. Setting this key grants authorization for product usage, while getting it returns the current unlock key in use.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for displaying messages. This property works together with the messages property to select the appropriate set of localized text based on the chosen language code (e.g., "en", "fr", "es"). Use this property to dynamically change or access the language used in your application's user interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the format of messages returned by the Localization Module. Use this to modify how localized messages are structured or displayed before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Configures the text labels displayed in the widget interface, enabling support for localization and customization of user-facing messages. The localization object should contain the following fields: browse, pauseFile, cancelFile, uploadFile, pauseAll, cancelAll, and uploadAll—each representing the corresponding action's text label. For optimal results and proper display, set these localization messages before the widget element is initialized.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "browse": "Browse",
   *     "uploadFile": "Upload File",
   *     "cancelFile": "Cancel File",
   *     "pauseFile": "Pause File",
   *     "uploadAll": "Upload All",
   *     "cancelAll": "Cancel All",
   *     "pauseAll": "Pause All",
   *     "totalFiles": "Total files: ",
   *     "connectionError": ": File Upload requires connection to the server.",
   *     "wrongItemIndex": ": There is no file with such an index in the list of uploaded files.",
   *     "tooLongFileName": ": File name is too long."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies or retrieves whether users are permitted to select and upload multiple items simultaneously. When enabled, users can choose more than one file or item within the upload interface.
   * Default value: false
   */
  multiple?: boolean;
  /**
   * Gets or sets the name attribute of the hidden file input element. This name is used as the key in the form data when files are uploaded to the server via the URL specified in the uploadUrl property.
   * Default value: ""
   */
  name?: string;
  /**
   * When an element is set to readonly, users can view its content but cannot modify or edit it. However, unlike disabled elements, readonly elements remain focusable and their content can typically still be selected and copied. This property is commonly applied to input fields and textareas to prevent changes while allowing visibility and text selection.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * A callback function designed to process server responses, allowing you to handle successful results as well as different error codes and statuses returned from the server. This enables customized handling of success, failure, and edge-case scenarios based on the server’s response.
   * Default value: null
   */
  responseHandler?: any;
  /**
   * Sets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, which is commonly used for languages such as Arabic or Hebrew. When enabled, the element and its content are visually aligned to accommodate RTL locales, ensuring proper display and user interface behavior for RTL language users.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * A callback function that allows you to modify or set custom headers for the XMLHttpRequest (XHR) used during the file upload process. This function receives the XHR object as a parameter, enabling you to add, update, or remove HTTP headers before the request is sent.
   * Default value: null
   */
  setHeaders?: any;
  /**
   * Displays a visual progress bar at the bottom of each item being uploaded, providing real-time feedback on the upload status. The progress bar dynamically updates to reflect the current percentage of the upload completed for each individual item, allowing users to easily track the progress of their uploads.
   * Default value: false
   */
  showProgress?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the visual appearance—including colors, fonts, and overall style—ensuring that the element’s look is consistent with the desired design scheme.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies or retrieves the URL endpoint to which files will be uploaded. This property directly maps to the action attribute of the upload form. For instance, the uploadUrl property can be set to the path of a server-side script, such as a PHP, Node.js, or ASP.NET file, responsible for processing and handling the file upload operation on the server. Use this property to define where uploaded files should be sent for server-side handling.
   * Default value: ""
   */
  uploadUrl?: string;
  /**
   * If set to true, the element is not focusable and cannot receive keyboard or programmatic focus.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets or retrieves the URL endpoint used for the remove operation. This property corresponds to the form's action attribute and determines where the form data is submitted when a remove action is triggered. For example, the removeUrl property can be set to the path of a server-side script, such as a PHP file, which processes and handles the remove request on the backend.
   * Default value: ""
   */
  removeUrl?: string;
  /**
   * Retrieves the value of the uploaded file, such as the file’s name, path, size, or content, depending on the context and configuration of the file upload input. This function allows access to the selected file’s details for further processing, validation, or storage.
   * Default value: null
   */
  value?: any;
  /**
   * Callback invoked immediately after files are selected to perform validation. Should return a boolean value: if true, the file is accepted; if false, the file is removed from the selection list and a 'validationError' event is triggered.
   * Default value: null
   */
  validateFile?: any;
}
/**
 FileUpload provides an easy and integrated way for users to upload multiple files.
*/
export interface FileUpload extends BaseElement, FileUploadProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a user selects a file, such as through a file input element. It occurs immediately after the file selection is made and can be used to handle or validate the chosen file(s) before further processing, such as uploading or previewing them.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index)
   *  filename - The name of the selected file.
   *  type - The type of the selected file.
   *  size - The size of the selected file.
   *  index - The index of the selected file.
   */
  onFileSelected?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user actively cancels an ongoing file upload process. It indicates that the file transfer has been intentionally terminated before completion, either by user action or programmatic intervention.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index)
   *  filename - The name of the canceled file.
   *  type - The type of the canceled file.
   *  size - The size of the canceled file.
   *  index - The index of the canceled file.
   */
  onUploadCanceled?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a file upload process has finished, indicating that the file has been successfully transmitted to the server or the upload has reached its final state (either success or failure). It can be used to execute follow-up actions, such as displaying a confirmation message, updating the user interface, or processing the uploaded file, once the upload operation is complete.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index, status, serverResponse)
   *  filename - The name of the canceled file.
   *  type - The type of the canceled file.
   *  size - The size of the canceled file.
   *  index - The index of the canceled file.
   *  status - The status of the uploaded file. Whether there was an error or success.
   *  serverResponse - The response of the remote server.
   */
  onUploadCompleted?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered if an error occurs during the file upload process, causing the upload to fail. It provides information about the failure, allowing you to implement custom error handling or user notifications when a file cannot be successfully uploaded.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index, status)
   *  filename - The name of the canceled file.
   *  type - The type of the canceled file.
   *  size - The size of the canceled file.
   *  index - The index of the canceled file.
   *  status - The status of the uploaded file. Whether there was an error or success.
   */
  onUploadError?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when an ongoing file upload process is temporarily halted by the user or application. It indicates that the upload is not complete and may be resumed or canceled at a later time. Event listeners can use this event to update the user interface, save upload progress, or handle other logic related to the paused upload state.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index)
   *  filename - The name of the paused file.
   *  type - The type of the paused file.
   *  size - The size of the paused file.
   *  index - The index of the paused file.
   */
  onUploadPaused?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a file upload process initiates, signaling that the uploading of one or more files has begun. It can be used to perform preparatory actions such as updating the user interface, initializing progress indicators, or logging the start of the file transfer.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index)
   *  filename - The name of the file that is being uploaded.
   *  type - The type of the file that is being uploaded.
   *  size - The size of the file that is being uploaded.
   *  index - The index of the file that is being uploaded.
   */
  onUploadStarted?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user-defined 'validateFile' callback function returns a failure result, indicating that the provided file did not meet the specified validation criteria.
	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size)
   *  filename - The name of the file which validation has failed.
   *  type - The type of the file which validation has failed.
   *  size - The size of the file which validation has failed.
   */
  onValidationError?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Displays a popup dialog that allows the user to browse their local device and select a file to upload or process.
   */
  browse(): void;
  /**
   * Cancels all currently selected files. This action removes the files from the selection list and ensures that they are not uploaded. Any ongoing or pending uploads for these files are also stopped, preventing them from being transferred to the server.
   */
  cancelAll(): void;
  /**
   * Cancels the specified file's upload process. This action immediately removes the file from the file list and prevents it from being uploaded or processed any further.
   * @param {number} index. Index of the file which will be canceled.
   */
  cancelFile(index: number): void;
  /**
   * Pauses the upload process for all files, temporarily halting any active uploads. While uploads are paused and new uploads cannot be started, the files themselves remain visible and accessible in the file list. No files are removed or lost during this pause; uploading can be resumed at a later time.
   */
  pauseAll(): void;
  /**
   * Pauses the upload process for the file at the specified index. The upload for this file is temporarily suspended, preventing any data transfer, but the file itself remains listed in the upload queue. This allows for the upload to be resumed or managed at a later time without removing the file from the list.
   * @param {number} id. Index of the file which will be paused.
   */
  pauseFile(id: number): void;
  /**
   * Uploads every file selected by the user to the server. Handles multiple files simultaneously and ensures each file is processed for upload.
   */
  uploadAll(): void;
  /**
   * Allows the user to select a file from their local device and upload it to the server for processing or storage.
   * @param {number} id. Index of the file which will be uploaded.
   */
  uploadFile(id: number): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-file-upload"): FileUpload;
        querySelector(selectors: "smart-file-upload"): FileUpload | null;
        querySelectorAll(selectors: "smart-file-upload"): NodeListOf<FileUpload>;
        getElementsByTagName(qualifiedName: "smart-file-upload"): HTMLCollectionOf<FileUpload>;
        getElementsByName(elementName: "smart-file-upload"): NodeListOf<FileUpload>;
    }
}

export interface FilterBuilderProperties {
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animation effects are disabled. Setting it to other supported values enables the corresponding animation behavior.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Enhances the set of available operations that can be used within the filter builder's condition structure, allowing for more flexible and complex filtering criteria.
   * Default value: 
   */
  customOperations?: {name: string, caption: string, icon: string}[];
  /**
   * Determines whether the context menu (typically accessed via right-click) is available to users. Setting this option to true allows users to open the context menu, while setting it to false disables the menu and prevents it from appearing.
   * Default value: false
   */
  disableContextMenu?: boolean;
  /**
   * Specifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When enabled, users can interact with the element; when disabled, the element appears visually inactive and cannot be interacted with.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * An array containing filtered field objects, where each object defines a specific field and its associated configuration settings. This includes details such as the field name, data type, validation rules, display properties, and any additional options relevant to how the field should be handled or presented.
   * Default value: null
   */
  fields?: any;
  /**
   * Specifies or retrieves the format string used by the editor for fields of type 'date'. This determines how date values are displayed and parsed within the editor, such as the order of day, month, and year.
   * Default value: "dd-MMM-yy"
   */
  formatStringDate?: string;
  /**
   * Sets or retrieves the format string used by the editor for fields of type 'datetime', specifying how date and time values are displayed and edited within the field. This determines the input and display format (e.g., 'YYYY-MM-DD HH:mm:ss') for users interacting with 'datetime' fields.
   * Default value: "dd-MMM-yy HH:mm:ss"
   */
  formatStringDateTime?: string;
  /**
   * Displays a helpful popup message as a tooltip or hint to guide the user when interacting with the form element.
   * Default value: "null"
   */
  hint?: string;
  /**
   * Specifies the icon's visual representation using character symbols (such as Unicode or font glyphs), allowing the icon to be displayed as a character within text elements.
   * Default value: { '=': '=', '<>': '<>', '>': '>', '>=': '>=', '<': '<', '<=': '<=', 'startswith': 'a|bc', 'endswith': 'ab|c', 'contains': 'abc', 'notcontains': '!abc', 'isblank': 'o', 'isnotblank': '*'}
   */
  icons?: FilterBuilderIcons;
  /**
   * Handles the retrieval or assignment of the unlockKey property, which serves as the authorization token required to activate and access the product’s full features. Setting this property provides the necessary key to unlock the product, while getting it returns the current unlock key value in use.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., 'en', 'es', 'fr') for the component. This property works together with the messages property to determine which set of localized messages to display, enabling multilingual support. When setting the language, the corresponding messages are loaded automatically based on the selected language code.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle events or responses related to language translation, locale changes, or loading localized resources within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the maximum number of conditions that can be applied to this element. If the number of conditions exceeds this limit, additional conditions will not be accepted or processed.
   * Default value: null
   */
  maxConditions?: number | null;
  /**
   * Specifies the maximum number of conditions that can be included within a single group. This sets an upper limit to how many conditions are allowed in each group, ensuring that no group exceeds the defined threshold.
   * Default value: null
   */
  maxConditionsPerGroup?: number | null;
  /**
   * Specifies the highest number of nested grouping levels allowed within the FilterBuilder, setting a limit on how deeply filters can be grouped and combined.
   * Default value: null
   */
  maxLevel?: number | null;
  /**
   * Specifies the names of the fields within the element that has been filtered, allowing you to identify which attributes are included as part of the filtered results.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "addCondition": "Add Condition",
   *     "addGroup": "Add Group",
   *     "and": "And",
   *     "notand": "Not And",
   *     "or": "Or",
   *     "notor": "Not Or",
   *     "=": "Equals",
   *     "<>": "Does not equal",
   *     ">": "Greater than",
   *     ">=": "Greater than or equal to",
   *     "<": "Less than",
   *     "<=": "Less than or equal to",
   *     "startswith": "Starts with",
   *     "endswith": "Ends with",
   *     "contains": "Contains",
   *     "notcontains": "Does not contain",
   *     "isblank": "Is blank",
   *     "isnotblank": "Is not blank",
   *     "wrongParentGroupIndex": "' method.",
   *     "missingFields": ": Fields are required for proper condition's adding. Set \"fields\" source and then conditions will be added as expected.",
   *     "wrongElementNode": "' method.",
   *     "invalidDataStructure": ": Used invalid data structure in updateCondition/updateGroup method."
   *   }
   * }
   */
  messages?: any;
  /**
   * When an element has the "readonly" attribute, its value cannot be modified by the user; however, the element can still receive focus and its content can be selected or copied. Interactivity such as editing or input is disabled, but users may still interact with the element in non-editing ways.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * When 'restrictedMode' is set to 'true', users are prevented from adding new groups or editing existing groups through the user interface. This means all group management actions must be performed programmatically or by users with elevated permissions; standard user interactions for creating or modifying groups are disabled.
   * Default value: false
   */
  restrictedMode?: boolean;
  /**
   * Controls whether the icons are visible or hidden in the user interface. When enabled, icons are displayed; when disabled, icons are not shown.
   * Default value: false
   */
  showIcons?: boolean;
  /**
   * Specifies the theme to be applied, which controls the overall appearance and style of the element, including colors, fonts, and other visual properties.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning users cannot navigate to or interact with the element using the Tab key or other focus-related methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * The value is structured as a multidimensional array designed to represent complex logical conditions. Each element of the array is either a group operator (such as AND, OR, NOT) or a condition. Groups can themselves contain arrays of conditions and/or further groups, allowing for multiple levels of nesting. This hierarchical structure enables the representation of intricate, compound logic expressions through nested combinations of operators and conditions.
   * Default value: or
   */
  value?: string[];
  /**
   * A callback function that is invoked to customize the formatting of value field contents before they are displayed. This allows you to control how data is presented within the value fields by modifying the output as needed.
   * Default value: null
   */
  valueFormatFunction?: any;
  /**
   * Specifies the placeholder text that appears in the condition’s value input field when no value has been entered. This text provides guidance or an example to users about the expected input.
   * Default value: "&lt;enter a value&gt;"
   */
  valuePlaceholder?: string;
}
/**
 FilterBuilder allows you to dynamically build filters.
*/
export interface FilterBuilder extends BaseElement, FilterBuilderProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value of the element is modified by the user and then the element loses focus or the change is committed (for example, after pressing Enter). It allows you to detect and respond to updates made to the element's value.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever an editor instance is closed, either by user action or programmatically. It allows developers to perform cleanup tasks, save state, or update the user interface in response to the editor being closed.
	* @param event. The custom event.    */
  onEditorClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates the process of closing the editor, such as by clicking the close button or issuing a close command. It occurs before the editor is fully closed, allowing you to perform actions like prompting the user to save changes or cancelling the close operation if necessary.
	* @param event. The custom event.    */
  onEditorClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever an editor instance is initialized and opened, allowing you to perform custom actions or modifications immediately after the editor becomes available to the user.
	* @param event. The custom event.    */
  onEditorOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever an editor instance begins the process of opening, allowing you to execute custom logic or initialization tasks before the editor is fully loaded and ready for user interaction.
	* @param event. The custom event.    */
  onEditorOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on any of the building blocks within the filter builder component. Building blocks may include elements such as fields, operators, or value inputs that are used to construct filter conditions. Use this event to execute custom logic in response to user interactions with individual filter components.
	* @param event. The custom event.    */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the built-in menu is opened by the user—for example, when they right-click or perform the relevant action to invoke the context menu. Note that if the <strong>disableContextMenu</strong> property is set to <code>true</code>, this event will not be dispatched, effectively disabling the menu and its associated event trigger.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately when the built-in context menu begins to open. However, if the <strong>disableContextMenu</strong> property is set to <code>true</code>, the built-in menu is suppressed and this event will not be dispatched. Use this event to implement custom logic or UI changes in response to the opening of the default context menu, unless the menu has been explicitly disabled.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered each time the built-in menu is closed by the user. However, if the <strong>disableContextMenu</strong> property is set to <code>true</code>, the menu is never displayed, and this event will not be fired. Use this event to perform actions or cleanup tasks after the menu has been closed, unless the context menu has been disabled.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the built-in menu begins the process of closing. Note that if the <strong>disableContextMenu</strong> property is set to <code>true</code>, this event will not be fired. Use this event to perform actions or cleanup tasks as the menu is about to be dismissed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new condition to a specified group, enabling further customization or logic within that group's configuration.
   * @param {string | HTMLElement} parentGroup. A string, representing the id of the item or an HTML Element referencing this condition.
   * @param {any[]} data. An array, representing condition. Condition's element's role is related to their position in the condition's array. At index 0 - field name, index 1 - condition's opertor, index 2 - condition's value.
   */
  addCondition(parentGroup: string | HTMLElement, data: any[]): void;
  /**
   * Creates a new group within a specified parent group, establishing a hierarchical relationship between the new group and its designated parent.
   * @param {string | HTMLElement} parentGroup. A string, representing the id of the item or an HTML Element referencing this group.
   * @param {string} data. A string, representing the group operator.
   */
  addGroup(parentGroup: string | HTMLElement, data: string): void;
  /**
   * Removes the specified condition from the configuration or dataset, ensuring that any rules, filters, or logic associated with this condition are no longer applied. This operation helps update or simplify the criteria used within the system.
   * @param {string | HTMLElement} item. A string, representing the id of the item or an HTML Element referencing this condition.
   */
  removeCondition(item: string | HTMLElement): void;
  /**
   * Deletes the specified group along with all of its child elements recursively. This action is irreversible and will remove the group and all nested items associated with it from the system.
   * @param {string | HTMLElement} item. A string, representing the id of the item or an HTML Element referencing this group.
   */
  removeGroup(item: string | HTMLElement): void;
  /**
   * Returns a string that represents the current configuration or criteria defined in the filter builder. This output can be used for display, debugging, or serialization purposes, providing a readable summary of the filter builder’s selected fields, conditions, and values.
   * @param {boolean} useLabels?. Controls the way of string representation. In mode without labels the value object is stringified only.
   * @returns {string}
   */
  toString(useLabels?: boolean): string;
  /**
   * Updates the existing condition by modifying its properties based on the provided input. This typically involves validating the input data, locating the target condition, applying any changes, and saving the updated condition. Returns the modified condition upon successful completion.
   * @param {string | HTMLElement} item. A string, representing the id of the item or an HTML Element referencing targeted condition.
   * @param {any[]} data. An array, representing condition. Condition's element's role is related to their position in the condition's array. At index 0 - field name, index 1 - condition's opertor, index 2 - condition's value.
   */
  updateCondition(item: string | HTMLElement, data: any[]): void;
  /**
   * Updates the details of an existing group, such as its name, description, or membership settings. Use this endpoint to modify group information.
   * @param {string | HTMLElement} item. A string, representing the id of the item or an HTML Element referencing this group.
   * @param {string} data. A string, representing the group operator.
   */
  updateGroup(item: string | HTMLElement, data: string): void;
}

/**Specifies the icon's visual representation using character symbols (such as Unicode or font glyphs), allowing the icon to be displayed as a character within text elements. */
export interface FilterBuilderIcons {
  /**
   * 
   * Default value: undefined
   */
  0?: any;
  /**
   * 
   * Default value: undefined
   */
  1?: any;
  /**
   * 
   * Default value: undefined
   */
  2?: any;
  /**
   * 
   * Default value: undefined
   */
  3?: any;
  /**
   * 
   * Default value: undefined
   */
  4?: any;
  /**
   * 
   * Default value: undefined
   */
  5?: any;
  /**
   * 
   * Default value: undefined
   */
  6?: any;
  /**
   * 
   * Default value: undefined
   */
  7?: any;
  /**
   * 
   * Default value: undefined
   */
  8?: any;
  /**
   * 
   * Default value: undefined
   */
  9?: any;
  /**
   * 
   * Default value: undefined
   */
  10?: any;
  /**
   * 
   * Default value: undefined
   */
  11?: any;
  /**
   * 
   * Default value: undefined
   */
  12?: any;
  /**
   * 
   * Default value: undefined
   */
  13?: any;
  /**
   * 
   * Default value: undefined
   */
  14?: any;
  /**
   * 
   * Default value: undefined
   */
  15?: any;
  /**
   * 
   * Default value: undefined
   */
  16?: any;
  /**
   * 
   * Default value: undefined
   */
  17?: any;
  /**
   * 
   * Default value: undefined
   */
  18?: any;
  /**
   * 
   * Default value: undefined
   */
  19?: any;
  /**
   * 
   * Default value: undefined
   */
  20?: any;
  /**
   * 
   * Default value: undefined
   */
  21?: any;
  /**
   * 
   * Default value: undefined
   */
  22?: any;
  /**
   * 
   * Default value: undefined
   */
  23?: any;
  /**
   * 
   * Default value: undefined
   */
  24?: any;
  /**
   * 
   * Default value: undefined
   */
  25?: any;
  /**
   * 
   * Default value: undefined
   */
  26?: any;
  /**
   * 
   * Default value: undefined
   */
  27?: any;
  /**
   * 
   * Default value: undefined
   */
  28?: any;
  /**
   * 
   * Default value: undefined
   */
  29?: any;
  /**
   * 
   * Default value: undefined
   */
  30?: any;
  /**
   * 
   * Default value: undefined
   */
  31?: any;
  /**
   * 
   * Default value: undefined
   */
  32?: any;
  /**
   * 
   * Default value: undefined
   */
  33?: any;
  /**
   * 
   * Default value: undefined
   */
  34?: any;
  /**
   * 
   * Default value: undefined
   */
  35?: any;
  /**
   * 
   * Default value: undefined
   */
  36?: any;
  /**
   * 
   * Default value: undefined
   */
  37?: any;
  /**
   * 
   * Default value: undefined
   */
  38?: any;
  /**
   * 
   * Default value: undefined
   */
  39?: any;
  /**
   * 
   * Default value: undefined
   */
  40?: any;
  /**
   * 
   * Default value: undefined
   */
  41?: any;
  /**
   * 
   * Default value: undefined
   */
  42?: any;
  /**
   * 
   * Default value: undefined
   */
  43?: any;
  /**
   * 
   * Default value: undefined
   */
  44?: any;
  /**
   * 
   * Default value: undefined
   */
  45?: any;
  /**
   * 
   * Default value: undefined
   */
  46?: any;
  /**
   * 
   * Default value: undefined
   */
  47?: any;
  /**
   * 
   * Default value: undefined
   */
  48?: any;
  /**
   * 
   * Default value: undefined
   */
  49?: any;
  /**
   * 
   * Default value: undefined
   */
  50?: any;
  /**
   * 
   * Default value: undefined
   */
  51?: any;
  /**
   * 
   * Default value: undefined
   */
  52?: any;
  /**
   * 
   * Default value: undefined
   */
  53?: any;
  /**
   * 
   * Default value: undefined
   */
  54?: any;
  /**
   * 
   * Default value: undefined
   */
  55?: any;
  /**
   * 
   * Default value: undefined
   */
  56?: any;
  /**
   * 
   * Default value: undefined
   */
  57?: any;
  /**
   * 
   * Default value: undefined
   */
  58?: any;
  /**
   * 
   * Default value: undefined
   */
  59?: any;
  /**
   * 
   * Default value: undefined
   */
  60?: any;
  /**
   * 
   * Default value: undefined
   */
  61?: any;
  /**
   * 
   * Default value: undefined
   */
  62?: any;
  /**
   * 
   * Default value: undefined
   */
  63?: any;
  /**
   * 
   * Default value: undefined
   */
  64?: any;
  /**
   * 
   * Default value: undefined
   */
  65?: any;
  /**
   * 
   * Default value: undefined
   */
  66?: any;
  /**
   * 
   * Default value: undefined
   */
  67?: any;
  /**
   * 
   * Default value: undefined
   */
  68?: any;
  /**
   * 
   * Default value: undefined
   */
  69?: any;
  /**
   * 
   * Default value: undefined
   */
  70?: any;
  /**
   * 
   * Default value: undefined
   */
  71?: any;
  /**
   * 
   * Default value: undefined
   */
  72?: any;
  /**
   * 
   * Default value: undefined
   */
  73?: any;
  /**
   * 
   * Default value: undefined
   */
  74?: any;
  /**
   * 
   * Default value: undefined
   */
  75?: any;
  /**
   * 
   * Default value: undefined
   */
  76?: any;
  /**
   * 
   * Default value: undefined
   */
  77?: any;
  /**
   * 
   * Default value: undefined
   */
  78?: any;
  /**
   * 
   * Default value: undefined
   */
  79?: any;
  /**
   * 
   * Default value: undefined
   */
  80?: any;
  /**
   * 
   * Default value: undefined
   */
  81?: any;
  /**
   * 
   * Default value: undefined
   */
  82?: any;
  /**
   * 
   * Default value: undefined
   */
  83?: any;
  /**
   * 
   * Default value: undefined
   */
  84?: any;
  /**
   * 
   * Default value: undefined
   */
  85?: any;
  /**
   * 
   * Default value: undefined
   */
  86?: any;
  /**
   * 
   * Default value: undefined
   */
  87?: any;
  /**
   * 
   * Default value: undefined
   */
  88?: any;
  /**
   * 
   * Default value: undefined
   */
  89?: any;
  /**
   * 
   * Default value: undefined
   */
  90?: any;
  /**
   * 
   * Default value: undefined
   */
  91?: any;
  /**
   * 
   * Default value: undefined
   */
  92?: any;
  /**
   * 
   * Default value: undefined
   */
  93?: any;
  /**
   * 
   * Default value: undefined
   */
  94?: any;
  /**
   * 
   * Default value: undefined
   */
  95?: any;
  /**
   * 
   * Default value: undefined
   */
  96?: any;
  /**
   * 
   * Default value: undefined
   */
  97?: any;
  /**
   * 
   * Default value: undefined
   */
  98?: any;
  /**
   * 
   * Default value: undefined
   */
  99?: any;
  /**
   * 
   * Default value: undefined
   */
  100?: any;
  /**
   * 
   * Default value: undefined
   */
  101?: any;
  /**
   * 
   * Default value: undefined
   */
  102?: any;
  /**
   * 
   * Default value: undefined
   */
  103?: any;
  /**
   * 
   * Default value: undefined
   */
  104?: any;
  /**
   * 
   * Default value: undefined
   */
  105?: any;
  /**
   * 
   * Default value: undefined
   */
  106?: any;
  /**
   * 
   * Default value: undefined
   */
  107?: any;
  /**
   * 
   * Default value: undefined
   */
  108?: any;
  /**
   * 
   * Default value: undefined
   */
  109?: any;
  /**
   * 
   * Default value: undefined
   */
  110?: any;
  /**
   * 
   * Default value: undefined
   */
  111?: any;
  /**
   * 
   * Default value: undefined
   */
  112?: any;
  /**
   * 
   * Default value: undefined
   */
  113?: any;
  /**
   * 
   * Default value: undefined
   */
  114?: any;
  /**
   * 
   * Default value: undefined
   */
  115?: any;
  /**
   * 
   * Default value: undefined
   */
  116?: any;
  /**
   * 
   * Default value: undefined
   */
  117?: any;
  /**
   * 
   * Default value: undefined
   */
  118?: any;
  /**
   * 
   * Default value: undefined
   */
  119?: any;
  /**
   * 
   * Default value: undefined
   */
  120?: any;
  /**
   * 
   * Default value: undefined
   */
  121?: any;
  /**
   * 
   * Default value: undefined
   */
  122?: any;
  /**
   * 
   * Default value: undefined
   */
  123?: any;
  /**
   * 
   * Default value: undefined
   */
  124?: any;
  /**
   * 
   * Default value: undefined
   */
  125?: any;
  /**
   * 
   * Default value: undefined
   */
  126?: any;
  /**
   * 
   * Default value: undefined
   */
  127?: any;
  /**
   * 
   * Default value: undefined
   */
  128?: any;
  /**
   * 
   * Default value: undefined
   */
  129?: any;
  /**
   * 
   * Default value: undefined
   */
  130?: any;
  /**
   * 
   * Default value: undefined
   */
  131?: any;
  /**
   * 
   * Default value: undefined
   */
  132?: any;
  /**
   * 
   * Default value: undefined
   */
  133?: any;
  /**
   * 
   * Default value: undefined
   */
  134?: any;
  /**
   * 
   * Default value: undefined
   */
  135?: any;
  /**
   * 
   * Default value: undefined
   */
  136?: any;
  /**
   * 
   * Default value: undefined
   */
  137?: any;
  /**
   * 
   * Default value: undefined
   */
  138?: any;
  /**
   * 
   * Default value: undefined
   */
  139?: any;
  /**
   * 
   * Default value: undefined
   */
  140?: any;
  /**
   * 
   * Default value: undefined
   */
  141?: any;
  /**
   * 
   * Default value: undefined
   */
  142?: any;
  /**
   * 
   * Default value: undefined
   */
  143?: any;
  /**
   * 
   * Default value: undefined
   */
  144?: any;
  /**
   * 
   * Default value: undefined
   */
  145?: any;
  /**
   * 
   * Default value: undefined
   */
  146?: any;
  /**
   * 
   * Default value: undefined
   */
  147?: any;
  /**
   * 
   * Default value: undefined
   */
  148?: any;
  /**
   * 
   * Default value: undefined
   */
  149?: any;
  /**
   * 
   * Default value: undefined
   */
  150?: any;
  /**
   * 
   * Default value: undefined
   */
  151?: any;
  /**
   * 
   * Default value: undefined
   */
  152?: any;
  /**
   * 
   * Default value: undefined
   */
  153?: any;
  /**
   * 
   * Default value: undefined
   */
  154?: any;
  /**
   * 
   * Default value: undefined
   */
  155?: any;
  /**
   * 
   * Default value: undefined
   */
  156?: any;
  /**
   * 
   * Default value: undefined
   */
  157?: any;
  /**
   * 
   * Default value: undefined
   */
  158?: any;
  /**
   * 
   * Default value: undefined
   */
  159?: any;
  /**
   * 
   * Default value: undefined
   */
  160?: any;
  /**
   * 
   * Default value: undefined
   */
  161?: any;
  /**
   * 
   * Default value: undefined
   */
  162?: any;
  /**
   * 
   * Default value: undefined
   */
  163?: any;
  /**
   * 
   * Default value: undefined
   */
  164?: any;
  /**
   * 
   * Default value: undefined
   */
  165?: any;
  /**
   * 
   * Default value: undefined
   */
  166?: any;
  /**
   * 
   * Default value: undefined
   */
  167?: any;
  /**
   * 
   * Default value: undefined
   */
  168?: any;
  /**
   * 
   * Default value: undefined
   */
  169?: any;
  /**
   * 
   * Default value: undefined
   */
  170?: any;
  /**
   * 
   * Default value: undefined
   */
  171?: any;
  /**
   * 
   * Default value: undefined
   */
  172?: any;
  /**
   * 
   * Default value: undefined
   */
  173?: any;
  /**
   * 
   * Default value: undefined
   */
  174?: any;
  /**
   * 
   * Default value: undefined
   */
  175?: any;
  /**
   * 
   * Default value: undefined
   */
  176?: any;
  /**
   * 
   * Default value: undefined
   */
  177?: any;
  /**
   * 
   * Default value: undefined
   */
  178?: any;
  /**
   * 
   * Default value: undefined
   */
  179?: any;
  /**
   * 
   * Default value: undefined
   */
  180?: any;
  /**
   * 
   * Default value: undefined
   */
  181?: any;
  /**
   * 
   * Default value: undefined
   */
  182?: any;
  /**
   * 
   * Default value: undefined
   */
  183?: any;
  /**
   * 
   * Default value: undefined
   */
  184?: any;
  /**
   * 
   * Default value: undefined
   */
  185?: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-filter-builder"): FilterBuilder;
        querySelector(selectors: "smart-filter-builder"): FilterBuilder | null;
        querySelectorAll(selectors: "smart-filter-builder"): NodeListOf<FilterBuilder>;
        getElementsByTagName(qualifiedName: "smart-filter-builder"): HTMLCollectionOf<FilterBuilder>;
        getElementsByName(elementName: "smart-filter-builder"): NodeListOf<FilterBuilder>;
    }
}

export interface FilterPanelProperties {
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If assigned any other valid value, the corresponding animation mode is applied. Use this property to control whether animations are active or turned off for the element.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the set of operation buttons that will be displayed in the filter panel, allowing users to perform actions such as applying, resetting, or clearing filters. Adjusting this setting controls which interactive options are available to users directly within the filter interface.
   * Default value: cancel,clear,filter
   */
  buttons?: string[];
  /**
   * An array in 'excel' mode that specifies the dataset used to extract unique filter values. The expected format is a JSON array of objects, where each object represents a data row with key-value pairs corresponding to column names and their respective values. For example:'''json[  { "name": "Alice", "age": 30 },  { "name": "Bob", "age": 25 }]'''Unique filter values will be derived from the property values within these objects.
   * Default value: null
   */
  data?: number[];
  /**
   * Provides a detailed description of a data field that contains values resulting from the application of specific filter criteria, indicating that only data meeting those criteria are included in this field.
   * Default value: "null"
   */
  dataField?: string;
  /**
   * When the property is assigned an array, it specifies a custom set of filter values that will be displayed to the user, overriding the default filter list. If the property is assigned a callback function, it enables users to dynamically add their own filter values in addition to the default ones. In this latter case, you must also implement the evaluateFilterExpression function to handle evaluation of custom filters. Please note that the .dataSource property is only supported when mode is set to 'excel'.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Controls the visibility of the filter panel, allowing you to show or hide the panel as needed.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Callback function invoked during the filter panel operation, allowing developers to implement custom evaluation logic for filtering data. This function receives relevant data parameters and should return a boolean indicating whether an item meets the filter criteria.
   * Default value: null
   */
  evaluateFilterExpression?: any;
  /**
   * Specifies the type of filter to be applied, determining how data will be sorted, displayed, or restricted based on the selected filter criteria.
   * Default value: string
   */
  filterType?: FilterPanelFilterType | string;
  /**
   * Specifies the date format pattern applied when the filterType is set to 'Date'. This string determines how date values are parsed and displayed within the filter, following standard date formatting conventions (e.g., 'YYYY-MM-DD').
   * Default value: "d"
   */
  formatString?: string;
  /**
   * Gets or sets the unlockKey value used to activate and unlock access to the product’s features. The unlockKey is typically provided after purchase or authorization and is required to enable full product functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which language is used for displaying content and should be used together with the messages property to provide the appropriate localized messages for users.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Specifies the names of the fields included in the filtered element. This determines which properties or attributes of the element are returned after applying the filter criteria.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "addCondition": "Add Condition",
   *     "addGroup": "Add Group",
   *     "and": "and",
   *     "blanks": "(Blanks)",
   *     "cancel": "Cancel",
   *     "clear": "Clear",
   *     "contains": "contains",
   *     "containsCaseSensitive": "contains (case sensitive)",
   *     "dateTabLabel": "DATE",
   *     "doesNotContain": "does not contain",
   *     "doesNotContainCaseSensitive": "does not contain (case sensitive)",
   *     "empty": "empty",
   *     "endsWith": "ends with",
   *     "endsWithCaseSensitive": "ends with (case sensitive)",
   *     "equal": "equal",
   *     "equalCaseSensitive": "equal (case sensitive)",
   *     "filter": "Filter",
   *     "greaterThan": "greater than",
   *     "greaterThanOrEqual": "greater than or equal",
   *     "lessThan": "less than",
   *     "lessThanOrEqual": "less than or equal",
   *     "notEmpty": "not empty",
   *     "notEqual": "not equal",
   *     "notNull": "not null",
   *     "null": "null ",
   *     "or": "or",
   *     "placeholderDate": "Enter date",
   *     "placeholderTime": "Enter time",
   *     "selectAll": "(Select All)",
   *     "showRows": "Show rows where:",
   *     "startsWith": "starts with",
   *     "startsWithCaseSensitive": "starts with (case sensitive)",
   *     "timeTabLabel": "TIME"
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines the operational mode of the filter panel, specifying how the panel behaves or displays filters within the user interface.
   * Default value: default
   */
  mode?: FilterPanelMode | string;
  /**
   * If the element is set to readonly, users can view its content but cannot modify, edit, or interact with the element’s value. However, the element can still receive focus and its content can be selected or copied.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies the visual theme applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, to ensure a consistent look and feel across the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, the element becomes unfocusable, meaning it cannot receive keyboard or mouse focus during user interaction or through JavaScript.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 The filter panel allows you to customize and display the applied filter expressions.
*/
export interface FilterPanel extends BaseElement, FilterPanelProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user cancels or clears the current set of applied filters, discarding any active filtering criteria.
	* @param event. The custom event.    */
  onCancel: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever all active filtering criteria are removed, resulting in the display of the complete, unfiltered dataset. It occurs specifically when the user or application clears the current filters, resetting the view to its default state.
	* @param event. The custom event.    */
  onClear?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user applies new settings or changes to the filter panel. It occurs after the filter options have been selected and confirmed, signaling that the current filter criteria should be used to update displayed data or content accordingly.
	* @param event. The custom event.    */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Removes all active filters currently applied, returning the view to its unfiltered state and displaying the complete set of data.
   */
  cancel(): void;
  /**
   * Removes all active filters and displays the complete, unfiltered data set.
   */
  clear(): void;
  /**
   * Assesses the given filter condition by applying it to a specified dataset or input, and determines whether the data meets the criteria defined by the filter. Returns a boolean value indicating if the filter evaluates to true or false for the provided input.
   * @param {any} value. The evalueated element in filter panel.
   */
  evaluate(value: any): void;
  /**
   * Applies the currently selected filter criteria to update and display the relevant data set.
   */
  filter(): void;
  /**
   * Retrieves the current state of all active filters, including their selected values and configuration settings. This provides an overview of how data is being filtered at the present moment.
   * @returns {any}
   */
  getState(): any;
  /**
   * Restores a previously saved filter configuration, applying all selected filter options and criteria to return the interface to its earlier state.
   * @param {any} state. An object returned by the method getState.
   */
  loadState(state: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-filter-panel"): FilterPanel;
        querySelector(selectors: "smart-filter-panel"): FilterPanel | null;
        querySelectorAll(selectors: "smart-filter-panel"): NodeListOf<FilterPanel>;
        getElementsByTagName(qualifiedName: "smart-filter-panel"): HTMLCollectionOf<FilterPanel>;
        getElementsByName(elementName: "smart-filter-panel"): NodeListOf<FilterPanel>;
    }
}

/**Specifies the type of filter to be applied, determining how data will be sorted, displayed, or restricted based on the selected filter criteria. */
export declare type FilterPanelFilterType = 'numeric' | 'string' | 'date' | 'boolean';
/**Defines the operational mode of the filter panel, specifying how the panel behaves or displays filters within the user interface. */
export declare type FilterPanelMode = 'default' | 'excel';
export interface FormProperties {
  /**
   * Defines or retrieves the number of columns used to arrange form fields, determining how fields are organized and displayed within the form layout.
   * Default value: 1
   */
  columns?: number;
  /**
   * Gets or sets the collection of form controls associated with the form. This allows you to retrieve the current controls or update them with a new set of controls.
   * Default value: null
   */
  controls?: Control[];
  /**
   * Callback function invoked when the status changes. The status parameter passed to the function reflects the new state of the process, and can be one of the following string values: 'disabled', 'invalid', 'pending', or 'valid'. Use this callback to handle logic based on each specific status transition.
   * Default value: null
   */
  onStatusChanges?: {(value: string): void};
  /**
   * Callback function invoked when the form's value changes. Receives the updated form data as a JSON object argument, allowing you to handle or process the new values within your application.
   * Default value: null
   */
  onValueChanges?: {(value: any): void};
  /**
   * Defines or retrieves the position of the labels relative to their associated elements. Specify this property to control where labels are displayed (e.g., above, below, left, or right of the element).
   * Default value: left
   */
  labelPosition?: FormLabelPosition | string;
  /**
   * Sets all form fields to read-only mode, preventing users from modifying their input while still allowing them to view the existing data.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Controls the visibility of the colon character that appears after label text. When enabled, a colon is displayed after each label; when disabled, the colon is omitted.
   * Default value: false
   */
  showColonAfterLabel?: boolean;
  /**
   * Toggles the visibility of the validation summary, allowing users to display or hide a list of validation errors based on form input.
   * Default value: true
   */
  showSummary?: boolean;
  /**
   * Retrieves the current status of the Form. Each entry within the status object contains the following boolean properties: dirty (indicates if the form field has been modified), untouched (indicates if the field has not been focused by the user), and disabled (indicates if the field is currently disabled).
   * Default value: null
   */
  status?: any;
  /**
   * Retrieves or assigns the current value of the form. Use this property to access the form's data for processing or to update the form with new values programmatically.
   * Default value: null
   */
  value?: any;
  /**
   * Automatically triggers form validation immediately upon form initialization, ensuring that all form fields are checked for correctness as soon as the form is rendered or instantiated.
   * Default value: false
   */
  validateOnLoad?: boolean;
}
/**
 Reactive Form Component with Advanced Validation
*/
export interface Form extends BaseElement, FormProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Inserts a new control element, such as an input field, button, or checkbox, into the Form, allowing users to interact with and submit data.
   * @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
   */
  addControl(controlOptions: any): void;
  /**
   * Retrieves a specific control element from the form using its name attribute, as defined by the dataField parameter. This method enables direct access to the control's properties and methods for further manipulation or data retrieval.
   * @param {string} dataField. dataField of a FormControl or FormGroup
   * @returns {Control}
   */
  getControl(dataField: string): Control;
  /**
   * Adds a new control element to the Form, allowing users to dynamically extend the form’s functionality. This method enables the inclusion of input fields, buttons, dropdowns, or other interactive components within the Form, ensuring seamless integration and consistent behavior with existing controls.
   * @param {number} index. Control insert index
   * @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
   */
  insertControl(index: number, controlOptions: any): void;
  /**
   * Removes a specified control element from the Form, ensuring it is no longer rendered or managed as part of the Form's structure and behavior.
   * @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
   */
  removeControl(controlOptions: any): void;
  /**
   * Triggers the submission of the form, sending the user-entered data to the specified server endpoint for processing. This action may also initiate form validation and execute any associated event handlers before transmitting the data.
   * @param {any} submitOptions?. Sets the submit options object. The object may have the following properties: <em>async</em>, <em>action</em>, <em>target</em>, <em>method</em>. <em>async</em> determines whether the form will be submitted asynchronously. <em>action</em> determines the submit url, <em>method</em> sets whether the submit is through 'GET' or 'POST'. <em>target</em> determines the submit target.
   */
  submit(submitOptions?: any): void;
  /**
   * Resets all fields in the form to their initial, default values, effectively clearing any user input or changes made.
   */
  reset(): void;
  /**
   * Performs comprehensive validation of the form fields, ensuring that all required inputs are provided, data types and formats are correct, and any specified constraints or validation rules are met before allowing form submission.
   */
  validate(): void;
}

export interface Control {
  /**
   * HTML Content displayed after the Form Control
   * Default value: ""
   */
  append?: string;
  /**
   * JSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control.
   * Default value: null
   */
  controlOptions?: any;
  /**
   * The type of the control.
   * Default value: input
   */
  controlType?: ControlControlType | string;
  /**
   * Sets the Form Group columns.
   * Default value: 1
   */
  columns?: number;
  /**
   * Sets the Form control column span.
   * Default value: 1
   */
  columnSpan?: number;
  /**
   * 
   * Default value: null
   */
  controls?: Control[];
  /**
   * Sets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets the Form control disabled mode.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets whether the Form control is 'dirty' i.e its value is changed by the user.
   * Default value: false
   */
  dirty?: boolean;
  /**
   * Gets or Sets the Form control's info icon's tooltip.
   * Default value: ""
   */
  info?: string;
  /**
   * Gets whether the Form control is invalid.
   * Default value: false
   */
  invalid?: boolean;
  /**
   * Gets or Sets the Form control's label.
   * Default value: ""
   */
  label?: string;
  /**
   * Gets or Sets the Form control's label position.
   * Default value: left
   */
  labelPosition?: ControlLabelPosition | string;
  /**
   * Gets or Sets the offset between the label and the control.
   * Default value: 10
   */
  labelOffset?: number;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.
   * Default value: "left"
   */
  labelAlign?: string;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.
   * Default value: "Next"
   */
  nextButtonLabel?: string;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.
   * Default value: "Back"
   */
  backButtonLabel?: string;
  /**
   * HTML Content displayed before the Form Control
   * Default value: ""
   */
  prepend?: string;
  /**
   * Gets or Sets the Form control readonly mode.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form control
   * Default value: false
   */
  untouched?: boolean;
  /**
   * Gets or Sets the placeholder.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.
   * Default value: false
   */
  showButtons?: boolean;
  /**
   * Sets or Gets the Form control or Form group value.
   * Default value: null
   */
  value?: any;
  /**
   * Gets whether the Form control is valid.
   * Default value: false
   */
  valid?: boolean;
  /**
   * Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
   * Default value: null
   */
  validationRules?: [] | null;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode.
   * Default value: 
   */
  viewMode?: ControlViewMode | string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-form"): Form;
        querySelector(selectors: "smart-form"): Form | null;
        querySelectorAll(selectors: "smart-form"): NodeListOf<Form>;
        getElementsByTagName(qualifiedName: "smart-form"): HTMLCollectionOf<Form>;
        getElementsByName(elementName: "smart-form"): NodeListOf<Form>;
    }
}

/**The type of the control. */
export declare type ControlControlType = 'button' | 'boolean' | 'comboBox' | 'checkInput' | 'datetime' | 'dropDownList' | 'group' | 'input' | 'label' | 'multiInput' | 'multiComboInput' | 'mask' | 'number' | 'password' | 'radioButton' | 'submit' | 'textarea' | 'template';
/**Gets or Sets the Form control's label position. */
export declare type ControlLabelPosition = 'left' | 'top';
/**FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode. */
export declare type ControlViewMode = null | 'accordion' | 'tabs' | 'breadcrumb';
/**Defines or retrieves the position of the labels relative to their associated elements. Specify this property to control where labels are displayed (e.g., above, below, left, or right of the element). */
export declare type FormLabelPosition = 'left' | 'top';
export interface FormControlProperties {
  /**
   * Retrieves or assigns the action associated with the FormControl component. This property specifically applies when the 'controlType' is set to either 'button' or 'submit', determining the function or operation that will be executed when the control is activated (e.g., when the button is clicked or the form is submitted).
   * Default value: 
   */
  action?: FormControlAction | string;
  /**
   * Specifies or retrieves the alignment setting of the FormControl element, determining how the control is positioned within its parent container (e.g., left, right, center, or justified).
   * Default value: left
   */
  align?: FormControlAlign | string;
  /**
   *   "Specifies the HTML content that will appear immediately after the form control element. This allows you to display supplementary information, messages, or custom markup directly following the input field."
   * Default value: 
   */
  appendHTML?: any;
  /**
   * A JSON object containing configuration options for initializing the UI component. For example, providing { dataSource: ['item 1', 'item 2', 'item 3'] } assigns the specified array to the dataSource property of the Form control, defining the data items that will be displayed or used within the component. Use this object to specify properties such as data sources, default values, appearance settings, or behavior options for the UI element during its creation.
   * Default value: 
   */
  controlOptions?: any;
  /**
   * Specifies the type of user interface control (such as button, textbox, dropdown, etc.) represented by this component. This property determines the control's behavior and visual appearance.
   * Default value: input
   */
  controlType?: FormControlControlType | string;
  /**
   * Specifies the number of columns used to arrange the fields within the Form Group, determining how the form elements are organized and displayed in a grid layout.
   * Default value: 1
   */
  columns?: number;
  /**
   * Specifies the number of columns that the form control should span within a grid layout, allowing you to control the width of the form element across multiple columns.
   * Default value: 1
   */
  columnSpan?: number;
  /**
   * Specifies the data field associated with the form control. The value of dataField is assigned as the name attribute of the control's internal input element. Additionally, within the parent FormGroup, this form control can be accessed by referencing the same dataField value. This ensures seamless integration between the form control and the FormGroup’s data model.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Enables or disables the form control, determining whether users can interact with it. When set to disabled, the control will be grayed out and unresponsive to user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Returns a boolean indicating whether the Form control is 'dirty'—that is, whether the user has modified the control's value from its original (initial) value. This property helps determine if the input has been changed since the form was loaded or last reset.
   * Default value: false
   */
  dirty?: boolean;
  /**
   * Retrieves or defines the tooltip text that appears when a user hovers over the info icon associated with the Form control. This tooltip provides additional information or guidance about the form field for improved user experience.
   * Default value: ""
   */
  info?: string;
  /**
   * Determines if the Form control currently has validation errors, indicating that its input data does not meet the specified validation rules. Returns 'true' if the control is invalid; otherwise, returns 'false'.
   * Default value: false
   */
  invalid?: boolean;
  /**
   * Retrieves or assigns the label text displayed for the Form control, allowing you to specify or update the descriptive text shown to users.
   * Default value: ""
   */
  label?: string;
  /**
   * Retrieves or specifies the position of the label associated with the form control. This property determines where the label will be displayed relative to the form element (e.g., above, below, to the left, or to the right).
   * Default value: left
   */
  labelPosition?: FormControlLabelPosition | string;
  /**
   * Gets or sets the distance (in pixels) between the label and its associated control, allowing you to adjust the spacing for layout and visual alignment purposes.
   * Default value: 10
   */
  labelOffset?: number;
  /**
   * ''  *This property is applicable only when the controlType is set to 'group'. It determines whether the navigation buttons are shown within the FormGroup. The property takes effect only when the viewMode property is also configured. Use this setting to control the visibility of navigation controls for multi-step or grouped form layouts.*
   * Default value: left
   */
  labelAlign?: FormControlAlign | string;
  /**
   * Applies only when the controlType property is set to 'group'. Specifies the label text displayed on the "Next" button within a FormGroup, allowing you to get or set a custom label for navigation purposes.
   * Default value: "Next"
   */
  nextButtonLabel?: string;
  /**
   * ''  Available only when the controlType property is set to 'group' (i.e., for FormGroup controls). This property allows you to get or set the label displayed on the back button within the form group.
   * Default value: "Back"
   */
  backButtonLabel?: string;
  /**
   * Allows you to retrieve or specify the placeholder text displayed in the FormControl when the input field is empty. This placeholder provides a hint to users about the expected input.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * HTML content that appears visually above or before the form control element, typically used for introductory text, instructions, or contextual information. This content is rendered prior to the input field or interactive control in the layout.
   * Default value: 
   */
  prependHTML?: any;
  /**
   * Enables you to retrieve or assign the readonly state of the form control. When set to true, the form control becomes non-editable, preventing users from modifying its value while still allowing its content to be viewed.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Determines whether this field must be filled in by the user. When set to true, the field is required and validation will fail if it is left empty. When set to false, the field is optional. This property can be both retrieved (get) and updated (set).
   * Default value: false
   */
  required?: boolean;
  /**
   * Returns whether the Form control is in a "pristine" state, meaning it has not been interacted with or "touched" by the user. This property remains true until the user focuses on and then blurs (moves away from) the Form control, at which point it is set to false. It is commonly used to determine if the user has interacted with a form field since the component was initialized.
   * Default value: false
   */
  untouched?: boolean;
  /**
   * Gets or sets whether a colon character (:) is automatically displayed after the label text. When enabled, a colon will appear immediately following the label, typically to visually separate the label from the corresponding input field.
   * Default value: false
   */
  showColonAfterLabel?: boolean;
  /**
   * Applies only when controlType is set to 'group'. This property determines whether navigation buttons are shown within the FormGroup. It is effective only if the viewMode property is enabled. Use this property to control the visibility of navigation controls for grouped form elements in the specified view mode.
   * Default value: false
   */
  showButtons?: boolean;
  /**
   * Provides the ability to retrieve (get) or update (set) the current value of a FormControl or FormGroup. This allows you to read the form’s data or programmatically change its values as needed.
   * Default value: null
   */
  value?: any;
  /**
   * Determines whether the Form control currently satisfies all validation rules and is considered valid. Returns true if the control’s value passes all validation checks; otherwise, returns false.
   * Default value: false
   */
  valid?: boolean;
  /**
   * Sets or retrieves the column's validation rules. The value should be an array of objects, where each object defines a specific validation rule for the column. Each validation rule object must include:- A 'type' property, which specifies the type of validation. Valid values for 'type' include: ''required'', ''min'', ''max'', ''minLength'', ''maxLength'', ''email'', ''null'', ''requiredTrue'', ''minDate'', ''maxDate'', and ''pattern''.- A 'value' property, which provides the value used for the validation. For example, for 'minLength', 'value' might be '3', or for 'pattern', it could be a regular expression. Note: For validation types ''required'', ''requiredTrue'', and ''null'', the 'value' property can be omitted.Optionally, you can include a 'message' property to specify a custom error message that is shown when the validation fails.'Example:''''json[  { "type": "required", "message": "This field is mandatory." },  { "type": "minLength", "value": 3, "message": "Minimum 3 characters required." },  { "type": "pattern", "value": "^[A-Za-z]+$", "message": "Only letters are allowed." }]'''This structure allows you to define multiple validation rules for a column, each with its own type, constraints, and error message.
   * Default value: null
   */
  validationRules?: [] | null;
  /**
   * 'Applies only when controlType is set to 'group'. This property gets or sets the view mode of the form group, determining how the group of form controls is displayed and interacted with in the UI.'
   * Default value: 
   */
  viewMode?: FormControlViewMode | string;
}
/**
 Form Control
*/
export interface FormControl extends BaseElement, FormControlProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-form-control"): FormControl;
        querySelector(selectors: "smart-form-control"): FormControl | null;
        querySelectorAll(selectors: "smart-form-control"): NodeListOf<FormControl>;
        getElementsByTagName(qualifiedName: "smart-form-control"): HTMLCollectionOf<FormControl>;
        getElementsByName(elementName: "smart-form-control"): NodeListOf<FormControl>;
    }
}

/**Retrieves or assigns the action associated with the FormControl component. This property specifically applies when the 'controlType' is set to either 'button' or 'submit', determining the function or operation that will be executed when the control is activated (e.g., when the button is clicked or the form is submitted). */
export declare type FormControlAction = 'reset' | 'submit';
/**''  <br/>*This property is applicable only when the controlType is set to 'group'. It determines whether the navigation buttons are shown within the FormGroup. The property takes effect only when the viewMode property is also configured. Use this setting to control the visibility of navigation controls for multi-step or grouped form layouts.* */
export declare type FormControlAlign = 'left' | 'center' | 'right';
/**Specifies the type of user interface control (such as button, textbox, dropdown, etc.) represented by this component. This property determines the control's behavior and visual appearance. */
export declare type FormControlControlType = 'button' | 'boolean' | 'comboBox' | 'checkInput' | 'datetime' | 'dropDownList' | 'group' | 'input' | 'label' | 'multiInput' | 'multiComboInput' | 'mask' | 'number' | 'password' | 'radioButton' | 'submit' | 'textarea' | 'template';
/**Retrieves or specifies the position of the label associated with the form control. This property determines where the label will be displayed relative to the form element (e.g., above, below, to the left, or to the right). */
export declare type FormControlLabelPosition = 'left' | 'top';
/**<br/><br/>'Applies only when controlType is set to 'group'. This property gets or sets the view mode of the form group, determining how the group of form controls is displayed and interacted with in the UI.' */
export declare type FormControlViewMode = null | 'accordion' | 'tabs' | 'breadcrumb';
export interface FormGroupProperties {
  /**
   * Gets or sets the number of columns used to layout the form fields, allowing for multi-column form arrangements.
   * Default value: 1
   */
  columns?: number;
  /**
   * Defines the data field associated with the form control. The inner input element’s name attribute will be set to the specified dataField value, ensuring correct binding and form data serialization. Additionally, this value determines how the control is referenced within the FormGroup, making the form control’s value accessible via the dataField key in the form’s data model.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Retrieves or updates the text displayed as the label for the form control, allowing you to specify or modify the descriptive text shown to users alongside the input element.
   * Default value: ""
   */
  label?: string;
  /**
   * 
   * Default value: null
   */
  controls?: Control[];
  /**
   * A callback function that is invoked whenever the status changes. The function receives a single argument—a string representing the new status—which will be one of the following values: ''valid'', ''invalid'', ''disabled'', or ''pending''. Use this callback to implement custom behavior in response to status updates.
   * Default value: null
   */
  onStatusChanges?: {(value: string): void};
  /**
   * Callback function invoked whenever the form value changes. Receives the updated form data as a JSON object, allowing you to respond to or process the latest values.
   * Default value: null
   */
  onValueChanges?: {(value: any): void};
  /**
   * Specifies or retrieves the position of the labels relative to their associated element. This property can be used to define where labels are displayed, such as above, below, to the left, or to the right of the element.
   * Default value: left
   */
  labelPosition?: FormGroupLabelPosition | string;
  /**
   * Sets the form to read-only mode, preventing users from editing or modifying any of the input fields while still allowing them to view the current values.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Toggles the visibility of the colon character that appears immediately after label text, allowing you to choose whether or not a colon is displayed following each label.
   * Default value: false
   */
  showColonAfterLabel?: boolean;
  /**
   * Controls the visibility of the validation summary, allowing you to display or hide a summary of form validation errors to users.
   * Default value: true
   */
  showSummary?: boolean;
  /**
   * Retrieves the current value of the form or updates it with a new value. This property can be used to access the form's data or set it programmatically.
   * Default value: null
   */
  value?: any;
}
/**
 Form Group
*/
export interface FormGroup extends BaseElement, FormGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Inserts a new input control (such as a text box, dropdown, or checkbox) into the Form, allowing users to provide or select additional information as part of their submission.
   * @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
   */
  addControl(controlOptions: any): void;
  /**
   * Retrieves a specific control from the collection using its name, as specified by the dataField parameter. This function searches for a control whose name matches the provided dataField value and returns the corresponding control object, allowing you to access or manipulate its properties and methods.
   * @param {string} dataField. dataField of a FormControl or FormGroup
   * @returns {Control}
   */
  getControl(dataField: string): Control;
  /**
   * Adds a user interface control (such as a text box, dropdown, or button) to the specified Form, enabling users to input or interact with form data. This operation dynamically updates the Form’s layout and may include assigning default properties, event handlers, and positioning options for the new control.
   * @param {number} index. Control insert index
   * @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
   */
  insertControl(index: number, controlOptions: any): void;
  /**
   * Removes a specified control element from the Form, effectively deleting it from the Form’s structure and user interface. This operation detaches the control, ensuring it is no longer available for user interaction or data capture. Use this action to dynamically update the Form’s contents based on user actions or application logic.
   * @param {any} controlOptions. Control options. The control options description is available in the <em>controls</em> property.
   */
  removeControl(controlOptions: any): void;
}

export interface Control {
  /**
   * HTML Content displayed after the Form Control
   * Default value: 
   */
  appendHTML?: any;
  /**
   * JSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control.
   * Default value: 
   */
  controlOptions?: any;
  /**
   * The type of the control.
   * Default value: input
   */
  controlType?: ControlControlType | string;
  /**
   * Sets the Form Group columns.
   * Default value: 1
   */
  columns?: number;
  /**
   * Sets the Form control column span.
   * Default value: 1
   */
  columnSpan?: number;
  /**
   * Sets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets the Form control disabled mode.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets whether the Form control is 'dirty' i.e its value is changed by the user.
   * Default value: false
   */
  dirty?: boolean;
  /**
   * Gets or Sets the Form control's info icon's tooltip.
   * Default value: ""
   */
  info?: string;
  /**
   * Gets whether the Form control is invalid.
   * Default value: false
   */
  invalid?: boolean;
  /**
   * Gets or Sets the Form control's label.
   * Default value: ""
   */
  label?: string;
  /**
   * Gets or Sets the Form control's label position.
   * Default value: left
   */
  labelPosition?: ControlLabelPosition | string;
  /**
   * Gets or Sets the offset between the label and the control.
   * Default value: 10
   */
  labelOffset?: number;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.
   * Default value: "left"
   */
  labelAlign?: string;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.
   * Default value: "Next"
   */
  nextButtonLabel?: string;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.
   * Default value: "Back"
   */
  backButtonLabel?: string;
  /**
   * HTML Content displayed before the Form Control
   * Default value: 
   */
  prependHTML?: any;
  /**
   * Gets or Sets the Form control readonly mode.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form control
   * Default value: false
   */
  untouched?: boolean;
  /**
   * Gets or Sets whether colon is displayed after the label.
   * Default value: false
   */
  showColonAfterLabel?: boolean;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.
   * Default value: false
   */
  showButtons?: boolean;
  /**
   * Sets or Gets the Form control or Form group value.
   * Default value: null
   */
  value?: any;
  /**
   * Gets whether the Form control is valid.
   * Default value: false
   */
  valid?: boolean;
  /**
   * Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
   * Default value: null
   */
  validationRules?: [] | null;
  /**
   * FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode.
   * Default value: 
   */
  viewMode?: ControlViewMode | string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-form-group"): FormGroup;
        querySelector(selectors: "smart-form-group"): FormGroup | null;
        querySelectorAll(selectors: "smart-form-group"): NodeListOf<FormGroup>;
        getElementsByTagName(qualifiedName: "smart-form-group"): HTMLCollectionOf<FormGroup>;
        getElementsByName(elementName: "smart-form-group"): NodeListOf<FormGroup>;
    }
}

/**Specifies or retrieves the position of the labels relative to their associated element. This property can be used to define where labels are displayed, such as above, below, to the left, or to the right of the element. */
export declare type FormGroupLabelPosition = 'left' | 'top';
export interface GanttChartProperties {
  /**
   * Specifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.
   * Default value: false
   */
  adjustToNonworkingTime?: boolean;
  /**
   * Automatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.
   * Default value: false
   */
  autoSchedule?: boolean;
  /**
   * This setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.
   * Default value: false
   */
  autoScheduleStrictMode?: boolean;
  /**
   * Specifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.
   * Default value: 5
   */
  autoScrollStep?: number;
  /**
   * Controls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.
   * Default value: false
   */
  columnMenu?: boolean;
  /**
   * Specifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.
   * Default value: false
   */
  columnResize?: boolean;
  /**
   * Controls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.
   * Default value: false
   */
  columnResizeFeedback?: boolean;
  /**
   * Enables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.
   * Default value: false
   */
  criticalPath?: boolean;
  /**
   * Represents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.
   * Default value: 
   */
  currentTime?: string | Date;
  /**
   * Controls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.
   * Default value: false
   */
  currentTimeIndicator?: boolean;
  /**
   * Specifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.
   * Default value: 1
   */
  currentTimeIndicatorInterval?: number;
  /**
   * Configures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior).
   * Default value: [object Object]
   */
  dataExport?: GanttChartDataExport;
  /**
   * Determines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance. Required Task Properties:      label – A string value representing the name or description of the task.        dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD').        dateEnd – The task’s end date as a string in a valid date format.        type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes.  Optional Task Properties:      connections – An array of objects defining dependencies between tasks. Each connection object requires:                  target – An integer specifying the zero-based index of the target task in the main tasks array.                    type – An integer (0–3) indicating the type of dependency:                  0 – Start-to-Start          1 – End-to-Start          2 – End-to-End          3 – Start-to-End                            lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule.                  duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time.        minDuration / maxDuration – Set minimum or maximum allowed duration for the task.        minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats.        minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats.        progress – A number from 0 to 100 indicating the percentage of work completed.        overdue – A boolean that is true if the task’s dateEnd has passed its deadline.        disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline.        disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline.        dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks.        segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations).        synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks.        expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks.  The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/.
   * Default value: 
   */
  dataSource?: any;
  /**
   * Specifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements.
   * Default value: short
   */
  dayFormat?: GanttDayFormat | string;
  /**
   * Specifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.
   * Default value: 
   */
  dateEnd?: string | Date;
  /**
   * Specifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.
   * Default value: 
   */
  dateStart?: string | Date;
  /**
   * Specifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule.
   * Default value: null
   */
  dateMarkers?: GanttChartDateMarker[];
  /**
   * Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Prevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.
   * Default value: false
   */
  disableAutoScroll?: boolean;
  /**
   * Prevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.
   * Default value: false
   */
  disableTaskDrag?: boolean;
  /**
   * Prevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.
   * Default value: false
   */
  disableTaskProgressChange?: boolean;
  /**
   * Prevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.
   * Default value: false
   */
  disableTaskResize?: boolean;
  /**
   * Prevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.
   * Default value: false
   */
  disableSelection?: boolean;
  /**
   * Prevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.
   * Default value: false
   */
  disableSegmentDrag?: boolean;
  /**
   * Prevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.
   * Default value: false
   */
  disableSegmentResize?: boolean;
  /**
   * Prevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.
   * Default value: false
   */
  disableWindowEditor?: boolean;
  /**
   * Specifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application.
   * Default value: milisecond
   */
  durationUnit?: Duration | string;
  /**
   * Specifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.
   * Default value: false
   */
  filterRow?: boolean;
  /**
   * Specifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.
   * Default value: -1
   */
  firstDayOfWeek?: number;
  /**
   * Organizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.
   * Default value: false
   */
  groupByResources?: boolean;
  /**
   * Enables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.
   * Default value: null
   */
  headerTemplate?: any;
  /**
   * Specifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.
   * Default value: false
   */
  hideDateMarkers?: boolean;
  /**
   * By default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.
   * Default value: false
   */
  hideTimelineHeader?: boolean;
  /**
   * By default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.
   * Default value: false
   */
  hideTimelineHeaderDetails?: boolean;
  /**
   * By default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.
   * Default value: true
   */
  hideTimelineSecondHeaderDetails?: boolean;
  /**
   * Controls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.
   * Default value: false
   */
  hideResourcePanel?: boolean;
  /**
   * Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Specifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements.
   * Default value: numeric
   */
  hourFormat?: HourFormat | string;
  /**
   * When this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.
   * Default value: false
   */
  infiniteTimeline?: boolean;
  /**
   * Specifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.
   * Default value: 5
   */
  infiniteTimelineStep?: number;
  /**
   * When enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * Controls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.For the Task Table, the following keyboard shortcuts are available when a task is focused:  Enter – Opens the Window editor, allowing you to edit the currently focused task.  Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.
   * Default value: false
   */
  keyboardNavigation?: boolean;
  /**
   * Sets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Determines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.
   * Default value: 2100-1-1
   */
  max?: string | Date;
  /**
   * Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.
   * Default value: 1900-1-1
   */
  min?: string | Date;
  /**
   * Defines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * Specifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline.
   * Default value: short
   */
  monthFormat?: MonthFormat | string;
  /**
   * Specifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar.
   * Default value: week
   */
  monthScale?: MonthScale | string;
  /**
   * Specifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates.
   * Default value: 
   */
  nonworkingDays?: number[];
  /**
   * Specifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours.
   * Default value: 
   */
  nonworkingHours?: number[] | number[][];
  /**
   * This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:1. 'task' – The full task object containing all associated data.2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.3. 'taskElement' – The root HTML element representing the task in the DOM.4. 'segmentElement' – The HTML element representing the current segment of the task.5. 'labelElement' – The HTML element that displays the segment’s label.You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.
   * Default value: null
   */
  onTaskRender?: any;
  /**
   * A function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters:    task: The JavaScript object representing the task's data and properties.  taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.Use this function to add custom styles, event listeners, or additional content to each task element based on its data.
   * Default value: null
   */
  taskFormatFunction?: any;
  /**
   * A function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:- tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.- event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).- content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content.
   * Default value: null
   */
  tooltipFormatFunction?: any;
  /**
   * A function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments:      target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior.        type — Specifies the purpose of the popup window. Possible values are:          'task': For editing or viewing a task.      'confirm': For displaying a confirmation prompt.      'connection': For actions related to connections between tasks (e.g., deleting a link).            item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type).  Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed.
   * Default value: null
   */
  popupWindowCustomizationFunction?: any;
  /**
   * Specifies which tab sections are displayed within the popup window. This property accepts the following three values:      general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property.        dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task.        segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task.  Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.
   * Default value: ['general', 'dependency', 'segments']
   */
  popupWindowTabs?: string[];
  /**
   * This property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true.
   * Default value: null
   */
  progressLabelFormatFunction?: any;
  /**
   * Specifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation.
   * Default value: short
   */
  quarterFormat?: QuarterFormat | string;
  /**
   * Returns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access.
   * Default value: null
   */
  resources?: GanttChartResource[];
  /**
   * Determines which columns are displayed in the Resource Tree.  Each entry in this property should be an Object containing the following keys:- label: Specifies the column header text as it will appear in the Task Tree.- value: Defines the property or content to be displayed in the cells of that column.By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.Additional configurable properties for each column object include:  formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content.  min: Sets the minimum width (in pixels or another supported unit) for the column.  max: Sets the maximum width for the column.  size: Specifies the fixed width for the column.Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed.
   * Default value: { "label": "resourceColumnLabel", "value": "label" }
   */
  resourceColumns?: GanttChartResourceColumn[];
  /**
   * Specifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.
   * Default value: false
   */
  resourceFiltering?: boolean;
  /**
   * A format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI.
   * Default value: null
   */
  resourceGroupFormatFunction?: any;
  /**
   * Enables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.
   * Default value: null
   */
  resourcePanelHeaderTemplate?: any;
  /**
   * Specifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.
   * Default value: 100
   */
  resourcePanelMin?: number | string;
  /**
   * Specifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.
   * Default value: 
   */
  resourcePanelSize?: number | string;
  /**
   * Controls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.
   * Default value: 0
   */
  resourcePanelRefreshRate?: number;
  /**
   * A callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters:  taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell.  resourceIndex – The index representing the current resource row.  cellDate – A Date object or date string representing the current cell’s date.This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode:  diagram – Return a string that will be rendered as the cell’s content.  histogram – Return an object with the following properties:          capacity: The current value to be visualized for the cell.      maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale.        custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements.
   * Default value: null
   */
  resourceTimelineFormatFunction?: any;
  /**
   * Specifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals).
   * Default value: diagram
   */
  resourceTimelineMode?: GanttChartResourceTimelineMode | string;
  /**
   * Specifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience.
   * Default value: hours
   */
  resourceTimelineView?: GanttChartResourceTimelineView | string;
  /**
   * Determines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.
   * Default value: false
   */
  paging?: boolean;
  /**
   * Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * "Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)."
   * Default value: 
   */
  selectedTaskIds?: number[] | string[];
  /**
   * Sets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."---'Improved Version:'Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned.
   * Default value: 
   */
  selectedResourceIds?: number[] | string[];
  /**
   * Defines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled.
   * Default value: many
   */
  selectionMode?: GanttChartSelectionMode | string;
  /**
   * Controls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.
   * Default value: false
   */
  shadeUntilCurrentTime?: boolean;
  /**
   * Displays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.
   * Default value: false
   */
  showSelectionColumn?: boolean;
  /**
   * Controls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.
   * Default value: false
   */
  showBaseline?: boolean;
  /**
   * Displays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.
   * Default value: false
   */
  showProgressLabel?: boolean;
  /**
   * If enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.
   * Default value: false
   */
  snapToNearest?: boolean;
  /**
   * Enables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters:  dataSource – The complete array of data objects currently used by the table.  sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration.  directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index.  defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling.
   * Default value: null
   */
  sortFunction?: { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void };
  /**
   * Specifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers.
   * Default value: none
   */
  sortMode?: GanttChartSortMode | string;
  /**
   * A getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array.
   * Default value: 
   */
  tasks?: GanttChartTask[];
  /**
   * 'Description'Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:- label: Specifies the text that will appear as the column header in the Task Tree.- value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.By default, one column will be shown with all task labels. Additional columns can be configured using this property.'Optional properties for each column object:'  formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element).  min: Sets the minimum width of the column (in pixels or CSS units).  max: Sets the maximum width of the column (in pixels or CSS units).  size: Sets the default (actual) width of the column (in pixels or CSS units).  customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments:          label: The column label.      value: The current cell value in the column.        The function should return the editor component or element.  setCustomEditorValue: A callback used to programmatically set the value of the custom editor.  getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree.
   * Default value: { "label": "Task Name", "value": "label" }
   */
  taskColumns?: GanttChartTaskColumn[];
  /**
   * Specifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.
   * Default value: false
   */
  taskFiltering?: boolean;
  /**
   * Specifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.
   * Default value: 200
   */
  taskPanelMin?: string | number;
  /**
   * Specifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.
   * Default value: 
   */
  taskPanelSize?: string | number;
  /**
   * Specifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.
   * Default value: 200
   */
  timelineMin?: string | number;
  /**
   * Specifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.
   * Default value: 100
   */
  treeMin?: string | number;
  /**
   * Specifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.
   * Default value: 100
   */
  treeSize?: string | number;
  /**
   * A custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments:  date (Date): The JavaScript Date object representing the date associated with the current header cell.  type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents.  isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row.  value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view.
   * Default value: null
   */
  timelineHeaderFormatFunction?: any;
  /**
   * Controls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas.
   * Default value: [object Object]
   */
  tooltip?: GanttChartTooltip;
  /**
   * Specifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
  /**
   * Specifies the date range displayed on the timeline. Accepted values include:day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.week: The timeline presents each day within a single week, providing a broader weekly overview.month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.year: The timeline displays each month of the year, providing a high-level annual perspective.resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline.
   * Default value: year
   */
  view?: GanttChartView | string;
  /**
   * Specifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation.
   * Default value: numeric
   */
  yearFormat?: YearFormat | string;
  /**
   * Specifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation.
   * Default value: long
   */
  weekFormat?: WeekFormat | string;
  /**
   * Specifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.
   * Default value: ""
   */
  theme?: string;
  /**
   * Determines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications.
*/
export interface GanttChart extends BaseElement, GanttChartProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when a batch update operation begins, specifically after the <b>beginUpdate</b> method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.
	* @param event. The custom event.    */
  onBeginUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered after the <b>endUpdate</b> method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.
	* @param event. The custom event.    */
  onEndUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(startIndex)
   *  startIndex - The index of the task that a connection is started from.
   */
  onConnectionStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, startTaskId, startIndex, endIndex, endTaskId, type)
   *  id - The id of the connection that was created.
   *  startTaskId - The id of the task that a connection is started from.
   *  startIndex - The index of the task that a connection is started from.
   *  endIndex - The index of the task that a connection ended to.
   *  endTaskId - The id of the task that a connection ended to.
   *  type - The type of connection. Fours types are available: <ul><li><b>0</b> - start-to-start</li><li><b>1</b> - end-to-start</li><li><b>2</b> - end-to-end</li><li><b>3</b> - start-to-end</li></ul>
   */
  onConnectionEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue)
   *  value - The index of the new selected task.
   *  oldValue - The index of the previously selected task.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the <b>columnResize</b> property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField, headerCellElement, widthInPercentages, width)
   *  dataField - The name of the column. Corresponds to the <b>value</b> attribute of a <b>taskColumns/resourceColumns</b> object.
   *  headerCellElement - The HTMLElement column cell element that was resized.
   *  widthInPercentages - The new width of the column in percentages.
   *  width - The new width of the column in pixels.
   */
  onColumnResize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.
	* @param event. The custom event. Custom data event was created with: ev.detail(owner, item, target, type)
   *  owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip.
   *  item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
   *  target - The instance of the window/tooltip that is going to close.
   *  type - The type of window/tooltip that is going to close. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
   */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.
	* @param event. The custom event. Custom data event was created with: ev.detail(owner, item, target, type)
   *  owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
   *  item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
   *  target - The instance of the window/tooltip that is closed.
   *  type - The type of window/tooltip that is closed. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
   */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.
	* @param event. The custom event. Custom data event was created with: ev.detail(isGroup, item, index, label, value)
   *  isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled.
   *  item - The object details of the collapsed item.
   *  index - The index of the collapsed item.
   *  label - The label of the collapsed item.
   *  value - The value of the collapsed item.
   */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, item, dateStart, dateEnd, segment)
   *  id - The id of the task that is going to be dragged.
   *  item - The object of the task that is going to be dragged.
   *  dateStart - The start date of the task that is going to be dragged.
   *  dateEnd - The end date of the task that is going to be dragged.
   *  segment - The segment object that is going to be dragged. This attribute is undefined if a segment is not going to be dragged.
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, item, dateStart, dateEnd, segment)
   *  id - The id of the task that is was dragged.
   *  item - The object of the task that is was dragged.
   *  dateStart - The start date of the task that is was dragged.
   *  dateEnd - The end date of the task that is was dragged.
   *  segment - The segment object that was dragged. This attribute is undefined if a segment has not been dragged.
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(isGroup, item, index, label, value)
   *  isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled.
   *  item - The index of the expanded item.
   *  index - The index of the expanded item.
   *  label - The label of the expanded item.
   *  value - The value of the expanded item.
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.
	* @param event. The custom event. Custom data event was created with: ev.detail(type, action, filters)
   *  type - The type of items that have been filtered ( task or resource ).
   *  action - The name of the filtering action (whether filtering is added or removed).
   *  filters - The filters that have been applied. Filters represent JQX.Utilities.FilterGroup objects.
   */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, item, type, originalEvent)
   *  id - The id of the task.
   *  item - The item that was clicked. It can be a task, resource or connection.
   *  type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
   *  originalEvent - The original DOM event.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, item, type, originalEvent)
   *  id - The id of the task.
   *  item - The item that was clicked. It can be a task, resource or connection.
   *  type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
   *  originalEvent - The original DOM event.
   */
  onItemDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.
	* @param event. The custom event. Custom data event was created with: ev.detail(type, item)
   *  type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
   *  item - An object that represents the actual item with it's attributes.
   */
  onItemInsert?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, type, item)
   *  id - The id of the task.
   *  type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
   *  item - An object that represents the actual item with it's attributes.
   */
  onItemRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, type, item)
   *  id - The id of the task.
   *  type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
   *  item - An object that represents the actual item with it's attributes.
   */
  onItemUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.
	* @param event. The custom event. Custom data event was created with: ev.detail(owner, item, target, type)
   *  owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
   *  item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
   *  target - The instance of the window/tooltip that is going to open.
   *  type - The type of window/tooltip that is going to open. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
   */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.
	* @param event. The custom event. Custom data event was created with: ev.detail(owner, item, target, type)
   *  owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
   *  item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
   *  target - The instance of the window/tooltip that is opened.
   *  type - The type of window/tooltip that is opened. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
   */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, index, progress)
   *  id - The id of the task.
   *  index - The index of the task which progress is going to be changed.
   *  progress - The progress of the task before it is changed.
   */
  onProgressChangeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).
	* @param event. The custom event. Custom data event was created with: ev.detail(id, index, progress)
   *  id - The id of the task.
   *  index - The index of the task which progress is has been changed.
   *  progress - The progress of the task after it was changed.
   */
  onProgressChangeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, item, dateStart, dateEnd, segment)
   *  id - The id of the task that is going to be resized.
   *  item - The object of the task that is going to be resized.
   *  dateStart - The start date of the task that is going to be resized.
   *  dateEnd - The end date of the task that is going to be resized.
   *  segment - The segment object that is going to be resized. This attribute is undefined if a segment is not going to be resized.
   */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, item, dateStart, dateEnd, segment)
   *  id - The id of the task that was resized.
   *  item - The object of the task that was resized.
   *  dateStart - The start date of the task that was resized.
   *  dateEnd - The end date of the task that was resized.
   *  segment - The segment object that was resized. This attribute is undefined if a segment has not been resized.
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.
	* @param event. The custom event. Custom data event was created with: ev.detail(type, columns, sortDataFields, sortOrders, sortDataTypes)
   *  type - The type of columns that have been sorted ( task or resource column ).
   *  columns - An array of objects that contains the currently sorted column objects.
   *  sortDataFields - The dataFields of the columns that have been sorted. The dataField corresponds to the <b>value</b> property of a <b>taskColumns/resourceColumns</b> object.
   *  sortOrders - The orders of the columns that have been sorted.
   *  sortDataTypes - The data types of the columns that have been sorted.
   */
  onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.
	* @param event. The custom event.    */
  onScrollLeftReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.
	* @param event. The custom event.    */
  onScrollRightReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Enables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.
   * @param {any} columns. An object or an array of objects with the following syntax: <ul><li><b>type</b> - indicates the type of column to filter. Possible values are 'task' or 'resource'.</li><li><b>value</b> - the value of the column that must match the value attribute of a taskColumns/resourceColumns object(e.g. 'label', 'dateStart', etc).</li></ul>.
   * @param {any} filterGroup. A Smart.Utilities.FilterGroup object. Here's an example for creating a FilterGroup object: <pre>const filterGroup = new window.Smart.Utilities.FilterGroup(), filterObject = filterGroup.createFilter('string', 'Task B', 'STARTS_WITH_CASE_SENSITIVE'); filterGroup.addFilter('or', filterObject); gantt.addFilter({ type: 'task', value: 'label' }, filterGroup);</pre>
   */
  addFilter(columns: any, filterGroup: any): void;
  /**
   * Removes all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.
   */
  clearFilters(): void;
  /**
   * Removes any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.
   */
  clearSort(): void;
  /**
   * Deselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.
   */
  clearSelection(): void;
  /**
   * Removes a previously stored state of the element from LocalStorage, based on the element's unique id attribute. <strong>Note: The element must have an id specified for this operation to work.</strong>
   */
  clearState(): void;
  /**
   * Deletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.
   */
  clearTasks(): void;
  /**
   * Deletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.
   */
  clearResources(): void;
  /**
   * Establishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
   * @param {number | string} startTaskIndex. The id of the start task or the connection string like '2-3-0'. <b>If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary</b>
   * @param {number | string} taskEndIndex?. The id of the end task.
   * @param {number} connectionType?. The type of the connection. A numeric value from 0 to 3. The connection type can be: <ul><li><b>0</b> - Start-to-Start connection.</li><li><b>1</b> - End-to-Start connection.</li><li><b>2</b> - End-to-End connection.</li><li><b>3</b> - Start-to-End connection.</li></ul>
   * @param {number} lag?. The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.
   */
  createConnection(startTaskIndex: number | string, taskEndIndex?: number | string, connectionType?: number, lag?: number): void;
  /**
   * Collapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.
   * @param {string | number} id. The id of a project item that should be collapsed.
   */
  collapse(id: string | number): void;
  /**
   * Initiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.
   */
  beginUpdate(): void;
  /**
   * Concludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.
   */
  endUpdate(): void;
  /**
   * Refreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.
   * @param {boolean} fullRefresh?. If set the GanttChart will be re-rendered completely.
   */
  refresh(fullRefresh?: boolean): void;
  /**
   * Ensures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.
   * @param {string | number} taskId. The id of the target Task.
   */
  ensureVisible(taskId: string | number): void;
  /**
   * Expands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.
   * @param {string | number} id. The id of a project task that should be expanded.
   */
  expand(id: string | number): void;
  /**
   * Exports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.
   * @param {string} dataFormat. Determines the format of the exported file. Three possible values are available: <ul><li><b>pdf</b></li><li><b>xlsx</b></li><li><b>html</b></li><li><b>tsv</b></li><li><b>csv</b></li><li><b>xml</b></li></ul>
   * @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.
   */
  exportData(dataFormat: string, callback?: any): void;
  /**
   * Retrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:<br/><br/>- **id**: A unique identifier for the connection.<br/>- **type**: The type or category of the connection (e.g., dependency, sequential, etc.).<br/>- **startTaskId**: The unique identifier of the task where the connection originates.<br/>- **endTaskId**: The unique identifier of the task where the connection terminates.<br/>- **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).<br/>- **endIndex**: The index position within the end task where the connection attaches.<br/>- **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.<br/><br/>This structure provides all necessary details for understanding the relationship and timing between connected tasks.
   * @returns {any}
   */
  getConnections(): any;
  /**
   * Returns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.
   * @param {string} connectionId. A connection id. Each connection has a unique id that is assigned when a connection is created.
   * @returns {any}
   */
  getConnectionDetails(connectionId: string): any;
  /**
   * Provides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.
   * @returns {any[]}
   */
  getState(): any[];
  /**
   * Returns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.
   * @param {any} item. A GattChartTask/GanttChartResource item object.
   * @returns {string}
   */
  getItemPath(item: any): string;
  /**
   * Returns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.
   * @param {string | number} itemId. The id/path of a task.
   * @returns {any}
   */
  getTask(itemId: string | number): any;
  /**
   * Returns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.
   * @returns {any[]}
   */
  getTasks(): any[];
  /**
   * Returns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.
   * @param {any} task. A GattChartTask object.
   * @returns {number}
   */
  getTaskIndex(task: any): number;
  /**
   * Returns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.
   * @param {any} taskId. A GanttChartTask object or it's id.
   * @returns {any}
   */
  getTaskConnections(taskId: any): any;
  /**
   * Returns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.
   * @param {any} task. A GantChartTask object.
   * @returns {any}
   */
  getTaskProject(task: any): any;
  /**
   * Returns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.
   * @param {string | number} itemId. The id/path of a resource.
   * @returns {any}
   */
  getResource(itemId: string | number): any;
  /**
   * Returns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.
   * @returns {any[]}
   */
  getResources(): any[];
  /**
   * Returns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.
   * @param {any} resource. A GanttChartResource object.
   * @returns {number}
   */
  getResourceIndex(resource: any): number;
  /**
   * Returns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.
   * @param {any} resource. A GanttChartResource object or it's id.
   * @returns {any}
   */
  getResourceTasks(resource: any): any;
  /**
   * Returns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.
   * @returns {any}
   */
  getSelectedIds(): any;
  /**
   * Returns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.
   * @returns {any}
   */
  getSelectedTasks(): any;
  /**
   * Returns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.
   * @returns {any}
   */
  getSelectedResources(): any;
  /**
   * Returns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).
   * @returns {any}
   */
  getWorkingHours(): any;
  /**
   * Conceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.
   * @returns {any}
   */
  hideTooltip(): any;
  /**
   * Determines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.
   * @param {Date} date. A javascript Date object or a string/number which represents a valid JS Date.
   */
  isWorkingDay(date: Date): void;
  /**
   * Enhancement:<br/><br/>Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.
   * @param {any[]} state?. An Array containing a valid structure of Gantt Chart tasks.
   */
  loadState(state?: any[]): void;
  /**
   * Removes all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.
   */
  removeAllConnections(): void;
  /**
   * Removes a connection between two tasks.  <br/>The function can be called in one of two ways:<br/><br/>1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").<br/>2. With a single connection string argument that describes the connection (e.g., "1->2:FS").<br/><br/>This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
   * @param {number | string} startTaskIndex. The index of the start task or the connection string like '2-3-0.
   * @param {number} taskEndIndex?. The index of the end task.
   * @param {number} connectionType?. The type of the connection. A numeric value from 0 to 3.
   * @returns {any}
   */
  removeConnection(startTaskIndex: number | string, taskEndIndex?: number, connectionType?: number): any;
  /**
   * Deletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
   * @param {any} taskStart. The start task object or it's id.
   * @param {any} taskEnd?. The end task object or it's id.
   */
  removeTaskConnection(taskStart: any, taskEnd?: any): void;
  /**
   * Displays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.
   * @param {HTMLElement} target. The HTMLElement that will be the target of the tooltip.
   * @param {string} content?. Allows to set a custom content for the Tooltip.
   */
  showTooltip(target: HTMLElement, content?: string): void;
  /**
   * Scrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.
   * @param {Date} date. The date to scroll to.
   */
  scrollToDate(date: Date): void;
  /**
   * Stores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. <strong>Note: The element must have a unique <code>id</code> attribute assigned for this functionality to work properly.</strong>
   * @param {any[]} state?. An Array containing a valid structure of Gantt Chart tasks.
   */
  saveState(state?: any[]): void;
  /**
   * Inserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.
   * @param {any} taskObject. An object describing a Gantt Chart task.
   * @param {any} project?. A number or string that represents the id of a project (e.g. '0') or a project object definition present in the GanttChart. This parameter determines the parent project of the task that will be inserted. If <b>null</b> is passed as an arguemnt the new task will be inserted at root level without a parent project.
   * @param {number} index?. The index where the new item should be inserted(e.g. 2). This index will determine the position of the newly inserted task.
   * @returns {string | number | undefined}
   */
  insertTask(taskObject: any, project?: any, index?: number): string | number | undefined;
  /**
   * Updates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.
   * @param {any} taskId. A number or string that represents the id of a task/project(e.g. '0') or the object definition of the task/project.
   * @param {any} taskObject. An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.
   */
  updateTask(taskId: any, taskObject: any): void;
  /**
   * Removes the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.
   * @param {any} taskId. A number or string that represents the id of a task or the actual item object.
   */
  removeTask(taskId: any): void;
  /**
   * Adds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.
   * @param {string | number} resourceId. A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following SmartTree syntax), or a number that represents the index of a resource.
   * @param {any} resourceObject?. An object describing a Gantt Chart resource.
   */
  insertResource(resourceId: string | number, resourceObject?: any): void;
  /**
   * Updates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.
   * @param {any} resourceId. A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following SmartTree syntax), or a number that represents the index of a resource.
   * @param {any} taskObject. An object describing a Gantt Chart resource. The properties of this object will be applied to the target resource.
   */
  updateResource(resourceId: any, taskObject: any): void;
  /**
   * Deletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.
   * @param {any} resourceId. A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following SmartTree syntax), or a number that represents the index of a resource.
   */
  removeResource(resourceId: any): void;
  /**
   * Opens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.
   * @param {any} taskId. A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').
   */
  openWindow(taskId: any): void;
  /**
   * Closes any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.
   */
  closeWindow(): void;
  /**
   * Configures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.
   */
  print(): void;
  /**
   * Enables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.
   * @param  settings. An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
   */
  setWorkTime(settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void;
  /**
   * Enables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.
   * @param {string | number} id. The id of the task to select.
   */
  selectTask(id: string | number): void;
  /**
   * Enables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.
   * @param {string | number} id. The id of the resource to select.
   */
  selectResource(id: string | number): void;
  /**
   * Enables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.
   * @param {string | number} id. The id of the task to unselect.
   */
  unselectTask(id: string | number): void;
  /**
   * Enables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.
   * @param {string | number} id. The id of the resource to unselect.
   */
  unselectResource(id: string | number): void;
  /**
   * Removes any previously defined working hours for the user or resource. This method serves as the counterpart to <b>setWorkingTime</b>, effectively clearing or resetting the working time settings that were established earlier.
   * @param  settings. An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
   */
  unsetWorkTime(settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void;
  /**
   * Automatically sorts the tasks and resources in the GanttChart when the <b>sortable</b> option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.
   * @param {any} columns. An Array of objects which determine which columns to be sorted, the sort order and the type of item to sort: task or resource. If no arguments are provided sorting will be removed. <br /> An object should have the following properties: <ul><li><b>value</b> - a string that represents the value of a <b>taskColumn</b> to sort.</li><li><b>sortOrder</b> - a string that represents the sorting order for the column: 'asc' (asscending sorting) or 'desc' (descending) are possible values. </li><li><b>type</b> - a string that represents the type of item to sort. This property determines which panel will be sorted. Two possible values: 'task', 'resource'.</li></ul>
   */
  sort(columns: any): void;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

/**Configures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior). */
export interface GanttChartDataExport {
  /**
   * Specifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.
   * Default value: false
   */
  exportFiltered?: boolean;
  /**
   * Specifies the name of the file that will be generated and saved when the export operation is completed.
   * Default value: "jqxGanttChart"
   */
  fileName?: string;
  /**
   * Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.
   * Default value: task
   */
  itemType?: GanttChartDataExportItemType | string;
}

export interface GanttChartDateMarker {
  /**
   * Determines the marker label.
   * Default value: 
   */
  label?: string | null;
  /**
   * Determines the date for the marker. The date can include time as well.
   * Default value: null
   */
  date?: string | Date | number;
  /**
   * Allows to add a custom class name to the marker.
   * Default value: "null"
   */
  className?: string;
}

export interface GanttChartResource {
  /**
   * Resource class. Used to style the resource Timeline.
   * Default value: ""
   */
  class?: string;
  /**
   * The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.
   * Default value: 8
   */
  capacity?: number;
  /**
   * Resource visibility.
   * Default value: false
   */
  hidden?: boolean | undefined;
  /**
   * Resource id. The unique id of the resource.
   * Default value: ""
   */
  id?: string;
  /**
   * Resource label.
   * Default value: 0
   */
  label?: string | null;
  /**
   * Resource min capacity
   * Default value: 0
   */
  minCapacity?: number;
  /**
   * Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
   * Default value: 0
   */
  maxCapacity?: number;
  /**
   * Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
   * Default value: 0
   */
  progress?: number;
  /**
   * Resource type.
   * Default value: 
   */
  type?: any;
  /**
   * Resource value.
   * Default value: 
   */
  value?: any;
  /**
   * Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
   * Default value: 0
   */
  workload?: string | number;
}

export interface GanttChartResourceColumn {
  /**
   * Column's label.
   * Default value: 
   */
  label?: string | null;
  /**
   * Column's value. The value shold reference an actual resoruce attribute.
   * Default value: 
   */
  value?: string | null;
  /**
   * Column's min size.
   * Default value: 0
   */
  min?: string | number | null;
  /**
   * Column's size.
   * Default value: 0
   */
  size?: string | number | null;
  /**
   * Column's format function. You can use it to customize the column label's rendering.
   * Default value: null
   */
  formatFunction?: any;
}

export interface GanttChartTask {
  /**
   * Tasks connection.
   * Default value: undefined
   */
  connections?: any;
  /**
   * Project, Task or Milestone CSS class.
   * Default value: ""
   */
  class?: string;
  /**
   * Project, Task or Milestone start date.
   * Default value: 
   */
  dateStart?: string | Date;
  /**
   * Project, Task or Milestone end date.
   * Default value: 
   */
  dateEnd?: string | Date;
  /**
   * Determines the deadline for the Project, Task or Milestone.
   * Default value: 
   */
  deadline?: string | Date;
  /**
   * Project, Task or Milestone with disabled resources.
   * Default value: false
   */
  disableResources?: boolean;
  /**
   * Project, Task or Milestone dragging is disabled.
   * Default value: false
   */
  disableDrag?: boolean;
  /**
   * Project, Task or Milestone resizing is disabled.
   * Default value: false
   */
  disableResize?: boolean;
  /**
   * Project, Task or Milestone drag enabled in the view.
   * Default value: true
   */
  dragProject?: boolean;
  /**
   * The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
   * Default value: 0
   */
  duration?: number | undefined;
  /**
   * Project, Task or Milestone expanded state in the view.
   * Default value: false
   */
  expanded?: boolean;
  /**
   * Task visibility.
   * Default value: false
   */
  hidden?: boolean | undefined;
  /**
   * Project, Task or Milestone id.
   * Default value: 
   */
  id?: string | null;
  /**
   * Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
   * Default value: null
   */
  indicators?: GanttChartTaskIndicator[];
  /**
   * Project, Task or Milestone label.
   * Default value: 
   */
  label?: string | null;
  /**
   * Project, Task or Milestone format function.
   * Default value: null
   */
  formatFunction?: any;
  /**
   * Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement. task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.
   * Default value: null
   */
  onRender?: any;
  /**
   * Project, Task or Milestone max start date.
   * Default value: 
   */
  maxDateStart?: string | Date;
  /**
   * Project, Task or Milestone min start date.
   * Default value: 
   */
  minDateStart?: string | Date;
  /**
   * Project, Task or Milestone max end date.
   * Default value: 
   */
  maxDateEnd?: string | Date;
  /**
   * Project, Task or Milestone min end date.
   * Default value: 
   */
  minDateEnd?: string | Date;
  /**
   * The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
   * Default value: 0
   */
  minDuration?: number | undefined;
  /**
   * The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
   * Default value: 0
   */
  maxDuration?: number | undefined;
  /**
   * Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
   * Default value: false
   */
  overdue?: boolean;
  /**
   * Determines the planned dateStart/dateEnd for as the baseline for the task.
   * Default value: undefined
   */
  planned?: GanttChartTaskPlanned;
  /**
   * Project, Task or Milestone progress.
   * Default value: 0
   */
  progress?: number;
  /**
   * Project, Task or Milestone resources.
   * Default value: 
   */
  resources?: any;
  /**
   * Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
   * Default value: null
   */
  segments?: GanttChartTaskSegment[];
  /**
   * Project, Task or Milestone synchronized in the view.
   * Default value: false
   */
  synchronized?: boolean;
  /**
   * Project's tasks. Only projects can have tasks.
   * Default value: 
   */
  tasks?: any;
  /**
   * Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'
   * Default value: task
   */
  type?: GanttChartTaskType | string;
  /**
   * Project, Task or Milestone value.
   * Default value: 
   */
  value?: any;
}

export interface GanttChartTaskIndicator {
  /**
   * Indicator label.
   * Default value: ""
   */
  label?: string;
  /**
   * Indicator date(can include time).
   * Default value: 
   */
  date?: string | Date;
  /**
   * A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
   * Default value: "null"
   */
  className?: string;
  /**
   * Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
   * Default value: "null"
   */
  icon?: string;
  /**
   * Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
   * Default value: "null"
   */
  tooltip?: string;
}

/**Determines the planned dateStart/dateEnd for as the baseline for the task. */
export interface GanttChartTaskPlanned {
  /**
   * Determines the planned dateStart of the task.
   * Default value: 
   */
  dateStart?: string | Date;
  /**
   * Determines the planned dateEnd of the task.
   * Default value: 
   */
  dateEnd?: string | Date;
  /**
   * Determines the planned duration of the task.
   * Default value: 0
   */
  duration?: number | undefined;
}

export interface GanttChartTaskSegment {
  /**
   * Segment label.
   * Default value: 
   */
  label?: string | null;
  /**
   * Segment start date.
   * Default value: 
   */
  dateStart?: string | Date;
  /**
   * Segment end date.
   * Default value: 
   */
  dateEnd?: string | Date;
  /**
   * Determines whether segment dragging is disabled.
   * Default value: false
   */
  disableDrag?: boolean;
  /**
   * Determines whether segment resizing is disabled.
   * Default value: false
   */
  disableResize?: boolean;
  /**
   * The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
   * Default value: 0
   */
  duration?: number | undefined;
  /**
   * Segment label format function.
   * Default value: null
   */
  formatFunction?: any;
}

export interface GanttChartTaskColumn {
  /**
   * Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
   * Default value: false
   */
  disableEdit?: boolean;
  /**
   * Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }. Another option is to use a date format string. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
   * Default value: null
   */
  dateFormat?: any;
  /**
   * Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings: 'd' - decimal numbers.'f' - floating-point numbers.'n' - integer numbers.'c' - currency numbers.'p' - percentage numbers.For adding decimal places to the numbers, add a number after the formatting striFor example: 'c3' displays a number in this format $25.256
   * Default value: null
   */
  numberFormat?: any;
  /**
   * Column's label.
   * Default value: 
   */
  label?: string | null;
  /**
   * Column's value.
   * Default value: 
   */
  value?: string | null;
  /**
   * Column's size.
   * Default value: 0
   */
  size?: string | number | null;
  /**
   * Column's min width.
   * Default value: 0
   */
  minWidth?: string | number | null;
  /**
   * Column's format function. You can use it to customize the column label's rendering.
   * Default value: null
   */
  formatFunction?: any;
  /**
   * A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments: name - the name of the task property that is going to be edited.value - the value of the task property that is going to be edited. It's also important to define a getCustomEditorValue to return the value from the custom editor.
   * Default value: null
   */
  customEditor?: any;
  /**
   * A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
   * Default value: null
   */
  getCustomEditorValue?: any;
  /**
   * A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments - editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.columnValue - the value property of the column.value - the value of the task property that the column displays(the editor value).
   * Default value: null
   */
  setCustomEditorValue?: any;
}

/**Controls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas. */
export interface GanttChartTooltip {
  /**
   * Specifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.
   * Default value: false
   */
  arrow?: boolean;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).
   * Default value: 50
   */
  delay?: number;
  /**
   * Determines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Specifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.
   * Default value: 
   */
  offset?: number[];
}

declare global {
    interface Document {
        createElement(tagName: "smart-gantt-chart"): GanttChart;
        querySelector(selectors: "smart-gantt-chart"): GanttChart | null;
        querySelectorAll(selectors: "smart-gantt-chart"): NodeListOf<GanttChart>;
        getElementsByTagName(qualifiedName: "smart-gantt-chart"): HTMLCollectionOf<GanttChart>;
        getElementsByName(elementName: "smart-gantt-chart"): NodeListOf<GanttChart>;
    }
}

/**Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content. */
export declare type GanttChartDataExportItemType = 'task' | 'resource';
/**Specifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements. */
export declare type GanttDayFormat = '2-digit' | 'numeric' | 'long' | 'short' | 'narrow';
/**Specifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application. */
export declare type Duration = 'day' | 'hour' | 'minute' | 'second' | 'milisecond';
/**Specifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements. */
export declare type HourFormat = 'default' | '2-digit' | 'numeric';
/**Specifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar. */
export declare type MonthScale = 'day' | 'week';
/**Specifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation. */
export declare type QuarterFormat = 'numeric' | 'long' | 'short';
/**Specifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s <b>view</b> property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals). */
export declare type GanttChartResourceTimelineMode = 'diagram' | 'histogram' | 'custom';
/**Specifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience. */
export declare type GanttChartResourceTimelineView = 'hours' | 'tasks' | 'custom';
/**Defines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled. */
export declare type GanttChartSelectionMode = 'one' | 'many' | 'extended';
/**Specifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers. */
export declare type GanttChartSortMode = 'none' | 'one' | 'many';
/**Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task' */
export declare type GanttChartTaskType = 'project' | 'milestone' | 'task';
/**Specifies the date range displayed on the timeline. Accepted values include:<br/><br/><br/>day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.
<br/>week: The timeline presents each day within a single week, providing a broader weekly overview.
<br/>month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.
<br/>year: The timeline displays each month of the year, providing a high-level annual perspective.
<br/>resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.
<br/><br/><br/>The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline. */
export declare type GanttChartView = 'day' | 'week' | 'month' | 'quarter' | 'year';
/**Specifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation. */
export declare type WeekFormat = 'long' | 'numeric';
export interface GaugeProperties {
  /**
   * Specifies the style or format of the gauge's indicator, such as a needle, bar, or marker, which visually represents the current value on the gauge.
   * Default value: needle
   */
  analogDisplayType?: GaugeAnalogDisplayType | string;
  /**
   * Configures or retrieves the current animation mode. When this property is set to 'none', all animations are disabled, resulting in static content with no animated transitions or effects. Setting a different value enables animation according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Defines or retrieves the duration of the gauge's animation effect, measured in milliseconds. This property only applies when the animation setting is enabled (i.e., its value is not 'none'). If animation is set to 'none', this duration has no effect.
   * Default value: 300
   */
  animationDuration?: number;
  /**
   * When the coerce property is set to true, any value provided will automatically be adjusted to the nearest valid value based on the defined interval. This ensures that the resulting value always conforms to the step size specified by the interval property, even if the original input does not exactly match an allowed value.
   * Default value: false
   */
  coerce?: boolean;
  /**
   * Determines whether custom tick marks, which may be placed at uneven intervals, are displayed on the plot. The specific positions of these custom ticks are specified using the customTicks property. This option allows you to override the default tick placement and use your own set of tick values.
   * Default value: false
   */
  customInterval?: boolean;
  /**
   * When customInterval is enabled, you can define a specific list of tick values to be displayed on the plot. If coerce is set to true, any input value will automatically snap to the nearest tick from this predefined list, ensuring that only these tick values can be selected or represented.
   * Default value: 0,50,100
   */
  customTicks?: number[];
  /**
   * Specifies the format of the date labels that appear when the mode property is set to 'date'. This determines how dates are displayed on the labels (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY').
   * Default value: "d"
   */
  dateLabelFormatString?: string;
  /**
   * Specifies or retrieves the character used as the decimal separator in numeric values. This property allows you to define which character (such as "." or ",") separates the integer part from the fractional part in numbers when displaying or parsing numeric data.
   * Default value: "".""
   */
  decimalSeparator?: string;
  /**
   * Determines whether the element's content is shown or hidden on the digital interface. When enabled, the element is visible to users; when disabled, the element is not displayed on the screen.
   * Default value: false
   */
  digitalDisplay?: boolean;
  /**
   * Specifies the placement of the digital display within the element, allowing you to control its alignment (e.g., top, bottom, left, right, or center) relative to the element’s boundaries.
   * Default value: bottom
   */
  digitalDisplayPosition?: GaugeDigitalDisplayPosition | string;
  /**
   * Determines whether the element is interactive or not. When enabled, the element responds to user actions (such as clicks or keyboard input); when disabled, the element appears inactive and does not accept user interaction.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Callback function that enables custom rendering of the needle element when using the 'analogDisplayType' setting. This function is called during the drawing process, allowing you to define the appearance and behavior of the needle beyond the default rendering. Only applicable when the display type is set to 'analog'.
   * Default value: null
   */
  drawNeedle?: any;
  /**
   * Defines or retrieves the end angle of the gauge, specifying where the gauge’s scale terminates. The angle is measured in degrees, starting from the gauge’s initial position (commonly 0 degrees). Adjusting this property determines the extent of the gauge’s arc and affects how the scale is rendered visually.
   * Default value: 210
   */
  endAngle?: number;
  /**
   * "When the 'coerce' property is set to 'true', all input values are automatically adjusted to fall within the specified interval. Any value outside the interval will be coerced to the nearest boundary value of the interval."
   * Default value: 1
   */
  interval?: number;
  /**
   * Specifies the orientation of the gauge. When set to true, the starting and ending positions of the gauge are reversed, causing the gauge to be displayed in the opposite direction. If false, the gauge follows its default direction. Use this option to customize the gauge's flow based on your application's requirements.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * A callback function that allows you to customize the formatting of the values shown within the gauge labels. This function receives the raw value as an argument and should return the formatted string to be displayed. Use this to control the appearance, number formatting, units, or localization of label values inside the gauge.
   * Default value: null
   */
  labelFormatFunction?: any;
  /**
   * Specifies whether the labels within the element are displayed or hidden. When set to true, the labels inside the element are visible; when set to false, the labels are not shown. This property allows you to control the display of label text within the element.
   * Default value: all
   */
  labelsVisibility?: LabelsVisibility | string;
  /**
   * Provides a way to retrieve or assign the unlockKey property, which is a unique code required to activate or gain access to the product's full features. Use this property to securely manage the product's access control.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current locale setting, typically defined as a language and regional code (e.g., "en-US" for U.S. English). This property works together with the messages property to determine which localized message set is displayed, enabling proper language and formatting support for users based on their selected locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized strings are structured or displayed before they are delivered to your application, enabling support for advanced formatting, variable interpolation, or context-specific adaptations.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Controls whether the element displays data using a logarithmic scale. When enabled, values are plotted on a logarithmic axis, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Specifies the upper limit for the element's scale, preventing it from being scaled beyond this maximum value. This setting ensures that when the element is resized or transformed, its scale will not exceed the defined maximum threshold.
   * Default value: 100
   */
  max?: number;
  /**
   * Specifies the event or condition that triggers the update of the element’s value, such as on user input, when focus is lost, or after a specific action occurs. This setting controls how and when changes to the element's value are recognized and processed in the application.
   * Default value: switchWhileDragging
   */
  mechanicalAction?: DragMechanicalAction | string;
  /**
   * Specifies or retrieves an object containing the text strings displayed by the widget, allowing for customization and localization of all user-facing messages. This property works together with the locale property to support multiple languages by providing translated strings for different locales. Use this to ensure the widget's interface is fully adaptable to users' language preferences.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "significantPrecisionDigits": ": the properties significantDigits and precisionDigits cannot be set at the same time.",
   *     "invalidMinOrMax": " value. Max cannot be lower than Min.",
   *     "noInteger": ": precisionDigits could be set only on \"floatingPoint\" scaleType."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the lowest allowable value for the element’s scale, preventing the element from being scaled below this threshold. This property ensures that the element cannot appear smaller than the defined minimum scale value.
   * Default value: 0
   */
  min?: number;
  /**
   * Specifies whether the element is configured to handle numerical values or date values, enabling appropriate functionality and validation for each data type.
   * Default value: numeric
   */
  mode?: ScaleMode | string;
  /**
   * Specifies or retrieves the element’s name attribute, which serves as the identifier for the element’s value when form data is submitted to the server. This name is used as the key in the name-value pair sent with the form submission, enabling the server-side application to access the corresponding data.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the angle or position of the needle when analogDisplayType is set to 'needle'. This value controls where the needle points on the analog display, allowing customization of its exact placement based on the current data or setting.
   * Default value: center
   */
  needlePosition?: GaugeNeedlePosition | string;
  /**
   * Specifies how many digits should be displayed after the decimal point for numeric values. This property is only applicable when the scaleType is set to 'floatingPoint'; it has no effect for other scale types.
   * Default value: null
   */
  precisionDigits?: number;
  /**
   * This property is an array containing multiple objects, where each object defines a distinct range. Each range represents a colored area characterized by its own specific size and properties, such as start and end values, color, and label. These ranges allow you to visually differentiate segments according to predefined criteria on a graphical interface or data visualization component.
   * Default value: 
   */
  ranges?: {startValue: number, endValue: number, className: string}[];
  /**
   * When the element is set to read-only, users are unable to modify its value or content; they can view the information but cannot interact with or edit the element in any way.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies whether the element should use right-to-left (RTL) alignment to support languages and locales that utilize right-to-left fonts, such as Arabic or Hebrew. When enabled, the element's scale is inverted, and all labels and digital displays are repositioned and rendered in a right-to-left orientation to ensure proper localization and readability for RTL scripts. This property can be both set and retrieved.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the placement of the scale within the element, indicating where the scale will appear (e.g., top, bottom, left, or right) relative to the element.
   * Default value: inside
   */
  scalePosition?: GaugeScalePosition | string;
  /**
   * Specifies the data type used for the gauge’s value and defines the corresponding scale (e.g., linear, logarithmic). This setting ensures that input values are interpreted correctly and displayed with the appropriate measurement scale on the gauge.
   * Default value: floatingPoint
   */
  scaleType?: ScaleType | string;
  /**
   * Specifies whether numerical values should be displayed using scientific notation (e.g., 1.23e+4) instead of standard decimal formatting. Set to true to enable scientific notation, or false to display numbers in regular decimal form.
   * Default value: false
   */
  scientificNotation?: boolean;
  /**
   * This property determines whether the gauge’s range indicators are displayed on the gauge component. When set to true, the range segments (such as colored bands or sections representing value intervals) will be visible on the gauge; when set to false, these range indicators will be hidden.
   * Default value: false
   */
  showRanges?: boolean;
  /**
   * Controls whether units are shown or hidden in the user interface, allowing you to toggle the display of measurement units (e.g., px, %, em) alongside values.
   * Default value: false
   */
  showUnit?: boolean;
  /**
   * Calculates the number of significant digits present in a given number. This property is relevant only when the scaleType is set to 'integer', ensuring that the digit count pertains exclusively to whole numbers, not decimals or other formats.
   * Default value: null
   */
  significantDigits?: number | null;
  /**
   * Specifies the method used to determine the overall dimensions (width and height) of the Gauge component, affecting how it adapts to its parent container or specified sizing rules.
   * Default value: circle
   */
  sizeMode?: GaugeSizeMode | string;
  /**
   * Sets or retrieves the starting angle of the gauge. This property defines the position, in degrees, where the gauge's scale begins, measured clockwise from the reference point (typically the rightmost horizontal axis at 0 degrees). Adjusting this value changes where the gauge arc starts, allowing for customized gauge orientations.
   * Default value: -30
   */
  startAngle?: number;
  /**
   * Sets or retrieves the visual theme applied to the element, allowing you to customize or query its overall appearance—such as colors, backgrounds, and style variations—to match different design schemes.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the exact placement of tick marks along the Gauge's scale, such as inside, outside, or across the gauge axis. This setting controls where the ticks appear relative to the gauge track for improved readability and customization.
   * Default value: scale
   */
  ticksPosition?: TicksPosition | string;
  /**
   * Controls whether the ticks are displayed or hidden on the axis. If set to true, ticks will be visible; if false, ticks will be hidden. This option allows you to toggle the tick marks for improved chart customization.
   * Default value: minor
   */
  ticksVisibility?: TicksVisibility | string;
  /**
   * Specifies whether the element can receive keyboard focus. When set to true, the element can be focused programmatically or via user interaction (such as using the Tab key); when set to false, the element will be excluded from the tab order and cannot be focused.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies or retrieves the unit of measurement (such as pixels, percentage, or em) that is applied to the values displayed on the element's scale. This determines how the scale values are interpreted and rendered for the element.
   * Default value: "kg"
   */
  unit?: string;
  /**
   * Defines validation constraints for the value by specifying minimum and maximum allowable limits. Ensures that the value entered falls within the specified range.
   * Default value: strict
   */
  validation?: Validation | string;
  /**
   * Sets or retrieves the current value of the element. If the scaleType property is set to 'date', the value must be a date object or a valid date string; otherwise, the value should match the expected data type for the current scaleType.
   * Default value: 0
   */
  value?: string | number | Date;
  /**
   * Gets or sets the word length used for values. This property is only applicable when scaleType is set to 'integer'; it has no effect for other scale types.
   * Default value: int32
   */
  wordLength?: WordLength | string;
}
/**
 Gauge displays an indicator within a range of values.
*/
export interface Gauge extends BaseElement, GaugeProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value of the element is modified by the user or through a script, typically after the element loses focus or its value is updated programmatically. It allows you to detect and respond to changes in the element’s content.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value of the element.
   *  value - The new value of the element.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Sets keyboard focus to the specified element, making it the active element for user input and interaction. This allows users to immediately begin typing or interacting with the element without manually clicking or tabbing to it. Commonly used for form fields or interactive components to improve accessibility and user experience.
   */
  focus(): void;
  /**
   * Returns the optimal size of the element, including the current width and the calculated height based on the layout and dimensions of its internal child elements. This ensures the element can fully contain its content without overflow, reflecting the most appropriate size for display.
   * @returns {any}
   */
  getOptimalSize(): any;
  /**
   * Retrieves or updates the current value displayed by the gauge component. Use this to programmatically read the gauge’s status or set it to a new value within its defined range.
   * @param {string | number | Date} value?. The value to be set. If no parameter is passed, returns the current value of the gauge. The value can be a date only when <b>scaleType</b> is 'date'.
   * @returns {string}
   */
  val(value?: string | number | Date): string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-gauge"): Gauge;
        querySelector(selectors: "smart-gauge"): Gauge | null;
        querySelectorAll(selectors: "smart-gauge"): NodeListOf<Gauge>;
        getElementsByTagName(qualifiedName: "smart-gauge"): HTMLCollectionOf<Gauge>;
        getElementsByName(elementName: "smart-gauge"): NodeListOf<Gauge>;
    }
}

/**Specifies the style or format of the gauge's indicator, such as a needle, bar, or marker, which visually represents the current value on the gauge. */
export declare type GaugeAnalogDisplayType = 'needle' | 'fill' | 'line';
/**Specifies the placement of the digital display within the element, allowing you to control its alignment (e.g., top, bottom, left, right, or center) relative to the element’s boundaries. */
export declare type GaugeDigitalDisplayPosition = 'bottom' | 'center' | 'right' | 'top';
/**Specifies whether the labels within the element are displayed or hidden. When set to true, the labels inside the element are visible; when set to false, the labels are not shown. This property allows you to control the display of label text within the element. */
export declare type LabelsVisibility = 'all' | 'endPoints' | 'none';
/**Specifies the event or condition that triggers the update of the element’s value, such as on user input, when focus is lost, or after a specific action occurs. This setting controls how and when changes to the element's value are recognized and processed in the application. */
export declare type DragMechanicalAction = 'switchUntilReleased' | 'switchWhenReleased' | 'switchWhileDragging';
/**Specifies whether the element is configured to handle numerical values or date values, enabling appropriate functionality and validation for each data type. */
export declare type ScaleMode = 'date' | 'numeric';
/**Specifies the angle or position of the needle when analogDisplayType is set to 'needle'. This value controls where the needle points on the analog display, allowing customization of its exact placement based on the current data or setting. */
export declare type GaugeNeedlePosition = 'center' | 'edge';
/**Specifies the placement of the scale within the element, indicating where the scale will appear (e.g., top, bottom, left, or right) relative to the element. */
export declare type GaugeScalePosition = 'inside' | 'outside' | 'none';
/**Specifies the data type used for the gauge’s value and defines the corresponding scale (e.g., linear, logarithmic). This setting ensures that input values are interpreted correctly and displayed with the appropriate measurement scale on the gauge. */
export declare type ScaleType = 'floatingPoint' | 'integer';
/**Specifies the method used to determine the overall dimensions (width and height) of the Gauge component, affecting how it adapts to its parent container or specified sizing rules. */
export declare type GaugeSizeMode = 'auto' | 'circle' | 'none';
/**Specifies the exact placement of tick marks along the Gauge's scale, such as inside, outside, or across the gauge axis. This setting controls where the ticks appear relative to the gauge track for improved readability and customization. */
export declare type TicksPosition = 'scale' | 'track';
/**Controls whether the ticks are displayed or hidden on the axis. If set to true, ticks will be visible; if false, ticks will be hidden. This option allows you to toggle the tick marks for improved chart customization. */
export declare type TicksVisibility = 'major' | 'minor' | 'none';
/**Gets or sets the word length used for values. This property is only applicable when scaleType is set to 'integer'; it has no effect for other scale types. */
export declare type WordLength = 'int8' | 'int16' | 'int32' | 'int64' | 'uint8' | 'uint16' | 'uint32' | 'uint64';
export interface GridProperties {
  /**
   * An object that defines configurable options for customizing the visual appearance of the grid, including properties such as line color, spacing, background style, and border visibility.
   * Default value: [object Object]
   */
  appearance?: GridAppearance;
  /**
   * An object that defines configuration options for integrating AI capabilities within the grid component. This includes settings for enabling AI features, specifying AI service endpoints, setting authentication credentials, and customizing how the grid interacts with AI-powered functionalities.
   * Default value: [object Object]
   */
  ai?: GridAi;
  /**
   * An object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings.
   * Default value: [object Object]
   */
  behavior?: GridBehavior;
  /**
   * Sets or retrieves the id of the currently active user. This value must match the id of one of the entries in the users property or array. The active user's privileges and access rights are determined based on their corresponding user object. If no current user is specified (i.e., the id is unset or invalid), the default privileges for the element will apply according to its properties, potentially restricting or allowing access based on default settings.
   * Default value: 
   */
  currentUser?: string | number;
  /**
   * Provides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid.
   * Default value: [object Object]
   */
  columnHeader?: GridColumnHeader;
  /**
   * The clipboard property controls whether users can perform clipboard operations—such as copying (Ctrl+C), cutting (Ctrl+X), and pasting (Ctrl+V)—using keyboard shortcuts within the application. Setting this property to true enables these keyboard shortcuts for clipboard actions; setting it to false disables them, preventing users from using keyboard navigation for copying, cutting, or pasting content.
   * Default value: [object Object]
   */
  clipboard?: GridClipboard;
  /**
   * The columns property defines the collection of columns displayed within the Smart.Grid component. Each column configuration specifies how data is presented and interacted with. Through this property, you can control essential aspects such as column headers, data field bindings, sorting, filtering, formatting, alignment, visibility, and more. The columns property gives you full control over the structure, appearance, and behavior of the grid's columns, enabling advanced customization of both data presentation and user experience.
   * Default value: []
   */
  columns?: {label: string, dataField: string}[] | string[] | number | GridColumn[];
  /**
   * The Context Menu is the drop-down menu that appears when a user right-clicks on a row within the Grid. This menu provides quick access to actions such as deleting a row or editing a cell or entire row, depending on the current editing mode configured for the Grid. You can customize the Context Menu by using the 'contextMenuItemCustom' option in the Grid's dataSource. This option lets you add your own custom menu items to enhance or extend the menu's functionality.Additionally, if you want to completely replace the default context menu with your own, you can use the 'selector' property. Set this property to the ID of a Smart.Menu component to display your custom menu when the user right-clicks on a row in the Grid.
   * Default value: [object Object]
   */
  contextMenu?: GridContextMenu;
  /**
   * The Column Menu is a contextual drop-down menu that appears when you click the drop-down button in a column header, which becomes visible upon hovering over the header. This menu provides various options for customizing the behavior and appearance of the selected column. Common actions include sorting the grid by the column, applying filters to show or hide specific data, and grouping the grid rows based on the column’s values. The Column Menu offers an intuitive way for users to interact with and tailor the data grid to meet their specific needs.
   * Default value: [object Object]
   */
  columnMenu?: GridColumnMenu;
  /**
   * Provides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group.
   * Default value: 
   */
  columnGroups?: GridColumnGroup[];
  /**
   * 
   * Default value: false
   */
  dropDownMode?: boolean;
  /**
   * Defines or retrieves the rules and settings for conditional formatting applied to the Grid's cells, allowing you to customize cell appearance (such as background color, font style, or icons) based on specific conditions or cell values.
   * Default value: null
   */
  conditionalFormatting?: GridConditionalFormatting[];
  /**
   * Configures the data and display settings for the Grid Chart, enabling data visualization in a tabular grid format. This includes specifying the structure, appearance, and interactive features of the chart to present complex data clearly and intuitively.
   * Default value: [object Object]
   */
  charting?: GridCharting;
  /**
   * Configures the checkbox options for the TreeGrid component, allowing you to enable or customize checkbox display, selection behavior, and interaction within the hierarchical grid structure.
   * Default value: [object Object]
   */
  checkBoxes?: GridCheckBoxes;
  /**
   * Configures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences.
   * Default value: [object Object]
   */
  dataExport?: GridDataExport;
  /**
   * Specifies the source from which the grid retrieves its data. The dataSource property accepts either an instance of JQX.DataAdapter for advanced data management and operations, or a standard Array containing the data records to be displayed in the grid. This flexibility allows developers to connect the grid to various data formats and structures, making data binding straightforward and versatile.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Configures the grid’s data source when the dataSource property is assigned either a JavaScript array (for local data) or a URL (for remote data). This setting determines how the grid retrieves and displays its data, supporting both direct array binding and remote data fetching via HTTP requests.
   * Default value: [object Object]
   */
  dataSourceSettings?: GridDataSourceSettings;
  /**
   * Provides comprehensive configuration options for controlling the grid's editing behavior, including enabling or disabling editing features, specifying editing modes (such as inline, popup, or batch), setting validation rules, and customizing editors for specific columns.
   * Default value: [object Object]
   */
  editing?: GridEditing;
  /**
   * Provides detailed configuration options for the grid's filtering functionality, including filter types, default filter values, filter operators, and custom filter logic for columns. This determines how data within the grid can be searched, narrowed, or displayed based on user-defined criteria.
   * Default value: [object Object]
   */
  filtering?: GridFiltering;
  /**
   * Provides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings.
   * Default value: [object Object]
   */
  footer?: GridFooter;
  /**
   * Enables or retrieves the ability to use Excel-style formulas as cell values within the table. Formulas must begin with an equal sign (=) and will be automatically recalculated whenever the referenced cell values are updated. This functionality relies on the third-party, free formula-parser plugin, so you must include the file 'formula-parser.min.js' in your project for this feature to work properly.
   * Default value: false
   */
  formulas?: boolean;
  /**
   * Provides detailed configuration options for the grid's data grouping functionality, specifying how rows are grouped, the grouping criteria, and related display settings within the grid.
   * Default value: [object Object]
   */
  grouping?: GridGrouping;
  /**
   * Provides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings.
   * Default value: [object Object]
   */
  groupHeader?: GridGroupHeader;
  /**
   * Provides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns.
   * Default value: [object Object]
   */
  header?: GridHeader;
  /**
   * An object that defines configuration options for the layout of the grid, including properties such as the number of columns, row and column spacing, alignment, and overall grid arrangement. This object allows you to customize the appearance and structure of the grid according to your requirements.
   * Default value: [object Object]
   */
  layout?: GridLayout;
  /**
   * Sets or retrieves the unlockKey used to authorize and access the full functionality of the product. The unlockKey serves as a security credential to enable locked or premium features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language code to be used for displaying messages. When set, it determines which localized messages from the messages property are shown to the user. This property can be used to retrieve the current language or update it dynamically at runtime.
   * Default value: "en"
   */
  locale?: string;
  /**
   * 'Key Handling:'  You can customize how key presses are handled by defining key mappings within the configuration. For each key (e.g., '"Enter"'), you can assign:- 'Another key as the value' (e.g., '"Enter": "Tab"'): When the specified key is pressed, it will be treated as if the mapped key was pressed instead.- 'A predefined action' (e.g., ''copy'', ''copyPrev'', ''copyNext'', ''delete''): When the key is pressed, the associated action will be executed.- 'A custom function': Assign a function as the value to execute custom logic whenever the key is pressed.This allows you to remap keys, trigger built-in actions, or define entirely custom behaviors based on key events in your application.
   * Default value: null
   */
  keys?: any;
  /**
   * Assigns values to the messages property, which typically contains an array or object representing individual messages or notifications. This function or setting updates the content, ensuring that the correct message data is stored or displayed.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * Callback function invoked each time the Grid component requires a cell value for rendering. By implementing this function, you can customize or override the default logic used to retrieve and display cell values, enabling support for computed values, formatted data, or specialized rendering based on row or column context.
   * Default value: null
   */
  onCellValue?: {(cell: GridCell): void};
  /**
   * Callback function that is triggered whenever a cell's value is about to be updated. You can use this function, for example, to perform an Ajax call to your server in order to validate or process the proposed cell changes before they are applied. If the server response indicates that the changes are valid, call the confirm function provided in the callback to finalize and apply the update. This allows for asynchronous validation and external control over cell modification in your data grid.
   * Default value: null
   */
  onCellUpdate?: {(cells: GridCell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void};
  /**
   * A callback function that is invoked each time a cell is rendered in the grid. Use this function to modify or customize the properties of the GridCell before it is displayed to the user. This allows you to dynamically apply styles, set attributes, or inject content based on the cell's data or state.
   * Default value: null
   */
  onCellRender?: {(cell: GridCell): void};
  /**
   * A callback function that is triggered when a cell enters edit mode. This function allows you to implement custom logic before editing begins. If the function returns false, the cell edit operation will be canceled and the cell will remain in its previous state. Use this to validate whether editing should be permitted based on your criteria.
   * Default value: null
   */
  onCellBeginEdit?: {(id: string, dataField: string, value: any): boolean};
  /**
   * A callback function that is triggered when a cell editing operation finishes in the Grid. This function is typically used together with the 'editing.readOnlyEdit' property set to true, which allows cells to appear read-only but still be editable through custom logic. The primary purpose of this callback is to handle post-editing actions, such as validating the input, processing changes, or updating the cell value in the Grid after the editing session ends. Use this function to programmatically update the data source or UI based on the user’s edits.
   * Default value: null
   */
  onCellEditRequest?: {(id: string, dataField: string, value: any, oldValue: any, data: any): void};
  /**
   * Invoked whenever a cell's value is updated, this callback function receives relevant information about the change—such as the new value, the previous value, and cell metadata—allowing you to handle updates, trigger side effects, or implement custom logic in response to user edits.
   * Default value: null
   */
  onCellValueChanged?: {(id: string, dataField: string, value: any): boolean};
  /**
   * Callback function that is executed before the grid initialization process begins. At this stage, the Grid's Virtual DOM has not yet been created, so any DOM manipulations or operations on grid elements should be avoided within this callback. Use this function to perform setup tasks or configure options that need to occur prior to the creation of the grid's internal structure.
   * Default value: null
   */
  onBeforeInit?: {(): void};
  /**
   * Callback function invoked during the grid initialization process, specifically after the Grid's Virtual DOM has been created. This allows you to perform custom actions or setup logic once the grid structure is ready in the DOM, but before it is rendered to the user.
   * Default value: null
   */
  onInit?: {(): void};
  /**
   * Callback function that is executed after the grid has completed initialization and its Virtual DOM has been fully constructed. This allows you to perform any additional setup or actions that require the grid and its DOM elements to be ready.
   * Default value: null
   */
  onAfterInit?: {(): void};
  /**
   * Callback function (chart: JQX.Chart) invoked after the chart has been fully initialized. Use this function to perform additional configuration or customization of the chart instance, such as modifying chart options, adding event listeners, or updating data before the chart is rendered to the user. This allows you to tailor the chart's appearance and behavior to meet specific application requirements.
   * Default value: null
   */
  onChartInit?: any;
  /**
   * A callback function that is executed immediately after the grid has finished rendering, allowing you to perform additional actions or updates once the grid display is complete.
   * Default value: null
   */
  onRender?: any;
  /**
   * Callback function invoked after the grid has been rendered for the first time and all data bindings have been completed. At this point, the component is fully initialized and ready for interaction or further manipulation.
   * Default value: null
   */
  onLoad?: any;
  /**
   * Callback function (event: KeyboardEvent) that is invoked whenever the grid component has focus and the user presses any keyboard key. This function allows you to handle and respond to keyboard interactions within the grid, accessing the pressed key and related event properties via the KeyboardEvent object.
   * Default value: null
   */
  onKey?: {(event: KeyboardEvent): void};
  /**
   * Callback function invoked during the initialization of a row. Use this function to customize row properties, apply conditional logic, or modify row data before it is rendered. The function receives the row's data and context as parameters, allowing for dynamic adjustments based on specific requirements.
   * Default value: null
   */
  onRowInit?: {(index: number, row: GridRow): void};
  /**
   * Callback function invoked during the initialization of a row’s detail section. This function is triggered before the row detail is rendered, allowing you to customize or modify the detail content. Row details can be displayed either directly beneath the associated row in the main data table, or within a separate dialog window, depending on the configuration.
   * Default value: null
   */
  onRowDetailInit?: {(index: number, row: GridRow, details: HTMLElement): void};
  /**
   * Callback function that is invoked when the details of a table row are being updated. This function allows you to implement custom logic or handle events during the row detail update process.
   * Default value: null
   */
  onRowDetailUpdated?: {(index: number, row: GridRow, details: HTMLElement): void};
  /**
   * A callback function that is triggered whenever a row’s edit history is updated. This function is invoked only if the 'storeHistory' property is enabled, ensuring that all changes made to a row are recorded. Use this callback to handle actions such as syncing changes, auditing edits, or updating related UI components whenever a row’s edit history changes.
   * Default value: null
   */
  onRowHistory?: {(index: number, row: GridRow, history: any[]): void};
  /**
   * Callback function triggered when the style of a row is updated. This event occurs whenever a row's styling changes, either through the row dialog interface or programmatically via the setRowStyle method. The callback receives relevant information about the updated row and its new style, enabling custom handling or additional processing in response to the style change.
   * Default value: null
   */
  onRowStyle?: {(index: number, row: GridRow, history: any[]): void};
  /**
   * Callback function that is executed immediately after a new row has been successfully inserted. It receives relevant information about the newly inserted row as arguments, allowing you to perform custom actions or post-processing in response to the insertion event.
   * Default value: null
   */
  onRowInserted?: {(index: number[], row: GridRow[]): void};
  /**
   * A callback function that is executed immediately after a row has been successfully removed from the data set or table. This function receives relevant information about the removed row, allowing you to perform custom actions such as updating the UI, triggering notifications, or handling related cleanup tasks.
   * Default value: null
   */
  onRowRemoved?: {(indexes: number[], rows: GridRow[]): void};
  /**
   * Callback function triggered when a row's cell values are updated. Use this function to perform custom actions—such as making an AJAX request to the server to validate the edited data. After receiving validation results, if the changes are approved, call the confirm function to finalize the update.
   * Default value: null
   */
  onRowUpdate?: {(index: number[], row: GridRow[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void};
  /**
   * Callback function that is invoked immediately after a row has been updated. Receives the updated row data and additional context as parameters, enabling custom logic or side effects in response to row changes.
   * Default value: null
   */
  onRowUpdated?: {(index: number[], row: GridRow[]): void};
  /**
   * This callback function is invoked by the Grid component, if provided, for each row. It is used to determine and return the CSS class name(s) that should be applied to the specific row, allowing for dynamic or conditional styling based on the row data or index.
   * Default value: null
   */
  onRowClass?: {(index: number, data: any, row: GridRow[]): void};
  /**
   *   "This callback function, when provided to the Grid, is invoked for each cell to determine the CSS class(es) that should be applied. Use this function to dynamically assign one or more CSS classes to individual cells based on their data, state, or other custom logic."
   * Default value: null
   */
  onCellClass?: {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void};
  /**
   * Callback function that is invoked after a column has been initialized. This function receives the column instance as a parameter and can be used to modify column properties, apply custom settings, or perform additional setup specific to that column. Use this callback to tailor column behavior or appearance during the initialization process.
   * Default value: null
   */
  onColumnInit?: {(index: number, column: GridColumn): void};
  /**
   * Callback function that is invoked whenever a new column is successfully inserted into the structure or component. This function receives relevant information about the inserted column, allowing you to perform custom logic or updates in response to the insertion event.
   * Default value: null
   */
  onColumnInserted?: {(index: number, column: GridColumn): void};
  /**
   * Callback function that is triggered after a column has been successfully removed. This function receives relevant information about the removed column as its arguments, allowing you to perform additional actions or updates in response to the removal event.
   * Default value: null
   */
  onColumnRemoved?: {(index: number, column: GridColumn): void};
  /**
   * Callback function that is invoked whenever the data in a column is updated. Receives relevant information about the updated column, such as the column identifier and the new value, allowing you to implement custom behavior in response to column changes.
   * Default value: null
   */
  onColumnUpdated?: {(index: number, column: GridColumn): void};
  /**
   * Callback function that is invoked immediately after a column has been successfully cloned. This function receives relevant context or event data as its arguments, allowing you to perform custom logic or side effects in response to the cloning action.
   * Default value: null
   */
  onColumnClone?: {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void};
  /**
   * Callback function that is triggered when a command is executed.  - The name parameter specifies the name of the command.  - The command parameter refers to the function that implements the command’s logic.  - The details parameter contains the arguments for the command, as provided by the Grid.  - The handled parameter is a flag you can set to true within the callback to prevent the Grid from executing the command’s default behavior, allowing you to fully override or customize the command’s handling.
   * Default value: null
   */
  onCommand?: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void};
  /**
   * Provides detailed configuration options for managing pagination, including parameters such as the number of items per page, current page index, and total number of pages. This section ensures efficient data retrieval and navigation across multiple pages of results.
   * Default value: [object Object]
   */
  paging?: GridPaging;
  /**
   * Provides detailed configuration options for pager controls, including settings for page size, navigation buttons, and display style. These options determine how pagination is displayed and how users interact with paged content in the interface.
   * Default value: [object Object]
   */
  pager?: GridPager;
  /**
   * Configures or updates the detailed information or content associated with a specific row, often used to display additional data or expanded views for that row.
   * Default value: [object Object]
   */
  rowDetail?: GridRowDetail;
  /**
   * Sets or gets the CSS class rules for table rows. This property allows you to conditionally apply different CSS class names to rows based on custom logic. You provide an object where the keys are CSS class names and the values are functions that determine whether the class should be applied to a particular row.Each function receives a settings object with the following properties:- 'index': The numerical index of the current row.- 'data': The data object for the current row.- 'row': The raw row element or reference (depending on the implementation).- 'api': A reference to the table's API for advanced operations.'Example usage:''''jsrowCSSRules: {  'cell-class-1': settings => settings.data.quantity === 5,  'cell-class-2': settings => settings.data.quantity   'cell-class-3': settings => settings.data.quantity > 5}'''In this example, based on the 'quantity' property of the row's data, a different CSS class will be applied to that row. Multiple rules can be defined, and each will be evaluated for every row. If the function returns 'true', the corresponding class will be added to the row.
   * Default value: null
   */
  rowCSSRules?: any;
  /**
   * Gets or sets a value that determines whether the element's alignment is configured for right-to-left (RTL) languages, ensuring proper layout and text direction for locales such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * The rows property contains an array of objects, with each object representing a single row in the grid. This property defines all the data entries that are rendered and displayed as rows within the grid component. Each element in the rows array should align with the column definitions, ensuring that the grid displays structured and consistent data across all rows.
   * Default value: 
   */
  rows?: GridRow[];
  /**
   * Configures the scroll mode behavior, allowing you to define how scrolling is handled within the component or page. This setting determines options such as smooth or instant scrolling, vertical or horizontal direction, and any custom scroll-related parameters.
   * Default value: physical
   */
  scrolling?: Scrolling | string;
  /**
   * Provides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized.
   * Default value: [object Object]
   */
  summaryRow?: GridSummaryRow;
  /**
   * Configures the grid's state-related settings, including properties such as selection, sorting, filtering, pagination, and layout. This determines how the grid maintains and restores its current state during user interactions or when the page is reloaded.
   * Default value: [object Object]
   */
  stateSettings?: GridStateSettings;
  /**
   * Provides detailed configuration options for user selection behavior, including parameters such as selection mode (single or multiple), default selections, selection limits, and customizable callbacks for selection events.
   * Default value: [object Object]
   */
  selection?: GridSelection;
  /**
   * Provides detailed configuration options for controlling how data is sorted, including criteria such as sorting field, order (ascending or descending), and support for multiple sort keys.
   * Default value: [object Object]
   */
  sorting?: GridSorting;
  /**
   * Defines the users displayed on the grid. Expects an array of user objects, where each object must include an 'id' (unique identifier) and a 'name' (display name). Optionally, each user object can also include a 'color' (for customizing the user's appearance) and an 'image' (URL or path to the user's avatar image).
   * Default value: []
   */
  users?: any[];
  /**
   * Configures the upload settings for images and attachments in the grid's image and attachment columns, including options for file type restrictions, size limits, and image filters to be applied during the upload process.
   * Default value: [object Object]
   */
  uploadSettings?: GridUploadSettings;
  /**
   * Specifies the layout mode for displaying data within the interface. Acceptable values are:- ''grid'': Presents items in a tabular, spreadsheet-like format with rows and columns.- ''kanban'': Arranges items into columns representing workflow stages, similar to task boards.- ''card'': Displays each item as an individual card, typically used for concise summaries or visual grouping.Choose one of these values to determine how data is visually organized and presented to the user.
   * Default value: "grid"
   */
  view?: string;
}
/**
 Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.
*/
export interface Grid extends BaseElement, GridProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is fired when a cell transitions into edit mode. Within the event handler, you can prevent the editing action for specific cells, rows, or columns by invoking <em>event.preventDefault()</em>. This allows you to control which cells are editable based on custom logic or application requirements.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell, data, value)
   *  id - The unique identifier of the edited row.
   *  dataField - The data field (column) associated with the edited cell.
   *  row - The edited row's full configuration object.
   *  column - The column configuration of the edited cell.
   *  cell - The edited cell object.
   *  data - The complete data record of the edited row.
   *  value - The current value of the edited cell.
   */
  onBeginEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user confirms a batch action by clicking the 'OK' button in a Grid header dropdown. Typical actions include column customization, applying sorting, or setting filters. This event signifies that the changes selected in the dropdown have been finalized and applied to the Grid.
	* @param event. The custom event. Custom data event was created with: ev.detail(type)
   *  type - The type of dropdown where the batch change occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.
   */
  onBatchChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user clicks the 'Cancel' button in the header dropdown of a Grid, thereby aborting an ongoing batch operation. This event allows you to handle cleanup or UI updates when a batch process is intentionally stopped before completion.
	* @param event. The custom event. Custom data event was created with: ev.detail(type)
   *  type - The type of dropdown where the cancellation occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.
   */
  onBatchCancel?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires whenever the selection within the Grid changes. During drag selection, this event is emitted both at the beginning of the drag operation and again when the selection is completed, allowing you to respond to both initiation and completion of drag-based selection changes.
	* @param event. The custom event. Custom data event was created with: ev.detail(started, finished, originalEvent)
   *  started - Set to <em>true</em> when selection begins; <em>false</em> otherwise.
   *  finished - Set to <em>true</em> when selection ends; <em>false</em> otherwise.
   *  originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the selection change.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Triggered when the user clicks on a column header in a table or grid, typically to initiate actions such as sorting, filtering, or displaying additional options related to that column. This event provides context about which column was interacted with, allowing developers to implement responsive behaviors based on user actions.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, originalEvent)
   *  column - The column configuration object of the clicked header.
   *  dataField - The data field associated with the clicked column.
   *  originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the click.
   */
  onColumnClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires when a user double-clicks on a column header, typically to initiate actions such as resizing, sorting, or customizing the corresponding column. The event provides information about the specific column that was interacted with, allowing you to implement custom logic in response to the double-click.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, originalEvent)
   *  column - The column configuration object of the double-clicked header.
   *  dataField - The data field associated with the double-clicked column.
   *  originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the double-click.
   */
  onColumnDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user adjusts the width of a column by dragging the boundary line in the column header. This event fires continuously as the header boundary is moved, allowing real-time updates to the column size.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, oldWidth, width)
   *  column - The resized column's configuration object.
   *  dataField - The data field associated with the resized column.
   *  oldWidth - The previous width of the column.
   *  width - The new width of the column after resizing.
   */
  onColumnResize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires when the user begins dragging a column to change its position within the column order. This event marks the start of a column reordering operation and can be used to implement visual feedback, custom logic, or to track changes in the column arrangement during a drag-and-drop interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, originalEvent)
   *  column - The configuration object of the column being dragged.
   *  dataField - The data field associated with the column being dragged.
   *  index - The index of the column within the grid.
   *  originalEvent - The native DOM event that initiated the column drag.
   */
  onColumnDragStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered whenever a property of a column is modified, either through user interaction (such as editing in the UI) or by programmatic changes made via code. This event allows you to respond to any updates in column properties, regardless of how the change was initiated.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, propertyName, oldValue, value)
   *  column - The column whose property was changed.
   *  propertyName - The name of the property that was changed.
   *  oldValue - The previous value(s) of the changed property.
   *  value - The new value(s) of the changed property.
   */
  onColumnChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired repeatedly for as long as the user is actively dragging a column. It provides real-time updates during the entire drag operation, allowing you to implement responsive behaviors or visual feedback as the column is being repositioned.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, data, originalEvent)
   *  column - The column being dragged.
   *  dataField - The data field of the dragged column.
   *  index - The current index of the dragged column.
   *  data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
   *  originalEvent - The original browser event that triggered the dragging.
   */
  onColumnDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user releases the mouse button to drop a column after dragging it, indicating the end of a column drag-and-drop operation. This event can be used to update the column order or perform actions based on the new column arrangement.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, newIndex, data, originalEvent)
   *  column - The column that was dragged.
   *  dataField - The data field of the dragged column.
   *  index - The original index of the column before dragging.
   *  newIndex - The new index of the column after dragging.
   *  data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
   *  originalEvent - The original browser event that finalized the dragging.
   */
  onColumnDragEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires when the user changes the order of columns by dragging and repositioning a column within the interface. This event occurs after the column has been successfully moved to its new position.
	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, newIndex, data, originalEvent)
   *  column - The reordered column.
   *  dataField - The data field of the reordered column.
   *  index - The column's previous index before reorder.
   *  newIndex - The column's new index after reorder.
   *  data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
   *  originalEvent - The original browser event associated with the reorder.
   */
  onColumnReorder?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user submits a new comment within the row edit dialog, typically as part of editing or updating a row's information. This event provides the context of the edited row and the content of the newly added comment, allowing for real-time updates or further processing.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, comment)
   *  id - The unique ID of the row where the comment was added.
   *  comment - The comment object containing: 'text' (string) - the comment text, 'id' (string) - unique comment ID, 'userId' (string | number) - ID of the user who added the comment, and 'time' (Date) - timestamp of the comment.
   */
  onCommentAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user deletes or removes a comment while editing a row using the row edit dialog. This event occurs after the comment has been removed from the input field within the dialog, allowing you to handle any additional logic, such as updating the UI, saving changes, or notifying other components.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, comment)
   *  id - The unique ID of the row from which the comment was removed.
   *  comment - The comment object containing: 'text' (string) - the comment text, 'id' (string) - unique comment ID, 'userId' (string | number) - ID of the user who added the comment, and 'time' (Date) - timestamp of the comment.
   */
  onCommentRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Occurs when a user selects (clicks) an item from the context menu, typically accessed via right-click or long-press. This event enables developers to handle specific actions in response to the user's menu item selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, command)
   *  id - The unique ID of the row associated with the context menu item.
   *  dataField - The data field of the clicked context menu item.
   *  command - The command object representing the action associated with the clicked menu item.
   */
  onContextMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user begins dragging a table row, typically by clicking and holding on the row before moving it. This event signals the start of a drag-and-drop operation for reordering or repositioning rows within the table.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, originalEvent)
   *  row - The row being dragged.
   *  id - The unique ID of the row being dragged.
   *  index - The index of the row within the grid.
   *  originalEvent - The original browser event that initiated the row drag.
   */
  onRowDragStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered repeatedly in real-time as the user drags a row, firing continuously throughout the entire duration of the dragging action.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, data, originalEvent)
   *  row - The row currently being dragged.
   *  id - The unique ID of the dragged row.
   *  index - The index of the row being dragged.
   *  data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
   *  originalEvent - The original browser event that triggered the dragging.
   */
  onRowDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered upon completion of a row drag operation, regardless of whether the row’s position within the list was changed. It indicates the end of the drag interaction, and can be used to perform additional actions or cleanup tasks after users have finished dragging a row.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, newIndex, data, originalEvent)
   *  row - The dragged row object.
   *  id - The unique identifier of the dragged row.
   *  index - The original index of the row before dragging.
   *  newIndex - The new index of the row after dragging.
   *  data - The dragging feedback object containing HTML elements displayed during the drag operation. Includes `feedback` and `feedbackLine` elements, and methods `error()`, `success()`, and `data()` to set or retrieve the drag state and data.
   *  originalEvent - The original pointer, touch, or mouse event that triggered the drag.
   */
  onRowDragEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a row has been successfully moved to a new position within the grid, indicating that the row reordering operation is complete and the grid's data order has been updated accordingly.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, newIndex, data, originalEvent)
   *  row - The reordered row object.
   *  id - The unique identifier of the reordered row.
   *  index - The original index of the row before reordering.
   *  newIndex - The new index of the row after reordering.
   *  data - The dragging feedback object containing HTML elements displayed during the reorder operation. Includes `feedback` and `feedbackLine` elements, and methods `error()`, `success()`, and `data()` to set or retrieve the drag state and data.
   *  originalEvent - The original pointer, touch, or mouse event that triggered the reorder.
   */
  onRowReorder?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user expands a row in either TreeGrid or Grouping mode, causing the hidden child rows or grouped data associated with that row to be displayed. It allows you to respond when hierarchical data or grouped content is revealed within the grid.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, originalEvent)
   *  row - The expanded row object.
   *  id - The unique identifier of the expanded row.
   *  originalEvent - The original pointer, touch, or mouse event that caused the expansion.
   */
  onRowExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a row is collapsed in TreeGrid or Grouping mode, causing any nested child rows or grouped content under that row to be hidden from view. This event allows you to respond when users collapse a parent row, such as updating UI elements or loading data dynamically.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, originalEvent)
   *  row - The collapsed row object.
   *  id - The unique identifier of the collapsed row.
   *  originalEvent - The original pointer, touch, or mouse event that caused the collapse.
   */
  onRowCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user clicks anywhere within a table row, allowing you to respond to row selection events, such as highlighting the row, displaying detailed information, or performing related actions.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
   *  row - The clicked row object.
   *  originalEvent - The original pointer, touch, or mouse event for the click.
   *  id - The unique identifier of the clicked row.
   *  data - The data object associated with the clicked row.
   *  isRightClick - Indicates whether the right mouse button was used for the click.
   *  pageX - The X-coordinate of the click relative to the page.
   *  pageY - The Y-coordinate of the click relative to the page.
   */
  onRowClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user rapidly double-clicks on any row within the data grid or table. It can be used to initiate actions such as opening a detailed view, activating edit mode, or performing custom operations related to the selected row. The event handler receives contextual information about the clicked row, allowing for targeted interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
   *  row - The double-clicked row object.
   *  originalEvent - The original pointer, touch, or mouse event for the double-click.
   *  id - The unique identifier of the double-clicked row.
   *  data - The data object associated with the double-clicked row.
   *  isRightClick - Indicates whether the right mouse button was used for the double-click.
   *  pageX - The X-coordinate of the double-click relative to the page.
   *  pageY - The Y-coordinate of the double-click relative to the page.
   */
  onRowDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user manually adjusts the height of a table row, such as by dragging the row's resize handle. This event allows you to respond to row height changes, for example, by updating layout or saving the new row height.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, oldHeight, height)
   *  row - The resized row object.
   *  id - The unique identifier of the resized row.
   *  oldHeight - The height of the row before resizing.
   *  height - The new height of the row after resizing.
   */
  onRowResize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user clicks the star icon located in a row header, toggling the starred (favorite) status of the corresponding row. This event allows you to handle actions such as marking or unmarking the row as a favorite in response to user interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, value)
   *  row - The row associated with the star toggle.
   *  originalEvent - The original pointer, touch, or mouse event for the star click.
   *  id - The unique identifier of the starred row.
   *  value - Boolean indicating whether the row is now starred (`true`) or unstarred (`false`).
   */
  onRowStarred?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires when a user clicks on any individual cell within the grid, providing information about the selected cell’s row, column, and associated data. This event enables you to implement custom actions in response to cell clicks, such as editing cell content, displaying detailed information, or triggering other interactive features.
	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
   *  cell - The clicked cell object.
   *  originalEvent - The original pointer, touch, or mouse event for the click.
   *  id - The unique identifier of the row containing the clicked cell.
   *  dataField - The data field (column identifier) of the clicked cell.
   *  value - The value of the clicked cell.
   *  isRightClick - Indicates whether the right mouse button was used for the click.
   *  pageX - The X-coordinate of the click relative to the page.
   *  pageY - The Y-coordinate of the click relative to the page.
   */
  onCellClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires when a user rapidly double-clicks on any cell within the grid, allowing you to handle actions such as entering edit mode, displaying detailed information, or executing custom logic specific to the selected cell.
	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
   *  cell - The double-clicked cell object.
   *  originalEvent - The original pointer, touch, or mouse event for the double-click.
   *  id - The unique identifier of the row containing the double-clicked cell.
   *  dataField - The data field (column identifier) of the double-clicked cell.
   *  value - The value of the double-clicked cell.
   *  isRightClick - Indicates whether the right mouse button was used for the double-click.
   *  pageX - The X-coordinate of the double-click relative to the page.
   *  pageY - The Y-coordinate of the double-click relative to the page.
   */
  onCellDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user completes editing a cell or an entire row. This event supplies comprehensive information about the edit operation, including the updated values, the specific cells or rows affected, and any changes made by the user. It enables developers to capture and respond to user edits with detailed context.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell, data, value)
   *  id - The unique identifier of the row that was edited. This helps to locate the specific row within the grid.
   *  dataField - The data field key (column identifier) of the cell that was edited.
   *  row - The full row object that contains the edited cell, representing the row's current state after editing.
   *  column - The column object corresponding to the edited cell, including its metadata and configuration.
   *  cell - The specific cell object that was edited, providing granular access to the edited cell's properties.
   *  data - An object representing the entire data record of the edited row, reflecting all current values post-edit.
   *  value - The new value entered by the user in the edited cell.
   */
  onEndEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever filters within the grid are added, updated, or removed. It allows developers to monitor and respond to any changes in the grid’s filtering criteria. By handling this event, you can implement custom logic—such as updating UI elements, fetching new data, or logging filter modifications—whenever the user changes how data is filtered in the grid.
	* @param event. The custom event. Custom data event was created with: ev.detail(columns, data, expressions)
   *  columns - An array of column objects currently involved in filtering, providing access to each filtered column’s properties.
   *  data - An array of objects each containing a column’s data field and its associated FilterGroup object. The FilterGroup describes the filter conditions applied to that column. Example: { dataField: string, filter: object }.
   *  expressions - An array of filter expression objects, each with a column’s data field and a human-readable filter expression string. These expressions define the applied filters, e.g., 'startsWith B' or complex logical expressions like 'contains Andrew or contains Nancy'. Supported operators include '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', and 'NOT_NULL'.
   */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered whenever the grid's grouping configuration is modified—for example, when columns are added to or removed from the grouped columns. This event allows you to respond to user actions that change how data is grouped in the grid.
	* @param event. The custom event. Custom data event was created with: ev.detail(groups)
   *  groups - An array of data fields that represent the columns currently used for grouping the grid’s rows. The order of fields reflects the grouping hierarchy.
   */
  onGroup?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Emitted whenever the dialog interface for adding a new column or editing an existing column is displayed to the user. This event is ideal for implementing custom logic, such as pre-filling form fields, dynamically modifying dialog content, or applying additional UI enhancements when the column dialog becomes visible.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
   *  dataField - The data field of the column currently being added or edited via the dialog.
   */
  onOpenColumnDialog?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Fires when the column addition or editing dialog is closed, regardless of whether the user saves their changes or cancels the operation. This event allows developers to perform actions after the dialog is dismissed, such as updating the UI or resetting form states.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
   *  dataField - The data field of the column involved in the dialog that was just closed.
   */
  onCloseColumnDialog?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered whenever the grid’s dimensions are altered, either through user-initiated resizing or programmatic changes to the layout. This event enables developers to implement responsive UI updates, such as repositioning elements or recalculating layout parameters to ensure optimal display across different screen sizes and interactions.
	* @param event. The custom event.    */
  onResize: ((ev: Event) => any) | null;
  /**
   * Triggered when a user performs a press-and-hold gesture on a grid row, maintaining contact for at least 300 milliseconds. This event is commonly used to open context menus or initiate specialized touch-based interactions, enhancing the user experience on touch-enabled devices.
	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent)
   *  row - The row object that was tapped and held.
   *  originalEvent - The original input event object ('pointer', 'touch', or 'mouse'), which provides device-specific details.
   */
  onRowTap?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when a user performs a press-and-hold gesture—touching and continuously holding a specific cell in the grid for at least 300 milliseconds. This event enables advanced touch interactions, such as displaying context menus, initiating drag-and-drop, or activating additional cell options. It is designed to distinguish intentional long presses from casual taps, ensuring a responsive and intuitive touch interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent)
   *  cell - The cell object that was tapped and held.
   *  originalEvent - The original input event object ('pointer', 'touch', or 'mouse') providing context about the interaction.
   */
  onCellTap?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered whenever the user switches pages using the grid’s pagination controls. This event allows you to detect and respond to page changes, such as updating data, fetching new records, or performing additional actions whenever a different page is selected.
	* @param event. The custom event.    */
  onPage?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered whenever columns are added to, removed from, or reordered within the grid’s sorting configuration. This event enables developers to monitor changes in the sorting criteria, update the sorting state, and track the current sort order and priority of columns in the grid.
	* @param event. The custom event. Custom data event was created with: ev.detail(columns, data, sortDataFields, sortDataTypes, sortOrders, sortIndexes)
   *  columns - An array of column objects currently sorted, including their configurations and properties.
   *  data - An array of objects describing each sorted column with its data field, sorting order ('asc' or 'desc'), and priority index indicating sorting precedence in multi-column sorts.
   *  sortDataFields - An array of the data fields of all currently sorted columns.
   *  sortDataTypes - An array of data types ('string', 'date', 'boolean', or 'number') corresponding to the sorted columns.
   *  sortOrders - An array of sorting directions ('asc' or 'desc') applied to the sorted columns.
   *  sortIndexes - An array of integers representing the sorting priority for each column in cases of multi-column sorting, where lower index means higher priority.
   */
  onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user scrolls to the absolute bottom of the grid component. This event is typically used to implement infinite scrolling or lazy loading by allowing you to detect when additional data needs to be loaded as the user reaches the end of the currently displayed content.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Triggered when the user scrolls to the very top edge of the grid. This event allows you to perform actions such as refreshing the grid's contents, loading previous or additional data, or updating UI elements in response to the scroll position. Use this event to enhance data loading and user experience when users reach the beginning of the grid.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Inserts a new row into the grid interface. When batch editing mode is enabled, the new row exists only temporarily within the current batch session and will not be permanently stored until the user explicitly saves all changes made during the session. If the batch edit session is discarded, the newly added row will not be saved.
   * @param {any} data. An object representing the row data, matching the structure of the grid's data source.
   * @param {boolean} insertAtBottom?. Determines whether the new row is added at the bottom (true) or top (false) of the grid. Defaults to true.
   * @param  callback?. A callback function invoked after the row is successfully added. Receives the newly added row as an argument.
   */
  addRow(data: any, insertAtBottom?: boolean, callback?: {(row: GridRow): void}): void;
  /**
   * Inserts a new row into the grid and automatically activates edit mode for that row, allowing users to begin entering data right away. If batch editing is enabled, any changes made will be temporarily stored and will not be saved to the data source until the batch edit session is explicitly committed. This helps prevent partial or unsaved changes from being applied before the user finalizes all edits in the session.
   * @param {string} position?. Specifies the position where the new row will be added. Acceptable values are 'near' (top) or 'far' (bottom).
   * @returns {boolean}
   */
  addNewRow(position?: string): boolean;
  /**
   * Dynamically adds a new column to the grid at runtime, allowing users to modify the grid’s structure without requiring a page reload. This enables real-time updates to the grid layout based on user actions or application logic.
   * @param {any} column. A column definition or array of columns to add. Refer to the grid's 'columns' property for the expected structure.
   * @returns {boolean}
   */
  addNewColumn(column: any): boolean;
  /**
   * Adds one or more unbound rows to the grid, positioned at either the top or the bottom, as specified. Unbound rows are not initially included in the grid’s data source; instead, they serve as editable placeholders. Once a user enters or modifies data in these rows, the new values are incorporated into the grid’s data source, making the unbound rows part of the main dataset. This feature is useful for allowing users to quickly add new entries or perform custom calculations directly within the grid interface.
   * @param {number} count. The number of unbound rows to add.
   * @param {string} position?. The position to insert the unbound rows. Accepts 'near' for top or 'far' for bottom.
   * @returns {boolean}
   */
  addUnboundRow(count: number, position?: string): boolean;
  /**
   * Enhances and applies custom filter criteria to a specific column within the data grid. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.
   * @param {string} dataField. The data field name of the column to filter, e.g., 'firstName'.
   * @param {string} filter. The filter expression(s) to apply. Examples include 'startsWith B', ['contains Andrew or contains Nancy'], or ['quantity', '<= 3 and >= 8']. Supported operators: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.
   * @param {boolean} refreshFilters?. If set to false, allows multiple filters to be added without triggering unnecessary renders. Useful when applying multiple filters sequentially.
   */
  addFilter(dataField: string, filter: string, refreshFilters?: boolean): void;
  /**
   * Organizes the grid rows into groups based on the values in the specified column's data field. This functionality requires that grouping is enabled on the grid component. When activated, rows sharing the same value in the chosen column will be visually grouped together, allowing for easier data analysis and navigation.
   * @param {string} dataField. The data field of the column to group by, e.g., 'firstName'.
   */
  addGroup(dataField: string): void;
  /**
   * Enhances the grid's data display by applying a sorting order based on the specified column's data field. This function requires sorting to be enabled on the grid and sorts the rows according to the selected column's values, either in ascending or descending order as specified. If sorting is not enabled, this operation will have no effect.
   * @param {string} dataField. The data field of the column to sort, e.g., 'firstName'.
   * @param {string} sortOrder. The sort direction to apply. Use 'asc' for ascending or 'desc' for descending.
   */
  addSort(dataField: string, sortOrder: string): void;
  /**
   * Dynamically resizes each grid row to fit its content, ensuring that text and elements are fully visible without being cut off or overlapping. This enhances readability and provides a more user-friendly and visually consistent grid layout.
   */
  autoSizeRows(): void;
  /**
   * Dynamically resizes the width of each grid column based on its content and header label, so that all cell values and headers are fully visible without clipping or excessive whitespace. This ensures an optimal and polished display by automatically fitting columns to their widest required size.
   */
  autoSizeColumns(): void;
  /**
   * Automatically resizes an individual grid column to precisely fit its content by dynamically measuring the widest content among its cells and header label, and adjusting the column width accordingly for optimal display without unnecessary extra space or truncation.
   * @param {string} dataField?. The data field name of the column to auto-size, e.g., 'firstName'. Optional; if omitted, no action is taken.
   */
  autoSizeColumn(dataField?: string): void;
  /**
   * Returns a boolean value that indicates whether every row in the grid is currently selected. This means the method will return true only if all rows within the grid have been selected; otherwise, it returns false.
   * @returns {boolean}
   */
  areAllRowsSelected(): boolean;
  /**
   * Pauses Grid rendering and UI refresh operations, allowing you to make multiple property changes or method calls without triggering repeated re-renders. This is particularly useful for optimizing performance during batch updates. After you finish making all necessary changes, call 'endUpdate()' to resume rendering and apply all updates to the UI.
   */
  beginUpdate(): void;
  /**
   * Initiates edit mode on a specified row, cell, or column within the grid programmatically. Triggers the appropriate editor component to appear in the Grid UI, allowing users to modify the data directly within the selected grid area.
   * @param {string | number} rowId. The unique identifier of the row to edit.
   * @param {string} dataField?. The column's data field to edit. Optional for full row editing.
   */
  beginEdit(rowId: string | number, dataField?: string): void;
  /**
   * Removes all active filters from the Grid, restoring the original unfiltered data view. After clearing the filters, the Grid data is automatically refreshed to display all records, and any filter input fields are reset to their default, empty state.
   */
  clearFilter(): void;
  /**
   * Restores the grid to its original, ungrouped state by removing all active row groupings. All grouped rows are expanded and displayed as individual rows, and the Grid view automatically refreshes to reflect these changes.
   */
  clearGroups(): void;
  /**
   * Removes all active sorting from the Grid columns, resetting them to their unsorted state and restoring the data to its original order as initially loaded or received.
   */
  clearSort(): void;
  /**
   * Clears all current selections within the grid, including rows, cells, and columns. This action removes any visual highlights or selection indicators, ensuring that no items remain selected in the interface.
   */
  clearSelection(): void;
  /**
   * Cancels the ongoing edit operation by closing any active editor interface and reverting all unsaved changes made during the current session. This action ensures that no modifications are saved and the data returns to its original state prior to editing.
   */
  cancelEdit(): void;
  /**
   * Selects and checks the checkbox for a specified TreeGrid row, visually indicating that the row is active or selected. This action updates the row's state to reflect user selection and may trigger related event handlers or selection-dependent functionality within the TreeGrid.
   * @param {string | number} rowId. The unique identifier of the row to check.
   */
  checkRow(rowId: string | number): void;
  /**
   * Selects and checks all checkboxes associated with rows in a TreeGrid or grouped data structure, ensuring that every row, including nested and grouped items, is marked as selected. This process guarantees comprehensive selection across all hierarchical levels and groupings within the dataset.
   */
  checkAllRows(): void;
  /**
   * Removes all rows and associated data from the Grid, and clears any current user selections. After performing this action, the Grid will display a 'No Rows' message to indicate that it is empty.
   */
  clearRows(): void;
  /**
   * Closes the currently open column menu in a data grid or table interface. This action is typically triggered by user interactions such as right-clicking on a column header or clicking a column menu button, allowing users to dismiss the column-specific options or actions menu.
   */
  closeMenu(): void;
  /**
   * Collapses a designated TreeGrid or grouping row, effectively hiding all of its nested child rows from view. This action allows users to condense hierarchical data structures, making it easier to navigate and focus on higher-level information within the grid.
   * @param {string | number} rowId. The unique identifier of the row to collapse.
   */
  collapseRow(rowId: string | number): void;
  /**
   * Collapses all currently expanded rows within the TreeGrid or Grouping components, reducing the dataset display to only show parent rows or top-level groups. This action hides all child rows and nested data, providing a simplified, minimized overview of the dataset structure.
   */
  collapseAllRows(): void;
  /**
   * Generates a visual chart representation based on the current data within the Grid. Chart generation requires that the charting feature is enabled in the system configuration. This function allows users to visualize the Grid's dataset in supported chart formats.
   * @param {string} type. Type of chart to create (e.g., 'pie', 'bar', 'line').
   * @param {any} dataSource?. The data source for the chart. If omitted, the Grid's current dataset is used.
   */
  createChart(type: string, dataSource?: any): void;
  /**
   * Removes a specific row from the Grid component. If batch editing is enabled, the row will be marked for deletion but the change will not be permanently applied until the batch is saved. This means the deletion is pending and can be reverted before saving.
   * @param {string | number} rowId. The unique identifier of the row to delete.
   * @param  callback?. Function executed after row deletion. Receives the deleted row as a parameter.
   */
  deleteRow(rowId: string | number, callback?: {(row: GridRow): void}): void;
  /**
   * Scrolls the Grid to ensure that a specific row or cell is visible to the user. If the target row or cell is located on a different page, the Grid will automatically navigate to the appropriate page and then scroll to the desired position. This ensures that the requested row or cell is brought into view, regardless of its current visibility or page location.
   * @param {string | number} rowId. The unique identifier of the row.
   * @param {string} dataField?. The column's data field to focus on. If omitted, scrolls to the row only.
   * @returns {boolean}
   */
  ensureVisible(rowId: string | number, dataField?: string): boolean;
  /**
   * Completes the editing process by applying all pending changes, saving the updated content, and closing any open editor instances. This action ensures that all modifications are confirmed and no unsaved edits remain.
   */
  endEdit(): void;
  /**
   * Restores the Grid's normal rendering process and updates the user interface following a call to beginUpdate(). Use endUpdate() to apply any changes made during the update suspension and ensure the Grid displays the latest data and layout.
   * @param {boolean} refresh?. If true, forces a full Grid refresh after updates.
   */
  endUpdate(refresh?: boolean): void;
  /**
   * Expands a specific row in a TreeGrid or grouped table to reveal its associated child rows. You can expand nested groups or hierarchical levels by specifying the row key using dot notation (e.g., "0.2.1" for the child of a nested group). This allows for precise targeting and interactive exploration of hierarchical data structures within the grid.
   * @param {string | number} rowId. The unique identifier of the row to expand.
   */
  expandRow(rowId: string | number): void;
  /**
   * Expands all grouped rows in the grid up to the specified group level. For instance, executing `grid.expandRowsToGroupLevel(1);` will expand all groups at the root (level 1), making their immediate child rows visible. Groups nested within these child rows remain collapsed unless the group level parameter is increased. This function is useful for programmatically controlling the grid's row expansion state based on grouping hierarchy.
   * @param {number} level. The group level up to which the rows should be expanded. Level 0 is the root, level 1 is the first nested group, and so forth.
   */
  expandRowsToGroupLevel(level: number): void;
  /**
   * Expands all rows within the grid that utilize TreeGrid or grouping functionality, automatically revealing every nested child row at all levels of hierarchy and making the complete data structure fully visible. This ensures that all parent and descendant rows are displayed, allowing users to view the entire nested dataset without manual expansion.
   */
  expandAllRows(): void;
  /**
   * This function allows you to export the grid's data into various supported file formats, including .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG, and .PNG. The way the data is exported—such as file formatting, included columns or rows, applied filters, and export settings—is determined by the options set in the grid’s dataExport property. This ensures that the exported file matches your specified requirements and preferences.
   * @param {string} Dataformat. Specifies the export format. Supported formats: 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
   * @param {any} callback?. Optional. A function that formats the exported values conditionally. See Smart Export Documentation for details.
   * @param {any} dataCallback?. Optional. A function to modify the entire exported data object prior to export.
   */
  exportData(Dataformat: string, callback?: any, dataCallback?: any): void;
  /**
   * Searches the grid for rows that match the specified query criteria and returns an array containing the IDs of all matching rows. Supports multiple search modes, including:<br/><br/>- Searching for values in any column (global search)<br/>- Searching specific columns by name<br/>- Applying comparison operators (e.g., equals, contains, less than, greater than) for advanced filtering<br/><br/>This functionality allows for flexible and precise row selection based on user-defined search parameters.
   * @param {string} query. The search string or value to find within the grid rows.
   * @param {string} dataField?. Optional. Specifies the column data field to restrict the search to.
   * @param {string} condition?. Optional. Condition to apply for the search. Supported conditions: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.
   * @returns {any[]}
   */
  find(query: string, dataField?: string, condition?: string): any[];
  /**
   * Scans the grid to identify all cells that match the specified query. Returns an array of arrays, where each inner array represents a matching cell and contains the following information: the row ID, the data field (column name), and the cell's value. The query supports searching for multiple values by separating them with commas; each value will be matched independently against the cells.
   * @param {string} query. The search string or multiple comma-separated strings to find in grid cells.
   * @returns {any[]}
   */
  findCells(query: string): any[];
  /**
   * Applies a global filter that searches for the provided query across all columns in the grid, returning rows that contain a match in any column. Optionally, you can limit the filtering to specific data types—such as 'string', 'boolean', 'date', or 'number'—so that only columns of the selected type(s) are considered when matching the query. This allows for more precise and targeted filtering behavior.
   * @param {string} query. The filter expression to apply to all columns.
   * @param {string} dataType?. Optional. Filter rows only by columns matching this data type: 'string', 'boolean', 'date', 'number'.
   */
  filterBy(query: string, dataType?: string): void;
  /**
   * Programmatically navigates the grid to a specified page index, provided that paging is enabled. Use this method to set the current page of the grid, allowing you to jump to a particular page in response to user actions or custom logic. The page index is zero-based, where 0 refers to the first page."
   * @param {number} index. The zero-based index of the page to navigate to.
   */
  goToPage(index: number): void;
  /**
   * Advances to the next page of data in the grid when paging functionality is enabled. If the grid is currently displaying the last available page, this action will have no effect and the page will remain unchanged.
   */
  nextPage(): void;
  /**
   * Triggers navigation to the previous page in the grid when paging functionality is enabled. If the grid is currently displaying the first page, the operation is ignored and the page remains unchanged. This ensures that navigation does not attempt to move before the first available page.
   */
  prevPage(): void;
  /**
   * Navigates to the first page of the data grid when paging functionality is enabled. This action resets the current page index to the first page, displaying the initial set of records in the grid.
   */
  firstPage(): void;
  /**
   * Navigates directly to the final page of the data grid when paging functionality is enabled, allowing users to quickly access the last set of records displayed in the grid.
   */
  lastPage(): void;
  /**
   * Sets focus on and selects a specified cell or an entire row within the grid, clearing any previous selections. This action also updates the keyboard navigation's starting point to the newly focused cell or row, ensuring that subsequent navigation actions will originate from this location.
   * @param {string | number} rowId. The unique identifier of the row to focus and select.
   * @param {string} dataField?. Optional. The data field (column key) of the cell to focus within the specified row. If omitted, the entire row is selected.
   */
  focusAndSelect(rowId: string | number, dataField?: string): void;
  /**
   * Executes a callback function for each individual row in the grid's underlying dataset, regardless of any grouping, filtering, or sorting currently applied to the grid view. This method iterates over all raw data rows, ensuring that the callback is called on every entry as it exists in the original data source, not just the rows that are visible or active in the grid's current state.
   * @param {any} rowCallback. A callback function that receives a row object as its parameter. Example: grid.forEachRow(row => console.log(row.id));
   */
  forEachRow(rowCallback: any): void;
  /**
   * Executes a callback function for each row that is currently visible in the grid after all active filters and sorting have been applied. This method operates strictly on the rows as they appear in the current grid view, ensuring that hidden, filtered out, or unsorted rows are excluded. The iteration respects the latest grid state, guaranteeing that only rows displayed to the user are processed by the callback function.
   * @param {any} rowCallback. A callback function that receives a row object as its parameter. Example: grid.forEachRowAfterFilterAndSort(row => console.log(row.id));
   */
  forEachRowAfterFilterAndSort(rowCallback: any): void;
  /**
   * Returns the maximum allowable scroll position for the grid's vertical scrollbar. This value represents the greatest vertical offset to which users can scroll within the grid's content area. It can be used to determine the scrollable range or to programmatically set the vertical scrollbar to its lowest (bottom-most) position.
   * @returns {number}
   */
  getVerticalScrollMax(): number;
  /**
   * Returns the current vertical scroll position of the grid, representing the number of pixels the grid’s content has been scrolled vertically from the top. This value corresponds to the position of the grid's vertical scrollbar and can be used to determine how far users have scrolled down within the grid.
   * @returns {number}
   */
  getVerticalScrollValue(): number;
  /**
   * Returns the maximum horizontal scroll offset for the grid’s horizontal scrollbar. This value represents the furthest distance (in pixels) that the grid content can be scrolled horizontally. It is useful for programmatically setting, adjusting, or resetting the grid’s horizontal scroll position to ensure full content visibility or to align with specific scroll actions.
   * @returns {number}
   */
  getHorizontalScrollMax(): number;
  /**
   * Retrieves the current horizontal scroll offset of the grid's horizontal scrollbar, indicating how far the grid content has been scrolled from the left edge in pixels. This value can be used to determine the current scroll position or to programmatically control grid scrolling behavior.
   * @returns {number}
   */
  getHorizontalScrollValue(): number;
  /**
   * Retrieves an array of column objects representing every column currently configured in the grid. Each column object contains key properties, including:<br/><br/>- `label`: The display name of the column as shown in the grid header.<br/>- `dataField`: The underlying data field or key this column is bound to in the dataset.<br/>- `dataType`: The type of data displayed in the column (e.g., string, number, date).<br/>- `visible`: A boolean indicating whether the column is currently visible in the grid.<br/>- Additional dynamic state properties, such as the current sort order, filter status, or column width, reflecting any user customizations or interactions.<br/><br/>This comprehensive array allows developers to access both the static configuration and real-time state of each column in the grid.
   * @returns {any}
   */
  getColumns(): any;
  /**
   * Returns an array containing information about all cells that are currently in edit mode within the grid. Each entry in the array typically includes details such as the row and column identifiers for each editable cell, allowing developers to precisely identify and interact with cells that are being edited.
   * @returns {any[]}
   */
  getEditCells(): any[];
  /**
   * Fetches an array of group objects that define the current grouping configuration of the grid. Each group object contains information about the field being grouped by, the group criteria, and any sub-grouping details, providing a comprehensive representation of how the grid's data is organized into groups.
   * @returns {any[]}
   */
  getGroups(): any[];
  /**
   * Returns an object that details the columns currently sorted within a data table. Each key in the object corresponds to a column’s data field name. The value for each key is an object containing:<br/><br/>- `sortOrder`: Specifies the sorting direction for the column, either `'asc'` for ascending or `'desc'` for descending.<br/>- `sortIndex`: Indicates the column’s priority in multi-column sorting, with lower numbers representing higher priority.<br/><br/>This structure allows you to easily determine which columns are sorted, their order of precedence, and the sorting direction applied to each.
   * @returns 
   */
  getSortedColumns(): {[dataField: string]: { sortOrder: string, sortIndex: number }};
  /**
   * Returns an object representing the current selection state of the grid. This includes arrays listing the IDs of selected rows, the identifiers of selected columns, and the coordinates (row ID and data field) of selected cells. Additionally, it specifies the cell that is currently focused by providing its row ID and data field.
   * @returns {any}
   */
  getSelection(): any;
  /**
   * Returns an array in which each element is a two-element array: the first element is the unique row ID, and the second element is the data object associated with that row. When operating in virtual mode, the data object may be empty if the row’s data has not yet been loaded, as data is retrieved on demand.
   * @returns {any[]}
   */
  getSelectedRows(): any[];
  /**
   * Returns an array containing the data objects corresponding to each row currently selected in the grid. Each object in the array represents the underlying data for one selected row, allowing you to access and manipulate the specific records the user has chosen.
   * @returns {any[]}
   */
  getSelectedRowsData(): any[];
  /**
   * Returns an array containing the unique identifiers (IDs) of all rows currently selected by the user within the grid component. Each element in the array corresponds to the ID of a selected row, allowing you to easily reference or manipulate the selected grid items programmatically.
   * @returns {any[]}
   */
  getSelectedRowIds(): any[];
  /**
   * Returns an array containing the indices of the rows that are currently selected in the grid. Each element in the array represents the zero-based position of a selected row, allowing you to identify which rows the user has chosen. If no rows are selected, the array will be empty.
   * @returns {any[]}
   */
  getSelectedRowIndexes(): any[];
  /**
   * Returns an array of selected cells, where each cell is represented as an array structured as [row ID, column field, cell value].  <br/>- **Row ID**: The unique identifier for the row containing the cell.  <br/>- **Column field**: The data field name (or key) corresponding to the column of the cell.  <br/>- **Cell value**: The actual value contained within the cell.  <br/><br/>This structure allows you to easily identify and access the position and value of each selected cell within the data set.
   * @returns {any[]}
   */
  getSelectedCells(): any[];
  /**
   * Returns an array of objects representing the columns that currently have active filters applied. Each object contains details about the filter and is associated with its corresponding column by the column's data field as the key. This allows you to identify which columns are being filtered and access the filter configurations for each.
   * @returns {any}
   */
  getFilteredColumns(): any;
  /**
   * Returns an array containing the data for all rows currently visible in the grid, after applying any active filters. Only rows that meet the filter criteria and are not hidden by filtering will be included in the array. This allows developers to access the up-to-date, filtered data as presented to the user in the grid interface.
   * @returns {any}
   */
  getVisibleRows(): any;
  /**
   * Returns an array of row objects. By default, this represents the currently visible rows after any filters have been applied. When used in TreeGrid or Grouping mode, the array instead reflects the hierarchical structure of rows, including parent-child relationships, according to the current expand/collapse state of groups or tree nodes.
   * @returns {any}
   */
  getViewRows(): any;
  /**
   * Retrieves a detailed JSON object that encapsulates the entire current state of the grid. This includes the active sorting and filtering criteria, column visibility and order, which rows are expanded, any grouping configurations, current pagination settings, and the selection state of rows or cells. The resulting state object is suitable for persisting the grid configuration (such as saving to local storage or a database) and can be used to completely restore the grid to the same state at a later time.
   * @returns {any}
   */
  getState(): any;
  /**
   * Retrieves a comprehensive summary of all changes performed during a batch edit operation. Returns an object with separate arrays for added, updated, and deleted rows. Each array contains detailed objects that include the row ID and pertinent data fields, such as the previous and new values for updates, full data for additions, and identifying information for deletions. This structure allows you to easily track and process all modifications made in the batch.
   * @returns 
   */
  getBatchEditChanges(): { upDated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] };
  /**
   * Retrieves the value stored in a specific cell of a data grid or table by specifying the unique row ID and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.
   * @param {string | number} rowId. The unique identifier of the row containing the cell.
   * @param {string} dataField. The data field name of the column (e.g., 'firstName').
   * @returns {any}
   */
  getCellValue(rowId: string | number, dataField: string): any;
  /**
   * Retrieves the column object corresponding to the specified data field. This returned object includes all relevant properties and configuration settings for that column, such as its header label, data type, formatting options, sorting behavior, visibility, and any custom properties defined in the column schema.
   * @param {string} dataField. The data field name of the column to retrieve.
   * @returns {GridColumn}
   */
  getColumn(dataField: string): GridColumn;
  /**
   * Fetches the value of a specified property from a particular column, where the column is identified by its data field name. This function allows you to access detailed configuration or metadata associated with a column in a data structure, such as a table or grid, by referencing the column’s data field.
   * @param {string} dataField. The data field name of the column.
   * @param {string} propertyName. The name of the column property to retrieve (e.g., 'freeze', 'visible', 'width').
   * @returns {any}
   */
  getColumnProperty(dataField: string, propertyName: string): any;
  /**
   * Retrieves the value of a specified property from a database row identified by its unique row ID. This function locates the row using the provided row ID and returns the value associated with the given property key within that row. If the property does not exist, it returns null or an appropriate default value.
   * @param {string | number} rowId. The unique identifier of the row.
   * @param {string} propertyName. The name of the row property to retrieve.
   * @returns {any}
   */
  getRowProperty(rowId: string | number, propertyName: string): any;
  /**
   * Returns the complete row object from the Grid for the row corresponding to the given row ID, including all its associated data and properties.
   * @param {string | number} rowId. The unique identifier of the row.
   * @returns {GridRow}
   */
  getRow(rowId: string | number): GridRow;
  /**
   * Returns the Grid row object at the given zero-based row index, allowing access to all data and properties associated with that specific row. The index parameter should be an integer starting from 0, where 0 corresponds to the first row in the Grid.
   * @param {number} rowIndex. The zero-based index of the row in the grid.
   * @returns {GridRow}
   */
  getRowByIndex(rowIndex: number): GridRow;
  /**
   * Fetches the original data source object directly linked to the given row ID, allowing access to all underlying data fields for that specific row as stored in the source dataset.
   * @param {string | number} rowId. The unique identifier of the row.
   * @returns {any}
   */
  getRowData(rowId: string | number): any;
  /**
   * Returns the unique identifier (row ID) associated with the row at the specified zero-based index. This allows you to access or reference a particular row in the data set by its position within the collection, where the first row has an index of 0.
   * @param {number} rowIndex. The zero-based index of the row.
   * @returns {string | number}
   */
  getRowId(rowIndex: number): string | number;
  /**
   * Determines whether any column’s drop-down menu is currently open and visible within the grid component. This can be used to control grid interactions or UI behaviors that depend on the state of column drop-down menus.
   * @returns {boolean}
   */
  hasMenu(): boolean;
  /**
   * Checks whether any rows in the grid are currently selected by the user. This property or method returns a boolean value: `true` if at least one row is selected, and `false` if no rows are selected. It is typically used to enable or disable actions that depend on row selection, such as editing or deleting entries.
   * @returns {boolean}
   */
  hasSelectedRows(): boolean;
  /**
   * Conceals the details section for the specified row in the grid when the row details feature is enabled, effectively collapsing or hiding any expanded information or custom content associated with that row. This function ensures that only the main data for the row is visible, while any additional details remain hidden until explicitly shown again.
   * @param {string | number} rowId. The unique identifier of the row whose details should be hidden.
   */
  hideDetail(rowId: string | number): void;
  /**
   * Highlights all cells within the column corresponding to the specified data field. If this method is called again with the same data field, it toggles the highlight by removing it if already applied, or reapplying it if previously removed.
   * @param {string} dataField. The data field name of the column to highlight.
   */
  highlightColumn(dataField: string): void;
  /**
   * Emphasizes a specific cell within the grid, identified by its row ID and column data field. Invoking this method again on the same cell will toggle the highlight on or off. You can optionally specify a CSS class to apply custom styling to the highlighted cell, allowing for personalized visual differentiation.
   * @param {string | number} rowId. The unique identifier of the row containing the cell.
   * @param {string} dataField. The data field name of the column.
   * @param {string} className?. Optional CSS class name for custom highlight styling.
   */
  highlightCell(rowId: string | number, dataField: string, className?: string): void;
  /**
   * Enhances visibility of the table row corresponding to the provided row ID by applying a highlight effect. Invoking this method a second time on the same row will remove the highlight, effectively toggling its state. Optionally, you can supply a custom CSS class to override the default highlight styling for tailored appearance.
   * @param {string | number} rowId. The unique identifier of the row to highlight.
   * @param {string} className?. Optional CSS class name for custom highlight styling.
   */
  highlightRow(rowId: string | number, className?: string): void;
  /**
   * Adds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.
   * @param {any} data. The data object for the new row, matching the grid's data source schema.
   * @param {number} index?. The zero-based index at which to insert the new row. Defaults to the last position if omitted.
   * @param  callback?. Optional callback function executed after the row is inserted, receiving the newly added row object.
   */
  insertRow(data: any, index?: number, callback?: {(row: GridRow): void}): void;
  /**
   * Restored a previously saved grid state by accepting either the name of the saved state or a state object. The state object can include detailed settings such as current sorting and filtering criteria, column visibility and order, expanded or collapsed row status, grouping configurations, paging information (such as current page and page size), and selected rows. This allows the grid to be reconfigured exactly as it was when the state was saved, providing a consistent user experience across sessions.
   * @param {any} state. A state name (string) previously saved or a state object representing the grid configuration to load.
   * @returns {any}
   */
  loadState(state: any): any;
  /**
   * Displays the drop-down menu associated with the column specified by the provided data field identifier, allowing users to access additional actions or settings related to that column.
   * @param {string} dataField. The data field name of the column whose menu to open.
   */
  openMenu(dataField: string): void;
  /**
   * Displays the context menu at the given (left, top) screen coordinates. Ensure that context menu functionality is enabled in the grid settings for this method to work.
   * @param {number} left. The left position (in pixels) where the context menu should appear.
   * @param {number} top. The top position (in pixels) where the context menu should appear.
   */
  openContextMenu(left: number, top: number): void;
  /**
   * Displays the grid’s drop-down user interface when the 'dropDownMode' property is set to true, allowing users to interact with additional grid options or filters presented within the drop-down.
   */
  openDropDown(): void;
  /**
   * Closes the grid's drop-down user interface when the 'dropDownMode' property is set to true, ensuring that any open drop-down menus within the grid are dismissed automatically. This helps maintain a streamlined user experience by hiding drop-down elements when they are no longer needed or when specific actions are triggered.
   */
  closeDropDown(): void;
  /**
   * Generates a printed version of the Grid’s data using the configuration specified in the <em>dataExport</em> property. During printing, the Grid automatically hides scrollbars and adjusts its width and height to ensure that all rows and columns are fully visible on the page, regardless of their original size. This ensures that the entire content of the Grid is included in the printout without any truncation or the need for scrolling. To customize aspects such as page layout, formatting, or which data is included in the print output, adjust the parameters within the <em>dataExport</em> property.
   */
  print(): void;
  /**
   * Triggers a full re-render of the Grid, similar to when it is first initialized. This method reconstructs all underlying HTML elements for rows, columns, and cells from scratch, ensuring a fresh and accurate representation of the data. After rebuilding these elements, it also updates and refreshes the Grid layout to reflect any structural changes. This is useful when foundational data or configuration has changed and a partial update is not sufficient.
   */
  render(): void;
  /**
   * Enhances the Grid display by refreshing its layout to reflect the latest property values, dynamically updating only the necessary elements. This approach optimizes performance by avoiding a complete teardown and reconstruction of all Grid elements, ensuring a smoother and more efficient user experience.
   */
  refresh(): void;
  /**
   * Refreshes only the cells that are currently visible within the Grid’s viewport, rather than updating the entire Grid. This is especially useful for implementing real-time updates or live data feeds, as it enables efficient, seamless rendering of new cell values without triggering a full Grid refresh or losing the user's scroll position.
   */
  refreshView(): void;
  /**
   * Restores the Grid to its original default configuration by removing all user-applied settings, including sorting, filtering, grouping, and selected rows or cells. This action clears any user interactions, ensuring the Grid displays data with no custom modifications.
   */
  resetState(): void;
  /**
   * Removes the filter currently applied to the specified column. Optionally, you can delay the filter refresh process, allowing you to remove filters from multiple columns before triggering an update. This helps optimize performance when batch-processing multiple filter removals.
   * @param {string} dataField. The data field of the column from which to remove the filter, e.g., 'firstName'.
   * @param {boolean} refreshFilters?. If set to false, delays the filter refresh to allow multiple filters to be removed before updating the Grid.
   */
  removeFilter(dataField: string, refreshFilters?: boolean): void;
  /**
   * Removes grouping from the Grid for the specified data field. This method is only applicable when grouping functionality is enabled in the Grid. When called, it will ungroup the records currently grouped by the given field, and the Grid will update to display the data without that grouping criterion.
   * @param {string} dataField. The data field of the group to remove, e.g., 'firstName'.
   */
  removeGroup(dataField: string): void;
  /**
   * Removes any active sorting from the specified column. Use this method to clear the sort order applied to a particular data field, returning the column to its default, unsorted state. This is useful when you want to reset or update the sorting configuration for individual columns within a data table.
   * @param {string} dataField. The data field of the column whose sorting you want to remove, e.g., 'firstName'.
   */
  removeSort(dataField: string): void;
  /**
   * Applies the current sorting settings again to the data and updates the Grid display to reflect any changes, ensuring the data is presented according to the latest sorting configuration.
   */
  refreshSort(): void;
  /**
   * Reverts the Grid to its previous state by discarding all unsaved batch editing changes made by the user. Any modifications entered during the current batch editing session will be canceled, restoring the Grid’s data to its last committed state.
   */
  revertBatchEdit(): void;
  /**
   * Reorders two columns in the Grid by moving the specified source column to a new position either before or after the target reference column. This allows for customizable column arrangements by programmatically shifting the position of columns within the Grid.
   * @param {string | number} dataField. The data field or index of the column to move.
   * @param {string | number} referenceDataField. The data field or index of the target column used as reference for repositioning.
   * @param {boolean} insertAfter?. If true, inserts the first column after the reference column; otherwise, inserts it before.
   */
  reorderColumns(dataField: string | number, referenceDataField: string | number, insertAfter?: boolean): void;
  /**
   * Captures and returns the current state of the Grid as a comprehensive JSON object. The state includes details such as applied sorting and filtering criteria, columns configuration (order, visibility, and sizing), currently expanded rows, grouping settings, paging information (current page, page size), and user selections. Optionally, you can provide a name parameter to uniquely identify and reference the saved state for future retrieval or restoration.
   * @param {string} name?. Optional name to associate with the saved state.
   * @returns {any}
   */
  saveState(name?: string): any;
  /**
   * Applies sorting to the Grid based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of Grid sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.
   * @param {string} dataField. The data field of the column to sort, e.g., 'firstName'.
   * @param {string | null} sortOrder. Sort order to apply: 'asc' for ascending, 'desc' for descending, or null to remove sorting.
   */
  sortBy(dataField: string, sortOrder: string | null): void;
  /**
   * Swaps the positions of two specified columns within the Grid layout, effectively changing their order of appearance. This operation updates the Grid so that the selected columns exchange places, while the data and structure of other columns remain unchanged.
   * @param {string | number} dataField. The data field or index of the first column.
   * @param {string | number} referenceDataField. The data field or index of the second column.
   */
  swapColumns(dataField: string | number, referenceDataField: string | number): void;
  /**
   * Saves and applies all batch editing changes made by the end-user, persisting the updates permanently to the Grid's underlying data source. This operation commits all modifications (such as additions, deletions, and edits) performed during the batch editing session, ensuring that the Grid data source accurately reflects the latest user input.
   */
  saveBatchEdit(): void;
  /**
   * Specifies the selection of a particular row, column, or cell within a data table. If a data field (representing a column) is provided along with a row identifier, the selection targets a specific cell at the intersection of the given row and column. If only a row identifier is supplied without a data field, the entire row is selected. Similarly, providing only a data field without a row identifier selects the entire column.
   * @param {string | number} rowId. The identifier of the row to select.
   * @param {string} dataField?. Optional data field of the column to select a specific cell.
   */
  select(rowId: string | number, dataField?: string): void;
  /**
   * Selects a rectangular range of cells within the grid, defined by specifying both the starting and ending row IDs as well as the data field keys (columns). The selection includes all cells that fall within the rectangle formed by these start and end points. The behavior and outcome of this selection may vary based on the current selection mode of the Grid component (for example, whether it supports cell, row, or column selection)."
   * @param {string | number} rowId. The starting row ID of the selection range.
   * @param {string} dataField. The starting column data field of the selection range.
   * @param {string | number} endRowId. The ending row ID of the selection range.
   * @param {string} endDataField. The ending column data field of the selection range.
   */
  selectRange(rowId: string | number, dataField: string, endRowId: string | number, endDataField: string): void;
  /**
   * Selects all consecutive rows, inclusive, between the specified start and end row IDs. Both the start and end IDs are included in the selection, and only rows with IDs that fall within this continuous range will be selected.
   * @param {string | number} rowId. The starting row ID of the selection range.
   * @param {string | number} endRowId. The ending row ID of the selection range.
   */
  selectRowsRange(rowId: string | number, endRowId: string | number): void;
  /**
   * Selects multiple rows by accepting an array of row IDs, allowing you to specify and manipulate several rows simultaneously based on their unique identifiers.
   * @param {(string | number)[]} rowId. Array of row IDs to select.
   */
  selectRows(rowId: (string | number)[]): void;
  /**
   * Selects every row that is currently visible in the Grid, including only those rows that meet the active filters, sorting, and pagination settings. Hidden or filtered-out rows are not selected.
   */
  selectAllRows(): void;
  /**
   * Enhances selection functionality by allowing users to select multiple rows within the Grid component, using their zero-based index positions. This means you can specify one or more row indices (starting from 0 for the first row) to programmatically select the corresponding rows in the Grid.
   * @param {number[]} rowIndex. An array of zero-based row indexes to select.
   */
  selectRowsByIndex(rowIndex: number[]): void;
  /**
   * Selects rows from a dataset based on a specified query expression. This allows you to filter rows by applying conditions to the values in one or more columns. Supported conditions include equality (equals), partial matches (contains), comparison operators (greater than, less than), prefix matching (starts with), and more. The query expression enables flexible filtering, so only rows that meet the defined criteria are returned.
   * @param {string} query. The search query or value to filter by.
   * @param {string} dataField?. Optional column data field to apply the query against.
   * @param {string} condition?. Optional condition operator. Supported values include '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.
   */
  selectRowsByQuery(query: string, dataField?: string, condition?: string): void;
  /**
   * Allows you to select multiple cells within a grid by specifying arrays of row indices (cell ids) and corresponding column data fields.  <br/>For example: `grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']);`  <br/>This will select the cells located at the intersection of:<br/>- Row 0 and the 'firstName' column,<br/>- Row 1 and the 'quantity' column,<br/>- Row 2 and the 'date' column.<br/><br/>Each element in the id array matches with the element in the dataFields array by position, ensuring precise cell selection across different rows and columns. This method is useful for batch selection or applying simultaneous actions to multiple, non-contiguous cells.
   * @param {(string | number)[]} rowIds. Array of row ids
   * @param {string[]} dataFields. Array of data fields.
   */
  selectCells(rowIds: (string | number)[], dataFields: string[]): void;
  /**
   * Selects grid cells based on a query string.  <br/><br/>- Example 1: `grid.selectCellsByQuery('nancy');` selects all cells in the grid whose value is exactly 'nancy'.<br/>- Example 2: `grid.selectCellsByQuery('nancy, davolio');` selects all cells within rows where both 'nancy' and 'davolio' values appear in any columns of the same row.<br/><br/>The query can be a single value or a comma-separated list of values. When multiple values are specified, only rows containing all the specified values (regardless of column order) will have their cells selected.
   * @param {string} query. Search query
   */
  selectCellsByQuery(query: string): void;
  /**
   * Assigns a new value to a specific cell within a data table, targeting the cell by its unique row ID and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.
   * @param {string | number} rowId. The unique identifier of the row containing the cell.
   * @param {string} dataField. The data field of the column where the cell is located (e.g., 'firstName').
   * @param {string | number | Date | boolean} value. The new value to assign to the cell.
   */
  setCellValue(rowId: string | number, dataField: string, value: string | number | Date | boolean): void;
  /**
   * Sets the columns displayed in the Grid to a new set defined by the provided argument. When 'setColumns' is called, the Grid compares the new columns array with the currently displayed columns. It will add any new columns, retain existing columns that are still present, and remove columns that are not included in the new array. After updating the columns, the Grid automatically redraws all column headers and refreshes all rows to reflect the changes. Importantly, any state associated with existing columns—such as sort order, filters, column width, and other configurable options—will be preserved for columns that remain after the update. This ensures that users do not lose their settings when columns are changed dynamically.
   * @param {GridColumn[]} columns. Columns array.
   */
  setColumns(columns: GridColumn[]): void;
  /**
   * Sets or updates a specific property of a column identified by its dataField. This function allows you to dynamically modify column settings, such as freezing the column, toggling its visibility, adjusting its width, and altering other configurable attributes at runtime. Use this method to programmatically change how individual columns are displayed or behave within your data grid or table component.
   * @param {string} dataField. The dataField identifier of the column (e.g., 'firstName').
   * @param {string} propertyName. The name of the column property to set (e.g., 'freeze', 'visible', 'width').
   * @param {any} value. The new value to assign to the specified column property.
   */
  setColumnProperty(dataField: string, propertyName: string, value: any): void;
  /**
   * Updates or sets a specific property of a table row identified by its unique rowId. This function allows you to dynamically modify row attributes—for example, toggling the frozen state, applying custom styling, or adding arbitrary metadata—enabling flexible and responsive UI changes at the row level.
   * @param {string | number} rowId. The unique identifier of the row to modify.
   * @param {string} propertyName. The name of the row property to set (e.g., 'freeze', 'expanded', 'customProperty').
   * @param {any} value. The new value to assign to the specified row property.
   */
  setRowProperty(rowId: string | number, propertyName: string, value: any): void;
  /**
   * Allows you to apply custom CSS styles to a specific table row, identified by its unique rowId. Supported style properties include background color, text color, font size, font family, text decoration, font style, and font weight. This enables granular control over the appearance of individual rows in your table, ensuring consistency with your application's design requirements.
   * @param {string | number} rowId. The unique identifier of the row to style.
   * @param  rowStyle. An object specifying CSS style properties and values to apply to the entire row.
   */
  setRowStyle(rowId: string | number, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
  /**
   * Enhances a specific table cell's appearance by applying custom CSS styles, targeting the cell using both its unique rowId and the dataField (column identifier). You can specify a range of style properties, including background color, text color, font size, font family, text decoration, font style, and font weight, allowing precise control over the cell’s visual presentation.
   * @param {string | number} rowId. The unique identifier of the row containing the cell.
   * @param {string} dataField. The dataField (column) name of the cell to style.
   * @param  rowStyle. An object specifying CSS style properties and values to apply to the specific cell.
   */
  setCellStyle(rowId: string | number, dataField: string, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
  /**
   * Specifies the label text displayed for the Grid component when the 'dropDownMode' property is enabled. This label helps users identify the purpose or content of the Grid when it appears in drop-down mode.
   * @param {string} label. The label to be displayed in the dropdown button.
   */
  setDropDownLabel(label: string): void;
  /**
   * Sets the current position of the vertical scrollbar within a scrollable container or component. This method allows you to programmatically control the vertical scroll offset, typically specified in pixels or logical units from the top of the content. It can be used in conjunction with the getVerticalScrollValue method to retrieve the current scroll position, and with getVerticalScrollMax to determine the maximum scrollable value. This is useful for synchronizing scrolling behavior, implementing custom scroll controls, or restoring a previous scroll position.
   * @param {number} value. The new scroll position
   */
  setVerticalScrollValue(value: number): void;
  /**
   * Sets the current position of the horizontal scrollbar within a scrollable container. This method allows you to programmatically adjust the horizontal scroll offset, enabling smooth navigation or custom scroll behavior. It can be used in combination with getHorizontalScrollValue to retrieve the current scroll position, and with getHorizontalScrollMax to determine the maximum scrollable distance. This is useful for implementing features such as custom scrolling controls, restoring previous scroll positions, or synchronizing scrolling across multiple elements.
   * @param {number} value. The new scroll position
   */
  setHorizontalScrollValue(value: number): void;
  /**
   * Closes the side panel component of the Grid interface, hiding any currently displayed content or options and returning the Grid to its default view.
   */
  closeSidePanel(): void;
  /**
   * Displays the Grid's side panel, providing access to additional settings, filters, and customization options related to the Grid's content and layout.
   * @param {any} content. This is the content which will be displayed in the side panel. It can be String, HTML Element, HTML Template Element or Component
   * @param {number} width?. This is the width of the side panel
   * @param {any} callback?. Function called when the panel is opened. It can be used for dynamically showing content and initializing it.
   */
  showSidePanel(content: any, width?: number, callback?: any): void;
  /**
   * Renders an in-depth view of a selected row when the row details feature is activated in the grid configuration. This allows users to access and interact with additional information or actions related to the chosen row.
   * @param {string | number} rowId. row bound id
   */
  showDetail(rowId: string | number): void;
  /**
   * Displays a visually distinct overlay message positioned directly beneath a specific cell. This method is ideal for providing contextual onboarding tips, user guidance, or delivering custom messages tailored to the user's current interaction. It enhances user experience by presenting timely and relevant information without interrupting workflow.
   * @param {string | number} rowId. row bound id
   * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
   * @param {string} value. The message to be shown below the cell
   */
  showCellMessage(rowId: string | number, dataField: string, value: string): void;
  /**
   * Updates the data of a specific row identified by its unique row ID. When batch editing mode is enabled, the changes to the row are temporarily staged and will not be permanently saved to the data source until the user explicitly commits or saves the batch of edits. This ensures that multiple changes can be reviewed and either all applied or discarded together, rather than being immediately written to the underlying data.
   * @param {string | number} rowId. row bound id
   * @param {any} data. row data matching the data source
   * @param  callback?. Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.
   */
  updateRow(rowId: string | number, data: any, callback?: {(row: GridRow): void}): void;
  /**
   * Deselects a previously selected row, cell, or column within the data grid, removing any associated highlight or selection state.
   * @param {string | number} rowId. row bound id
   * @param {string} dataField?. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
   */
  unselect(rowId: string | number, dataField?: string): void;
  /**
   * Unchecks a specific row in the TreeGrid by setting its associated checkbox to an unchecked (false) state. This visually updates the checkbox in the UI and updates the row’s checked status in the underlying data model.
   * @param {string | number} rowId. row bound id
   */
  uncheckRow(rowId: string | number): void;
  /**
   * Resets the checked state of all rows in a TreeGrid or GroupingGrid by setting every checkbox to unchecked (`false`). This action ensures that no rows remain selected or checked, effectively deselecting all items in the grid.
   */
  uncheckAllRows(): void;
  /**
   * Toggles the expanded or collapsed state of a TreeGrid row specified by the provided row ID. If the target row is currently collapsed, this action will expand it to reveal its child rows. Conversely, if the row is expanded, it will collapse and hide any child rows. Use this function to dynamically show or hide hierarchical data within the TreeGrid based on user interaction or programmatic control.
   * @param {string | number} rowId. The ID of the row to toggle expand/collapse state.
   */
  toggleRow(rowId: string | number): void;
  /**
   * Transposes the Grid.
   * @param {string} dataField. The dataField of the Column.
   * @param {number} columnWidth?. The width of the Column.
   * @param {any} initColumn?. callback for set up of the column.
   */
  transpose(dataField: string, columnWidth?: number, initColumn?: any): void;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

/**An object that defines configurable options for customizing the visual appearance of the grid, including properties such as line color, spacing, background style, and border visibility. */
export interface GridAppearance {
  /**
   * Specifies the row index from which the alternating color pattern should begin. This determines the first row in the sequence that will receive a different background color, enabling alternating row colors for improved readability.
   * Default value: 0
   */
  alternationStart?: number;
  /**
   * Indicates the ending row index at which the alternating color pattern stops being applied. This index is inclusive, meaning the alternating colors will be applied up to and including this row.
   * Default value: 0
   */
  alternationEnd?: number;
  /**
   * The total number of times the row background color alternates, creating a striped (zebra) pattern in the table. Each alternation changes the row color from one specified color to the next in the sequence.
   * Default value: 0
   */
  alternationCount?: number;
  /**
   * Allows specific table columns to remain fixed (sticky) on the left or right side while horizontally scrolling, improving table readability and user experience.
   * Default value: false
   */
  allowColumnStickyPosition?: boolean;
  /**
   * Activates a hover effect for table rows. When a user hovers over a row, a distinct style is applied to all cells within that row, improving interactivity and highlighting the row under the cursor.
   * Default value: false
   */
  allowHover?: boolean;
  /**
   * Activates a visual hover effect on header elements. When a user moves their cursor over a header, a distinct hover style is applied to highlight the header and improve interactivity.
   * Default value: true
   */
  allowHeaderHover?: boolean;
  /**
   * Enables animated transitions when expanding or collapsing a row in TreeGrid or Grouping mode. When this option is active, rows smoothly slide open or closed, enhancing the user experience by visually indicating the change in row state. This animation is triggered each time a row is expanded to show child nodes or collapsed to hide them.
   * Default value: false
   */
  allowRowToggleAnimation?: boolean;
  /**
   * Enables animated transitions when expanding or collapsing row details in TreeGrid or Grouping mode. When a user clicks to expand or collapse a row, a smooth animation visualizes the row’s content appearing or disappearing, enhancing the user experience by clearly indicating the change in row state.
   * Default value: false
   */
  allowRowDetailToggleAnimation?: boolean;
  /**
   * Enables animated sorting of data records. When sorting is applied, the data records are visually rearranged using smooth transition animations, providing a clear and engaging user experience as the records update their order on the interface.
   * Default value: false
   */
  allowSortAnimation?: boolean;
  /**
   * Activates animation for the column label. When a user hovers over the column header or applies sorting—causing the header’s drop-down button to appear—the column label smoothly transitions to the left using an animation effect. This improves the visual feedback and highlights the interactive state of the column header.
   * Default value: true
   */
  allowColumnLabelAnimation?: boolean;
  /**
   * Controls whether the column menu displays with an animated transition. When enabled, clicking the drop-down button on a column header will show or hide the menu using a smooth animation effect, enhancing the user experience. If disabled, the menu will appear and disappear instantly without animation.
   * Default value: true
   */
  allowColumnMenuAnimation?: boolean;
  /**
   * Enables animated transitions for column sort buttons. When a user clicks on a sortable column header to change the sort order (ascending or descending), the sort button visually animates to indicate the sorting action, enhancing user feedback and interface interactivity.
   * Default value: true
   */
  allowColumnSortButtonAnimation?: boolean;
  /**
   * Enables animation for the column action button. When this option is active, the drop-down button that appears upon hovering over a column header will display with a smooth animation effect, enhancing visual feedback for the user. If disabled, the drop-down button will appear instantly without any animation.
   * Default value: true
   */
  allowColumnActionButtonAnimation?: boolean;
  /**
   * Activates animated transitions for column filter buttons, providing visual feedback when filters are applied or removed. This enhances user experience by making the filtering process more intuitive and visually engaging.
   * Default value: true
   */
  allowColumnFilterButtonAnimation?: boolean;
  /**
   * When enabled, this property automatically displays the column sort button only when the column is actively sorted. If set to false, the sort button is always visible, regardless of whether the column is currently sorted, indicating that sorting is available for that column.
   * Default value: true
   */
  autoShowColumnSortButton?: boolean;
  /**
   * If enabled, this option automatically displays the column action button, allowing users to access additional actions or settings related to the column without manual configuration.
   * Default value: true
   */
  autoShowColumnActionButton?: boolean;
  /**
   * If enabled, this option automatically displays a filter button in each column header, allowing users to quickly access and apply filtering options to the column's data.
   * Default value: true
   */
  autoShowColumnFilterButton?: boolean;
  /**
   * Specifies the format of row header labels, allowing you to choose between sequential numbers (e.g., 1, 2, 3, ...) or alphabetical letters (e.g., A, B, C, ...). Changing this property determines how the row headers are displayed in the rendered output.
   * Default value: number
   */
  autoGenerateRowLabelMode?: GridAppearanceAutoGenerateRowLabelMode | string;
  /**
   * Determines the format of the column header labels, allowing them to be displayed as either sequential numbers (e.g., 1, 2, 3…) or letters (e.g., A, B, C…). This property directly influences how column headers are rendered and displayed in the table interface.
   * Default value: letter
   */
  autoGenerateColumnLabelMode?: GridAppearanceAutoGenerateColumnLabelMode | string;
  /**
   * Controls the visibility of the loading indicator in the Grid component. When enabled, a "Loading..." image or animation is displayed as an overlay while the Grid is fetching or processing data, providing visual feedback to users that content is being loaded.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Specifies the label text shown in the loading indicator. This text appears to inform users that data is currently being loaded or processed. Use this property to customize the loading message for better user experience.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the placeholder content displayed in the Grid when there are no data items to show. This placeholder provides a visual cue or message to users, indicating that the Grid is currently empty.
   * Default value: "No Rows"
   */
  placeholder?: string;
  /**
   * Specifies the length of time, in milliseconds, that the sorting animation will run when items are sorted. This property takes effect only if the allowSortAnimation property is enabled. Use it to control the speed and smoothness of the sorting transition for a better user experience.
   * Default value: 500
   */
  sortAnimationDuration?: number;
  /**
   * Toggles the visibility of the row header, allowing you to either display or hide the header section for each row in the grid or table.
   * Default value: false
   */
  showRowHeader?: boolean;
  /**
   * Controls the visibility of row headers within the TreeGrid component. By default, non-leaf tree items (i.e., parent nodes) are rendered as standard rows. When this property is set to true, these parent nodes are displayed as row headers, visually distinguished in a manner similar to how group headers are rendered. This enhances the hierarchical structure of the TreeGrid, making parent-child relationships more prominent.
   * Default value: false
   */
  showTreeRowHeader?: boolean;
  /**
   * Displays the row indexes in the row header section of the table. To enable this feature, set the showRowHeader property to true. When activated, each row header will display its corresponding index, providing clear reference points for users.
   * Default value: false
   */
  showRowHeaderNumber?: boolean;
  /**
   * Displays an edit icon whenever a cell or row enters the edit state, providing a clear visual indicator that the item is currently being modified.
   * Default value: true
   */
  showRowHeaderEditIcon?: boolean;
  /**
   * Displays a selection icon when the user's pointer hovers over the row header cell, providing a visual cue that the row can be selected.
   * Default value: false
   */
  showRowHeaderSelectIcon?: boolean;
  /**
   * Displays a focus icon whenever a table cell or entire row is focused, providing a clear visual indicator of the current selection for improved accessibility and user interaction.
   * Default value: false
   */
  showRowHeaderFocusIcon?: boolean;
  /**
   * Displays a drag handle icon within the row header, allowing users to initiate and perform row drag-and-drop actions for reordering rows.
   * Default value: false
   */
  showRowHeaderDragIcon?: boolean;
  /**
   * Displays visible lines that separate the headers of columns from one another, making it easier to distinguish between different column headings in a table or grid layout.
   * Default value: true
   */
  showColumnHeaderLines?: boolean;
  /**
   * Displays a drag handle icon on the column header when drag-and-drop functionality is enabled. The icon becomes visible when the user hovers the mouse cursor near the left edge of the column header, indicating that the column can be dragged to a new position.
   * Default value: false
   */
  showColumnHeaderDragIcon?: boolean;
  /**
   * Displays vertical grid lines between columns, making it easier to distinguish and separate individual columns within the layout.
   * Default value: true
   */
  showColumnLines?: boolean;
  /**
   * Displays horizontal lines that separate each row in the table, making it easier to distinguish and read individual rows.
   * Default value: true
   */
  showRowLines?: boolean;
  /**
   * Displays vertical divider lines between columns that are organized into groups, visually separating each column within the group to improve readability and distinction.
   * Default value: true
   */
  showColumnGroupLines?: boolean;
  /**
   * Displays dividing lines between cells within column groups, clearly separating each cell to improve readability and organization within grouped columns.
   * Default value: true
   */
  showColumnGroupCellLines?: boolean;
  /**
   * Displays column groups in the "Hide columns" panel, presenting both column groups and individual columns in a hierarchical, tree-like structure. If this property is set to false, column groups are hidden from the panel, and instead, column labels are prefixed with their corresponding group name for context.
   * Default value: false
   */
  showColumnGroupsInColumnPanel?: boolean;
  /**
   * Displays a distinct background color on the column header to indicate when a filter has been applied to that column. This visually highlights filtered columns, helping users easily identify which columns are currently filtered.
   * Default value: false
   */
  showFilterColumnBackground?: boolean;
  /**
   * Highlights the background of the column currently being sorted, visually indicating which column has an active sort applied.
   * Default value: false
   */
  showSortColumnBackground?: boolean;
  /**
   * Displays a distinct background for frozen columns in the grid, making it visually clear which columns are fixed in place when horizontal scrolling is enabled. This feature is active only when the grid contains frozen columns.
   * Default value: true
   */
  showFrozenColumnBackground?: boolean;
  /**
   * Displays the selection with the highest visual priority, ensuring it appears above all other styled elements. This guarantees the selection remains clearly visible and is not obscured by any other interface elements or styles.
   * Default value: false
   */
  showSelectionOnTop?: boolean;
  /**
   * Displays a sorting button within the column header, allowing users to sort the column's data in ascending or descending order.
   * Default value: true
   */
  showColumnSortButton?: boolean;
  /**
   * Displays a filter button in the column header, allowing users to access filtering options for that specific column.
   * Default value: true
   */
  showColumnFilterButton?: boolean;
  /**
   * Displays a button that reveals the column description. The appearance and styling of this button can be fully customized using the Grid's CSS classes, allowing you to match it to your application's design.
   * Default value: false
   */
  showColumnDescriptionButton?: boolean;
  /**
   * Displays an icon within the header of the column, providing a visual indicator or representation specific to that column. This icon appears alongside or instead of the column title and can be used to convey additional information or functionality related to the column's contents.
   * Default value: false
   */
  showColumnIcon?: boolean;
  /**
   * Displays a user-defined custom button in the column header. This allows developers to add their own button to the top of a column, enabling custom actions or functionality specific to that column.
   * Default value: false
   */
  showColumnCustomButton?: boolean;
  /**
   * Displays the column action button, which appears as a drop-down menu icon within the column header. This button allows users to access additional actions or settings related to the specific column, such as sorting, filtering, or customizing the column display.
   * Default value: true
   */
  showColumnActionButton?: boolean;
  /**
   * Displays informative tooltips when the user hovers over table columns or individual cells, providing additional context or details about the data shown.
   * Default value: false
   */
  showTooltips?: boolean;
  /**
   * Displays a horizontal scrollbar specifically for fixed columns, allowing users to scroll horizontally within the fixed section when its content exceeds the available width.
   * Default value: false
   */
  showHorizontalScrollBarOnFixedColumns?: boolean;
  /**
   * Displays a vertical scrollbar specifically on fixed columns, allowing users to scroll through content within those columns when the content exceeds the visible height. This ensures that fixed columns remain accessible and easy to navigate even with overflow content.
   * Default value: false
   */
  showVerticalScrollBarOnFixedColumns?: boolean;
  /**
   * Displays the current date as the word "Today" instead of the standard date format (e.g., "7/8/2022"). When this property is set to false, the component will show the full numerical date.
   * Default value: true
   */
  showTodayDateAsString?: boolean;
}

/**An object that defines configuration options for integrating AI capabilities within the grid component. This includes settings for enabling AI features, specifying AI service endpoints, setting authentication credentials, and customizing how the grid interacts with AI-powered functionalities. */
export interface GridAi {
  /**
   * Specifies the AI model utilized to power text generation and other AI-driven functionalities within the application. This setting determines which underlying AI engine is responsible for producing generated content and handling intelligent features.
   * Default value: "gpt-3.5-turbo"
   */
  model?: string;
  /**
   * Specifies the maximum number of tokens (which may include words, punctuation, or characters, depending on the model's tokenization method) that the AI is allowed to generate in response to a single request. This limit helps control the length of the output and resource usage.
   * Default value: 200
   */
  maxTokens?: number;
  /**
   * Determines the degree of randomness in the AI-generated output. Lower values yield more deterministic and focused responses, making the AI’s answers predictable and precise. Higher values increase creativity and variability, resulting in more diverse and imaginative responses.
   * Default value: 0.7
   */
  temperature?: number;
  /**
   * Specifies the endpoint URL used to send AI-related requests. This is usually the URL of your backend service or proxy, which securely forwards requests to OpenAI or another AI service provider. Ensure this URL points to your server that handles authentication, rate limiting, and any additional processing before communicating with the external AI API.
   * Default value: ""
   */
  url?: string;
  /**
   * The unique API key required to authenticate and authorize requests made to the AI service provider, ensuring secure access and usage tracking for each client application.
   * Default value: ""
   */
  key?: string;
}

/**An object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings. */
export interface GridBehavior {
  /**
   * Automatically resizes a column to fit its content when the user double-clicks on the right edge of the column header.
   * Default value: true
   */
  allowColumnAutoSizeOnDoubleClick?: boolean;
  /**
   * Automatically resizes the row height to fit its content when the bottom border of the row is double-clicked.
   * Default value: true
   */
  allowRowAutoSizeOnDoubleClick?: boolean;
  /**
   * Specifies whether the functionality to reorder rows—such as through drag-and-drop or other user interactions—is enabled. When set to true, users can change the order of rows within the table or list component.
   * Default value: false
   */
  allowRowReorder?: boolean;
  /**
   * Specifies whether users are allowed to reorder columns by dragging them to new positions within the table or grid.
   * Default value: false
   */
  allowColumnReorder?: boolean;
  /**
   * Controls whether users can freeze (or pin) columns using drag-and-drop interactions. - 'When other columns are already frozen/pinned:' Dragging a column into the frozen area will immediately add it to that section.  - 'When no columns are currently frozen/pinned:' Dragging a column to the edge of the grid and holding it there for about one second will automatically activate the frozen area and pin the column.Enabling this option provides an intuitive way for users to freeze columns directly from the grid interface.
   * Default value: false
   */
  allowColumnFreeze?: boolean;
  /**
   * Specifies whether users can scroll the content using the mouse wheel. If enabled, the mouse wheel will allow vertical or horizontal scrolling within the element; if disabled, mouse wheel actions will have no scrolling effect.
   * Default value: true
   */
  allowMouseWheel?: boolean;
  /**
   * Specifies how column resizing is handled.  In split mode, when a column is resized, its width increases or decreases, and the adjacent (next) column’s width is adjusted in the opposite direction, so the combined width of both columns remains constant.  In growAndShrink mode, only the resized column's width changes; the widths of other columns remain unaffected.
   * Default value: none
   */
  columnResizeMode?: GridResizeMode | string;
  /**
   * Specifies how rows are resized within the container.  - In the split resize mode, resizing a row will both increase or decrease the height of the target (resized) row and inversely adjust the height of the immediately following (sibling) row, ensuring the total height remains constant.- In the growAndShrink resize mode, only the targeted row's height is adjusted—either increasing or decreasing—without affecting the size of neighboring rows.
   * Default value: none
   */
  rowResizeMode?: GridResizeMode | string;
}

/**Provides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid. */
export interface GridColumnHeader {
  /**
   * Controls whether the column headers are displayed or hidden in the table or grid component.
   * Default value: true
   */
  visible?: boolean;
}

/**The <em>clipboard</em> property controls whether users can perform clipboard operations—such as copying (Ctrl+C), cutting (Ctrl+X), and pasting (Ctrl+V)—using keyboard shortcuts within the application. Setting this property to <code>true</code> enables these keyboard shortcuts for clipboard actions; setting it to <code>false</code> disables them, preventing users from using keyboard navigation for copying, cutting, or pasting content. */
export interface GridClipboard {
  /**
   * Specifies whether the property is currently active (enabled) or inactive (disabled). You can use this setting to retrieve the current status or to enable or disable the property as needed.
   * Default value: true
   */
  enabled?: boolean;
  /**
   * Determines whether the column headers are included when copying data to the clipboard. When enabled, copying data will also copy the column headers; when disabled, only the data will be copied. This setting can be used to set or retrieve the current behavior.
   * Default value: false
   */
  copyHeadersToClipboard?: boolean;
  /**
   * Defines whether and how the values of copied and pasted cells are automatically filled using pattern detection during Drag & Drop or multiple cell selection operations. This setting determines how pasted data is handled:- 'none': No auto-fill or pattern detection is applied. Pasted cells remain as they are, with no changes or repetition beyond what was directly copied.- 'copy': The exact cell values are duplicated into the new locations without attempting to follow or extend any logical sequence or pattern.- 'fillSeries': Enables automatic pattern detection and series continuation. If the selection forms a recognizable sequence—for example, '1, 2'—the pasted cells will extend this pattern (e.g., '1, 2, 3, 4, ...'), filling additional cells with the next values in the detected sequence.This option helps users quickly extend numeric, date, or other discernible patterns when dragging or pasting multiple cells.
   * Default value: fillSeries
   */
  autoFillMode?: GridClipboardAutoFillMode | string;
  /**
   * Defines or retrieves a callback function that is triggered when a paste event occurs, allowing custom handling of pasted content.
   * Default value: null
   */
  onPasteValue?: {(args: {value: any, oldValue: any, dataField: string, id: string | number}): void};
}

export interface GridColumn {
  /**
   * Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
   * Default value: left
   */
  align?: HorizontalAlignment | string;
  /**
   * Sets or gets whether the column can be exported.
   * Default value: true
   */
  allowExport?: boolean;
  /**
   * Sets or gets whether the column can be grouped.
   * Default value: true
   */
  allowGroup?: boolean;
  /**
   * Sets or gets whether the column can be hidden.
   * Default value: true
   */
  allowHide?: boolean;
  /**
   * Sets or gets whether the column can be selected.
   * Default value: true
   */
  allowSelect?: boolean | null;
  /**
   * Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }
   * Default value: true
   */
  allowEdit?: any;
  /**
   * Sets or gets whether the column can be sorted.
   * Default value: true
   */
  allowSort?: boolean;
  /**
   * Sets or gets whether the column can be edited, when header editing is enabled.
   * Default value: true
   */
  allowHeaderEdit?: boolean;
  /**
   * Sets or gets whether the column can be filtered.
   * Default value: true
   */
  allowFilter?: boolean;
  /**
   * Sets or gets whether the column can be reordered.
   * Default value: true
   */
  allowReorder?: boolean;
  /**
   * Sets or gets whether the column can be resized.
   * Default value: true
   */
  allowResize?: boolean;
  /**
   * Sets or gets whether the column can have 'null' values.
   * Default value: true
   */
  allowNull?: boolean;
  /**
   * Sets or gets the cell's height in card view mode.
   * Default value: 0
   */
  cardHeight?: number;
  /**
   * Defines the format applied to the column's cell values. Supports number and date format strings. Examples for numeric formatting:'d' - Decimal numbers (e.g., 25)'f' - Floating-point numbers (e.g., 25.50)'n' - Integer numbers with thousands separator (e.g., 1,000)'c' - Currency format (e.g., $25.50)'p' - Percentage format (e.g., 50%)To define decimal places, append a number (e.g., 'c2' = $25.26).Examples for date formatting:'d' - Short date (e.g., 3/25/2025)'D' - Long date (e.g., Tuesday, March 25, 2025)'t' - Short time (e.g., 1:30 PM)'T' - Long time (e.g., 1:30:45 PM)'f' - Long date + short time'F' - Long date + long time'M' - Month/day (e.g., March 25)'Y' - Year and month (e.g., 2025 March)'S' - Sortable, culture-invariant format (e.g., 2025-03-25T13:30:45)Custom date format tokens:'dd' - Day of month (e.g., 01-31)'MMMM' - Full month name'yyyy' - 4-digit yearAnd many more standard date/time tokens
   * Default value: ""
   */
  cellsFormat?: string;
  /**
   * Controls the horizontal alignment of cell content. Acceptable values:'left' - Aligns content to the left'right' - Aligns content to the right'center' - Centers content horizontally
   * Default value: left
   */
  cellsAlign?: HorizontalAlignment | string;
  /**
   * Sets or gets the column's cells wrapping. Accepts: true or false.
   * Default value: false
   */
  cellsWrap?: boolean;
  /**
   * Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
   * Default value: center
   */
  cellsVerticalAlign?: VerticalAlignment | string;
  /**
   * Sets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.
   * Default value: ""
   */
  className?: string;
  /**
   * Sets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }
   * Default value: 
   */
  cellsClassName?: any;
  /**
   * Sets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value &lt;5, 'three': settings => settings.value === 3 }.  The settings object contains the following properties: index, value, dataField, row, api.
   * Default value: null
   */
  cellsCSSRules?: any;
  /**
   * Sets or gets the column's cells renderer function for custom html rendering in the cells. For more advanced scenarios use formatFunction or template, but for simple html rendering, you can use this.
   * Default value: null
   */
  cellsRenderer?: {(rowId: string | number, dataField: string, cellValue: any, rowData: any, cellElement: any): string};
  /**
   * Sets the name of the column group.
   * Default value: ""
   */
  columnGroup?: string;
  /**
   * Sets or gets the column's data source bound field.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'
   * Default value: "string"
   */
  dataType?: string;
  /**
   * Sets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.
   * Default value: ""
   */
  displayField?: string;
  /**
   * Sets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.
   * Default value: ""
   */
  description?: string;
  /**
   * Sets or gets custom data object related to the column.
   * Default value: null
   */
  dataSet?: any;
  /**
   * Gets the HTML Element. The property returns null when the Column is not in the View.
   * Default value: null
   */
  element?: HTMLElement;
  /**
   * Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.
   * Default value: null
   */
  editor?: any;
  /**
   * Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).
   * Default value: false
   */
  freeze?: Position | string;
  /**
   * Sets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '&lt;= 3 and &gt;= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
   * Default value: ""
   */
  filter?: string;
  /**
   * Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed.
   * Default value: default
   */
  filterMenuMode?: GridColumnFilterMenuMode | string;
  /**
   * Sets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number
   * Default value: null
   */
  filterEditor?: any;
  /**
   * Sets or gets the column's format function.
   * Default value: null
   */
  formatFunction?: {(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any, data?: any}): void};
  /**
   * Defines the formatting settings applied to the column's values. You can use built-in formatting options or provide advanced internationalization formats using Intl objects. For example, to apply currency formatting: 'Intl: { NumberFormat: { style: "currency", currency: "EUR" } }', or for date formatting: 'Intl: { DateTimeFormat: { dateStyle: "full" } }'.
   * Default value: [object Object]
   */
  formatSettings?: any;
  /**
   * Sets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')
   * Default value: ""
   */
  formula?: string;
  /**
   * Sets or gets the column's group.
   * Default value: ""
   */
  group?: string;
  /**
   * This function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.
   * Default value: null
   */
  getCellValue?: any;
  /**
   * Gets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu.  The function works in combination with updateFilterPanel
   * Default value: null
   */
  getFilterPanel?: any;
  /**
   * Sets or gets the column's icon. Expects CSS class name.
   * Default value: ""
   */
  icon?: string;
  /**
   * Sets or gets the text displayed in the column's header.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
   * Default value: 
   */
  labelTemplate?: string | HTMLTemplateElement | HTMLElement | {(label: string): string};
  /**
   * Sets or gets the minimum width.
   * Default value: 30
   */
  minWidth?: number;
  /**
   * Sets or gets the column's rowSpan function. Allows you to dynamically span cells.
   * Default value: null
   */
  rowSpan?: {(cellValue: any, rowIndex: number, data: any): number};
  /**
   * Defines the unique identifier of a relation within dataSourceSettings.relations. Must be used together with the 'relationField' property to establish the relationship mapping.
   * Default value: ""
   */
  relationId?: string;
  /**
   * Specifies the data field within the current data source that participates in the relationship defined by 'relationId'. Both 'relationField' and 'relationId' must be configured to create a valid relation.
   * Default value: ""
   */
  relationField?: string;
  /**
   * Sets or gets the column options for editors such as list, dropdownlist or tags.
   * Default value: []
   */
  options?: any[];
  /**
   * Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.
   * Default value: none
   */
  sortOrder?: GridColumnSortOrder | string;
  /**
   * Sets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.
   * Default value: null
   */
  sortIndex?: number;
  /**
   * Sets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) =&gt; { if (value1 === value2) return 0; return value1 &lt;value2; }
   * Default value: null
   */
  sortComparator?: any;
  /**
   * Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
   * Default value: true
   */
  showActionButton?: boolean;
  /**
   * Sets or gets whether the column's header icon is displayed.
   * Default value: false
   */
  showIcon?: boolean;
  /**
   * Sets or gets whether the column's header description button is displayed.
   * Default value: false
   */
  showDescriptionButton?: boolean;
  /**
   * Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
   * Default value: 
   */
  width?: string | number;
  /**
   * Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
   * Default value: 
   */
  template?: any;
  /**
   * Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.
   * Default value: null
   */
  templateSettings?: any;
  /**
   * Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
   * Default value: null
   */
  validationRules?: [] | null;
  /**
   * Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
   * Default value: center
   */
  verticalAlign?: VerticalAlignment | string;
  /**
   * Sets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'.
   * Default value: 
   */
  summary?: string[];
  /**
   * Updates the column's filter panel. The function works in combination with getFilterPanel
   * Default value: null
   */
  updateFilterPanel?: any;
  /**
   * Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
   * Default value: true
   */
  visible?: boolean;
}

/**The Context Menu is the drop-down menu that appears when a user right-clicks on a row within the Grid. This menu provides quick access to actions such as deleting a row or editing a cell or entire row, depending on the current editing mode configured for the Grid. <br/><br/>You can customize the Context Menu by using the 'contextMenuItemCustom' option in the Grid's dataSource. This option lets you add your own custom menu items to enhance or extend the menu's functionality.<br/><br/>Additionally, if you want to completely replace the default context menu with your own, you can use the 'selector' property. Set this property to the ID of a Smart.Menu component to display your custom menu when the user right-clicks on a row in the Grid. */
export interface GridContextMenu {
  /**
   * Controls the visibility of the context menu within the component. When set to true, the context menu appears upon right-clicking a row, allowing users to access additional actions. If set to false, the context menu is disabled and will not appear when users right-click on a row. This property can be used to enable or restrict context menu interactions as needed.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Defines an array of custom context menu items that will appear when the user opens the context menu. Each item in the array specifies the label, action, and additional options for the menu entry, enabling developers to tailor the context menu to their application's specific requirements.
   * Default value: null
   */
  customContextMenuItems?: any[];
  /**
   * Associates a list of data sources with the context menu, enabling dynamic population of menu items based on the specified data. This allows the context menu to display relevant options according to the provided data sources.
   * Default value: [object Object]
   */
  dataSource?: GridContextMenuDataSource;
  /**
   * Specifies the ID or CSS class selector of a Smart.Menu component that will be used as the context menu for the Grid. This allows you to assign a custom menu that appears when users right-click on the Grid. The value should correspond to the Smart.Menu element’s unique ID (preceded by “#”) or a CSS class (preceded by “.”).
   * Default value: ""
   */
  selector?: string;
  /**
   * Specifies the width of the context menu in pixels. Adjusting this value determines how wide the context menu appears when displayed to users. This property helps ensure the menu fits its content appropriately and aligns with your application's design requirements.
   * Default value: 250
   */
  width?: number;
  /**
   * Specifies the vertical size of the context menu in pixels, determining how much space it occupies on the screen. Adjusting this value controls the overall height of the menu, which can affect the visibility and accessibility of its menu items.
   * Default value: null
   */
  height?: number | null;
}

/**Associates a list of data sources with the context menu, enabling dynamic population of menu items based on the specified data. This allows the context menu to display relevant options according to the provided data sources. */
export interface GridContextMenuDataSource {
  /**
   * Provides the structure and parameters required to delete an item, including details such as the unique identifier of the item to be removed and any necessary authentication or validation information. Outlines the expected request format and possible responses for a delete operation.
   * Default value: [object Object]
   */
  contextMenuItemDelete?: GridCommand;
  /**
   * Provides a detailed schema for the "edit item" operation, outlining the structure and fields required to update an existing item's information. This includes the item's unique identifier and any attributes that can be modified, ensuring accurate and efficient editing of item details within the application.
   * Default value: [object Object]
   */
  contextMenuItemEdit?: GridCommand;
  /**
   * Provides detailed information about the custom item, including its properties, attributes, and any associated metadata used for configuration and display within the application.
   * Default value: [object Object]
   */
  contextMenuItemCustom?: GridCommand;
}

/**Provides the structure and parameters required to delete an item, including details such as the unique identifier of the item to be removed and any necessary authentication or validation information. Outlines the expected request format and possible responses for a delete operation. */
export interface GridCommand {
  /**
   * Defines the specific command or action that will be executed when the user selects this item from the context menu. This property links the menu item to a corresponding function or handler in your application logic.
   * Default value: "contextMenuItemDeleteCommand"
   */
  command?: string;
  /**
   * Activates and displays the context menu item, making it available for user interaction within the application's right-click or context menu interface.
   * Default value: true
   */
  enabled?: boolean;
  /**
   * Controls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden and not accessible through the menu interface.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Specifies the icon image to display next to the context menu item, enhancing its visual appearance and helping users quickly identify the item's function. Accepts a URL or a predefined icon identifier, depending on the implementation.
   * Default value: "jqx-icon-delete"
   */
  icon?: string;
  /**
   * Specifies the text that appears as the label for the context menu item, allowing users to identify and select the menu option within the context menu.
   * Default value: ""
   */
  label?: string;
}

/**The Column Menu is a contextual drop-down menu that appears when you click the drop-down button in a column header, which becomes visible upon hovering over the header. This menu provides various options for customizing the behavior and appearance of the selected column. Common actions include sorting the grid by the column, applying filters to show or hide specific data, and grouping the grid rows based on the column’s values. The Column Menu offers an intuitive way for users to interact with and tailor the data grid to meet their specific needs. */
export interface GridColumnMenu {
  /**
   * Automatically closes the column menu when it is open. This ensures the menu is hidden from view, typically after a user action such as selecting an option or clicking outside the menu. This helps improve user experience by keeping the interface clean and responsive.
   * Default value: true
   */
  autoClose?: boolean;
  /**
   * Specifies the data sources available for selection or display within the column menu, allowing users to choose or interact with different data sets directly from the column menu interface.
   * Default value: [object Object]
   */
  dataSource?: GridColumnMenuDataSource;
  /**
   * Retrieves the current visibility status of the column menu. This function returns true if the column menu is currently displayed to the user; otherwise, it returns false.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Controls the visibility of the column menu. When set to true, the column menu appears when the user hovers over the column header, providing additional options for manipulating the column. If set to false, the column menu is disabled and will not be displayed on hover. This property can be used to enable or disable the column menu programmatically.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Specifies the width, in pixels, of the column menu panel. This determines how wide the menu appears when a user opens the column options in the table or grid interface. Adjust this value to control the available space for menu items and improve usability.
   * Default value: 250
   */
  width?: number;
  /**
   * Defines the vertical height, in pixels, of the column menu component. Adjusting this value determines how much vertical space the column menu occupies, which can impact the display and usability of the menu's content items.
   * Default value: null
   */
  height?: number | null;
}

/**Specifies the data sources available for selection or display within the column menu, allowing users to choose or interact with different data sets directly from the column menu interface. */
export interface GridColumnMenuDataSource {
  /**
   * Provides configuration options for customizing the appearance and behavior of the column menu, including settings for menu item visibility, ordering, and custom actions.
   * Default value: [object Object]
   */
  columnMenuCustomizeType?: GridCommand;
  /**
   * Provides configuration options for the "Rename" item within a column menu. Defines how the rename functionality behaves and appears in the column menu, including available settings such as labels, visibility, and callbacks for renaming actions.
   * Default value: [object Object]
   */
  columnMenuItemRename?: GridCommand;
  /**
   * Provides configuration options for customizing the edit description feature within a column menu item, allowing you to define how the description field appears, behaves, and is edited by users in the menu.
   * Default value: [object Object]
   */
  columnMenuItemEditDescription?: GridCommand;
  /**
   * Provides the configuration options for the "Duplicate" item within the column menu, allowing developers to customize its behavior, appearance, and availability in the user interface.
   * Default value: [object Object]
   */
  columnMenuItemClone?: GridCommand;
  /**
   * Provides the configuration settings for the "Insert Left" option in the column menu, allowing customization of its behavior, appearance, and availability within the user interface.
   * Default value: [object Object]
   */
  columnMenuItemInsertLeft?: GridCommand;
  /**
   * Provides detailed configuration options for the "Insert Right" menu item within a column menu. Specifies how the "Insert Right" action appears and behaves when users interact with the column menu, including display text, icons, visibility, and event handling.
   * Default value: [object Object]
   */
  columnMenuItemInsertRight?: GridCommand;
  /**
   * Provides configuration options for the "Sort Ascending" item in the column menu, allowing you to customize its appearance, behavior, and availability within the menu. This includes enabling or disabling the sort option, modifying its display text, and adjusting its icon or associated actions.
   * Default value: [object Object]
   */
  columnMenuItemSortAsc?: GridCommand;
  /**
   * Provides configuration options for the "Sort Descending" action within the column menu, allowing customization of its appearance, behavior, and accessibility in sortable grid or table components.
   * Default value: [object Object]
   */
  columnMenuItemSortDesc?: GridCommand;
  /**
   * Provides configuration options for the column menu item that enables users to add sorting functionality to table columns, allowing customization of sorting behavior and display within the column menu.
   * Default value: [object Object]
   */
  columnMenuItemSort?: GridCommand;
  /**
   * Provides configuration options for the "Remove Sort" item within a column's menu, allowing you to customize its appearance, behavior, and availability in the column menu interface.
   * Default value: [object Object]
   */
  columnMenuItemRemoveSort?: GridCommand;
  /**
   * Provides detailed configuration options for the filter functionality within a column menu item, allowing customization of filtering behavior, appearance, and available filter types in the column menu of a data grid or table component.
   * Default value: [object Object]
   */
  columnMenuItemFilter?: GridCommand;
  /**
   * Provides configuration options for the "Remove Filter" item within the column menu, allowing customization of its appearance, behavior, and availability.
   * Default value: [object Object]
   */
  columnMenuItemRemoveFilter?: GridCommand;
  /**
   * Provides the configuration options for the 'Group By' item within the column menu, allowing customization of grouping behavior, display text, and related features in the column menu interface.
   * Default value: [object Object]
   */
  columnMenuItemGroupBy?: GridCommand;
  /**
   * Provides configuration options for the "Group By" feature within a column menu, allowing you to customize how columns are grouped, displayed, and interacted with in the menu interface.
   * Default value: [object Object]
   */
  columnMenuItemRemoveGroupBy?: GridCommand;
  /**
   * Provides the configuration options for the "Hide" menu item within the column menu, allowing developers to control the visibility settings and behavior of column hiding functionality in the grid.
   * Default value: [object Object]
   */
  columnMenuItemHide?: GridCommand;
  /**
   * Provides configuration options for the "Delete" item within the column menu, allowing you to customize its behavior, appearance, and availability in the menu.
   * Default value: [object Object]
   */
  columnMenuItemDelete?: GridCommand;
}

export interface GridColumnGroup {
  /**
   * Sets the label.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
   * Default value: 
   */
  labelTemplate?: string | HTMLTemplateElement | HTMLElement | {(label: string): string};
  /**
   * Sets the align.
   * Default value: center
   */
  align?: HorizontalAlignment | string;
  /**
   * Sets the name of the column group.
   * Default value: ""
   */
  name?: string;
  /**
   * Sets the name of the parent column group.
   * Default value: ""
   */
  parentGroup?: string;
  /**
   * Sets the vertical align.
   * Default value: center
   */
  verticalAlign?: VerticalAlignment | string;
}

export interface GridConditionalFormatting {
  /**
   * The data field of a numeric column to format. Set 'all' to format all numeric columns.
   * Default value: "all"
   */
  column?: string;
  /**
   * The formatting condition.
   * Default value: lessThan
   */
  condition?: GridConditionalFormattingCondition | string;
  /**
   * The value to compare by. When condition is 'between', this is the start (from) value.
   * Default value: 0
   */
  firstValue?: number;
  /**
   * The fontFamily to apply to formatted cells.
   * Default value: ""
   */
  fontFamily?: string;
  /**
   * The fontSize to apply to formatted cells.
   * Default value: "The default fontSize as set in CSS"
   */
  fontSize?: string;
  /**
   * The background color to apply to formatted cells.
   * Default value: "The default backgroundColor as set in CSS"
   */
  highlight?: string;
  /**
   * When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
   * Default value: 1
   */
  secondValue?: number;
  /**
   * The text color to apply to formatted cells.
   * Default value: "The default color as set in CSS"
   */
  text?: string;
}

/**Configures the data and display settings for the Grid Chart, enabling data visualization in a tabular grid format. This includes specifying the structure, appearance, and interactive features of the chart to present complex data clearly and intuitively. */
export interface GridCharting {
  /**
   * Specifies whether charting functionality is enabled. When set to true, charting features are available to users; when false, all chart-related features are disabled. This property can be used to retrieve the current status or to enable/disable charting dynamically.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Sets or retrieves the color palette used for chart elements. This property accepts values that correspond to the 'colorScheme' options available in our Chart component, allowing you to customize or match the chart's appearance to your application's theme.
   * Default value: "scheme01"
   */
  colorScheme?: string;
  /**
   * Specifies the HTML element that serves as the container for the chart. When set, the chart will be rendered inside the given element. When retrieved, returns the current container element associated with the chart.
   * Default value: null
   */
  appendTo?: string | HTMLElement;
  /**
   * "Retrieves or configures the charting dialog component. Use this property to access the current charting dialog instance or to assign a new dialog interface for displaying and customizing chart settings within the application."
   * Default value: [object Object]
   */
  dialog?: Dialog;
}

/**<br/>"Retrieves or configures the charting dialog component. Use this property to access the current charting dialog instance or to assign a new dialog interface for displaying and customizing chart settings within the application." */
export interface Dialog {
  /**
   * Sets or retrieves the text or content displayed in the dialog's header section. This property allows you to customize what appears at the top of the dialog, such as a title, instructions, or branding. When used as a setter, it updates the displayed header; when used as a getter, it returns the current header value.
   * Default value: ""
   */
  header?: string;
  /**
   * Specifies or retrieves the height of the dialog window. When set, this property defines the vertical size of the dialog in pixels or other valid CSS units. When accessed, it returns the current height value applied to the dialog.
   * Default value: 400
   */
  height?: number;
  /**
   * Specifies the width of the dialog. You can use this property to set a custom width for the dialog, or retrieve its current width value. Accepts values in CSS units such as pixels (e.g., '400px'), percentages (e.g., '50%'), or other valid CSS width formats.
   * Default value: 400
   */
  width?: number;
  /**
   * Specifies or retrieves the horizontal position (in pixels) of the dialog's left edge relative to its containing element or the viewport. This property allows you to set where the dialog appears from the left side, or to obtain its current left offset.
   * Default value: center
   */
  left?: string | number;
  /**
   * Specifies or retrieves the distance, in pixels, between the top edge of the dialog and the top edge of the containing element or viewport. This property allows you to programmatically set or obtain the vertical position of the dialog on the screen.
   * Default value: center
   */
  top?: string | number;
  /**
   * Specifies or retrieves whether the dialog is currently enabled. When set to true, the dialog is active and can interact with user input; when set to false, the dialog is disabled and user interaction is blocked.
   * Default value: true
   */
  enabled?: boolean;
  /**
   * Determines whether the dialog is currently visible on the screen. Returns true if the dialog is being displayed; otherwise, returns false.
   * Default value: false
   */
  visible?: boolean;
}

/**Configures the checkbox options for the TreeGrid component, allowing you to enable or customize checkbox display, selection behavior, and interaction within the hierarchical grid structure. */
export interface GridCheckBoxes {
  /**
   * Controls whether the checkboxes in the TreeGrid are displayed or hidden, allowing you to enable or disable checkbox visibility for tree nodes.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Enables or disables the three-state mode for TreeGrid checkboxes. When three-state mode is enabled, selecting or deselecting a checkbox will cascade the change to all its child rows, and parent row checkboxes will automatically reflect the checked, unchecked, or indeterminate state based on the selection status of their child rows. This ensures hierarchical relationships are visually and functionally represented in the checkbox states.
   * Default value: false
   */
  hasThreeStates?: boolean;
}

/**Configures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences. */
export interface GridDataExport {
  /**
   * Determines whether the column headers are included when exporting the data. If enabled, the exported file will contain the header row with column names; if disabled, only the data rows will be exported without column headers.
   * Default value: true
   */
  header?: boolean;
  /**
   * Determines if the current export includes only the data that matches the filters applied in the interface. When enabled, only filtered results will be exported; when disabled, the export will contain all available data regardless of active filters.
   * Default value: null
   */
  filterBy?: any;
  /**
   * Specifies the grouping criteria applied to the exported data, determining how records are organized into distinct groups in the exported file. This setting allows you to control the categorization or segmentation of data during the export process.
   * Default value: null
   */
  groupBy?: any;
  /**
   * Specifies a custom style object to format the appearance of the dataExport, allowing you to define properties such as fonts, colors, borders, and cell alignment for the exported data.
   * Default value: null
   */
  style?: any;
  /**
   * Specifies the name that will be assigned to the exported file when it is saved or downloaded.
   * Default value: "jqxGrid"
   */
  fileName?: string;
  /**
   * Specifies the orientation of the page (portrait or landscape) when exporting the document to PDF format. This setting determines how the content is laid out on each PDF page.
   * Default value: portrait
   */
  pageOrientation?: GridDataExportPageOrientation | string;
  /**
   * Specifies the character or symbol shown for expanded rows in a Grid with row hierarchy (such as a TreeGrid or Grouped Grid) when the data is exported. This character visually indicates expanded nodes in the exported file.
   * Default value: "+"
   */
  expandChar?: string;
  /**
   * Specifies the character or symbol used to represent collapsed rows when exporting a Grid that includes row hierarchy features, such as TreeGrid or grouped rows. This character will indicate collapsed states in the exported file.
   * Default value: "-"
   */
  collapseChar?: string;
  /**
   * Exports only the data currently visible in the Grid, excluding any rows or columns that are filtered, hidden, or outside the current viewport.
   * Default value: false
   */
  view?: boolean;
  /**
   * Specifies the starting row index for data export or printing operations. This determines which row the process will begin from. Ensure that the 'view' parameter is set to true for this setting to take effect.
   * Default value: null
   */
  viewStart?: number | null;
  /**
   * Specifies the index of the last row to be included during export or print operations. When using this option, ensure that the 'view' parameter is set to true to apply the index relative to the current view or filtered dataset, rather than the entire data set.
   * Default value: null
   */
  viewEnd?: number | null;
  /**
   * An array containing the IDs of the rows that should be included in the export operation. Each element in the array represents the unique identifier of a row to be exported.
   * Default value: null
   */
  rowIds?: {(): void};
  /**
   * An array containing custom row objects that will be rendered above the main Grid rows, allowing you to insert additional content or elements before the standard grid data appears.
   * Default value: null
   */
  headerContent?: any;
  /**
   * A customizable array containing additional row objects that will be appended to the end of the default Grid rows. Use this property to insert extra rows with custom content or functionality after the main set of Grid rows.
   * Default value: null
   */
  footerContent?: any;
  /**
   * This is a callback function designed for inserting images into individual cells during an "Export to Excel" operation. The function receives the following parameters:- 'index': The current cell index in the export process.- 'dataField': The field name associated with the current cell's data.- 'value': The image data, typically as a base64-encoded string.- 'values': An array containing all values for the entire column being exported.The function should return an object that defines the image to be placed in the Excel cell. The returned object has the following structure:'''javascriptreturn {  image: {    id: 'myImage' + index,  // Unique identifier for the image.    base64: value,          // Base64-encoded image data.    imageType: 'jpeg',      // Image format, e.g., 'jpeg' or 'png'.    width: 20,              // Image width, in Excel units (pixels or points).    height: 11,             // Image height, in Excel units.    position: {      offsetX: 10 + (25 * values.indexOf(value)), // Horizontal offset for image positioning in the cell.      offsetY: 5.5                                 // Vertical offset for image positioning in the cell.    }  }};'''This object specifies:- The image's unique ID and format.- The image's visual size within the cell.- The position offsets to control exactly where the image appears inside the cell.By customizing these properties, you can control how images are embedded and displayed for each Excel cell during export.
   * Default value: null
   */
  addImageToCell?: any;
  /**
   * This function enables you to customize the height of each row when exporting data to Excel. It receives the row index as a parameter and should return a numeric value representing the desired height for that specific row. By using this function, you can dynamically control the appearance of rows in your exported Excel file, such as setting different heights for header, data, or summary rows.
   * Default value: null
   */
  setRowHeight?: any;
  /**
   * Defines a function that enables you to include additional data in the Excel export, allowing you to create and export multiple sheets within a single Excel file. This function provides flexibility to specify extra datasets or customize the content of each sheet according to your requirements.
   * Default value: null
   */
  getSpreadsheets?: any;
  /**
   * A function that enables you to export a data grid—complete with applied styles and formatting—directly to an Excel file, preserving the grid’s visual appearance and structure in the exported document.
   * Default value: true
   */
  exportStyles?: boolean;
  /**
   * A function that enables customization of cell formatting prior to data export. It receives three parameters: index (the row index of the cell), dataField (the key or field name corresponding to the cell), and value (the original value of the cell). The function should return the formatted value, which will be used in the exported output instead of the original value."
   * Default value: null
   */
  cellFormatFunction?: any;
  /**
   * Determines whether the header row remains fixed (frozen) at the top of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the column headers.
   * Default value: false
   */
  freezeHeader?: boolean;
  /**
   * Determines if formulas in the exported Excel file will be automatically converted to their corresponding calculated values. When enabled, all formulas are replaced with their results in the export; when disabled, original formulas are preserved in the Excel sheet.
   * Default value: true
   */
  autoConvertFormulas?: boolean;
  /**
   * Determines if only the currently selected cells or rows are exported to Excel, instead of exporting the entire data set. When enabled, only the user's selection will be included in the exported Excel file.
   * Default value: false
   */
  onlySelected?: boolean;
  /**
   * Specifies whether the data should be exported as an Excel Table (with structured formatting and table features) when using the Export to Excel function. If enabled, the exported file will present the data as an Excel Table; if disabled, the data will be exported as plain worksheet content without table formatting.
   * Default value: false
   */
  exportAsTable?: boolean;
}

/**Configures the grid’s data source when the <em>dataSource</em> property is assigned either a JavaScript array (for local data) or a URL (for remote data). This setting determines how the grid retrieves and displays its data, supporting both direct array binding and remote data fetching via HTTP requests. */
export interface GridDataSourceSettings {
  /**
   * Specifies whether a column should be automatically generated by the system (such as for identity or timestamp fields). When set, the column’s value will be created by the database or application rather than provided manually. This property can be read to determine if the column is currently set to auto-generate its values, or written to enable or disable automatic generation.
   * Default value: false
   */
  autoGenerateColumns?: boolean;
  /**
   * Specifies the name of the data field—such as 'children' or 'items'—that contains nested child items within each object in the data source. When this property is set, the dataAdapter searches for this specified field in each item while processing the data. If the field is present, the dataAdapter treats the data as hierarchical and automatically constructs a hierarchical data structure, allowing for nested or tree-like representations. This property can be both retrieved (get) and updated (set) as needed.
   * Default value: ""
   */
  childrenDataField?: string;
  /**
   * Sets or retrieves the root element used for XML data binding. This property specifies the top-level XML element that serves as the entry point for mapping XML data to objects, or for serializing objects to XML.
   * Default value: blackList
   */
  sanitizeHTML?: GridDataSourceSettingsSanitizeHTML | string;
  /**
   * Gets or sets the root element used for XML data binding, which serves as the primary node for mapping XML data to object structures or vice versa.
   * Default value: ""
   */
  root?: string;
  /**
   * Gets or sets the XML binding record, which defines the mapping between XML data and the corresponding data structure in the application. Use this property to retrieve the current binding configuration or to assign a new XML binding record for data serialization and deserialization operations.
   * Default value: ""
   */
  record?: string;
  /**
   * Specifies or retrieves the fields used to group the data. When set, this property determines which data fields will be used to organize the dataset into groups, allowing for aggregation or categorization based on the specified fields.
   * Default value: []
   */
  groupBy?: string[];
  /**
   * Defines or retrieves the schema that describes the structure of the loaded data, including both the field names and their corresponding data types. For example: ['id: number', 'firstName: string', 'lastName: string'] specifies that the data has three fields—id as a number, firstName as a string, and lastName as a string. This property ensures that the data adheres to the expected format for processing and validation.
   * Default value: null
   */
  dataFields?: GridDataSourceSettingsDataField[];
  /**
   * Specifies or retrieves the type of data source being used, allowing you to define or query the data source format (such as JSON, XML, or a database connection).
   * Default value: array
   */
  dataSourceType?: GridDataSourceSettingsDataSourceType | string;
  /**
   * Sets or retrieves the unique identifier (ID) associated with the dataAdapter instance. This ID can be used to distinguish between multiple dataAdapters in your application and for referencing or managing them programmatically.
   * Default value: ""
   */
  id?: string;
  /**
   * Specifies the data field that uniquely identifies each item in the hierarchy, typically using the 'id' field. This property works in conjunction with the parentDataField property, which defines the field that refers to the parent item's identifier (commonly 'parentId'). Together, these fields establish the hierarchical structure by linking each child item to its parent. This property can be used to both set and retrieve the key field used for building the hierarchy.
   * Default value: ""
   */
  keyDataField?: string;
  /**
   * Specifies the data field that identifies the parent node for each item in a hierarchical data structure. This property is used together with the keyDataField property to establish relationships between items—typically, keyDataField refers to the unique identifier of an item (commonly the 'id' field), while the parentDataField references the identifier of the item's parent (often the 'parentId' field). This setup allows the component to construct the hierarchy by linking each item to its parent based on matching key and parent values.
   * Default value: ""
   */
  parentDataField?: string;
  /**
   * Updates the value of the 'mapChar' field within the record, assigning it a specified character or string. This field typically stores data related to mapping or identification purposes within the record object.
   * Default value: "."
   */
  mapChar?: string;
  /**
   * Controls the grid’s relational data configuration. This property accepts an array of relation definition objects, where each object must include the following fields:  - 'id' *(string)*: A unique identifier for the relation.  - 'label' *(string)*: A descriptive name for the relation, used for display purposes.  - 'columns' *(GridColumn[])*: An array of grid column definitions associated with this relation.  - 'dataSource' *(any)*: The data source from which related records are retrieved (e.g., an array, function, or external API endpoint).Once you have defined the grid relations, you can reference them in individual column configurations by specifying the 'relationId' (to link the column to a relation) and 'relationField' (to indicate which field from the related data to use). When these properties are set, the grid will automatically generate an appropriate column editor (such as a dropdown or lookup field) that leverages the provided relation settings, streamlining data entry and ensuring data consistency.
   * Default value: null
   */
  relations?: any;
  /**
   * Defines the virtual data source function, which is invoked by the Grid every time it needs to fetch data—such as when the user scrolls or sorts. This function should use the provided parameters to retrieve or generate the required data, and then pass the results back to the Grid by calling the callback function with the new data set. For example: resultCallbackFunction({dataSource: data}); This approach enables efficient data loading for large datasets by fetching only the necessary records as needed (virtual scrolling). For a working example, refer to the Grid demos page: https://www.htmlelements.com/demos/grid/virtualscroll/
   * Default value: null
   */
  virtualDataSource?: {(resultCallbackFunction: any, details: DataAdapterVirtualDataSourceDetails): void};
  /**
   * Enhances the virtual data source during node expansion in Tree and TreeGrid components. When these components are configured with a virtualDataSource, this function is triggered each time a node is expanded and additional data needs to be loaded on demand. It enables efficient, real-time loading of child node data only as needed, supporting large data sets without preloading the entire hierarchy. For implementation details and a live demonstration, see: https://www.htmlelements.com/demos/grid/virtual-tree-grid/
   * Default value: null
   */
  virtualDataSourceOnExpand?: any;
}

export interface GridDataSourceSettingsDataField {
  /**
   * Sets the dataField name.
   * Default value: ""
   */
  name?: string;
  /**
   * Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
   * Default value: ""
   */
  map?: string;
  /**
   * Sets the dataField type.
   * Default value: string
   */
  dataType?: GridDataSourceSettingsDataFieldDataType | string;
}

/**Provides comprehensive configuration options for controlling the grid's editing behavior, including enabling or disabling editing features, specifying editing modes (such as inline, popup, or batch), setting validation rules, and customizing editors for specific columns. */
export interface GridEditing {
  /**
   * Allows users to edit the content of cells designated as row headers, enabling direct modification of row header values within the table.
   * Default value: false
   */
  allowRowHeaderEdit?: boolean;
  /**
   * Allows users to edit the text of column headers directly within the interface, enabling customization of header labels according to their preferences or requirements.
   * Default value: false
   */
  allowColumnHeaderEdit?: boolean;
  /**
   * Automatically reapplies any previously set column filters and sort orders after an edit is made, ensuring that user-defined table views remain consistent and uninterrupted following data modifications.
   * Default value: true
   */
  autoUpdateFilterAndSort?: boolean;
  /**
   * Automatically opens the drop-down editor both when the arrow button is clicked and when any item within the drop-down list is selected. This ensures the editor remains accessible regardless of whether the user interacts with the arrow or directly with a list item.
   * Default value: true
   */
  allowListOpenOnContentClick?: boolean;
  /**
   * Allows users to modify or update existing content directly within the interface. This feature typically provides editing controls, such as input fields or rich text editors, enabling seamless changes to data or text as needed.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Enables batch editing functionality, allowing users to modify multiple rows within the grid on the client side before saving any changes. All edits can be submitted together in a single server request, improving efficiency and reducing the number of server calls needed for updates.
   * Default value: false
   */
  batch?: boolean;
  /**
   * Specifies the method by which the editing mode is activated, such as through a single click, double click, or keyboard action.
   * Default value: click
   */
  action?: GridEditingAction | string;
  /**
   * "Read Only Edit is a grid mode where editing a cell does not directly change the underlying data in the grid. Instead, when a cell edit is attempted, the grid triggers the 'onCellEditRequest' callback, allowing your application to handle and process the update request as needed. This mode is useful for implementing custom edit workflows or for integrating with external data sources, as it gives you complete control over how changes are applied."
   * Default value: false
   */
  readOnlyEdit?: boolean;
  /**
   * Provides detailed definitions and mappings for command keyboard shortcuts, specifying the key combinations used to trigger various actions within an application or system.
   * Default value: [object Object]
   */
  commandKeys?: GridEditingCommandKeys;
  /**
   * Defines the configuration options for the grid's command bar, a user interface element that appears as a toolbar or status bar above or below the grid. The command bar provides interactive buttons or tools, such as Save and Revert, allowing users to commit or undo changes made within the grid. These settings control the appearance, available actions, and behavior of the command bar to enhance grid editing workflows.
   * Default value: [object Object]
   */
  commandBar?: GridEditingCommandBar;
  /**
   * Defines the configuration options for the grid’s command column. The command column provides action buttons—such as Edit and Delete—that allow users to interact with individual rows. You can customize the available commands, their display order, button text, icons, and event handlers to control how actions are performed on row data.
   * Default value: [object Object]
   */
  commandColumn?: GridEditingCommandColumn;
  /**
   * Enables or configures the grid's cell editing functionality by setting its edit mode. This determines how users can interact with and modify the grid’s cell values—such as enabling inline editing, displaying an edit dialog, or disabling editing entirely.
   * Default value: cell
   */
  mode?: GridEditingMode | string;
  /**
   * Defines the configuration options for the 'Add New Row' UI element, which allows users to quickly append new rows to the Grid with a single click. This includes customization of the button’s appearance, position, default values for new rows, and any associated event handlers.
   * Default value: [object Object]
   */
  addNewRow?: GridEditingAddNewRow;
  /**
   * Allows users to dynamically add new columns directly from the user interface. When this feature is enabled, a '+' icon appears as the last column in the table. Clicking the '+' icon opens a dialog window where users can enter details for the new column, facilitating easy and intuitive column creation without leaving the current view.
   * Default value: [object Object]
   */
  addNewColumn?: GridEditingAddNewColumn;
  /**
   * Provides a detailed configuration for the dialog’s editing settings, specifying available editing modes, permissions, interface options, and user interaction behaviors within the dialog component.
   * Default value: [object Object]
   */
  dialog?: Dialog;
  /**
   * Provides detailed configuration options for the settings panel displayed in the "Add" dialog, including field definitions, default values, input validation rules, and UI behavior customizations.
   * Default value: [object Object]
   */
  addDialog?: Dialog;
  /**
   * Describes delete dialog's settings
   * Default value: [object Object]
   */
  deleteDialog?: Dialog;
}

/**Provides detailed definitions and mappings for command keyboard shortcuts, specifying the key combinations used to trigger various actions within an application or system. */
export interface GridEditingCommandKeys {
  /**
   * Provides details about the keyboard shortcut or key binding assigned to trigger the edit command within the application. This property specifies which key or key combination the user can press to activate editing functionality.
   * Default value: [object Object]
   */
  commandKeyEdit?: GridCommandKey;
  /**
   * Provides details about the "cancel" command key, specifying its function as an input to terminate or interrupt an ongoing operation. This key is commonly used to halt processes, dismiss dialogs, or cancel actions within an application or user interface.
   * Default value: [object Object]
   */
  commandKeyCancel?: GridCommandKey;
  /**
   * Provides detailed information about the "update" command key, specifying its purpose, usage, and expected behavior when invoked within the system. This includes how the "update" command modifies data, any parameters it accepts, and the outcomes or changes it triggers in the application.
   * Default value: [object Object]
   */
  commandKeyUpdate?: GridCommandKey;
}

/**Provides details about the keyboard shortcut or key binding assigned to trigger the edit command within the application. This property specifies which key or key combination the user can press to activate editing functionality. */
export interface GridCommandKey {
  /**
   * Specifies the identifier or label used to trigger the edit key command, allowing customization of the keyboard shortcut or command name for editing functionality.
   * Default value: "commandKeyEditCommand"
   */
  command?: string;
  /**
   * Specifies the keyboard key or combination of keys that triggers the edit command, allowing users to enter edit mode when the defined key(s) are pressed.
   * Default value: "F2"
   */
  key?: string;
}

/**Defines the configuration options for the grid's command bar, a user interface element that appears as a toolbar or status bar above or below the grid. The command bar provides interactive buttons or tools, such as Save and Revert, allowing users to commit or undo changes made within the grid. These settings control the appearance, available actions, and behavior of the command bar to enhance grid editing workflows. */
export interface GridEditingCommandBar {
  /**
   * Displays the command bar, allowing users to access and execute available commands and features within the application.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Specifies the location of the command bar within the user interface, determining where it appears on the screen (e.g., top, bottom, left, or right).
   * Default value: near
   */
  position?: LayoutPosition | string;
  /**
   * Specifies the content, such as text labels, icons, or both, that will appear on the command bar buttons. This determines the visual elements shown to users within each button on the command bar interface.
   * Default value: labelAndIcon
   */
  displayMode?: GridCommandDisplayMode | string;
  /**
   * Configures the data source that populates the command bar, determining which commands or actions are displayed to the user. This property specifies where the command bar retrieves its list of available options.
   * Default value: [object Object]
   */
  dataSource?: GridEditingCommandBarDataSource;
}

/**Configures the data source that populates the command bar, determining which commands or actions are displayed to the user. This property specifies where the command bar retrieves its list of available options. */
export interface GridEditingCommandBarDataSource {
  /**
   * Provides a detailed configuration schema for the "Add Row" button within the command bar, specifying its appearance, behavior, accessibility options, and parameters that control how new rows are added to the underlying data set. This includes properties such as label text, icon, button state (enabled/disabled), event handlers, and any associated tooltips or confirmation dialogs.
   * Default value: [object Object]
   */
  commandBarAddRow?: GridCommand;
  /**
   * Provides detailed configuration options for the command bar button specifically used to delete rows, including its label, icon, confirmation prompts, visibility, enabled/disabled state, and any associated callback or event handler functions.
   * Default value: [object Object]
   */
  commandBarDeleteRow?: GridCommand;
  /**
   * Provides detailed configuration options for the save button within the command bar, including its label, icon, enabled/disabled state, tooltip text, and associated save action behavior.
   * Default value: [object Object]
   */
  commandBarBatchSave?: GridCommand;
  /**
   * Provides detailed configuration options for the command bar button that allows users to revert or undo recent changes. This includes settings such as button label, icon, tooltip text, visibility, enabled state, and associated action handlers.
   * Default value: [object Object]
   */
  commandBarBatchRevert?: GridCommand;
}

/**Defines the configuration options for the grid’s command column. The command column provides action buttons—such as Edit and Delete—that allow users to interact with individual rows. You can customize the available commands, their display order, button text, icons, and event handlers to control how actions are performed on row data. */
export interface GridEditingCommandColumn {
  /**
   * Displays the command column, allowing users to view and interact with available actions or commands for each row within the table.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Displays the command column directly within the main content area (inline), rather than in a separate section. This allows actions like edit or delete to appear alongside each data row for easier, more integrated user interaction.
   * Default value: false
   */
  inline?: boolean;
  /**
   * Specifies the position of the command column within the table, determining where the command buttons (such as edit, delete, or custom actions) will appear relative to other columns.
   * Default value: far
   */
  position?: Position | string;
  /**
   * Defines the content or label displayed within the buttons of the command column, such as text, icons, or custom HTML elements. This determines what users see and interact with in each command button cell.
   * Default value: icon
   */
  displayMode?: GridCommandDisplayMode | string;
  /**
   * Defines the data source for the command column, specifying which dataset or field the column should retrieve and display its command-related values from. This determines the contents and available actions within the command column.
   * Default value: [object Object]
   */
  dataSource?: GridEditingCommandColumnDataSource;
  /**
   * Specifies the width of the command column in the table or grid, determining how much horizontal space is allocated for action buttons or command controls within each row.
   * Default value: null
   */
  width?: number | null;
}

/**Defines the data source for the command column, specifying which dataset or field the column should retrieve and display its command-related values from. This determines the contents and available actions within the command column. */
export interface GridEditingCommandColumnDataSource {
  /**
   * Provides configuration options for the command button displayed in the column header. This button, by default, opens a menu that includes a Column Chooser, allowing users to select which columns are visible in the grid. These settings let you customize the appearance, behavior, and available actions of the command button in the column header.
   * Default value: [object Object]
   */
  commandColumnMenu?: GridCommand;
  /**
   * Provides detailed configuration options for the command column's edit button, allowing customization of its behavior, appearance, and functionality when editing rows in the data grid.
   * Default value: [object Object]
   */
  commandColumnEdit?: GridCommand;
  /**
   * Provides the configuration options for the delete button located in the command column, detailing its appearance, behavior, and functionality when removing rows from the data source.
   * Default value: [object Object]
   */
  commandColumnDelete?: GridCommand;
  /**
   * Provides configuration options for the update button within the command column, allowing you to customize its appearance, behavior, and actions when updating rows in the data grid.
   * Default value: [object Object]
   */
  commandColumnUpdate?: GridCommand;
  /**
   * Provides configuration options for the "Cancel Edit" button within the command column, allowing you to customize its appearance, behavior, and functionality when a user cancels an editing action.
   * Default value: [object Object]
   */
  commandColumnCancel?: GridCommand;
  /**
   * Provides detailed configuration options for the row menu button located in the command column, allowing customization of its appearance, behavior, and available menu actions within each row.
   * Default value: [object Object]
   */
  commandColumnRowMenu?: GridCommand;
  /**
   * Provides configuration options for customizing the appearance and behavior of a custom button within the command column, such as its text, icon, styling, and associated actions.
   * Default value: [object Object]
   */
  commandColumnCustom?: GridCommand;
}

/**Defines the configuration options for the 'Add New Row' UI element, which allows users to quickly append new rows to the Grid with a single click. This includes customization of the button’s appearance, position, default values for new rows, and any associated event handlers. */
export interface GridEditingAddNewRow {
  /**
   * Inserts a new row when the Enter key is pressed and the currently focused row is the last row in the table. This allows users to quickly add additional rows by pressing Enter at the end of the table.
   * Default value: false
   */
  autoCreate?: boolean;
  /**
   * Specifies whether a newly added row should automatically enter edit mode immediately after it is inserted, allowing the user to edit its contents without requiring an additional action.
   * Default value: true
   */
  autoEdit?: boolean;
  /**
   * Specifies the exact placement of the ‘Add New Row’ user interface element within the layout. This determines where the button or control for adding a new row will appear on the page, such as at the top, bottom, or a designated section of the grid or form.
   * Default value: both
   */
  position?: LayoutPosition | string;
  /**
   * Controls whether the new row action is displayed as a full-width row or as a button. Accepts two values: 'row' to show the action as an entire row, or 'button' to render it as a button element. This property can be used to both retrieve the current display mode and set a new one.
   * Default value: row
   */
  displayMode?: GridEditingAddNewRowDisplayMode | string;
  /**
   * Displays the 'Add New Row' user interface element, allowing users to see and interact with the control for adding a new row to the data table or form.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Defines the text displayed on the 'Add New Row' button or UI element, allowing customization of the label users see when adding a new row to the interface.
   * Default value: ""
   */
  label?: string;
}

/**Allows users to dynamically add new columns directly from the user interface. When this feature is enabled, a '+' icon appears as the last column in the table. Clicking the '+' icon opens a dialog window where users can enter details for the new column, facilitating easy and intuitive column creation without leaving the current view. */
export interface GridEditingAddNewColumn {
  /**
   * Displays the 'Add New Row' user interface element, allowing users to view and interact with the option to insert a new row into the dataset or table.
   * Default value: false
   */
  visible?: boolean;
}

/**Provides detailed configuration options for the grid's filtering functionality, including filter types, default filter values, filter operators, and custom filter logic for columns. This determines how data within the grid can be searched, narrowed, or displayed based on user-defined criteria. */
export interface GridFiltering {
  /**
   * Allows users to filter data based on specific criteria, enabling the display of only relevant information according to selected filters.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Specifies the logical operator ('and' or 'or') used to combine multiple column filters in the Grid. By default, filters are combined using the 'and' operator, meaning that a row must satisfy all filter conditions (e.g., columnA 'and' columnB) to be included in the results. Alternatively, you can set the operator to 'or' to return rows that match 'any' of the filter conditions (e.g., columnA 'or' columnB).'Example:'  '''jsgrid.filtering.operator = 'or';grid.addFilter('lastName', 'contains "davolio"');grid.addFilter('firstName', 'contains "Antoni"');'''This configuration applies two filters to the Grid and will display all rows where 'either' 'firstName' contains "Antoni" 'or' 'lastName' contains "Davolio".Use this property to control how multiple filters are combined when filtering data in the Grid.
   * Default value: "and"
   */
  operator?: string;
  /**
   * An array specifying the filtering conditions to be applied to the DataGrid. Each element in the 'filter' array represents a single filter and is itself an array with two elements:1. 'Column dataField:' The name of the column to which the filter will be applied.2. 'Filter condition(s):' A string or expression that defines the criteria to filter the column’s data. This can include a condition or multiple conditions combined using logical operators such as 'or' and 'and'.'Example 1:'  To search for rows where the "firstName" column contains 'Andrew' or 'Nancy', and the "quantity" column is either less than or equal to 3 or greater than or equal to 8:'''js[  ['firstName', 'contains Andrew or contains Nancy'],  ['quantity', '= 8']]''''Example 2:'  For columns configured with 'filterMenuMode: "excel"', you can express multiple "equals" conditions:'''js[  ['firstName', 'EQUAL Andrew or EQUAL Antoni or EQUAL Beate']]''''Example 3:'  To filter a string column for values containing either 'burke' or 'peterson':'''js[  ['lastName', 'CONTAINS burke or CONTAINS peterson']]''''Supported filter operators:'  You may use a variety of filter operators and keywords within filter expressions. Common operators include:- Equality: '=', 'EQUAL'- Inequality: '!=', '- Comparison: '', 'GREATER_THAN', '=', 'GREATER_THAN_OR_EQUAL'- String matching: 'CONTAINS', 'DOES_NOT_CONTAIN', 'STARTS_WITH', 'ENDS_WITH'- Special: 'EMPTY', 'NULL', 'NOT_NULL'Multiple conditions can be combined in a single expression with logical operators ('and', 'or').  This flexible structure enables complex filtering based on your DataGrid’s current columns and data types.
   * Default value: 
   */
  filter?: any[];
  /**
   * Provides detailed configuration options for the filter row, including its appearance, behavior, available filter types, and display settings. This allows developers to customize how the filter row is shown and how users interact with filtering features in the component.
   * Default value: [object Object]
   */
  filterRow?: GridFilteringFilterRow;
  /**
   * Provides detailed configuration options for the filter menu, including available filter types, display preferences, default selections, and customizable behaviors to control how users interact with and apply filters within the menu interface.
   * Default value: [object Object]
   */
  filterMenu?: GridFilteringFilterMenu;
  /**
   * (In Development) Provides a comprehensive configuration schema for the filter builder component, detailing available settings and customization options to control its behavior, appearance, and functional parameters during implementation.
   * Default value: [object Object]
   */
  filterBuilder?: GridFilteringFilterBuilder;
}

/**Provides detailed configuration options for the filter row, including its appearance, behavior, available filter types, and display settings. This allows developers to customize how the filter row is shown and how users interact with filtering features in the component. */
export interface GridFilteringFilterRow {
  /**
   * Displays the filter row, allowing users to enter criteria and filter the displayed data directly within the grid or table interface.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Displays the filter row’s menu, allowing users to view and interact with filter options for data columns.
   * Default value: false
   */
  menuVisible?: boolean;
  /**
   * Determines how filters entered in the filter row are applied to the data, specifying whether filtering occurs automatically as the user types or only after a specific action, such as pressing Enter or clicking a filter button.
   * Default value: auto
   */
  applyMode?: GridFilteringFilterRowApplyMode | string;
  /**
   * Specifies the delay, in milliseconds, before the filtering action is triggered after the user modifies a filter input. This setting is only applicable when filtering.filterRow.applyMode is set to 'auto', allowing you to control how quickly the filtering is applied as the user types.
   * Default value: 300
   */
  autoApplyModeDelay?: number;
}

/**Provides detailed configuration options for the filter menu, including available filter types, display preferences, default selections, and customizable behaviors to control how users interact with and apply filters within the menu interface. */
export interface GridFilteringFilterMenu {
  /**
   * Controls whether the filter menu is displayed to the user. Set this option to show or hide the filter menu based on your application's requirements.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Specifies the text label displayed on the filter menu button, allowing you to customize the button’s caption to better describe its function or improve user experience.
   * Default value: cancel,clear,filter
   */
  buttons?: string[];
  /**
   * Specifies the display mode for the filter menu, determining how filtering options are presented to the user (e.g., dropdown, modal, or inline).
   * Default value: default
   */
  mode?: GridFilteringFilterMenuMode | string;
  /**
   * Configures the data source for the filter menu, specifying the list of available options that users can select when applying filters. This determines which values appear in the filter dropdown and can be set to a static array or a dynamic data source such as an API endpoint or database query.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Specifies the width, in pixels or a valid CSS unit, of the filter menu component. This determines how wide the filter menu appears in the user interface.
   * Default value: 250
   */
  width?: number;
  /**
   * Specifies the vertical dimension (in pixels, ems, or other supported units) of the filter menu, determining how much space the menu occupies on the screen. Adjusting this value changes the overall height of the filter menu component.
   * Default value: 200
   */
  height?: number;
}

/**(In Development) Provides a comprehensive configuration schema for the filter builder component, detailing available settings and customization options to control its behavior, appearance, and functional parameters during implementation. */
export interface GridFilteringFilterBuilder {
  /**
   * Controls whether the filter builder component is displayed or hidden in the user interface. When enabled, users can access and use the filter builder to create or modify filters; when disabled, the filter builder is not visible or accessible.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Defines the vertical size, in pixels or other supported units, of the filter builder component. This property determines how tall the filter builder appears in the user interface, allowing you to control its visual layout and accommodate the desired amount of content.
   * Default value: null
   */
  height?: number | null;
}

/**Provides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings. */
export interface GridFooter {
  /**
   * Controls whether the footer section is displayed or hidden on the webpage.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Defines the layout and content structure for the website footer by specifying a customizable template that determines how footer elements are displayed.
   * Default value: 
   */
  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
}

/**Provides detailed configuration options for the grid's data grouping functionality, specifying how rows are grouped, the grouping criteria, and related display settings within the grid. */
export interface GridGrouping {
  /**
   * Allows items or data to be organized into groups based on specified criteria, making it easier to manage, categorize, or display related elements together within the application.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Allows users to expand or collapse grouped sections, enabling them to hide or reveal grouped content within the interface as needed.
   * Default value: false
   */
  allowCollapse?: boolean;
  /**
   * Automatically expands all grouped sections within the interface, making all nested content visible to the user without requiring manual interaction.
   * Default value: false
   */
  autoExpandAll?: boolean;
  /**
   * Automatically expands all collapsible groups within the interface up to the specified hierarchical level, ensuring that all nested groups at or above this level are visible by default.
   * Default value: 0
   */
  autoExpandToLevel?: number;
  /**
   * Automatically hides all columns that are part of a group, streamlining the display by collapsing grouped columns from view. This feature improves user interface clarity by reducing on-screen clutter and allowing users to focus on ungrouped or expanded columns.
   * Default value: false
   */
  autoHideGroupColumn?: boolean;
  /**
   * Specifies how groups are expanded or collapsed within the component. Determines whether groups are expanded by default, collapsed, or if a custom behavior is applied.
   * Default value: buttonClick
   */
  expandMode?: GridGroupingExpandMode | string;
  /**
   * Defines or retrieves the function responsible for formatting the data displayed in the column. This function determines how raw cell values are converted to their final, user-visible representation (e.g., formatting dates, numbers, or custom display logic).
   * Default value: null
   */
  formatFunction?: {(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any, data?: any}): void};
  /**
   * Specifies the height, in pixels, for rows that represent grouping headers within a data grid or table. This determines how much vertical space each group row occupies, ensuring consistent formatting and appearance for grouped data sections.
   * Default value: 50
   */
  groupRowHeight?: string | number;
  /**
   * Specifies the data fields used for grouping, or retrieves the current fields that are set for grouping data.
   * Default value: []
   */
  groupBy?: string[];
  /**
   * Specifies the indentation level for the group, determining the amount of space applied to visually offset the group’s content from the left margin.
   * Default value: 16
   */
  groupIndent?: number;
  /**
   * Provides detailed configuration options for the group bar component, including settings for appearance, behavior, and functionality.
   * Default value: [object Object]
   */
  groupBar?: GridGroupingGroupBar;
  /**
   * Enhances the first render of the grid by automatically expanding any group that matches a specified condition.  For example, using 'onGroupDefaultExpanded: (dataItem) => { return dataItem.label === 'Peppermint Mocha Twist'; }' ensures that the group with the label "Peppermint Mocha Twist" is expanded by default when the grid is initially displayed. This callback receives each group’s data object ('dataItem') and should return 'true' for groups you want to be expanded initially, or 'false' otherwise.
   * Default value: null
   */
  onGroupDefaultExpanded?: any;
  /**
   * Specifies how group headers are displayed within the component. The available options are:- 'basic': Renders group headers without applying any indentation, custom group row heights, or column labels. This provides a simple, minimal display.- 'compact': Similar to 'basic', but additionally includes the column labels in the group headers for improved clarity.- 'advanced' (default): Enhances the group header display by adding indentation based on the group level, allowing nested groups to be visually distinguished. This mode may also support custom group row heights and presents the column labels appropriately.- 'multipleColumns': Displays each group header in its separate column, enabling a more structured and multi-dimensional grouping layout.Choose the mode that best fits the desired visual presentation and complexity of your grouped data.
   * Default value: advanced
   */
  renderMode?: GridGroupingRenderMode | string;
  /**
   * Specifies the amount of indentation applied to the group toggle button, controlling its horizontal offset or padding relative to its container or content. This affects the visual alignment and spacing of the toggle button within the group interface.
   * Default value: 16
   */
  toggleButtonIndent?: number;
  /**
   * Provides configuration options for the group summary row, allowing you to customize its appearance, content, and behavior within grouped data displays.
   * Default value: [object Object]
   */
  summaryRow?: GridGroupingSummaryRow;
}

/**Provides detailed configuration options for the group bar component, including settings for appearance, behavior, and functionality. */
export interface GridGroupingGroupBar {
  /**
   * Displays the group bar, allowing users to view and interact with grouped items or categories within the interface.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Allows users to rearrange table columns by dragging and dropping them to new positions, providing a more interactive and customizable table layout.
   * Default value: false
   */
  allowColumnDragDrop?: boolean;
  /**
   * Displays close (X) buttons on each column header, allowing users to easily remove or hide individual columns from the view.
   * Default value: true
   */
  allowColumnCloseButtons?: boolean;
}

/**Provides configuration options for the group summary row, allowing you to customize its appearance, content, and behavior within grouped data displays. */
export interface GridGroupingSummaryRow {
  /**
   * Displays the group summary row directly within the main content area, positioning it inline with other rows instead of in a separate section. This setting allows users to view summary information (such as totals or averages) immediately beneath or alongside related grouped data for improved readability and context.
   * Default value: true
   */
  inline?: boolean;
  /**
   * Displays the group summary row, providing an overview of aggregated data—such as totals, averages, or counts—for each group within the dataset.
   * Default value: true
   */
  visible?: boolean;
}

/**Provides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings. */
export interface GridGroupHeader {
  /**
   * Controls whether the group header is displayed or hidden, determining its visibility within the user interface.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Defines the template used to render the header section for a group of items, allowing customization of the group header's layout and content.
   * Default value: 
   */
  template?: string | HTMLTemplateElement;
}

/**Provides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns. */
export interface GridHeader {
  /**
   * Controls whether the header is displayed or hidden in the user interface. Adjusting this setting allows you to show or hide the header as needed.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Defines a customizable template for rendering the header section, allowing you to specify the structure, content, and styling of the header according to your application's requirements.
   * Default value: 
   */
  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
  /**
   * This callback function allows you to customize the Header toolbar by providing direct access to its HTML element. The function receives the Toolbar's HTML Element as an argument, enabling you to modify its structure, add custom buttons, update styles, or bind event listeners according to your application's requirements.
   * Default value: null
   */
  onInit?: {(element: HTMLElement): void};
  /**
   * Specifies which action buttons are shown in the Grid header. The available options are:- ''columns'': Displays a button that opens the columns chooser panel, allowing users to show or hide grid columns.- ''filter'': Displays a button that opens the filtering panel, enabling users to apply filters to grid data.- ''group'': Displays a button that opens the grouping panel, allowing users to group data by specific columns.- ''sort'': Displays a button that opens the sorting panel, letting users sort grid data by one or more columns.- ''format'': Displays a button that opens the conditional formatting panel, providing options to format cells based on specific conditions.- ''search'': Displays a button that opens the search panel, enabling users to search within the grid data.- ''colors'': Displays a button that opens a color options panel, allowing users to customize color formatting for the grid.Include one or more of these options in an array to control the set of action buttons visible in the Grid header.
   * Default value: [ "columns", "filter", "group", "sort", "format", "search" ]
   */
  buttons?: string[];
  /**
   * Specifies the type of search command to be executed, determining how the search operation is performed (e.g., basic, advanced, or filtered search). This setting influences the logic and options available during the search process.
   * Default value: search
   */
  searchCommand?: GridHeaderSearchCommand | string;
  /**
   * Custom Toolbar Button: Enables you to add a user-defined button to the application's toolbar. This feature allows you to specify the button's label, icon, and action, providing easy access to custom functionality directly within the toolbar interface.
   * Default value: [object Object]
   */
  customButton?: GridCommand;
}

/**An object that defines configuration options for the layout of the grid, including properties such as the number of columns, row and column spacing, alignment, and overall grid arrangement. This object allows you to customize the appearance and structure of the grid according to your requirements. */
export interface GridLayout {
  /**
   * Controls whether cell values automatically wrap onto multiple lines. When set to true, text within a cell will wrap to fit the cell's width, displaying content across multiple lines as needed. When set to false, text will remain on a single line, and any overflow may be truncated or hidden based on cell styling.
   * Default value: false
   */
  allowCellsWrap?: boolean;
  /**
   * Automatically assigns a default width to any new Column component that does not have its 'width' property explicitly defined. This ensures consistent sizing for all columns, even if a specific width is not provided during the component’s creation.
   * Default value: false
   */
  autoSizeNewColumn?: boolean;
  /**
   * Specifies the minimum width, in pixels, for the newly created column. This ensures that the column will not shrink below this defined width, maintaining layout consistency and readability.
   * Default value: 250
   */
  autoSizeNewColumnMinWidth?: number;
  /**
   * Dynamically adjusts the height of the Grid component based on its content or container, ensuring optimal layout without manual height specification.
   * Default value: false
   */
  autoHeight?: boolean;
  /**
   * Automatically adjusts the overall width of the Grid based on the combined widths of its columns. To enable this feature, ensure that each column has a numerical value assigned to its ‘width’ property. This allows the Grid to size itself precisely according to the specified widths of all columns.
   * Default value: false
   */
  autoWidth?: boolean;
  /**
   * Defines the width of columns that are automatically generated within the Grid component. This setting determines how wide each auto-created column will appear, ensuring consistent column sizing for dynamically generated data fields.
   * Default value: null
   */
  autoGenerateColumnWidth?: string | number | null;
  /**
   * Specifies the width of each column in the grid layout. This property allows you to define fixed, relative, or auto-sizing widths for grid columns, enabling precise control over the grid's overall structure and appearance.
   * Default value: null
   */
  columnWidth?: string | number | null;
  /**
   * Specifies the vertical height for each column within the Grid layout. This property determines how tall each column appears, allowing for consistent or customized column heights depending on the value provided.
   * Default value: null
   */
  columnHeight?: string | number | null;
  /**
   * Specifies the minimum height that each column within the Grid can occupy, ensuring that all columns maintain at least this height regardless of their content. This helps maintain a consistent and readable layout by preventing columns from becoming too short.
   * Default value: 30
   */
  columnMinHeight?: number;
  /**
   * Defines the lowest allowable width, in pixels or specified units, that a card can be displayed at in card view. This ensures that cards will not shrink below this minimum width, maintaining readability and consistent layout even when the container is resized or when multiple cards are shown side by side.
   * Default value: 250
   */
  cardMinWidth?: number;
  /**
   * Specifies the number of cards displayed in each row, allowing you to control the column layout and adjust how many cards appear side by side within a container.
   * Default value: null
   */
  cardsPerRow?: number;
  /**
   * Determines if cards are displayed in a vertical orientation. When enabled, each card arranges its column label above the corresponding column value, creating a top-to-bottom layout rather than the default horizontal (label-value side-by-side) format. This mode enhances readability on narrow screens and improves visual hierarchy by stacking labels above their respective values.
   * Default value: false
   */
  cardVertical?: boolean;
  /**
   * Specifies the width of the Grid component when it is rendered within a drop-down interface. This setting determines how wide the Grid appears in the drop-down, allowing you to control its visual layout and ensure proper alignment with surrounding UI elements.
   * Default value: 700
   */
  dropDownWidth?: number;
  /**
   * Specifies the vertical height of the Grid component when it is presented within a drop-down interface. This setting determines how many items or how much content is visible within the drop-down Grid before scrolling is required.
   * Default value: 500
   */
  dropDownHeight?: number;
  /**
   * Specifies the minimum height, in pixels or other valid CSS units, that each row in the Grid layout can be resized to. This ensures that no row will be rendered shorter than the defined minimum value, regardless of the content or available space.
   * Default value: 30
   */
  rowMinHeight?: number;
  /**
   * Specifies the height of the grid rows. Accepts the following values:- null: The row height is determined automatically based on the content.- auto: The row height adjusts automatically to fit the content of each row.- A number: Sets a fixed row height in pixels.Use this property to control the vertical sizing behavior of rows within the Grid component.
   * Default value: null
   */
  rowHeight?: string | number | null;
  /**
   * Specifies the width of the view bar component, determining how much horizontal space it occupies within the user interface. Adjusting this value will increase or decrease the view bar's width accordingly.
   * Default value: 250
   */
  viewBarWidth?: number;
}

/**Provides detailed configuration options for managing pagination, including parameters such as the number of items per page, current page index, and total number of pages. This section ensures efficient data retrieval and navigation across multiple pages of results. */
export interface GridPaging {
  /**
   * Enables pagination functionality, allowing data or content to be divided into discrete pages. This feature lets users navigate through large datasets or lists by viewing a limited number of items per page, improving usability and performance. Pagination controls such as next, previous, and specific page numbers may be supported.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Provides detailed configuration options for controlling the appearance and behavior of spinner-based pagination elements, including parameters for speed, size, color, and navigation functionality.
   * Default value: [object Object]
   */
  spinner?: GridPagingSpinner;
  /**
   * Specifies the maximum number of rows to display on each page of data, enabling pagination and controlling how much content is visible at one time.
   * Default value: 10
   */
  pageSize?: number;
  /**
   * Specifies the maximum number of top-level (root) hierarchical groups to display per page when grouping is enabled. For example, setting this value to 2 will show 2 root groups on each page, with pagination controls provided if there are more groups than the specified limit. This setting applies only when hierarchical grouping is active in the data grid.
   * Default value: 2
   */
  pageHierarchySize?: number;
  /**
   * Specifies the initial page or URL that users will see when they first access the application.
   * Default value: 0
   */
  pageIndex?: number;
}

/**Provides detailed configuration options for controlling the appearance and behavior of spinner-based pagination elements, including parameters for speed, size, color, and navigation functionality. */
export interface GridPagingSpinner {
  /**
   * Activates a spinner-based pagination feature, displaying a loading spinner while additional content is being fetched or loaded as the user navigates through pages. This improves user experience by providing visual feedback during content loading in paginated interfaces.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Defines the increment or decrement value when navigating between pages, determining how many pages to move forward or backward with each navigation action.
   * Default value: 1
   */
  step?: number;
}

/**Provides detailed configuration options for pager controls, including settings for page size, navigation buttons, and display style. These options determine how pagination is displayed and how users interact with paged content in the interface. */
export interface GridPager {
  /**
   * Specifies how ellipsis ("...") should be displayed when text overflows its container. This option determines the placement or behavior of the ellipsis, such as at the start, middle, or end of the truncated text.
   * Default value: both
   */
  autoEllipsis?: GridPagerAutoEllipsis | string;
  /**
   * Specifies the location where the pager (pagination controls) will be displayed within the user interface, such as at the top, bottom, or both positions of the component.
   * Default value: far
   */
  position?: LayoutPosition | string;
  /**
   * Defines the structure and layout template used to render the pager component, specifying how its elements (such as navigation buttons, page numbers, and labels) are displayed in the user interface.
   * Default value: 
   */
  template?: string | HTMLTemplateElement;
  /**
   * Specifies the configuration options for determining the number of data rows displayed per page in a paginated view. This setting allows users to control how many items are visible at once, enhancing readability and navigation within data tables or lists.
   * Default value: [object Object]
   */
  pageSizeSelector?: GridPagerPageSizeSelector;
  /**
   * Provides a detailed configuration for summary settings, specifying options such as display format, data aggregation methods, visibility controls, and customization preferences for how summaries are generated and presented within the application.
   * Default value: [object Object]
   */
  summary?: GridPagerSummary;
  /**
   * Provides configuration options for the navigation buttons, including their appearance, labels, order, and behavior within the user interface.
   * Default value: [object Object]
   */
  navigationButtons?: GridPagerNavigationButtons;
  /**
   * Provides detailed configuration options for navigation input methods, specifying how users can interact with and navigate through the interface. This includes settings such as input devices supported (keyboard, mouse, touch, etc.), navigation modes, and any customization options for user interaction.
   * Default value: [object Object]
   */
  navigationInput?: GridPagerNavigationInput;
  /**
   * Provides configuration options for the appearance and behavior of the numeric pagination buttons, including properties such as the number of buttons displayed, styling, and event handlers for user interaction.
   * Default value: [object Object]
   */
  pageIndexSelectors?: GridPagerPageIndexSelectors;
  /**
   * Controls whether the pager component is visible to users. Set to true to display the pager, or false to hide it.
   * Default value: false
   */
  visible?: boolean;
}

/**Specifies the configuration options for determining the number of data rows displayed per page in a paginated view. This setting allows users to control how many items are visible at once, enhancing readability and navigation within data tables or lists. */
export interface GridPagerPageSizeSelector {
  /**
   * Controls whether the 'Rows Per Page' dropdown is displayed, allowing users to specify how many rows are shown per page in a paginated table or list.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Specifies the number of rows displayed on each page when using the 'rows per page' pagination option. This determines how many items are visible to the user before navigation controls (such as next/previous page) are required.
   * Default value: 10,20,50
   */
  dataSource?: any;
  /**
   * Specifies the placement of the 'Rows per page' selection control within the pagination component, determining where users can adjust how many items are displayed on each page.
   * Default value: far
   */
  position?: Position | string;
}

/**Provides a detailed configuration for summary settings, specifying options such as display format, data aggregation methods, visibility controls, and customization preferences for how summaries are generated and presented within the application. */
export interface GridPagerSummary {
  /**
   * Specifies the location where the summary will be displayed within the component or layout (e.g., top, bottom, left, or right). This property determines the alignment or placement of the summary content relative to other elements.
   * Default value: far
   */
  position?: Position | string;
  /**
   * Controls whether the summary is visible or hidden in the user interface. Determines if the summary section is displayed to the user.
   * Default value: false
   */
  visible?: boolean;
}

/**Provides configuration options for the navigation buttons, including their appearance, labels, order, and behavior within the user interface. */
export interface GridPagerNavigationButtons {
  /**
   * Specifies the placement of the navigation buttons within the user interface, allowing you to control where the buttons appear (e.g., top, bottom, left, right, or custom positions) relative to the navigational content.
   * Default value: both
   */
  position?: LayoutPosition | string;
  /**
   * Defines the configuration options for the "Previous Page" and "Next Page" buttons, including their appearance, labels, behavior, and navigation functionality within paginated interfaces.
   * Default value: [object Object]
   */
  prevNextButtons?: GridPagerNavigationButtonsPrevNextButtons;
  /**
   * Provides configuration options for the "First Page" and "Last Page" navigation buttons, specifying their appearance, behavior, and accessibility settings within the user interface.
   * Default value: [object Object]
   */
  firstLastButtons?: GridPagerNavigationButtonsFirstLastButtons;
  /**
   * Provides detailed configuration options for customizing the text labels displayed on navigation buttons, allowing you to specify and modify the button captions used in the navigation interface.
   * Default value: [object Object]
   */
  labels?: GridPagerNavigationButtonsLabels;
}

/**Defines the configuration options for the "Previous Page" and "Next Page" buttons, including their appearance, labels, behavior, and navigation functionality within paginated interfaces. */
export interface GridPagerNavigationButtonsPrevNextButtons {
  /**
   * Controls whether the 'Previous Page' and 'Next Page' navigation buttons are visible to the user. Set to 'true' to display the buttons, or 'false' to hide them. This option allows you to customize the pagination controls in the interface.
   * Default value: true
   */
  visible?: boolean;
}

/**Provides configuration options for the "First Page" and "Last Page" navigation buttons, specifying their appearance, behavior, and accessibility settings within the user interface. */
export interface GridPagerNavigationButtonsFirstLastButtons {
  /**
   * Controls whether the 'First Page' and 'Last Page' navigation buttons are displayed, allowing users to quickly jump to the beginning or end of a paginated list. Set this option to determine if these navigation buttons should be visible in the pagination controls.
   * Default value: true
   */
  visible?: boolean;
}

/**Provides detailed configuration options for customizing the text labels displayed on navigation buttons, allowing you to specify and modify the button captions used in the navigation interface. */
export interface GridPagerNavigationButtonsLabels {
  /**
   * Determines whether the labels for navigation buttons are visible to users. When enabled, text labels appear alongside the navigation buttons, providing additional context or descriptions; when disabled, only the button icons are displayed.
   * Default value: false
   */
  visible?: boolean;
}

/**Provides detailed configuration options for navigation input methods, specifying how users can interact with and navigate through the interface. This includes settings such as input devices supported (keyboard, mouse, touch, etc.), navigation modes, and any customization options for user interaction. */
export interface GridPagerNavigationInput {
  /**
   * Specifies the placement of the navigation input element within the user interface, determining where the navigation control appears on the screen (e.g., top, bottom, left, or right). This setting allows developers to customize the navigation experience according to the application's layout requirements.
   * Default value: far
   */
  position?: Position | string;
  /**
   * Controls whether the navigation input option is visible to users. When enabled, the navigation input will be displayed in the user interface; when disabled, it will be hidden. This property allows developers to dynamically show or hide navigation options based on application state or user permissions.
   * Default value: false
   */
  visible?: boolean;
}

/**Provides configuration options for the appearance and behavior of the numeric pagination buttons, including properties such as the number of buttons displayed, styling, and event handlers for user interaction. */
export interface GridPagerPageIndexSelectors {
  /**
   * Controls whether numeric page buttons (representing individual page numbers in pagination controls) are displayed to the user. When enabled, numbered buttons appear, allowing direct navigation to specific pages. When disabled, these numeric buttons are hidden, and users may need to rely on other navigation methods such as "Next" or "Previous" buttons.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Specifies the maximum number of page navigation buttons displayed at once in the pagination control. This determines how many page links are visible to the user before additional pages are hidden or collapsed (e.g., with ellipsis).
   * Default value: 10
   */
  dataSource?: any;
}

/**Configures or updates the detailed information or content associated with a specific row, often used to display additional data or expanded views for that row. */
export interface GridRowDetail {
  /**
   * Displays additional information for each row by enabling expandable row details functionality.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Specifies the vertical height, in pixels, for the expanded row details section. This determines how much space is allocated to display additional information beneath a table row when its details are shown.
   * Default value: 200
   */
  height?: number;
  /**
   * Specifies the position of the column used to control the dynamic expansion or collapse of row details. This determines where the expand/collapse toggle will appear within the table, allowing users to show or hide additional information for each row.
   * Default value: near
   */
  position?: Position | string;
  /**
   * Defines the template used to display the detailed content for each row. This property specifies the HTML or component structure that will be rendered when a row is expanded to show additional information.
   * Default value: 
   */
  template?: string | HTMLTemplateElement;
  /**
   * Controls the visibility of the column that enables users to dynamically expand or collapse the details of a row. When enabled, this column provides an interactive toggle for showing or hiding additional information associated with each row.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Configures the display of row details using a dialog window. When enabled, selecting a row will open a modal dialog showing detailed information for that row. This provides a focused view of row details without navigating away from the main content.
   * Default value: [object Object]
   */
  dialog?: Dialog;
}

export interface GridRow {
  /**
   * Sets or gets the row can be expanded or collapsed.
   * Default value: true
   */
  allowToggle?: boolean;
  /**
   * Sets or gets the row can be resized.
   * Default value: true
   */
  allowResize?: boolean;
  /**
   * Sets or gets the row can be selected.
   * Default value: true
   */
  allowSelect?: boolean | null;
  /**
   * Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
   * Default value: true
   */
  allowCheck?: boolean;
  /**
   * Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
   * Default value: true
   */
  checked?: boolean;
  /**
   * Gets the Row's Cells array.
   * Default value: []
   */
  cells?: GridCell[];
  /**
   * Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
   * Default value: null
   */
  children?: any;
  /**
   * Gets the row's bound data.
   * Default value: null
   */
  data?: any;
  /**
   * Sets or gets the row's detail height.
   * Default value: 200
   */
  detailHeight?: number;
  /**
   * Sets or gets the row's detail template.
   * Default value: null
   */
  detailTemplate?: string | HTMLTemplateElement | null;
  /**
   * Gets the HTML Element. The property returns null when the Row is not in the View.
   * Default value: null
   */
  element?: any;
  /**
   * Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
   * Default value: false
   */
  expanded?: boolean;
  /**
   * Gets the row's header element.
   * Default value: null
   */
  header?: HTMLElement;
  /**
   * Sets or gets the row's height.
   * Default value: 30
   */
  height?: number;
  /**
   * Gets the row's bound index.
   * Default value: -1
   */
  index?: number;
  /**
   * Gets the row's bound id.
   * Default value: 
   */
  id?: string | number;
  /**
   * Gets whether the row is leaf row in TreeGrid or Grouping mode.
   * Default value: false
   */
  leaf?: boolean;
  /**
   * Sets or gets the row's maximum height.
   * Default value: 100
   */
  maxHeight?: number;
  /**
   * Sets or gets the row's minimum height.
   * Default value: 30
   */
  minHeight?: number;
  /**
   * Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).
   * Default value: false
   */
  freeze?: Position | string;
  /**
   * Sets or gets whether the row is selected.
   * Default value: false
   */
  selected?: boolean;
  /**
   * Sets or gets whether the row detail is displayed.
   * Default value: false
   */
  showDetail?: boolean;
  /**
   * "Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
   * Default value: undefined
   */
  setStyle?: {(value: any): void};
  /**
   * Sets or gets whether the row is visible. Set the property to 'false' to hide the row.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Gets the visible index of the row.
   * Default value: -1
   */
  visibleIndex?: number;
  /**
   * Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.
   * Default value: -1
   */
  getCell?: any;
}

export interface GridCell {
  /**
   * "Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".
   * Default value: "'left'"
   */
  align?: string;
  /**
   * Gets the column associated to the cell.
   * Default value: null
   */
  column?: any;
  /**
   * Sets or gets the cell's text color.
   * Default value: "''"
   */
  color?: string;
  /**
   * Sets or gets the cell's background.
   * Default value: "''"
   */
  background?: string;
  /**
   * Sets or gets the cell's borderColor.
   * Default value: "''"
   */
  borderColor?: string;
  /**
   * Sets or gets the cell's colSpan.
   * Default value: 1
   */
  colSpan?: number;
  /**
   * Sets or gets the cell's editor.
   * Default value: null
   */
  editor?: any;
  /**
   * Gets the HTMLElement associated to the cell.
   * Default value: null
   */
  element?: HTMLElement;
  /**
   * Gets a formatted number or Date.
   * Default value: null
   */
  getFormattedValue?: {(value: any, type: string): void};
  /**
   * Gets whether the cell is in edit mode.
   * Default value: false
   */
  isEditing?: boolean;
  /**
   * Gets the old value of the cell
   * Default value: null
   */
  oldValue?: any;
  /**
   * Sets or gets the cell's fontSize
   * Default value: "''"
   */
  fontSize?: string;
  /**
   * Sets or gets the cell's fontWeight
   * Default value: "''"
   */
  fontWeight?: string;
  /**
   * Sets or gets the cell's fontFamily
   * Default value: "''"
   */
  fontFamily?: string;
  /**
   * Sets or gets the cell's fontStyle
   * Default value: "''"
   */
  fontStyle?: string;
  /**
   * "Sets or gets whether the cell can be edited.".
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets the row object associated to the cell.
   * Default value: null
   */
  row?: any;
  /**
   * Sets or gets the row span.
   * Default value: 1
   */
  rowSpan?: number;
  /**
   * Sets or gets whether the cell is selected.
   * Default value: false
   */
  selected?: boolean;
  /**
   * "Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".
   * Default value: 
   */
  setProperties?: {(properties: {name: string, value: string}[]): void};
  /**
   * "Allowed values are: 'top', 'middle' or 'bottom'".
   * Default value: ""
   */
  tooltip?: string;
  /**
   * The cell's value
   * Default value: null
   */
  value?: any;
  /**
   * "Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".
   * Default value: "'center'"
   */
  verticalAlign?: string;
  /**
   * "Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
   * Default value: undefined
   */
  setStyle?: {(value: any): void};
}

/**Provides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized. */
export interface GridSummaryRow {
  /**
   * Controls whether the summary row is displayed or hidden in the table.
   * Default value: false
   */
  visible?: boolean;
  /**
   * Enables the summary row editor, allowing users to interactively edit summary row cells. When you hover over a cell in the summary row, an inline editor appears, so you can dynamically change the summary type (e.g., sum, average, count) directly within the table. This feature improves data analysis by making it easy to adjust summary calculations on the fly.
   * Default value: false
   */
  editing?: boolean;
}

/**Configures the grid's state-related settings, including properties such as selection, sorting, filtering, pagination, and layout. This determines how the grid maintains and restores its current state during user interactions or when the page is reloaded. */
export interface GridStateSettings {
  /**
   * Controls whether the Grid's current state (such as column order, filter settings, and sorting) is automatically saved or not. When enabled, any changes to the Grid's configuration are stored automatically for later retrieval.
   * Default value: false
   */
  autoSave?: boolean;
  /**
   * Controls whether the Grid automatically restores its previous state (such as filters, sorting, and column arrangements) when the page is reloaded. When enabled, the Grid will load the saved state on page refresh; when disabled, the Grid will reset to its default configuration.
   * Default value: false
   */
  autoLoad?: boolean;
  /**
   * Controls whether the grid's current state—such as column order, sorting, filtering, and visibility—is automatically saved and restored when loading or reloading the grid. When enabled, changes made by the user are preserved, providing a consistent experience across sessions. Disabling this option prevents the grid from saving or restoring any state information.
   * Default value: true
   */
  enabled?: boolean;
  /**
   * Sets a new state value or retrieves the current state value. When a value is provided, the state is updated to the new value. If no value is provided, the current state is returned. This is typically used to manage and track changes in application state.
   * Default value: ""
   */
  current?: string;
  /**
   * A container that automatically stores state objects whenever the saveState method is called or when autoSave is enabled. Each entry in the container uses the state's name as the key and the corresponding value is a JSON object containing that state's properties and data. This structure allows for easy retrieval and management of multiple application states by name.
   * Default value: null
   */
  storage?: any;
  /**
   * Function invoked whenever the component’s state changes, allowing you to respond to or handle updates accordingly.
   * Default value: 
   */
  onStateChange?: any;
  /**
   * An array specifying which table state options—such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', and 'columns'—should be persisted. Each value in the array represents a different aspect of the table’s state that can be saved or restored (e.g., saving the current sorting order, applied filters, selected rows, or column configuration). This property allows you to control exactly which parts of the table state are stored and later reloaded, enabling customized persistence and retrieval of user interactions.
   * Default value: 
   */
  options?: string[];
}

/**Provides detailed configuration options for user selection behavior, including parameters such as selection mode (single or multiple), default selections, selection limits, and customizable callbacks for selection events. */
export interface GridSelection {
  /**
   * Allows users to select an option from a list, enabling interaction with selectable choices within the user interface.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Determines whether users can select rows by clicking on the row header. When enabled, clicking a row header will select the entire row. This property can be used to either allow or prevent selection through row headers.
   * Default value: false
   */
  allowRowHeaderSelection?: boolean;
  /**
   * Determines whether users can select a column by clicking on its header. When enabled, clicking a column header will select the entire column. This property can be set to allow or prevent selection via column header clicks, and its current state can be retrieved programmatically.
   * Default value: false
   */
  allowColumnHeaderSelection?: boolean;
  /**
   * Determines whether selecting a row by clicking on it is enabled. When set to true, users can select rows with a mouse click; when false, clicking a row will not change its selection state. Use this property to control row selection behavior in the interface.
   * Default value: true
   */
  allowRowSelection?: boolean;
  /**
   * Determines whether users are permitted to select a cell by clicking on it. When enabled, clicking on a cell will select it; when disabled, clicking will have no effect on the cell’s selection state. This property can be set to enable or disable cell selection via mouse interaction.
   * Default value: false
   */
  allowCellSelection?: boolean;
  /**
   * Controls whether users can select multiple cells by dragging the mouse across them, similar to how selection works in Excel. When enabled, users can click and drag to highlight a range of cells; when disabled, selection by dragging is not permitted. This property can be set or retrieved programmatically.
   * Default value: true
   */
  allowDragSelection?: boolean;
  /**
   * Determines whether the Grid view will automatically scroll when a user selects items by dragging the mouse beyond the current visible area. This property can be set to enable or disable auto-scrolling during drag selection, or retrieved to check the current behavior.
   * Default value: true
   */
  allowDragSelectionAutoScroll?: boolean;
  /**
   * Controls the visibility of the selection "Drag Handle" (the small square located at the bottom-right corner of a selected cell range, similar to Excel). When enabled, this handle allows users to extend or resize their current selection horizontally or vertically by dragging the handle. This property can be set to show or hide the drag handle, as well as queried to determine its current state.
   * Default value: true
   */
  allowCellDragSelectionHandle?: boolean;
  /**
   * Controls whether cells in the selection can be dragged and dropped. When enabled, dragging is initiated by moving the cursor to the bottom edge of the selected cells, causing the cursor to change to a "drag" icon. Clicking and holding the mouse button while moving the selection will initiate the drag operation. By default, dropping the selection copies the values of the dragged cells to the new location. This property can be used to enable or disable drag-and-drop functionality for cell selections.
   * Default value: true
   */
  allowCellDragDropSelectionHandle?: boolean;
  /**
   * Controls whether cell selection is automatically populated with values when dragging and releasing the 'Drag Handle'. When enabled, dragging the handle will auto-fill the selected cells with the corresponding values. This property can be set to enable or disable the auto-fill behavior, and can also be used to check the current auto-fill status.
   * Default value: true
   */
  allowCellDragSelectionAutoFill?: boolean;
  /**
   * Determines whether the default browser behavior for text selection is enabled or disabled. When enabled, users can highlight and select text within the element using their mouse or keyboard. When disabled, text selection is prevented, and users cannot highlight the element’s text. This can be useful for UI components where text selection should be restricted, such as buttons or draggable elements.
   * Default value: false
   */
  defaultSelection?: boolean;
  /**
   * Gets or sets the selection mode, determining how users can select items in the control. The available values are:- ''one'': Only a single cell or row can be selected at any given time.- ''many'': Multiple cells or rows can be selected, typically by individually clicking on them.- ''extended'': Multiple cells or rows can be selected using a combination of mouse clicks and keyboard modifiers (such as Shift or Ctrl), allowing for range or non-contiguous selections.Use this property to control whether users can select only one item, several items, or use advanced selection behaviors.
   * Default value: many
   */
  mode?: GridSelectionMode | string;
  /**
   * Controls how selection is triggered: accepts 'click' or 'doubleClick' to specify if selection occurs on a single or double mouse click, respectively. When set to 'none', user interaction does not trigger selection—selection can only be managed programmatically via the API.
   * Default value: click
   */
  action?: GridSelectionAction | string;
  /**
   * 
   * Default value: [object Object]
   */
  checkBoxes?: GridSelectionCheckBoxes;
  /**
   * 
   * Default value: ""
   */
  selected?: string;
}

export interface GridSelectionCheckBoxes {
  /**
   * Controls the visibility of checkboxes within the Grid. When set to true, checkboxes are only displayed when the mouse hovers over the Grid. When set to false, checkboxes remain visible at all times, regardless of mouse position. This property can be used to create a cleaner interface by showing checkboxes only on hover.
   * Default value: false
   */
  autoShow?: boolean;
  /**
   * Enables or disables the checkbox selection feature. When enabled, an additional column containing checkboxes is displayed, allowing users to select multiple rows. You can use this property to programmatically determine or change whether checkbox selection is active.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Determines how selection is triggered within the component. Accepts the following values:- ''click'': Selection occurs when the user clicks on the item.- ''doubleClick'': Selection occurs when the user double-clicks on the item.- ''none'': Selection cannot be triggered by user interaction; it can only be set or changed programmatically via the API.This property can be used to both retrieve the current selection mode or set a new one.
   * Default value: click
   */
  action?: GridSelectionAction | string;
  /**
   * Specifies whether the checkbox selection in the table header will select all rows on the current page, all rows across all pages, or none. When set to 'page', the header checkbox selects only the rows visible on the current page. When set to 'all', it selects every row in the dataset, regardless of pagination. Setting this option to 'none' disables the header checkbox, preventing users from selecting all rows at once.
   * Default value: page
   */
  selectAllMode?: GridSelectionCheckBoxesSelectAllMode | string;
  /**
   * Sets or retrieves the position of the checkbox selection column within a table or grid, allowing you to specify whether the checkbox column appears at the start (left) or end (right) of the columns.
   * Default value: near
   */
  position?: Position | string;
}

/**Provides detailed configuration options for controlling how data is sorted, including criteria such as sorting field, order (ascending or descending), and support for multiple sort keys. */
export interface GridSorting {
  /**
   * Enables sorting functionality, allowing users to organize data in ascending or descending order based on specified fields or columns.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Configures which columns will be used for sorting the data and determines their sort order (e.g., ascending or descending) during the sorting operation.
   * Default value: 
   */
  sort?: string[];
  /**
   * Ensures that the sorting order is preserved when the user edits data within the currently sorted column. If you want the sorting to be applied only once—so that edited data does not automatically re-sort the column—you can disable this feature by setting the property to false. This allows the column's order to remain unchanged after data edits, rather than reapplying the sort.
   * Default value: true
   */
  maintainSort?: boolean;
  /**
   * Specifies the maximum number of columns by which users can sort the data. When this property is set to 'many', users are allowed to apply sorting to multiple columns simultaneously, enabling multi-level sorting functionality.
   * Default value: one
   */
  mode?: GridSortingMode | string;
  /**
   * Specifies which keyboard key activates multi-column sorting. This property determines the key that users must hold down to enable sorting by multiple columns simultaneously. For example, if commandKey is set to 'Control', users can select and sort multiple columns by holding the 'Control' key while clicking on column headers. Adjust this property to match the desired key for multi-column sorting functionality (e.g., 'Alt', 'Shift', or 'Meta').
   * Default value: Default
   */
  commandKey?: GridSortingCommandKey | string;
  /**
   * Allows users to toggle between three sorting options: ascending order, descending order, and no sorting applied. This functionality enables dynamic changes to the sorting state of a data set or list, providing greater flexibility and control over how information is presented.
   * Default value: true
   */
  sortToggleThreeStates?: boolean;
  /**
   * Allows users to change the sorting state (e.g., ascending, descending, or none) of a column by clicking its header. This feature is enabled by default, enabling interactive sorting functionality within the table.
   * Default value: true
   */
  sortToggleOnClick?: boolean;
  /**
   * Allows users to toggle through different column sort states (such as ascending, descending, and unsorted) by clicking on a column header. Holding down the Command key while clicking enables multi-column sorting, letting users modify the sort order of multiple columns at once.
   * Default value: false
   */
  sortToggleOnClickAndCommandKey?: boolean;
}

/**Configures the upload settings for images and attachments in the grid's image and attachment columns, including options for file type restrictions, size limits, and image filters to be applied during the upload process. */
export interface GridUploadSettings {
  /**
   * Specifies the URL endpoint used for uploading files or images. This URL is where the files or images will be submitted during the upload process.
   * Default value: ""
   */
  url?: string;
  /**
   * Specifies the URL endpoint to handle file or image removal requests. This URL will be used when a file or image needs to be deleted from the server.
   * Default value: ""
   */
  removeUrl?: string;
  /**
   * Sets or retrieves the name of the file input field used for uploads. This field name is crucial for accessing uploaded image data on the backend. For example, in an Express.js application handling file uploads (e.g., using multer or a similar middleware), you would use this field name to reference the uploaded files from the request object. If the upload field name is set to "userfile[]", you can access the array of uploaded images in your route handler like so:  '''javascriptconst images = req.files['userfile[]'];'''Make sure the field name specified here matches the name attribute of your file input element in the frontend form, enabling seamless retrieval of uploaded files on the server side.
   * Default value: "userfile[]"
   */
  name?: string;
  /**
   * Supplementary information to be sent to the server. This data must be provided as a JSON-formatted string (i.e., a serialized JSON object or array). Ensure all values are properly encoded and the string adheres to valid JSON syntax before submission.
   * Default value: ""
   */
  data?: string;
  /**
   * "This function is triggered after the upload process completes. When invoked by the Grid, it receives a JSON object as a parameter. The JSON object contains the following properties:- 'files': An array listing the uploaded file(s).- 'status': A string indicating the result of the upload (e.g., 'success', 'error').- 'fileURL': The URL(s) where the uploaded file(s) can be accessed.- 'serverResponse': The response data returned by the server upon upload completion.Use this function to handle post-upload actions such as updating the UI, processing the server response, or handling errors."
   * Default value: 
   */
  onUploadCompleted?: any;
  /**
   * This function is triggered when a file upload fails. It receives a JSON object as a parameter, which contains the following properties:- 'files': An array of file objects that failed to upload.- 'status': The HTTP status code or error status associated with the failure.- 'serverResponse': The full response returned by the server, which may include error messages or additional details about the upload failure.This function is automatically invoked by the Grid component whenever an upload error occurs, allowing you to handle the failure appropriately in your code.
   * Default value: 
   */
  onUploadError?: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-grid"): Grid;
        querySelector(selectors: "smart-grid"): Grid | null;
        querySelectorAll(selectors: "smart-grid"): NodeListOf<Grid>;
        getElementsByTagName(qualifiedName: "smart-grid"): HTMLCollectionOf<Grid>;
        getElementsByName(elementName: "smart-grid"): NodeListOf<Grid>;
    }
}

/**Specifies the format of row header labels, allowing you to choose between sequential numbers (e.g., 1, 2, 3, ...) or alphabetical letters (e.g., A, B, C, ...). Changing this property determines how the row headers are displayed in the rendered output. */
export declare type GridAppearanceAutoGenerateRowLabelMode = 'number' | 'letter';
/**Determines the format of the column header labels, allowing them to be displayed as either sequential numbers (e.g., 1, 2, 3…) or letters (e.g., A, B, C…). This property directly influences how column headers are rendered and displayed in the table interface. */
export declare type GridAppearanceAutoGenerateColumnLabelMode = 'number' | 'letter';
/**Specifies how rows are resized within the container.  <br/>- In the split resize mode, resizing a row will both increase or decrease the height of the target (resized) row and inversely adjust the height of the immediately following (sibling) row, ensuring the total height remains constant.<br/>- In the growAndShrink resize mode, only the targeted row's height is adjusted—either increasing or decreasing—without affecting the size of neighboring rows. */
export declare type GridResizeMode = 'none' | 'split' | 'growAndShrink';
/**Defines whether and how the values of copied and pasted cells are automatically filled using pattern detection during Drag & Drop or multiple cell selection operations. This setting determines how pasted data is handled:<br/><br/>- 'none': No auto-fill or pattern detection is applied. Pasted cells remain as they are, with no changes or repetition beyond what was directly copied.<br/>- 'copy': The exact cell values are duplicated into the new locations without attempting to follow or extend any logical sequence or pattern.<br/>- 'fillSeries': Enables automatic pattern detection and series continuation. If the selection forms a recognizable sequence—for example, '1, 2'—the pasted cells will extend this pattern (e.g., '1, 2, 3, 4, ...'), filling additional cells with the next values in the detected sequence.<br/><br/>This option helps users quickly extend numeric, date, or other discernible patterns when dragging or pasting multiple cells. */
export declare type GridClipboardAutoFillMode = 'none' | 'copy' | 'fillSeries';
/**Sets or retrieves the position of the checkbox selection column within a table or grid, allowing you to specify whether the checkbox column appears at the start (left) or end (right) of the columns. */
export declare type Position = 'near' | 'far';
/**Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed. */
export declare type GridColumnFilterMenuMode = 'basic' | 'default' | 'excel';
/**Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null. */
export declare type GridColumnSortOrder = 'asc' | 'desc' | 'none';
/**The formatting condition. */
export declare type GridConditionalFormattingCondition = 'between' | 'equal' | 'greaterThan' | 'lessThan' | 'notEqual';
/**Specifies the orientation of the page (portrait or landscape) when exporting the document to PDF format. This setting determines how the content is laid out on each PDF page. */
export declare type GridDataExportPageOrientation = 'landscape' | 'portrait';
/**Sets or retrieves the root element used for XML data binding. This property specifies the top-level XML element that serves as the entry point for mapping XML data to objects, or for serializing objects to XML. */
export declare type GridDataSourceSettingsSanitizeHTML = 'all' | 'blackList' | 'none';
/**Sets the dataField type. */
export declare type GridDataSourceSettingsDataFieldDataType = 'string' | 'date' | 'boolean' | 'number' | 'array' | 'any';
/**Specifies or retrieves the type of data source being used, allowing you to define or query the data source format (such as JSON, XML, or a database connection). */
export declare type GridDataSourceSettingsDataSourceType = 'array' | 'json' | 'xml' | 'csv' | 'tsv';
/**Specifies the method by which the editing mode is activated, such as through a single click, double click, or keyboard action. */
export declare type GridEditingAction = 'none' | 'click' | 'doubleClick';
/**Defines the content or label displayed within the buttons of the command column, such as text, icons, or custom HTML elements. This determines what users see and interact with in each command button cell. */
export declare type GridCommandDisplayMode = 'label' | 'icon' | 'labelAndIcon';
/**Enables or configures the grid's cell editing functionality by setting its edit mode. This determines how users can interact with and modify the grid’s cell values—such as enabling inline editing, displaying an edit dialog, or disabling editing entirely. */
export declare type GridEditingMode = 'cell' | 'row';
/**Controls whether the new row action is displayed as a full-width row or as a button. Accepts two values: 'row' to show the action as an entire row, or 'button' to render it as a button element. This property can be used to both retrieve the current display mode and set a new one. */
export declare type GridEditingAddNewRowDisplayMode = 'row' | 'button';
/**Determines how filters entered in the filter row are applied to the data, specifying whether filtering occurs automatically as the user types or only after a specific action, such as pressing Enter or clicking a filter button. */
export declare type GridFilteringFilterRowApplyMode = 'auto' | 'click';
/**Specifies the display mode for the filter menu, determining how filtering options are presented to the user (e.g., dropdown, modal, or inline). */
export declare type GridFilteringFilterMenuMode = 'default' | 'excel';
/**Specifies how groups are expanded or collapsed within the component. Determines whether groups are expanded by default, collapsed, or if a custom behavior is applied. */
export declare type GridGroupingExpandMode = 'buttonClick' | 'rowClick';
/**Specifies how group headers are displayed within the component. The available options are:<br/><br/>- 'basic': Renders group headers without applying any indentation, custom group row heights, or column labels. This provides a simple, minimal display.<br/>- 'compact': Similar to 'basic', but additionally includes the column labels in the group headers for improved clarity.<br/>- 'advanced' (default): Enhances the group header display by adding indentation based on the group level, allowing nested groups to be visually distinguished. This mode may also support custom group row heights and presents the column labels appropriately.<br/>- 'multipleColumns': Displays each group header in its separate column, enabling a more structured and multi-dimensional grouping layout.<br/><br/>Choose the mode that best fits the desired visual presentation and complexity of your grouped data. */
export declare type GridGroupingRenderMode = 'basic' | 'compact' | 'advanced' | 'multipleColumns';
/**Specifies the type of search command to be executed, determining how the search operation is performed (e.g., basic, advanced, or filtered search). This setting influences the logic and options available during the search process. */
export declare type GridHeaderSearchCommand = 'search' | 'filter';
/**Specifies how ellipsis ("...") should be displayed when text overflows its container. This option determines the placement or behavior of the ellipsis, such as at the start, middle, or end of the truncated text. */
export declare type GridPagerAutoEllipsis = 'none' | 'before' | 'after' | 'both';
/**Gets or sets the selection mode, determining how users can select items in the control. The available values are:<br/><br/>- ''one'': Only a single cell or row can be selected at any given time.<br/>- ''many'': Multiple cells or rows can be selected, typically by individually clicking on them.<br/>- ''extended'': Multiple cells or rows can be selected using a combination of mouse clicks and keyboard modifiers (such as Shift or Ctrl), allowing for range or non-contiguous selections.<br/><br/>Use this property to control whether users can select only one item, several items, or use advanced selection behaviors. */
export declare type GridSelectionMode = 'one' | 'many' | 'extended';
/**Determines how selection is triggered within the component. Accepts the following values:<br/><br/>- ''click'': Selection occurs when the user clicks on the item.<br/>- ''doubleClick'': Selection occurs when the user double-clicks on the item.<br/>- ''none'': Selection cannot be triggered by user interaction; it can only be set or changed programmatically via the API.<br/><br/>This property can be used to both retrieve the current selection mode or set a new one. */
export declare type GridSelectionAction = 'none' | 'click' | 'doubleClick';
/**Specifies whether the checkbox selection in the table header will select all rows on the current page, all rows across all pages, or none. When set to 'page', the header checkbox selects only the rows visible on the current page. When set to 'all', it selects every row in the dataset, regardless of pagination. Setting this option to 'none' disables the header checkbox, preventing users from selecting all rows at once. */
export declare type GridSelectionCheckBoxesSelectAllMode = 'none' | 'page' | 'all';
/**Specifies the maximum number of columns by which users can sort the data. When this property is set to 'many', users are allowed to apply sorting to multiple columns simultaneously, enabling multi-level sorting functionality. */
export declare type GridSortingMode = 'one' | 'many';
/**Specifies which keyboard key activates multi-column sorting. This property determines the key that users must hold down to enable sorting by multiple columns simultaneously. For example, if commandKey is set to 'Control', users can select and sort multiple columns by holding the 'Control' key while clicking on column headers. Adjust this property to match the desired key for multi-column sorting functionality (e.g., 'Alt', 'Shift', or 'Meta'). */
export declare type GridSortingCommandKey = 'Default' | 'Alt' | 'Control' | 'Shift';
export interface GroupPanelProperties {
  /**
   * Controls the animation mode for the element. You can use this property to retrieve the current animation mode or set a new one. When set to 'none', all animations are disabled for the element, resulting in immediate transitions without any visual effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Defines or retrieves the position of the close button displayed on items within the group panel. This property allows you to specify where the close button appears (e.g., left, right, or another designated location) for each group panel item, or to access its current position programmatically.
   * Default value: left
   */
  closeButtonPosition?: GroupPanelCloseButtonPosition | string;
  /**
   * Specifies the data source configuration for the group panel.  Each entry in the dataSource array is an object that defines the properties of a column available for grouping. The object includes the following fields:  dataField: The unique field name of the column that can be used for grouping.  dataType: The data type of the column, such as 'string', 'number', 'date', etc.  groupIndex: The initial position of the column in the group order. A value of -1 means the column will not be grouped by default.  label: The display name of the column shown in the column selection dropdown of the group panel.  icon: The CSS class for the icon representing this column in the selection dropdown, allowing for custom visual identification.  sortDirection: The default sort direction when the column is used for grouping. Accepted values are 'ascending' or 'descending'.Use this configuration to control which columns users can group by, their display order, labels, icons, and default sorting in your group panel interface.
   * Default value: null
   */
  dataSource?: {label: string, dataField: string, dataType: string, sortDirection: string, groupIndex: number}[];
  /**
   * Controls the visibility of the group panel, allowing you to show or hide the panel where grouped items or filters are managed. Set to true to display the group panel, or false to hide it from the user interface.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the unlockKey, a unique code or token required to activate and access the full features of the product. This property is used to manage product unlocking and user authorization.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which set of localized messages—defined in the messages property—will be used for displaying content. When setting this value, the corresponding language-specific messages are selected for the user interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define or modify the format of messages returned by the Localization Module. Use this to tailor localized message strings—such as formatting variables, changing wording, or supporting custom message structures—before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves the maximum number of columns that can be used for grouping results. If the value is set to null, there is no restriction on the number of columns allowed in the grouping operation.
   * Default value: 8
   */
  maxLevel?: number;
  /**
   * Defines or retrieves an object containing localized string values used throughout the widget's user interface. By customizing this object, you can provide translations for UI text, labels, tooltips, and messages. This property works together with the locale property, allowing the widget to display content in different languages based on the specified locale setting.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "apply": "Apply",
   *     "booleanFirst": "?",
   *     "booleanLast": "?",
   *     "cancel": "Cancel",
   *     "dateFirst": "1",
   *     "dateLast": "9",
   *     "from": "from",
   *     "numberFirst": "1",
   *     "numberLast": "9",
   *     "pickAnother": "Pick another field to group by",
   *     "firstBy": "Group by",
   *     "stringFirst": "A",
   *     "stringLast": "Z",
   *     "thenBy": "then by",
   *     "collapseAll": "Collapse all",
   *     "expandAll": "Expand all"
   *   }
   * }
   */
  messages?: any;
  /**
   * If the element is set to readonly, users will be able to view its value but will not be able to modify, edit, or otherwise interact with its content. This means the element’s value cannot be changed through direct user input, although the content may still be selectable or copied.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that specifies whether the element’s layout direction is set to right-to-left (RTL), enabling proper alignment and support for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning the element cannot be selected or activated using the Tab key or other focus navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Defines a group of grouped items in a panel.
*/
export interface GroupPanel extends BaseElement, GroupPanelProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user clicks the "Apply" button on the interface. It can be used to initiate actions such as submitting form data, applying selected filters, updating displayed content, or executing any operation associated with the user's request to apply changes. The event will only fire in response to direct user interaction with the "Apply" button.
	* @param event. The custom event.    */
  onApply?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user clicks the "Cancel" button. It typically initiates actions such as closing the current dialog, dismissing a modal window, or aborting an ongoing operation, depending on the application's context.
	* @param event. The custom event.    */
  onCancel: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the "Collapse all" button is clicked by the user. It typically initiates the process of collapsing or hiding all currently expanded sections, panels, or items within the interface, resulting in a more compact view.
	* @param event. The custom event.    */
  onCollapseAll?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the "Expand all" button is clicked by the user, typically to display all collapsible content sections within the interface. It allows developers to respond to the user's action, such as expanding all hidden panels or rows programmatically.
	* @param event. The custom event.    */
  onExpandAll?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-group-panel"): GroupPanel;
        querySelector(selectors: "smart-group-panel"): GroupPanel | null;
        querySelectorAll(selectors: "smart-group-panel"): NodeListOf<GroupPanel>;
        getElementsByTagName(qualifiedName: "smart-group-panel"): HTMLCollectionOf<GroupPanel>;
        getElementsByName(elementName: "smart-group-panel"): NodeListOf<GroupPanel>;
    }
}

/**Defines or retrieves the position of the close button displayed on items within the group panel. This property allows you to specify where the close button appears (e.g., left, right, or another designated location) for each group panel item, or to access its current position programmatically. */
export declare type GroupPanelCloseButtonPosition = 'left' | 'right';
export interface InputProperties {
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching suggestions after the user interacts with the autocomplete input. This delay helps control how quickly the dropdown appears, improving user experience by preventing it from opening too rapidly as users type.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Specifies the data source that will be used to populate the Input component. The dataSource property accepts multiple formats:- 'Array of Primitives:' An array of strings or numbers, where each element represents a single list item.- 'Array of Objects:' An array of objects, where each object defines the properties of a list item. The recognized fields for each item object include:  - label (string): The display text for the item.  - value (string | number): The underlying value associated with the item.  - selected (boolean): Indicates whether the item is initially selected.  - prefix (string): HTML content to display before the label.  - suffix (string): HTML content to display after the label.  - title (string): Additional descriptive text, typically used for tooltips.- 'Callback Function:' A function that returns an array of items in either of the formats described above, allowing for dynamic or asynchronous data loading.The prefix and suffix fields can contain HTML, which is rendered respectively before and after the item's label. This allows for additional icons, badges, or formatting as needed to enhance the list item's visual presentation.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Controls whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When disabled, the element cannot be interacted with or triggered by the user.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Allows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling custom styling or theming beyond the default classes.
   * Default value: 
   */
  dropDownClassList?: any;
  /**
   * Specifies the placement of the dropdown button relative to its container or trigger element, such as positioning it above, below, to the left, or to the right. This affects where the dropdown appears on the user interface when activated.
   * Default value: none
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right.
   * Default value: auto
   */
  dropDownOpenPosition?: DropDownOpenPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. To override the default behavior and set a custom height, assign a specific value (such as "200px" or "50%") to this property. If left unset, the component relies on the CSS variable to control its height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Defines the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing you to control its sizing through your stylesheet. To specify a fixed width, provide a valid CSS width value (e.g., "200px", "100%"). If not specified, the component will fallback to the CSS variable for its width.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies the purpose of the input field and instructs the browser on both the type of data expected and the level of permission granted to automatically assist the user in filling out the form element. This property directly maps to the standard HTML autocomplete attribute, which helps improve user experience by enabling browsers to suggest or autofill relevant data, such as a user’s name, organization, street address, and more. Common values include 'on' (enables autocomplete), 'off' (disables autocomplete), as well as context-specific tokens like 'name', 'email', 'organization', and 'street-address', among others. Using the appropriate value enhances form usability, accuracy, and accessibility.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the maximum number of matching items that will be displayed in the dropdown menu after a new auto-complete query is performed. By default, the dropdown will show up to 8 items. If the number of matched items exceeds this limit, only the first 8 results will be visible, and additional matches will not be shown unless this value is increased.
   * Default value: 8
   */
  items?: number;
  /**
   * Retrieves or assigns the unlockKey value used to grant access to the product. The unlockKey serves as a security credential required to unlock and enable product functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting, which determines the localization to be used for displaying content. This property works together with the messages property to select and present language-specific messages or text strings. Setting this property updates the language used throughout the interface, while getting the property returns the currently active language code (e.g., "en", "fr", "es").
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify or structure localized messages before they are delivered to the application, such as adding context, adjusting placeholders, or applying additional formatting logic.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing customizable text strings displayed by the widget, enabling localization for different languages and regions. This property works together with the locale property to allow the widget’s user interface labels, messages, and prompts to be easily translated and adapted for international audiences.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of matching items based on the user's input.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting data through an HTML form. It is used as the key for the form data sent to the server, allowing server-side scripts to access the corresponding value.
   * Default value: ""
   */
  name?: string;
  /**
   * Indicates whether the dropdown menu is currently open (true) or closed (false).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about the expected input format or content.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Defines or retrieves the filter query used to determine which items are displayed. This query is utilized by the autoComplete operation to match and return relevant items from the data source. If the query is set to an empty string, no filtering is applied, and all available items from the data source are shown.
   * Default value: 
   */
  query?: string | number;
  /**
   * Specifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience.
   * Default value: containsIgnoreCase
   */
  queryMode?: InputQueryMode | string;
  /**
   * Specifies whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property controls the behavior of the input when a dataSource is provided:    If readonly is false, the element functions as a ComboBox, allowing users to either select an option from the dropdown or type their own input.  If readonly is true, the element acts as a DropDownList, restricting user input to only the items available in the dataSource.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content will display in a direction suitable for RTL locales, ensuring proper reading order and alignment for users of these languages.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies whether the items should be arranged in alphabetical order. If enabled, the items will be sorted from A to Z based on their names; if disabled, the original order will be preserved.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order to use when sort is enabled. Accepts either asc for ascending order or desc for descending order.
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the index of the currently selected item within a list or array. This value indicates which item is active or highlighted, typically starting from zero for the first item.
   * Default value: -1
   */
  selectedIndex?: number;
  /**
   * Specifies the currently selected value from the available options. This property indicates which option is active or chosen by the user within the component.
   * Default value: 
   */
  selectedValue?: string | number;
  /**
   * Specifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, to ensure consistency with the application's design guidelines.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the type of input expected by the field. Setting the input type controls the kind of data users can enter (e.g., text, number, email, password), impacts the on-screen keyboard on mobile devices, and enables input validation based on the chosen type.
   * Default value: ""
   */
  type?: string;
  /**
   * When set to true, this property ensures that the element is not focusable and cannot receive keyboard or programmatic focus.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves its current value, depending on how the function is used.
   * Default value: ""
   */
  value?: string;
}
/**
 Input specifies an input field where the user can enter data. Auto-complete options are displayed for easier input.
*/
export interface Input extends BaseElement, InputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value)
   *  item - The item that was clicked.
   *  label - The label of the item that was clicked.
   *  value - The value of the item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the currently open dropdown menu, hiding its options from view and reverting the interface to its default state.
   */
  close(): void;
  /**
   * Ensures that the currently selected item remains visible within the viewport by automatically scrolling the container as needed. This guarantees that users can always see the active item, even when navigating through a list with limited onscreen space.
   */
  ensureVisible(): void;
  /**
   * Expands the dropdown menu to display all available options for user selection.
   */
  open(): void;
  /**
   * Enhances user interaction by automatically focusing the input element and selecting its text. If the input is set to <b>readonly</b>, the element receives focus but its text is not selected, ensuring consistent behavior based on the input's state.
   */
  select(): void;
  /**
   * Selects an item from a data source based on its value. <br/><br/>If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. <br/><br/>If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. <br/><br/>This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.
   * @param {string | number} value. The item's value when the item is an object or string when the item is a string item.
   */
  selectItem(value: string | number): void;
  /**
   * Retrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.
   * @param {string | number} value. The item's value when the item is an object or string when the item is a string item.
   * @returns {any}
   */
  getItem(value: string | number): any;
  /**
   * Retrieves the currently selected item from the data source.  <br/>- If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.<br/>- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.<br/><br/>This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.
   * @param {string | number} value. The item's value when the item is an object or string when the item is a string item.
   * @returns {any}
   */
  getSelectedItem(value: string | number): any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-input"): Input;
        querySelector(selectors: "smart-input"): Input | null;
        querySelectorAll(selectors: "smart-input"): NodeListOf<Input>;
        getElementsByTagName(qualifiedName: "smart-input"): HTMLCollectionOf<Input>;
        getElementsByName(elementName: "smart-input"): NodeListOf<Input>;
    }
}

/**Specifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right. */
export declare type DropDownOpenPosition = 'auto' | 'top' | 'bottom';
/**Specifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience. */
export declare type InputQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
export interface KanbanProperties {
  /**
   * Controls whether users can reorder columns in a table or grid. When set to true and used in combination with allowDrag enabled, this property lets users rearrange columns by dragging and dropping their headers. For example, a user can click and hold the header of the first column, then drag it to a new position over another column header and drop it, changing the column order visually and functionally. This enhances the user experience by allowing customizable column layouts.
   * Default value: false
   */
  allowColumnReorder?: boolean;
  /**
   * Controls whether column editing is permitted. When this property is set to true, users can dynamically edit the column's header label by double-clicking on it. This allows for in-place renaming of the column header directly within the user interface. If set to false, the column header label will remain static and cannot be modified by users.
   * Default value: false
   */
  allowColumnEdit?: boolean;
  /**
   * Controls whether users can remove columns from the table. When set to true, a "Remove Column" option will appear in the column actions menu, allowing users to dynamically delete columns. Note: The 'columnActions' property must also be enabled (set to true) for this feature to be available.
   * Default value: false
   */
  allowColumnRemove?: boolean;
  /**
   * Controls whether users can hide columns in the data table. When set to true, this property allows users to dynamically hide individual columns using the column actions menu. Note: To enable this feature, the 'columnActions' property must also be set to true.
   * Default value: false
   */
  allowColumnHide?: boolean;
  /**
   * Controls whether the "Add Task" button is displayed at the top of each column. To hide the button for an individual column, set the addNewButton property to false within that column’s configuration object. If addNewButton is false, users will not see the "Add Task" button for that specific column.
   * Default value: false
   */
  addNewButton?: boolean;
  /**
   * Specifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column.
   * Default value: both
   */
  addNewButtonDisplayMode?: KanbanAddNewButtonDisplayMode | string;
  /**
   * Specifies whether a special column containing a button for adding new status columns to the Kanban board is shown. When enabled, this feature allows users to quickly create additional status columns directly within the Kanban interface. You can use this setting to display or hide the "Add Column" button column as needed.
   * Default value: false
   */
  addNewColumn?: boolean;
  /**
   * Specifies the width of the dynamically added "Add New" column. This property is effective only when the 'columnWidth' property is also set. It allows you to control the exact width (in pixels or other valid CSS units) of the new column that appears when adding columns dynamically to the table or grid.
   * Default value: null
   */
  addNewColumnWidth?: number | null;
  /**
   * Enables users to click and drag tasks within the interface, allowing them to easily reorder, move, or reorganize tasks by dragging and dropping them to the desired position.
   * Default value: true
   */
  allowDrag?: boolean;
  /**
   * Enables users to remove or discard tasks from the list or workflow, either by dragging and dropping or through a designated action, facilitating task management and organization.
   * Default value: true
   */
  allowDrop?: boolean;
  /**
   * Enables a visual placeholder to appear when dragging and dropping tasks. As you drag a task over another task, an empty space is dynamically created at the drop location, clearly indicating where the dragged task will be inserted. This improves usability by providing real-time visual feedback during task reordering.
   * Default value: false
   */
  allowDropPlaceholder?: boolean;
  /**
   * This property controls the color styling of Kanban columns and their associated tasks. When set to true, and if a Kanban column has its color property defined, that color will not only visually highlight the column header but will also be applied to all tasks within that column, as well as to the background or accent color of the edit dialog for tasks in that column. This creates a consistent and visually cohesive color scheme throughout each column and its related UI elements.
   * Default value: false
   */
  applyColumnColorToTasks?: boolean;
  /**
   * Controls whether the application automatically loads its state from the browser’s localStorage. This includes restoring information such as:- The list of tasks and their positions- The selected task and its state- Applied filters and sorting options- The state of collapsed columns- The values of the following task-related properties:  - taskActions  - taskComments  - taskDue  - taskPriority  - taskProgress  - taskTags  - taskUserIconWhen enabled, all of these details will be reloaded from localStorage on page refresh or reopening the application, ensuring a consistent user experience. When disabled, this information will not be loaded automatically, and the state will not be restored.
   * Default value: true
   */
  autoLoadState?: boolean;
  /**
   * Controls whether the application's current state is automatically saved to the browser's localStorage. When enabled, the following information is persistently stored and restored across sessions: - Task data, including their current positions, selected status, and any applied filters or sorting.- The collapsed or expanded state of columns.- Values for the following properties:  - taskActions (user actions related to tasks)  - taskComments (comments attached to tasks)  - taskDue (task due dates)  - taskPriority (priority level of tasks)  - taskProgress (progress tracking for tasks)  - taskTags (tags associated with each task)  - taskUserIcon (user avatars/icons linked to tasks)This ensures that user preferences and the state of the task interface are preserved, providing a seamless user experience even after closing or refreshing the browser. Disabling this feature will prevent any state information from being stored in localStorage, and all settings will be reset upon page reload.
   * Default value: false
   */
  autoSaveState?: boolean;
  /**
   * Dynamically adjusts the height of each column based on the total height of its tasks, ensuring all content is fully visible. This property is effective only when 'columnColorEntireSurface' is set to true, allowing the background color to extend appropriately over the column’s entire surface.
   * Default value: false
   */
  autoColumnHeight?: boolean;
  /**
   * Enables the card content to be expanded or collapsed, providing users with the ability to show or hide additional information within the card. This enhances the user interface by reducing visual clutter and allowing for more compact content presentation.
   * Default value: false
   */
  collapsible?: boolean;
  /**
   * Displays a color indicator in the column header whenever the column's color property is defined. The header visually reflects the assigned color, making it easier to identify and distinguish columns based on their color settings.
   * Default value: false
   */
  columnColors?: boolean;
  /**
   * Defines the width for each Kanban column. When this property is specified, all Kanban columns are rendered at the given width. If the total width of all columns exceeds the available space, a horizontal scrollbar will appear, allowing users to scroll and view all columns.
   * Default value: null
   */
  columnWidth?: number | null;
  /**
   * Renders a customizable background within the Kanban column, allowing for enhanced visual separation and improved column identification. Supports various background options such as color, image, or pattern to match your application's design requirements.
   * Default value: false
   */
  columnColorEntireSurface?: boolean;
  /**
   * Renders a column footer that displays a summary value, such as totals or averages, for the data in that column. This footer helps users quickly interpret aggregate information at the bottom of the column.
   * Default value: false
   */
  columnFooter?: boolean;
  /**
   * Provides detailed definitions and configuration options for each column’s properties, including attributes such as data type, default value, visibility, header label, and formatting options.
   * Default value: 
   */
  columns?: KanbanColumn[];
  /**
   * Controls whether the column actions icon is displayed, allowing users to access additional options or actions for each table column. When enabled, the icon becomes visible; when disabled, the icon is hidden from view.
   * Default value: false
   */
  columnActions?: boolean;
  /**
   * Specifies whether the number of tasks is shown in the headers of each column, allowing users to see the count of tasks directly within the column titles.
   * Default value: false
   */
  columnSummary?: boolean;
  /**
   * Specifies whether a custom template is applied to the column header. Accepts a value of type string (containing template markup), function (returning a template or markup), or an HTMLTemplateElement. Use this property to customize the appearance and content of the column header beyond the default rendering.
   * Default value: null
   */
  columnHeaderTemplate?: any;
  /**
   * Specifies how column editing is initiated within the interface.  - When set to ''header'', editing mode is activated by double-clicking directly on the column's header label.  - When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu.  - When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu.
   * Default value: headerAndMenu
   */
  columnEditMode?: KanbanColumnEditMode | string;
  /**
   * Sets or retrieves the ID of the currently active user. This value must match the 'id' of a user object within the 'users' property or array. The privileges and access rights available are determined based on the current user's identity. If no current user is specified, the element's permissions default to those defined by its own properties, rather than user-specific settings.
   * Default value: 
   */
  currentUser?: string | number;
  /**
   * Controls whether the default dialog for adding or removing tasks or comments is enabled or disabled. When set to true, the dialog will not appear, allowing for custom handling of these actions. When set to false, the standard dialog will be shown as usual. This property can be used to either retrieve the current setting (get) or define its behavior (set).
   * Default value: false
   */
  disableDialog?: boolean;
  /**
   * Sets or retrieves a customization function for the Kanban dialog component. This function allows you to modify the appearance and behavior of the dialog, or to replace it entirely with a custom implementation. When invoked, the Kanban component calls this function with five arguments:- 'dialog': The default dialog instance, typically a 'smart-window' object, which serves as the default modal dialog for tasks and comments.- 'taskOrComment': The data object representing either a Kanban task or a comment, depending on the context of the action.- 'editors': An object containing the input elements or editors used within the dialog for data entry or modification.- 'purpose': A string indicating the dialog’s intent, such as ''add'' for creating a new item or ''edit'' for modifying an existing one.- 'type': A string specifying the entity being processed, such as ''task'' for task-related dialogs or ''column'' for column-related dialogs.By providing a custom function, you can tailor the dialog’s UI, integrate additional logic, or substitute a completely different dialog component to meet your application's requirements.
   * Default value: null
   */
  dialogCustomizationFunction?: any;
  /**
   * Sets or retrieves the callback function that is executed when the dialog is rendered. This function is invoked by the Kanban component and receives six arguments: dialog, editors, labels, tabs, layout, and taskOrComment.- 'dialog': The 'smart-window' instance representing the Kanban dialog.- 'taskOrComment': An object representing either the current Kanban task or a comment, depending on the context in which the dialog is opened.- 'editors, labels, tabs, layout': Each is a JSON object where keys specify the element type (e.g., 'description', 'priority', 'notes'), and the values are their corresponding HTML elements within the dialog.This function allows developers to customize the dialog content or behavior dynamically based on the element types and the associated data when the dialog is rendered.
   * Default value: null
   */
  dialogRendered?: any;
  /**
   * Specifies the origin or source of the data to be displayed and managed on the Kanban board, such as an API endpoint, database, or local data array. This setting dictates which dataset will populate the Kanban columns and cards.
   * Default value: null
   */
  dataSource?: KanbanDataSource[];
  /**
   * Specifies how the Kanban board's default fields (e.g., title, status, assignee) correspond to the fields in your data source. Use this mapping only if your data source uses field names that differ from the Kanban's expected keywords. If the field names already match, this mapping is optional. Note that only certain default fields support custom mapping; not all default mappings can be overridden.
   * Default value: { checklist: 'checklist', color: 'color', comments: 'comments', dueDate: 'dueDate', id: 'id', priority: 'priority', progress: 'progress', startDate: 'startDate', status: 'status', swimlane: 'swimlane', tags: 'tags', text: 'text', userId: 'userId'. createdUserId: 'createdUserId', createdDate: 'createdDate', updatedUserId: 'updatedUserId', updatedDate: 'updatedDate' }
   */
  dataSourceMap?: { checklist: string; color: string; comments: string; dueDate: string; id: string; priority: string; progress: string; startDate: string; status: string; swimlane: string; tags: string; text: string; userId: string; createdUserId: string; upDatedUserId: string; createdDate: Date; upDatedDate: Date;};
  /**
   * Specifies the offset, in pixels, between the drag feedback element and the mouse cursor during task dragging operations. The value should be provided as an array: the first element sets the horizontal (x-axis) offset, and the second element sets the vertical (y-axis) offset, both relative to the cursor position. Alternatively, if set to 'auto', the system automatically calculates the offset based on the cursor’s position at the moment the drag action began. This allows for precise control over the visual positioning of the feedback element during drag-and-drop interactions.
   * Default value: auto
   */
  dragOffset?: boolean;
  /**
   * Controls whether tasks can be modified, including editing task details and assigning users to tasks. When enabled, users can update task information and manage task assignments; when disabled, tasks and their assigned users are read-only and cannot be changed programmatically or through the user interface.
   * Default value: false
   */
  editable?: boolean;
  /**
   * Specifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:- '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.- '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs.
   * Default value: doubleClick
   */
  editMode?: KanbanEditMode | string;
  /**
   * Sets or retrieves the format string used to display the "Due date" label, as well as the date format for both the "Start date" and "Due date" editor fields. This determines how dates are shown and entered in these UI components.
   * Default value: "d"
   */
  formatStringDate?: string;
  /**
   * Specifies or retrieves the format string used to display the timestamp on comments. This determines how the date and time of each comment are presented (e.g., "YYYY-MM-DD HH:mm:ss").
   * Default value: "MMM d, HH:mm"
   */
  formatStringTime?: string;
  /**
   * Sets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences.
   * Default value: none
   */
  headerPosition?: KanbanHeaderPosition | string;
  /**
   * Defines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset.
   * Default value: columns
   */
  hierarchy?: KanbanHierarchy | string;
  /**
   * Gets or sets the unlockKey property, a unique key used to unlock or activate the product. This key is required to enable full access to product features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current locale (language and regional settings) used by the component. This property determines the language in which messages are displayed, and works together with the messages property, which provides localized message strings for each supported locale. Adjusting the locale will change the displayed text to correspond with the selected language from the messages definitions.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Defines or retrieves an object containing the strings displayed in the widget, allowing for easy localization of text. This property works together with the locale property to support multiple languages and adapt the user interface based on the selected locale. Use this to provide translated labels, messages, and other widget text for internationalization.
   * Default value:    * { 'en': { 'addFilter': '+ Add filter', 'and': 'And', 'apply': 'Apply', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'Cancel', 'CONTAINS': 'contains', 'CONTAINS_CASE_SENSITIVE': 'contains (case sensitive)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'does not contain', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'does not contain (case sensitive)', 'EMPTY': 'empty', 'ENDS_WITH': 'ends with', 'ENDS_WITH_CASE_SENSITIVE': 'ends with (case sensitive)', 'EQUAL': 'equal', 'EQUAL_CASE_SENSITIVE': 'equal (case sensitive)', 'filter': 'Filter', 'filteredByMultiple': '%', 'removeComment': 'Remove comment', 'promptColumn': 'Are you sure you want to remove this column?'} }
   */
  messages?: any;
  /**
   * Callback function that allows you to customize how tasks are rendered within the Kanban board. This function is invoked by the Kanban component and receives two arguments: 1. The HTML element representing the task (taskHtmlElement).2. The data object associated with the task (taskData).You can use this callback to modify the appearance, add event listeners, or inject additional content into the task's HTML element based on its data.
   * Default value: null
   */
  onTaskRender?: any;
  /**
   * Callback function that enables customization of the filter items displayed in the dropdown. It receives a single argument: an array containing all the items available for filtering. Within the function, you can modify this array—such as by updating, removing, or reordering items—to control which options appear in the filter dropdown and how they are presented to the user. The modified array will determine the final set of filter options shown in the UI.
   * Default value: null
   */
  onFilterPrepare?: any;
  /**
   * A callback function that allows you to customize the items displayed in the sort dropdown menu. This function receives a single argument: an array containing all available sort options. You can modify this array—by removing, reordering, or updating items—to control which sorting options appear in the dropdown and how they are presented. The modified array will then be used to render the sort options to the user.
   * Default value: null
   */
  onSortPrepare?: any;
  /**
   * Callback function that allows customization of the column header rendering in the Kanban component. This function is invoked with three arguments: the column header's HTML element, the complete column data object, and the column's data field (a string representing the key associated with the column). Use this callback to modify or enhance the appearance and behavior of column headers as needed.
   * Default value: null
   */
  onColumnHeaderRender?: any;
  /**
   * Callback function that allows you to customize how the column footer is rendered in the Kanban component. This function is invoked with three arguments:1. The HTML element representing the column header2. The data object for the current column3. The field name associated with the column dataUse this callback to modify the footer's appearance or content based on the specific column's properties and data.
   * Default value: null
   */
  onColumnFooterRender?: any;
  /**
   * Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection entirely.
   * Default value: zeroOrOne
   */
  selectionMode?: KanbanSelectionMode | string;
  /**
   * Specifies whether the history of tasks is recorded and shown within the task dialog. When enabled, completed or previous tasks will be saved and displayed, allowing users to review their task activity directly in the dialog. When disabled, task history will not be retained or visible. This setting can be used to set or retrieve the current history display behavior.
   * Default value: false
   */
  storeHistory?: boolean;
  /**
   * Specifies the collection of task history items to be retrieved or updated when the storeHistory option is enabled. When storeHistory is true, this property determines which task history records are saved and accessed.
   * Default value: 20
   */
  storeHistoryItems?: number;
  /**
   * Sets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is typically used in languages such as Arabic or Hebrew. When enabled, the element layout and text flow will support RTL locales, ensuring proper display for right-to-left scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls the read-only state of the edit dialog. When enabled, the dialog displays task details but disables all editing capabilities for those fields. However, if the comments feature is active, users can still add comments within the dialog, even while other fields remain uneditable.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Provides a detailed configuration of swimlanes on the Kanban board, specifying how tasks are grouped horizontally by categories such as assignee, priority, or project. When swimlanes are enabled, sub-columns within each column are disabled to maintain a clear visual separation of items across swimlanes.
   * Default value: 
   */
  swimlanes?: KanbanSwimlane[];
  /**
   * Specifies or retrieves the zero-based index of the column where the swimlanes should begin. This determines the starting position for rendering swimlanes within a grid or table layout.
   * Default value: 0
   */
  swimlanesFrom?: number;
  /**
   * Specifies or retrieves the zero-based index of the column where the swimlanes should terminate. By default, swimlanes extend to the final column in the layout. Setting this property allows you to control at which column the swimlanes will stop, providing flexibility in customizing the swimlane display.
   * Default value: null
   */
  swimlanesTo?: number;
  /**
   * Specifies the permitted tags that can be used. When this property is set, only the listed tags will be allowed; if no tags are specified, all tags provided by the data source are accepted by default. This property can be used to restrict or expand the selection of allowed tags as needed.
   * Default value: 
   */
  tags?: any[];
  /**
   * Controls whether the task actions icon is displayed or hidden, allowing users to show or conceal the icon based on their preferences or application state.
   * Default value: false
   */
  taskActions?: boolean;
  /**
   * Defines a callback function that is invoked whenever the task actions menu is generated in the UI. This function receives the actions menu element as its parameter, enabling you to modify or extend the menu's content and behavior. For example, you can insert custom menu items, attach event listeners, or alter existing elements within the menu.'Example usage:''''js(list) => {  // Add a custom menu item  list.innerHTML = 'Custom Item';  // Attach a click handler to the menu  list.onclick = () => {     alert('Custom item clicked');  };}'''This callback provides full access to the task actions menu element, empowering you to tailor the menu to fit your specific requirements.
   * Default value: null
   */
  taskActionsRendered?: any;
  /**
   * Controls whether the task comments icon is displayed or hidden, allowing you to show or conceal the icon associated with task comments.
   * Default value: false
   */
  taskComments?: boolean;
  /**
   * Controls whether the task due date icon is shown or hidden in the interface. When enabled, the icon indicating a task's due date will be visible; when disabled, the icon will be hidden from view.
   * Default value: false
   */
  taskDue?: boolean;
  /**
   * Determines whether tasks are displayed across all levels of the column hierarchy or are restricted to only the leaf (lowest-level) columns. When enabled, tasks can be shown in any column within the hierarchy; when disabled, tasks are displayed exclusively in the leaf columns. This setting allows you to control the visibility of tasks based on the column hierarchy structure.
   * Default value: false
   */
  taskPosition?: KanbanTaskPosition | string;
  /**
   * Controls whether the task priority icon is displayed. The icon appears when a task is marked as either low or high priority. Disabling this option will hide the icon regardless of the task’s priority status.
   * Default value: true
   */
  taskPriority?: boolean;
  /**
   * Controls whether the task progress bar and the label displaying the number of completed sub-tasks are shown or hidden. When enabled, both visual elements will be visible; when disabled, they will be hidden from view.
   * Default value: false
   */
  taskProgress?: boolean;
  /**
   * Defines which custom fields are shown on a task card and how they appear. This property accepts an array of objects, where each object represents a custom field configuration with the following properties:- 'dataField' (string, required): Specifies the unique key or identifier for the custom field. This determines which value will be displayed on the card.- 'label' (string, required): The display name or title of the field as it appears on the card.- 'dataType' (string, required): Indicates the field's data type (e.g., 'string', 'number', 'date'). Used to determine how the field value should be formatted or displayed.- 'visible' (boolean, optional): If set to 'true', the field is displayed on the card; if 'false', it is hidden. Defaults to 'true' if omitted.- 'image' (boolean, optional): Set to 'true' if the field value is an image URL or Base64 string. This tells the UI to render the value as an image instead of text.- 'cover' (boolean, optional): When 'image' is 'true', setting 'cover' to 'true' will display the image as the card’s cover image (typically at the top of the card).'Example usage:''''json[  {    "dataField": "title",    "label": "Task Title",    "dataType": "string",    "visible": true  },  {    "dataField": "dueDate",    "label": "Due Date",    "dataType": "date"  },  {    "dataField": "avatar",    "label": "Assignee Photo",    "dataType": "string",    "image": true,    "visible": true  },  {    "dataField": "coverImage",    "label": "Project Cover",    "dataType": "string",    "image": true,    "cover": true  }]'''This configuration determines which fields are shown, how they're labeled, their format, and whether any field displays an image or acts as a cover image on the task card.
   * Default value: 
   */
  taskCustomFields?: any;
  /**
   * The background color of a task is determined by its individual color property. By default, this color is visually represented as an accent along the left border of the task element, rather than filling the entire background. This design helps differentiate tasks based on their assigned colors while maintaining a consistent overall appearance.
   * Default value: false
   */
  taskColorEntireSurface?: boolean;
  /**
   * Displays an input field within the task card, allowing users to dynamically add sub-tasks to the main task. To enable this feature, ensure that the 'taskSubTasks' property is set to a value other than 'none'. When 'taskSubTasks' is appropriately configured, users will see and be able to use the sub-task input interface.
   * Default value: true
   */
  taskSubTasksInput?: boolean;
  /**
   * Specifies how sub-tasks are rendered within a task card.  - '"none"' *(default)*: Sub-tasks are hidden on the task card and are only visible within the edit dialog.  - '"onePerRow"': All sub-tasks associated with the task are displayed directly on the task card, with each sub-task shown on its own row.  - '"onlyUnfinished"': Only sub-tasks that are not marked as completed are displayed on the task card; completed sub-tasks remain hidden.
   * Default value: none
   */
  taskSubTasks?: KanbanTaskSubTasks | string;
  /**
   * Controls whether task tags are shown or hidden in the user interface, allowing users to display or conceal tag information associated with each task.
   * Default value: true
   */
  taskTags?: boolean;
  /**
   * Controls whether the task user icon is displayed or hidden, allowing you to show or hide the icon representing the user associated with a task.
   * Default value: true
   */
  taskUserIcon?: boolean;
  /**
   * Specifies the template to use for rendering task text. This property accepts multiple value types:- A string starting with #, which references the id of a  element on the page. The contents of this element will be used as the template.- A string containing HTML or template markup, which will be parsed and applied directly to the task text.- A function, which receives the task text (or a template) as input and returns the modified text or template to be used.This property can be both set to define the template for future tasks, or retrieved to access the currently applied template.
   * Default value: null
   */
  textTemplate?: any;
  /**
   * Specifies the theme applied to the element. The theme controls the visual appearance, including colors, fonts, and overall style, ensuring a consistent look and feel across the component.
   * Default value: ""
   */
  theme?: string;
  /**
   * Controls the visibility of the priority list (as specified by the priority property) when the user clicks the priority icon. This option is only effective when users have editable privileges enabled, allowing them to modify the priority value. If set to true, the list will appear on icon click; if false, the list will remain hidden.
   * Default value: false
   */
  priorityList?: boolean;
  /**
   * Specifies the available priority levels that can be assigned to Kanban tasks. This array defines each priority as an object containing a label (for display purposes) and a corresponding value (for internal use).  Example: [{label: 'Low', value: 'low'}, {label: 'High', value: 'high'}]  Use this property to customize or extend the set of priority options in your Kanban board.
   * Default value: 
   */
  priority?: KanbanPriority[];
  /**
   * Controls the visibility of the user list—defined by the users property—when the user icon is clicked. This setting is only effective if editable privileges are enabled; otherwise, the user list will not be displayed regardless of this option.
   * Default value: false
   */
  userList?: boolean;
  /**
   * Specifies the users eligible to be assigned Kanban tasks, along with their associated attributes (such as name, role, and status) and permissions (such as create, edit, or delete task capabilities).
   * Default value: 
   */
  users?: KanbanUser[];
}
/**
 Kanban represents a kanban board that visually depicts work at various stages of a process using cards to represent tasks and columns to represent each stage of the process.
*/
export interface Kanban extends BaseElement, KanbanProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever any changes are made to the details, status, or properties of an existing task. It allows you to respond programmatically whenever a task is modified, ensuring your application can stay synchronized with the latest task information.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, task, value)
   *  oldValue - The old data of the task
   *  task - The HTML element of the task whose data has been changed
   *  value - The new data of the task
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the user closes the edit or prompt dialog, either by submitting changes or canceling the operation. It signals that the dialog has been dismissed and any associated actions, such as saving or discarding input, should be handled.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event fires just before the edit or prompt dialog is about to close, giving you an opportunity to intercept the closing action. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation or prompt the user before the dialog is dismissed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a new column is successfully added to the data structure or interface. It allows you to respond to the addition of a column, such as updating the user interface, modifying related data, or performing custom logic. The event provides details about the added column, including its name, index, and relevant metadata.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField, collapsed)
   *  label - The column label.
   *  dataField - The column data field.
   *  collapsed - The column's collapsed state.
   */
  onColumnAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column is deleted or removed from the data structure, table, or grid. It provides an opportunity to handle any necessary updates or clean-up tasks related to the removal of a column, such as updating the user interface, adjusting data bindings, or modifying underlying data sources. The event typically includes information about the column that was removed, allowing developers to respond dynamically to changes in the structure.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField, collapsed)
   *  label - The column label.
   *  dataField - The column data field.
   *  collapsed - The column's collapsed state.
   */
  onColumnRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user changes the position of a column, such as by dragging and dropping a column header to rearrange the column order in the table.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index, column)
   *  oldIndex - The column's old index.
   *  index - The column's new index.
   *  column - The column's data object with 'label', 'dataField' and 'collapsed' fields.
   */
  onColumnReorder?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the data in a column is updated. It occurs after any changes are made to the value(s) of a column, providing an opportunity to respond to or process the updated data. Listeners can use this event to execute custom logic, such as validating input, persisting changes, or updating related UI components.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value, column)
   *  oldValue - The column's old label.
   *  value - The column's new label.
   *  column - The column's data object with 'label', 'dataField' and 'collapsed' fields.
   */
  onColumnUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a column header within the data table. It can be used to initiate actions such as sorting the column, displaying a menu, or highlighting the selected column. The event typically provides information about which column was clicked, enabling you to implement custom logic based on the user's interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField, collapsed)
   *  label - The column label.
   *  dataField - The column data field.
   *  collapsed - The column's collapsed state.
   */
  onColumnClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user double-clicks on a column header, typically in a data grid or table. It can be used to initiate actions such as resizing the column, sorting data, or displaying additional options related to the selected column.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField, collapsed)
   *  label - The column label.
   *  dataField - The column data field.
   *  collapsed - The column's collapsed state.
   */
  onColumnDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column becomes visible—either when a user selects the "Show" option from the column's action menu, or when the Kanban component's `show` method is programmatically called to reveal the column.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField)
   *  label - The column label.
   *  dataField - The column data field.
   */
  onColumnShow?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column is hidden, either through the column's action menu or programmatically via the Kanban board’s `hide` method. Use this event to execute custom logic or UI updates whenever a column becomes invisible to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField)
   *  label - The column label.
   *  dataField - The column data field.
   */
  onColumnHide?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column is collapsed, either by selecting the "Collapse" option from the column's action menu or by programmatically invoking the Kanban board's `collapse` method.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField)
   *  label - The column label.
   *  dataField - The column data field.
   */
  onColumnCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column in the Kanban board is expanded, either by a user selecting the "expand" option from the column's action menu or programmatically through the Kanban component's `expand` method.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, dataField)
   *  label - The column label.
   *  dataField - The column data field.
   */
  onColumnExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user adds a comment to a task within the Kanban board. It activates immediately after the comment is successfully posted, allowing you to respond to or process new task comments in real-time.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, value)
   *  id - The task's id.
   *  value - The comment object. It has 'text: string, time: Date and userId:number' properties.
   */
  onCommentAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a comment is deleted from a task card within the Kanban board. It allows you to perform actions or updates in response to the removal of a comment from any Kanban task.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, value)
   *  id - The task's id.
   *  value - The comment object. It has 'text: string, time: Date and userId:number' properties.
   */
  onCommentRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever an existing comment on a Kanban Task is modified. It occurs after any changes are made to the comment’s content, such as edits or updates, allowing you to respond to or track comment modifications within the Kanban board.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, value)
   *  id - The task's id.
   *  value - The comment object. It has 'text: string, time: Date and userId:number' properties.
   */
  onCommentUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a task is dropped onto a target element within the DOM during a drag-and-drop operation. It allows developers to handle the completion of a drag action by responding to where the task is released. To prevent the default drop behavior—such as moving the element or initiating a browser action—you can call event.preventDefault() within the event handler. This enables you to implement custom logic for handling dropped tasks, such as updating data models, modifying the UI, or triggering other application-specific actions."
	* @param event. The custom event. Custom data event was created with: ev.detail(container, data, item, items, originalEvent, previousContainer, target)
   *  container - the Kanban the dragged task(s) is dropped to
   *  data - an object with additional drag details
   *  item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
   *  items - an array with all dragged tasks
   *  originalEvent - the original, browser, event that initiates the drag operation
   *  previousContainer - the Kanban the dragged item(s) is dragged from
   *  target - the element the dragged tasks are dropped to
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered while the user is actively dragging a task, such as during a drag-and-drop operation. It fires continuously as the task is being moved, enabling real-time updates or visual feedback in response to the task's position.
	* @param event. The custom event. Custom data event was created with: ev.detail(data, item, items, originalEvent)
   *  data - an object with additional drag details
   *  item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
   *  items - an array with all dragged tasks
   *  originalEvent - the original, browser, event that initiates the drag operation
   */
  onDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when the user initiates a drag action on one or more tasks. During the event, you can access information about the tasks being dragged. If you want to prevent the drag-and-drop operation from starting, you can call event.preventDefault() inside your event handler. This will cancel the dragging process and prevent any associated drag logic or UI changes from occurring.
	* @param event. The custom event. Custom data event was created with: ev.detail(container, data, item, items, originalEvent, previousContainer)
   *  container - the Kanban the dragged task(s) is dragged from
   *  data - an object with additional drag details
   *  item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
   *  items - an array with all dragged tasks
   *  originalEvent - the original, browser, event that initiates the drag operation
   *  previousContainer - the Kanban the dragged item(s) is dragged from
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered immediately after a user applies a filter to refine the displayed data. It indicates that the filter criteria have been set and the view has been updated accordingly. Developers can use this event to perform actions such as fetching new data, updating UI elements, or logging user interactions related to filtering.
	* @param event. The custom event.    */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the edit or prompt dialog window is displayed to the user. It signals that the user interface has opened a dialog for editing content or requesting input, allowing developers to execute custom logic in response to the dialog becoming visible.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before the edit or prompt dialog is displayed. You can intercept and prevent the dialog from opening by calling event.preventDefault() within your event handler. This allows you to provide your own custom dialog or take other actions instead of showing the default Kanban dialog. To stop the default Kanban dialog from appearing, simply call event.preventDefault() in the appropriate event handler function.
	* @param event. The custom event. Custom data event was created with: ev.detail(comment, purpose, task)
   *  comment - The comment that is about to be removed (if applicable).
   *  purpose - The purpose of the dialog to be opened - <em>'edit'</em> or <em>'prompt'</em>.
   *  task - The task that is about to be edited or removed (if applicable).
   */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after a sorting operation has been applied to the data set. It signifies that the data has been reordered based on the selected sorting criteria, and any relevant updates or UI refreshes can be performed in response to this change. The event may provide details about the sort field(s), direction (ascending or descending), and the affected data.
	* @param event. The custom event.    */
  onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before a new task is added to the Kanban board. Within the event handler, you can access and modify the task's initial data using event.detail.value (which contains the task details) and event.detail.id (which represents the task's unique identifier). This allows you to customize attributes—such as assigning a specific ID or updating field values—before the task is officially added. <br/><br/>**Example usage:**<br/><br/>```js<br/>kanban.onTaskBeforeAdd = (event) => {<br/>  const taskData = event.detail.value; // the task data before it is added<br/>  const currentId = event.detail.id;   // the proposed task ID<br/>  event.detail.id = 'BG12';            // assign a custom ID before adding<br/>  // Additional custom logic can be added here<br/>};<br/>```<br/><br/>**Note:** Make any necessary changes to `event.detail.value` or `event.detail.id` within this handler to control how tasks are created and represented on your Kanban board.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
   *  value - The task data that is added to the Kanban.
   *  id - The task data id.
   */
  onTaskBeforeAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event fires whenever a new task is added to the Kanban board. The associated event object contains detailed information about the new task, accessible via the event's detail property. <br/><br/>**Example usage:**<br/><br/>```javascript<br/>kanban.onTaskAdd = (event) => { <br/>    const taskData = event.detail.value; // Contains the properties of the newly added task<br/>    const taskId = event.detail.id;      // Unique identifier of the new task<br/>}<br/>```<br/><br/>**Description:**  <br/>Use this event to execute custom logic or update your application whenever a user creates a new task. The `event.detail.value` provides the complete task data object, while `event.detail.id` gives you the unique ID assigned to that task.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
   *  value - The task data that is added to the Kanban.
   *  id - The task data id.
   */
  onTaskAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a task is deleted or removed from the system. It occurs immediately after a task is successfully deleted, allowing you to perform any necessary cleanup, updates, or notifications in response to the removal action.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
   *  value - The task data that is removed from the Kanban.
   *  id - The task data id.
   */
  onTaskRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a task undergoes an update, such as changes to its status, description, assigned users, due date, or any other task-related property. It allows listeners to respond in real time to modifications made to existing tasks.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, id)
   *  value - The task data that is updated.
   *  oldValue - The update task's old data.
   *  id - The task data id.
   */
  onTaskUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when a user clicks on a task item, allowing you to execute custom logic in response to the interaction. It provides details about the clicked task, enabling you to access its data or update its state as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
   *  value - The task data.
   *  id - The task data id.
   */
  onTaskClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user double-clicks on a task element in the interface. It allows you to detect and respond to double-click actions performed specifically on individual tasks, enabling functionalities such as editing, viewing task details, or initiating other custom behaviors associated with a double-click interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
   *  value - The task data.
   *  id - The task data id.
   */
  onTaskDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Enables advanced filtering functionality for the data. For example, you can create a `Smart.FilterGroup` object to build complex filters. You might define a filter that checks if a 'Country' field contains the string 'Italy':<br/><br/>```javascript<br/>const filterGroup = new Smart.FilterGroup();<br/>const filterObject = filterGroup.createFilter('string', 'Italy', 'contains');<br/>filterGroup.addFilter('and', filterObject);<br/>kanban.addFilter([['Country', filterGroup]]);<br/>```<br/><br/>In this example, a filter group is created. A filter is then defined to match records where the 'Country' column contains the text 'Italy'. This filter is combined into the group with a logical 'and' operator and finally applied to the Kanban board using the `addFilter` method. This approach supports combining multiple filters with logical operators for dynamic and flexible data querying.
   * @param {any} filters. Filter information. Example: kanban.addFilter([['Country', filterGroup]]);. Each array item is a sub array with two items - 'dataField' and 'filterGroup' object. The 'dataField' is any valid data field from the data source bound to the Kanban like 'dueDate', 'startDate' or custom fields like 'Country'. Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
   * @param {string} operator?. Logical operator between the filters of different fields. Possible values are: 'and', 'or'. 
   */
  addFilter(filters: any, operator?: string): void;
  /**
   * Enables customizable sorting functionality for your kanban board data.  <br/>You can specify one or more fields to sort by, along with the desired sort order (e.g., 'ascending' or 'descending').  <br/>Example usage: kanban.addSort(['Country'], 'ascending');  <br/>This will sort the kanban items in ascending order based on the 'Country' field.  <br/>You can also pass multiple fields (e.g., kanban.addSort(['Country', 'Name'], 'descending')) to create multi-level sorting.
   * @param {[] | string} dataFields. The data field(s) to sort by
   * @param {[] | string} orderBy. The sort direction(s) to sort the data field(s) by. Possible values are: 'ascending' and 'descending'.
   */
  addSort(dataFields: [] | string, orderBy: [] | string): void;
  /**
   * Adds a new task to a specified Kanban column. If no column or task data is provided, an empty task with default values will be created and placed in the first column of the Kanban board.
   * @param {any} data?. An object containing the new task's data
   */
  addTask(data?: any): void;
  /**
   * Adds a new column to the Kanban board. If no column data is provided, a blank column with default settings will be created and added. If column data is specified, the column will be initialized with the provided properties.
   * @param {any} data?. An object containing the new column's data
   */
  addColumn(data?: any): void;
  /**
   * Initiates an edit operation, allowing modifications to be made to the current data or document. This operation typically marks the start of a transaction, enabling changes to be tracked and either saved (committed) or discarded (rolled back) upon completion.
   * @param {number | string | HTMLElement} task. The task's id or corresponding HTMLElement
   */
  beginEdit(task: number | string | HTMLElement): void;
  /**
   * Terminates the ongoing edit operation and reverts all unsaved changes, restoring the data to its previous state before the edit began.
   */
  cancelEdit(): void;
  /**
   * Closes any currently open header panel dropdown, ensuring that all active dropdown menus within the header section are hidden from view.
   */
  closePanel(): void;
  /**
   * Collapses a Kanban column, minimizing its contents and reducing its width to provide a more compact view of the board. This action hides the tasks within the column while keeping the column header visible, allowing users to focus on other sections of the Kanban board.
   * @param {number | string} column. The index or dataField of the column to collapse
   */
  collapse(column: number | string): void;
  /**
   * Removes any currently selected items or cards within the Kanban board, ensuring that no items remain selected. This action resets the selection state of the Kanban component.
   */
  clearSelection(): void;
  /**
   * Conceals a specific column within a Kanban board, making its contents and tasks temporarily invisible to users without deleting any data. This action helps declutter the board or focus attention on other columns. The hidden column can typically be shown again through board settings or controls.
   * @param {number | string} column. The index or dataField of the column to hide
   */
  hide(column: number | string): void;
  /**
   * Creates a duplicate of an existing task within the same column, preserving all task details such as title, description, assignees, and deadlines. The copied task will appear alongside the original in the same column, allowing for easy modification without affecting the original task.
   * @param {number | string | HTMLElement} task. The task's id or corresponding HTMLElement
   */
  copyTask(task: number | string | HTMLElement): void;
  /**
   * Completes the current editing session by finalizing any modifications made and persisting all changes to the underlying data source.
   */
  endEdit(): void;
  /**
   * Ensures that the specified task is brought into view within the scrollable container by automatically scrolling to its position. If the operation is successful, the method returns the corresponding HTML element representing the task.
   * @param {number | string | HTMLElement} task. The task's id or corresponding HTMLElement
   * @returns {HTMLElement}
   */
  ensureVisible(task: number | string | HTMLElement): HTMLElement;
  /**
   * Expands a Kanban board column to display all its contents, allowing users to view every card within the column in detail. This functionality makes it easier to manage, organize, and interact with all items in the selected column.
   * @param {number | string} column. The index or dataField of the column to expand
   */
  expand(column: number | string): void;
  /**
   * Expands every Kanban column to display all hidden or collapsed tasks, ensuring that all items within each column are fully visible.
   */
  expandAll(): void;
  /**
   * Exports all current data from the Kanban board, including task details, statuses, columns, and any associated metadata, into a structured format (such as JSON or CSV) for backup, sharing, or integration purposes.
   * @param {string} dataFormat. The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.
   * @param {string} fileName. The name of the file to export to
   * @param {Function} callback?. A callback function to pass the exported data to (if fileName is not provided)
   * @returns {any}
   */
  exportData(dataFormat: string, fileName: string, callback?: Function): any;
  /**
   * Retrieves detailed information about a specific column. The returned value is a JSON object containing the following fields:<br/><br/>- label: The display name of the column.<br/>- dataField: The key or property name associated with the column's data.<br/>- collapsed: A boolean indicating whether the column is currently collapsed.<br/>- collapsible: A boolean specifying if the column can be collapsed or expanded by the user.<br/>- allowRemove: A boolean that determines whether the column can be removed from the view.<br/>- editable: A boolean indicating if the column's cells are editable.<br/>- reorder: A boolean specifying whether the column can be reordered by the user.<br/>- orientation: Describes the orientation of the column, such as "horizontal" or "vertical".<br/><br/>Use this object to access or modify the configuration and behavior of the column in your application interface.
   * @param {string} dataField. The column's data field
   * @returns {any}
   */
  getColumn(dataField: string): any;
  /**
   * Retrieves detailed information about a specific task. The returned value is a JSON object containing the following fields:<br/><br/>- checklist: An array of checklist items associated with the task   <br/>- id: The unique identifier for the task  <br/>- color: A string representing the task label or color code  <br/>- comments: An array of comment objects related to the task  <br/>- history: An array that records the chronological history of changes and activity for the task  <br/>- dueDate: The date and time when the task is due  <br/>- startDate: The date and time when the task is scheduled to start  <br/>- priority: The task's priority level (e.g., low, medium, high)  <br/>- progress: The percentage of task completion  <br/>- status: The current status of the task (e.g., open, in progress, completed)  <br/>- swimlane: The swimlane or category the task is assigned to  <br/>- tags: An array of tags or keywords associated with the task  <br/>- text: The task title or main summary  <br/>- description: Detailed information about the task  <br/>- userId: The identifier of the user currently assigned to the task  <br/>- createdUserId: The identifier of the user who created the task  <br/>- createdDate: The date and time when the task was created  <br/>- updatedUserId: The identifier of the user who last updated the task  <br/>- updatedDate: The date and time when the task was last updated  <br/><br/>This structured JSON object enables developers to access all relevant attributes for rendering and managing tasks within an application.
   * @param {number} id. The task's id
   * @returns {any}
   */
  getTask(id: number): any;
  /**
   * Retrieves the IDs of all selected tasks.  <br/>The returned value is an array, where each element represents the unique 'id' associated with a selected task. If no tasks are selected, the array will be empty.
   * @param {number} id. The task's id
   * @returns {any}
   */
  getSelectedTasks(id: number): any;
  /**
   * Retrieves the current state of the Kanban board as a comprehensive object. The returned object contains detailed information about the board's configuration and user interactions, structured as follows:<br/><br/>```typescript<br/>{<br/>  collapsed: {<br/>    // Tracks which Kanban columns or swimlanes are currently collapsed. <br/>    // Keys represent the column or swimlane identifiers, and values indicate their collapsed state.<br/>    [key: string]: boolean;<br/>  },<br/>  dataSource: [<br/>    // An array of data objects representing all Kanban tasks/cards currently on the board.<br/>    // Each item typically includes task details such as id, status, title, description, etc.<br/>  ],<br/>  filtering: {<br/>    filters: [<br/>      // Array of filter objects currently applied.<br/>      // Each filter describes criteria such as field, comparison operator, and value.<br/>    ],<br/>    operator: string; <br/>    // Logical operator ("AND"/"OR") used to combine multiple filters.<br/>  },<br/>  selection: {<br/>    selected: [<br/>      // Array of IDs or references of currently selected tasks/cards.<br/>    ],<br/>    selectionStart?: number | string; <br/>    // Optional: Identifies the first item in a selection range (useful for range selection with shift-click).<br/>    selectionInColumn: string;<br/>    // ID or name of the column where selection started or is active.<br/>    swimlane: string; <br/>    // ID or name of the currently active swimlane (if swimlanes are in use).<br/>  },<br/>  sorting: {<br/>    dataFields: [<br/>      // Array of fields currently used to sort the Kanban data (e.g., ["priority", "dueDate"]).<br/>    ],<br/>    dataTypes: [<br/>      // Corresponding data types for each sorting field (e.g., ["number", "date"]).<br/>    ],<br/>    orderBy: [<br/>      // Sort directions corresponding to each field ("asc" or "desc").<br/>    ]<br/>  },<br/>  tabs: [<br/>    // List of tab states or identifiers, reflecting open and active views within the Kanban UI.<br/>  ],<br/>  visibility: {<br/>    taskActions: boolean;     // Whether task action buttons are visible.<br/>    taskComments: boolean;    // Whether task comments are shown.<br/>    taskDue: boolean;         // Whether due date indicators are visible.<br/>    taskPriority: boolean;    // Whether task priority display is enabled.<br/>    taskProgress: boolean;    // Whether task progress bars or indicators are shown.<br/>    taskTags: boolean;        // Whether tags associated with tasks are visible.<br/>    taskUserIcon: boolean;    // Whether user or assignee icons are visible on tasks.<br/>  }<br/>}<br/>```<br/><br/>This state object enables you to persist, inspect, or restore the Kanban board’s full interactive state, including data, UI settings, filters, sortings, selections, and visibility toggles. It is suitable for use cases such as saving the user’s workspace, synchronizing state across sessions, or debugging Kanban board behavior.
   * @returns {any}
   */
  getState(): any;
  /**
   * Retrieves and initializes the current state of the Kanban board, including all columns, tasks, and their respective statuses, to ensure the user sees the latest project information.
   * @param  state?. An object returned by one of the methods getState or saveState. If not passed, gets saved state from the browser's localStorage.
   */
  loadState(state?: { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }): void;
  /**
   * Moves a specified task from its current column to a target column within the workflow or board, updating its status and position accordingly.
   * @param {number | string | HTMLElement} task. The task's id or corresponding HTMLElement
   * @param {string} newStatus. The new status of the task (its new column's dataField)
   */
  moveTask(task: number | string | HTMLElement, newStatus: string): void;
  /**
   * Displays the "Customize Tasks" header panel as a dropdown menu, allowing users to access and modify task customization options.
   */
  openCustomizePanel(): void;
  /**
   * Displays the "Filter" panel by opening its dropdown menu in the header section, allowing users to access and apply filtering options.
   */
  openFilterPanel(): void;
  /**
   * Displays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the displayed data.
   */
  openSortPanel(): void;
  /**
   * Removes all applied filters, displaying the complete, unfiltered dataset.
   */
  removeFilter(): void;
  /**
   * Disables any previously applied sorting, returning the data to its original, unsorted order.
   */
  removeSort(): void;
  /**
   * Deletes a specified task from the task list, permanently removing it from the data store.
   * @param {number | string | HTMLElement} task. The task's id or corresponding HTMLElement
   * @param {boolean} prompt?. Whether or not to prompt the user before removing the task
   */
  removeTask(task: number | string | HTMLElement, prompt?: boolean): void;
  /**
   * Removes a specified column from the data set or table, effectively deleting all data contained within that column and updating the structure to reflect its absence. This operation is irreversible and affects any processes or queries that rely on the removed column.
   * @param {string} dataField. The column's data field
   */
  removeColumn(dataField: string): void;
  /**
   * Persists the current state of the Kanban board—including all columns, cards, and their order—to the browser's localStorage. This ensures that the user's board layout and content are retained and automatically restored when the page is reloaded or the browser is reopened.
   */
  saveState(): void;
  /**
   * Displays a single Kanban column, including the column title and a list of tasks or cards assigned to that column. Ideal for use in Kanban boards to visually organize tasks by status or category within a workflow.
   * @param {number | string} column. The index or dataField of the column to show
   */
  show(column: number | string): void;
  /**
   * Displays a comprehensive list of all Kanban columns, including their names, order, and relevant metadata. This allows users or applications to view the complete structure of the Kanban board and manage workflow stages effectively.
   */
  showAllColumns(): void;
  /**
   * Selects a specific task from a list or collection, allowing the application to retrieve or highlight the chosen task's details for further actions such as viewing, editing, or managing it.
   * @param {number | string} task. The task's id.
   */
  selectTask(task: number | string): void;
  /**
   * Deselects a previously selected task, removing its active or highlighted status within the user interface.
   * @param {number | string} task. The task's id.
   */
  unselectTask(task: number | string): void;
  /**
   * Updates the details of an existing task, such as its title, description, status, due date, or assigned user.
   * @param {number | string | HTMLElement} task. The task's id or corresponding HTMLElement
   * @param {{}} newData. The new data to visualize in the task.
   */
  updateTask(task: number | string | HTMLElement, newData: {}): void;
  /**
   * Updates the value of a specified column in a database table. This operation allows you to modify existing data by providing the column name and the new value to be set. Optionally, you can specify conditions to ensure that only rows matching certain criteria are updated.
   * @param {string} dataField. The new column's data field
   * @param {{}} newData. The new data to visualize in the column.
   */
  updateColumn(dataField: string, newData: {}): void;
}

export interface KanbanColumn {
  /**
   * Sets or gets whether the column's button for adding tasks is visible. Works in conjunction with the Kanban property of the same name.
   * Default value: true
   */
  addNewButton?: boolean;
  /**
   * Sets or gets whether the column can be removed from the column menu.
   * Default value: true
   */
  allowRemove?: boolean;
  /**
   * Sets or gets whether the column is collapsed.
   * Default value: false
   */
  collapsed?: boolean;
  /**
   * Sets or gets whether the column is collapsible. Works in conjunction with the Kanban property of the same name.
   * Default value: true
   */
  collapsible?: boolean;
  /**
   * Sets or gets the column's sub-columns. Sub-columns has the same properties as top-level columns.
   * Default value: null
   */
  columns?: { addNewButton: boolean, collapsed: string, collapsible: string, columns: [], dataField: string, label: string, orientation: string, selected: string }[];
  /**
   * Sets or gets the column's data source bound field. Corresponds to the status field in the data source.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the text displayed in the column's header.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets whether a column is editable.
   * Default value: true
   */
  editable?: boolean;
  /**
   * Sets or gets whether a column is visible.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Sets or gets whether a column can be reordered.
   * Default value: true
   */
  reorder?: boolean;
  /**
   * Sets or gets whether the tasks in the column flow vertically or horizontally.
   * Default value: vertical
   */
  orientation?: KanbanColumnOrientation | string;
  /**
   * Sets or gets whether the column is selected. Only applicable to sub-columns when hierarchy is 'tabs'.
   * Default value: false
   */
  selected?: boolean;
  /**
   * Determines whether a column header has a template. You can pass 'string', 'function' or HTMLTemplateElement as a value.
   * Default value: null
   */
  headerTemplate?: any;
  /**
   * Sets the Kanban column width. When this property is set, the kanban column width is set and a horizontal scrollbar may appear.
   * Default value: null
   */
  width?: number | null;
}

export interface KanbanDataSource {
  /**
   * The task's unique ID.
   * Default value: 
   */
  id?: string | number;
  /**
   * A list of sub-tasks.
   * Default value: null
   */
  checklist?: { completed: boolean, text: string }[];
  /**
   * A color used to highlight the task's card visually.
   * Default value: "null"
   */
  color?: string;
  /**
   * Comments about a task.
   * Default value: null
   */
  comments?: { text: string, time: Date, userId: string | number }[];
  /**
   * The task's due date.
   * Default value: null
   */
  dueDate?: Date;
  /**
   * The task's priority.
   * Default value: "normal"
   */
  priority?: string;
  /**
   * The task's progress in percentages - a number from 0 to 100.
   * Default value: null
   */
  progress?: number;
  /**
   * The task's start date.
   * Default value: null
   */
  startDate?: Date;
  /**
   * The task's status. Has to correspond to the dataField of a column or sub-column from the columns property/array.
   * Default value: ""
   */
  status?: string;
  /**
   * The swimlane of the task. Has to correspond to the dataField of a swimlane from the swimlanes property/array, if it is defined.
   * Default value: "null"
   */
  swimlane?: string;
  /**
   * A comma-separated list of tags.
   * Default value: ""
   */
  tags?: string;
  /**
   * The text of the task.
   * Default value: ""
   */
  text?: string;
  /**
   * The ID of the user assigned to the task. Has to correspond to the id of an item from the users property/array.
   * Default value: null
   */
  userId?: string | number;
}

export interface KanbanSwimlane {
  /**
   * The swimlane's color.
   * Default value: "null"
   */
  color?: string;
  /**
   * Sets or gets the swimlane's data source bound field. Corresponds to the swimlane field in the data source.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the text displayed in the swimlane.
   * Default value: ""
   */
  label?: string;
}

export interface KanbanPriority {
  /**
   * The priority label displayed.
   * Default value: ""
   */
  label?: string;
  /**
   * The priority value.
   * Default value: ""
   */
  value?: string;
}

export interface KanbanUser {
  /**
   * Sets whether the user has a privilege to add or copy tasks.
   * Default value: true
   */
  allowAdd?: boolean;
  /**
   * Sets whether the user has a privilege to add comments to tasks.
   * Default value: true
   */
  allowComment?: boolean;
  /**
   * Sets whether the user has a privilege to drag tasks. Works along with the property allowDrag.
   * Default value: true
   */
  allowDrag?: boolean;
  /**
   * Sets whether the user has a privilege to edit tasks. Works along with the property editable.
   * Default value: true
   */
  allowEdit?: boolean;
  /**
   * Sets whether the user has a privilege to remove tasks.
   * Default value: true
   */
  allowRemove?: boolean;
  /**
   * The user's unique ID. Corresponds to the userId field in the data source and the property currentUser.
   * Default value: null
   */
  id?: string | number;
  /**
   * A url to an image representing the user.
   * Default value: ""
   */
  image?: string;
  /**
   * The user's name as it will appear in the Users list and "Assigned to" editor.
   * Default value: ""
   */
  name?: string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-kanban"): Kanban;
        querySelector(selectors: "smart-kanban"): Kanban | null;
        querySelectorAll(selectors: "smart-kanban"): NodeListOf<Kanban>;
        getElementsByTagName(qualifiedName: "smart-kanban"): HTMLCollectionOf<Kanban>;
        getElementsByName(elementName: "smart-kanban"): NodeListOf<Kanban>;
    }
}

/**Specifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column. */
export declare type KanbanAddNewButtonDisplayMode = 'top' | 'bottom' | 'both';
/**Sets or gets whether the tasks in the column flow vertically or horizontally. */
export declare type KanbanColumnOrientation = 'vertical' | 'horizontal';
/**Specifies how column editing is initiated within the interface.  <br/>- When set to ''header'', editing mode is activated by double-clicking directly on the column's header label.  <br/>- When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu.  <br/>- When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu. */
export declare type KanbanColumnEditMode = 'header' | 'menu' | 'headerAndMenu';
/**Specifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:<br/><br/>- '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.<br/>- '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.<br/><br/>By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs. */
export declare type KanbanEditMode = 'doubleClick' | 'singleClick';
/**Sets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences. */
export declare type KanbanHeaderPosition = 'none' | 'top' | 'bottom';
/**Defines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset. */
export declare type KanbanHierarchy = 'columns' | 'tabs';
/**Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection entirely. */
export declare type KanbanSelectionMode = 'zeroOrOne' | 'zeroOrManyExtended';
/**Determines whether tasks are displayed across all levels of the column hierarchy or are restricted to only the leaf (lowest-level) columns. When enabled, tasks can be shown in any column within the hierarchy; when disabled, tasks are displayed exclusively in the leaf columns. This setting allows you to control the visibility of tasks based on the column hierarchy structure. */
export declare type KanbanTaskPosition = 'all' | 'leaf';
/**Specifies how sub-tasks are rendered within a task card.  <br/>- '"none"' *(default)*: Sub-tasks are hidden on the task card and are only visible within the edit dialog.  <br/>- '"onePerRow"': All sub-tasks associated with the task are displayed directly on the task card, with each sub-task shown on its own row.  <br/>- '"onlyUnfinished"': Only sub-tasks that are not marked as completed are displayed on the task card; completed sub-tasks remain hidden. */
export declare type KanbanTaskSubTasks = 'none' | 'onePerRow' | 'onlyUnfinished';
export interface LayoutProperties {
  /**
   * Sets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and no animation effects will be applied. Use this property to enable, disable, or specify different animation behaviors.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the list of selectable options that will appear within the context menu, allowing users to interact with or perform actions based on their selection.
   * Default value: delete
   */
  contextMenuDataSource?: any;
  /**
   * Determines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to actions. When disabled, the element becomes non-interactive and does not respond to user input or events.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the data source associated with the Layout component. This property allows you to define the input data that the Layout will use to render its content, or to access the current data source being used.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Sets or retrieves the unlockKey, a unique code or token required to grant access to and activate the product’s full functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property is typically used together with the messages property to display localized content based on the selected language. Setting this value changes which language messages are used, while getting it returns the currently active language code (e.g., "en", "fr", "es").
   * Default value: "en"
   */
  locale?: string;
  /**
   * Defines an object containing string values that represent messages or labels corresponding to various password strength states (e.g., "weak", "medium", "strong"). This is typically used to provide user feedback on password strength during password creation or validation processes.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "invalidIndex": "' method accepts an index of type number.",
   *     "invalidNode": "' method accepts an object or an array of objects as it's second parameter.",
   *     "invalidSettings": "' method accepts a string or an object as it's second parameter.",
   *     "delete": "Delete",
   *     "noId": ": requires an id in order to save/load a state."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the main orientation of the Layout component. This orientation determines how child Splitters within the Layout are arranged—either horizontally or vertically—by default. All Splitters inside the Layout will inherit this orientation unless a specific orientation is defined for them individually in the dataSource configuration.
   * Default value: vertical
   */
  orientation?: Orientation | string;
  /**
   * If the element is set to "readonly", users cannot modify its value, but they can still highlight and copy its contents. However, they cannot type, edit, or otherwise change the value within the field. The field remains focusable and selectable, but direct user input is disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Indicates whether the splitting process occurs in real-time (live) or is performed as a pre-processed operation before use.
   * Default value: false
   */
  allowLiveSplit?: boolean;
  /**
   * Sets or retrieves a value that determines whether the element's layout direction is configured for right-to-left (RTL) languages, such as Arabic or Hebrew, enabling proper alignment and rendering for locales that use RTL text.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies which item is currently selected from a list or collection. This property typically holds the identifier, index, or value of the selected item, allowing the application to reference or display the chosen option.
   * Default value: null
   */
  selectedIndex?: any;
  /**
   * Specifies the theme to be applied. The theme controls the overall appearance and style of the element, including colors, fonts, and visual layout, ensuring a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using tab navigation or other focus-related interactions.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Layout splits your content into resizable sections.
*/
export interface Layout extends BaseElement, LayoutProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered immediately after the user has finished resizing an element or window. It signals that the resizing action is complete, allowing you to perform any necessary updates or actions in response to the new size.
	* @param event. The custom event.    */
  onResize: ((ev: Event) => any) | null;
  /**
   * This event is triggered whenever there is a change in the Layout's state. Examples include actions such as adding a new item, removing an existing item, or any other modification that alters the structure or arrangement of the Layout.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, type)
   *  item - The Splitter item that was the target of a change.
   *  type - A description of the operation that has cause the change.
   */
  onStateChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user changes the current selection, such as by highlighting different text or choosing a new item from a list. It occurs immediately after the selection has been modified, allowing you to respond to changes in user input or interface focus.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldSelectedIndex, selectedIndex)
   *  oldSelectedIndex - The Splitter item that was previously selected.
   *  selectedIndex - The Splitter item that is currently selected.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered right before the context menu is closed. Within the event handler, you can call event.preventDefault() to cancel the closing operation, allowing you to execute custom logic or prevent the menu from closing based on certain conditions.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the context menu is closed by the user, either by selecting an option or clicking outside the menu.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired just before the context menu appears, typically when a user right-clicks on an element. By calling event.preventDefault() within the event handler, you can prevent the default context menu from opening, allowing you to implement a custom context menu or handle the action in a different way.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the context menu (typically accessed by right-clicking or a similar user action) is opened by the user.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user selects and clicks an option from the context menu. It occurs after the user has opened the context menu—typically via right-click or a long press—and chosen a specific menu item. The event provides details about the selected option, enabling you to handle custom actions or respond dynamically based on the user's selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, label, value)
   *  target - The Splitter item that was the target of the context menu opening.
   *  item - The Context menu item that was clicked.
   *  label - The label of the context menu that was clicked.
   *  value - The value of the context menu that was clicked.
   */
  onMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Returns the Layout item located at the specified index within the collection. The index is passed as a parameter, and the function retrieves the corresponding Layout item from the list or array. This allows you to access a particular Layout item by its position in the sequence.
   * @param {number | string} index. The index of an item.
   */
  getItem(index: number | string): void;
  /**
   * Automatically updates and redraws the layout to reflect any recent changes, ensuring all components are properly arranged and displayed according to the latest data or configuration.
   */
  refresh(): void;
  /**
   * Inserts a new item element into the Layout component, positioning it within the existing structure according to the component's layout configuration. This action updates the Layout to include the new item as part of its content, ensuring proper rendering and alignment with other elements.
   * @param {any} type. The index of an item to be removed or an instance of Smart.SplitterItem.
   * @param {string | undefined} position?. A string that represents the position where the new item will be created.
   */
  createLayoutItem(type: any, position?: string | undefined): void;
  /**
   * Transfers all child elements or nodes from a specified source item to a designated target item, effectively moving the entire group of children so they become nested under the target item instead of the source.
   * @param {any} oldItem. The source item that will have it's content removed.
   * @param {any} newItem. The host item that will have it's content replaced.
   */
  moveChildren(oldItem: any, newItem: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-layout"): Layout;
        querySelector(selectors: "smart-layout"): Layout | null;
        querySelectorAll(selectors: "smart-layout"): NodeListOf<Layout>;
        getElementsByTagName(qualifiedName: "smart-layout"): HTMLCollectionOf<Layout>;
        getElementsByName(elementName: "smart-layout"): NodeListOf<Layout>;
    }
}

export interface LayoutGroupProperties {
  /**
   * Determines whether the element is interactive or not. When enabled, the element can be interacted with by users (e.g., clicked, edited, or focused). When disabled, the element becomes non-interactive and typically appears visually subdued, preventing any user actions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the modifier properties applied to the Layout item, allowing you to customize its appearance and behavior (such as alignment, padding, margin, or transformations). Use this property to define or access configuration options that modify how the Layout item is displayed or interacts within its container.
   * Default value: resize,drag,close
   */
  modifiers?: any;
  /**
   * Specifies the minimum allowable size for the item, ensuring that it cannot be resized smaller than this value. This property helps maintain layout integrity by preventing the item from shrinking below the defined threshold.
   * Default value: 50
   */
  min?: number;
  /**
   * Specifies the text or name displayed as the label for the item, which is typically used to identify or describe the item in user interfaces.
   * Default value: "Group"
   */
  label?: string;
  /**
   * Specifies the alignment or direction in which the group’s elements are arranged (e.g., horizontal, vertical, or custom orientation). This property controls how child components are positioned within the group.
   * Default value: vertical
   */
  orientation?: LayoutGroupOrientation | string;
  /**
   * Specifies the overall dimensions of the item, such as its width, height, or volume, which can be used for layout, display, or calculation purposes.
   * Default value: null
   */
  size?: any;
  /**
   * If set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard or other assistive technologies.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 LayoutGroup represents a group of layout items inside the Layout.
*/
export interface LayoutGroup extends BaseElement, LayoutGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-layout-group"): LayoutGroup;
        querySelector(selectors: "smart-layout-group"): LayoutGroup | null;
        querySelectorAll(selectors: "smart-layout-group"): NodeListOf<LayoutGroup>;
        getElementsByTagName(qualifiedName: "smart-layout-group"): HTMLCollectionOf<LayoutGroup>;
        getElementsByName(elementName: "smart-layout-group"): NodeListOf<LayoutGroup>;
    }
}

/**Specifies the alignment or direction in which the group’s elements are arranged (e.g., horizontal, vertical, or custom orientation). This property controls how child components are positioned within the group. */
export declare type LayoutGroupOrientation = 'horizontal' | 'vertical';
export interface LayoutItemProperties {
  /**
   * Specifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, users cannot interact with or modify the element.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the modifiers applied to the Layout item, allowing you to customize its appearance or behavior, such as spacing, alignment, or other layout-related properties.
   * Default value: resize,drag,close
   */
  modifiers?: any;
  /**
   * Specifies the minimum allowed size for the item. This value sets the smallest dimensions (such as width or height) that the item can be resized or displayed at within its container.
   * Default value: 50
   */
  min?: number;
  /**
   * Specifies the text or caption displayed as the item's label. This value is used to identify or describe the item in the user interface.
   * Default value: "Item"
   */
  label?: string;
  /**
   * Specifies the dimensions of the item, such as width, height, or overall scale, to control how large or small the item appears within the interface.
   * Default value: null
   */
  size?: any;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Layout item represents a single content section inside the Layout.
*/
export interface LayoutItem extends BaseElement, LayoutItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-layout-item"): LayoutItem;
        querySelector(selectors: "smart-layout-item"): LayoutItem | null;
        querySelectorAll(selectors: "smart-layout-item"): NodeListOf<LayoutItem>;
        getElementsByTagName(qualifiedName: "smart-layout-item"): HTMLCollectionOf<LayoutItem>;
        getElementsByName(elementName: "smart-layout-item"): NodeListOf<LayoutItem>;
    }
}

export interface LedProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled, and elements will display or update instantly without any transition effects. For other values, the specified animation mode will determine how visual changes are animated.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Gets the current check state or sets it to a specified value, typically used for checkbox, radio button, or similar UI elements. The check state indicates whether the element is checked, unchecked, or (if supported) in an indeterminate state.
   * Default value: false
   */
  checked?: boolean;
  /**
   * Specifies the conditions under which the element will trigger a click event, allowing you to control when and how user interactions or programmatic actions cause the click event to be fired.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Controls the LED's power state by enabling (turning on) or disabling (turning off) the LED.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the content to be displayed when the state is set to 'false'.
   * Default value: """"
   */
  falseContent?: string;
  /**
   * Defines a custom template that determines the LED's appearance or behavior when it is in the "off" or false state.
   * Default value: null
   */
  falseTemplate?: any;
  /**
   * Configures the LED to display an indeterminate state, typically represented by a blinking or animated pattern to indicate ongoing activity or a process with an unknown completion time. This is useful for scenarios where the system cannot determine or communicate a specific status or progress value.
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Defines the content to be displayed when the component is in a 'null' or empty state, such as when no data is available or the value is undefined.
   * Default value: """"
   */
  indeterminateContent?: string;
  /**
   * Defines a custom template to visually represent the LED component when it is in an indeterminate state, allowing you to specify the appearance or behavior of the LED during this undefined or transitional state.
   * Default value: null
   */
  indeterminateTemplate?: any;
  /**
   * Sets or retrieves the unlockKey, a unique identifier or code required to unlock access to the product. This property allows you to manage product access by specifying or obtaining the key needed for unlocking restricted features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for localization purposes. This property works together with the messages property to display interface text and messages in the selected language. When you set this property, the corresponding localized messages from messages are used throughout the application.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized messages—such as applying custom templates, injecting dynamic content, or adjusting formatting—before they are delivered to the user interface.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized strings used by the widget's user interface, such as labels, messages, and tooltips. This property works in tandem with the locale property to enable support for multiple languages, allowing developers to customize text displayed to users based on their selected language or region.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute is used to identify form elements when submitting HTML forms, allowing their values to be sent to the server as key-value pairs. This attribute is essential for collecting user input in form processing.
   * Default value: """"
   */
  name?: string;
  /**
   * If the widget is set to read-only, users will be unable to interact with the element or modify its contents. All input and editing functionalities will be disabled, ensuring that the information displayed remains unchanged by the user.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves the value that determines whether the element’s content is aligned to support languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. This property ensures proper text direction and alignment for locales requiring RTL formatting.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the geometric shape or appearance of the LED component, such as circle, square, rectangle, or custom shapes. This setting determines how the LED will be visually rendered in the user interface.
   * Default value: round
   */
  shape?: LedShape | string;
  /**
   * Specifies the theme to be applied, which controls the visual appearance—such as colors, fonts, and styles—of the element. The selected theme ensures a consistent and cohesive look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the content that will be displayed or rendered when the associated state is evaluated as 'true'.
   * Default value: """"
   */
  trueContent?: string;
  /**
   * Specifies a custom template that defines the behavior or appearance of the LED when its state is set to "true" (on). Use this template to customize how the LED should be displayed or controlled when activated.
   * Default value: null
   */
  trueTemplate?: any;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or scripting methods such as element.focus().
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves its current value, depending on whether an argument is provided. This is commonly used for form elements such as input, select, or textarea to programmatically update or access their contents.
   * Default value: """"
   */
  value?: string;
}
/**
 LET Toggle button with Checked boolean value.
*/
export interface Led extends BaseElement, LedProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the widget’s checked state changes, that is, when the user selects (checks) or deselects (unchecks) the widget. It allows you to execute custom logic in response to the widget being either checked or unchecked.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value of the element before it was changed.
   *  value - The new value of the element.
   */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-led"): Led;
        querySelector(selectors: "smart-led"): Led | null;
        querySelectorAll(selectors: "smart-led"): NodeListOf<Led>;
        getElementsByTagName(qualifiedName: "smart-led"): HTMLCollectionOf<Led>;
        getElementsByName(elementName: "smart-led"): NodeListOf<Led>;
    }
}

/**Specifies the geometric shape or appearance of the LED component, such as circle, square, rectangle, or custom shapes. This setting determines how the LED will be visually rendered in the user interface. */
export declare type LedShape = 'round' | 'square';
export interface ListBoxProperties {
  /**
   * Controls whether users can drag items out of the List box. When enabled, users can drag and move list items, except for those marked as disabled. Disabled items remain fixed and cannot be dragged or moved by the user.
   * Default value: false
   */
  allowDrag?: boolean;
  /**
   * Controls whether users can drag and drop list items into the target ListBox. When enabled, items can be dropped into the ListBox; when disabled, dropping items is not permitted.
   * Default value: false
   */
  allowDrop?: boolean;
  /**
   * Specifies how many times the row colors alternate, controlling the pattern and frequency of color changes applied to rows in a table or list. This helps customize the visual distinction between adjacent rows.
   * Default value: 0
   */
  alternationCount?: number;
  /**
   * Specifies the last row index up to which alternating row colors are applied. Rows after this index will no longer display color alternations.
   * Default value: 0
   */
  alternationEnd?: number;
  /**
   * Specifies the initial row index from which color alternation begins, determining where the alternating row colors pattern is applied in the table.
   * Default value: 0
   */
  alternationStart?: number;
  /**
   * Specifies the animation mode for the element. You can retrieve the current animation mode or set a new one by assigning a value to this property. When set to 'none', all animations are disabled. To enable different animation effects, assign one of the supported animation mode values other than 'none'.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls whether automatic sorting is performed. When autoSort is set to true, the element will automatically re-sort itself whenever its data changes. If sorted is enabled but autoSort is set to false, the element will only be sorted once (typically on initialization) and will not automatically update its order in response to subsequent data changes.
   * Default value: true
   */
  autoSort?: boolean;
  /**
   * Specifies the source of data to populate the ListBox. The dataSource can be provided in several formats:- An array of strings or numbers, where each item represents a single ListBox entry.- An array of objects, where each object defines the properties of a ListBox item, such as label (the displayed text), value (the underlying value), and group (used for grouping items).- A callback function that returns an array of items in either of the formats described above.Using these options, you can flexibly supply data from static arrays or dynamically generate the list items as needed.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the list box is active and can be interacted with by the user. When enabled, users can select items from the list box; when disabled, the list box appears grayed out and does not respond to user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Defines or retrieves the displayMember property, which specifies the name of the object property to be shown in the UI for each item in the data source. The specified name should match a key present in the objects within the collection assigned to the 'dataSource' property. This allows you to control which property value is displayed for each item when rendering data-bound lists or dropdowns.
   * Default value: """"
   */
  displayMember?: string;
  /**
   * A callback function that allows you to customize the HTML markup displayed as visual feedback while an item is being dragged. This function receives a single parameter representing the item currently being dragged, enabling you to tailor the appearance of the drag feedback element based on its properties or content.
   * Default value: null
   */
  dragFeedbackFormatFunction?: any;
  /**
   * Specifies the position offset of the drag feedback element relative to the mouse cursor during a drag operation. This property takes an array with two values: the first value sets the horizontal offset (in pixels), and the second value sets the vertical offset (in pixels). These offsets determine how far the feedback element is displayed from the cursor while dragging an item.
   * Default value: 10,10
   */
  dragOffset?: number[];
  /**
   * Specifies the actions or behavior that are triggered when an item is released or dropped during a drag-and-drop operation. This may include updating the interface, modifying data structures, or invoking specific callback functions associated with the drop event.
   * Default value: move
   */
  dropAction?: ListBoxDropAction | string;
  /**
   * Specifies whether list items are editable. When this option is enabled, users can modify items in the list by either double-clicking on a non-disabled item or by selecting the item and pressing the F2 key. Disabled items remain uneditable regardless of this setting.
   * Default value: false
   */
  editable?: boolean;
  /**
   * Specifies whether users can filter the items in the list. When enabled, a filter input field appears at the top of the list box, allowing users to quickly search and narrow down the displayed items based on their input. If disabled, the entire list is shown without any filtering option.
   * Default value: false
   */
  filterable?: boolean;
  /**
   * A callback function that must return a condition (typically a boolean value) used to determine whether each item should be included when filtering the list. This function is called for every item and is intended for use when the filterMode is set to 'custom', allowing you to define your own filtering logic beyond the default behavior.
   * Default value: null
   */
  filterCallback?: any;
  /**
   * Specifies which filtering mode is applied to the data set, controlling how items are included or excluded based on defined criteria.
   * Default value: containsIgnoreCase
   */
  filterMode?: FilterMode | string;
  /**
   * Specifies the placeholder text that appears inside the filter input field, guiding users on what to enter or search for.
   * Default value: ""
   */
  filterInputPlaceholder?: string;
  /**
   * When enabled, this option organizes the items into groups based on the first letter of each item's value. Note: This setting is incompatible with data sources that are already grouped; it can only be used when the dataSource does not contain predefined groupings.
   * Default value: false
   */
  grouped?: boolean;
  /**
   * Specifies the property name within the dataSource object that will be used to group the items in the ListBox. If this property is not set, the component defaults to using the 'group' attribute from each data item for grouping purposes. The groupMember property is particularly useful when loading data from a JSON file as the dataSource and you need to group items based on a specific custom property, rather than the default 'group' property. This allows for flexible and customized grouping behavior based on the structure of your data.
   * Default value: null
   */
  groupMember?: string | null;
  /**
   * Controls whether the horizontal scroll bar is displayed, allowing users to scroll content left and right when it overflows the container.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * The 'IncrementalSearchDelay' property defines the amount of time, in milliseconds, that the system waits after the user stops typing before clearing the previous search query. This delay timer begins as soon as the user ceases input. Only after the specified delay has fully elapsed will the previous search query be reset, allowing a new search query to be initiated. This property helps control the responsiveness of incremental search operations, preventing premature query resets while the user is still entering input.
   * Default value: 700
   */
  incrementalSearchDelay?: number;
  /**
   * Sets or retrieves the current incremental search mode. By default, incremental search is enabled, allowing users to begin searching by typing while the ListBox is focused. This mode enables real-time filtering or selection as the user types, making it easier to quickly find items in the list.
   * Default value: startsWithIgnoreCase
   */
  incrementalSearchMode?: SearchMode | string;
  /**
   * Specifies the height, in pixels, for each item within the list box when virtualization is enabled. This property is required for correct rendering and performance optimizations during virtualization. It ensures each list item is allocated sufficient space and enables efficient scrolling and item measurement.
   * Default value: null
   */
  itemHeight?: number;
  /**
   * Specifies the algorithm used to calculate the width of each item. This setting determines how the item width is measured, such as using fixed values, automatic sizing based on content, or percentage-based calculations.
   * Default value: auto
   */
  itemMeasureMode?: ListItemMeasureMode | string;
  /**
   * A read-only property that retrieves an array containing all the items currently present in the ListBox. Each element in the array represents a distinct item from the ListBox, preserving their order as displayed.
   * Default value: 
   */
  items?: ListBoxItem[];
  /**
   * A string specifying either the ID of an HTMLTemplateElement present in the DOM or a direct reference to the template element itself. This property allows you to define a custom template for rendering individual list items, enabling flexible and reusable item layouts within the component.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Specifies the text to be displayed alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the component. This text provides contextual feedback to users during loading operations.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the placement of the loading indicator within the user interface, such as at the top, center, or bottom of the container or screen. This property controls where the loading spinner or progress bar will appear while content is being loaded.
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Gets or sets the unlockKey property, a unique code required to unlock access to the product. This key is used for product activation or to enable restricted features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the language code to be used for message localization. This property determines which set of messages from the messages object will be displayed, enabling support for multiple languages and dynamic language switching in your application.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized messages are structured or displayed before they are rendered to the user.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized strings used throughout the widget’s user interface. This allows you to customize all display text and messages according to different languages or regions. Typically used together with the language property to support internationalization and provide translations for various UI elements.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "overridingProperties": "' property is used by default.",
   *     "invalidIndex": "' method accepts an index of type number or an Array of numbers.",
   *     "indexOutOfBound": "' method.",
   *     "invalidItem": "' method accepts an object or an array of objects as it's second parameter.",
   *     "invalidSettings": "' method accepts a string or an object as it's second parameter."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute identifies the element when submitting an HTML form, allowing its value to be included in the form data sent to the server. This is essential for processing form fields on the server-side.
   * Default value: """"
   */
  name?: string;
  /**
   * Specifies the placeholder text that will be displayed in the List box when there are no available items to show. This text provides guidance or information to the user when the List box is empty.
   * Default value: "No Items"
   */
  placeholder?: string;
  /**
   * Sets or retrieves the readonly property of the element. When the readonly property is set to true, the element becomes non-editable—users can view its content but cannot modify it. This property is commonly used with input and textarea elements to prevent user interaction while still displaying the field’s value.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, enabling proper display and support for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Gets or sets the selected indexes. The selected indexes property is an array containing the numerical indexes of the items that are currently selected. Assigning an array of indexes will update the selection to match those items; retrieving this property returns the array of currently selected item indexes.
   * Default value: 
   */
  selectedIndexes?: number[];
  /**
   * Sets or retrieves the selected indexes. The selected values correspond to the values of the items that are currently selected. When setting, provide an array of indexes or values to specify which items should be marked as selected; when getting, this returns the values associated with the selected items.
   * Default value: 
   */
  selectedValues?: string[];
  /**
   * Specifies the maximum number of items that a user can select, based on the current selection mode (e.g., single, multiple, or none). This setting controls and restricts selection behavior within the interface.
   * Default value: oneOrManyExtended
   */
  selectionMode?: ListSelectionMode | string;
  /**
   * Specifies the user interaction event that triggers the selection of a listbox item: either when the item is initially pressed (‘press’) or when the user releases the press (‘release’). Choosing ‘press’ selects the item on mouse down or touch start, while ‘release’ selects it on mouse up or touch end. This setting controls how and when the user’s selection action is registered.
   * Default value: release
   */
  selectionChangeAction?: ListBoxSelectionChangeAction | string;
  /**
   * Specifies whether the items should be automatically arranged in alphabetical order. If set to true, the items will be displayed from A to Z (or according to the selected locale’s alphabetical rules); if false, items will retain their original order.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order for the data. Accepts either 'asc' for ascending order (from lowest to highest) or 'desc' for descending order (from highest to lowest).
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the visual theme applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and other stylistic properties that define the element's look and feel. Choosing a theme ensures consistency and enhances the user interface design across the application.
   * Default value: ""
   */
  theme?: string;
  /**
   * Scrolls the list box so that the item at the specified index appears as the first (topmost) visible item, ensuring it is fully in view at the top of the list.
   * Default value: -1
   */
  topVisibleIndex?: number;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning users will not be able to select the element using the keyboard (e.g., via the Tab key) or by programmatic focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets or sets the current selection value(s). This property returns an array of objects, where each object represents a selected option with the following structure: { label: string, value: any }. The 'label' is the display text shown to users, and 'value' holds the corresponding data for that option. Return type: { label: string, value: any }[].
   * Default value: null
   */
  value?: any;
  /**
   * Determines which property of each item object should be used as the item's value. The specified property is stored as the value in the item object. Similar to groupMember, the valueMember property is particularly useful when binding data from a JSON file as a dataSource for the ListBox, allowing you to designate a specific field to serve as the value for each item. This is helpful when your data objects contain multiple properties, and you want to control exactly which one will represent the underlying value of each ListBox entry.
   * Default value: """"
   */
  valueMember?: string;
  /**
   * Controls whether the vertical scroll bar is displayed, allowing users to scroll through content vertically when it overflows the container. This setting can be used to show, hide, or automatically display the scroll bar based on the content size.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
  /**
   * Specifies whether virtualization is enabled for the ListBox. When virtualization is enabled, the ListBox renders only the visible items in the UI, instead of generating UI elements for every item in the collection. This significantly improves performance and reduces memory usage, especially when working with large data sets (e.g., displaying one million items). Virtualization ensures smooth scrolling and responsiveness, even with a vast number of items in the ListBox.
   * Default value: false
   */
  virtualized?: boolean;
}
/**
 ListBox allows the user to select one or more items from a list.
*/
export interface ListBox extends BaseElement, ListBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered after the listbox has successfully finished binding its data source. At this point, all data items have been loaded and rendered in the listbox, making it ready for user interaction or further programmatic manipulation. Use this event to perform actions that depend on the completion of data binding, such as customizing item appearance, enabling controls, or initiating additional data processing.
	* @param event. The custom event.    */
  onBindingComplete?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user changes the current selection, such as when they select a different item from a list, dropdown, or any selectable element. It allows developers to respond dynamically to user input by detecting and handling selection changes in real time.
	* @param event. The custom event. Custom data event was created with: ev.detail(addedItems, disabled, index, label, removedItems, selected, value)
   *  addedItems - An array of List items that have been selected.
   *  disabled - A flag indicating whether or not the item that caused the change event is disabled.
   *  index - The index of the List item that triggered the event.
   *  label - The label of the List item that triggered the event.
   *  removedItems - An array of List items that have been unselected before the event was fired.
   *  selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
   *  value - The value of the List item that triggered the event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired when a user drops a draggable item onto a valid drop target. Within the event handler, you can call event.preventDefault() to cancel the default drop behavior, which allows you to define custom handling logic for the dropped item. This gives you full control over what should happen when an item is released on the target element.
	* @param event. The custom event. Custom data event was created with: ev.detail(container, data, item, originalEvent, previousContainer, target)
   *  container - The List box that an item was dragged <strong>to.</strong>
   *  data - An object that contains data about the dragging operation like start position, start time, etc.
   *  item - The List item that was dragged.
   *  originalEvent - That original event that was fired.
   *  previousContainer - The List box that an item was dragged <strong>from</strong>.
   *  target - The event target.
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a user starts dragging a list item, providing an opportunity to handle custom logic—such as updating the UI or managing the item's state—during the drag operation.
	* @param event. The custom event. Custom data event was created with: ev.detail(data, item, originalEvent)
   *  data - An object that contains data about the dragging operation like start position, start time, etc.
   *  item - The List item that is being dragged. This is the item that has been clicked when initiating the drag operation
   *  originalEvent - The original event that initiates the dragging operation.
   */
  onDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user initiates and performs a drag action on an item. Within the event handler, you can call event.preventDefault() to cancel or prevent the default drag behavior. This allows you to override the standard dragging operation and implement custom drag-and-drop functionality as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(container, data, item, originalEvent, previousContainer, target)
   *  container - The List box that an item was dragged <strong>to.</strong>
   *  data - An object that contains data about the dragging oepration like start position, start time, etc.
   *  item - The List item that was dragged.
   *  originalEvent - That original event that was fired.
   *  previousContainer - The List box that an item was dragged <strong>from</strong>.
   *  target - The event target.
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a user clicks on an item within the component. It provides detailed information about the clicked item, such as its identifier and relevant data, enabling you to implement custom logic in response to user interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(disabled, index, label, selected, value)
   *  disabled - Indicates whether the List item that was clicked is disabled or not.
   *  index - Indicates the index of the List item that was clicked.
   *  label - The label of the List item that was clicked.
   *  selected - Indicates whether the List item that was clicked is selected or not.
   *  value - The value of the List item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after an item has been modified and the changes have been saved. It allows you to respond to updates or modifications made to an item's data.
	* @param event. The custom event. Custom data event was created with: ev.detail(selected, disabled, index, label, value)
   *  selected - Indicates whether the List item is selected or not.
   *  disabled - Indicates whether the List item is disabled or not.
   *  index - The index of the List item that was edited.
   *  label - The label of the edited List item.
   *  value - The value of the List item that was edited.
   */
  onItemLabelChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the bottom of the list, indicating that the end of the available items has been reached. It can be used to load additional data or perform actions when no more items are visible in the current list view.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the very top of the list, indicating that the first item in the list is visible or has been reached. It can be used to implement features such as loading previous items, displaying a refresh indicator, or updating the UI when the user navigates to the start of the list.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a leftward swipe gesture within the boundaries of the listBox component. It can be used to initiate actions such as revealing additional options, deleting a list item, or any other behavior that should occur in response to a left swipe inside the listBox.
	* @param event. The custom event.    */
  onSwipeleft?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a rightward swipe gesture within the boundaries of the listBox component. It detects intentional swipe actions to the right, allowing developers to respond to user navigation or interaction within the listBox. The event will only fire if the swipe is initiated and completed inside the listBox area.
	* @param event. The custom event.    */
  onSwiperight?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new ListItem element to the end of the existing items within the specified container element, maintaining the original order of all previously added items.
   * @param {Node} node. A ListItem element that should be added to the rest of the items as the last item.
   * @returns {Node}
   */
  appendChild<T extends Node>(node: Node): T;
  /**
   * Adds one or more new items to the collection. This operation updates the data set by appending the provided item(s), making them available for future retrieval or processing.
   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
   */
  add(item: any): void;
  /**
   * Clears all items from the listBox, effectively removing every entry and leaving the listBox empty. This operation does not delete the listBox itself, only its contents.
   */
  clearItems(): void;
  /**
   * Deselects all currently selected items, ensuring that no items remain selected within the list or interface.
   */
  clearSelection(): void;
  /**
   * Binds the latest data from the data source to the component, ensuring the user interface reflects current information. This method can be called to refresh or update the displayed data whenever the data source changes.
   */
  dataBind(): void;
  /**
   * Scrolls the container so that the target item is brought into view, ensuring it is fully visible to the user within the viewport or scrollable area.
   * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
   */
  ensureVisible(item: HTMLElement | string): void;
  /**
   * Returns a specific item instance from the listBox based on the provided index or selection criteria. The returned object represents the selected item and includes its associated properties and methods for further manipulation.
   * @param {string} value. The value of an item from the listBox.
   * @returns {HTMLElement}
   */
  getItem(value: string): HTMLElement;
  /**
   * Returns an array containing all items currently present in the ListBox component. Each item in the array represents an individual entry within the ListBox, typically as an object with relevant properties such as value, label, and any other associated data. This allows developers to access, display, or manipulate the full set of ListBox options programmatically.
   * @returns {{label: string, value: string}[]}
   */
  getItems(): {label: string, value: string}[];
  /**
   * Inserts a new item into the collection at the specified index, shifting existing items at and after that position one place to the right. The index determines the position in the array or list where the new item will be placed.
   * @param {number} index. The index where the item must be inserted.
   * @param {any} items. A single item/definition or an array of List Items/definitions of list items to be inserted. The format of the item definitions is the same as the format of the <strong>dataSource</strong> property.
   */
  insert(index: number, items: any): void;
  /**
   * Inserts a new ListItem element into the list, placing it immediately before a specified existing ListItem. This ensures the new item appears in the correct sequence relative to the given reference item.
   * @param {Node} node. A ListItem element that should be added before the referenceItem in the list.
   * @param {Node | null} referenceNode. A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.
   * @returns {Node}
   */
  insertBefore<T extends Node>(node: Node, referenceNode: Node | null): T;
  /**
   * Removes the item located at the specified index from the collection or array. The operation shifts all subsequent items one position to the left, effectively reducing the total number of items by one. The specified index must be within the valid range; otherwise, an error may occur.
   * @param {number} index. The index of the removed item.
   */
  removeAt(index: number): void;
  /**
   * Removes a specific ListItem from the collection of items contained within the given element. This operation updates the element by deleting the specified ListItem from its current list of child items.
   * @param {Node} node. A ListItem element that is part of the list of items inside the element.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Selects a specific item from the ListBox component by programmatically highlighting or activating it, allowing for interaction as if the user had manually chosen the item from the list.
   * @param {string | number | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list.
   */
  select(item: string | number | HTMLElement): void;
  /**
   * Removes the selection from a specified item in the listBox component, ensuring that the item is no longer highlighted or considered selected by the application.
   * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
   */
  unselect(item: string | HTMLElement): void;
  /**
   * Updates the properties or content of a specific item within the listBox control. This operation identifies the targeted item based on its index or unique identifier and applies the specified changes, ensuring the listBox reflects the latest data or state.
   * @param {number} index. The index of the item that is going to be updated.
   * @param {any} details. An object that contains the properties and their new values for the List item that should be updated. For example, label, value or selected attributes.
   */
  update(index: number, details: any): void;
}

export interface ListBoxItem {
  /**
   * The label of the list item.
   * Default value: 
   */
  label?: string | null;
  /**
   * The value of the list item.
   * Default value: 
   */
  value?: string | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-list-box"): ListBox;
        querySelector(selectors: "smart-list-box"): ListBox | null;
        querySelectorAll(selectors: "smart-list-box"): NodeListOf<ListBox>;
        getElementsByTagName(qualifiedName: "smart-list-box"): HTMLCollectionOf<ListBox>;
        getElementsByName(elementName: "smart-list-box"): NodeListOf<ListBox>;
    }
}

/**Specifies the actions or behavior that are triggered when an item is released or dropped during a drag-and-drop operation. This may include updating the interface, modifying data structures, or invoking specific callback functions associated with the drop event. */
export declare type ListBoxDropAction = 'copy' | 'move' | 'none';
/**Specifies the user interaction event that triggers the selection of a listbox item: either when the item is initially pressed (‘press’) or when the user releases the press (‘release’). Choosing ‘press’ selects the item on mouse down or touch start, while ‘release’ selects it on mouse up or touch end. This setting controls how and when the user’s selection action is registered. */
export declare type ListBoxSelectionChangeAction = 'press' | 'release';
export interface ListItemProperties {
  /**
   * 
   * Default value: -1
   */
  alternationIndex?: number;
  /**
   * 
   * Default value: ""
   */
  color?: string;
  /**
   * 
   * Default value: plain
   */
  displayMode?: ListItemDisplayMode | string;
  /**
   * 
   * Default value: false
   */
  grouped?: boolean;
  /**
   * 
   * Default value: false
   */
  selected?: boolean;
  /**
   * 
   * Default value: ""
   */
  value?: string;
  /**
   * 
   * Default value: ""
   */
  label?: string;
  /**
   * 
   * Default value: ""
   */
  details?: string;
  /**
   * 
   * Default value: ""
   */
  group?: string;
  /**
   * 
   * Default value: false
   */
  hidden: boolean;
  /**
   * 
   * Default value: false
   */
  readonly?: boolean;
}
/**
 Defines a list item for ListBox, ComboBox, DropDownList.
*/
export interface ListItem extends BaseElement, ListItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-list-item"): ListItem;
        querySelector(selectors: "smart-list-item"): ListItem | null;
        querySelectorAll(selectors: "smart-list-item"): NodeListOf<ListItem>;
        getElementsByTagName(qualifiedName: "smart-list-item"): HTMLCollectionOf<ListItem>;
        getElementsByName(elementName: "smart-list-item"): NodeListOf<ListItem>;
    }
}


export declare type ListItemDisplayMode = 'plain' | 'checkBox' | 'radioButton';
export interface ListItemsGroupProperties {
  /**
   * 
   * Default value: ""
   */
  label?: string;
}
/**
 Defines a group of list items.
*/
export interface ListItemsGroup extends BaseElement, ListItemsGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-list-items-group"): ListItemsGroup;
        querySelector(selectors: "smart-list-items-group"): ListItemsGroup | null;
        querySelectorAll(selectors: "smart-list-items-group"): NodeListOf<ListItemsGroup>;
        getElementsByTagName(qualifiedName: "smart-list-items-group"): HTMLCollectionOf<ListItemsGroup>;
        getElementsByName(elementName: "smart-list-items-group"): NodeListOf<ListItemsGroup>;
    }
}

export interface ListMenuProperties {
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are completely disabled; otherwise, the selected animation mode is enabled. Use this property to control whether animations play or are suppressed within the component.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls whether the element automatically receives keyboard focus when a user hovers the mouse pointer over it. If enabled, the element will become the active focus target on hover, allowing for keyboard interactions without requiring a click. If disabled, hovering does not change the focus state.
   * Default value: false
   */
  autoFocusOnMouseenter?: boolean;
  /**
   * Enables top-level items within the ListMenu to support checkable states, allowing users to select or deselect these menu items with a checkbox or similar indicator. This feature provides enhanced interactivity by letting users clearly mark individual ListMenu options as checked or unchecked.
   * Default value: false
   */
  checkable?: boolean;
  /**
   * Controls whether checkboxes and radio buttons can appear in the top-level groups of the ListMenu. This property applies exclusively to the ListMenu component itself, and does not affect subitems within smart-menu-item or smart-menu-items-group elements. For related functionality, refer to the checkable property.
   * Default value: false
   */
  checkboxes?: boolean;
  /**
   * Configures the selection behavior (check mode) for top-level ListMenu items (groups). This determines whether menu items can be selected individually, allow multiple selections, or behave like radio buttons, affecting how users interact with the menu.
   * Default value: checkbox
   */
  checkMode?: MenuCheckMode | string;
  /**
   * Specifies the data source to be displayed in the ListMenu component. The data source must be an array of objects, where each object represents a menu item with the following properties:      label: string – The text displayed for the menu item.        value: any – The unique value or identifier associated with the menu item.        shortcut: string (optional) – A keyboard shortcut or hint displayed alongside the menu item.        items: array (optional) – An array of submenu item objects, each following the same structure, allowing for the creation of nested or hierarchical menus.  This structure enables the ListMenu to render both simple and multi-level menus, providing flexibility in how menu options and their shortcuts are presented to users.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is interactive or not. When enabled, users can interact with the element. When disabled, the element becomes non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Controls the visibility of the loading indicator. By default, the loading indicator is hidden; setting this option to true will display the indicator, while setting it to false will hide it.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Specifies which field in the data source should be used as the label for each item. This determines the text that will be displayed to represent the item in the user interface.
   * Default value: "label"
   */
  displayMember?: string;
  /**
   * Specifies a custom outer container to which the minimized dropdown will be appended. By default, the dropdown is appended to the ListMenu container. You can set this property to either an HTML element or a string representing the ID of an HTML element.
   * Default value: null
   */
  dropDownAppendTo?: string | HTMLElement;
  /**
   * If this property is enabled, opening the element's minimized dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the page content. This overlay visually separates the dropdown from other elements on the page and can also intercept clicks to prevent interactions with content outside the dropdown until it is closed.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies or retrieves the direction in which the ListMenu's minimized dropdown expands when opened, such as upward or downward. This property determines the alignment and positioning of the dropdown relative to the ListMenu component.
   * Default value: auto
   */
  dropDownPosition?: MenuDropDownPosition | string;
  /**
   * Controls whether users can scroll through menu items that overflow the visible area by using the mouse wheel. When enabled, using the mouse wheel will navigate vertically through menu items not currently visible within the menu’s viewport. When disabled, mouse wheel scrolling will have no effect on overflowing menu content.
   * Default value: false
   */
  enableMouseWheelAction?: boolean;
  /**
   * Controls the activation of menu item filtering functionality. When enabled, a filter input field appears at the top of the menu component, allowing users to search and display only the menu items that match the entered query. Note that filtering is limited to items currently rendered or visible in the menu's current view; items not present in the view will not be affected by the filter.
   * Default value: false
   */
  filterable?: boolean;
  /**
   * Specifies the placeholder text displayed inside the filter input field, guiding users on the expected input or action.
   * Default value: ""
   */
  filterInputPlaceholder?: string;
  /**
   * Specifies which property of the MenuItem will be used as the filtering criterion. By default, the filtering is performed using the label property of each MenuItem. You can change this setting to use other properties instead, such as value if you want to filter based on the MenuItem's value property, or textContent if you prefer to filter using the text content within the MenuItem. Additionally, you may specify any other property name to customize the filtering behavior according to your application's requirements.
   * Default value: "label"
   */
  filterMember?: string;
  /**
   * Specifies the method used to filter or process data, such as selecting items based on certain criteria, applying search terms, or excluding specific values. This setting controls how data is displayed or retrieved according to the selected filtering mode.
   * Default value: containsIgnoreCase
   */
  filterMode?: FilterMode | string;
  /**
   * If enabled, the items will be organized into groups based on the first letter of each item's name. Within each group, the items will be sorted alphabetically.
   * Default value: false
   */
  grouped?: boolean;
  /**
   * Specifies the name of the field within the data source that contains the collection of subitems associated with each item group. This field is used to retrieve and bind the subitems for display or processing within the application.
   * Default value: "items"
   */
  itemsMember?: string;
  /**
   * Specifies the text to display alongside the loading indicator when the loader is visible and positioned at the top or bottom of the container. This text provides context or feedback to users during loading operations.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the exact location where the loading indicator will appear within the parent element. This controls whether the loading indicator is displayed at the top, center, bottom, or another defined position inside the element’s boundaries.
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Defines or retrieves the unlockKey property, a unique identifier or code required to unlock and grant access to the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (such as "en", "fr", or "es"), which determines the set of localized messages to use from the messages property. This property ensures that the appropriate language-specific messages are displayed to users based on their language selection or system settings.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify how localized strings are generated and displayed, such as altering text templates, injecting dynamic values, or adjusting message structure before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized strings used throughout the widget’s interface. This property is intended to facilitate internationalization by allowing you to provide translations for various UI text elements. It is typically used in combination with the locale property, which determines the currently active language or regional format.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Enables the use of a custom minimize icon by specifying an HTMLTemplateElement. This property accepts either the ID of an HTMLTemplateElement (as a string) or a direct reference to the HTMLTemplateElement instance. The content of the provided template will be rendered in place of the default minimize icon.
   * Default value: "null"
   */
  minimizeIconTemplate?: string;
  /**
   * Specifies the minimum width, in pixels, that the ListMenu must reach before automatically switching from its normal (expanded) mode to minimized mode. If this value is set to null, the ListMenu will remain in its normal mode regardless of its width and will not minimize automatically.
   * Default value: null
   */
  minimizeWidth?: number | null;
  /**
   * Defines or retrieves the behavior of the ListMenu's scroll buttons, specifying how they appear and function when the menu content exceeds the visible area. This property controls whether scroll buttons are shown, when they become visible, and how users can interact with them to navigate through the list.
   * Default value: auto
   */
  overflow?: Overflow | string;
  /**
   * If the element has the "readonly" attribute, users can view its content but cannot modify or edit it. While the element remains focusable and its text can be selected or copied, any user attempts to change its value will be blocked, ensuring the data remains unchanged.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element's text and layout direction are set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its contents will display text and align elements according to RTL conventions.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies whether to display a traditional scrollbar or custom scroll buttons when the content exceeds the boundaries of an element’s container. This setting controls the method users can use to navigate overflow content within the element.
   * Default value: scrollbar
   */
  scrollMode?: ListMenuScrollMode | string;
  /**
   * Specifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, the element becomes unfocusable, meaning it cannot receive input focus via keyboard navigation (such as the Tab key), mouse clicks, or scripting methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the name of the field in the data source whose value will be assigned as the item's value property. This field is used to uniquely identify each item within the data collection.
   * Default value: "value"
   */
  valueMember?: string;
}
/**
 ListMenu allows you to present users a listing of options and sub options.
*/
export interface ListMenu extends BaseElement, ListMenuProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a jqx-menu-items-group component is expanded by the user, indicating that the associated menu group has been opened to reveal its child menu items. Developers can use this event to perform actions such as loading dynamic content, updating UI states, or triggering additional functionality when a menu group becomes visible.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, path, children)
   *  item - The menu item that was expanded.
   *  label - The label of the item that was expanded.
   *  value - The value of the item that was expanded.
   *  path - The path of the item that was expanded, e.g. '0.1', '1.1.2'.
   *  children - The children of the item that was expanded.
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the checked or unchecked state of a menu item is modified—such as when a user selects or deselects a checkbox or toggle option within a menu. It allows you to respond to changes in the check state of menu items, enabling dynamic UI updates or additional actions based on the user's selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, checked)
   *  item - The menu item which state was changed.
   *  label - The label of the item which state was changed.
   *  value - The value of the item which state was changed.
   *  checked - The checked state of the toggled item. If false the item is not toggled.
   */
  onItemCheckChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user interacts with the menu by clicking on one of its list items. The event provides details about the specific item selected, allowing you to execute custom logic in response to the user's selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value)
   *  item - The menu item that was clicked.
   *  label - The label of the clicked item.
   *  value - The value of the clicked item.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user reaches the bottom of the ListMenu by scrolling. It can be used to detect when additional actions are needed, such as loading more items or displaying a message, once the user has viewed all currently visible content in the ListMenu.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a leftward swipe gesture within the ListMenu component, typically indicating an intent to reveal additional options, delete an item, or navigate to a different view. It is designed to respond exclusively to horizontal swipes that start inside the ListMenu area.
	* @param event. The custom event.    */
  onSwipeleft?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a rightward swipe gesture within the ListMenu component. It can be used to detect and handle user interactions such as revealing additional options, navigating to a new view, or initiating specific actions in response to the right swipe inside the ListMenu area.
	* @param event. The custom event.    */
  onSwiperight?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Appends a new item to the end of the existing list, expanding the list by one element.
   * @param {HTMLElement} Item. A smart-menu-item to add to the List Menu.
   * @param {HTMLElement | string} Parent?. The smart-menu-items-group (or its id or numeric path) to add the item to.
   */
  addItem(Item: HTMLElement, Parent?: HTMLElement | string): void;
  /**
   * Navigates to the previous page within the group of menu items (`smart-menu-items-group`). This function moves the user’s focus or view to the preceding set of menu options, enabling seamless backward navigation in multi-page or scrollable menu interfaces.
   * @param {boolean} animation?. If set to false, disables collapse animation even if animation is enabled for the element
   */
  back(animation?: boolean): void;
  /**
   * Navigates the user to a specific page or section within the application identified as "smart-menu-items-group." This action typically triggers a transition or redirect, bringing the "smart-menu-items-group" content into view for the user. Suitable for menu navigation or directing users to targeted groups within a menu structure.
   * @param {string} id. The id or numeric path of a page (smart-menu-items-group).
   */
  changePage(id: string): void;
  /**
   * Marks an item as checked, indicating that it has been selected or completed. This action typically updates the item's status property (e.g., `checked: true`) within the JSON data.
   * @param {HTMLElement | string} item. smart-menu-item/smart-menu-items-group (or its id or numeric path).
   */
  checkItem(item: HTMLElement | string): void;
  /**
   * Retrieves a specific item using either its unique identifier (ID) or a numeric path that locates the item within a hierarchical structure.
   * @param {string} id. The id or numeric path of an item
   * @returns {HTMLElement}
   */
  getItem(id: string): HTMLElement;
  /**
   * Expands the List Menu to its maximum available size, displaying all menu items for full visibility and easier selection.
   */
  maximize(): void;
  /**
   * Collapses the List Menu to save screen space. When minimized, the full menu is hidden and replaced with a single icon, allowing users to expand the menu again if needed. This improves the user interface by providing a cleaner, less cluttered appearance while maintaining quick access to menu options.
   */
  minimize(): void;
  /**
   * Removes a specified item from the collection or list. If the item exists, it is deleted; otherwise, no changes are made. This operation typically identifies the item by its unique key, index, or value.
   * @param {HTMLElement | string} item. The smart-menu-item/smart-menu-items-group (or its id or numeric path) to remove.
   */
  removeItem(item: HTMLElement | string): void;
  /**
   * Removes the checkmark from a selected item, resetting its state to unchecked or unselected. This action is typically used to indicate that the item is not active, chosen, or included in a selection.
   * @param {HTMLElement | string} item. smart-menu-item/smart-menu-items-group (or its id or numeric path).
   */
  uncheckItem(item: HTMLElement | string): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-list-menu"): ListMenu;
        querySelector(selectors: "smart-list-menu"): ListMenu | null;
        querySelectorAll(selectors: "smart-list-menu"): NodeListOf<ListMenu>;
        getElementsByTagName(qualifiedName: "smart-list-menu"): HTMLCollectionOf<ListMenu>;
        getElementsByName(elementName: "smart-list-menu"): NodeListOf<ListMenu>;
    }
}

/**Configures the selection behavior (check mode) for top-level ListMenu items (groups). This determines whether menu items can be selected individually, allow multiple selections, or behave like radio buttons, affecting how users interact with the menu. */
export declare type MenuCheckMode = 'checkbox' | 'radioButton';
/**Specifies or retrieves the direction in which the ListMenu's minimized dropdown expands when opened, such as upward or downward. This property determines the alignment and positioning of the dropdown relative to the ListMenu component. */
export declare type MenuDropDownPosition = 'auto' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'overlay-left' | 'overlay-right';
/**Defines or retrieves the behavior of the ListMenu's scroll buttons, specifying how they appear and function when the menu content exceeds the visible area. This property controls whether scroll buttons are shown, when they become visible, and how users can interact with them to navigate through the list. */
export declare type Overflow = 'auto' | 'hidden' | 'scroll';
/**Specifies whether to display a traditional scrollbar or custom scroll buttons when the content exceeds the boundaries of an element’s container. This setting controls the method users can use to navigate overflow content within the element. */
export declare type ListMenuScrollMode = 'scrollbar' | 'scrollButtons';
export interface MapProperties {
  /**
   * Before you begin using the Maps component, ensure that your Google Cloud project has an active billing account and that the Maps JavaScript API is enabled. For step-by-step instructions, visit: https://developers.google.com/maps/gmp-get-started.You will also need to create an API key, which serves as a unique identifier for your project. The API key is required to authenticate requests to the Maps JavaScript API and to track usage for billing purposes. Make sure that your project has at least one valid API key associated with it before proceeding.
   * Default value: "null"
   */
  apiKey?: string;
  /**
   * The "query" parameter specifies the geographic location that should be centered and displayed on the map. Users can provide a variety of location types as the value, including the name of a continent, country, city, or a detailed address. The map will adjust its view to focus on the specified location based on the input provided in this parameter.
   * Default value: "null"
   */
  query?: string;
  /**
   * The 'mode' property specifies the operational mode of the map, determining how users can interact with it (e.g., view-only, edit, or select locations). Adjusting this property changes the map’s behavior to suit different use cases or user permissions.
   * Default value: "null"
   */
  mode?: string;
  /**
   * The 'map-type' property allows users to select from a predefined set of map display options. These options include different types of maps, such as 'place' for location-based views, 'view' for general map visualization, and 'streetview' for panoramic street-level imagery. This property enables flexible map rendering based on the user's selected display mode.
   * Default value: "null"
   */
  mapType?: string;
  /**
   * This property is applicable only when the map type is set to "streetview." It specifies the horizontal orientation, or heading, of the Street View panorama, determining the direction in which the viewer initially faces within the panorama. The value is typically expressed in degrees, where 0 represents north, 90 represents east, 180 represents south, and 270 represents west.
   * Default value: 210
   */
  heading?: number;
  /**
   * The 'pitch' property specifies the vertical viewing angle of the map, allowing you to adjust the perspective upwards ('up') or downwards ('down'). By default, Google Maps displays the map with a horizontal (0°) pitch, meaning there is no vertical tilt. Adjusting the 'pitch' lets you tilt the map to provide an angled, more three-dimensional view.
   * Default value: 10
   */
  pitch?: number;
  /**
   * The camera's zoom level controls how much of the map is visible and how detailed that view is. Increasing the zoom level allows users to see more detail—such as individual streets and buildings—while decreasing the zoom level zooms out to display a larger area, like entire continents or the whole world, with less detail. Approximate examples of what’s visible at various zoom levels are:- '1:' Whole World- '5:' Continents and Major Landmasses- '10:' Cities and Surrounding Areas- '15:' City Streets- '20:' Individual BuildingsAdjusting the zoom level allows users to focus on specific areas or get a broad overview, depending on their needs.
   * Default value: 12
   */
  zoom?: number;
}
/**
 Our map component makes it easy for displaying map with defined location by user requireing a small piece of code.
*/
export interface Map extends BaseElement, MapProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-map"): Map;
        querySelector(selectors: "smart-map"): Map | null;
        querySelectorAll(selectors: "smart-map"): NodeListOf<Map>;
        getElementsByTagName(qualifiedName: "smart-map"): HTMLCollectionOf<Map>;
        getElementsByName(elementName: "smart-map"): NodeListOf<Map>;
    }
}

export interface MaskedTextBoxProperties {
  /**
   * Specifies or retrieves the current animation mode for the element. When set to 'none', all animations are disabled for the element, resulting in immediate changes without any animated transitions. If another value is assigned, the corresponding animation mode will be applied, controlling how transitions or visual effects are rendered.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Checks if the specified promptChar character is recognized as a valid input, allowing the user to enter it into the field. If promptChar is considered valid, it will be accepted and processed as part of the user’s input; otherwise, it will be rejected.
   * Default value: false
   */
  allowPromptAsInput?: boolean;
  /**
   * Specifies whether the input field restricts user entries to characters within the standard ASCII character set (codes 0–127), excluding all non-ASCII symbols, accented letters, and characters from other languages.
   * Default value: false
   */
  asciiOnly?: boolean;
  /**
   * Determines if the input element automatically receives focus when the page loads, allowing users to begin typing immediately without manually selecting the field.
   * Default value: false
   */
  autoFocus?: boolean;
  /**
   * Controls whether the input mask is displayed or hidden when the input field receives or loses focus, regardless of whether a placeholder is specified. This setting applies even if no placeholder attribute is present on the input element.
   * Default value: false
   */
  autoShowMask?: boolean;
  /**
   * Specifies whether formatting characters (such as literals and prompt symbols) included in an input mask are also copied to the clipboard when performing cut or copy operations. If enabled, both the user's input and the input mask characters will be included in the clipboard data; if disabled, only the user's input is copied.
   * Default value: excludePromptAndLiterals
   */
  cutCopyMaskFormat?: MaskedTextBoxCutCopyMaskFormat | string;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element appears dimmed and does not respond to user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines the action performed when the "Enter" key is pressed. Possible values include "submit" (submits the form), "newline" (inserts a new line), or "none" (no action). The default value is "submit".
   * Default value: submit
   */
  enterKeyBehavior?: EnterKeyBehavior | string;
  /**
   * Controls whether the prompt character in the input mask is hidden when the masked text box loses focus. When set to true, the prompt character will not be visible in the textbox after it loses focus; when set to false, the prompt character remains visible even when the textbox is not focused. This helps manage what users see when interacting with the masked input field.
   * Default value: false
   */
  hidePromptOnLeave?: boolean;
  /**
   * Displays supplementary helper text beneath the element. This hint appears exclusively when the element is focused, providing contextual guidance to the user during input or interaction. The helper text is hidden when the element is not focused, ensuring a clean interface when not needed.
   * Default value: ""
   */
  hint?: string;
  /**
   * Specifies whether new user input will replace the current input value entirely, or if it will be appended to or combined with the existing value. When enabled, any new input overwrites the existing content; when disabled, new input is added to the existing value without removing it.
   * Default value: false
   */
  isOverwriteMode?: boolean;
  /**
   * Displays a label positioned above the element. The label remains constantly visible, providing clear identification for the associated element at all times.
   * Default value: ""
   */
  label?: string;
  /**
   * Defines or retrieves the unlockKey, a unique identifier or code required to activate and access the product's full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for the application or component. This property determines which set of localized messages from the messages object will be used for display, enabling support for multiple languages. When you set the language, the corresponding message translations from the messages property are applied automatically.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify translated strings—such as injecting dynamic values, changing case, or applying additional formatting—before they are displayed to users.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the input mask pattern that determines the allowed format and structure of user input. This ensures that the entered data matches the required criteria, such as a phone number, date, or custom format.
   * Default value: "#####"
   */
  mask?: string;
  /**
   * Specifies whether every required field defined by the mask has been filled in with valid data. Returns true if all required fields are populated; otherwise, returns false.
   * Default value: false
   */
  maskCompleted?: boolean;
  /**
   * Specifies whether every required and optional field defined by the mask has been filled with a value. If true, all fields that the mask references are populated; if false, at least one referenced field remains unset.
   * Default value: false
   */
  maskFull?: boolean;
  /**
   * Specifies the upper limit on the number of characters that a user is allowed to input. If the user attempts to enter more characters than this limit, additional input will be prevented or ignored. This property is commonly used in form fields to enforce data length constraints and ensure consistent data entry.
   * Default value: 5
   */
  maxLength?: number;
  /**
   * Defines or retrieves an object containing customizable text strings used within the widget, allowing for localization of user interface elements. This property works in conjunction with the locale property to provide translations and adapt the widget's display language to different regions or languages. Use this to specify or override default labels, messages, or prompts shown in the widget.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute identifies the element within an HTML form, ensuring its value is included in the form data sent to the server upon submission. This is essential for correctly processing user input on the backend.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the placeholder text displayed in the input field when both the value and mask properties are unset or empty. This text provides users with a hint or example of the expected input format until they enter a value.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies the character used as the placeholder in the input mask for the element. This character indicates where user input is expected within the input field.
   * Default value: "_"
   */
  promptChar?: string;
  /**
   * When the element is set to readonly, users can view its content but cannot modify or interact with it in any way. This ensures that the element’s value remains unchanged by user input, while still being visible on the page.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies whether the parsing process should immediately halt upon encountering the first invalid character in the user input, or continue attempting to parse the remaining input.
   * Default value: false
   */
  rejectInputOnFirstFailure?: boolean;
  /**
   * Indicates that this input field is required and cannot be left empty; users must provide a value before the form can be successfully submitted.
   * Default value: false
   */
  required?: boolean;
  /**
   * Controls whether entering a character in the input field that matches the prompt character will reset the currently selected value. This setting is relevant only when allowPromptAsInput is enabled, meaning the prompt character can be used as user input. When enabled, if the user types the prompt character, the input’s selected value will be cleared; otherwise, the value remains unchanged.
   * Default value: false
   */
  resetOnPrompt?: boolean;
  /**
   * Specifies whether pressing the spacebar will clear the currently selected value in the input field. When set to true, pressing the space key will reset (clear) the selection; when set to false, the value remains unchanged.
   * Default value: false
   */
  resetOnSpace?: boolean;
  /**
   * Specifies or retrieves a Boolean value that determines whether the element’s content is aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew. When set to true, the element’s text direction and alignment are adjusted to display content appropriately for RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Determines if the entire value of the input field will be automatically highlighted (selected) when the input receives focus, allowing users to easily replace or copy the existing content.
   * Default value: false
   */
  selectAllOnFocus?: boolean;
  /**
   * Specifies whether the value entered in the input field should include or exclude the static characters (prompts and literals) defined by the input mask. When enabled, the resulting value will contain these mask characters; otherwise, only the user input (without mask characters) will be stored.
   * Default value: excludePromptAndLiterals
   */
  textMaskFormat?: MaskedTextBoxTextMaskFormat | string;
  /**
   * Specifies the visual theme to be applied. The theme controls the overall appearance—including colors, fonts, and style—of the element, ensuring a consistent and customizable look and feel.
   * Default value: ""
   */
  theme?: string;
  /**
   * If this property is set to true, the element will be excluded from keyboard navigation and cannot receive focus, either by tabbing or programmatically.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets the current value of the element or sets a new value for the element, depending on how the method is used. When called without arguments, it returns the element's current value. When provided with a value as an argument, it updates the element with the specified value. Commonly used with form input elements.
   * Default value: ""
   */
  value?: string;
  /**
   * A callback function that enables you to define custom validation logic for the input value. This function receives the input value as an argument and should return a boolean value: return true if the value is considered valid, or false if it is invalid. If the function returns false, the input will be treated as invalid and may trigger corresponding validation error messages or prevent form submission. Use this to implement validations that go beyond the default rules.
   * Default value: null
   */
  validation?: any;
}
/**
 MaskedTextBox uses a mask to control the input of the user.
*/
export interface MaskedTextBox extends BaseElement, MaskedTextBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the content of the Text Box, such as by typing, deleting, or pasting text. It fires each time the value of the Text Box changes, allowing you to respond to user input in real-time.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a key is released (on key up) in the MaskedTextBox control and the input value has been modified as a result. It only fires if the key up event causes a change in the current value of the MaskedTextBox, allowing you to respond specifically to user edits in real-time.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the <b>validation</b> property is set. It indicates the result of the validation process—specifically, whether the validation completed successfully (<code>true</code>) or failed (<code>false</code>). Use this event to respond to changes in the validation state of the associated data or form.
	* @param event. The custom event. Custom data event was created with: ev.detail(success)
   *  success - A flag inidicating whether the validation was successfull or not.
   */
  onValidation?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Sets keyboard and screen reader focus to the specified element, making it the active element for user interactions such as typing or accessibility navigation.
   */
  focus(): void;
  /**
   * Applies a blur effect to the element, causing its content and any child elements to appear out of focus by softening edges and details. The degree of blur can typically be adjusted to achieve the desired level of visual obscurity.
   */
  blur(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-masked-text-box"): MaskedTextBox;
        querySelector(selectors: "smart-masked-text-box"): MaskedTextBox | null;
        querySelectorAll(selectors: "smart-masked-text-box"): NodeListOf<MaskedTextBox>;
        getElementsByTagName(qualifiedName: "smart-masked-text-box"): HTMLCollectionOf<MaskedTextBox>;
        getElementsByName(elementName: "smart-masked-text-box"): NodeListOf<MaskedTextBox>;
    }
}

/**Specifies whether formatting characters (such as literals and prompt symbols) included in an input mask are also copied to the clipboard when performing cut or copy operations. If enabled, both the user's input and the input mask characters will be included in the clipboard data; if disabled, only the user's input is copied. */
export declare type MaskedTextBoxCutCopyMaskFormat = 'excludePromptAndLiterals' | 'includePrompt' | 'includeLiterals' | 'includePromptAndLiterals';
/**Defines the action performed when the "Enter" key is pressed. Possible values include "submit" (submits the form), "newline" (inserts a new line), or "none" (no action). The default value is "submit". */
export declare type EnterKeyBehavior = 'clearOnSubmit' | 'submit';
/**Specifies whether the value entered in the input field should include or exclude the static characters (prompts and literals) defined by the input mask. When enabled, the resulting value will contain these mask characters; otherwise, only the user input (without mask characters) will be stored. */
export declare type MaskedTextBoxTextMaskFormat = 'excludePromptAndLiterals' | 'includePrompt' | 'includeLiterals' | 'includePromptAndLiterals';
export interface MenuProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and the element remains static. Otherwise, animations will be enabled according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the delay, in milliseconds, before the Menu dropdown is closed after the mouse cursor leaves the Menu area. This setting is only effective when the selectionMode property is set to 'mouseenter'. Adjusting this value can help prevent the dropdown from closing too quickly when the mouse briefly leaves the Menu.
   * Default value: 100
   */
  autoCloseDelay?: number;
  /**
   * If set to true, the element will automatically receive focus when the user's mouse pointer enters (hovers over) it, triggering a mouseenter event. This allows keyboard interactions or focus styles to activate without requiring a manual click or tab action from the user.
   * Default value: false
   */
  autoFocusOnMouseenter?: boolean;
  /**
   * Enables checkboxes for top-level menu items (the direct children of the main Menu component), allowing users to select or deselect these items. To make submenu items (nested within menu groups) checkable, set the checkable property individually on the corresponding smart-menu-items-group elements. This allows for granular control over which menu levels support checkable states.
   * Default value: false
   */
  checkable?: boolean;
  /**
   * Controls whether checkboxes and radio buttons can be shown within the Menu component. This property applies exclusively to the main Menu, not to its subitems (i.e., smart-menu-item or smart-menu-items-group). Use this property to enable or disable the display of selectable options directly in the Menu.  For further customization of individual items, refer to the checkable property.
   * Default value: false
   */
  checkboxes?: boolean;
  /**
   * Sets the selection mode (check mode) for the top-level Menu items, which are the immediate children of the Menu component. The 'checkMode' property determines how these menu items can be toggled or selected:- Possible values for 'checkMode' are:    - ''checkbox'': Menu items can be checked and unchecked independently (multiple selections allowed).    - ''radioButton'': Menu items are mutually exclusive (only one can be selected at a time, like radio buttons).    - ''none'': Menu items have no checkable or selectable state.You can also assign a comma-separated list of these values (for example, ''checkbox, radioButton, none, checkbox''). If a list is provided, each value corresponds to a group of top-level menu items. These groups are separated by menu separators (special items acting as visual dividers). The first value in the list applies to the first group of menu items, the second value to the next group (after the first separator), and so on. When a separator is encountered, it signals the start of a new checkMode context, applying the next value in the list to subsequent items.Note: This 'checkMode' property only affects the top-level menu items. To control check modes for submenus or nested groups, set the 'checkMode' property individually on each smart-menu-items-group (the group component representing submenu levels).
   * Default value: checkbox
   */
  checkMode?: MenuCheckMode | string;
  /**
   * Defines the document-level event that triggers the closure of all open menu dropdowns, or the entire menu if the mode property is set to 'dropDown'. This event ensures that any active menu or submenu is properly closed when the specified user interaction occurs (e.g., clicking outside the menu).
   * Default value: up
   */
  closeAction?: MenuCloseAction | string;
  /**
   * Specifies the data source for the Menu component. The data source should be provided as an array of objects, where each object represents a menu item with the following properties:- 'label': *(string, required)* — The text displayed for the menu item.- 'value': *(any, required)* — The unique value associated with the menu item, used for identification or selection.- 'shortcut': *(string, optional)* — A keyboard shortcut hint displayed alongside the menu item, helping users discover quick access keys.- 'items': *(array, optional)* — An array of objects representing sub-menu items, allowing for nested menus and hierarchical structures. Each sub-menu item follows the same structure as a top-level menu item.By configuring the data source in this format, you enable dynamic and flexible rendering of complex menu structures.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Controls whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, users cannot interact with the element.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies which field in the data source should be used as the item's label. This determines the text value displayed for each item in the UI by mapping it to the corresponding property from your data.
   * Default value: "label"
   */
  displayMember?: string;
  /**
   * Here is a revised and enhanced version of your description:Specifies a custom outer container to which all dropdown containers will be appended. By default, dropdown elements are appended inside the menu itself. You can assign this property an HTML element directly, or provide the id of an existing HTML element (as a string).When the menu is in mode 'dropDown', the dropDownAppendTo property not only determines where the dropdowns are appended, but also controls the parent container of the entire menu. Note that the open method will open the menu relative to its original position within the DOM, regardless of the value of dropDownAppendTo.Use this property to customize the DOM structure, for example, to ensure that dropdowns are rendered within a specific container for layout, styling, or layering purposes.
   * Default value: null
   */
  dropDownAppendTo?: string | HTMLElement;
  /**
   * When this property is enabled, opening an element’s dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the page. This overlay prevents interaction with other page elements while the dropdown is open, helping to focus the user’s attention on the dropdown content.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * When this property is set and the Menu is in drop-down mode, the Menu's position will be anchored to the ID set by this property.
   * Default value: ""
   */
  dropDownAnchor?: string;
  /**
   * Specifies the direction in which the menu dropdown will appear when opened (e.g., above, below, left, or right relative to the triggering element), allowing customization of dropdown placement to enhance user interface layout and usability.
   * Default value: auto
   */
  dropDownPosition?: MenuDropDownPosition | string;
  /**
   * A getter method that retrieves and returns an array containing all current Menu item objects, allowing access to the complete list of menu entries managed by the application.
   * Default value: 
   */
  items?: any;
  /**
   * Specifies the field name in the data source that contains the collection of subitems associated with each item group. This property allows the component to identify and retrieve subitems for each group by referencing the appropriate data field.
   * Default value: "items"
   */
  itemsMember?: string;
  /**
   * Retrieves or assigns the unlockKey, a unique code required to activate and access the product's full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for the component. This property determines which language is used when displaying text from the messages property, allowing for dynamic localization and internationalization of the user interface. When the language is changed, the corresponding localized messages are retrieved from the messages object.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized strings are generated or displayed, such as adjusting placeholders, applying additional formatting, or handling special localization rules before the message is returned.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves an object containing the set of strings used within the widget interface that can be localized for different languages. This property works together with the locale property to enable internationalization by allowing developers to customize or translate UI text according to the user's language preferences.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Loads a custom minimize icon from an HTMLTemplateElement selected by its ID. The element’s inner HTML is used as the icon’s template, allowing for flexible and reusable icon customization within the application.
   * Default value: "null"
   */
  minimizeIconTemplate?: string;
  /**
   * Specifies the minimum width (in pixels) at which the Menu transitions from its normal (expanded) state to a minimized (collapsed) mode. When the Menu’s container width falls below this threshold, the minimized mode is automatically activated. If set to null, the Menu will remain in its normal state regardless of width and will not minimize automatically.
   * Default value: null
   */
  minimizeWidth?: number;
  /**
   * Specifies how the menu is visually presented to users, such as in a horizontal, vertical, dropdown, or collapsible format. Adjusting this setting allows customization of the menu’s layout and interaction style.
   * Default value: horizontal
   */
  mode?: MenuMode | string;
  /**
   * Toggles the menu’s visibility when it is set to 'dropDown' mode, allowing users to open or close the menu as needed.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Defines how the menu's scroll buttons behave when navigating through its items. This property is effective only if dropDownAppendTo is set to a value other than null. If dropDownAppendTo is null, the scroll button behavior setting is ignored.
   * Default value: auto
   */
  overflow?: Overflow | string;
  /**
   * If set to true, the Menu and its dropdowns will remain open when a Menu item is checked or unchecked, rather than automatically closing upon selection. This allows users to make multiple selections without the Menu closing each time an item is toggled.
   * Default value: false
   */
  preventCloseOnCheck?: boolean;
  /**
   * When the element is set to "readonly," users can view its content but are unable to modify or edit the value. However, users may still interact with the element in limited ways, such as selecting and copying its content. The element remains focusable, but any attempts to change its data will be ignored.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves whether the element’s alignment is configured to support locales that use right-to-left (RTL) text direction, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted for proper display in RTL languages.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies how users can select items within the menu, such as allowing single selection, multiple selections, or no selection.
   * Default value: click
   */
  selectionMode?: MenuSelectionMode | string;
  /**
   * Specifies the theme to be applied. The selected theme controls the visual appearance and styling of the element, including colors, fonts, spacing, and other design aspects.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, the element is removed from the tab order and cannot be focused using keyboard navigation or script.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies which field in the data source should be used as the value for each item. This property maps a particular key or column from your data to represent the item's value in the component, enabling proper identification, selection, and data binding.
   * Default value: "value"
   */
  valueMember?: string;
}
/**
 Horizontal, Vertical and Popup Menu. Popup Menus appear when a user taps an interactive UI element such as an icon, button, action, or content, such as selected items or text.
*/
export interface Menu extends BaseElement, MenuProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the menu is closed by the user. It is only fired when the component is operating in <em>'dropDown'</em> <strong>mode</strong>; other modes do not emit this event. Use this event to perform actions or cleanup tasks when the drop-down menu is dismissed.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is dispatched immediately before the menu begins to close, providing an opportunity to intercept the closing operation. By invoking event.preventDefault() within the event handler, you can cancel the menu’s closure, allowing for custom logic or validation before the menu actually closes. Note that this event is only fired when the menu is operating in <em>'dropDown'</em> <strong>mode</strong>; it does not apply to other display modes.
	* @param event. The custom event. Custom data event was created with: ev.detail(trigger)
   *  trigger - Indicates whether the event was called from inside the element or programatically.
   */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a jqx-menu-items-group is collapsed, indicating that a previously expanded group of menu items within the jqxMenu component has been closed by the user or through a programmatic action. Use this event to perform custom actions or UI updates in response to the group collapsing.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, path, children)
   *  item - The menu item that was collapsed.
   *  label - The label of the toggled item that was collapsed.
   *  value - The value of the toggled item that was collapsed.
   *  path - The path of the toggled item that was collapsed, e.g. '0.1', '1.1.2'.
   *  children - The children items of the toggled item that was collapsed.
   */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before a jqx-menu-items-group begins to collapse, allowing developers to execute custom logic or prevent the group from collapsing if necessary. It provides an opportunity to handle user interactions or update the user interface in response to the group collapsing action.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, path, children)
   *  item - The menu item that is going to be collapsed.
   *  label - The label of the toggled item that is going to be collapsed.
   *  value - The value of the toggled item that is going to be collapsed.
   *  path - The path of the toggled item that is going to be collapsed, e.g. '0.1', '1.1.2'.
   *  children - The children items of the toggled item that is going to be collapsed.
   */
  onCollapsing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a jqx-menu-items-group component is expanded by the user, either through a click or programmatic action. It allows you to execute custom logic in response to a menu group opening.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, path, children)
   *  item - The menu item that was expanded.
   *  label - The label of the toggled item that was expanded.
   *  value - The value of the toggled item that was expanded.
   *  path - The path of the toggled item that was expanded, e.g. '0.1', '1.1.2'.
   *  children - The children items of the toggled item that was expanded.
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before a jqx-menu-items-group begins to expand, allowing you to execute custom logic or cancel the expansion operation if needed. Use this event to intervene right before the menu group becomes visible to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, path, children)
   *  item - The menu item that is going to be expanded.
   *  label - The label of the toggled item that is going to be expanded.
   *  value - The value of the toggled item that is going to be expanded.
   *  path - The path of the toggled item that is going to be expanded, e.g. '0.1', '1.1.2'.
   *  children - The children items of the toggled item that is going to be expanded.
   */
  onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the checked or unchecked state of a menu item is changed by the user or programmatically. It provides details about which menu item was affected and the new check state, allowing developers to respond to the change accordingly, such as updating the UI or processing the selected option.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value, checked)
   *  item - The menu item which state was changed.
   *  label - The label of the item which state was changed.
   *  value - The value of the item which state was changed.
   *  checked - The checked state of the toggled item. If false the item is not toggled.
   */
  onItemCheckChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a menu item. It provides information about the selected menu item, allowing you to handle user interactions, perform actions based on the item selected, or update the interface accordingly.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value)
   *  item - The menu item that is toggled.
   *  label - The label of the toggled item.
   *  value - The value of the toggled item.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the menu is opened by the user. It is only fired when the component is operating in <em>'dropDown'</em> <strong>mode</strong>; in all other modes, this event will not be triggered. Use this event to perform actions when the drop-down menu becomes visible.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the menu is opened, giving you the opportunity to intervene before the menu becomes visible. Within your event handler, you can prevent the menu from opening by calling event.preventDefault(). Note that this event is only emitted when the menu is operating in <em>'dropDown'</em> <strong>mode</strong>; it will not be fired in any other mode.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new item to the menu by appending the specified entry, including its label, action, and any associated properties, to the existing menu structure. This allows dynamic expansion of the menu options displayed to users.
   * @param {HTMLElement} Item. A smart-menu-item to add to the Menu.
   * @param {HTMLElement | string} Parent?. The smart-menu-items-group or its id or numeric path to add the item to.
   */
  addItem(Item: HTMLElement, Parent?: HTMLElement | string): void;
  /**
   * Marks the specified item as checked or selected, updating its status to indicate it is active, enabled, or chosen.
   * @param {HTMLElement | string} item. smart-menu-item/smart-menu-items-group or its id or numeric path.
   */
  checkItem(item: HTMLElement | string): void;
  /**
   * Removes all existing items from the Menu, resulting in an empty Menu with no selectable options.
   */
  clear(): void;
  /**
   * Simulates a user click event on a specified item programmatically, triggering any associated event handlers or actions as if the item were clicked manually by the user.
   * @param {HTMLElement | string} item. smart-menu-item/smart-menu-items-group or its id or numeric path.
   */
  clickItem(item: HTMLElement | string): void;
  /**
   * Automatically closes the Menu when the <strong>mode</strong> property is set to <em>'dropDown'</em>, ensuring that the menu is dismissed upon selection or when clicking outside the menu area. This behavior provides a streamlined user experience consistent with standard dropdown functionality.
   */
  close(): void;
  /**
   * Collapses a currently expanded item, hiding its content from view and displaying only the header or summary. This is typically used in expandable/collapsible components such as accordions or dropdown menus.
   * @param {HTMLElement | string} item?. smart-menu-item/smart-menu-items-group or its id or numeric path. If no item is passed, all open items are collapsed.
   * @param {boolean} animation?. If set to false, disables collapse animation even if animation is enabled for the element.
   */
  collapseItem(item?: HTMLElement | string, animation?: boolean): void;
  /**
   * Displays the detailed content or additional information of an item by expanding its view, typically used in accordions, dropdowns, or collapsible sections.
   * @param {HTMLElement | string} item. smart-menu-item/smart-menu-items-group or its id or numeric path.
   * @param {boolean} animation?. If set to false, disables expand animation even if animation is enabled for the element.
   */
  expandItem(item: HTMLElement | string, animation?: boolean): void;
  /**
   * Retrieves a specific item using either its unique identifier (ID) or a numeric path value. This allows you to access an item directly by providing its assigned ID or by specifying its position within a structured path.
   * @param {string} id. The id or numeric path of an item
   * @returns {HTMLElement}
   */
  getItem(id: string): HTMLElement;
  /**
   * Expands the menu to display all available options, maximizing its visibility and accessibility for the user.
   */
  maximize(): void;
  /**
   * Collapses the navigation menu to its minimized or compact state, reducing its visible size to save screen space while still providing access to essential menu options.
   */
  minimize(): void;
  /**
   * Opens the Menu component only when the <strong>mode</strong> property is set to <em>'dropDown'</em>. In this mode, the Menu will become visible in a dropdown format, allowing users to interact with its items. If <strong>mode</strong> is set to any other value, the Menu will not open.
   * @param {number} left. Horizontal position
   * @param {number} top. Vertical position
   */
  open(left: number, top: number): void;
  /**
   * Removes a specified item from the menu, updating the menu structure to reflect the change. This action ensures the targeted menu item is no longer displayed or accessible within the menu interface.
   * @param {HTMLElement | string} item. The smart-menu-item/smart-menu-items-group or its id or numeric path to remove.
   */
  removeItem(item: HTMLElement | string): void;
  /**
   * Unselects or removes the checkmark from a selected item, indicating that it is no longer active, chosen, or included in the current selection.
   * @param {HTMLElement | string} item. smart-menu-item/smart-menu-items-group (or its id or numeric path)
   */
  uncheckItem(item: HTMLElement | string): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-menu"): Menu;
        querySelector(selectors: "smart-menu"): Menu | null;
        querySelectorAll(selectors: "smart-menu"): NodeListOf<Menu>;
        getElementsByTagName(qualifiedName: "smart-menu"): HTMLCollectionOf<Menu>;
        getElementsByName(elementName: "smart-menu"): NodeListOf<Menu>;
    }
}

/**Defines the document-level event that triggers the closure of all open menu dropdowns, or the entire menu if the mode property is set to 'dropDown'. This event ensures that any active menu or submenu is properly closed when the specified user interaction occurs (e.g., clicking outside the menu). */
export declare type MenuCloseAction = 'down' | 'up' | 'none';
/**Specifies how the menu is visually presented to users, such as in a horizontal, vertical, dropdown, or collapsible format. Adjusting this setting allows customization of the menu’s layout and interaction style. */
export declare type MenuMode = 'horizontal' | 'vertical' | 'dropDown' | 'tree';
/**Specifies how users can select items within the menu, such as allowing single selection, multiple selections, or no selection. */
export declare type MenuSelectionMode = 'click' | 'mouseenter';
export interface MenuItemProperties {
  /**
   * 
   * Default value: true
   */
  checked?: boolean;
  /**
   * Controls whether the element is enabled or disabled. When set to true, the element is interactive and can receive user input; when set to false, the element is disabled, preventing user interaction and applying a disabled appearance as appropriate.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * 
   * Default value: 
   */
  label?: any;
  /**
   * 
   * Default value: null
   */
  level?: number;
  /**
   * 
   * Default value: true
   */
  separator?: boolean;
  /**
   * 
   * Default value: ""
   */
  shortcut?: string;
  /**
   * 
   * Default value: null
   */
  value?: any;
}
/**
 Defines a menu item.
*/
export interface MenuItem extends BaseElement, MenuItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-menu-item"): MenuItem;
        querySelector(selectors: "smart-menu-item"): MenuItem | null;
        querySelectorAll(selectors: "smart-menu-item"): NodeListOf<MenuItem>;
        getElementsByTagName(qualifiedName: "smart-menu-item"): HTMLCollectionOf<MenuItem>;
        getElementsByName(elementName: "smart-menu-item"): NodeListOf<MenuItem>;
    }
}

export interface MenuItemsGroupProperties {
  /**
   * 
   * Default value: false
   */
  checkable?: boolean;
  /**
   * 
   * Default value: false
   */
  checked?: boolean;
  /**
   * 
   * Default value: checkbox
   */
  checkMode?: MenuCheckMode | string;
  /**
   * Specifies whether the element is enabled or disabled. When set to true, the element is disabled and cannot be interacted with by the user; when set to false, the element remains enabled and fully interactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * 
   * Default value: null
   */
  dropDownHeight?: number;
  /**
   * 
   * Default value: false
   */
  expanded?: boolean;
  /**
   * 
   * Default value: 
   */
  label?: any;
  /**
   * 
   * Default value: null
   */
  level?: number;
  /**
   * 
   * Default value: false
   */
  separator?: boolean;
  /**
   * 
   * Default value: null
   */
  value?: any;
}
/**
 Defines a group of menu items.
*/
export interface MenuItemsGroup extends BaseElement, MenuItemsGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-menu-items-group"): MenuItemsGroup;
        querySelector(selectors: "smart-menu-items-group"): MenuItemsGroup | null;
        querySelectorAll(selectors: "smart-menu-items-group"): NodeListOf<MenuItemsGroup>;
        getElementsByTagName(qualifiedName: "smart-menu-items-group"): HTMLCollectionOf<MenuItemsGroup>;
        getElementsByName(elementName: "smart-menu-items-group"): NodeListOf<MenuItemsGroup>;
    }
}

export interface MultiColumnFilterPanelProperties {
  /**
   * Defines or retrieves the current animation mode for the element. Setting this property to 'none' disables all animations, while other values enable specific animation behaviors. Use this property to control whether animations are active or inactive.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls the placement of the close button within items in the filter panel when using a multi-column layout. You can use this property to retrieve the current position or specify a new position for the close button, determining where it appears relative to each filter panel item.
   * Default value: left
   */
  closeButtonPosition?: MultiColumnFilterPanelCloseButtonPosition | string;
  /**
   * Specifies the data source to be loaded into the multi-column filter panel.The dataSource array consists of objects, each representing a column available for grouping and filtering. Each object includes the following properties:      dataField: The name of the data field that identifies the column to be grouped.        dataType: The type of data contained in the column (e.g., string, number, date), used for correct grouping and filtering operations.        groupIndex: The initial grouping order of the column, where a value of -1 means the column is not grouped by default. Columns with non-negative values are grouped in ascending order based on their groupIndex.        label: The display name for the column, shown in the column selection dropdown or panel for user-friendly identification.        icon: A CSS class or icon identifier to visually represent the column in the selection input, improving the user interface and navigation.        sortDirection: The direction in which items are sorted within the group. Acceptable values are 'ascending' or 'descending'.  This structure allows you to fully customize how columns appear and behave within the multi-column filter panel, including display options, grouping priorities, and sorting behavior.
   * Default value: null
   */
  dataSource?: {label: string, dataField: string, dataType: string, sortDirection: string, groupIndex: number}[];
  /**
   * Controls whether the multi-column filter panel is displayed, allowing users to filter data across multiple columns simultaneously. When enabled, the panel appears in the UI, providing advanced filtering options; when disabled, the panel is hidden and users cannot access multi-column filtering features.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * A callback function invoked to customize or update the configuration of value editor components. This function allows developers to modify editor settings—such as input types, selectable options, validation rules, or UI behavior—before the value editor is rendered or updated.
   * Default value: null
   */
  editorCallback?: any;
  /**
   * Specifies or retrieves the placeholder text displayed in the filter value input fields. This placeholder provides guidance or an example to users about the expected input format when entering filter criteria.
   * Default value: "Value"
   */
  editorPlaceholder?: string;
  /**
   * Sets or retrieves the unlockKey, a unique identifier or code required to activate or gain access to the product's features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., 'en', 'fr', 'es') used by the application or component. This property works together with the messages property to display localized content based on the selected language. Changing this value updates which set of localized messages will be used.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that enables you to define custom formatting for messages returned by the Localization Module, allowing you to modify how localized text is displayed based on your specific requirements (e.g., language, placeholders, or dynamic values).
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves the maximum number of columns that can be used in a group by operation. If this value is set to null, there is no restriction on the number of columns that can be grouped.
   * Default value: 8
   */
  maxLevel?: number;
  /**
   * Defines or retrieves an object containing the localized strings displayed by the widget’s user interface. This property enables you to provide translations for all text labels, messages, and prompts shown by the widget, making it adaptable to different languages and regions. It works in conjunction with the locale property, which determines the active language, allowing the widget to display the appropriate set of translated strings based on the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "apply": "Apply",
   *     "booleanFirst": "?",
   *     "booleanLast": "?",
   *     "cancel": "Cancel",
   *     "dateFirst": "1",
   *     "dateLast": "9",
   *     "from": "from",
   *     "numberFirst": "1",
   *     "numberLast": "9",
   *     "pickAnother": "Pick another field to group by",
   *     "firstBy": "Group by",
   *     "stringFirst": "A",
   *     "stringLast": "Z",
   *     "thenBy": "then by",
   *     "collapseAll": "Collapse all",
   *     "expandAll": "Expand all"
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the logical operator (such as AND or OR) used to combine or evaluate multiple items, determining how their conditions or values are collectively processed.
   * Default value: false
   */
  operator?: MultiColumnFilterPanelOperator | string;
  /**
   * When the element is set to 'readonly', users can view its content but are unable to modify or change its value. However, unlike 'disabled' elements, a readonly element remains focusable and its content can still be selected or copied by users.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s alignment is adjusted to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element’s content and layout are oriented to accommodate locales that use RTL text direction.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * When this property is set to true, the element will be excluded from the page’s tab order and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key, and focus-related events (such as onfocus) will not be triggered for this element.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets or sets the initial value of the element. This property allows you to retrieve the element’s starting value or assign a new initial value before user interaction or script modifications.
   * Default value: 
   */
  value?: any;
}
/**
 Defines an advanced filter panel used for Grid and CardView filtering.
*/
export interface MultiColumnFilterPanel extends BaseElement, MultiColumnFilterPanelProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user clicks the "Apply" button. It signals that the user has finished configuring their selections or input, and requests that the changes be processed or saved. The event typically carries any relevant data or form values associated with the current application state.
	* @param event. The custom event.    */
  onApply?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user clicks the "Cancel" button, indicating an intention to abort or exit the current operation. It can be used to execute cleanup tasks, close dialogs or forms, or revert unsaved changes.
	* @param event. The custom event.    */
  onCancel: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the user clicks the "Collapse all" button, initiating the action to collapse or minimize all currently expanded sections or items in the interface.
	* @param event. The custom event.    */
  onCollapseAll?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user clicks the "Expand all" button, typically to expand and reveal all collapsible sections or items within the interface. It enables developers to execute specific actions—such as loading additional content or updating the UI—immediately after all expandable elements become visible.
	* @param event. The custom event.    */
  onExpandAll?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-multi-column-filter-panel"): MultiColumnFilterPanel;
        querySelector(selectors: "smart-multi-column-filter-panel"): MultiColumnFilterPanel | null;
        querySelectorAll(selectors: "smart-multi-column-filter-panel"): NodeListOf<MultiColumnFilterPanel>;
        getElementsByTagName(qualifiedName: "smart-multi-column-filter-panel"): HTMLCollectionOf<MultiColumnFilterPanel>;
        getElementsByName(elementName: "smart-multi-column-filter-panel"): NodeListOf<MultiColumnFilterPanel>;
    }
}

/**Controls the placement of the close button within items in the filter panel when using a multi-column layout. You can use this property to retrieve the current position or specify a new position for the close button, determining where it appears relative to each filter panel item. */
export declare type MultiColumnFilterPanelCloseButtonPosition = 'left' | 'right';
/**Specifies the logical operator (such as AND or OR) used to combine or evaluate multiple items, determining how their conditions or values are collectively processed. */
export declare type MultiColumnFilterPanelOperator = 'and' | 'or';
export interface MultiComboInputProperties {
  /**
   * Sets or retrieves the animation mode for the element. When the property is set to 'none', all animations are disabled, and any ongoing or future animations will not be executed. For any other value, the corresponding animation behavior will be applied based on the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing for smoother user experience and reducing unnecessary searches.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Controls the visibility of close buttons when multiple items are selected. If enabled, close buttons will be displayed for each selected item, allowing users to remove individual items. If disabled, close buttons will be hidden, preventing users from removing selected items individually.
   * Default value: false
   */
  hideInputTagsCloseButton?: boolean;
  /**
   * Controls whether the background color of an item's tag is automatically set to match the value specified in the item's 'color' property. When enabled, if an item has a 'color' property defined, its tag background will automatically use that color. When disabled, the tag background will not be affected by the 'color' property.
   * Default value: true
   */
  colorItems?: boolean;
  /**
   * Specifies the source of data to be displayed in the MultiInput component. The dataSource can accept multiple formats:- An array of strings or numbers, where each entry is used as both the display value and the selection value of a list item.- An array of objects, where each object represents a list item. The object’s attributes (such as label and value) define the display text and internal value of each item.- A callback function that returns an array in either of the formats listed above.Use this property to flexibly provide static data or implement dynamic data loading for the MultiInput component.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Specifies whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically rendered with a visually distinct, disabled appearance.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the alignment or placement of the dropdown button relative to its parent element or container, such as positioning it to the left, right, center, or at a custom location within the interface. This property controls where the dropdown button will appear within its context.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height is determined by a corresponding CSS variable rather than a fixed value. If a specific height value is provided, it will override the CSS variable and directly set the dropdown’s height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable (typically a custom property defined in your stylesheet). You can override this behavior by providing a specific width value (such as "200px", "50%", etc.), which will directly set the dropdown's width instead of relying on the CSS variable.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies the expected type of information for the input element—such as a user's name, email, or address—and guides the browser on how to provide relevant autofill suggestions when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute. By setting values like 'on', 'off', 'name', 'email', 'organization', or 'street-address', you can instruct the browser on whether, and how, to assist the user with automated form filling. Proper use of this property enhances both the accuracy and security of autofill features, as well as improving the overall user experience.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the maximum number of matching items to display in the dropdown menu when a new autoComplete query is performed. By default, up to 8 items will be visible in the dropdown at any one time. If more matches are found, only the first 8 will be shown, while additional results can be accessed through scrolling or pagination, depending on the implementation.
   * Default value: 8
   */
  items?: number;
  /**
   * Gets or sets the 'unlockKey' property, which is a unique code required to activate or unlock the product's full features. Use this key to enable product access or retrieve the current key assigned to the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property works together with the messages property to display content or interface text in the selected language. When the language is set, the corresponding messages from the messages object will be used for localization.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom formatting for messages returned by the Localization Module, enabling you to modify message content, structure, or presentation before they are displayed or processed by your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves an object containing strings used for localization within the widget. This property allows you to define custom, translatable text for various user interface elements, ensuring that the widget can display content in different languages. It is used in combination with the locale property to adapt the widget's text to the selected language or regional setting.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must enter into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when data is submitted to the server, enabling key-value pairs to be correctly processed. This is essential in HTML forms to ensure each input's data is associated with its corresponding name.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the dropdown menu is currently open (visible) or closed (hidden).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value to the user.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Controls whether the items in the drop-down menu are visually displayed as pill-shaped elements. When enabled, each item will have a rounded, pill-like appearance. When disabled, items will use the default style.
   * Default value: false
   */
  pills?: boolean;
  /**
   * Defines or retrieves the search query used to filter items in the data source. This query is utilized by the autoComplete operation to determine which items are displayed based on user input. If the value is set to an empty string, all items from the data source are shown and no filtering is applied.
   * Default value: 
   */
  query?: string | number;
  /**
   * Specifies the autocomplete query mode, which defines how user input is matched against available options during the autocomplete operation. This property selects the matching algorithm used to filter and suggest results based on the entered query, such as prefix matching, exact matching, or fuzzy searching.
   * Default value: containsIgnoreCase
   */
  queryMode?: MultiComboInputQueryMode | string;
  /**
   * Determines whether the user can enter or edit text within the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the component's behavior when a dataSource is provided:  - If readonly is false, the element functions as a ComboBox, allowing users to type custom values as well as select from the list.- If readonly is true, the element behaves as a DropDownList, restricting the user to select only from the available options without the ability to enter custom text.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Configures or retrieves the value that determines whether the element's alignment is adjusted to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's layout and text direction are oriented to accommodate RTL reading order for proper localization.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the character or string used to separate individual tags within the input field. This delimiter defines how the input is parsed into distinct tags when users enter multiple values.
   * Default value: ""
   */
  separator?: string;
  /**
   * Specifies if selection is restricted to a single item at a time, preventing users from selecting multiple items simultaneously.
   * Default value: false
   */
  singleSelect?: boolean;
  /**
   * Controls the display of an extra option at the top of the options list, which enables users to select or deselect all items with a single action. When enabled, this option appears as the first item, providing a convenient way to manage the entire selection at once.
   * Default value: false
   */
  selectAll?: boolean;
  /**
   * Gets or sets an array containing the currently selected values.  This property allows you to retrieve the list of selected items or update the selection by assigning a new array of values. Each value in the array corresponds to an item that has been selected.
   * Default value: 
   */
  selectedValues?: any;
  /**
   * Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted from A to Z; if false, the original order will be preserved.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting algorithm to be used when sort is enabled. Accepts either asc for ascending order or desc for descending order, determining how the data will be organized.
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies how selected items are displayed in the input field: either as individual tags for each selected item from the popup, or as a single tag that displays the total number of items selected.
   * Default value: many
   */
  inputTagsMode?: MultiComboInputInputTagsMode | string;
  /**
   * Specifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styles, ensuring consistency with the application's design scheme.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the type of input that the field accepts, such as text, email, password, number, or date. The selected input type defines both the format of data that can be entered by the user and the behavior of the input field, including related validation and the appearance of the on-screen keyboard (on supported devices).
   * Default value: ""
   */
  type?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus. As a result, users will not be able to navigate to the element using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets or retrieves the current value of the element. When used as a setter, it assigns the specified value to the element (such as updating the text in an input field or the selected option in a dropdown). When used as a getter, it returns the element’s current value.
   * Default value: ""
   */
  value?: string;
}
/**
 MultiComboInput specifies an input field where the user can enter data. Auto-complete options with checkbxoes are displayed for easier input. Allows multiple selection. Selected items are added to the input field as tags.
*/
export interface MultiComboInput extends BaseElement, MultiComboInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the current selection, such as highlighting different text or choosing a new option within a selectable element. It enables you to respond programmatically to changes in the selected content or options.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu by hiding its content and updating its state to indicate that it is no longer visible or active.
   */
  close(): void;
  /**
   * Guarantees that the currently selected item remains within the visible area of the container, automatically scrolling as needed to bring the active item into view whenever selection changes.
   */
  ensureVisible(): void;
  /**
   * Displays the dropdown menu, allowing users to view and select available options.
   */
  open(): void;
  /**
   * Selects all the text within the input field. If the input field is set to <b>readonly</b>, the method will focus the element instead, since text selection is not allowed for readonly inputs.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-multi-combo-input"): MultiComboInput;
        querySelector(selectors: "smart-multi-combo-input"): MultiComboInput | null;
        querySelectorAll(selectors: "smart-multi-combo-input"): NodeListOf<MultiComboInput>;
        getElementsByTagName(qualifiedName: "smart-multi-combo-input"): HTMLCollectionOf<MultiComboInput>;
        getElementsByName(elementName: "smart-multi-combo-input"): NodeListOf<MultiComboInput>;
    }
}

/**Specifies the autocomplete query mode, which defines how user input is matched against available options during the autocomplete operation. This property selects the matching algorithm used to filter and suggest results based on the entered query, such as prefix matching, exact matching, or fuzzy searching. */
export declare type MultiComboInputQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
/**Specifies how selected items are displayed in the input field: either as individual tags for each selected item from the popup, or as a single tag that displays the total number of items selected. */
export declare type MultiComboInputInputTagsMode = 'one' | 'many';
export interface MultiInputProperties {
  /**
   * Gets or sets the animation mode. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching results after the user starts typing in the autocomplete field. This delay helps control how quickly suggestions appear, allowing for smoother user experience and reducing unnecessary search operations as the user types.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Specifies the source of data used to populate the MultiInput component. The 'dataSource' property accepts one of the following:- 'Array of Strings or Numbers:' Each element is rendered as a selectable item in the MultiInput list.- 'Array of Objects:' Each object should contain properties, typically such as 'label' (the display text) and 'value' (the underlying value), to define the characteristics of each list item.- 'Callback Function:' A function that returns an array of items in either of the above formats.This flexible configuration allows you to define static lists, complex data structures, or dynamically load items as needed.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Specifies whether the element is active and interactive (enabled), or inactive and unresponsive to user interactions (disabled). When set to disabled, the element cannot be clicked, selected, or modified by the user.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the location where the dropdown button will appear relative to its parent element. Possible values typically include options such as 'left', 'right', 'top', or 'bottom', allowing you to control the visual placement of the button within the user interface.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height will be determined by the associated CSS variable. If you provide a specific value (e.g., '200px', '20rem'), it will override the default CSS-controlled height and explicitly set the dropdown's height to the specified value.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is an empty string ('""'), meaning the dropdown's width is determined by a corresponding CSS variable. You can override this behavior by explicitly setting a value (e.g., '"200px"', '"50%"') to directly control the dropdown's width via inline styles, rather than relying on the CSS variable.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies the intended purpose of the input field and indicates to the browser what type of information is expected from the user. This setting guides the browser in offering automated assistance, such as autocomplete suggestions, when the input is used within a form. The value corresponds directly to the standard HTML autocomplete attribute, which helps user agents (such as browsers) determine whether and how to autofill the field. You can assign values such as 'on' (enable autocomplete), 'off' (disable autocomplete), or more specific values like 'name', 'organization', 'street-address', 'email', and others, to optimize the autofill behavior and improve the user experience.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the maximum number of matched items to display in the dropdown list in response to a new autoComplete query. By default, up to 8 items will be shown in the dropdown. If more items match the query, only the first 8 will be visible, ensuring the dropdown remains concise and user-friendly. Adjust this value to control how many results are presented to users at once.
   * Default value: 8
   */
  items?: number;
  /**
   * Sets or retrieves the 'unlockKey' property, a unique key or code required to unlock access to the product’s features or full functionality. Use this property to provide the necessary unlock key when granting access, or to obtain the currently set unlock key.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for the component. This property determines which set of localized messages, defined in the messages property, will be displayed. When you update the language, the component automatically uses the corresponding message set from messages to reflect the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows developers to customize the formatting of messages returned by the Localization Module. This function receives the original message and relevant context, enabling dynamic modification—such as value interpolation, date and number formatting, or applying custom transformations—before the finalized message is delivered to the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the set of text strings used within the widget, allowing these strings to be customized for different languages or regions. This property works together with the locale property to provide localization support, ensuring that UI labels, messages, and other user-facing text can be displayed appropriately based on the selected language.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will appear, displaying a list of items that match the user's input.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Sets or retrieves the value of the element's "name" attribute. This attribute is used to identify form elements when submitting data through an HTML form. The value assigned to the "name" attribute is sent as the key in the key-value pair for the form data, allowing the server to process the input accordingly.
   * Default value: ""
   */
  name?: string;
  /**
   * Indicates whether the dropdown menu is currently open (true) or closed (false).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text displayed inside the input field before the user enters a value. This text typically provides a hint or example of the expected input.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Sets or retrieves the query string used to filter the list of items. This query is applied during the autoComplete operation to determine which items are shown based on the user's input. If the query is an empty string, all items from the data source are displayed without any filtering.
   * Default value: 
   */
  query?: string | number;
  /**
   * Specifies the query mode used for the autocomplete feature. This property defines how user input is matched against available options, determining the matching algorithm (e.g., prefix, infix, or token matching) applied during autocomplete operations. Adjust this setting to control how search suggestions are generated and filtered based on the user's query.
   * Default value: containsIgnoreCase
   */
  queryMode?: MultiInputQueryMode | string;
  /**
   * Controls whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property specifies how the element behaves if a dataSource is provided:  - If readonly is false, the element functions as a ComboBox, allowing users to either type custom text or select from the list.  - If readonly is true, the element acts as a DropDownList, restricting input to selection only from the available list items; custom text entry is not allowed.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is commonly used in languages such as Arabic or Hebrew. When enabled, the content within the element will align and flow appropriately to support RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the character or string used to separate multiple selected items within the input field. This delimiter controls how selected values are displayed and parsed, ensuring each item is clearly distinguished in the input.
   * Default value: ","
   */
  separator?: string;
  /**
   * Retrieves or assigns an array containing the currently selected values. Each item in the array represents a selected option, allowing for multiple selection handling.
   * Default value: 
   */
  selectedValues?: any;
  /**
   * Specifies whether an additional item should be displayed at the top of the options list. This item functions as a "Select All / Deselect All" control, allowing users to quickly select or unselect all available options in the list.
   * Default value: false
   */
  selectAll?: boolean;
  /**
   * Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted from A to Z; if set to false, the items will retain their original, unsorted order.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order used when sort is enabled. Accepts either asc for ascending order or desc for descending order.
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the type of input allowed in the field. The input type controls the kind of data the user can enter (such as text, email, number, password, etc.), which helps ensure data is entered in the correct format and may trigger specialized keyboards or validation behaviors on supported devices.
   * Default value: ""
   */
  type?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via keyboard navigation (such as the Tab key).
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element, or retrieves its current value. Use this property or method to programmatically access or update the element’s value in the DOM. Commonly applied to input fields, textareas, or form elements to manage user input or display dynamic content.
   * Default value: ""
   */
  value?: string;
}
/**
 MultiInput specifies an input field where the user can enter data. Auto-complete options are displayed for easier input. Allows multiple selection. Selected items are added to the input's value.
*/
export interface MultiInput extends BaseElement, MultiInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user changes the current selection within the component. It occurs whenever an item's selection state is updated—such as when a user selects, deselects, or switches between options—allowing you to respond to changes in the selected value or items.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu, hiding all available options from view and returning the component to its default inactive state.
   */
  close(): void;
  /**
   * Ensures that the currently selected item remains visible within its container, automatically scrolling the view if necessary to prevent the active item from being hidden or obscured.
   */
  ensureVisible(): void;
  /**
   * Displays the dropdown menu, allowing users to view and select available options.
   */
  open(): void;
  /**
   * Selects all text within the input field. If the input field has the <b>readonly</b> attribute, the method instead focuses the element without selecting its text.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-multi-input"): MultiInput;
        querySelector(selectors: "smart-multi-input"): MultiInput | null;
        querySelectorAll(selectors: "smart-multi-input"): NodeListOf<MultiInput>;
        getElementsByTagName(qualifiedName: "smart-multi-input"): HTMLCollectionOf<MultiInput>;
        getElementsByName(elementName: "smart-multi-input"): NodeListOf<MultiInput>;
    }
}

/**Specifies the query mode used for the autocomplete feature. This property defines how user input is matched against available options, determining the matching algorithm (e.g., prefix, infix, or token matching) applied during autocomplete operations. Adjust this setting to control how search suggestions are generated and filtered based on the user's query. */
export declare type MultiInputQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
export interface MultilineTextBoxProperties {
  /**
   * Specifies the animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. Use this property to control whether and how animations are applied.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior.
   * Default value: none
   */
  autoCapitalize?: MultilineTextBoxAutoCapitalize | string;
  /**
   * Specifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information.
   * Default value: off
   */
  autoComplete?: MultiLineTextBoxAutoComplete | string;
  /**
   * Controls whether the element automatically increases its height to accommodate input that exceeds its current vertical space. When enabled, the element will expand vertically as more content is entered, preventing scrollbars from appearing.
   * Default value: false
   */
  autoExpand?: boolean;
  /**
   * Specifies whether the input element should automatically receive focus when the page finishes loading, allowing users to start interacting with it immediately without manually clicking or tabbing into the field.
   * Default value: false
   */
  autoFocus?: boolean;
  /**
   * The cols attribute sets the visible width (measured in average character columns) of a textarea input field in a form. Its value must be a positive integer, determining how many characters are visible in a single row. If the cols attribute is not provided, the textarea defaults to displaying 20 character columns in width. Note: The cols attribute is not applicable to  elements; it is specific to  elements.
   * Default value: 20
   */
  cols?: number;
  /**
   * Controls whether the element is active or inactive. When enabled, the element can interact with user input; when disabled, the element is unresponsive and typically appears visually distinct to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form.
   * Default value: default
   */
  displayMode?: TextBoxDisplayMode | string;
  /**
   * Specifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action.
   * Default value: newLine
   */
  enterKeyBehavior?: MultilineTextBoxEnterKeyBehavior | string;
  /**
   * Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of an existing  element within the same HTML document. This allows input or button elements to be associated with a form, even if they are not nested inside the form tag itself.
   * Default value: ""
   */
  form?: string;
  /**
   * Provides supplementary helper text displayed beneath the element. This text becomes visible only when the element is focused, offering users additional guidance or context during interaction.
   * Default value: null
   */
  hint?: any;
  /**
   * Determines whether the horizontal scrollbar is visible, hidden, or displayed automatically based on the content's width.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Specifies the expected purpose of the input field and determines whether the browser (user agent) is allowed to offer automated assistance, such as autofill suggestions, when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute, enabling the browser to understand what kind of information should be entered into the field. Accepted values include 'on', 'off', or context-specific keywords such as 'name', 'email', 'organization', or 'street-address'. Setting an appropriate value improves user experience by allowing the browser to assist in accurately and efficiently filling out form fields with relevant data.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Positions the label above the input element. The label will always be visible and displayed above the input field, providing clear identification for the corresponding input regardless of user interaction or input state.
   * Default value: ""
   */
  label?: string;
  /**
   * Defines or retrieves the unlockKey value used to authenticate and grant access to the product's locked features. This property acts as a security credential required to unlock and utilize restricted functionality within the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Defines or retrieves the current language code (e.g., "en", "fr", "es") to be used for localization. This property works together with the messages property, allowing the application to display the appropriate translations based on the selected language. When setting this value, ensure that corresponding translations exist within the messages object for consistent multilingual support.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify message content, structure, or placeholders before they are displayed to users, enabling tailored localization outputs that meet specific application or user requirements.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves the maximum number of characters allowed in the input field. If set, users cannot enter more characters than this limit.
   * Default value: null
   */
  maxLength?: number;
  /**
   * Specifies or retrieves the minimum number of characters that a user is required to enter in the input field. If the user enters fewer characters than the specified minimum, the input will be considered invalid.
   * Default value: 0
   */
  minLength?: number;
  /**
   * Defines or retrieves an object containing key-value pairs for all user-facing strings within the widget, enabling text customization and localization. This property works in conjunction with the locale property to display translated content according to the selected language or locale. Use this to provide translated strings for different languages, ensuring your widget can support internationalization.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting an HTML form, enabling the form data to be correctly organized and transmitted to the server. This is essential for backend processing and data association.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the placeholder text that appears inside the element when it is empty or no value has been entered. This text serves as a hint or example to guide users on the expected input format or content.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * If enabled, users will be prevented from interacting with the element. This means that all user actions, such as clicks, typing, or other input events, will be disabled for this element.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Indicates that the user is required to enter a value in this field before the form can be submitted. If the field is left empty, the form submission will be blocked and the user will be prompted to provide a valid input. This ensures that essential information is collected before processing the form.
   * Default value: false
   */
  required?: boolean;
  /**
   * Controls whether the user can resize the element. When enabled, a resize handle appears in the bottom-right corner of the input area, allowing the user to manually adjust its size. If disabled, the element remains a fixed size and no resize indicator is shown.
   * Default value: false
   */
  resizable?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) languages, ensuring proper display and support for locales that use RTL fonts and text direction (such as Arabic or Hebrew).
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the number of text lines that are visible within the control at one time. This determines the vertical size of the control and how much content is displayed to the user without scrolling.
   * Default value: 5
   */
  rows?: number;
  /**
   * Determines if the entire content of the input field will be automatically highlighted (selected) when the input gains focus, allowing users to easily replace or copy the existing text.
   * Default value: false
   */
  selectAllOnFocus?: boolean;
  /**
   * Specifies the position (zero-based index) of the last character within the currently selected text range. This value represents the character immediately after the end of the selection; if no text is selected, it is equal to the starting index of the selection.
   * Default value: 0
   */
  selectionEnd?: number;
  /**
   * Specifies the zero-based index position of the first character included in the current text selection. This value represents where the selection begins within the overall string or text content.
   * Default value: 0
   */
  selectionStart?: number;
  /**
   * Indicates whether the element's text should be checked for spelling and grammar errors by the browser. When enabled, the browser will highlight possible mistakes and may provide correction suggestions to the user.
   * Default value: false
   */
  spellCheck?: boolean;
  /**
   * Specifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, and other visual properties.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, the element is not focusable, meaning it cannot receive focus via keyboard navigation, mouse interaction, or scripting.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Provides functionality to retrieve (get) the current value of the element or assign (set) a new value to it. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically access or modify the user's input or the element's content.
   * Default value: ""
   */
  value?: string;
  /**
   * Determines whether the vertical scrollbar is displayed, hidden, or automatically shown based on the content's overflow within the container. This property allows you to control how and when users can scroll vertically.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
  /**
   * Specifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management.
   * Default value: soft
   */
  wrap?: MultilineTextBoxWrap | string;
}
/**
 Defines a multi-line text input control. MultilineTextBox can hold an unlimited number of characters, and the text renders in a fixed-width font
*/
export interface MultilineTextBox extends BaseElement, MultilineTextBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the content of the text box, such as by typing, deleting, or pasting text. It detects any change to the input’s value and can be used to respond in real-time as the user edits the text box.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value, type)
   *  oldValue - The previous value of the element before it was changed.
   *  value - The new value of the element.
   *  type - Indicates when the element was called, e.g. on blur or submit.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Sets keyboard and interaction focus to the element, making it the active target for user input and accessibility tools. This enables users to interact with the element (e.g., typing in a field or activating controls) and allows screen readers to announce its presence.
   */
  focus(): void;
  /**
   * This method resets the value of the element box to its original, default state as defined upon initialization. Any user input or programmatically modified content will be cleared, returning the element box to its initial configuration.
   */
  reset(): void;
  /**
   * Returns the text currently selected by the user within the active input field, textarea, or document. If no text is selected, the function returns an empty string.
   * @param {string} displayMode. If <b>displayMode</b> is set to 'escaped', the value returned from the method contains escaped special characters.
   * @returns {string}
   */
  selection(displayMode: string): string;
  /**
   * Extracts a specified portion of the input text based on the provided arguments, such as start and end positions or a pattern. If no arguments are given, the entire input text is selected by default. This function enables precise control over which segment of the text is retrieved or manipulated.
   * @param {any} rangeFrom?. Determines the start index of the text selection.
   * @param {any} rangeTo?. Determines the end index of the text selection.
   */
  select(rangeFrom?: any, rangeTo?: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-multiline-text-box"): MultilineTextBox;
        querySelector(selectors: "smart-multiline-text-box"): MultilineTextBox | null;
        querySelectorAll(selectors: "smart-multiline-text-box"): NodeListOf<MultilineTextBox>;
        getElementsByTagName(qualifiedName: "smart-multiline-text-box"): HTMLCollectionOf<MultilineTextBox>;
        getElementsByName(elementName: "smart-multiline-text-box"): NodeListOf<MultilineTextBox>;
    }
}

/**Specifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior. */
export declare type MultilineTextBoxAutoCapitalize = 'none' | 'characters' | 'words';
/**Specifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information. */
export declare type MultiLineTextBoxAutoComplete = 'on' | 'off';
/**Defines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form. */
export declare type TextBoxDisplayMode = 'default' | 'escaped';
/**Specifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action. */
export declare type MultilineTextBoxEnterKeyBehavior = 'clearOnSubmit' | 'newLine' | 'submit';
/**Specifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management. */
export declare type MultilineTextBoxWrap = 'hard' | 'soft' | 'off';
export interface MultiSplitButtonProperties {
  /**
   * Sets or retrieves the current animation mode for the component. When the property is set to 'none', all animations are disabled. For other supported values, the animation mode will determine how visual transitions are rendered.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the data source that provides the information required to generate the element’s permanently visible buttons. This property defines where and how the button data is retrieved, ensuring the buttons remain constantly displayed on the element.
   * Default value: 
   */
  buttonsDataSource?: string[];
  /**
   * Specifies the data source from which the multi-split button's dropdown menu retrieves and displays its list of options. This setting defines what content appears in the dropdown and enables dynamic or static population of menu items.
   * Default value: []
   */
  dataSource?: any;
  /**
   * Controls whether the jqxMultiSplitButton component is active or inactive. When enabled, users can interact with the jqxMultiSplitButton; when disabled, the component becomes non-interactive and appears visually inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Controls the visibility of the loading indicator, showing it when active and hiding it when not needed. This allows users to receive visual feedback during content loading or processing operations.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Defines or retrieves the displayMember property, which determines the name of the object property to display in the UI. When binding a data collection using the dataSource property, displayMember specifies which property of each data object should be shown to the user. For example, if dataSource is an array of user objects, setting displayMember to "name" will display the value of the "name" property for each user in the collection.
   * Default value: """"
   */
  displayMember?: string;
  /**
   * Specifies the parent container element for the button’s dropdown list (popup). Accepts a CSS selector, an element ID, or the literal value 'body' as the target container. Use this option when a CSS property from an ancestor element is affecting the visibility or display of the dropdown list. By setting the parent container, you can control where the dropdown is rendered in the DOM, helping to resolve issues with overflow, clipping, or z-index caused by parent elements.
   * Default value: "null"
   */
  dropDownAppendTo?: string;
  /**
   * Specifies the location where the dropdown button will be displayed relative to its parent element. Possible values may include options such as "left," "right," "top," or "bottom," allowing you to control the alignment and placement of the dropdown button within the user interface.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the behavior of the element's drop-down functionality.  - In 'none' mode, the drop-down will never open, regardless of any user interaction.  - In 'dropDownButton' mode, the drop-down opens only when the dedicated drop-down button on the element is clicked; clicking other parts of the element will have no effect.  - In 'auto' mode, the drop-down opens when any area of the element's top section is clicked, not just the button—providing a more flexible and user-friendly experience.
   * Default value: dropDownButton
   */
  dropDownOpenMode?: DropDownOpenMode | string;
  /**
   * When this property is enabled, opening the element’s dropdown will render a transparent overlay layer between the dropdown menu and the rest of the page content. This overlay visually separates the dropdown from the background and can help intercept clicks outside the dropdown to close it or prevent interaction with other elements while the dropdown is open.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the vertical placement of the drop-down list relative to its trigger element. When set to 'auto', the component dynamically chooses whether to display the drop-down above or below the trigger based on available space within the viewport, ensuring that the list remains fully visible without overflow.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies whether the filtering feature is currently active. When set to true, filtering is enabled and data will be filtered according to the specified criteria; when false, all data is shown without applying any filters.
   * Default value: false
   */
  filterable?: boolean;
  /**
   * Specifies the filtering behavior applied to the dropdown list when users type or search. This property controls how the available options are filtered and displayed, such as matching items that contain, start with, or exactly match the user's input.
   * Default value: startsWithIgnoreCase
   */
  filterMode?: FilterMode | string;
  /**
   * Specifies the placeholder text that appears inside the dropdown list's filter input field, providing guidance or example input to help users understand what they can type to filter the list options.
   * Default value: ""
   */
  filterInputPlaceholder?: string;
  /**
   * When enabled, this setting organizes items into groups based on the first letter of each item's value. Note: This option cannot be used if your dataSource is already grouped, as it only applies to flat (ungrouped) collections.
   * Default value: false
   */
  grouped?: boolean;
  /**
   * Gets or sets the groupMember property. If groupMember is not explicitly set, it defaults to using the value of the source object's group property.
   * Default value: "null"
   */
  groupMember?: string;
  /**
   * Enhances or retrieves the value of the incrementalSearchDelay property. This property defines the time interval, in milliseconds, that must pass after the user stops typing before the previous search string is cleared. The countdown begins as soon as the user ceases typing, ensuring that only periods of inactivity longer than the specified delay will reset the search input.
   * Default value: 700
   */
  incrementalSearchDelay?: number;
  /**
   * Gets or sets the current mode for incremental search, which determines how search input is processed as the user types.
   * Default value: startsWithIgnoreCase
   */
  incrementalSearchMode?: SearchMode | string;
  /**
   * Specifies the vertical dimension (height) of each item, in pixels or another defined unit. This property controls how tall each item appears within the component, affecting layout and spacing.
   * Default value: null
   */
  itemHeight?: number | null;
  /**
   * The 'itemTemplate' property is a string that specifies the 'id' attribute of an 'HTMLTemplateElement' present in the DOM. This property is used to reference the corresponding template when generating list items, allowing the application to clone and insert the template’s content for each item in the list dynamically. By using an 'HTMLTemplateElement', you can define the structure and layout of individual list items in a reusable, maintainable way.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Specifies the text to be shown alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the component. This text provides context or feedback to users during loading states.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the on-screen location where the loading indicator will be displayed (e.g., top, bottom, center, or custom coordinates).
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Sets or retrieves the unlockKey property, a unique key required to unlock access to the product’s features or content. Use this to programmatically provide or verify the unlock key during authentication or activation processes.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., "en", "fr", "es") for localization. This property works together with messages, ensuring the appropriate language-specific messages are displayed or retrieved based on the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function used in the localization module, typically invoked to handle language changes, translate content, or manage locale-specific operations during application runtime.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing customizable strings and messages displayed by the widget, enabling support for localization and internationalization. This property works together with the language setting to provide appropriate translations based on the user's selected language. Use this object to specify translations for all widget text elements.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies whether the popup is currently visible (open) or hidden (closed) on the screen. This property controls the display state of the popup component.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Prevents users from interacting with the element, disabling all input events such as clicks, typing, or form submissions. The element remains visible, but users cannot select, activate, or modify it in any way.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets the selected indexes of items within the button's dropdown menu. This property allows you to programmatically retrieve or update which items in the dropdown are currently selected.
   * Default value: 
   */
  selectedIndexes?: number[];
  /**
   * Gets or sets the selected values in the button's drop-down menu. This property allows you to retrieve the currently selected options or specify which options should be selected within the drop-down associated with the button.
   * Default value: 
   */
  selectedValues?: string[];
  /**
   * Specifies the maximum number of items a user is allowed to select. If set to 1, only single selection is permitted; higher values enable multiple selections up to the defined limit.
   * Default value: one
   */
  selectionMode?: MultiSplitButtonSelectionMode | string;
  /**
   * Specifies whether the items displayed in the dropdown menu are automatically sorted in alphabetical order. If enabled, all dropdown items will appear in alphabetical sequence; if disabled, items will retain their original order as provided.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, backgrounds, and other visual properties. This setting allows for consistent visual presentation across the application or component.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via keyboard navigation (such as the Tab key).
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the property of the item object that holds its unique value. This property is used to retrieve or assign the item's value, which is typically leveraged for data binding, form submission, or identifying items within a collection. The value is stored in the specified key of the item object.
   * Default value: """"
   */
  valueMember?: string;
  /**
   * Specifies whether virtualization is enabled for the button’s drop-down list. When set to true, virtualization improves performance by only rendering items visible in the viewport, which is useful for large datasets. When set to false, all items are rendered regardless of visibility.
   * Default value: false
   */
  virtualized?: boolean;
}
/**
 Buttons group with DropDown and multiple action buttons.
*/
export interface MultiSplitButton extends BaseElement, MultiSplitButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user clicks on the action button, allowing you to execute custom functionality in response to the user's interaction.
	* @param event. The custom event.    */
  onButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event fires whenever the user modifies the current selection, such as when they highlight different text or select a new item from a list. It is triggered immediately after the selection change occurs, allowing developers to respond dynamically to user selection actions.
	* @param event. The custom event. Custom data event was created with: ev.detail(addedItems, disabled, index, label, removedItems, selected, value)
   *  addedItems - An array of List items that have been selected.
   *  disabled - A flag indicating whether or not the item that caused the change event is disabled.
   *  index - The index of the List item that triggered the event.
   *  label - The label of the List item that triggered the event.
   *  removedItems - An array of List items that have been unselected before the event was fired.
   *  selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
   *  value - The value of the List item that triggered the event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the drop-down list associated with the button is closed, either by user interaction or programmatically. It allows you to perform actions or execute logic after the drop-down menu has been dismissed.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the dropdown list associated with the button begins to close, either due to user interaction or programmatic actions. It allows you to execute custom logic just before the dropdown is fully closed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on an individual item, allowing you to execute custom logic in response to item selection. The event provides details about the clicked item, such as its identifier or associated data, which can be used for further processing or navigation.
	* @param event. The custom event. Custom data event was created with: ev.detail(disabled, index, label, selected, value)
   *  disabled - Indicates whether the List item that was clicked is disabled or not.
   *  index - Indicates the index of the List item that was clicked.
   *  label - The label of the List item that was clicked.
   *  selected - Indicates whether the List item that was clicked is selected or not.
   *  value - The value of the List item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the drop-down list of the button is opened, either by a user action such as clicking or by programmatic interaction. It allows you to perform custom actions or update the UI in response to the drop-down list becoming visible.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered just before the button's dropdown list becomes visible, allowing you to perform actions or modify the dropdown content as it is about to open.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user reaches the bottom of the drop-down list by scrolling, indicating that all available list items have been viewed. This can be used to implement features such as lazy loading or dynamic data fetching when additional items need to be loaded into the drop-down.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls to the very top (the first item) of the drop-down list. It can be used to detect when the user has reached the beginning of the list, for actions such as loading more items or updating the UI accordingly.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the dropdown list associated with the button, hiding its options from view.
   */
  close(): void;
  /**
   * Returns an instance of the item that appears in the element’s dropdown menu. This instance represents the selected item from the dropdown list, allowing access to its properties and methods.
   * @param {string} value. The value of an item from the drop down list or a button.
   * @returns {HTMLElement}
   */
  getItem(value: string): HTMLElement;
  /**
   * Returns an array containing all items currently present in the dropdown list of the split button component. Each array element represents an individual dropdown item, allowing you to access or manipulate the complete set of options available in the split button's dropdown.
   * @returns {any[]}
   */
  items(): any[];
  /**
   * Inserts a new item into the dropdown list at the specified index, shifting existing items as needed. The new item will appear at the given position within the list, and subsequent items will be moved down to accommodate it.
   * @param {number} position. The position where the item must be inserted.
   * @param {any} value. The value of the new item.
   */
  insert(position: number, value: any): void;
  /**
   * Displays the drop-down list associated with the splitButton control, allowing users to view and select available options.
   */
  open(): void;
  /**
   * Removes an item located at the specified index from the drop-down list, updating the list to exclude the removed item and adjusting the positions of subsequent items accordingly.
   * @param {number} position. The position of the removed item.
   */
  removeAt(position: number): void;
  /**
   * Updates a specific item within the drop-down list by modifying its properties or replacing its value with new data. This operation allows you to dynamically change the content displayed for a selected option in the drop-down menu.
   * @param {number} position. The position where the item must be updated.
   * @param {any} value. The value of the updated item.
   */
  update(position: number, value: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-multi-split-button"): MultiSplitButton;
        querySelector(selectors: "smart-multi-split-button"): MultiSplitButton | null;
        querySelectorAll(selectors: "smart-multi-split-button"): NodeListOf<MultiSplitButton>;
        getElementsByTagName(qualifiedName: "smart-multi-split-button"): HTMLCollectionOf<MultiSplitButton>;
        getElementsByName(elementName: "smart-multi-split-button"): NodeListOf<MultiSplitButton>;
    }
}

/**Specifies the maximum number of items a user is allowed to select. If set to 1, only single selection is permitted; higher values enable multiple selections up to the defined limit. */
export declare type MultiSplitButtonSelectionMode = 'none' | 'oneOrManyExtended' | 'zeroOrMany' | 'oneOrMany' | 'zeroOrOne' | 'one' | 'checkBox' | 'radioButton';
export interface NumberInputProperties {
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Setting this property to other supported values enables specific animation behaviors as defined by the available modes.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls whether the element is active and interactive (enabled) or inactive and unresponsive (disabled). When set to disabled, the element cannot be interacted with by users, and its associated actions or events will not trigger.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the intended purpose of the input field and indicates the level of permission granted to the user agent (such as a browser or password manager) to automatically assist in completing the input when used within a form. This attribute provides guidance to browsers about the type of data expected in the field, enabling features like autofill and enhanced accessibility. It corresponds to the standard HTML autocomplete attribute and accepts values such as 'on' (to enable autocomplete), 'off' (to disable autocomplete), or more specific tokens like 'name', 'email', 'organization', 'street-address', and others, enabling browsers to supply relevant information where appropriate. For a full list of valid values and their meanings, refer to the official HTML documentation for the autocomplete attribute.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Gets or sets the unlockKey, a unique string required to authenticate and unlock access to the product's features. Use this property to retrieve the current unlockKey or assign a new one to enable product usage.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., "en", "fr") used for localization. This property should be used together with the messages property, which contains the corresponding translated text for each supported language. Setting this value determines which set of messages will be displayed to the user.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify the structure, content, or appearance of localized messages before they are delivered to the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the maximum numeric value that the input field can accept or display. Any value entered that exceeds this limit will be considered invalid.
   * Default value: 9999999999
   */
  max?: number;
  /**
   * Defines or retrieves an object containing all the text strings used within the widget that can be localized. This enables the widget's user interface to display text in different languages, depending on the selected locale property. Use this object to provide translations for various widget messages, labels, and prompts to support internationalization.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum numerical value that users are allowed to enter or select within the input field. This value sets the lower limit for acceptable input, ensuring that any input below this threshold will be considered invalid.
   * Default value: -9999999999
   */
  min?: number;
  /**
   * Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements and is used as the key when submitting form data to a server. This allows the form data associated with this element to be sent and processed correctly when the form is submitted.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies or retrieves the format in which the element's value is represented. This determines how the value is displayed to the user and how it is processed or stored in the underlying data model.
   * Default value: [object Object]
   */
  numberFormat?: any;
  /**
   * Specifies the placeholder text that appears inside the input field before the user enters a value. This text provides a hint or example of the expected input format or content.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies whether the user is allowed to type or modify text within the input field. If set to false, the input becomes read-only and the user cannot enter or change its contents.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that determines whether the element’s text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element adjusts its layout and text flow to properly support RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies or retrieves the amount by which the element’s value increases or decreases when the user interacts with controls such as up/down arrows, sliders, or keyboard inputs. This determines the step interval for adjusting the element’s value.
   * Default value: 1
   */
  step?: number;
  /**
   * Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element. Selecting a theme customizes the design and user experience of the component.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to select the element using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Provides a way to retrieve (get) or assign (set) the current value of the element, typically used for form fields such as input, textarea, or select elements. When used as a getter, it returns the element's current value as a string. When used as a setter, it updates the element's value to the specified string.
   * Default value: 0
   */
  value?: any;
}
/**
 NumberInput specifies an input field where the user can enter a numbers.
*/
export interface NumberInput extends BaseElement, NumberInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user selects a different item or modifies the current selection. It occurs each time the selection state changes, allowing you to respond dynamically to user interactions such as choosing an option from a dropdown menu, highlighting text, or switching between selectable elements.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Returns the value converted to the specified format, ensuring that the output matches the required data type or structure (e.g., string, number, JSON object, date format) as requested by the caller.
   * @param {string | number} value. The value to be formatted by the method. 
   * @param {any} format?. The object that contains the formatting properties. The argument should contain Intl.NumberFormat valid properties. For example, { style: 'currency', currency: 'EUR' }
   * @returns {string}
   */
  getFormattedValue(value: string | number, format?: any): string;
  /**
   * Returns the numeric value corresponding to the given input. If the input is a number, it is returned as-is; if the input is a string or another type that can be converted to a number, its numeric equivalent is returned. If the input cannot be converted to a number, the function may return NaN or throw an error, depending on implementation.
   * @returns {number}
   */
  getValue(): number;
  /**
   * Selects the entire text within the input field. If the input is set to <b>readonly</b>, the function will focus the element instead of selecting its text."
   */
  select(): void;
  /**
   * Assigns a specified value to the input field, updating its displayed and underlying data. This ensures that the input reflects the current state or user-provided data within the form or component.
   * @param {string | number} value. The value to be set. 
   */
  setValue(value: string | number): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-number-input"): NumberInput;
        querySelector(selectors: "smart-number-input"): NumberInput | null;
        querySelectorAll(selectors: "smart-number-input"): NodeListOf<NumberInput>;
        getElementsByTagName(qualifiedName: "smart-number-input"): HTMLCollectionOf<NumberInput>;
        getElementsByName(elementName: "smart-number-input"): NodeListOf<NumberInput>;
    }
}

export interface NumericTextBoxProperties {
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, the selected mode determines how animations are displayed or executed within the component.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies or retrieves the character used as the decimal separator when formatting or parsing numeric values. This determines how fractional numbers are represented, for example, using a period ('.') or a comma (',') between the integer and fractional parts.
   * Default value: "."
   */
  decimalSeparator?: string;
  /**
   * Controls whether the jqxNumericTextBox component is active or inactive. When enabled, users can interact with and enter values in the numeric text box. When disabled, the component becomes read-only and user interaction is prevented.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the parent HTML element or container to which the Radix dropdown will be rendered or appended. This determines the dropdown's positioning context within the DOM and can affect its stacking, placement, and overflow behavior.
   * Default value: null
   */
  dropDownAppendTo?: any;
  /**
   * Controls whether a dropdown menu appears when the radix display button is clicked. If enabled, the dropdown presents selectable options for switching between different numeral systems: binary, octal, decimal, and hexadecimal. This allows users to easily change the numeral system used for number display or input.
   * Default value: false
   */
  dropDownEnabled?: boolean;
  /**
   * Controls whether users can increase or decrease the value in the jqxNumericTextBox component by scrolling the mouse wheel. When enabled, scrolling the wheel while the input is focused will increment or decrement the numeric value accordingly. When disabled, mouse wheel actions will have no effect on the value.
   * Default value: false
   */
  enableMouseWheelAction?: boolean;
  /**
   * Displays supplementary helper text below the element to provide users with additional information, guidance, or context related to the element's purpose or required input.
   * Default value: ""
   */
  hint?: string;
  /**
   * Specifies or retrieves the input format used by the widget. Modifying this property at runtime may result in a loss of precision, as existing data could be reformatted or truncated to fit the new format. It is recommended to set the input format during initialization to preserve data accuracy.
   * Default value: integer
   */
  inputFormat?: NumericTextBoxInputFormat | string;
  /**
   * Displays a descriptive text label above the element to provide context or identify its purpose for users.
   * Default value: ""
   */
  label?: string;
  /**
   * When this property is enabled, the binary and hexadecimal representations of a number are automatically padded with leading zeros as needed to ensure their length matches the specified wordLength. This guarantees consistent output width, even for numbers whose standard representations would be shorter than wordLength.
   * Default value: false
   */
  leadingZeros?: boolean;
  /**
   * Sets or retrieves the unlockKey used to activate and access the product’s full features. When provided, the unlockKey grants authorization to unlock the product; when requested, it returns the current unlock key in use.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for displaying localized content. It works together with the messages property, which should contain translations for each supported language. When the language is changed, the corresponding messages from the messages object are used for all localized text.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module. This function is typically invoked when localization events occur, such as language changes or updates to localized content, enabling the application to respond dynamically to these changes.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Sets or retrieves the maximum allowable value for the widget. This defines the highest value that the widget can accept or display.
   * Default value: null
   */
  max?: number | string;
  /**
   * Defines or retrieves an object containing customizable text strings used within the widget, enabling localization of UI elements such as labels, messages, and tooltips. This property works together with the locale setting to display the widget's interface in different languages according to the user's preferences.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "binary": "BIN",
   *     "octal": "OCT",
   *     "decimal": "DEC",
   *     "hexadecimal": "HEX",
   *     "integerOnly": "jqxNumericTextBox: The property  can only be set when inputFormat is integer.",
   *     "noInteger": "jqxNumericTextBox: the property  cannot be set when inputFormat is integer.",
   *     "significantPrecisionDigits": "jqxNumericTextBox: the properties significantDigits and precisionDigits cannot be set at the same time."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines or retrieves the lowest allowable value that the widget can accept. This property determines the minimum limit for user input or programmatically set values.
   * Default value: null
   */
  min?: number | string;
  /**
   * Specifies the unique name assigned to the control element, which can be used to identify and reference the control within forms, scripts, or styles. This name is often utilized when processing form data or targeting the control with JavaScript or CSS.
   * Default value: ""
   */
  name?: string;
  /**
   * Determines whether the value property can be set to null or an empty string. When enabled, assigning null or "" to the value property is allowed; otherwise, such assignments are prevented or ignored. Use this setting to control how empty or unset values are handled.
   * Default value: false
   */
  nullable?: boolean;
  /**
   * Controls whether the radix dropdown menu is open or closed. This property can be set to open or close the dropdown programmatically, or read to determine its current state. It is effective only when dropDownEnabled is set to true; otherwise, the dropdown cannot be opened regardless of this property's value.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Defines or retrieves the display format pattern used to present the input value when the element is not in focus. The specified pattern determines how the value appears to the user (for example, adding commas, decimal places, or currency symbols) while not editing. You can apply any formatting string supported by the NumberRenderer class as the outputFormatString, allowing for customized number formats such as '0,0.00' for thousands separators and two decimal places.
   * Default value: "null"
   */
  outputFormatString?: string;
  /**
   * Specifies the placeholder text that appears within the widget's input field when no value has been entered. This text provides a hint or example to guide the user on what kind of input is expected.
   * Default value: """"
   */
  placeholder?: string;
  /**
   * Specifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when inputFormat is set to either 'floatingPoint' or 'complex', ensuring precise control over decimal precision for these input types.
   * Default value: null
   */
  precisionDigits?: number;
  /**
   * Sets or retrieves the radix (base) used by the jqxNumericTextBox for displaying its value. The radix determines the numeral system (such as decimal, binary, octal, or hexadecimal) in which the numeric value is shown. This property is only applicable when the inputFormat is set to 'integer', allowing the widget to represent integers in different numeral systems based on the specified radix value.
   * Default value: 10
   */
  radix?: NumericTextBoxRadix | string;
  /**
   * Controls the visibility of the radix (base) selection button in the jqxNumericTextBox component. This option is relevant only when the inputFormat property is set to 'integer'. When enabled, users can toggle between different numeric bases (e.g., decimal, hexadecimal). When disabled, the radix selection button is hidden.
   * Default value: false
   */
  radixDisplay?: boolean;
  /**
   * Gets or sets the position of the radix (decimal separator) display button in the jqxNumericTextBox component. This property determines where the button for selecting a radix is shown within the numeric input field (e.g., to the left or right of the input box).
   * Default value: left
   */
  radixDisplayPosition?: NumericTextBoxDisplayPosition | string;
  /**
   * Controls whether the jqxNumericTextBox is in a read-only state. When set to true, the user cannot modify the value; when set to false, the input can be edited. This property can be used to retrieve the current read-only status or to update it programmatically.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, such as for languages like Arabic or Hebrew. When enabled, the element will display its content aligned appropriately for RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls whether the output value is displayed using scientific notation (e.g., 1e+6 instead of 1000000). This option is only relevant when the inputFormat property is set to 'integer'. If enabled, large or small integer values will be formatted in scientific notation; if disabled, values will be displayed in standard numeric form.
   * Default value: false
   */
  scientificNotation?: boolean;
  /**
   * Controls whether the dropdown displays the current value simultaneously in all four numeral systems (binary, octal, decimal, and hexadecimal). If enabled, users will see the value represented in each numeral system option within the dropdown list.
   * Default value: false
   */
  showDropDownValues?: boolean;
  /**
   * Controls whether units are displayed or hidden in the user interface. When enabled, units will be visible; when disabled, units will be concealed from view.
   * Default value: false
   */
  showUnit?: boolean;
  /**
   * Calculates the number of significant digits present in a given number. This operation is only valid when the inputFormat is set to either 'floatingPoint' or 'complex', ensuring that the input is a numerical value represented as a floating-point or complex number. Use this functionality to assess numerical precision and significance within these specific formats.
   * Default value: 8
   */
  significantDigits?: number;
  /**
   * Controls whether the spin buttons (increment and decrement controls) are displayed or hidden in the input field. When enabled, users can adjust the value using these buttons; when disabled, the spin buttons are not visible.
   * Default value: false
   */
  spinButtons?: boolean;
  /**
   * Specifies the amount of time, in milliseconds, to wait between consecutive activations of the spin buttons when a user holds down the control. This determines how quickly the value will increment or decrement while the button is continuously pressed.
   * Default value: 75
   */
  spinButtonsDelay?: number;
  /**
   * Specifies the amount of time, in milliseconds, to wait before starting the first repeated action when a spin button is held down. This initial delay determines how long the user must press and hold the button before automatic repeating begins.
   * Default value: 0
   */
  spinButtonsInitialDelay?: number;
  /**
   * Specifies or retrieves the location of the spin buttons (increment and decrement controls) on the jqxNumericTextBox component. This property allows you to control whether the spin buttons appear on the left, right, or another designated position within the input field.
   * Default value: right
   */
  spinButtonsPosition?: NumericTextBoxDisplayPosition | string;
  /**
   * Specifies or retrieves the increment or decrement value used when adjusting the control. This value determines by how much the value increases or decreases with each step (such as when using up/down arrows or stepper buttons).
   * Default value: 1
   */
  spinButtonsStep?: number | string;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent visual design across the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning users cannot navigate to the element using the Tab key or other focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets or sets the name of the unit (such as "kg", "cm", "$", etc.) displayed in the jqxNumericTextBox widget. This property allows you to specify the unit label that appears alongside the numeric input, providing context for the entered value.
   * Default value: "kg"
   */
  unit?: string;
  /**
   * Enhances value validation using the specified minimum and maximum constraints.  - When set to 'strict', the value is continuously validated: any value outside the defined min or max boundaries is automatically corrected to the nearest valid value, regardless of how the value is updated (user interaction or programmatically).  - When set to 'interaction', validation only occurs through user interactions such as typing or dragging. Programmatic changes to the value are not coerced within the min or max range. Additionally, if the min or max limits are updated, and the current value falls outside the new range, it remains unchanged and no change event is triggered.
   * Default value: strict
   */
  validation?: Validation | string;
  /**
   * Sets or retrieves the current numeric value of the jqxNumericTextBox widget. When used as a setter, it updates the widget's displayed value to the specified number. When used as a getter, it returns the widget’s current numeric value. This function supports both setting and getting the value, depending on whether a parameter is provided.
   * Default value: 0
   */
  value?: any;
  /**
   * Specifies or retrieves the word length when the inputFormat is set to 'integer'. This property is only relevant for integer inputs. If the min and/or max values are not explicitly defined, they will be automatically calculated based on the given word length—ensuring that the valid input range matches the specified number of bits.
   * Default value: int32
   */
  wordLength?: WordLength | string;
}
/**
 input field for entering a number. Includes number formatting for Engineers and Scientists.
*/
export interface NumericTextBox extends BaseElement, NumericTextBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value changes, whether due to user input or programmatic updates. It allows you to respond in real time when the value is modified.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the input value is modified by the user through actions such as typing on the keyboard or pasting text into the field. It detects changes in real-time as they occur, allowing you to respond immediately to user input.
	* @param event. The custom event.    */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after the dropdown menu has been closed by the user, either through selecting an option, clicking outside the dropdown, or using a keyboard action. Use this event to execute any actions or cleanup that should occur once the dropdown is no longer visible.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired just before the dropdown menu is closed, giving you an opportunity to execute custom logic or prevent the closure. If you wish to stop the dropdown from closing, you can call event.preventDefault() within your event handler. This allows for conditional closing behavior based on your application's requirements.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown control or focuses on it using the keyboard.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before the dropdown menu begins to open. If you need to prevent the dropdown from opening—for example, based on certain conditions—you can call event.preventDefault() within your event handler function. Doing so cancels the opening operation, allowing you to control when or whether the dropdown appears.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the radix value is modified by the user. It notifies listeners that the numerical base (such as decimal, binary, or hexadecimal) used for number input or display has been changed, allowing your application to update related components or recalculate values as necessary.
	* @param event. The custom event.    */
  onRadixChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Sets the input focus to the NumericTextBox component, allowing users to immediately start entering numeric values. This method brings the NumericTextBox into active view, enabling keyboard interactions and improving accessibility.
   */
  focus(): void;
  /**
   * Retrieves or updates the current numeric value displayed in the NumericTextBox component. Use this method to programmatically obtain the user-entered value or to set a new value within the control.
   * @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the SmartNumericTextBox. 
   * @param {boolean} suppressValidation?. If <em>true</em> is passed, the passed value will be set to the SmartNumericTextBox without validation. 
   * @returns {string}
   */
  val(value?: string | number, suppressValidation?: boolean): string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-numeric-text-box"): NumericTextBox;
        querySelector(selectors: "smart-numeric-text-box"): NumericTextBox | null;
        querySelectorAll(selectors: "smart-numeric-text-box"): NodeListOf<NumericTextBox>;
        getElementsByTagName(qualifiedName: "smart-numeric-text-box"): HTMLCollectionOf<NumericTextBox>;
        getElementsByName(elementName: "smart-numeric-text-box"): NodeListOf<NumericTextBox>;
    }
}

/**Specifies or retrieves the input format used by the widget. Modifying this property at runtime may result in a loss of precision, as existing data could be reformatted or truncated to fit the new format. It is recommended to set the input format during initialization to preserve data accuracy. */
export declare type NumericTextBoxInputFormat = 'integer' | 'floatingPoint' | 'complex';
/**Sets or retrieves the radix (base) used by the jqxNumericTextBox for displaying its value. The radix determines the numeral system (such as decimal, binary, octal, or hexadecimal) in which the numeric value is shown. This property is only applicable when the inputFormat is set to 'integer', allowing the widget to represent integers in different numeral systems based on the specified radix value. */
export declare type NumericTextBoxRadix = '2' | '8' | '10' | '16' | 'binary' | 'octal' | 'decimal' | 'hexadecimal';
/**Specifies or retrieves the location of the spin buttons (increment and decrement controls) on the jqxNumericTextBox component. This property allows you to control whether the spin buttons appear on the left, right, or another designated position within the input field. */
export declare type NumericTextBoxDisplayPosition = 'left' | 'right';
export interface PagerProperties {
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Assigning any other valid value enables the corresponding animation mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * "Manages the display of ellipsis ("...") within the pagination component. Ellipsis buttons appear when there are too many pages to show at once, serving as visual indicators that more pages are available. These buttons help users quickly navigate to distant pages by indicating page ranges that are not currently displayed."
   * Default value: none
   */
  autoEllipsis?: PagerAutoEllipsis | string;
  /**
   * Controls whether the pager functionality is active. When enabled, the pager allows navigation through paginated content; when disabled, all content may be displayed at once without pagination.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Retrieves or assigns the unlockKey, a unique code required to activate and access the product's full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which set of messages from the messages object will be used for localization or internationalization purposes. Update this property to change the active language displayed to users.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle events or processes such as updating language resources, switching locales, or applying translated content within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing localized strings used within the widget interface. This property enables the customization of widget text for different languages and regions, allowing for internationalization. It is typically used alongside the locale property to display the appropriate language-specific text based on the user's locale setting.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "firstButton": "First",
   *     "lastButton": "Last",
   *     "previousButton": "Previous",
   *     "nextButton": "Next",
   *     "navigateToLabel": "Go to:",
   *     "pageSizeLabel": "Show:",
   *     "navigateToInputPlaceholder": "",
   *     "ellipsis": "...",
   *     "summaryString": "of",
   *     "summaryPrefix": "of",
   *     "summarySuffix": ""
   *   }
   * }
   */
  messages?: any;
  /**
   * Manages the placement and alignment of navigation buttons within the user interface, determining their exact position (e.g., top, bottom, left, or right) to ensure optimal usability and layout consistency.
   * Default value: near
   */
  navigationButtonsPosition?: LayoutPosition | string;
  /**
   * Retrieves or updates the index of the currently active page. This value indicates which page is currently being displayed, where the index is zero-based (i.e., the first page has an index of 0). Setting this property changes the current page to the specified index.
   * Default value: 0
   */
  pageIndex?: number;
  /**
   * Specifies the total number of page index selectors (such as page numbers or navigation dots) displayed in the pagination component, allowing users to navigate between different pages of content.
   * Default value: 0
   */
  pageIndexSelectors?: number;
  /**
   * Retrieves or updates the maximum number of items displayed per page. This determines how many items are visible to the user on a single page of results, commonly used for pagination controls.
   * Default value: 10
   */
  pageSize?: number;
  /**
   * Specifies the data source that populates the options available in the element’s page size selector dropdown menu. This determines which page size choices are presented to the user for selection.
   * Default value: 10,25,50
   */
  pageSizeSelectorDataSource?: number[];
  /**
   * Specifies the total count of pages contained within the element, typically used for pagination or indicating how many discrete sections or views are available.
   * Default value: 100
   */
  pagesCount?: number;
  /**
   * When the element is set to readonly, users can view its content but cannot modify or input any data. Interaction such as typing, editing, or changing the value is disabled, although users may still be able to highlight and copy the text.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that specifies whether the element’s layout is aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, by enabling RTL text direction and alignment based on the specified locale.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls the visibility of the 'First' and 'Last' navigation buttons, allowing you to show or hide these buttons in the navigation component.
   * Default value: false
   */
  showFirstLastNavigationButtons?: boolean;
  /**
   * Replaces the default icon-based navigation buttons with buttons that display descriptive text labels, making navigation options clearer and more accessible to users.
   * Default value: false
   */
  showNavigationButtonLabels?: boolean;
  /**
   * Controls the visibility of the navigation input, specifying whether the navigation input component should be shown or hidden in the user interface.
   * Default value: false
   */
  showNavigationInput?: boolean;
  /**
   * Specifies whether the page index selectors (such as numbered page buttons or links that allow users to navigate between pages) are visible in the user interface. If set to true, the page index selectors will be displayed; if set to false, they will be hidden.
   * Default value: false
   */
  showPageIndexSelectors?: boolean;
  /**
   * Specifies whether the page size selector control is visible to the user, allowing them to choose the number of items displayed per page.
   * Default value: false
   */
  showPageSizeSelector?: boolean;
  /**
   * Controls the visibility of the 'Previous' and 'Next' navigation buttons, determining whether users can navigate backward or forward through the content.
   * Default value: false
   */
  showPrevNextNavigationButtons?: boolean;
  /**
   * Specifies whether the page summary section is visible to users. If set to true, the summary will be displayed at the top of the page; if false, the summary section will be hidden.
   * Default value: false
   */
  showSummary?: boolean;
  /**
   * Specifies the theme to be applied to the element. The theme setting controls the overall appearance—including colors, fonts, and visual styles—ensuring a consistent look and feel across the component.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning users will be unable to select the element using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets or sets the total number of records available for pagination, which determines how many pages the Pager will display and manage. This property is particularly useful when the Pager is integrated into a larger component or application that handles data fetching, as it allows the Pager to correctly calculate page counts and navigation based on the overall dataset size.
   * Default value: null
   */
  totalRecords?: number;
}
/**
 Pagination component that is used to navigate between a set of results.
*/
export interface Pager extends BaseElement, PagerProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user selects a different item from the list or dropdown menu. It fires only when the selected item changes, allowing your application to respond to user selection updates, such as displaying additional information, updating content, or triggering related actions based on the newly selected item.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the page size is modified, such as when a user selects a different number of items to display per page. It allows you to respond to changes in the pagination settings, for example by updating the displayed data or adjusting the layout based on the new page size.
	* @param event. The custom event.    */
  onPageSizeChanged?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Selects the first item in the list or array. This operation targets the element at index 0, retrieving or highlighting it as the initially chosen value.
   */
  first(): void;
  /**
   * Selects the last item in the list or array. This operation retrieves the final element from a collection, regardless of its length. If the list is empty, no item will be selected.
   */
  last(): void;
  /**
   * Navigates to a specified item within the collection, allowing direct access based on a unique identifier or index.
   * @param {any} pageIndex. 
   */
  navigateTo(pageIndex: any): void;
  /**
   * Advances the pagination control to the next available page, allowing users to view additional content.
   */
  next(): void;
  /**
   * Navigates to the previous page in a paginated list or component by selecting the preceding pager item.
   */
  prev(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-pager"): Pager;
        querySelector(selectors: "smart-pager"): Pager | null;
        querySelectorAll(selectors: "smart-pager"): NodeListOf<Pager>;
        getElementsByTagName(qualifiedName: "smart-pager"): HTMLCollectionOf<Pager>;
        getElementsByName(elementName: "smart-pager"): NodeListOf<Pager>;
    }
}

/**<br/><br/>"Manages the display of ellipsis ("...") within the pagination component. Ellipsis buttons appear when there are too many pages to show at once, serving as visual indicators that more pages are available. These buttons help users quickly navigate to distant pages by indicating page ranges that are not currently displayed." */
export declare type PagerAutoEllipsis = 'none' | 'before' | 'after' | 'both';
export interface PasswordInputProperties {
  /**
   * Determines whether the element is interactive or inactive. When enabled, the element can be used and respond to user actions; when disabled, the element is not interactive and will not respond to user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the unlockKey, a unique identifier or code required to unlock and grant access to the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property is typically used together with the messages property to provide localization support, determining which set of translated messages or labels are displayed based on the selected language code (e.g., 'en', 'fr', 'es').
   * Default value: "en"
   */
  locale?: string;
  /**
   * Specifies a callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify or enhance how localized strings are generated or displayed before they are delivered to your application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing text strings used throughout the widget interface, enabling support for localization. This property works together with the locale property to display the widget's content in different languages by providing translations for UI elements such as labels, messages, and tooltips.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must type into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Specifies or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting data via an HTML form, allowing the data to be sent as key-value pairs where the name serves as the key. This attribute is essential for server-side processing and differentiating between multiple inputs within the same form.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Sets or retrieves a value that specifies whether the element's alignment is configured to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this ensures that text direction and layout are adjusted appropriately for locales that use RTL scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and stylistic details, ensuring a consistent look and feel across elements.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via the keyboard (e.g., Tab key) and inaccessible by assistive technologies that rely on focus.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves the current value of the element, depending on how the method or property is used. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically update or access their contents.
   * Default value: ""
   */
  value?: string;
}
/**
 PasswordInput specifies a password field where the user can enter data. It is similar to the password text box, but this component does not have additional functionality for tooltips and popups.
*/
export interface PasswordInput extends BaseElement, PasswordInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the value of the element has been modified by the user and the element loses focus (i.e., when the user finishes editing and clicks or tabs away from the element).
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value.
   *  value - The new value.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered each time a key is released within the PasswordInput field, but only if the input value has changed as a result of the key press.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Enhances the input field interaction by selecting all text within the input when it is editable. If the input is set to <b>readonly</b>, the element receives focus without selecting its text. This ensures intuitive behavior based on the input's current state.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-password-input"): PasswordInput;
        querySelector(selectors: "smart-password-input"): PasswordInput | null;
        querySelectorAll(selectors: "smart-password-input"): NodeListOf<PasswordInput>;
        getElementsByTagName(qualifiedName: "smart-password-input"): HTMLCollectionOf<PasswordInput>;
        getElementsByName(elementName: "smart-password-input"): NodeListOf<PasswordInput>;
    }
}

export interface PasswordTextBoxProperties {
  /**
   * Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Indicates that the element will automatically receive keyboard focus as soon as the page is loaded, allowing users to interact with it immediately without clicking or tabbing to it. This is often used to improve accessibility and streamline user interaction with form fields or interactive elements.
   * Default value: false
   */
  autoFocus?: boolean;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes unresponsive to user actions such as clicks or input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines the action that occurs when the "Enter" key is pressed within the input field. By default, the mode is set to "submit", meaning pressing "Enter" will attempt to submit the associated form. You can customize this behavior by specifying alternative modes, such as preventing form submission or triggering a custom handler.
   * Default value: submit
   */
  enterKeyBehavior?: EnterKeyBehavior | string;
  /**
   * Specifies the form element with which this element is associated (referred to as its "form owner"). The value of this attribute should be the id of a  element within the same HTML document. This allows the element to be associated with a form even if it is not nested inside the  tags.
   * Default value: ""
   */
  form?: string;
  /**
   * Displays supplemental helper text beneath the element, visible only while the element is focused. This text provides additional guidance or context to users during interaction.
   * Default value: null
   */
  hint?: any;
  /**
   * Displays a label positioned above the input element. This label remains persistently visible, providing a clear and accessible description of the input’s purpose at all times.
   * Default value: ""
   */
  label?: string;
  /**
   * Gets or sets the unlockKey, a unique key required to activate and access the product. Use this property to retrieve the current unlock key or assign a new one to enable product unlocking functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which set of localized text strings from the messages property is used for display. When you set the language, the corresponding messages are shown to users in that language. When you get the language, it returns the currently active language code.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function that allows you to customize the formatting of messages returned by the Localization Module. This enables you to modify or enhance localized message strings—such as adding dynamic data, adjusting placeholders, or changing text structure—before they are displayed to users.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves the maximum number of characters allowed in the input field. If set, the user cannot enter more characters than this limit. This constraint helps enforce data validation and control the input length.
   * Default value: null
   */
  maxLength?: number;
  /**
   * Defines an object where each property corresponds to a specific password strength state, with associated string values that describe or label each state (e.g., "weak," "moderate," "strong"). This object is typically used to display feedback messages or labels reflecting the current strength of a user's password during input.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": ".",
   *     "passwordStrength": "Password strength",
   *     "short": "Short",
   *     "weak": "Weak",
   *     "far": "Far",
   *     "good": "Good",
   *     "strong": "Strong",
   *     "showPassword": "Show password"
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies or retrieves the minimum number of characters required for user input. When set, the user must enter at least this many characters for the input to be considered valid.
   * Default value: 2
   */
  minLength?: number;
  /**
   * Sets or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting HTML forms, allowing the data entered in the element to be included in the form's submission with the specified name as the key. This is essential for server-side processing of form data.
   * Default value: ""
   */
  name?: string;
  /**
   * With this property, you can specify a custom callback function that evaluates the strength of a password. The function should accept the current password as input and return a string representing the assessed strength level. The returned string must be one of the following predefined values: 'short', 'weak', 'far', 'good', or 'strong'. This value will be used by the component to indicate how secure the entered password is according to your custom logic.
   * Default value: null
   */
  passwordStrength?: any;
  /**
   * This is the text that appears within the element when it is empty, serving as a prompt or hint to the user about the expected input. Once the user enters a value, this placeholder text disappears.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Enhances the requirement that the user must provide a value for this element before the form can be submitted. If this field is left empty, the form submission will be blocked and the user will be prompted to enter a value. This ensures that the input is mandatory, helping maintain data completeness and integrity.
   * Default value: false
   */
  required?: boolean;
  /**
   * Sets or retrieves a value specifying whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adapted for proper display in locales that use right-to-left text direction.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Determines if the entire content of the input field should be automatically highlighted (selected) when the input receives focus, making it easier for users to quickly replace or copy the content.
   * Default value: false
   */
  selectAllOnFocus?: boolean;
  /**
   * Specifies whether the password icon (such as an eye symbol to show or hide password text) is displayed in the input field.
   * Default value: false
   */
  showPasswordIcon?: boolean;
  /**
   * Specifies whether a tooltip displaying the password strength indicator will be visible to the user during password entry. When enabled, this tooltip provides real-time feedback on the strength of the entered password.
   * Default value: false
   */
  showPasswordStrength?: boolean;
  /**
   * Specifies the visual theme to be applied. The theme controls the overall appearance and style—including colors, fonts, and backgrounds—of the element for a consistent look and feel.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies whether the Tooltip component should display an arrow pointing to the target element. Setting this option to true will show the arrow, while false will hide it.
   * Default value: false
   */
  tooltipArrow?: boolean;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a user interaction (such as hovering or focusing on an element).
   * Default value: 0
   */
  tooltipDelay?: number;
  /**
   * Specifies the placement of the tooltip relative to the target element, such as "top", "bottom", "left", or "right". This controls where the tooltip will appear when it is displayed.
   * Default value: top
   */
  tooltipPosition?: PasswordTextBoxTooltipPosition | string;
  /**
   * Specifies a custom template for rendering the tooltip’s content, allowing you to define the layout, formatting, and dynamic data within the tooltip. This enables greater control over the appearance and behavior of the tooltip beyond the default content.
   * Default value: "null"
   */
  tooltipTemplate?: string;
  /**
   * Indicates whether the element should be excluded from keyboard navigation and cannot receive focus. If set to true, users will not be able to focus on the element using the keyboard or mouse interactions.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves its current value, depending on whether an argument is provided. Useful for updating or accessing the element’s data within a form or component.
   * Default value: ""
   */
  value?: string;
}
/**
 PasswordTextBox lets the user enter a password with the text hidden.
*/
export interface PasswordTextBox extends BaseElement, PasswordTextBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value of the element is modified by the user or through programmatic changes. It occurs after the change has been committed, allowing you to respond to updates in the element’s value.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value of the element before it was changed.
   *  value - The new value of the element.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a key is released (key up) within the TextBox, but only if the TextBox's value has changed as a result of the key press. This ensures that the event fires solely when user input modifies the content, preventing unnecessary triggers when the value remains unchanged.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Sets keyboard focus to the specified element, making it the active element on the page and enabling user input or interaction through the keyboard. This is commonly used to improve accessibility, guide user workflow, or trigger specific UI behaviors.
   */
  focus(): void;
  /**
   * This method resets the input field to its initial value, discarding any changes made by the user and restoring the input's original state as specified when the component or element was first rendered.
   */
  reset(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-password-text-box"): PasswordTextBox;
        querySelector(selectors: "smart-password-text-box"): PasswordTextBox | null;
        querySelectorAll(selectors: "smart-password-text-box"): NodeListOf<PasswordTextBox>;
        getElementsByTagName(qualifiedName: "smart-password-text-box"): HTMLCollectionOf<PasswordTextBox>;
        getElementsByName(elementName: "smart-password-text-box"): NodeListOf<PasswordTextBox>;
    }
}

/**Specifies the placement of the tooltip relative to the target element, such as "top", "bottom", "left", or "right". This controls where the tooltip will appear when it is displayed. */
export declare type PasswordTextBoxTooltipPosition = 'absolute' | 'bottom' | 'top' | 'left' | 'right';
export interface PathProperties {
  /**
   * Specifies the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, you can set it to other supported values to enable different animation behaviors. When retrieving this property, it returns the current animation mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the source of the data that will populate the items shown within the dropdown menu. This property defines where and how the dropdown retrieves its list of selectable options, such as from a static array, a remote API, or a data store.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When enabled, users can interact with the element as intended. When disabled, the element is visually distinct and does not respond to user input or actions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the displayMember property. The displayMember property specifies the name of the object property that should be displayed for each item in the collection referenced by the 'dataSource' property. When rendering items from the dataSource, the value of the specified property (displayMember) is shown in the UI, allowing you to control which attribute of each object is presented to the user.
   * Default value: """"
   */
  displayMember?: string;
  /**
   * Specifies the parent container element for the dropDown (popup) component. This property is useful when a CSS property—such as overflow, z-index, or positioning—from an ancestor element unexpectedly affects the dropDown’s visibility or display. By explicitly setting the parent container, you can ensure that the dropDown is rendered within a controlled context, preventing visibility issues caused by styles on unknown or undesired parent elements.
   * Default value: null
   */
  dropDownAppendTo?: any;
  /**
   * Specifies the height of the dropdown menu. If set to an empty string (the default), the component relies on CSS variables to determine the height. Use this property to explicitly define the dropdown height in pixels or other valid CSS units when targeting browsers that do not support CSS variables. This ensures consistent appearance across all browsers.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the maximum height of the dropdown menu. By default, this property is set to an empty string, allowing the component to use CSS variables for height control. If the browser does not support CSS variables, you can set this property to a specific pixel, em, or rem value (e.g., "300px", "20em") to manually define the maximum height. This ensures proper rendering and usability of the dropdown across all browsers.
   * Default value: 
   */
  dropDownMaxHeight?: string | number;
  /**
   * Specifies the maximum width of the dropdown menu. When set to an empty string (the default), the component relies on CSS variables to determine the dropdown's width. Use this property to explicitly set a max width (e.g., "300px" or "100%") in situations where CSS variables are not supported by the browser. This ensures consistent dropdown sizing across all environments.
   * Default value: 
   */
  dropDownMaxWidth?: string | number;
  /**
   * Specifies the minimum height of the dropdown menu. By default, this property is set to an empty string, which means that the component will use CSS variables to determine the minimum height. If you need to support browsers that do not support CSS variables, you can manually set a value for this property to ensure consistent rendering.
   * Default value: 
   */
  dropDownMinHeight?: string | number;
  /**
   * Specifies the minimum width of the dropdown component. By default, this property is an empty string (""), which allows the component to use CSS variables for determining its width. If you need to support browsers that do not support CSS variables, you can set this property directly to a specific width value (e.g., "200px"). This overrides the default behavior and ensures consistent rendering across all browsers.
   * Default value: 
   */
  dropDownMinWidth?: string | number;
  /**
   * When this property is enabled, opening the element’s dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the page. This overlay prevents interaction with the underlying content while the dropdown is open, ensuring the user's focus remains on the dropdown menu.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the vertical placement of the dropDown menu. When set to 'Auto', the dropDown will automatically choose either a top or bottom position based on available space in the viewport to ensure it remains fully visible.
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the width of the dropdown component. By default, this property is set to an empty string, which means the dropdown's width is determined by CSS variables. You should set this property explicitly only if you need to override the CSS variable-based width—typically in browsers that do not support CSS variables. Providing a value (e.g., "200px" or "50%") will directly set the dropdown's width via inline styles, ensuring compatibility with older browsers.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Provides supplementary helper text displayed below the element, offering extra guidance or information to the user.
   * Default value: ""
   */
  hint?: string;
  /**
   * Designates the element as an indicator, typically used to visually highlight status, progress, or other relevant information on the user interface. This attribute helps identify the element's role for styling, accessibility, or scripting purposes.
   * Default value: false
   */
  indicator?: boolean;
  /**
   * Returns an array containing all Path objects available within the collection. Each Path object represents a distinct path item, and the array includes every Path currently stored or defined.
   * Default value: 
   */
  items?: any[];
  /**
   * Positions a descriptive label directly above the associated form element, providing clear context or instructions for the user.
   * Default value: ""
   */
  label?: string;
  /**
   * Gets or sets the unlockKey property, which is a unique code used to unlock and activate the product’s full features. Setting this value provides access to restricted functionality, while retrieving it allows you to verify the currently assigned unlock key.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which set of localized messages from the messages property will be used or returned. Changing the language value updates the displayed content to match the corresponding entries in messages.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Specifies or retrieves an object containing the localized strings used throughout the widget, enabling support for multiple languages. This property works together with the locale property to display the widget's text in the chosen language. Use it to customize or override default interface text for internationalization purposes.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the unique identifier or label assigned to the control, which is used to reference and distinguish it from other elements within the form or user interface.
   * Default value: ""
   */
  name?: string;
  /**
   * Indicates the current state of the popup, specifying whether it is visible (opened) or hidden (closed) to the user.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the element when it is empty, providing a hint or example of the expected input.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies the format of the file path according to the operating system’s conventions. Adjusts elements such as drive letters, folder separators (e.g., forward slashes '/' for Unix-based systems or backslashes '\' for Windows), and other path components to ensure compatibility with the selected platform.
   * Default value: windows
   */
  pathFormat?: PathFormat | string;
  /**
   * Prevents users from interacting with the element by disabling all mouse, keyboard, and touch events. The element will not respond to clicks, focus, or any other input actions. Visual indicators (such as grayed-out appearance) may also be applied to show that the element is inactive.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s text direction and alignment are set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content will be displayed in a manner appropriate for locales that use RTL scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied, which controls the overall appearance, including colors, fonts, and styling of the element. The chosen theme defines how the element is visually presented to users.
   * Default value: ""
   */
  theme?: string;
  /**
   * If this property is set to true, the element will be excluded from the tab order and cannot receive keyboard focus or be interacted with using standard focus navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Represents the current value or data stored in the Path control, typically indicating the file system path, URL, or navigation route selected or entered by the user. This value is used to reference a specific location within the application or external resources.
   * Default value: ""
   */
  value?: string;
  /**
   * Specifies which property of the item object should be used as its value. This property's value is stored in the item object under the "value" key and is typically used for identification, selection, or submitting data.
   * Default value: """"
   */
  valueMember?: string;
  /**
   * Controls whether the element automatically moves to a new line when its content exceeds the available horizontal space. When enabled, the element (such as a Path) will wrap onto multiple lines instead of overflowing its container. This ensures that long content is displayed without being cut off or causing horizontal scrolling.
   * Default value: false
   */
  wrap?: boolean;
}
/**
 Path component is used to display the path to url.
*/
export interface Path extends BaseElement, PathProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user interacts with the interface by clicking the "Browse" button, typically to initiate a file selection or navigation process. It allows you to execute custom logic whenever the user attempts to browse for files or resources.
	* @param event. The custom event.    */
  onBrowseButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the value associated with the element is modified by the user or programmatically. It fires each time the value changes, allowing you to respond to updates in real time. This can be useful for validating input, updating related data, or performing actions based on user interactions.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the dropdown menu is closed, either by the user selecting an option or clicking outside the menu. It can be used to execute custom logic or cleanup actions after the dropdown is no longer visible.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered immediately before the dropdown menu begins to close, allowing developers to perform custom actions or cleanup tasks prior to the dropdown being dismissed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user clicks on the dropdown button, typically to open or display the dropdown menu options. It signals that the user has interacted with the dropdown control, allowing you to handle actions such as populating the menu, updating the UI, or executing custom logic in response to the user's click.
	* @param event. The custom event.    */
  onDropDownButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user selects (clicks on) an item from the popup menu. It allows you to respond to the user's choice, such as executing a specific action based on the selected item or updating the interface accordingly.
	* @param event. The custom event.    */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the dropdown menu becomes visible to the user, indicating that the dropdown has been expanded or opened, allowing for selection of its options.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the dropdown menu begins to open, allowing you to execute custom logic or modify the dropdown's behavior as it transitions from a closed to an open state.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the drop-down menu, hiding its content from view and preventing user interaction until it is opened again.
   */
  close(): void;
  /**
   * Displays the drop-down menu, making its list of selectable options visible to the user.
   */
  open(): void;
  /**
   * Sets the Path element to the 'emptyPath' state by updating its value to '////', indicating that the path is intentionally left empty or reset to its default state.
   */
  setToEmptyPath(): void;
  /**
   * Sets the Path element's state to 'notAPath' and updates its value to '//', indicating that the current content does not represent a valid path.
   */
  setToNotAPath(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-path"): Path;
        querySelector(selectors: "smart-path"): Path | null;
        querySelectorAll(selectors: "smart-path"): NodeListOf<Path>;
        getElementsByTagName(qualifiedName: "smart-path"): HTMLCollectionOf<Path>;
        getElementsByName(elementName: "smart-path"): NodeListOf<Path>;
    }
}

/**Specifies the format of the file path according to the operating system’s conventions. Adjusts elements such as drive letters, folder separators (e.g., forward slashes '/' for Unix-based systems or backslashes '\' for Windows), and other path components to ensure compatibility with the selected platform. */
export declare type PathFormat = 'windows' | 'unix';
export interface PhoneInputProperties {
  /**
   * Determines whether the element is interactive or inactive. When enabled, the element can be interacted with by the user; when disabled, the element becomes unresponsive to user actions, often appearing visually distinct (e.g., grayed out).
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies extra CSS class names to be applied to the Input dropdown element, allowing for customized styling and theming beyond the default classes.
   * Default value: 
   */
  dropDownClassList?: any;
  /**
   * Specifies the placement of the dropdown button relative to its associated element, such as positioning it to the left, right, above, or below the target UI component.
   * Default value: none
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height will be determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown's height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this value is an empty string (""). When left empty, the dropdown's width is determined by a CSS variable, allowing the width to be managed through external stylesheets rather than being hardcoded. This provides flexibility for responsive design and consistent styling across your application. If a specific width is provided (e.g., "200px" or "50%"), it will override the CSS variable and explicitly set the dropdown's width.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Defines or retrieves an object containing string values used throughout the widget’s user interface, allowing for easy localization of text. This property works together with the locale setting to display the widget’s content in different languages, based on the specified translations. Use this object to provide or customize all user-facing strings for multilingual support.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * Sets or retrieves the unlockKey property, which serves as a unique key required to unlock access to the product. When assigning a value, the unlockKey enables authorized usage; when retrieving, it provides the current key associated with the product’s access permissions.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Defines or retrieves the value of the name attribute for the element. The name attribute uniquely identifies the element within an HTML form, allowing its data to be included and referenced when the form is submitted to a server. This is essential for processing form data on the server side.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the input should be in international or national format. In international mode, the input should begin with a '+' followed by the country code (e.g., +1 555-1234). In national mode, the input should omit the '+' and country code, using only the local number format.
   * Default value: false
   */
  nationalMode?: boolean;
  /**
   * Specifies whether the dropdown menu is currently visible (open) or hidden (closed).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies or retrieves an array of country codes to customize the set of countries used, replacing the default list that includes all countries. Each country code must be a valid ISO 3166-1 alpha-2 code (see: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), which consists of two uppercase letters (e.g., 'US' for the United States, 'FR' for France). Use this property to limit available options to a specific set of countries as needed.
   * Default value: []
   */
  onlyCountries?: any;
  /**
   * Specifies the placeholder text that appears inside the input field before the user enters any value, providing a hint or example of the expected input format.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Gets or sets the selected country for the element using a country code. The country code must conform to the ISO 3166-1 alpha-2 standard (see: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), which consists of a two-letter, uppercase code representing each country (e.g., "US" for United States, "FR" for France).
   * Default value: ""
   */
  selectedCountry?: string;
  /**
   * Gets or sets a value that determines whether the element's alignment is configured for right-to-left (RTL) languages (such as Arabic or Hebrew), enabling proper display and layout of text and content for those locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, spacing, and other stylistic properties, ensuring a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation and standard focus events.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Retrieves the current value of the element or assigns a new value to it. This property can be used to access the data contained within form elements (such as input, textarea, or select) or to update their content programmatically.
   * Default value: ""
   */
  value?: string;
}
/**
 The Phone Input specifies an input field where the user can enter and validate a phone number.
*/
export interface PhoneInput extends BaseElement, PhoneInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user modifies the current selection, such as highlighting different text or choosing another item from a selectable list. It helps you detect and respond to any change in what is selected within the relevant user interface component.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered each time a key is released (on key up) within the input field, but only if the input's value has changed as a result of the key press.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user selects an item by clicking on it within the popup list. It allows you to respond to user interaction by executing specific actions or updating the interface based on the selected item.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, value)
   *  item - The item that was clicked.
   *  label - The label of the item that was clicked.
   *  value - The value of the item that was clicked.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the dropdown menu, hiding its visible options from the user and collapsing the interface element.
   */
  close(): void;
  /**
   * Guarantees that the currently active (selected) item remains visible within the viewport by automatically scrolling the container as needed. This ensures users can always see and interact with their selection, even as the list or content changes.
   */
  ensureVisible(): void;
  /**
   * Returns the provided phone number as a formatted string, applying standard formatting conventions (such as adding parentheses, spaces, or dashes) based on the specified locale or default format. Ensures consistency and improves readability for display or storage purposes.
   * @param {boolean} isInternational?. When you use 'false', the national phone number will be returned and the international phone number, when you use 'true' as parameter.
   * @returns {string}
   */
  getNumber(isInternational?: boolean): string;
  /**
   * Retrieves an object representing a country based on its dial code. The returned object contains the following properties:<br/><br/>- **label**: The local or English name of the country (e.g., "United States").<br/>- **value**: A unique identifier for the country (commonly the country name or abbreviation).<br/>- **iso2**: The two-letter ISO 3166-1 alpha-2 country code (e.g., "US").<br/>- **dialCode**: The international telephone dialing code associated with the country (e.g., "+1").
   * @param {string} dialCode?. Returns the national or international phone number
   * @returns {any}
   */
  getItemByDialCode(dialCode?: string): any;
  /**
   * Returns the currently selected item as an object.  <br/>This object contains the following properties:  <br/>- `label`: A string representing the display name of the item (e.g., country name).  <br/>- `value`: A string or identifier associated with the item (e.g., country code).  <br/>- `iso2`: A two-letter ISO 3166-1 alpha-2 country code string (e.g., 'US' for United States).  <br/>- `dialCode`: A string representing the country’s international dialing code (e.g., '+1').
   * @returns {any}
   */
  getSelectedItem(): any;
  /**
   * Determines if the provided phone number meets the required format and validation rules, returning true for a valid phone number and false if the input is invalid.
   * @returns {boolean}
   */
  isValidNumber(): boolean;
  /**
   * Validates whether the entered phone number is in the correct format and meets specified criteria, such as required length, allowed characters, and country or area code compliance.
   */
  validate(): void;
  /**
   * Displays the drop-down menu, making its list of selectable options visible to the user.
   */
  open(): void;
  /**
   * Enhances the behavior of an input field by selecting its text content when it is editable. If the input field is marked as <b>readonly</b>, it will instead focus the element without selecting the text. This ensures that users can easily interact with editable inputs, while still providing focus to readonly fields for accessibility or further actions.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-phone-input"): PhoneInput;
        querySelector(selectors: "smart-phone-input"): PhoneInput | null;
        querySelectorAll(selectors: "smart-phone-input"): NodeListOf<PhoneInput>;
        getElementsByTagName(qualifiedName: "smart-phone-input"): HTMLCollectionOf<PhoneInput>;
        getElementsByName(elementName: "smart-phone-input"): NodeListOf<PhoneInput>;
    }
}

export interface PivotTableProperties {
  /**
   * Defines the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, setting this property to a supported value enables the corresponding animation behavior. Use this property to retrieve the current animation mode or specify the desired mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Enables or retrieves the current setting that determines whether users can reorder columns, allowing columns to be rearranged via drag-and-drop or similar interactions. If enabled, columns can be moved to a new position within the layout; if disabled, the column order remains fixed.
   * Default value: false
   */
  columnReorder?: boolean;
  /**
   * Provides detailed metadata for each column in the PivotTable’s underlying tabular data source. These settings define attributes such as column names, data types, and formatting options. Using this configuration and the connected data source, the PivotTable dynamically generates its actual columns, ensuring that the displayed data structure accurately reflects both the source data and the specified settings.
   * Default value: null
   */
  columns?: PivotTableColumn[];
  /**
   * Controls the visibility of total columns for each pivot data point. When enabled, total columns are displayed, showing summary values for each data group. Note: All summary columns must use the same summary function (e.g., sum, average) to ensure consistent calculation of the total columns. This setting both determines whether total columns are shown and allows you to retrieve their current visibility status.
   * Default value: false
   */
  columnTotals?: boolean;
  /**
   * Gets or sets the position of the total columns, which are displayed only when columnTotals is enabled. This option determines where the summary columns appear in the table, such as at the end (right side) of all columns.
   * Default value: near
   */
  columnTotalsPosition?: PivotTableColumnTotalsPosition | string;
  /**
   * Gets or sets the conditional formatting rules that determine how the PivotTable's cells are visually styled based on their values or other criteria. This allows you to dynamically highlight, color, or format cells within the PivotTable according to specified conditions.
   * Default value: null
   */
  conditionalFormatting?: PivotTableConditionalFormatting[];
  /**
   * Specifies the initial tabular data source—such as a worksheet range, table, or external database—from which the PivotTable retrieves and organizes its data. This property identifies where the PivotTable’s underlying data originates.
   * Default value: 
   */
  dataSource?: any;
  /**
   * Specifies or retrieves whether the original tabular data source for the PivotTable should be pre-sorted according to the columns defined with the rowGroup property, and in the same order as those columns appear. This ensures that when the PivotTable is generated, its underlying data is already organized based on the designated row groups, potentially optimizing performance and ensuring consistent grouping behavior.
   * Default value: false
   */
  defaultSortByRowGroups?: boolean;
  /**
   * Specifies whether the PivotTable designer panel is shown together with the PivotTable. When enabled, the designer provides an interface for configuring column settings, such as rearranging or renaming columns, and applying data filters directly within the PivotTable view. This property can be set to show or hide the designer alongside the table, and can also be used to determine the current visibility state of the designer.
   * Default value: false
   */
  designer?: boolean;
  /**
   * Gets or sets the position of the PivotTable’s designer interface, which appears when the designer option is enabled. This property allows you to specify or retrieve where the designer UI is displayed within the application layout.
   * Default value: far
   */
  designerPosition?: PivotTableDesignerPosition | string;
  /**
   * Prevents the user from interacting with the element, disabling all mouse, keyboard, and touch inputs such as clicks, typing, and focus events. The element will not respond to any user actions while this setting is applied.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * When this option is enabled, double-clicking a PivotTable summary cell or pressing F2 will display the underlying tabular data that was used to calculate the aggregated value in that cell.
   * Default value: false
   */
  drillDown?: boolean;
  /**
   * Displays an export button within the drill-down dialog when this option is enabled, allowing users to export data directly from the dialog.
   * Default value: 
   */
  drillDownDataExport?: PivotTableDrillDownDataExport | string;
  /**
   * Specifies or retrieves the file name used when exporting data from the drill-down table. This determines the default name of the exported file generated during the export operation.
   * Default value: ""
   */
  drillDownDataExportName?: string;
  /**
   * Defines or retrieves the callback function that is triggered when the drill-down dialog is opened in the PivotTable. The callback receives the drill-down Table component as its argument, allowing you to customize the appearance, behavior, or data of the resulting table before it is displayed. Use this function to apply custom formatting, event handlers, or modifications to the drill-down Table component.
   * Default value: null
   */
  drillDownTableInit?: { (table: HTMLElement ): void };
  /**
   * Enhancements for clarity and detail:"Defines or retrieves the callback function that handles custom drill-down actions. When a drill-down event occurs in the PivotTable, this callback is invoked with the drill-down data source as its argument. By providing a custom callback, you can override the default drill-down user interface (which typically displays our Dialog with a Table) and implement your own UI or behavior for presenting the drill-down data."
   * Default value: null
   */
  drillDownCustomAction?: { (originalRecords: [] ): void };
  /**
   * Determines whether column-based sorting is enabled or disabled when using the classic row groups layout mode. When enabled, users can sort data within each column in the classic row grouping layout. This property can be used to either retrieve the current sorting status or set a new value.
   * Default value: false
   */
  enableSortByRowGroups?: boolean;
  /**
   * Determines whether the column headers in the PivotTable remain visible (sticky/frozen) at the top of the view when the user scrolls vertically. Setting this property to true keeps the column headers fixed in place, while false allows them to scroll out of view. This property can be used to set or retrieve the current sticky/frozen state of the PivotTable’s column headers.
   * Default value: false
   */
  freezeHeader?: boolean;
  /**
   * A callback function that provides the default summary operation (e.g., sum, average, count) for a summary column when the column is dynamically assigned as a summary field—such as when a user assigns it by dragging and dropping in the UI designer. This function is invoked to ensure that the appropriate summary logic is applied automatically whenever the summary column configuration changes at runtime.
   * Default value: null
   */
  getDefaultSummaryFunction?: { (column: PivotTableColumn): string };
  /**
   * Specifies whether to display a Grand Total row that aggregates the values of all data rows. When enabled, this option will add a summary row at the bottom of the data set, showing the total or combined values for each relevant column. Can also be used to retrieve the current setting.
   * Default value: false
   */
  grandTotal?: boolean;
  /**
   * Defines or retrieves how nested rows—determined by the specified rowGroup columns—are visually organized and displayed within the grid. This setting controls the appearance and structure of hierarchical row groupings.
   * Default value: default
   */
  groupLayout?: PivotTableGroupLayout | string;
  /**
   * Determines whether the tooltip displaying detailed information is shown or hidden when multiple summary cells, each containing non-null values, are selected. When enabled, the tooltip with details will be suppressed; when disabled, the tooltip will appear as usual. This property can be set to control the tooltip's visibility or retrieved to check its current state.
   * Default value: false
   */
  hideCellSelectionTooltip?: boolean;
  /**
   * Specifies whether rows containing only 0 or null values should be hidden or displayed. This setting is only effective when one or more rowGroup columns are defined. Use this property to control the visibility of empty or zero-value rows within grouped data.
   * Default value: false
   */
  hideEmptyRows?: boolean;
  /**
   * Enables or retrieves the setting that determines whether users can navigate the PivotTable using keyboard shortcuts or arrow keys. When enabled, keyboard navigation allows users to move between cells, fields, and items within the PivotTable, enhancing accessibility and ease of use.
   * Default value: false
   */
  keyboardNavigation?: boolean;
  /**
   * Sets or retrieves the unlockKey property, a unique code or token required to access and activate the product’s full functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code for the component. This property determines which set of localized messages from the messages object will be used for display. Changing the language automatically updates all text and labels according to the selected locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Defines or retrieves an object containing the localized strings used within the element's user interface. This object allows you to customize text elements (such as labels, messages, or tooltips) in different languages. This property works together with the locale property to display the appropriate translations based on the selected or active locale.
   * Default value:    * {"en":{"add":"Add condition","all":"All columns","apply":"Apply","average":"Average","between":"Between","calculation":"Calculation","cancel":"Cancel","center":"center","clear":"Clear","clearFilter":"Clear filter","close":"Close","column":"Column:","columns":"Columns","columnSettings":"Column settings","condition":"Condition:","conditionalFormatting":"Conditional Formatting","CONTAINS_CASE_SENSITIVE":"contains (case sensitive)","CONTAINS":"contains","count":"Count","decimalPlaces":"Decimal places","decimalSeparator":"Decimal separator","details":"Details","DOES_NOT_CONTAIN_CASE_SENSITIVE":"does not contain (case sensitive)","DOES_NOT_CONTAIN":"does not contain","dragHerePivots":"Drag here to set pivots","dragHereRowGroups":"Drag here to set row groups","dragHereSummaries":"Drag here to set summaries","EMPTY":"empty","ENDS_WITH_CASE_SENSITIVE":"ends with (case sensitive)","ENDS_WITH":"ends with","EQUAL_CASE_SENSITIVE":"equal (case sensitive)","equal":"Equal To","EQUAL":"equal","fields":"Fields","filter":"Filter","filterCondition":"Filter condition","filterPlaceholder":"Filter","filters":"Filters","firstButton":"First","fontFamily":"Font family:","fontSize":"Font size:","format":"Format:","formatColumn":"Format Column","grandTotal":"Grand Total","GREATER_THAN_OR_EQUAL":"greater than or equal","GREATER_THAN":"greater than","greaterThan":"Greater Than","groupHeader":"Group","highlight":"Highlight","invalidValue":"Invalid value","itemsPerPage":"Items per page:","lastButton":"Last","left":"left","LESS_THAN_OR_EQUAL":"less than or equal","LESS_THAN":"less than","lessThan":"Less Than","moveTo":"Move to","negativesInBrackets":"Negatives in brackets","nextButton":"Next","NOT_EMPTY":"not empty","NOT_EQUAL":"not equal","NOT_NULL":"not null","notApplicable":"N/A","notEqual":"Not Equal To","NULL":"null","numberAlignment":"Number alignment","numberFormat":"Number format","numberPrefix":"Number prefix","ok":"OK","pivots":"Pivots","previousButton":"Previous","remove":"Remove condition","right":"right","row":"Row","rowGroups":"Row Groups","sameSummaryFunctionRequired":"jqxPivotTable: When "columnTotals" is enabled, all summary columns must have the same "summary" function set (e.g. '
   */
  messages?: any;
  /**
   * Specifies the value to display in cells that lack aggregated data. When set, this value will be shown in any cell where there is no aggregation result available. By default (null), these cells will appear empty. Setting a custom value (such as "N/A" or 0) allows you to indicate explicitly that no data is present in those cells.
   * Default value: null
   */
  nullDefaultValue?: number;
  /**
   * A callback function that is invoked every time a cell within the PivotTable is rendered. This function allows you to customize the content, formatting, or behavior of individual PivotTable cells during the rendering process. It receives contextual information about the cell, such as its row, column, and data value.
   * Default value: null
   */
  onCellRender?: { (data: any, dynamicColumn: any, value: any, cell: HTMLTableCellElement): void };
  /**
   * A callback function that is invoked whenever a column header cell is rendered in the PivotTable. This function allows you to customize the appearance or behavior of each column header as it is generated during the rendering process.
   * Default value: null
   */
  onColumnRender?: { (settings: { text: string, cell: HTMLTableCellElement, column: PivotTableColumn, fullDefinition: any }): void };
  /**
   * A callback function that is executed during the initialization phase of the PivotTable, allowing custom logic to run before the PivotTable is fully rendered or populated with data. This function receives relevant initialization parameters, enabling developers to modify settings or data sources prior to the PivotTable’s display.
   * Default value: null
   */
  onInit?: { (): void };
  /**
   * Specifies or retrieves the number of items displayed per page when paging is enabled. This property determines the page size, allowing you to control how many records are shown on each paginated view.
   * Default value: 10
   */
  pageSize?: PivotTablePageSize | string;
  /**
   * Sets or retrieves the current page index, using a zero-based numbering system (i.e., the first page is index 0). This property is applicable only when paging is enabled, allowing navigation between different pages of content.
   * Default value: 0
   */
  pageIndex?: number;
  /**
   * Gets or sets a value indicating whether paging functionality is enabled, allowing data to be divided and displayed across multiple pages.
   * Default value: false
   */
  paging?: boolean;
  /**
   * Specifies or retrieves whether the element's text direction and alignment are set to support right-to-left (RTL) languages—such as Arabic or Hebrew—by adapting the layout and text flow accordingly. This property ensures that the element properly displays content for users whose locale requires RTL formatting.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Determines whether sorting by row is enabled when a row group cell is clicked. If columnTotals is also enabled, sorting will be applied within each "column group" individually. If columnTotals is not enabled, sorting will be applied across all columns together. This property can be used to both retrieve the current sorting behavior and to enable or disable sorting by row group interactions.
   * Default value: false
   */
  rowSort?: boolean;
  /**
   * Controls whether row summaries appear in the row headers. When set to true, row headers display summarized information such as "Peterson(40)" (indicating a summary value). When set to false, row headers show only the row label, like "Peterson", without any summary details. Use this option to toggle the visibility of summary data in your row headers.
   * Default value: true
   */
  rowSummary?: boolean;
  /**
   * Determines whether to display row total columns alongside each summary column. When enabled, this option will show an additional column for each summary column, presenting the total value for each row. You can use this property to enable (show) or disable (hide) row total columns as needed.
   * Default value: false
   */
  rowTotals?: boolean;
  /**
   * Sets or retrieves the position of row total columns within the table. This option determines where the columns displaying the total values for each row will appear when the rowTotals feature is enabled. Adjusting this setting allows you to control whether the row totals are displayed at the beginning, end, or a specific location among the table columns.
   * Default value: near
   */
  rowTotalsPosition?: PivotTableRowTotalsPosition | string;
  /**
   * Determines whether users can select table rows using checkboxes. When enabled, a checkbox appears next to each row, allowing selection. This property can be used to enable or check the current state of row selection functionality.
   * Default value: false
   */
  selection?: boolean;
  /**
   * Specifies or retrieves the selection mode for the component. This property is effective only when the selection feature is enabled. When disabled, changing or accessing the selection mode has no effect.
   * Default value: many
   */
  selectionMode?: PivotTableSelectionMode | string;
  /**
   * Specifies the sorting mode applied to the PivotTable, controlling how data rows or columns are ordered (e.g., ascending, descending, or custom criteria). This setting determines the sequence in which PivotTable items are displayed based on the selected sort option.
   * Default value: none
   */
  sortMode?: PivotTableSortMode | string;
  /**
   * Specifies the theme applied to the element. The theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * Controls the visibility of the PivotTable toolbar. When displayed, the toolbar includes two breadcrumb components that enable users to modify the row groups and pivot columns directly. It also features "Conditional Formatting" and "Fields" buttons, each of which opens a dialog for configuring additional PivotTable settings.
   * Default value: false
   */
  toolbar?: boolean;
  /**
   * Determines whether a tooltip displaying the full content will appear when hovering over a table cell with truncated (overflowing) content. When enabled, users can view the entire cell content by hovering their mouse over the truncated cell. This property can be set to enable or disable this tooltip behavior and can also be used to check its current status.
   * Default value: false
   */
  tooltip?: boolean;
}
/**
 PivotTable is a table of statistics that summarizes the data of a more extensive table.
*/
export interface PivotTable extends BaseElement, PivotTableProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever a user clicks on a cell within the component. It provides details about the clicked cell, such as its row and column indices, allowing developers to handle cell-specific actions in response to user interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField, row)
   *  dataField - The data field of the cell's dynamic column.
   *  row - The data of the cell's row.
   */
  onCellClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user modifies the current selection, such as highlighting a different portion of text or choosing a new option within a selectable element. It allows you to respond in real time to changes in selection state.
	* @param event. The custom event. Custom data event was created with: ev.detail(type)
   *  type - The type of action that initiated the selection change. Possible types: 'programmatic', 'interaction', 'remove'.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a user clicks on the header cell of a summary column. It allows you to handle custom actions or logic in response to the user's interaction with the summary column header.
	* @param event. The custom event. Custom data event was created with: ev.detail(columnDefinition, dataField)
   *  columnDefinition - An object detailing the clicked dynamic column.
   *  dataField - The data field of the cell's original column.
   */
  onColumnClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a row within the data table is collapsed by the user, indicating that its expanded content or details are now hidden. It allows you to execute custom logic whenever a previously expanded row is closed.
	* @param event. The custom event. Custom data event was created with: ev.detail(record)
   *  record - The (aggregated) data of the collapsed row.
   */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a total column in the data grid is collapsed by the user, signaling that the column’s aggregated summary view has been hidden from display. This allows you to perform custom actions in response to the collapsing of a total column, such as updating UI elements or recalculating totals.
	* @param event. The custom event. Custom data event was created with: ev.detail(columnDefinition)
   *  columnDefinition - The definition of the collapsed total column.
   */
  onCollapseTotalColumn?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user expands a row, typically to reveal additional details or a nested view associated with that row. It signals that the row has transitioned from a collapsed to an expanded state.
	* @param event. The custom event. Custom data event was created with: ev.detail(record)
   *  record - The (aggregated) data of the expanded row.
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user expands a total column, typically to reveal underlying details or subrows associated with that column. It allows you to respond to the expansion action, such as loading additional data or updating the user interface accordingly.
	* @param event. The custom event. Custom data event was created with: ev.detail(columnDefinition)
   *  columnDefinition - The definition of the expanded total column.
   */
  onExpandTotalColumn?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user performs an action that initiates, modifies, or removes any filter within the application. It provides an opportunity to respond to changes in filter settings, such as applying, updating, or clearing filters on displayed data or content.
	* @param event. The custom event. Custom data event was created with: ev.detail(action, filters)
   *  action - The filtering action. Possible actions: 'add', 'remove'.
   *  filters - The added filters. Only when action is 'add'.
   */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a column header cell within a table or grid. It typically occurs during user interactions such as sorting or selecting columns, making it useful for implementing custom behaviors in response to column header clicks. The event includes relevant details about the column that was clicked, allowing developers to identify and handle specific columns as needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(columns)
   *  columns - An array with information about the dynamic columns the PivotTable has been sorted by.
   */
  onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Applies a filter to a designated column, enabling users to display only the rows that meet specified criteria within that column. This helps refine and customize the data view according to user-defined conditions.
   * @param {string} dataField. The column's data field.
   * @param {any} filter. FilterGroup object.
   */
  addFilter(dataField: string, filter: any): void;
  /**
   * Removes all currently applied filters from the data set, resetting the view to display unfiltered results.
   */
  clearFilters(): void;
  /**
   * Removes any currently selected items or text, resetting the selection state to none.
   */
  clearSelection(): void;
  /**
   * Removes any applied sorting from the PivotTable, restoring the original item order based on the data source’s default arrangement.
   */
  clearSort(): void;
  /**
   * Collapses all rows within the table, minimizing the display of all grouped row sections when multiple row groups are present. This action hides the contents of each group, showing only the group headers or summary rows.
   */
  collapseAllRows(): void;
  /**
   * Collapses a row within a table that has multiple row groups, hiding its detailed content and displaying only the summary or header for that group. This action helps to organize and condense complex tables for easier navigation and viewing.
   * @param {string | number} rowId. The id of the row to collapse. Can be retrieved from the <strong>rows</strong> collection.
   */
  collapseRow(rowId: string | number): void;
  /**
   * Expands all rows in the data grid, including those within multiple row groups, allowing users to view every row regardless of group hierarchy or nesting.
   */
  expandAllRows(): void;
  /**
   * Expands a specific row within the table, allowing additional content or details to be displayed, when multiple row groups are present. This function helps users view more information for a selected row without collapsing the grouping structure.
   * @param {string | number} rowId. The id of the row to expand. Can be retrieved from the <strong>rows</strong> collection.
   */
  expandRow(rowId: string | number): void;
  /**
   * Exports all data from the PivotTable in a structured format, allowing for further analysis, reporting, or use in external applications.
   * @param {string} dataFormat. The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.
   * @param {string} fileName. The name of the file to export to
   * @param {Function} callback?. A callback function to pass the exported data to (if fileName is not provided)
   * @returns {any}
   */
  exportData(dataFormat: string, fileName: string, callback?: Function): any;
  /**
   * Returns an array of the currently active dynamic pivot columns, reflecting the fields that have been selected or computed for pivoting in the current view or dataset. This allows developers to access and manipulate the current pivot configuration programmatically.
   * @returns {any}
   */
  getDynamicColumns(): any;
  /**
   * Returns an array representing the current selection within the grid, based on the specified <strong>selectionMode</strong>:<br/><br/>- When <strong>selectionMode</strong> is set to <em>'many'</em> or <em>'extended'</em>, the array contains the IDs of all selected rows.<br/>- When <strong>selectionMode</strong> is set to <em>'cell'</em>, the array contains objects with details about each selected cell (such as row and column identifiers).<br/><br/>The structure of the returned array adapts dynamically to match the current selection mode.
   * @returns {(string | number)[] | { dataField: string, rowId: string | number }[]}
   */
  getSelection(): (string | number)[] | { dataField: string, rowId: string | number }[];
  /**
   * Updates the PivotTable data and recalculates all its values, ensuring that any changes in the underlying data source are reflected in the PivotTable’s current view.
   */
  refresh(): void;
  /**
   * Removes all active filters from a specified column, restoring the column to display its full, unfiltered dataset.
   * @param {string} dataField. The column's data field.
   */
  removeFilter(dataField: string): void;
  /**
   * Enables selection of rows or cells within the data grid, depending on the specified <strong>selectionMode</strong>:<br/><br/>- When <strong>selectionMode</strong> is set to <em>'many'</em> or <em>'extended'</em>, this function allows for the selection of one or multiple rows.<br/>- When <strong>selectionMode</strong> is set to <em>'cell'</em> and a second argument is provided, it allows for the selection of a single cell instead of an entire row.<br/><br/>Use the appropriate <strong>selectionMode</strong> and arguments to control whether users can select individual rows, multiple rows, or specific cells within the grid.
   * @param {string | number | (string | number)[]} rowId. The id of the row (or an array of row ids) to select (or of the cell's parent row when <strong>selectionMode</strong> is <em>'cell'</em>). Can be retrieved from the <strong>rows</strong> collection.
   * @param {string} dataField?. The dataField of the dynamic column (can be retrieved by calling <strong>getDynamicColumns</strong>) of the cell to select (only applicable when <strong>selectionMode</strong> is <em>'cell'</em>).
   */
  select(rowId: string | number | (string | number)[], dataField?: string): void;
  /**
   * Sorts the data based on the values in a summary or grouping column, allowing you to organize records according to aggregated results or group identifiers.
   * @param {any} columnDefinition. The dynamic column's definition. Can be retrieved from the method <strong>getDynamicColumns</strong>.
   * @param {string} sortOrder?. Sort order. Possible values: 'asc' (ascending), 'desc' (descending), and null (removes sorting by column). If not provided, toggles the sorting.
   */
  sortBy(columnDefinition: any, sortOrder?: string): void;
  /**
   * Deselects one or more rows when <strong>selectionMode</strong> is set to <em>'many'</em> or <em>'extended'</em>. Alternatively, if <strong>selectionMode</strong> is <em>'cell'</em> and a second argument specifying the target cell is provided, this method will deselect the specified cell. This allows for flexible unselection behavior depending on the current selection mode and provided arguments.
   * @param {string | number | (string | number)[]} rowId. The id of the row (or an array of row ids) to select (or of the cell's parent row when <strong>selectionMode</strong> is <em>'cell'</em>). Can be retrieved from the <strong>rows</strong> collection.
   * @param {string} dataField?. The dataField of the dynamic column (can be retrieved by calling <strong>getDynamicColumns</strong>) of the cell to select (only applicable when <strong>selectionMode</strong> is <em>'cell'</em>).
   */
  unselect(rowId: string | number | (string | number)[], dataField?: string): void;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

export interface PivotTableColumn {
  /**
   * Sets or gets the header cell alignment for pivot and summary columns and cell alignment for row group columns.
   * Default value: left
   */
  align?: PivotTableColumnAlign | string;
  /**
   * Sets or gets whether the column can be filtered.
   * Default value: true
   */
  allowFilter?: boolean;
  /**
   * Sets or gets whether the column can be a pivot column.
   * Default value: false
   */
  allowPivot?: boolean;
  /**
   * Sets or gets whether the column can be a row group column.
   * Default value: false
   */
  allowRowGroup?: boolean;
  /**
   * Sets or gets whether summary columns based on the column can be sorted.
   * Default value: true
   */
  allowSort?: boolean;
  /**
   * Sets or gets the column's data source-bound field.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the data type of the column's cells.
   * Default value: string
   */
  dataType?: PivotTableColumnDataType | string;
  /**
   * A callback function that can be used to modify the contents of a cell and the cell itself.
   * Default value: null
   */
  formatFunction?: { (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: any }): void };
  /**
   * Sets or gets the column's displayed text (for example in summary column headers).
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets whether the column is a pivot column. Data from pivot columns is represented as column hierarchy in the PivotTable.
   * Default value: false
   */
  pivot?: boolean;
  /**
   * Sets or gets whether the column is a row group column. Data from row group columns is represented as rows in the PivotTable. If multiple row groups are set, row hierarchy is displayed based on the order of the row group columns in the columns array.
   * Default value: false
   */
  rowGroup?: boolean;
  /**
   * Sets or gets the summary function to aggregate the column's data by and produce dynamic summary columns for each unique pivot data point. There must always be at least one summary column for the PivotTable to make sense. When columnTotals is enabled, all summary columns must have the same summary function set.
   * Default value: sum
   */
  summary?: PivotTableColumnSummary | string;
  /**
   * Sets or gets an object with settings for cells in summary columns. These settings are not applied if column formatFunction is also implemented.
   * Default value: [object Object]
   */
  summarySettings?: { align: string, prefix: string, decimalPlaces: number, thousandsSeparator: string, decimalSeparator: string, negativesInBrackets: boolean };
}

export interface PivotTableConditionalFormatting {
  /**
   * The data field of a numeric column to format. Set 'all' to format all numeric columns.
   * Default value: "all"
   */
  column?: string;
  /**
   * The formatting condition.
   * Default value: lessThan
   */
  condition?: PivotTableConditionalFormattingCondition | string;
  /**
   * The value to compare by. When condition is 'between', this is the start (from) value.
   * Default value: 0
   */
  firstValue?: number;
  /**
   * The fontFamily to apply to formatted cells.
   * Default value: The default fontFamily as set in CSS
   */
  fontFamily?: PivotTableConditionalFormattingFontFamily | string;
  /**
   * The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.
   * Default value: 14px
   */
  fontSize?: PivotTableConditionalFormattingFontSize | string;
  /**
   * The background color to apply to formatted cells.
   * Default value: "The default backgroundColor as set in CSS"
   */
  highlight?: string;
  /**
   * When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
   * Default value: 1
   */
  secondValue?: number;
  /**
   * The text color to apply to formatted cells.
   * Default value: "The default color as set in CSS"
   */
  text?: string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-pivot-table"): PivotTable;
        querySelector(selectors: "smart-pivot-table"): PivotTable | null;
        querySelectorAll(selectors: "smart-pivot-table"): NodeListOf<PivotTable>;
        getElementsByTagName(qualifiedName: "smart-pivot-table"): HTMLCollectionOf<PivotTable>;
        getElementsByName(elementName: "smart-pivot-table"): NodeListOf<PivotTable>;
    }
}

/**Sets or gets the header cell alignment for pivot and summary columns and cell alignment for row group columns. */
export declare type PivotTableColumnAlign = 'center' | 'left' | 'right';
/**Sets or gets the data type of the column's cells. */
export declare type PivotTableColumnDataType = 'boolean' | 'date' | 'number' | 'string';
/**Sets or gets the summary function to aggregate the column's data by and produce dynamic summary columns for each unique pivot data point. There must always be at least one summary column for the PivotTable to make sense. When columnTotals is enabled, all summary columns must have the same summary function set. */
export declare type PivotTableColumnSummary = 'avg' | 'count' | 'max' | 'median' | 'min' | 'product' | 'stdev' | 'stdevp' | 'sum' | 'var' | 'varp';
/**Gets or sets the position of the total columns, which are displayed only when columnTotals is enabled. This option determines where the summary columns appear in the table, such as at the end (right side) of all columns. */
export declare type PivotTableColumnTotalsPosition = 'near' | 'far';
/**The formatting condition. */
export declare type PivotTableConditionalFormattingCondition = 'between' | 'equal' | 'greaterThan' | 'lessThan' | 'notEqual';
/**The fontFamily to apply to formatted cells. */
export declare type PivotTableConditionalFormattingFontFamily = 'The default fontFamily as set in CSS' | 'Arial' | 'Courier New' | 'Georgia' | 'Times New Roman' | 'Verdana';
/**The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default. */
export declare type PivotTableConditionalFormattingFontSize = '8px' | '9px' | '10px' | '11px' | '12px' | '13px' | '14px' | '15px' | '16px';
/**Gets or sets the position of the PivotTable’s designer interface, which appears when the designer option is enabled. This property allows you to specify or retrieve where the designer UI is displayed within the application layout. */
export declare type PivotTableDesignerPosition = 'near' | 'far';
/**Displays an export button within the drill-down dialog when this option is enabled, allowing users to export data directly from the dialog. */
export declare type PivotTableDrillDownDataExport = null | 'xlsx' | 'pdf' | 'html' | 'json' | 'csv' | 'tsv' | 'xml';
/**Defines or retrieves how nested rows—determined by the specified rowGroup columns—are visually organized and displayed within the grid. This setting controls the appearance and structure of hierarchical row groupings. */
export declare type PivotTableGroupLayout = 'classic' | 'default';
/**Specifies or retrieves the number of items displayed per page when paging is enabled. This property determines the page size, allowing you to control how many records are shown on each paginated view. */
export declare type PivotTablePageSize = '10' | '25' | '50';
/**Sets or retrieves the position of row total columns within the table. This option determines where the columns displaying the total values for each row will appear when the rowTotals feature is enabled. Adjusting this setting allows you to control whether the row totals are displayed at the beginning, end, or a specific location among the table columns. */
export declare type PivotTableRowTotalsPosition = 'near' | 'far';
/**Specifies or retrieves the selection mode for the component. This property is effective only when the selection feature is enabled. When disabled, changing or accessing the selection mode has no effect. */
export declare type PivotTableSelectionMode = 'many' | 'extended' | 'cell';
/**Specifies the sorting mode applied to the PivotTable, controlling how data rows or columns are ordered (e.g., ascending, descending, or custom criteria). This setting determines the sequence in which PivotTable items are displayed based on the selected sort option. */
export declare type PivotTableSortMode = 'none' | 'one' | 'many';
export interface PowerButtonProperties {
  /**
   * Specifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Sets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state.
   * Default value: false
   */
  checked?: boolean;
  /**
   * Specifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Controls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Gets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application.
   * Default value: """"
   */
  name?: string;
  /**
   * When the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Retrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically.
   * Default value: """"
   */
  value?: string;
}
/**
 PowerButton is On/Off rounded button.
*/
export interface PowerButton extends BaseElement, PowerButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-power-button"): PowerButton;
        querySelector(selectors: "smart-power-button"): PowerButton | null;
        querySelectorAll(selectors: "smart-power-button"): NodeListOf<PowerButton>;
        getElementsByTagName(qualifiedName: "smart-power-button"): HTMLCollectionOf<PowerButton>;
        getElementsByName(elementName: "smart-power-button"): NodeListOf<PowerButton>;
    }
}

export interface ProgressBarProperties {
  /**
   * Sets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and the element will not perform any animated transitions. Otherwise, specifying a different value enables the corresponding animation behavior.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies whether the element is active and interactive (enabled) or inactive and unresponsive to user input (disabled). When set to true, the element is disabled and cannot be interacted with; when set to false, the element remains enabled and fully functional.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets the Progress bar’s value to the indeterminate state (by assigning null), which triggers and starts the loading animation. In the indeterminate state, the Progress bar does not display a fixed value but instead shows a continuous animation to indicate ongoing activity or loading without specifying progress percentage.
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Specifies the direction in which the Progress Bar fills as its value increases, such as left to right, right to left, top to bottom, or bottom to top.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * A callback function that specifies how to generate or customize the label displayed on the Progress Bar. This function receives relevant data (such as the current progress value) as input and returns a string that determines the label format shown to users. Use this to personalize label content, such as displaying percentages, custom text, or additional information.
   * Default value: null
   */
  formatFunction?: {(value: number): string};
  /**
   * Gets or sets the unlockKey property, which serves as the authorization code required to activate and access the product’s full features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Defines or retrieves the current language setting for the component. This property determines which language is used for displaying text and messages, and works together with the messages property to select the appropriate localized strings. Adjusting this property updates the displayed language dynamically based on the provided message translations.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update content based on the selected locale.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines the highest value that the progress bar can represent, establishing the upper limit for progress tracking. This value determines when the progress bar is considered 100% complete.
   * Default value: 100
   */
  max?: number;
  /**
   * Defines an object containing string values that represent the various states of password strength (e.g., "weak", "medium", "strong"). These values can be used to display contextual feedback to users based on the evaluated strength of their password.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines the lowest allowable value for the progress bar, representing the starting point from which progress is measured. This sets the minimum boundary for the progress indicator’s range.
   * Default value: 0
   */
  min?: number;
  /**
   * Specifies whether the progress bar is displayed horizontally or vertically. Adjusting this property changes the direction in which the progress indicator fills.
   * Default value: horizontal
   */
  orientation?: Orientation | string;
  /**
   * Specifies or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew. When enabled, the element's content and layout will be adjusted to accommodate RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls the visibility of the label for the Progress Bar. When enabled, the label will be displayed; when disabled, the label will be hidden.
   * Default value: false
   */
  showProgressValue?: boolean;
  /**
   * Specifies the theme that controls the visual style and appearance of the element, including aspects such as colors, fonts, and overall design. Selecting a theme customizes how the element is displayed to users.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, this property prevents the element from receiving keyboard focus, making it unreachable via keyboard navigation such as the Tab key.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Retrieves the current value of the progress bar or sets it to a specified value, updating the visual representation accordingly. This value typically indicates the progress of a task as a numeric value within a defined range (e.g., 0 to 100).
   * Default value: 0
   */
  value?: number;
}
/**
 Progress indicators. It can be used to show a user how far along he/she is in a process.
*/
export interface ProgressBar extends BaseElement, ProgressBarProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value of the associated input or component is modified by the user or via programmatic changes. It provides an opportunity to respond in real time to updates, such as validating input, updating the UI, or synchronizing data with other components.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-progress-bar"): ProgressBar;
        querySelector(selectors: "smart-progress-bar"): ProgressBar | null;
        querySelectorAll(selectors: "smart-progress-bar"): NodeListOf<ProgressBar>;
        getElementsByTagName(qualifiedName: "smart-progress-bar"): HTMLCollectionOf<ProgressBar>;
        getElementsByName(elementName: "smart-progress-bar"): NodeListOf<ProgressBar>;
    }
}

export interface QRcodeProperties {
  /**
   * Specifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design.
   * Default value: "white"
   */
  backgroundColor?: string;
  /**
   * Determines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden.
   * Default value: false
   */
  displayLabel?: boolean;
  /**
   * Embeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data.
   * Default value: ""
   */
  embedImage?: string;
  /**
   * Specifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size.
   * Default value: "H"
   */
  errorLevel?: string;
  /**
   * Specifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through.
   * Default value: ""
   */
  imageBackgroundColor?: string;
  /**
   * Specifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size.
   * Default value: 15
   */
  imageHeight?: number;
  /**
   * Specifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage.
   * Default value: 15
   */
  imageWidth?: number;
  /**
   * Specifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors.
   * Default value: "black"
   */
  labelColor?: string;
  /**
   * Specifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code.
   * Default value: "monospace"
   */
  labelFont?: string;
  /**
   * Specifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem).
   * Default value: 14
   */
  labelFontSize?: number;
  /**
   * Specifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it.
   * Default value: 5
   */
  labelMarginBottom?: number;
  /**
   * Specifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it.
   * Default value: 5
   */
  labelMarginTop?: number;
  /**
   * Specifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image.
   * Default value: bottom
   */
  labelPosition?: QRcodeLabelPosition | string;
  /**
   * Specifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting.
   * Default value: "black"
   */
  lineColor?: string;
  /**
   * Specifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page.
   * Default value: 7
   */
  squareWidth?: number;
  /**
   * Specifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application.
   * Default value: svg
   */
  renderAs?: QRcodeRenderAs | string;
  /**
   * Gets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code.
   * Default value: ""
   */
  value?: string;
  /**
   * Specifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code.
   * Default value: 0
   */
  width?: number;
  /**
   * Specifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height.
   * Default value: 0
   */
  height?: number;
}
/**
 QR Codes encode text values in a two-dimensional pattern.
*/
export interface QRcode extends BaseElement, QRcodeProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.
	* @param event. The custom event. Custom data event was created with: ev.detail(invalidCharacters, lengthValidity, patternValidity, value)
   *  invalidCharacters - An array indicating the invalid characters.
   *  lengthValidity - A boolean indicating the length validity.
   *  patternValidity - A boolean indicating the pattern validity.
   *  value - the invalid value of the QR Code.
   */
  onInvalid?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Exports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.
   * @param {string} format. The format of the exported file - svg, png, jpg
   * @param {string} fileName?. The name of the exported file
   */
  export(format: string, fileName?: string): void;
  /**
   * Retrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.
   * @param {string} format. The dataURL format of the string - svg, png, jpg
   * @returns {string}
   */
  getDataURL(format: string): string;
  /**
   * Retrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.
   * @param {string} format. The dataURL format of the string - svg, png, jpg
   * @returns {any}
   */
  getDataURLAsync(format: string): any;
  /**
   * Retrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.
   * @returns {boolean}
   */
  isValid(): boolean;
}

declare global {
    interface Document {
        createElement(tagName: "smart-qrcode"): QRcode;
        querySelector(selectors: "smart-qrcode"): QRcode | null;
        querySelectorAll(selectors: "smart-qrcode"): NodeListOf<QRcode>;
        getElementsByTagName(qualifiedName: "smart-qrcode"): HTMLCollectionOf<QRcode>;
        getElementsByName(elementName: "smart-qrcode"): NodeListOf<QRcode>;
    }
}

/**Specifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image. */
export declare type QRcodeLabelPosition = 'top' | 'bottom';
/**Specifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application. */
export declare type QRcodeRenderAs = 'svg' | 'canvas';
export interface QueryBuilderProperties {
  /**
   * Allows users to drag and reorder conditions within a single group or move conditions between different groups, facilitating flexible arrangement and organization of conditions through a user-friendly drag-and-drop interface.
   * Default value: false
   */
  allowDrag?: boolean;
  /**
   * Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Otherwise, the selected mode determines how animations are displayed within the component.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls the timing of when the element’s value is updated in response to changes, such as user input or interactions. This setting specifies whether the value updates immediately as the user types, when the input loses focus, or upon a specific event.
   * Default value: change
   */
  applyMode?: QueryBuilderApplyMode | string;
  /**
   * When 'applyMode' is set to 'immediately', the default value is instantly assigned to the editor's value, and the QueryBuilder's value is updated in real-time without requiring any additional user action. This ensures that changes are automatically reflected as soon as the default value is set.
   * Default value: false
   */
  autoApplyValue?: boolean;
  /**
   * Controls whether the QueryBuilder component will automatically display a prompt asking the user to enter a value when a new condition is added. If 'applyMode' is set to 'immediately', and the operation field of a newly created condition is empty, QueryBuilder will automatically populate the operation field when the user selects or changes the condition operator. Additionally, whenever the operation or operator of an existing condition is changed, the input field will prompt the user to enter a new value relevant to the updated condition. This ensures that condition values are collected promptly and accurately as users modify or add filtering criteria.
   * Default value: false
   */
  autoPrompt?: boolean;
  /**
   * Enhances the query builder’s condition structure by allowing additional custom operations. Each custom operation can be defined with the following fields:
   * Default value: 
   */
  customOperations?: QueryBuilderCustomOperation[];
  /**
   * Specifies whether the element is interactive and can receive user input. When enabled, the element functions normally. When disabled, the element becomes non-interactive and typically appears visually distinct (e.g., grayed out), preventing user actions such as clicks or text entry.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Configures or retrieves the width (in pixels) of the dropdown menus used in both the property and operator editors, allowing for precise control over their display size in the user interface.
   * Default value: "100%"
   */
  dropDownWidth?: string;
  /**
   * ''An array defining the filterable fields and their corresponding configuration options to control their behavior and appearance. Each field in the array is represented as an object and can be customized using the following properties:- 'label':    The human-readable name for the field. This label will be displayed in the filter field selection dropdown.- 'dataField':    The key or property name in your data source that corresponds to this field.- 'dataType':    Specifies the type of data contained in the field, such as ''string'', ''number'', ''date'', etc. This setting can affect which filter operations are available.- 'filterOperations':    An array specifying which filter operations (such as ''contains'', ''equals'', ''greaterThan'', etc.) can be applied to this field. If this property is omitted, a default set of operations appropriate to the data type will be used.- 'lookup':    An object for configuring the value selection input when filtering this field. The 'lookup' object supports the following options:    - 'autoCompleteDelay':      The delay, in milliseconds, between when the user types in the value selection input and when the dropdown with available options appears.  - 'dataSource':      An array containing the set of predefined options that the user can choose from in the dropdown.  - 'minLength':      The minimum number of characters the user must enter in the input before the options dropdown is shown.  - 'readonly':      Set to 'true' to make the value selection input act as a standard dropdown (the user can only select from the list); set to 'false' for a combo box (the user can type custom values in addition to choosing from the list).This structure provides developers with fine-grained control over how each filter field appears and operates, including the available filter types and the way users select or enter filter values.
   * Default value: null
   */
  fields?: QueryBuilderField[];
  /**
   * Controls whether users are allowed to create and add new fields by typing directly into the field (property) input box, enabling dynamic extension of available fields beyond the predefined options.
   * Default value: dynamic
   */
  fieldsMode?: QueryBuilderFieldsMode | string;
  /**
   * Specifies or retrieves the format string used by the editor for fields of type 'date'. This determines how date values are displayed and parsed within the editor. Adjusting this string allows customization of the date format according to localization or application requirements.
   * Default value: "dd-MMM-yy"
   */
  formatStringDate?: string;
  /**
   * Gets or sets the format string used by the editor for fields of type 'dateTime'. This format string determines how date and time values are displayed and parsed within the editor.
   * Default value: "dd-MMM-yy HH:mm:ss"
   */
  formatStringDateTime?: string;
  /**
   * A callback function that is invoked whenever a new field is dynamically added. This function allows you to configure or modify the settings of the newly added field before it is rendered. This callback is only applicable when fieldsMode is set to 'dynamic'.
   * Default value: null
   */
  getDynamicField?: any;
  /**
   * Specifies the CSS classes assigned to each built-in operation, which determine the corresponding icons displayed for those operations. The icon styles are defined in the smart-query-builder stylesheet. This property takes effect only when showIcons is set to true, enabling visual representation of operations with their respective icons.
   * Default value: { '=': 'equals', '<>': 'notequals', '>': 'greaterthan', '>=': 'greaterthanorequal', '<': 'lessthan', '<=': 'lessthanorequal', 'startswith': 'startswith', 'endswith': 'endswith', 'contains': 'contains', 'notcontains': 'notcontains', 'isblank': 'isblank', 'isnotblank': 'isnotblank' }
   */
  icons?: any;
  /**
   * Provides methods to set or retrieve the 'unlockKey', a unique key required to unlock access to the product. Use this property to assign an unlock key for product activation or to obtain the currently assigned unlock key.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., "en", "fr", "es"). This property determines which set of messages from the messages object will be used for display or processing. Setting this property updates the active language, while getting it returns the currently selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define or modify the formatting of messages generated by the Localization Module before they are returned. Use this to customize message structure, apply additional processing, or support advanced localization needs.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the names of the fields to be included in the filtered element, allowing you to control which data properties are retained or displayed after filtering.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "add": "Add",
   *     "addCondition": "Add Condition",
   *     "addGroup": "Add Group",
   *     "and": "And",
   *     "notand": "Not And",
   *     "or": "Or",
   *     "notor": "Not Or",
   *     "=": "Equals",
   *     "<>": "Does not equal",
   *     ">": "Greater than",
   *     ">=": "Greater than or equal to",
   *     "<": "Less than",
   *     "<=": "Less than or equal to",
   *     "startswith": "Starts with",
   *     "endswith": "Ends with",
   *     "contains": "Contains",
   *     "notcontains": "Does not contain",
   *     "isblank": "Is blank",
   *     "isnotblank": "Is not blank",
   *     "wrongParentGroupIndex": "' method.",
   *     "missingFields": ": Fields are required for proper condition's adding. Set \"fields\" source and then conditions will be added as expected.",
   *     "wrongElementNode": "' method.",
   *     "invalidDataStructure": ": Used invalid data structure in updateCondition/updateGroup method.",
   *     "dateTabLabel": "DATE",
   *     "timeTabLabel": "TIME",
   *     "queryLabel": "Query"
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the placeholder text that appears within the operator selection box when no operator has been chosen for the condition. This text guides users by indicating that they need to select an operator.
   * Default value: "Operator"
   */
  operatorPlaceholder?: string;
  /**
   * Specifies the placeholder text displayed within the condition's property field when no field is currently selected by the user. This text provides guidance or prompts users to select a field.
   * Default value: "Property"
   */
  propertyPlaceholder?: string;
  /**
   * Configures or retrieves the value that determines whether the element’s alignment supports right-to-left (RTL) text direction, which is typically used for languages such as Arabic or Hebrew. This property controls whether the element’s layout and text flow are adjusted to accommodate RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls the visibility of operator icons within the operator selection dropdown menu. When enabled, icons representing each operator are displayed alongside their names in the dropdown list; when disabled, only the operator names are shown without icons.
   * Default value: false
   */
  showIcons?: boolean;
  /**
   * Controls the visibility of the dropdown icon associated with the operator field in the conditions section. When enabled, the dropdown icon appears next to the operator field name, allowing users to select an operator from the available options. When disabled, the dropdown icon is hidden, preventing users from opening the operator selection menu.
   * Default value: false
   */
  showFieldNameArrow?: boolean;
  /**
   * Specifies the theme to be applied to the element. The theme controls the overall appearance, including colors, fonts, and styling, to ensure a consistent visual presentation throughout the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, this property prevents the element from receiving keyboard or programmatic focus, making it unable to become the active element within the user interface.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies whether the condition's value should be validated in real-time as the user types (on every key up event) or only when the input field loses focus (on blur), which is the default behavior. If enabled, value validation occurs after the user stops typing, following a delay defined by the validationTimeout property, which sets the time interval (in milliseconds) before triggering validation after typing ceases.
   * Default value: false
   */
  validateOnInput?: boolean;
  /**
   * Specifies the delay (in milliseconds) that begins once the user has stopped typing in the value field, after which the condition value is validated. This property works in conjunction with validationOnInput, controlling how soon validation is triggered after user input is complete.
   * Default value: 100
   */
  validationTimeout?: number;
  /**
   * The value is structured as a multidimensional array, where each top-level element represents a group operator (such as AND or OR) that organizes multiple conditions. Within each group, an array of condition objects specifies the individual filtering criteria. This structure allows for the representation of complex, nested logical expressions by combining multiple groups and conditions.
   * Default value: 
   */
  value?: any;
  /**
   * A callback function that formats the display or value of the condition input fields before they are rendered or processed. Use this to customize how condition values appear to users or are handled within the application.
   * Default value: null
   */
  valueFormatFunction?: any;
  /**
   * Specifies the placeholder text displayed within the condition's value input field when no value has been entered. This text provides guidance or hints to the user about the expected input.
   * Default value: "Value"
   */
  valuePlaceholder?: string;
}
/**
 QueryBuilder allows you to build dynamically queries for filtering.
*/
export interface QueryBuilder extends BaseElement, QueryBuilderProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value within the query builder is modified by the user, such as adding, editing, or removing rules or conditions. It provides an opportunity to respond to changes in the query configuration, such as validating input, updating results, or synchronizing state with other components.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, data, originalEvent)
   *  item - The item that is being dragged.
   *  data - The data of the item that is being dragged.
   *  originalEvent - The original event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a condition that is being dragged is dropped onto a valid target area within the interface. You can prevent the drop action from completing by calling event.preventDefault() within the event handler function. This allows you to implement custom validation or restrict drops based on specific criteria before the condition is accepted.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, data, target, targetData, targetSide)
   *  item - The item that is being dragged.
   *  data - The data of the item that is being dragged.
   *  target - The target item.
   *  targetData - the data of the target item.
   *  targetSide - The side of the target item where the dragged item will be dropped.
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a condition element is actively being dragged within the user interface. It fires continuously throughout the dragging process, allowing developers to track the position and state of the condition as it moves, and to implement custom behaviors—such as visual feedback or dynamic updates—while the drag action is in progress.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, data, originalEvent)
   *  item - The item that is being dragged.
   *  data - The data of the item that is being dragged.
   *  originalEvent - The original event.
   */
  onDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event fires when a drag operation begins within the jqx-query-builder component. You can intercept and prevent the drag action from proceeding by calling event.preventDefault() within your event handler. This allows you to implement custom logic or restrictions before the drag operation officially starts.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, data, originalEvent)
   *  item - The item is going to be dragged.
   *  data - The data of the item that is going to be dragged.
   *  originalEvent - The original event.
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a user interacts with any component of the query builder—such as selecting an operator, clicking on a field name, entering a value, or pressing the close button. It allows you to respond to user actions on any of the query builder’s building blocks.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, type, data)
   *  id - The internal id of the clicked item, e.g. '0.1', '1.1', etc.
   *  type - The type of the clicked item ( condition or a group ).
   *  data - The data of the item.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user selects a specific field, indicating that the field has become active or has received focus. It can be used to initiate actions such as loading related data, displaying contextual hints, or tracking user interactions with the form element.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, value)
   *  label - The label of the selected property.
   *  value - The value of the selected property.
   */
  onPropertySelected?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the component performs input validation. Validation occurs each time a user enters a new value and then shifts focus away from the component (for example, by clicking or tabbing to another UI element). The event provides an opportunity to respond to changes in the input’s validity, such as displaying error messages or updating related state.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, newValue)
   *  oldValue - Old validation status.
   *  newValue - New validation status.
   */
  onValidationChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Transforms the element's current value into a valid Dynamic LINQ expression, enabling advanced querying and runtime evaluation based on the element's data.
   * @returns {string}
   */
  getLinq(): string;
}

export interface QueryBuilderCustomOperation {
  /**
   * label to be displayed in the operator box. Multiple operations with the same label can exist
   * Default value: ""
   */
  label?: string;
  /**
   * A unique name for the operation.
   * Default value: ""
   */
  name?: string;
  /**
   * A callback function that creates a custom value editor. Takes three arguemnts: fieldType - the type of the field for the operation.value - the value of the condition.fieldData - the field object.
   * Default value: null
   */
  editorTemplate?: any;
  /**
   * A callback function that displays the value after the edior has been closed. Takes two argument: editor - the custom editor elementvalue - the condition value.
   * Default value: null
   */
  valueTemplate?: any;
  /**
   * A callback function that handles the value returned by the editor when it is closed. The callback takes one arguemnt - the custom editor element. If the dataType is 'object' the expected result from the function should contain a 'label' and 'value' attributes. Where the label will be used for displaying purposes while 'value' will be used as the actual value.
   * Default value: null
   */
  handleValue?: any;
  /**
   * A boolean condition that specifies whether the operation requires a value or not.
   * Default value: false
   */
  hideValue?: boolean;
  /**
   * A callback that is executed when QueryBuilder validation is triggered. The callback takes one argument, the value of the condition. The function should return true or false to determine whether the conditon is valid or not.
   * Default value: null
   */
  validateValue?: any;
  /**
   * A callback that is called when the custom editor is rendered, visible inside the DOM and ready to be opened. The callback has one parameter - the custom editor element.
   * Default value: null
   */
  onEditorOpen?: any;
  /**
   * A string representing a custom Linq expression template. If the value of the element is a string it will be considered as a Linq expression and it will be checked against all expressionTemplates to find a match.
   * Default value: "null"
   */
  expressionTemplate?: string;
  /**
   * A callback that is used to specify which arguments from the expression are used for the fieldName and value. Used when converting a Linq expression to QueryBuilder value. Takes two arguments: expression - the LinQ expression defined in the expressionTemplate of the customOperator. Type stringbindings - an array of expression parameters based on the expression template of the customOperator. Type string[]
   * Default value: null
   */
  expressionReaderCallback?: any;
  /**
   * A callback function that is used to specify which arguments from the Linq expression are used for the fieldName and value when building the Linq expression from the current value of the element. Takes three arguments: name - the name of the dataField. Type string.operation - the name of the operation. Type stringvalue - the value of the operation. Type any( depends on the dataField).
   * Default value: null
   */
  expressionBuilderCallback?: any;
}

export interface QueryBuilderField {
  /**
   * Sets or gets the label.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets the data field
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the data type.
   * Default value: "string"
   */
  dataType?: string;
  /**
   * Sets or gets the filter format.
   * Default value: ""
   */
  format?: string;
  /**
   * Sets or gets the filter operations.
   * Default value: []
   */
  filterOperations?: string[];
}

declare global {
    interface Document {
        createElement(tagName: "smart-query-builder"): QueryBuilder;
        querySelector(selectors: "smart-query-builder"): QueryBuilder | null;
        querySelectorAll(selectors: "smart-query-builder"): NodeListOf<QueryBuilder>;
        getElementsByTagName(qualifiedName: "smart-query-builder"): HTMLCollectionOf<QueryBuilder>;
        getElementsByName(elementName: "smart-query-builder"): NodeListOf<QueryBuilder>;
    }
}

/**Controls the timing of when the element’s value is updated in response to changes, such as user input or interactions. This setting specifies whether the value updates immediately as the user types, when the input loses focus, or upon a specific event. */
export declare type QueryBuilderApplyMode = 'change' | 'immediately';
/**Controls whether users are allowed to create and add new fields by typing directly into the field (property) input box, enabling dynamic extension of available fields beyond the predefined options. */
export declare type QueryBuilderFieldsMode = 'dynamic' | 'static';
export interface RadioButtonProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled for the associated element. Use this property to enable, disable, or adjust the animation behavior as needed.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Sets or retrieves the current checked state of the control. This property allows you to specify whether the control is checked, unchecked, or—if supported—set to an indeterminate state. You can use it to update the visual state of elements like checkboxes or radio buttons, or to query their current status in your application logic.
   * Default value: false
   */
  checked?: boolean;
  /**
   * Sets or retrieves the specific part of the element responsible for toggling its state (such as showing or hiding content). This attribute identifies which internal component or sub-element responds to toggle actions, enabling interactive behavior.
   * Default value: both
   */
  checkMode?: CheckMode | string;
  /**
   * Specifies how the radio button responds to user click events, determining whether the button is selected, toggled, or triggers a specific action when clicked.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Controls whether the ratio button is displayed and functional. When enabled, users can interact with the ratio button; when disabled, the button is hidden or inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or retrieves the name of the group to which the widget belongs. This property allows you to organize multiple widgets into logical groups, enabling group-based behavior or styling. When setting this property, the widget is associated with the specified group; when getting, it returns the current group name assigned to the widget.
   * Default value: """"
   */
  groupName?: string;
  /**
   * Gets or sets the HTML content contained within the widget. Setting this property updates the widget’s inner HTML structure, while getting it returns the current HTML markup inside the widget. Use this property to dynamically modify or retrieve the widget’s content.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Defines or retrieves the unlockKey property, which serves as the credential required to unlock access to the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language code (e.g., "en", "fr", "es") used by the component or application. This property works together with the messages property to determine which set of localized messages or translations should be displayed to the user. Adjusting the language value dynamically updates the displayed content based on the corresponding messages for the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically invoked to handle events or updates related to language changes, text translation, or region-specific content within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines an object that maps different password strength states to their corresponding descriptive string values. This allows you to customize the messages shown to users based on the evaluated strength of their password (e.g., "weak," "medium," "strong").
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Gets the current name of the widget or assigns a new name to the widget. The name serves as a unique identifier, which can be used for tracking, referencing, or interacting with the widget programmatically.
   * Default value: """"
   */
  name?: string;
  /**
   * When the custom element is set to readonly, its value cannot be modified by user input or interaction. All form controls within the element will display their current values but will be non-editable, preventing users from changing, adding, or deleting content. However, the element may still support programmatic updates via JavaScript.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a Boolean value that determines whether the element’s content is aligned to accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When set to true, the element’s layout and text flow are adjusted to support RTL locales and fonts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied. The selected theme controls the overall appearance, including colors, fonts, and styling of the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to navigate to the element using the Tab key or other focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the widget or retrieves its current value, depending on the context in which the method is called. This allows you to programmatically update the widget's content or access the value entered or selected by the user.
   * Default value: """"
   */
  value?: string;
}
/**
 The Radio Button component lets you add a radio button and assign it to a radio group. Users can select only one radio button at a time within a radio group
*/
export interface RadioButton extends BaseElement, RadioButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the widget’s checked state changes, such as when a user selects (checks) or deselects (unchecks) the widget. It allows you to execute custom logic in response to the user interacting with the widget’s selection control.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, changeType)
   *  value - A boolean value indicating the new state of the button ( checked or not ).
   *  oldValue - A boolean value indicating the previous state of the button ( checked or not ).
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the widget's checked state changes from unchecked to checked, indicating that the user has selected or activated the widget. This event is typically used to execute custom logic in response to the widget being checked, such as updating the UI, submitting data, or enabling related features.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user deselects or unchecks the widget, indicating a change in its state from checked to unchecked. It allows developers to respond to the action of unchecking, such as updating the user interface or processing form data.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onUncheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-radio-button"): RadioButton;
        querySelector(selectors: "smart-radio-button"): RadioButton | null;
        querySelectorAll(selectors: "smart-radio-button"): NodeListOf<RadioButton>;
        getElementsByTagName(qualifiedName: "smart-radio-button"): HTMLCollectionOf<RadioButton>;
        getElementsByName(elementName: "smart-radio-button"): NodeListOf<RadioButton>;
    }
}

export interface RatingProperties {
  /**
   * Gets or sets the animation mode for the component. When this property is set to 'none', all animations are disabled, and transitions will occur instantly without any animated effects. Use this property to enable, disable, or modify the animation behavior as needed.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Prevents any user interaction with the element, making it unresponsive to mouse, keyboard, and touch events such as clicks, focus, or input. The element will appear visually inactive and will not trigger any associated event handlers.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets the unlockKey property, which serves as the credential required to unlock and activate the product’s full functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which localized set of messages (defined in the messages property) will be used for display and communication. Use this property to dynamically change the language of the interface by updating it in conjunction with the messages object.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A function that allows you to customize how messages are formatted before they are returned by the Localization Module. This callback receives the original message and any associated variables, enabling you to adjust the output format, apply additional logic, or support advanced localization requirements.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies the total number of stars to display in the rating component. This value controls how many individual star icons are shown, allowing users to select a rating between 1 and the specified number.
   * Default value: 
   */
  max?: number;
  /**
   * Specifies or retrieves an object containing the localized strings used by the element. This property allows you to define text labels, messages, or other UI strings that can be translated based on the user's language or region. It is typically used together with the locale property to display the appropriate translations for different locales.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the name attribute of the element, which is used as the key when the form data is submitted. This allows the value of the element to be identified and processed on the server side.
   * Default value: ""
   */
  name?: string;
  /**
   * Sets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. Enabling this option ensures that the element properly supports locales that use RTL scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the theme to be applied. The selected theme controls the visual appearance, including colors, fonts, and styling, of the element.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to navigate to the element using the Tab key or similar methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies how many stars should be visually highlighted to indicate the current rating value. This number determines which stars appear filled or active in the rating component.
   * Default value: 
   */
  value?: number;
}
/**
 Rating allows you to input a rating. It is broadly used in applications with reviews.
*/
export interface Rating extends BaseElement, RatingProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user adjusts the slider to a new value, either by dragging the handle or using keyboard controls. It fires each time the slider's value is updated, allowing you to respond dynamically to user input and capture the current value in real time.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue)
   *  value - A numeric value indicating the scroll position.
   *  oldValue - A numeric value indicating the previous scroll position.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Retrieve the current value assigned to the rating property, indicating the user's selected rating or the rating score for the item.
   * @returns {number}
   */
  getValue(): number;
  /**
   * Assigns or updates the current rating value. This property determines the selected rating level, typically represented by a numeric value (e.g., 1 to 5), and can be used to display the user’s chosen rating or set a default rating programmatically.
   * @param {number} value. Sets the value of the rating
   */
  setValue(value: number): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-rating"): Rating;
        querySelector(selectors: "smart-rating"): Rating | null;
        querySelectorAll(selectors: "smart-rating"): NodeListOf<Rating>;
        getElementsByTagName(qualifiedName: "smart-rating"): HTMLCollectionOf<Rating>;
        getElementsByName(elementName: "smart-rating"): NodeListOf<Rating>;
    }
}

export interface RepeatButtonProperties {
  /**
   * Gets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Defines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again.
   * Default value: 50
   */
  delay?: number;
  /**
   * Controls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations.
   * Default value: 150
   */
  initialDelay?: number;
  /**
   * Assigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS).
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., "en", "fr", "es") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines an object containing string values that represent the various states of password strength, such as "weak," "medium," and "strong." Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Retrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically.
   * Default value: """"
   */
  name?: string;
  /**
   * When the custom element is set to "readonly", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data.
   * Default value: """"
   */
  value?: string;
}
/**
 RepatButton provides press-and-hold functionality and it is an ideal UI component for allowing end-users to control an increasing or decreasing value.
*/
export interface RepeatButton extends BaseElement, RepeatButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.
	* @param event. The custom event.    */
  onClick: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-repeat-button"): RepeatButton;
        querySelector(selectors: "smart-repeat-button"): RepeatButton | null;
        querySelectorAll(selectors: "smart-repeat-button"): NodeListOf<RepeatButton>;
        getElementsByTagName(qualifiedName: "smart-repeat-button"): HTMLCollectionOf<RepeatButton>;
        getElementsByName(elementName: "smart-repeat-button"): NodeListOf<RepeatButton>;
    }
}

export interface RibbonProperties {
  /**
   * Specifies whether the ribbon interface can be collapsed or expanded by the user, allowing for a more compact or fully visible display as needed.
   * Default value: false
   */
  collapsible?: any;
  /**
   * Specifies the individual tab items to be displayed within the ribbon interface. Each tab item typically represents a distinct category or section, allowing users to easily navigate and access grouped commands or features within the ribbon.
   * Default value: 
   */
  dataSource?: any;
  /**
   * Specifies or retrieves whether the element is disabled, preventing user interaction and making it unresponsive to mouse and keyboard events. When set to true, the element cannot be activated or receive input focus.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the available file menu options displayed within the ribbon interface, defining which actions (such as New, Open, Save, Print, etc.) users can access from the file menu.
   * Default value: undefined
   */
  fileMenu?: RibbonFileMenu;
  /**
   * Sets or retrieves the value of the unlockKey property, which is used to authenticate and authorize access to unlock the product. The unlockKey typically functions as a secure code or token required to enable full product functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the localization settings for the ribbon, determining the language and regional formatting (such as date, time, and number formats) used for displaying text and other interface elements.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Specifies the text and content displayed in the ribbon's message area, allowing customization of informational or notification messages shown to users within the ribbon interface.
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * Specifies or retrieves a value that determines whether the element’s alignment is optimized for right-to-left (RTL) languages, such as Arabic or Hebrew. This affects the element’s text direction, layout flow, and alignment to accommodate locales that use right-to-left scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies which tab is currently selected and active in the tab navigation component, typically by its index or identifier. This property controls which tab's content is visible to the user.
   * Default value: 0
   */
  selectedTab?: any;
}
/**
 Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
*/
export interface Ribbon extends BaseElement, RibbonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the ribbon component transitions from its expanded state to a collapsed state. It allows developers to execute custom logic or UI updates in response to the ribbon becoming minimized or hidden from view.
	* @param event. The custom event.    */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when the ribbon begins the process of collapsing, allowing you to execute custom logic before the collapse completes. If you wish to prevent the ribbon from collapsing, you can call event.preventDefault() within your event handler. This will cancel the default collapsing action, keeping the ribbon expanded.
	* @param event. The custom event.    */
  onCollapsing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user clicks the dialog launcher button, typically represented by a small icon (such as an arrow or ellipsis) in a component's toolbar or header. The event indicates the user's intention to open an extended options dialog or advanced settings panel related to the component.
	* @param event. The custom event. Custom data event was created with: ev.detail(groupLabel, groupId)
   *  groupLabel - The label of the dialog launcher's ribbon group.
   *  groupId - The id of the dialog launcher's ribbon group.
   */
  onDialogLauncherClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the ribbon interface transitions from its collapsed state to an expanded state, indicating that additional options or tools have become visible to the user. Use this event to execute custom logic or UI updates whenever the ribbon expands.
	* @param event. The custom event.    */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when the ribbon component begins to expand. You can intercept and cancel the expansion by calling event.preventDefault() within your event handler function. This allows you to programmatically control whether or not the ribbon expands based on custom logic.
	* @param event. The custom event.    */
  onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the file menu button is clicked by the user. It is typically used to open, display, or perform actions related to the file menu, such as showing file options or initializing file-related functions. The event provides an opportunity for developers to execute custom logic in response to user interaction with the file menu button.
	* @param event. The custom event.    */
  onFileButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user opens the file menu, such as by clicking on the "File" option in the application's main menu bar. It allows developers to execute custom logic immediately when the file menu becomes visible to the user.
	* @param event. The custom event.    */
  onFileMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the file menu is closed, either by user interaction or programmatically. It occurs after all menu actions have completed, signaling that the file menu is no longer visible or active. Developers can use this event to execute cleanup operations, update the user interface, or manage application state in response to the menu being closed.
	* @param event. The custom event.    */
  onFileMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on an item within the file menu. It allows you to execute custom actions in response to specific file menu selections, such as opening, saving, or closing a file. The event provides details about the selected menu item, enabling context-aware handling within your application.
	* @param event. The custom event. Custom data event was created with: ev.detail(item)
   *  item - The file menu item.
   */
  onFileMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user selects a different tab, indicating that the active tab within the interface has changed. It allows you to respond to changes in tab selection, such as updating displayed content, fetching new data, or tracking user navigation within tabbed components.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index)
   *  oldIndex - The previous tab index.
   *  index - The new index of the selected tab.
   */
  onSelect?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired immediately before the active tab changes, allowing you to intercept and potentially prevent the tab switch. To cancel the tab selection change, call event.preventDefault() within your event handler. This provides an opportunity to perform validations or prompt the user before the change is finalized.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index)
   *  oldIndex - The previous tab index.
   *  index - The new index of the selected tab.
   */
  onSelecting?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new tab to the application's ribbon interface. The tab can be specified in one of three ways: as a configuration object defining the tab's properties, as an existing HTMLElement to be used as the tab, or as a string representing the id of an existing HTMLElement to be added as the tab. This provides flexibility in how ribbon tabs are created and integrated.
   * @param {any} tab. The ribbon tab to be added.
   */
  addTab(tab: any): void;
  /**
   * Enhances a ribbon tab by adding a new group. The group can be specified in one of the following ways: as an object defining its properties, as a direct reference to an HTMLElement, or as a string representing the id of an existing HTMLElement. This flexibility allows you to create the group dynamically, use an already created DOM element, or reference an element by its id.
   * @param {any} tab. The id, index or HTMLElement  of the parent ribbon tab.
   * @param {any} group. The ribbon group to be added.
   */
  addGroup(tab: any, group: any): void;
  /**
   * Adds a new item to a specified ribbon group in the ribbon interface. The new item can be provided in one of the following forms: as a configuration object, as an actual HTMLElement, or by specifying the id of an existing HTMLElement. This offers flexibility in how ribbon items are defined and incorporated into the ribbon group.
   * @param {string | number | HTMLElement} tab. The id, index or HTMLElement  of the parent ribbon tab.
   * @param {string | HTMLElement} group. The id or HTMLElement of the parent ribbon group.
   * @param {any} item. The ribbon item to be added.
   */
  addItem(tab: string | number | HTMLElement, group: string | HTMLElement, item: any): void;
  /**
   * Minimizes the ribbon interface, hiding its commands and options, to provide more workspace on the screen.
   */
  collapse(): void;
  /**
   * Expands the ribbon interface to reveal additional tools, features, and options that are otherwise hidden from view. This action increases the available workspace by displaying the full set of ribbon commands and controls.
   */
  expand(): void;
  /**
   * Removes a specified tab from the ribbon interface, effectively hiding it and its associated commands from the user’s view. This action ensures that the tab and its contents are no longer accessible within the ribbon navigation.
   * @param {string | number} ribbonTab. The id or index of the ribbon tab to be removed.
   */
  removeTab(ribbonTab: string | number): void;
  /**
   * Removes a specified ribbon group from the selected ribbon tab, effectively deleting that group's controls and functionalities from the tab's interface.
   * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
   * @param {string | number} ribbonGroup?. The id or index of the ribbon group to be removed.
   */
  removeGroup(ribbonTabIndex?: string | number, ribbonGroup?: string | number): void;
  /**
   * Removes a specified ribbon item from its parent ribbon group, effectively deleting the item from the group and updating the user interface accordingly. This operation ensures that the ribbon group no longer displays or interacts with the removed item.
   * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
   * @param {string | number} ribbonGroup?. The id or index of the parent ribbon group.
   * @param {string | number} ribbonItem?. The id or index of the ribbon item to be removed.
   */
  removeItem(ribbonTabIndex?: string | number, ribbonGroup?: string | number, ribbonItem?: string | number): void;
  /**
   * Activates the specified ribbon tab, bringing its contents into focus and making its associated controls and options accessible to the user.
   * @param {string | number} ribbonTabIndex. The index of the ribbon tab to be selected.
   */
  selectTab(ribbonTabIndex: string | number): void;
}

/**Specifies the available file menu options displayed within the ribbon interface, defining which actions (such as New, Open, Save, Print, etc.) users can access from the file menu. */
export interface RibbonFileMenu {
  /**
   * Determines whether the file button is enabled.
   * Default value: true
   */
  enabled?: boolean;
  /**
   * Determines the data source that will be loaded to the FileMenu.
   * Default value: 
   */
  items?: any;
  /**
   * Determines the position of the file menu.
   * Default value: left
   */
  position?: RibbonFileMenuPosition | string;
  /**
   * Determines the label of the file menu.
   * Default value: "File"
   */
  label?: string;
  /**
   * Determines the tooltip of the file menu.
   * Default value: ""
   */
  tooltip?: string;
  /**
   * Determines the template of the file menu. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
   * Default value: ""
   */
  template?: string;
  /**
   * Determines the type of the file menu.
   * Default value: dropDown
   */
  type?: RibbonFileMenuType | string;
  /**
   * Determines the icon of the file menu.
   * Default value: ""
   */
  icon?: string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-ribbon"): Ribbon;
        querySelector(selectors: "smart-ribbon"): Ribbon | null;
        querySelectorAll(selectors: "smart-ribbon"): NodeListOf<Ribbon>;
        getElementsByTagName(qualifiedName: "smart-ribbon"): HTMLCollectionOf<Ribbon>;
        getElementsByName(elementName: "smart-ribbon"): NodeListOf<Ribbon>;
    }
}

/**Determines the position of the file menu. */
export declare type RibbonFileMenuPosition = 'left' | 'right';
/**Determines the type of the file menu. */
export declare type RibbonFileMenuType = 'dropDown' | 'button';
export interface RibbonGroupProperties {
  /**
   * Specifies the text or title displayed as the label for the ribbon group, helping users identify the purpose or category of the grouped controls within the ribbon interface.
   * Default value: ""
   */
  label?: string;
  /**
   * Specifies the icon displayed for the ribbon group. This property defines the visual symbol or image that represents the group within the ribbon interface, enhancing usability and quick identification for users.
   * Default value: ""
   */
  icon?: string;
  /**
   * Specifies the CSS class applied to the ribbon group, which controls its appearance and styling. Use this property to customize the look and feel of the ribbon group by assigning one or more class names.
   * Default value: ""
   */
  cssClass?: string;
  /**
   * Defines the collection of items displayed within the ribbon group, specifying the individual controls, buttons, menus, or tools that appear as part of the ribbon interface. This property allows customization of the content and arrangement of the ribbon group elements.
   * Default value: 
   */
  ribbonItems?: any;
  /**
   * Specifies the orientation of the ribbon group, such as horizontal or vertical, affecting how its contained items are arranged and displayed within the user interface.
   * Default value: horizontal
   */
  direction?: RibbonGroupDirection | string;
  /**
   * Defines the configuration options for the dialog launcher button within the ribbon group, specifying its appearance, behavior, and associated actions when activated by the user.
   * Default value: [object Object]
   */
  dialogLauncher?: RibbonGroupDialogLauncher;
  /**
   * Specifies the minimum width (in pixels) at which the ribbon group will be displayed on a single line. If the available space becomes smaller than this value, the ribbon group will automatically wrap to a new line to maintain a responsive layout.
   * Default value: undefined
   */
  wrapSize?: RibbonGroupWrapSize | string;
}
/**
 Defines a ribbon group.
*/
export interface RibbonGroup extends BaseElement, RibbonGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

/**Defines the configuration options for the dialog launcher button within the ribbon group, specifying its appearance, behavior, and associated actions when activated by the user. */
export interface RibbonGroupDialogLauncher {
  /**
   * Determines whether the dialog launcher is enabled.
   * Default value: false
   */
  enabled?: boolean;
  /**
   * Determines the tooltip of the dialog launcher.
   * Default value: ""
   */
  tooltip?: string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-ribbon-group"): RibbonGroup;
        querySelector(selectors: "smart-ribbon-group"): RibbonGroup | null;
        querySelectorAll(selectors: "smart-ribbon-group"): NodeListOf<RibbonGroup>;
        getElementsByTagName(qualifiedName: "smart-ribbon-group"): HTMLCollectionOf<RibbonGroup>;
        getElementsByName(elementName: "smart-ribbon-group"): NodeListOf<RibbonGroup>;
    }
}

/**Specifies the orientation of the ribbon group, such as horizontal or vertical, affecting how its contained items are arranged and displayed within the user interface. */
export declare type RibbonGroupDirection = 'horizontal' | 'vertical';
/**Specifies the minimum width (in pixels) at which the ribbon group will be displayed on a single line. If the available space becomes smaller than this value, the ribbon group will automatically wrap to a new line to maintain a responsive layout. */
export declare type RibbonGroupWrapSize = 'iconOnly' | 'verySmall' | 'small' | 'normal' | 'large' | 'none';
export interface RibbonItemProperties {
  /**
   * Specifies whether the ribbon item is disabled and unresponsive to user interactions. If set to 'true', the ribbon item will appear visually inactive and cannot be clicked or selected by the user. If 'false', the item remains enabled and fully interactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the text displayed as the label on the ribbon item, providing users with a clear description or name for the ribbon element.
   * Default value: ""
   */
  label?: string;
  /**
   * Specifies the category or function of the ribbon item, such as button, dropdown, separator, or other UI element types. This property helps define how the ribbon item behaves and is displayed within the ribbon interface.
   * Default value: button
   */
  type?: RibbonItemType | string;
  /**
   * Specifies the template used to render the ribbon item. This property accepts one of the following:- An HTMLTemplateElement instance.- The id (string) of an existing HTMLTemplateElement in the DOM.- A function that returns either a template string or an HTML element.This allows you to customize the appearance and content of the ribbon item by providing a static template, referencing a template by id, or generating templates dynamically through a function.
   * Default value: ""
   */
  template?: string;
  /**
   * Specifies the dimensions or size configuration (such as small, medium, or large) for the ribbon item, affecting its visual appearance and layout within the ribbon interface.
   * Default value: normal
   */
  size?: RibbonItemSize | string;
  /**
   * 
   * Default value: null
   */
  sizeChanged?: any;
  /**
   * Specifies the permissible dimensions (such as small, medium, or large) that the ribbon item can be displayed in. This setting controls which size options are available for the ribbon item’s appearance within the user interface.
   * Default value: 
   */
  allowedSizes?: any;
  /**
   * Specifies the icon displayed on the ribbon item. This property sets the visual symbol or graphic that represents the ribbon item in the user interface, allowing users to quickly identify its function. The icon can typically be defined using an icon name, image URL, or SVG markup, depending on the framework or library in use.
   * Default value: ""
   */
  icon?: string;
  /**
   * Controls the configuration options for the ribbon item. When the ribbon item is designated as a Smart Element, these settings are applied as its properties, allowing for dynamic customization of its appearance and behavior within the ribbon interface.
   * Default value: [object Object]
   */
  settings?: RibbonItemSettings;
  /**
   * Specifies the CSS class or classes to be applied to the ribbon item, allowing for customized styling and appearance. This property enables developers to control the visual presentation of individual ribbon items by assigning one or more class names.
   * Default value: ""
   */
  cssClass?: string;
  /**
   * Assigns a custom function to be executed when the ribbon item is clicked, enabling the implementation of specific actions or behaviors in response to user interaction.
   * Default value: null
   */
  onItemClick?: any;
  /**
   * Registers a handler function that will be triggered when the ribbon item's value or state changes, allowing you to respond dynamically to user interactions or programmatic updates.
   * Default value: null
   */
  onItemChange?: any;
  /**
   * Specifies the text that appears as a tooltip when users hover over the ribbon item, providing additional information or guidance about its function.
   * Default value: ""
   */
  tooltip?: string;
}
/**
 Defines a ribbon item.
*/
export interface RibbonItem extends BaseElement, RibbonItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

/**Controls the configuration options for the ribbon item. When the ribbon item is designated as a Smart Element, these settings are applied as its properties, allowing for dynamic customization of its appearance and behavior within the ribbon interface. */
export interface RibbonItemSettings {
}

declare global {
    interface Document {
        createElement(tagName: "smart-ribbon-item"): RibbonItem;
        querySelector(selectors: "smart-ribbon-item"): RibbonItem | null;
        querySelectorAll(selectors: "smart-ribbon-item"): NodeListOf<RibbonItem>;
        getElementsByTagName(qualifiedName: "smart-ribbon-item"): HTMLCollectionOf<RibbonItem>;
        getElementsByName(elementName: "smart-ribbon-item"): NodeListOf<RibbonItem>;
    }
}

/**Specifies the category or function of the ribbon item, such as button, dropdown, separator, or other UI element types. This property helps define how the ribbon item behaves and is displayed within the ribbon interface. */
export declare type RibbonItemType = 'separator' | 'button' | 'toggleButton' | 'multiSplitButton' | 'dropDownButton' | 'input' | 'custom';
/**Specifies the dimensions or size configuration (such as small, medium, or large) for the ribbon item, affecting its visual appearance and layout within the ribbon interface. */
export declare type RibbonItemSize = 'iconOnly' | 'small' | 'verySmall' | 'normal' | 'large';
export interface RibbonTabProperties {
  /**
   * Specifies whether the tab item is disabled and unresponsive to user interaction. When set to true, the tab cannot be selected or activated by the user.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the text displayed as the label for the tab item, allowing users to identify and select the corresponding tab in the interface.
   * Default value: ""
   */
  label?: string;
  /**
   * Indicates whether the tab item is currently active and selected by the user. When set to true, this tab will be visually highlighted and its associated content will be displayed.
   * Default value: false
   */
  selected?: boolean;
  /**
   * Specifies the ribbon group to which the tab item belongs, enabling organization and grouping of related commands within the ribbon interface.
   * Default value: undefined
   */
  ribbonGroups?: any;
}
/**
 Defines a ribbon tab.
*/
export interface RibbonTab extends BaseElement, RibbonTabProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-ribbon-tab"): RibbonTab;
        querySelector(selectors: "smart-ribbon-tab"): RibbonTab | null;
        querySelectorAll(selectors: "smart-ribbon-tab"): NodeListOf<RibbonTab>;
        getElementsByTagName(qualifiedName: "smart-ribbon-tab"): HTMLCollectionOf<RibbonTab>;
        getElementsByName(elementName: "smart-ribbon-tab"): NodeListOf<RibbonTab>;
    }
}

export interface SchedulerProperties {
  /**
   * Specifies how quickly the calendar view scrolls vertically or horizontally when a user drags an event near the edge of the view. Adjusting this value controls the speed at which the calendar auto-scrolls during drag-and-drop event operations, enhancing user navigation for long or densely populated calendars.
   * Default value: 30
   */
  autoScrollStep?: number;
  /**
   * Controls whether the height of all-day cells in the Day and Week calendar views automatically adjusts based on the number of events scheduled in each cell. When enabled, all-day cells will dynamically expand or contract in height to fit all contained events; when disabled, the cell height remains fixed regardless of the number of events.
   * Default value: false
   */
  autoHeightAllDayCells?: boolean;
  /**
   * Specifies an array of objects, each representing a time interval with start and end properties. Both the start and end fields are ISO 8601 formatted date-time strings (e.g., "2022-10-25T12:00:00.000Z") that indicate the beginning and end of the interval, respectively. Example:'''json[  {    "start": "2022-10-25T12:00:00.000Z",    "end": "2022-10-25T13:00:00.000Z"  }]'''This format is typically used to represent a list of time ranges, where each object defines one range with a precise start and end timestamp in UTC.
   * Default value: 
   */
  available?: any;
  /**
   * Specifies the color scheme used for the event background selector within the event window editor, defining the appearance and color options available for users when customizing the background of event windows.
   * Default value: #D50000,#E67C73,#F4511E,#F6BF26,#33B679,#0B8043,#039BE5,#3F51B5,#7986CB,#8E24AA,#616161,
   */
  colorScheme?: string[];
  /**
   * Specifies the reference time that the Scheduler uses to display the current time indicator. By default, this is set to the current date and time (today). You can customize this value to display the indicator at a specific time, which is useful for testing or demonstrating features independent of the actual system clock.
   * Default value: new Date()
   */
  currentTime?: string | Date;
  /**
   * Enables or disables the display of the current time indicator within the view. When enabled, a visual marker or line is shown on the relevant view cells to highlight the present time, helping users easily identify the current point in the schedule or calendar interface.
   * Default value: false
   */
  currentTimeIndicator?: boolean;
  /**
   * Specifies the frequency, in seconds, at which the currentTimeIndicator is updated or refreshed. This setting controls how often the indicator reflects the current time, allowing you to adjust the real-time accuracy of the display.
   * Default value: 1
   */
  currentTimeIndicatorInterval?: number;
  /**
   * Specifies which items will be displayed in the context menu when it is activated by the user, allowing you to control the visibility of specific context menu options based on the current application state or user actions.
   * Default value: null
   */
  contextMenuDataSource?: any[];
  /**
   * Specifies whether clipboard shortcuts (copy, paste, and cut actions) are displayed in the Scheduler's context menu. When enabled, users can access and perform clipboard operations directly from the context menu for scheduled events. Disabling this option hides clipboard shortcut commands from the menu.
   * Default value: false
   */
  contextMenuClipboardActions?: boolean;
  /**
   * Enables customization of the content displayed within event elements. This option accepts one of the following:- An 'HTMLTemplateElement' to define the layout and content for all event elements. Property bindings within the template can be used, and they will automatically map to the relevant properties of each event object.- The 'id' (as a string) of an 'HTMLTemplateElement', which will be used for rendering all events.- A custom function to generate event content dynamically. This function is called for each event and receives the following parameters:  - 'eventContent' – The content container element for the specific event.  - 'eventObj' – The JavaScript object representing the event’s data.Using an 'HTMLTemplateElement' allows you to leverage property bindings (e.g., '') within the template, enabling dynamic insertion of event-specific values when rendering each event element.
   * Default value: null
   */
  eventTemplate?: any;
  /**
   * Allows you to customize the content displayed by event collector elements. The customization can be provided in one of the following forms:- 'HTMLTemplateElement': Directly supply an 'HTMLTemplateElement'. This template will be cloned and applied to all event collector entries. You can define property bindings within the template, and these will be mapped to the corresponding properties of the event object for each entry.- 'String (Template ID)': Provide the string ID of an 'HTMLTemplateElement' present in the DOM. The element with this ID will be used as the template as described above.- 'Function': Provide a function that will be invoked for each event. This function receives the following parameters:  - 'eventContent': The container element for the event's content, which you can modify or populate.  - 'eventObj': The event data object itself, allowing you to access event-specific information.When using a template, dynamic property bindings are supported—you can reference fields from the 'eventObj' directly within your template markup.This flexibility allows you to fully control the structure, layout, and dynamic content of each event as it is rendered by the event collector.
   * Default value: null
   */
  eventCollectorTemplate?: any;
  /**
   * Determines the rendering style for events displayed within the Scheduler component.      classic &ndash; Events are visually arranged side-by-side within each cell, with their sizes adjusted to ensure they fit entirely within the cell boundaries. If multiple events overlap in the same time slot, they are compressed horizontally to avoid overflow and remain fully visible within the cell.        modern &ndash; Events adhere to their specified CSS size properties, such as height and width, rather than automatically resizing to fit the cell. If there are more events than can visibly fit within a cell, an "event collector" (typically a counter or indicator) is displayed that, when clicked, reveals the hidden events in a popup or modal. On mobile devices, due to limited screen space, only event collectors are shown within each cell, requiring the user to tap to view the full list of events.  
   * Default value: modern
   */
  eventRenderMode?: SchedulerEventRenderMode | string;
  /**
   * Enables the customization of the content displayed within the event menu tooltip. When a user clicks on an event element, a menu opens showing detailed information about that event. You can define this content in one of three ways:- 'HTMLTemplateElement': Provide a template element that will be applied to all events. Inside the template, you can use property bindings referencing the event object’s properties for dynamic content generation.- 'String (Template ID)': Pass the ID of an 'HTMLTemplateElement' as a string to use that template for all event tooltips.- 'Function': Supply a callback function that is invoked for each event. This function receives the following parameters:  - 'eventContent': The container element or node where the event’s menu content should be rendered or modified.  - 'eventObj': The event data object with all event properties.  Using an HTMLTemplateElement allows you to seamlessly bind event properties within the template’s markup, making it easy to display custom information for each event.This option gives you full flexibility to design and control the appearance and content of the event details menu, ensuring it matches your application's needs and styling.
   * Default value: null
   */
  eventTooltipTemplate?: any;
  /**
   * Enables customization of the timeline cell content. This option accepts one of the following:- 'HTMLTemplateElement': A template element whose content will be used for all timeline cells. When using a template, you can define property bindings within the template, which will be replaced with the corresponding values for each cell at render time.- 'String (template ID)': The ID of an HTMLTemplateElement defined elsewhere in the DOM. The referenced template's content will be applied to all cells.- 'Function': A callback function that will be invoked for each cell. The function receives the following parameters:  - 'cellContent': The container element for the cell’s content.  - 'cellDate': A date object representing the specific date of the cell.This flexibility allows you to either use a standard HTML template for all cells or provide a custom rendering function to dynamically generate cell content based on cell data. When using an HTMLTemplateElement, you can include dynamic bindings within the template, which will be populated with the appropriate cell values during rendering.
   * Default value: null
   */
  cellTemplate?: any;
  /**
   * Specifies the date that is currently displayed in the Scheduler view, allowing you to control which day, week, or month is shown to users. This property can be set programmatically to change the visible date or used to track which date the user is viewing in the Scheduler interface.
   * Default value: new Date()
   */
  dateCurrent?: string | Date;
  /**
   * Configures the data export settings for the Scheduler, including file format, export range, and additional export-related options.
   * Default value: [object Object]
   */
  dataExport?: SchedulerDataExport;
  /**
   * Specifies the list of events that will be displayed within the Timeline component. Each event must be represented as an object with the following required properties:
   * Default value: 
   */
  dataSource?: SchedulerEvent[];
  /**
   * A callback function that allows you to customize the text displayed within the date selector in the header section. This function receives a single parameter—the currently selected date—enabling you to return a custom string based on the date value. Use this callback to modify how the date appears in the header, such as formatting the date, adding prefixes or suffixes, or localizing the displayed value.
   * Default value: null
   */
  dateSelectorFormatFunction?: any;
  /**
   * Specifies the display format for the day component of dates shown in the timeline. This setting controls how days are rendered, such as numeric (e.g., "12"), abbreviated (e.g., "Mon"), or full weekday names (e.g., "Monday"), to match the desired presentation style in the timeline.
   * Default value: short
   */
  dayFormat?: SchedulerDayFormat | string;
  /**
   * Determines whether the element is interactive or non-interactive. When enabled, the element can receive user input and respond to events. When disabled, the element becomes inactive, preventing user interaction and applying any default disabled styling.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Prevents the timeline from automatically scrolling when you drag or resize an event, ensuring that the visible timeline remains stationary during these interactions.
   * Default value: false
   */
  disableAutoScroll?: boolean;
  /**
   * Prevents users from dragging and repositioning events within the calendar interface. Events will remain fixed in their original positions, and any attempt to move them via drag-and-drop functionality will be disabled.
   * Default value: false
   */
  disableDrag?: boolean;
  /**
   * Prevents events from being removed or discarded when system resources are limited or when buffer overflows occur. All incoming events will be retained and processed, ensuring no loss of event data.
   * Default value: false
   */
  disableDrop?: boolean;
  /**
   * Prevents users from resizing events within the calendar interface, ensuring event durations remain fixed and cannot be adjusted through drag-and-drop or other resizing actions.
   * Default value: false
   */
  disableResize?: boolean;
  /**
   * Prevents users from selecting or highlighting the contents of the cell, disabling any cell selection functionality.
   * Default value: false
   */
  disableSelection?: boolean;
  /**
   * Prevents the event window editor from opening, effectively disabling the ability for users to view or modify event details through the window interface.
   * Default value: false
   */
  disableWindowEditor?: boolean;
  /**
   * Prevents the default context menu from appearing when users right-click on events or cells. This disables the standard browser context menu and any custom right-click actions for these elements.
   * Default value: false
   */
  disableContextMenu?: boolean;
  /**
   * Prevents the event menu from appearing when a user clicks on an event or collector. This setting effectively disables the popup menu that typically provides event-related options or actions upon selection, ensuring that no event menu is shown during user interaction.
   * Default value: false
   */
  disableEventMenu?: boolean;
  /**
   * Prevents users from accessing the view selection menu in the Scheduler, thereby disabling the ability to switch between different Scheduler views (such as day, week, or month).
   * Default value: false
   */
  disableViewMenu?: boolean;
  /**
   * Prevents the date selection menu from appearing, disabling the user's ability to change the current Scheduler date through the interface.
   * Default value: false
   */
  disableDateMenu?: boolean;
  /**
   * A callback function that allows you to define and customize the visual feedback displayed to users while an event is being dragged. This enables you to modify the appearance or content of the drag preview element according to your application's requirements.
   * Default value: null
   */
  dragFeedbackFormatFunction?: any;
  /**
   * Specifies the distance and direction that the drag feedback widget is shifted relative to the user’s pointer during a drag operation. This offset customizes where the feedback appears in relation to the pointer, allowing for better visual alignment or to avoid obscuring elements beneath the pointer.
   * Default value: 10,10
   */
  dragOffset?: any;
  /**
   * Specifies the filtering criteria for events in the Scheduler. The filter property supports two formats: an 'array of filter objects' or a 'custom filtering function'.'Array of Filter Objects'  Each object in the array represents a distinct filtering rule, and must include the following attributes:- 'name': The name of the Scheduler event property to filter by (for example, '"price"' or '"roomId"').- 'value': The condition against which the event property will be evaluated. This can be:  - A static value—used as the comparison target based on the current 'filterMode'. For example:    '''json    [{ "name": "price", "value": 25 }]    '''    This filters events to only those where the 'price' property matches '25'.  - A function—enables advanced, custom filtering logic for that property. The function receives the value of the specified event property and should return 'true' (to keep the event) or 'false' (to exclude the event).      Example:    '''js    [      { name: 'roomId', value: (id) => ['2', '3'].includes(String(id)) }    ]    '''    This example filters in only the events whose 'roomId' property is ''2'' or ''3''. All other events are filtered out.'Function as Filter'  Alternatively, you may assign a function directly to the 'filter' property for full control over filtering logic. This callback function receives each Scheduler event as its single argument and should return 'true' to include or 'false' to exclude the event.  Example:'''jsfilter: (event) => event.status === 'confirmed' && event.attendees.length > 2'''This custom function ensures only confirmed events with more than two attendees are shown in the Scheduler.'Summary:'  - Use an 'array of filter objects' for property-based filtering, supporting simple values or custom functions for each attribute.- Use a 'function' for comprehensive, event-level filtering based on any combination of criteria.This flexibility allows you to implement straightforward or highly customized filtering logic to match your application's requirements.
   * Default value: (eventObj) => return eventObj.label === 'TargetLabel',[{ name: 'roomId', value: (id) => ['2', '3'].indexOf(id + '') > -1 }]
   */
  filter?: any;
  /**
   * Specifies whether filtering functionality is enabled for the Scheduler component. When set to true, users can filter scheduled items based on defined criteria; when false, filtering options are disabled and all items are displayed without filtering.
   * Default value: true,false
   */
  filterable?: any;
  /**
   * Specifies the method used to filter or process data, such as applying different algorithms or rules to control how information is displayed, sorted, or selected. The chosen filter mode affects how results are generated and presented.
   * Default value: equals
   */
  filterMode?: FilterMode | string;
  /**
   * A getter method that retrieves and returns an array containing all event objects currently managed by the Scheduler. Each event object in the array represents a scheduled event with its associated properties and details.
   * Default value: 
   */
  events?: SchedulerEvent[];
  /**
   * Specifies which day will be considered the first day of the week in the Scheduler component. By default, this is set to Sunday. You can configure this setting to start the week on any preferred day (e.g., Monday, Tuesday) to better match regional and user preferences. This affects how weeks are displayed and navigated within the Scheduler.
   * Default value: 0
   */
  firstDayOfWeek?: number;
  /**
   * Enables customization of the Scheduler's footer area. The footer content can be provided in one of the following ways:- As an HTMLTemplateElement.- By specifying the id of an existing HTML template as a string.- By passing a function with the following parameter:  - footerContainer – The container element for the footer, which you can use to programmatically modify or populate the footer’s content.This flexibility allows you to define the Scheduler's footer using markup, template references, or custom logic as needed.
   * Default value: null
   */
  footerTemplate?: any;
  /**
   * Indicates whether events should be organized and displayed based on their associated dates, grouping all events that occur on the same date together.
   * Default value: false
   */
  groupByDate?: boolean;
  /**
   * Specifies the direction or axis along which items are grouped, such as horizontal or vertical, affecting how elements are arranged and displayed within the interface.
   * Default value: horizontal
   */
  groupOrientation?: SchedulerGroupOrientation | string;
  /**
   * Enhances customization for group cell headers by allowing you to define how each group cell is rendered within the header section. You can specify one of the following as the template:- 'HTMLTemplateElement': Supply an HTML '' element that will be applied to all group header cells. Within your template, you can use property bindings that correspond to properties of the group cell object. These bindings will be automatically populated with the respective values for each cell.- 'Template ID (String)': Provide the 'id' attribute of an existing HTML '' element. The identified template will be used for rendering all group header cells.- 'Custom Function': Specify a function that will be called for each group cell. The function will receive two parameters:  - 'cellContent': A DOM element that acts as a container for the group cell’s content.  - 'cellObj': The data object associated with the current group cell.This approach gives you full flexibility to display custom content, styles, and data for group header cells according to your requirements. If you use an HTMLTemplateElement, you can leverage dynamic property bindings that map directly to the properties of each group cell’s data object.
   * Default value: null
   */
  groupTemplate?: any;
  /**
   * Specifies the resource type or category by which events are organized or grouped, enabling the display and management of events according to associated resources (such as users, rooms, equipment, or custom entities). This setting determines how events are visually separated and filtered within the application based on their linked resources.
   * Default value: 
   */
  groups?: any;
  /**
   * Specifies the latest hour that will be visible on the calendar in both 'day' and 'week' views. Events scheduled after this hour will not be displayed in these views.
   * Default value: 23
   */
  hourEnd?: number;
  /**
   * Specifies the starting hour of the visible time range in the 'day' and 'week' calendar views. Events or time slots before this hour will not be shown in these views.
   * Default value: 0
   */
  hourStart?: number;
  /**
   * Specifies how hours are displayed within the element, including aspects such as 12-hour or 24-hour format, inclusion of leading zeros, and any relevant separators or annotations (e.g., AM/PM).
   * Default value: numeric
   */
  hourFormat?: SchedulerHourFormat | string;
  /**
   * Enables customization of the Scheduler's header. The header can be specified in one of the following ways:- As an HTMLTemplateElement, allowing you to define a reusable template for the header's content.- As a string representing the id of an existing HTML template element in the DOM.- As a function that provides advanced customization. The function receives the following parameter:  - headerContent: The container element for the header, which you can modify or populate as needed.This flexibility lets you tailor the Scheduler's header to fit your specific design or functional requirements.
   * Default value: null
   */
  headerTemplate?: any;
  /**
   * Specifies the placement of the Date selector within the Header section of the component, allowing you to control where the Date selector appears relative to other header elements.
   * Default value: near
   */
  headerDatePosition?: SchedulerHeaderDatePosition | string;
  /**
   * Defines and customizes the appearance and layout of the header navigation controls, including their colors, fonts, spacing, and interactive states. This setting allows you to adjust how navigation elements are presented in the header section of the application or website.
   * Default value: flat
   */
  headerNavigationStyle?: SchedulerHeaderNavigationStyle | string;
  /**
   * Specifies the exact location of the view selector control within the header section of the element, allowing you to control where the selector appears in relation to other header components.
   * Default value: far
   */
  headerViewPosition?: SchedulerHeaderViewPosition | string;
  /**
   * Specifies whether the 'All Day' container—which displays events scheduled to last the entire day—is visible or hidden. When set to true, the container and its all-day events will not be displayed; when false, they will be shown.
   * Default value: false
   */
  hideAllDay?: boolean;
  /**
   * Specifies whether the days defined in the 'nonworkingDays' property should be visually hidden from view (e.g., not displayed in the calendar or schedule UI), rather than simply marked as non-working. When set to true, all days listed in 'nonworkingDays' will be completely omitted from the display. When set to false, these days remain visible but may be styled differently to indicate their non-working status.
   * Default value: false
   */
  hideNonworkingWeekdays?: boolean;
  /**
   * Enhances the calendar's month view by controlling the visibility and interactivity of "other month" days—those that do not belong to the currently displayed month. When this option is enabled:- Days from previous or next months are displayed as inactive background cells.- Events 'cannot' be created, dragged, or dropped onto these "other month" days.- Events that 'start' on "other month" days are hidden; only events that 'end' on these days may be partially shown.- Resizing of events cannot begin or end on "other month" days.- Overall, "other month" days serve purely as visual placeholders, preventing user interaction or event association.
   * Default value: false
   */
  hideOtherMonthDays?: boolean;
  /**
   * Specifies whether the 'Today' button is visible in the user interface. When set to true, the 'Today' button will be hidden; when set to false, the button will be displayed.
   * Default value: false
   */
  hideTodayButton?: boolean;
  /**
   * Controls the visibility of checkable items within the view selection menu. When enabled, checkable items are hidden from the menu; when disabled, checkable items are displayed, allowing users to select or deselect individual views.
   * Default value: false
   */
  hideViewMenuCheckableItems?: boolean;
  /**
   * Specifies whether weekend days (typically Saturday and Sunday) should be displayed or hidden in the calendar view. If set to true, weekend days will be hidden; if set to false, weekend days will be visible.
   * Default value: false
   */
  hideWeekend?: boolean;
  /**
   * Specifies where the legend is displayed within the Scheduler component. By default, the legend appears in the footer section, but it can be configured to display in the header instead. This setting allows you to customize the placement of the legend to better fit your application's layout and user experience requirements.
   * Default value: footer
   */
  legendLocation?: SchedulerLegendLocation | string;
  /**
   * Specifies the placement of the legend within the chart area. By default, the legend appears on the 'near' side (typically aligned to the left or top, depending on chart orientation). Setting this property to 'far' positions the legend on the opposite side (right or bottom), allowing customization of the legend's location to better suit your layout needs.
   * Default value: near
   */
  legendPosition?: SchedulerLegendPosition | string;
  /**
   * Specifies how the legend items are arranged within the chart, such as organizing them in a horizontal row, vertical column, or a customized layout. This property controls the visual structure and ordering of items displayed in the legend.
   * Default value: auto
   */
  legendLayout?: SchedulerLegendLayout | string;
  /**
   * Specifies the maximum number of items that can be displayed in the legend as a horizontal list. If the number of legend items exceeds this value, the legend will automatically switch to a dropdown menu format for better readability and usability.
   * Default value: 10
   */
  legendLayoutMenuBreakpoint?: number;
  /**
   * Controls the scroll increment when using the mouse wheel or trackpad. Setting this property to a positive number specifies the distance (in pixels, lines, or a defined unit) that the content will scroll with each wheel or trackpad movement. A higher value increases the scroll distance per step, while a lower value results in finer, more precise scrolling.
   * Default value: 50
   */
  mouseWheelStep?: number;
  /**
   * Specifies whether the horizontal scrollbar is visible. If set to true, a horizontal scrollbar will appear when the content overflows the container’s width; if false, the scrollbar will be hidden regardless of overflow.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Sets or retrieves the 'unlockKey', a unique value required to unlock and access the product’s full features or functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language and regional settings used to display all interface elements, dates, and messages within the Scheduler component. This setting ensures that the Scheduler is localized according to the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Determines the latest date that can be displayed or selected in the Scheduler, effectively setting an upper limit for the Scheduler's visible or selectable date range.
   * Default value: 2100-1-1
   */
  max?: string | Date;
  /**
   * Specifies the maximum number of events that can be displayed in each Scheduler cell. If this property is set to null (the default value), the Scheduler automatically calculates how many events can fit in a cell based on the available space and the size of each event. Setting a specific value overrides this behavior and limits the number of visible events per cell to the specified maximum. Events exceeding this limit may be hidden or grouped into an overflow indicator, depending on the Scheduler’s configuration.
   * Default value: null
   */
  maxEventsPerCell?: number | null;
  /**
   * Specifies the earliest date that can be displayed or selected in the Scheduler. This property restricts navigation and date selection to dates on or after the defined minimum view date.
   * Default value: 1900-1-1
   */
  min?: string | Date;
  /**
   * Defines or retrieves an object containing all the text strings displayed by the element, allowing for easy localization of the user interface. This property should be used together with the locale property to dynamically present content in the user's preferred language or region. Each key in the object represents a specific string that can be customized or translated as needed."
   * Default value:    * [object Object]
   */
  messages?: any;
  /**
   * Specifies how minutes are displayed and formatted within the Scheduler component. This setting controls the appearance of minute values in time slots, event times, and related areas, ensuring consistency in how minutes are presented to users (e.g., "5", "05", or "5 min").
   * Default value: 2-digit
   */
  minuteFormat?: MinuteFormat | string;
  /**
   * Specifies the format in which month names are displayed within the Scheduler component. This setting controls whether full month names (e.g., "January"), abbreviated names (e.g., "Jan"), or custom formats appear in the Scheduler's interface wherever month names are shown.
   * Default value: long
   */
  monthFormat?: MonthFormat | string;
  /**
   * Specifies which days of the week are considered nonworking, using an array of numbers from 0 to 6, where 0 represents the first day of the week (e.g., Sunday or Monday, depending on your locale), and 6 represents the last day. These designated nonworking days will be visually distinguished within the Timeline component by applying a different background color. The specific color used for nonworking days is controlled by a configurable CSS variable, allowing for easy theming and customization.
   * Default value: 
   */
  nonworkingDays?: any;
  /**
   * Specifies the nonworking hours within a day. The nonworking hours are defined using an array, where each element represents either a single hour (as a number) or a range of hours (as an array containing the start and end hours, separated by a comma). For example, '[0, [13, 15], 23]' marks hour 0, hours 13 through 15 (inclusive), and hour 23 as nonworking. On the timeline, cells corresponding to these nonworking hours are visually distinguished by a different color from the working hours.
   * Default value: 
   */
  nonworkingHours?: any;
  /**
   * Specifies the time interval, in seconds, at which the element will automatically check for new notifications. This value controls how frequently the element polls for updates, with shorter intervals resulting in more frequent checks.
   * Default value: 60
   */
  notificationInterval?: number;
  /**
   * Controls whether the resize handles are visible to the user, allowing them to resize the element. When enabled, resize handles will appear on the edges or corners of the element; when disabled, resize handles will be hidden and resizing will not be possible via the user interface.
   * Default value: auto
   */
  resizeHandlesVisibility?: ResizeHandlesVisibility | string;
  /**
   * ''  Specifies how frequently the element's content should update (refresh) when the element is resized. By default, the content refreshes immediately on every resize event. Adjusting this property enables throttling, which limits the rate of refreshes and can improve performance by reducing unnecessary updates during rapid or continuous resizing. You can set it to a time interval (in milliseconds) to control the minimum delay between refresh operations.
   * Default value: 0
   */
  resizeInterval?: number;
  /**
   * An array containing resource objects that can be allocated or linked to specific events. Each resource represents an entity—such as a person, room, or asset—that can be associated with one or more events for scheduling or organizational purposes.
   * Default value: 
   */
  resources?: SchedulerResource[];
  /**
   * Specifies an array of restricted dates on which events are not permitted. Any events that overlap with these restricted dates, or that start or end on these dates, will be excluded from display and unavailable for scheduling.
   * Default value: 
   */
  restrictedDates?: any;
  /**
   * Specifies an array of restricted hours during which events are not permitted to be scheduled. Any event that overlaps with, starts, or ends within these restricted hours will be excluded from display. This ensures that no events are shown during the designated unavailable time periods.
   * Default value: 
   */
  restrictedHours?: any;
  /**
   * Defines an array of time restrictions specifying when events are not permitted. Each element in the array is an object that must include two fields: date and hours.- The 'date' field indicates the specific day on which the restriction applies (e.g., 'new Date(2023, 10, 1)').- The 'hours' field specifies one or more restricted hours within that day. This is an array where each item represents a restricted period, defined either as:  - a single hour (e.g., '12', which restricts only the hour 12:00–13:00), or  - an array of two numbers specifying a start and end hour in 24-hour format (e.g., '[0, 6]' restricts from 00:00 up to, but not including, 06:00; '[20, 23]' restricts from 20:00 up to, but not including, 23:00).Events that have any portion overlapping these restricted hours—either beginning, ending, or entirely contained within them—will be excluded and not displayed.'Example:'  '''js{  date: new Date(2023, 10, 1),  hours: [[0, 6], 12, [20, 23]]}'''This restricts events from being scheduled on November 1, 2023, between midnight and 6 AM, exactly at 12 PM–1 PM, and from 8 PM to 11 PM.Use this array to block out specific times when events should not be allowed, similar to the 'restrictedHours' property, but with restrictions tied to specific calendar dates.
   * Default value: 
   */
  restricted?: any;
  /**
   * Sets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is commonly used in locales with RTL languages such as Arabic or Hebrew. This property ensures proper text and layout orientation to support languages that are read from right to left.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the placement of the date navigation buttons within the element’s header, determining where buttons such as “Previous”, “Next”, or “Today” appear in relation to other header content.
   * Default value: near
   */
  scrollButtonsPosition?: SchedulerScrollButtonsPosition | string;
  /**
   * Controls the activation of the current time shader. When enabled, all cells representing times that have already passed will be visually shaded to distinguish them from upcoming times. Disabling this option will remove the shading, displaying all time cells with the default appearance.
   * Default value: false
   */
  shadeUntilCurrentTime?: boolean;
  /**
   * Controls the visibility of the resource legend in the Scheduler component. When enabled, the resource legend appears in the footer section and displays a list of resources along with their respective items. If the filterable option is set to true, users can click on any resource item within the legend to filter the Scheduler view by that specific resource, making it easier to focus on relevant events or data.
   * Default value: false
   */
  showLegend?: boolean;
  /**
   * Specifies the property name within each resource data item (defined by resource.dataSource) that will be used to sort the resources. This determines the field by which the resource data is ordered when displayed or processed.
   * Default value: "null"
   */
  sortBy?: string;
  /**
   * Enables you to specify a custom sorting function that determines the order in which resource data is sorted. The provided sortFunction will be invoked whenever the sortOrder property is set to custom. This allows for full control over the sorting logic, accommodating complex or specialized sorting requirements beyond the default sort options.
   * Default value: null
   */
  sortFunction?: any;
  /**
   * Specifies how the resource data items should be sorted. Acceptable values are asc for ascending order and desc for descending order. If set to custom, you must also provide a custom sorting function using the sortFunction property. The chosen sorting order determines how the data items are organized and displayed.
   * Default value: asc
   */
  sortOrder?: SchedulerSortOrder | string;
  /**
   * Specifies the interval, in milliseconds, between repeated activation events when a repeat button within the element's header is held down. This applies to buttons such as the date navigation controls and the view scrolling buttons, allowing users to quickly navigate by holding the button instead of clicking multiple times.
   * Default value: 80
   */
  spinButtonsDelay?: number;
  /**
   * Specifies the initial delay (in milliseconds) before the repeat buttons located in the header of the element begin to trigger repeated actions when held down. These repeat buttons include the date navigation buttons (e.g., previous/next date) and the view scroll buttons. Setting this value controls how long a user must hold down the button before the action starts repeating automatically.
   * Default value: 0
   */
  spinButtonsInitialDelay?: number;
  /**
   * Specifies the list of status options that users can select from when managing events through the window editor interface. These statuses help categorize or track the current state of each event.
   * Default value: [{"label":"None"},{"label":"Free","value":"free"},{"label":"Tentative","value":"tentative"},{"label":"Busy","value":"busy"},{"label":"Out of Office","value":"outOfOffice"}]
   */
  statuses?: SchedulerStatuse[];
  /**
   * Gets or sets the visual theme of the element, allowing you to customize its appearance (such as color scheme, style, or look) according to the specified theme value.
   * Default value: ""
   */
  theme?: string;
  /**
   * A formatting function specifically for the Timeline Header. This function enables customization of the text displayed as date labels within the header cells, allowing you to modify the appearance or format of dates (e.g., changing date formats, adding prefixes/suffixes, or translating labels) according to your requirements.
   * Default value: null
   */
  timelineHeaderFormatFunction?: any;
  /**
   * Specifies the time interval (such as days, weeks, or months) used to label and organize each cell within the timeline, controlling how dates are displayed and grouped.
   * Default value: hour
   */
  timelineDayScale?: SchedulerTimelineDayScale | string;
  /**
   * Controls the visibility of tick marks displayed next to the time labels in the vertical header of the element. These tick marks appear in the time header section, which is shown only in 'day' and 'week' views. Enabling this option will show tick marks for each time cell; disabling it will hide them.
   * Default value: false
   */
  timeRulerTicks?: boolean;
  /**
   * Specifies the time zone to be applied to the element. If this property is not set, the element defaults to using the user's local time zone.
   * Default value: Local
   */
  timeZone?: SchedulerTimeZone | string;
  /**
   * Enables the display of multiple time zones simultaneously, in addition to the default time zone specified by the timeZone property. This property accepts an array of string values, where each value corresponds to a valid time zone identifier. The complete list of supported time zone identifiers can be found in the timeZone property documentation. By default, only the user's local time zone is shown if no additional time zones are provided.
   * Default value: 
   */
  timeZones?: any;
  /**
   * Specifies the delay, in milliseconds, before the tooltip or menu is displayed after a triggering event (such as hover or click). This allows you to control how quickly the tooltip or menu appears, enhancing user experience and preventing accidental activations.
   * Default value: 0
   */
  tooltipDelay?: number;
  /**
   * Specifies the distance (in pixels or other units) by which the tooltip or menu is shifted from its default position relative to its target element. Adjusting this value changes how far the tooltip or menu appears from the target, allowing for precise placement and improved visual alignment.
   * Default value: 
   */
  tooltipOffset?: number[];
  /**
   * Specifies whether the vertical scrollbar is visible, allowing users to scroll content vertically when necessary. Set to true to display the vertical scrollbar, or false to hide it.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
  /**
   * Specifies the currently active view. This property accepts one of the view values defined in the views property. When using custom views, ensure each custom view includes a unique value property; this value will be assigned to the current view and used to control which view is displayed.
   * Default value: "day"
   */
  view?: string;
  /**
   * Specifies the current view type of the Scheduler component (e.g., 'day', 'week', 'month'). When defining custom views, ensure that each view includes a valid type property matching one of the supported view types. Note: This property is managed internally by the Scheduler and should not be set manually in your configuration.
   * Default value: day
   */
  viewType?: SchedulerViewType | string;
  /**
   * Specifies the range of dates displayed in the timeline view. This property accepts an array containing either predefined view strings or custom view objects.'Usage:'- If you set an element to a string, use one of the following built-in view identifiers:   ''day'', ''week'', ''month'', ''agenda'', ''timelineDay'', ''timelineWeek'', ''timelineMonth''.- To define a custom view, provide an object with the properties detailed below.'Custom View Object Properties:'- 'label' _(string, required)_: The display name shown for the view in the UI.- 'value' _(string, required)_: A unique identifier for the view.- 'type' _(string, required)_: The underlying view type. Must match one of the default view types listed above.- 'hideWeekend' _(boolean, optional)_: If set to 'true', weekends will be hidden for this specific view.- 'hideNonworkingWeekdays' _(boolean, optional)_: If set to 'true', non-working weekdays (e.g., Monday–Friday) will be hidden for this view.- 'shortcutKey' _(string, optional)_: Assigns a custom keyboard shortcut for switching to this view.- 'hideHours' _(boolean, optional; timelineWeek only)_: If set to 'true', the timelineWeek view will display only day cells, hiding hour cells.By configuring this property, you have full control over which timeline views are available to users and how each view behaves. Use strings for standard views and objects when you need to define custom labels, behaviors, or shortcuts.
   * Default value: day,week,month
   */
  views?: SchedulerViews | string;
  /**
   * Specifies the type of view selector that appears in the element's header, which controls how content is displayed (e.g., as a list, grid, or table view). This setting determines the layout options available to the user within the header section of the component.
   * Default value: menu
   */
  viewSelectorType?: SchedulerViewSelectorType | string;
  /**
   * Configures the rule used to determine the start date in Week and TimelineWeek views. By default, these views start from the current date, factoring in the value specified by the 'firstDayOfWeek' property. If the 'startDateRule' property is set to 'dateCurrent', the Week and TimelineWeek views will instead start from the date provided in the 'dateCurrent' property, overriding the default behavior.
   * Default value: firstDayOfWeek
   */
  viewStartDay?: SchedulerViewStartDay | string;
  /**
   * Specifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials).
   * Default value: short
   */
  weekdayFormat?: WeekDayFormat | string;
  /**
   * Specifies the date format used to display years within the timeline header. This setting controls how year values are rendered (e.g., "YYYY", "YY", or "yyyy") when the header represents years, ensuring consistent and readable date presentation.
   * Default value: numeric
   */
  yearFormat?: YearFormat | string;
  /**
   * Determines whether the element can receive keyboard focus. When set, the element becomes focusable and can be targeted using keyboard navigation (e.g., with the Tab key). When retrieved, it returns the current focusable state of the element.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the maximum number of redo and undo actions that the Scheduler will retain in its history. Once this limit is reached, the oldest actions are automatically discarded to make room for new ones, ensuring that only the most recent actions up to the defined maximum are available for undo or redo operations.
   * Default value: 100
   */
  undoRedoSteps?: number;
  /**
   * This function allows you to fully customize the popup window that appears when editing events. It gives you complete control over the appearance, content, and behavior of the popup based on the event context. The function is called with the following arguments:      target – The popup window element that is about to be displayed. You can modify or replace this element to change how the popup looks and functions.        type – A string indicating the purpose of the popup window. The default value is an empty string (''), which signifies the standard event editing window. If the value is 'confirm', the popup serves as a confirmation dialog, typically shown when interacting with repeating events (e.g., asking whether to edit a single occurrence or the series).        eventObj – The event data object associated with the event being edited or confirmed. This object contains all relevant details about the event, allowing you to display or edit its properties within the popup.  Use this function to precisely tailor the event editing or confirmation experience in your application’s UI.
   * Default value: null
   */
  windowCustomizationFunction?: any;
}
/**
 Scheduler displays a set ot Events in Day, Week, Month, Agenda, Timeline Day, Timeline Week, Timeline Month views.
*/
export interface Scheduler extends BaseElement, SchedulerProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when a batch update operation begins, initiated by calling the <b>beginUpdate</b> method. It indicates that any changes made to the underlying data or UI components between the <b>beginUpdate</b> and <b>endUpdate</b> methods will be grouped and processed as a single batch, rather than triggering individual updates for each change. This event allows developers to perform any necessary setup or respond appropriately at the start of a batch update sequence.
	* @param event. The custom event.    */
  onBeginUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered after the <b>endUpdate</b> method is executed, signaling that a batch update operation has been completed. It indicates that all changes grouped within the update session have finished processing, and any relevant updates or UI refreshes can now occur.
	* @param event. The custom event.    */
  onEndUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user selects or deselects a cell, providing a notification each time the cell selection state changes. It can be used to detect when a cell gains or loses selection focus within the interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue)
   *  value - The new selected Date.
   *  oldValue - The previously selected Date.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever an event in the calendar is modified in any of the following ways: created (inserted), updated (edited), deleted (removed), dragged to a new position, or resized to change its duration. Additionally, the event is fired when an exception for a recurring event is added, updated, or removed. This ensures your application can respond to all major modifications or exceptions affecting calendar events.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, type)
   *  item - An object that represents the actual item with it's attributes.
   *  type - The type of change that is being done to the item.
   */
  onItemChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * "This event is fired immediately before an event record is updated, inserted, or removed in the system. Developers can intercept this event in their handler function to perform custom logic. To prevent the default update, insert, or removal operation from proceeding, call event.preventDefault() within the event handler. This mechanism enables conditional validation, confirmation dialogs, or other asynchronous checks before changes are finalized."
	* @param event. The custom event. Custom data event was created with: ev.detail(item, type)
   *  item - An object that represents the actual item with it's attributes.
   *  type - The type of change that is going to be made to the item (e.g. 'inserting', 'removing', 'updating', 'exceptionInserting', 'exceptionUpdating', 'exceptionRemoving').
   */
  onItemChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on an event, an individual event item, or an item within the context menu. It captures user interaction with any of these elements, allowing you to handle click responses accordingly.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, type, itemObj)
   *  item - The HTMLElement for the event.
   *  type - The type of item that is clicked. The possible values are: <ul><li>event - when an event item is clicked.</li><li>context - when a context menu item is clicked.</li></ul>.
   *  itemObj - The event object.
   */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a new Event record is successfully created and inserted into the system. It allows you to respond to the addition of new Events, enabling actions such as updating user interfaces, syncing data, or sending notifications whenever an Event object is added.
	* @param event. The custom event. Custom data event was created with: ev.detail(item)
   *  item - An object that represents the actual item with it's attributes.
   */
  onItemInsert?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever an existing Event object is successfully deleted from the system. It allows you to execute custom logic or update the user interface in response to the removal of an Event.
	* @param event. The custom event. Custom data event was created with: ev.detail(item)
   *  item - An object that represents the actual item with it's attributes.
   */
  onItemRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever an existing Event object is modified. It occurs after any change to the Event’s properties, such as updates to its title, time, location, or other attributes. Use this event to respond to or track changes made to Events in your application.
	* @param event. The custom event. Custom data event was created with: ev.detail(type, item)
   *  type - The type of item that has been modified.
   *  item - An object that represents the actual item with it's attributes.
   */
  onItemUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user changes the view through any form of interaction, such as clicking, tapping, swiping, or using navigation controls. It signifies that the visible content or display state has been modified as a direct result of the user's actions.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The value of the previously selected view.
   *  value - The value of the new selected view.
   */
  onViewChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the view changes in response to a user interaction (such as clicking a navigation button or selecting a different tab). At this stage, event listeners have the opportunity to intercept the view change. If event.preventDefault() is called within the event handler, the view change will be canceled, preventing the UI from updating to the new view. This allows for custom validation, confirmation dialogs, or other logic to be executed before a view transition occurs.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The value of the previously selected view.
   *  value - The value of the new selected view.
   */
  onViewChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a designated shortcut key associated with an event action is pressed by the user. By default, the event responds only to the 'Delete' key, but additional shortcut keys can be configured if needed.
	* @param event. The custom event. Custom data event was created with: ev.detail(key, target, eventObj)
   *  key - The shortcut key that was pressed.
   *  target - The event target (HTMLElement).
   *  eventObj - The scheduler Event object that affected by the keypress.
   */
  onEventShortcutKey?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the `dateCurrent` property is updated. Typically, this occurs when a user navigates to a different date within the interface (for example, by selecting a new day, week, or month). The event allows you to respond dynamically to changes in the currently selected or displayed date.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous current date that was in view.
   *  value - The current date in view.
   */
  onDateChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when a user initiates the dragging of an event. In the associated event handler function, you can call event.preventDefault() to cancel the drag operation before it starts, preventing the event from being moved. This allows you to implement custom validation or conditional logic to restrict when dragging is permitted.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, itemDateRange, originalEvent)
   *  target - The HTMLElement that corresponds to the event that is going to be dragged.
   *  item - The scheduler Event object that is going to be dragged.
   *  itemDateRange - The start/end dates for the Scheduler Event.
   *  originalEvent - The original event object.
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a user completes dragging an event item and releases it to its new position. Use this event to perform actions after the drag operation has ended, such as updating the event’s data or saving its new placement.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, itemDateRange, originalEvent)
   *  target - The HTMLElement that corresponds to the event that is dragged.
   *  item - The scheduler Event object that is dragged.
   *  itemDateRange - The new start/end dates for the dragged Scheduler Event.
   *  originalEvent - The original event object.
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a user completes a drag-and-drop action by releasing (dropping) an item onto a specific cell. It occurs after the dragged item is moved over a cell and the mouse button is released, allowing you to handle actions such as updating cell content, moving items, or processing the dropped data.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, date, allDay)
   *  target - The HTMLElement that corresponds to the event that is dragged.
   *  date - The cell's date under the pointer.
   *  allDay - Boolean value, which is true when the cell under the pointer is all day cell.
   */
  onDropoverCell?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when a user begins to resize a task element. By handling this event, you have the option to prevent the resize operation from starting by calling event.preventDefault() within your event handler. This enables you to implement custom validation or logic before allowing the resize action to proceed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, itemDateRange, originalEvent)
   *  target - The HTMLElement that corresponds to the event that is going to be resized.
   *  item - The scheduler Event object that is going to be resized.
   *  itemDateRange - The start/end dates for Scheduler Event that is going to be resized.
   *  originalEvent - The original event object.
   */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user completes resizing an event, signaling that the event's size has been adjusted and the resize action is finished. It typically occurs after the user releases the mouse or touch input, and can be used to perform actions such as updating the event's duration or saving changes.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, itemDateRange, originalEvent)
   *  target - The HTMLElement that corresponds to the event that is resized.
   *  item - The scheduler Event object that is resized.
   *  itemDateRange - The new start/end dates for the resized Scheduler Event.
   *  originalEvent - The original event object.
   */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates the process of opening the event dialog window, before the dialog is actually displayed. Within the event handler function, you can call event.preventDefault() to cancel the opening of the dialog, thereby preventing it from appearing to the user. This allows you to intercept and block the operation based on custom logic, such as validation checks or user permissions.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, type, eventObj)
   *  target - The dialog window that is opening.
   *  item - The event object that is going to be edited.
   *  type - The type of window that is going to open. Two window types are available, the dafault which is an empty string ( does not have a type) and 'confirm' which is displayed when clicked on a repeating event.
   *  eventObj - The event object that is the target of the menu.
   */
  onEditDialogOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the event dialog window becomes visible to the user, such as when the user initiates the creation or editing of an event. It indicates that the dialog has been rendered and is ready for user interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, editors, item, eventObj)
   *  target - The dialog window that is opened.
   *  editors - An object containing all event editors that are present inside the window. This property is undefined when the window is of type 'confirm', because confirm windows do not contain editors.
   *  item - The event object that is being edited.
   *  eventObj - The event object that is the target of the menu.
   */
  onEditDialogOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user closes the event dialog window, either by clicking the 'close' button, pressing the escape key, or performing any action that results in the dialog being dismissed. It allows developers to execute custom logic immediately after the dialog has been closed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, editors, item, eventObj)
   *  target - The dialog window that is closed.
   *  editors - An object containing all event editors that are present inside the window. This property is undefined when the window is of type 'confirm', because confirm windows do not contain editors.
   *  item - The event object that is being edited.
   *  eventObj - The event object that is the target of the menu.
   */
  onEditDialogClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered just before the event dialog window is closed, giving you an opportunity to run custom logic before the closure occurs. Within the event handler, you can call event.preventDefault() to cancel the closing operation and keep the dialog open, for example, to prompt the user to save changes or confirm their action.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, type, eventObj)
   *  target - The dialog window that is closing.
   *  item - The event object that is edited.
   *  type - The type of window that is going to be closed. Two window types are available, the dafault which is an empty string ( does not have a type) and 'confirm' which is displayed when clicked on a repeating event.
   *  eventObj - The event object that is the target of the menu.
   */
  onEditDialogClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates opening the context menu—usually by right-clicking—on a timeline cell or event element. Within the event handler, you can prevent the default context menu from appearing by calling event.preventDefault(). This enables custom context menu implementations or the blocking of the menu based on specific conditions.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, cellObj, eventObj)
   *  target - The context menu instance.
   *  owner - The HTMLElement that the menu belongs to.
   *  cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
   *  eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
   */
  onContextMenuOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the context menu (typically a right-click menu) is activated and becomes visible to the user. It allows developers to execute custom logic or modify menu content when the context menu is about to be displayed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, cellObj, eventObj)
   *  target - The context menu instance.
   *  owner - The HTMLElement that the menu belongs to.
   *  cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
   *  eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
   */
  onContextMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the context menu is closed, either by user action (such as clicking outside the menu, selecting a menu option, or pressing the Escape key) or programmatically. It signals that the context menu is no longer visible to the user and any related cleanup or UI updates can be performed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, cellObj, eventObj)
   *  target - The context menu instance.
   *  owner - The HTMLElement that the menu belongs to.
   *  cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
   *  eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
   */
  onContextMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before the context menu is about to close. Developers can intercept this event in an event handler and prevent the menu from closing by calling event.preventDefault(). This allows you to implement custom logic or conditions that control whether the context menu should be closed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, cellObj, eventObj)
   *  target - The context menu instance.
   *  owner - The HTMLElement that the menu belongs to.
   *  cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
   *  eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
   */
  onContextMenuClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered just before the event menu is displayed to the user. It gives you an opportunity to intercept the opening process. By calling event.preventDefault() within your event handler, you can prevent the menu from appearing. This allows you to implement custom logic or conditions under which the menu should not open.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, eventObj)
   *  target - The menu instance.
   *  owner - The HTMLElement of the event that the menu belongs to.
   *  eventObj - The event object that is the target of the menu.
   */
  onEventMenuOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the event menu becomes visible to the user, such as when it is opened or expanded through a user interaction or programmatic action. It indicates that the event menu is now accessible and ready for user input or selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, eventObj)
   *  target - The menu instance.
   *  owner - The HTMLElement of the event that the menu belongs to.
   *  eventObj - The event object that is the target of the menu.
   */
  onEventMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the event menu is fully closed, either by user interaction or programmatically. It indicates that all closing animations or transitions have completed and the menu is no longer visible or interactive. Use this event to perform actions that should only occur after the menu has been dismissed.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, eventObj)
   *  target - The menu instance.
   *  owner - The HTMLElement of the event that the menu belongs to.
   *  eventObj - The event object that is the target of the menu.
   */
  onEventMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered just before the event menu is closed. It provides an opportunity to intercept and potentially prevent the menu from closing by calling event.preventDefault() within the event handler function. If preventDefault() is called, the close operation will be canceled. This allows developers to implement custom logic—such as validating user input or confirming actions—before the menu actually closes.
	* @param event. The custom event. Custom data event was created with: ev.detail(target, owner, eventObj)
   *  target - The menu instance.
   *  owner - The HTMLElement of the event that the menu belongs to.
   *  eventObj - The event object that is the target of the menu.
   */
  onEventMenuClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user opens the date selection menu, typically by clicking on or focusing the date input field. It can be used to perform actions such as loading available dates, displaying custom instructions, or updating the calendar before the user makes a selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The menu instance.
   */
  onDateMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the date selection menu is closed by the user, either by selecting a date or by dismissing the menu, indicating that the date picker component is no longer visible.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The menu instance.
   */
  onDateMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user opens the view selection menu, indicating the menu has become visible and is ready for interaction. Use this event to execute actions that should occur when the view selection interface is displayed, such as loading menu options or tracking user engagement.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The menu instance.
   */
  onViewMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the view selection menu is closed by the user, either by selecting an option or dismissing the menu. It signifies that the view selection interface is no longer visible, allowing you to perform any necessary actions in response to the menu's closure.
	* @param event. The custom event. Custom data event was created with: ev.detail(target)
   *  target - The menu instance.
   */
  onViewMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user interacts with and opens a notification. It occurs immediately after the notification is clicked or tapped, allowing you to perform actions such as navigating to a specific page, logging the interaction, or updating application state.
	* @param event. The custom event. Custom data event was created with: ev.detail(instance)
   *  instance - The toast item instance that is opened.
   */
  onNotificationOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a notification is dismissed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to respond when a notification is no longer visible to the user.
	* @param event. The custom event. Custom data event was created with: ev.detail(instance)
   *  instance - The toast item instance that is closed.
   */
  onNotificationClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Adds a new event to the Scheduler component. This method accepts a single event object, structured according to the Scheduler’s dataSource format. The event object supports a comprehensive set of properties, allowing for detailed configuration of event details, appearance, recurrence, and behavior:<br/><br/><pre><br/>{<br/>  label?: string,                       // The event title/label (optional)<br/>  dateStart: date,                      // Start date and time (required)<br/>  dateEnd: date,                        // End date and time (required)<br/>  description?: string,                 // Additional event details (optional)<br/>  id?: string | number,                 // Unique event identifier (optional)<br/>  class?: string,                       // CSS class for custom styling (optional)<br/>  backgroundColor?: string,             // Background color (any CSS color value)<br/>  color?: string,                       // Text color (any CSS color value)<br/>  notifications?: [                     // Array of notification objects for reminders (optional)<br/>    {<br/>      interval: number,                 // Reminder interval in minutes/hours/days<br/>      type?: string,                    // Type of notification (email, popup, etc.)<br/>      time: number[]                    // Specific times (in minutes, relative to event start)<br/>    }<br/>  ],<br/>  allDay?: boolean,                     // Marks the event as an all-day event (optional)<br/>  disableDrag?: boolean,                // Prevents dragging/moving this event (optional)<br/>  disableResize?: boolean,              // Prevents resizing this event (optional)<br/>  repeat?: {                            // Recurrence rules (optional)<br/>    repeatFreq: string,                 // Frequency type: 'daily', 'weekly', 'monthly', etc.<br/>    repeatInterval: number,             // Interval for the repeat frequency (e.g., every 2 days)<br/>    repeatOn?: number | number[] | date,// Specific days or dates for recurrence pattern<br/>    repeatEnd?: number | date,          // Number of recurrences or end date<br/>    exceptions?: [                      // Dates or instances to exclude or modify (optional)<br/>      {<br/>        date: date,                     // Exception date (required)<br/>        dateStart?: date,               // Optional exception start time<br/>        dateEnd?: date,                 // Optional exception end time<br/>        hidden?: boolean,               // Whether this instance is hidden<br/>        backgroundColor?: string,       // Custom color for the exception<br/>        status?: string,                // Custom status<br/>        label?: string,                 // Custom label<br/>        description?: string,           // Custom description<br/>        notifications?: [               // Custom notifications for this exception<br/>          {<br/>            interval: number,<br/>            type?: string,<br/>            time: number[]<br/>          }<br/>        ],<br/>        disableDrag?: boolean,          // Disable dragging for this occurrence<br/>        disableResize?: boolean         // Disable resizing for this occurrence<br/>      }<br/>    ]<br/>  },<br/>  status?: string                       // Custom status for the event (optional)<br/>}<br/></pre><br/><br/>**Summary:**  <br/>This flexible structure allows you to configure simple or complex events with custom colors, notifications, recurrences (including exceptions), interaction restrictions, and more. All properties are optional unless otherwise marked as required. The event object you provide will be added to the Scheduler and rendered according to the specified options.
   * @param {any} eventObj. An object describing a Scheduler event that is not already present in the element.
   */
  addEvent(eventObj: any): void;
  /**
   * Enhances the scheduler by allowing you to define and register a custom view.  <br/>For example: `scheduler.addView('week', 'My View', 'myView', false, false, 10);`  <br/>Here, the parameters specify the base view type ('week'), display name ('My View'), unique view ID ('myView'), two boolean options (such as visibility or default state), and a numeric parameter (such as duration or step).  <br/>You can then activate the new view with `scheduler.setView('myView');`.  <br/>This enables developers to quickly add personalized calendar views that suit specific application needs.
   * @param {string} type. The view type.
   * @param {string} label. The view's label displayed in the header.
   * @param {string} value. The view's value used to identify the view.
   * @param {boolean} hideWeekend. Determines whether to hide the weekend.
   * @param {boolean} hideNonworkingWeekdays. Determines whether to hide the non working days.
   * @param {number} additionalDays. Determines whether to add additional days to the view.
   */
  addView(type: string, label: string, value: string, hideWeekend: boolean, hideNonworkingWeekdays: boolean, additionalDays: number): void;
  /**
   * Initiates an update operation, allowing you to group multiple method calls or set multiple properties simultaneously. This ensures that all changes are applied together, which can improve performance and prevent intermediate states from being visible during the update process. Use this when you need to batch updates for efficiency or consistency.
   */
  beginUpdate(): void;
  /**
   * Creates a new event with specified details (such as title, date, time, and description) and adds it to the Scheduler’s event list, making it available for viewing, editing, and management within the scheduling interface.
   * @param {string} label. Event label.
   * @param {string} value. Event value.
   * @param {string} dateStart. Event date start.
   * @param {string} dateEnd. Event date end.
   * @param {boolean} allDay. Event all day. Set it to true to create all day event.
   */
  createEvent(label: string, value: string, dateStart: string, dateEnd: string, allDay: boolean): void;
  /**
   * Finalizes the update operation, allowing the component to resume its normal rendering process. This method triggers a re-render of the element, ensuring that all recent changes are reflected in the UI.
   */
  endUpdate(): void;
  /**
   * Returns an array containing the start and end dates that define the current visible date range in the view. The first element is the start date, and the second element is the end date.
   * @returns {Date[]}
   */
  getViewDates(): Date[];
  /**
   * Refreshes the Scheduler by recalculating and updating the scrollbars to ensure proper alignment and visibility based on the current content and layout changes.
   * @param {boolean} fullRefresh?. If set the Scheduler will be re-rendered completely.
   */
  refresh(fullRefresh?: boolean): void;
  /**
   * Exports all scheduled events from the Scheduler component, allowing you to download or transfer event data in a supported format (e.g., JSON, CSV, or iCal) for external use, backup, or integration with other applications.
   * @param {string} dataFormat. Determines the format of the exported file. The following values are available: <ul><li><b>pdf</b></li><li><b>xlsx</b></li><li><b>html</b></li><li><b>iCal</b></li></ul>
   * @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
   * @param {any} dataCallback?. A callback that allows to change the exported data.
   */
  exportData(dataFormat: string, callback?: any, dataCallback?: any): void;
  /**
   * Returns a detailed JSON object containing all the events currently managed by the Scheduler, including properties such as event IDs, titles, start and end times, locations, descriptions, and any custom metadata associated with each event. This allows for programmatic access to the full list of scheduled events for use in external applications or integrations.
   * @returns {any}
   */
  getDataSource(): any;
  /**
   * Returns a JSON-encoded object containing the detailed data for all resources managed by the Scheduler, including their unique identifiers, properties, and current state. This allows client applications to programmatically access and manipulate the full list of Scheduler resources in a structured format.
   * @returns {any}
   */
  getResources(): any;
  /**
   * Retrieves a date value based on the provided coordinate data, typically by mapping spatial or grid coordinates to a corresponding date in a dataset or timeline.
   * @param {number} x. X coordinate.
   * @param {number} y. Y coordinate.
   * @returns {string}
   */
  getDateFromCoordinates(x: number, y: number): string;
  /**
   * Determines if the cell at the specified coordinates represents an "all-day" cell, typically used for events that span the entire day in a calendar view.
   * @param {number} x. X coordinate.
   * @param {number} y. Y coordinate.
   * @returns {boolean}
   */
  getIsAllDayCellFromCoordinates(x: number, y: number): boolean;
  /**
   * Returns an object representing the current state of the Scheduler. This includes the following properties:  <br/>- <b>dateCurrent</b>: The Scheduler’s currently selected or displayed date.  <br/>- <b>dataSource</b>: The data source currently used to populate the Scheduler events or appointments.  <br/>- <b>timeZone</b>: The time zone setting currently applied to the Scheduler.  <br/>Use this method to retrieve a snapshot of the Scheduler’s core settings at any given moment.
   * @returns {any}
   */
  getState(): any;
  /**
   * Removes a previously stored state of the element from LocalStorage using its assigned id as the key. <strong>An id attribute must be set on the element for this function to work correctly.</strong>
   */
  clearState(): void;
  /**
   * Retrieves a previously saved state of the element. If a specific state is provided as an argument, it loads that state. If no argument is passed, the method checks LocalStorage for any existing saved states and loads the most recent one if available.
   * @param {any[]} state?. An Array containing a valid structure of Scheduler events. If no state is provided, the element will check localStorage for a saved state.
   */
  loadState(state?: any[]): void;
  /**
   * Stores the current event data associated with the element in LocalStorage. <strong>Note: The element must have a unique id attribute set for this functionality to work correctly.</strong>
   * @param {any[]} state?. An Array containing a valid structure of Scheduler events.
   */
  saveState(state?: any[]): void;
  /**
   * Specifies and activates a custom view for the Scheduler component. For example, the code scheduler.addView('week', 'My View', 'myView', false, false, 10); creates a new view named "My View" of type "week" with the identifier "myView". The parameters control the view's properties, such as its type, display name, unique id, and other options. The following method, scheduler.setView('myView');, then switches the Scheduler to display the newly defined custom view.
   * @param {string} view?. The view's value. For example: 'day'. 
   */
  setView(view?: string): void;
  /**
   * Determines if a specific event is present within the Scheduler's collection of scheduled events. Returns true if the event exists; otherwise, returns false.
   * @param {any} eventObj. A Scheduler event object.
   * @returns {boolean}
   */
  containsEvent(eventObj: any): boolean;
  /**
   * Inserts an event object following the dataSource format. The event object supports a comprehensive set of properties for defining event details, appearance, recurrence, and behavior. The structure is as follows:<br/><br/><pre><br/>{<br/>  label?: string,                   // (Optional) Title or name of the event<br/>  dateStart: date,                  // Start date and time of the event (Date object or ISO string)<br/>  dateEnd: date,                    // End date and time of the event (Date object or ISO string)<br/>  description?: string,             // (Optional) Detailed description of the event<br/>  id?: string | number,             // (Optional) Unique identifier for the event<br/>  class?: string,                   // (Optional) CSS class for custom styling<br/>  backgroundColor?: string,         // (Optional) Event background color (CSS color value)<br/>  color?: string,                   // (Optional) Text color for the event (CSS color value)<br/>  notifications?: [                 // (Optional) Array of notification settings for reminders<br/>    {<br/>      interval: number,             // Time interval before the event to trigger the notification (in minutes)<br/>      type?: string,                // (Optional) Type of notification (e.g., 'email', 'alert')<br/>      time: number[]                // Array of specific times (in minutes) for notifications<br/>    }<br/>  ],<br/>  allDay?: boolean,                 // (Optional) If true, the event lasts all day<br/>  disableDrag?: boolean,            // (Optional) If true, dragging/rescheduling is disabled for this event<br/>  disableResize?: boolean,          // (Optional) If true, resizing is disabled for this event<br/>  repeat?: {                        // (Optional) Recurrence configuration for repeating events<br/>    repeatFreq: string,             // Frequency of repetition ('daily', 'weekly', 'monthly', etc.)<br/>    repeatInterval: number,         // Number of intervals between repeats (e.g., every 2 days)<br/>    repeatOn?: number | number[] | date,   // (Optional) Specific days/dates the event repeats on<br/>    repeatEnd?: number | date,      // (Optional) End condition: number of occurrences or end date<br/>    exceptions?: [                  // (Optional) List of exceptions to recurrence rules<br/>      {<br/>        date: date,                 // Date of exception<br/>        dateStart?: date,           // (Optional) Start time for the exception<br/>        dateEnd?: date,             // (Optional) End time for the exception<br/>        hidden?: boolean,           // (Optional) If true, this occurrence is not displayed<br/>        backgroundColor?: string,   // (Optional) Custom background color for this occurrence<br/>        status?: string,            // (Optional) Status for this occurrence (e.g., 'cancelled')<br/>        label?: string,             // (Optional) Custom label for this occurrence<br/>        description?: string,       // (Optional) Custom description for this occurrence<br/>        notifications?: [{ interval: number, type?: string, time: number[] }], // (Optional) Notifications for this occurrence<br/>        disableDrag?: boolean,      // (Optional) Disable drag for this single occurrence<br/>        disableResize?: boolean     // (Optional) Disable resize for this single occurrence<br/>      }<br/>    ]<br/>  },<br/>  status?: string                   // (Optional) Current status of the event (e.g., 'pending', 'confirmed')<br/>}<br/></pre><br/><br/>**Notes:**<br/>- Properties marked as optional (`?`) can be omitted.<br/>- The structure is fully compatible with dataSource arrays commonly used in calendar or scheduling components.<br/>- The object supports advanced event recurrence and exception handling for maximum flexibility in scheduling applications.
   * @param {any} eventObj. An object describing a Scheduler event that is not already present in the element.
   * @param {number} index?. A number that represents the index to insert the event at. If not provided the event is inserted at the end of the list.
   */
  insertEvent(eventObj: any, index?: number): void;
  /**
   * Updates an event object that follows the structure below. The event object format matches the dataSource format used by the application. Each property is described for clarity:<br/><br/><pre><br/>{<br/>  label?: string,                  // (optional) The title or name of the event.<br/>  dateStart: date,                 // The start date and time of the event (Date object or valid date string).<br/>  dateEnd: date,                   // The end date and time of the event (Date object or valid date string).<br/>  description?: string,            // (optional) Detailed information or notes about the event.<br/>  id?: string | number,            // (optional) A unique identifier for the event (string or number).<br/>  class?: string,                  // (optional) CSS class(es) to style the event in the UI.<br/>  backgroundColor?: string,        // (optional) Background color for the event, specified as a CSS color value.<br/>  color?: string,                  // (optional) Text color for the event, specified as a CSS color value.<br/><br/>  notifications?: [                // (optional) Array of notification settings for the event.<br/>    {<br/>      interval: number,            // Time interval before an event for sending a notification (in minutes/hours).<br/>      type?: string,               // (optional) Notification type (e.g., "email", "popup").<br/>      time: number[]               // Array of times (in minutes/hours) to trigger the notification.<br/>    }<br/>  ],<br/><br/>  allDay?: boolean,                // (optional) Indicates if the event spans the entire day.<br/><br/>  disableDrag?: boolean,           // (optional) Prevents the event from being moved via drag-and-drop in the UI.<br/>  disableResize?: boolean,         // (optional) Prevents the event from being resized in the UI.<br/><br/>  repeat?: {                       // (optional) Recurrence settings for repeating events.<br/>    repeatFreq: string,            // Frequency of repetition (e.g., "daily", "weekly", "monthly").<br/>    repeatInterval: number,        // The interval between repetitions (e.g., every 2 days).<br/>    repeatOn?: number | number[] | date,  // (optional) Specific days or dates when the event repeats (e.g., day of week).<br/>    repeatEnd?: number | date,     // (optional) End of the recurrence - number of occurrences or a specific date.<br/>    exceptions?: [                 // (optional) List of exceptions/dates when the event does not occur or details of modified occurrences.<br/>      {<br/>        date: date,                // The exception date (date when event does not occur or is modified).<br/>        dateStart?: date,          // (optional) Modified start date/time for the exception occurrence.<br/>        dateEnd?: date,            // (optional) Modified end date/time for the exception occurrence.<br/>        hidden?: boolean,          // (optional) If true, hides this occurrence.<br/>        backgroundColor?: string,  // (optional) Background color override for this occurrence.<br/>        status?: string,           // (optional) Custom status for this occurrence.<br/>        label?: string,            // (optional) Custom label/title for this occurrence.<br/>        description?: string,      // (optional) Custom description for this occurrence.<br/>        notifications?: [          // (optional) Notification settings specifically for this occurrence.<br/>          {<br/>            interval: number,<br/>            type?: string,<br/>            time: number[]<br/>          }<br/>        ],<br/>        disableDrag?: boolean,     // (optional) Prevents this occurrence from being dragged in the UI.<br/>        disableResize?: boolean    // (optional) Prevents this occurrence from being resized in the UI.<br/>      }<br/>    ]<br/>  },<br/><br/>  status?: string                  // (optional) The current status of the event (e.g., "confirmed", "tentative", "cancelled").<br/>}<br/></pre><br/><br/>When updating the event object, all or some of these properties can be included based on which attributes need to be modified. This flexible structure allows for basic one-time events, as well as complex recurring events with customized properties and exceptions.
   * @param {any} index. A number that represents the index of an event or a Scheduler event object.
   * @param {any} eventObj. An object describing a Scheduler event. The properties of this object will be applied to the desired event.
   */
  updateEvent(index: any, eventObj: any): void;
  /**
   * Deletes a specified event from the system, permanently removing its associated data and making it no longer accessible or visible to users.
   * @param {any} index. A number that represents the index of an event or the actual event object to be removed.
   */
  removeEvent(index: any): void;
  /**
   * Returns an array containing all exception instances associated with the specified recurring event. Each exception represents a single occurrence within the event series that differs from the original recurrence pattern, such as modified dates, details, or cancellations.
   * @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
   * @returns {any}
   */
  getEventExceptions(eventObj: any): any;
  /**
   * Adds an exception to a recurring event, allowing you to modify or override specific occurrences in a repeating event series. Event exceptions are useful for handling changes such as rescheduling a single meeting in a weekly series, skipping a date, or altering event details for one instance without affecting the entire series.<br/><br/>You can retrieve the individual occurrences of a recurring event using the following methods:<br/><br/><ul><br/>  <li><strong>occurrences</strong>: Returns an array of all occurrences for a recurring event.</li><br/>  <li><strong>occurrencesBetween(startDate, endDate)</strong>: Returns all occurrences that fall within the specified date range.</li><br/>  <li><strong>occurrenceAfter(date)</strong>: Returns the first occurrence after the given date.</li><br/>  <li><strong>occurrenceBefore(date)</strong>: Returns the last occurrence before the given date.</li><br/></ul><br/><br/>To add an exception, call <code>addEventException</code> with the event object and a configuration object specifying the desired changes for a particular occurrence (such as a new date or label):<br/><br/><p><strong>Example usage:</strong></p><br/><br/><pre><br/>scheduler.addEventException(eventObj, {<br/>  date: occurrenceDate,              // Date of the occurrence to override<br/>  dateStart: newDateStart,           // New start date/time for this exception<br/>  dateEnd: newDateEnd,               // New end date/time for this exception<br/>  label: 'Exception'                 // (Optional) Label or description for this exception<br/>});<br/></pre><br/><br/>This will create a customized exception for the specified recurrence, ensuring only the selected occurrence is modified while all other instances remain unaffected.
   * @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
   * @param {any} exceptionObj. An event object that describes an exception. Exception event objects must have a <b>date</b> attribute of type Date which indicates the date of occurence.
   */
  addEventException(eventObj: any, exceptionObj: any): void;
  /**
   * Updates a single exception occurrence within a recurring event series.<br/><br/>To retrieve the specific exception occurrences of a repeating event, you can use these methods:<br/><br/><ul><br/>  <li><b>occurrences</b>: Returns all instances of the recurring event, including exceptions.</li><br/>  <li><b>occurrencesBetween</b>: Retrieves event occurrences that fall within a specified date range.</li><br/>  <li><b>occurrenceAfter</b>: Finds the next occurrence after a given date.</li><br/>  <li><b>occurrenceBefore</b>: Finds the previous occurrence before a given date.</li><br/></ul><br/><br/><p>Use the <code>updateEventException</code> method to modify the details of a particular occurrence (exception) in a recurring event series. Supply:</p><br/><ul><br/>  <li><b>eventObj</b> - The original recurring event object.</li><br/>  <li><b>dateOfOccurrence</b> - The date/time identifying the specific occurrence to update.</li><br/>  <li><b>changes</b> - An object specifying the updates for this exception (such as new start/end times, label, etc.).</li><br/></ul><br/><br/><p><b>Example usage:</b></p><br/><br/><pre><br/>scheduler.updateEventException(<br/>  eventObj, <br/>  dateOfOccurrence, <br/>  { dateStart: newDateStart, dateEnd: newDateEnd, label: 'Updated Exception' }<br/>);<br/></pre><br/><br/><p>This call will update only the specified exception occurrence, leaving the rest of the recurring series unchanged.</p><br/><br/>
   * @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
   * @param {any} exceptionRef. The index, id, an occurence date of the exception or an object reference of an existing Scheduler repeating event exception.
   * @param {any} exceptionObj. An event object that describes an exception. All attributes of an exception can be updated except the occurance date (the <b>date</b> attribute).
   */
  updateEventException(eventObj: any, exceptionRef: any, exceptionObj: any): void;
  /**
   * Removes a specified exception instance from a recurring event series, thereby restoring the affected occurrence to match the original recurring pattern.
   * @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
   * @param {any} index. The index, id, occurance date or an object reference of an event exception that belongs to the target repeating event.
   */
  removeEventException(eventObj: any, index: any): void;
  /**
   * Opens a popup window that allows users to view and edit the details of a selected event. This enables modification of event information such as title, date, time, location, and other relevant attributes.
   * @param {any} index. A number that represents the index of a event or the actual event object to be edited.
   */
  openWindow(index: any): void;
  /**
   * Closes the currently open popup window, removing it from view and returning focus to the main application interface.
   */
  closeWindow(): void;
  /**
   * Prepares the Scheduler component for printing by formatting its layout and content for optimal print output, then triggers the browser’s Print Preview dialog for the user to review and print the schedule.
   */
  print(): void;
  /**
   * Scrolls the Scheduler component to display the specified date. This method ensures that the view is brought to the appropriate date slot, making it visible to the user. If the date is not currently in view, the Scheduler will automatically scroll horizontally or vertically as needed to reveal the target date.
   * @param {Date} date. The date to scroll to.
   * @param {boolean} strictScroll?. Determines whether to scroll strictly to the date or not. This mean sthat the Scheduler wll scroll to the begining of the cell that corresponds to the target date.
   * @param {boolean} autoScroll?. Calculates the scroll positions and element bounds, then adds an offset to scroll within the middle of the view.
   */
  scrollToDate(date: Date, strictScroll?: boolean, autoScroll?: boolean): void;
  /**
   * Transitions the Scheduler interface to display and focus on a specific date selected by the user.
   * @param {Date} date. The date to navigate to.
   */
  navigateToDate(date: Date): void;
  /**
   * Smoothly scrolls the Scheduler component to bring the specified event into view, ensuring it is visible to the user in the current viewport.
   * @param {any} index. The index of a Scheduler event or the actual event object to scroll to.
   */
  scrollToEvent(index: any): void;
  /**
   * Displays a custom notification to the user, allowing you to specify the message content, style, and behavior. This function enables dynamic alerts or updates within the application’s user interface.
   * @param {string} message. The notification message.
   * @param {any} toastSettings. Smart.Toast settings to be applied to the Toast element when opening the notification.
   */
  openNotification(message: string, toastSettings: any): void;
  /**
   * Dismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.
   */
  closeNotifications(): void;
  /**
   * Returns a list of all instances where the specified event occurs within the data set. Each occurrence is represented as an individual object or record, providing detailed information about that specific event instance. This enables comprehensive tracking and analysis of every time the event takes place.
   * @param {any} eventObj. A Scheduler evnet object.
   * @param {number} count. The number of occurances to return. By default 100 date occurances of the event are returned.
   */
  occurrences(eventObj: any, count: number): void;
  /**
   * Returns a list of all occurrences of a specified event that take place within the given start and end date range, inclusive. Each occurrence includes detailed event information and falls between the provided dates.
   * @param {any} eventObj. A Scheduler event object.
   * @param {Date} dateFrom. The start date.
   * @param {Date} dateTo. The end date.
   */
  occurrencesBetween(eventObj: any, dateFrom: Date, dateTo: Date): void;
  /**
   * Returns the first occurrence of an event that takes place after the specified date. This function searches through the list of events and retrieves the earliest event whose date is strictly later than the provided reference date. If no such event exists, it returns null or an appropriate default value.
   * @param {any} eventObj. A Scheduler event object.
   * @param {number} date. The date after which the first occurance of the event will be returned.
   */
  occurrenceAfter(eventObj: any, date: number): void;
  /**
   * Returns the most recent occurrence of the specified event that occurred before the given date.
   * @param {any} eventObj. A Scheduler event object.
   * @param {number} date. The date before which the first occurance of the event will be returned.
   */
  occurrenceBefore(eventObj: any, date: number): void;
  /**
   * Returns the start and end dates (dateStart/dateEnd) for a specific timeline cell, representing the time interval covered by that cell on the timeline.
   * @param {HTMLElement} cell. A Scheduler timeline cell element.
   * @returns {any}
   */
  getCellDateRange(cell: HTMLElement): any;
  /**
   * Displays the tooltip (event menu) associated with a specific event, providing additional information and context about the selected event when triggered.
   * @param {any} eventObj. A Scheduler event object or it's index.
   */
  openEventTooltip(eventObj: any): void;
  /**
   * Closes and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.
   */
  closeEventTooltip(): void;
  /**
   * Determines if the specified date is restricted. Returns true if the date falls within the set of restricted dates; otherwise, returns false.
   * @param {Date} date. A Date object.
   * @returns {boolean}
   */
  isDateRestricted(date: Date): boolean;
  /**
   * Determines whether the specified hour is restricted. Returns true if the hour falls within a restricted period; otherwise, returns false.
   * @param {number | Date} hour. A number that represents an hour ( 0 to 23 ) or a Date object.
   * @returns {boolean}
   */
  isHourRestricted(hour: number | Date): boolean;
  /**
   * Determines if the event is restricted by returning a boolean value: true if the event has access restrictions, or false if it is open to all users.
   * @param {any} eventObj. A Scheduler event  object or a direct event HTMLElement instance.
   * @returns {boolean}
   */
  isEventRestricted(eventObj: any): boolean;
  /**
   * Removes all existing entries from the undo and redo history, clearing any previous actions and preventing the user from undoing or redoing changes made prior to this operation.
   * @returns {boolean}
   */
  deleteUndoRedoHistory(): boolean;
  /**
   * Specifies whether the action can be redone, indicating if there is a subsequent step available in the redo history that allows the user to reverse a previous undo operation.
   * @returns {boolean}
   */
  canRedo(): boolean;
  /**
   * Specifies whether the most recent action can be undone by the user. If set to true, the user has the option to revert or reverse the previous action; if false, the action cannot be undone.
   * @returns {boolean}
   */
  canUndo(): boolean;
  /**
   * Revert the changes made to the upcoming event modification, restoring the event to its previous state.
   * @param {number} step?. A step to redo to.
   * @returns {boolean}
   */
  redo(step?: number): boolean;
  /**
   * Revert the most recent changes made to the event, restoring it to its previous state.
   * @param {number} step?. A step to undo to.
   * @returns {boolean}
   */
  undo(step?: number): boolean;
  /**
   * Sets the locale of a component.
   * @param {string} locale. The locale abbreviation. For example: 'de'.
   * @param {any} messages?. Object containing the locale messages.
   */
  setLocale(locale: string, messages?: any): void;
}

/**Configures the data export settings for the Scheduler, including file format, export range, and additional export-related options. */
export interface SchedulerDataExport {
  /**
   * Determines whether the column headers will be included when exporting data. If enabled, the exported file will contain a row with the names of each column at the top.
   * Default value: true
   */
  header?: boolean;
  /**
   * Specifies the names of the event properties that will be included as separate columns in the exported data, allowing each property's value to appear in its own column within the resulting file.
   * Default value: 
   */
  columns?: string[];
  /**
   * Specifies a custom style object to apply to the dataExport, allowing you to define the appearance—such as fonts, colors, and formatting—of the exported data.
   * Default value: null
   */
  style?: any;
  /**
   * Specifies the name that will be assigned to the exported file when it is downloaded or saved.
   * Default value: "jqxScheduler"
   */
  fileName?: string;
  /**
   * Specifies the orientation (portrait or landscape) of the page layout when exporting the document to PDF format. This setting determines how the content is arranged on each PDF page.
   * Default value: "portrait"
   */
  pageOrientation?: string;
}

export interface SchedulerEvent {
  /**
   * Event Repeat Object.
   * Default value: undefined
   */
  repeat?: SchedulerEventRepeat;
  /**
   * Event CSS class.
   * Default value: ""
   */
  class?: string;
  /**
   * Event start date.
   * Default value: 
   */
  dateStart?: string | Date;
  /**
   * Event end date.
   * Default value: 
   */
  dateEnd?: string | Date;
  /**
   * Determines whether dragging is disabled for the event.
   * Default value: false
   */
  disableDrag?: boolean;
  /**
   * Determines whether resizing is disabled for the event.
   * Default value: false
   */
  disableResize?: boolean;
  /**
   * Event unique id.
   * Default value: ""
   */
  id?: string;
  /**
   * Event Label.
   * Default value: ""
   */
  label?: string;
  /**
   * Event Description.
   * Default value: ""
   */
  description?: string;
  /**
   * Determines whether an event is an all day event ot nor. All day events ignore time.
   * Default value: false
   */
  allDay?: boolean;
  /**
   * Sets a background color for the event. The background color should be in HEX format.
   * Default value: "false"
   */
  backgroundColor?: string;
  /**
   * Sets a color for the event. The color should be in HEX format.
   * Default value: "false"
   */
  color?: string;
  /**
   * Sets the appointment status.
   * Default value: "false"
   */
  status?: string;
  /**
   * Event resource unique id.
   * Default value: ""
   */
  resourceId?: string;
  /**
   * Event notifications.
   * Default value: null
   */
  notifications?: SchedulerNotification[];
}

/**Event Repeat Object. */
export interface SchedulerEventRepeat {
  /**
   * Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
   * Default value: hourly
   */
  repeatFreq?: SchedulerRepeatFreq | string;
  /**
   * Determines the repeating interval.
   * Default value: 1
   */
  repeatInterval?: number;
  /**
   * Determines on wah day/date the event will repeat on. This is applicable only when repeatFreq is of type 'weekly' ( allows to pick the days of week from 0 to 6, where 0 is Sunday and 6 is Saturday), 'monthly' ( allows to pick a date of the month from 0 to 31) or 'yearly' (allows to pick a particular Date to repeat on. The date can be set as a Date or an object of type{ month: string, date: number }).
   * Default value: 
   */
  repeatOn?: any;
  /**
   * Determines when the repeating event will end. By default it does not have an end condition. If the value is set to a number than it is considered as the number of time the event will repeat before it ends. If it's a Date then it is considered as the end date for the repeating series. If not set it will never end.
   * Default value: 0
   */
  repeatEnd?: number | Date | undefined;
  /**
   * Event exceptions represent a repeating series event that has been re-scheduler for another date/time or it has been hidden from the Scheduler. Exceptions cannot repeat.
   * Default value: undefined
   */
  exceptions?: { Date: string | Date, DateStart: Date | string, DateEnd: Date | string, backgroundColor: string, color: string, hidden: boolean }[] | undefined;
}

export interface SchedulerNotification {
  /**
   * The number of days/weeks when the notification should appear before the event starts.
   * Default value: 0
   */
  interval?: number;
  /**
   * The type of the interval for the notification.
   * Default value: days
   */
  type?: SchedulerNotificationType | string;
  /**
   * An array that represents the time when the notification should appear before the event starts. The array should have the following format: [hours: number, minutes:number]
   * Default value: 
   */
  time?: number[];
  /**
   * The message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.
   * Default value: ""
   */
  message?: string;
  /**
   * Determines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.
   * Default value: ""
   */
  iconType?: string;
}

export interface SchedulerResource {
  /**
   * Resource label.
   * Default value: ""
   */
  label?: string;
  /**
   * Resource unique value.
   * Default value: ""
   */
  value?: string;
  /**
   * An array that defined the data of the resources. The data represents objects that should contain the following proeprties: lable - the label for the resource item.id - the unique id for the resource item.backgroundColor - the background color for the events that have the resource item assigned.color - the color for the events that have the resource item assigned.
   * Default value: 
   */
  dataSource?: any;
  /**
   * Determines the property name to sort the dataSource by.
   * Default value: "null"
   */
  sortBy?: string;
  /**
   * Determines the custom sorting function that will be used to sort the resource dataSource. The sortFunction is used when sortOrder is set to custom.
   * Default value: null
   */
  sortFunction?: any;
  /**
   * Determines the sorting order. When set to custom, a custom sorting function has to be defined for the sortFunction property. The asc stands for 'ascending' while desc means 'descending' sorting order.
   * Default value: asc
   */
  sortOrder?: SchedulerResourceSortOrder | string;
}

export interface SchedulerStatuse {
  /**
   * Status label.
   * Default value: ""
   */
  label?: string;
  /**
   * Status unique value.
   * Default value: ""
   */
  value?: string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-scheduler"): Scheduler;
        querySelector(selectors: "smart-scheduler"): Scheduler | null;
        querySelectorAll(selectors: "smart-scheduler"): NodeListOf<Scheduler>;
        getElementsByTagName(qualifiedName: "smart-scheduler"): HTMLCollectionOf<Scheduler>;
        getElementsByName(elementName: "smart-scheduler"): NodeListOf<Scheduler>;
    }
}

/**Determines the rendering style for events displayed within the Scheduler component.<br/><br/><br/>  <br/>    <b>classic</b> &ndash; Events are visually arranged side-by-side within each cell, with their sizes adjusted to ensure they fit entirely within the cell boundaries. If multiple events overlap in the same time slot, they are compressed horizontally to avoid overflow and remain fully visible within the cell.<br/>  
<br/>  <br/>    <b>modern</b> &ndash; Events adhere to their specified CSS size properties, such as height and width, rather than automatically resizing to fit the cell. If there are more events than can visibly fit within a cell, an "event collector" (typically a counter or indicator) is displayed that, when clicked, reveals the hidden events in a popup or modal. On mobile devices, due to limited screen space, only event collectors are shown within each cell, requiring the user to tap to view the full list of events.<br/>  
<br/> */
export declare type SchedulerEventRenderMode = 'classic' | 'modern';
/**Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly. */
export declare type SchedulerRepeatFreq = 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly';
/**The type of the interval for the notification. */
export declare type SchedulerNotificationType = 'days' | 'weeks';
/**Specifies the display format for the day component of dates shown in the timeline. This setting controls how days are rendered, such as numeric (e.g., "12"), abbreviated (e.g., "Mon"), or full weekday names (e.g., "Monday"), to match the desired presentation style in the timeline. */
export declare type SchedulerDayFormat = '2-digit' | 'numeric' | 'long' | 'short' | 'narrow';
/**Specifies the direction or axis along which items are grouped, such as horizontal or vertical, affecting how elements are arranged and displayed within the interface. */
export declare type SchedulerGroupOrientation = 'horizontal' | 'vertical';
/**Specifies how hours are displayed within the element, including aspects such as 12-hour or 24-hour format, inclusion of leading zeros, and any relevant separators or annotations (e.g., AM/PM). */
export declare type SchedulerHourFormat = '2-digit' | 'numeric';
/**Specifies the placement of the Date selector within the Header section of the component, allowing you to control where the Date selector appears relative to other header elements. */
export declare type SchedulerHeaderDatePosition = 'far' | 'near';
/**Defines and customizes the appearance and layout of the header navigation controls, including their colors, fonts, spacing, and interactive states. This setting allows you to adjust how navigation elements are presented in the header section of the application or website. */
export declare type SchedulerHeaderNavigationStyle = 'flat' | 'raised';
/**Specifies the exact location of the view selector control within the header section of the element, allowing you to control where the selector appears in relation to other header components. */
export declare type SchedulerHeaderViewPosition = 'far' | 'near';
/**Specifies where the legend is displayed within the Scheduler component. By default, the legend appears in the footer section, but it can be configured to display in the header instead. This setting allows you to customize the placement of the legend to better fit your application's layout and user experience requirements. */
export declare type SchedulerLegendLocation = 'footer' | 'header';
/**Specifies the placement of the legend within the chart area. By default, the legend appears on the 'near' side (typically aligned to the left or top, depending on chart orientation). Setting this property to 'far' positions the legend on the opposite side (right or bottom), allowing customization of the legend's location to better suit your layout needs. */
export declare type SchedulerLegendPosition = 'near' | 'far';
/**Specifies how the legend items are arranged within the chart, such as organizing them in a horizontal row, vertical column, or a customized layout. This property controls the visual structure and ordering of items displayed in the legend. */
export declare type SchedulerLegendLayout = null | 'auto' | 'menu';
/**Specifies how minutes are displayed and formatted within the Scheduler component. This setting controls the appearance of minute values in time slots, event times, and related areas, ensuring consistency in how minutes are presented to users (e.g., "5", "05", or "5 min"). */
export declare type MinuteFormat = '2-digit' | 'numeric';
/**Controls whether the resize handles are visible to the user, allowing them to resize the element. When enabled, resize handles will appear on the edges or corners of the element; when disabled, resize handles will be hidden and resizing will not be possible via the user interface. */
export declare type ResizeHandlesVisibility = 'auto' | 'hidden' | 'visible';
/**Determines the sorting order. When set to <b>custom</b>, a custom sorting function has to be defined for the <b>sortFunction</b> property. The <b>asc</b> stands for 'ascending' while <b>desc</b> means 'descending' sorting order. */
export declare type SchedulerResourceSortOrder = 'asc' | 'desc' | 'custom';
/**Specifies the placement of the date navigation buttons within the element’s header, determining where buttons such as “Previous”, “Next”, or “Today” appear in relation to other header content. */
export declare type SchedulerScrollButtonsPosition = 'both' | 'far' | 'near';
/**Specifies how the resource data items should be sorted. Acceptable values are <b>asc</b> for ascending order and <b>desc</b> for descending order. If set to <b>custom</b>, you must also provide a custom sorting function using the <b>sortFunction</b> property. The chosen sorting order determines how the data items are organized and displayed. */
export declare type SchedulerSortOrder = 'asc' | 'desc' | 'custom';
/**Specifies the time interval (such as days, weeks, or months) used to label and organize each cell within the timeline, controlling how dates are displayed and grouped. */
export declare type SchedulerTimelineDayScale = 'hour' | 'halfHour' | 'quarterHour' | 'tenMinutes' | 'fiveMinutes';
/**Specifies the time zone to be applied to the element. If this property is not set, the element defaults to using the user's local time zone. */
export declare type SchedulerTimeZone = 'Local' | 'Dateline Standard Time' | 'UTC-11' | 'Hawaiteratoran Standard Time' | 'Alaskan Standard Time' | 'Pacific Standard Time (Mexico)' | 'Pacific Standard Time' | 'US Mountain Standard Time' | 'Mountain Standard Time (Mexico)' | 'Mountain Standard Time' | 'Central Standard Time' | 'Central America Standard Time' | 'Canada Central Standard Time' | 'Central Standard Time (Mexico)' | 'SA Pacific Standard Time' | 'Eastern Standard Time' | 'US Eastern Standard Time' | 'Venezuela Standard Time' | 'Atlantic Standard Time' | 'Paraguay Standard Time' | 'Central Brazilian Standard Time' | 'Pacific SA Standard Time' | 'SA Western Standard Time' | 'Newfoundland Standard Time' | 'SA Eastern Standard Time' | 'Argentina Standard Time' | 'E. South America Standard Time' | 'Bahia Standard Time' | 'Montevideo Standard Time' | 'Greenland Standard Time' | 'UTC-02' | 'Mid-Atlantic Standard Time' | 'Azores Standard Time' | 'Cape Verde Standard Time' | 'Morocco Standard Time' | 'UTC' | 'GMT Standard Time' | 'Greenwich Standard Time' | 'Central European Standard Time' | 'Namibia Standard Time' | 'W. Central Africa Standard Time' | 'W. Europe Standard Time' | 'Central Europe Standard Time' | 'Romance Standard Time' | 'FLE Standard Time' | 'South Africa Standard Time' | 'Turkey Standard Time' | 'GTB Standard Time' | 'Libya Standard Time' | 'E. Europe Standard Time' | 'Jordan Standard Time' | 'Middle East Standard Time' | 'Egypt Standard Time' | 'Syria Standard Time' | 'Israel Standard Time' | 'Arab Standard Time' | 'E. Africa Standard Time' | 'Arabic Standard Time' | 'Kaliningrad Standard Time' | 'Iran Standard Time' | 'Mauritius Standard Time' | 'Georgian Standard Time' | 'Caucasus Standard Time' | 'Arabian Standard Time' | 'Azerbaijan Standard Time' | 'Russian Standard Time' | 'Afghanistan Standard Time' | 'Pakistan Standard Time' | 'West Asia Standard Time' | 'India Standard Time' | 'Sri Lanka Standard Time' | 'Nepal Standard Time' | 'Central Asia Standard Time' | 'Bangladesh Standard Time' | 'Ekaterinburg Standard Time' | 'Myanmar Standard Time' | 'SE Asia Standard Time' | 'N. Central Asia Standard Time' | 'Ulaanbaatar Standard Time' | 'China Standard Time' | 'Singapore Standard Time' | 'North Asia Standard Time' | 'Taipei Standard Time' | 'W. Australia Standard Time' | 'Korea Standard Time' | 'North Asia East Standard Time' | 'Tokyo Standard Time' | 'AUS Central Standard Time' | 'Cen. Australia Standard Time' | 'West Pacific Standard Time' | 'Tasmania Standard Time' | 'E. Australia Standard Time' | 'AUS Eastern Standard Time' | 'Yakutsk Standard Time' | 'Vladivostok Standard Time' | 'Central Pacific Standard Time' | 'Magadan Standard Time' | 'Kamchatka Standard Time' | 'Fiji Standard Time' | 'New Zealand Standard Time' | 'UTC+12' | 'Tonga Standard Time' | 'Samoa Standard Time';
/**Specifies the current view type of the Scheduler component (e.g., 'day', 'week', 'month'). When defining custom views, ensure that each view includes a valid <b>type</b> property matching one of the supported view types. Note: This property is managed internally by the Scheduler and should not be set manually in your configuration. */
export declare type SchedulerViewType = 'day' | 'week' | 'month' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth';

export declare type SchedulerViews = SchedulerViewType[] | object[] | string[];
/**Specifies the type of view selector that appears in the element's header, which controls how content is displayed (e.g., as a list, grid, or table view). This setting determines the layout options available to the user within the header section of the component. */
export declare type SchedulerViewSelectorType = 'auto' | 'tabs' | 'menu';
/**Configures the rule used to determine the start date in Week and TimelineWeek views. By default, these views start from the current date, factoring in the value specified by the 'firstDayOfWeek' property. If the 'startDateRule' property is set to 'dateCurrent', the Week and TimelineWeek views will instead start from the date provided in the 'dateCurrent' property, overriding the default behavior. */
export declare type SchedulerViewStartDay = 'firstDayOfWeek' | 'dateCurrent';
/**Specifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials). */
export declare type WeekDayFormat = 'short' | 'long' | 'narrow';
export interface ScrollBarProperties {
  /**
   * Specifies the current animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' disables all animations; other values will enable and determine the type of animation applied.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element as intended. When disabled, the element becomes unresponsive to user input and typically appears visually distinct to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines or retrieves the value of the scrollbar's large step increment. This large step value determines how much the scrollbar's position changes when the user clicks in the track area between the scrollbar's thumb (slider) and one of its arrow buttons. When the left mouse button is pressed in this area, the scrollbar advances or retreats by the specified large step amount, enabling quicker navigation through the content compared to single-step arrow button clicks.
   * Default value: 100
   */
  largeStep?: number;
  /**
   * Gets or sets the 'unlockKey' property, which is a unique key used to activate or unlock access to the product’s features or functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which language is used for displaying messages, working in conjunction with the messages property to select the appropriate set of localized text based on the specified language code (e.g., "en", "fr", "es").
   * Default value: "en"
   */
  locale?: string;
  /**
   * Invokes a callback function associated with the localization module, typically used to handle events or actions such as language changes, text translations, or updates to localized content within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves the maximum scrollable value of the scrollbar, determining the highest position to which the scrollbar thumb can be moved. This value defines the upper limit of the scrollable content range.
   * Default value: 1000
   */
  max?: number;
  /**
   * Specifies or retrieves the type of mechanical action applied to the element. Mechanical action determines the exact moment when the element's value is updated—such as immediately upon interaction, after a confirmation (like releasing a button), or according to specific user actions. This property allows you to control how and when changes to the element’s value are registered and processed within the application.
   * Default value: switchWhileDragging
   */
  mechanicalAction?: DragMechanicalAction | string;
  /**
   * Defines an object containing string values that represent the various states of password strength (e.g., weak, medium, strong). Each key in the object corresponds to a specific strength level, allowing for customized messages or labels based on the user's password strength status.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines or retrieves the lowest possible value that the scrollbar can represent, determining the starting point of the scrollbar's range.
   * Default value: 0
   */
  min?: number;
  /**
   * Specifies or retrieves the orientation of the scrollbar, determining whether it is displayed horizontally or vertically.
   * Default value: horizontal
   */
  orientation?: Orientation | string;
  /**
   * If the element has the readonly attribute, users will be able to see its value but will not be able to modify, edit, or otherwise interact with its contents through input actions. However, the element may still be focusable and its value can be changed programmatically using scripts.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that specifies whether the element's content alignment is optimized for languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. When enabled, the element's layout, text direction, and associated styles are adjusted to properly support RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Controls the visibility of scrollbar buttons. When set, this property determines whether the scrollbar's increment and decrement buttons (commonly arrow buttons at the ends of the scrollbar) are shown or hidden. It can be used to either display or hide these buttons programmatically, and can also be queried to retrieve the current visibility state.
   * Default value: true
   */
  showButtons?: boolean;
  /**
   * Defines or retrieves the increment by which the scrollbar's value changes when a user clicks on the scrollbar's arrow (stepper) buttons. This value determines how much the scroll position increases or decreases with each button press, allowing for precise control over scrolling granularity.
   * Default value: 10
   */
  step?: number;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the visual appearance, including colors, typography, and overall styling, ensuring a consistent and cohesive look for the element within the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatically using focus methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the widget or retrieves its current value, depending on how the method is invoked. This allows you to programmatically update the widget's data or access its existing data as needed.
   * Default value: 0
   */
  value?: number;
}
/**
 Scrollbar is a replacement of the default scroll bar with multiple UI Styling options.
*/
export interface ScrollBar extends BaseElement, ScrollBarProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value of the associated element is modified by the user or programmatically. It occurs immediately after the value has changed, allowing you to perform custom actions in response to the update.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, min, max)
   *  value - A numeric value indicating the scroll position.
   *  oldValue - A numeric value indicating the previous scroll position.
   *  min - A numeric value indicating the min scroll position.
   *  max - A numeric value indicating the max scroll position.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Re-renders the element by updating its visual presentation on the screen, ensuring that any recent changes to its properties, styles, or content are accurately reflected in the user interface.
   */
  refresh(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-scroll-bar"): ScrollBar;
        querySelector(selectors: "smart-scroll-bar"): ScrollBar | null;
        querySelectorAll(selectors: "smart-scroll-bar"): NodeListOf<ScrollBar>;
        getElementsByTagName(qualifiedName: "smart-scroll-bar"): HTMLCollectionOf<ScrollBar>;
        getElementsByName(elementName: "smart-scroll-bar"): NodeListOf<ScrollBar>;
    }
}

export interface SliderProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use other valid values to enable and control different animation behaviors.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * When the coerce property is set to true and the user clicks on the track, the slider thumb and its value will automatically snap to the nearest valid position based on the interval property. This ensures that the selected value always aligns with the allowed increments defined by interval.
   * Default value: false
   */
  coerce?: boolean;
  /**
   * Controls whether to display custom ticks on the axis, even if they are placed at uneven intervals. The specific positions of these custom ticks are defined by the customTicks property. Use this option to enable or disable the rendering of user-defined tick marks instead of automatically generated ones.
   * Default value: false
   */
  customInterval?: boolean;
  /**
   * When customInterval is enabled, you can define a specific list of tick values to be displayed on the plot axis. If coerce is set to true, any input value will automatically adjust (or "snap") to the nearest specified tick value from this list, ensuring that only those defined tick marks are selected or displayed.
   * Default value: 0,50,100
   */
  customTicks?: number[];
  /**
   * Sets or retrieves the format pattern used to display labels when the mode property is set to 'date'. This pattern determines how dates will appear in the labels, such as the order of day, month, and year, as well as the specific separators or formatting conventions applied.
   * Default value: "d"
   */
  dateLabelFormatString?: string;
  /**
   * Specifies or retrieves the character used as the decimal separator in numeric values. This determines which symbol (such as a period "." or a comma ",") separates the integer part from the fractional part of a number when displaying or parsing numeric data.
   * Default value: "".""
   */
  decimalSeparator?: string;
  /**
   * Determines whether the widget is active and available for user interaction. When enabled, the widget is fully functional; when disabled, it becomes inactive and unresponsive to user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Controls whether users can change the jqxSlider value by scrolling the mouse wheel. When enabled, scrolling the wheel while hovering over the slider will increment or decrement its value. Disabling this option prevents value changes via the mouse wheel interaction.
   * Default value: false
   */
  enableMouseWheelAction?: boolean;
  /**
   * Specifies the set of predefined values or intervals that the slider's thumb will automatically align or "snap" to when moved by the user, ensuring precise selection and preventing arbitrary positioning.
   * Default value: 1
   */
  interval?: string | number;
  /**
   * Determines the orientation of the slider. When set to true, the positions of the slider’s start and end points are reversed, effectively flipping the slider’s direction from its default state. This can be useful for right-to-left layouts or custom UI requirements.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * A callback function that receives the slider’s current value as an argument and returns a formatted string, which will be displayed on the slider’s labels and tooltip. This allows you to customize how the slider values appear to users, such as adding units, controlling decimal precision, or applying localization.
   * Default value: null
   */
  labelFormatFunction?: any;
  /**
   * Controls the visibility of the widget's label by allowing you to set or retrieve its current state (visible or hidden). Use this property to show or hide the label as needed.
   * Default value: all
   */
  labelsVisibility?: LabelsVisibility | string;
  /**
   * Defines or retrieves the unlockKey, a unique value used to authorize and enable access to the product’s features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works in conjunction with the messages property to provide localized content, ensuring that labels, messages, and other text elements are displayed according to the selected locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle language changes, update localized content, or respond to localization-related events within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Determines whether the widget displays data using a logarithmic scale or a linear scale. When enabled, values on the widget are plotted using a logarithmic scale, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Specifies or retrieves the maximum allowable value that the widget can accept. This property defines the upper limit for user input or the widget’s range, ensuring that values entered or selected cannot exceed this maximum threshold.
   * Default value: 100
   */
  max?: string | number;
  /**
   * Specifies or retrieves the type of mechanical action being applied. This property determines the operational behavior or interaction mode of the mechanism (e.g., momentary, toggle, or latching). Use this to configure how the mechanism responds to user input or system events.
   * Default value: switchWhileDragging
   */
  mechanicalAction?: DragMechanicalAction | string;
  /**
   * Defines or retrieves an object containing the strings used within the widget that can be localized (translated into different languages). This property works together with the locale setting to display the widget's text elements in the appropriate language for the user. Use this property to customize or override default text labels based on the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "significantPrecisionDigits": ": the properties significantDigits and precisionDigits cannot be set at the same time.",
   *     "invalidMinOrMax": " value. Max cannot be lower than Min.",
   *     "noInteger": ": precisionDigits could be set only on \"floatingPoint\" scaleType."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines or retrieves the widget’s minimum allowed value. This property determines the lowest value a user can input or select within the widget. Setting this value restricts input to be no less than the specified minimum.
   * Default value: 0
   */
  min?: string | number;
  /**
   * Specifies whether the widget is configured to handle numerical values or date values. When set, this determines if the widget processes input and displays output as numbers or as dates. When retrieved, it indicates the current mode—number or date—in which the widget is operating.
   * Default value: numeric
   */
  mode?: ScaleMode | string;
  /**
   * Sets or retrieves the element's name attribute, which serves as a key to identify the element's value when a form is submitted. This name is used to reference the data in the server-side processing, ensuring that the submitted value can be correctly associated with this specific element.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another defined orientation. This property affects how child elements are displayed within the widget.
   * Default value: horizontal
   */
  orientation?: Orientation | string;
  /**
   * Specifies how many digits should be displayed after the decimal point in numeric values. This setting is only effective when the scaleType property is set to 'integer'; it has no effect for other scale types.
   * Default value: null
   */
  precisionDigits?: number;
  /**
   * Enables or disables the slider's range mode. When set to true, the slider displays two thumbs, allowing users to select a value range between a minimum and maximum. If set to false, only a single thumb is shown for selecting one value.
   * Default value: false
   */
  rangeSlider?: boolean;
  /**
   * When the slider is set to read-only, users cannot interact with it; this means they are unable to drag the slider thumb or click on the track (including the filled portion) to change its value. The slider's current value remains visible, but it cannot be modified through user input.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element’s content alignment supports right-to-left text direction, typically used for languages such as Arabic or Hebrew. This setting ensures the element renders content in accordance with right-to-left locale conventions.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the alignment or placement of the widget's scale indicators (such as axes, ticks, or labels) relative to the widget, determining where and how the scales appear within the widget's layout.
   * Default value: near
   */
  scalePosition?: ScalePosition | string;
  /**
   * Defines the style of the slider's scale, such as linear or logarithmic, which determines how values are distributed along the slider track.
   * Default value: floatingPoint
   */
  scaleType?: ScaleType | string;
  /**
   * Specifies whether numerical values should be displayed in scientific notation (e.g., 1.23e+4) instead of standard decimal notation. Set to true to enable scientific notation, or false to display numbers in regular decimal format.
   * Default value: false
   */
  scientificNotation?: boolean;
  /**
   * Controls whether the buttons are visible or hidden. When enabled, the buttons will be displayed in the user interface; when disabled, the buttons will be hidden from view.
   * Default value: false
   */
  showButtons?: boolean;
  /**
   * Controls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed; when disabled, it will be hidden. This option allows you to show or hide the label that appears above the slider's thumb to indicate its current value.
   * Default value: false
   */
  showThumbLabel?: boolean;
  /**
   * Controls whether the tooltip is visible. When enabled, the tooltip will be displayed; when disabled, the tooltip will be hidden.
   * Default value: false
   */
  showTooltip?: boolean;
  /**
   * Controls whether units (such as px, %, em, etc.) are visible alongside values. When enabled, the units are displayed; when disabled, values are shown without their corresponding units.
   * Default value: false
   */
  showUnit?: boolean;
  /**
   * Identifies the number of significant digits present in a given number. This option is applicable only when the scaleType property is set to 'integer', ensuring that the operation is performed exclusively on integer values.
   * Default value: null
   */
  significantDigits?: number;
  /**
   * Specifies or retrieves the visual theme applied to the element, determining its overall appearance—such as colors, fonts, and styles—according to the selected theme configuration.
   * Default value: ""
   */
  theme?: string;
  /**
   * Sets or retrieves the current position of the thumb label on the slider control, indicating the value selected by the user. This property allows you to programmatically update the thumb label’s position or access its current location to reflect user interactions.
   * Default value: near
   */
  thumbLabelPosition?: Position | string;
  /**
   * Determines or retrieves the placement of tick marks on the jqxSlider widget. This property allows you to specify where the ticks appear on the slider—such as at the top, bottom, left, or right—enhancing user interaction and slider orientation.
   * Default value: scale
   */
  ticksPosition?: TicksPosition | string;
  /**
   * Controls whether the ticks are visible or hidden. When set, this property determines if tick marks on the component are displayed; when retrieved, it indicates the current visibility status of the ticks.
   * Default value: minor
   */
  ticksVisibility?: TicksVisibility | string;
  /**
   * Specifies or retrieves the position of the tooltip displayed on the jqxSlider widget. This property determines where the tooltip appears relative to the slider handle, such as above, below, left, or right of the handle. Use this option to customize the tooltip placement to enhance user experience.
   * Default value: near
   */
  tooltipPosition?: Position | string;
  /**
   * Determines whether the element is focusable by the user (e.g., via keyboard navigation) or retrieves the current focusable state of the element. If set to true, the element can receive focus; if false, it cannot.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies or retrieves the unit label displayed on the jqxSlider widget, indicating the measurement or value type (such as 'px', '%', 'kg', etc.) associated with the slider's current position. This property allows you to define or access the text shown next to the slider value.
   * Default value: "kg"
   */
  unit?: string;
  /**
   * Configures how the value is validated against the specified minimum and maximum limits.  - When set to 'strict', all value assignments—whether made by user interaction or programmatically—are automatically validated and coerced to remain within the min and max bounds.  - When set to 'interaction', only values entered or changed by user interaction are validated and coerced to the min and max limits. Programmatic value changes are not automatically adjusted, and if the min or max is updated such that the current value falls outside the new range, the value remains unchanged. In this mode, no change event is triggered when values remain out of bounds following these updates.
   * Default value: strict
   */
  validation?: Validation | string;
  /**
   * Sets or retrieves the current value of the jqxSlider widget. This property is applicable only when the rangeSlider option is set to false, meaning the slider operates in single-value mode rather than as a range selector. When you use this property, you can either specify a new value for the slider or obtain the current value the slider is set to.
   * Default value: 0
   */
  value?: any;
  /**
   * Gets or sets the current value of the jqxSlider widget. When the rangeSlider property is set to true, this property manages the values for both slider handles, typically as an array representing the selected range. For a single-value slider, it represents the selected value. Use this property to programmatically retrieve or update the slider's value(s).
   * Default value: 0,100
   */
  values?: number[];
  /**
   * Sets or retrieves the word length value, which determines the number of bits used to represent each integer value. This property is only relevant when scaleType is set to 'integer'. If scaleType has any other value, this property is ignored.
   * Default value: int32
   */
  wordLength?: WordLength | string;
}
/**
 Sliders allow users to make selections from a range of values.
*/
export interface Slider extends BaseElement, SliderProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered each time the user changes the value of the slider, either by dragging the handle or through keyboard input. It allows you to respond programmatically whenever the slider’s value is updated, such as by updating a display label or synchronizing the value with other form elements.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue)
   *  value - A numeric value indicating the scroll position.
   *  oldValue - A numeric value indicating the previous scroll position.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Sets the keyboard focus to the slider element, enabling users to interact with the slider using keyboard controls such as arrow keys, page up/down, and home/end. This facilitates accessibility and allows improved navigation for users relying on keyboard input.
   */
  focus(): void;
  /**
   * Retrieves the most suitable width and height dimensions for the widget based on its content, layout constraints, and current configuration. Use this method to determine the preferred size the widget should be rendered to ensure optimal display and usability.
   * @returns {any}
   */
  getOptimalSize(): any;
  /**
   * Retrieves or assigns the current value of the slider component. When used as a getter, it returns the slider’s present value. When used as a setter, it updates the slider to the specified value and triggers any associated change events or callbacks.
   * @param {string | number | number[] | string[]} value?. The value to be set. If no parameter is passed, returns the displayed value of the slider. 
   * @returns {string}
   */
  val(value?: string | number | number[] | string[]): string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-slider"): Slider;
        querySelector(selectors: "smart-slider"): Slider | null;
        querySelectorAll(selectors: "smart-slider"): NodeListOf<Slider>;
        getElementsByTagName(qualifiedName: "smart-slider"): HTMLCollectionOf<Slider>;
        getElementsByName(elementName: "smart-slider"): NodeListOf<Slider>;
    }
}

/**Specifies the alignment or placement of the widget's scale indicators (such as axes, ticks, or labels) relative to the widget, determining where and how the scales appear within the widget's layout. */
export declare type ScalePosition = 'near' | 'far' | 'both' | 'none';
export interface SortableProperties {
  /**
   * Defines or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and elements will transition instantly without any animated effects. Use this property to enable, disable, or customize the animation behavior of components.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls whether items can be sorted. When enabled, users can rearrange items by sorting them; when disabled, sorting functionality is not available.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Determines how a sortable item can be dragged within the list. When set to 'item', users can drag the entire item itself to reorder it. When set to 'handle', a specific drag handle is displayed next to each item, and only dragging this handle will reorder the item. This property can be both retrieved (get) and modified (set) to control the user’s drag interaction method.
   * Default value: item
   */
  dragMode?: SortableDragMode | string;
  /**
   * Sets or retrieves the position of the drag handle in relation to its associated sortable item. This property is only applicable when the dragMode option is set to 'handle', meaning that the user can initiate dragging only by interacting with the specified handle within the sortable item. Use this option to define where the handle appears (e.g., 'left', 'right', 'top', or 'bottom') relative to the item, allowing for precise customization of the drag-and-drop interface.
   * Default value: right
   */
  handlePosition?: SortableHandlePosition | string;
  /**
   * Determines whether the drag handle of a sortable item is always visible or only appears when the item is hovered over. This property is applicable only if dragMode is set to 'handle'. Use this setting to control the visibility of the item’s drag handle for user interaction.
   * Default value: hover
   */
  handleVisibility?: SortableHandleVisibility | string;
  /**
   * Specifies or retrieves a CSS selector used to identify which elements within the container are sortable items. By default, all direct child elements of the 'smart-sortable' custom element are considered sortable. You can customize this selector to restrict sortable functionality to specific child elements based on their class, tag, or other attributes.
   * Default value: null
   */
  items?: string | null;
  /**
   * Sets or retrieves the unlockKey, a unique value required to activate or grant access to the product's features. This property enables locking and unlocking the product based on its assigned key.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which set of localized messages from the messages property will be used for displaying text or content. It ensures the correct language is applied throughout the application's interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle language or region-specific content updates or responses within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the localized strings that are displayed in the widget's user interface. This property allows you to customize all text elements for different languages and regions. It should be used together with the locale property to ensure the widget presents the appropriate translations based on the selected locale.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the orientation (horizontal or vertical) in which sortable items are arranged and can be reordered by dragging. This determines whether items are stacked in a row or a column when using the sortable functionality.
   * Default value: vertical
   */
  mode?: Orientation | string;
  /**
   * Gets or sets a value that specifies whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
}
/**
 Sortable allows you to rearrange a group of html elements.
*/
export interface Sortable extends BaseElement, SortableProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the order of items in a sortable list changes, indicating that one or more items have been repositioned within the list by the user. The event provides details about the updated order, allowing you to respond to changes, such as saving the new arrangement or updating the user interface.
	* @param event. The custom event.    */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * Relocates a sortable item within a list from its current index to a specified target index, updating the order of items accordingly.
   * @param {number} fromIndex?. The original index of the item.
   * @param {number} toIndex?. The index to move the item to.
   */
  move(fromIndex?: number, toIndex?: number): void;
  /**
   * Recalculates the list of sortable items within the custom element. This method should be called whenever items are dynamically added or removed to ensure that all current items are properly recognized and can be sorted as expected.
   */
  updateItems(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-sortable"): Sortable;
        querySelector(selectors: "smart-sortable"): Sortable | null;
        querySelectorAll(selectors: "smart-sortable"): NodeListOf<Sortable>;
        getElementsByTagName(qualifiedName: "smart-sortable"): HTMLCollectionOf<Sortable>;
        getElementsByName(elementName: "smart-sortable"): NodeListOf<Sortable>;
    }
}

/**Determines how a sortable item can be dragged within the list. When set to 'item', users can drag the entire item itself to reorder it. When set to 'handle', a specific drag handle is displayed next to each item, and only dragging this handle will reorder the item. This property can be both retrieved (get) and modified (set) to control the user’s drag interaction method. */
export declare type SortableDragMode = 'item' | 'handle';
/**Sets or retrieves the position of the drag handle in relation to its associated sortable item. This property is only applicable when the dragMode option is set to 'handle', meaning that the user can initiate dragging only by interacting with the specified handle within the sortable item. Use this option to define where the handle appears (e.g., 'left', 'right', 'top', or 'bottom') relative to the item, allowing for precise customization of the drag-and-drop interface. */
export declare type SortableHandlePosition = 'right' | 'left' | 'top' | 'bottom';
/**Determines whether the drag handle of a sortable item is always visible or only appears when the item is hovered over. This property is applicable only if dragMode is set to 'handle'. Use this setting to control the visibility of the item’s drag handle for user interaction. */
export declare type SortableHandleVisibility = 'hover' | 'visible';
export interface SortPanelProperties {
  /**
   * Specifies the animation mode for the component. You can retrieve or assign a value to this property. When set to 'none', all animations are disabled, and the component will appear or update instantly without any transition effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Sets or retrieves the position of the close button within each item of the sort panel, allowing you to specify where the close button appears (such as left, right, or a custom location) for improved user interface customization.
   * Default value: left
   */
  closeButtonPosition?: SortPanelCloseButtonPosition | string;
  /**
   * Specifies the data source to be displayed in the sort panel.Each entry in the dataSource array represents a sortable column and is defined as an object with the following properties:      dataField: The unique identifier for the column to be sorted, typically corresponding to a key in your dataset.        dataType: The type of data contained in the column (e.g., string, number, date), which can influence sorting behavior.        label: The display name of the column, as shown in the column selection menu of the sort panel.        icon: The CSS class name applied to the column’s visual representation in the selection menu, allowing for custom icons or symbols.        sortDirection: The initial sort direction for the column. Accepted values are 'ascending' and 'descending'.        sortIndex: Determines the initial sort order among multiple columns; columns are sorted in ascending order based on this index. A value of -1 means the column is not sorted by default.  
   * Default value: null
   */
  dataSource?: {label: string, dataField: string, dataType: string, sortDirection: string, sortIndex: number}[];
  /**
   * Controls the visibility of the sort panel, allowing users to enable (display) or disable (hide) the panel for sorting data within the interface.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets the unlockKey property, which is used to authenticate and grant access to the product’s locked features. This key must be provided to unlock and use the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code. This property determines which language is used when displaying messages, working in combination with the messages property to select the appropriate localized content.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function associated with the localization module, typically used to handle language changes, update translations, or respond to localization-related events within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized or translated for different languages. This property works together with the locale property to support localization, enabling the widget to display content appropriate for the user’s selected or detected language.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid ''!",
   *     "propertyInvalidValueType": "Invalid ''!",
   *     "methodInvalidValueType": "Invalid ''!",
   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
   *     "methodInvalidReturnType": "Invalid ''!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": "'.",
   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "apply": "Apply",
   *     "booleanFirst": "?",
   *     "booleanLast": "?",
   *     "cancel": "Cancel",
   *     "dateFirst": "1",
   *     "dateLast": "9",
   *     "from": "from",
   *     "numberFirst": "1",
   *     "numberLast": "9",
   *     "pickAnother": "Pick another field to sort by",
   *     "firstBy": "Sort by",
   *     "stringFirst": "A",
   *     "stringLast": "Z",
   *     "thenBy": "then by"
   *   }
   * }
   */
  messages?: any;
  /**
   * If the element is set to readonly, users will be able to view its contents but will not be able to modify or edit its value. However, the element may still receive focus and allow text selection, depending on its type. No user interactions will result in changes to the element's data.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * If set to true, the element will be excluded from the page's tab order and cannot receive keyboard focus, making it inaccessible via keyboard navigation or programmatic focusing methods such as element.focus().
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 SortPanel allows you to add and remove sort columns and update the sort order of the columns.
*/
export interface SortPanel extends BaseElement, SortPanelProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the user clicks the "Apply" button, indicating their intent to submit or confirm their selected options or changes. It can be used to handle form submissions, apply filters, or process user input following the click action.
	* @param event. The custom event.    */
  onApply?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user clicks the "Cancel" button, allowing you to execute custom logic—such as resetting form fields, closing dialog boxes, or aborting an action—in response to the cancellation request.
	* @param event. The custom event.    */
  onCancel: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-sort-panel"): SortPanel;
        querySelector(selectors: "smart-sort-panel"): SortPanel | null;
        querySelectorAll(selectors: "smart-sort-panel"): NodeListOf<SortPanel>;
        getElementsByTagName(qualifiedName: "smart-sort-panel"): HTMLCollectionOf<SortPanel>;
        getElementsByName(elementName: "smart-sort-panel"): NodeListOf<SortPanel>;
    }
}

/**Sets or retrieves the position of the close button within each item of the sort panel, allowing you to specify where the close button appears (such as left, right, or a custom location) for improved user interface customization. */
export declare type SortPanelCloseButtonPosition = 'left' | 'right';
export interface SplitterProperties {
  /**
   * Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled, resulting in static display without transition effects. Assigning any other valid value enables the corresponding animation mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies how items are positioned and resized within the Splitter component.Possible values:      end &ndash; All items are resized to fit exactly within the available space of the Splitter. When a new item is inserted, the required space is taken from the adjacent (neighboring) item, adjusting their sizes so that the total size remains constant and nothing overflows.        proportional &ndash; All items expand or contract proportionally to occupy the full size of the Splitter. When a new item is added, the space it needs is proportionally deducted from the existing items, maintaining their relative sizes within the total available space.        overflow &ndash; Items are not resized to fit the Splitter. Instead, each item retains its natural size, even if the total size exceeds the Splitter’s dimensions. In this case, a scrollbar will appear, allowing users to scroll and view all the content that overflows beyond the visible area.  
   * Default value: proportional
   */
  autoFitMode?: SplitterAutoFitMode | string;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Configures or retrieves the data source for the splitter component. When setting, it specifies the structure and content (such as panels or sections) that will be managed and displayed within the splitter. When getting, it returns the current data source used by the splitter.
   * Default value: null
   */
  dataSource?: any;
  /**
   * A getter method that retrieves and returns an array containing all the current Splitter items. This allows you to access the complete list of items managed by the Splitter component.
   * Default value: 
   */
  items?: any;
  /**
   * When enabled, this setting ensures that all items within the element maintain their original aspect ratios relative to each other whenever the element is resized. This behavior is preserved regardless of whether the size properties of the items are defined in pixels, percentages, or other units. In other words, resizing the overall element will proportionally scale all its child items, keeping their relative dimensions consistent.
   * Default value: false
   */
  keepProportionsOnResize?: boolean;
  /**
   * Sets or retrieves the unlockKey value used to authorize and enable access to the product's features. When setting, this key unlocks the product for use. When getting, it returns the currently assigned unlockKey.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language to be used for displaying messages. This property can be set to change the current language or retrieved to identify the active language. It works in conjunction with the messages property, which contains localized message strings for each supported language. Adjusting this property enables seamless switching between different language options in the application’s user interface.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle language changes, translate content, or process localization-related events within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines an object that maps password strength states to their corresponding string values. Each key in the object represents a specific password strength level (such as "weak," "medium," or "strong"), and its value provides the associated descriptive label or message to display to users. This allows for customizable text based on the current password strength state.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidIndex": "' method accepts an index of type number.",
   *     "indexOutOfBound": "' method.",
   *     "invalidNode": "' method accepts an object or an array of objects as it's second parameter.",
   *     "invalidSettings": "' method accepts a string or an object as it's second parameter.",
   *     "invalidType": "' must be of type string or number."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the orientation of the splitter, determining whether it is displayed vertically (dividing the area into left and right sections) or horizontally (dividing the area into top and bottom sections).
   * Default value: vertical
   */
  orientation?: Orientation | string;
  /**
   * When the element has the 'readonly' attribute, users can view its value but cannot modify, edit, or otherwise change its contents. However, the element may still be focused and its content can be selected and copied by the user. No direct interaction—such as typing, pasting, or deleting—is allowed.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * 'Specifies how the splitter handles resizing when a user drags the splitter bar. The available modes are:'- 'None:' Resizing is disabled; splitter bars cannot be moved.- 'Adjacent (default):' Only the two panels immediately adjacent to the splitter bar are resized when the bar is dragged. Other panels remain unchanged.- 'End:' Dragging the splitter bar affects only the first panel (located at the left or top, depending on splitter orientation) and the last panel. All intermediate panels between these two remain unaffected.- 'Proportional:' All panels located in the direction the splitter bar is dragged (for example, all panels to the right if dragging right, or below if dragging down) are resized proportionally. The new sizes are calculated based on the current size ratios of these panels, ensuring they maintain their proportional widths or heights relative to each other after resizing.'Use this property to control which panels are resized and how space is distributed when users interact with the splitter.'
   * Default value: adjacent
   */
  resizeMode?: SplitterResizeMode | string;
  /**
   * Specifies the increment or decrement value by which the element's size changes during a resize operation. This value controls how much the element grows or shrinks with each resizing step, allowing for precise adjustments.
   * Default value: 5
   */
  resizeStep?: number;
  /**
   * Gets or sets a value that specifies whether the element's alignment should accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content and layout will adjust to support RTL text direction, ensuring proper display for locales that use right-to-left scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * When this feature is enabled, the resizing operation updates the layout in real-time as the user drags the splitter, providing immediate visual feedback. By default, live resizing is disabled; instead, a highlighted guide bar appears during the drag operation, showing where the splitter will be positioned once the user releases the mouse button. The actual layout is only updated after the drag is complete.
   * Default value: false
   */
  liveResize?: boolean;
  /**
   * Specifies the theme for the element. The theme determines the overall appearance, including colors, fonts, and styling, to ensure a consistent and visually appealing look.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from keyboard navigation and cannot receive focus via keyboard or mouse interactions.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Splitter is a layout component that supports all important features such as resizing, collapsing, and nesting panels.
*/
export interface Splitter extends BaseElement, SplitterProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when a splitter item is collapsed by the user, either through a UI interaction (such as clicking a collapse button) or programmatically. It allows you to execute custom logic or respond to the change when a particular panel within the splitter component is minimized or hidden.
	* @param event. The custom event.    */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a splitter item is expanded by the user, either through interaction (such as clicking or dragging) or programmatically. It allows developers to execute custom logic in response to the expansion of a specific splitter item within the UI component.
	* @param event. The custom event.    */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user initiates the resizing of a splitter component, such as clicking and dragging the divider to adjust the size of adjacent panels. It marks the start of the resizing interaction, allowing developers to perform actions or apply styles in response to the beginning of the splitter's adjustment process.
	* @param event. The custom event.    */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered after the user completes resizing the splitter, indicating that the resizing action has finished and the new panel sizes have been set.
	* @param event. The custom event.    */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Appends a new node to the end of the current list or container, adding it as the last child element. This operation updates the data structure to include the newly added node as the final element in the sequence.
   * @param {Node} node. The node to append
   */
  appendChild<T extends Node>(node: Node): T;
  /**
   * Collapses the specified splitter panel, minimizing its size and hiding its content within the container or layout.
   * @param {any} item. number indicating the index of the item or an isntance of Smart.SplitterItem
   * @param {boolean} far?. Indicates whether the item should collapse to it's far or near side
   */
  collapse(item: any, far?: boolean): void;
  /**
   * Attempts to expand the splitter item, provided sufficient space is available. The expansion is only performed if there is enough remaining space in the container to accommodate the item's increased size.
   * @param {any} item. number indicating the index of the item or an isntance of Smart.SplitterItem
   */
  expand(item: any): void;
  /**
   * Conceals the splitter bar element from view, preventing users from interacting with or resizing the associated panels.
   * @param {number} splitterBar. A Smart.SplitterBar instance.
   * @returns {number}
   */
  hideBar(splitterBar: number): number;
  /**
   * Inserts a new Splitter component into the specified position within the layout, allowing the user to divide and resize adjacent sections of the interface.
   * @param {number} index. The index at which a new item will be inserted.
   * @param {any} details. An Object or string used as content if the splitter item.
   */
  insert(index: number, details: any): void;
  /**
   * Inserts the specified "smart-splitter-item" node into the DOM immediately before the reference "smart-splitter-item" node, ensuring that the new element appears directly before the reference node within the splitter container. This operation preserves the order of splitter items and updates their layout accordingly.
   * @param {Node} newNode. The  "smart-splitter-item" node to insert.
   * @param {Node | null} referenceNode?. The "smart-splitter-item" node before which newNode is inserted.
   * @returns {Node}
   */
  insertBefore<T extends Node>(newNode: Node, referenceNode?: Node | null): T;
  /**
   * Prevents a splitter item from being resized by the user, ensuring that its current size remains fixed and unchangeable during layout adjustments.
   * @param {number} index. The index of a Splitter Bar or it's instance.
   */
  lockItem(index: number): void;
  /**
   * Prevents the splitter bar from being moved by disabling user drag interactions, effectively locking its position and ensuring that adjacent panes cannot be resized.
   * @param {number} index. The index of a Splitter Bar or it's instance.
   */
  lockBar(index: number): void;
  /**
   * Removes a Splitter item from the layout, detaching it from its parent container and updating the interface accordingly. This action permanently deletes the specified Splitter component and any associated layout adjustments.
   * @param {number} index. An item to be removed.
   */
  removeAt(index: number): void;
  /**
   * Clears all items currently contained within the Splitter component, effectively resetting it to an empty state. This operation removes every panel, section, or child element inside the Splitter, leaving no content displayed.
   */
  removeAll(): void;
  /**
   * Removes a child node of type "smart-splitter-item" from its parent element in the DOM, effectively deleting the specified splitter pane and updating the layout accordingly.
   * @param {Node} node. The "smart-splitter-item" node to remove.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Reloads and updates the Splitter component, re-rendering its layout and recalculating its size and position to reflect any recent changes to its content, configuration, or container.
   */
  refresh(): void;
  /**
   * Reveals a previously hidden splitter bar, allowing users to resize adjacent panes or sections within the interface.
   * @param {number} splitterBar. An instance of a splitter bar.
   */
  showBar(splitterBar: number): void;
  /**
   * Enables access to a splitter item that was previously locked, allowing users to interact with or modify the item as intended. This action removes any restrictions, making the splitter fully functional within the application.
   * @param {number} item. The index of a Splitter Item or it's instance.
   */
  unlockItem(item: number): void;
  /**
   * Enables user interaction with a previously disabled or locked splitter bar, allowing users to adjust the size of adjacent panes or panels by dragging the splitter.
   * @param {number} item. The index of a Splitter Bar or it's instance.
   */
  unlockBar(item: number): void;
  /**
   * Updates the configuration of a specific Splitter item within a Splitter component, allowing changes to its properties such as size, orientation, minimum and maximum limits, or other customizable options. This enables dynamic adjustment of the Splitter item's behavior and appearance within the parent Splitter layout.
   * @param {any} item. The index of a Smart.SplitterItem or it's instance.
   * @param {any} settings. An object containing the properties of a Smart.SplitterItem.
   */
  update(item: any, settings: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-splitter"): Splitter;
        querySelector(selectors: "smart-splitter"): Splitter | null;
        querySelectorAll(selectors: "smart-splitter"): NodeListOf<Splitter>;
        getElementsByTagName(qualifiedName: "smart-splitter"): HTMLCollectionOf<Splitter>;
        getElementsByName(elementName: "smart-splitter"): NodeListOf<Splitter>;
    }
}

/**Specifies how items are positioned and resized within the Splitter component.<br/><br/>Possible values:<br/><br/>  <br/>    end &ndash; All items are resized to fit exactly within the available space of the Splitter. When a new item is inserted, the required space is taken from the adjacent (neighboring) item, adjusting their sizes so that the total size remains constant and nothing overflows.<br/>  
<br/>  <br/>    proportional &ndash; All items expand or contract proportionally to occupy the full size of the Splitter. When a new item is added, the space it needs is proportionally deducted from the existing items, maintaining their relative sizes within the total available space.<br/>  
<br/>  <br/>    overflow &ndash; Items are not resized to fit the Splitter. Instead, each item retains its natural size, even if the total size exceeds the Splitter’s dimensions. In this case, a scrollbar will appear, allowing users to scroll and view all the content that overflows beyond the visible area.<br/>  
<br/> */
export declare type SplitterAutoFitMode = 'end' | 'proportional' | 'overflow';
/**'Specifies how the splitter handles resizing when a user drags the splitter bar. The available modes are:'<br/><br/>- 'None:' Resizing is disabled; splitter bars cannot be moved.<br/>- 'Adjacent (default):' Only the two panels immediately adjacent to the splitter bar are resized when the bar is dragged. Other panels remain unchanged.<br/>- 'End:' Dragging the splitter bar affects only the first panel (located at the left or top, depending on splitter orientation) and the last panel. All intermediate panels between these two remain unaffected.<br/>- 'Proportional:' All panels located in the direction the splitter bar is dragged (for example, all panels to the right if dragging right, or below if dragging down) are resized proportionally. The new sizes are calculated based on the current size ratios of these panels, ensuring they maintain their proportional widths or heights relative to each other after resizing.<br/><br/>'Use this property to control which panels are resized and how space is distributed when users interact with the splitter.' */
export declare type SplitterResizeMode = 'none' | 'adjacent' | 'end' | 'proportional';
export interface SplitterBarProperties {
}
/**
 SplitterBar splits two Split panels in a Splitter.
*/
export interface SplitterBar extends BaseElement, SplitterBarProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Conceals the splitter bar element from view, preventing users from seeing or interacting with it within the user interface.
   */
  hide(): void;
  /**
   * Reveals a previously hidden splitter bar, allowing users to resize or adjust the layout between adjacent panels or sections within the user interface.
   */
  show(): void;
  /**
   * Prevents the splitter bar from being moved or adjusted by the user, ensuring it remains fixed in its current position.
   */
  lock(): void;
  /**
   * Enables user interaction with the splitter bar, allowing users to drag and resize adjacent panels or sections within the interface.
   */
  unlock(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-splitter-bar"): SplitterBar;
        querySelector(selectors: "smart-splitter-bar"): SplitterBar | null;
        querySelectorAll(selectors: "smart-splitter-bar"): NodeListOf<SplitterBar>;
        getElementsByTagName(qualifiedName: "smart-splitter-bar"): HTMLCollectionOf<SplitterBar>;
        getElementsByName(elementName: "smart-splitter-bar"): NodeListOf<SplitterBar>;
    }
}

export interface SplitterItemProperties {
  /**
   * Determines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually dimmed or grayed out.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Indicates whether the item is currently collapsed ('true') or expanded ('false'). This property controls the visibility of the item's content in collapsible interfaces or components.
   * Default value: false
   */
  collapsed?: boolean;
  /**
   * Specifies whether the item is collapsible. If set to true, the item can be expanded or collapsed by the user. If set to false, the item remains permanently expanded and cannot be collapsed.
   * Default value: false
   */
  collapsible?: boolean;
  /**
   * Specifies the elements or components that are displayed within each section (item) of the splitter layout. This property defines what content will appear in each resizable panel managed by the splitter.
   * Default value: 
   */
  content?: any;
  /**
   * Specifies whether the item can be resized by the user. If set to true, resizing is enabled; if set to false, the item's size remains fixed.
   * Default value: false
   */
  locked?: boolean;
  /**
   * Specifies the maximum allowable size for the item. Values exceeding this limit will not be accepted or processed.
   * Default value: ""
   */
  max?: string;
  /**
   * Specifies the minimum allowed size (in the relevant unit) for the item, preventing it from shrinking below this value during layout or resizing.
   * Default value: ""
   */
  min?: string;
  /**
   * Specifies the dimensions or overall measurements of the item, such as its width, height, or depth. This property allows you to control how large or small the item appears within its container or layout.
   * Default value: ""
   */
  size?: string;
}
/**
 Splitter Item is a Panel in a Splitter component.
*/
export interface SplitterItem extends BaseElement, SplitterItemProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Collapses the item, hiding its content or child elements from view. This action reduces the item's visible footprint, typically as part of an expandable/collapsible user interface component such as an accordion or dropdown.
   * @param {string} far. If set to true the item will collapse to it's far side ( to the right for vertical splitter and down for horizontal)
   */
  collapse(far: string): void;
  /**
   * Expands the item to display its hidden content or details when it is currently in a collapsed (hidden) state.
   */
  expand(): void;
  /**
   * Prevents the item from being resized, ensuring its dimensions remain fixed and cannot be altered by the user or through code.
   */
  lock(): void;
  /**
   * Unlocks access to an item that was previously restricted or unavailable, allowing full interaction or use of its features.
   */
  unlock(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-splitter-item"): SplitterItem;
        querySelector(selectors: "smart-splitter-item"): SplitterItem | null;
        querySelectorAll(selectors: "smart-splitter-item"): NodeListOf<SplitterItem>;
        getElementsByTagName(qualifiedName: "smart-splitter-item"): HTMLCollectionOf<SplitterItem>;
        getElementsByName(elementName: "smart-splitter-item"): NodeListOf<SplitterItem>;
    }
}

export interface SwitchButtonProperties {
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. For other valid values, the corresponding animation effects will be enabled according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies how the switch button responds to user interaction when the switchMode is set to 'click'. This property determines the exact mouse action that triggers a change in the switch’s state:  press – The switch state changes immediately when the mouse button is pressed down (mousedown event).  release – The switch state changes only when the mouse button is released (mouseup event), after a complete click.  pressAndRelease – The switch state changes on mousedown, and automatically reverts to the original state on mouseup.Note: This property is effective only when switchMode is set to 'click'.
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Sets the check state to indicate whether the item is checked, unchecked, or indeterminate; or retrieves the current check state of the item.
   * Default value: false
   */
  checked?: boolean;
  /**
   * Controls whether the ratio button is displayed and can be interacted with by the user. Set to true to show and enable the button, or false to hide or disable it.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Defines the text label or string that will be displayed when the checked property is set to false, representing the unchecked state of the component or element.
   * Default value: """"
   */
  falseContent?: string;
  /**
   * Defines a custom template that is displayed when the component is in the false state. This template allows you to specify the content or layout shown when the evaluated condition is false.
   * Default value: null
   */
  falseTemplate?: any;
  /**
   * Controls whether the switch is in an indeterminate state or retrieves its current indeterminate status. When set to true, the switch appears visually distinct to indicate that its state is neither clearly on nor off. This is typically used to represent a partial or mixed selection.
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Specifies the direction in which the switch toggles between states. If set to true, the positions of the switch states are inverted, meaning the ON and OFF positions are swapped.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * Retrieves or assigns the unlockKey value, which serves as a credential to enable access to the product’s locked features or functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for message localization when working with the messages property. Setting this value ensures the corresponding localized messages are displayed or accessed appropriately.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module. This callback is invoked whenever localization-related events occur, such as changes in language, region settings, or translation updates. It enables the module to respond dynamically to localization changes in the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines an object that maps password strength states (e.g., weak, medium, strong) to their corresponding string values or messages. This allows for customized labels or feedback to be displayed to users based on the evaluated password strength.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Retrieves the current name of the widget or assigns a new name to the widget. This property can be used to identify or reference the widget programmatically.
   * Default value: """"
   */
  name?: string;
  /**
   * Specifies the layout direction of the switch component, determining whether it is displayed horizontally or vertically. Use this property to control how the switch and its label are arranged within the user interface.
   * Default value: horizontal
   */
  orientation?: Orientation | string;
  /**
   * When the custom element is set to readonly, users will not be able to modify its content or trigger any interactive behaviors such as editing, selecting, or submitting data through the element. However, the element remains visible and its value can still be programmatically accessed or updated by scripts.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies the text label or value that will be displayed when the checked property is set to true. This text represents the state of the component when it is selected or activated.
   * Default value: """"
   */
  trueContent?: string;
  /**
   * Defines a custom template to display when the state is true, allowing you to specify how content should appear in this condition.
   * Default value: "null"
   */
  trueTemplate?: string;
  /**
   * Configures how users can interact with the switch element to change its state. The switchMode property accepts the following options:  default – The switch state can be toggled either by dragging the thumb (the movable part of the switch) or by clicking anywhere within the track (the switch’s background area).  click – The switch state changes only when a user clicks inside the track. Dragging the thumb does not affect the state.  drag – The switch state changes solely by dragging the thumb. Clicking on the track has no effect.  none – The switch cannot be toggled by any user interaction. Its state can only be changed programmatically through the API.
   * Default value: default
   */
  switchMode?: SwitchButtonSwitchMode | string;
  /**
   * Specifies the theme for the element, which controls its overall visual appearance—including colors, fonts, and style. Selecting a theme customizes how the element is presented to users, ensuring consistency with the application's design.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the widget or retrieves its current value. Use this to programmatically update what the widget displays or to access the user's input.
   * Default value: """"
   */
  value?: string;
}
/**
 A Switch represents a button with two states, on and off. Switches are most often used on mobile devices to enable and disable options.
*/
export interface SwitchButton extends BaseElement, SwitchButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the widget's state changes between checked and unchecked, such as when a user selects or deselects it. The event provides updated information about the new checked state of the widget.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, changeType)
   *  value - A boolean value indicating the new state of the button ( checked or not ).
   *  oldValue - A boolean value indicating the previous state of the button ( checked or not ).
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the widget transitions to a checked state, such as when a user selects, activates, or toggles the widget to indicate it is checked. It allows developers to execute custom logic in response to changes in the widget's checked status.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user unchecks the widget, indicating a change from a checked (selected) state to an unchecked (deselected) state. This allows you to execute custom logic in response to the widget being deselected.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onUncheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-switch-button"): SwitchButton;
        querySelector(selectors: "smart-switch-button"): SwitchButton | null;
        querySelectorAll(selectors: "smart-switch-button"): NodeListOf<SwitchButton>;
        getElementsByTagName(qualifiedName: "smart-switch-button"): HTMLCollectionOf<SwitchButton>;
        getElementsByName(elementName: "smart-switch-button"): NodeListOf<SwitchButton>;
    }
}

/**Configures how users can interact with the switch element to change its state. The switchMode property accepts the following options:<br/><br/><br/>  default – The switch state can be toggled either by dragging the thumb (the movable part of the switch) or by clicking anywhere within the track (the switch’s background area).
<br/>  click – The switch state changes only when a user clicks inside the track. Dragging the thumb does not affect the state.
<br/>  drag – The switch state changes solely by dragging the thumb. Clicking on the track has no effect.
<br/>  none – The switch cannot be toggled by any user interaction. Its state can only be changed programmatically through the API.
<br/> */
export declare type SwitchButtonSwitchMode = 'default' | 'click' | 'drag' | 'none';
export interface TabItemProperties {
  /**
   *   "Represents the visual and interactive state of the close button within a tab item. This can include states such as default, hovered, focused, active (pressed), or disabled, and determines how the close button appears and responds to user actions."
   * Default value: false
   */
  closeButtonHidden?: boolean;
  /**
   * Prevents the Tab item from being interacted with or selected by the user. When disabled, the Tab item appears visually inactive and cannot be activated through mouse, touch, or keyboard navigation.
   * Default value: false
   */
  disabled?: boolean;
  /**
   *   "Indicates the numerical position of an individual tab item within a tabbed navigation component, starting from zero. Used to identify, activate, or manage specific tabs based on their sequence in the tab list."
   * Default value: null
   */
  index?: number;
  /**
   * Indicates the visual state and styling applied to a tab item when it is currently selected or active, signaling to users which tab is in focus and displaying its associated content.
   * Default value: false
   */
  selected?: boolean;
  /**
   * Label text displayed on a navigation tab within a tabbed interface. Used to identify and differentiate each tab for the user.
   * Default value: ""
   */
  label?: string;
  /**
   * Content displayed within a tab panel, representing the information or elements associated with a specific tab item in a tabbed interface.
   * Default value: 
   */
  content?: any;
  /**
   * Specifies the font size of the label text displayed on each tab item.
   * Default value: null
   */
  labelSize?: number;
}
/**
 Defines a tab item.
*/
export interface TabItem extends BaseElement, TabItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tab-item"): TabItem;
        querySelector(selectors: "smart-tab-item"): TabItem | null;
        querySelectorAll(selectors: "smart-tab-item"): NodeListOf<TabItem>;
        getElementsByTagName(qualifiedName: "smart-tab-item"): HTMLCollectionOf<TabItem>;
        getElementsByName(elementName: "smart-tab-item"): NodeListOf<TabItem>;
    }
}

export interface TabItemsGroupProperties {
  /**
   * 
   * Default value: ""
   */
  label?: string;
  /**
   * 
   * Default value: null
   */
  labelSize?: number;
}
/**
 Defines a group of tab items.
*/
export interface TabItemsGroup extends BaseElement, TabItemsGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tab-items-group"): TabItemsGroup;
        querySelector(selectors: "smart-tab-items-group"): TabItemsGroup | null;
        querySelectorAll(selectors: "smart-tab-items-group"): NodeListOf<TabItemsGroup>;
        getElementsByTagName(qualifiedName: "smart-tab-items-group"): HTMLCollectionOf<TabItemsGroup>;
        getElementsByName(elementName: "smart-tab-items-group"): NodeListOf<TabItemsGroup>;
    }
}

export interface TabLayoutGroupProperties {
  /**
   * Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user actions; when disabled, the element is inactive and cannot be interacted with.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets the current modifiers applied to the Layout item, or sets new modifiers to customize its appearance and behavior. Modifiers may include properties such as alignment, spacing, padding, or visibility.
   * Default value: resize,drag,close
   */
  modifiers?: any;
  /**
   * Specifies the minimum allowable size for the item. This value ensures that the item's dimensions do not shrink below the defined threshold, helping maintain layout consistency and usability.
   * Default value: 50
   */
  min?: number;
  /**
   * Specifies the text that will be displayed as the item's label, providing a descriptive name or title for the user interface element.
   * Default value: "TabGroup"
   */
  label?: string;
  /**
   * Specifies the orientation (horizontal or vertical) of the group, defining how its child elements are arranged within the component. This setting affects the layout and flow direction of the grouped items.
   * Default value: vertical
   */
  orientation?: TabLayoutGroupOrientation | string;
  /**
   * Specifies the alignment or placement of the group of tab items within the tab container. This determines whether the tabs are positioned, for example, at the start, center, end, or distributed evenly along the container.
   * Default value: top
   */
  position?: TabLayoutGroupPosition | string;
  /**
   * Specifies the dimensions or overall scale of the item, such as its width, height, or length. This property defines how large or small the item appears or is rendered within the user interface or layout.
   * Default value: null
   */
  size?: any;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning it cannot be selected or navigated to using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 TabLayoutGroup represents a group of TabLayoutItems each with it's own Tab label.
*/
export interface TabLayoutGroup extends BaseElement, TabLayoutGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tab-layout-group"): TabLayoutGroup;
        querySelector(selectors: "smart-tab-layout-group"): TabLayoutGroup | null;
        querySelectorAll(selectors: "smart-tab-layout-group"): NodeListOf<TabLayoutGroup>;
        getElementsByTagName(qualifiedName: "smart-tab-layout-group"): HTMLCollectionOf<TabLayoutGroup>;
        getElementsByName(elementName: "smart-tab-layout-group"): NodeListOf<TabLayoutGroup>;
    }
}

/**Specifies the orientation (horizontal or vertical) of the group, defining how its child elements are arranged within the component. This setting affects the layout and flow direction of the grouped items. */
export declare type TabLayoutGroupOrientation = 'horizontal' | 'vertical';
/**Specifies the alignment or placement of the group of tab items within the tab container. This determines whether the tabs are positioned, for example, at the start, center, end, or distributed evenly along the container. */
export declare type TabLayoutGroupPosition = 'top' | 'bottom' | 'left' | 'right';
export interface TabLayoutItemProperties {
  /**
   * Determines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes inactive and unresponsive to user actions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets the modifier properties (such as alignment, padding, spacing, or styling options) applied to the Layout item, allowing you to customize its appearance and behavior.
   * Default value: resize,drag,close
   */
  modifiers?: any;
  /**
   * Specifies the minimum allowable size for the item, ensuring that it cannot be resized or rendered smaller than this value.
   * Default value: 50
   */
  min?: number;
  /**
   * Specifies the text or name displayed as the label for the item. This value is shown to users as the item's identifier or title in user interfaces.
   * Default value: "TabItem"
   */
  label?: string;
  /**
   * Specifies the alignment and direction in which the group’s elements are arranged, such as horizontal or vertical orientation.
   * Default value: vertical
   */
  orientation?: TabLayoutItemOrientation | string;
  /**
   * Specifies the overall dimensions of the item, such as its width, height, or length, to define how much space the item occupies.
   * Default value: null
   */
  size?: any;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, meaning users will not be able to access the element using the Tab key or other keyboard navigation methods.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 TabLayoutItem represents a Layout Item that has a Tab label and is applicable to a TabLayoutGroup.
*/
export interface TabLayoutItem extends BaseElement, TabLayoutItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tab-layout-item"): TabLayoutItem;
        querySelector(selectors: "smart-tab-layout-item"): TabLayoutItem | null;
        querySelectorAll(selectors: "smart-tab-layout-item"): NodeListOf<TabLayoutItem>;
        getElementsByTagName(qualifiedName: "smart-tab-layout-item"): HTMLCollectionOf<TabLayoutItem>;
        getElementsByName(elementName: "smart-tab-layout-item"): NodeListOf<TabLayoutItem>;
    }
}

/**Specifies the alignment and direction in which the group’s elements are arranged, such as horizontal or vertical orientation. */
export declare type TabLayoutItemOrientation = 'horizontal' | 'vertical';
export interface TableProperties {
  /**
   * Controls whether the application automatically restores its previous state from the browser's localStorage. When enabled, it retrieves saved settings such as column configurations, expanded or selected rows, active filters, groupings, and the sort order of columns. The specific state information that is loaded depends on the options defined in the stateSettings property.
   * Default value: false
   */
  autoLoadState?: boolean;
  /**
   * Controls whether the component automatically saves its current state to the browser’s localStorage. When enabled, data such as column configurations, expanded row states, selected rows, applied filters, grouping options, and sorted columns are persistently stored. The specific state information saved depends on the options set in the stateSettings property. This allows users’ table settings to be retained and restored across browser sessions.
   * Default value: false
   */
  autoSaveState?: boolean;
  /**
   * Defines or retrieves an array of column groups that establish the hierarchical structure of the column headers. Note: When a column header hierarchy is configured using these column groups, features such as column resizing and auto-sizing are disabled and will not be available for those columns.
   * Default value: null
   */
  columnGroups?: TableColumnGroup[];
  /**
   * Specifies or retrieves the minimum width for columns when columnSizeMode is set to 'auto' or when columns are being resized by the user. This property determines the smallest allowable width for columns during these operations. Note: This setting is ignored for columns that have their width explicitly defined through code.
   * Default value: 50px
   */
  columnMinWidth?: string | number;
  /**
   * Determines whether users are allowed to reorder columns by dragging them. When enabled, columns can be rearranged by the user; when disabled, the column order is fixed. This property can be set to enable or disable column reordering, or queried to check the current state.
   * Default value: false
   */
  columnReorder?: boolean;
  /**
   * Enables or disables the ability for users to resize table columns. When this option is enabled, users can manually adjust the width of each column. Note: The actual column sizing is still governed by the standard HTML table behavior for table-layout: fixed, as smart-table is built upon this layout model. This means columns have a fixed width and resizing may affect the overall table width proportionally, consistent with native HTML tables using table-layout: fixed.
   * Default value: false
   */
  columnResize?: boolean;
  /**
   * This property controls how the table adjusts its column widths when columnSizeMode is set to 'default'. - When columnResizeNormalize is 'false', and every table column has a defined width, the Table will insert an extra '' element. This additional header cell ensures that the customized column widths are preserved, preventing the browser from automatically resizing your columns and thereby maintaining the exact width configuration you specified.- When columnResizeNormalize is 'true', the Table will not add an extra ''. Instead, it distributes the available space among the columns, causing them to expand or contract as needed—similar to the default behavior of standard HTML tables. This results in a more fluid, responsive layout, where any unallocated space is automatically filled.This property is useful for toggling between a strictly controlled column layout and one that behaves like a regular HTML table when sizing columns.
   * Default value: false
   */
  columnResizeNormalize?: boolean;
  /**
   * Determines whether a visual feedback indicator is shown during column resizing, displaying the new column width in pixels as the user adjusts the column. This property can be set to enable or disable the display of the width feedback overlay, or queried to check its current state.
   * Default value: false
   */
  columnResizeFeedback?: boolean;
  /**
   * Provides detailed definitions and configuration options for the properties of each column, including attributes such as data type, header label, visibility, sorting, filtering, and formatting. This section outlines how individual columns should be displayed and behave within the table or data grid.
   * Default value: null
   */
  columns?: TableColumn[];
  /**
   * Defines or retrieves the rules and settings for conditional formatting applied to the table's cells, allowing specific formatting (such as colors, styles, or icons) to be applied dynamically based on the cell values or conditions.
   * Default value: null
   */
  conditionalFormatting?: TableConditionalFormatting[];
  /**
   * Defines the column menu functionality for the grid. When this property is set to true, a menu icon appears in the header of each column. Clicking this icon opens a column menu, providing users with options to sort the data, apply filters, and toggle the visibility of columns. You can set this property to enable or disable the column menu, or retrieve its current state.
   * Default value: false
   */
  columnMenu?: boolean;
  /**
   * ---Determines how the table columns are sized, supporting two distinct modes:- ''auto' Mode:'    Columns are automatically sized based on their content and the specified columnMinWidth value. If the table does not have enough horizontal space to display all content, excess text is truncated with ellipses. Manually specified static column widths (set by the user) will still be honored in this mode.- ''default' Mode:'    Columns follow the standard HTML table's table-layout: fixed behavior. In this mode, column widths do not adapt to content; instead, each column's width is determined either by a fixed value (set via the column’s width property) or distributed evenly if no width is specified.Use this property to control whether column widths are calculated automatically based on content or determined by fixed sizing rules.
   * Default value: default
   */
  columnSizeMode?: TableColumnSizeMode | string;
  /**
   * Controls the visibility of the "Conditional Formatting" button in the Table component’s header toolbar. When enabled, this button appears in the toolbar and allows users to open a dialog where they can configure and apply conditional formatting rules to the table's data. This property can be used to programmatically show or hide the button, or to check if it is currently displayed.
   * Default value: false
   */
  conditionalFormattingButton?: boolean;
  /**
   * This property specifies the interval, in milliseconds, that must elapse during vertical scrolling before the table data is refreshed or updated. Adjusting this setting can help control the responsiveness and performance of data loading while scrolling through the table.
   * Default value: 1
   */
  deferredScrollDelay?: number;
  /**
   * When the dataSource property is bound directly to a plain array—rather than to an instance of JQX.DataAdapter—this property specifies the name of the field within each array element that should be used as the unique row identifier. You can use it to set or retrieve the key that maps each item's row id, allowing the component to correctly reference, update, and manage rows by their unique ids.
   * Default value: "null"
   */
  dataRowId?: string;
  /**
   * Specifies the data source for the Table component. This property accepts either a standard JavaScript Array or a DataAdapter instance. Using an Array allows you to provide the table data directly, while a DataAdapter offers advanced data management features such as data binding, sorting, filtering, and integration with remote data sources. For detailed information about the DataAdapter and its capabilities, visit: https://www.htmlelements.com/docs/data-adapter/
   * Default value: 
   */
  dataSource?: any;
  /**
   * Configures the grid's data source settings when the dataSource property is assigned either a local data array or a remote URL. This allows the grid to properly retrieve, bind, and display data from the specified source, whether it is provided directly as an array or fetched asynchronously from a web endpoint.
   * Default value: [object Object]
   */
  dataSourceSettings?: TableDataSourceSettings;
  /**
   * A callback function that allows you to modify or transform each record in the initial dataSource. If provided, this function is invoked once for every record in the dataSource, receiving the individual record as its argument. The function should return the transformed record, which will be included in the final processed data set.
   * Default value: null
   */
  dataTransform?: { (record: any): void };
  /**
   * Prevents users from interacting with the element, such as clicking, selecting, typing, or triggering any events. The element will appear disabled and will not respond to any user input.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Determines whether the Table is editable. When set to true, users can modify the contents of the Table; when false, the Table is read-only and cannot be edited. This property can be used to both retrieve the current editable state and update it as needed.
   * Default value: false
   */
  editing?: boolean;
  /**
   * Enables or retrieves the current state of edit mode, determining whether the component is in an editable state. When set to true, users can modify the content; when set to false, the component is read-only.
   * Default value: cell
   */
  editMode?: TableEditMode | string;
  /**
   * Determines whether row hierarchies are automatically expanded when they are initially created. When this property is enabled, grouped rows or tree-structured rows in the Table will be expanded by default, allowing users to see all subgrouped data without requiring manual expansion. Use this property if you want hierarchical groups in the Table to appear open automatically when the Table is grouped or when using tree mode.
   * Default value: false
   */
  expandHierarchy?: boolean;
  /**
   * Controls whether filtering is enabled for the Table. When filtering is enabled (the default), each string and numeric column displays a filter input in the header, allowing users to filter table rows based on column values. Setting this property to false disables all filter inputs and prevents users from filtering the table data.
   * Default value: false
   */
  filtering?: boolean;
  /**
   * Determines whether the Table supports data filtering through a dedicated filter row. When enabled, users can input criteria directly into this row to dynamically filter and display matching rows in the Table. This property can be set to enable or disable the filter row feature, and can also be queried to check its current state.
   * Default value: false
   */
  filterRow?: boolean;
  /**
   * Gets or sets the filter operator for the table, determining how multiple column filters are combined. If set to 'and', all filter conditions must be met for a row to be displayed (e.g., cellValue1 && cellValue2). If set to 'or', a row is shown if it meets any one of the filter conditions (e.g., cellValue1 || cellValue2). This property controls whether filters are applied using logical 'AND' or 'OR' operations.
   * Default value: and
   */
  filterOperator?: boolean;
  /**
   * Gets or sets the ID of an HTML  element to be used as a custom filter template. This allows you to define and apply your own filter UI by referencing the specified template’s ID.
   * Default value: "null"
   */
  filterTemplate?: string;
  /**
   * Specifies or retrieves the ID of an HTML '' element whose content will be used to render the footer row(s) of the component. This allows you to define custom footer layouts using template markup and apply them dynamically by referencing the template's ID.
   * Default value: "null"
   */
  footerRow?: string;
  /**
   * Enables or disables support for Excel-style formulas as cell values. When enabled, users can enter formulas starting with the '=' sign (e.g., "=SUM(A1:A3)") directly into cells. These formulas are automatically recalculated whenever referenced cell values change. Note: This functionality requires the third-party, free 'formula-parser' plugin; be sure to include the 'formula-parser.min.js' file as a dependency in your project.
   * Default value: false
   */
  formulas?: boolean;
  /**
   * Defines or retrieves whether the Table's footer remains fixed (sticky/frozen) at the bottom of the Table when scrolling vertically, ensuring it stays visible regardless of the Table's scroll position.
   * Default value: false
   */
  freezeFooter?: boolean;
  /**
   * Sets or retrieves whether the table’s column header remains fixed (sticky) at the top of the viewport while scrolling through the table content. When enabled, the column header stays visible, improving readability for tables with many rows.
   * Default value: false
   */
  freezeHeader?: boolean;
  /**
   * Configures or retrieves the current state of table grouping functionality. When enabled, rows in the table can be organized into groups based on specified criteria, allowing for better data categorization and easier analysis.
   * Default value: false
   */
  grouping?: boolean;
  /**
   * A callback function that allows you to customize the contents of a grouping header row. You can update the 'label' property to change the displayed grouping value. Additionally, by modifying the 'template' property, you have full control over the rendered output, enabling you to redefine the entire content of the header row—including the group label, associated column information, and the item count. Use this function to tailor the appearance and structure of grouping headers to your application's specific needs.
   * Default value: null
   */
  groupFormatFunction?: { (settings: { value: any, row: string | number, column: string, template?: any }): void };
  /**
   * Enhances customization of the element's header. This property accepts several types of values:- The 'id' of an 'HTMLElement' or 'HTMLTemplateElement', which will be used to render the header.- A function, which receives the header element of the table as its sole argument. Use this function to dynamically generate or modify the header content.- A string containing HTML markup, which will be parsed and inserted as the header.This flexibility allows you to define static, template-based, or fully dynamic headers for the element according to your application's needs.
   * Default value: null
   */
  headerRow?: string | HTMLElement | Function;
  /**
   * Controls whether users can navigate through the table using keyboard inputs. When enabled, users can move between table cells, rows, or columns using keys such as Tab, Arrow keys, or other navigation shortcuts. This setting can be accessed to check the current state (enabled or disabled) or modified to turn keyboard navigation on or off for the table.
   * Default value: false
   */
  keyboardNavigation?: boolean;
  /**
   * Controls whether checkboxes are visible in the selection column. When set to true, checkboxes will be displayed, allowing users to select multiple items. When set to false, the selection column will not display checkboxes. This property can be used to programmatically toggle the visibility of checkboxes and can also be read to determine the current display state.
   * Default value: false
   */
  hideSelectionColumn?: boolean;
  /**
   * Defines how the column settings are handled during loading, whether automatically with autoLoadState or manually with loadState. This option is relevant only if the stateSettings array includes 'columns', ensuring that column-specific state (such as order, visibility, or width) is properly managed during the state load process.
   * Default value: implementationOnly
   */
  loadColumnStateBehavior?: TableLoadColumnStateBehavior | string;
  /**
   * Defines or retrieves the unlockKey property, a unique value required to activate or authorize access to the product's features. This key is used to verify that the user is permitted to unlock and use the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the currently selected language code (e.g., "en", "fr", "es") for localization purposes. This property works together with the messages property to determine which set of localized messages should be displayed or used by the application. Adjusting this property changes which language mappings from messages are active.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Defines or retrieves an object containing key-value pairs of strings used within the element, allowing for customization and localization of displayed text. This property works together with the locale property to present the appropriate language and regional terms based on the user's locale preferences.
   * Default value:    * {
   *   "en": {
   *     "add": "Add condition",
   *     "all": "All columns",
   *     "apply": "Apply",
   *     "between": "Between",
   *     "cancel": "Cancel",
   *     "clearFilter": "Clear filter",
   *     "close": "Close",
   *     "column": "Column:",
   *     "condition": "Condition:",
   *     "conditionalFormatting": "Conditional Formatting",
   *     "CONTAINS": "contains",
   *     "CONTAINS_CASE_SENSITIVE": "contains (case sensitive)",
   *     "DOES_NOT_CONTAIN": "does not contain",
   *     "DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",
   *     "EMPTY": "empty",
   *     "ENDS_WITH": "ends with",
   *     "ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",
   *     "EQUAL": "equal",
   *     "EQUAL_CASE_SENSITIVE": "equal (case sensitive)",
   *     "filterCondition": "Filter condition",
   *     "filterPlaceholder": "Filter",
   *     "firstButton": "First",
   *     "fontFamily": "Font family:",
   *     "fontSize": "Font size:",
   *     "format": "Format:",
   *     "formatColumn": "Format Column",
   *     "GREATER_THAN": "greater than",
   *     "GREATER_THAN_OR_EQUAL": "greater than or equal",
   *     "greaterThan": "Greater Than",
   *     "highlight": "Highlight",
   *     "invalidValue": "Invalid value",
   *     "itemsPerPage": "Items per page:",
   *     "lastButton": "Last",
   *     "LESS_THAN": "less than",
   *     "LESS_THAN_OR_EQUAL": "less than or equal",
   *     "lessThan": "Less Than",
   *     "nextButton": "Next",
   *     "NOT_EMPTY": "not empty",
   *     "NOT_EQUAL": "not equal",
   *     "NOT_NULL": "not null",
   *     "notEqual": "Not Equal To",
   *     "NULL": "null",
   *     "ok": "OK",
   *     "previousButton": "Previous",
   *     "remove": "Remove condition",
   *     "secondValue": "Second value:",
   *     "STARTS_WITH": "starts with",
   *     "STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",
   *     "summaryPrefix": "of",
   *     "text": "Text",
   *     "value": "Value:",
   *     "with": "with"
   *   }
   * }
   */
  messages?: any;
  /**
   * A callback function that is invoked every time a table cell is rendered. This function receives relevant cell data and context as arguments, allowing you to customize the cell’s content, appearance, or behavior dynamically during the rendering process.
   * Default value: null
   */
  onCellRender?: { (data: any, dataField: string, value: any, cell: HTMLTableCellElement): void };
  /**
   * A callback function that is invoked every time a Table column header cell is rendered. This function allows you to customize the rendering or behavior of each column header cell, and is called with information about the specific column being rendered.
   * Default value: null
   */
  onColumnRender?: { (dataField: string, headerCell: HTMLTableCellElement): void };
  /**
   * A callback function that is executed during the initialization process of the Table component. This function is triggered once the Table setup begins, allowing you to run custom code or perform additional configurations before the Table is fully rendered.
   * Default value: null
   */
  onInit?: { (): void };
  /**
   * A callback function that is executed immediately after the Table component has finished initializing. This function allows you to perform custom actions or setup tasks once the Table is fully ready.
   * Default value: null
   */
  onLoad?: { (): void };
  /**
   * A callback function that is invoked after the Table has completed all updates triggered by the endUpdate method. This function allows you to perform actions or handle additional logic once the update process is fully finished.
   * Default value: null
   */
  onUpdateComplete?: { (): void };
  /**
   * Specifies or retrieves the number of records displayed per page when paging is enabled. This property determines the size of each data page, allowing you to control how many items are shown to the user at a time.
   * Default value: 10
   */
  pageSize?: number;
  /**
   * Gets or sets the current page index (zero-based) when paging is enabled. This property allows you to specify or retrieve which page of data is currently being displayed, with the first page having an index of 0.
   * Default value: 0
   */
  pageIndex?: number;
  /**
   * Determines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.
   * Default value: false
   */
  paging?: boolean;
  /**
   * Specifies or retrieves a value that determines whether the element's alignment is configured for right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew that require right-to-left font support.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Defines or retrieves a string template used for rendering the detail section of a row. This template enables you to display additional information beneath a master row when it is expanded. To populate the detail row with values from the master row, insert the relevant data field names within double curly brackets (e.g., ). When a user clicks on a row to expand it, the template is applied, and the placeholders are replaced with the corresponding data from that row.
   * Default value: "null"
   */
  rowDetailTemplate?: string;
  /**
   * Defines or retrieves a callback function that takes three arguments: column, filterConditions, and filterInputTemplateString. This function is responsible for generating and returning a new filter input element or template based on the specific column and the current filter conditions. Use this callback to customize how the filter input is rendered for each column in the table.
   * Default value: null
   */
  onFilterRowInput?: any;
  /**
   * Gets or sets an array containing the IDs of the currently selected rows in the Table. This property allows you to retrieve which rows are selected by their unique identifiers, or programmatically update the selection by supplying an array of row IDs.
   * Default value: 
   */
  selected?: any[];
  /**
   * Controls whether users can select table rows using checkboxes. When enabled, checkboxes appear next to each row, allowing users to select or deselect rows. The value can be set to enable or disable this feature, or retrieved to check the current selection mode.
   * Default value: false
   */
  selection?: boolean;
  /**
   * Defines or retrieves the current selection mode for the component. This property is only applicable when selection functionality is enabled. Use it to specify how users can select items (e.g., single, multiple, or none).
   * Default value: many
   */
  selectionMode?: TableSelectionMode | string;
  /**
   * Controls the hierarchical row selection behavior using checkboxes. When enabled, selecting a parent row automatically selects all of its child (sub) rows. Likewise, deselecting a parent row will deselect all of its sub rows. You can use this property to get the current hierarchical selection state or to enable/disable this feature.
   * Default value: true
   */
  selectionByHierarchy?: boolean;
  /**
   * Callback function triggered whenever a column is sorted, allowing you to customize or override the default sorting behavior of the table. The function receives the following four parameters:  dataSource: The table's current data source (array of data objects) that will be sorted.  sortColumns: An array of column field names representing the columns to sort by, in order of sorting priority.  directions: An array of sort directions ('asc' or 'desc'), where each direction corresponds to the order of sortColumns.  defaultCompareFunctions: An array of default comparator functions for each column in sortColumns. You can use these to leverage default sorting logic for specific columns while overriding others as needed.Use this callback to implement custom multi-column sorting logic, integrate external sorting systems, or modify data presentation dynamically based on user actions.
   * Default value: null
   */
  sort?: { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void };
  /**
   * Specifies the sorting behavior applied to the table, such as ascending, descending, or custom order. This setting controls how table data is organized and displayed to the user.
   * Default value: none
   */
  sortMode?: TableSortMode | string;
  /**
   * Specifies which aspects of the Table's current state can be saved (using autoSaveState or saveState) and restored (using autoLoadState or loadState). This determines which settings—such as column visibility, sorting, filters, and pagination—are included when persisting or retrieving the Table’s configuration.
   * Default value: columns,expanded,filtered,grouped,selected,sorted
   */
  stateSettings?: string[];
  /**
   * Specifies the theme used to style the element. The theme controls the overall appearance, including colors, fonts, and visual effects, ensuring a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Determines whether a tooltip displaying the full, untruncated content appears when a user hovers over a table cell that contains truncated text. When enabled, hovering the mouse pointer over a cell with clipped or overflowed text will show a tooltip with the complete content; when disabled, no tooltip is displayed on hover. This setting can be used to specify or retrieve the current tooltip behavior for truncated cell content.
   * Default value: false
   */
  tooltip?: boolean;
  /**
   * Controls whether HTML virtualization is enabled. When activated, only the rows currently visible within the viewport are rendered in the DOM, rather than all rows at once. This optimization significantly improves table performance, especially when displaying large datasets, by reducing memory usage and speeding up rendering times.
   * Default value: false
   */
  virtualization?: boolean;
}
/**
 Table is an alternative of the HTMLTableElement.
*/
export interface Table extends BaseElement, TableProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when a user begins editing the contents of a cell, signaling the initiation of a cell edit operation. It provides an opportunity to perform preparatory actions, such as validating the cell, applying custom styles, or capturing the cell’s initial value before any changes are made.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, value)
   *  id - The id of the row.
   *  dataField - The data field of the cell's column.
   *  row - The data of the cell's row.
   *  value - The data value of the cell.
   */
  onCellBeginEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a cell within the component or data grid. It provides contextual information about the clicked cell, such as its row and column index, allowing you to perform custom actions in response to user interaction.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, value, originalEvent)
   *  id - The cell's row id.
   *  dataField - The data field of the cell's column.
   *  row - The data of the cell's row.
   *  value - The data value of the cell.
   *  originalEvent - The 'click' event object.
   */
  onCellClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after a cell's value has been modified by the user, allowing you to respond to changes as soon as a cell is edited. It provides relevant information about the edited cell, such as its new value, previous value, row, and column, enabling precise handling of cell updates within the table or data grid.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, value)
   *  id - The id of the row.
   *  dataField - The data field of the cell's column.
   *  row - The new data of the cell's row.
   *  value - The data value of the cell.
   */
  onCellEndEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user changes the current selection, such as highlighting text or selecting an item. Inside the event handler, you can access the updated selection by calling the 'getSelection' method. This allows you to retrieve information about the newly selected content or item and perform any necessary actions in response to the change.
	* @param event. The custom event. Custom data event was created with: ev.detail(type)
   *  type - The type of action that initiated the selection change. Possible types: 'programmatic', 'interaction', 'remove'.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a row in the data grid or table is collapsed, meaning its contents or nested rows are hidden from view. Use this event to execute custom logic after a user collapses a specific row.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, record)
   *  id - The id of the collapsed row.
   *  record - The data of the collapsed row.
   */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a row in the table is expanded by the user, typically to reveal additional details or nested content associated with that row.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, record)
   *  id - The id of the expanded row.
   *  record - The (aggregated) data of the expanded row.
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user clicks on a column header cell, typically indicating that the header was selected—such as to initiate actions like sorting or displaying column options. It provides contextual information about the clicked header cell, enabling you to implement custom behaviors in response to header interactions.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
   *  dataField - The data field of the cell's column.
   */
  onColumnClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after the column menu has been closed by the user, either by clicking outside the menu or performing an action that causes it to close. It allows you to execute custom logic in response to the closure of a column-specific menu in the interface.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
   *  dataField - The data field of the column.
   */
  onCloseColumnMenu?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column's width is changed by the user, either by dragging the column's edge or by double-clicking to auto-fit the column. It allows you to respond to column resize actions, enabling custom logic such as persisting new column widths or updating related UI elements.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField, headerCellElement, width)
   *  dataField - The data field of the column.
   *  headerCellElement - The column's header cell HTML element.
   *  width - The new width of the column.
   */
  onColumnResize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user initiates or modifies a filtering action, such as applying, updating, or removing filters. It allows the application to respond to changes in filtering criteria, ensuring that the displayed data accurately reflects the selected filters.
	* @param event. The custom event. Custom data event was created with: ev.detail(action, filters)
   *  action - The filtering action. Possible actions: 'add', 'remove'.
   *  filters - The added filters. Only when action is 'add'.
   */
  onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user performs an action related to grouping, such as creating, modifying, or deleting a group, or changing the grouping configuration. It allows your application to respond dynamically to changes in how items are grouped.
	* @param event. The custom event. Custom data event was created with: ev.detail(action, dataField, label, path)
   *  action - The grouping action. Possible actions: 'add', 'collapse', 'expand', 'remove'.
   *  dataField - The data field of the column whose grouping is modified.
   *  label - The label of the group (only when collapsing/expanding).
   *  path - The group's path (only when collapsing/expanding). The path includes the path to the expanded/collapsed group starting from the root group. The indexes are joined with '.'. This parameter is available when the 'action' is 'expand' or 'collapse'.
   */
  onGroup?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired whenever a user opens the menu associated with a column, such as by clicking a column header or menu icon. It provides an opportunity to perform custom actions or update the interface in response to the column menu becoming visible.
	* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
   *  dataField - The data field of the column.
   */
  onOpenColumnMenu?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a user performs an action that changes the current page in a paginated component, such as navigating to the next or previous page, selecting a specific page number, or adjusting the page size.
	* @param event. The custom event. Custom data event was created with: ev.detail(action)
   *  action - The paging action. Possible actions: 'pageIndexChange', 'pageSizeChange'.
   */
  onPage?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user begins editing a table row, but only if the <strong>editMode</strong> property is set to <em>'row'</em>. This allows you to handle actions or logic specifically at the start of a row-level edit operation within your data grid or table component.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, row)
   *  id - The id of the row.
   *  row - The data of the row.
   */
  onRowBeginEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a table row is edited, but only if the <strong>editMode</strong> property is set to <em>'row'</em>. It signifies that the user has completed changes to the entire row, as opposed to editing individual cells, and is useful for handling row-level updates or validation logic.
	* @param event. The custom event. Custom data event was created with: ev.detail(id, row)
   *  id - The id of the row.
   *  row - The new data of the row.
   */
  onRowEndEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a column header cell in the table is clicked by the user, initiating a sort operation, or when sorting is applied programmatically through the Table API. It fires both on direct user interaction and when sorting state changes are made via code.
	* @param event. The custom event. Custom data event was created with: ev.detail(columns, sortDataFields, sortOrders, sortDataTypes, type)
   *  columns - An array with information about the columns the Table has been sorted by.
   *  sortDataFields - An array with information about the data fields the Table has been sorted by.
   *  sortOrders - An array with information about the columns sort orders the Table has been sorted by.
   *  sortDataTypes - An array with information about the columns data types the Table has been sorted by.
   *  type - The type of action that initiated the data sort. Possible types: 'programmatic', 'interaction'
   */
  onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Inserts a new row into the data set. To use this method, provide a JSON object containing key-value pairs that represent the data for each column in the new row. Each key should correspond to a column name, and its value should specify the cell's content for that column.
   * @param {any} data. JSON object with the new row's data. Sample JSON: {firstName: 'Peter', lastName: 'Fuller'}.
   */
  addRow(data: any): void;
  /**
   * Adds a custom filter to a specified column in the dataset, allowing you to display only the rows that meet defined criteria for that column. This function enables more precise data querying and improved data visualization by narrowing down results based on column-specific conditions.
   * @param {string} dataField. The column's data field.
   * @param {any} filter. FilterGroup object or a Filter expression. Filter expression like: 'startsWith B'. Example 2: ['contains Andrew or contains Nancy'], Example 3:  ['quantity', '&lt;= 3 and &gt;= 8'].  Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
   */
  addFilter(dataField: string, filter: any): void;
  /**
   * Groups the dataset based on the unique values in a specified column, organizing the data into subsets where each group contains records sharing the same value for that column.
   * @param {string} dataField. The column's data field.
   */
  addGroup(dataField: string): void;
  /**
   * Initiates an edit operation, marking the start of a sequence where changes can be made to the data or document. This typically enables features such as undo or redo by tracking all modifications performed during the editing session.
   * @param {string | number} row. The id of the row to edit.
   * @param {string} dataField?. The dataField of the cell's column. May be omitted when <strong>editMode</strong> is <em>'row'</em>.
   */
  beginEdit(row: string | number, dataField?: string): void;
  /**
   * Initiates an update operation by temporarily suspending all table data refreshes and rendering processes. This ensures that no visual or data changes occur until the update is completed, preventing partial renders and improving performance during batch modifications.
   */
  beginUpdate(): void;
  /**
   * Terminates the current editing session and reverts any unsaved changes, restoring the content to its previous state before the edit began. No modifications made during this edit operation will be saved.
   */
  cancelEdit(): void;
  /**
   * Removes all currently applied filters from the data set or view, restoring the original unfiltered state.
   */
  clearFilters(): void;
  /**
   * Removes any currently applied grouping from the data set, restoring the original ungrouped view.
   */
  clearGrouping(): void;
  /**
   * Removes any currently selected items, resetting the selection state to none.
   */
  clearSelection(): void;
  /**
   * Removes any active sorting applied to the table, restoring the original order of the data. This action resets all column sort indicators and displays the table rows as they were initially loaded.
   */
  clearSort(): void;
  /**
   * Collapses all expanded rows in the tree view, minimizing each parent node so that only the top-level rows remain visible. This action helps organize and simplify the display by hiding any nested child rows.
   */
  collapseAllRows(): void;
  /**
   * Collapses all expanded groups in the tree view, minimizing each group so that only their parent nodes are visible. This action hides all nested child elements within the groups, providing a cleaner and more condensed overview of the tree structure.
   */
  collapseAllGroups(): void;
  /**
   * Collapses all expanded row details in the data table. Any rows that currently display additional content through a defined <b>rowDetailTemplate</b> will be collapsed, hiding their extra details from view. Only the main row data will remain visible after this action.
   */
  collapseAllRowDetails(): void;
  /**
   * Collapses a specified group of elements, hiding its contents from view while retaining the group's header or main container visible. This action makes the group's items inaccessible until it is expanded again, improving interface organization and reducing visual clutter.
   * @param {string} index. The group's hierarchical index.
   */
  collapseGroup(index: string): void;
  /**
   * Collapses the specified row in tree mode, hiding its child rows and displaying only the parent row.
   * @param {string | number} rowId. The id of the row to collapse.
   */
  collapseRow(rowId: string | number): void;
  /**
   * Prevents the selection of a specific row in the table. By default, when the 'selection' property is set to 'true', all rows are selectable. Use this option to disable row selection for individual rows as needed, overriding the global selection setting.
   * @param {string | number | (string | number)[]} rowId. The id of the row (or an array of row ids) to select.
   */
  disableSelect(rowId: string | number | (string | number)[]): void;
  /**
   * Restores row selection capability for a previously disabled row, typically after using the 'disableSelect' method. If the 'selection' property is set to 'true', selection is enabled for all rows by default, allowing users to select any row unless explicitly disabled.
   * @param {string | number | (string | number)[]} rowId. The id of the row (or an array of row ids) to select.
   */
  enableSelect(rowId: string | number | (string | number)[]): void;
  /**
   * Finalizes the current edit operation by applying and saving all changes made to the content, ensuring that modifications are committed and any unsaved edits are preserved.
   */
  endEdit(): void;
  /**
   * Ends the current update operation, allowing the table to resume normal refresh and render processes. This function restores automatic table updates that may have been paused during the update, and explicitly triggers a full re-render of the table to ensure all changes are reflected in the UI.
   * @param {boolean} refresh?. Optionally you can pass 'false' in case you need to manually call the 'refresh' method. By default, the table is re-rendered.
   */
  endUpdate(refresh?: boolean): void;
  /**
   * Expands all rows in the tree view, revealing every nested child element and displaying the entire hierarchical structure.
   */
  expandAllRows(): void;
  /**
   * Expands and displays all group nodes in the tree view, revealing their child items and nested structures.
   */
  expandAllGroups(): void;
  /**
   * Displays the detailed content for all table rows that have a <b>rowDetailTemplate</b> defined by expanding them simultaneously. Only rows associated with a <b>rowDetailTemplate</b> will show their additional details when this action is triggered; rows without a detail template remain unchanged.
   */
  expandAllRowDetails(): void;
  /**
   * Expands a collapsible group to reveal its hidden content or child elements. This action typically changes the group's state from collapsed to expanded, making its associated items visible within the user interface.
   * @param {string} index. The group's hierarchical index.
   */
  expandGroup(index: string): void;
  /**
   * Expands a row to reveal its child elements or sub-rows when operating in tree view mode, allowing users to browse hierarchical data structures within the table.
   * @param {string | number} rowId. The id of the row to expand.
   */
  expandRow(rowId: string | number): void;
  /**
   * Exports the data contained within the Table component to a downloadable file format (such as CSV, Excel, or JSON), enabling users to save or process the table data outside of the application.
   * @param {string} dataFormat. The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.
   * @param {string} fileName?. The name of the file to export to
   * @param {boolean} exportFiltered?. If set to true, exports only filtered records
   * @param {Function} callback?. A callback function to pass the exported data to (if fileName is not provided)
   * @returns {any}
   */
  exportData(dataFormat: string, fileName?: string, exportFiltered?: boolean, callback?: Function): any;
  /**
   * Returns an array containing the unique identifiers (IDs) of all currently selected rows. Each element in the array represents the ID of a row that has been selected by the user or programmatically. If no rows are selected, the array will be empty.
   * @returns {(string | number)[]}
   */
  getSelection(): (string | number)[];
  /**
   * Returns the current state of the Table component as an object, including comprehensive details about the following: visible and hidden columns, expanded row keys, selected row keys, applied filters, active groupings, and the order and direction of sorted columns. This state object can be serialized, stored (e.g., in local storage or a database), and later restored by passing it to the <strong>loadState</strong> method, enabling consistent table configurations across sessions or users.
   * @returns {any}
   */
  getState(): any;
  /**
   * Retrieves the current value stored in a specific cell, identified by its row and column coordinates. This function returns the cell's content, which may be a number, text, or other data type, depending on the cell's contents.
   * @param {string | number} row. The id of the cell's row.
   * @param {string} dataField. The dataField of the cell's column.
   * @returns {any}
   */
  getValue(row: string | number, dataField: string): any;
  /**
   * Retrieves the value of a specific property from a column object. This function allows you to access detailed information or settings associated with a particular column, such as its name, data type, default value, or any custom attributes.
   * @param {string} columnDataField. Column field name.
   * @param {string} propertyName. Column property name.
   * @returns {any}
   */
  getColumnProperty(columnDataField: string, propertyName: string): any;
  /**
   * Determines if a specified group is currently expanded and returns <em>true</em> if it is, or <em>false</em> otherwise. If the provided group index is undefined or does not correspond to a valid group, the function will also return <em>false</em>.
   * @param {string} index. The group's hierarchical index.
   * @returns {boolean}
   */
  isGroupExpanded(index: string): boolean;
  /**
   * Loads the current state of the Table component, restoring settings such as visible columns, expanded rows, selected rows, applied filters, grouping configurations, and column sorting order. The specific aspects of the state that are loaded depend on the options specified in the <strong>stateSettings</strong> property. This allows for a customized and persistent table experience based on user preferences or previously saved configurations.
   * @param {any} state?. An object returned by one of the methods <strong>getState</strong> or <strong>saveState</strong>. If a state is not passed, the method tries to load the state from the browser's localStorage.
   */
  loadState(state?: any): void;
  /**
   * Navigates the user to a specified web page or route within the application. This action typically updates the browser’s address bar and loads the corresponding content, enabling seamless transitions between different views or sections of the site. Optional parameters may include the target URL, query parameters, or navigation options such as replacing the current history entry.
   * @param {number} pageIndex. The zero-based page index to navigate to.
   */
  navigateTo(pageIndex: number): void;
  /**
   * Updates the table by reloading its data and refreshing the displayed content to reflect the latest changes.
   */
  refresh(): void;
  /**
   * Clears all filters currently applied to the specified column, restoring its original, unfiltered data view.
   * @param {string} dataField. The column's data field.
   */
  removeFilter(dataField: string): void;
  /**
   * Removes the existing grouping applied to the dataset based on the specified column, resulting in an ungrouped or flat structure with respect to that column. This operation effectively eliminates any aggregation or segmentation previously created through grouping by that column.
   * @param {string} dataField. The column's data field.
   */
  removeGroup(dataField: string): void;
  /**
   * Deletes a row from the data set based on the specified unique identifier (id). This operation locates the row with the matching id and removes it from the collection, ensuring the data remains consistent.
   * @param {string | number} row. The id of the cell's row.
   */
  removeRow(row: string | number): void;
  /**
   * Resets the Table's state according to the configuration specified by the <strong>stateSettings</strong> property. This action clears stored information such as column configurations, expanded or collapsed rows, selected rows, applied filters, groupings, and sorting order. Only the aspects of state indicated by <strong>stateSettings</strong> will be reset, ensuring fine-grained control over which parts of the Table's state are cleared.
   */
  resetState(): void;
  /**
   * Persists the current state of the Table. This includes details such as column configurations, which rows are expanded or selected, any active filters, applied grouping, and the current column sort order. The specific aspects of the Table’s state that are saved depend on the options specified in the <strong>stateSettings</strong> property.
   * @returns {any}
   */
  saveState(): any;
  /**
   * Allows the selection of one or more rows from a dataset or table, enabling users to perform actions on multiple rows simultaneously.
   * @param {string | number | (string | number)[]} rowId. The id of the row (or an array of row ids) to select.
   */
  select(rowId: string | number | (string | number)[]): void;
  /**
   * Assigns a specified value to a particular cell within a data structure, such as a table or spreadsheet. This operation updates the cell’s current content with the new value provided.
   * @param {string | number} row. The id of the cell's row.
   * @param {string} dataField. The dataField of the cell's column.
   * @param {any} value. The new value of the cell.
   */
  setValue(row: string | number, dataField: string, value: any): void;
  /**
   * Sorts the Table by a column.
   * @param {string} columnDataField. Column field name.
   * @param {string} sortOrder?. Sort order. Possible values: 'asc' (ascending), 'desc' (descending), and null (removes sorting by column). If not provided, toggles the sorting.
   */
  sortBy(columnDataField: string, sortOrder?: string): void;
  /**
   * Sets a property for a database or data grid column, allowing customization of its behavior or appearance—such as its data type, visibility, default value, sorting behavior, or formatting options.
   * @param {string} columnDataField. Column field name.
   * @param {string} propertyName. Column property name.
   * @param {any} propertyValue. Property value.
   */
  setColumnProperty(columnDataField: string, propertyName: string, propertyValue: any): void;
  /**
   * Updates an existing table row with new data. This method requires two parameters: the unique identifier (row id) of the row to be updated, and a JSON object containing the updated key-value pairs for the row's data. Only the specified fields in the JSON object will be modified; all other fields will remain unchanged.
   * @param {string | number} rowId. The id of the row.
   * @param {any} data. JSON object with the new row's data. Example: {firstName: 'Peter', lastName: 'Fuller'}.
   */
  updateRow(rowId: string | number, data: any): void;
  /**
   * Deselects one or more previously selected rows in the dataset or table, removing their active or highlighted state.
   * @param {string | number | (string | number)[]} rowId. The id of the row (or an array of row ids) to unselect.
   */
  unselect(rowId: string | number | (string | number)[]): void;
}

export interface TableColumnGroup {
  /**
   * Sets or gets the column group's label that appears in the column header hierarchy.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets the column group's unique name that is referenced in the columnGroup field of columns (TableColumn).
   * Default value: ""
   */
  name?: string;
  /**
   * Sets or gets the name of the column group's parent group (also defined in columnGroups).
   * Default value: "null"
   */
  parentGroup?: string;
}

export interface TableColumn {
  /**
   * Sets or gets whether the column's cells can be edited.
   * Default value: true
   */
  allowEdit?: boolean;
  /**
   * Sets or gets whether the column can be filtered.
   * Default value: true
   */
  allowFilter?: boolean;
  /**
   * Sets or gets whether the table can be grouped by the column.
   * Default value: true
   */
  allowGroup?: boolean;
  /**
   * Sets or gets whether the column can be resized.
   * Default value: true
   */
  allowResize?: boolean;
  /**
   * Sets or gets whether the table can be sorted by the column.
   * Default value: true
   */
  allowSort?: boolean;
  /**
   * Sets or gets whether the column may have a column menu when the 'columnMenu' property of the Table is enabled.
   * Default value: true
   */
  allowMenu?: boolean;
  /**
   * Sets or gets whether the column may be hidden with the Table's column menu when the 'columnMenu' property of the Table is enabled.
   * Default value: true
   */
  allowHide?: boolean;
  /**
   * Sets or gets the column's column group. Has to correspond to the name field of a column group (TableColumnGroup).
   * Default value: "null"
   */
  columnGroup?: string;
  /**
   * Sets or gets the column's data source-bound field.
   * Default value: ""
   */
  dataField?: string;
  /**
   * Sets or gets the data type of the column's cells.
   * Default value: string
   */
  dataType?: TableColumnDataType | string;
  /**
   * An object setting up a custom editor. Available fields: template - a string to be parsed into HTML and be used as custom cell editor.onInit - a callback function called once when the editor is initialized.onRender - a callback function called each time a cell enters edit mode.getValue - a callback function called when editing is complete; used to return the editor's value to the Table's data source.
   * Default value: null
   */
  editor?: any;
  /**
   * Sets or gets whether the column is sticky/frozen. true and 'near' designate freezing on the left side, 'far' - on the right side.
   * Default value: null
   */
  freeze?: TableColumnFreeze | string;
  /**
   * A callback function that can be used to modify the contents of a cell and the cell itself.
   * Default value: null
   */
  formatFunction?: { (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: any }): void };
  /**
   * Sets or gets the text displayed in the column's header.
   * Default value: ""
   */
  label?: string;
  /**
   * Sets or gets the data field map, when the Table is bound to an Array and dataSourceSettings property is not set.
   * Default value: ""
   */
  map?: string;
  /**
   * Sets or gets the column's priority when resizing the browser window. The larger the priority value, the column will be hidden at a larger screen resolution. Columns with priority 1 are never hidden. The property should be set to a number in the range of 1 to 5. The property by default is not set.
   * Default value: null
   */
  responsivePriority?: number | null;
  /**
   * Use this for custom sort implementation only. All non-undefined array elements are sorted according to the return value of the compare function (all undefined elements are sorted to the end of the array, with no call to compareFunction).
   * Default value: null
   */
  sort?: { (firstRecord: any, secondRecord: any): number };
  /**
   * A string to be parsed into HTML and be used as custom cell content. Applicable only when virtualization is enabled.
   * Default value: "null"
   */
  templateElement?: string;
  /**
   * A callback function that can be used to apply settings to a template element (specified by the column templateElement property). Applicable only when virtualization is enabled.
   * Default value: null
   */
  templateElementSettings?: { (value: any, row: string | number, templateElement: HTMLElement): void };
  /**
   * A callback function that can be used to transform all the data of the column's original data field into a new data field to be used in column cells and all column operations. Can be useful for localizing data.
   * Default value: null
   */
  transform?: { (value: any): any };
  /**
   * A callback function that can be used to validate cell values after editing. If it returns true, the cell is valid. If it returns false or an object with a message field, the cell is not valid and the message (or a default one) is displayed in a tooltip.
   * Default value: null
   */
  validation?: { (value: any): boolean | { message: string } };
  /**
   * Sets or gets whether the column is hidden or not. Hidden columns allow data to be grouped by their corresponding dataField.
   * Default value: true
   */
  visible?: boolean;
  /**
   * Sets the width of the column. The width can be entered as a number or string with px.
   * Default value: null
   */
  width?: string | number;
  /**
   * Sets the minimum width of the column. The width can be entered as a number.
   * Default value: null
   */
  minWidth?: number;
}

export interface TableConditionalFormatting {
  /**
   * The data field of a numeric column to format. Set 'all' to format all numeric columns.
   * Default value: "all"
   */
  column?: string;
  /**
   * The formatting condition.
   * Default value: lessThan
   */
  condition?: TableConditionalFormattingCondition | string;
  /**
   * The value to compare by. When condition is 'between', this is the start (from) value.
   * Default value: 0
   */
  firstValue?: number;
  /**
   * The fontFamily to apply to formatted cells.
   * Default value: The default fontFamily as set in CSS
   */
  fontFamily?: TableConditionalFormattingFontFamily | string;
  /**
   * The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.
   * Default value: 14px
   */
  fontSize?: TableConditionalFormattingFontSize | string;
  /**
   * The background color to apply to formatted cells.
   * Default value: "The default backgroundColor as set in CSS"
   */
  highlight?: string;
  /**
   * When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
   * Default value: 1
   */
  secondValue?: number;
  /**
   * The text color to apply to formatted cells.
   * Default value: "The default color as set in CSS"
   */
  text?: string;
}

/**Configures the grid's data source settings when the <code>dataSource</code> property is assigned either a local data array or a remote URL. This allows the grid to properly retrieve, bind, and display data from the specified source, whether it is provided directly as an array or fetched asynchronously from a web endpoint. */
export interface TableDataSourceSettings {
  /**
   * Sets or gets whether a column will be auto-generated.
   * Default value: false
   */
  autoGenerateColumns?: boolean;
  /**
   * Sets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.
   * Default value: ""
   */
  childrenDataField?: string;
  /**
   * Sets or gets the XML binding root.
   * Default value: ""
   */
  root?: string;
  /**
   * Sets or gets the Table values espace mode. This property specifies how html tags will be espaced by the table. The default 'blackList' value includes the most commonly used tags for espace such as 'script'. The 'all' value espaces all tags, whereas 'none' does not escape any tags.
   * Default value: blackList
   */
  sanitizeHTML?: TableDataSourceSettingsSanitizeHTML | string;
  /**
   * Determines whether cell values will display the espaced values as text or html.
   * Default value: text
   */
  sanitizeHTMLRender?: TableDataSourceSettingsSanitizeHTMLRender | string;
  /**
   * Sets or gets the XML binding record.
   * Default value: ""
   */
  record?: string;
  /**
   * Sets or gets the data fields to group by.
   * Default value: []
   */
  groupBy?: string[];
  /**
   * Sets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string']
   * Default value: null
   */
  dataFields?: TableDataSourceSettingsDataField[];
  /**
   * Sets or gets whether the data source type.
   * Default value: array
   */
  dataSourceType?: TableDataSourceSettingsDataSourceType | string;
  /**
   * Sets or gets the dataAdapter's id
   * Default value: ""
   */
  id?: string;
  /**
   * Sets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
   * Default value: ""
   */
  keyDataField?: string;
  /**
   * Sets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
   * Default value: ""
   */
  parentDataField?: string;
  /**
   * Sets the 'mapChar' data field of the record
   * Default value: "."
   */
  mapChar?: string;
  /**
   * Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.
   * Default value: null
   */
  virtualDataSource?: any;
  /**
   * Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too
   * Default value: null
   */
  virtualDataSourceOnExpand?: any;
}

export interface TableDataSourceSettingsDataField {
  /**
   * Sets the dataField name.
   * Default value: ""
   */
  name?: string;
  /**
   * Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
   * Default value: ""
   */
  map?: string;
  /**
   * Sets the dataField type.
   * Default value: string
   */
  dataType?: TableDataSourceSettingsDataFieldDataType | string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-table"): Table;
        querySelector(selectors: "smart-table"): Table | null;
        querySelectorAll(selectors: "smart-table"): NodeListOf<Table>;
        getElementsByTagName(qualifiedName: "smart-table"): HTMLCollectionOf<Table>;
        getElementsByName(elementName: "smart-table"): NodeListOf<Table>;
    }
}

/**Sets or gets the data type of the column's cells. */
export declare type TableColumnDataType = 'boolean' | 'date' | 'number' | 'string' | 'any';
/**Sets or gets whether the column is sticky/frozen. true and 'near' designate freezing on the left side, 'far' - on the right side. */
export declare type TableColumnFreeze = 'true' | 'near' | 'far';
/**The formatting condition. */
export declare type TableConditionalFormattingCondition = 'between' | 'equal' | 'greaterThan' | 'lessThan' | 'notEqual';
/**The fontFamily to apply to formatted cells. */
export declare type TableConditionalFormattingFontFamily = 'The default fontFamily as set in CSS' | 'Arial' | 'Courier New' | 'Georgia' | 'Times New Roman' | 'Verdana';
/**The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default. */
export declare type TableConditionalFormattingFontSize = '8px' | '9px' | '10px' | '11px' | '12px' | '13px' | '14px' | '15px' | '16px';
/**<br/><br/>---<br/><br/>Determines how the table columns are sized, supporting two distinct modes:<br/><br/>- ''auto' Mode:'  <br/>  Columns are automatically sized based on their content and the specified columnMinWidth value. If the table does not have enough horizontal space to display all content, excess text is truncated with ellipses. Manually specified static column widths (set by the user) will still be honored in this mode.<br/><br/>- ''default' Mode:'  <br/>  Columns follow the standard HTML table's <code>table-layout: fixed</code> behavior. In this mode, column widths do not adapt to content; instead, each column's width is determined either by a fixed value (set via the column’s width property) or distributed evenly if no width is specified.<br/><br/>Use this property to control whether column widths are calculated automatically based on content or determined by fixed sizing rules. */
export declare type TableColumnSizeMode = 'auto' | 'default';
/**Sets or gets the Table values espace mode. This property specifies how html tags will be espaced by the table. The default 'blackList' value includes the most commonly used tags for espace such as 'script'. The 'all' value espaces all tags, whereas 'none' does not escape any tags. */
export declare type TableDataSourceSettingsSanitizeHTML = 'all' | 'blackList' | 'none';
/**Determines whether cell values will display the espaced values as text or html. */
export declare type TableDataSourceSettingsSanitizeHTMLRender = 'text' | 'html';
/**Sets the dataField type. */
export declare type TableDataSourceSettingsDataFieldDataType = 'string' | 'date' | 'boolean' | 'number' | 'array' | 'any';
/**Sets or gets whether the data source type. */
export declare type TableDataSourceSettingsDataSourceType = 'array' | 'json' | 'xml' | 'csv' | 'tsv';
/**Enables or retrieves the current state of edit mode, determining whether the component is in an editable state. When set to true, users can modify the content; when set to false, the component is read-only. */
export declare type TableEditMode = 'cell' | 'row';
/**Defines how the column settings are handled during loading, whether automatically with autoLoadState or manually with loadState. This option is relevant only if the stateSettings array includes 'columns', ensuring that column-specific state (such as order, visibility, or width) is properly managed during the state load process. */
export declare type TableLoadColumnStateBehavior = 'implementationOnly' | 'intersection' | 'stateOnly';
/**Defines or retrieves the current selection mode for the component. This property is only applicable when selection functionality is enabled. Use it to specify how users can select items (e.g., single, multiple, or none). */
export declare type TableSelectionMode = 'one' | 'many' | 'extended';
/**Specifies the sorting behavior applied to the table, such as ascending, descending, or custom order. This setting controls how table data is organized and displayed to the user. */
export declare type TableSortMode = 'none' | 'one' | 'many';
export interface TabsProperties {
  /**
   * Determines whether the "Add new tab" button (typically represented by a plus sign "+") is visible in the user interface. When set to true, the button is displayed, allowing users to add new tabs; when set to false, the button is hidden. This property can be used to both retrieve the current visibility status or control the display of the button.
   * Default value: false
   */
  addNewTab?: boolean;
  /**
   * Enables toggle functionality for tab selection. When set to true, the selectedIndex property can be assigned a value of null, indicating that no tab is currently selected. This allows users to deselect any active tab, leaving the tab interface with no selected tab.
   * Default value: false
   */
  allowToggle?: boolean;
  /**
   * Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in immediate transitions without animation effects. Use other valid values to enable or customize animation behavior as needed.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Configures or retrieves the display mode of the close button. This property determines how the close button appears or behaves within the user interface, such as being always visible, visible on hover, or hidden.
   * Default value: default
   */
  closeButtonMode?: TabsCloseButtonMode | string;
  /**
   * Controls whether close buttons are shown in the user interface. Setting this property to true will display close buttons; setting it to false will hide them. You can also retrieve the current state to determine if close buttons are visible.
   * Default value: false
   */
  closeButtons?: boolean;
  /**
   * Determines whether the content section of the Tabs component is expanded or collapsed. When set to 'true', the content section is hidden (collapsed); when set to 'false', the content is visible (expanded). This property can be used to programmatically control or retrieve the collapsed state of the Tabs content.
   * Default value: false
   */
  collapsed?: boolean;
  /**
   * Controls whether the collapsible functionality is active, allowing content sections to expand or collapse when enabled. When disabled, all content sections remain fully expanded and cannot be collapsed.
   * Default value: false
   */
  collapsible?: boolean;
  /**
   * Specifies the data source from which the content for each tab will be retrieved and displayed. This property defines what data will populate the individual tabs when the Tabs component is rendered.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and typically appears visually muted to indicate its inactive state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Allows users to scroll horizontally through tab labels in the tab strip using the mouse wheel when the tabs exceed the visible area (i.e., when the tab strip overflows). Enabling this option lets users navigate through hidden tabs by scrolling, while disabling it prevents mouse wheel scrolling in the tab strip.
   * Default value: false
   */
  enableMouseWheelAction?: boolean;
  /**
   * Sets or retrieves the 'unlockKey' value, a unique key or code required to unlock and gain access to the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current locale setting, which determines language and regional formatting. This property works together with the messages property to display localized content or translations based on the selected locale.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically invoked during processes such as language selection, text translation, or locale updates to handle localization-specific behavior.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Sets or retrieves an object containing key-value pairs of strings used throughout the widget’s interface. These strings can be customized for different languages, enabling localization of the widget’s text content. This property is typically used alongside the locale property to display the widget’s labels, messages, and prompts in the selected language.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "ambiguousIndexes": "jqx-tabs: Initially set jqx-tab-item indexes are ambiguous and are ignored in favour of the HTML structure.",
   *     "detailsObjectRequired": "jqx-tabs: The method \"insert\" requires a details Object to be passed as a second argument.",
   *     "invalidIndex": "jqx-tabs: '' method accepts an index of type number.",
   *     "referenceNodeNotChild": "jqx-tabs: Passed  is not part of this jqx-tabs element.",
   *     "tabItemRequired": "jqx-tabs: The method '' requires a \"jqx-tab-item\" element to be passed as an argument."
   *   }
   * }
   */
  messages?: any;
  /**
   * Gets the current name of the widget, or assigns a new name to the widget when provided a value. The name uniquely identifies the widget instance within the application.
   * Default value: """"
   */
  name?: string;
  /**
   * Specifies or retrieves the behavior of the scroll buttons for the Tabs component. This property is relevant only when the tabLayout is set to 'scroll', allowing navigation through tab items that exceed the visible area. Use this option to control how scroll buttons appear and function when there are more tabs than can be displayed at once.
   * Default value: auto
   */
  overflow?: Overflow | string;
  /**
   * Prevents all user interactions with the element, making it unresponsive to mouse, keyboard, and touch events such as clicking, dragging, or typing. This means the element cannot be activated, focused, or interacted with in any way by the user.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Controls whether the tab reordering feature is enabled or disabled. When enabled, users can rearrange the tabs by dragging a tab and dropping it onto a new position within the tab list. This allows for dynamic reordering of tabs based on the user's preference. When disabled, tabs remain in their original order and cannot be moved by the user.
   * Default value: false
   */
  reorder?: boolean;
  /**
   * Determines whether users can resize tab labels by clicking and dragging them with the mouse. When enabled, this allows tab labels to be adjusted interactively by the user. When disabled, tab label sizes remain fixed and cannot be changed through mouse actions. This setting can be used to either retrieve the current resizability state or update it.
   * Default value: false
   */
  resize?: boolean;
  /**
   * Gets or sets a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, ensuring proper display and support for languages and locales that read from right to left, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Configures or retrieves the position of the scroll buttons within the component, allowing you to specify where the scroll controls appear (for example, at the start, end, or both ends of the scrollable area). This property enables precise placement of navigation controls for improved user experience.
   * Default value: both
   */
  scrollButtonsPosition?: LayoutPosition | string;
  /**
   * Specifies or retrieves how the tab strip responds when users interact with the scroll buttons. Determines the scrolling behavior—such as the distance the tab strip moves or whether scrolling is smooth or immediate—when the left or right scroll buttons are clicked.
   * Default value: paging
   */
  scrollMode?: TabsScrollMode | string;
  /**
   * Gets the index or identifier of the currently selected tab, or allows you to specify which tab should be selected.
   * Default value: null
   */
  selectedIndex?: number | null;
  /**
   * Specifies how users can navigate or switch between different tabs, such as by clicking, keyboard shortcuts, or swipe gestures. This setting defines the interaction method for moving from one tab to another within the tabbed interface.
   * Default value: click
   */
  selectionMode?: TabSelectionMode | string;
  /**
   * Determines how the component handles situations where the element’s width is insufficient to display all tab labels. Offers four configurable behaviors for managing tab overflow, such as scrolling, collapsing, fading, or displaying an overflow menu.
   * Default value: scroll
   */
  tabLayout?: TabsTabLayout | string;
  /**
   * Specifies or retrieves the position of the tab strip within the user interface, determining where the tab strip is displayed (e.g., top, bottom, left, or right) relative to the main content area.
   * Default value: top
   */
  tabPosition?: TabPosition | string;
  /**
   * Specifies or retrieves the direction in which the text is displayed within the tabs, such as horizontal or vertical orientation. This property allows you to control whether tab labels are arranged from left to right, top to bottom, or in another supported direction.
   * Default value: horizontal
   */
  tabTextOrientation?: Orientation | string;
  /**
   * Specifies the theme to be applied, which controls the visual style, color scheme, and overall appearance of the element. The selected theme determines how the element is displayed to users.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to interact with it using tab navigation or other focus-related actions.
   * Default value: false
   */
  unfocusable?: boolean;
}
/**
 Tabs organize content across different screens, data sets, and other interactions. Tabs can be paired with components like top app bars. Tabs can be displayed horizontally or vertically.
*/
export interface Tabs extends BaseElement, TabsProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when the addNewTab feature is enabled and the corresponding button or interface element is clicked by the user.
	* @param event. The custom event.    */
  onAddNewTabClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the user selects a different tab, indicating that the active tab has changed. It allows you to respond to tab selection changes, such as updating content or executing specific logic based on the newly selected tab.
	* @param event. The custom event. Custom data event was created with: ev.detail(index, oldIndex)
   *  index - The tab's index.
   *  oldIndex - The tab's old index.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a user closes a browser tab. It allows you to execute custom actions or clean up resources associated with that tab right before it is removed from the browser. The event provides details about the closed tab, such as its identifier and any relevant data, enabling you to manage your application's state accordingly.
	* @param event. The custom event. Custom data event was created with: ev.detail(index)
   *  index - The tab's index.
   */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is dispatched immediately before a tab is closed, giving you an opportunity to intercept the closure. By calling event.preventDefault() within the event handler, you can cancel the default close action and prevent the tab from closing. This allows you to perform actions such as prompting the user to save changes or confirming the close operation before proceeding.
	* @param event. The custom event. Custom data event was created with: ev.detail(index)
   *  index - The tab's index.
   */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user completes a drag operation, signaling that the dragged element has been released and the drag sequence has finished. It allows you to perform cleanup actions, update UI elements, or handle any final logic after dragging is concluded.
	* @param event. The custom event. Custom data event was created with: ev.detail(left, top, index, label)
   *  left - The tab's left position.
   *  top - The tab's top position.
   *  index - The tab's index.
   *  label - The tab's label.
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired when a user initiates a drag operation, typically by clicking and beginning to move a draggable element. It marks the beginning of the drag-and-drop sequence, allowing you to set up any necessary data or visual feedback for the dragged item.
	* @param event. The custom event. Custom data event was created with: ev.detail(left, top, index, label)
   *  left - The tab's left position.
   *  top - The tab's top position.
   *  index - The tab's index.
   *  label - The tab's label.
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the order of tabs within a tab group changes, such as when a user drags and drops a tab to a new position. It allows you to respond to tab reordering actions, enabling features like updating your application's state or saving the new tab arrangement.
	* @param event. The custom event. Custom data event was created with: ev.detail(index, oldIndex)
   *  index - The tab's index.
   *  oldIndex - The tab's old index.
   */
  onReorder?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Expands or collapses the content section, allowing users to toggle the visibility of its contents for improved usability and a cleaner interface.
   */
  collapse(): void;
  /**
   * Retrieves the label (displayed title) of the Tab located at the specified index within the Tab collection. The index parameter is zero-based, meaning 0 refers to the first Tab.
   * @param {number} index. The index of the tab.
   * @returns {string}
   */
  getTabLabel(index: number): string;
  /**
   * Retrieves and returns the content associated with the Tab located at the specified index within the Tab component. This allows access to the data or elements currently displayed in the selected Tab.
   * @param {number} index. The index of the tab.
   * @returns {HTMLElement}
   */
  getTabContent(index: number): HTMLElement;
  /**
   * Ensures the specified tab is brought into view within its container by automatically scrolling the container so that the entire tab is visible to the user.
   * @param {number} index. The index of the tab to scroll to.
   */
  ensureVisible(index: number): void;
  /**
   * Expands the content section to reveal additional information or elements that are initially hidden, providing users with more detailed content or options within this area.
   */
  expand(): void;
  /**
   * Returns an array containing all TabItem objects that are child elements of the specified element. Each TabItem in the array represents a tab within the tabbed interface, allowing you to programmatically access and manipulate individual tabs.
   * @returns {any}
   */
  getTabs(): any;
  /**
   * Returns the distance, in pixels, between the edge of the tab item container (the smart-tab-item element) and the corresponding edge of the parent smart-tabs element where the tab strip is located. This offset indicates how far the tab item container is positioned from the start of the tab strip within the tabs component, allowing for precise alignment and positioning calculations.
   * @param {number} index. The index of the tab item.
   * @returns {number}
   */
  getOffsetFromEdgeOfElement(index: number): number;
  /**
   * Adds a new tab to the tab navigation interface and creates a corresponding content section. The new tab becomes selectable, allowing users to view and interact with its associated content when it is active.
   * @param {number} index. The index to insert a new tab at.
   * @param {any} details. An Object with the fields "label", "labelSize", "content" and "group".
   */
  insert(index: number, details: any): void;
  /**
   * Refreshes the Tabs header section to ensure it displays correctly. This is particularly useful when the header contains elements—such as images or dynamic content—that may load after the initial rendering of the Tabs. By calling this function, you can re-render or update the header layout to accommodate any late-loaded or dynamically updated elements, ensuring alignment and visual consistency.
   */
  refreshTabHeader(): void;
  /**
   * Removes the specified tab along with its corresponding content section from the user interface, ensuring that both the tab header and its related content are deleted and no longer accessible to the user.
   * @param {number} index. The index of the tab to remove.
   */
  removeAt(index: number): void;
  /**
   * Programmatically activates the specified tab in a tabbed interface, making its associated content visible while hiding content from other tabs.
   * @param {number} index. The index of the tab to select.
   */
  select(index: number): void;
  /**
   * Updates a specific tab along with its corresponding content section, ensuring that both the tab interface and its related content are synchronized and reflect the latest changes.
   * @param {number} index. The index of the tab to update.
   * @param {string} label. The new label of the tab. The value can be the id of an HTMLTemplateElement
   * @param {string | HTMLElement} content. The new content of the tab.
   */
  update(index: number, label: string, content: string | HTMLElement): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tabs"): Tabs;
        querySelector(selectors: "smart-tabs"): Tabs | null;
        querySelectorAll(selectors: "smart-tabs"): NodeListOf<Tabs>;
        getElementsByTagName(qualifiedName: "smart-tabs"): HTMLCollectionOf<Tabs>;
        getElementsByName(elementName: "smart-tabs"): NodeListOf<Tabs>;
    }
}

/**Configures or retrieves the display mode of the close button. This property determines how the close button appears or behaves within the user interface, such as being always visible, visible on hover, or hidden. */
export declare type TabsCloseButtonMode = 'default' | 'selected';
/**Specifies or retrieves how the tab strip responds when users interact with the scroll buttons. Determines the scrolling behavior—such as the distance the tab strip moves or whether scrolling is smooth or immediate—when the left or right scroll buttons are clicked. */
export declare type TabsScrollMode = 'paging' | 'continuous';
/**Specifies how users can navigate or switch between different tabs, such as by clicking, keyboard shortcuts, or swipe gestures. This setting defines the interaction method for moving from one tab to another within the tabbed interface. */
export declare type TabSelectionMode = 'click' | 'dblclick' | 'mouseenter' | 'none';
/**Determines how the component handles situations where the element’s width is insufficient to display all tab labels. Offers four configurable behaviors for managing tab overflow, such as scrolling, collapsing, fading, or displaying an overflow menu. */
export declare type TabsTabLayout = 'scroll' | 'dropDown' | 'wrap' | 'shrink';
/**Specifies or retrieves the position of the tab strip within the user interface, determining where the tab strip is displayed (e.g., top, bottom, left, or right) relative to the main content area. */
export declare type TabPosition = 'top' | 'bottom' | 'left' | 'right' | 'hidden';
export interface TankProperties {
  /**
   * Controls the animation mode by setting or retrieving its current state. When set to 'none', all animations are disabled and transitions will not occur. Use this property to enable, disable, or modify animation behavior according to your application's requirements.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * When set to true, all values will be automatically adjusted (coerced) to fit within the range specified by the interval property. This ensures that any value outside the defined interval is converted to the nearest valid value within that range.
   * Default value: false
   */
  coerce?: boolean;
  /**
   * Controls whether custom tick marks, which may be spaced at uneven intervals, are displayed on the axis. The specific positions of these ticks are specified using the customTicks property. This option can be used to enable or disable the rendering of these custom-defined ticks.
   * Default value: false
   */
  customInterval?: boolean;
  /**
   * If customInterval is enabled, this option provides a specific list of tick values to display on the plot's axis, overriding any automatically calculated intervals. When coerce is set to true, user inputs or plotted values will automatically adjust (or "snap") to the nearest tick in this list, ensuring all values align precisely with one of the specified ticks.
   * Default value: 0,50,100
   */
  customTicks?: number[];
  /**
   * Specifies or retrieves the pattern used to format labels when the mode property is set to 'date'. This pattern determines how date labels are displayed to the user (for example, "MM/DD/YYYY" or "dd MMM, yyyy").
   * Default value: "d"
   */
  dateLabelFormatString?: string;
  /**
   * Specifies or retrieves the character used as the decimal separator in numeric values. This determines how decimal points are displayed when formatting or parsing numbers (e.g., use "." for 12.34 or "," for 12,34, depending on locale or formatting requirements).
   * Default value: "".""
   */
  decimalSeparator?: string;
  /**
   * Determines whether the widget is active and visible to users. When enabled, the widget functions normally and is displayed in the user interface; when disabled, the widget is hidden or inactive, preventing user interaction.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * When the 'coerce' property is set to 'true', any input values that fall outside the specified interval will be automatically adjusted ("coerced") to the nearest boundary value of the interval. This ensures that all resulting values strictly adhere to the defined range, preventing any out-of-bounds input.
   * Default value: 1
   */
  interval?: string | number;
  /**
   * Defines the orientation of the tank. When set to true, the positions of the tank's front and rear are swapped, effectively reversing its direction.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * A user-defined callback function that formats the values shown on the tank labels before they are displayed. This function receives the raw value as an argument and should return the formatted string to be rendered on the label, allowing for custom display logic such as unit conversion, number formatting, or localization.
   * Default value: null
   */
  labelFormatFunction?: any;
  /**
   * Controls the visibility of the widget's label. When set, this property determines whether the label is displayed or hidden. When retrieved, it indicates the current visibility state of the label.
   * Default value: all
   */
  labelsVisibility?: LabelsVisibility | string;
  /**
   * Retrieves or assigns the unlockKey property, which serves as a security token or code required to activate and access the product's full functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the current locale for the application. This property determines language and regional formatting, and works together with the messages property to provide appropriate translations and locale-specific content. Use this property to get or set the active locale for displaying messages and other localized resources.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module. This callback is triggered during localization operations, such as language selection, translation processing, or locale updates, to handle custom logic or respond to localization events within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Determines whether the widget displays data using a logarithmic scale. When enabled, values are plotted on a logarithmic scale instead of a linear scale, which can help visualize data with a wide range of values. When disabled, the widget uses a standard linear scale.
   * Default value: false
   */
  logarithmicScale?: boolean;
  /**
   * Gets or sets the maximum allowable value for the widget, defining the upper limit that users can select or enter.
   * Default value: 100
   */
  max?: string | number;
  /**
   * Defines or retrieves the specific type of mechanical action being applied. This property allows you to specify what kind of mechanical action to use (such as momentary, toggle, or latching), or to query the current mechanical action configuration.
   * Default value: switchWhileDragging
   */
  mechanicalAction?: DragMechanicalAction | string;
  /**
   * Defines or retrieves an object containing the localizable text strings used throughout the widget interface. This property allows you to customize the widget’s displayed messages for different languages and regions. It is typically used together with the locale property to support internationalization and provide translations based on the user’s locale settings.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "significantPrecisionDigits": ": the properties significantDigits and precisionDigits cannot be set at the same time.",
   *     "invalidMinOrMax": " value. Max cannot be lower than Min.",
   *     "noInteger": ": precisionDigits could be set only on \"floatingPoint\" scaleType."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines or retrieves the minimum allowable value for the widget. When setting this property, it restricts user input so that values below the specified minimum are not permitted. When getting this property, it returns the current minimum value constraint of the widget.
   * Default value: 0
   */
  min?: string | number;
  /**
   * Determines whether the widget processes and displays numeric values or date values. This property can be set to configure the expected data type (numbers or dates), and can also be accessed to check the current mode of the widget.
   * Default value: numeric
   */
  mode?: ScaleMode | string;
  /**
   * Defines or retrieves the element's name attribute. This name uniquely identifies the element within a form and is used as the key when the form data is submitted to the server, allowing the associated value to be referenced and processed.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another supported orientation.
   * Default value: vertical
   */
  orientation?: Orientation | string;
  /**
   * Specifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when scaleType is set to 'integer'.
   * Default value: null
   */
  precisionDigits?: number;
  /**
   * If the widget is set to read-only, users will not be able to interact with or modify the element's content. Any input or actions from users will be disabled, ensuring that the widget's state remains unchanged.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that specifies whether the element’s content is aligned to accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s alignment and text direction are adjusted for proper display in RTL locales.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the placement of the widget’s scales relative to its main content, determining where the scale markers or labels appear within the widget interface (e.g., top, bottom, left, or right).
   * Default value: near
   */
  scalePosition?: ScalePosition | string;
  /**
   * Specifies the measurement system used for the tank's scale, such as linear, logarithmic, or custom, which determines how values are displayed and interpreted on the tank's indicator.
   * Default value: floatingPoint
   */
  scaleType?: ScaleType | string;
  /**
   * Determines whether numerical values are displayed using scientific notation (e.g., 1.23e+6 instead of 1230000). Set to true to enable scientific notation, or false to display numbers in standard decimal format.
   * Default value: false
   */
  scientificNotation?: boolean;
  /**
   * Controls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed alongside the slider's handle, providing users with a visual indicator of the current value. When disabled, the thumb label will not appear.
   * Default value: false
   */
  showThumbLabel?: boolean;
  /**
   * Controls whether the tooltip is visible to the user. When enabled, the tooltip will be displayed; when disabled, the tooltip will be hidden.
   * Default value: false
   */
  showTooltip?: boolean;
  /**
   * Controls whether unit labels (such as "kg", "cm", "°C") are shown alongside values. Set to true to display units next to values, or false to hide them.
   * Default value: false
   */
  showUnit?: boolean;
  /**
   * Calculates the number of significant digits present in a given number. This process is only relevant and performed when the scaleType property is set to 'integer'. This property should be used to ensure numerical data integrity and appropriate formatting for integer-based values.
   * Default value: 0
   */
  significantDigits?: number;
  /**
   * Sets or retrieves the visual theme applied to the element, determining its overall appearance such as color scheme, typography, and style variants. This property allows dynamic customization of the element’s look to match different design requirements or user preferences.
   * Default value: ""
   */
  theme?: string;
  /**
   * Sets or retrieves the current position of the thumb label, typically representing the value indicator on a slider or range input. This property allows you to programmatically control or access the exact location of the label relative to the slider track.
   * Default value: near
   */
  thumbLabelPosition?: Position | string;
  /**
   * Defines or retrieves the placement of the tick marks in the jqxTank widget, specifying where the ticks are displayed relative to the tank (e.g., near, far, or both sides). This property allows you to control the visual positioning of the tick indicators along the scale of the jqxTank widget.
   * Default value: scale
   */
  ticksPosition?: TicksPosition | string;
  /**
   * Controls whether the ticks are visible or hidden. This property allows you to enable (show) or disable (hide) the display of tick marks on the relevant component. When set, it determines if ticks are rendered; when accessed, it returns the current visibility state of the ticks.
   * Default value: minor
   */
  ticksVisibility?: TicksVisibility | string;
  /**
   * Specifies or retrieves the position of the tooltip displayed on the jqxTank widget. This property determines where the tooltip appears relative to the tank control (e.g., top, bottom, left, or right). Use this option to customize the tooltip's placement for improved user experience and interface alignment.
   * Default value: near
   */
  tooltipPosition?: Position | string;
  /**
   * Determines whether the element is focusable by setting or retrieving its ability to receive keyboard or mouse focus. If set to true, the element can be targeted by user interactions such as tab navigation or clicking.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies or retrieves the unit label displayed on the jqxTank widget, indicating the measurement unit (e.g., "°C", "kg", "psi") associated with the tank's value. This property allows you to customize the text that appears alongside the value in the widget for better context and readability.
   * Default value: "kg"
   */
  unit?: string;
  /**
   * Enhances value validation using minimum and maximum boundaries.  - When set to 'strict', all values—whether changed by user interaction or programmatically—are always constrained within the defined min and max limits. Any attempt to set a value outside this range will automatically adjust (coerce) it to the closest valid boundary.- When set to 'interaction', only values changed by user interaction (such as form input) are validated against min and max. Programmatic updates can set values outside this range, and if the min or max properties are later adjusted such that the current value falls out of bounds, the existing value remains unchanged and is not coerced. In these cases, no change event is triggered.
   * Default value: strict
   */
  validation?: Validation | string;
  /**
   * Gets the current value of the jqxTank widget or sets it to a specified value. This property or method enables you to retrieve the widget's current position (value) or assign a new value programmatically, allowing for dynamic interaction and control over the jqxTank component.
   * Default value: 0
   */
  value?: any;
  /**
   * Specifies or retrieves the word length used for numeric representation. This property is relevant only when the scaleType is set to 'integer'. In such cases, it determines the number of bits allocated for each integer value. For other scaleType values, this setting has no effect.
   * Default value: int32
   */
  wordLength?: WordLength | string;
}
/**
 Tank is a UI Component used in Engineering and Scientific applications. It is broadly used to display the fluid levels.
*/
export interface Tank extends BaseElement, TankProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the tank’s value is updated, whether through user interaction or programmatic changes. It allows listeners to respond immediately to any modification in the tank’s current state.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Locks the keyboard and mouse input exclusively on the tank component, ensuring that all user interactions are directed to the tank (such as movement and firing controls) while disabling interactions with other interface elements.
   */
  focus(): void;
  /**
   * Retrieves the recommended dimensions (width and height) for the widget based on its content and layout constraints, ensuring optimal display and usability.
   * @returns {any}
   */
  getOptimalSize(): any;
  /**
   * Retrieves or updates the current value stored in the tank. Use this property to access the tank’s value (such as its level, volume, or contents) or to assign a new value to it.
   * @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the tank. 
   * @returns {string}
   */
  val(value?: string | number): string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tank"): Tank;
        querySelector(selectors: "smart-tank"): Tank | null;
        querySelectorAll(selectors: "smart-tank"): NodeListOf<Tank>;
        getElementsByTagName(qualifiedName: "smart-tank"): HTMLCollectionOf<Tank>;
        getElementsByName(elementName: "smart-tank"): NodeListOf<Tank>;
    }
}

export interface TextAreaProperties {
  /**
   * Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions with no visual effects. Otherwise, the property determines the type or style of animation used for transitions or dynamic effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching results after the user initiates the autocomplete operation. This delay helps control how quickly the matches appear, improving user experience and performance when fetching or filtering suggestions.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Specifies the source of data to be loaded into the Input component. The dataSource can accept the following formats:- An array of strings or numbers, where each value will be used as a list item.- An array of objects, where each object represents a list item with specific properties such as label (display text) and value (underlying value).- A callback function that returns an array of items in one of the formats described above.This flexibility allows you to provide simple lists or more complex data structures for Input population, as well as load data asynchronously or dynamically when needed.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is interactive or inactive. When enabled, users can interact with the element (e.g., click, type, or select). When disabled, the element is visible but does not respond to user interactions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This property controls where the dropdown button appears within the interface.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown's height.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown’s width will be determined by the associated CSS variable (typically via a custom property such as --dropdown-width). To override the default behavior, you can explicitly set a specific width (e.g., "200px", "100%", etc.), which will be applied directly to the dropdown. If left as an empty string, the component remains responsive to changes in the relevant CSS variable.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Defines the expected type of data for this input field and specifies whether, and to what extent, the browser or user agent is allowed to offer autofill assistance. This attribute aligns with the standard HTML autocomplete attribute, providing guidance to browsers for streamlining data entry and enhancing user experience. Acceptable values indicate the type of information anticipated, such as 'on' (enable autocomplete), 'off' (disable autocomplete), 'name' (full name), 'organization' (company or organization name), 'street-address' (street address), among others. Proper use of this attribute ensures accurate and secure autofill behavior in web forms.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the maximum number of items that can be displayed in the dropdown list when a new autoComplete query is performed. This setting controls how many matched results are visible to the user at one time within the dropdown. By default, up to 8 matching items will be shown in the dropdown menu.
   * Default value: 8
   */
  items?: number;
  /**
   * Defines the 'unlockKey' property, which is used to retrieve or assign the unique key required to unlock access to the product. This property can be read to obtain the current unlock key or set to specify a new key for unlocking the product.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language code, typically following ISO 639-1 standards (e.g., "en" for English, "fr" for French). This property is used alongside the messages property to determine which set of localized messages should be displayed or accessed based on the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom format for messages returned by the Localization Module. Use this function to modify or enhance the appearance, structure, or content of localized messages before they are delivered to the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing text strings used within the widget that support localization. This property enables you to customize the widget’s displayed text for different languages or regions. It is typically used together with the locale property to provide translations and localize the widget’s interface.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies the minimum number of characters a user must type into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
   * Default value: 1
   */
  minLength?: number;
  /**
   * Gets or sets the 'name' attribute of the element. The 'name' attribute assigns an identifier to the element, which is used when submitting form data. When a form is submitted, the value of each input element with a 'name' attribute is included in the form data, using the 'name' as the key. This allows server-side scripts to reference the data by name.
   * Default value: ""
   */
  name?: string;
  /**
   * Specifies whether the dropdown menu is currently visible (open) or hidden (closed).
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field when it is empty, providing a hint or example to guide the user on what to enter.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies or retrieves the search query used to filter items within the data source. This query determines which items are displayed during the autoComplete operation. If the query is an empty string, the filter is not applied, and all items from the data source will be shown.
   * Default value: 
   */
  query?: string | number;
  /**
   * Specifies the autocomplete query mode, which defines how user input is matched to suggestions. This property controls the underlying matching algorithm—such as prefix, infix, or fuzzy matching—used to generate autocomplete results, thereby influencing the relevance and style of suggestions presented to the user.
   * Default value: containsIgnoreCase
   */
  queryMode?: TextAreaQueryMode | string;
  /**
   * Specifies whether the user can enter text into the input field. When the dropDownButtonPosition property is set to 'left' or 'right', the readonly property controls the component’s behavior—if a dataSource is provided:- When readonly is false, the input functions as a ComboBox, allowing users to both type custom values and select from the dropdown list.- When readonly is true, the input behaves as a DropDownList, restricting users to select only from the available options in the dropdown and preventing any text input.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies whether the user is allowed to manually resize the Textarea component, enabling or disabling drag-to-resize functionality in the interface.
   * Default value: none
   */
  resize?: TextAreaResize | string;
  /**
   * Sets or retrieves a value that determines whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this property ensures that text direction and layout are suitable for locales that use right-to-left scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Allows you to toggle rich text formatting on or off, enabling users to apply styles such as bold, italics, lists, and other text enhancements when enabled, or restricting input to plain text when disabled.
   * Default value: false
   */
  richText?: boolean;
  /**
   * Specifies whether the items are arranged in alphabetical order. When set to true, the items will be automatically sorted from A to Z based on their names or labels; when set to false, the items will retain their original order as provided.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Specifies the sorting order to be applied when the sort option is enabled. Accepts either ascending (asc) to sort items from lowest to highest, or descending (desc) to sort items from highest to lowest.
   * Default value: "asc"
   */
  sortDirection?: string;
  /**
   * Specifies the visual theme applied to the element. The selected theme controls the appearance, including colors, fonts, and overall styling, ensuring a consistent look and feel across the element's user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type helps control the kind of information users can enter, enables appropriate on-screen keyboards on mobile devices, and allows browsers to provide built-in validation for certain data formats.
   * Default value: ""
   */
  type?: string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it impossible to navigate to the element using the Tab key or programmatic focus methods (such as element.focus()).
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Defines the list of users available for mentioning in the TextArea component. Expects an array where each element is an object containing both id and name properties (e.g., { id: string | number, name: string }). When users type the '@' character, a dropdown appears, allowing them to select a user from this array to mention within the TextArea.
   * Default value: []
   */
  users?: any[];
  /**
   * Sets or retrieves the current value of the element, allowing you to programmatically update or access the element's value property. This is commonly used for form controls such as input, select, and textarea elements.
   * Default value: ""
   */
  value?: string;
}
/**
 TextArea specifies a textarea field where the user can enter data. Auto-complete options are displayed for easier input.
*/
export interface TextArea extends BaseElement, TextAreaProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user's selection within the component changes. It fires each time a new item or range is selected, allowing you to respond to selection updates in real time. Use this event to perform actions such as updating related UI elements, fetching additional data, or validating the current selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a key is released (keyup) within the TextArea, but only if the content of the TextArea has changed since the previous event.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the dropdown menu, hiding its list of selectable options from view.
   */
  close(): void;
  /**
   * Guarantees that the currently active (selected) item remains in view within the scrollable area, automatically scrolling as needed to prevent it from being hidden or obscured.
   */
  ensureVisible(): void;
  /**
   * Returns an array containing information about all users who are mentioned (e.g., with “@username”) within the value of the Textarea. Each user object in the array represents a unique user mention detected in the Textarea's current content.
   * @returns {any[]}
   */
  getMentions(): any[];
  /**
   * Expands the drop-down menu, displaying its list of selectable options to the user.
   */
  open(): void;
  /**
   * Enhances user interaction with input elements by selecting all the text within the input field. If the input element has the <b>readonly</b> attribute, the function instead sets focus on the element without selecting the text, since selection is not allowed for readonly inputs. This ensures an appropriate response whether the input is editable or not.
   */
  select(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-text-area"): TextArea;
        querySelector(selectors: "smart-text-area"): TextArea | null;
        querySelectorAll(selectors: "smart-text-area"): NodeListOf<TextArea>;
        getElementsByTagName(qualifiedName: "smart-text-area"): HTMLCollectionOf<TextArea>;
        getElementsByName(elementName: "smart-text-area"): NodeListOf<TextArea>;
    }
}

/**Specifies the autocomplete query mode, which defines how user input is matched to suggestions. This property controls the underlying matching algorithm—such as prefix, infix, or fuzzy matching—used to generate autocomplete results, thereby influencing the relevance and style of suggestions presented to the user. */
export declare type TextAreaQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
/**Specifies whether the user is allowed to manually resize the Textarea component, enabling or disabling drag-to-resize functionality in the interface. */
export declare type TextAreaResize = 'none' | 'horizontal' | 'vertical' | 'both';
export interface TextBoxProperties {
  /**
   * Controls the animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' will disable all animations.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies whether the text box should automatically receive keyboard focus when the page loads, allowing users to start typing immediately without clicking inside the box.
   * Default value: false
   */
  autoFocus?: boolean;
  /**
   * Specifies the autocomplete mode used to filter and display suggestions from the dataSource. The selected autocomplete mode determines how input text is matched against the available items, showing only those entries that meet the criteria—for example, items that start with, contain, or exactly match the user's input. This setting helps control the relevance and behavior of suggestion lists shown to the user while typing.
   * Default value: manual
   */
  autoComplete?: AutoComplete | string;
  /**
   * Specifies the duration (in milliseconds) to wait after the user stops typing before displaying the dropdown with autocomplete suggestions. This delay helps control how quickly the matching results appear, improving performance and user experience by preventing unnecessary searches while the user is still typing.
   * Default value: 100
   */
  autoCompleteDelay?: number;
  /**
   * Specifies the data source that populates the ComboBox options. The dataSource property accepts multiple types:- 'Array of strings or numbers:' Each item will be displayed as both the label and value of a list item.- 'Array of objects:' Each object should contain properties—such as label (displayed text) and value (item value)—that define the corresponding list item’s display and value.- 'Callback function:' You can provide a function that returns an array of items in either of the above forms. This allows for dynamic or asynchronous data loading.This flexible approach lets you easily integrate static lists, complex objects, or data fetched from external sources into the ComboBox.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Determines whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When set to "disabled," the element cannot be focused, clicked, or edited by the user.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source. This helps inform users that a background operation is in progress.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Sets or retrieves the displayMember property. The displayMember determines which property of each object in the data source collection (defined by the 'dataSource' property) will be used for display purposes in the user interface. By specifying the name of a property here, you control which value from each data source item is shown to users (e.g., displaying a "name" property from a list of user objects).
   * Default value: """"
   */
  displayMember?: string;
  /**
   * Specifies the visual presentation of characters within the input field, such as whether the characters are visible as plain text, masked (e.g., as password dots), or formatted in a particular style. This attribute controls how users see the inputted content while typing or reviewing their entries.
   * Default value: default
   */
  displayMode?: TextBoxDisplayMode | string;
  /**
   * Specifies the parent container to which the dropdown menu is appended in the DOM. By default, the dropdown is rendered within its original parent element. However, if an ancestor element has restricted overflow (e.g., 'overflow: hidden' or 'overflow: auto'), the dropdown may be clipped and not display correctly. To resolve this, you can set the dropDownAppendTo property to ''body'', the ID of a specific HTML element, or a direct reference to an HTML element. When set, the dropdown will be moved to the specified container in the DOM, ensuring it displays properly regardless of overflow constraints in its ancestors. To restore the dropdown to its original parent, reset this property to null. This feature is especially useful for ensuring that dropdowns are visible and functional in complex layouts where parent elements limit visibility due to CSS overflow properties.
   * Default value: null
   */
  dropDownAppendTo?: any;
  /**
   * Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height will be determined by a CSS variable. To customize the dropdown's height directly, you can assign a specific value (e.g., "200px" or "50%") to this property. Otherwise, leaving it empty enables the component to use the height defined by the associated CSS variable.
   * Default value: 
   */
  dropDownHeight?: string | number;
  /**
   * Defines the maximum height for the dropdown menu. If no value is set (default is an empty string), the dropdown’s maximum height will be determined by a corresponding CSS variable instead. This allows for dynamic styling via CSS, while still providing the option to specify a fixed maximum height directly through this property.
   * Default value: 
   */
  dropDownMaxHeight?: string | number;
  /**
   * Specifies the maximum width of the dropdown menu. By default, this property is set to an empty string, meaning that the dropdown's max-width is determined by a corresponding CSS variable. If a specific value (such as '300px' or '100%') is provided, it will override the CSS variable and directly set the maximum width of the dropdown.
   * Default value: 
   */
  dropDownMaxWidth?: string | number;
  /**
   * Defines the minimum height of the dropdown menu. By default, this property is set to an empty string (""), which means the minimum height is not explicitly specified in the component and will instead be determined by the value of a related CSS variable. If a specific value (such as "200px" or "2rem") is provided, it will override the CSS variable and set the minimum height of the dropdown directly.
   * Default value: 
   */
  dropDownMinHeight?: string | number;
  /**
   * Specifies the minimum width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's minimum width is determined by a corresponding CSS variable. If you provide a specific value (such as '200px' or '20rem'), it will override the CSS variable and set the dropdown's minimum width accordingly.
   * Default value: 
   */
  dropDownMinWidth?: string | number;
  /**
   * Specifies the direction or animation style in which the dropdown menu appears when activated (e.g., opens upwards, downwards, or with a fade effect).
   * Default value: default
   */
  dropDownOpenMode?: DropDownOpenMode | string;
  /**
   * When this property is enabled, opening the element’s dropdown will create a transparent overlay that covers the entire area between the dropdown and the rest of the webpage. This overlay ensures that any clicks outside the dropdown are intercepted by the overlay itself, rather than interacting with underlying DOM elements. As a result, clicking outside the dropdown can be handled consistently—for example, to close the dropdown—without triggering unintended interactions elsewhere on the page.
   * Default value: false
   */
  dropDownOverlay?: boolean;
  /**
   * Specifies the placeholder text that appears in the dropdown menu when there are no available items to display. This text provides guidance or context to users, indicating that the dropdown is currently empty.
   * Default value: "No Items"
   */
  dropDownPlaceholder?: string;
  /**
   * Specifies the alignment and placement of the dropdown menu relative to its trigger element when the dropdown is opened, allowing you to control where the menu appears on the screen (e.g., above, below, left, or right of the trigger).
   * Default value: auto
   */
  dropDownPosition?: DropDownPosition | string;
  /**
   * Specifies the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing for flexible styling through external or theme-based CSS. To explicitly set a custom width, provide a valid CSS width value (e.g., "200px", "50%").
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Specifies how the element responds when the Escape key is pressed, such as closing a dialog, dismissing a modal, or performing a custom action.
   * Default value: none
   */
  escKeyMode?: EscKeyMode | string;
  /**
   * Defines how the "Enter" key functions within the application, such as whether it submits a form, inserts a new line, or triggers a specific action, depending on the context.
   * Default value: submit
   */
  enterKeyBehavior?: EnterKeyBehavior | string;
  /**
   * Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of a  element present in the same document. This allows the element to be associated with a specific form, even if it is not nested directly within the form’s markup.
   * Default value: ""
   */
  form?: string;
  /**
   * Provides supplemental helper text displayed beneath the element. This hint appears exclusively when the element is focused, offering contextual guidance to the user during interaction.
   * Default value: null
   */
  hint?: any;
  /**
   * Controls whether the horizontal scroll bar within the dropdown menu is visible. This setting allows you to enable or disable horizontal scrolling for dropdown content that extends beyond the visible area.
   * Default value: auto
   */
  horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
  /**
   * Represents the property key of a List item's object that specifies which value should be displayed in the input field when a ListItem is selected. This property is useful when you want to show a value other than the default label—such as a unique identifier or another attribute—within the input. By default, the item's label is shown. Use this option to customize the displayed value based on a different property from your data objects.
   * Default value: ""
   */
  inputMember?: string;
  /**
   * Defines the purpose of the input field and specifies the type of data expected, providing guidance to browsers and user agents for offering autofill suggestions. This property maps directly to the standard HTML autocomplete attribute, allowing developers to control whether and how a browser can automatically fill in the field based on the user's stored information. Possible values include generic options like 'on' and 'off', as well as more specific data types such as 'name', 'organization', 'email', 'street-address', and others, enabling enhanced user experience and data accuracy in forms.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Specifies the height (in pixels) for each list item when rendering the list.  This property is only applicable if list virtualization is enabled, as it allows the component to accurately calculate and display only the visible items for improved performance.
   * Default value: null
   */
  itemHeight?: number | null;
  /**
   * Specifies the algorithm used to calculate the width of each item, determining how item widths are measured and displayed within the layout. This setting influences whether widths are fixed, dynamic, or adapt based on content or container size.
   * Default value: auto
   */
  itemMeasureMode?: ListItemMeasureMode | string;
  /**
   * A getter that retrieves and returns an array containing all the list item elements (e.g., '' elements) currently present within the dropdown menu. This allows easy access to all items displayed in the dropdown for further manipulation or inspection.
   * Default value: 
   */
  items?: any;
  /**
   * The itemTemplate property is a string specifying the id of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of each item rendered within the list. By referencing the id of an HTMLTemplateElement, you can control how individual list items are displayed, allowing for flexible and reusable item layouts.
   * Default value: null
   */
  itemTemplate?: any;
  /**
   * Displays a small text label positioned above the element, typically used to provide additional context or information about the element’s purpose.
   * Default value: ""
   */
  label?: string;
  /**
   * Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the container. This text provides context or status information to users while the loading process is ongoing.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the screen location where the loading indicator will be displayed (e.g., top, bottom, center, etc.), allowing developers to control the visual placement of the loading element within the application's interface.
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Defines or retrieves the unlockKey, a unique code or token used to grant access to the product's features or functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current language for localization purposes. This property is used together with the messages property, which contains language-specific content or translations. Adjusting the language will determine which set of messages is displayed or utilized within the application.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to define a custom format for messages returned by the Localization Module. This enables you to modify or enhance the localized messages—such as adding prefixes, changing text structure, or injecting dynamic values—before they are displayed to the user.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves the maximum number of characters allowed for user input in a text field. This limits how many characters a user can type or paste into the field.
   * Default value: null
   */
  maxLength?: number;
  /**
   * Specifies or retrieves the minimum number of characters a user must type before the auto-complete feature is activated and suggestions are displayed.
   * Default value: 2
   */
  minLength?: number;
  /**
   * Defines or retrieves an object containing the set of strings (such as labels, tooltips, button text, and messages) used throughout the widget interface, allowing these strings to be localized for different languages. This property works together with the language property to ensure the widget’s text content is displayed in the appropriate language for users.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the name attribute of the element. The name attribute specifies a key associated with the element's value when submitting HTML forms, enabling server-side identification and processing of submitted data. This is essential for form controls such as inputs, selects, and textareas.
   * Default value: ""
   */
  name?: string;
  /**
   * Indicates whether the dropdown menu is currently expanded (open) and visible to the user, or collapsed (closed) and hidden from view.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or an example of the expected input to the user.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Prevents any user interaction with the element, disabling actions such as clicking, focusing, hovering, or keyboard input. The element will not respond to any user events while this setting is applied.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Sets or retrieves a value that specifies whether the element’s content is aligned for right-to-left (RTL) text direction, supporting languages and locales such as Arabic or Hebrew. When enabled, the element’s layout and text flow will be adjusted to display content appropriately for RTL reading order.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Indicates that the input field is required, meaning the user must provide a value in this field before the form can be submitted successfully. If the input is left empty, the form submission will be blocked and the user will be prompted to complete the required information.
   * Default value: false
   */
  required?: boolean;
  /**
   * Defines the custom error message displayed to users when the input is marked as required but no value has been entered. If the required field is left empty, this message will be shown to prompt the user to provide the necessary input.
   * Default value: ""
   */
  requiredMessage?: string;
  /**
   * Specifies whether the entire content of the input field should automatically be highlighted (selected) when the input receives focus, allowing users to easily replace or copy the content.
   * Default value: false
   */
  selectAllOnFocus?: boolean;
  /**
   * Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including colors, fonts, and other stylistic details.
   * Default value: ""
   */
  theme?: string;
  /**
   * If set to true, the element will be excluded from the tab order and cannot receive keyboard or programmatic focus. This means users will not be able to navigate to the element using the Tab key or set focus to it via scripts.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves its current value, depending on how the method is used. Useful for reading or updating the content, input, or state of form elements such as text fields, checkboxes, or select menus.
   * Default value: ""
   */
  value?: string;
  /**
   * Specifies which property of each item object represents its value. The valueMember setting is particularly useful when binding the ListBox to data from a JSON file as its dataSource and you need to designate a specific property in the JSON objects to be used as the item's value. This is similar to how groupMember works, but instead of grouping items, valueMember tells the ListBox which property to use for the underlying value of each list item. For example, if your JSON objects have an "id" property, setting valueMember to "id" will store the value of the "id" property for each item in the ListBox.
   * Default value: """"
   */
  valueMember?: string;
  /**
   * Controls whether the vertical scroll bar within the dropdown menu is visible. This property allows you to specify if users can scroll vertically to view additional dropdown options when the content overflows the visible area.
   * Default value: auto
   */
  verticalScrollBarVisibility?: VerticalScrollBarVisibility | string;
}
/**
 TextBox is an input field with auto-suggest options.
*/
export interface TextBox extends BaseElement, TextBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value in the Text Box changes and is confirmed by the user. Specifically, it fires under two conditions:  <br/>1. When the user moves focus away from the Text Box (on blur).  <br/>2. When the user presses the 'Enter' key while the Text Box is focused.  <br/><br/>This ensures that the event only occurs after the user has finished editing the text, rather than on every keystroke.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value, type)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   *  type - The type of the event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered each time a user releases a key (on the keyup event) within the TextBox, but only if the content of the TextBox has changed since the previous event.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The previous value before it was changed.
   *  value - The new value.
   */
  onChanging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the drop-down menu associated with the input field. <strong>Note: The drop-down appears only when auto-complete functionality is enabled, allowing users to select from suggested options.</strong>
   */
  close(): void;
  /**
   * Expands the drop-down menu, allowing users to view and select available options. <strong>This drop-down menu is displayed exclusively when the autocomplete feature is enabled, providing relevant suggestions based on user input.</strong>
   */
  open(): void;
  /**
   * This method resets the input field to its original, initial value, effectively clearing any changes made by the user and restoring the input to its default state as set when the component or page first loaded.
   */
  reset(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-text-box"): TextBox;
        querySelector(selectors: "smart-text-box"): TextBox | null;
        querySelectorAll(selectors: "smart-text-box"): NodeListOf<TextBox>;
        getElementsByTagName(qualifiedName: "smart-text-box"): HTMLCollectionOf<TextBox>;
        getElementsByName(elementName: "smart-text-box"): NodeListOf<TextBox>;
    }
}

/**Specifies how the element responds when the Escape key is pressed, such as closing a dialog, dismissing a modal, or performing a custom action. */
export declare type EscKeyMode = 'none' | 'previousValue' | 'clearValue';
export interface TimeInputProperties {
  /**
   * Specifies the current animation mode for the component. You can retrieve the current mode or assign a new one using this property. To completely disable animations, set the property to 'none'. When set to any other supported value, the corresponding animation effects will be enabled.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the format in which the time is displayed within the input field. This option accepts configuration objects compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing you to customize the presentation of hours, minutes, seconds, and related time components. By default, the time format uses a 'numeric' style for each unit, displaying time values as numbers (e.g., "14:05"). Adjust this property to use other available formatting options, such as '2-digit', or to include additional components as needed.
   * Default value: { hour: 'numeric', minute: 'numeric' }
   */
  dateTimeFormat?: TimeFormat;
  /**
   * Controls whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its disabled state.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the alignment and placement of the dropdown button relative to its parent element, allowing you to control whether the button appears to the left, right, center, top, or bottom of its container.
   * Default value: right
   */
  dropDownButtonPosition?: DropDownButtonPosition | string;
  /**
   * Specifies the height of the dropdown menu. By default, the height is set to 'auto', allowing the dropdown to adjust automatically based on its content. You can set a specific height (in pixels, ems, etc.) to control the maximum visible area of the dropdown; when the content exceeds this height, a scrollbar will appear.
   * Default value: auto
   */
  dropDownHeight?: string | number;
  /**
   * Specifies the width of the dropdown menu. By default, this value is an empty string, which means the dropdown’s width will be determined by a CSS variable (e.g., --dropdown-width). You can override the default behavior by explicitly setting a width value (such as '200px', '50%', etc.), which will directly apply that width to the dropdown. If left unset, ensure that the related CSS variable is defined to control the dropdown’s appearance.
   * Default value: 
   */
  dropDownWidth?: string | number;
  /**
   * Defines the intended purpose of the input field and specifies the level of permission granted to the browser or user agent to automatically assist users in completing the input, particularly within form contexts. This attribute provides guidance to browsers about the type of data expected—for example, whether the field should contain a user's name, address, or other personal information—thus enabling features like autofill. The value of this property aligns with the standard HTML autocomplete attribute and accepts specific keywords such as 'on', 'off', 'name', 'organization', 'street-address', and others, to control the autofill behavior for each input element.
   * Default value: "off"
   */
  inputPurpose?: string;
  /**
   * Defines or retrieves the unlockKey, a unique identifier required to unlock and access the product's features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Defines or retrieves the current language setting, typically represented as a locale code (e.g., "en", "fr"). This setting determines which set of localized strings from the messages property will be used for display. Use this property to switch or detect the language context within your application.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module before they are delivered to the application. Use this to modify, enhance, or reformat localized messages based on your specific requirements.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Specifies or retrieves an object containing the widget’s display strings, allowing for easy customization and localization of text within the widget. This property is typically used together with the locale property to provide translations and adapt text content to different languages and regions.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Sets or retrieves the value of the element's name attribute. This attribute specifies the name used to identify the element’s data when an HTML form is submitted, allowing its value to be included in the form data sent to the server.
   * Default value: ""
   */
  name?: string;
  /**
   * Indicates whether the dropdown menu is currently open and visible to the user. If set to true, the dropdown will be displayed; if false, it will remain closed.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field when it is empty, providing users with a hint or example of the expected input format or content.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies whether the user can manually enter text into the input field. When dropDownButtonPosition is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the component's behavior:  - If readonly is false, the element functions as a ComboBox, allowing users to type and select suggestions from the data source.- If readonly is true, the element behaves as a DropDownList, restricting user input to only the options available in the data source and preventing manual text entry.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Controls or retrieves whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts (such as Arabic or Hebrew).
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the component or application.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, the element will be excluded from the page’s tab order, making it unfocusable using keyboard navigation or script-based focus commands. This prevents users from moving focus to the element using the Tab key or programmatically via JavaScript (e.g., element.focus()).
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets a new value for the element or retrieves the current value of the element, depending on how the method is used. This allows you to either update the element's state or access its existing data programmatically.
   * Default value: 
   */
  value?: any;
}
/**
 TimeInput specifies an input field where the user can enter a time. It also has a popup with a Calendar that allows to pick a time.
*/
export interface TimeInput extends BaseElement, TimeInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the user changes the current selection, such as highlighting a different portion of text or selecting a new item within a selectable list. It fires each time the selection changes, allowing you to respond to user interactions like selecting, deselecting, or modifying the active selection.
	* @param event. The custom event. Custom data event was created with: ev.detail(label, oldLabel, oldValue, value)
   *  label - The label of the new selected item.
   *  oldLabel - The label of the item that was previously selected before the event was triggered.
   *  oldValue - The value of the item that was previously selected before the event was triggered.
   *  value - The value of the new selected item.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Closes the dropdown menu, hiding its list of selectable options and returning the interface to its collapsed state.
   */
  close(): void;
  /**
   * Displays the dropdown menu, revealing its available options to the user.
   */
  open(): void;
  /**
   * Returns the value converted into the specified format, ensuring the output matches the required data type or structure as defined by the input parameters.
   */
  getFormattedValue(): void;
  /**
   * Returns the current value entered or selected in the input field by the user. This value may be typed text, a number, a selected option, or any other data depending on the input type.
   */
  getValue(): void;
  /**
   * Selects the text within the input field. If the input is set to <b>readonly</b>, the element will receive focus but the text will not be selected.
   */
  select(): void;
  /**
   * Defines the current value of the input field. Expects an array containing exactly two numbers: the first representing the hour and the second representing the minutes (e.g., `[13, 45]` for 1:45 PM).
   * @param {any[]} value. The value to be set. 
   */
  setValue(value: any[]): void;
}

/**Specifies the format in which the time is displayed within the input field. This option accepts configuration objects compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing you to customize the presentation of hours, minutes, seconds, and related time components. By default, the time format uses a 'numeric' style for each unit, displaying time values as numbers (e.g., "14:05"). Adjust this property to use other available formatting options, such as '2-digit', or to include additional components as needed. */
export interface TimeFormat {
  /**
   * Hour format.
   * Default value: 2-digit
   */
  hour?: TimeFormatHour | string;
  /**
   * Minute format.
   * Default value: 2-digit
   */
  minute?: TimeFormatMinute | string;
}

declare global {
    interface Document {
        createElement(tagName: "smart-time-input"): TimeInput;
        querySelector(selectors: "smart-time-input"): TimeInput | null;
        querySelectorAll(selectors: "smart-time-input"): NodeListOf<TimeInput>;
        getElementsByTagName(qualifiedName: "smart-time-input"): HTMLCollectionOf<TimeInput>;
        getElementsByName(elementName: "smart-time-input"): NodeListOf<TimeInput>;
    }
}

/**Hour format. */
export declare type TimeFormatHour = 'numeric' | '2-digit';
/**Minute format. */
export declare type TimeFormatMinute = 'numeric' | '2-digit';
export interface TimelineProperties {
  /**
   * Specifies or retrieves whether the Timeline component automatically adjusts its width to fit its content when displayed in horizontal mode. When enabled, the Timeline will expand or contract its width based on its items, rather than using a fixed or predefined width.
   * Default value: false
   */
  autoWidth?: boolean;
  /**
   * Specifies whether the items are collapsible. When set to true, users can expand or collapse the items to show or hide their contents. When set to false, all items remain expanded and cannot be collapsed. This property can be used to retrieve the current state or to enable or disable the collapse functionality.
   * Default value: true
   */
  collapsible?: boolean;
  /**
   * Determines whether the Timeline component is enabled or disabled. When set to true, the Timeline is disabled and user interaction is prevented. When set to false, the Timeline is enabled and fully interactive. This property can be used to programmatically check the current state or update the disabled state of the Timeline.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Controls or retrieves the orientation of the Timeline, determining whether it is displayed horizontally. When set to true, the Timeline is laid out horizontally; when false, it is displayed vertically.
   * Default value: false
   */
  horizontal?: boolean;
  /**
   * Specifies or retrieves the position setting. Acceptable values are:- '"near"': Aligns the element or feature near the reference point.- '"far"': Aligns the element or feature farther from the reference point.- '"both"': Applies alignment to both the near and far positions.Use this property to control the placement of the element relative to its container or another reference within the layout.
   * Default value: "both"
   */
  position?: string;
  /**
   * Manages the collection of items by setting or retrieving them. Each item must be an object containing the following properties:- 'date' ('string'): The relevant date for the item, typically in a human-readable format (e.g., ''May 15, 2024'').- 'description' ('string'): A detailed explanation or summary associated with the item.- 'subtitle' ('string'): Additional secondary text, often used to supplement the main title or date information.- 'title' ('string'): The main heading or name for the item.- 'css' ('string'): Custom CSS class or styles applied to the item for additional styling (can be an empty string if not used).- 'dotCSS' ('string'): Custom CSS class or styles specifically for the item's dot indicator, if applicable (can be an empty string if not used).- 'icon' ('string'): The icon class or identifier, such as a Material Icon class, to visually represent the item.'Example:''''json[  {    "date": "May 15, 2024",    "description": "Flight: Reserving airline tickets",    "subtitle": "May 15, 2024",    "title": "Flight Reservation",    "css": "",    "dotCSS": "",    "icon": "material-icons flight"  }]'''Use this structure to ensure consistent formatting and styling when displaying each item in your application.
   * Default value: []
   */
  dataSource?: any[];
}
/**
 Displays a timeline with events.
*/
export interface Timeline extends BaseElement, TimelineProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Triggers a re-render of the timeline component, updating its display to reflect any changes in data or configuration.
   * @returns {any}
   */
  render(): any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-timeline"): Timeline;
        querySelector(selectors: "smart-timeline"): Timeline | null;
        querySelectorAll(selectors: "smart-timeline"): NodeListOf<Timeline>;
        getElementsByTagName(qualifiedName: "smart-timeline"): HTMLCollectionOf<Timeline>;
        getElementsByName(elementName: "smart-timeline"): NodeListOf<Timeline>;
    }
}

export interface TimePickerProperties {
  /**
   * Controls the animation mode for the component. When set to 'none', all animations are disabled. When set to other supported values, animations will be enabled according to the specified mode. This property can be used to either retrieve the current animation mode or update it dynamically.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Determines whether, after selecting the hour, the component will automatically advance to the minute selection view. When enabled, users will be guided directly to choose minutes immediately after choosing an hour, streamlining the time selection process. This option can be set or retrieved programmatically.
   * Default value: false
   */
  autoSwitchToMinutes?: boolean;
  /**
   * Specifies whether the element is active and can be interacted with by the user. When enabled, the element responds to user actions; when disabled, the element appears visually inactive and does not accept user input or interaction.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies whether the footer section of the element is displayed to the user. If set to true, the footer will be visible; if false, the footer will be hidden.
   * Default value: false
   */
  footer?: boolean;
  /**
   * Specifies or retrieves the footer template used by the component. This property accepts either the ID of an existing HTMLTemplateElement or a direct reference to an HTMLTemplateElement object. When assigning an ID, the component will search the DOM for a template with the corresponding ID and use it as the footer template. If a direct reference is provided, that template will be used. If the value is set to null, the component will revert to its default behavior by applying an empty template to the footer area.
   * Default value: null
   */
  footerTemplate?: string | HTMLTemplateElement;
  /**
   * Specifies the format used for selecting hours, such as 12-hour (AM/PM) or 24-hour (military) time.
   * Default value: 12-hour
   */
  format?: TimePickerFormat | string;
  /**
   * Sets or retrieves the unlockKey, a unique value required to activate or grant access to the product's features. This key is used to validate and unlock product functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property is typically used together with the messages property to determine which language version of the messages should be displayed or retrieved. When setting the language, the corresponding localized messages from the messages collection will be used.
   * Default value: "en"
   */
  locale?: string;
  /**
   * A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized text is structured, such as adding dynamic values, adjusting syntax, or applying custom formatting rules before the message is displayed to the user.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing string resources used throughout the widget interface, which can be localized to support different languages and regions. This property works in tandem with the language property to display text in the user's preferred language, enabling comprehensive internationalization of the widget's UI elements and messages.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies or retrieves the increment value (in minutes) used when adjusting or selecting the minute portion of a time input. This determines the intervals by which minutes can be increased or decreased, such as allowing selection at every 5 minutes (e.g., 0, 5, 10, 15, etc.) instead of every 1 minute.
   * Default value: 1
   */
  minuteInterval?: number;
  /**
   * Sets or retrieves the name attribute of the element. The name attribute identifies the element when submitting HTML forms, allowing its value to be included as a key in the form data sent to the server. This is essential for server-side processing and distinguishing between multiple form fields.
   * Default value: ""
   */
  name?: string;
  /**
   * Prevents any user interactions with the element, such as clicking, tapping, focusing, or selecting content. While disabled, the element will not respond to mouse, keyboard, or touch events, and interactive features (like links or form inputs) will not be accessible.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Gets or sets a value that specifies whether the element is aligned to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's alignment and layout are adjusted to accommodate right-to-left text direction for proper localization.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies which view is currently displayed to the user. By default, the hours view is initially shown unless a different view is set. This property controls the visible section of the interface, such as hours, minutes, or other available views.
   * Default value: hour
   */
  selection?: TimePickerSelection | string;
  /**
   * Specifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel for the element within the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, this property makes the element unfocusable, preventing it from receiving keyboard or mouse focus during user interaction or via scripting.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Sets or retrieves the value of the element. The value can be provided as a valid Date object or as a string formatted to represent a valid time (e.g., "14:30" for 2:30 PM). When setting, ensure the input matches the expected format; when getting, the returned value will reflect the current time value of the element.
   * Default value: new Date()
   */
  value?: any;
  /**
   * Determines the current orientation of the element, indicating whether its width is greater than its height (landscape mode) or its height is greater than its width (portrait mode). This property allows developers to adapt layout and styles based on how the element is displayed.
   * Default value: portrait
   */
  view?: ViewLayout | string;
}
/**
 Time Picker component allows the user to select time from spinners.
*/
export interface TimePicker extends BaseElement, TimePickerProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the value associated with the component or input field is modified, either by user interaction or programmatically. It is dispatched after the change has occurred, allowing event handlers to respond to updates in the value.
	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
   *  oldValue - The old value before it was changed presented as a Date object.
   *  value - The new value presented as a Date object.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Specifies the hour component of the time value, typically as an integer ranging from 0 (midnight) to 23 (11 PM). This property or method updates the hours portion while leaving the minutes, seconds, and milliseconds unchanged, unless otherwise specified.
   * @param {number} hours. The hours to set.
   */
  setHours(hours: number): void;
  /**
   * Specifies the value for the minutes component of a time, typically as an integer between 0 and 59. This is used to set or update the minute portion of a time-related field.
   * @param {number} minutes. The minutes to set.
   */
  setMinutes(minutes: number): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-time-picker"): TimePicker;
        querySelector(selectors: "smart-time-picker"): TimePicker | null;
        querySelectorAll(selectors: "smart-time-picker"): NodeListOf<TimePicker>;
        getElementsByTagName(qualifiedName: "smart-time-picker"): HTMLCollectionOf<TimePicker>;
        getElementsByName(elementName: "smart-time-picker"): NodeListOf<TimePicker>;
    }
}

/**Specifies the format used for selecting hours, such as 12-hour (AM/PM) or 24-hour (military) time. */
export declare type TimePickerFormat = '12-hour' | '24-hour';
/**Specifies which view is currently displayed to the user. By default, the hours view is initially shown unless a different view is set. This property controls the visible section of the interface, such as hours, minutes, or other available views. */
export declare type TimePickerSelection = 'hour' | 'minute';
export interface ToastProperties {
  /**
   * Sets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled. Otherwise, specifying a valid animation mode enables corresponding transition effects.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Defines the container element in which new toast notifications will appear. The value can be either an HTMLElement directly, or a string representing the id of a DOM element. This property determines where toast items are rendered in the DOM.Note: When used together with the modal and position properties, container takes precedence over position but has lower priority than modal. This means that if modal is enabled, it overrides container; if not, the specified container is used instead of the position property.
   * Default value: "null"
   */
  appendTo?: string;
  /**
   * Determines whether the toast notification will automatically close after the duration specified by the autoCloseDelay property. If enabled, the toast will dismiss itself once the set time has elapsed; otherwise, it will remain visible until manually closed by the user.
   * Default value: false
   */
  autoClose?: boolean;
  /**
   * Specifies or retrieves the time interval (in milliseconds) after which the toast notification will automatically dismiss itself. This property is effective only when the autoClose property is set to true; otherwise, the toast will remain visible until manually closed.
   * Default value: 3000
   */
  autoCloseDelay?: number;
  /**
   * Determines whether the toast notification should automatically appear as soon as the widget is initialized, without requiring any user interaction or additional trigger.
   * Default value: false
   */
  autoOpen?: boolean;
  /**
   * When the disabled property is set to true, all user interactions with toast items—such as clicking, hovering, or dismissing—will be prevented. The toast items will appear inactive and will not respond to any user actions until disabled is set to false.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies a custom CSS class name or multiple class names to override the default icon styling. To apply multiple classes, separate each class name with a space (e.g., "fa fa-user"). This property is particularly useful when integrating icons from third-party icon libraries like Bootstrap Icons, Font Awesome, or Material Icons, allowing you to fully control the icon's appearance by leveraging external style definitions.
   * Default value: "null"
   */
  iconClass?: string;
  /**
   * Allows you to add one or more custom CSS classes to Toast items by specifying class names separated with spaces. This enables you to style individual Toasts using predefined classes from third-party CSS frameworks (such as Bootstrap), or your own custom styles, for greater flexibility and consistency in appearance.
   * Default value: "null"
   */
  itemClass?: string;
  /**
   * Defines a custom template for rendering each item, allowing you to control the appearance and structure of items displayed in the list or component. This enables the use of personalized HTML, styling, and dynamic content for each item, rather than relying on the default rendering format.
   * Default value: "null"
   */
  itemTemplate?: string;
  /**
   * Defines or retrieves the unlockKey, a unique value required to activate or gain access to the product’s features or content.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting for localization purposes. This property determines which set of translations from the messages object is used, ensuring that the appropriate language-specific content is displayed or accessed.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function used by the localization module to handle language-specific operations, such as loading translation files, switching languages, or updating localized content dynamically within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing customizable text strings used throughout the widget’s user interface, enabling localization and internationalization of displayed messages, labels, and prompts. Typically used alongside the locale property to support multiple languages and regional formats. This property allows developers to override default strings with translations or custom wording suitable for different locales.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * When modal mode is enabled, the toast notification is displayed at the center of the screen, overlaying all other page content. The modal property takes precedence over both the position and appendTo properties. If modal is set to true, any values specified for position and appendTo will be ignored, and the toast will always appear centered in a modal overlay.
   * Default value: false
   */
  modal?: boolean;
  /**
   * Specifies the area of the browser window where the toast notification will be displayed (for example, "top-right" or "bottom-center"). Note: This position setting is ignored if the appendTo property is defined or if modal mode is enabled, as these options control the toast’s placement instead.
   * Default value: top-right
   */
  position?: ToastPosition | string;
  /**
   * If the element has the "readonly" attribute, users cannot modify its value; the content is visible but cannot be changed or edited through user input. However, users may still be able to interact with the element in limited ways, such as copying its text, but any form of altering the value is disabled.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Defines or retrieves a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's layout and text direction are modified to accommodate locales that use RTL scripts.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Determines whether the close button is displayed on the toast notification. When set to true, the close button appears, allowing users to manually dismiss the toast. When set to false, the close button is hidden, and the toast can only be dismissed programmatically or by other means. This property can be used to retrieve the current visibility state or update it as needed.
   * Default value: false
   */
  showCloseButton?: boolean;
  /**
   * Specifies the theme to be applied to the element. The selected theme controls the visual appearance of the element, including colors, fonts, and overall styling, ensuring a consistent look and feel throughout the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Applies custom CSS styles and assigns a designated icon to each toast notification item for improved appearance and user experience.
   * Default value: info
   */
  type?: ToastType | null | string;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation or programmatic focus methods (such as calling element.focus()).
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Assigns a specific text value to the toast notification, determining the message displayed to users within the toast item.
   * Default value: 
   */
  value?: any;
}
/**
 The toast component is like an alert box that is only shown for a couple of seconds when something happens.
*/
export interface Toast extends BaseElement, ToastProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered when a user clicks on a toast notification. It allows you to execute custom logic in response to the user's interaction with the toast item, such as redirecting to a specific page, dismissing the notification, or performing other actions.
	* @param event. The custom event.    */
  onItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever a toast notification is closed, either by user interaction (such as clicking the close button) or programmatically through code. It allows developers to execute custom logic or cleanup actions after the toast has been dismissed from the user interface.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered each time a toast notification becomes visible to the user, indicating that the toast item has been fully opened and is now displayed on the screen.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user performs a swipe-down gesture (swipe bottom) on a toast notification item. It can be used to detect and handle user interactions that involve dismissing or interacting with toast messages via a downward swipe.
	* @param event. The custom event.    */
  onSwipebottom?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user performs a swipe left gesture on a toast notification item. It allows you to execute custom actions in response to the swipe left interaction with the toast component.
	* @param event. The custom event.    */
  onSwipeleft?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user performs a swipe-right gesture on a toast notification item. It allows you to handle interactions that occur specifically when the user swipes right on a toast component.
	* @param event. The custom event.    */
  onSwiperight?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a user performs an upward swipe gesture (swipe top) on a toast notification item.
	* @param event. The custom event.    */
  onSwipetop?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes all currently displayed toast notifications, ensuring that any active toast messages are dismissed from the user interface.
   */
  closeAll(): void;
  /**
   * Closes a specific toast notification. This action targets and dismisses the designated toast message from the user interface, ensuring that only the selected toast item is removed without affecting others.
   * @param {HTMLElement | string} item. The toast item (or its id) to remove.
   */
  closeItem(item: HTMLElement | string): void;
  /**
   * Closes the most recently displayed toast notification, removing it from the user's view.
   */
  closeLast(): void;
  /**
   * Displays a new toast notification and returns the corresponding smart-toast-item instance representing the newly created toast. This allows further manipulation or customization of the toast after it appears.
   * @param {HTMLElement | string} value?. The value for the toast item. If not set, the value property will be used.
   * @param {string} iconType?. The icon name for the toast item. If not set, the type property determines the icon type that will be used.
   * @returns {HTMLElement}
   */
  open(value?: HTMLElement | string, iconType?: string): HTMLElement;
}

declare global {
    interface Document {
        createElement(tagName: "smart-toast"): Toast;
        querySelector(selectors: "smart-toast"): Toast | null;
        querySelectorAll(selectors: "smart-toast"): NodeListOf<Toast>;
        getElementsByTagName(qualifiedName: "smart-toast"): HTMLCollectionOf<Toast>;
        getElementsByName(elementName: "smart-toast"): NodeListOf<Toast>;
    }
}

/**Specifies the area of the browser window where the toast notification will be displayed (for example, "top-right" or "bottom-center"). Note: This position setting is ignored if the appendTo property is defined or if modal mode is enabled, as these options control the toast’s placement instead. */
export declare type ToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/**Applies custom CSS styles and assigns a designated icon to each toast notification item for improved appearance and user experience. */
export declare type ToastType = 'info' | 'warning' | 'success' | 'error' | 'mail' | 'time' | null;
export interface ToggleButtonProperties {
  /**
   * Specifies or retrieves the current animation mode for the element. When set to 'none', all animations are disabled, and the element will appear or update instantly without any animated transitions. If a different value is assigned, the element will use the corresponding animation effect during state changes.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Defines or updates the current state of the element, controlling its behavior, appearance, or functionality based on the specified value. This property determines how the element responds to user interactions and can trigger associated changes in the interface or underlying logic.
   * Default value: false
   */
  checked?: boolean;
  /**
   * Specifies how the button responds to user click interactions, determining the trigger conditions for its click event (e.g., on mouse down, on mouse up, or after a complete click).
   * Default value: release
   */
  clickMode?: ClickMode | string;
  /**
   * Determines whether the ratio button is displayed and interactive. Set to true to show and enable the button, or false to hide and disable it.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Assigns the specified HTML markup to the element’s content, replacing all existing child elements and text within the element. This allows dynamic insertion of HTML structure and content inside the targeted element.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or retrieves the value of the unlockKey, a unique code or token required to authorize and unlock access to the product’s features or functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property works together with the messages property to determine which localized messages are displayed. When you set this property, the component selects the appropriate set of messages corresponding to the chosen language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle events or operations such as language changes, text translations, or localization updates within the application.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Sets or retrieves an object containing the text strings displayed in the widget, allowing for easy localization and customization of interface messages. This property works together with the locale property to provide translations and adapt the widget's language to different regions. Use this object to define or override the default text for various UI elements, tooltips, messages, and labels within the widget.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Gets or assigns the name of the widget. This property allows you to retrieve the current name of the widget or specify a new name for identification and reference purposes within the application.
   * Default value: """"
   */
  name?: string;
  /**
   * If the custom element has the 'readonly' attribute set, its content cannot be modified by the user. However, users may still be able to interact with the element in other ways, such as selecting or copying its content. No input changes or value modifications are permitted while the element is in the readonly state.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies the theme to be applied. The selected theme controls the visual appearance and styling of the element, including colors, fonts, spacing, and other design-related properties.
   * Default value: ""
   */
  theme?: string;
  /**
   * When set to true, the element will be removed from the tab order and cannot receive focus via keyboard or mouse interactions.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets the current value of the widget or sets a new value for the widget. Use this property to retrieve what the widget currently holds or to update it programmatically.
   * Default value: """"
   */
  value?: string;
}
/**
 ToggleButton allows the user to change a setting between two states.
*/
export interface ToggleButton extends BaseElement, ToggleButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the state of the widget changes—specifically, when the user checks or unchecks the widget. It allows you to respond to any change in the widget’s selection status.
	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, changeType)
   *  value - A boolean value indicating the new state of the button ( checked or not ).
   *  oldValue - A boolean value indicating the previous state of the button ( checked or not ).
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the widget transitions into a checked state, such as when a user selects or activates it. It allows developers to respond to changes in the widget's selection status.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user deselects or unchecks the widget, typically by clicking or tapping on it. It indicates that the widget has transitioned from a checked or selected state to an unchecked or unselected state. Developers can use this event to execute custom logic or update the application’s interface in response to the change.
	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
   */
  onUncheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "smart-toggle-button"): ToggleButton;
        querySelector(selectors: "smart-toggle-button"): ToggleButton | null;
        querySelectorAll(selectors: "smart-toggle-button"): NodeListOf<ToggleButton>;
        getElementsByTagName(qualifiedName: "smart-toggle-button"): HTMLCollectionOf<ToggleButton>;
        getElementsByName(elementName: "smart-toggle-button"): NodeListOf<ToggleButton>;
    }
}

export interface TooltipProperties {
  /**
   * Allows you to specify or retrieve the current animation mode. Set this property to 'none' to disable all animations. When assigned other valid values, it enables the corresponding animation effects for the element or component.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Specifies the alignment of the tooltip relative to its target element, such as positioning it above, below, to the left, or to the right of the target. This setting controls where the tooltip appears in relation to the element it is associated with.
   * Default value: "center"
   */
  align?: string;
  /**
   * Determines whether the tooltip's arrow is displayed. Setting this property to true will show the arrow pointing to the anchor element, while setting it to false will hide the arrow. This enhances tooltip visibility and contextual association with the target element.
   * Default value: false
   */
  arrow?: boolean;
  /**
   * Specifies the location or alignment of the arrow relative to its parent element, determining where the arrow will appear (such as top, bottom, left, right, or center) within the component or tooltip.
   * Default value: bottom
   */
  arrowDirection?: TooltipArrowDirection | string;
  /**
   * Determines whether the tooltip's arrow is displayed. When set to true, an arrow will appear pointing from the tooltip to its target element; when set to false, the tooltip will be shown without an arrow. This property can be used to customize the visual connection between the tooltip and its anchor element.
   * Default value: 0
   */
  delay?: number;
  /**
   * Controls whether the tooltip is displayed. When enabled, the tooltip appears when users hover over or interact with the associated element. When disabled, the tooltip is hidden and does not appear under any circumstances.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Specifies the horizontal (X) and vertical (Y) offset values, allowing you to adjust the position of an element relative to its original location. The X value shifts the element left or right, while the Y value moves it up or down.
   * Default value: 0,0
   */
  offset?: number[];
  /**
   * Sets or retrieves the unlockKey used to grant access to the product. The unlockKey acts as an authorization token or code required to unlock and enable the product’s features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies or retrieves the current language setting. This property determines which set of localized messages from the messages property will be used. Changing this value updates the displayed content to match the selected language.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically invoked to handle language changes, region-specific formatting, or to update interface text based on the selected locale.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the localized text strings used within the widget interface. This property allows you to customize the displayed text for different languages or regions, and works together with the language property to support localization and internationalization of the widget's UI elements.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "invalidSelector": "' must be a string, an HTMLElement or null.",
   *     "invalidNode": "."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events.
   * Default value: hover
   */
  openMode?: TooltipOpenMode | string;
  /**
   * Specifies or retrieves the placement of the tooltip relative to its associated element. This determines where the tooltip appears, such as above, below, to the left, or to the right of the target element.
   * Default value: top
   */
  position?: TooltipPosition | string;
  /**
   * Specifies the HTML element that will act as the trigger for displaying the tooltip. When the user interacts with this element (such as by hovering, focusing, or clicking—depending on configuration), the tooltip will appear.
   * Default value: null
   */
  selector?: string | HTMLElement;
  /**
   * Specifies the theme applied to the element. The theme controls the element’s overall appearance, including colors, fonts, and stylistic details, ensuring a consistent visual presentation throughout the interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip.
   * Default value: null
   */
  tooltipTemplate?: any;
  /**
   * When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Gets the current value of the widget or sets a new value for the widget. This property allows you to retrieve the widget's existing value or update it programmatically.
   * Default value: """"
   */
  value?: string;
  /**
   * Controls whether the tooltip is visible or hidden. When set, this property determines if the tooltip is displayed to the user; when accessed, it returns the current visibility status of the tooltip.
   * Default value: false
   */
  visible?: boolean;
}
/**
 Tooltip is an alternate for the html title. It displays a popup with details on hover.
*/
export interface Tooltip extends BaseElement, TooltipProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered immediately when the tooltip becomes visible to the user, indicating that the tooltip has been successfully opened and is now displayed on the screen. This can be used to perform additional actions, such as loading content or tracking analytics, when a tooltip appears.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is dispatched immediately before the tooltip becomes visible to the user. By calling event.preventDefault() within the event handler, you can cancel the tooltip from opening, allowing you to implement custom logic or conditions before the tooltip is displayed.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately after the tooltip has been closed, either by user interaction or programmatically. It signals that the tooltip is no longer visible in the user interface and can be used to perform cleanup operations or update other components in response to the tooltip's dismissal.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is fired immediately before the tooltip is about to close. It provides an opportunity to perform actions or validations before the tooltip is hidden. By calling event.preventDefault(), you can cancel the closing of the tooltip, keeping it visible until the action is allowed to proceed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Closes the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.
   */
  close(): void;
  /**
   * Displays the smart-tooltip component, providing contextual information or guidance to the user when triggered.
   */
  open(): void;
  /**
   * Enables or disables the smart-tooltip component, controlling whether tooltips are displayed or hidden for the specified elements. This toggle function allows developers to dynamically show or hide helpful tooltip information in the user interface based on user interaction or application state.
   */
  toggle(): void;
  /**
   * Removes all content currently displayed within the Tooltip, restoring it to an empty state and ensuring no text, HTML, or interactive elements remain visible.
   */
  clear(): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tooltip"): Tooltip;
        querySelector(selectors: "smart-tooltip"): Tooltip | null;
        querySelectorAll(selectors: "smart-tooltip"): NodeListOf<Tooltip>;
        getElementsByTagName(qualifiedName: "smart-tooltip"): HTMLCollectionOf<Tooltip>;
        getElementsByName(elementName: "smart-tooltip"): NodeListOf<Tooltip>;
    }
}

/**Specifies the location or alignment of the arrow relative to its parent element, determining where the arrow will appear (such as top, bottom, left, right, or center) within the component or tooltip. */
export declare type TooltipArrowDirection = 'bottom' | 'top' | 'left' | 'right';
/**Specifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events. */
export declare type TooltipOpenMode = 'click' | 'focus' | 'hover' | 'manual';
export interface TreeProperties {
  /**
   * Enables drag-and-drop functionality within the current tree structure. When this option is set to 'true', users can drag items from the current tree and drop them into another tree that has the allowDrop setting enabled. This facilitates moving or copying items between compatible trees using a drag-and-drop interface.
   * Default value: false
   */
  allowDrag?: boolean;
  /**
   * Enables drag-and-drop functionality, permitting items to be dropped into this tree. The dropped items may originate from either within the current tree or from a different tree, supporting both intra-tree and inter-tree item transfers.
   * Default value: false
   */
  allowDrop?: boolean;
  /**
   * Configures or retrieves the current animation mode. When set to 'none', all animations are disabled. Use this property to control whether animations are enabled, disabled, or set to a specific animation style or behavior.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Automatically hides the tree's toggle arrow when the mouse pointer leaves the tree area, and displays the toggle arrow again when the mouse pointer enters the tree area. This provides a cleaner interface by only showing the toggle control when the user is actively interacting with the tree.
   * Default value: false
   */
  autoHideToggleElement?: boolean;
  /**
   * Controls whether the component automatically loads its state (including filtering, sorting, expanded, and selected items) from the browser's localStorage. When enabled, any previously saved state is retrieved and applied to the component on initialization, allowing users to resume where they left off. Disabling this option prevents the component from loading state information from localStorage.
   * Default value: false
   */
  autoLoadState?: boolean;
  /**
   * Controls whether the component automatically saves its state—including filtering, sorting, expanded rows, and selected items—to the browser’s localStorage. When enabled, these settings are preserved and restored on page reload, providing a persistent user experience.
   * Default value: false
   */
  autoSaveState?: boolean;
  /**
   * Controls whether the tree is automatically re-sorted after changes. When autoSort is set to false, any modifications made to an already sorted tree will not trigger an automatic re-sorting; you will need to manually sort the tree to update its order. If autoSort is true, the tree will automatically re-sort itself whenever its contents are modified.
   * Default value: true
   */
  autoSort?: boolean;
  /**
   * Specifies the data source from which the Tree component will retrieve and display its hierarchical data. This property determines which dataset is loaded and rendered within the Tree structure.
   * Default value: null
   */
  dataSource?: any;
  /**
   * Controls whether the jqxTree widget is enabled or disabled. When enabled, users can interact with the tree and perform standard operations; when disabled, all user interaction is blocked and the tree appears visually inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Controls the visibility of the loading indicator, allowing you to display it when a process is in progress and hide it when the process completes.
   * Default value: false
   */
  displayLoadingIndicator?: boolean;
  /**
   * Specifies which field in the data source should be used as the label for each item—this determines the display text shown to users for every item in lists, dropdowns, or other UI elements.
   * Default value: "label"
   */
  displayMember?: string;
  /**
   * A callback function that allows you to customize the HTML content displayed as drag feedback during a drag-and-drop operation. This function receives a single parameter: an array containing the items currently being dragged. Use this array to generate and return your custom HTML representation for the drag feedback.
   * Default value: null
   */
  dragFeedbackFormatFunction?: any;
  /**
   * Specifies the pixel offset of the drag feedback element relative to the mouse cursor during a drag operation. This value is defined as an array, where the first element represents the horizontal (X-axis) offset and the second element represents the vertical (Y-axis) offset. Adjusting these values changes the position of the visual feedback element in relation to the cursor as items are being dragged.
   * Default value: 10,10
   */
  dragOffset?: number[];
  /**
   * 
   * Default value: false
   */
  dropDownMode?: boolean;
  /**
   * Specifies the width, in pixels, of the Tree component when it appears within a drop-down interface. Adjusting this value controls how wide the drop-down Tree is rendered, allowing for customization to fit various layouts or content requirements.
   * Default value: 300
   */
  dropDownWidth?: number;
  /**
   * Specifies the height of the Tree component when it is rendered within a drop-down menu. Adjusting this value determines how much vertical space the Tree occupies in drop-down mode, affecting the number of visible items before scrolling is required.
   * Default value: 400
   */
  dropDownHeight?: number;
  /**
   * Controls whether an item can be edited. When enabled, users can initiate editing by double-clicking a tree item or by selecting an item and pressing F2. If disabled, editing operations for the item are prevented.
   * Default value: false
   */
  editable?: boolean;
  /**
   * Specifies how TreeItemGroups within the Tree expand or collapse, controlling whether multiple groups can be expanded simultaneously, only one group can be expanded at a time, or all groups are collapsed by default. This setting defines the expand/collapse interaction pattern for grouped items in the Tree structure.
   * Default value: multiple
   */
  expandMode?: TreeExpandMode | string;
  /**
   * Controls the filtering functionality within the component. When enabled, a filter input field is displayed, allowing users to refine visible data based on their input. When disabled, the filter input is hidden, and all data items are shown without filtering options.
   * Default value: false
   */
  filterable?: boolean;
  /**
   * Triggers the filter action exclusively when the 'Enter' key is pressed, ensuring that filtering occurs only after user confirmation rather than on every input change.
   * Default value: false
   */
  filterOnEnter?: boolean;
  /**
   * Defines a custom placeholder text to display within the filter input field, guiding users on what they can search or filter for.
   * Default value: ""
   */
  filterInputPlaceholder?: string;
  /**
   * Specifies which property of the TreeItem will be used as the filtering criterion. By default, the component filters using the label property of each TreeItem. You can change this behavior by setting the property to value to filter based on the value property, or to textContent to filter based on the textual content within the TreeItem. You may also specify any other valid property name to customize the filtering logic according to your data structure. This allows for flexible and precise filtering of TreeItems based on your application's requirements.
   * Default value: "label"
   */
  filterMember?: string;
  /**
   * Specifies the filtering method to be applied when processing data, such as selecting between different filter types (e.g., linear, nearest, or custom). Determines how input data is modified or constrained based on the selected filter mode.
   * Default value: containsIgnoreCase
   */
  filterMode?: FilterMode | string;
  /**
   * Configures or retrieves whether the tree checkboxes support three distinct states: checked, unchecked, and indeterminate. This property is applicable only when the selectionMode is set to 'checkBox'. When enabled, the indeterminate state allows parent checkboxes to visually reflect that only some of their child nodes are selected.
   * Default value: false
   */
  hasThreeStates?: boolean;
  /**
   * Specifies the field in the data source that contains the collection of subitems associated with each item group. This property maps the hierarchical structure by identifying where the subitems data for each group is stored, enabling the component to correctly render nested or grouped elements.
   * Default value: "items"
   */
  itemsMember?: string;
  /**
   * Specifies a custom placeholder text to display within the loading indicator when the loadingIndicatorPosition property is set to either 'top' or 'bottom'. This allows you to personalize the message shown to users while content is loading in these positions.
   * Default value: "Loading..."
   */
  loadingIndicatorPlaceholder?: string;
  /**
   * Specifies the location on the screen where the loading indicator will appear, such as 'top', 'bottom', 'center', or a custom position.
   * Default value: center
   */
  loadingIndicatorPosition?: VerticalAlignment | string;
  /**
   * Sets or retrieves the unlockKey value used to grant access to the product. The unlockKey acts as an authorization token or password that allows users to unlock and use the product’s features.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Sets or retrieves the current locale (language and regional settings) used by the component. This property works together with the messages property, which provides localized text and translations based on the selected locale. Use this property to display content in different languages and formats according to user preferences.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Callback function associated with the localization module, typically used to handle events such as language changes, translation updates, or localization data loading. This function enables the application to respond dynamically to localization-related operations.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Defines or retrieves an object containing the text strings displayed by the widget, enabling customization for different languages and regions. This property is used together with the locale property to provide localization support, allowing you to easily translate or adjust interface text based on the user's language settings.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
   *     "noId": "jqx-tree: Saving and loading the element's state are not available if the element has no id."
   *   }
   * }
   */
  messages?: any;
  /**
   * Defines the behavior of the scrollbar—or, when 'scrollMode' is set to ''scrollButtons'', the scroll buttons—when the content exceeds the visible area of the element. This setting determines how users can navigate overflow content, such as automatically displaying scrollbars, enabling scroll buttons, or applying custom overflow handling.
   * Default value: auto
   */
  overflow?: Overflow | string;
  /**
   * If the element is set to readonly, users will be able to see its value but will not be able to modify, edit, or interact with its content in any way. The element will appear as non-editable, ensuring that its value remains unchanged by user input.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * Specifies whether right-to-left (RTL) layout support is activated. When enabled, the user interface elements, text direction, and content flow are adjusted to accommodate languages that are read from right to left, such as Arabic or Hebrew.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Specifies whether to display a traditional scrollbar or to use scroll buttons for navigating content when the element’s content exceeds its visible area. This setting controls the user’s method of scrolling in overflow situations.
   * Default value: scrollbar
   */
  scrollMode?: TreeScrollMode | string;
  /**
   * A list (array) containing the index paths of the currently selected items. Each element in the array represents the hierarchical position of a selected item within the data structure, allowing precise identification of multiple selections.
   * Default value: 
   */
  selectedIndexes?: string[];
  /**
   * Specifies the visual style or method used to highlight selected items, such as changing their background color, border, or font style, to indicate their selection state to the user.
   * Default value: row
   */
  selectionDisplayMode?: TreeSelectionDisplayMode | string;
  /**
   * Specifies how selections can be made within the component, such as allowing single selection, multiple selections, or no selection at all.
   * Default value: one
   */
  selectionMode?: TreeSelectionMode | string;
  /**
   * Specifies whether selection is enabled for smart-tree-items-groups, allowing users to select one or more groups within the tree component. When set to true, group items in the jqxTree can be selected by user interaction.
   * Default value: all
   */
  selectionTarget?: TreeSelectionTarget | string;
  /**
   * Displays or hides connector lines that visually represent the relationships between elements within a group, making it easier to understand how the elements are interconnected.
   * Default value: false
   */
  showLines?: boolean;
  /**
   * Controls the visibility of connector lines between tree nodes, starting from the root node. When the 'showLines' property is set to true, lines connecting the hierarchical levels of the tree are displayed; if set to false, these lines are hidden.
   * Default value: false
   */
  showRootLines?: boolean;
  /**
   * Defines a user-provided function to specify custom sorting logic. This function allows you to determine how items are ordered, overriding the default sort behavior. It receives two items as arguments and should return a value indicating their sort order.
   * Default value: null
   */
  sort?: any;
  /**
   * Specifies the sort order to be applied, allowing values of either 'ascending' (arranging items from lowest to highest) or 'descending' (arranging items from highest to lowest).
   * Default value: asc
   */
  sortDirection?: TreeSortDirection | string;
  /**
   * Controls whether sorting functionality is enabled or disabled for the data set. When enabled, users can sort items based on specified criteria or columns; when disabled, sorting is not available.
   * Default value: false
   */
  sorted?: boolean;
  /**
   * Sets or retrieves the visual theme applied to the element, allowing you to customize its appearance (such as color scheme, style, or overall look) by selecting from predefined theme options.
   * Default value: ""
   */
  theme?: string;
  /**
   * Specifies the position of the toggle element (such as an arrow) within the component, indicating where the toggle control will be displayed relative to the content (e.g., left, right, top, or bottom).
   * Default value: near
   */
  toggleElementPosition?: Position | string;
  /**
   * Controls how groups within smart-tree-items are expanded or collapsed. Specifies the toggle behavior for displaying or hiding group items in the jqxTree component.
   * Default value: dblclick
   */
  toggleMode?: TreeToggleMode | string;
  /**
   * Determines whether the element can receive keyboard focus. When set, the element is focusable using keyboard navigation (such as the Tab key) or scripting. This property can also be used to check the current focusable state of the element.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies which field in the data source provides the value for each item. This property maps item values in your component or UI element to the corresponding field in your underlying data source, ensuring the correct value is referenced and displayed.
   * Default value: "value"
   */
  valueMember?: string;
}
/**
 Treeview component is a user interface that is used to represent hierarchical data in a tree structure.
*/
export interface Tree extends BaseElement, TreeProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered whenever the selected item(s) in the jqx-tree component change. It occurs both when a user selects a new item or deselects a previously selected item, allowing developers to execute custom logic in response to changes in the tree's selection state.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, oldSelectedIndexes, selectedIndexes)
   *  item - The item the user has interacted with to change the selection (only when applicable).
   *  oldSelectedIndexes - The selected indexes before the selection is changed.
   *  selectedIndexes - The selected indexes after the selection is changed.
   */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever a jqx-tree-items-group component is collapsed by the user. It occurs immediately after the group transitions from an expanded (open) state to a collapsed (closed) state, allowing you to execute custom logic in response to this action.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, path, value, children)
   *  item - the collapsed jqx-tree-items-group
   *  label - the label of the collapsed jqx-tree-items-group
   *  path - the path of the collapsed jqx-tree-items-group
   *  value - the value of the collapsed jqx-tree-items-group
   *  children - the children of the collapsed jqx-tree-items-group
   */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event fires immediately before a jqx-tree-items-group collapses, providing an opportunity to intercept the action. Within the event handler, you can call event.preventDefault() to cancel the collapsing operation, preventing the group from being closed. This allows developers to implement custom logic—such as confirmation dialogs or validation checks—prior to the group’s collapse.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, path, value, children)
   *  item - the jqx-tree-items-group to be collapsed
   *  label - the label of the jqx-tree-items-group to be collapsed
   *  path - the path of the jqx-tree-items-group to be collapsed
   *  value - the value of the jqx-tree-items-group to be collapsed
   *  children - the children of the jqx-tree-items-group to be collapsed
   */
  onCollapsing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when a jqx-tree-item or jqx-tree-items-group element is dropped onto a target location within the DOM during a drag-and-drop operation. You can prevent the drop action from completing—effectively canceling the move—by calling event.preventDefault() within your event handler function. This allows you to implement custom logic to determine whether the drop should be allowed or denied.
	* @param event. The custom event. Custom data event was created with: ev.detail(container, data, item, items, originalEvent, previousContainer, target)
   *  container - the tree the dragged item(s) is dropped to
   *  data - an object with additional drag details
   *  item - the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation
   *  items - an array with all dragged items
   *  originalEvent - the original, browser, event that initiates the drop operation
   *  previousContainer - the tree the dragged item(s) is dragged from
   *  target - the element the dragged items are dropped to
   */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a jqx-tree-item or jqx-tree-items-group component starts being dragged by the user. It occurs at the moment the drag operation begins, allowing you to implement custom logic or UI feedback during the drag-and-drop interaction within the jqxTree widget.
	* @param event. The custom event. Custom data event was created with: ev.detail(data, item, items, originalEvent)
   *  data - an object with additional drag details
   *  item - the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation
   *  items - an array with all dragged items
   *  originalEvent - the original, browser, event that initiates the dragging operation
   */
  onDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired when a drag operation begins within the jqx-tree component. It allows you to intercept the initiation of the drag action. By invoking event.preventDefault() within your event handler, you can cancel the drag operation before it proceeds. This provides an opportunity to implement custom logic, such as conditional validations or user permissions, before allowing or preventing the drag from taking place.
	* @param event. The custom event. Custom data event was created with: ev.detail(container, data, item, items, originalEvent, previousContainer)
   *  container - the tree the dragged item(s) is dragged from
   *  data - an object with additional drag details
   *  item - the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation
   *  items - an array with all dragged items
   *  originalEvent - the original, browser, event that initiates the drag operation
   *  previousContainer - the tree the dragged item(s) is dragged from
   */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when a `jqx-tree-items-group` element within the tree is expanded by the user, either through a mouse click or keyboard interaction. It allows developers to execute custom logic in response to the expansion of a specific group of items within the jqxTree component.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, path, value, children)
   *  item - the expanded jqx-tree-items-group
   *  label - the label of the expanded jqx-tree-items-group
   *  path - the path of the expanded jqx-tree-items-group
   *  value - the value of the expanded jqx-tree-items-group
   *  children - the children of the expanded jqx-tree-items-group
   */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is fired just before a jqx-tree-items-group is expanded. At this stage, the expansion process has not yet occurred, allowing you to perform custom logic or checks. If you want to prevent the group from expanding, call event.preventDefault() within your event handler; this will cancel the default expand action.
	* @param event. The custom event. Custom data event was created with: ev.detail(item, label, path, value, children)
   *  item - the jqx-tree-items-group to be expanded
   *  label - the label of the jqx-tree-items-group to be expanded
   *  path - the path of the jqx-tree-items-group to be expanded
   *  value - the value of the jqx-tree-items-group to be expanded
   *  children - the children of the jqx-tree-items-group to be expanded
   */
  onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the selected item in the jqx-tree component changes. It occurs after a user selects a different tree node, either through mouse interaction or keyboard navigation, allowing you to respond to selection changes within the tree.
	* @param event. The custom event. Custom data event was created with: ev.detail(value)
   *  value - The filter input value.
   */
  onFilterChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered each time the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown or focuses on the dropdown field, causing the options list to appear. Use this event to perform actions whenever the dropdown is opened, such as loading options dynamically or tracking user interactions.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the dropdown menu is closed, either by user interaction (such as clicking outside the dropdown or selecting an option) or programmatically through the application logic. Use this event to execute any cleanup tasks or update UI elements that depend on the dropdown’s visibility state.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the user scrolls the Tree component all the way to its bottom edge, indicating that the last visible item in the Tree is fully displayed. You can use this event to implement features such as infinite scrolling, lazy loading, or displaying additional content as the user reaches the end of the Tree.
	* @param event. The custom event.    */
  onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user scrolls the Tree component and reaches the very topmost position, indicating that no more content is available above within the scrollable area.
	* @param event. The custom event.    */
  onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a leftward swipe gesture within the Tree component. It detects when the user places their finger or cursor on the Tree and moves it horizontally to the left, allowing you to handle custom interactions or navigation in response to this action.
	* @param event. The custom event.    */
  onSwipeleft?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user performs a rightward swipe gesture within the Tree component. It detects when a swipe action starts inside the Tree and moves in the right direction, allowing developers to implement custom behaviors in response to this specific user interaction.
	* @param event. The custom event.    */
  onSwiperight?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Inserts a new item immediately after a specified item within the same parent, making it a sibling element in the list or hierarchy.
   * @param {HTMLElement} item. A smart-tree-item/smart-tree-items-group to add to the Tree
   * @param {string | HTMLElement} sibling. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to add the item after.
   */
  addAfter(item: HTMLElement, sibling: string | HTMLElement): void;
  /**
   * Inserts a new item directly before a specified existing item within the same parent, making both items siblings in the data structure.
   * @param {HTMLElement} item. A smart-tree-item/smart-tree-items-group to add to the Tree
   * @param {string | HTMLElement} sibling. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to add the item before.
   */
  addBefore(item: HTMLElement, sibling: string | HTMLElement): void;
  /**
   * Appends a new item to the end of the specified parent item's list of children, making it the last child within the parent structure.
   * @param {HTMLElement} item. A smart-tree-item/smart-tree-items-group to add to the Tree
   * @param {string | HTMLElement} parent?. The smart-tree-items-group (or its id or numeric path) to add the item to.
   */
  addTo(item: HTMLElement, parent?: string | HTMLElement): void;
  /**
   * Removes any current selections, resetting the selection state to none. This action ensures that no items remain highlighted or marked as selected.
   */
  clearSelection(): void;
  /**
   * Collapses all elements with the class smart-tree-items-group, ensuring that every expandable group within the tree component is minimized and any nested content is hidden from view. This action provides a streamlined overview of the tree by hiding detailed or child items under each group.
   * @param {boolean} animation?. If set to false, disables collapse animation even if animation is enabled for the element.
   */
  collapseAll(animation?: boolean): void;
  /**
   * Collapses the specified smart-tree-items-group, hiding all of its nested child items from view within the tree component. This action changes the group's state to collapsed, providing a more compact tree display by temporarily concealing its contents.
   * @param {HTMLElement | string} item. smart-tree-items-group (or its id or numeric path).
   * @param {boolean} animation?. If set to false, disables collapse animation even if animation is enabled for the element.
   */
  collapseItem(item: HTMLElement | string, animation?: boolean): void;
  /**
   * Closes the dropdown menu when the Tree component is operating in dropdown mode, ensuring that the dropdown is dismissed upon selection or when appropriate user interactions occur.
   */
  closeDropDown(): void;
  /**
   * Displays the dropdown menu when the Tree component is set to dropdown mode, allowing users to interact with the tree structure within a dropdown interface.
   */
  openDropDown(): void;
  /**
   * Ensures that a specified item is brought into the visible area of the scrollable container by automatically scrolling the container as needed, so the item is fully or partially in view for the user.
   * @param {HTMLElement | string} item. The id or numeric path of an item
   */
  ensureVisible(item: HTMLElement | string): void;
  /**
   * Expands all elements within the tree component that are assigned the 'smart-tree-items-group' class, making every group and its child items visible in the tree view.
   * @param {string} animation?. If set to false, disables expand animation even if animation is enabled for the element.
   */
  expandAll(animation?: string): void;
  /**
   * Expands a specific group within the SmartTree component, displaying all child items associated with the selected tree group. This action reveals the contents of a single smart-tree-items-group node, making its nested items visible to the user.
   * @param {HTMLElement | string} item. smart-tree-items-group (or its id or numeric path).
   * @param {boolean} animation?. If set to false, disables expand animation even if animation is enabled for the element.
   */
  expandItem(item: HTMLElement | string, animation?: boolean): void;
  /**
   * Applies a filter to the Tree component, displaying only the nodes that match the specified criteria while hiding all others. This helps users easily find and focus on relevant items within the tree structure.
   * @param {string} filterQuery. Filter query.
   */
  filter(filterQuery: string): void;
  /**
   * Retrieves a specific item by using either its unique identifier (ID) or a numeric path value. This function supports both string-based IDs and numeric paths to locate and return the corresponding item from the collection.
   * @param {string} id. The id or numeric path of an item.
   * @returns {HTMLElement}
   */
  getItem(id: string): HTMLElement;
  /**
   * Retrieves the currently active filter, including its criteria and settings, that has been applied to the data set.
   * @returns {string}
   */
  getFilter(): string;
  /**
   * Retrieves the currently selected values from the component. If no value is explicitly set, the method returns the labels of the selected items instead.
   * @returns {string[]}
   */
  getSelectedValues(): string[];
  /**
   * Returns the current state of the SmartTree component, including information such as which nodes are expanded, collapsed, selected, or checked. This allows you to save or restore the tree’s structure and user interactions.
   * @returns {any}
   */
  getState(): any;
  /**
   * Inserts a specified item into the array or list at the designated index, shifting subsequent items to the right to accommodate the new element. If the given position is out of range, an error may be thrown or the item may be added at the nearest valid position, depending on implementation.
   * @param {any} item. A smart-tree-item/smart-tree-items-group (or an Object to create an item from) to add to the Tree. If an Object is passed, the available fields are <strong>tagName</strong> (<em>'smart-tree-item'</em> - default - or <em>'smart-tree-items-group'</em>), <strong>disabled</strong>, <strong>expanded</strong> (only if <strong>tagName</strong> is <em>'smart-tree-items-group'</em>), <strong>(items)</strong> (only if <strong>tagName</strong> is <em>'smart-tree-items-group'</em>), <strong>(label)</strong>, <strong>separator</strong>, <strong>shortcut</strong> (only if <strong>tagName</strong> is <em>'smart-tree-item'</em>), and <strong>(value)</strong>. (items), (label), and (value) have to correspond to the values of <strong>itemsMember</strong>, <strong>displayMember</strong>, and <strong>valueMember</strong> respectively.
   * @param {string} path?. The path to insert the item at.
   */
  insert(item: any, path?: string): void;
  /**
   * Loads and restores the current state of the Tree, including expanded or collapsed branches, selected nodes, and any custom configurations. This ensures the Tree appears as it was previously saved or last interacted with.
   * @param {any} state?. An object returned by one of the methods <strong>getState</strong> or <strong>saveState</strong>. If a state is not passed, the method tries to load the state from the browser's localStorage.
   */
  loadState(state?: any): void;
  /**
   * Moves the selected item one position lower in the order among its sibling elements, placing it directly after the next sibling in the list.
   * @param {HTMLElement | string} item. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
   */
  moveDown(item: HTMLElement | string): void;
  /**
   * Moves the specified item one position higher in the list of its sibling items, effectively placing it before the previous sibling in the order.
   * @param {HTMLElement | string} item. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
   */
  moveUp(item: HTMLElement | string): void;
  /**
   * Removes a specified item from the collection or list. This operation locates the target item based on the provided identifier or criteria and deletes it from the data structure, ensuring that the collection is updated accordingly. If the item does not exist, no action is taken.
   * @param {HTMLElement | string} item. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
   */
  removeItem(item: HTMLElement | string): void;
  /**
   * Persists the current state of the Tree structure, including all nodes, their expanded or collapsed statuses, and any selection information, allowing the Tree to be accurately restored in future sessions.
   * @returns {any}
   */
  saveState(): any;
  /**
   * Allows selection of an item either by specifying its numerical index in the list or by providing the item's unique HTMLElement ID. This enables precise targeting of elements for further operations.
   * @param {HTMLElement | string} item. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
   */
  select(item: HTMLElement | string): void;
  /**
   * Selects one or multiple items from a list based on their specified values. This allows you to programmatically choose which items are highlighted or marked as selected, using their corresponding value identifiers.
   * @param {string | string[]} items. The smart-tree-item/smart-tree-items-group values or labels, if values are not defined.
   */
  setSelectedValues(items: string | string[]): void;
  /**
   * Deselects a specified item, either by providing its numeric index in the list or by passing the item's HTMLElement ID as a string.
   * @param {HTMLElement | string} item. The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
   */
  unselect(item: HTMLElement | string): void;
  /**
   * Deselects one or more items based on their specified values, removing them from the current selection set.
   * @param {string | string[]} items. The smart-tree-item/smart-tree-items-group values or labels, if values are not defined.
   */
  unselectValues(items: string | string[]): void;
  /**
   * Updates an existing item in the database with new values provided in the request. This operation locates the item by its unique identifier and applies the specified changes to its properties. Returns the updated item upon success.
   * @param {HTMLElement | string} item. smart-tree-item/smart-tree-items-group (or its id or numeric path).
   * @param {any} newItem. An object with updated properties.
   */
  updateItem(item: HTMLElement | string, newItem: any): void;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tree"): Tree;
        querySelector(selectors: "smart-tree"): Tree | null;
        querySelectorAll(selectors: "smart-tree"): NodeListOf<Tree>;
        getElementsByTagName(qualifiedName: "smart-tree"): HTMLCollectionOf<Tree>;
        getElementsByName(elementName: "smart-tree"): NodeListOf<Tree>;
    }
}

/**Specifies how TreeItemGroups within the Tree expand or collapse, controlling whether multiple groups can be expanded simultaneously, only one group can be expanded at a time, or all groups are collapsed by default. This setting defines the expand/collapse interaction pattern for grouped items in the Tree structure. */
export declare type TreeExpandMode = 'multiple' | 'single';
/**Specifies whether to display a traditional scrollbar or to use scroll buttons for navigating content when the element’s content exceeds its visible area. This setting controls the user’s method of scrolling in overflow situations. */
export declare type TreeScrollMode = 'scrollbar' | 'scrollButtons';
/**Specifies the visual style or method used to highlight selected items, such as changing their background color, border, or font style, to indicate their selection state to the user. */
export declare type TreeSelectionDisplayMode = 'row' | 'label';
/**Specifies how selections can be made within the component, such as allowing single selection, multiple selections, or no selection at all. */
export declare type TreeSelectionMode = 'none' | 'oneOrManyExtended' | 'zeroOrMany' | 'oneOrMany' | 'zeroAndOne' | 'zeroOrOne' | 'one' | 'checkBox' | 'radioButton';
/**Specifies whether selection is enabled for jqx-tree-items-groups, allowing users to select one or more groups within the tree component. When set to true, group items in the jqxTree can be selected by user interaction. */
export declare type TreeSelectionTarget = 'all' | 'leaf';
/**Specifies the sort order to be applied, allowing values of either 'ascending' (arranging items from lowest to highest) or 'descending' (arranging items from highest to lowest). */
export declare type TreeSortDirection = 'ascending' | 'descending';
/**Controls how groups within jqx-tree-items are expanded or collapsed. Specifies the toggle behavior for displaying or hiding group items in the jqxTree component. */
export declare type TreeToggleMode = 'click' | 'dblclick' | 'arrow';
export interface TreeItemProperties {
  /**
   * Controls whether the element is enabled (interactive) or disabled (non-interactive). When disabled, the element cannot be interacted with by the user and may appear visually dimmed or inactive.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * 
   * Default value: 
   */
  label?: any;
  /**
   * 
   * Default value: null
   */
  level?: number;
  /**
   * 
   * Default value: false
   */
  selected?: boolean;
  /**
   * 
   * Default value: true
   */
  separator?: boolean;
  /**
   * 
   * Default value: ""
   */
  shortcut?: string;
  /**
   * 
   * Default value: null
   */
  value?: any;
  /**
   * Prevents users from interacting with the item, disabling all actions such as clicking, tapping, dragging, or keyboard input. The item will not respond to any user-generated events while this setting is enabled.
   * Default value: false
   */
  readonly?: boolean;
}
/**
 Defines a tree items.
*/
export interface TreeItem extends BaseElement, TreeItemProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tree-item"): TreeItem;
        querySelector(selectors: "smart-tree-item"): TreeItem | null;
        querySelectorAll(selectors: "smart-tree-item"): NodeListOf<TreeItem>;
        getElementsByTagName(qualifiedName: "smart-tree-item"): HTMLCollectionOf<TreeItem>;
        getElementsByName(elementName: "smart-tree-item"): NodeListOf<TreeItem>;
    }
}

export interface TreeItemsGroupProperties {
  /**
   * Controls whether the element is active and can be interacted with by the user. When enabled, the element responds to user input; when disabled, it appears inactive and does not accept interactions.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * 
   * Default value: false
   */
  expanded?: boolean;
  /**
   * 
   * Default value: 
   */
  label?: any;
  /**
   * 
   * Default value: null
   */
  level?: number;
  /**
   * 
   * Default value: false
   */
  selected?: boolean;
  /**
   * 
   * Default value: true
   */
  separator?: boolean;
  /**
   * 
   * Default value: null
   */
  value?: any;
  /**
   * Prevents users from interacting with the item by disabling all mouse, keyboard, and touch events, making the item unresponsive to user actions.
   * Default value: false
   */
  readonly?: boolean;
}
/**
 Defines a group of tree items.
*/
export interface TreeItemsGroup extends BaseElement, TreeItemsGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
}

declare global {
    interface Document {
        createElement(tagName: "smart-tree-items-group"): TreeItemsGroup;
        querySelector(selectors: "smart-tree-items-group"): TreeItemsGroup | null;
        querySelectorAll(selectors: "smart-tree-items-group"): NodeListOf<TreeItemsGroup>;
        getElementsByTagName(qualifiedName: "smart-tree-items-group"): HTMLCollectionOf<TreeItemsGroup>;
        getElementsByName(elementName: "smart-tree-items-group"): NodeListOf<TreeItemsGroup>;
    }
}

export interface ValidatorProperties {
  /**
   * 
   * Default value: null
   */
  rules?: ValidatorRule[];
  /**
   * Specifies a valid CSS selector that identifies the HTML element on the page which will serve as the container for displaying validation error messages. This selector determines where the error messages will appear within the user interface.
   * Default value: ""
   */
  validationSummarySelector?: string;
}
/**
 Validator plug-in is used to validate form elements.
*/
export interface Validator extends BaseElement, ValidatorProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Removes all error messages from the current context, ensuring that no error notifications are displayed to the user. This action resets the error state, allowing for a clean user experience without residual error indicators.
   */
  reset(): void;
  /**
   * Displays the drop-down menu, making its list of options visible to the user.
   * @param {Function} result?. A callback function to call when validating inputs.
   */
  validate(result?: Function): void;
}

export interface ValidatorRule {
  /**
   * A comma-separated list of events to validate the input(s) on.
   * Default value: ""
   */
  action?: string;
  /**
   * A callback function whose result to compare to the input value by the comparisonType in order to show the validation message. Applicable when type is 'compare'.
   * Default value: 
   */
  comparisonTarget?: { (inputElement: any, rule: ValidatorRule): any };
  /**
   * An operator to compare the input value by with the result of comparisonTarget in order to show the validation message. Applicable when type is 'compare'.
   * Default value: "=="
   */
  comparisonType?: string;
  /**
   * A valid CSS selector of the input(s) to validate.
   * Default value: ""
   */
  input?: string;
  /**
   * The max value of an input when the rule type is 'stringLength' or the max number of characters in the input's value when the rule type is 'range'.
   * Default value: 
   */
  max?: number | Date;
  /**
   * A message to display on focus of the input and in the validation summary if the input's value is not valid.
   * Default value: ""
   */
  message?: string;
  /**
   * The min value of an input when the rule type is 'stringLength' or the min number of characters in the input's value when the rule type is 'range'.
   * Default value: 
   */
  min?: number | Date;
  /**
   * A regular expression the input's value must match when the rule type is 'pattern'.
   * Default value: 
   */
  pattern?: RegExp;
  /**
   * The type of validation the rule makes.
   * Default value: required
   */
  type?: ValidatorRuleType | string;
  /**
   * A callback function to validate the input's value by when the rule's type is 'custom'.
   * Default value: 
   */
  validationCallback?: { (inputElement: any): boolean };
}

declare global {
    interface Document {
        createElement(tagName: "jqxValidator"): Validator;
        querySelector(selectors: "jqxValidator"): Validator | null;
        querySelectorAll(selectors: "jqxValidator"): NodeListOf<Validator>;
        getElementsByTagName(qualifiedName: "jqxValidator"): HTMLCollectionOf<Validator>;
        getElementsByName(elementName: "jqxValidator"): NodeListOf<Validator>;
    }
}

/**The type of validation the rule makes. */
export declare type ValidatorRuleType = 'compare' | 'custom' | 'email' | 'notNumber' | 'numeric' | 'pattern' | 'phone' | 'range' | 'required' | 'startWithLetter' | 'stringLength' | 'zipCode';
export interface WindowProperties {
  /**
   * Determines whether the 'Add New' tab within the Tabs element is currently visible to the user.  Note: This property is only relevant when used with the TabsWindow component; it does not apply to other components.
   * Default value: false
   */
  addNewTab?: boolean;
  /**
   * Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled and behave according to the specified mode.
   * Default value: advanced
   */
  animation?: Animation | string;
  /**
   * Controls the automatic capitalization behavior for user input as it is entered or edited. This setting specifies whether characters are auto-capitalized (e.g., sentences, words, or all characters) in the input field. Note: This property is only relevant when used with the MultilinePromptWindow component.
   * Default value: none
   */
  autoCapitalize?: WindowAutoCapitalize | string;
  /**
   * Specifies whether the element should automatically expand its height to accommodate vertically overflowing input.  Note: This setting only applies to MultilinePromptWindow components.
   * Default value: false
   */
  autoExpand?: boolean;
  /**
   * Specifies the text displayed on the 'Cancel' button within the Prompt Window. This label informs users which button will dismiss or close the prompt without taking any action.
   * Default value: "Cancel"
   */
  cancelLabel?: string;
  /**
   * Specifies the text that appears on the 'Complete' button within the Progress Window, allowing customization of the button label to better suit user interface requirements.
   * Default value: "Confirm"
   */
  completeLabel?: string;
  /**
   * Specifies the text displayed on the 'Confirm' button within the Prompt Window, allowing customization of the button label to suit your application's context.
   * Default value: "Confirm"
   */
  confirmLabel?: string;
  /**
   * Indicates whether the window is currently collapsed. When set to true, only the window's header is displayed while the content area is hidden. If false, both the header and the full content of the window are visible.
   * Default value: false
   */
  collapsed?: boolean;
  /**
   * When a modal window is opened, this property specifies whether clicking on the overlay (mask) outside the modal will close the window. Set it to true to allow users to dismiss the modal by clicking the mask, or false to require an explicit action (such as clicking a close button) to close the modal.
   * Default value: false
   */
  closeOnMaskClick?: boolean;
  /**
   * Specifies the data source to be loaded into the TabsWindow component. This property is relevant exclusively for the TabsWindow and will not affect other components.
   * Default value: null
   */
  dataSource?: {label: string, content: string}[];
  /**
   * Controls whether the window is active and visible to the user. When enabled, the window is operational and can be interacted with; when disabled, the window is hidden or inactive, and user interactions are ignored.
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Controls whether the window snapping feature is active. When enabled, users can automatically align and resize windows by dragging them to the edges or corners of the screen. Disabling this feature prevents windows from snapping into place during movement.
   * Default value: false
   */
  disableSnap?: boolean;
  /**
   * By default, pressing the 'Escape' key will automatically close the window. To prevent the window from closing when 'Escape' is pressed, set this property to true.
   * Default value: false
   */
  disableEscape?: boolean;
  /**
   * By default, the window handles certain keyboard inputs such as the arrow keys ('ArrowUp', 'ArrowDown', etc.), 'Escape', and similar keys for scrolling or navigation actions. Set this property to true to disable the window’s default keyboard handling, allowing you to manage these key events manually within your application.
   * Default value: false
   */
  disableKeyboard?: boolean;
  /**
   * Specifies the visual presentation of characters entered within the input field. For example, this setting can control whether characters are shown as plain text or masked (such as for password fields). This option applies specifically to the Prompt Window component.
   * Default value: default
   */
  displayMode?: WindowDisplayMode | string;
  /**
   * ''Applicable to TabsWindow components when they are docked within a DockingLayout Custom Element.This property specifies the valid drop locations for the window—and its tab items—inside the DockingLayout. The property accepts an array of positional values, allowing you to define multiple allowable drop zones.Details:  Positions prefixed with 'layout-' apply to each individual tab item (child element) of the TabsWindow being dragged. These determine where tab items can be dropped within the overall layout, outside their original container.  Other position values (without the 'layout-' prefix) indicate allowed drop positions directly within the hovered target TabsWindow, specifying where the whole window or its tabs can be placed relative to the target window.Notes:  This property is used exclusively by jqxDockingLayout custom elements.  It controls the possible drop targets—both at the window and tab levels—within the DockingLayout environment.Allowed Values:  The array values specify the permitted drop positions. Refer to the documentation for a complete list of supported position strings.
   * Default value: 
   */
  dropPosition?: WindowDropPosition | string;
  /**
   * A callback function that specifies how to format the label displayed on the Progress Bar. This function allows customization of the label's content or appearance based on the current progress value.  Note: This property is only applicable to the ProgressWindow component.
   * Default value: null
   */
  formatFunction?: any;
  /**
   * Specifies the exact placement or alignment of the footer section within the window element, such as positioning it at the bottom, fixed, absolute, or relative to other content. This property controls where the footer appears in relation to the window’s layout.
   * Default value: top
   */
  footerPosition?: WindowFooterPosition | string;
  /**
   * Specifies the custom template used to render the footer section of the Dialog window. If footerTemplate is set to null (the default), the Dialog will not display a footer section. You can provide a template string or a function to customize the appearance and content of the Dialog’s footer.
   * Default value: null
   */
  footerTemplate?: any;
  /**
   * Specifies which buttons will be displayed in the header section, allowing you to control the visibility of header actions for users.
   * Default value: close,maximize,minimize
   */
  headerButtons?: string[];
  /**
   * Specifies the custom template to be used for rendering the header section of the dialog window. If headerTemplate is set to null (the default value), the dialog will display its standard header layout. By providing a template, you can fully customize the appearance and content of the dialog's header area.
   * Default value: null
   */
  headerTemplate?: any;
  /**
   * Specifies the exact placement of the header section within the window element, such as top, bottom, left, or right. This setting controls where the header appears relative to the content of the window.
   * Default value: top
   */
  headerPosition?: TabPosition | string;
  /**
   * Displays supplementary helper text beneath the text box, providing users with additional guidance or context. This hint appears only when the text box is focused (i.e., the user is actively typing or has selected the field).  Note: This property is specifically applicable to the Prompt Window component.
   * Default value: null
   */
  hint?: any;
  /**
   * Sets the Progress bar value to the indeterminate state ('null'), activating its loading animation to indicate ongoing progress without a defined endpoint.  Note: This property is only applicable when used within a ProgressWindow component.
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Specifies the direction in which the Progress Bar fills (e.g., left-to-right, right-to-left, top-to-bottom, or bottom-to-top).  Note: This property is only applicable when used within a ProgressWindow component.
   * Default value: false
   */
  inverted?: boolean;
  /**
   * Specifies the text displayed as the window title in the header section, typically shown at the top of the application window or dialog box.
   * Default value: ""
   */
  label?: string;
  /**
   * When enabled, the resizing operation updates the element’s size in real time as the user drags its edges, providing immediate visual feedback. By default, this feature is disabled; instead, a highlighter appears around the edges of the window during resizing to indicate the prospective new size, while the element itself resizes only once the operation is complete.
   * Default value: false
   */
  liveResize?: boolean;
  /**
   * Note: This property is relevant only for TabsWindow elements that are utilized within a DockingLayout custom element.This property is exclusively used by jqxDockingLayout to specify ownership of a TabsWindow. It determines which jqxDockingLayout instance the window is associated with. If a TabsWindow is removed from its parent DockingLayout element, this property continues to reference the original docking layout to which it belonged.The property accepts either:  A string representing the id of a jqxDockingLayout present on the page.  An instance of a jqxDockingLayout object.This allows for flexible identification of the owning layout, either by ID or by direct reference to the layout instance.
   * Default value: null
   */
  layout?: any;
  /**
   * Gets or sets the unlockKey, a unique code required to activate or unlock access to the product’s full features or licensed functionality.
   * Default value: ""
   */
  unlockKey?: string;
  /**
   * Specifies the language to be used for displaying messages. This property can be set or retrieved, and works in conjunction with the messages property to determine which set of localized messages is shown to the user. Changing the language updates the displayed messages accordingly.
   * Default value: "en"
   */
  locale?: string;
  /**
   * Note: This property is only applicable to a TabsWindow when it is docked within a DockingLayout custom element. When enabled, it controls whether the TabsWindow can be resized by the user. If set to true, users will be able to adjust the size of the TabsWindow within the DockingLayout; if set to false, resizing will be disabled and the TabsWindow will have a fixed size.
   * Default value: false
   */
  locked?: boolean;
  /**
   * Callback function used within the localization module, typically invoked when a localization event occurs (e.g., language change, resource load). This callback handles tasks such as updating UI elements or retrieving localized content based on the current language settings.
   * Default value: null
   */
  localizeFormatFunction?: any;
  /**
   * Indicates whether the window is currently maximized. When set to true, the window expands to fill the entire available viewport, covering all other interface elements and leaving no visible borders or title bars. If false, the window retains its previous size and position. This property can be used to programmatically check or control the window’s maximized state within the application.
   * Default value: false
   */
  maximized?: boolean;
  /**
   * Defines or retrieves an object containing localized strings used throughout the widget’s user interface. This property allows developers to customize the widget’s displayed text for different languages and regions. It is typically used together with the locale property to ensure that the widget adapts its content based on the selected language or regional settings.
   * Default value:    * {
   *   "en": {
   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
   *     "propertyInvalidValue": "Invalid '!",
   *     "propertyInvalidValueType": "Invalid '!",
   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
   *     "moduleUndefined": "Module is undefined.",
   *     "missingReference": ".",
   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
   *   }
   * }
   */
  messages?: any;
  /**
   * Specifies whether the window should function as a modal dialog. When set to true, the window captures user focus and prevents interaction with any other elements on the page until it is closed. This ensures that the user must address or dismiss the modal window before returning to the rest of the content.
   * Default value: false
   */
  modal?: boolean;
  /**
   * For use with TabsWindow when docked within a DockingLayout custom element:  Specifies the maximum size that the TabsWindow component can occupy when it is docked.  For the ProgressWindow component:  Defines the maximum value for the progress bar, allowing users to set the upper limit of the ProgressBar's range.
   * Default value: 
   */
  max?: string | number | null;
  /**
   * Applicable to TabsWindow when docked inside a DockingLayout custom element. Specifies the minimum allowed size for the item within the layout, ensuring it does not shrink below this value during resizing operations.Also applies to ProgressWindow, where it lets the user set the minimum value for the ProgressBar, defining the lowest possible progress state that can be represented.
   * Default value: 
   */
  min?: string | number | null;
  /**
   * Indicates whether the window is currently minimized. When set to true, the window is reduced to an icon or compact form and positioned (docked) in the bottom left corner of the viewport. If false, the window remains in its normal, active state.
   * Default value: false
   */
  minimized?: boolean;
  /**
   * Specifies or retrieves the maximum number of characters a user is allowed to enter into the input field. This property applies to both Prompt and MultilinePrompt windows. If set, the input will be limited to the defined character count, preventing users from entering more characters than specified.
   * Default value: null
   */
  maxLength?: number;
  /**
   * Defines the minimum number of characters a user must enter before the autocomplete feature is activated. This property can be both set (to specify the desired threshold) and retrieved (to check the current threshold).  Note: This setting is only applicable to Prompt and MultilinePrompt windows.
   * Default value: 2
   */
  minLength?: number;
  /**
   * Indicates whether the window is currently visible to the user. Returns true if the window is displayed on the screen and can be interacted with, and false if it is hidden or minimized.
   * Default value: false
   */
  opened?: boolean;
  /**
   * Indicates whether the window is pinned. A pinned window cannot be moved (dragged) by the user, but it can still be resized. When set to true, this property disables window dragging while allowing resizing operations.
   * Default value: false
   */
  pinned?: boolean;
  /**
   * Specifies the placeholder text that appears inside the input field before the user enters a value.  Note: This option is only applicable to the Prompt Window component.
   * Default value: ""
   */
  placeholder?: string;
  /**
   * Specifies the text label displayed above or alongside the input field within the PromptWindow component. This label helps users understand what information is expected in the input field.
   * Default value: ""
   */
  promptLabel?: string;
  /**
   * If the element has the "readonly" attribute, users cannot modify its value; the field will display data in a non-editable state, though users can still select and copy its contents. This differs from a "disabled" element, as a "readonly" field remains focusable and included in form submissions.
   * Default value: false
   */
  readonly?: boolean;
  /**
   * When this option is enabled, a resize handle appears in the bottom-right corner of the window. Users can initiate the resizing operation exclusively by dragging this indicator; resizing from any other window edge or corner is disabled.
   * Default value: false
   */
  resizeIndicator?: boolean;
  /**
   * Specifies how the window can be resized by the user.Available resizing modes:  none – Disables all window resizing; the window size is fixed.  vertical – Allows the window to be resized only vertically (top and bottom edges).  horizontal – Allows the window to be resized only horizontally (left and right edges).  both – Enables both horizontal and vertical resizing; the window can be resized in any direction.  top – The window can only be resized by dragging the top edge.  bottom – The window can only be resized by dragging the bottom edge.  left – The window can only be resized by dragging the left edge.  right – The window can only be resized by dragging the right edge.Choose the desired mode to control which edges of the window users can drag to resize, or to prevent resizing entirely.
   * Default value: none
   */
  resizeMode?: WindowResizeMode | string;
  /**
   * Gets or sets a value that determines whether the element’s alignment is configured to support right-to-left (RTL) languages and text direction, such as Arabic or Hebrew. Use this property to ensure proper display and alignment for locales that require RTL font and layout support.
   * Default value: false
   */
  rightToLeft?: boolean;
  /**
   * Indicates that the input field is required and must be filled out by the user before the form can be submitted. If left empty, the form submission will be blocked, prompting the user to complete this field.  'Note:' This setting is applicable to the Prompt Window.
   * Default value: false
   */
  required?: boolean;
  /**
   * Defines the error message displayed when the required attribute is enabled and the user submits the input field without providing a value. This setting only applies to the Prompt Window interface.
   * Default value: ""
   */
  requiredMessage?: string;
  /**
   * Specifies whether the input field's content should be automatically highlighted (selected) when the field gains focus.  Note: This setting applies specifically to the Prompt Window component.
   * Default value: false
   */
  selectAllOnFocus?: boolean;
  /**
   * Specifies or retrieves the currently selected tab within the component. This property applies exclusively to the TabsWindow component.
   * Default value: null
   */
  selectedIndex?: number | null;
  /**
   * Specifies how the user is allowed to navigate between different tabs within the interface. This property is relevant only when using the TabsWindow component.
   * Default value: click
   */
  selectionMode?: TabSelectionMode | string;
  /**
   * Specifies the zero-based index position of the last character included in the current text selection.  Note: This property is relevant only for use within MultilinePromptWindow components.
   * Default value: 0
   */
  selectionEnd?: number;
  /**
   * Specifies the zero-based index of the first character in the currently selected text within the prompt window. This property is only applicable when using the MultilinePromptWindow component.
   * Default value: 0
   */
  selectionStart?: number;
  /**
   * Controls the visibility of the label displayed on the Progress Bar.  Note: This setting is only applicable when used within the Progress Window component.
   * Default value: false
   */
  showProgressValue?: boolean;
  /**
   * A getter that retrieves all sibling LayoutPanel instances—those sharing the same immediate parent—when a LayoutPanel item is docked within a DockingLayout. The returned siblings are also DockingLayout items (specifically, other LayoutPanels).  This property is only available for TabsWindow components that are docked inside a DockingLayout.
   * Default value: 
   */
  siblings?: any;
  /**
   * Relevant when a TabsWindow component is nested within a DockingLayout custom element. This property specifies the size (width or height, depending on layout orientation) allocated to the TabsWindow within the docking layout, allowing developers to control how much space the window occupies relative to other docked components.
   * Default value: ""
   */
  size?: string;
  /**
   * Indicates whether spelling and grammar checking should be enabled for the element. This property determines if the content entered within the element will be reviewed for spelling and grammatical errors. Note: This option is only relevant for the MultilinePromptWindow component.
   * Default value: false
   */
  spellCheck?: boolean;
  /**
   * Determines whether close buttons are shown on each tab within the Tab Strip of the TabsWindow. You can use this property to enable or disable the visibility of close buttons on tabs, allowing users to close individual tabs directly from the Tab Strip.  Note: This property is only applicable to the TabsWindow component.
   * Default value: false
   */
  tabCloseButtons?: boolean;
  /**
   * Specifies when the close button is visible—either only when a tab is selected or always visible on all tabs.  Note: This property applies exclusively to the TabsWindow component.
   * Default value: default
   */
  tabCloseButtonMode?: WindowTabCloseButtonMode | string;
  /**
   * Specifies how the scroll buttons for tabs are displayed or behave. This option is only relevant when the tabLayout property is set to 'scroll', allowing tabs to be scrolled horizontally. Note: This property applies exclusively to the TabsWindow component.
   * Default value: auto
   */
  tabOverflow?: Overflow | string;
  /**
   * Determines the position of the Tab Strip within the TabsWindow.  Note: This property applies exclusively to the TabsWindow component.
   * Default value: top
   */
  tabPosition?: TabPosition | string;
  /**
   * Defines or retrieves the position of the scroll buttons located within the tab header of a TabsWindow component. This setting is exclusively applicable to TabsWindow instances and allows you to control where the scroll buttons appear (for example, at the start, end, or both ends of the tab header).
   * Default value: both
   */
  tabScrollButtonsPosition?: LayoutPosition | string;
  /**
   * Defines or retrieves the orientation of the text displayed in the tab labels within the TabsWindow component. This property determines whether the tab text is laid out horizontally or vertically. Note: This property is exclusively applicable to the TabsWindow component and has no effect on other components.
   * Default value: horizontal
   */
  tabTextOrientation?: Orientation | string;
  /**
   * Specifies the visual theme to be applied. The theme controls the appearance, including colors, fonts, and styling, of the element to ensure a consistent look and feel across the user interface.
   * Default value: ""
   */
  theme?: string;
  /**
   * If this property is set to true, the element will be excluded from keyboard navigation and cannot receive focus either programmatically or via user interaction. This ensures that users will be unable to focus on the element using methods such as the Tab key or calling focus() in JavaScript.
   * Default value: false
   */
  unfocusable?: boolean;
  /**
   * Specifies the current value displayed within the TextBox or ProgressBar component inside a Dialog, Prompt, or Progress Window. This value can represent user input (for TextBox) or progress status (for ProgressBar) and is used to dynamically update the UI element's content or state.
   * Default value: 
   */
  value?: string | number;
  /**
   * Specifies the actual parent element of the target element. The window's sizing and movement are restricted to the boundaries of this parent element, meaning the window can only be resized or repositioned within the visible area of the designated parent.
   * Default value: null
   */
  windowParent?: any;
  /**
   * Specifies the text-wrapping behavior for the input field.  Note: This property is only relevant when used with the MultilinePromptWindow component.
   * Default value: soft
   */
  wrap?: WindowWrap | string;
}
/**
 Window or Dialog displays the interactive custom confirmations, message boxes, alerts, warnings, errors, and modal dialogs.
*/
export interface Window extends BaseElement, WindowProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * This event is triggered immediately before the window begins its opening process, allowing developers to perform any preparatory actions or modifications prior to the window becoming visible to the user.
	* @param event. The custom event.    */
  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the window becomes visible to the user—specifically, when it is opened or brought into view.
	* @param event. The custom event.    */
  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered immediately before the window begins the closing process, allowing developers to execute custom logic or prompt the user for confirmation before the window is fully closed.
	* @param event. The custom event.    */
  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the window is closed or becomes hidden, such as when the user closes the browser tab, navigates away, or minimizes the window, causing it to no longer be visible to the user.
	* @param event. The custom event.    */
  onClose: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the application window is minimized or collapsed by the user. It allows you to execute custom logic in response to the window being hidden from view.
	* @param event. The custom event.    */
  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user finishes dragging the window, signaling the completion of the drag-and-drop operation. It occurs after the mouse button is released and the window movement has stopped.
	* @param event. The custom event.    */
  onDragEnd: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered when the user initiates a window drag operation, indicating that the dragging of the window has begun. It fires as soon as the user starts moving the window, typically by clicking and holding the window's title bar.
	* @param event. The custom event.    */
  onDragStart: ((this: any, ev: Event) => any) | null;
  /**
   * This event is triggered whenever the window is resized to a larger size, indicating that the user has expanded the window either by dragging its edges or by maximizing it.
	* @param event. The custom event.    */
  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the application window transitions into a maximized state. It fires immediately after the window expands to fill the available screen space, allowing developers to implement custom logic in response to the window being maximized by the user or programmatically.
	* @param event. The custom event.    */
  onMaximize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered whenever the application window is minimized by the user. It occurs immediately after the minimize action takes place, allowing developers to execute custom logic—such as pausing background processes, saving state, or updating the UI—in response to the window being minimized.
	* @param event. The custom event.    */
  onMinimize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user completes resizing the browser window, specifically after the resizing action has finished and the window size is no longer changing.
	* @param event. The custom event.    */
  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the user initiates a window resize action, such as clicking and dragging the window’s edge or corner to change its dimensions. It marks the beginning of the window resizing process, allowing you to execute scripts or handle UI updates as soon as resizing starts.
	* @param event. The custom event.    */
  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * This event is triggered when the window is returned to its original size and position after being maximized, effectively restoring it to the state it was in prior to maximization.
	* @param event. The custom event.    */
  onRestore?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Appends a new tab item to the end of the existing list of tab items within the specified parent element. This operation updates the parent element's tab item collection, ensuring the new tab appears as the last item in the tab navigation.
   * @param {Node} node. A TabItem element that should be added to the rest of the items as the last item.
   * @returns {Node}
   */
  appendChild<T extends Node>(node: Node): T;
  /**
   * Sets the window to the highest z-order level, bringing it to the foreground and ensuring it is visible and accessible for user interaction above all other open windows.
   */
  bringToFront(): void;
  /**
   * Removes all existing content from the window, effectively resetting the window’s display area to an empty state. This operation clears any text, images, or elements currently visible within the window.
   */
  clear(): void;
  /**
   * Closes the currently active window in the application, terminating its user interface and releasing any associated resources. If there are unsaved changes or prompts, the user may be asked to confirm before the window is closed.
   */
  close(): void;
  /**
   * Minimizes the window, reducing it to a smaller icon or hidden state, without closing the application.
   * @returns {HTMLElement}
   */
  collapse(): HTMLElement;
  /**
   * Ensures the specified tab item is brought into view by automatically scrolling the tab bar as needed. <strong>This functionality is exclusive to the TabsWindow component.</strong>
   * @param {number} index. The index of the tab to scroll to.
   */
  ensureVisible(index: number): void;
  /**
   * Restores the window to its full size and visibility after it has been collapsed or minimized, allowing users to view and interact with its contents again.
   * @returns {any[]}
   */
  expand(): any[];
  /**
   * Inserts a new tab along with its corresponding content section into the user interface. <strong>This function is specifically designed for use within the <code>TabsWindow</code> component and will not operate outside of this context.</strong>
   * @param {number} index. The index to insert a new tab at.
   * @param {any} details. An Object with the fields "label", "labelSize", "content" and "group".
   */
  insert(index: number, details: any): void;
  /**
   * Inserts the specified "smart-tab-item" node directly before the reference "smart-tab-item" node within the tab collection. <strong>This operation is only applicable when manipulating tab items inside a TabsWindow component.</strong>
   * @param {Node} newNode. The "smart-tab-item" node to insert.
   * @param {Node | null} referenceNode?. The "smart-tab-item" node before which newNode is inserted.
   * @returns {Node}
   */
  insertBefore<T extends Node>(newNode: Node, referenceNode?: Node | null): T;
  /**
   * Revised Description:<br/>"Sets the window's position on the screen by moving it to specified X and Y coordinates, effectively relocating the window to a new location."
   * @param {string | number} left. Left position. For example: '100px'. 
   * @param {string | number} top. Top position. For example: '100px'. 
   */
  move(left: string | number, top: string | number): void;
  /**
   * Expands the window to occupy the entire available viewing area, ensuring it fills all usable screen space without overlapping system taskbars or menus.
   */
  maximize(): void;
  /**
   * Reduces the window to the taskbar or dock, temporarily hiding it from view without closing the application.
   */
  minimize(): void;
  /**
   * Opens a new browser window or tab with the specified URL or content, allowing additional web pages or resources to be displayed alongside the current page.
   */
  open(): void;
  /**
   * Prevents the window from being moved by locking its position. Disables the ability to drag or reposition the window, ensuring it remains fixed in place.
   */
  pin(): void;
  /**
   * Removes a tab along with its corresponding content section from the interface. <strong>This function is designed to work exclusively within the TabsWindow component.</strong>
   * @param {number} index. The index of the tab to remove.
   */
  removeAt(index: number): void;
  /**
   * Removes a child node with the "smart-tab-item" tag from the parent container.  <br/><strong>Note:</strong> This operation is only supported within the TabsWindow component; attempting to use it elsewhere will have no effect.
   * @param {Node} node. The "smart-tab-item" node to remove.
   * @returns {Node}
   */
  removeChild<T extends Node>(node: Node): T;
  /**
   * Restores the window to its previous dimensions and position before it was maximized or minimized, returning it to the exact size and location it had prior to those actions.
   */
  restore(): void;
  /**
   * Selects the specified tab within the interface. <strong>This action applies exclusively to elements of type <code>TabsWindow</code>.</strong>
   * @param {number} index. The index of the tab to select.
   */
  select(index: number): void;
  /**
   * Removes the pinned (fixed) state from the window, allowing the user to freely move or drag the window to a different position on the screen.
   */
  unpin(): void;
  /**
   * Updates the text displayed in the header label to reflect new information or changes, ensuring that the header accurately represents the current content or context of the section.
   * @param {string} label. The new label of the Header.
   */
  updateLabel(label: string): void;
  /**
   * Replaces the existing content with new or modified information, ensuring that the displayed data reflects the latest updates or changes.
   * @param {string | HTMLElement} content. The new content of the window.
   */
  updateContent(content: string | HTMLElement): void;
  /**
   * Updates an individual tab within a TabsWindow component and modifies its corresponding content section. <strong>This operation exclusively applies to elements of the TabsWindow type.</strong> Use this function to change tab labels, update active states, or refresh the content associated with a specific tab within the TabsWindow interface.
   * @param {number} index. The index of the tab to update.
   * @param {string} label. The new label of the tab. The value can be the id of an HTMLTemplateElement
   * @param {string | HTMLElement} content. The new content of the tab.
   */
  update(index: number, label: string, content: string | HTMLElement): void;
}

export interface Dialog extends Window {}


declare global {
    interface Document {
        createElement(tagName: "smart-window"): Dialog;
        querySelector(selectors: "smart-window"): Dialog | null;
        querySelectorAll(selectors: "smart-window"): NodeListOf<Dialog>;
        getElementsByTagName(qualifiedName: "smart-window"): HTMLCollectionOf<Dialog>;
        getElementsByName(elementName: "smart-window"): NodeListOf<Dialog>;
    }
}


declare global {
    interface Document {
		/**
		* Returns the first element that is a descendant of node that matches selectors.
		*/
		querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
		querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
		querySelector<E extends Element = Element>(selectors: string): E | null;
		/**
		* Returns all element descendants of node that match selectors.
		*/
		querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
		querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
		querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
		/**
		 * Gets a collection of objects based on the value of the NAME or ID attribute.
		 * @param elementName Gets a collection of objects based on the value of the NAME or ID attribute.
		 */
		getElementsByName(elementName: string): NodeListOf<HTMLElement>;
		/**
		 * Retrieves a collection of objects based on the specified element name.
		 * @param name Specifies the name of an element.
		 */
		getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
		getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
		getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
	}
}
		/**Controls the automatic capitalization behavior for user input as it is entered or edited. This setting specifies whether characters are auto-capitalized (e.g., sentences, words, or all characters) in the input field. <b>Note:</b> This property is only relevant when used with the <code>MultilinePromptWindow</code> component. */
export declare type WindowAutoCapitalize = 'none' | 'characters' | 'words';
/**Specifies the visual presentation of characters entered within the input field. For example, this setting can control whether characters are shown as plain text or masked (such as for password fields). <b>This option applies specifically to the Prompt Window component.</b> */
export declare type WindowDisplayMode = 'default' | 'escaped';
/**''<br/><br/>Applicable to <code>TabsWindow</code> components when they are docked within a <code>DockingLayout</code> Custom Element.<br/><br/>This property specifies the valid drop locations for the window—and its tab items—inside the <code>DockingLayout</code>. The property accepts an array of positional values, allowing you to define multiple allowable drop zones.<br/><br/><br/><br/>Details:<br/><br/>  Positions prefixed with <code>'layout-'</code> apply to each individual tab item (child element) of the <code>TabsWindow</code> being dragged. These determine where tab items can be dropped within the overall layout, outside their original container.
<br/>  Other position values (without the <code>'layout-'</code> prefix) indicate allowed drop positions directly within the hovered target <code>TabsWindow</code>, specifying where the whole window or its tabs can be placed relative to the target window.
<br/><br/><br/>Notes:<br/><br/>  This property is used exclusively by <code>jqxDockingLayout</code> custom elements.
<br/>  It controls the possible drop targets—both at the window and tab levels—within the <code>DockingLayout</code> environment.
<br/><br/><br/>Allowed Values:  <br/>The array values specify the permitted drop positions. Refer to the documentation for a complete list of supported position strings. */
export declare type WindowDropPosition = 'all' | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'header' | 'layout-top' | 'layout-bottom' | 'layout-left' | 'layout-right';
/**Specifies the exact placement or alignment of the footer section within the window element, such as positioning it at the bottom, fixed, absolute, or relative to other content. This property controls where the footer appears in relation to the window’s layout. */
export declare type WindowFooterPosition = 'bottom' | 'none';
/**Specifies how the window can be resized by the user.<br/><br/>Available resizing modes:<br/><br/><br/>  none – Disables all window resizing; the window size is fixed.
<br/>  vertical – Allows the window to be resized only vertically (top and bottom edges).
<br/>  horizontal – Allows the window to be resized only horizontally (left and right edges).
<br/>  both – Enables both horizontal and vertical resizing; the window can be resized in any direction.
<br/>  top – The window can only be resized by dragging the top edge.
<br/>  bottom – The window can only be resized by dragging the bottom edge.
<br/>  left – The window can only be resized by dragging the left edge.
<br/>  right – The window can only be resized by dragging the right edge.
<br/><br/><br/>Choose the desired mode to control which edges of the window users can drag to resize, or to prevent resizing entirely. */
export declare type WindowResizeMode = 'none' | 'horizontal' | 'vertical' | 'both' | 'top' | 'bottom' | 'left' | 'right';
/**Specifies when the close button is visible—either only when a tab is selected or always visible on all tabs.  <br/>Note: This property applies exclusively to the <code>TabsWindow</code> component. */
export declare type WindowTabCloseButtonMode = 'default' | 'selected';
/**Specifies the text-wrapping behavior for the input field.  <br/><b>Note:</b> This property is only relevant when used with the <code>MultilinePromptWindow</code> component. */
export declare type WindowWrap = 'hard' | 'soft' | 'off';
declare global {
    interface Window {
        Smart: any;
    }
}

export interface BootstrapButtonProperties {
  /**
   * Enables or disables the button. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets the inner HTML of the element.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Outlines the button. 
   * Default value: false
   */
  outlined?: boolean;
  /**
   * Sets or gets the style mode of the button.
   * Default value: primary
   */
  styleMode?: BootstrapButtonStyleMode | string;
  /**
   * Sets or gets the size mode of the element.
   * Default value: ""
   */
  sizeMode?: string;
  /**
   * Sets or gets the type of the button.
   * Default value: "Reset"
   */
  type?: string;
  /**
   * Sets or gets the button's value. 
   * Default value: ""
   */
  value?: string;
}
/**
 Defines a Button component, which includes Material and Bootstrap styles
*/
export interface BootstrapButton extends BaseElement, BootstrapButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Click event.
	* @param event. The custom event.    */
  onClick: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-button"): BootstrapButton;
        querySelector(selectors: "bootstrap-button"): BootstrapButton | null;
        querySelectorAll(selectors: "bootstrap-button"): NodeListOf<BootstrapButton>;
        getElementsByTagName(qualifiedName: "bootstrap-button"): HTMLCollectionOf<BootstrapButton>;
        getElementsByName(elementName: "bootstrap-button"): NodeListOf<BootstrapButton>;
    }
}

/**Sets or gets the style mode of the button. */
export declare type BootstrapButtonStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapCheckBoxProperties {
  /**
   * Gets or sets the checked state of the element. 
   * Default value: false
   */
  checked?: boolean;
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the element is in indeterminate state. 
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Sets the inner HTML of the element.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets whether the element is required. 
   * Default value: false
   */
  required?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapCheckBoxStyleMode | string;
}
/**
 Defines a CheckBox component, which includes Material and Bootstrap styles
*/
export interface BootstrapCheckBox extends BaseElement, BootstrapCheckBoxProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the checkbox is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Toggles the checkbox
   */
  toggle(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-check-box"): BootstrapCheckBox;
        querySelector(selectors: "bootstrap-check-box"): BootstrapCheckBox | null;
        querySelectorAll(selectors: "bootstrap-check-box"): NodeListOf<BootstrapCheckBox>;
        getElementsByTagName(qualifiedName: "bootstrap-check-box"): HTMLCollectionOf<BootstrapCheckBox>;
        getElementsByName(elementName: "bootstrap-check-box"): NodeListOf<BootstrapCheckBox>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapCheckBoxStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapCircularProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets the name of the element. 
   * Default value: ""
   */
  name?: string;
  /**
   * Sets or gets the min value
   * Default value: 0
   */
  min?: number;
  /**
   * Sets or gets the max value
   * Default value: 10
   */
  max?: number;
  /**
   * Sets whether stripes are displayed in the progress. 
   * Default value: false
   */
  striped?: boolean;
  /**
   * Sets or gets the style mode of the button.
   * Default value: primary
   */
  styleMode?: BootstrapCircularStyleMode | string;
  /**
   * Sets or gets the value
   * Default value: 5
   */
  value?: number;
}
/**
 Defines a Circular Progress component, which includes Material and Bootstrap styles
*/
export interface BootstrapCircular extends BaseElement, BootstrapCircularProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-circular"): BootstrapCircular;
        querySelector(selectors: "bootstrap-circular"): BootstrapCircular | null;
        querySelectorAll(selectors: "bootstrap-circular"): NodeListOf<BootstrapCircular>;
        getElementsByTagName(qualifiedName: "bootstrap-circular"): HTMLCollectionOf<BootstrapCircular>;
        getElementsByName(elementName: "bootstrap-circular"): NodeListOf<BootstrapCircular>;
    }
}

/**Sets or gets the style mode of the button. */
export declare type BootstrapCircularStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapDropDownProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or gets the drop down position of the element. 
   * Default value: false
   */
  dropDownPosition?: BootstrapDropDownDropDownPosition | string;
  /**
   * Sets or gets the Label of the element.
   * Default value: """"
   */
  label?: string;
  /**
   * Sets or gets the Label type of the element.
   * Default value: ""
   */
  labelType?: BootstrapDropDownLabelType | string;
  /**
   * Sets or gets the Href of the element.
   * Default value: "#"
   */
  href?: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets whether the dropdown is opened. 
   * Default value: false
   */
  opened?: boolean;
  /**
   * Gets or sets whether the dropdown is outlined. 
   * Default value: false
   */
  outlined?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapDropDownStyleMode | string;
  /**
   * Sets or gets the size mode of the element.
   * Default value: ""
   */
  sizeMode?: string;
}
/**
 Defines a DropDown component, which includes Material and Bootstrap styles
*/
export interface BootstrapDropDown extends BaseElement, BootstrapDropDownProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Show event is triggered when the dropdown is going to show.
	* @param event. The custom event.    */
  onShow?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Shown event is triggered when the dropdown is shown.
	* @param event. The custom event.    */
  onShown?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Hide event is triggered when the dropdown is going to be hidden.
	* @param event. The custom event.    */
  onHide?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Hidden event is triggered when the dropdown is hidden
	* @param event. The custom event.    */
  onHidden?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Toggles the dropdown visibility
   */
  toggle(): void;
  /**
   * Shows the dropdown
   */
  show(): void;
  /**
   * Hides the dropdown
   */
  hide(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-drop-down"): BootstrapDropDown;
        querySelector(selectors: "bootstrap-drop-down"): BootstrapDropDown | null;
        querySelectorAll(selectors: "bootstrap-drop-down"): NodeListOf<BootstrapDropDown>;
        getElementsByTagName(qualifiedName: "bootstrap-drop-down"): HTMLCollectionOf<BootstrapDropDown>;
        getElementsByName(elementName: "bootstrap-drop-down"): NodeListOf<BootstrapDropDown>;
    }
}

/**Sets or gets the drop down position of the element.  */
export declare type BootstrapDropDownDropDownPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'custom';
/**Sets or gets the Label type of the element. */
export declare type BootstrapDropDownLabelType = 'a' | 'button';
/**Sets or gets the style mode of the element. */
export declare type BootstrapDropDownStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapFileInputProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets the placeholder of the element. 
   * Default value: "false"
   */
  placeholder?: string;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapFileInputStyleMode | string;
  /**
   * Gets or sets the value of the element. 
   * Default value: "false"
   */
  value?: string;
}
/**
 Defines a Fileinput component, which includes Material and Bootstrap styles
*/
export interface BootstrapFileInput extends BaseElement, BootstrapFileInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-file-input"): BootstrapFileInput;
        querySelector(selectors: "bootstrap-file-input"): BootstrapFileInput | null;
        querySelectorAll(selectors: "bootstrap-file-input"): NodeListOf<BootstrapFileInput>;
        getElementsByTagName(qualifiedName: "bootstrap-file-input"): HTMLCollectionOf<BootstrapFileInput>;
        getElementsByName(elementName: "bootstrap-file-input"): NodeListOf<BootstrapFileInput>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapFileInputStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapInputProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the element is filled. 
   * Default value: false
   */
  filled?: boolean;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets whether the element is outlined. 
   * Default value: false
   */
  outlined?: boolean;
  /**
   * Gets or sets the placeholder of the element. 
   * Default value: "false"
   */
  placeholder?: string;
  /**
   * Gets or sets whether the element is required. 
   * Default value: false
   */
  required?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapInputStyleMode | string;
  /**
   * Gets or sets the value of the element. 
   * Default value: "false"
   */
  value?: string;
}
/**
 Defines an Input component, which includes Material and Bootstrap styles
*/
export interface BootstrapInput extends BaseElement, BootstrapInputProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-input"): BootstrapInput;
        querySelector(selectors: "bootstrap-input"): BootstrapInput | null;
        querySelectorAll(selectors: "bootstrap-input"): NodeListOf<BootstrapInput>;
        getElementsByTagName(qualifiedName: "bootstrap-input"): HTMLCollectionOf<BootstrapInput>;
        getElementsByName(elementName: "bootstrap-input"): NodeListOf<BootstrapInput>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapInputStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapInputGroupProperties {
  /**
   * Sets the content before the input.
   * Default value: """"
   */
  contentBefore?: string;
  /**
   * Sets the content after the input.
   * Default value: """"
   */
  contentAfter?: string;
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Enables or disables the wrapping. 
   * Default value: false
   */
  noWrap?: boolean;
  /**
   * Sets or gets the style mode of the input group.
   * Default value: primary
   */
  styleMode?: BootstrapInputGroupStyleMode | string;
  /**
   * Sets or gets the size mode of the element.
   * Default value: ""
   */
  sizeMode?: string;
  /**
   * Sets or gets the type of the input.
   * Default value: "text"
   */
  type?: string;
  /**
   * Sets the placeholder of the input.
   * Default value: """"
   */
  placeholder?: string;
  /**
   * Sets or gets the button's value. 
   * Default value: ""
   */
  value?: string;
}
/**
 Defines an InputGroup component, which includes Material and Bootstrap styles
*/
export interface BootstrapInputGroup extends BaseElement, BootstrapInputGroupProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Click event.
	* @param event. The custom event.    */
  onClick: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-input-group"): BootstrapInputGroup;
        querySelector(selectors: "bootstrap-input-group"): BootstrapInputGroup | null;
        querySelectorAll(selectors: "bootstrap-input-group"): NodeListOf<BootstrapInputGroup>;
        getElementsByTagName(qualifiedName: "bootstrap-input-group"): HTMLCollectionOf<BootstrapInputGroup>;
        getElementsByName(elementName: "bootstrap-input-group"): NodeListOf<BootstrapInputGroup>;
    }
}

/**Sets or gets the style mode of the input group. */
export declare type BootstrapInputGroupStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapModalProperties {
  /**
   * Clicking on the modal “backdrop” will automatically close the modal. 
   * Default value: default
   */
  backdrop?: BootstrapModalBackdrop | string;
  /**
   * Sets or gets whether the modal is centered. 
   * Default value: false
   */
  centered?: boolean;
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the modal is opened. 
   * Default value: false
   */
  opened?: boolean;
  /**
   * Gets or sets whether the modal is scrollable. 
   * Default value: false
   */
  scrollable?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapModalStyleMode | string;
  /**
   * Sets or gets the size mode of the element.
   * Default value: ""
   */
  sizeMode?: string;
}
/**
 Modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content
*/
export interface BootstrapModal extends BaseElement, BootstrapModalProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Show event is triggered when the modal is going to show.
	* @param event. The custom event.    */
  onShow?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Hide event is triggered when the modal is going to be hidden.
	* @param event. The custom event.    */
  onHide?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Toggles the modal visibility
   */
  toggle(): void;
  /**
   * Shows the modal
   */
  show(): void;
  /**
   * Hides the modal
   */
  hide(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-modal"): BootstrapModal;
        querySelector(selectors: "bootstrap-modal"): BootstrapModal | null;
        querySelectorAll(selectors: "bootstrap-modal"): NodeListOf<BootstrapModal>;
        getElementsByTagName(qualifiedName: "bootstrap-modal"): HTMLCollectionOf<BootstrapModal>;
        getElementsByName(elementName: "bootstrap-modal"): NodeListOf<BootstrapModal>;
    }
}

/**Clicking on the modal “backdrop” will automatically close the modal.  */
export declare type BootstrapModalBackdrop = 'static' | 'default' | 'none';
/**Sets or gets the style mode of the element. */
export declare type BootstrapModalStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapProgressBarProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets the name of the element. 
   * Default value: ""
   */
  name?: string;
  /**
   * Sets or gets the min value
   * Default value: 0
   */
  min?: number;
  /**
   * Sets or gets the max value
   * Default value: 10
   */
  max?: number;
  /**
   * Sets whether stripes are displayed in the progress. 
   * Default value: false
   */
  striped?: boolean;
  /**
   * Sets or gets the style mode of the button.
   * Default value: primary
   */
  styleMode?: BootstrapProgressBarStyleMode | string;
  /**
   * Sets or gets the value
   * Default value: 5
   */
  value?: number;
}
/**
 Defines a Progress component, which includes Material and Bootstrap styles
*/
export interface BootstrapProgressBar extends BaseElement, BootstrapProgressBarProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-progress-bar"): BootstrapProgressBar;
        querySelector(selectors: "bootstrap-progress-bar"): BootstrapProgressBar | null;
        querySelectorAll(selectors: "bootstrap-progress-bar"): NodeListOf<BootstrapProgressBar>;
        getElementsByTagName(qualifiedName: "bootstrap-progress-bar"): HTMLCollectionOf<BootstrapProgressBar>;
        getElementsByName(elementName: "bootstrap-progress-bar"): NodeListOf<BootstrapProgressBar>;
    }
}

/**Sets or gets the style mode of the button. */
export declare type BootstrapProgressBarStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapRadioButtonProperties {
  /**
   * Gets or sets the checked state of the element. 
   * Default value: false
   */
  checked?: boolean;
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the element is in indeterminate state. 
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Sets the inner HTML of the element.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapRadioButtonStyleMode | string;
}
/**
 Defines a Radio Button component, which includes Material and Bootstrap styles
*/
export interface BootstrapRadioButton extends BaseElement, BootstrapRadioButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Toggles the element
   */
  toggle(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-radio-button"): BootstrapRadioButton;
        querySelector(selectors: "bootstrap-radio-button"): BootstrapRadioButton | null;
        querySelectorAll(selectors: "bootstrap-radio-button"): NodeListOf<BootstrapRadioButton>;
        getElementsByTagName(qualifiedName: "bootstrap-radio-button"): HTMLCollectionOf<BootstrapRadioButton>;
        getElementsByName(elementName: "bootstrap-radio-button"): NodeListOf<BootstrapRadioButton>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapRadioButtonStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapRangeProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets the name of the element. 
   * Default value: ""
   */
  name?: string;
  /**
   * Sets or gets the min value
   * Default value: 0
   */
  min?: number;
  /**
   * Sets or gets the max value
   * Default value: 100
   */
  max?: number;
  /**
   * Sets or gets the value
   * Default value: 100
   */
  value?: number;
}
/**
 Defines a Range component, which includes Material and Bootstrap styles
*/
export interface BootstrapRange extends BaseElement, BootstrapRangeProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-range"): BootstrapRange;
        querySelector(selectors: "bootstrap-range"): BootstrapRange | null;
        querySelectorAll(selectors: "bootstrap-range"): NodeListOf<BootstrapRange>;
        getElementsByTagName(qualifiedName: "bootstrap-range"): HTMLCollectionOf<BootstrapRange>;
        getElementsByName(elementName: "bootstrap-range"): NodeListOf<BootstrapRange>;
    }
}

export interface BootstrapSplitButtonProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets or gets the drop down position of the element. 
   * Default value: false
   */
  dropDownPosition?: BootstrapSplitButtonDropDownPosition | string;
  /**
   * Sets or gets the Label of the element.
   * Default value: """"
   */
  label?: string;
  /**
   * Sets or gets the Label type of the element.
   * Default value: ""
   */
  labelType?: BootstrapSplitButtonLabelType | string;
  /**
   * Sets or gets the Href of the element.
   * Default value: "#"
   */
  href?: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets whether the dropdown is opened. 
   * Default value: false
   */
  opened?: boolean;
  /**
   * Gets or sets whether the dropdown is outlined. 
   * Default value: false
   */
  outlined?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapSplitButtonStyleMode | string;
  /**
   * Sets or gets the size mode of the element.
   * Default value: ""
   */
  sizeMode?: string;
}
/**
 Defines a Split Button with DropDown component, which includes Material and Bootstrap styles
*/
export interface BootstrapSplitButton extends BaseElement, BootstrapSplitButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Show event is triggered when the dropdown is going to show.
	* @param event. The custom event.    */
  onShow?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Shown event is triggered when the dropdown is shown.
	* @param event. The custom event.    */
  onShown?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Hide event is triggered when the dropdown is going to be hidden.
	* @param event. The custom event.    */
  onHide?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Hidden event is triggered when the dropdown is hidden
	* @param event. The custom event.    */
  onHidden?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Toggles the dropdown visibility
   */
  toggle(): void;
  /**
   * Shows the dropdown
   */
  show(): void;
  /**
   * Hides the dropdown
   */
  hide(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-split-button"): BootstrapSplitButton;
        querySelector(selectors: "bootstrap-split-button"): BootstrapSplitButton | null;
        querySelectorAll(selectors: "bootstrap-split-button"): NodeListOf<BootstrapSplitButton>;
        getElementsByTagName(qualifiedName: "bootstrap-split-button"): HTMLCollectionOf<BootstrapSplitButton>;
        getElementsByName(elementName: "bootstrap-split-button"): NodeListOf<BootstrapSplitButton>;
    }
}

/**Sets or gets the drop down position of the element.  */
export declare type BootstrapSplitButtonDropDownPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'custom';
/**Sets or gets the Label type of the element. */
export declare type BootstrapSplitButtonLabelType = 'a' | 'button';
/**Sets or gets the style mode of the element. */
export declare type BootstrapSplitButtonStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapSwitchButtonProperties {
  /**
   * Gets or sets the checked state of the element. 
   * Default value: false
   */
  checked?: boolean;
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the element is in indeterminate state. 
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Sets the inner HTML of the element.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets whether the element is required. 
   * Default value: false
   */
  required?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapSwitchButtonStyleMode | string;
}
/**
 Defines a Switch Button component, which includes Material and Bootstrap styles
*/
export interface BootstrapSwitchButton extends BaseElement, BootstrapSwitchButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Toggles the element
   */
  toggle(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-switch-button"): BootstrapSwitchButton;
        querySelector(selectors: "bootstrap-switch-button"): BootstrapSwitchButton | null;
        querySelectorAll(selectors: "bootstrap-switch-button"): NodeListOf<BootstrapSwitchButton>;
        getElementsByTagName(qualifiedName: "bootstrap-switch-button"): HTMLCollectionOf<BootstrapSwitchButton>;
        getElementsByName(elementName: "bootstrap-switch-button"): NodeListOf<BootstrapSwitchButton>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapSwitchButtonStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapTabsProperties {
  /**
   * Sets the tabs alignment
   * Default value: 
   */
  alignment?: BootstrapTabsAlignment | string;
  /**
   * Enables or disables the tabs. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Sets the tabs fill
   * Default value: false
   */
  fill?: boolean;
  /**
   * Sets the tabs justified
   * Default value: false
   */
  justified?: boolean;
  /**
   * Sets or gets the tab type.
   * Default value: ul
   */
  listType?: BootstrapTabsListType | string;
  /**
   * Sets or gets the style mode of the tabs.
   * Default value: primary
   */
  styleMode?: BootstrapTabsStyleMode | string;
  /**
   * Sets or gets the size mode of the element.
   * Default value: ""
   */
  sizeMode?: string;
  /**
   * Sets or gets the tab type .
   * Default value: tabs
   */
  tabType?: BootstrapTabsTabType | string;
}
/**
 Defines a Tabs component, which includes Material and Bootstrap styles
*/
export interface BootstrapTabs extends BaseElement, BootstrapTabsProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Show event.
	* @param event. The custom event.    */
  onShow?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
  /**
   * Shows an item
   * @param {HTMLElement} item. The tab item to be shown.
   */
  show(item: HTMLElement): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-tabs"): BootstrapTabs;
        querySelector(selectors: "bootstrap-tabs"): BootstrapTabs | null;
        querySelectorAll(selectors: "bootstrap-tabs"): NodeListOf<BootstrapTabs>;
        getElementsByTagName(qualifiedName: "bootstrap-tabs"): HTMLCollectionOf<BootstrapTabs>;
        getElementsByName(elementName: "bootstrap-tabs"): NodeListOf<BootstrapTabs>;
    }
}

/**Sets the tabs alignment */
export declare type BootstrapTabsAlignment = null | 'center' | 'end' | 'vertical';
/**Sets or gets the tab type. */
export declare type BootstrapTabsListType = 'ul' | 'ol' | 'nav';
/**Sets or gets the style mode of the tabs. */
export declare type BootstrapTabsStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
/**Sets or gets the tab type . */
export declare type BootstrapTabsTabType = 'tabs' | 'nav' | 'pills';
export interface BootstrapTextareaProperties {
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the element is filled. 
   * Default value: false
   */
  filled?: boolean;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Gets or sets whether the element is outlined. 
   * Default value: false
   */
  outlined?: boolean;
  /**
   * Gets or sets the placeholder of the element. 
   * Default value: "false"
   */
  placeholder?: string;
  /**
   * Gets or sets whether the element is required. 
   * Default value: false
   */
  required?: boolean;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapTextareaStyleMode | string;
  /**
   * Gets or sets the value of the element. 
   * Default value: "false"
   */
  value?: string;
}
/**
 Defines a Textarea component, which includes Material and Bootstrap styles
*/
export interface BootstrapTextarea extends BaseElement, BootstrapTextareaProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-textarea"): BootstrapTextarea;
        querySelector(selectors: "bootstrap-textarea"): BootstrapTextarea | null;
        querySelectorAll(selectors: "bootstrap-textarea"): NodeListOf<BootstrapTextarea>;
        getElementsByTagName(qualifiedName: "bootstrap-textarea"): HTMLCollectionOf<BootstrapTextarea>;
        getElementsByName(elementName: "bootstrap-textarea"): NodeListOf<BootstrapTextarea>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapTextareaStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';
export interface BootstrapToggleButtonProperties {
  /**
   * Gets or sets the checked state of the element. 
   * Default value: false
   */
  checked?: boolean;
  /**
   * Enables or disables the element. 
   * Default value: false
   */
  disabled?: boolean;
  /**
   * Gets or sets whether the element is in indeterminate state. 
   * Default value: false
   */
  indeterminate?: boolean;
  /**
   * Sets the inner HTML of the element.
   * Default value: """"
   */
  innerHTML: string;
  /**
   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
   * Default value: """"
   */
  name?: string;
  /**
   * Sets or gets the style mode of the element.
   * Default value: primary
   */
  styleMode?: BootstrapToggleButtonStyleMode | string;
}
/**
 Defines a Toggle Button component, which includes Material and Bootstrap styles
*/
export interface BootstrapToggleButton extends BaseElement, BootstrapToggleButtonProperties {

  /* Get a member by its name */
  [name: string]: any;
  /**
   * Change event is triggered when the value of the element is changed.
	* @param event. The custom event.    */
  onChange: ((this: any, ev: Event) => any) | null;
  /**
   * Toggles the element
   */
  toggle(): void;
}

declare global {
    interface Document {
        createElement(tagName: "bootstrap-toggle-button"): BootstrapToggleButton;
        querySelector(selectors: "bootstrap-toggle-button"): BootstrapToggleButton | null;
        querySelectorAll(selectors: "bootstrap-toggle-button"): NodeListOf<BootstrapToggleButton>;
        getElementsByTagName(qualifiedName: "bootstrap-toggle-button"): HTMLCollectionOf<BootstrapToggleButton>;
        getElementsByName(elementName: "bootstrap-toggle-button"): NodeListOf<BootstrapToggleButton>;
    }
}

/**Sets or gets the style mode of the element. */
export declare type BootstrapToggleButtonStyleMode = 'primary' | 'secondary' | 'error' | 'warning' | 'success' | null | 'default';