@sme.up/ketchup 7.1.1 → 7.3.0

package/dist/types/components.d.ts

@@ -20,7 +20,7 @@ import { KupCardClickPayload, KupCardData, KupCardEventPayload, KupCardFamily }
 import { FCellPadding } from "./f-components/f-cell/f-cell-declarations";
 import { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations";
 import { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations";
-import { KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations";
+import { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations";
 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";
@@ -28,6 +28,7 @@ import { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-das
 import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, 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";
+import { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations";
 import { KupDropdownButtonEventPayload } from "./components/kup-dropdown-button/kup-dropdown-button-declarations";
 import { KupEchartClickEventPayload, KupEchartLegendPlacement, KupEchartMaps, KupEchartTitle, KupEchartTypes } from "./components/kup-echart/kup-echart-declarations";
 import { GeoJSON } from "geojson";
@@ -49,6 +50,51 @@ 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";
+export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./components/kup-accordion/kup-accordion-declarations";
+export { GenericObject, KupEventPayload } from "./types/GenericTypes";
+export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
+export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
+export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations";
+export { KupStore } from "./components/kup-state/kup-store";
+export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
+export { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations";
+export { KupButtonClickEventPayload } from "./components/kup-button/kup-button-declarations";
+export { KupButtonListClickEventPayload, KupButtonListNode } from "./components/kup-button-list/kup-button-list-declarations";
+export { KupCalendarData, KupCalendarDateClickEventPayload, KupCalendarEventClickEventPayload, KupCalendarEventDropEventPayload, KupCalendarViewChangeEventPayload, KupCalendarViewTypes } from "./components/kup-calendar/kup-calendar-declarations";
+export { KupCardClickPayload, KupCardData, KupCardEventPayload, KupCardFamily } from "./components/kup-card/kup-card-declarations";
+export { FCellPadding } from "./f-components/f-cell/f-cell-declarations";
+export { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations";
+export { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations";
+export { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations";
+export { FChipType } from "./f-components/f-chip/f-chip-declarations";
+export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations";
+export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
+export { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations";
+export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
+export { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations";
+export { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations";
+export { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations";
+export { KupDropdownButtonEventPayload } from "./components/kup-dropdown-button/kup-dropdown-button-declarations";
+export { KupEchartClickEventPayload, KupEchartLegendPlacement, KupEchartMaps, KupEchartTitle, KupEchartTypes } from "./components/kup-echart/kup-echart-declarations";
+export { GeoJSON } from "geojson";
+export { XAXisComponentOption, YAXisComponentOption } from "echarts";
+export { KupFamilyTreeData, KupFamilyTreeEventPayload, KupFamilyTreeLayout, KupFamilyTreeNode } from "./components/kup-family-tree/kup-family-tree-declarations";
+export { KupFormData, KupFormLabelPlacement, KupFormLayout } from "./components/kup-form/kup-form-declarations";
+export { KupBadge } from "./components/kup-badge/kup-badge";
+export { FImageData } from "./f-components/f-image/f-image-declarations";
+export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
+export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
+export { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
+export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
+export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
+export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
+export { KupQlikGrid, QlikServer } from "./components/kup-qlik/kup-qlik-declarations";
+export { KupRadioChangeEventPayload, KupRadioData } from "./components/kup-radio/kup-radio-declarations";
+export { KupRatingClickEventPayload } from "./components/kup-rating/kup-rating-declarations";
+export { KupSwitchEventPayload } from "./components/kup-switch/kup-switch-declarations";
+export { KupTabBarEventPayload, KupTabBarNode } from "./components/kup-tab-bar/kup-tab-bar-declarations";
+export { KupTextFieldEventPayload } from "./components/kup-text-field/kup-text-field-declarations";
+export { KupTimePickerEventPayload } from "./components/kup-time-picker/kup-time-picker-declarations";
 export namespace Components {
     interface KupAccordion {
         /**
@@ -581,11 +627,6 @@ export namespace Components {
           * @param props - Object containing props that will be set to the component.
          */
         "setProps": (props: GenericObject) => Promise<void>;
-        /**
-          * Sets the card as modal window
-          * @default false
-         */
-        "showModal": boolean;
         /**
           * The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).
           * @default "100%"
@@ -827,6 +868,16 @@ export namespace Components {
           * @default []
          */
         "data": KupChipNode[];
+        /**
+          * When enabled, the chip's text will display both the id and the value.
+          * @default false
+         */
+        "displayId": boolean;
+        /**
+          * When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field).
+          * @default false
+         */
+        "enableInput": 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.
@@ -1406,6 +1457,67 @@ export namespace Components {
          */
         "setValue": (value: string) => Promise<void>;
     }
+    interface KupDialog {
+        /**
+          * Auto centers the dialog relatively to the viewport.
+          * @default "{ onReady: true }"
+         */
+        "autoCenter": KupDialogAutoCenter;
+        /**
+          * Closes the dialog detaching it from the DOM.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle": string;
+        /**
+          * 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>;
+        /**
+          * Header options.
+          * @default "{ icons: { close: true } }"
+         */
+        "header": KupDialogHeader;
+        /**
+          * Set of options to display the dialog as a modal.
+          * @default "{ closeOnBackdropClick: true }"
+         */
+        "modal": KupDialogModal;
+        /**
+          * Places the dialog at the center of the screen.
+         */
+        "recalcPosition": () => Promise<void>;
+        /**
+          * This method is used to trigger a new render of the component.
+         */
+        "refresh": () => Promise<void>;
+        /**
+          * Sets whether the dialog is resizable or not.
+          * @default "true"
+         */
+        "resizable": boolean;
+        /**
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
+         */
+        "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * The width of the dialog, defaults to auto. Accepts any valid CSS format (px, %, vw, etc.).
+          * @default "auto"
+         */
+        "sizeX": string;
+        /**
+          * The height of the card, defaults to auto. Accepts any valid CSS format (px, %, vh, etc.).
+          * @default "auto"
+         */
+        "sizeY": string;
+    }
     interface KupDrawer {
         /**
           * Closes the drawer.
@@ -3177,6 +3289,10 @@ export interface KupDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupDatePickerElement;
 }
+export interface KupDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupDialogElement;
+}
 export interface KupDrawerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupDrawerElement;
@@ -3193,6 +3309,10 @@ export interface KupFamilyTreeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupFamilyTreeElement;
 }
+export interface KupFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupFormElement;
+}
 export interface KupIframeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupIframeElement;
@@ -3376,6 +3496,12 @@ declare global {
         prototype: HTMLKupDatePickerElement;
         new (): HTMLKupDatePickerElement;
     };
+    interface HTMLKupDialogElement extends Components.KupDialog, HTMLStencilElement {
+    }
+    var HTMLKupDialogElement: {
+        prototype: HTMLKupDialogElement;
+        new (): HTMLKupDialogElement;
+    };
     interface HTMLKupDrawerElement extends Components.KupDrawer, HTMLStencilElement {
     }
     var HTMLKupDrawerElement: {
@@ -3564,6 +3690,7 @@ declare global {
         "kup-dashboard": HTMLKupDashboardElement;
         "kup-data-table": HTMLKupDataTableElement;
         "kup-date-picker": HTMLKupDatePickerElement;
+        "kup-dialog": HTMLKupDialogElement;
         "kup-drawer": HTMLKupDrawerElement;
         "kup-dropdown-button": HTMLKupDropdownButtonElement;
         "kup-echart": HTMLKupEchartElement;
@@ -4056,11 +4183,6 @@ declare namespace LocalJSX {
           * Triggered when the component is ready.
          */
         "onKup-card-ready"?: (event: KupCardCustomEvent<KupEventPayload>) => void;
-        /**
-          * Sets the card as modal window
-          * @default false
-         */
-        "showModal"?: boolean;
         /**
           * The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).
           * @default "100%"
@@ -4259,10 +4381,24 @@ declare namespace LocalJSX {
           * @default []
          */
         "data"?: KupChipNode[];
+        /**
+          * When enabled, the chip's text will display both the id and the value.
+          * @default false
+         */
+        "displayId"?: boolean;
+        /**
+          * When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field).
+          * @default false
+         */
+        "enableInput"?: boolean;
         /**
           * Triggered when a chip loses focus.
          */
         "onKup-chip-blur"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
+        /**
+          * Triggered when the chip dataset changes.
+         */
+        "onKup-chip-change"?: (event: KupChipCustomEvent<KupChipChangeEventPayload>) => void;
         /**
           * Triggered when a chip is clicked.
          */
@@ -4727,6 +4863,46 @@ declare namespace LocalJSX {
         "onKup-datepicker-itemclick"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
         "onKup-datepicker-textfieldsubmit"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
     }
+    interface KupDialog {
+        /**
+          * Auto centers the dialog relatively to the viewport.
+          * @default "{ onReady: true }"
+         */
+        "autoCenter"?: KupDialogAutoCenter;
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle"?: string;
+        /**
+          * Header options.
+          * @default "{ icons: { close: true } }"
+         */
+        "header"?: KupDialogHeader;
+        /**
+          * Set of options to display the dialog as a modal.
+          * @default "{ closeOnBackdropClick: true }"
+         */
+        "modal"?: KupDialogModal;
+        "onKup-dialog-close"?: (event: KupDialogCustomEvent<KupEventPayload>) => void;
+        "onKup-dialog-ready"?: (event: KupDialogCustomEvent<KupEventPayload>) => void;
+        /**
+          * Sets whether the dialog is resizable or not.
+          * @default "true"
+         */
+        "resizable"?: boolean;
+        /**
+          * The width of the dialog, defaults to auto. Accepts any valid CSS format (px, %, vw, etc.).
+          * @default "auto"
+         */
+        "sizeX"?: string;
+        /**
+          * The height of the card, defaults to auto. Accepts any valid CSS format (px, %, vh, etc.).
+          * @default "auto"
+         */
+        "sizeY"?: string;
+    }
     interface KupDrawer {
         /**
           * Custom style of the component.
@@ -4972,6 +5148,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "layout"?: KupFormLayout;
+        /**
+          * When component load is complete
+         */
+        "onKup-form-ready"?: (event: KupFormCustomEvent<KupEventPayload>) => void;
         /**
           * Sets the callback function on submit form
           * @default null
@@ -6088,6 +6268,7 @@ declare namespace LocalJSX {
         "kup-dashboard": KupDashboard;
         "kup-data-table": KupDataTable;
         "kup-date-picker": KupDatePicker;
+        "kup-dialog": KupDialog;
         "kup-drawer": KupDrawer;
         "kup-dropdown-button": KupDropdownButton;
         "kup-echart": KupEchart;
@@ -6141,6 +6322,7 @@ declare module "@stencil/core" {
             "kup-dashboard": LocalJSX.KupDashboard & JSXBase.HTMLAttributes<HTMLKupDashboardElement>;
             "kup-data-table": LocalJSX.KupDataTable & JSXBase.HTMLAttributes<HTMLKupDataTableElement>;
             "kup-date-picker": LocalJSX.KupDatePicker & JSXBase.HTMLAttributes<HTMLKupDatePickerElement>;
+            "kup-dialog": LocalJSX.KupDialog & JSXBase.HTMLAttributes<HTMLKupDialogElement>;
             "kup-drawer": LocalJSX.KupDrawer & JSXBase.HTMLAttributes<HTMLKupDrawerElement>;
             "kup-dropdown-button": LocalJSX.KupDropdownButton & JSXBase.HTMLAttributes<HTMLKupDropdownButtonElement>;
             "kup-echart": LocalJSX.KupEchart & JSXBase.HTMLAttributes<HTMLKupEchartElement>;

package/dist/types/f-components/f-cell/f-cell-declarations.d.ts

@@ -109,6 +109,8 @@ export declare enum FCellShapes {
   GAUGE = "GAU",
   IMAGE = "IMG",
   KNOB = "KNB",
+  MULTI_AUTOCOMPLETE = "AML",
+  MULTI_COMBOBOX = "CML",
   PROGRESS_BAR = "PGB",
   RADIO = "RAD",
   RATING = "RTG",
@@ -136,6 +138,8 @@ export declare enum FCellTypes {
   IMAGE = "image",
   KNOB = "knob",
   LINK = "link",
+  MULTI_AUTOCOMPLETE = "multi-autocomplete",
+  MULTI_COMBOBOX = "multi-combobox",
   NUMBER = "number",
   PROGRESS_BAR = "progress-bar",
   RADIO = "radio",

package/dist/types/f-components/f-chip/f-chip-declarations.d.ts

@@ -5,6 +5,7 @@ import { KupChipNode } from '../../components/kup-chip/kup-chip-declarations';
  */
 export interface FChipsProps extends FComponent {
   data?: KupChipNode[];
+  displayId?: boolean;
   onBlur?: ((chip: KupChipNode, e: FocusEvent) => void)[];
   onClick?: ((chip: KupChipNode, e: PointerEvent) => void)[];
   onExpansionClick?: ((chip: KupChipNode, e: PointerEvent) => void)[];

package/dist/types/managers/kup-data/kup-data-declarations.d.ts

@@ -69,6 +69,7 @@ export interface KupDataCell {
   isEditable?: boolean;
   obj?: KupObj;
   shape?: FCellShapes;
+  slotData?: GenericObject;
   style?: GenericMap;
   styleContent?: GenericMap;
   title?: string;
@@ -144,7 +145,7 @@ export interface KupDataNewColumn {
 /**
  * Type to manage sort of the dataset.
  */
-export declare type KupDataDatasetSort = 'normalDistribution';
+export type KupDataDatasetSort = 'normalDistribution';
 /**
  * Interface containing the options related to column creation when invoking column.new.
  */

package/dist/types/managers/kup-dynamic-position/kup-dynamic-position-declarations.d.ts

@@ -13,7 +13,7 @@ export declare const kupDynamicPositionActiveClass = "kup-dynamic-position-activ
 /**
  * Master type extending all subtypes of available anchor points.
  */
-export declare type KupDynamicPositionAnchor = HTMLElement | KupDynamicPositionCoordinates;
+export type KupDynamicPositionAnchor = HTMLElement | KupDynamicPositionCoordinates;
 /**
  * Fixed position element.
  */

package/dist/types/managers/kup-interact/kup-interact-declarations.d.ts

@@ -76,14 +76,14 @@ export interface KupResizeCallbacks {
 /**
  * Defines the additional data of the drag event.
  */
-export declare type KupDragDataTransferCallback = (e?: InteractEvent) => KupDropEventSource;
+export type KupDragDataTransferCallback = (e?: InteractEvent) => KupDropEventSource;
 export interface KupDragEventData {
   callback?: KupDragDataTransferCallback;
 }
 /**
  * Defines the additional data of the drop event.
  */
-export declare type KupDropDataTransferCallback = (e?: DropEvent) => KupDropEventTarget;
+export type KupDropDataTransferCallback = (e?: DropEvent) => KupDropEventTarget;
 export interface KupDropEventData {
   callback?: KupDropDataTransferCallback;
   dispatcher: HTMLElement;

package/dist/types/managers/kup-interact/kup-interact.d.ts

@@ -8,7 +8,10 @@ import { KupDragCallbacks, KupDragEffect, KupDragEventData, KupDropCallbacks, Ku
  */
 export declare class KupInteract {
   container: HTMLElement;
+  defaultModalCb: (e: MouseEvent) => void;
   managedElements: Set<HTMLElement>;
+  modalBackdrop: HTMLElement;
+  modalCb: (e: MouseEvent) => unknown;
   restrictContainer: RectResolvable<[
     number,
     number,
@@ -80,6 +83,14 @@ export declare class KupInteract {
     number,
     Interaction<keyof ActionMap>
   ]>): void;
+  /**
+   * Hides the modal's backdrop.
+   */
+  hideModalBackdrop(): void;
+  /**
+   * Displays the modal's backdrop.
+   */
+  showModalBackdrop(cb?: (e: MouseEvent) => unknown): void;
   /**
    * Removes all event listeners from the elements in the array.
    * @param {HTMLElement[]} elements - Elements to handle.

package/dist/types/managers/kup-language/kup-language-declarations.d.ts

@@ -3,7 +3,7 @@ import type { GenericObject } from '../../types/GenericTypes';
  * Master type extending all subtypes of keys.
  * Remember to edit "languages.json"
  */
-export declare type KupLanguageKey = KupLanguageCheckbox | KupLanguageColumn | KupLanguageDashboard | KupLanguageDebug | KupLanguageDensity | KupLanguageFontsize | KupLanguageGeneric | KupLanguageGrid | KupLanguageGrouping | KupLanguagePage | KupLanguageRow | KupLanguageSearch | KupLanguageTotals;
+export type KupLanguageKey = KupLanguageCheckbox | KupLanguageColumn | KupLanguageDashboard | KupLanguageDebug | KupLanguageDensity | KupLanguageFontsize | KupLanguageGeneric | KupLanguageGrid | KupLanguageGrouping | KupLanguagePage | KupLanguageRow | KupLanguageSearch | KupLanguageTotals;
 /**
  * Interface of the languages JSON.
  */

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -836,8 +892,8 @@ export declare namespace JSXBase {
         accept?: string;
         allowdirs?: boolean;
         alt?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
         autoFocus?: boolean;
@@ -1161,8 +1217,8 @@ export declare namespace JSXBase {
         resource?: string;
         typeof?: string;
         vocab?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoCorrect?: string;
         autocorrect?: string;
         autoSave?: string;
@@ -1453,12 +1509,12 @@ export declare namespace JSXBase {
         onCutCapture?: (event: ClipboardEvent) => void;
         onPaste?: (event: ClipboardEvent) => void;
         onPasteCapture?: (event: ClipboardEvent) => void;
-        onCompositionEnd?: (event: CompositionEvent) => void;
-        onCompositionEndCapture?: (event: CompositionEvent) => void;
-        onCompositionStart?: (event: CompositionEvent) => void;
-        onCompositionStartCapture?: (event: CompositionEvent) => void;
-        onCompositionUpdate?: (event: CompositionEvent) => void;
-        onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+        onCompositionend?: (event: CompositionEvent) => void;
+        onCompositionendCapture?: (event: CompositionEvent) => void;
+        onCompositionstart?: (event: CompositionEvent) => void;
+        onCompositionstartCapture?: (event: CompositionEvent) => void;
+        onCompositionupdate?: (event: CompositionEvent) => void;
+        onCompositionupdateCapture?: (event: CompositionEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1469,8 +1525,8 @@ export declare namespace JSXBase {
         onBlurCapture?: (event: FocusEvent) => void;
         onChange?: (event: Event) => void;
         onChangeCapture?: (event: Event) => void;
-        onInput?: (event: Event) => void;
-        onInputCapture?: (event: Event) => void;
+        onInput?: (event: InputEvent) => void;
+        onInputCapture?: (event: InputEvent) => void;
         onReset?: (event: Event) => void;
         onResetCapture?: (event: Event) => void;
         onSubmit?: (event: Event) => void;

package/dist/types/types/GenericTypes.d.ts

@@ -78,6 +78,7 @@ export declare enum KupTagNames {
   DASHBOARD = "KUP-DASHBOARD",
   DATA_TABLE = "KUP-DATA-TABLE",
   DATE_PICKER = "KUP-DATE-PICKER",
+  DIALOG = "KUP-DIALOG",
   DRAWER = "KUP-DRAWER",
   DROPDOWN_BUTTON = "KUP-DROPDOWN-BUTTON",
   FAMILY_TREE = "KUP-FAMILY-TREE",

package/dist/types/utils/filters/filters-declarations.d.ts

@@ -1,3 +1,4 @@
+import { KupListNode } from '../../components/kup-list/kup-list-declarations';
 /**
  * Interface for ranged filters.
  */
@@ -11,6 +12,7 @@ export interface GenericFilter {
 export interface ValueDisplayedValue {
   value: string;
   displayedValue?: string;
+  node?: KupListNode;
 }
 export interface Filter {
   textField: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup",
-    "version": "7.1.1",
+    "version": "7.3.0",
     "keywords": [
         "smeup",
         "KetchUP",
@@ -56,7 +56,7 @@
         "vanilla-picker": "^2.12.1"
     },
     "devDependencies": {
-        "@stencil/core": "^2.20.0",
+        "@stencil/core": "^3.0.1",
         "@stencil/sass": "^1.4.1",
         "@stencil/react-output-target": "0.3.1",
         "@types/d3-shape": "^3.0.2",

package/dist/collection/components/kup-card/built-in/kup-card-form.js

@@ -1,11 +0,0 @@
-import { h } from '@stencil/core';
-import { FButton } from '../../../f-components/f-button/f-button';
-import { FButtonStyling } from '../../../f-components/f-button/f-button-declarations';
-const dom = document.documentElement;
-export function prepareForm(component) {
-  const options = component.data.options;
-  return [
-    h("kup-form", null),
-    h("div", { class: "button-wrapper" }, h(FButton, { icon: "clear", label: "Cancel", styling: FButtonStyling.FLAT }), h(FButton, { icon: "check", label: "Confirm" })),
-  ];
-}