@smart-webcomponents-angular/columnpanel 15.0.2 → 19.0.8

package/index.d.ts

@@ -169,6 +169,11 @@ export interface ThreeDChartProperties {
    * Default value: null
    */
   toolTipFormatFunction?: {(value?: any, index?: number, series?: any): string};
+  /**
+   * Tooltip data formatting settings for the values in the serie.
+   * Default value: [object Object]
+   */
+  toolTipFormatSettings?: ThreeDChartFormatSettings;
   /**
    * Tooltip line color. By default it is set to the hovered item's color
    * Default value: null
@@ -1896,6 +1901,16 @@ export interface BarcodeProperties {
    * Default value: ""
    */
   value?: string;
+  /**
+   * Sets or gets the width of the barcode. If the width is set to 0, the width of the barcode is calculated automatically.
+   * Default value: 0
+   */
+  width?: number;
+  /**
+   * Sets or gets the height of the barcode. If the height is set to 0, the height of the barcode is calculated automatically.
+   * Default value: 0
+   */
+  height?: number;
 }
 /**
  Barcodes encodes text value in a specific pattern.
@@ -2354,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
@@ -7180,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.
    */
@@ -7192,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.
@@ -7206,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;
   /**
@@ -7940,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' }
@@ -8773,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;
@@ -9332,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
@@ -9437,6 +9466,11 @@ export interface DropDownListProperties {
    * Default value: startsWithIgnoreCase
    */
   filterMode?: FilterMode | string;
+  /**
+   * A callback that should return a condition that will be used for custom item filtering. Used in conjunction with filterMode 'custom'
+   * Default value: null
+   */
+  filterCallback?: any;
   /**
    * If enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.
    * Default value: false
@@ -9714,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.
    */
