@dso-toolkit/core 45.2.0 → 47.0.0

package/dist/types/components/tree-view/tree-view.d.ts

@@ -1,5 +1,5 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { TreeViewPointerEvent, TreeViewItem } from './tree-view.interfaces';
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { TreeViewPointerEvent, TreeViewItem } from "./tree-view.interfaces";
 export declare class TreeView implements ComponentInterface {
   private tree?;
   /**
@@ -8,21 +8,21 @@ export declare class TreeView implements ComponentInterface {
   collection: TreeViewItem[];
   /**
    * Emitted when a tree view item is opened.
-   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
+   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
    * root to the item that is emitting the open event. The consumer of the event is responsible for updating
    * the TreeView's collection (usually set the open state on the last TreeViewItem in path).
    */
   dsoOpenItem: EventEmitter<TreeViewItem[]>;
   /**
    * Emitted when a tree view item is closed.
-   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
+   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
    * root to the item that is emitting the close event. The consumer of the event is responsible for updating
    * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).
    */
   dsoCloseItem: EventEmitter<TreeViewItem[]>;
   /**
    * Emitted when a tree view item is clicked.
-   * The `detail` property of the `CustomEvent` will contain an object with:
+   * The `detail` property of the `CustomEvent` will contain an object with:
    * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.
    * `originalEvent` = the original click event.
    * The consumer of the event is responsible for updating the TreeView's collection (usually set the active

package/dist/types/components/viewer-grid/viewer-grid-filterpanel-buttons.d.ts

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from '../../stencil-public-runtime';
+import { FunctionalComponent } from "../../stencil-public-runtime";
 export interface ViewerGridFilterpanelProps {
   onApply: (mouseEvent: MouseEvent) => void;
   onCancel: (mouseEvent: MouseEvent) => void;

package/dist/types/components/viewer-grid/viewer-grid.d.ts

@@ -8,7 +8,7 @@ export interface ViewerGridChangeSizeEvent {
   /**
    * Indicates whether it's before or after the animation
    */
-  stage: 'start' | 'end';
+  stage: "start" | "end";
   previousSize: MainSize;
   currentSize: MainSize;
 }
