@smart-webcomponents-angular/toast 13.1.70 → 15.0.2

package/index.d.ts

@@ -1,6 +1,1252 @@
+export interface ThreeDChartProperties {
+  /**
+   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'.
+   * Default value: advanced
+   */
+  animation?: Animation | string;
+  /**
+   * Determines the rate of the animation. The default animation rate is 1
+   * Default value: 1
+   */
+  animationSpeed?: number;
+  /**
+   * Sets whether the chart will rotate automatically.
+   * Default value: false
+   */
+  autoRotate?: boolean;
+  /**
+   * Sets the speed of the automatic rotation.
+   * Default value: 1
+   */
+  autoRotateSpeed?: number;
+  /**
+   * Sets the chart's background color. For example: '#DDFFE8'
+   * Default value: #ffffff
+   */
+  backgroundColor?: string | null;
+  /**
+   * Sets the chart's background to a static linear gradient. The property must be set to an Array of Strings in the format: 'offset, color'
+   * Default value: []
+   */
+  backgroundGradient?: any[];
+  /**
+   * Sets the chart's background to a static image. For example: 'https://www.htmlelements.com/demos/images/stars.jpg'
+   * Default value: ""
+   */
+  backgroundImage?: string;
+  /**
+   * Sets the chart's background to a dynamic background image which rotates with the camera. The property must be set an Array of 6 images. All images must have aspect ratio 1:1
+   * Default value: []
+   */
+  backgroundTexture?: any[];
+  /**
+   * Sets the camera's position. The property must be set to an {x, y, z} object.
+   * Default value: [object Object]
+   */
+  cameraPosition?: ThreeDChartCameraPosition;
+  /**
+   * Sets the intial camera zoom. The default value is 1
+   * Default value: 1
+   */
+  cameraZoom?: number;
+  /**
+   * Sets the caption (title) of the chart.
+   * Default value: "Caption"
+   */
+  caption?: string;
+  /**
+   * Sets the chart's color pallete. jqxChart suppports 32 color schemes from 'scheme01' to 'scheme32'.
+   * Default value: scheme01
+   */
+  colorScheme?: ThreeDChartColorScheme | string;
+  /**
+   * Sets the chart's controls settings.
+   * Default value: [object Object]
+   */
+  controlsSettings?: any;
+  /**
+   * Allows substituting default items with custom 3D Objects. The property must be set to an Array of Objects in the format: { groupIndex, serieIndex, itemIndex, modelUrl }
+   * Default value: []
+   */
+  customModels?: any[];
+  /**
+   * Sets the chart's data source.
+   * Default value: 
+   */
+  dataSource?: any[];
+  /**
+   * Sets the description text of the chart.
+   * Default value: "Description"
+   */
+  description?: string;
+  /**
+   * Enables or disables the chart.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Sets whether the chart's toolbar is enabled.
+   * Default value: true
+   */
+  enableControlsToolbar?: boolean;
+  /**
+   * 
+   * Default value: reset-camera,zoom-in,zoom-out,save-image,camera-control
+   */
+  controlsToolbarItems?: any;
+  /**
+   * Sets the chart's grid options.
+   * Default value: [object Object]
+   */
+  gridOptions?: any;
+  /**
+   * Sets whether the legend will be created based on the chart's series or serie groups. "auto" - the legend index will change depending on the Chart type
+   * Default value: auto
+   */
+  legendIndex?: ThreeDChartLegendIndex | string;
+  /**
+   * Sets the legend's layout.
+   * Default value: [object Object]
+   */
+  legendLayout?: any;
+  /**
+   * Sets the light color of the 3D Scene.
+   * Default value: "#ffffff"
+   */
+  lightColor?: string;
+  /**
+   * Sets or gets the locale. Used in conjunction with the property messages.
+   * Default value: "en"
+   */
+  locale?: string;
+  /**
+   * Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
+   * Default value:    * [object Object]
+   */
+  messages?: any;
+  /**
+   * Sets or gets a value indicating whether the Chart's layout is mirrored.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * Determines the selection mode.
+   * Default value: multiple
+   */
+  selectionMode?: ThreeDChartSelectionMode | string;
+  /**
+   * The seriesGroups property is used to describe all series displayed on the chart. jqxChart supports multiple series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which allows you to have values with different scales displayed on the same chart at the same time. It also allows you to display multiple series types together on the same chart. For example, you can display all series in one group as lines and the series in a second group as columns. seriesGroups is an array of objects where each object represents one group.
+   * Default value: 
+   */
+  seriesGroups?: ThreeDChartSeriesGroup[];
+  /**
+   * Determines whether to show grid connecting lines when a chart item is hovered over.
+   * Default value: false
+   */
+  showConnectionLines?: boolean;
+  /**
+   * Determines whether to show or hide the chart series legend.
+   * Default value: true
+   */
+  showLegend?: boolean;
+  /**
+   * Determines whether to show or hide the chart series legend table.
+   * Default value: false
+   */
+  showLegendTable?: boolean;
+  /**
+   * Enables or disables the chart tooltips.
+   * Default value: true
+   */
+  showToolTips?: boolean;
+  /**
+   * Sets the padding of the chart's title (caption).
+   * Default value: [object Object]
+   */
+  titlePadding?: ThreeDChartPadding;
+  /**
+   * User defined tooltip text formatting callback function.
+   * Default value: null
+   */
+  toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
+  /**
+   * Tooltip line color. By default it is set to the hovered item's color
+   * Default value: null
+   */
+  toolTipLineColor?: string | null;
+  /**
+   * An object with settings about the Chart's y-axis (value axis).
+   * Default value: [object Object]
+   */
+  valueAxis?: ThreeDChartValueAxis;
+  /**
+   * Sets the Chart's xAxis.
+   * Default value: [object Object]
+   */
+  xAxis?: ThreeDChartXAxis;
+  /**
+   * Sets the Chart's zAxis.
+   * 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;
+  /**
+   * The event is raised when the user clicks on a chart element.
+	* @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 raised when a chart element is shown.
+	* @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;
+  /**
+   * The event is raised when a chart element is hidden.
+	* @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;
+  /**
+   * The event is raised when a chart element is selected.
+	* @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;
+  /**
+   * The event is raised when a chart element is unselected.
+	* @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;
+  /**
+   * The event is raised after the chart's range selector position changes and after the chart ends rendering.
+	* @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;
+  /**
+   * The event is raised when the chart's range selector position changes and before the chart starts rendering. The event can be default prevented to cancel the range selection change.
+	* @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;
+  /**
+   * The event is raised when the chart begins rendering.
+	* @param event. The custom event.    */
+  onRefreshBegin?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * The event is raised when the chart finishes rendering.
+	* @param event. The custom event.    */
+  onRefreshEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * The event is raised when the chart begins resizing.
+	* @param event. The custom event.    */
+  onResizeBegin?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * The event is raised when the chart finishes resizing.
+	* @param event. The custom event.    */
+  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * Adds a new color sheme. If a scheme with the same name already exists, the method will update its colors.
+   * @param {string} schemeName. The name of the custom color scheme.
+   * @param {any[]} colorsArray. An array of color values.
+   */
+  addColorScheme(schemeName: string, colorsArray: any[]): void;
+  /**
+   * Begins an update of the chart. The chart will not be rendered until the endUpdate method is called.
+   */
+  beginUpdate(): void;
+  /**
+   * Ends an update of the chart. The chart will be rendered after the endUpdate method is called.
+   * @param {boolean} refresh?. If set to true, the chart will complete a full refresh.
+   */
+  endUpdate(refresh?: boolean): void;
+  /**
+   * Returns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined.
+   * @param {string} schemeName. The name of the color scheme.
+   * @returns {any[]}
+   */
+  getColorScheme(schemeName: string): any[];
+  /**
+   * Gets the item with the specified indexes.
+   * @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;
+  /**
+   * Gets an arrat of the items with the specified indexes. Leaving an index null will return all items that match the other indexes.
+   * @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;
+  /**
+   * Gets the indexes of the hidden series.
+   * @returns {{ groupIndex: number, serieIndex: number, itemIndex: number }[]}
+   */
+  getHidden(): { groupIndex: number, serieIndex: number, itemIndex: number }[];
+  /**
+   * Gets the selected items.
+   * @returns {any[]}
+   */
+  getSelection(): any[];
+  /**
+   * Gets the rendered values of the valueAxis labels.
+   * @returns {any}
+   */
+  getValueAxisLabels(): any;
+  /**
+   * Gets the rendered values of the xAxis labels.
+   * @returns {any}
+   */
+  getXAxisLabels(): any;
+  /**
+   * Gets the rendered values of the zAxis labels.
+   * @returns {any}
+   */
+  getZAxisLabels(): any;
+  /**
+   * Hides all items of a chart group.
+   * @param {number} groupIndex. Series group index.
+   */
+  hideGroup(groupIndex: number): void;
+  /**
+   * Hides a chart item.
+   * @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 items of a chart serie.
+   * @param {number} groupIndex. Series group index.
+   * @param {number} serieIndex. Series index.
+   */
+  hideSerie(groupIndex: number, serieIndex: number): void;
+  /**
+   * Refreshes the content of the chart element after a property or data update.
+   */
+  refresh(): void;
+  /**
+   * Removes an existing color scheme. If the scheme does not exist, the method has no effect.
+   * @param {string} schemeName. The name of the custom color scheme.
+   */
+  removeColorScheme(schemeName: string): void;
+  /**
+   * Exports the chart's content as JPEG image.
+   * @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 chart's content as PNG image.
+   * @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 chart's content as PDF file.
+   * @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 'one', the previous item will be unselected.
+   * @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;
+  /**
+   * Shows all items of a chart group.
+   * @param {number} groupIndex. Series group index.
+   */
+  showGroup(groupIndex: number): void;
+  /**
+   * Shows a chart item.
+   * @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;
+  /**
+   * Shows all items of a chart serie.
+   * @param {number} groupIndex. Series group index.
+   * @param {number} serieIndex. Series index.
+   */
+  showSerie(groupIndex: number, serieIndex: number): void;
+  /**
+   * Sets the camera position to its position during the initialization.
+   */
+  setDefaultPosition(): void;
+  /**
+   * Sets the camera mode. Different camera modes change the control actions of the mouse. Available modes are 'zoom', 'pan' and 'default'.
+   * @param {string} mode. Camera mode.
+   */
+  setCameraMode(mode: string): void;
+  /**
+   * Sets the camera position.
+   * @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;
+  /**
+   * Sets the camera zoom.
+   * @param {number} level. Zoom level.
+   * @param {boolean} animation?. Animation Enabled
+   */
+  setCameraZoom(level: number, animation?: boolean): void;
+  /**
+   * Unelects a chart item.
+   * @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;
+  /**
+   * Updates the values of the chart series without full refresh of the entire chart. The method should be used for animation of frequently changing values.
+   */
+  update(): void;
+}
+
+/**Sets the camera's position. The property must be set to an {x, y, z} object. */
+export interface ThreeDChartCameraPosition {
+  /**
+   * Sets the camera's x position. This is the left-right axis
+   * Default value: 5
+   */
+  x?: number;
+  /**
+   * Sets the camera's y position. This is the up-down axis
+   * Default value: 20
+   */
+  y?: number;
+  /**
+   * Sets the camera's z position. This is the forward-backward axis
+   * 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;
+}
+
+/**Sets the padding of the chart's title (caption). */
+export interface ThreeDChartPadding {
+  /**
+   * Bottom padding.
+   * Default value: 10
+   */
+  bottom?: number;
+  /**
+   * Left padding.
+   * Default value: 5
+   */
+  left?: number;
+  /**
+   * Right padding.
+   * Default value: 5
+   */
+  right?: number;
+  /**
+   * Top padding.
+   * Default value: 5
+   */
+  top?: number;
+}
+
+/**An object with settings about the Chart's y-axis (value axis). */
+export interface ThreeDChartValueAxis {
+  /**
+   * Sets the baseline value for the axis.
+   * Default value: 0
+   */
+  baselineValue?: any;
+  /**
+   * Sets the text displayed on the axis.
+   * Default value: null
+   */
+  displayText?: string | null;
+  /**
+   * Custom function to format the displayed values along the axis.
+   * Default value: null
+   */
+  formatFunction?: {(value?: any): string};
+  /**
+   * Settings used to format the displayed values along the axis.
+   * Default value: [object Object]
+   */
+  formatSettings?: ThreeDChartFormatSettings;
+  /**
+   * Object describing the grid lines properties of the valueAxis.
+   * Default value: [object Object]
+   */
+  gridLines?: ThreeDChartLines;
+  /**
+   * Object describing the labels properties of the axis.
+   * Default value: [object Object]
+   */
+  labels?: ThreeDChartLabels;
+  /**
+   * 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;
+  /**
+   * Sets the interval between the units.
+   * Default value: null
+   */
+  unitInterval?: number | null;
+  /**
+   * Shows or hides the valueAxis.
+   * Default value: true
+   */
+  visible?: boolean;
+}
+
+/**Object describing the grid lines properties of the valueAxis. */
+export interface ThreeDChartLines {
+  /**
+   * Color of the grid lines.
+   * Default value: ""
+   */
+  color?: string;
+  /**
+   * Interval steps between grid line placements (multiples of the axis unit interval).
+   * Default value: null
+   */
+  step?: number | null;
+  /**
+   * 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;
+}
+
+/**Sets the Chart's xAxis. */
+export interface ThreeDChartXAxis {
+  /**
+   * Points to a data field in the data source.
+   * Default value: ""
+   */
+  dataField?: string;
+  /**
+   * 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?: ThreeDChartFormatSettings;
+  /**
+   * Object describing the grid lines properties of the xAxis.
+   * Default value: [object Object]
+   */
+  gridLines?: ThreeDChartLines;
+  /**
+   * Object describing the labels properties of the axis.
+   * Default value: [object Object]
+   */
+  labels?: ThreeDChartLabels;
+  /**
+   * 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;
+  /**
+   * Definition of a range selector on the xAxis. The range selector itself is also an instance of smart-chart.
+   * Default value: [object Object]
+   */
+  rangeSelector?: ThreeDChartRangeSelector;
+  /**
+   * 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?: ThreeDChartXAxisType | string;
+  /**
+   * Sets the interval between the units.
+   * Default value: null
+   */
+  unitInterval?: number | null;
+  /**
+   * 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 ThreeDChartRangeSelector {
+  /**
+   * Sets the color of the range selector chart. If null, it will be set to the same color as the chart
+   * Default value: null
+   */
+  color?: string | null;
+  /**
+   * 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?: ThreeDChartLabels;
+  /**
+   * Sets the opacity of the range selector chart.
+   * Default value: 1
+   */
+  opacity?: number;
+  /**
+   * Sets the range selector chart type
+   * Default value: area
+   */
+  serieType?: ThreeDChartRangeSelectorSerieType | string;
+  /**
+   * Shows or hides the range selector.
+   * Default value: false
+   */
+  visible?: boolean;
+}
+
+/**Sets the Chart's zAxis. */
+export interface ThreeDChartZAxis {
+  /**
+   * Points to a data field in the data source.
+   * Default value: ""
+   */
+  dataField?: string;
+  /**
+   * Optional custom zAxis 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?: ThreeDChartFormatSettings;
+  /**
+   * Object describing the grid lines properties of the zAxis.
+   * Default value: [object Object]
+   */
+  gridLines?: ThreeDChartLines;
+  /**
+   * Object describing the labels properties of the axis.
+   * Default value: [object Object]
+   */
+  labels?: ThreeDChartLabels;
+  /**
+   * 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 zAxis.
+   * Default value: NaN
+   */
+  maxValue?: any;
+  /**
+   * Sets the minimum value of the zAxis.
+   * Default value: NaN
+   */
+  minValue?: any;
+  /**
+   * Sets the interval between the units.
+   * Default value: null
+   */
+  unitInterval?: number | null;
+  /**
+   * Shows or hides the zAxis.
+   * Default value: true
+   */
+  visible?: boolean;
+}
 
-import { NgElement } from '@angular/elements';
+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>;
+    }
+}
 
