@smart-webcomponents-angular/phoneinput 16.0.2 → 19.0.8

package/index.d.ts

@@ -2369,6 +2369,11 @@ export interface CalendarProperties {
    * Default value: false
    */
   disableAutoNavigation?: boolean;
+  /**
+   * Enables or disables the Calendar mouse wheel behavior.
+   * Default value: false
+   */
+  disableMouseWheel?: boolean;
   /**
    * Determines the date view of the calendar when calendarMode is set to 'default'
    * Default value: month
@@ -7195,6 +7200,11 @@ export interface ComboBox extends BaseElement, ComboBoxProperties {
    * @returns {Node}
    */
   appendChild<T extends Node>(node: Node): T;
+  /**
+   * Adds a new item(s).
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
+   */
+  add(item: any): void;
   /**
    * Removes all items from the drop down list.
    */
@@ -7207,6 +7217,10 @@ export interface ComboBox extends BaseElement, ComboBoxProperties {
    * Closes the dropDown list.
    */
   close(): void;
+  /**
+   * Performs a data bind. This can be used to refresh the data source.
+   */
+  dataBind(): void;
   /**
    * Ensures the desired item is visible by scrolling to it.
    * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
@@ -7221,7 +7235,7 @@ export interface ComboBox extends BaseElement, ComboBoxProperties {
   /**
    * Inserts a new item at a specified position.
    * @param {number} position. The position where the item must be inserted.
-   * @param {any} item. Describes the properties of the item that will be inserted.
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
    */
   insert(position: number, item: any): void;
   /**
@@ -7955,6 +7969,11 @@ export interface DateInputProperties {
    * Default value: 500
    */
   autoCloseDelay?: number;
+  /**
+   * Determines the calendar properties to be set to the popup calendar.
+   * Default value: null
+   */
+  calendarProperties?: any;
   /**
    * 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' }
@@ -8788,7 +8807,7 @@ export interface DockingLayoutProperties {
    */
   closedItems?: any;
   /**
-   * Determines the structure of the element. This property represents an array of objects that define the hierarchy of the items inside the element and their specific settings. Each object must have a type attribute that defines it's behavior.  Three types of objects are allowed:   LayoutGroup - Represents a group of items (Splitter). Used when the user wants more than one DockingLayout item in a single container.  Properties: orientation - A string value indicating the orientation of the Splitter group. Possible values: 'horizontal', 'vertical'. size - A string | number value indicating the size of the Splitter group. items - An array of LayoutPanel object definitions. resizeMode - A string indicating the resize mode. Possible values: 'none', 'adjacent', 'end', 'proportional'. resizeStep - A nummeric value that determines the step of resizing. liveResize - Determines if splitter resizing happens while dragging or not.   LayoutPanel - Represents a DockingLayout item (TabsWindow). LayoutPanels can have one or many items (TabItem).  Properties:   id - the ID of the LayoutPanel. autoHide - a boolean property that determines if the LayoutPanel is autoHidden. autoHidePosition - determines the autoHide position of the item if 'autoHide' property is set. Possible values: 'top', 'bottom', 'left', 'right'. dropPosition - Determines the possible positions for the item at which a new item can be dropped as a result of dragging. Possible values: 'top', 'bottom', 'left', 'right', 'center', 'header', 'layout-top', 'layout-bottom', 'layout-left', 'layout-right'. Positions with the 'layout' prefix reflect on LayoutPanelItems that are children of the LayoutPanel. label - the Label of the LayoutPanel window. tabPosition - Determines the position of the Tab labels inside the LayoutPanel. layout - determines the DockingLayout owner of the LayoutPanel. Accepts a string indicating the ID of a DockingLayout on the page or a direct reference to it. headerButtons - an Array of strings that define the buttons in the header section of the DockingLayout item. tabCloseButtons - a boolean property that Enables or disables the close buttons inside each Tab item label inside the DockingLayout item. tabOverflow - same as 'overflow' property of jqxTabs. It defines the overflow mode of the labels of the Tab items inside a DockingLayout item.selectionMode - the same as jqxTabs selection modes. Applies to Tab items inside a DockingLayout item. tabResize - the same as 'resize' property of jqxTabs. Allows resizing the Tab labels inside the DockingLayout item. locked - Locks the size of the item and does not allow resizing. max - sets the maximum size of the item. min - sets the minimum size of the item size - sets the size of the item. items - an array of objects. Each object defines the structure of a LayoutPanelItem.   LayoutPanelItem - Represents a LayoutPanel item (TabItem). Properties:  id - the ID of the Tab item. label - a string representing the label of the Tab item. content - represents the content of the Tab item. Can be anything. selected - determines if the item is selected. By default the first added item to the LayoutPanel is automatically selected. draggable - a boolean property that allows to disable the dragging of the Tab item.    
+   * Determines the structure of the element. This property represents an array of objects that define the hierarchy of the items inside the element and their specific settings. Each object must have a type attribute that defines it's behavior.  Three types of objects are allowed:   LayoutGroup - Represents a group of items (Splitter). Used when the user wants more than one DockingLayout item in a single container.  Properties: orientation - A string value indicating the orientation of the Splitter group. Possible values: 'horizontal', 'vertical'. size - A string | number value indicating the size of the Splitter group. items - An array of LayoutPanel object definitions. resizeMode - A string indicating the resize mode. Possible values: 'none', 'adjacent', 'end', 'proportional'. resizeStep - A nummeric value that determines the step of resizing. liveResize - Determines if splitter resizing happens while dragging or not.   LayoutPanel - Represents a DockingLayout item (TabsWindow). LayoutPanels can have one or many items (TabItem).  Properties:   id - the ID of the LayoutPanel. autoHide - a boolean property that determines if the LayoutPanel is autoHidden. autoHidePosition - determines the autoHide position of the item if 'autoHide' property is set. Possible values: 'top', 'bottom', 'left', 'right'. dropPosition - Determines the possible positions for the item at which a new item can be dropped as a result of dragging. Possible values: 'top', 'bottom', 'left', 'right', 'center', 'header', 'layout-top', 'layout-bottom', 'layout-left', 'layout-right'. Positions with the 'layout' prefix reflect on LayoutPanelItems that are children of the LayoutPanel. label - the Label of the LayoutPanel window. tabPosition - Determines the position of the Tab labels inside the LayoutPanel. layout - determines the DockingLayout owner of the LayoutPanel. Accepts a string indicating the ID of a DockingLayout on the page or a direct reference to it. headerButtons - an Array of strings that define the buttons in the header section of the DockingLayout item. Possible values for the array are empty array like this [] or an array with any of the following items: 'close', 'autoHide'. tabCloseButtons - a boolean property that Enables or disables the close buttons inside each Tab item label inside the DockingLayout item. tabOverflow - same as 'overflow' property of jqxTabs. It defines the overflow mode of the labels of the Tab items inside a DockingLayout item.selectionMode - the same as jqxTabs selection modes. Applies to Tab items inside a DockingLayout item. tabResize - the same as 'resize' property of jqxTabs. Allows resizing the Tab labels inside the DockingLayout item. locked - Locks the size of the item and does not allow resizing. max - sets the maximum size of the item. min - sets the minimum size of the item size - sets the size of the item. items - an array of objects. Each object defines the structure of a LayoutPanelItem.   LayoutPanelItem - Represents a LayoutPanel item (TabItem). Properties:  id - the ID of the Tab item. label - a string representing the label of the Tab item. content - represents the content of the Tab item. Can be anything. selected - determines if the item is selected. By default the first added item to the LayoutPanel is automatically selected. draggable - a boolean property that allows to disable the dragging of the Tab item.    
    * Default value: 
    */
   layout?: any;
@@ -9347,11 +9366,6 @@ declare global {
 }
 
 export interface DropDownListProperties {
-  /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
-   */
-  animation?: Animation | string;
   /**
    * Used only when dropDownOpenMode is set to 'auto'. Determines the delay before the opened drop down closes if the pointer is not over the element.
    * Default value: 100
@@ -9734,6 +9748,11 @@ export interface DropDownList extends BaseElement, DropDownListProperties {
    * @returns {Node}
    */
   appendChild<T extends Node>(node: Node): T;
+  /**
+   * Adds a new item(s).
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
+   */
+  add(item: any): void;
   /**
    * Removes all items from the drop down list.
    */
@@ -9746,6 +9765,10 @@ export interface DropDownList extends BaseElement, DropDownListProperties {
    * Closes the dropDown list.
    */
   close(): void;
+  /**
+   * Performs a data bind. This can be used to refresh the data source.
+   */
+  dataBind(): void;
   /**
    * Ensures the desired item is visible by scrolling to it.
    * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
@@ -13454,11 +13477,6 @@ export interface GanttChartProperties {
    * Default value: true
    */
   hideTimelineSecondHeaderDetails?: boolean;
-  /**
-   * Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.
-   * Default value: false
-   */
-  showSelectionColumn?: boolean;
   /**
    * Hides the Resource panel regardless of the resources availability By default the Resource panel is visible if resources are added to the GanttChart. This property allows to hide the Resource panel permanently.
    * Default value: false
@@ -13539,6 +13557,16 @@ export interface GanttChartProperties {
    * Default value: null
    */
   onTaskRender?: any;
+  /**
+   * A function that can be used to completly customize the task element. The function has two arguments: task - the task object.taskElement - the task's html element.
+   * Default value: null
+   */
+  taskFormatFunction?: any;
+  /**
+   * A function that can be used to completly customize the tooltip. The function has three arguments: tooltipObject - the tooltip object.event - the event that triggered the tooltip.content - the tooltip's label element.
+   * Default value: null
+   */
+  tooltipFormatFunction?: any;
   /**
    * A function that can be used to completly customize the popup Window that is used to interact width tasks by changing their properties. The function as three arguments: target - the target popup Window that is about to be opened.type - the type of the window. The type determines the purpose of the window. Three possible values: 'task' (task editing), 'confirm' ( confirmation window), 'connection' (used when deleting a connection between tasks). item - the connection/task object that is the target of the window.
    * Default value: null
@@ -13629,11 +13657,21 @@ export interface GanttChartProperties {
    * Default value: 
    */
   selectedResourceIds?: number[] | string[];
+  /**
+   * Sets or gets the selection mode. Only applicable when selection is enabled.
+   * Default value: many
+   */
+  selectionMode?: GanttChartSelectionMode | string;
   /**
    * Enables/Disables the current time shader. If enabled all cells that represent past time will be shaded.
    * Default value: false
    */
   shadeUntilCurrentTime?: boolean;
+  /**
+   * Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.
+   * Default value: false
+   */
+  showSelectionColumn?: boolean;
   /**
    * Determines whether the baselnes of the tasks are visible or not. Baselines are defined via the 'planned' attribute on the task objects of the dataSource property.
    * Default value: false
@@ -14171,6 +14209,11 @@ export interface GanttChart extends BaseElement, GanttChartProperties {
    * @param {string} content?. Allows to set a custom content for the Tooltip.
    */
   showTooltip(target: HTMLElement, content?: string): void;
+  /**
+   * Scrolls to a date.
+   * @param {Date} date. The date to scroll to.
+   */
+  scrollToDate(date: Date): void;
   /**
    * Saves the current settings of the element to LocalStorage. <strong>Requires an id to be set to the element.</strong>
    * @param {any[]} state?. An Array containing a valid structure of Gantt Chart tasks.
@@ -14741,6 +14784,8 @@ export declare type QuarterFormat = 'numeric' | 'long' | 'short';
 export declare type GanttChartResourceTimelineMode = 'diagram' | 'histogram' | 'custom';
 /**Determines how the resources will be displayed inside the resource Timeline. */
 export declare type GanttChartResourceTimelineView = 'hours' | 'tasks' | 'custom';
+/**Sets or gets the selection mode. Only applicable when selection is enabled. */
+export declare type GanttChartSelectionMode = 'one' | 'many' | 'extended';
 /**Determines whether the GanttChart can be sorted by one, more then one or no columns. */
 export declare type GanttChartSortMode = 'none' | 'one' | 'many';
 /**Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task' */
@@ -15082,15 +15127,15 @@ export interface GridProperties {
    */
   behavior?: GridBehavior;
   /**
-   * An object containing settings related to the grid's layout.
-   * Default value: [object Object]
+   * 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: 
    */
-  layout?: GridLayout;
+  currentUser?: string | number;
   /**
-   * Sets or gets the language. Used in conjunction with the property messages. 
-   * Default value: "en"
+   * Describes the column header settings.
+   * Default value: [object Object]
    */
-  locale?: string;
+  columnHeader?: GridColumnHeader;
   /**
    * The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..
    * Default value: [object Object]
@@ -15116,6 +15161,11 @@ export interface GridProperties {
    * Default value: 
    */
   columnGroups?: GridColumnGroup[];
+  /**
+   * 
+   * Default value: false
+   */
+  dropDownMode?: boolean;
   /**
    * Sets or gets details about conditional formatting to be applied to the Grid's cells.
    * Default value: null
@@ -15156,11 +15206,41 @@ export interface GridProperties {
    * Default value: [object Object]
    */
   filtering?: GridFiltering;
+  /**
+   * Describes the footer settings of the grid.
+   * Default value: [object Object]
+   */
+  footer?: GridFooter;
+  /**
+   * Sets or gets whether Excel-like formulas can be passed as cell values. Formulas are always preceded by the = sign and are re-evaluated when cell values are changed. This feature depends on the third-party free plug-in formula-parser (the file formula-parser.min.js has to be referenced).
+   * Default value: false
+   */
+  formulas?: boolean;
   /**
    * Describes the grid's grouping settings.
    * Default value: [object Object]
    */
   grouping?: GridGrouping;
+  /**
+   * Describes the settings for the group header.
+   * Default value: [object Object]
+   */
+  groupHeader?: GridGroupHeader;
+  /**
+   * Describes the header settings of the grid.
+   * Default value: [object Object]
+   */
+  header?: GridHeader;
+  /**
+   * An object containing settings related to the grid's layout.
+   * Default value: [object Object]
+   */
+  layout?: GridLayout;
+  /**
+   * Sets or gets the language. Used in conjunction with the property messages. 
+   * Default value: "en"
+   */
+  locale?: string;
   /**
    * Sets the messages values.
    * Default value:    * [object Object]
@@ -15181,6 +15261,16 @@ export interface GridProperties {
    * Default value: null
    */
   onCellRender?: {(cell: GridCell): void};
+  /**
+   * Callback function, which is called when a cell edit starts. If you return false, the edit will be canceled.
+   * Default value: null
+   */
+  onCellBeginEdit?: {(id: string, dataField: string, value: any): boolean};
+  /**
+   * Callback function, which is called when a cell edit ends. It is used along with the 'editing.readOnlyEdit' property when it is set to true and the purpose of this function is to update the Grid cell after editing.
+   * Default value: null
+   */
+  onCellEditRequest?: {(id: string, dataField: string, value: any, oldValue: any, data: any): void};
   /**
    * Callback function() called before the grid has been initialized and the Grid's Virtual DOM is not created.
    * Default value: null
@@ -15301,26 +15391,6 @@ export interface GridProperties {
    * 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: 
-   */
-  currentUser?: string | number;
-  /**
-   * Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
-   * 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]
@@ -15336,16 +15406,26 @@ export interface GridProperties {
    * Default value: [object Object]
    */
   rowDetail?: GridRowDetail;
+  /**
+   * 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 value indicating whether the element is aligned to support locales using right-to-left fonts.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * The rows property is used to describe all rows displayed in the grid.
+   * Default value: 
+   */
+  rows?: GridRow[];
   /**
    * Sets the scroll mode settings.
    * Default value: physical
    */
   scrolling?: Scrolling | string;
-  /**
-   * Describes the column header settings.
-   * Default value: [object Object]
-   */
-  columnHeader?: GridColumnHeader;
   /**
    * Describes the summary row settings.
    * Default value: [object Object]
@@ -15357,40 +15437,30 @@ export interface GridProperties {
    */
   stateSettings?: GridStateSettings;
   /**
-   * Describes the settings for the group header.
-   * Default value: [object Object]
-   */
-  groupHeader?: GridGroupHeader;
-  /**
-   * Describes the header settings of the grid.
+   * Describes the selection settings.
    * Default value: [object Object]
    */
-  header?: GridHeader;
+  selection?: GridSelection;
   /**
-   * Describes the footer settings of the grid.
+   * Describes sorting settings.
    * Default value: [object Object]
    */
-  footer?: GridFooter;
-  /**
-   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
-   * Default value: false
-   */
-  rightToLeft?: boolean;
+  sorting?: GridSorting;
   /**
-   * The rows property is used to describe all rows displayed in the grid.
-   * Default value: 
+   * Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
+   * Default value: []
    */
-  rows?: GridRow[];
+  users?: any[];
   /**
-   * Describes the selection settings.
+   * Sets the grid's image and filter upload settings for the image and attachment columns.
    * Default value: [object Object]
    */
-  selection?: GridSelection;
+  uploadSettings?: GridUploadSettings;
   /**
-   * Describes sorting settings.
-   * Default value: [object Object]
+   * Sets the current data view. The possible values are 'grid', 'kanban' and 'card'.
+   * Default value: "grid"
    */
-  sorting?: GridSorting;
+  view?: string;
 }
 /**
  Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.
@@ -15465,6 +15535,15 @@ export interface Grid extends BaseElement, GridProperties {
    *  originalEvent - The origianl Event object.
    */
   onColumnDragStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered, when a column property is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(column, propertyName, oldValue, value)
+   *  column - The resized column.
+   *  propertyName - The changed property's name.
+   *  oldValue - The old value(s) of the column.
+   *  value - The new value(s) of the column.
+   */
+  onColumnChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user drags a column.
 	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, data, originalEvent)
@@ -15578,10 +15657,11 @@ export interface Grid extends BaseElement, GridProperties {
   onRowCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user clicks on a row of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
    *  row - The clicked row.
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
+   *  data - Gets the row data.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15589,10 +15669,11 @@ export interface Grid extends BaseElement, GridProperties {
   onRowClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user double clicks on a row of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
    *  row - The double-clicked row.
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
+   *  data - Gets the row data.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15618,11 +15699,12 @@ export interface Grid extends BaseElement, GridProperties {
   onRowStarred?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user clicks on a cell of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
    *  cell - The clicked cell.
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
    *  dataField - Gets the column dataField.
+   *  value - Gets the cell value.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15630,11 +15712,12 @@ export interface Grid extends BaseElement, GridProperties {
   onCellClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user double clicks on a cell of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
    *  cell - The double-clicked cell. 
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
    *  dataField - Gets the column dataField.
+   *  value - Gets the cell value.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15882,8 +15965,10 @@ export interface Grid extends BaseElement, GridProperties {
   /**
    * Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the <em>dataExport</em> property.
    * @param {string} Dataformat. 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
+   * @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
+   * @param {any} dataCallback?. A callback that allows to change the exported data.
    */
-  exportData(Dataformat: string): void;
+  exportData(Dataformat: string, callback?: any, dataCallback?: any): 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
@@ -15898,6 +15983,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any[]}
    */
   findCells(query: string): any[];
+  /**
+   * Filter by all columns. This method works like a global filter and applies a filter to all grid columns.
+   * @param {string} query. Filter query to filter by.
+   * @param {string} dataType?. Optionally filter by a specific data type like 'string', 'boolean', 'date', 'number'.
+   */
+  filterBy(query: string, dataType?: string): void;
   /**
    * Navigates to a page, when paging is enabled.
    * @param {number} index. page index
@@ -16020,22 +16111,6 @@ export interface Grid extends BaseElement, GridProperties {
    * @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 
@@ -16132,6 +16207,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @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?: {(row: GridRow): void}): void;
+  /**
+   * 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;
   /**
    * 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.
@@ -16143,6 +16224,14 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {number} top. Top Position.
    */
   openContextMenu(left: number, top: number): void;
+  /**
+   * Opens the Grid when the 'dropDownMode' property is true.
+   */
+  openDropDown(): void;
+  /**
+   * Closes the Grid when the 'dropDownMode' property is true.
+   */
+  closeDropDown(): 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.
    */
@@ -16159,6 +16248,10 @@ export interface Grid extends BaseElement, GridProperties {
    * Refreshes the grid cells in view. The method is useful for live-updates of cell values.
    */
   refreshView(): void;
+  /**
+   * Resets the Grid state.
+   */
+  resetState(): void;
   /**
    * Removes a column filter. 
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -16190,6 +16283,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {boolean} insertAfter?. Determines whether to insert the first column after the reference column.
    */
   reorderColumns(dataField: string | number, referenceDataField: string | number, insertAfter?: boolean): void;
+  /**
+   * 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;
   /**
    * Sorts the Grid by a data field. This method will add or remove sorting, when sorting is enabled. To remove the sorting, use 'null' for the sortOrder parameter.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -16297,6 +16396,11 @@ export interface Grid extends BaseElement, GridProperties {
    * @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: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
+  /**
+   * Sets the label of the Grid when the 'dropDownMode' property is true.
+   * @param {string} label. The label to be displayed in the dropdown button.
+   */
+  setDropDownLabel(label: 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
@@ -16312,6 +16416,13 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {string | number} rowId. row bound id
    */
   showDetail(rowId: string | number): void;
+  /**
+   * Shows an overlay message below a cell. This method can be used for onboarding tips or in scenarios when you want to display custom messages to the user.
+   * @param {string | number} rowId. row bound id
+   * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
+   * @param {string} value. The message to be shown below the cell
+   */
+  showCellMessage(rowId: string | number, dataField: string, value: string): void;
   /**
    * Updates 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
@@ -16627,6 +16738,11 @@ export interface GridBehavior {
    * Default value: false
    */
   allowColumnFreeze?: boolean;
+  /**
+   * Determines whether the scrolling with mouse wheel is enabled.
+   * Default value: true
+   */
+  allowMouseWheel?: boolean;
   /**
    * Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
    * Default value: none
@@ -16639,73 +16755,38 @@ export interface GridBehavior {
   rowResizeMode?: GridResizeMode | string;
 }
 
-/**An object containing settings related to the grid's layout. */
-export interface GridLayout {
+/**Describes the column header settings. */
+export interface GridColumnHeader {
   /**
-   * Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.
-   * Default value: false
+   * Sets the column header visibility.
+   * Default value: true
    */
-  allowCellsWrap?: boolean;
+  visible?: boolean;
+}
+
+/**The <em>clipboard</em> property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations.. */
+export interface GridClipboard {
   /**
-   * Automatically sets width to any new Column which does not have its 'width' property set.
-   * Default value: false
+   * Sets or gets whether the property is enabled.
+   * Default value: true
    */
-  autoSizeNewColumn?: boolean;
+  enabled?: boolean;
   /**
-   * Sets the width of the auto-generated Grid columns.
-   * Default value: null
+   * Sets or gets whether the copy-pasted values will be auto-filled by using automatic pattern detection. This is used in the Drag&Drop Multiple Cells selection. none does nothing. copy just copies the cells. 'fillSeries' detects and automatically fills the values. For example, if the selection has '1, 2' and the possible positions are more, the pasted values would be '1, 2, 3, 4, etc.
+   * Default value: fillSeries
    */
-  autoGenerateColumnWidth?: string | number | null;
+  autoFillMode?: GridClipboardAutoFillMode | string;
   /**
-   * Sets the width of the Grid columns.
+   * Sets or gets a callback on paste.
    * Default value: null
    */
-  columnWidth?: string | number | null;
+  onPasteValue?: {(args: {value: any, oldValue: any, dataField: string, id: string | number}): void};
+}
+
+export interface GridColumn {
   /**
-   * Sets the height of the Grid columns.
-   * Default value: null
-   */
-  columnHeight?: string | number | null;
-  /**
-   * Sets the minimum height of the Grid columns.
-   * Default value: 30
-   */
-  columnMinHeight?: number;
-  /**
-   * Sets the minimum height of the Grid rows.
-   * Default value: 30
-   */
-  rowMinHeight?: number;
-  /**
-   * Sets the height of the Grid rows. The property can be set to null, auto or a number.
-   * Default value: null
-   */
-  rowHeight?: string | number | null;
-}
-
-/**The <em>clipboard</em> property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations.. */
-export interface GridClipboard {
-  /**
-   * Sets or gets whether the property is enabled.
-   * Default value: true
-   */
-  enabled?: boolean;
-  /**
-   * Sets or gets whether the copy-pasted values will be auto-filled by using automatic pattern detection. This is used in the Drag&Drop Multiple Cells selection. none does nothing. copy just copies the cells. 'fillSeries' detects and automatically fills the values. For example, if the selection has '1, 2' and the possible positions are more, the pasted values would be '1, 2, 3, 4, etc.
-   * Default value: fillSeries
-   */
-  autoFillMode?: GridClipboardAutoFillMode | string;
-  /**
-   * Sets or gets a callback on paste.
-   * Default value: null
-   */
-  onPasteValue?: {(args: {value: any, oldValue: any, dataField: string, id: string | number}): void};
-}
-
-export interface GridColumn {
-  /**
-   * Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
-   * Default value: left
+   * Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
+   * Default value: left
    */
   align?: HorizontalAlignment | string;
   /**
@@ -16729,10 +16810,10 @@ export interface GridColumn {
    */
   allowSelect?: boolean | null;
   /**
-   * Sets or gets whether the column can be edited.
+   * Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }
    * Default value: true
    */
-  allowEdit?: boolean;
+  allowEdit?: any;
   /**
    * Sets or gets whether the column can be sorted.
    * Default value: true
@@ -16763,6 +16844,11 @@ export interface GridColumn {
    * Default value: true
    */
   allowNull?: boolean;
+  /**
+   * Sets or gets the cell's height in card view mode.
+   * Default value: false
+   */
+  cardHeight?: number;
   /**
    * Sets or gets the column's cells format. This property is used for applying a formatting to the cell values. Number format strings: 'd' - decimal numbers.'f' - floating-point numbers.'n' - integer numbers.'c' - currency numbers.'p' - percentage numbers.For adding decimal places to the numbers, add a number after the formatting striFor example: 'c3' displays a number in this format $25.256Built-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: ""
@@ -16823,6 +16909,11 @@ export interface GridColumn {
    * Default value: ""
    */
   description?: string;
+  /**
+   * Sets or gets custom data object related to the column.
+   * Default value: null
+   */
+  dataSet?: any;
   /**
    * Gets the HTML Element. The property returns null when the Column is not in the View.
    * Default value: null
@@ -16863,6 +16954,11 @@ export interface GridColumn {
    * Default value: [object Object]
    */
   formatSettings?: any;
+  /**
+   * Sets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')
+   * Default value: ""
+   */
+  formula?: string;
   /**
    * Sets or gets the column's group.
    * Default value: ""
@@ -16903,6 +16999,16 @@ export interface GridColumn {
    * Default value: null
    */
   rowSpan?: {(cellValue: any, rowIndex: number, data: any): number};
+  /**
+   * Sets or gets the relation id in the dataSourceSettings.relations. The 'relationField' property should be set.
+   * Default value: ""
+   */
+  relationId?: string;
+  /**
+   * Sets or gets the relation field in the dataSourceSettings.relations. The 'relationId' property should be set.
+   * Default value: ""
+   */
+  relationField?: string;
   /**
    * Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
    * Default value: null
@@ -16939,10 +17045,15 @@ export interface GridColumn {
    */
   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.
+   * Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
    * Default value: 
    */
   template?: any;
+  /**
+   * Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.
+   * Default value: null
+   */
+  templateSettings?: any;
   /**
    * Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
    * Default value: null
@@ -16977,6 +17088,11 @@ export interface GridContextMenu {
    * Default value: false
    */
   enabled?: boolean;
+  /**
+   * Sets an array of custom context menu items to be displayed in the context menu.
+   * Default value: null
+   */
+  customContextMenuItems?: any[];
   /**
    * Sets the data sources to the context menu.
    * Default value: [object Object]
@@ -17444,6 +17560,11 @@ export interface GridDataSourceSettings {
    * Default value: "."
    */
   mapChar?: string;
+  /**
+   * Sets or gets the Grid relations. The property expects an array of objects. Each object should have '{id: string, label: string, columns: GridColumn[], dataSource: any}'. Once you have the relations defined, when you create a column, you can set 'relationId' and 'relationField'. This will automatically define a new column editor based on the relation settings.
+   * Default value: null
+   */
+  relations?: any;
   /**
    * 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
@@ -17506,6 +17627,11 @@ export interface GridEditing {
    * Default value: click
    */
   action?: GridEditingAction | string;
+  /**
+   * Read Only Edit is a mode in the grid whereby Cell Editing will not update the data inside the grid. Instead the grid invokes the 'onCellEditRequest' function allowing the application to process the update request.
+   * Default value: false
+   */
+  readOnlyEdit?: boolean;
   /**
    * Describes command keys.
    * Default value: [object Object]
@@ -17856,6 +17982,20 @@ export interface GridFilteringFilterBuilder {
   height?: number | null;
 }
 
+/**Describes the footer settings of the grid. */
+export interface GridFooter {
+  /**
+   * Sets the footer visibility.
+   * Default value: false
+   */
+  visible?: boolean;
+  /**
+   * Sets a template for the footer.
+   * Default value: 
+   */
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
+}
+
 /**Describes the grid's grouping settings. */
 export interface GridGrouping {
   /**
@@ -17968,38 +18108,141 @@ export interface GridGroupingSummaryRow {
   visible?: boolean;
 }
 
-/**Sets the grid's image and filter upload settings for the image and attachment columns. */
-export interface GridUploadSettings {
+/**Describes the settings for the group header. */
+export interface GridGroupHeader {
   /**
-   * Sets or file/image upload url.
-   * Default value: ""
+   * Sets the visibility of the group header.
+   * Default value: false
    */
-  url?: string;
+  visible?: boolean;
   /**
-   * Sets or file/image remove url.
-   * Default value: ""
+   * Sets a template for the group header.
+   * Default value: 
    */
-  removeUrl?: string;
+  template?: string | HTMLTemplateElement;
+}
+
+/**Describes the header settings of the grid. */
+export interface GridHeader {
   /**
-   * 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[]"
+   * Sets the header visibility.
+   * Default value: false
    */
-  name?: string;
+  visible?: boolean;
   /**
-   * Additional data to pass to the server. The format should be a JSON string.
-   * Default value: ""
+   * Sets a template for the header.
+   * Default value: 
    */
-  data?: string;
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
   /**
-   * 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: 
+   * This callback function can be used for customization of the Header toolbar. The Toolbar HTML Element is passed as an argument.
+   * Default value: null
    */
-  onUploadCompleted?: any;
+  onInit?: {(element: HTMLElement): void};
   /**
-   * 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: 
+   * 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. 'colors' displays a button with colors options for formatting.
+   * Default value: [ "columns", "filter", "group", "sort", "format", "search" ]
    */
-  onUploadError?: any;
+  buttons?: string[];
+  /**
+   * Sets the search command type.
+   * Default value: search
+   */
+  searchCommand?: GridHeaderSearchCommand | string;
+  /**
+   * Custom toolbar button. Allows you to add a custom button to the toolbar.
+   * Default value: [object Object]
+   */
+  customButton?: GridCommand;
+}
+
+/**An object containing settings related to the grid's layout. */
+export interface GridLayout {
+  /**
+   * Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.
+   * Default value: false
+   */
+  allowCellsWrap?: boolean;
+  /**
+   * Automatically sets width to any new Column which does not have its 'width' property set.
+   * Default value: false
+   */
+  autoSizeNewColumn?: boolean;
+  /**
+   * Sets the min width of the new column.
+   * Default value: 250
+   */
+  autoSizeNewColumnMinWidth?: number;
+  /**
+   * Automatically sets the height of the Grid.
+   * Default value: false
+   */
+  autoHeight?: boolean;
+  /**
+   * Automatically sets the width of the Grid. All columns should have a 'width' property set to a number in order to use this feature.
+   * Default value: false
+   */
+  autoWidth?: boolean;
+  /**
+   * Sets the width of the auto-generated Grid columns.
+   * Default value: null
+   */
+  autoGenerateColumnWidth?: string | number | null;
+  /**
+   * Sets the width of the Grid columns.
+   * Default value: null
+   */
+  columnWidth?: string | number | null;
+  /**
+   * Sets the height of the Grid columns.
+   * Default value: null
+   */
+  columnHeight?: string | number | null;
+  /**
+   * Sets the minimum height of the Grid columns.
+   * Default value: 30
+   */
+  columnMinHeight?: number;
+  /**
+   * Sets the minimum width of a card in card view.
+   * Default value: 250
+   */
+  cardMinWidth?: number;
+  /**
+   * Sets the cards per row.
+   * Default value: null
+   */
+  cardsPerRow?: number;
+  /**
+   * Sets whether cards are vertically oriented. In this layout mode, the column label is displayed above the column value
+   * Default value: false
+   */
+  cardVertical?: boolean;
+  /**
+   * Sets the width of the Grid when displayed in a drop-down mode.
+   * Default value: 700
+   */
+  dropDownWidth?: number;
+  /**
+   * Sets the height of the Grid when displayed in a drop-down mode.
+   * Default value: 500
+   */
+  dropDownHeight?: number;
+  /**
+   * Sets the minimum height of the Grid rows.
+   * Default value: 30
+   */
+  rowMinHeight?: number;
+  /**
+   * Sets the height of the Grid rows. The property can be set to null, auto or a number.
+   * Default value: null
+   */
+  rowHeight?: string | number | null;
+  /**
+   * Sets the width of the view bar.
+   * Default value: 250
+   */
+  viewBarWidth?: number;
 }
 
 /**Describes the paging settings. */
@@ -18240,156 +18483,42 @@ export interface GridRowDetail {
   dialog?: Dialog;
 }
 
-/**Describes the column header settings. */
-export interface GridColumnHeader {
+export interface GridRow {
   /**
-   * Sets the column header visibility.
+   * Sets or gets the row can be expanded or collapsed.
    * Default value: true
    */
-  visible?: boolean;
-}
-
-/**Describes the summary row settings. */
-export interface GridSummaryRow {
-  /**
-   * Sets the summary row visibility.
-   * Default value: false
-   */
-  visible?: boolean;
+  allowToggle?: boolean;
   /**
-   * Sets the summary row editor. When you point over a summary row cell, an editor is displayed and you will be able to dynamically change the summary type.
-   * Default value: false
+   * Sets or gets the row can be resized.
+   * Default value: true
    */
-  editing?: boolean;
-}
-
-/**Sets the grid's state settings. */
-export interface GridStateSettings {
+  allowResize?: boolean;
   /**
-   * Enables or disables auto-save of the Grid's state
-   * Default value: false
+   * Sets or gets the row can be selected.
+   * Default value: true
    */
-  autoSave?: boolean;
+  allowSelect?: boolean | null;
   /**
-   * Enables or disables auto-load of the Grid's state on page reload.
-   * Default value: false
+   * Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
+   * Default value: true
    */
-  autoLoad?: boolean;
+  allowCheck?: boolean;
   /**
-   * Enables or disables save/load of the grid state.
+   * Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
    * Default value: true
    */
-  enabled?: boolean;
+  checked?: boolean;
   /**
-   * Sets or gets the current state.
-   * Default value: ""
+   * Gets the Row's Cells array.
+   * Default value: []
    */
-  current?: string;
+  cells?: GridCell[];
   /**
-   * 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.
+   * Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
    * 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 {
-  /**
-   * Sets the visibility of the group header.
-   * Default value: false
-   */
-  visible?: boolean;
-  /**
-   * Sets a template for the group header.
-   * Default value: 
-   */
-  template?: string | HTMLTemplateElement;
-}
-
-/**Describes the header settings of the grid. */
-export interface GridHeader {
-  /**
-   * Sets the header visibility.
-   * Default value: false
-   */
-  visible?: boolean;
-  /**
-   * Sets a template for the header.
-   * Default value: 
-   */
-  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?: {(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" ]
-   */
-  buttons?: string[];
-}
-
-/**Describes the footer settings of the grid. */
-export interface GridFooter {
-  /**
-   * Sets the footer visibility.
-   * Default value: false
-   */
-  visible?: boolean;
-  /**
-   * Sets a template for the footer.
-   * Default value: 
-   */
-  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
-}
-
-export interface GridRow {
-  /**
-   * Sets or gets the row can be expanded or collapsed.
-   * Default value: true
-   */
-  allowToggle?: boolean;
-  /**
-   * Sets or gets the row can be resized.
-   * Default value: true
-   */
-  allowResize?: boolean;
-  /**
-   * Sets or gets the row can be selected.
-   * Default value: true
-   */
-  allowSelect?: boolean | null;
-  /**
-   * Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
-   * Default value: true
-   */
-  allowCheck?: boolean;
-  /**
-   * Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
-   * Default value: true
-   */
-  checked?: boolean;
-  /**
-   * Gets the Row's Cells array.
-   * Default value: []
-   */
-  cells?: GridCell[];
-  /**
-   * Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
-   * Default value: null
-   */
-  children?: any;
+  children?: any;
   /**
    * Gets the row's bound data.
    * Default value: null
@@ -18610,6 +18739,59 @@ export interface GridCell {
   setStyle?: {(value: any): void};
 }
 
+/**Describes the summary row settings. */
+export interface GridSummaryRow {
+  /**
+   * Sets the summary row visibility.
+   * Default value: false
+   */
+  visible?: boolean;
+  /**
+   * Sets the summary row editor. When you point over a summary row cell, an editor is displayed and you will be able to dynamically change the summary type.
+   * Default value: false
+   */
+  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 auto-load of the Grid's state on page reload.
+   * Default value: false
+   */
+  autoLoad?: 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 selection settings. */
 export interface GridSelection {
   /**
@@ -18761,6 +18943,40 @@ export interface GridSorting {
   sortToggleOnClickAndCommandKey?: 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;
+}
+
 declare global {
     interface Document {
         createElement(tagName: "smart-grid"): Grid;
@@ -18811,6 +19027,8 @@ export declare type GridFilteringFilterMenuMode = 'default' | 'excel';
 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. In 'multipleColumns' mode, each group is displayed in its column. */
 export declare type GridGroupingRenderMode = 'basic' | 'compact' | 'advanced' | 'multipleColumns';
+/**Sets the search command type. */
+export declare type GridHeaderSearchCommand = 'search' | 'filter';
 /**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'  */
@@ -19238,6 +19456,11 @@ export interface KanbanProperties {
    * Default value: true
    */
   allowDrop?: boolean;
+  /**
+   * Allows the dropping of tasks placeholder. When you drag a task over another task it will make an empty space for the task.
+   * Default value: false
+   */
+  allowDropPlaceholder?: 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
@@ -19348,6 +19571,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   editable?: boolean;
+  /**
+   * Determines the edit behavior. It could be either singleClick or doubleClick. The dialog edit window is by default opened when user double clicks on a Kanban task.
+   * Default value: doubleClick
+   */
+  editMode?: KanbanEditMode | string;
   /**
    * Sets or gets the format string of the "Due date" label and the "Start date" and "Due date" editors.
    * Default value: "d"
@@ -20173,6 +20401,8 @@ export declare type KanbanAddNewButtonDisplayMode = 'top' | 'bottom' | 'both';
 export declare type KanbanColumnOrientation = 'vertical' | 'horizontal';
 /**Determines the column edit behavior. With the 'header' option, edit starts on double click on the column's label. In 'menu' mode, edit is allowed from the 'columnActions' menu. In 'headerAndMenu' option, column editing includes both options. */
 export declare type KanbanColumnEditMode = 'header' | 'menu' | 'headerAndMenu';
+/**Determines the edit behavior. It could be either singleClick or doubleClick. The dialog edit window is by default opened when user double clicks on a Kanban task. */
+export declare type KanbanEditMode = 'doubleClick' | 'singleClick';
 /**Sets or gets the header position. The header contains the Customize, Filter, Sort, and Search buttons. */
 export declare type KanbanHeaderPosition = 'none' | 'top' | 'bottom';
 /**Sets or gets the way column hierarchy is represented. */
@@ -20965,6 +21195,11 @@ export interface ListBox extends BaseElement, ListBoxProperties {
    * @returns {Node}
    */
   appendChild<T extends Node>(node: Node): T;
+  /**
+   * Adds a new item(s).
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
+   */
+  add(item: any): void;
   /**
    * Removes all items from the listBox.
    */
@@ -20973,6 +21208,10 @@ export interface ListBox extends BaseElement, ListBoxProperties {
    * Unselects all items.
    */
   clearSelection(): void;
+  /**
+   * Performs a data bind. This can be used to refresh the data source.
+   */
+  dataBind(): void;
   /**
    * Ensures the target item is visible by scrolling to it.
    * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
@@ -25966,274 +26205,696 @@ export interface RadioButtonProperties {
    * If the custom element is readonly, it cannot be interacted with.
    * Default value: false
    */
-  readonly?: boolean;
+  readonly?: boolean;
+  /**
+   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * Determines the theme. Theme defines the look of the element
+   * Default value: ""
+   */
+  theme?: string;
+  /**
+   * If is set to true, the element cannot be focused.
+   * Default value: false
+   */
+  unfocusable?: boolean;
+  /**
+   * Sets or gets the widget's value.
+   * Default value: """"
+   */
+  value?: string;
+}
+/**
+ The Radio Button component lets you add a radio button and assign it to a radio group. Users can select only one radio button at a time within a radio group
+*/
+export interface RadioButton extends BaseElement, RadioButtonProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * This event is triggered when the widget is checked/unchecked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, changeType)
+   *  value - A boolean value indicating the new state of the button ( checked or not ).
+   *  oldValue - A boolean value indicating the previous state of the button ( checked or not ).
+   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
+   */
+  onChange: ((this: any, ev: Event) => any) | null;
+  /**
+   * This event is triggered when the widget is checked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
+   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
+   */
+  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the widget is unchecked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
+   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
+   */
+  onUncheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-radio-button"): RadioButton;
+        querySelector(selectors: "smart-radio-button"): RadioButton | null;
+        querySelectorAll(selectors: "smart-radio-button"): NodeListOf<RadioButton>;
+        getElementsByTagName(qualifiedName: "smart-radio-button"): HTMLCollectionOf<RadioButton>;
+        getElementsByName(elementName: "smart-radio-button"): NodeListOf<RadioButton>;
+    }
+}
+
+export interface RatingProperties {
+  /**
+   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
+   * Default value: advanced
+   */
+  animation?: Animation | string;
+  /**
+   * Disables the interaction with the element.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Sets or gets the language. Used in conjunction with the property messages. 
+   * Default value: "en"
+   */
+  locale?: string;
+  /**
+   * Callback used to customize the format of the messages that are returned from the Localization Module.
+   * Default value: null
+   */
+  localizeFormatFunction?: any;
+  /**
+   * Determines the number of stars that will be displayed.
+   * Default value: 
+   */
+  max?: number;
+  /**
+   * Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale. 
+   * Default value:    * {
+   *   "en": {
+   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
+   *     "propertyInvalidValue": "Invalid '!",
+   *     "propertyInvalidValueType": "Invalid '!",
+   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
+   *     "moduleUndefined": "Module is undefined.",
+   *     "missingReference": ".",
+   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
+   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
+   *   }
+   * }
+   */
+  messages?: any;
+  /**
+   * The name of the element. Used when submiting data inside a Form.
+   * Default value: ""
+   */
+  name?: string;
+  /**
+   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * Determines the theme. Theme defines the look of the element
+   * Default value: ""
+   */
+  theme?: string;
+  /**
+   * If is set to true, the element cannot be focused.
+   * Default value: false
+   */
+  unfocusable?: boolean;
+  /**
+   * Determines the number of stars that will be marked as active.
+   * Default value: 
+   */
+  value?: number;
+}
+/**
+ Rating allows you to input a rating. It is broadly used in applications with reviews.
+*/
+export interface Rating extends BaseElement, RatingProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * This event is triggered when the value of the slider is changed. 
+	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue)
+   *  value - A numeric value indicating the scroll position.
+   *  oldValue - A numeric value indicating the previous scroll position.
+   */
+  onChange: ((this: any, ev: Event) => any) | null;
+  /**
+   * Get the value of the rating.
+   * @returns {number}
+   */
+  getValue(): number;
+  /**
+   * Sets the value of the rating.
+   * @param {number} value. Sets the value of the rating
+   */
+  setValue(value: number): void;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-rating"): Rating;
+        querySelector(selectors: "smart-rating"): Rating | null;
+        querySelectorAll(selectors: "smart-rating"): NodeListOf<Rating>;
+        getElementsByTagName(qualifiedName: "smart-rating"): HTMLCollectionOf<Rating>;
+        getElementsByName(elementName: "smart-rating"): NodeListOf<Rating>;
+    }
+}
+
+export interface RepeatButtonProperties {
+  /**
+   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
+   * Default value: advanced
+   */
+  animation?: Animation | string;
+  /**
+   * Sets the click mode of the button.
+   * Default value: release
+   */
+  clickMode?: ClickMode | string;
+  /**
+   * Sets the delay between repeats in miliseconds.
+   * Default value: 50
+   */
+  delay?: number;
+  /**
+   * Enables or disables the ratio button.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Sets a delay before the first repeat iteration in miliseconds.
+   * Default value: 150
+   */
+  initialDelay?: number;
+  /**
+   * Sets the inner HTML of the element.
+   * Default value: """"
+   */
+  innerHTML: string;
+  /**
+   * Sets or gets the language. Used in conjunction with the property messages. 
+   * Default value: "en"
+   */
+  locale?: string;
+  /**
+   * Callback, related to localization module. 
+   * Default value: null
+   */
+  localizeFormatFunction?: any;
+  /**
+   * Sets an object with string values, related to the different states of passwords strength.
+   * Default value:    * {
+   *   "en": {
+   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
+   *     "propertyInvalidValue": "Invalid '!",
+   *     "propertyInvalidValueType": "Invalid '!",
+   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
+   *     "moduleUndefined": "Module is undefined.",
+   *     "missingReference": ".",
+   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
+   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
+   *   }
+   * }
+   */
+  messages?: any;
+  /**
+   * Sets or gets the widget's name.
+   * Default value: """"
+   */
+  name?: string;
+  /**
+   * If the custom element is readonly, it cannot be interacted with.
+   * Default value: false
+   */
+  readonly?: boolean;
+  /**
+   * Determines the theme. Theme defines the look of the element
+   * Default value: ""
+   */
+  theme?: string;
+  /**
+   * If is set to true, the element cannot be focused.
+   * Default value: false
+   */
+  unfocusable?: boolean;
+  /**
+   * Sets or gets the widget's value.
+   * Default value: """"
+   */
+  value?: string;
+}
+/**
+ RepatButton provides press-and-hold functionality and it is an ideal UI component for allowing end-users to control an increasing or decreasing value.
+*/
+export interface RepeatButton extends BaseElement, RepeatButtonProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * This event is triggered when the element is clicked.
+	* @param event. The custom event.    */
+  onClick: ((this: any, ev: Event) => any) | null;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-repeat-button"): RepeatButton;
+        querySelector(selectors: "smart-repeat-button"): RepeatButton | null;
+        querySelectorAll(selectors: "smart-repeat-button"): NodeListOf<RepeatButton>;
+        getElementsByTagName(qualifiedName: "smart-repeat-button"): HTMLCollectionOf<RepeatButton>;
+        getElementsByName(elementName: "smart-repeat-button"): NodeListOf<RepeatButton>;
+    }
+}
+
+export interface RibbonProperties {
+  /**
+   * Determines whether the ribbon is collapsible.
+   * Default value: false
+   */
+  collapsible?: any;
+  /**
+   * Determines the tab items of the ribbon.
+   * Default value: 
+   */
+  dataSource?: any;
+  /**
+   * Sets or gets the value indicating whether the element is disabled.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Determines the file menu options of the ribbon.
+   * Default value: undefined
+   */
+  fileMenu?: RibbonFileMenu;
+  /**
+   * Determines the locale of the ribbon.
+   * Default value: "en"
+   */
+  locale?: string;
+  /**
+   * Determines the messages of the ribbon
+   * Default value:    * [object Object]
+   */
+  messages?: any;
+  /**
+   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * Determines the selected tab.
+   * Default value: 0
+   */
+  selectedTab?: any;
+}
+/**
+ Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
+*/
+export interface Ribbon extends BaseElement, RibbonProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * This event is triggered when the ribbon is collapsed.
+	* @param event. The custom event.    */
+  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ribbon is collapsing. The event can be canceled by calling event.preventDefault() in the event handler function.
+	* @param event. The custom event.    */
+  onCollapsing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the dialog launcher is clicked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(groupLabel, groupId)
+   *  groupLabel - The label of the dialog launcher's ribbon group.
+   *  groupId - The id of the dialog launcher's ribbon group.
+   */
+  onDialogLauncherClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ribbon is expanded.
+	* @param event. The custom event.    */
+  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ribbon is expanding. The event can be canceled by calling event.preventDefault() in the event handler function.
+	* @param event. The custom event.    */
+  onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the file menu button is clicked.
+	* @param event. The custom event.    */
+  onFileButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the file menu is opened.
+	* @param event. The custom event.    */
+  onFileMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the file menu is closed.
+	* @param event. The custom event.    */
+  onFileMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when a file menu item is clicked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(item)
+   *  item - The file menu item.
+   */
+  onFileMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the tab selection is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index)
+   *  oldIndex - The previous tab index.
+   *  index - The new index of the selected tab.
+   */
+  onSelect?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the tab selection is changing. The event can be canceled by calling event.preventDefault() in the event handler function.
+	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index)
+   *  oldIndex - The previous tab index.
+   *  index - The new index of the selected tab.
+   */
+  onSelecting?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * Adds a new ribbon tab to the ribbon. The tab can be added as an object, HTMLElement or id to an HTMLElement.
+   * @param {any} tab. The ribbon tab to be added.
+   */
+  addTab(tab: any): void;
+  /**
+   * Adds a new group to a ribbon tab. The group can be added as an object, HTMLElement or id to an HTMLElement.
+   * @param {any} tab. The id, index or HTMLElement  of the parent ribbon tab.
+   * @param {any} group. The ribbon group to be added.
+   */
+  addGroup(tab: any, group: any): void;
+  /**
+   * Adds a new ribbon item to a ribbon group. The item can be added as an object, HTMLElement or id to an HTMLElement.
+   * @param {string | number | HTMLElement} tab. The id, index or HTMLElement  of the parent ribbon tab.
+   * @param {string | HTMLElement} group. The id or HTMLElement of the parent ribbon group.
+   * @param {any} item. The ribbon item to be added.
+   */
+  addItem(tab: string | number | HTMLElement, group: string | HTMLElement, item: any): void;
+  /**
+   * Collapses the ribbon.
+   */
+  collapse(): void;
+  /**
+   * Expands the ribbon.
+   */
+  expand(): void;
+  /**
+   * Removes a ribbon tab from the ribbon.
+   * @param {string | number} ribbonTab. The id or index of the ribbon tab to be removed.
+   */
+  removeTab(ribbonTab: string | number): void;
+  /**
+   * Removes a ribbon group from a ribbon tab.
+   * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
+   * @param {string | number} ribbonGroup?. The id or index of the ribbon group to be removed.
+   */
+  removeGroup(ribbonTabIndex?: string | number, ribbonGroup?: string | number): void;
+  /**
+   * Removes a ribbon item from a ribbon group.
+   * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
+   * @param {string | number} ribbonGroup?. The id or index of the parent ribbon group.
+   * @param {string | number} ribbonItem?. The id or index of the ribbon item to be removed.
+   */
+  removeItem(ribbonTabIndex?: string | number, ribbonGroup?: string | number, ribbonItem?: string | number): void;
+  /**
+   * Selects a ribbon tab.
+   * @param {string | number} ribbonTabIndex. The index of the ribbon tab to be selected.
+   */
+  selectTab(ribbonTabIndex: string | number): void;
+}
+
+/**Determines the file menu options of the ribbon. */
+export interface RibbonFileMenu {
+  /**
+   * Determines whether the file button is enabled.
+   * Default value: true
+   */
+  enabled?: boolean;
   /**
-   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
-   * Default value: false
+   * Determines the data source that will be loaded to the FileMenu.
+   * Default value: 
    */
-  rightToLeft?: boolean;
+  items?: any;
   /**
-   * Determines the theme. Theme defines the look of the element
-   * Default value: ""
+   * Determines the position of the file menu.
+   * Default value: left
    */
-  theme?: string;
+  position?: RibbonFileMenuPosition | string;
   /**
-   * If is set to true, the element cannot be focused.
-   * Default value: false
+   * Determines the label of the file menu.
+   * Default value: "File"
    */
-  unfocusable?: boolean;
+  label?: string;
   /**
-   * Sets or gets the widget's value.
-   * Default value: """"
+   * Determines the tooltip of the file menu.
+   * Default value: ""
    */
-  value?: string;
-}
-/**
- The Radio Button component lets you add a radio button and assign it to a radio group. Users can select only one radio button at a time within a radio group
-*/
-export interface RadioButton extends BaseElement, RadioButtonProperties {
-
-  /* Get a member by its name */
-  [name: string]: any;
+  tooltip?: string;
   /**
-   * This event is triggered when the widget is checked/unchecked.
-	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue, changeType)
-   *  value - A boolean value indicating the new state of the button ( checked or not ).
-   *  oldValue - A boolean value indicating the previous state of the button ( checked or not ).
-   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
+   * Determines the template of the file menu. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
+   * Default value: ""
    */
-  onChange: ((this: any, ev: Event) => any) | null;
+  template?: string;
   /**
-   * This event is triggered when the widget is checked.
-	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
-   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
+   * Determines the type of the file menu.
+   * Default value: dropDown
    */
-  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  type?: RibbonFileMenuType | string;
   /**
-   * This event is triggered when the widget is unchecked.
-	* @param event. The custom event. Custom data event was created with: ev.detail(changeType)
-   *  changeType - A string flag indicating whether the change event was triggered via API or an event.
+   * Determines the icon of the file menu.
+   * Default value: ""
    */
-  onUncheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  icon?: string;
 }
 
 declare global {
     interface Document {
-        createElement(tagName: "smart-radio-button"): RadioButton;
-        querySelector(selectors: "smart-radio-button"): RadioButton | null;
-        querySelectorAll(selectors: "smart-radio-button"): NodeListOf<RadioButton>;
-        getElementsByTagName(qualifiedName: "smart-radio-button"): HTMLCollectionOf<RadioButton>;
-        getElementsByName(elementName: "smart-radio-button"): NodeListOf<RadioButton>;
+        createElement(tagName: "smart-ribbon"): Ribbon;
+        querySelector(selectors: "smart-ribbon"): Ribbon | null;
+        querySelectorAll(selectors: "smart-ribbon"): NodeListOf<Ribbon>;
+        getElementsByTagName(qualifiedName: "smart-ribbon"): HTMLCollectionOf<Ribbon>;
+        getElementsByName(elementName: "smart-ribbon"): NodeListOf<Ribbon>;
     }
 }
 
-export interface RatingProperties {
-  /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
-   */
-  animation?: Animation | string;
-  /**
-   * Disables the interaction with the element.
-   * Default value: false
-   */
-  disabled?: boolean;
-  /**
-   * Sets or gets the language. Used in conjunction with the property messages. 
-   * Default value: "en"
-   */
-  locale?: string;
-  /**
-   * Callback used to customize the format of the messages that are returned from the Localization Module.
-   * Default value: null
-   */
-  localizeFormatFunction?: any;
+/**Determines the position of the file menu. */
+export declare type RibbonFileMenuPosition = 'left' | 'right';
+/**Determines the type of the file menu. */
+export declare type RibbonFileMenuType = 'dropDown' | 'button';
+export interface RibbonGroupProperties {
   /**
-   * Determines the number of stars that will be displayed.
-   * Default value: 
+   * Determines the label of the ribbon group.
+   * Default value: ""
    */
-  max?: number;
+  label?: string;
   /**
-   * Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale. 
-   * Default value:    * {
-   *   "en": {
-   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
-   *     "propertyInvalidValue": "Invalid '!",
-   *     "propertyInvalidValueType": "Invalid '!",
-   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
-   *     "moduleUndefined": "Module is undefined.",
-   *     "missingReference": ".",
-   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
-   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
-   *   }
-   * }
+   * Determines the icon of the ribbon group.
+   * Default value: ""
    */
-  messages?: any;
+  icon?: string;
   /**
-   * The name of the element. Used when submiting data inside a Form.
+   * Determines the class of the ribbon group.
    * Default value: ""
    */
-  name?: string;
+  cssClass?: string;
   /**
-   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
-   * Default value: false
+   * Determines the ribbon items of the ribbon group.
+   * Default value: 
    */
-  rightToLeft?: boolean;
+  ribbonItems?: any;
   /**
-   * Determines the theme. Theme defines the look of the element
-   * Default value: ""
+   * Determines the direction of the ribbon group.
+   * Default value: horizontal
    */
-  theme?: string;
+  direction?: RibbonGroupDirection | string;
   /**
-   * If is set to true, the element cannot be focused.
-   * Default value: false
+   * Determines the settings of the dialog launcher of the ribbon group.
+   * Default value: [object Object]
    */
-  unfocusable?: boolean;
+  dialogLauncher?: RibbonGroupDialogLauncher;
   /**
-   * Determines the number of stars that will be marked as active.
-   * Default value: 
+   * Determines the size, below which the ribbon group will be wrapped.
+   * Default value: undefined
    */
-  value?: number;
+  wrapSize?: RibbonGroupWrapSize | string;
 }
 /**
- Rating allows you to input a rating. It is broadly used in applications with reviews.
+ Defines a ribbon group.
 */
-export interface Rating extends BaseElement, RatingProperties {
+export interface RibbonGroup extends BaseElement, RibbonGroupProperties {
 
   /* Get a member by its name */
   [name: string]: any;
+}
+
+/**Determines the settings of the dialog launcher of the ribbon group. */
+export interface RibbonGroupDialogLauncher {
   /**
-   * This event is triggered when the value of the slider is changed. 
-	* @param event. The custom event. Custom data event was created with: ev.detail(value, oldValue)
-   *  value - A numeric value indicating the scroll position.
-   *  oldValue - A numeric value indicating the previous scroll position.
-   */
-  onChange: ((this: any, ev: Event) => any) | null;
-  /**
-   * Get the value of the rating.
-   * @returns {number}
+   * Determines whether the dialog launcher is enabled.
+   * Default value: false
    */
-  getValue(): number;
+  enabled?: boolean;
   /**
-   * Sets the value of the rating.
-   * @param {number} value. Sets the value of the rating
+   * Determines the tooltip of the dialog launcher.
+   * Default value: ""
    */
-  setValue(value: number): void;
+  tooltip?: string;
 }
 
 declare global {
     interface Document {
-        createElement(tagName: "smart-rating"): Rating;
-        querySelector(selectors: "smart-rating"): Rating | null;
-        querySelectorAll(selectors: "smart-rating"): NodeListOf<Rating>;
-        getElementsByTagName(qualifiedName: "smart-rating"): HTMLCollectionOf<Rating>;
-        getElementsByName(elementName: "smart-rating"): NodeListOf<Rating>;
+        createElement(tagName: "smart-ribbon-group"): RibbonGroup;
+        querySelector(selectors: "smart-ribbon-group"): RibbonGroup | null;
+        querySelectorAll(selectors: "smart-ribbon-group"): NodeListOf<RibbonGroup>;
+        getElementsByTagName(qualifiedName: "smart-ribbon-group"): HTMLCollectionOf<RibbonGroup>;
+        getElementsByName(elementName: "smart-ribbon-group"): NodeListOf<RibbonGroup>;
     }
 }
 
-export interface RepeatButtonProperties {
+/**Determines the direction of the ribbon group. */
+export declare type RibbonGroupDirection = 'horizontal' | 'vertical';
+/**Determines the size, below which the ribbon group will be wrapped. */
+export declare type RibbonGroupWrapSize = 'iconOnly' | 'verySmall' | 'small' | 'normal' | 'large' | 'none';
+export interface RibbonItemProperties {
   /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
+   * Determines whether the ribbon item is disabled.
+   * Default value: false
    */
-  animation?: Animation | string;
+  disabled?: boolean;
   /**
-   * Sets the click mode of the button.
-   * Default value: release
+   * Determines the label of the ribbon item.
+   * Default value: ""
    */
-  clickMode?: ClickMode | string;
+  label?: string;
   /**
-   * Sets the delay between repeats in miliseconds.
-   * Default value: 50
+   * Determines the type of the ribbon item.
+   * Default value: button
    */
-  delay?: number;
+  type?: RibbonItemType | string;
   /**
-   * Enables or disables the ratio button.
-   * Default value: false
+   * Determines the template of the ribbon item. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
+   * Default value: ""
    */
-  disabled?: boolean;
+  template?: string;
   /**
-   * Sets a delay before the first repeat iteration in miliseconds.
-   * Default value: 150
+   * Determines the size of the ribbon item.
+   * Default value: normal
    */
-  initialDelay?: number;
+  size?: RibbonItemSize | string;
   /**
-   * Sets the inner HTML of the element.
-   * Default value: """"
+   * 
+   * Default value: null
    */
-  innerHTML: string;
+  sizeChanged?: any;
   /**
-   * Sets or gets the language. Used in conjunction with the property messages. 
-   * Default value: "en"
+   * Determines the allowed sizes of the ribbon item.
+   * Default value: 
    */
-  locale?: string;
+  allowedSizes?: any;
   /**
-   * Callback, related to localization module. 
+   * Determines the icon of the ribbon item.
+   * Default value: ""
+   */
+  icon?: string;
+  /**
+   * Determines the settings of the ribbon item. The settings will be applied as properties if the ribbon item is set to a Smart Element.
+   * Default value: [object Object]
+   */
+  settings?: RibbonItemSettings;
+  /**
+   * Determines the class of the ribbon item.
+   * Default value: ""
+   */
+  cssClass?: string;
+  /**
+   * Sets a click event handler for the ribbon item.
    * Default value: null
    */
-  localizeFormatFunction?: any;
+  onItemClick?: any;
   /**
-   * Sets an object with string values, related to the different states of passwords strength.
-   * Default value:    * {
-   *   "en": {
-   *     "propertyUnknownType": "'' property is with undefined 'type' member!",
-   *     "propertyInvalidValue": "Invalid '!",
-   *     "propertyInvalidValueType": "Invalid '!",
-   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
-   *     "moduleUndefined": "Module is undefined.",
-   *     "missingReference": ".",
-   *     "htmlTemplateNotSuported": ": Browser doesn't support HTMLTemplate elements.",
-   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
-   *   }
-   * }
+   * Sets a change event handler for the ribbon item.
+   * Default value: null
    */
-  messages?: any;
+  onItemChange?: any;
   /**
-   * Sets or gets the widget's name.
-   * Default value: """"
+   * Determines the tooltip of the ribbon item.
+   * Default value: ""
    */
-  name?: string;
+  tooltip?: string;
+}
+/**
+ Defines a ribbon item.
+*/
+export interface RibbonItem extends BaseElement, RibbonItemProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+}
+
+/**Determines the settings of the ribbon item. The settings will be applied as properties if the ribbon item is set to a Smart Element. */
+export interface RibbonItemSettings {
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-ribbon-item"): RibbonItem;
+        querySelector(selectors: "smart-ribbon-item"): RibbonItem | null;
+        querySelectorAll(selectors: "smart-ribbon-item"): NodeListOf<RibbonItem>;
+        getElementsByTagName(qualifiedName: "smart-ribbon-item"): HTMLCollectionOf<RibbonItem>;
+        getElementsByName(elementName: "smart-ribbon-item"): NodeListOf<RibbonItem>;
+    }
+}
+
+/**Determines the type of the ribbon item. */
+export declare type RibbonItemType = 'separator' | 'button' | 'toggleButton' | 'multiSplitButton' | 'dropDownButton' | 'input' | 'custom';
+/**Determines the size of the ribbon item. */
+export declare type RibbonItemSize = 'iconOnly' | 'small' | 'verySmall' | 'normal' | 'large';
+export interface RibbonTabProperties {
   /**
-   * If the custom element is readonly, it cannot be interacted with.
+   * Determines whether the tab item is disabled.
    * Default value: false
    */
-  readonly?: boolean;
+  disabled?: boolean;
   /**
-   * Determines the theme. Theme defines the look of the element
+   * Determines the label of the tab item.
    * Default value: ""
    */
-  theme?: string;
+  label?: string;
   /**
-   * If is set to true, the element cannot be focused.
+   * Determines whether the tab item is selected.
    * Default value: false
    */
-  unfocusable?: boolean;
+  selected?: boolean;
   /**
-   * Sets or gets the widget's value.
-   * Default value: """"
+   * Determines the ribbon group of the tab item
+   * Default value: undefined
    */
-  value?: string;
+  ribbonGroups?: any;
 }
 /**
- RepatButton provides press-and-hold functionality and it is an ideal UI component for allowing end-users to control an increasing or decreasing value.
+ Defines a ribbon tab.
 */
-export interface RepeatButton extends BaseElement, RepeatButtonProperties {
+export interface RibbonTab extends BaseElement, RibbonTabProperties {
 
   /* Get a member by its name */
   [name: string]: any;
-  /**
-   * This event is triggered when the element is clicked.
-	* @param event. The custom event.    */
-  onClick: ((this: any, ev: Event) => any) | null;
 }
 
 declare global {
     interface Document {
-        createElement(tagName: "smart-repeat-button"): RepeatButton;
-        querySelector(selectors: "smart-repeat-button"): RepeatButton | null;
-        querySelectorAll(selectors: "smart-repeat-button"): NodeListOf<RepeatButton>;
-        getElementsByTagName(qualifiedName: "smart-repeat-button"): HTMLCollectionOf<RepeatButton>;
-        getElementsByName(elementName: "smart-repeat-button"): NodeListOf<RepeatButton>;
+        createElement(tagName: "smart-ribbon-tab"): RibbonTab;
+        querySelector(selectors: "smart-ribbon-tab"): RibbonTab | null;
+        querySelectorAll(selectors: "smart-ribbon-tab"): NodeListOf<RibbonTab>;
+        getElementsByTagName(qualifiedName: "smart-ribbon-tab"): HTMLCollectionOf<RibbonTab>;
+        getElementsByName(elementName: "smart-ribbon-tab"): NodeListOf<RibbonTab>;
     }
 }
 
@@ -27090,9 +27751,10 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
   /**
    * Exports the events from the Scheduler.
    * @param {string} dataFormat. Determines the format of the exported file. The following values are available: <ul><li><b>pdf</b></li><li><b>xlsx</b></li><li><b>html</b></li><li><b>iCal</b></li></ul>
-   * @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.
+   * @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
+   * @param {any} dataCallback?. A callback that allows to change the exported data.
    */
-  exportData(dataFormat: string, callback?: any): void;
+  exportData(dataFormat: string, callback?: any, dataCallback?: any): void;
   /**
    * Returns a JSON representation of the events inside the Scheduler.
    * @returns {any}
@@ -29202,7 +29864,7 @@ export interface TableProperties {
    * Sets or gets the page size (when paging is enabled).
    * Default value: 10
    */
-  pageSize?: TablePageSize | string;
+  pageSize?: number;
   /**
    * Sets or gets the current (zero-based) page index (when paging is enabled).
    * Default value: 0
@@ -29223,6 +29885,11 @@ export interface TableProperties {
    * Default value: "null"
    */
   rowDetailTemplate?: string;
+  /**
+   * Sets or gets a callback function with 3 arguments - column, filterConditions, filterInputTemplateString. The function should return the new filter input.
+   * Default value: null
+   */
+  onFilterRowInput?: any;
   /**
    * Sets or gets an array of the Table's selected row's ids.
    * Default value: 
@@ -29940,8 +30607,6 @@ export declare type TableDataSourceSettingsDataSourceType = 'array' | 'json' | '
 export declare type TableEditMode = 'cell' | 'row';
 /**Sets or gets the behavior when loading column settings either via autoLoadState or loadState. Applicable only when stateSettings contains 'columns'. */
 export declare type TableLoadColumnStateBehavior = 'implementationOnly' | 'intersection' | 'stateOnly';
-/**Sets or gets the page size (when paging is enabled). */
-export declare type TablePageSize = '10' | '25' | '50';
 /**Sets or gets the selection mode. Only applicable when selection is enabled. */
 export declare type TableSelectionMode = 'one' | 'many' | 'extended';
 /**Determines the sorting mode of the Table. */
@@ -30621,6 +31286,11 @@ export interface TextAreaProperties {
    * Default value: false
    */
   rightToLeft?: boolean;
+  /**
+   * Enables or disables the rich text formatting.
+   * Default value: false
+   */
+  richText?: boolean;
   /**
    * Determines whether the items are sorted alphabetically or not
    * Default value: false
@@ -32149,6 +32819,12 @@ export interface Tree extends BaseElement, TreeProperties {
    *  children - the children of the jqx-tree-items-group to be expanded
    */
   onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when selection in jqx-tree is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(value)
+   *  value - The filter input value.
+   */
+  onFilterChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered when the Tree has been scrolled to the bottom.
 	* @param event. The custom event.    */
@@ -32225,6 +32901,11 @@ export interface Tree extends BaseElement, TreeProperties {
    * @returns {HTMLElement}
    */
   getItem(id: string): HTMLElement;
+  /**
+   * Gets the applied filter.
+   * @returns {string}
+   */
+  getFilter(): string;
   /**
    * Gets the selected values. If value is not defined, returns the selected labels.
    * @returns {string[]}