@@ -9726,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.
@@ -10428,6 +10471,11 @@ export interface Editor extends BaseElement, EditorProperties {
    *  instance - The toast item that is the target of the operation.
    */
   onMessageOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * Adds a new Toolbar item. Example: editor.addToolbarItem({ name: &#039;customButton2&#039;, width: 100, template: &#039;&lt;smart-button&gt;Button2&lt;/smart-button&gt;&#039; })
+   * @param {any} itemName. The toolbar item to be added
+   */
+  addToolbarItem(itemName: any): void;
   /**
    * Blurs the content of the Editor.
    */
@@ -10494,6 +10542,12 @@ export interface Editor extends BaseElement, EditorProperties {
    * Hides the last shown message.
    */
   hideLastMessage(): void;
+  /**
+   * Inserts a new Toolbar item. Example: editor.insertToolbarItem({ name: &#039;customButton2&#039;, width: 100, template: &#039;&lt;smart-button&gt;Button2&lt;/smart-button&gt;&#039; })
+   * @param {any} itemName. The toolbar item to be added
+   * @param {number} index. The toolbar item's index
+   */
+  insertToolbarItem(itemName: any, index: number): void;
   /**
    * Shows a custom message inside the Editor.
    * @param {string} message. The text message to be displayed.
@@ -10533,6 +10587,11 @@ export interface Editor extends BaseElement, EditorProperties {
    * @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
    */
   previewMode(value?: boolean): void;
+  /**
+   * Removes a Toolbar item. Example: editor.removeToolbarItem(0)
+   * @param {number} index. The toolbar item's index
+   */
+  removeToolbarItem(index: number): void;
   /**
    * Sets Editor into Full Screen Mode. If enabled the Editor is positioned above the page content and fills the screen.
    * @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
@@ -12606,12 +12665,12 @@ export interface FormProperties {
    * Callback function for handling status changes. The status could be  'disabled', 'invalid', 'pending', 'valid'.
    * Default value: null
    */
-  onStatusChanges?: any;
+  onStatusChanges?: {(value: string): void};
   /**
-   * Callback function for handling value changes
+   * Callback function for handling value changes. The function argument is the form's value as a JSON object.
    * Default value: null
    */
-  onValueChanges?: any;
+  onValueChanges?: {(value: any): void};
   /**
    * Sets or Gets the labels position.
    * Default value: left
@@ -13025,21 +13084,31 @@ export interface FormGroupProperties {
    * Default value: 1
    */
   columns?: number;
+  /**
+   * Sets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.
+   * Default value: ""
+   */
+  dataField?: string;
+  /**
+   * Gets or Sets the Form control's label.
+   * Default value: ""
+   */
+  label?: string;
   /**
    * 
    * Default value: null
    */
   controls?: Control[];
   /**
-   * Callback function for handling status changes
+   * Callback function for handling status changes. The function argument is a string which could be: 'valid', 'invalid', 'disabled', 'pending'
    * Default value: null
    */
-  onStatusChanges?: any;
+  onStatusChanges?: {(value: string): void};
   /**
-   * Callback function for handling value changes
+   * Callback function for handling value changes. The function argument is the form's value as a JSON object.
    * Default value: null
    */
-  onValueChanges?: any;
+  onValueChanges?: {(value: any): void};
   /**
    * Sets or Gets the labels position.
    * Default value: left
@@ -13273,6 +13342,11 @@ export interface GanttChartProperties {
    * Default value: false
    */
   columnResizeFeedback?: boolean;
+  /**
+   * Gantt's current time. By default it is the today's date.
+   * Default value: 
+   */
+  currentTime?: string | Date;
   /**
    * Enables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells.
    * Default value: false
@@ -13368,6 +13442,11 @@ export interface GanttChartProperties {
    * Default value: false
    */
   filterRow?: boolean;
+  /**
+   * Determines the view start day. Sunday is 0, Monday is 1, Saturday is 6. By default it's Sunday.
+   * Default value: -1
+   */
+  firstDayOfWeek?: number;
   /**
    * Groups the tasks inside the Task timeline according to the resources they are assigned to. Unassigned tasks are placed in a default group labeled 'Unassigned'.
    * Default value: false
@@ -13384,15 +13463,20 @@ export interface GanttChartProperties {
    */
   hideDateMarkers?: boolean;
   /**
-   * By default the Timeline has a two level header - timeline details and timeline header. This property hides the header details container( the top container ).
+   * By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header container( the bottom container ).
    * Default value: false
    */
-  hideTimelineHeaderDetails?: boolean;
+  hideTimelineHeader?: boolean;
   /**
-   * Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.
+   * By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header details container( the top container ).
    * Default value: false
    */
-  showSelectionColumn?: boolean;
+  hideTimelineHeaderDetails?: boolean;
+  /**
+   * By default the Timeline has a three level header - timeline details and timeline header. This property hides the second header details container( the middle container ).
+   * Default value: true
+   */
+  hideTimelineSecondHeaderDetails?: 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
@@ -13453,6 +13537,11 @@ export interface GanttChartProperties {
    * Default value: short
    */
   monthFormat?: MonthFormat | string;
+  /**
+   * Determines the scale in Month view.
+   * Default value: week
+   */
+  monthScale?: MonthScale | string;
   /**
    * Determines the nonworking days of the week from 0 to 6, where 0 is the first day of the week and 6 is the last day. Nonworking days will be displayed with colored cells inside the timeline and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.
    * Default value: 
@@ -13463,6 +13552,21 @@ export interface GanttChartProperties {
    * Default value: 
    */
   nonworkingHours?: number[] | number[][];
+  /**
+   * A function that can be used to completly customize the task element. The function has five arguments: task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.
+   * Default value: null
+   */
+  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
@@ -13478,6 +13582,11 @@ export interface GanttChartProperties {
    * Default value: null
    */
   progressLabelFormatFunction?: any;
+  /**
+   * Determines the format of the dates the timeline header when they represent quarters.
+   * Default value: short
+   */
+  quarterFormat?: QuarterFormat | string;
   /**
    * A getter that returns a flat structure as an array of all resources inside the element.
    * Default value: null
@@ -13548,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
@@ -14090,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.
@@ -14385,6 +14509,11 @@ export interface GanttChartTask {
    * Default value: null
    */
   formatFunction?: any;
+  /**
+   * Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement. task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.
+   * Default value: null
+   */
+  onRender?: any;
   /**
    * Project, Task or Milestone max start date.
    * Default value: 
@@ -14647,10 +14776,16 @@ export declare type GanttDayFormat = '2-digit' | 'numeric' | 'long' | 'short' |
 export declare type Duration = 'day' | 'hour' | 'minute' | 'second' | 'milisecond';
 /**Determines the format of the dates inside the timeline header when they represent hours. */
 export declare type HourFormat = 'default' | '2-digit' | 'numeric';
+/**Determines the scale in Month view. */
+export declare type MonthScale = 'day' | 'week';
+/**Determines the format of the dates the timeline header when they represent quarters. */
+export declare type QuarterFormat = 'numeric' | 'long' | 'short';
 /**Determines how the capacity of the resources will be visualized inside the resource timeline. By default, the capacity is measured in hours depending on the <b>view</b> property of the element. */
 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' */
@@ -14661,7 +14796,7 @@ month - the timeline shows the days of the month.
 year - the timeline shows the months of the year.
 resource - displays the current tasks by grouping them according to the resources they have assigned. The unassigned tasks will be placed in a separate group called 'Unassigned'.
  <br /> The timeline has a header section that contains the labels of each cell according to the date inside them. The header is splitted in two sections in order to give a more detailed information of the dates. */
-export declare type GanttChartView = 'day' | 'week' | 'month' | 'year';
+export declare type GanttChartView = 'day' | 'week' | 'month' | 'quarter' | 'year';
 /**Determines the format of the dates inside the timeline header when they represent weeks.  */
 export declare type WeekFormat = 'long' | 'numeric';
 export interface GaugeProperties {
@@ -14992,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]
@@ -15026,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
@@ -15066,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]
@@ -15091,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
@@ -15211,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]
@@ -15246,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]
@@ -15267,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.
@@ -15375,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)
@@ -15488,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.
@@ -15499,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.
@@ -15528,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.
@@ -15540,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.
@@ -15792,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
@@ -15808,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
@@ -15930,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 
@@ -16042,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.
@@ -16053,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.
    */
@@ -16069,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.
@@ -16100,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.
@@ -16207,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
@@ -16222,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
@@ -16423,6 +16624,16 @@ export interface GridAppearance {
    * Default value: true
    */
   showRowLines?: boolean;
+  /**
+   * Shows lines between columns in column groups.
+   * Default value: true
+   */
+  showColumnGroupLines?: boolean;
+  /**
+   * Shows lines between cells in column groups.
+   * Default value: true
+   */
+  showColumnGroupCellLines?: boolean;
   /**
    * Shows column groups in the Hide columns panel. Column groups and columns are shown in a tree-like structure. When the property is set to false, the column groups are not displayed and the column labels contain the column group name.
    * Default value: false
@@ -16444,10 +16655,10 @@ export interface GridAppearance {
    */
   showFrozenColumnBackground?: boolean;
   /**
-   * Shows filtered row background, when the Grid has frozen rows.
-   * Default value: true
+   * Shows the selection on top of all other styles.
+   * Default value: false
    */
-  showFrozenRowBackground?: boolean;
+  showSelectionOnTop?: boolean;
   /**
    * Shows column sort button.
    * Default value: true
@@ -16527,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
@@ -16539,48 +16755,13 @@ export interface GridBehavior {
   rowResizeMode?: GridResizeMode | string;
 }
 
-/**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 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 height of the Grid rows.
-   * Default value: 30
-   */
-  rowMinHeight?: number;
+/**Describes the column header settings. */
+export interface GridColumnHeader {
   /**
-   * Sets the height of the Grid rows. The property can be set to null, auto or a number.
-   * Default value: null
+   * Sets the column header visibility.
+   * Default value: true
    */
-  rowHeight?: string | number | null;
+  visible?: boolean;
 }
 
 /**The <em>clipboard</em> property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations.. */
@@ -16629,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
@@ -16663,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: ""
@@ -16723,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
@@ -16748,6 +16939,11 @@ export interface GridColumn {
    * Default value: default
    */
   filterMenuMode?: GridColumnFilterMenuMode | string;
+  /**
+   * Sets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number
+   * Default value: null
+   */
+  filterEditor?: any;
   /**
    * Sets or gets the column's format function.
    * Default value: null
@@ -16758,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: ""
@@ -16798,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
@@ -16834,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
@@ -16872,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]
@@ -17339,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
@@ -17401,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]
@@ -17751,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 {
   /**
@@ -17863,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. */
@@ -18135,126 +18483,17 @@ 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 {
+  allowToggle?: boolean;
   /**
-   * Sets the summary row visibility.
-   * Default value: false
+   * Sets or gets the row can be resized.
+   * Default value: true
    */
-  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 save/load of the grid state.
-   * Default value: true
-   */
-  enabled?: boolean;
-  /**
-   * Sets or gets the current state.
-   * Default value: ""
-   */
-  current?: string;
-  /**
-   * Container which is auto-filled with state objects when you call the saveState method or enable the autoSave of states. Each object has a key which is the state's name and value which is a json with the state's properties.
-   * Default value: null
-   */
-  storage?: any;
-  /**
-   * Function called when the state is changed.
-   * Default value: 
-   */
-  onStateChange?: any;
-  /**
-   * Array with state options such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', 'columns'. This property determines which parts of the state would be saved or loaded.
-   * Default value: 
-   */
-  options?: string[];
-}
-
-/**Describes the settings for the group header. */
-export interface GridGroupHeader {
-  /**
-   * 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;
+  allowResize?: boolean;
   /**
    * Sets or gets the row can be selected.
    * Default value: true
@@ -18500,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 {
   /**
@@ -18651,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;
@@ -18701,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'  */
@@ -19128,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
@@ -19238,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"
@@ -19749,10 +20087,10 @@ export interface Kanban extends BaseElement, KanbanProperties {
    */
   getSelectedTasks(id: number): any;
   /**
-   * Gets the Kanban's state.
-   * @returns 
+   * Gets the Kanban's state. Returns an object with the following type: { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } } 
+   * @returns {any}
    */
-  getState(): { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } };
+  getState(): any;
   /**
    * Loads the Kanban's state.
    * @param  state?. An object returned by one of the methods getState or saveState. If not passed, gets saved state from the browser's localStorage.
@@ -20063,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. */
@@ -20855,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.
    */
@@ -20863,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.
@@ -24700,6 +25049,21 @@ export interface PivotTableProperties {
    * Default value: null
    */
   onInit?: { (): void };
+  /**
+   * Sets or gets the page size (when paging is enabled).
+   * Default value: 10
+   */
+  pageSize?: PivotTablePageSize | string;
+  /**
+   * Sets or gets the current (zero-based) page index (when paging is enabled).
+   * Default value: 0
+   */
+  pageIndex?: number;
+  /**
+   * Sets or gets whether paging is enabled.
+   * Default value: false
+   */
+  paging?: boolean;
   /**
    * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
    * Default value: false
@@ -25044,6 +25408,8 @@ export declare type PivotTableDesignerPosition = 'near' | 'far';
 export declare type PivotTableDrillDownDataExport = null | 'xlsx' | 'pdf' | 'html' | 'json' | 'csv' | 'tsv' | 'xml';
 /**Sets or gets the way row nesting (based on rowGroup columns) is displayed. */
 export declare type PivotTableGroupLayout = 'classic' | 'default';
+/**Sets or gets the page size (when paging is enabled). */
+export declare type PivotTablePageSize = '10' | '25' | '50';
 /**Sets or gets the position of row total columns (shown when rowTotals is enabled). */
 export declare type PivotTableRowTotalsPosition = 'near' | 'far';
 /**Sets or gets the selection mode. Only applicable when selection is enabled. */
@@ -25283,6 +25649,11 @@ export interface QRcodeProperties {
    * Default value: "H"
    */
   errorLevel?: string;
+  /**
+   * Sets color to the transparent parts of the embedded image. Background remains transparent if set to empty string.
+   * Default value: ""
+   */
+  imageBackgroundColor?: string;
   /**
    * Sets the height of the embedded image.
    * Default value: 15
@@ -25343,6 +25714,16 @@ export interface QRcodeProperties {
    * Default value: ""
    */
   value?: string;
+  /**
+   * Sets or gets the width of the QR Code. If the width is set to 0, the width of the QR Code is calculated automatically.
+   * Default value: 0
+   */
+  width?: number;
+  /**
+   * Sets or gets the height of the QR Code. If the height is set to 0, the height of the QR Code is calculated automatically.
+   * Default value: 0
+   */
+  height?: number;
 }
 /**
  QR Codes encode text values in a two-dimensional pattern.
@@ -25860,238 +26241,660 @@ export interface RadioButton extends BaseElement, RadioButtonProperties {
    *  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;
+  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;
   /**
-   * 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.
+   * 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.
    */
-  onCheckValue?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  removeGroup(ribbonTabIndex?: string | number, ribbonGroup?: string | number): void;
   /**
-   * 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.
+   * 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.
    */
-  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>;
-    }
+  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;
 }
 
-export interface RatingProperties {
+/**Determines the file menu options of the ribbon. */
+export interface RibbonFileMenu {
   /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
+   * Determines whether the file button is enabled.
+   * Default value: true
    */
-  animation?: Animation | string;
+  enabled?: boolean;
   /**
-   * Disables the interaction with the element.
-   * Default value: false
+   * Determines the data source that will be loaded to the FileMenu.
+   * Default value: 
    */
-  disabled?: boolean;
+  items?: any;
   /**
-   * Sets or gets the language. Used in conjunction with the property messages. 
-   * Default value: "en"
+   * Determines the position of the file menu.
+   * Default value: left
    */
-  locale?: string;
+  position?: RibbonFileMenuPosition | string;
   /**
-   * Callback used to customize the format of the messages that are returned from the Localization Module.
-   * Default value: null
+   * Determines the label of the file menu.
+   * Default value: "File"
    */
-  localizeFormatFunction?: any;
+  label?: string;
   /**
-   * Determines the number of stars that will be displayed.
-   * Default value: 
+   * Determines the tooltip of the file menu.
+   * Default value: ""
    */
-  max?: number;
+  tooltip?: 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 template of the file menu. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
+   * Default value: ""
    */
-  messages?: any;
+  template?: string;
   /**
-   * The name of the element. Used when submiting data inside a Form.
+   * Determines the type of the file menu.
+   * Default value: dropDown
+   */
+  type?: RibbonFileMenuType | string;
+  /**
+   * Determines the icon of the file menu.
    * Default value: ""
    */
-  name?: string;
+  icon?: string;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-ribbon"): Ribbon;
+        querySelector(selectors: "smart-ribbon"): Ribbon | null;
+        querySelectorAll(selectors: "smart-ribbon"): NodeListOf<Ribbon>;
+        getElementsByTagName(qualifiedName: "smart-ribbon"): HTMLCollectionOf<Ribbon>;
+        getElementsByName(elementName: "smart-ribbon"): NodeListOf<Ribbon>;
+    }
+}
+
+/**Determines the position of the file menu. */
+export declare type RibbonFileMenuPosition = 'left' | 'right';
+/**Determines the type of the file menu. */
+export declare type RibbonFileMenuType = 'dropDown' | 'button';
+export interface RibbonGroupProperties {
   /**
-   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
-   * Default value: false
+   * Determines the label of the ribbon group.
+   * Default value: ""
    */
-  rightToLeft?: boolean;
+  label?: string;
   /**
-   * Determines the theme. Theme defines the look of the element
+   * Determines the icon of the ribbon group.
    * Default value: ""
    */
-  theme?: string;
+  icon?: string;
   /**
-   * If is set to true, the element cannot be focused.
-   * Default value: false
+   * Determines the class of the ribbon group.
+   * Default value: ""
    */
-  unfocusable?: boolean;
+  cssClass?: string;
   /**
-   * Determines the number of stars that will be marked as active.
+   * Determines the ribbon items of the ribbon group.
    * Default value: 
    */
-  value?: number;
+  ribbonItems?: any;
+  /**
+   * Determines the direction of the ribbon group.
+   * Default value: horizontal
+   */
+  direction?: RibbonGroupDirection | string;
+  /**
+   * Determines the settings of the dialog launcher of the ribbon group.
+   * Default value: [object Object]
+   */
+  dialogLauncher?: RibbonGroupDialogLauncher;
+  /**
+   * Determines the size, below which the ribbon group will be wrapped.
+   * Default value: undefined
+   */
+  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>;
     }
 }
 
@@ -26116,6 +26919,11 @@ export interface SchedulerProperties {
    * Default value: #D50000,#E67C73,#F4511E,#F6BF26,#33B679,#0B8043,#039BE5,#3F51B5,#7986CB,#8E24AA,#616161,
    */
   colorScheme?: string[];
+  /**
+   * Determines the current time of the Scheduler to use for the current time indicator functionality. By default the current time is Today.
+   * Default value: new Date()
+   */
+  currentTime?: string | Date;
   /**
    * Enables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells. 
    * Default value: false
@@ -26472,7 +27280,7 @@ export interface SchedulerProperties {
    */
   restrictedHours?: any;
   /**
-   * Defines an array of dates and hours that are not allowed to have events on. Events that overlap restricted Hours or start/end on them will not be displayed. Each array item is an Object and requires 2 fields - date and hours. For example: { date: new Date(2022, 10, 1), hours: [[0, 6], 12, [20, 23]] }. The hours define a range of restricted hours similartly to the restricted hours property, the date defines a date where the restricted hours will be applied.
+   * Defines an array of dates and hours that are not allowed to have events on. Events that overlap restricted Hours or start/end on them will not be displayed. Each array item is an Object and requires 2 fields - date and hours. For example: { date: new Date(2023, 10, 1), hours: [[0, 6], 12, [20, 23]] }. The hours define a range of restricted hours similartly to the restricted hours property, the date defines a date where the restricted hours will be applied.
    * Default value: 
    */
   restricted?: any;
@@ -26943,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}
@@ -29055,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
@@ -29076,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: 
@@ -29431,6 +30245,10 @@ export interface Table extends BaseElement, TableProperties {
    * @param {string | number} row. The id of the cell's row.
    */
   removeRow(row: string | number): void;
+  /**
+   * Resets the Table's state. Information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns is cleared, based on the value of the <strong>stateSettings</strong> property.
+   */
+  resetState(): void;
   /**
    * Saves the Table's state. Information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns is saved, based on the value of the <strong>stateSettings</strong> property.
    * @returns {any}
@@ -29789,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. */
@@ -30460,11 +31276,21 @@ export interface TextAreaProperties {
    * Default value: false
    */
   readonly?: boolean;
+  /**
+   * Determines whether ot not the user can resize the Textarea.
+   * Default value: none
+   */
+  resize?: TextAreaResize | 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;
+  /**
+   * Enables or disables the rich text formatting.
+   * Default value: false
+   */
+  richText?: boolean;
   /**
    * Determines whether the items are sorted alphabetically or not
    * Default value: false
@@ -30490,6 +31316,11 @@ export interface TextAreaProperties {
    * Default value: false
    */
   unfocusable?: boolean;
+  /**
+   * Sets the TextArea users. Expects an array of objects. Each object should have an id and name properties. When you press the 'at' key, you can enter an user from a dropdown.
+   * Default value: []
+   */
+  users?: any[];
   /**
    * Sets or gets the value of the element.
    * Default value: ""
@@ -30527,6 +31358,11 @@ export interface TextArea extends BaseElement, TextAreaProperties {
    * Ensures that the active ( selected ) item is always visible.
    */
   ensureVisible(): void;
+  /**
+   * Returns an array of users mentioned in the Textarea's value.
+   * @returns {any[]}
+   */
+  getMentions(): any[];
   /**
    * Opens the drop down.
    */
@@ -30549,6 +31385,8 @@ declare global {
 
 /**Determines the auto complete query mode. This property also determines the matching algorithm for the autocomplete operation. */
 export declare type TextAreaQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
+/**Determines whether ot not the user can resize the Textarea. */
+export declare type TextAreaResize = 'none' | 'horizontal' | 'vertical' | 'both';
 export interface TextBoxProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -31981,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.    */
@@ -32057,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[]}