+/**Sets or gets the animation mode. Animation is disabled when the property is set to 'none'. */
+export declare type Animation = 'none' | 'simple' | 'advanced';
+/**Sets the chart's color pallete. jqxChart suppports 32 color schemes from 'scheme01' to 'scheme32'. */
+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';
+/**Sets whether the legend will be created based on the chart's series or serie groups. "auto" - the legend index will change depending on the Chart type */
+export declare type ThreeDChartLegendIndex = 'auto' | 'serie' | 'group';
+/**Determines the selection mode. */
+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';
+/**Sets the range selector chart type */
+export declare type ThreeDChartRangeSelectorSerieType = 'line' | 'area';
+/**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 ThreeDChartXAxisType = 'auto' | 'date' | 'basic' | 'linear';
 export interface AccordionProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -184,8 +1430,6 @@ declare global {
     }
 }
 
-/**Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */
-export declare type Animation = 'none' | 'simple' | 'advanced';
 /**Sets or gets the expand mode. Expand mode determines how the items will expand or collapse. */
 export declare type AccordionExpandMode = 'single' | 'singleFitHeight' | 'multiple' | 'toggle' | 'none';
 export interface AccordionItemProperties {
@@ -5755,6 +6999,11 @@ export interface ComboBoxProperties {
    * Default value: 2
    */
   minLength?: number;
+  /**
+   * Determines the maximum number of characters inside the input.
+   * Default value: -1
+   */
+  maxLength?: number;
   /**
    * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
    * Default value: ""
@@ -6681,11 +7930,6 @@ export declare type DataAdapterVirtualDataSourceOnExpandDetailsAction = 'sort' |
 /**Request action type */
 export declare type DataAdapterVirtualDataSourceDetailsAction = 'sort' | 'filter' | 'dataBind' | 'scroll' | 'group' | 'expand' | 'pageIndexChange' | 'pageSizeChange';
 export interface DateInputProperties {
-  /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
-   */
-  animation?: Animation | string;
   /**
    * Determines whether the calendar button pop-up will be closed automatically when date or time is selected through it.
    * Default value: false
@@ -6700,7 +7944,7 @@ export interface DateInputProperties {
    * Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. Intl.DateTimeFormat is used to format date strings in JavaScript. By default the date format is 'numeric'. The default value is: { day: 'numeric', month: 'numeric', year: 'numeric' }
    * Default value: { day: 'numeric', month: 'numeric', year: 'numeric' }
    */
-  dateTimeFormat?: DateTimeFormat;
+  dateTimeFormat?: any;
   /**
    * Enables or disables the element.
    * Default value: false
@@ -6721,6 +7965,11 @@ export interface DateInputProperties {
    * Default value: 
    */
   dropDownWidth?: string | number;
+  /**
+   * Sets the format string. When this property is set, the dateTimeFormat property will be disabled and the formatting will use the value of the formatString. 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: ""
+   */
+  formatString?: string;
   /**
    * Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
    * Default value: "off"
@@ -6849,25 +8098,6 @@ export interface DateInput extends BaseElement, DateInputProperties {
   setValue(value: string | Date): void;
 }
 
-/**Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. Intl.DateTimeFormat is used to format date strings in JavaScript. By default the date format is 'numeric'. The default value is: { day: 'numeric', month: 'numeric', year: 'numeric' } */
-export interface DateTimeFormat {
-  /**
-   * Day format.
-   * Default value: numeric
-   */
-  day?: DateTimeFormatDay | string;
-  /**
-   * Month format.
-   * Default value: numeric
-   */
-  month?: DateTimeFormatMonth | string;
-  /**
-   * Year format.
-   * Default value: numeric
-   */
-  year?: DateTimeFormatYear | string;
-}
-
 declare global {
     interface Document {
         createElement(tagName: "smart-date-input"): DateInput;
@@ -6878,12 +8108,6 @@ declare global {
     }
 }
 
-/**Day format. */
-export declare type DateTimeFormatDay = 'numeric' | '2-digit';
-/**Month format. */
-export declare type DateTimeFormatMonth = 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
-/**Year format. */
-export declare type DateTimeFormatYear = 'numeric' | '2-digit';
 export interface DateRangeInputProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -7220,7 +8444,7 @@ export interface DateTimePickerProperties {
    */
   footer?: boolean;
   /**
-   * Determines the pattern that is used to display the value in.
+   * Determines the pattern that is used to display the value in. 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: "dd-MMM-yy HH:mm:ss.fff"
    */
   formatString?: string;
@@ -8595,6 +9819,11 @@ export interface EditorProperties {
    * Default value: null
    */
   charCountFormatFunction?: any;
+  /**
+   * Sets or gets whether files will be automatically uploaded after selection.
+   * Default value: false
+   */
+  autoUpload?: boolean;
   /**
    * Determines the content filtering settings.
    * Default value: [object Object]
@@ -8942,6 +10171,16 @@ export interface EditorProperties {
    * Default value: 100
    */
   splitModeRefreshTimeout?: number;
+  /**
+   * Sets or gets the upload URL. This property corresponds to the upload form's action attribute. For example, the uploadUrl property can point to a PHP file, which handles the upload operation on the server-side.
+   * Default value: ""
+   */
+  uploadUrl?: string;
+  /**
+   * Sets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side.
+   * Default value: ""
+   */
+  removeUrl?: string;
   /**
    * Determines the theme. Theme defines the look of the element
    * Default value: ""
@@ -9146,7 +10385,7 @@ export interface Editor extends BaseElement, EditorProperties {
   onDialogClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered when the uploading of an image/video is successful.
-	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, filename, type, size, index, status)
+	* @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.
@@ -9154,11 +10393,12 @@ export interface Editor extends BaseElement, EditorProperties {
    *  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 the uploading of an image/video is unsuccessful.
-	* @param event. The custom event. Custom data event was created with: ev.detail(target, item, filename, type, size, index, status)
+	* @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.
@@ -9166,6 +10406,7 @@ export interface Editor extends BaseElement, EditorProperties {
    *  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;
   /**
@@ -9673,7 +10914,7 @@ declare global {
 	}
 }
 
-export interface BaseElement extends NgElement, ElementProperties {
+export interface BaseElement extends HTMLElement, ElementProperties {
   /**
    * This event is triggered when the element is resized.
 	* @param event. The custom event.    */
@@ -9850,6 +11091,11 @@ export interface FileUploadProperties {
    * Default value: false
    */
   unfocusable?: boolean;
+  /**
+   * Sets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side.
+   * Default value: ""
+   */
+  removeUrl?: string;
   /**
    * Gets the file upload value.
    * Default value: null
@@ -9888,12 +11134,13 @@ export interface FileUpload extends BaseElement, FileUploadProperties {
   onUploadCanceled?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered when a file upload operation is completed.
-	* @param event. The custom event. Custom data event was created with: ev.detail(filename, type, size, index, status)
+	* @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;
   /**
@@ -11356,7 +12603,7 @@ export interface FormProperties {
    */
   controls?: Control[];
   /**
-   * Callback function for handling status changes
+   * Callback function for handling status changes. The status could be  'disabled', 'invalid', 'pending', 'valid'.
    * Default value: null
    */
   onStatusChanges?: any;
@@ -13764,6 +15011,11 @@ export interface GridProperties {
    * Default value: []
    */
   columns?: {label: string, dataField: string}[] | string[] | number | GridColumn[];
+  /**
+   * Context Menu is the drop-down menu displayed after right-clicking a Grid row. It allows you to delete row, edit cell or row depending on the edit mode. The 'contextMenuItemCustom' dataSource option allows you to add custom menu item to the context menu. You can replace the context menu by using the 'selector' property and setting it to ID of a Smart.Menu component.
+   * Default value: [object Object]
+   */
+  contextMenu?: GridContextMenu;
   /**
    * Column Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column.
    * Default value: [object Object]
@@ -13864,6 +15116,11 @@ export interface GridProperties {
    * Default value: null
    */
   onRender?: any;
+  /**
+   * Callback function() called when the grid has been rendered for first time and bindings are completed. The component is ready.
+   * Default value: null
+   */
+  onLoad?: any;
   /**
    * Callback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed.
    * Default value: null
@@ -13884,6 +15141,16 @@ export interface GridProperties {
    * Default value: null
    */
   onRowDetailUpdated?: {(index: number, row: GridRow, details: HTMLElement): void};
+  /**
+   * Callback function which is called when a row history is updated. The row history for edits is recorded when the 'storeHistory' property is enabled.
+   * Default value: null
+   */
+  onRowHistory?: {(index: number, row: GridRow, history: any[]): void};
+  /**
+   * Callback function which is called when a row style is updated. The row style can be changed by using the row dialog or the 'setRowStyle' method.
+   * Default value: null
+   */
+  onRowStyle?: {(index: number, row: GridRow, history: any[]): void};
   /**
    * Callback function which is called when a row has been inserted.
    * Default value: null
@@ -13904,6 +15171,16 @@ export interface GridProperties {
    * Default value: null
    */
   onRowUpdated?: {(index: number[], row: GridRow[]): void};
+  /**
+   * Callback function called by the Grid when defined. It is used to get the CSS class applied to a row.
+   * Default value: null
+   */
+  onRowClass?: {(index: number, data: any, row: GridRow[]): void};
+  /**
+   * Callback function called by the Grid when defined. It is used to get the CSS class applied to a cell.
+   * Default value: null
+   */
+  onCellClass?: {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void};
   /**
    * Callback function, which is called when a column has been initialized. This function can be used to customize the column settings.
    * Default value: null
@@ -13924,11 +15201,21 @@ export interface GridProperties {
    * Default value: null
    */
   onColumnUpdated?: {(index: number, column: GridColumn): void};
+  /**
+   * Callback function, which is called when a column has been cloned.
+   * Default value: null
+   */
+  onColumnClone?: {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void};
   /**
    * Callback function, which is called when a command is executed. The name argument is the command's name. The command argument is the command's function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command's behavior.
    * Default value: null
    */
   onCommand?: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void};
+  /**
+   * Sets or gets the rows  CSS class rules. Different CSS class names are conditionally applied. Example: rowCSSRules: { 'cell-class-1': settings =&gt; settings.data.quantity === 5, 'cell-class-2': settings =&gt; settings.data.quantity &lt; 5, 'cell-class-3': settings =&gt; settings.data.quantity &gt; 5 }.  The settings object contains the following properties: index, data, row, api.
+   * Default value: null
+   */
+  rowCSSRules?: any;
   /**
    * Sets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.
    * Default value: 
@@ -13939,6 +15226,11 @@ export interface GridProperties {
    * Default value: []
    */
   users?: any[];
+  /**
+   * Sets the grid's image and filter upload settings for the image and attachment columns.
+   * Default value: [object Object]
+   */
+  uploadSettings?: GridUploadSettings;
   /**
    * Describes the paging settings.
    * Default value: [object Object]
@@ -13969,6 +15261,11 @@ export interface GridProperties {
    * Default value: [object Object]
    */
   summaryRow?: GridSummaryRow;
+  /**
+   * Sets the grid's state settings.
+   * Default value: [object Object]
+   */
+  stateSettings?: GridStateSettings;
   /**
    * Describes the settings for the group header.
    * Default value: [object Object]
@@ -14013,13 +15310,15 @@ export interface Grid extends BaseElement, GridProperties {
   /* Get a member by its name */
   [name: string]: any;
   /**
-   * This event is triggered, when the edit begins.
-	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell)
+   * This event is triggered, when the edit begins. After the event occurs, editing starts. If you need to prevent the editing for specific cells, rows or columns, you can call event.preventDefault();.
+	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell, data, value)
    *  id - The edited row id.
    *  dataField - The edited column data field.
    *  row - The edited row.
    *  column - The edited column.
    *  cell - The edited cell.
+   *  data - The edited row's data.
+   *  value - The edited cell's value.
    */
   onBeginEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
@@ -14122,6 +15421,14 @@ export interface Grid extends BaseElement, GridProperties {
    *  comment - The comment object. The comment object has 'text: string', 'id: string', 'userId: string | number', and 'time: date' fields. The 'text' is the comment's text. 'id' is the comment's unique id, 'userId' is the user's id who entered the comment and 'time' is a javascript date object.
    */
   onCommentRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered, when the user clicks on a context menu item.
+	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, command)
+   *  id - The row's id.
+   *  dataField - The column's data field.
+   *  command - Command function.
+   */
+  onContextMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user starts a row drag.
 	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, originalEvent)
@@ -14245,12 +15552,14 @@ export interface Grid extends BaseElement, GridProperties {
   onCellDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the edit ends.
-	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell)
+	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell, data, value)
    *  id - The edited row id.
    *  dataField - The edited column data field.
    *  row - The edited row.
    *  column - The edited column.
    *  cell - The edited cell.
+   *  data - The edited row's data.
+   *  value - The edited cell's value.
    */
   onEndEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
@@ -14324,9 +15633,9 @@ export interface Grid extends BaseElement, GridProperties {
    * Adds a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {any} data. row data matching the data source
    * @param {boolean} insertAtBottom?. Determines whether to add the new row to the bottom or top of the collection. The default value is 'true'
-   * @param {any} callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
+   * @param  callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
    */
-  addRow(data: any, insertAtBottom?: boolean, callback?: any): void;
+  addRow(data: any, insertAtBottom?: boolean, callback?: {(row: GridRow): void}): void;
   /**
    * Adds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string} position?. 'near' or 'far'
@@ -14347,7 +15656,7 @@ export interface Grid extends BaseElement, GridProperties {
    */
   addUnboundRow(count: number, position?: string): boolean;
   /**
-   * Adds a filter to a column. This method will apply a filter to the Grid data.
+   * Adds a filter to a column. This method will apply a filter to the Grid data. Example for adding multiple filters to a column: grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"']). Example for adding single filter to a column: grid.addFilter('lastName', 'CONTAINS "burke"'). Example for adding numeric filter:  grid.addFilter('quantity', '&lt;= 5')
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
    * @param {string} filter. 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'
    * @param {boolean} refreshFilters?. Set this to false, if you will use multiple 'addFilter' calls. By doing this, you will avoid unnecessary renders.
@@ -14372,6 +15681,11 @@ export interface Grid extends BaseElement, GridProperties {
    * Auto-sizes grid columns. This method will update the <em>width</em> of all Grid columns.
    */
   autoSizeColumns(): void;
+  /**
+   * Auto-sizes grid column. This method will update the <em>width</em> of a Grid column by measuring the cells and column header label width.
+   * @param {string} dataField?. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
+   */
+  autoSizeColumn(dataField?: string): void;
   /**
    * This method returns true, if all rows in the Grid are selected.
    * @returns {boolean}
@@ -14442,9 +15756,9 @@ export interface Grid extends BaseElement, GridProperties {
   /**
    * Delete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string | number} rowId. row bound id
-   * @param {any} callback?. Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
+   * @param  callback?. Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
    */
-  deleteRow(rowId: string | number, callback?: any): void;
+  deleteRow(rowId: string | number, callback?: {(row: GridRow): void}): void;
   /**
    * Scrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.
    * @param {string | number} rowId. row bound id
@@ -14462,10 +15776,15 @@ export interface Grid extends BaseElement, GridProperties {
    */
   endUpdate(refresh?: boolean): void;
   /**
-   * Expands a TreeGrid or Grouping row.
+   * Expands a TreeGrid or Grouping row. For example, if you want to expand the first group, then its second sub grup, then the first sub sub group, you can use: grid.expandRow('0.1.0');
    * @param {string | number} rowId. row bound id
    */
   expandRow(rowId: string | number): void;
+  /**
+   * Expands rows to a given group level. For example 'grid.expandRowsToGroupLevel(1);' means that all groups at the root level will be expanded.
+   * @param {number} level. row group level
+   */
+  expandRowsToGroupLevel(level: number): void;
   /**
    * Expands all TreeGrid or Grouping rows.
    */
@@ -14475,6 +15794,20 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {string} Dataformat. 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
    */
   exportData(Dataformat: string): void;
+  /**
+   * Finds entries by using a query and returns an array of row ids. Example: const rows = grid.find('nancy'); returns all rows that have 'nancy' value. Example 2: const rows = grid.find('nancy, davolio'); returns all rows that have 'nancy' and 'davolio' values in the same row. Example 3: const rows = grid.find(5, 'quantity', '>'); returns all rows where the value of the 'quantity' field is > 5. 
+   * @param {string} query. Search query
+   * @param {string} dataField?. Column data field.
+   * @param {string} condition?. 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'
+   * @returns {any[]}
+   */
+  find(query: string, dataField?: string, condition?: string): any[];
+  /**
+   * Finds entries by using a query and returns an array of cells. Each cell in the array is also an array in this format: [id, dataField, value]. Example: const cells = grid.findCells('nancy'); returns all cells that have 'nancy' value. Example 2: const cells = grid.findCells('nancy, davolio'); returns all cells that have 'nancy' and 'davolio' values.
+   * @param {string} query. Search query. You can enter multiple search strings, by using ','. Example: 'nancy, davolio'
+   * @returns {any[]}
+   */
+  findCells(query: string): any[];
   /**
    * Navigates to a page, when paging is enabled.
    * @param {number} index. page index
@@ -14496,6 +15829,22 @@ export interface Grid extends BaseElement, GridProperties {
    * Navigates to the last page, when grid paging is enabled.
    */
   lastPage(): void;
+  /**
+   * Focuses and selects a cell or row. The keyboard navigation starts from the focused cell or row. Any previously applied selection will be cleared after calling this method.
+   * @param {string | number} rowId. row bound id
+   * @param {string} dataField?. column bound data field
+   */
+  focusAndSelect(rowId: string | number, dataField?: string): void;
+  /**
+   * Iterates through each row in the grid and calls the callback for each row. This is similar to the forEach method on a JavaScript array. This is called for each row, ignoring grouping, filtering or sorting applied in the Grid.
+   * @param {any} rowCallback. Callback function with a row object as parameter. Example: grid.forEachRow((row) => { console.log(row.id) });
+   */
+  forEachRow(rowCallback: any): void;
+  /**
+   * Similar to forEachRow. Iterates through each row in the grid and calls the callback for each row. This method takes into account filtering and sorting applied to the Grid.
+   * @param {any} rowCallback. Callback function with a row object as parameter. Example: grid.forEachRow((row) => { console.log(row.id) });
+   */
+  forEachRowAfterFilterAndSort(rowCallback: any): void;
   /**
    * Gets the maximum position of the vertical scrollbar. You can use this method in combination with the setVerticalScrollValue to apply a new scroll position.
    * @returns {number}
@@ -14521,6 +15870,11 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getColumns(): any;
+  /**
+   * Gets the editing cell(s), when the grid is editing.
+   * @returns {any[]}
+   */
+  getEditCells(): any[];
   /**
    * Gets the groups array.
    * @returns {any[]}
@@ -14537,10 +15891,20 @@ export interface Grid extends BaseElement, GridProperties {
    */
   getSelection(): any;
   /**
-   * Gets the selected row ids.
+   * Gets an Array where each item is an Array of row id and row data. If the Grid is used in virtual mode, the row data parameter is empty object, because the data is loaded on demand.
    * @returns {any[]}
    */
   getSelectedRows(): any[];
+  /**
+   * Gets the selected row ids.
+   * @returns {any[]}
+   */
+  getSelectedRowIds(): any[];
+  /**
+   * Gets the selected row indexes.
+   * @returns {any[]}
+   */
+  getSelectedRowIndexes(): any[];
   /**
    * Gets the selected cells. The method returns an array of cell. Each cell is an array with row id, column data field and cell value.
    * @returns {any[]}
@@ -14562,10 +15926,26 @@ export interface Grid extends BaseElement, GridProperties {
    */
   getViewRows(): any;
   /**
-   * Gets a JSON object with the following fields: 'sort', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'.
+   * Gets a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
    * @returns {any}
    */
   getState(): any;
+  /**
+   * Saves the Grid state and returns a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
+   * @param {string} name?. state name
+   * @returns {any}
+   */
+  saveState(name?: string): any;
+  /**
+   * Loads a previously saved Grid state. You can pass a state name when there is a state which was previously saved with the saveState(stateName) method call or a state object returned by the saveState or getState method calls. The state object is required to be a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
+   * @param {any} state. state name or state object
+   * @returns {any}
+   */
+  loadState(state: any): any;
+  /**
+   * Resets the Grid state.
+   */
+  resetState(): void;
   /**
    * Gets the changes from the batch edit.
    * @returns 
@@ -14578,6 +15958,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getCellValue(rowId: string | number, dataField: string): any;
+  /**
+   * Gets a column. Returns a Grid column object.
+   * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
+   * @returns {GridColumn}
+   */
+  getColumn(dataField: string): GridColumn;
   /**
    * Gets a value of a column.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -14592,6 +15978,18 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getRowProperty(rowId: string | number, propertyName: string): any;
+  /**
+   * Gets a row. Returns a Grid row object.
+   * @param {string | number} rowId. row bound id
+   * @returns {GridRow}
+   */
+  getRow(rowId: string | number): GridRow;
+  /**
+   * Gets a row by its index. Returns a Grid row object.
+   * @param {number} rowIndex. row bound index
+   * @returns {GridRow}
+   */
+  getRowByIndex(rowIndex: number): GridRow;
   /**
    * Gets the Data source data associated to the row.
    * @param {string | number} rowId. row bound id
@@ -14599,11 +15997,11 @@ export interface Grid extends BaseElement, GridProperties {
    */
   getRowData(rowId: string | number): any;
   /**
-   * Gets the Row's id.
+   * Gets the Row's id by a row index.
    * @param {number} rowIndex. row index
-   * @returns {any}
+   * @returns {string | number}
    */
-  getRowId(rowIndex: number): any;
+  getRowId(rowIndex: number): string | number;
   /**
    * Gets whether a column's drop-down menu is opened.
    * @returns {boolean}
@@ -14641,14 +16039,20 @@ export interface Grid extends BaseElement, GridProperties {
    * Inserts a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {any} data. row data matching the data source
    * @param {number} index?. Determines the insert index. The default value is the last index.
-   * @param {any} callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
+   * @param  callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
    */
-  insertRow(data: any, index?: number, callback?: any): void;
+  insertRow(data: any, index?: number, callback?: {(row: GridRow): void}): void;
   /**
    * Opens a column drop-down menu.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
    */
   openMenu(dataField: string): void;
+  /**
+   * Opens a context menu. Note that context menu should be enabled.
+   * @param {number} left. Left Position.
+   * @param {number} top. Top Position.
+   */
+  openContextMenu(left: number, top: number): void;
   /**
    * Prints the Grid data. The method uses the options of the <em>dataExport</em> property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use  the <em>dataExport</em> property.
    */
@@ -14746,6 +16150,24 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {number[]} rowIndex. Array of row indexes
    */
   selectRowsByIndex(rowIndex: number[]): void;
+  /**
+   * Selects rows by using a query. Example: grid.selectRowsByQuery('nancy'); selects all rows that have 'nancy' value. Example 2: grid.selectRowsByQuery('nancy, davolio'); selects all rows that have 'nancy' and 'davolio' values in the same row. Example 3: grid.selectRowsByQuery(5, 'quantity', '>'); selects all rows where the value of the 'quantity' field is > 5. 
+   * @param {string} query. Search query
+   * @param {string} dataField?. Column data field.
+   * @param {string} condition?. 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'
+   */
+  selectRowsByQuery(query: string, dataField?: string, condition?: string): void;
+  /**
+   * Selects multiple cells by their ids and dataFields. Example: grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']); - selects the 'firstName', 'quantity' and 'date' cells from the first, second and third rows.
+   * @param {(string | number)[]} rowIds. Array of row ids
+   * @param {string[]} dataFields. Array of data fields.
+   */
+  selectCells(rowIds: (string | number)[], dataFields: string[]): void;
+  /**
+   * Selects cells by using a query. Example: grid.selectCellsByQuery('nancy'); selects all cells that have 'nancy' value. Example 2: grid.selectCellsByQuery('nancy, davolio'); selects all cells that have 'nancy' and 'davolio' values in the same row. 
+   * @param {string} query. Search query
+   */
+  selectCellsByQuery(query: string): void;
   /**
    * Sets a new value to a cell.
    * @param {string | number} rowId. row bound id
@@ -14753,6 +16175,11 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {string | number | Date | boolean} value. New Cell value.
    */
   setCellValue(rowId: string | number, dataField: string, value: string | number | Date | boolean): void;
+  /**
+   * Sets new columns to the Grid. The grid will redraw all the column headers, and then redraw all of the rows. By using 'setColumns', the grid will compare the new columns passed as argument to the method with existing columns. The Grid will automatically create new columns, keep old columns if they already exist and remove columns which are not in the 'setColumns' method argument. The benefit of that is that the state of the column like(sort, filter, width or other) will be kept, if the column exsits after the new columns are applied.
+   * @param {GridColumn[]} columns. Columns array.
+   */
+  setColumns(columns: GridColumn[]): void;
   /**
    * Sets a property to a column.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -14770,16 +16197,16 @@ export interface Grid extends BaseElement, GridProperties {
   /**
    * Sets a style to a row.
    * @param {string | number} rowId. row bound id
-   * @param {any} rowStyle. The row style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
+   * @param  rowStyle. The row style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
    */
-  setRowStyle(rowId: string | number, rowStyle: any): void;
+  setRowStyle(rowId: string | number, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
   /**
    * Sets a style to a row.
    * @param {string | number} rowId. row bound id
    * @param {string} dataField. Column bound field name.
-   * @param {any} rowStyle. The cell style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
+   * @param  rowStyle. The cell style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
    */
-  setCellStyle(rowId: string | number, dataField: string, rowStyle: any): void;
+  setCellStyle(rowId: string | number, dataField: string, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
   /**
    * Sets the position of the vertical scrollbar. You can use this method in combination with the getVerticalScrollValue and getVerticalScrollMax.
    * @param {number} value. The new scroll position
@@ -14799,9 +16226,9 @@ export interface Grid extends BaseElement, GridProperties {
    * Updates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string | number} rowId. row bound id
    * @param {any} data. row data matching the data source
-   * @param {any} callback?. Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.
+   * @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?: any): void;
+  updateRow(rowId: string | number, data: any, callback?: {(row: GridRow): void}): void;
   /**
    * Unselects a row, cell or column.
    * @param {string | number} rowId. row bound id
@@ -14946,6 +16373,11 @@ export interface GridAppearance {
    * Default value: false
    */
   showRowHeader?: boolean;
+  /**
+   * Shows or hides Row headers. In TreeGrid, the non-leaf tree items are displayed as normal rows. If this property is set to true, they are displayed as headers similar to the grouping rendering.
+   * Default value: false
+   */
+  showTreeRowHeader?: boolean;
   /**
    * Shows row indexes in the row header. The showRowHeader property should be true
    * Default value: false
@@ -14976,6 +16408,11 @@ export interface GridAppearance {
    * Default value: true
    */
   showColumnHeaderLines?: boolean;
+  /**
+   * Shows drag icon on the column header when drag is enabled. The icon is displayed when you move the mouse cursor to the column header's left edge.
+   * Default value: false
+   */
+  showColumnHeaderDragIcon?: boolean;
   /**
    * Shows column lines.
    * Default value: true
@@ -14993,12 +16430,12 @@ export interface GridAppearance {
   showColumnGroupsInColumnPanel?: boolean;
   /**
    * Shows filtered column background, when filter is applied.
-   * Default value: true
+   * Default value: false
    */
   showFilterColumnBackground?: boolean;
   /**
    * Shows sorted column background, when sorting is applied.
-   * Default value: true
+   * Default value: false
    */
   showSortColumnBackground?: boolean;
   /**
@@ -15056,6 +16493,11 @@ export interface GridAppearance {
    * Default value: false
    */
   showVerticalScrollBarOnFixedColumns?: boolean;
+  /**
+   * Shows the today's date as 'Today' vs '7/8/2022'. When the property is set to false, it will display the date.
+   * Default value: true
+   */
+  showTodayDateAsString?: boolean;
 }
 
 /**An object containing settings related to the grid's behavior. */
@@ -15157,7 +16599,7 @@ export interface GridClipboard {
    * Sets or gets a callback on paste.
    * Default value: null
    */
-  onPasteValue?: any;
+  onPasteValue?: {(args: {value: any, oldValue: any, dataField: string, id: string | number}): void};
 }
 
 export interface GridColumn {
@@ -15242,15 +16684,20 @@ export interface GridColumn {
    */
   cellsVerticalAlign?: VerticalAlignment | string;
   /**
-   * Sets or gets the column's header CSS class name.
+   * 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.
-   * Default value: ""
+   * 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?: string;
+  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 the name of the column group.
    * Default value: ""
@@ -15282,7 +16729,7 @@ export interface GridColumn {
    */
   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): object', 'onRender(int row, string column, object editor, object rowData): object', 'setValue(object value): void' and 'getValue(object value): object' callback functions.
+   * 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;
@@ -15305,7 +16752,7 @@ export interface GridColumn {
    * Sets or gets the column's format function.
    * Default value: null
    */
-  formatFunction?: any;
+  formatFunction?: {(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any}): void};
   /**
    * 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]
@@ -15316,6 +16763,16 @@ export interface GridColumn {
    * 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: ""
@@ -15326,11 +16783,21 @@ export interface GridColumn {
    * 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};
   /**
    * Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
    * Default value: null
@@ -15341,6 +16808,11 @@ export interface GridColumn {
    * 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
@@ -15357,35 +16829,117 @@ export interface GridColumn {
    */
   showDescriptionButton?: boolean;
   /**
-   * Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
-   * Default value: 
+   * 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', 'radioButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images. 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 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;
+}
+
+/**Context Menu is the drop-down menu displayed after right-clicking a Grid row. It allows you to delete row, edit cell or row depending on the edit mode. The 'contextMenuItemCustom' dataSource option allows you to add custom menu item to the context menu. You can replace the context menu by using the 'selector' property and setting it to ID of a Smart.Menu component. */
+export interface GridContextMenu {
+  /**
+   * Sets or gets whether the context menu is enabled. If the value is false, the context menu will not be displayed, when user right clicks on a row.
+   * Default value: false
+   */
+  enabled?: boolean;
+  /**
+   * Sets the data sources to the context menu.
+   * Default value: [object Object]
+   */
+  dataSource?: GridContextMenuDataSource;
+  /**
+   * Sets the ID or CSS Class of a Smart.Menu component to be used as a context menu for the Grid.
+   * Default value: ""
+   */
+  selector?: string;
+  /**
+   * Sets the width of the context menu.
+   * Default value: 250
+   */
+  width?: number;
+  /**
+   * Sets the height of the context menu.
+   * Default value: null
+   */
+  height?: number | null;
+}
+
+/**Sets the data sources to the context menu. */
+export interface GridContextMenuDataSource {
+  /**
+   * Describes the delete item.
+   * Default value: [object Object]
    */
-  width?: string | number;
+  contextMenuItemDelete?: GridCommand;
   /**
-   * 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', 'radioButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images. 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: 
+   * Describes the edit item.
+   * Default value: [object Object]
    */
-  template?: any;
+  contextMenuItemEdit?: GridCommand;
   /**
-   * 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
+   * Describes the custom item.
+   * Default value: [object Object]
    */
-  validationRules?: [] | null;
+  contextMenuItemCustom?: GridCommand;
+}
+
+/**Describes the delete item. */
+export interface GridCommand {
   /**
-   * Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
-   * Default value: center
+   * Sets the command of the context menu item.
+   * Default value: "contextMenuItemDeleteCommand"
    */
-  verticalAlign?: VerticalAlignment | string;
+  command?: 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: 
+   * Enables the context menu item.
+   * Default value: true
    */
-  summary?: string[];
+  enabled?: boolean;
   /**
-   * Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
+   * Sets the visibility of the context menu item.
    * Default value: true
    */
   visible?: boolean;
+  /**
+   * Sets the icon of the context menu item.
+   * Default value: "jqx-icon-delete"
+   */
+  icon?: string;
+  /**
+   * Sets the label of the context menu item.
+   * Default value: ""
+   */
+  label?: string;
 }
 
 /**Column Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column. */
@@ -15443,7 +16997,7 @@ export interface GridColumnMenuDataSource {
    * Describes the settings of the column menu item duplicate.
    * Default value: [object Object]
    */
-  columnMenuItemDuplicate?: GridCommand;
+  columnMenuItemClone?: GridCommand;
   /**
    * Describes the settings of the column menu item insert left.
    * Default value: [object Object]
@@ -15464,6 +17018,11 @@ export interface GridColumnMenuDataSource {
    * Default value: [object Object]
    */
   columnMenuItemSortDesc?: GridCommand;
+  /**
+   * Describes the settings of the column menu item to add sorting.
+   * Default value: [object Object]
+   */
+  columnMenuItemSort?: GridCommand;
   /**
    * Describes the settings of the column menu item remove sort.
    * Default value: [object Object]
@@ -15501,41 +17060,17 @@ export interface GridColumnMenuDataSource {
   columnMenuItemDelete?: GridCommand;
 }
 
-/**Describes the settings of the column menu customize type */
-export interface GridCommand {
-  /**
-   * Sets the command of the column menu customize type.
-   * Default value: "customizeTypeCommand"
-   */
-  command?: string;
-  /**
-   * Enables the column menu customize type.
-   * Default value: true
-   */
-  enabled?: boolean;
-  /**
-   * Sets the visibility of the column menu customize type.
-   * Default value: false
-   */
-  visible?: boolean;
-  /**
-   * Sets the icon of the column menu customize type.
-   * Default value: "jqx-icon-customize"
-   */
-  icon?: string;
-  /**
-   * Sets the label of the column menu customize type.
-   * Default value: ""
-   */
-  label?: string;
-}
-
 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
@@ -15617,7 +17152,7 @@ export interface GridCharting {
    * Sets or gets the chart's container.
    * Default value: null
    */
-  appendTo?: any;
+  appendTo?: string | HTMLElement;
   /**
    * Sets or gets the charting dialog.
    * Default value: [object Object]
@@ -15805,12 +17340,12 @@ export interface GridDataSourceSettings {
    */
   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.
+   * Sets the virtual data source function which is called each time the Grid requests data. Example for calling the callback function with the new data set: resultCallbackFunction({dataSource: data}); Demos using 'virtualDataSource' are available on the Grid demos page. Example: https://www.htmlelements.com/demos/grid/virtualscroll/
    * Default value: null
    */
-  virtualDataSource?: any;
+  virtualDataSource?: {(resultCallbackFunction: any, details: DataAdapterVirtualDataSourceDetails): void};
   /**
-   * 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
+   * 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. Example: https://www.htmlelements.com/demos/grid/virtual-tree-grid/
    * Default value: null
    */
   virtualDataSourceOnExpand?: any;
@@ -16117,6 +17652,11 @@ export interface GridFiltering {
    * Default value: false
    */
   enabled?: boolean;
+  /**
+   * Determines the filtering operator used in the Grid. By default filters are applied with 'and' operator i.e returns a set of rows matching the filter expressions of columnA AND columnB. The other option is to return a set of rows matching the filter expressions of columnA OR columnB. For example: grid.filtering.operator = 'or'; grid.addFilter('lastName', 'contains "davolio"') grid.addFilter('firstName', 'contains "Antoni"'); - that code will apply two filters to the Grid and will return all rows where firstName is 'Antoni' or the lastName is 'Davolio'
+   * Default value: "and"
+   */
+  operator?: string;
   /**
    * An array of filtering conditions to apply to the DataGrid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '&lt;= 3 and &gt;= 8']]. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - [['firstName', 'EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']]. Example with a string filter applied to a string column - [['lastName','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: 
@@ -16228,6 +17768,11 @@ export interface GridGrouping {
    * Default value: false
    */
   autoExpandAll?: boolean;
+  /**
+   * Automatically expands all groups to a given level.
+   * Default value: 0
+   */
+  autoExpandToLevel?: number;
   /**
    * Automatically hides all grouped columns.
    * Default value: false
@@ -16239,20 +17784,20 @@ export interface GridGrouping {
    */
   expandMode?: GridGroupingExpandMode | string;
   /**
-   * Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level.
-   * Default value: advanced
+   * Sets or gets the column's format function.
+   * Default value: null
    */
-  renderMode?: GridGroupingRenderMode | string;
+  formatFunction?: {(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any}): void};
   /**
    * Sets the group row height.
    * Default value: 50
    */
   groupRowHeight?: string | number;
   /**
-   * Sets the indent of the group toggle button.
-   * Default value: 16
+   * Sets or gets the data fields to group by.
+   * Default value: []
    */
-  toggleButtonIndent?: number;
+  groupBy?: string[];
   /**
    * Sets the indent of the group.
    * Default value: 16
@@ -16263,6 +17808,21 @@ export interface GridGrouping {
    * Default value: [object Object]
    */
   groupBar?: GridGroupingGroupBar;
+  /**
+   * Expands a group in the first grid render. Example: onGroupDefaultExpanded: (dataItem) =&gt;{ return dataItem.label === 'Peppermint Mocha Twist' }
+   * Default value: null
+   */
+  onGroupDefaultExpanded?: any;
+  /**
+   * Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. In 'multipleColumns' mode, each group is displayed in its column.
+   * Default value: advanced
+   */
+  renderMode?: GridGroupingRenderMode | string;
+  /**
+   * Sets the indent of the group toggle button.
+   * Default value: 16
+   */
+  toggleButtonIndent?: number;
   /**
    * Describes the group summary row's settings.
    * Default value: [object Object]
@@ -16303,6 +17863,40 @@ export interface GridGroupingSummaryRow {
   visible?: boolean;
 }
 
+/**Sets the grid's image and filter upload settings for the image and attachment columns. */
+export interface GridUploadSettings {
+  /**
+   * Sets or file/image upload url.
+   * Default value: ""
+   */
+  url?: string;
+  /**
+   * Sets or file/image remove url.
+   * Default value: ""
+   */
+  removeUrl?: string;
+  /**
+   * Sets or gets the upload field name. In the backend, you can use this name to access the images data. For example in expressJS, you can use something like that: const images = req['files']['userfile[]'];
+   * Default value: "userfile[]"
+   */
+  name?: string;
+  /**
+   * Additional data to pass to the server. The format should be a JSON string.
+   * Default value: ""
+   */
+  data?: string;
+  /**
+   * Function called when the upload is completed. JSON object with 'files', 'status', 'fileURL' and 'serverResponse' are passed as parameters when the function is called by the Grid.
+   * Default value: 
+   */
+  onUploadCompleted?: any;
+  /**
+   * Function called when the upload has failed. JSON object with 'files', 'status' and 'serverResponse' are passed as parameters when the function is called by the Grid.
+   * Default value: 
+   */
+  onUploadError?: any;
+}
+
 /**Describes the paging settings. */
 export interface GridPaging {
   /**
@@ -16320,6 +17914,11 @@ export interface GridPaging {
    * Default value: 10
    */
   pageSize?: number;
+  /**
+   * Sets the number of hierarchical rows per page. For example, displays 2 root groups per page, when grouping is enabled.
+   * Default value: 2
+   */
+  pageHierarchySize?: number;
   /**
    * Sets the start page.
    * Default value: 0
@@ -16523,7 +18122,7 @@ export interface GridRowDetail {
    * Sets the template of the row details.
    * Default value: 
    */
-  template?: any;
+  template?: string | HTMLTemplateElement;
   /**
    * Sets the visibility of the Column which allows you to dynamically expand/collapse the row details.
    * Default value: true
@@ -16559,6 +18158,40 @@ export interface GridSummaryRow {
   editing?: boolean;
 }
 
+/**Sets the grid's state settings. */
+export interface GridStateSettings {
+  /**
+   * Enables or disables auto-save of the Grid's state
+   * Default value: false
+   */
+  autoSave?: boolean;
+  /**
+   * Enables or disables save/load of the grid state.
+   * Default value: true
+   */
+  enabled?: boolean;
+  /**
+   * Sets or gets the current state.
+   * Default value: ""
+   */
+  current?: string;
+  /**
+   * Container which is auto-filled with state objects when you call the saveState method or enable the autoSave of states. Each object has a key which is the state's name and value which is a json with the state's properties.
+   * Default value: null
+   */
+  storage?: any;
+  /**
+   * Function called when the state is changed.
+   * Default value: 
+   */
+  onStateChange?: any;
+  /**
+   * Array with state options such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', 'columns'. This property determines which parts of the state would be saved or loaded.
+   * Default value: 
+   */
+  options?: string[];
+}
+
 /**Describes the settings for the group header. */
 export interface GridGroupHeader {
   /**
@@ -16584,12 +18217,12 @@ export interface GridHeader {
    * Sets a template for the header.
    * Default value: 
    */
-  template?: string | HTMLTemplateElement;
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
   /**
    * This callback function can be used for customization of the Header toolbar. The Toolbar HTML Element is passed as an argument.
    * Default value: null
    */
-  onInit?: any;
+  onInit?: {(element: HTMLElement): void};
   /**
    * Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter'  displays a button opening the filtering panel.  'group' displays a button opening the grouping panel. 'sort'  displays a button opening the sorting panel. 'format'  displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel.
    * Default value: [ "columns", "filter", "group", "sort", "format", "search" ]
@@ -16608,7 +18241,7 @@ export interface GridFooter {
    * Sets a template for the footer.
    * Default value: 
    */
-  template?: string | HTMLTemplateElement;
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
 }
 
 export interface GridRow {
@@ -16986,16 +18619,36 @@ export interface GridSorting {
    * Default value: 
    */
   sort?: string[];
+  /**
+   * Maintains sorting when user edits data in the sorted column. The feature is useful when you want to apply sort just once and you set the property to false.
+   * Default value: true
+   */
+  maintainSort?: boolean;
   /**
    * Sets the count of allowed sorting columns. When the property value is set to 'many', users can sort data by multiple columns.
    * Default value: one
    */
   mode?: GridSortingMode | string;
+  /**
+   * Sets the command key. The property is used in the multi-column sorting. If commandKey='Control', users will be able to sort by multiple columns only while holding the 'Control' key.
+   * Default value: Default
+   */
+  commandKey?: GridSortingCommandKey | string;
   /**
    * Enables switching between the three sort states: ascending, descending and not sorted.
    * Default value: true
    */
   sortToggleThreeStates?: boolean;
+  /**
+   * Enables switching between the sort states on column click. This is the default behavior.
+   * Default value: true
+   */
+  sortToggleOnClick?: boolean;
+  /**
+   * Enables switching between the sort states on column click and holding down the command key.
+   * Default value: false
+   */
+  sortToggleOnClickAndCommandKey?: boolean;
 }
 
 declare global {
@@ -17046,8 +18699,8 @@ export declare type GridFilteringFilterRowApplyMode = 'auto' | 'click';
 export declare type GridFilteringFilterMenuMode = 'default' | 'excel';
 /**Sets the group expand mode. */
 export declare type GridGroupingExpandMode = 'buttonClick' | 'rowClick';
-/**Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. */
-export declare type GridGroupingRenderMode = 'basic' | 'compact' | 'advanced';
+/**Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. In 'multipleColumns' mode, each group is displayed in its column. */
+export declare type GridGroupingRenderMode = 'basic' | 'compact' | 'advanced' | 'multipleColumns';
 /**Sets the ellipsis display mode. */
 export declare type GridPagerAutoEllipsis = 'none' | 'before' | 'after' | 'both';
 /**Sets or gets whether the selection allows you to select 'one', 'many' or a variation of 'many' called 'extended'. 'one' allows you to have only single cell or row selected. 'many'  */
@@ -17058,6 +18711,8 @@ export declare type GridSelectionAction = 'none' | 'click' | 'doubleClick';
 export declare type GridSelectionCheckBoxesSelectAllMode = 'none' | 'page' | 'all';
 /**Sets the count of allowed sorting columns. When the property value is set to 'many', users can sort data by multiple columns. */
 export declare type GridSortingMode = 'one' | 'many';
+/**Sets the command key. The property is used in the multi-column sorting. If commandKey='Control', users will be able to sort by multiple columns only while holding the 'Control' key. */
+export declare type GridSortingCommandKey = 'Default' | 'Alt' | 'Control' | 'Shift';
 export interface GroupPanelProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -17473,6 +19128,11 @@ export interface KanbanProperties {
    * Default value: true
    */
   allowDrop?: boolean;
+  /**
+   * This property changes the visual appeal of the Kanban columns and tasks. When set to true and the Kanban columns have their 'color' property set, the color is also applied to the tasks and edit dialog.
+   * Default value: false
+   */
+  applyColumnColorToTasks?: boolean;
   /**
    * Enables or disables auto load state from the browser's localStorage. Information about tasks and their position and selected state, filtering, sorting, collapsed columns, as well as the values of the properties taskActions, taskComments, taskDue, taskPriority, taskProgress, taskTags, and taskUserIcon is loaded.
    * Default value: true
@@ -17483,6 +19143,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   autoSaveState?: boolean;
+  /**
+   * Automatically updates the columns height depending on the tasks inside the column. The effect of this property is observed when 'columnColorEntireSurface' is true.
+   * Default value: false
+   */
+  autoColumnHeight?: boolean;
   /**
    * Allows collapsing the card content.
    * Default value: false
@@ -17603,6 +19268,31 @@ export interface KanbanProperties {
    * 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 which can be used for customizing the tasks rendering. The Kanban calls it with 2 arguments - task html element and task data.
+   * Default value: null
+   */
+  onTaskRender?: any;
+  /**
+   * Callback function which can be used for customizing the filter items. The function is called with 1 argument - Array of items which will be displayed in the filter drop down. You can modify that array to remove or update items to filter by.
+   * Default value: null
+   */
+  onFilterPrepare?: any;
+  /**
+   * Callback function which can be used for customizing the sort items. The function is called with 1 argument - Array of items which will be displayed in the sort drop down. You can modify that array to remove or update items to sort by.
+   * Default value: null
+   */
+  onSortPrepare?: any;
+  /**
+   * Callback function which can be used for customizing the column header rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
+   * Default value: null
+   */
+  onColumnHeaderRender?: any;
+  /**
+   * Callback function which can be used for customizing the column footer rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
+   * Default value: null
+   */
+  onColumnFooterRender?: any;
   /**
    * Determines selection mode.
    * Default value: zeroOrOne
@@ -17623,6 +19313,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   rightToLeft?: boolean;
+  /**
+   * Sets or gets whether the edit dialog is displayed in readonly mode. In that mode it shows only the task details, but the editing is disabled. However, if comments are enabled, you will be able to add comments in the dialog.
+   * Default value: false
+   */
+  readonly?: boolean;
   /**
    * Describes the swimlanes in the kanban board. Sub-columns are not applicable when swimlanes are present.
    * Default value: 
@@ -17648,6 +19343,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   taskActions?: boolean;
+  /**
+   * Represents a callback function which is called when the task actions menu is created. The task actions element is passed as parameter and allows you to customize the menu. Example: (list) => { list.innerHTML = 'Custom Item'; list.onclick = () => { alert('clicked'); }}
+   * Default value: null
+   */
+  taskActionsRendered?: any;
   /**
    * Toggles the visibility of the task comments icon.
    * Default value: false
@@ -17907,7 +19607,14 @@ export interface Kanban extends BaseElement, KanbanProperties {
 	* @param event. The custom event.    */
   onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
-   * This event is triggered when a new task is added.
+   * This event is triggered before a new task is added. You can use the event.detail.value and event.detail.id to customize the new Task before adding it to the Kanban. Example: kanban.onTaskBeforeAdd = (event) => { const data = event.detail.value; const id = event.detail.id; event.detail.id = 'BG12';}
+	* @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 is triggered when a new task is added. Example: kanban.onTaskAdd = (event) => { const data = event.detail.value; const id = event.detail.id; }
 	* @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.
@@ -17943,15 +19650,15 @@ export interface Kanban extends BaseElement, KanbanProperties {
    */
   onTaskDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
-   * Adds filtering
-   * @param {string[]} filters. Filter information
-   * @param {string} operator?. Logical operator between the filters of different fields
+   * Adds filtering. Example: const filterGroup = new Smart.FilterGroup(); const filterObject = filterGroup.createFilter('string', 'Italy', 'contains'); filterGroup.addFilter('and', filterObject); kanban.addFilter([['Country', filterGroup]]);
+   * @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: string[], operator?: string): void;
+  addFilter(filters: any, operator?: string): void;
   /**
-   * Adds sorting
+   * Adds sorting. Example: kanban.addSort(['Country'], 'ascending');
    * @param {[] | string} dataFields. The data field(s) to sort by
-   * @param {[] | string} orderBy. The sort direction(s) to sort the data field(s) 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;
   /**
@@ -18224,21 +19931,6 @@ export interface KanbanDataSource {
    * Default value: null
    */
   dueDate?: Date;
-  /**
-   * Callback function which can be used for customizing the tasks rendering. The Kanban calls it with 2 arguments - task html element and task data.
-   * Default value: null
-   */
-  onTaskRender?: any;
-  /**
-   * Callback function which can be used for customizing the column header rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
-   * Default value: null
-   */
-  onColumnHeaderRender?: any;
-  /**
-   * Callback function which can be used for customizing the column footer rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
-   * Default value: null
-   */
-  onColumnFooterRender?: any;
   /**
    * The task's priority.
    * Default value: "normal"
@@ -21642,12 +23334,14 @@ export interface NumberInput extends BaseElement, NumberInputProperties {
    * Returns the value in the desired format.
    * @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): void;
+  getFormattedValue(value: string | number, format?: any): string;
   /**
    * Returns the number of the input.
+   * @returns {number}
    */
-  getValue(): void;
+  getValue(): number;
   /**
    * Selects the text inside the input or if it is <b>readonly</b> then the element is focused.
    */
@@ -23721,6 +25415,11 @@ export interface QueryBuilderProperties {
    * Default value: change
    */
   applyMode?: QueryBuilderApplyMode | string;
+  /**
+   * When 'applyMode' is set to 'immediately', the default value is applied to the editor's value and the QueryBuilder's value is updated automatically.
+   * Default value: false
+   */
+  autoApplyValue?: boolean;
   /**
    * Determines whether QueryBuilder will automatically prompt the user to enter a condition value when a new condition is created. When 'applyMode' is set to 'immediately', the operation field is automatically populated if empty when the selected condition operator is changed. The input field prompts the user when the operation or operator of the condition is changed.
    * Default value: false
@@ -23940,6 +25639,13 @@ export interface QueryBuilder extends BaseElement, QueryBuilderProperties {
    *  value - The value of the selected property.
    */
   onPropertySelected?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the component validates the input values. This happens when you input a new value and focus another component.
+	* @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;
   /**
    * Converts the current value of the element to DynamicLINQ expression.
    * @returns {string}
@@ -24395,6 +26101,16 @@ export interface SchedulerProperties {
    * Default value: 30
    */
   autoScrollStep?: number;
+  /**
+   * Determines whether the all day cells in Day and Week views automatically change their height depending on the events count in these cells. 
+   * Default value: false
+   */
+  autoHeightAllDayCells?: boolean;
+  /**
+   * Defines an array of objects with start and end fields, where start and end are Date objects. For example: [{  'start': '2022-10-25T12:00.000Z', 'end': '2022-10-25T13:00.000Z' }]. 
+   * Default value: 
+   */
+  available?: any;
   /**
    * Determines the color scheme for the event background selector in the event window editor. 
    * Default value: #D50000,#E67C73,#F4511E,#F6BF26,#33B679,#0B8043,#039BE5,#3F51B5,#7986CB,#8E24AA,#616161,
@@ -24660,6 +26376,16 @@ export interface SchedulerProperties {
    * Default value: near
    */
   legendPosition?: SchedulerLegendPosition | string;
+  /**
+   * Determines the layout of the legend items.
+   * Default value: auto
+   */
+  legendLayout?: SchedulerLegendLayout | string;
+  /**
+   * Determines the number of items when the legend switches automatically from horizontal list to menu.
+   * Default value: 10
+   */
+  legendLayoutMenuBreakpoint?: number;
   /**
    * Determines the mouse wheel step. When this property is set to a positive number, the scroll step with mouse wheel or trackpad will depend on the property value.
    * Default value: 50
@@ -24745,6 +26471,11 @@ export interface SchedulerProperties {
    * Default value: 
    */
   restrictedHours?: any;
+  /**
+   * Defines an array of dates and hours that are not allowed to have events on. Events that overlap restricted Hours or start/end on them will not be displayed. Each array item is an Object and requires 2 fields - date and hours. For example: { date: new Date(2022, 10, 1), hours: [[0, 6], 12, [20, 23]] }. The hours define a range of restricted hours similartly to the restricted hours property, the date defines a date where the restricted hours will be applied.
+   * Default value: 
+   */
+  restricted?: any;
   /**
    * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
    * Default value: false
@@ -24817,7 +26548,7 @@ export interface SchedulerProperties {
   timeRulerTicks?: boolean;
   /**
    * Determines the timeZone for the element. By default if the local time zone is used if the property is not set.
-   * Default value: 
+   * Default value: Local
    */
   timeZone?: SchedulerTimeZone | string;
   /**
@@ -24860,6 +26591,11 @@ export interface SchedulerProperties {
    * Default value: menu
    */
   viewSelectorType?: SchedulerViewSelectorType | string;
+  /**
+   * Determines the Start Date rule. The Week and TimelineWeek views start by default from the current date taking into account the firstDayOfWeek property. When this property is set to 'dateCurrent', these views will start from the value of the 'dateCurrent'.
+   * Default value: firstDayOfWeek
+   */
+  viewStartDay?: SchedulerViewStartDay | string;
   /**
    * Determines the format of the week days inside the element. 
    * Default value: short
@@ -25167,6 +26903,16 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
    * @param {any} eventObj. An object describing a Scheduler event that is not already present in the element.
    */
   addEvent(eventObj: any): void;
+  /**
+   * Adds a new view. Example: scheduler.addView('week', 'My View', 'myView', false, false, 10); scheduler.setView('myView');
+   * @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;
   /**
    * Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
    */
@@ -25184,6 +26930,11 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
    * Ends the update operation. This method will resume the rendering and will refresh the element.
    */
   endUpdate(): void;
+  /**
+   * Returns an array of the start and end view dates.
+   * @returns {Date[]}
+   */
+  getViewDates(): Date[];
   /**
    * Refereshes the Scheduler by recalculating the Scrollbars. 
    * @param {boolean} fullRefresh?. If set the Scheduler will be re-rendered completely.
@@ -25238,6 +26989,11 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
    * @param {any[]} state?. An Array containing a valid structure of Scheduler events.
    */
   saveState(state?: any[]): void;
+  /**
+   * Sets the Scheduler's view. Example: scheduler.addView('week', 'My View', 'myView', false, false, 10); scheduler.setView('myView');
+   * @param {string} view?. The view's value. For example: 'day'. 
+   */
+  setView(view?: string): void;
   /**
    * Checks whether the Scheduler contains the event.
    * @param {any} eventObj. A Scheduler event object.
@@ -25657,6 +27413,8 @@ export declare type SchedulerHeaderViewPosition = 'far' | 'near';
 export declare type SchedulerLegendLocation = 'footer' | 'header';
 /**Determines the position of the legend. By default it's positioned to the near side but setting it to 'far' will change that. */
 export declare type SchedulerLegendPosition = 'near' | 'far';
+/**Determines the layout of the legend items. */
+export declare type SchedulerLegendLayout = null | 'auto' | 'menu';
 /**Determines the minute formatting inside the Scheduler. */
 export declare type MinuteFormat = '2-digit' | 'numeric';
 /**Determines the visibility of the resize handles. */
@@ -25673,17 +27431,12 @@ export declare type SchedulerTimelineDayScale = 'hour' | 'halfHour' | 'quarterHo
 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';
 /**Indicates the current Scheduler viewType. Custom views must contain a valid <b>type</b> property that corresponds to one of the view types. This property should not be set. */
 export declare type SchedulerViewType = 'day' | 'week' | 'month' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth';
-/**Determines the viewing date range of the timeline. The property should be set to an array of strings or view objects. When you set it to a string, you should use any of the following: 'day', 'week', 'month', 'agenda', 'timelineDay', 'timelineWeek', 'timelineMonth'. Custom views can be defined as objects instead of strings. The view object should contain the following properties: <b>label</b> - the label for the view.
-<b>value</b> - the value for the view. The value is the unique identifier for the view.
-<b>type</b> - the type of view. The type should be one of the default allowed values for a view.
-<b>hideWeekend</b> - an Optional property that allows to hide the weekend only for this specific view.
-<b>hideNonworkingWeekdays</b> - an Optional property that allows to hide the nonwrking weekdays for this specific view.
-<b>shortcutKey</b> - an Optional property that allows to set a custom shortcut key for the view.
-<b>hideHours</b> - an Optional property applicable only to <b>timelineWeek</b> view that allows to hide the hour cells and only show the day cells.
- */
-export declare type SchedulerViews = 'day' | 'week' | 'month' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth';
+
+export declare type SchedulerViews = SchedulerViewType[] | object[] | string[];
 /**Determines type of the view selector located in the header of the element. */
 export declare type SchedulerViewSelectorType = 'auto' | 'tabs' | 'menu';
+/**Determines the Start Date rule. The Week and TimelineWeek views start by default from the current date taking into account the firstDayOfWeek property. When this property is set to 'dateCurrent', these views will start from the value of the 'dateCurrent'. */
+export declare type SchedulerViewStartDay = 'firstDayOfWeek' | 'dateCurrent';
 /**Determines the format of the week days inside the element.  */
 export declare type WeekDayFormat = 'short' | 'long' | 'narrow';
 export interface ScrollBarProperties {
@@ -27288,6 +29041,16 @@ export interface TableProperties {
    * Default value: null
    */
   onInit?: { (): void };
+  /**
+   * A callback function executed after the Table is being initialized.
+   * Default value: null
+   */
+  onLoad?: { (): void };
+  /**
+   * A callback function executed when the Table's update is finished in the endUpdate method.
+   * Default value: null
+   */
+  onUpdateComplete?: { (): void };
   /**
    * Sets or gets the page size (when paging is enabled).
    * Default value: 10
@@ -27499,7 +29262,7 @@ export interface Table extends BaseElement, TableProperties {
   /**
    * Adds a filter to a specific column.
    * @param {string} dataField. The column's data field.
-   * @param {any} filter. FilterGroup object.
+   * @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;
   /**
@@ -29973,6 +31736,11 @@ export interface TreeProperties {
    * Default value: false
    */
   filterable?: boolean;
+  /**
+   * Applies a filter only after the 'Enter' key is pressed.
+   * Default value: false
+   */
+  filterOnEnter?: boolean;
   /**
    * Sets custom text for placeholder in the filter input.
    * Default value: ""