@sme.up/ketchup 6.0.0 → 6.2.0

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip
 import { FChipType } from "./f-components/f-chip/f-chip-declarations";
 import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations";
 import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
+import { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations";
 import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
 import { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations";
 import { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations";
@@ -31,11 +32,12 @@ import { KupDropdownButtonEventPayload } from "./components/kup-dropdown-button/
 import { KupEchartClickEventPayload, KupEchartLegendPlacement, KupEchartMaps, KupEchartTitle, KupEchartTypes } from "./components/kup-echart/kup-echart-declarations";
 import { GeoJSON } from "geojson";
 import { XAXisComponentOption, YAXisComponentOption } from "echarts";
-import { KupFieldChangeEvent, KupFieldSubmitEvent } from "./components/kup-field/kup-field-declarations";
-import { KupForm, KupFormEditorEventPayload } from "./components/kup-form-editor/kup-form-editor-declarations";
+import { KupFamilyTreeData, KupFamilyTreeEventPayload } from "./components/kup-family-tree/kup-family-tree-declarations";
+import { KupFormData, KupFormLayout } from "./components/kup-form/kup-form-declarations";
 import { KupBadge } from "./components/kup-badge/kup-badge";
 import { FImageData } from "./f-components/f-image/f-image-declarations";
 import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
+import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
 import { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
 import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
@@ -47,7 +49,6 @@ import { KupSwitchEventPayload } from "./components/kup-switch/kup-switch-declar
 import { KupTabBarEventPayload, KupTabBarNode } from "./components/kup-tab-bar/kup-tab-bar-declarations";
 import { KupTextFieldEventPayload } from "./components/kup-text-field/kup-text-field-declarations";
 import { KupTimePickerEventPayload } from "./components/kup-time-picker/kup-time-picker-declarations";
-import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
 export namespace Components {
     interface KupAccordion {
         /**
@@ -989,6 +990,39 @@ export namespace Components {
         "textColor": Array<any>;
         "valueColor": Array<any>;
     }
+    interface KupDashboard {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle": string;
+        /**
+          * The data of the component.
+          * @default null
+         */
+        "data": KupDataDashboard;
+        /**
+          * Enable drag & drop of the section.
+          * @default false
+         */
+        "enableDesign": boolean;
+        /**
+          * Used to retrieve component's props values.
+          * @param descriptions - When provided and true, the result will be the list of props with their description.
+          * @returns List of props as object, each key will be a prop.
+         */
+        "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * This method is used to trigger a new render of the component.
+         */
+        "refresh": () => Promise<void>;
+        /**
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
+         */
+        "setProps": (props: GenericObject) => Promise<void>;
+    }
     interface KupDataTable {
         /**
           * When true and when a row is missing some columns, the missing cells will be autogenerated.
@@ -1536,7 +1570,17 @@ export namespace Components {
          */
         "yAxis": YAXisComponentOption;
     }
-    interface KupField {
+    interface KupFamilyTree {
+        /**
+          * The component's initial render will fit the container.
+          * @default true
+         */
+        "autofit": boolean;
+        /**
+          * Nodes can be expanded/collapsed.
+          * @default true
+         */
+        "collapsible": boolean;
         /**
           * Custom style of the component.
           * @default ""
@@ -1544,16 +1588,10 @@ export namespace Components {
          */
         "customStyle": string;
         /**
-          * Effective data to pass to the component.
-          * @default {}
-         */
-        "data": Object;
-        /**
-          * Provides an interface to get the current value programmatically
-          * @method getCurrentValue
-          * @returns
+          * Actual data of the component.
+          * @default null
          */
-        "getCurrentValue": () => Promise<string | object>;
+        "data": KupFamilyTreeData;
         /**
           * Used to retrieve component's props values.
           * @param descriptions - When provided and true, the result will be the list of props with their description.
@@ -1561,41 +1599,21 @@ export namespace Components {
          */
         "getProps": (descriptions?: boolean) => Promise<GenericObject>;
         /**
-          * The text of the label. If set to empty or has only white space chars, the label will be removed.
-          * @default ""
-         */
-        "label": string;
-        /**
-          * Sets the label's position, left right or top.
-          * @default "left"
+          * Layout of the boxes.
+          * @default null
          */
-        "labelPos": string;
+        "layout": KupBoxLayout;
         /**
           * This method is used to trigger a new render of the component.
          */
         "refresh": () => Promise<void>;
         /**
-          * Sets whether the submit button must be displayed or not.
-          * @default false
-         */
-        "showSubmit": boolean;
-        /**
-          * Sets the submit button's label.
-          * @default ""
-         */
-        "submitLabel": string;
-        /**
-          * Sets the submit button's position, top right bottom or left.
-          * @default "right"
-         */
-        "submitPos": string;
-        /**
-          * The type of the FLD
-          * @default undefined
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
          */
-        "type": string;
+        "setProps": (props: GenericObject) => Promise<void>;
     }
-    interface KupFormEditor {
+    interface KupForm {
         /**
           * Custom style of the component.
           * @default ""
@@ -1603,20 +1621,31 @@ export namespace Components {
          */
         "customStyle": string;
         /**
-          * The data of the component.
-          * @default false
+          * Actual data of the form.
+          * @default null
          */
-        "data": KupForm;
+        "data": KupFormData;
         /**
           * Used to retrieve component's props values.
           * @param descriptions - When provided and true, the result will be the list of props with their description.
           * @returns List of props as object, each key will be a prop.
          */
         "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * How the form will arrange its content.
+          * @default null
+         */
+        "layout": KupFormLayout;
         /**
           * This method is used to trigger a new render of the component.
          */
         "refresh": () => Promise<void>;
+        /**
+          * Sets the focus on an editable table cell.
+          * @param column - Name of the column.
+          * @param rowId - Id of the row.
+         */
+        "setFocus": (column: string, rowId: string) => Promise<void>;
         /**
           * Sets the props to the component.
           * @param props - Object containing props that will be set to the component.
@@ -1874,11 +1903,17 @@ export namespace Components {
           * @default true
          */
         "ripple": boolean;
+        /**
+          * An array of integers containing the path to a selected child.\
+         */
+        "selectedNode": TreeNodePath;
         /**
           * Sets the props to the component.
           * @param props - Object containing props that will be set to the component.
          */
         "setProps": (props: GenericObject) => Promise<void>;
+        "stateId": string;
+        "store": KupStore;
     }
     interface KupLazy {
         /**
@@ -2668,6 +2703,11 @@ export namespace Components {
           * @default null
          */
         "min": number;
+        /**
+          * The HTML name attribute used for form autocomplete.
+          * @default null
+         */
+        "name": string;
         /**
           * When set to true, the component will be rendered as an outlined field.
           * @default false
@@ -2952,6 +2992,162 @@ export namespace Components {
         "useDynamicExpansion": boolean;
     }
 }
+export interface KupAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupAccordionElement;
+}
+export interface KupAutocompleteCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupAutocompleteElement;
+}
+export interface KupBadgeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupBadgeElement;
+}
+export interface KupBoxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupBoxElement;
+}
+export interface KupButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupButtonElement;
+}
+export interface KupButtonListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupButtonListElement;
+}
+export interface KupCalendarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupCalendarElement;
+}
+export interface KupCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupCardElement;
+}
+export interface KupChartCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupChartElement;
+}
+export interface KupCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupCheckboxElement;
+}
+export interface KupChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupChipElement;
+}
+export interface KupColorPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupColorPickerElement;
+}
+export interface KupComboboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupComboboxElement;
+}
+export interface KupDashCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDashElement;
+}
+export interface KupDashListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDashListElement;
+}
+export interface KupDashboardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDashboardElement;
+}
+export interface KupDataTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDataTableElement;
+}
+export interface KupDatePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDatePickerElement;
+}
+export interface KupDrawerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDrawerElement;
+}
+export interface KupDropdownButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDropdownButtonElement;
+}
+export interface KupEchartCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupEchartElement;
+}
+export interface KupFamilyTreeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupFamilyTreeElement;
+}
+export interface KupIframeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupIframeElement;
+}
+export interface KupImageCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupImageElement;
+}
+export interface KupImageListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupImageListElement;
+}
+export interface KupLazyCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupLazyElement;
+}
+export interface KupListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupListElement;
+}
+export interface KupNavBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupNavBarElement;
+}
+export interface KupNumericPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupNumericPickerElement;
+}
+export interface KupPhotoFrameCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupPhotoFrameElement;
+}
+export interface KupRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupRadioElement;
+}
+export interface KupRatingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupRatingElement;
+}
+export interface KupSnackbarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupSnackbarElement;
+}
+export interface KupSpinnerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupSpinnerElement;
+}
+export interface KupSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupSwitchElement;
+}
+export interface KupTabBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupTabBarElement;
+}
+export interface KupTextFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupTextFieldElement;
+}
+export interface KupTimePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupTimePickerElement;
+}
+export interface KupTreeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupTreeElement;
+}
 declare global {
     interface HTMLKupAccordionElement extends Components.KupAccordion, HTMLStencilElement {
     }
@@ -3049,6 +3245,12 @@ declare global {
         prototype: HTMLKupDashListElement;
         new (): HTMLKupDashListElement;
     };
+    interface HTMLKupDashboardElement extends Components.KupDashboard, HTMLStencilElement {
+    }
+    var HTMLKupDashboardElement: {
+        prototype: HTMLKupDashboardElement;
+        new (): HTMLKupDashboardElement;
+    };
     interface HTMLKupDataTableElement extends Components.KupDataTable, HTMLStencilElement {
     }
     var HTMLKupDataTableElement: {
@@ -3079,17 +3281,17 @@ declare global {
         prototype: HTMLKupEchartElement;
         new (): HTMLKupEchartElement;
     };
-    interface HTMLKupFieldElement extends Components.KupField, HTMLStencilElement {
+    interface HTMLKupFamilyTreeElement extends Components.KupFamilyTree, HTMLStencilElement {
     }
-    var HTMLKupFieldElement: {
-        prototype: HTMLKupFieldElement;
-        new (): HTMLKupFieldElement;
+    var HTMLKupFamilyTreeElement: {
+        prototype: HTMLKupFamilyTreeElement;
+        new (): HTMLKupFamilyTreeElement;
     };
-    interface HTMLKupFormEditorElement extends Components.KupFormEditor, HTMLStencilElement {
+    interface HTMLKupFormElement extends Components.KupForm, HTMLStencilElement {
     }
-    var HTMLKupFormEditorElement: {
-        prototype: HTMLKupFormEditorElement;
-        new (): HTMLKupFormEditorElement;
+    var HTMLKupFormElement: {
+        prototype: HTMLKupFormElement;
+        new (): HTMLKupFormElement;
     };
     interface HTMLKupGaugeElement extends Components.KupGauge, HTMLStencilElement {
     }
@@ -3246,13 +3448,14 @@ declare global {
         "kup-combobox": HTMLKupComboboxElement;
         "kup-dash": HTMLKupDashElement;
         "kup-dash-list": HTMLKupDashListElement;
+        "kup-dashboard": HTMLKupDashboardElement;
         "kup-data-table": HTMLKupDataTableElement;
         "kup-date-picker": HTMLKupDatePickerElement;
         "kup-drawer": HTMLKupDrawerElement;
         "kup-dropdown-button": HTMLKupDropdownButtonElement;
         "kup-echart": HTMLKupEchartElement;
-        "kup-field": HTMLKupFieldElement;
-        "kup-form-editor": HTMLKupFormEditorElement;
+        "kup-family-tree": HTMLKupFamilyTreeElement;
+        "kup-form": HTMLKupFormElement;
         "kup-gauge": HTMLKupGaugeElement;
         "kup-grid": HTMLKupGridElement;
         "kup-iframe": HTMLKupIframeElement;
@@ -3294,7 +3497,7 @@ declare namespace LocalJSX {
         /**
           * Fired when an item is selected.
          */
-        "onKup-accordion-itemselected"?: (event: CustomEvent<KupAccordionItemSelectedEventPayload>) => void;
+        "onKup-accordion-itemselected"?: (event: KupAccordionCustomEvent<KupAccordionItemSelectedEventPayload>) => void;
         /**
           * When enabled displays Material's ripple effect on item headers.
           * @default true
@@ -3343,13 +3546,13 @@ declare namespace LocalJSX {
           * @default 1
          */
         "minimumChars"?: number;
-        "onKup-autocomplete-blur"?: (event: CustomEvent<KupAutocompleteEventPayload>) => void;
-        "onKup-autocomplete-change"?: (event: CustomEvent<KupAutocompleteEventPayload>) => void;
-        "onKup-autocomplete-click"?: (event: CustomEvent<KupAutocompleteEventPayload>) => void;
-        "onKup-autocomplete-focus"?: (event: CustomEvent<KupAutocompleteEventPayload>) => void;
-        "onKup-autocomplete-iconclick"?: (event: CustomEvent<KupAutocompleteIconClickEventPayload>) => void;
-        "onKup-autocomplete-input"?: (event: CustomEvent<KupAutocompleteEventPayload>) => void;
-        "onKup-autocomplete-itemclick"?: (event: CustomEvent<KupAutocompleteEventPayload>) => void;
+        "onKup-autocomplete-blur"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
+        "onKup-autocomplete-change"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
+        "onKup-autocomplete-click"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
+        "onKup-autocomplete-focus"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
+        "onKup-autocomplete-iconclick"?: (event: KupAutocompleteCustomEvent<KupAutocompleteIconClickEventPayload>) => void;
+        "onKup-autocomplete-input"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
+        "onKup-autocomplete-itemclick"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
         /**
           * Sets how to return the selected item value. Suported values: "code", "description", "both".
           * @default ItemsDisplayMode.CODE
@@ -3378,7 +3581,7 @@ declare namespace LocalJSX {
           * @default null
          */
         "imageData"?: GenericObject;
-        "onKup-badge-click"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-badge-click"?: (event: KupBadgeCustomEvent<KupEventPayload>) => void;
         /**
           * The text displayed inside the badge.
           * @default null
@@ -3460,32 +3663,32 @@ declare namespace LocalJSX {
         /**
           * Triggered when a box is auto selected via selectBox prop
          */
-        "onKup-box-autoselect"?: (event: CustomEvent<KupBoxAutoSelectEventPayload>) => void;
+        "onKup-box-autoselect"?: (event: KupBoxCustomEvent<KupBoxAutoSelectEventPayload>) => void;
         /**
           * Triggered when a box is clicked
          */
-        "onKup-box-click"?: (event: CustomEvent<KupBoxClickEventPayload>) => void;
+        "onKup-box-click"?: (event: KupBoxCustomEvent<KupBoxClickEventPayload>) => void;
         /**
           * Generic right click event on box.
          */
-        "onKup-box-contextmenu"?: (event: CustomEvent<KupBoxContextMenuEventPayload>) => void;
-        "onKup-box-didload"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-box-contextmenu"?: (event: KupBoxCustomEvent<KupBoxContextMenuEventPayload>) => void;
+        "onKup-box-didload"?: (event: KupBoxCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when stop propagation event
          */
-        "onKup-box-didunload"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-box-didunload"?: (event: KupBoxCustomEvent<KupEventPayload>) => void;
         /**
           * When the row menu action icon is click
          */
-        "onKup-box-rowactionclick"?: (event: CustomEvent<KupBoxRowActionClickEventPayload>) => void;
+        "onKup-box-rowactionclick"?: (event: KupBoxCustomEvent<KupBoxRowActionClickEventPayload>) => void;
         /**
           * When the row menu action icon is click
          */
-        "onKup-box-rowactionmenuclick"?: (event: CustomEvent<KupBoxAutoSelectEventPayload>) => void;
+        "onKup-box-rowactionmenuclick"?: (event: KupBoxCustomEvent<KupBoxAutoSelectEventPayload>) => void;
         /**
           * Triggered when the multi selection checkbox changes value
          */
-        "onKup-box-selected"?: (event: CustomEvent<KupBoxSelectedEventPayload>) => void;
+        "onKup-box-selected"?: (event: KupBoxCustomEvent<KupBoxSelectedEventPayload>) => void;
         /**
           * Current page number
           * @default 1
@@ -3579,15 +3782,15 @@ declare namespace LocalJSX {
         /**
           * Triggered when the button loses focus.
          */
-        "onKup-button-blur"?: (event: CustomEvent<KupButtonClickEventPayload>) => void;
+        "onKup-button-blur"?: (event: KupButtonCustomEvent<KupButtonClickEventPayload>) => void;
         /**
           * Triggered when the button is clicked.
          */
-        "onKup-button-click"?: (event: CustomEvent<KupButtonClickEventPayload>) => void;
+        "onKup-button-click"?: (event: KupButtonCustomEvent<KupButtonClickEventPayload>) => void;
         /**
           * Triggered when the button is focused.
          */
-        "onKup-button-focus"?: (event: CustomEvent<KupButtonClickEventPayload>) => void;
+        "onKup-button-focus"?: (event: KupButtonCustomEvent<KupButtonClickEventPayload>) => void;
         /**
           * When set to true, the button show a spinner received in slot.
           * @default false
@@ -3631,7 +3834,7 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
-        "onKup-buttonlist-click"?: (event: CustomEvent<KupButtonListClickEventPayload>) => void;
+        "onKup-buttonlist-click"?: (event: KupButtonListCustomEvent<KupButtonListClickEventPayload>) => void;
         /**
           * When set to true, highlights the selected button with the secondary color of KupTheme.
           * @default true
@@ -3668,19 +3871,19 @@ declare namespace LocalJSX {
         /**
           * When a date is clicked.
          */
-        "onKup-calendar-dateclick"?: (event: CustomEvent<KupCalendarDateClickEventPayload>) => void;
+        "onKup-calendar-dateclick"?: (event: KupCalendarCustomEvent<KupCalendarDateClickEventPayload>) => void;
         /**
           * When an event is clicked.
          */
-        "onKup-calendar-eventclick"?: (event: CustomEvent<KupCalendarEventClickEventPayload>) => void;
+        "onKup-calendar-eventclick"?: (event: KupCalendarCustomEvent<KupCalendarEventClickEventPayload>) => void;
         /**
           * When a date is dropped.
          */
-        "onKup-calendar-eventdrop"?: (event: CustomEvent<KupCalendarEventDropEventPayload>) => void;
+        "onKup-calendar-eventdrop"?: (event: KupCalendarCustomEvent<KupCalendarEventDropEventPayload>) => void;
         /**
           * When the navigation change
          */
-        "onKup-calendar-viewchange"?: (event: CustomEvent<KupCalendarViewChangeEventPayload>) => void;
+        "onKup-calendar-viewchange"?: (event: KupCalendarCustomEvent<KupCalendarViewChangeEventPayload>) => void;
         /**
           * Type of the view.
           * @default KupCalendarViewTypes.MONTH
@@ -3722,19 +3925,19 @@ declare namespace LocalJSX {
         /**
           * Triggered when the card is clicked.
          */
-        "onKup-card-click"?: (event: CustomEvent<KupCardClickPayload>) => void;
+        "onKup-card-click"?: (event: KupCardCustomEvent<KupCardClickPayload>) => void;
         /**
           * Triggered when a dialog card is closed with the "X".
          */
-        "onKup-card-close"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-card-close"?: (event: KupCardCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when a sub-component of the card emits an event.
          */
-        "onKup-card-event"?: (event: CustomEvent<KupCardEventPayload>) => void;
+        "onKup-card-event"?: (event: KupCardCustomEvent<KupCardEventPayload>) => void;
         /**
           * Triggered when the component is ready.
          */
-        "onKup-card-ready"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-card-ready"?: (event: KupCardCustomEvent<KupEventPayload>) => void;
         /**
           * The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).
           * @default "100%"
@@ -3822,7 +4025,7 @@ declare namespace LocalJSX {
         /**
           * Triggered when a chart serie is clicked
          */
-        "onKup-chart-click"?: (event: CustomEvent<KupChartClickEvent>) => void;
+        "onKup-chart-click"?: (event: KupChartCustomEvent<KupChartClickEvent>) => void;
         /**
           * The data series to be displayed. They must be of the same type.
           * @default undefined
@@ -3911,15 +4114,15 @@ declare namespace LocalJSX {
         /**
           * Triggered when the input element loses focus.
          */
-        "onKup-checkbox-blur"?: (event: CustomEvent<KupCheckboxEventPayload>) => void;
+        "onKup-checkbox-blur"?: (event: KupCheckboxCustomEvent<KupCheckboxEventPayload>) => void;
         /**
           * Triggered when the input element's value changes.
          */
-        "onKup-checkbox-change"?: (event: CustomEvent<KupCheckboxEventPayload>) => void;
+        "onKup-checkbox-change"?: (event: KupCheckboxCustomEvent<KupCheckboxEventPayload>) => void;
         /**
           * Triggered when the input element gets focused.
          */
-        "onKup-checkbox-focus"?: (event: CustomEvent<KupCheckboxEventPayload>) => void;
+        "onKup-checkbox-focus"?: (event: KupCheckboxCustomEvent<KupCheckboxEventPayload>) => void;
     }
     interface KupChip {
         /**
@@ -3936,19 +4139,19 @@ declare namespace LocalJSX {
         /**
           * Triggered when a chip loses focus.
          */
-        "onKup-chip-blur"?: (event: CustomEvent<KupChipEventPayload>) => void;
+        "onKup-chip-blur"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
         /**
           * Triggered when a chip is clicked.
          */
-        "onKup-chip-click"?: (event: CustomEvent<KupChipEventPayload>) => void;
+        "onKup-chip-click"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
         /**
           * Triggered when a chip gets focused.
          */
-        "onKup-chip-focus"?: (event: CustomEvent<KupChipEventPayload>) => void;
+        "onKup-chip-focus"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
         /**
           * Triggered when the removal icon on input chips is clicked.
          */
-        "onKup-chip-iconclick"?: (event: CustomEvent<KupChipEventPayload>) => void;
+        "onKup-chip-iconclick"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
         /**
           * The type of chip. Available types: input, filter, choice or empty for default.
           * @default FChipType.STANDARD
@@ -3977,7 +4180,7 @@ declare namespace LocalJSX {
           * @default ""
          */
         "initialValue"?: string;
-        "onKup-colorpicker-change"?: (event: CustomEvent<KupColorPickerEventPayload>) => void;
+        "onKup-colorpicker-change"?: (event: KupColorPickerCustomEvent<KupColorPickerEventPayload>) => void;
         /**
           * When true, the component's text field will be replaced by a swatch.
           * @default false
@@ -4011,13 +4214,13 @@ declare namespace LocalJSX {
           * Lets the combobox behave as a select element.
          */
         "isSelect"?: boolean;
-        "onKup-combobox-blur"?: (event: CustomEvent<KupComboboxEventPayload>) => void;
-        "onKup-combobox-change"?: (event: CustomEvent<KupComboboxEventPayload>) => void;
-        "onKup-combobox-click"?: (event: CustomEvent<KupComboboxEventPayload>) => void;
-        "onKup-combobox-focus"?: (event: CustomEvent<KupComboboxEventPayload>) => void;
-        "onKup-combobox-iconclick"?: (event: CustomEvent<KupComboboxIconClickEventPayload>) => void;
-        "onKup-combobox-input"?: (event: CustomEvent<KupComboboxEventPayload>) => void;
-        "onKup-combobox-itemclick"?: (event: CustomEvent<KupComboboxEventPayload>) => void;
+        "onKup-combobox-blur"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
+        "onKup-combobox-change"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
+        "onKup-combobox-click"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
+        "onKup-combobox-focus"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
+        "onKup-combobox-iconclick"?: (event: KupComboboxCustomEvent<KupComboboxIconClickEventPayload>) => void;
+        "onKup-combobox-input"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
+        "onKup-combobox-itemclick"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
         /**
           * Sets how to return the selected item value. Suported values: "code", "description", "both".
          */
@@ -4044,7 +4247,7 @@ declare namespace LocalJSX {
           * Sets the layout of the component.
          */
         "layout"?: string;
-        "onKup-dash-click"?: (event: CustomEvent<{
+        "onKup-dash-click"?: (event: KupDashCustomEvent<{
         id: number;
     }>) => void;
     }
@@ -4057,12 +4260,31 @@ declare namespace LocalJSX {
         "horizontal"?: boolean;
         "iconColor"?: Array<any>;
         "layout"?: string;
-        "onKup-dash-click"?: (event: CustomEvent<{
+        "onKup-dash-click"?: (event: KupDashListCustomEvent<{
         idx: number;
     }>) => void;
         "textColor"?: Array<any>;
         "valueColor"?: Array<any>;
     }
+    interface KupDashboard {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle"?: string;
+        /**
+          * The data of the component.
+          * @default null
+         */
+        "data"?: KupDataDashboard;
+        /**
+          * Enable drag & drop of the section.
+          * @default false
+         */
+        "enableDesign"?: boolean;
+        "onKup-dashboard-save"?: (event: KupDashboardCustomEvent<KupDashboardEventPayload>) => void;
+    }
     interface KupDataTable {
         /**
           * When true and when a row is missing some columns, the missing cells will be autogenerated.
@@ -4190,48 +4412,48 @@ declare namespace LocalJSX {
         /**
           * Generic click event on data table.
          */
-        "onKup-datatable-click"?: (event: CustomEvent<KupDatatableClickEventPayload>) => void;
+        "onKup-datatable-click"?: (event: KupDataTableCustomEvent<KupDatatableClickEventPayload>) => void;
         /**
           * Emitted by the column menu card when opened/closed or when a kup-card-event is fired.
          */
-        "onKup-datatable-columnmenu"?: (event: CustomEvent<KupDatatableColumnMenuEventPayload>) => void;
+        "onKup-datatable-columnmenu"?: (event: KupDataTableCustomEvent<KupDatatableColumnMenuEventPayload>) => void;
         /**
           * Event fired when columns are moved (sorted).
          */
-        "onKup-datatable-columnmove"?: (event: CustomEvent<KupDatatableColumnMoveEventPayload>) => void;
+        "onKup-datatable-columnmove"?: (event: KupDataTableCustomEvent<KupDatatableColumnMoveEventPayload>) => void;
         /**
           * Event fired when columns are removed (set to hidden).
          */
-        "onKup-datatable-columnremove"?: (event: CustomEvent<KupDatatableColumnRemoveEventPayload>) => void;
+        "onKup-datatable-columnremove"?: (event: KupDataTableCustomEvent<KupDatatableColumnRemoveEventPayload>) => void;
         /**
           * Generic right click event on data table.
          */
-        "onKup-datatable-contextmenu"?: (event: CustomEvent<KupDatatableClickEventPayload>) => void;
+        "onKup-datatable-contextmenu"?: (event: KupDataTableCustomEvent<KupDatatableClickEventPayload>) => void;
         /**
           * Generic double click event on data table.
          */
-        "onKup-datatable-dblclick"?: (event: CustomEvent<KupDatatableClickEventPayload>) => void;
+        "onKup-datatable-dblclick"?: (event: KupDataTableCustomEvent<KupDatatableClickEventPayload>) => void;
         /**
           * When component load is complete
          */
-        "onKup-datatable-didload"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-datatable-didload"?: (event: KupDataTableCustomEvent<KupEventPayload>) => void;
         /**
           * When component unload is complete
          */
-        "onKup-datatable-didunload"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-datatable-loadmoreclick"?: (event: CustomEvent<KupDatatableLoadMoreClickEventPayload>) => void;
+        "onKup-datatable-didunload"?: (event: KupDataTableCustomEvent<KupEventPayload>) => void;
+        "onKup-datatable-loadmoreclick"?: (event: KupDataTableCustomEvent<KupDatatableLoadMoreClickEventPayload>) => void;
         /**
           * When rows selections reset
          */
-        "onKup-datatable-resetselectedrows"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-datatable-resetselectedrows"?: (event: KupDataTableCustomEvent<KupEventPayload>) => void;
         /**
           * When a row action is clicked
          */
-        "onKup-datatable-rowactionclick"?: (event: CustomEvent<KupDatatableRowActionClickEventPayload>) => void;
+        "onKup-datatable-rowactionclick"?: (event: KupDataTableCustomEvent<KupDatatableRowActionClickEventPayload>) => void;
         /**
           * When a row is selected
          */
-        "onKup-datatable-rowselected"?: (event: CustomEvent<KupDatatableRowSelectedEventPayload>) => void;
+        "onKup-datatable-rowselected"?: (event: KupDataTableCustomEvent<KupDatatableRowSelectedEventPayload>) => void;
         /**
           * Current selected page set on component load
          */
@@ -4351,15 +4573,15 @@ declare namespace LocalJSX {
           * @default ""
          */
         "initialValue"?: string;
-        "onKup-datepicker-blur"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-change"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-cleariconclick"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-datepicker-click"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-focus"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-iconclick"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-input"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-itemclick"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
-        "onKup-datepicker-textfieldsubmit"?: (event: CustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-blur"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-change"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-cleariconclick"?: (event: KupDatePickerCustomEvent<KupEventPayload>) => void;
+        "onKup-datepicker-click"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-focus"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-iconclick"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-input"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-itemclick"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        "onKup-datepicker-textfieldsubmit"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
     }
     interface KupDrawer {
         /**
@@ -4371,15 +4593,15 @@ declare namespace LocalJSX {
         /**
           * Fired when the drawer gets closed.
          */
-        "onKup-drawer-close"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-drawer-close"?: (event: KupDrawerCustomEvent<KupEventPayload>) => void;
         /**
           * Fired when the drawer gets opened.
          */
-        "onKup-drawer-open"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-drawer-open"?: (event: KupDrawerCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when the component is ready.
          */
-        "onKup-drawer-ready"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-drawer-ready"?: (event: KupDrawerCustomEvent<KupEventPayload>) => void;
     }
     interface KupDropdownButton {
         /**
@@ -4426,23 +4648,23 @@ declare namespace LocalJSX {
         /**
           * Triggered when the primary button loses focus.
          */
-        "onKup-dropdownbutton-blur"?: (event: CustomEvent<KupDropdownButtonEventPayload>) => void;
+        "onKup-dropdownbutton-blur"?: (event: KupDropdownButtonCustomEvent<KupDropdownButtonEventPayload>) => void;
         /**
           * Triggered when a list item changes.
          */
-        "onKup-dropdownbutton-change"?: (event: CustomEvent<KupDropdownButtonEventPayload>) => void;
+        "onKup-dropdownbutton-change"?: (event: KupDropdownButtonCustomEvent<KupDropdownButtonEventPayload>) => void;
         /**
           * Triggered when the primary button is clicked.
          */
-        "onKup-dropdownbutton-click"?: (event: CustomEvent<KupDropdownButtonEventPayload>) => void;
+        "onKup-dropdownbutton-click"?: (event: KupDropdownButtonCustomEvent<KupDropdownButtonEventPayload>) => void;
         /**
           * Triggered when the primary button is focused.
          */
-        "onKup-dropdownbutton-focus"?: (event: CustomEvent<KupDropdownButtonEventPayload>) => void;
+        "onKup-dropdownbutton-focus"?: (event: KupDropdownButtonCustomEvent<KupDropdownButtonEventPayload>) => void;
         /**
           * Triggered when a list item is clicked.
          */
-        "onKup-dropdownbutton-itemclick"?: (event: CustomEvent<KupDropdownButtonEventPayload>) => void;
+        "onKup-dropdownbutton-itemclick"?: (event: KupDropdownButtonCustomEvent<KupDropdownButtonEventPayload>) => void;
         /**
           * Sets how to return the selected item value. Suported values: "code", "description", "both".
           * @default ItemsDisplayMode.CODE
@@ -4501,7 +4723,7 @@ declare namespace LocalJSX {
           * @default null
          */
         "map"?: KupEchartMaps | string | GeoJSON;
-        "onKup-echart-click"?: (event: CustomEvent<KupEchartClickEventPayload>) => void;
+        "onKup-echart-click"?: (event: KupEchartCustomEvent<KupEchartClickEventPayload>) => void;
         /**
           * The data series to be displayed. They must be of the same type.
           * @default []
@@ -4533,58 +4755,38 @@ declare namespace LocalJSX {
          */
         "yAxis"?: YAXisComponentOption;
     }
-    interface KupField {
-        /**
-          * Custom style of the component.
-          * @default ""
-          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-         */
-        "customStyle"?: string;
-        /**
-          * Effective data to pass to the component.
-          * @default {}
-         */
-        "data"?: Object;
+    interface KupFamilyTree {
         /**
-          * The text of the label. If set to empty or has only white space chars, the label will be removed.
-          * @default ""
-         */
-        "label"?: string;
-        /**
-          * Sets the label's position, left right or top.
-          * @default "left"
-         */
-        "labelPos"?: string;
-        /**
-          * Launched when the value of the current FLD changes.
-         */
-        "onKup-field-change"?: (event: CustomEvent<KupFieldChangeEvent>) => void;
-        /**
-          * Launched when the FLD values are confirmed and a submit event is triggered.
+          * The component's initial render will fit the container.
+          * @default true
          */
-        "onKup-field-submit"?: (event: CustomEvent<KupFieldSubmitEvent>) => void;
+        "autofit"?: boolean;
         /**
-          * Sets whether the submit button must be displayed or not.
-          * @default false
+          * Nodes can be expanded/collapsed.
+          * @default true
          */
-        "showSubmit"?: boolean;
+        "collapsible"?: boolean;
         /**
-          * Sets the submit button's label.
+          * Custom style of the component.
           * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
          */
-        "submitLabel"?: string;
+        "customStyle"?: string;
         /**
-          * Sets the submit button's position, top right bottom or left.
-          * @default "right"
+          * Actual data of the component.
+          * @default null
          */
-        "submitPos"?: string;
+        "data"?: KupFamilyTreeData;
         /**
-          * The type of the FLD
-          * @default undefined
+          * Layout of the boxes.
+          * @default null
          */
-        "type"?: string;
+        "layout"?: KupBoxLayout;
+        "onKup-familytree-click"?: (event: KupFamilyTreeCustomEvent<KupFamilyTreeEventPayload>) => void;
+        "onKup-familytree-contextmenu"?: (event: KupFamilyTreeCustomEvent<KupFamilyTreeEventPayload>) => void;
+        "onKup-familytree-dblclick"?: (event: KupFamilyTreeCustomEvent<KupFamilyTreeEventPayload>) => void;
     }
-    interface KupFormEditor {
+    interface KupForm {
         /**
           * Custom style of the component.
           * @default ""
@@ -4592,11 +4794,15 @@ declare namespace LocalJSX {
          */
         "customStyle"?: string;
         /**
-          * The data of the component.
-          * @default false
+          * Actual data of the form.
+          * @default null
          */
-        "data"?: KupForm;
-        "onKup-formeditor-save"?: (event: CustomEvent<KupFormEditorEventPayload>) => void;
+        "data"?: KupFormData;
+        /**
+          * How the form will arrange its content.
+          * @default null
+         */
+        "layout"?: KupFormLayout;
     }
     interface KupGauge {
         /**
@@ -4709,8 +4915,8 @@ declare namespace LocalJSX {
           * The component will be rendered as a button, which opens the link associated to the iframe in another tab when clicked.
          */
         "isButton"?: boolean;
-        "onKup-iframe-error"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-iframe-load"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-iframe-error"?: (event: KupIframeCustomEvent<KupEventPayload>) => void;
+        "onKup-iframe-load"?: (event: KupIframeCustomEvent<KupEventPayload>) => void;
         /**
           * The address the iframe should be referencing to.
          */
@@ -4748,7 +4954,7 @@ declare namespace LocalJSX {
           * @default false
          */
         "isCanvas"?: boolean;
-        "onKup-image-click"?: (event: CustomEvent<KupImageClickEventPayload>) => void;
+        "onKup-image-click"?: (event: KupImageCustomEvent<KupImageClickEventPayload>) => void;
         /**
           * The resource used to fetch the image.
           * @default null
@@ -4777,14 +4983,20 @@ declare namespace LocalJSX {
           * @default []
          */
         "data"?: KupDataNode[];
-        "onKup-imagelist-click"?: (event: CustomEvent<KupImageListEventPayload>) => void;
-        "onKup-imagelist-contextmenu"?: (event: CustomEvent<KupImageListEventPayload>) => void;
-        "onKup-imagelist-dblclick"?: (event: CustomEvent<KupImageListEventPayload>) => void;
+        "onKup-imagelist-click"?: (event: KupImageListCustomEvent<KupImageListEventPayload>) => void;
+        "onKup-imagelist-contextmenu"?: (event: KupImageListCustomEvent<KupImageListEventPayload>) => void;
+        "onKup-imagelist-dblclick"?: (event: KupImageListCustomEvent<KupImageListEventPayload>) => void;
         /**
           * When enabled displays Material's ripple effect on clicked items.
           * @default true
          */
         "ripple"?: boolean;
+        /**
+          * An array of integers containing the path to a selected child.\
+         */
+        "selectedNode"?: TreeNodePath;
+        "stateId"?: string;
+        "store"?: KupStore;
     }
     interface KupLazy {
         /**
@@ -4806,7 +5018,7 @@ declare namespace LocalJSX {
         /**
           * Triggered when the component is loaded.
          */
-        "onKup-lazy-loaded"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-lazy-loaded"?: (event: KupLazyCustomEvent<KupEventPayload>) => void;
         /**
           * Decides when the sub-component should be rendered. By default when both the component props exist and the component is in the viewport.
           * @default KupLazyRender.BOTH
@@ -4860,9 +5072,9 @@ declare namespace LocalJSX {
           * @default false
          */
         "menuVisible"?: boolean;
-        "onKup-list-blur"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-list-click"?: (event: CustomEvent<KupListEventPayload>) => void;
-        "onKup-list-focus"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-list-blur"?: (event: KupListCustomEvent<KupEventPayload>) => void;
+        "onKup-list-click"?: (event: KupListCustomEvent<KupListEventPayload>) => void;
+        "onKup-list-focus"?: (event: KupListCustomEvent<KupEventPayload>) => void;
         /**
           * Defines the type of selection. Values accepted: listbox, radiogroup or group.
           * @default KupListRole.LISTBOX
@@ -4907,11 +5119,11 @@ declare namespace LocalJSX {
         /**
           * Triggered when the component is ready.
          */
-        "onKup-navbar-ready"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-navbar-ready"?: (event: KupNavBarCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when the component is resize.
          */
-        "onKup-navbar-resize"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-navbar-resize"?: (event: KupNavBarCustomEvent<KupEventPayload>) => void;
         /**
           * Defines the style of the nav bar.
           * @default KupNavBarStyling.STANDARD
@@ -4965,15 +5177,15 @@ declare namespace LocalJSX {
           * @default false
          */
         "negative"?: boolean;
-        "onKup-numericpicker-blur"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-change"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-cleariconclick"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-numericpicker-click"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-focus"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-iconclick"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-input"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-itemclick"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
-        "onKup-numericpicker-textfieldsubmit"?: (event: CustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-blur"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-change"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-cleariconclick"?: (event: KupNumericPickerCustomEvent<KupEventPayload>) => void;
+        "onKup-numericpicker-click"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-focus"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-iconclick"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-input"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-itemclick"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
+        "onKup-numericpicker-textfieldsubmit"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
     }
     interface KupPhotoFrame {
         /**
@@ -4985,11 +5197,11 @@ declare namespace LocalJSX {
         /**
           * Triggered when the placeholder is loaded.
          */
-        "onKup-photoframe-placeholderload"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-photoframe-placeholderload"?: (event: KupPhotoFrameCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when the resource is loaded.
          */
-        "onKup-photoframe-resourceload"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-photoframe-resourceload"?: (event: KupPhotoFrameCustomEvent<KupEventPayload>) => void;
         /**
           * Html attributes of the picture before the component enters the viewport.
           * @default {}
@@ -5134,15 +5346,15 @@ declare namespace LocalJSX {
         /**
           * Triggered when the input element loses focus.
          */
-        "onKup-radio-blur"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-radio-blur"?: (event: KupRadioCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when the input element's value changes.
          */
-        "onKup-radio-change"?: (event: CustomEvent<KupRadioChangeEventPayload>) => void;
+        "onKup-radio-change"?: (event: KupRadioCustomEvent<KupRadioChangeEventPayload>) => void;
         /**
           * Triggered when the input element gets focused.
          */
-        "onKup-radio-focus"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-radio-focus"?: (event: KupRadioCustomEvent<KupEventPayload>) => void;
     }
     interface KupRating {
         /**
@@ -5161,7 +5373,7 @@ declare namespace LocalJSX {
           * @default 5
          */
         "maxValue"?: number;
-        "onKup-rating-click"?: (event: CustomEvent<KupRatingClickEventPayload>) => void;
+        "onKup-rating-click"?: (event: KupRatingCustomEvent<KupRatingClickEventPayload>) => void;
         /**
           * Rated stars.
           * @default 0
@@ -5188,7 +5400,7 @@ declare namespace LocalJSX {
         /**
           * Triggered when action button is clicked.
          */
-        "onKup-snackbar-actionclick"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-snackbar-actionclick"?: (event: KupSnackbarCustomEvent<KupEventPayload>) => void;
         /**
           * Sets the textual content of the snackbar.
           * @default ''
@@ -5245,7 +5457,7 @@ declare namespace LocalJSX {
         /**
           * Triggered when the component is ready.
          */
-        "onKup-spinner-ready"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-spinner-ready"?: (event: KupSpinnerCustomEvent<KupEventPayload>) => void;
     }
     interface KupSwitch {
         /**
@@ -5277,15 +5489,15 @@ declare namespace LocalJSX {
         /**
           * Triggered when the input element loses focus.
          */
-        "onKup-switch-blur"?: (event: CustomEvent<KupSwitchEventPayload>) => void;
+        "onKup-switch-blur"?: (event: KupSwitchCustomEvent<KupSwitchEventPayload>) => void;
         /**
           * Triggered when the input element's value changes.
          */
-        "onKup-switch-change"?: (event: CustomEvent<KupSwitchEventPayload>) => void;
+        "onKup-switch-change"?: (event: KupSwitchCustomEvent<KupSwitchEventPayload>) => void;
         /**
           * Triggered when the input element gets focused.
          */
-        "onKup-switch-focus"?: (event: CustomEvent<KupSwitchEventPayload>) => void;
+        "onKup-switch-focus"?: (event: KupSwitchCustomEvent<KupSwitchEventPayload>) => void;
     }
     interface KupTabBar {
         /**
@@ -5302,15 +5514,15 @@ declare namespace LocalJSX {
         /**
           * Triggered when the tab loses focus.
          */
-        "onKup-tabbar-blur"?: (event: CustomEvent<KupTabBarEventPayload>) => void;
+        "onKup-tabbar-blur"?: (event: KupTabBarCustomEvent<KupTabBarEventPayload>) => void;
         /**
           * Triggered when the tab is clicked.
          */
-        "onKup-tabbar-click"?: (event: CustomEvent<KupTabBarEventPayload>) => void;
+        "onKup-tabbar-click"?: (event: KupTabBarCustomEvent<KupTabBarEventPayload>) => void;
         /**
           * Triggered when the tab is focused.
          */
-        "onKup-tabbar-focus"?: (event: CustomEvent<KupTabBarEventPayload>) => void;
+        "onKup-tabbar-focus"?: (event: KupTabBarCustomEvent<KupTabBarEventPayload>) => void;
         /**
           * When enabled displays Material's ripple effect on item headers.
           * @default true
@@ -5399,38 +5611,43 @@ declare namespace LocalJSX {
           * @default null
          */
         "min"?: number;
+        /**
+          * The HTML name attribute used for form autocomplete.
+          * @default null
+         */
+        "name"?: string;
         /**
           * Triggered when the input element loses focus.
          */
-        "onKup-textfield-blur"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-blur"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * Triggered when the input element changes.
          */
-        "onKup-textfield-change"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-change"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * Triggered when the text field's clear icon is clicked.
          */
-        "onKup-textfield-cleariconclick"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-textfield-cleariconclick"?: (event: KupTextFieldCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when the input element is clicked.
          */
-        "onKup-textfield-click"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-click"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * Triggered when the input element gets focused.
          */
-        "onKup-textfield-focus"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-focus"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * Triggered when the text field's icon is clicked.
          */
-        "onKup-textfield-iconclick"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-iconclick"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * Triggered when the input element receives an input.
          */
-        "onKup-textfield-input"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-input"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * Triggered when the Enter key is pressed.
          */
-        "onKup-textfield-submit"?: (event: CustomEvent<KupTextFieldEventPayload>) => void;
+        "onKup-textfield-submit"?: (event: KupTextFieldCustomEvent<KupTextFieldEventPayload>) => void;
         /**
           * When set to true, the component will be rendered as an outlined field.
           * @default false
@@ -5494,15 +5711,15 @@ declare namespace LocalJSX {
           * @default false
          */
         "manageSeconds"?: boolean;
-        "onKup-timepicker-blur"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-change"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-cleariconclick"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-timepicker-click"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-focus"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-iconclick"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-input"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-itemclick"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
-        "onKup-timepicker-textfieldsubmit"?: (event: CustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-blur"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-change"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-cleariconclick"?: (event: KupTimePickerCustomEvent<KupEventPayload>) => void;
+        "onKup-timepicker-click"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-focus"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-iconclick"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-input"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-itemclick"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
+        "onKup-timepicker-textfieldsubmit"?: (event: KupTimePickerCustomEvent<KupTimePickerEventPayload>) => void;
         /**
           * Minutes step.
           * @default 10
@@ -5579,30 +5796,30 @@ declare namespace LocalJSX {
           * The value of the global filter.
          */
         "globalFilterValue"?: string;
-        "onKup-tree-buttonclick"?: (event: CustomEvent<KupTreeNodeButtonClickEventPayload>) => void;
+        "onKup-tree-buttonclick"?: (event: KupTreeCustomEvent<KupTreeNodeButtonClickEventPayload>) => void;
         /**
           * When the column menu is being opened/closed.
          */
-        "onKup-tree-columnmenu"?: (event: CustomEvent<KupTreeColumnMenuEventPayload>) => void;
+        "onKup-tree-columnmenu"?: (event: KupTreeCustomEvent<KupTreeColumnMenuEventPayload>) => void;
         /**
           * Event fired when columns are removed (set to hidden).
          */
-        "onKup-tree-columnremove"?: (event: CustomEvent<KupTreeColumnRemoveEventPayload>) => void;
+        "onKup-tree-columnremove"?: (event: KupTreeCustomEvent<KupTreeColumnRemoveEventPayload>) => void;
         /**
           * Generic right click event on tree.
          */
-        "onKup-tree-contextmenu"?: (event: CustomEvent<KupTreeContextMenuEventPayload>) => void;
-        "onKup-tree-didload"?: (event: CustomEvent<KupEventPayload>) => void;
+        "onKup-tree-contextmenu"?: (event: KupTreeCustomEvent<KupTreeContextMenuEventPayload>) => void;
+        "onKup-tree-didload"?: (event: KupTreeCustomEvent<KupEventPayload>) => void;
         /**
           * Triggered when stop propagation event
          */
-        "onKup-tree-didunload"?: (event: CustomEvent<KupEventPayload>) => void;
-        "onKup-tree-dynamicmassexpansion"?: (event: CustomEvent<KupTreeDynamicMassExpansionEventPayload>) => void;
+        "onKup-tree-didunload"?: (event: KupTreeCustomEvent<KupEventPayload>) => void;
+        "onKup-tree-dynamicmassexpansion"?: (event: KupTreeCustomEvent<KupTreeDynamicMassExpansionEventPayload>) => void;
         /**
           * Fired when a KupTreeNode gets collapsed (closed).
          */
-        "onKup-tree-nodecollapse"?: (event: CustomEvent<KupTreeNodeCollapseEventPayload>) => void;
-        "onKup-tree-nodedblclick"?: (event: CustomEvent<KupTreeNodeCollapseEventPayload>) => void;
+        "onKup-tree-nodecollapse"?: (event: KupTreeCustomEvent<KupTreeNodeCollapseEventPayload>) => void;
+        "onKup-tree-nodedblclick"?: (event: KupTreeCustomEvent<KupTreeNodeCollapseEventPayload>) => void;
         /**
           * Fired when a node expansion ion has been triggered. Contains additional data when the tree is using the dynamicExpansion feature.
           * @event kup-tree-nodeexpand
@@ -5615,11 +5832,11 @@ declare namespace LocalJSX {
           * @see dynamicExpansionCallback *
           * @since 1.0.0
          */
-        "onKup-tree-nodeexpand"?: (event: CustomEvent<KupTreeNodeExpandEventPayload>) => void;
+        "onKup-tree-nodeexpand"?: (event: KupTreeCustomEvent<KupTreeNodeExpandEventPayload>) => void;
         /**
           * Fired when a node of the tree has been selected
          */
-        "onKup-tree-nodeselected"?: (event: CustomEvent<KupTreeNodeSelectedEventPayload>) => void;
+        "onKup-tree-nodeselected"?: (event: KupTreeCustomEvent<KupTreeNodeSelectedEventPayload>) => void;
         /**
           * Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells. It works only on cells of the main column.
           * @default false;
@@ -5692,13 +5909,14 @@ declare namespace LocalJSX {
         "kup-combobox": KupCombobox;
         "kup-dash": KupDash;
         "kup-dash-list": KupDashList;
+        "kup-dashboard": KupDashboard;
         "kup-data-table": KupDataTable;
         "kup-date-picker": KupDatePicker;
         "kup-drawer": KupDrawer;
         "kup-dropdown-button": KupDropdownButton;
         "kup-echart": KupEchart;
-        "kup-field": KupField;
-        "kup-form-editor": KupFormEditor;
+        "kup-family-tree": KupFamilyTree;
+        "kup-form": KupForm;
         "kup-gauge": KupGauge;
         "kup-grid": KupGrid;
         "kup-iframe": KupIframe;
@@ -5744,13 +5962,14 @@ declare module "@stencil/core" {
             "kup-combobox": LocalJSX.KupCombobox & JSXBase.HTMLAttributes<HTMLKupComboboxElement>;
             "kup-dash": LocalJSX.KupDash & JSXBase.HTMLAttributes<HTMLKupDashElement>;
             "kup-dash-list": LocalJSX.KupDashList & JSXBase.HTMLAttributes<HTMLKupDashListElement>;
+            "kup-dashboard": LocalJSX.KupDashboard & JSXBase.HTMLAttributes<HTMLKupDashboardElement>;
             "kup-data-table": LocalJSX.KupDataTable & JSXBase.HTMLAttributes<HTMLKupDataTableElement>;
             "kup-date-picker": LocalJSX.KupDatePicker & JSXBase.HTMLAttributes<HTMLKupDatePickerElement>;
             "kup-drawer": LocalJSX.KupDrawer & JSXBase.HTMLAttributes<HTMLKupDrawerElement>;
             "kup-dropdown-button": LocalJSX.KupDropdownButton & JSXBase.HTMLAttributes<HTMLKupDropdownButtonElement>;
             "kup-echart": LocalJSX.KupEchart & JSXBase.HTMLAttributes<HTMLKupEchartElement>;
-            "kup-field": LocalJSX.KupField & JSXBase.HTMLAttributes<HTMLKupFieldElement>;
-            "kup-form-editor": LocalJSX.KupFormEditor & JSXBase.HTMLAttributes<HTMLKupFormEditorElement>;
+            "kup-family-tree": LocalJSX.KupFamilyTree & JSXBase.HTMLAttributes<HTMLKupFamilyTreeElement>;
+            "kup-form": LocalJSX.KupForm & JSXBase.HTMLAttributes<HTMLKupFormElement>;
             "kup-gauge": LocalJSX.KupGauge & JSXBase.HTMLAttributes<HTMLKupGaugeElement>;
             "kup-grid": LocalJSX.KupGrid & JSXBase.HTMLAttributes<HTMLKupGridElement>;
             "kup-iframe": LocalJSX.KupIframe & JSXBase.HTMLAttributes<HTMLKupIframeElement>;