@smart-webcomponents-angular/window 16.0.2 → 22.0.2

package/index.d.ts

@@ -114,6 +114,11 @@ export interface ThreeDChartProperties {
    * Default value: "#ffffff"
    */
   lightColor?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages.
    * Default value: "en"
@@ -1278,6 +1283,11 @@ export interface AccordionProperties {
    * Default value: singleFitHeight
    */
   expandMode?: AccordionExpandMode | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -1559,6 +1569,11 @@ export interface ArrayProperties {
    * Default value: 50
    */
   indexerWidth?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -2010,6 +2025,11 @@ export interface BreadcrumbProperties {
    * Default value: null
    */
   itemTemplate?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -2133,6 +2153,11 @@ export interface ButtonProperties {
    * Default value: """"
    */
   innerHTML: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -2241,6 +2266,11 @@ export interface ButtonGroupProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -2369,6 +2399,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
@@ -2429,6 +2464,11 @@ export interface CalendarProperties {
    * Default value: null
    */
   importantDatesTemplate?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    *  Determines the language of the Calendar. 
    * Default value: "en"
@@ -2726,6 +2766,11 @@ export interface CardProperties {
    * Default value: null
    */
   itemTemplate?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -2869,6 +2914,11 @@ export interface CardViewProperties {
    * Default value: none
    */
   headerPosition?: CardViewHeaderPosition | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages.
    * Default value: "en"
@@ -3315,6 +3365,11 @@ export interface CarouselProperties {
    * Default value: false
    */
   keyboard?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -3557,6 +3612,11 @@ export interface ChartProperties {
    * Default value: [object Object]
    */
   legendLayout?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages.
    * Default value: "en"
@@ -5376,6 +5436,11 @@ export interface CheckBoxProperties {
    * Default value: """"
    */
   innerHTML: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -5520,6 +5585,11 @@ export interface CheckInputProperties {
    * Default value: 8
    */
   items?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -5707,6 +5777,11 @@ export interface ChipProperties {
    * Default value: null
    */
   itemTemplate?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -5803,6 +5878,11 @@ export interface CircularProgressBarProperties {
    * Default value: false
    */
   inverted?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -5939,6 +6019,11 @@ export interface ColorInputProperties {
    * Default value: 8
    */
   items?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -6166,6 +6251,11 @@ export interface ColorPanelProperties {
    * Default value: false
    */
   inverted?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages.
    * Default value: "en"
@@ -6455,232 +6545,242 @@ export interface ColorPickerProperties {
    */
   label?: string;
   /**
-   * 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;
-  /**
-   * Sets or gets an object specifying strings used in the widget 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 ''!",
-   *     "methodInvalidValueType": "Invalid ''!",
-   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
-   *     "methodInvalidReturnType": "Invalid ''!",
-   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
-   *     "moduleUndefined": "Module is undefined.",
-   *     "missingReference": "'.",
-   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
-   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
-   *     "invalidNode": ".",
-   *     "redPrefix": "R:",
-   *     "greenPrefix": "G:",
-   *     "bluePrefix": "B:",
-   *     "hexPrefix": "#:",
-   *     "alphaPrefix": "Alpha:",
-   *     "ok": "OK",
-   *     "cancel": "CANCEL",
-   *     "customColor": "CUSTOM COLOR ..."
-   *   }
-   * }
-   */
-  messages?: any;
-  /**
-   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
-   * Default value: ""
-   */
-  name?: string;
-  /**
-   * Determines whether the popup is opened or closed
-   * Default value: false
-   */
-  opened?: boolean;
-  /**
-   * Determines what colors will be displayed in 'spectrumGrid', 'grid' and 'hexagonal' displayModes.
-   * Default value: default
-   */
-  palette?: ColorPalette | string;
-  /**
-   * Defines an array of colors that form a custom palette. This palette can be used in displayModes 'grid' and 'spectrum grid' if the palette property is set to custom. The value of the property can be an array of strings or objects that contain valid colors ( HEX, RGBA, etc).
-   * Default value: null
-   */
-  paletteColors?: {name: string, value: string}[] | string[] | null;
-  /**
-   * Defines an array of colors that represent a predefined list of custom colors. This palette can be used in displayModes 'grid', 'default' and 'spectrum grid'. Custom colors are displayed at the bottom of the color grid below the button for custom color selection. They are only visible if enableCustomColor property is true.
-   * Default value: null
-   */
-  paletteCustomColors?: string[] | null;
-  /**
-   * The placeholder is shown when the value is not set yet or is set to null.
-   * Default value: ""
-   */
-  placeholder?: string;
-  /**
-   * Disables user interaction with the element.
-   * Default value: false
-   */
-  readonly?: boolean;
-  /**
-   * Determines whether the resize indicator in the bottom right corner of the drop down is visible or not. This property is used in conjunction with resizeMode.
-   * Default value: false
-   */
-  resizeIndicator?: boolean;
-  /**
-   * Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down.
-   * Default value: null
-   */
-  resizeMode?: ResizeMode | 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
+   * Sets or gets the unlockKey which unlocks the product.
    * Default value: ""
    */
-  theme?: string;
-  /**
-   * Determines how the tooltip displays the value of the color that is being hovered.
-   * Default value: hex
-   */
-  tooltipDisplayMode?: ColorTooltipDisplayMode | string;
-  /**
-   * If is set to true, the element cannot be focused.
-   * Default value: false
-   */
-  unfocusable?: boolean;
-  /**
-   * Represents the value of the selected color as the value of the element.
-   * Default value: "null"
-   */
-  value?: string;
-  /**
-   * Determines the format of the color. Whether it's in HEX, RGB or RGBA. By default it shows the color depending on the displayMode.
-   * Default value: default
-   */
-  valueFormat?: ColorValueFormat | string;
-  /**
-   * Determines which elements will be displayed in color picker's action section.
-   * Default value: default
-   */
-  valueDisplayMode?: ColorValueDisplayMode | string;
-}
-/**
- ColorPicker is an advanced color picking component with Pallete, Spectrum Grid, Radial Palette and Excel-like options. Users can input colors either by a dropdown or input field.
-*/
-export interface ColorPicker extends BaseElement, ColorPickerProperties {
-
-  /* Get a member by its name */
-  [name: string]: any;
-  /**
-   * This event is triggered when user clicks on the action button. 'Ok' button is visible only when <strong>applyValueMode</strong> is set to <strong>useButtons</strong>.
-	* @param event. The custom event.    */
-  onActionButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the cancel button is clicked. 'Cancel' button is visible only when <strong>applyValueMode</strong> is set to <strong>useButtons</strong>.
-	* @param event. The custom event.    */
-  onCancelButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the color value is changed.
-	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
-   *  oldValue - The previously selected color.
-   *  value - The new selected color.
-   */
-  onChange: ((this: any, ev: Event) => any) | null;
+  unlockKey?: string;
   /**
-   * This event is triggered when the drop down is closed.
-	* @param event. The custom event.    */
-  onClose: ((this: any, ev: Event) => any) | null;
-  /**
-   * This event is triggered when the drop down is about to be closed. This event allows to cancel the closing operation calling event.preventDefault() in the event handler function.
-	* @param event. The custom event.    */
-  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the custom color selection view is opened/closed. Custom color selection view is available when <strong>enableCustomColors</strong> property is true.
-	* @param event. The custom event. Custom data event was created with: ev.detail(value)
-   *  value - A boolean that indicates whether the custom color view is shown or not.
-   */
-  onCustomColorSelection?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when user clicks on the drop down button.
-	* @param event. The custom event.    */
-  onDropDownButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the ok button is clicked.
-	* @param event. The custom event.    */
-  onOkButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the drop down is opened.
-	* @param event. The custom event.    */
-  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the drop down is about to be opened. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.
-	* @param event. The custom event.    */
-  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when user starts resizing the drop down.
-	* @param event. The custom event. Custom data event was created with: ev.detail(position)
-   *  position - An object containing the current left and top positions of the drop down.
-   */
-  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * This event is triggered when the resizing of the drop down is finished.
-	* @param event. The custom event. Custom data event was created with: ev.detail(position)
-   *  position - An object containing the current left and top positions of the drop down.
-   */
-  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
-  /**
-   * Opens the drop down of the color picker.
-   */
-  open(): void;
-  /**
-   * Closes the drop down of the color picker.
-   */
-  close(): void;
-}
-
-declare global {
-    interface Document {
-        createElement(tagName: "smart-color-picker"): ColorPicker;
-        querySelector(selectors: "smart-color-picker"): ColorPicker | null;
-        querySelectorAll(selectors: "smart-color-picker"): NodeListOf<ColorPicker>;
-        getElementsByTagName(qualifiedName: "smart-color-picker"): HTMLCollectionOf<ColorPicker>;
-        getElementsByName(elementName: "smart-color-picker"): NodeListOf<ColorPicker>;
-    }
-}
-
-/**Determines how the drop down is going to open. */
-export declare type DropDownOpenMode = 'none' | 'default' | 'dropDownButton' | 'auto';
-/**Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size. */
-export declare type DropDownPosition = 'auto' | 'top' | 'bottom' | 'overlay-top' | 'overlay-center' | 'overlay-bottom' | 'center-bottom' | 'center-top';
-/**Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down. */
-export declare type ResizeMode = 'none' | 'horizontal' | 'vertical' | 'both';
-export interface ColumnPanelProperties {
-  /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
-   */
-  animation?: Animation | string;
-  /**
-   * Determines the data source that will be loaded to the column panel.
-   * Default value: null
-   */
-  dataSource?: ColumnPanelDataSource[];
-  /**
-   * Enables or disables the column panel.
-   * Default value: false
-   */
-  disabled?: boolean;
-  /**
-   * Sets or gets the language. Used in conjunction with the property messages.
+   * 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;
+  /**
+   * Sets or gets an object specifying strings used in the widget 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 ''!",
+   *     "methodInvalidValueType": "Invalid ''!",
+   *     "methodInvalidArgumentsCount": "Invalid '' argument(s)!",
+   *     "methodInvalidReturnType": "Invalid ''!",
+   *     "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
+   *     "moduleUndefined": "Module is undefined.",
+   *     "missingReference": "'.",
+   *     "htmlTemplateNotSuported": ": Web Browser doesn't support HTMLTemplate elements.",
+   *     "invalidTemplate": "' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
+   *     "invalidNode": ".",
+   *     "redPrefix": "R:",
+   *     "greenPrefix": "G:",
+   *     "bluePrefix": "B:",
+   *     "hexPrefix": "#:",
+   *     "alphaPrefix": "Alpha:",
+   *     "ok": "OK",
+   *     "cancel": "CANCEL",
+   *     "customColor": "CUSTOM COLOR ..."
+   *   }
+   * }
+   */
+  messages?: any;
+  /**
+   * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
+   * Default value: ""
+   */
+  name?: string;
+  /**
+   * Determines whether the popup is opened or closed
+   * Default value: false
+   */
+  opened?: boolean;
+  /**
+   * Determines what colors will be displayed in 'spectrumGrid', 'grid' and 'hexagonal' displayModes.
+   * Default value: default
+   */
+  palette?: ColorPalette | string;
+  /**
+   * Defines an array of colors that form a custom palette. This palette can be used in displayModes 'grid' and 'spectrum grid' if the palette property is set to custom. The value of the property can be an array of strings or objects that contain valid colors ( HEX, RGBA, etc).
+   * Default value: null
+   */
+  paletteColors?: {name: string, value: string}[] | string[] | null;
+  /**
+   * Defines an array of colors that represent a predefined list of custom colors. This palette can be used in displayModes 'grid', 'default' and 'spectrum grid'. Custom colors are displayed at the bottom of the color grid below the button for custom color selection. They are only visible if enableCustomColor property is true.
+   * Default value: null
+   */
+  paletteCustomColors?: string[] | null;
+  /**
+   * The placeholder is shown when the value is not set yet or is set to null.
+   * Default value: ""
+   */
+  placeholder?: string;
+  /**
+   * Disables user interaction with the element.
+   * Default value: false
+   */
+  readonly?: boolean;
+  /**
+   * Determines whether the resize indicator in the bottom right corner of the drop down is visible or not. This property is used in conjunction with resizeMode.
+   * Default value: false
+   */
+  resizeIndicator?: boolean;
+  /**
+   * Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down.
+   * Default value: null
+   */
+  resizeMode?: ResizeMode | 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;
+  /**
+   * Determines how the tooltip displays the value of the color that is being hovered.
+   * Default value: hex
+   */
+  tooltipDisplayMode?: ColorTooltipDisplayMode | string;
+  /**
+   * If is set to true, the element cannot be focused.
+   * Default value: false
+   */
+  unfocusable?: boolean;
+  /**
+   * Represents the value of the selected color as the value of the element.
+   * Default value: "null"
+   */
+  value?: string;
+  /**
+   * Determines the format of the color. Whether it's in HEX, RGB or RGBA. By default it shows the color depending on the displayMode.
+   * Default value: default
+   */
+  valueFormat?: ColorValueFormat | string;
+  /**
+   * Determines which elements will be displayed in color picker's action section.
+   * Default value: default
+   */
+  valueDisplayMode?: ColorValueDisplayMode | string;
+}
+/**
+ ColorPicker is an advanced color picking component with Pallete, Spectrum Grid, Radial Palette and Excel-like options. Users can input colors either by a dropdown or input field.
+*/
+export interface ColorPicker extends BaseElement, ColorPickerProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * This event is triggered when user clicks on the action button. 'Ok' button is visible only when <strong>applyValueMode</strong> is set to <strong>useButtons</strong>.
+	* @param event. The custom event.    */
+  onActionButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the cancel button is clicked. 'Cancel' button is visible only when <strong>applyValueMode</strong> is set to <strong>useButtons</strong>.
+	* @param event. The custom event.    */
+  onCancelButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the color value is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(oldValue, value)
+   *  oldValue - The previously selected color.
+   *  value - The new selected color.
+   */
+  onChange: ((this: any, ev: Event) => any) | null;
+  /**
+   * This event is triggered when the drop down is closed.
+	* @param event. The custom event.    */
+  onClose: ((this: any, ev: Event) => any) | null;
+  /**
+   * This event is triggered when the drop down is about to be closed. This event allows to cancel the closing operation calling event.preventDefault() in the event handler function.
+	* @param event. The custom event.    */
+  onClosing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the custom color selection view is opened/closed. Custom color selection view is available when <strong>enableCustomColors</strong> property is true.
+	* @param event. The custom event. Custom data event was created with: ev.detail(value)
+   *  value - A boolean that indicates whether the custom color view is shown or not.
+   */
+  onCustomColorSelection?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when user clicks on the drop down button.
+	* @param event. The custom event.    */
+  onDropDownButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ok button is clicked.
+	* @param event. The custom event.    */
+  onOkButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the drop down is opened.
+	* @param event. The custom event.    */
+  onOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the drop down is about to be opened. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.
+	* @param event. The custom event.    */
+  onOpening?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when user starts resizing the drop down.
+	* @param event. The custom event. Custom data event was created with: ev.detail(position)
+   *  position - An object containing the current left and top positions of the drop down.
+   */
+  onResizeStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the resizing of the drop down is finished.
+	* @param event. The custom event. Custom data event was created with: ev.detail(position)
+   *  position - An object containing the current left and top positions of the drop down.
+   */
+  onResizeEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * Opens the drop down of the color picker.
+   */
+  open(): void;
+  /**
+   * Closes the drop down of the color picker.
+   */
+  close(): void;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-color-picker"): ColorPicker;
+        querySelector(selectors: "smart-color-picker"): ColorPicker | null;
+        querySelectorAll(selectors: "smart-color-picker"): NodeListOf<ColorPicker>;
+        getElementsByTagName(qualifiedName: "smart-color-picker"): HTMLCollectionOf<ColorPicker>;
+        getElementsByName(elementName: "smart-color-picker"): NodeListOf<ColorPicker>;
+    }
+}
+
+/**Determines how the drop down is going to open. */
+export declare type DropDownOpenMode = 'none' | 'default' | 'dropDownButton' | 'auto';
+/**Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size. */
+export declare type DropDownPosition = 'auto' | 'top' | 'bottom' | 'overlay-top' | 'overlay-center' | 'overlay-bottom' | 'center-bottom' | 'center-top';
+/**Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down. */
+export declare type ResizeMode = 'none' | 'horizontal' | 'vertical' | 'both';
+export interface ColumnPanelProperties {
+  /**
+   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
+   * Default value: advanced
+   */
+  animation?: Animation | string;
+  /**
+   * Determines the data source that will be loaded to the column panel.
+   * Default value: null
+   */
+  dataSource?: ColumnPanelDataSource[];
+  /**
+   * Enables or disables the column panel.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
+  /**
+   * Sets or gets the language. Used in conjunction with the property messages.
    * Default value: "en"
    */
   locale?: string;
@@ -6982,6 +7082,11 @@ export interface ComboBoxProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -7195,6 +7300,11 @@ export interface ComboBox extends BaseElement, ComboBoxProperties {
    * @returns {Node}
    */
   appendChild<T extends Node>(node: Node): T;
+  /**
+   * Adds a new item(s).
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
+   */
+  add(item: any): void;
   /**
    * Removes all items from the drop down list.
    */
@@ -7207,6 +7317,10 @@ export interface ComboBox extends BaseElement, ComboBoxProperties {
    * Closes the dropDown list.
    */
   close(): void;
+  /**
+   * Performs a data bind. This can be used to refresh the data source.
+   */
+  dataBind(): void;
   /**
    * Ensures the desired item is visible by scrolling to it.
    * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
@@ -7221,7 +7335,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;
   /**
@@ -7459,6 +7573,11 @@ export interface CustomizationDialogProperties {
    * Default value: apply,close
    */
   headerButtons?: string[];
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -7955,6 +8074,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' }
@@ -7990,6 +8114,11 @@ export interface DateInputProperties {
    * Default value: "off"
    */
   inputPurpose?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -8164,6 +8293,11 @@ export interface DateRangeInputProperties {
    * Default value: "off"
    */
   inputPurpose?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -8508,6 +8642,11 @@ export interface DateTimePickerProperties {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale that determines what language is used to localize the labels inside the DateTimePicker.
    * Default value: "en"
@@ -8788,7 +8927,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;
@@ -8797,6 +8936,11 @@ export interface DockingLayoutProperties {
    * Default value: false
    */
   liveResize?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -9184,6 +9328,11 @@ export interface DropDownButtonProperties {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -9347,11 +9496,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
@@ -9527,6 +9671,11 @@ export interface DropDownListProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -9734,6 +9883,11 @@ export interface DropDownList extends BaseElement, DropDownListProperties {
    * @returns {Node}
    */
   appendChild<T extends Node>(node: Node): T;
+  /**
+   * Adds a new item(s).
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
+   */
+  add(item: any): void;
   /**
    * Removes all items from the drop down list.
    */
@@ -9746,6 +9900,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.
@@ -9929,6 +10087,11 @@ export interface EditorProperties {
    * Default value: [object Object]
    */
   iframeSettings?: EditorIframeSettings;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -10857,6 +11020,11 @@ export interface ElementProperties {
    * Default value: false
    */
   isRendered?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -11040,6 +11208,11 @@ export interface FileUploadProperties {
    * Default value: null
    */
   itemTemplate?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -11304,6 +11477,11 @@ export interface FilterBuilderProperties {
    * Default value: { '=': '=', '<>': '<>', '>': '>', '>=': '>=', '<': '<', '<=': '<=', 'startswith': 'a|bc', 'endswith': 'ab|c', 'contains': 'abc', 'notcontains': '!abc', 'isblank': 'o', 'isnotblank': '*'}
    */
   icons?: FilterBuilderIcons;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -12487,6 +12665,11 @@ export interface FilterPanelProperties {
    * Default value: "d"
    */
   formatString?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -13454,11 +13637,6 @@ export interface GanttChartProperties {
    * Default value: true
    */
   hideTimelineSecondHeaderDetails?: boolean;
-  /**
-   * Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.
-   * Default value: false
-   */
-  showSelectionColumn?: boolean;
   /**
    * Hides the Resource panel regardless of the resources availability By default the Resource panel is visible if resources are added to the GanttChart. This property allows to hide the Resource panel permanently.
    * Default value: false
@@ -13494,6 +13672,11 @@ export interface GanttChartProperties {
    * Default value: false
    */
   keyboardNavigation?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    *  Determines the language of the GanttChart. 
    * Default value: "en"
@@ -13539,6 +13722,16 @@ export interface GanttChartProperties {
    * Default value: null
    */
   onTaskRender?: any;
+  /**
+   * A function that can be used to completly customize the task element. The function has two arguments: task - the task object.taskElement - the task's html element.
+   * Default value: null
+   */
+  taskFormatFunction?: any;
+  /**
+   * A function that can be used to completly customize the tooltip. The function has three arguments: tooltipObject - the tooltip object.event - the event that triggered the tooltip.content - the tooltip's label element.
+   * Default value: null
+   */
+  tooltipFormatFunction?: any;
   /**
    * A function that can be used to completly customize the popup Window that is used to interact width tasks by changing their properties. The function as three arguments: target - the target popup Window that is about to be opened.type - the type of the window. The type determines the purpose of the window. Three possible values: 'task' (task editing), 'confirm' ( confirmation window), 'connection' (used when deleting a connection between tasks). item - the connection/task object that is the target of the window.
    * Default value: null
@@ -13629,11 +13822,21 @@ export interface GanttChartProperties {
    * Default value: 
    */
   selectedResourceIds?: number[] | string[];
+  /**
+   * Sets or gets the selection mode. Only applicable when selection is enabled.
+   * Default value: many
+   */
+  selectionMode?: GanttChartSelectionMode | string;
   /**
    * Enables/Disables the current time shader. If enabled all cells that represent past time will be shaded.
    * Default value: false
    */
   shadeUntilCurrentTime?: boolean;
+  /**
+   * Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.
+   * Default value: false
+   */
+  showSelectionColumn?: boolean;
   /**
    * Determines whether the baselnes of the tasks are visible or not. Baselines are defined via the 'planned' attribute on the task objects of the dataSource property.
    * Default value: false
@@ -14171,6 +14374,11 @@ export interface GanttChart extends BaseElement, GanttChartProperties {
    * @param {string} content?. Allows to set a custom content for the Tooltip.
    */
   showTooltip(target: HTMLElement, content?: string): void;
+  /**
+   * Scrolls to a date.
+   * @param {Date} date. The date to scroll to.
+   */
+  scrollToDate(date: Date): void;
   /**
    * Saves the current settings of the element to LocalStorage. <strong>Requires an id to be set to the element.</strong>
    * @param {any[]} state?. An Array containing a valid structure of Gantt Chart tasks.
@@ -14741,6 +14949,8 @@ export declare type QuarterFormat = 'numeric' | 'long' | 'short';
 export declare type GanttChartResourceTimelineMode = 'diagram' | 'histogram' | 'custom';
 /**Determines how the resources will be displayed inside the resource Timeline. */
 export declare type GanttChartResourceTimelineView = 'hours' | 'tasks' | 'custom';
+/**Sets or gets the selection mode. Only applicable when selection is enabled. */
+export declare type GanttChartSelectionMode = 'one' | 'many' | 'extended';
 /**Determines whether the GanttChart can be sorted by one, more then one or no columns. */
 export declare type GanttChartSortMode = 'none' | 'one' | 'many';
 /**Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task' */
@@ -14840,6 +15050,11 @@ export interface GaugeProperties {
    * Default value: all
    */
   labelsVisibility?: LabelsVisibility | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -15082,15 +15297,15 @@ export interface GridProperties {
    */
   behavior?: GridBehavior;
   /**
-   * An object containing settings related to the grid's layout.
-   * Default value: [object Object]
+   * Sets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.
+   * Default value: 
    */
-  layout?: GridLayout;
+  currentUser?: string | number;
   /**
-   * Sets or gets the language. Used in conjunction with the property messages. 
-   * Default value: "en"
+   * Describes the column header settings.
+   * Default value: [object Object]
    */
-  locale?: string;
+  columnHeader?: GridColumnHeader;
   /**
    * The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..
    * Default value: [object Object]
@@ -15116,6 +15331,11 @@ export interface GridProperties {
    * Default value: 
    */
   columnGroups?: GridColumnGroup[];
+  /**
+   * 
+   * Default value: false
+   */
+  dropDownMode?: boolean;
   /**
    * Sets or gets details about conditional formatting to be applied to the Grid's cells.
    * Default value: null
@@ -15156,11 +15376,51 @@ 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 unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
+  /**
+   * Sets or gets the language. Used in conjunction with the property messages. 
+   * Default value: "en"
+   */
+  locale?: string;
+  /**
+   * Keys handling. You can define a key like "Enter": "Tab" or set a function as a value. When the key is pressed, it will be mapped to the other key, action such as 'copy', 'copyPrev', 'copyNext' or 'delete' or just a function defined in your document.
+   * Default value: null
+   */
+  keys?: any;
   /**
    * Sets the messages values.
    * Default value:    * [object Object]
@@ -15181,6 +15441,21 @@ 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, which is called when a cell value is changed.
+   * Default value: null
+   */
+  onCellValueChanged?: {(id: string, dataField: string, value: any): boolean};
   /**
    * Callback function() called before the grid has been initialized and the Grid's Virtual DOM is not created.
    * Default value: null
@@ -15301,26 +15576,6 @@ export interface GridProperties {
    * Default value: null
    */
   onCommand?: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void};
-  /**
-   * Sets or gets the rows  CSS class rules. Different CSS class names are conditionally applied. Example: rowCSSRules: { 'cell-class-1': settings =&gt; settings.data.quantity === 5, 'cell-class-2': settings =&gt; settings.data.quantity &lt; 5, 'cell-class-3': settings =&gt; settings.data.quantity &gt; 5 }.  The settings object contains the following properties: index, data, row, api.
-   * Default value: null
-   */
-  rowCSSRules?: any;
-  /**
-   * Sets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.
-   * Default value: 
-   */
-  currentUser?: string | number;
-  /**
-   * Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
-   * Default value: []
-   */
-  users?: any[];
-  /**
-   * Sets the grid's image and filter upload settings for the image and attachment columns.
-   * Default value: [object Object]
-   */
-  uploadSettings?: GridUploadSettings;
   /**
    * Describes the paging settings.
    * Default value: [object Object]
@@ -15336,16 +15591,26 @@ export interface GridProperties {
    * Default value: [object Object]
    */
   rowDetail?: GridRowDetail;
+  /**
+   * Sets or gets the rows  CSS class rules. Different CSS class names are conditionally applied. Example: rowCSSRules: { 'cell-class-1': settings =&gt; settings.data.quantity === 5, 'cell-class-2': settings =&gt; settings.data.quantity &lt; 5, 'cell-class-3': settings =&gt; settings.data.quantity &gt; 5 }.  The settings object contains the following properties: index, data, row, api.
+   * Default value: null
+   */
+  rowCSSRules?: any;
+  /**
+   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * The rows property is used to describe all rows displayed in the grid.
+   * Default value: 
+   */
+  rows?: GridRow[];
   /**
    * Sets the scroll mode settings.
    * Default value: physical
    */
   scrolling?: Scrolling | string;
-  /**
-   * Describes the column header settings.
-   * Default value: [object Object]
-   */
-  columnHeader?: GridColumnHeader;
   /**
    * Describes the summary row settings.
    * Default value: [object Object]
@@ -15357,40 +15622,30 @@ export interface GridProperties {
    */
   stateSettings?: GridStateSettings;
   /**
-   * Describes the settings for the group header.
-   * Default value: [object Object]
-   */
-  groupHeader?: GridGroupHeader;
-  /**
-   * Describes the header settings of the grid.
+   * Describes the selection settings.
    * Default value: [object Object]
    */
-  header?: GridHeader;
+  selection?: GridSelection;
   /**
-   * Describes the footer settings of the grid.
+   * Describes sorting settings.
    * Default value: [object Object]
    */
-  footer?: GridFooter;
-  /**
-   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
-   * Default value: false
-   */
-  rightToLeft?: boolean;
+  sorting?: GridSorting;
   /**
-   * The rows property is used to describe all rows displayed in the grid.
-   * Default value: 
+   * Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
+   * Default value: []
    */
-  rows?: GridRow[];
+  users?: any[];
   /**
-   * Describes the selection settings.
+   * Sets the grid's image and filter upload settings for the image and attachment columns.
    * Default value: [object Object]
    */
-  selection?: GridSelection;
+  uploadSettings?: GridUploadSettings;
   /**
-   * Describes sorting settings.
-   * Default value: [object Object]
+   * Sets the current data view. The possible values are 'grid', 'kanban' and 'card'.
+   * Default value: "grid"
    */
-  sorting?: GridSorting;
+  view?: string;
 }
 /**
  Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.
@@ -15465,6 +15720,15 @@ export interface Grid extends BaseElement, GridProperties {
    *  originalEvent - The origianl Event object.
    */
   onColumnDragStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered, when a column property is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(column, propertyName, oldValue, value)
+   *  column - The resized column.
+   *  propertyName - The changed property's name.
+   *  oldValue - The old value(s) of the column.
+   *  value - The new value(s) of the column.
+   */
+  onColumnChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user drags a column.
 	* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, data, originalEvent)
@@ -15578,10 +15842,11 @@ export interface Grid extends BaseElement, GridProperties {
   onRowCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user clicks on a row of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
    *  row - The clicked row.
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
+   *  data - Gets the row data.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15589,10 +15854,11 @@ export interface Grid extends BaseElement, GridProperties {
   onRowClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user double clicks on a row of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
    *  row - The double-clicked row.
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
+   *  data - Gets the row data.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15618,11 +15884,12 @@ export interface Grid extends BaseElement, GridProperties {
   onRowStarred?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user clicks on a cell of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
    *  cell - The clicked cell.
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
    *  dataField - Gets the column dataField.
+   *  value - Gets the cell value.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15630,11 +15897,12 @@ export interface Grid extends BaseElement, GridProperties {
   onCellClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user double clicks on a cell of the grid.
-	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, isRightClick, pageX, pageY)
+	* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
    *  cell - The double-clicked cell. 
    *  originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
    *  id - Gets the row id.
    *  dataField - Gets the column dataField.
+   *  value - Gets the cell value.
    *  isRightClick - Gets whether the pointing device's right button is clicked.
    *  pageX - Gets the click's X position.
    *  pageY - Gets the click's Y position.
@@ -15882,8 +16150,10 @@ export interface Grid extends BaseElement, GridProperties {
   /**
    * Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the <em>dataExport</em> property.
    * @param {string} Dataformat. 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
+   * @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
+   * @param {any} dataCallback?. A callback that allows to change the exported data.
    */
-  exportData(Dataformat: string): void;
+  exportData(Dataformat: string, callback?: any, dataCallback?: any): void;
   /**
    * Finds entries by using a query and returns an array of row ids. Example: const rows = grid.find('nancy'); returns all rows that have 'nancy' value. Example 2: const rows = grid.find('nancy, davolio'); returns all rows that have 'nancy' and 'davolio' values in the same row. Example 3: const rows = grid.find(5, 'quantity', '>'); returns all rows where the value of the 'quantity' field is > 5. 
    * @param {string} query. Search query
@@ -15898,6 +16168,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any[]}
    */
   findCells(query: string): any[];
+  /**
+   * Filter by all columns. This method works like a global filter and applies a filter to all grid columns.
+   * @param {string} query. Filter query to filter by.
+   * @param {string} dataType?. Optionally filter by a specific data type like 'string', 'boolean', 'date', 'number'.
+   */
+  filterBy(query: string, dataType?: string): void;
   /**
    * Navigates to a page, when paging is enabled.
    * @param {number} index. page index
@@ -16020,22 +16296,6 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getState(): any;
-  /**
-   * Saves the Grid state and returns a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
-   * @param {string} name?. state name
-   * @returns {any}
-   */
-  saveState(name?: string): any;
-  /**
-   * Loads a previously saved Grid state. You can pass a state name when there is a state which was previously saved with the saveState(stateName) method call or a state object returned by the saveState or getState method calls. The state object is required to be a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
-   * @param {any} state. state name or state object
-   * @returns {any}
-   */
-  loadState(state: any): any;
-  /**
-   * Resets the Grid state.
-   */
-  resetState(): void;
   /**
    * Gets the changes from the batch edit.
    * @returns 
@@ -16132,6 +16392,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @param  callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
    */
   insertRow(data: any, index?: number, callback?: {(row: GridRow): void}): void;
+  /**
+   * Loads a previously saved Grid state. You can pass a state name when there is a state which was previously saved with the saveState(stateName) method call or a state object returned by the saveState or getState method calls. The state object is required to be a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
+   * @param {any} state. state name or state object
+   * @returns {any}
+   */
+  loadState(state: any): any;
   /**
    * Opens a column drop-down menu.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -16143,6 +16409,14 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {number} top. Top Position.
    */
   openContextMenu(left: number, top: number): void;
+  /**
+   * Opens the Grid when the 'dropDownMode' property is true.
+   */
+  openDropDown(): void;
+  /**
+   * Closes the Grid when the 'dropDownMode' property is true.
+   */
+  closeDropDown(): void;
   /**
    * Prints the Grid data. The method uses the options of the <em>dataExport</em> property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use  the <em>dataExport</em> property.
    */
@@ -16159,6 +16433,10 @@ export interface Grid extends BaseElement, GridProperties {
    * Refreshes the grid cells in view. The method is useful for live-updates of cell values.
    */
   refreshView(): void;
+  /**
+   * Resets the Grid state.
+   */
+  resetState(): void;
   /**
    * Removes a column filter. 
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -16190,6 +16468,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {boolean} insertAfter?. Determines whether to insert the first column after the reference column.
    */
   reorderColumns(dataField: string | number, referenceDataField: string | number, insertAfter?: boolean): void;
+  /**
+   * Saves the Grid state and returns a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
+   * @param {string} name?. state name
+   * @returns {any}
+   */
+  saveState(name?: string): any;
   /**
    * Sorts the Grid by a data field. This method will add or remove sorting, when sorting is enabled. To remove the sorting, use 'null' for the sortOrder parameter.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -16297,6 +16581,11 @@ export interface Grid extends BaseElement, GridProperties {
    * @param  rowStyle. The cell style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
    */
   setCellStyle(rowId: string | number, dataField: string, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
+  /**
+   * Sets the label of the Grid when the 'dropDownMode' property is true.
+   * @param {string} label. The label to be displayed in the dropdown button.
+   */
+  setDropDownLabel(label: string): void;
   /**
    * Sets the position of the vertical scrollbar. You can use this method in combination with the getVerticalScrollValue and getVerticalScrollMax.
    * @param {number} value. The new scroll position
@@ -16312,6 +16601,13 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {string | number} rowId. row bound id
    */
   showDetail(rowId: string | number): void;
+  /**
+   * Shows an overlay message below a cell. This method can be used for onboarding tips or in scenarios when you want to display custom messages to the user.
+   * @param {string | number} rowId. row bound id
+   * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
+   * @param {string} value. The message to be shown below the cell
+   */
+  showCellMessage(rowId: string | number, dataField: string, value: string): void;
   /**
    * Updates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string | number} rowId. row bound id
@@ -16627,6 +16923,11 @@ export interface GridBehavior {
    * Default value: false
    */
   allowColumnFreeze?: boolean;
+  /**
+   * Determines whether the scrolling with mouse wheel is enabled.
+   * Default value: true
+   */
+  allowMouseWheel?: boolean;
   /**
    * Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
    * Default value: none
@@ -16639,48 +16940,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.. */
@@ -16690,6 +16956,11 @@ export interface GridClipboard {
    * Default value: true
    */
   enabled?: boolean;
+  /**
+   * Sets or gets whether the copy the column headers to the clipboard.
+   * Default value: false
+   */
+  copyHeadersToClipboard?: boolean;
   /**
    * Sets or gets whether the copy-pasted values will be auto-filled by using automatic pattern detection. This is used in the Drag&Drop Multiple Cells selection. none does nothing. copy just copies the cells. 'fillSeries' detects and automatically fills the values. For example, if the selection has '1, 2' and the possible positions are more, the pasted values would be '1, 2, 3, 4, etc.
    * Default value: fillSeries
@@ -16729,10 +17000,10 @@ export interface GridColumn {
    */
   allowSelect?: boolean | null;
   /**
-   * Sets or gets whether the column can be edited.
+   * Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }
    * Default value: true
    */
-  allowEdit?: boolean;
+  allowEdit?: any;
   /**
    * Sets or gets whether the column can be sorted.
    * Default value: true
@@ -16763,6 +17034,11 @@ export interface GridColumn {
    * Default value: true
    */
   allowNull?: boolean;
+  /**
+   * Sets or gets the cell's height in card view mode.
+   * Default value: 0
+   */
+  cardHeight?: number;
   /**
    * Sets or gets the column's cells format. This property is used for applying a formatting to the cell values. Number format strings: 'd' - decimal numbers.'f' - floating-point numbers.'n' - integer numbers.'c' - currency numbers.'p' - percentage numbers.For adding decimal places to the numbers, add a number after the formatting striFor example: 'c3' displays a number in this format $25.256Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
    * Default value: ""
@@ -16823,6 +17099,11 @@ export interface GridColumn {
    * Default value: ""
    */
   description?: string;
+  /**
+   * Sets or gets custom data object related to the column.
+   * Default value: null
+   */
+  dataSet?: any;
   /**
    * Gets the HTML Element. The property returns null when the Column is not in the View.
    * Default value: null
@@ -16863,6 +17144,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: ""
@@ -16904,10 +17190,20 @@ export interface GridColumn {
    */
   rowSpan?: {(cellValue: any, rowIndex: number, data: any): number};
   /**
-   * Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
-   * Default value: null
+   * 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: ""
    */
-  sortOrder?: GridColumnSortOrder | null | string;
+  relationField?: string;
+  /**
+   * Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.
+   * Default value: none
+   */
+  sortOrder?: GridColumnSortOrder | string;
   /**
    * Sets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.
    * Default value: null
@@ -16939,10 +17235,15 @@ export interface GridColumn {
    */
   width?: string | number;
   /**
-   * Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'radioButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
+   * Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
    * Default value: 
    */
   template?: any;
+  /**
+   * Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.
+   * Default value: null
+   */
+  templateSettings?: any;
   /**
    * Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
    * Default value: null
@@ -16977,6 +17278,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]
@@ -17380,6 +17686,61 @@ export interface GridDataExport {
    * Default value: null
    */
   rowIds?: {(): void};
+  /**
+   * An array of custom rows to add before the Grid rows.
+   * Default value: null
+   */
+  headerContent?: any;
+  /**
+   * An array of custom rows to add after the Grid rows.
+   * Default value: null
+   */
+  footerContent?: any;
+  /**
+   * A function which allows you to add images to the cells in Export to Excel. The following params are passed: (index, dataField, value, values). It should return an object like this: return { image: { id: 'myImage' + index, base64: value, imageType: 'jpeg', width: 20, height: 11, position: { offsetX: 10 + (25 * values.indexOf(value)), offsetY: 5.5 } } };
+   * Default value: null
+   */
+  addImageToCell?: any;
+  /**
+   * A function which allows you to set the height of the rows in the Export to Excel. The function gets the row index as parameter and should return its height as a number.
+   * Default value: null
+   */
+  setRowHeight?: any;
+  /**
+   * A function which allows you to return additonal data to the Excel export to export into multiple sheets.
+   * Default value: null
+   */
+  getSpreadsheets?: any;
+  /**
+   * A function which allows you to export a styled data grid to Excel.
+   * Default value: true
+   */
+  exportStyles?: boolean;
+  /**
+   * A function which allows you to format cells before export. (index, dataField, value) are the params. It should return the formatted value.
+   * Default value: null
+   */
+  cellFormatFunction?: any;
+  /**
+   * Sets whether the header is frozen when Export to Excel.
+   * Default value: false
+   */
+  freezeHeader?: boolean;
+  /**
+   * Sets whether to auto-convert the formulas in the Excel export.
+   * Default value: true
+   */
+  autoConvertFormulas?: boolean;
+  /**
+   * Sets whether to export only the selected cells or rows when Export to Excel.
+   * Default value: false
+   */
+  onlySelected?: boolean;
+  /**
+   * Sets whether to export it as Excel Table when Export to Excel
+   * Default value: false
+   */
+  exportAsTable?: boolean;
 }
 
 /**Sets the grid's data source settings when the <em>dataSource</em> property is set to an Array or URL. */
@@ -17444,6 +17805,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
@@ -17491,6 +17857,11 @@ export interface GridEditing {
    * Default value: true
    */
   autoUpdateFilterAndSort?: boolean;
+  /**
+   * Automatically opens a drop-down editor not only when the arrow button is clicked, but also when you click an item from it.
+   * Default value: true
+   */
+  allowListOpenOnContentClick?: boolean;
   /**
    * Enables editing.
    * Default value: false
@@ -17506,6 +17877,11 @@ export interface GridEditing {
    * Default value: click
    */
   action?: GridEditingAction | string;
+  /**
+   * Read Only Edit is a mode in the grid whereby Cell Editing will not update the data inside the grid. Instead the grid invokes the 'onCellEditRequest' function allowing the application to process the update request.
+   * Default value: false
+   */
+  readOnlyEdit?: boolean;
   /**
    * Describes command keys.
    * Default value: [object Object]
@@ -17856,6 +18232,20 @@ export interface GridFilteringFilterBuilder {
   height?: number | null;
 }
 
+/**Describes the footer settings of the grid. */
+export interface GridFooter {
+  /**
+   * Sets the footer visibility.
+   * Default value: false
+   */
+  visible?: boolean;
+  /**
+   * Sets a template for the footer.
+   * Default value: 
+   */
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
+}
+
 /**Describes the grid's grouping settings. */
 export interface GridGrouping {
   /**
@@ -17968,38 +18358,141 @@ export interface GridGroupingSummaryRow {
   visible?: boolean;
 }
 
-/**Sets the grid's image and filter upload settings for the image and attachment columns. */
-export interface GridUploadSettings {
+/**Describes the settings for the group header. */
+export interface GridGroupHeader {
   /**
-   * Sets or file/image upload url.
-   * Default value: ""
+   * Sets the visibility of the group header.
+   * Default value: false
    */
-  url?: string;
+  visible?: boolean;
   /**
-   * Sets or file/image remove url.
-   * Default value: ""
+   * Sets a template for the group header.
+   * Default value: 
    */
-  removeUrl?: string;
+  template?: string | HTMLTemplateElement;
+}
+
+/**Describes the header settings of the grid. */
+export interface GridHeader {
   /**
-   * Sets or gets the upload field name. In the backend, you can use this name to access the images data. For example in expressJS, you can use something like that: const images = req['files']['userfile[]'];
-   * Default value: "userfile[]"
+   * Sets the header visibility.
+   * Default value: false
    */
-  name?: string;
+  visible?: boolean;
   /**
-   * Additional data to pass to the server. The format should be a JSON string.
-   * Default value: ""
+   * Sets a template for the header.
+   * Default value: 
    */
-  data?: string;
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
   /**
-   * Function called when the upload is completed. JSON object with 'files', 'status', 'fileURL' and 'serverResponse' are passed as parameters when the function is called by the Grid.
-   * Default value: 
+   * This callback function can be used for customization of the Header toolbar. The Toolbar HTML Element is passed as an argument.
+   * Default value: null
    */
-  onUploadCompleted?: any;
+  onInit?: {(element: HTMLElement): void};
   /**
-   * Function called when the upload has failed. JSON object with 'files', 'status' and 'serverResponse' are passed as parameters when the function is called by the Grid.
-   * Default value: 
+   * Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter'  displays a button opening the filtering panel.  'group' displays a button opening the grouping panel. 'sort'  displays a button opening the sorting panel. 'format'  displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel. 'colors' displays a button with colors options for formatting.
+   * Default value: [ "columns", "filter", "group", "sort", "format", "search" ]
    */
-  onUploadError?: any;
+  buttons?: string[];
+  /**
+   * Sets the search command type.
+   * Default value: search
+   */
+  searchCommand?: GridHeaderSearchCommand | string;
+  /**
+   * Custom toolbar button. Allows you to add a custom button to the toolbar.
+   * Default value: [object Object]
+   */
+  customButton?: GridCommand;
+}
+
+/**An object containing settings related to the grid's layout. */
+export interface GridLayout {
+  /**
+   * Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.
+   * Default value: false
+   */
+  allowCellsWrap?: boolean;
+  /**
+   * Automatically sets width to any new Column which does not have its 'width' property set.
+   * Default value: false
+   */
+  autoSizeNewColumn?: boolean;
+  /**
+   * Sets the min width of the new column.
+   * Default value: 250
+   */
+  autoSizeNewColumnMinWidth?: number;
+  /**
+   * Automatically sets the height of the Grid.
+   * Default value: false
+   */
+  autoHeight?: boolean;
+  /**
+   * Automatically sets the width of the Grid. All columns should have a 'width' property set to a number in order to use this feature.
+   * Default value: false
+   */
+  autoWidth?: boolean;
+  /**
+   * Sets the width of the auto-generated Grid columns.
+   * Default value: null
+   */
+  autoGenerateColumnWidth?: string | number | null;
+  /**
+   * Sets the width of the Grid columns.
+   * Default value: null
+   */
+  columnWidth?: string | number | null;
+  /**
+   * Sets the height of the Grid columns.
+   * Default value: null
+   */
+  columnHeight?: string | number | null;
+  /**
+   * Sets the minimum height of the Grid columns.
+   * Default value: 30
+   */
+  columnMinHeight?: number;
+  /**
+   * Sets the minimum width of a card in card view.
+   * Default value: 250
+   */
+  cardMinWidth?: number;
+  /**
+   * Sets the cards per row.
+   * Default value: null
+   */
+  cardsPerRow?: number;
+  /**
+   * Sets whether cards are vertically oriented. In this layout mode, the column label is displayed above the column value
+   * Default value: false
+   */
+  cardVertical?: boolean;
+  /**
+   * Sets the width of the Grid when displayed in a drop-down mode.
+   * Default value: 700
+   */
+  dropDownWidth?: number;
+  /**
+   * Sets the height of the Grid when displayed in a drop-down mode.
+   * Default value: 500
+   */
+  dropDownHeight?: number;
+  /**
+   * Sets the minimum height of the Grid rows.
+   * Default value: 30
+   */
+  rowMinHeight?: number;
+  /**
+   * Sets the height of the Grid rows. The property can be set to null, auto or a number.
+   * Default value: null
+   */
+  rowHeight?: string | number | null;
+  /**
+   * Sets the width of the view bar.
+   * Default value: 250
+   */
+  viewBarWidth?: number;
 }
 
 /**Describes the paging settings. */
@@ -18240,120 +18733,6 @@ export interface GridRowDetail {
   dialog?: Dialog;
 }
 
-/**Describes the column header settings. */
-export interface GridColumnHeader {
-  /**
-   * Sets the column header visibility.
-   * Default value: true
-   */
-  visible?: boolean;
-}
-
-/**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 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.
@@ -18610,6 +18989,59 @@ export interface GridCell {
   setStyle?: {(value: any): void};
 }
 
+/**Describes the summary row settings. */
+export interface GridSummaryRow {
+  /**
+   * Sets the summary row visibility.
+   * Default value: false
+   */
+  visible?: boolean;
+  /**
+   * Sets the summary row editor. When you point over a summary row cell, an editor is displayed and you will be able to dynamically change the summary type.
+   * Default value: false
+   */
+  editing?: boolean;
+}
+
+/**Sets the grid's state settings. */
+export interface GridStateSettings {
+  /**
+   * Enables or disables auto-save of the Grid's state
+   * Default value: false
+   */
+  autoSave?: boolean;
+  /**
+   * Enables or disables auto-load of the Grid's state on page reload.
+   * Default value: false
+   */
+  autoLoad?: boolean;
+  /**
+   * Enables or disables save/load of the grid state.
+   * Default value: true
+   */
+  enabled?: boolean;
+  /**
+   * Sets or gets the current state.
+   * Default value: ""
+   */
+  current?: string;
+  /**
+   * Container which is auto-filled with state objects when you call the saveState method or enable the autoSave of states. Each object has a key which is the state's name and value which is a json with the state's properties.
+   * Default value: null
+   */
+  storage?: any;
+  /**
+   * Function called when the state is changed.
+   * Default value: 
+   */
+  onStateChange?: any;
+  /**
+   * Array with state options such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', 'columns'. This property determines which parts of the state would be saved or loaded.
+   * Default value: 
+   */
+  options?: string[];
+}
+
 /**Describes the selection settings. */
 export interface GridSelection {
   /**
@@ -18761,6 +19193,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;
@@ -18783,8 +19249,8 @@ export declare type GridClipboardAutoFillMode = 'none' | 'copy' | 'fillSeries';
 export declare type Position = 'near' | 'far';
 /**Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed. */
 export declare type GridColumnFilterMenuMode = 'basic' | 'default' | 'excel';
-/**Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null. */
-export declare type GridColumnSortOrder = 'asc' | 'desc' | null;
+/**Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null. */
+export declare type GridColumnSortOrder = 'asc' | 'desc' | 'none';
 /**The formatting condition. */
 export declare type GridConditionalFormattingCondition = 'between' | 'equal' | 'greaterThan' | 'lessThan' | 'notEqual';
 /**Sets the page orientation, when exporting to PDF. */
@@ -18811,6 +19277,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'  */
@@ -18844,6 +19312,11 @@ export interface GroupPanelProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages.
    * Default value: "en"
@@ -18973,6 +19446,11 @@ export interface InputProperties {
    * Default value: none
    */
   dropDownButtonPosition?: DropDownButtonPosition | string;
+  /**
+   * Determines the position of the drop down when opened.
+   * Default value: auto
+   */
+  dropDownOpenPosition?: DropDownOpenPosition | string;
   /**
    * Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.
    * Default value: 
@@ -18993,6 +19471,11 @@ export interface InputProperties {
    * Default value: 8
    */
   items?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -19185,6 +19668,8 @@ declare global {
     }
 }
 
+/**Determines the position of the drop down when opened. */
+export declare type DropDownOpenPosition = 'auto' | 'top' | 'bottom';
 /**Determines the auto complete query mode. This property also determines the matching algorithm for the autocomplete operation. */
 export declare type InputQueryMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
 export interface KanbanProperties {
@@ -19238,6 +19723,11 @@ export interface KanbanProperties {
    * Default value: true
    */
   allowDrop?: boolean;
+  /**
+   * Allows the dropping of tasks placeholder. When you drag a task over another task it will make an empty space for the task.
+   * Default value: false
+   */
+  allowDropPlaceholder?: boolean;
   /**
    * This property changes the visual appeal of the Kanban columns and tasks. When set to true and the Kanban columns have their 'color' property set, the color is also applied to the tasks and edit dialog.
    * Default value: false
@@ -19348,6 +19838,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"
@@ -19368,6 +19863,11 @@ export interface KanbanProperties {
    * Default value: columns
    */
   hierarchy?: KanbanHierarchy | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages.
    * Default value: "en"
@@ -20173,6 +20673,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. */
@@ -20204,6 +20706,11 @@ export interface LayoutProperties {
    * Default value: null
    */
   dataSource?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -20502,6 +21009,11 @@ export interface LedProperties {
    * Default value: null
    */
   indeterminateTemplate?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -20753,6 +21265,11 @@ export interface ListBoxProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -20965,6 +21482,11 @@ export interface ListBox extends BaseElement, ListBoxProperties {
    * @returns {Node}
    */
   appendChild<T extends Node>(node: Node): T;
+  /**
+   * Adds a new item(s).
+   * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
+   */
+  add(item: any): void;
   /**
    * Removes all items from the listBox.
    */
@@ -20973,6 +21495,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.
@@ -21268,6 +21794,11 @@ export interface ListMenuProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -21568,6 +22099,11 @@ export interface MaskedTextBoxProperties {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -21820,6 +22356,11 @@ export interface MenuProperties {
    * Default value: "items"
    */
   itemsMember?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -22231,6 +22772,11 @@ export interface MultiColumnFilterPanelProperties {
    * Default value: "Value"
    */
   editorPlaceholder?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages.
    * Default value: "en"
@@ -22402,6 +22948,11 @@ export interface MultiComboInputProperties {
    * Default value: 8
    */
   items?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -22624,6 +23175,11 @@ export interface MultiInputProperties {
    * Default value: 8
    */
   items?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -22854,6 +23410,11 @@ export interface MultilineTextBoxProperties {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -23140,6 +23701,11 @@ export interface MultiSplitButtonProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -23341,6 +23907,11 @@ export interface NumberInputProperties {
    * Default value: "off"
    */
   inputPurpose?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -23524,6 +24095,11 @@ export interface NumericTextBoxProperties {
    * Default value: false
    */
   leadingZeros?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -23778,6 +24354,11 @@ export interface PagerProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -23962,6 +24543,11 @@ export interface PasswordInputProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -24098,6 +24684,11 @@ export interface PasswordTextBoxProperties {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -24347,6 +24938,11 @@ export interface PathProperties {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -24523,6 +25119,11 @@ export interface PhoneInputProperties {
    * Default value:    * [object Object]
    */
   messages?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
    * Default value: ""
@@ -24780,6 +25381,11 @@ export interface PivotTableProperties {
    * Default value: false
    */
   keyboardNavigation?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -25198,6 +25804,11 @@ export interface PowerButtonProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -25299,6 +25910,11 @@ export interface ProgressBarProperties {
    * Default value: null
    */
   formatFunction?: {(value: number): string};
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -25612,6 +26228,11 @@ export interface QueryBuilderProperties {
    * Default value: { '=': 'equals', '<>': 'notequals', '>': 'greaterthan', '>=': 'greaterthanorequal', '<': 'lessthan', '<=': 'lessthanorequal', 'startswith': 'startswith', 'endswith': 'endswith', 'contains': 'contains', 'notcontains': 'notcontains', 'isblank': 'isblank', 'isnotblank': 'isnotblank' }
    */
   icons?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -25931,6 +26552,11 @@ export interface RadioButtonProperties {
    * Default value: """"
    */
   innerHTML: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -26038,6 +26664,11 @@ export interface RatingProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -26162,6 +26793,11 @@ export interface RepeatButtonProperties {
    * Default value: """"
    */
   innerHTML: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -26237,6 +26873,433 @@ declare global {
     }
 }
 
+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;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
+  /**
+   * Determines the locale of the ribbon.
+   * Default value: "en"
+   */
+  locale?: string;
+  /**
+   * Determines the messages of the ribbon
+   * Default value:    * [object Object]
+   */
+  messages?: any;
+  /**
+   * Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
+   * Default value: false
+   */
+  rightToLeft?: boolean;
+  /**
+   * Determines the selected tab.
+   * Default value: 0
+   */
+  selectedTab?: any;
+}
+/**
+ Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
+*/
+export interface Ribbon extends BaseElement, RibbonProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * This event is triggered when the ribbon is collapsed.
+	* @param event. The custom event.    */
+  onCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ribbon is collapsing. The event can be canceled by calling event.preventDefault() in the event handler function.
+	* @param event. The custom event.    */
+  onCollapsing?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the dialog launcher is clicked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(groupLabel, groupId)
+   *  groupLabel - The label of the dialog launcher's ribbon group.
+   *  groupId - The id of the dialog launcher's ribbon group.
+   */
+  onDialogLauncherClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ribbon is expanded.
+	* @param event. The custom event.    */
+  onExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the ribbon is expanding. The event can be canceled by calling event.preventDefault() in the event handler function.
+	* @param event. The custom event.    */
+  onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the file menu button is clicked.
+	* @param event. The custom event.    */
+  onFileButtonClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the file menu is opened.
+	* @param event. The custom event.    */
+  onFileMenuOpen?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the file menu is closed.
+	* @param event. The custom event.    */
+  onFileMenuClose?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when a file menu item is clicked.
+	* @param event. The custom event. Custom data event was created with: ev.detail(item)
+   *  item - The file menu item.
+   */
+  onFileMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the tab selection is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index)
+   *  oldIndex - The previous tab index.
+   *  index - The new index of the selected tab.
+   */
+  onSelect?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when the tab selection is changing. The event can be canceled by calling event.preventDefault() in the event handler function.
+	* @param event. The custom event. Custom data event was created with: ev.detail(oldIndex, index)
+   *  oldIndex - The previous tab index.
+   *  index - The new index of the selected tab.
+   */
+  onSelecting?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * Adds a new ribbon tab to the ribbon. The tab can be added as an object, HTMLElement or id to an HTMLElement.
+   * @param {any} tab. The ribbon tab to be added.
+   */
+  addTab(tab: any): void;
+  /**
+   * Adds a new group to a ribbon tab. The group can be added as an object, HTMLElement or id to an HTMLElement.
+   * @param {any} tab. The id, index or HTMLElement  of the parent ribbon tab.
+   * @param {any} group. The ribbon group to be added.
+   */
+  addGroup(tab: any, group: any): void;
+  /**
+   * Adds a new ribbon item to a ribbon group. The item can be added as an object, HTMLElement or id to an HTMLElement.
+   * @param {string | number | HTMLElement} tab. The id, index or HTMLElement  of the parent ribbon tab.
+   * @param {string | HTMLElement} group. The id or HTMLElement of the parent ribbon group.
+   * @param {any} item. The ribbon item to be added.
+   */
+  addItem(tab: string | number | HTMLElement, group: string | HTMLElement, item: any): void;
+  /**
+   * Collapses the ribbon.
+   */
+  collapse(): void;
+  /**
+   * Expands the ribbon.
+   */
+  expand(): void;
+  /**
+   * Removes a ribbon tab from the ribbon.
+   * @param {string | number} ribbonTab. The id or index of the ribbon tab to be removed.
+   */
+  removeTab(ribbonTab: string | number): void;
+  /**
+   * Removes a ribbon group from a ribbon tab.
+   * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
+   * @param {string | number} ribbonGroup?. The id or index of the ribbon group to be removed.
+   */
+  removeGroup(ribbonTabIndex?: string | number, ribbonGroup?: string | number): void;
+  /**
+   * Removes a ribbon item from a ribbon group.
+   * @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
+   * @param {string | number} ribbonGroup?. The id or index of the parent ribbon group.
+   * @param {string | number} ribbonItem?. The id or index of the ribbon item to be removed.
+   */
+  removeItem(ribbonTabIndex?: string | number, ribbonGroup?: string | number, ribbonItem?: string | number): void;
+  /**
+   * Selects a ribbon tab.
+   * @param {string | number} ribbonTabIndex. The index of the ribbon tab to be selected.
+   */
+  selectTab(ribbonTabIndex: string | number): void;
+}
+
+/**Determines the file menu options of the ribbon. */
+export interface RibbonFileMenu {
+  /**
+   * Determines whether the file button is enabled.
+   * Default value: true
+   */
+  enabled?: boolean;
+  /**
+   * Determines the data source that will be loaded to the FileMenu.
+   * Default value: 
+   */
+  items?: any;
+  /**
+   * Determines the position of the file menu.
+   * Default value: left
+   */
+  position?: RibbonFileMenuPosition | string;
+  /**
+   * Determines the label of the file menu.
+   * Default value: "File"
+   */
+  label?: string;
+  /**
+   * Determines the tooltip of the file menu.
+   * Default value: ""
+   */
+  tooltip?: string;
+  /**
+   * Determines the template of the file menu. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
+   * Default value: ""
+   */
+  template?: string;
+  /**
+   * Determines the type of the file menu.
+   * Default value: dropDown
+   */
+  type?: RibbonFileMenuType | string;
+  /**
+   * Determines the icon of the file menu.
+   * Default value: ""
+   */
+  icon?: string;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-ribbon"): Ribbon;
+        querySelector(selectors: "smart-ribbon"): Ribbon | null;
+        querySelectorAll(selectors: "smart-ribbon"): NodeListOf<Ribbon>;
+        getElementsByTagName(qualifiedName: "smart-ribbon"): HTMLCollectionOf<Ribbon>;
+        getElementsByName(elementName: "smart-ribbon"): NodeListOf<Ribbon>;
+    }
+}
+
+/**Determines the position of the file menu. */
+export declare type RibbonFileMenuPosition = 'left' | 'right';
+/**Determines the type of the file menu. */
+export declare type RibbonFileMenuType = 'dropDown' | 'button';
+export interface RibbonGroupProperties {
+  /**
+   * Determines the label of the ribbon group.
+   * Default value: ""
+   */
+  label?: string;
+  /**
+   * Determines the icon of the ribbon group.
+   * Default value: ""
+   */
+  icon?: string;
+  /**
+   * Determines the class of the ribbon group.
+   * Default value: ""
+   */
+  cssClass?: string;
+  /**
+   * Determines the ribbon items of the ribbon group.
+   * Default value: 
+   */
+  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;
+}
+/**
+ Defines a ribbon group.
+*/
+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 {
+  /**
+   * Determines whether the dialog launcher is enabled.
+   * Default value: false
+   */
+  enabled?: boolean;
+  /**
+   * Determines the tooltip of the dialog launcher.
+   * Default value: ""
+   */
+  tooltip?: string;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-ribbon-group"): RibbonGroup;
+        querySelector(selectors: "smart-ribbon-group"): RibbonGroup | null;
+        querySelectorAll(selectors: "smart-ribbon-group"): NodeListOf<RibbonGroup>;
+        getElementsByTagName(qualifiedName: "smart-ribbon-group"): HTMLCollectionOf<RibbonGroup>;
+        getElementsByName(elementName: "smart-ribbon-group"): NodeListOf<RibbonGroup>;
+    }
+}
+
+/**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 {
+  /**
+   * Determines whether the ribbon item is disabled.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Determines the label of the ribbon item.
+   * Default value: ""
+   */
+  label?: string;
+  /**
+   * Determines the type of the ribbon item.
+   * Default value: button
+   */
+  type?: RibbonItemType | string;
+  /**
+   * Determines the template of the ribbon item. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
+   * Default value: ""
+   */
+  template?: string;
+  /**
+   * Determines the size of the ribbon item.
+   * Default value: normal
+   */
+  size?: RibbonItemSize | string;
+  /**
+   * 
+   * Default value: null
+   */
+  sizeChanged?: any;
+  /**
+   * Determines the allowed sizes of the ribbon item.
+   * Default value: 
+   */
+  allowedSizes?: any;
+  /**
+   * 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
+   */
+  onItemClick?: any;
+  /**
+   * Sets a change event handler for the ribbon item.
+   * Default value: null
+   */
+  onItemChange?: any;
+  /**
+   * Determines the tooltip of the ribbon item.
+   * Default value: ""
+   */
+  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 {
+  /**
+   * Determines whether the tab item is disabled.
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Determines the label of the tab item.
+   * Default value: ""
+   */
+  label?: string;
+  /**
+   * Determines whether the tab item is selected.
+   * Default value: false
+   */
+  selected?: boolean;
+  /**
+   * Determines the ribbon group of the tab item
+   * Default value: undefined
+   */
+  ribbonGroups?: any;
+}
+/**
+ Defines a ribbon tab.
+*/
+export interface RibbonTab extends BaseElement, RibbonTabProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-ribbon-tab"): RibbonTab;
+        querySelector(selectors: "smart-ribbon-tab"): RibbonTab | null;
+        querySelectorAll(selectors: "smart-ribbon-tab"): NodeListOf<RibbonTab>;
+        getElementsByTagName(qualifiedName: "smart-ribbon-tab"): HTMLCollectionOf<RibbonTab>;
+        getElementsByName(elementName: "smart-ribbon-tab"): NodeListOf<RibbonTab>;
+    }
+}
+
 export interface SchedulerProperties {
   /**
    * Determines the scroll speed while dragging an event. 
@@ -26543,6 +27606,11 @@ export interface SchedulerProperties {
    * Default value: auto
    */
   horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    *  Determines the language of the Scheduler. 
    * Default value: "en"
@@ -27090,9 +28158,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}
@@ -27602,6 +28671,11 @@ export interface ScrollBarProperties {
    * Default value: 100
    */
   largeStep?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -27777,6 +28851,11 @@ export interface SliderProperties {
    * Default value: all
    */
   labelsVisibility?: LabelsVisibility | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -28031,6 +29110,11 @@ export interface SortableProperties {
    * Default value: null
    */
   items?: string | null;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages.
    * Default value: "en"
@@ -28131,6 +29215,11 @@ export interface SortPanelProperties {
    * Default value: false
    */
   disabled?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages.
    * Default value: "en"
@@ -28245,6 +29334,11 @@ export interface SplitterProperties {
    * Default value: false
    */
   keepProportionsOnResize?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -28600,6 +29694,11 @@ export interface SwitchButtonProperties {
    * Default value: false
    */
   inverted?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -29108,6 +30207,11 @@ export interface TableProperties {
    * Default value: implementationOnly
    */
   loadColumnStateBehavior?: TableLoadColumnStateBehavior | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -29202,7 +30306,7 @@ export interface TableProperties {
    * Sets or gets the page size (when paging is enabled).
    * Default value: 10
    */
-  pageSize?: TablePageSize | string;
+  pageSize?: number;
   /**
    * Sets or gets the current (zero-based) page index (when paging is enabled).
    * Default value: 0
@@ -29223,6 +30327,11 @@ export interface TableProperties {
    * Default value: "null"
    */
   rowDetailTemplate?: string;
+  /**
+   * Sets or gets a callback function with 3 arguments - column, filterConditions, filterInputTemplateString. The function should return the new filter input.
+   * Default value: null
+   */
+  onFilterRowInput?: any;
   /**
    * Sets or gets an array of the Table's selected row's ids.
    * Default value: 
@@ -29940,8 +31049,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. */
@@ -29997,6 +31104,11 @@ export interface TabsProperties {
    * Default value: false
    */
   enableMouseWheelAction?: boolean;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -30300,6 +31412,11 @@ export interface TankProperties {
    * Default value: all
    */
   labelsVisibility?: LabelsVisibility | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -30549,6 +31666,11 @@ export interface TextAreaProperties {
    * Default value: 8
    */
   items?: number;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -30621,6 +31743,11 @@ export interface TextAreaProperties {
    * Default value: false
    */
   rightToLeft?: boolean;
+  /**
+   * Enables or disables the rich text formatting.
+   * Default value: false
+   */
+  richText?: boolean;
   /**
    * Determines whether the items are sorted alphabetically or not
    * Default value: false
@@ -30888,6 +32015,11 @@ export interface TextBoxProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -31075,6 +32207,11 @@ export interface TimeInputProperties {
    * Default value: "off"
    */
   inputPurpose?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -31214,6 +32351,62 @@ declare global {
 export declare type TimeFormatHour = 'numeric' | '2-digit';
 /**Minute format. */
 export declare type TimeFormatMinute = 'numeric' | '2-digit';
+export interface TimelineProperties {
+  /**
+   * Sets or gets whether the Timeline is with auto width in horizontal mode. 
+   * Default value: false
+   */
+  autoWidth?: boolean;
+  /**
+   * Sets or gets whether the items can be collapsed. 
+   * Default value: true
+   */
+  collapsible?: boolean;
+  /**
+   * Sets or gets whether the Timeline is disabled. 
+   * Default value: false
+   */
+  disabled?: boolean;
+  /**
+   * Sets or gets whether the Timeline is horizontal. 
+   * Default value: false
+   */
+  horizontal?: boolean;
+  /**
+   * Sets or gets position. The possible values are 'near', 'far' and 'both'.
+   * Default value: "both"
+   */
+  position?: string;
+  /**
+   * Sets or gets the items.  Each item should be an object. The object has the following properties: date: date, description: string, subtitle: string, css: string, dotCSS: string, title: string and icon: string. Example: [{ date: 'May 15, 2024', description: 'Flight: Reserving airline tickets', subtitle: 'May 15, 2024', title: 'Flight Reservation', icon: 'material-icons flight', dotCSS: '' }]
+   * Default value: []
+   */
+  dataSource?: any[];
+}
+/**
+ Displays a timeline with events.
+*/
+export interface Timeline extends BaseElement, TimelineProperties {
+
+  /* Get a member by its name */
+  [name: string]: any;
+  /**
+   * Re-renders the timeline.
+   * @returns {any}
+   */
+  render(): any;
+}
+
+declare global {
+    interface Document {
+        createElement(tagName: "smart-timeline"): Timeline;
+        querySelector(selectors: "smart-timeline"): Timeline | null;
+        querySelectorAll(selectors: "smart-timeline"): NodeListOf<Timeline>;
+        getElementsByTagName(qualifiedName: "smart-timeline"): HTMLCollectionOf<Timeline>;
+        getElementsByName(elementName: "smart-timeline"): NodeListOf<Timeline>;
+    }
+}
+
 export interface TimePickerProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -31245,6 +32438,11 @@ export interface TimePickerProperties {
    * Default value: 12-hour
    */
   format?: TimePickerFormat | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -31403,6 +32601,11 @@ export interface ToastProperties {
    * Default value: "null"
    */
   itemTemplate?: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -31572,6 +32775,11 @@ export interface ToggleButtonProperties {
    * Default value: """"
    */
   innerHTML: string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -31699,6 +32907,11 @@ export interface TooltipProperties {
    * Default value: 0,0
    */
   offset?: number[];
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"
@@ -31944,6 +33157,11 @@ export interface TreeProperties {
    * Default value: center
    */
   loadingIndicatorPosition?: VerticalAlignment | string;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the locale. Used in conjunction with the property messages.
    * Default value: "en"
@@ -32149,6 +33367,12 @@ export interface Tree extends BaseElement, TreeProperties {
    *  children - the children of the jqx-tree-items-group to be expanded
    */
   onExpanding?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when selection in jqx-tree is changed.
+	* @param event. The custom event. Custom data event was created with: ev.detail(value)
+   *  value - The filter input value.
+   */
+  onFilterChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered when the Tree has been scrolled to the bottom.
 	* @param event. The custom event.    */
@@ -32225,6 +33449,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[]}
@@ -32676,6 +33905,11 @@ export interface WindowProperties {
    * Default value: null
    */
   layout?: any;
+  /**
+   * Sets or gets the unlockKey which unlocks the product.
+   * Default value: ""
+   */
+  unlockKey?: string;
   /**
    * Sets or gets the language. Used in conjunction with the property messages. 
    * Default value: "en"