@@ -17,6 +17,7 @@ export interface FilterpanelEvent {
 }
 export declare class ViewerGrid {
   private sizeLabelMap;
+  private mapPanel?;
   filterpanelOpen: boolean;
   overlayOpen: boolean;
   /**

package/dist/types/components.d.ts

@@ -7,11 +7,15 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionHeading, AccordionInternalState, AccordionSectionState, AccordionSectionToggleEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
 import { Suggestion } from "./components/autosuggest/autosuggest";
+import { DsoCardClickedEvent } from "./components/card/card.interfaces";
+import { CardContainerMode } from "./components/card-container/card-container.interfaces";
 import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker";
 import { HeaderClickEvent, HeaderClickMenuItemEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button";
 import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
+import { ModalRole } from "@dso-toolkit/sources";
+import { DsoModalCloseEvent } from "./components/modal/modal";
 import { OzonContentAnchorClick, OzonContentClick } from "./components/ozon-content/ozon-content.interfaces";
 import { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
 import { ResponsiveElementSize } from "./components/responsive-element/responsive-element.interfaces";
@@ -36,7 +40,7 @@ export namespace Components {
         /**
           * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
          */
-        "toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent | undefined) => Promise<void>;
+        "toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<void>;
         "variant"?: AccordionVariant;
     }
     interface DsoAccordionSection {
@@ -70,7 +74,7 @@ export namespace Components {
         /**
           * Set status of alert
          */
-        "status": 'success' | 'info' | 'warning' | 'danger';
+        "status": "success" | "info" | "warning" | "error";
     }
     interface DsoAttachmentsCounter {
         "count": number;
@@ -102,10 +106,17 @@ export namespace Components {
         "suggestions": Suggestion[] | null;
     }
     interface DsoBadge {
-        "status"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'outline';
+        "status"?: "primary" | "success" | "info" | "warning" | "danger" | "outline";
     }
     interface DsoBanner {
-        "status": 'warning' | 'danger';
+        "status": "warning" | "danger";
+    }
+    interface DsoCard {
+        "hasImage": boolean;
+        "isSelectable": boolean;
+    }
+    interface DsoCardContainer {
+        "mode": CardContainerMode;
     }
     interface DsoDatePicker {
         /**
@@ -179,7 +190,7 @@ export namespace Components {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
          */
-        "authStatus": 'none' | 'loggedIn' | 'loggedOut';
+        "authStatus": "none" | "loggedIn" | "loggedOut";
         /**
           * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.
          */
@@ -220,7 +231,7 @@ export namespace Components {
     interface DsoLabel {
         "compact"?: boolean;
         "removable"?: boolean;
-        "status"?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'bright';
+        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "bright";
         "truncate"?: boolean;
     }
     interface DsoMapBaseLayers {
@@ -228,13 +239,24 @@ export namespace Components {
         "group": string;
     }
     interface DsoMapControls {
-        "disableZoom"?: 'in' | 'out' | 'both';
+        "disableZoom"?: "in" | "out" | "both";
         "open": boolean;
     }
     interface DsoMapOverlays {
         "group": string;
         "overlays": Overlay[];
     }
+    interface DsoModal {
+        "modalTitle"?: string;
+        /**
+          * the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog`
+         */
+        "role": ModalRole;
+        /**
+          * when `false` the close button in the header will not be rendered. Defaults to `true`
+         */
+        "showCloseButton": boolean;
+    }
     interface DsoOzonContent {
         /**
           * The XML to be rendered.
@@ -251,7 +273,7 @@ export namespace Components {
         /**
           * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.  **Do not** use this without an accessible companion element! `interactive` is only meant to ease the use of the companion element for mouse/touch users.  * `true`: Interactive anchor-look-alike * `"sub"`: Interactive anchor-look-alike for sub navigation * `false | undefined`: Disabled
          */
-        "interactive": 'sub' | '' | boolean;
+        "interactive": "sub" | "" | boolean;
     }
     interface DsoPagination {
         /**
@@ -275,7 +297,7 @@ export namespace Components {
     interface DsoProgressIndicator {
         "block"?: boolean;
         "label"?: string;
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: "small" | "medium" | "large";
     }
     interface DsoResponsiveElement {
         "getSize": () => Promise<ResponsiveElementSize>;
@@ -290,8 +312,8 @@ export namespace Components {
         "invalid"?: boolean;
         "name"?: string;
         "required"?: boolean;
-        "toggleInfo": (active?: boolean | undefined) => Promise<void>;
-        "type": 'checkbox' | 'radio';
+        "toggleInfo": (active?: boolean) => Promise<void>;
+        "type": "checkbox" | "radio";
         "value": string;
     }
     interface DsoTable {
@@ -338,7 +360,7 @@ export namespace Components {
         /**
           * Set position of tooltip relative to target
          */
-        "position": 'top' | 'right' | 'bottom' | 'left';
+        "position": "top" | "right" | "bottom" | "left";
         /**
           * Defines if the tooltip has a smaller max-width
          */
@@ -350,7 +372,7 @@ export namespace Components {
         /**
           * Set position strategy of tooltip
          */
-        "strategy": 'auto' | 'absolute' | 'fixed';
+        "strategy": "auto" | "absolute" | "fixed";
     }
     interface DsoTreeView {
         /**
@@ -373,6 +395,78 @@ export namespace Components {
         "overlayOpen": boolean;
     }
 }
+export interface DsoAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoAccordionElement;
+}
+export interface DsoAutosuggestCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoAutosuggestElement;
+}
+export interface DsoCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoCardElement;
+}
+export interface DsoDatePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoDatePickerElement;
+}
+export interface DsoHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoHeaderElement;
+}
+export interface DsoInfoCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoInfoElement;
+}
+export interface DsoInfoButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoInfoButtonElement;
+}
+export interface DsoLabelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoLabelElement;
+}
+export interface DsoMapBaseLayersCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoMapBaseLayersElement;
+}
+export interface DsoMapControlsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoMapControlsElement;
+}
+export interface DsoMapOverlaysCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoMapOverlaysElement;
+}
+export interface DsoModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoModalElement;
+}
+export interface DsoOzonContentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoOzonContentElement;
+}
+export interface DsoPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoPaginationElement;
+}
+export interface DsoResponsiveElementCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoResponsiveElementElement;
+}
+export interface DsoSelectableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoSelectableElement;
+}
+export interface DsoTreeViewCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoTreeViewElement;
+}
+export interface DsoViewerGridCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoViewerGridElement;
+}
 declare global {
     interface HTMLDsoAccordionElement extends Components.DsoAccordion, HTMLStencilElement {
     }
@@ -416,6 +510,18 @@ declare global {
         prototype: HTMLDsoBannerElement;
         new (): HTMLDsoBannerElement;
     };
+    interface HTMLDsoCardElement extends Components.DsoCard, HTMLStencilElement {
+    }
+    var HTMLDsoCardElement: {
+        prototype: HTMLDsoCardElement;
+        new (): HTMLDsoCardElement;
+    };
+    interface HTMLDsoCardContainerElement extends Components.DsoCardContainer, HTMLStencilElement {
+    }
+    var HTMLDsoCardContainerElement: {
+        prototype: HTMLDsoCardContainerElement;
+        new (): HTMLDsoCardContainerElement;
+    };
     interface HTMLDsoDatePickerElement extends Components.DsoDatePicker, HTMLStencilElement {
     }
     var HTMLDsoDatePickerElement: {
@@ -494,6 +600,12 @@ declare global {
         prototype: HTMLDsoMapOverlaysElement;
         new (): HTMLDsoMapOverlaysElement;
     };
+    interface HTMLDsoModalElement extends Components.DsoModal, HTMLStencilElement {
+    }
+    var HTMLDsoModalElement: {
+        prototype: HTMLDsoModalElement;
+        new (): HTMLDsoModalElement;
+    };
     interface HTMLDsoOzonContentElement extends Components.DsoOzonContent, HTMLStencilElement {
     }
     var HTMLDsoOzonContentElement: {
@@ -568,6 +680,8 @@ declare global {
         "dso-autosuggest": HTMLDsoAutosuggestElement;
         "dso-badge": HTMLDsoBadgeElement;
         "dso-banner": HTMLDsoBannerElement;
+        "dso-card": HTMLDsoCardElement;
+        "dso-card-container": HTMLDsoCardContainerElement;
         "dso-date-picker": HTMLDsoDatePickerElement;
         "dso-dropdown-menu": HTMLDsoDropdownMenuElement;
         "dso-header": HTMLDsoHeaderElement;
@@ -581,6 +695,7 @@ declare global {
         "dso-map-base-layers": HTMLDsoMapBaseLayersElement;
         "dso-map-controls": HTMLDsoMapControlsElement;
         "dso-map-overlays": HTMLDsoMapOverlaysElement;
+        "dso-modal": HTMLDsoModalElement;
         "dso-ozon-content": HTMLDsoOzonContentElement;
         "dso-pagination": HTMLDsoPaginationElement;
         "dso-progress-bar": HTMLDsoProgressBarElement;
@@ -603,7 +718,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when a section is toggled.  `event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header `event.detail.section` contains the toggled section and its new opened value.\ `event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion.
          */
-        "onDsoToggleSection"?: (event: CustomEvent<AccordionSectionToggleEvent>) => void;
+        "onDsoToggleSection"?: (event: DsoAccordionCustomEvent<AccordionSectionToggleEvent>) => void;
         /**
           * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements
          */
@@ -637,7 +752,7 @@ declare namespace LocalJSX {
         /**
           * Set status of alert
          */
-        "status": 'success' | 'info' | 'warning' | 'danger';
+        "status": "success" | "info" | "warning" | "error";
     }
     interface DsoAttachmentsCounter {
         "count": number;
@@ -662,15 +777,15 @@ declare namespace LocalJSX {
         /**
           * This is emitted debounced for every change for the slotted input type=text element.
          */
-        "onDsoChange"?: (event: CustomEvent<string>) => void;
+        "onDsoChange"?: (event: DsoAutosuggestCustomEvent<string>) => void;
         /**
-          * Emitted when enter is pressed. The `detail` property of the `CustomEvent` will contain the input text.
+          * Emitted when enter is pressed. The `detail` property of the `CustomEvent` will contain the input text.
          */
-        "onDsoSearch"?: (event: CustomEvent<string>) => void;
+        "onDsoSearch"?: (event: DsoAutosuggestCustomEvent<string>) => void;
         /**
-          * Emitted when a suggestion is selected. The `detail` property of the `CustomEvent` will contain the selected suggestion.
+          * Emitted when a suggestion is selected. The `detail` property of the `CustomEvent` will contain the selected suggestion.
          */
-        "onDsoSelect"?: (event: CustomEvent<Suggestion>) => void;
+        "onDsoSelect"?: (event: DsoAutosuggestCustomEvent<Suggestion>) => void;
         /**
           * Whether the previous suggestions will be presented when the input gets focus again.
          */
@@ -681,10 +796,18 @@ declare namespace LocalJSX {
         "suggestions"?: Suggestion[] | null;
     }
     interface DsoBadge {
-        "status"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'outline';
+        "status"?: "primary" | "success" | "info" | "warning" | "danger" | "outline";
     }
     interface DsoBanner {
-        "status": 'warning' | 'danger';
+        "status": "warning" | "danger";
+    }
+    interface DsoCard {
+        "hasImage"?: boolean;
+        "isSelectable"?: boolean;
+        "onDsoCardClicked"?: (event: DsoCardCustomEvent<DsoCardClickedEvent>) => void;
+    }
+    interface DsoCardContainer {
+        "mode"?: CardContainerMode;
     }
     interface DsoDatePicker {
         /**
@@ -718,23 +841,23 @@ declare namespace LocalJSX {
         /**
           * Event emitted the date picker input is blurred.
          */
-        "onDsoBlur"?: (event: CustomEvent<DsoDatePickerFocusEvent>) => void;
+        "onDsoBlur"?: (event: DsoDatePickerCustomEvent<DsoDatePickerFocusEvent>) => void;
         /**
           * Event emitted when a date is selected.
          */
-        "onDsoDateChange"?: (event: CustomEvent<DsoDatePickerChangeEvent>) => void;
+        "onDsoDateChange"?: (event: DsoDatePickerCustomEvent<DsoDatePickerChangeEvent>) => void;
         /**
           * Event emitted the date picker input is focused.
          */
-        "onDsoFocus"?: (event: CustomEvent<DsoDatePickerFocusEvent>) => void;
+        "onDsoFocus"?: (event: DsoDatePickerCustomEvent<DsoDatePickerFocusEvent>) => void;
         /**
           * Event emitted on key down in the date picker input.
          */
-        "onDsoKeyDown"?: (event: CustomEvent<DsoDatePickerKeyboardEvent>) => void;
+        "onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<DsoDatePickerKeyboardEvent>) => void;
         /**
           * Event emitted on key up in the date picker input.
          */
-        "onDsoKeyUp"?: (event: CustomEvent<DsoDatePickerKeyboardEvent>) => void;
+        "onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DsoDatePickerKeyboardEvent>) => void;
         /**
           * Should the input be marked as required?
          */
@@ -766,7 +889,7 @@ declare namespace LocalJSX {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
          */
-        "authStatus"?: 'none' | 'loggedIn' | 'loggedOut';
+        "authStatus"?: "none" | "loggedIn" | "loggedOut";
         /**
           * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.
          */
@@ -776,7 +899,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when something in the header is selected.  `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`
          */
-        "onDsoHeaderClick"?: (event: CustomEvent<HeaderClickEvent | HeaderClickMenuItemEvent>) => void;
+        "onDsoHeaderClick"?: (event: DsoHeaderCustomEvent<HeaderClickEvent | HeaderClickMenuItemEvent>) => void;
         "useDropDownMenu"?: "always" | "never" | "auto";
         "userHomeUrl"?: string;
         "userProfileName"?: string;
@@ -801,37 +924,49 @@ declare namespace LocalJSX {
     interface DsoInfo {
         "active"?: boolean;
         "fixed"?: boolean;
-        "onDsoClose"?: (event: CustomEvent<MouseEvent>) => void;
+        "onDsoClose"?: (event: DsoInfoCustomEvent<MouseEvent>) => void;
     }
     interface DsoInfoButton {
         "active"?: boolean;
         "label"?: string;
-        "onDsoToggle"?: (event: CustomEvent<InfoButtonToggleEvent>) => void;
+        "onDsoToggle"?: (event: DsoInfoButtonCustomEvent<InfoButtonToggleEvent>) => void;
         "secondary"?: boolean;
     }
     interface DsoLabel {
         "compact"?: boolean;
-        "onDsoRemoveClick"?: (event: CustomEvent<MouseEvent>) => void;
+        "onDsoRemoveClick"?: (event: DsoLabelCustomEvent<MouseEvent>) => void;
         "removable"?: boolean;
-        "status"?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'bright';
+        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "bright";
         "truncate"?: boolean;
     }
     interface DsoMapBaseLayers {
         "baseLayers": BaseLayer[];
         "group"?: string;
-        "onDsoBaseLayerChange"?: (event: CustomEvent<BaseLayerChangeEvent>) => void;
+        "onDsoBaseLayerChange"?: (event: DsoMapBaseLayersCustomEvent<BaseLayerChangeEvent>) => void;
     }
     interface DsoMapControls {
-        "disableZoom"?: 'in' | 'out' | 'both';
-        "onDsoZoomIn"?: (event: CustomEvent<MouseEvent>) => void;
-        "onDsoZoomOut"?: (event: CustomEvent<MouseEvent>) => void;
+        "disableZoom"?: "in" | "out" | "both";
+        "onDsoZoomIn"?: (event: DsoMapControlsCustomEvent<MouseEvent>) => void;
+        "onDsoZoomOut"?: (event: DsoMapControlsCustomEvent<MouseEvent>) => void;
         "open"?: boolean;
     }
     interface DsoMapOverlays {
         "group"?: string;
-        "onDsoToggleOverlay"?: (event: CustomEvent<OverlayChangeEvent>) => void;
+        "onDsoToggleOverlay"?: (event: DsoMapOverlaysCustomEvent<OverlayChangeEvent>) => void;
         "overlays": Overlay[];
     }
+    interface DsoModal {
+        "modalTitle"?: string;
+        "onDsoClose"?: (event: DsoModalCustomEvent<DsoModalCloseEvent>) => void;
+        /**
+          * the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog`
+         */
+        "role"?: ModalRole;
+        /**
+          * when `false` the close button in the header will not be rendered. Defaults to `true`
+         */
+        "showCloseButton"?: boolean;
+    }
     interface DsoOzonContent {
         /**
           * The XML to be rendered.
@@ -848,12 +983,12 @@ declare namespace LocalJSX {
         /**
           * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.  **Do not** use this without an accessible companion element! `interactive` is only meant to ease the use of the companion element for mouse/touch users.  * `true`: Interactive anchor-look-alike * `"sub"`: Interactive anchor-look-alike for sub navigation * `false | undefined`: Disabled
          */
-        "interactive"?: 'sub' | '' | boolean;
-        "onDsoAnchorClick"?: (event: CustomEvent<OzonContentAnchorClick>) => void;
+        "interactive"?: "sub" | "" | boolean;
+        "onDsoAnchorClick"?: (event: DsoOzonContentCustomEvent<OzonContentAnchorClick>) => void;
         /**
           * These events are only emitted when the component is `interactive`.
          */
-        "onDsoClick"?: (event: CustomEvent<OzonContentClick>) => void;
+        "onDsoClick"?: (event: DsoOzonContentCustomEvent<OzonContentClick>) => void;
     }
     interface DsoPagination {
         /**
@@ -867,7 +1002,7 @@ declare namespace LocalJSX {
         /**
           * Emitted on page select
          */
-        "onDsoSelectPage"?: (event: CustomEvent<PaginationSelectPageEvent>) => void;
+        "onDsoSelectPage"?: (event: DsoPaginationCustomEvent<PaginationSelectPageEvent>) => void;
         /**
           * Total pages
          */
@@ -881,10 +1016,10 @@ declare namespace LocalJSX {
     interface DsoProgressIndicator {
         "block"?: boolean;
         "label"?: string;
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: "small" | "medium" | "large";
     }
     interface DsoResponsiveElement {
-        "onDsoSizeChange"?: (event: CustomEvent<ResponsiveElementSize>) => void;
+        "onDsoSizeChange"?: (event: DsoResponsiveElementCustomEvent<ResponsiveElementSize>) => void;
     }
     interface DsoSelectable {
         "checked"?: boolean;
@@ -895,9 +1030,9 @@ declare namespace LocalJSX {
         "infoFixed"?: boolean;
         "invalid"?: boolean;
         "name"?: string;
-        "onDsoChange"?: (event: CustomEvent<SelectableChangeEvent>) => void;
+        "onDsoChange"?: (event: DsoSelectableCustomEvent<SelectableChangeEvent>) => void;
         "required"?: boolean;
-        "type": 'checkbox' | 'radio';
+        "type": "checkbox" | "radio";
         "value": string;
     }
     interface DsoTable {
@@ -936,7 +1071,7 @@ declare namespace LocalJSX {
         /**
           * Set position of tooltip relative to target
          */
-        "position"?: 'top' | 'right' | 'bottom' | 'left';
+        "position"?: "top" | "right" | "bottom" | "left";
         /**
           * Defines if the tooltip has a smaller max-width
          */
@@ -948,7 +1083,7 @@ declare namespace LocalJSX {
         /**
           * Set position strategy of tooltip
          */
-        "strategy"?: 'auto' | 'absolute' | 'fixed';
+        "strategy"?: "auto" | "absolute" | "fixed";
     }
     interface DsoTreeView {
         /**
@@ -956,17 +1091,17 @@ declare namespace LocalJSX {
          */
         "collection": TreeViewItem[];
         /**
-          * Emitted when a tree view item is clicked. The `detail` property of the `CustomEvent` will contain an object with: `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event. `originalEvent` = the original click event. The consumer of the event is responsible for updating the TreeView's collection (usually set the active state on the last TreeViewItem in path and clear all other active item states).
+          * Emitted when a tree view item is clicked. The `detail` property of the `CustomEvent` will contain an object with: `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event. `originalEvent` = the original click event. The consumer of the event is responsible for updating the TreeView's collection (usually set the active state on the last TreeViewItem in path and clear all other active item states).
          */
-        "onDsoClickItem"?: (event: CustomEvent<TreeViewPointerEvent>) => void;
+        "onDsoClickItem"?: (event: DsoTreeViewCustomEvent<TreeViewPointerEvent>) => void;
         /**
-          * Emitted when a tree view item is closed. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the close event. The consumer of the event is responsible for updating the TreeView's collection (usually set the closed state on the last TreeViewItem in path).
+          * Emitted when a tree view item is closed. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the close event. The consumer of the event is responsible for updating the TreeView's collection (usually set the closed state on the last TreeViewItem in path).
          */
-        "onDsoCloseItem"?: (event: CustomEvent<TreeViewItem[]>) => void;
+        "onDsoCloseItem"?: (event: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
         /**
-          * Emitted when a tree view item is opened. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the open event. The consumer of the event is responsible for updating the TreeView's collection (usually set the open state on the last TreeViewItem in path).
+          * Emitted when a tree view item is opened. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the open event. The consumer of the event is responsible for updating the TreeView's collection (usually set the open state on the last TreeViewItem in path).
          */
-        "onDsoOpenItem"?: (event: CustomEvent<TreeViewItem[]>) => void;
+        "onDsoOpenItem"?: (event: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
     }
     interface DsoViewerGrid {
         "filterpanelOpen"?: boolean;
@@ -974,10 +1109,10 @@ declare namespace LocalJSX {
           * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
          */
         "initialMainSize"?: MainSize;
-        "onDsoCloseOverlay"?: (event: CustomEvent<MouseEvent | KeyboardEvent>) => void;
-        "onDsoFilterpanelApply"?: (event: CustomEvent<FilterpanelEvent>) => void;
-        "onDsoFilterpanelCancel"?: (event: CustomEvent<FilterpanelEvent>) => void;
-        "onDsoMainSizeChange"?: (event: CustomEvent<ViewerGridChangeSizeEvent>) => void;
+        "onDsoCloseOverlay"?: (event: DsoViewerGridCustomEvent<MouseEvent | KeyboardEvent>) => void;
+        "onDsoFilterpanelApply"?: (event: DsoViewerGridCustomEvent<FilterpanelEvent>) => void;
+        "onDsoFilterpanelCancel"?: (event: DsoViewerGridCustomEvent<FilterpanelEvent>) => void;
+        "onDsoMainSizeChange"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeEvent>) => void;
         "overlayOpen"?: boolean;
     }
     interface IntrinsicElements {
@@ -988,6 +1123,8 @@ declare namespace LocalJSX {
         "dso-autosuggest": DsoAutosuggest;
         "dso-badge": DsoBadge;
         "dso-banner": DsoBanner;
+        "dso-card": DsoCard;
+        "dso-card-container": DsoCardContainer;
         "dso-date-picker": DsoDatePicker;
         "dso-dropdown-menu": DsoDropdownMenu;
         "dso-header": DsoHeader;
@@ -1001,6 +1138,7 @@ declare namespace LocalJSX {
         "dso-map-base-layers": DsoMapBaseLayers;
         "dso-map-controls": DsoMapControls;
         "dso-map-overlays": DsoMapOverlays;
+        "dso-modal": DsoModal;
         "dso-ozon-content": DsoOzonContent;
         "dso-pagination": DsoPagination;
         "dso-progress-bar": DsoProgressBar;
@@ -1025,6 +1163,8 @@ declare module "@stencil/core" {
             "dso-autosuggest": LocalJSX.DsoAutosuggest & JSXBase.HTMLAttributes<HTMLDsoAutosuggestElement>;
             "dso-badge": LocalJSX.DsoBadge & JSXBase.HTMLAttributes<HTMLDsoBadgeElement>;
             "dso-banner": LocalJSX.DsoBanner & JSXBase.HTMLAttributes<HTMLDsoBannerElement>;
+            "dso-card": LocalJSX.DsoCard & JSXBase.HTMLAttributes<HTMLDsoCardElement>;
+            "dso-card-container": LocalJSX.DsoCardContainer & JSXBase.HTMLAttributes<HTMLDsoCardContainerElement>;
             "dso-date-picker": LocalJSX.DsoDatePicker & JSXBase.HTMLAttributes<HTMLDsoDatePickerElement>;
             "dso-dropdown-menu": LocalJSX.DsoDropdownMenu & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuElement>;
             "dso-header": LocalJSX.DsoHeader & JSXBase.HTMLAttributes<HTMLDsoHeaderElement>;
@@ -1038,6 +1178,7 @@ declare module "@stencil/core" {
             "dso-map-base-layers": LocalJSX.DsoMapBaseLayers & JSXBase.HTMLAttributes<HTMLDsoMapBaseLayersElement>;
             "dso-map-controls": LocalJSX.DsoMapControls & JSXBase.HTMLAttributes<HTMLDsoMapControlsElement>;
             "dso-map-overlays": LocalJSX.DsoMapOverlays & JSXBase.HTMLAttributes<HTMLDsoMapOverlaysElement>;
+            "dso-modal": LocalJSX.DsoModal & JSXBase.HTMLAttributes<HTMLDsoModalElement>;
             "dso-ozon-content": LocalJSX.DsoOzonContent & JSXBase.HTMLAttributes<HTMLDsoOzonContentElement>;
             "dso-pagination": LocalJSX.DsoPagination & JSXBase.HTMLAttributes<HTMLDsoPaginationElement>;
             "dso-progress-bar": LocalJSX.DsoProgressBar & JSXBase.HTMLAttributes<HTMLDsoProgressBarElement>;