@dso-toolkit/core 47.0.1 → 49.0.0

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-1a4dda48.js';
 
 /*
- Stencil Client Patch Esm v2.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"closeOpenSections":[64]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"closeOpenSections":[64]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

package/dist/types/components/accordion/accordion.d.ts

@@ -18,12 +18,17 @@ export declare class Accordion implements ComponentInterface, AccordionInterface
   dsoToggleSection: EventEmitter<AccordionSectionToggleEvent>;
   updateVariant(variant?: AccordionVariant): void;
   updateReverseAlign(reverseAlign: boolean): void;
+  updateAllowMultipleOpen(allowMultipleOpen: boolean): void;
   watchAllowMultiple(allowMultipleOpen: boolean): void;
   getState(): Promise<AccordionInternalState>;
-  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
-  toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<void>;
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\
+   * returns `undefined` when no section is toggled.\
+   * returns `true` when the section is opened and `false` when the section is closed.
+   */
+  toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<undefined | boolean>;
   /** Closes all sections belonging to this accordion. */
   closeOpenSections(): Promise<void>;
+  componentWillLoad(): void;
   constructor();
   render(): any;
   private emitToggleEvent;

package/dist/types/components/accordion/accordion.interfaces.d.ts

@@ -1,13 +1,16 @@
 export declare type AccordionVariant = "default" | "compact" | "conclusion";
-export declare type AccordionSectionState = "success" | "info" | "warning" | "danger";
-export declare type AccordionHeading = "h2" | "h3" | "h4" | "h5";
 export interface AccordionInternalState {
   variant: AccordionVariant;
   reverseAlign: boolean;
+  allowMultipleOpen: boolean;
 }
 export interface AccordionInterface {
   getState(): Promise<AccordionInternalState>;
-  toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<void>;
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\
+   * returns `undefined` when no section is tiggled.\
+   * returns `true` when the section is opened and `false` when the section is closed.
+   */
+  toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<undefined | boolean>;
 }
 export interface AccordionSectionToggleEvent {
   /** When the section is toggled by clicking in the header the `MouseEvent` is available. */

package/dist/types/components/accordion/components/accordion-section.d.ts

@@ -1,8 +1,14 @@
 import { ComponentInterface } from "../../../stencil-public-runtime";
-import { AccordionHeading, AccordionSectionState } from "../accordion.interfaces";
+import { AccordionHeading, AccordionSectionState } from "./accordion-section.interfaces";
 export declare class AccordionSection implements ComponentInterface {
+  private static scrollCandidate?;
   private accordion?;
   private accordionState?;
+  private animeInstance?;
+  private sectionBody?;
+  private sectionHeading?;
+  private resizeObserver?;
+  private bodyHeight?;
   host: HTMLElement;
   handleTitle?: string;
   heading: AccordionHeading;
@@ -16,10 +22,20 @@ export declare class AccordionSection implements ComponentInterface {
   status?: string;
   open: boolean;
   hasNestedSection: boolean;
+  toggleOpen(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
-  /** Toggle this section */
-  toggleSection(): Promise<void>;
+  disconnectedCallback(): void;
+  /** Toggle this section.
+   * @param scrollIntoView boolean - defaults to true
+   */
+  toggleSection(scrollIntoView?: boolean): Promise<void>;
+  /** Scroll this section into view when needed. */
+  scrollSectionIntoView(): Promise<void>;
+  private scrollIntoViewWhenNeeded;
   private toggle;
   render(): any;
+  private prepareAnimationResizeObserver;
+  private instantiateAnimation;
+  private activateAnimation;
 }

package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts

@@ -0,0 +1,3 @@
+export declare type AccordionSectionState = "success" | "info" | "warning" | "danger";
+export declare type AccordionHeading = "h2" | "h3" | "h4" | "h5";
+export declare const stateMap: Record<AccordionSectionState, string>;

package/dist/types/components/accordion/components/handles/element.handle.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../../../../stencil-public-runtime";
+export declare const HandleElement: FunctionalComponent<{
+  handleUrl: string | undefined;
+  open: boolean;
+  onClick: (e: MouseEvent) => void;
+}>;

package/dist/types/components/accordion/components/handles/heading.handle.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../../../../stencil-public-runtime";
+import { AccordionHeading } from "../accordion-section.interfaces";
+export declare const Handle: FunctionalComponent<{
+  heading: AccordionHeading;
+  ref: (element: HTMLHeadingElement | undefined) => void;
+}>;

package/dist/types/components/accordion/components/handles/icon.handle.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from "../../../../stencil-public-runtime";
+import { AccordionSectionState } from "../accordion-section.interfaces";
+export declare const HandleIcon: FunctionalComponent<{
+  state?: AccordionSectionState;
+  icon?: string;
+  attachmentCount?: number;
+}>;

package/dist/types/components/accordion/components/handles/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./element.handle";
+export * from "./heading.handle";
+export * from "./icon.handle";
+export * from "./state-icon.handle";

package/dist/types/components/accordion/components/handles/state-icon.handle.d.ts

@@ -0,0 +1,5 @@
+import { FunctionalComponent } from "../../../../stencil-public-runtime";
+import { AccordionSectionState } from "../accordion-section.interfaces";
+export declare const HandleStateIcon: FunctionalComponent<{
+  state: AccordionSectionState;
+}>;

package/dist/types/components/autosuggest/autosuggest.d.ts

@@ -1,18 +1,5 @@
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
-export interface Suggestion {
-  /**
-   * The text that will be displayed as the suggestion.
-   */
-  value: string;
-  /**
-   * The type of suggestion.
-   */
-  type?: string;
-  /**
-   * A reference to the original object that was used to create the suggestion.
-   */
-  item?: unknown;
-}
+import { Suggestion } from "./autosuggest.interfaces";
 export declare class Autosuggest {
   /**
    * The suggestions for the value of the slotted input element. Optionally a
@@ -64,7 +51,7 @@ export declare class Autosuggest {
   notFound: boolean;
   showLoading: boolean;
   suggestionsWatcher(): void;
-  input: HTMLInputElement;
+  input?: HTMLInputElement;
   listbox: HTMLUListElement | undefined;
   listboxId: string;
   inputId: string;

package/dist/types/components/autosuggest/autosuggest.interfaces.d.ts

@@ -0,0 +1,14 @@
+export interface Suggestion {
+  /**
+   * The text that will be displayed as the suggestion.
+   */
+  value: string;
+  /**
+   * The type of suggestion.
+   */
+  type?: string;
+  /**
+   * A reference to the original object that was used to create the suggestion.
+   */
+  item?: unknown;
+}

package/dist/types/components/date-picker/date-picker.d.ts

@@ -1,18 +1,5 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-export declare type DsoDatePickerChangeEvent = {
-  component: "dso-date-picker";
-  valueAsDate: Date | undefined;
-  value: string;
-  error?: "invalid" | "required" | "min-range" | "max-range";
-};
-export declare type DsoDatePickerFocusEvent = {
-  component: "dso-date-picker";
-};
-export declare type DsoDatePickerKeyboardEvent = {
-  component: "dso-date-picker";
-  originalEvent: KeyboardEvent;
-};
-export declare type DsoDatePickerDirection = "left" | "right";
+import { DsoDatePickerDirection, DsoDatePickerChangeEvent, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./date-picker.interfaces";
 export declare class DsoDatePicker implements ComponentInterface {
   /**
    * Own Properties
@@ -62,7 +49,7 @@ export declare class DsoDatePicker implements ComponentInterface {
   /**
    * Defines a specific role attribute for the date picker input.
    */
-  role: string | undefined;
+  role: string | null;
   /**
    * Forces the opening direction of the calendar modal to be always left or right.
    * This setting can be useful when the input is smaller than the opening date picker

package/dist/types/components/date-picker/date-picker.interfaces.d.ts

@@ -0,0 +1,14 @@
+export declare type DsoDatePickerChangeEvent = {
+  component: "dso-date-picker";
+  valueAsDate: Date | undefined;
+  value: string;
+  error?: "invalid" | "required" | "min-range" | "max-range";
+};
+export declare type DsoDatePickerFocusEvent = {
+  component: "dso-date-picker";
+};
+export declare type DsoDatePickerKeyboardEvent = {
+  component: "dso-date-picker";
+  originalEvent: KeyboardEvent;
+};
+export declare type DsoDatePickerDirection = "left" | "right";

package/dist/types/components/dropdown-menu/dropdown-menu.d.ts

@@ -16,7 +16,7 @@ export declare class DropdownMenu {
   host: HTMLElement;
   get button(): HTMLButtonElement;
   get tabbables(): FocusableElement[];
-  connectedCallback(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   focusOutListener: (event: FocusEvent) => void;
   keyDownListener: (event: KeyboardEvent) => void;

package/dist/types/components/header/header.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { HeaderMenuItem, HeaderClickEvent, HeaderClickMenuItemEvent } from "./header.interfaces";
+import { HeaderMenuItem, HeaderEvent } from "./header.interfaces";
 export declare class Header {
   private clickHandler;
   host: HTMLElement;
@@ -21,7 +21,7 @@ export declare class Header {
    *
    * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`
    */
-  dsoHeaderClick: EventEmitter<HeaderClickEvent | HeaderClickMenuItemEvent>;
+  dsoHeaderClick: EventEmitter<HeaderEvent>;
   setShowDropDown(value: "always" | "never" | "auto"): void;
   wrapper: HTMLDivElement | undefined;
   nav: HTMLUListElement | undefined;

package/dist/types/components/header/header.interfaces.d.ts

@@ -15,3 +15,4 @@ export interface HeaderClickEvent {
 export interface HeaderClickMenuItemEvent extends HeaderClickEvent {
   menuItem: HeaderMenuItem;
 }
+export declare type HeaderEvent = HeaderClickEvent | HeaderClickMenuItemEvent;

package/dist/types/components/info-button/info-button.d.ts

@@ -1,8 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-export interface InfoButtonToggleEvent {
-  originalEvent: MouseEvent;
-  active: boolean;
-}
+import { InfoButtonToggleEvent } from "./info-button.interfaces";
 export declare class InfoButton {
   private button?;
   active?: boolean;

package/dist/types/components/info-button/info-button.interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface InfoButtonToggleEvent {
+  originalEvent: MouseEvent;
+  active: boolean;
+}

package/dist/types/components/map-overlays/map-overlays.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, ComponentInterface } from "../../stencil-public-runtime";
 import { Overlay, OverlayChangeEvent } from "./map-overlays.interfaces";
-import { SelectableChangeEvent } from "../selectable/selectable";
+import { SelectableChangeEvent } from "../selectable/selectable.interfaces";
 export declare class MapOverlays implements ComponentInterface {
   previousOverlays: Overlay[] | undefined;
   selectableRefs: {

package/dist/types/components/modal/modal.d.ts

@@ -1,12 +1,10 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-export interface DsoModalCloseEvent {
-  originalEvent?: MouseEvent;
-}
+import { DsoModalCloseEvent } from "./modal.interfaces";
 export declare type ModalRole = "alert" | "dialog" | "alertdialog";
 export declare class Modal implements ComponentInterface {
-  private static modalOpenClass;
   private trap?;
   private dialogElement?;
+  private modalElement?;
   host: HTMLElement;
   ariaId: string;
   hasFooter?: boolean;

package/dist/types/components/modal/modal.interfaces.d.ts

@@ -0,0 +1,3 @@
+export interface DsoModalCloseEvent {
+  originalEvent?: MouseEvent;
+}

package/dist/types/components/selectable/selectable.d.ts

@@ -1,6 +1,5 @@
-export interface SelectableChangeEvent extends Event {
-}
 import { EventEmitter } from "../../stencil-public-runtime";
+import { SelectableChangeEvent } from "./selectable.interfaces";
 export declare class Selectable {
   type: "checkbox" | "radio";
   identifier?: string;

package/dist/types/components/selectable/selectable.interfaces.d.ts

@@ -0,0 +1,2 @@
+export interface SelectableChangeEvent extends Event {
+}

package/dist/types/components/table/table.d.ts

@@ -7,7 +7,7 @@ export declare class Table implements ComponentInterface, TableInterface {
   private trap?;
   private labelledbyId;
   host: HTMLElement;
-  /** Prevents the table being   opened in a modal. */
+  /** Prevents the table being opened in a modal. */
   noModal: boolean;
   /** Indicates whether the table is currently horizontally scrollable */
   isResponsive: boolean;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -11,14 +11,6 @@ export declare class Tooltip {
    * Set position strategy of tooltip
    */
   strategy: "auto" | "absolute" | "fixed";
-  /**
-   * Specify target element that the tooltip will describe and listens to for events.
-   * * `undefined`: The direct parent is used.
-   * * `string`: The element is located using `document.getElementById()`
-   * * `HTMLElement`: Pass the target element directly
-   * If the element is not found an Error is thrown.
-   */
-  for?: string | HTMLElement;
   /**
    * Set attribute `no-arrow` to hide the arrow
    */

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

@@ -1,5 +1,5 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
-import { TreeViewItem } from "@dso-toolkit/sources";
+import { TreeViewItem } from "dso-toolkit";
 import { TreeView } from "./tree-view";
 interface TreeViewItemProps {
   owner: TreeView;

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

@@ -12,14 +12,14 @@ export declare class TreeView implements ComponentInterface {
    * 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[]>;
+  dsoOpenItem: EventEmitter<Array<TreeViewItem>>;
   /**
    * 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).
    */
-  dsoCloseItem: EventEmitter<TreeViewItem[]>;
+  dsoCloseItem: EventEmitter<Array<TreeViewItem>>;
   /**
    * Emitted when a tree view item is clicked.
    * The `detail` property of the `CustomEvent` will contain an object with:

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

@@ -1,20 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { FocusTrap } from "focus-trap";
-export declare type MainSize = "small" | "medium" | "large";
-export declare type LabelSizeMap = {
-  [key in MainSize]: string;
-};
-export interface ViewerGridChangeSizeEvent {
-  /**
-   * Indicates whether it's before or after the animation
-   */
-  stage: "start" | "end";
-  previousSize: MainSize;
-  currentSize: MainSize;
-}
-export interface FilterpanelEvent {
-  originalEvent: MouseEvent;
-}
+import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./viewer-grid.interfaces";
 export declare class ViewerGrid {
   private sizeLabelMap;
   private mapPanel?;
@@ -22,8 +8,10 @@ export declare class ViewerGrid {
   overlayOpen: boolean;
   /**
    * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+   *
+   * Default size is `large`.
    */
-  initialMainSize: MainSize;
+  initialMainSize?: MainSize;
   mainSize: MainSize;
   dsoCloseOverlay: EventEmitter<MouseEvent | KeyboardEvent>;
   dsoFilterpanelCancel: EventEmitter<FilterpanelEvent>;
@@ -43,6 +31,7 @@ export declare class ViewerGrid {
   keyDownListener: (event: KeyboardEvent) => void;
   connectedCallback(): void;
   componentDidLoad(): void;
+  componentWillLoad(): void;
   componentDidUpdate(): void;
   disconnectedCallback(): void;
   handleFilterpanelApply(mouseEvent: MouseEvent): void;

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

@@ -0,0 +1,15 @@
+export interface ViewerGridChangeSizeEvent {
+  /**
+   * Indicates whether it's before or after the animation
+   */
+  stage: "start" | "end";
+  previousSize: MainSize;
+  currentSize: MainSize;
+}
+export interface FilterpanelEvent {
+  originalEvent: MouseEvent;
+}
+export declare type MainSize = "small" | "medium" | "large";
+export declare type LabelSizeMap = {
+  [key in MainSize]: string;
+};

package/dist/types/components.d.ts

@@ -5,22 +5,24 @@
  * It contains typing information for all components that exist in this project.
  */
 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 { AccordionInternalState, AccordionSectionToggleEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
+import { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
+import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
 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 { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
+import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
+import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
 import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
-import { DsoModalCloseEvent, ModalRole } from "./components/modal/modal";
+import { ModalRole } from "./components/modal/modal";
+import { DsoModalCloseEvent } from "./components/modal/modal.interfaces";
 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";
-import { SelectableChangeEvent } from "./components/selectable/selectable";
+import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
-import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid";
+import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid.interfaces";
 export namespace Components {
     interface DsoAccordion {
         /**
@@ -37,9 +39,9 @@ export namespace Components {
          */
         "reverseAlign": boolean;
         /**
-          * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
+          * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\ returns `undefined` when no section is toggled.\ returns `true` when the section is opened and `false` when the section is closed.
          */
-        "toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<void>;
+        "toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<undefined | boolean>;
         "variant"?: AccordionVariant;
     }
     interface DsoAccordionSection {
@@ -55,15 +57,20 @@ export namespace Components {
         "heading": AccordionHeading;
         "icon"?: string;
         "open": boolean;
+        /**
+          * Scroll this section into view when needed.
+         */
+        "scrollSectionIntoView": () => Promise<void>;
         /**
           * `state` takes precedence over `attachmentCount` and `icon`
          */
         "state"?: AccordionSectionState;
         "status"?: string;
         /**
-          * Toggle this section
+          * Toggle this section.
+          * @param scrollIntoView boolean - defaults to true
          */
-        "toggleSection": () => Promise<void>;
+        "toggleSection": (scrollIntoView?: boolean) => Promise<void>;
     }
     interface DsoAlert {
         /**
@@ -157,7 +164,7 @@ export namespace Components {
         /**
           * Defines a specific role attribute for the date picker input.
          */
-        "role": string | undefined;
+        "role": string | null;
         /**
           * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
          */
@@ -321,7 +328,7 @@ export namespace Components {
          */
         "isResponsive": boolean;
         /**
-          * Prevents the table being   opened in a modal.
+          * Prevents the table being opened in a modal.
          */
         "noModal": boolean;
     }
@@ -348,10 +355,6 @@ export namespace Components {
           * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
          */
         "descriptive": boolean;
-        /**
-          * Specify target element that the tooltip will describe and listens to for events. * `undefined`: The direct parent is used. * `string`: The element is located using `document.getElementById()` * `HTMLElement`: Pass the target element directly If the element is not found an Error is thrown.
-         */
-        "for"?: string | HTMLElement;
         /**
           * Set attribute `no-arrow` to hide the arrow
          */
@@ -388,9 +391,9 @@ export namespace Components {
     interface DsoViewerGrid {
         "filterpanelOpen": boolean;
         /**
-          * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+          * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.  Default size is `large`.
          */
-        "initialMainSize": MainSize;
+        "initialMainSize"?: MainSize;
         "overlayOpen": boolean;
     }
 }
@@ -864,7 +867,7 @@ declare namespace LocalJSX {
         /**
           * Defines a specific role attribute for the date picker input.
          */
-        "role"?: string | undefined;
+        "role"?: string | null;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
          */
@@ -898,7 +901,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: DsoHeaderCustomEvent<HeaderClickEvent | HeaderClickMenuItemEvent>) => void;
+        "onDsoHeaderClick"?: (event: DsoHeaderCustomEvent<HeaderEvent>) => void;
         "useDropDownMenu"?: "always" | "never" | "auto";
         "userHomeUrl"?: string;
         "userProfileName"?: string;
@@ -1040,7 +1043,7 @@ declare namespace LocalJSX {
          */
         "isResponsive"?: boolean;
         /**
-          * Prevents the table being   opened in a modal.
+          * Prevents the table being opened in a modal.
          */
         "noModal"?: boolean;
     }
@@ -1059,10 +1062,6 @@ declare namespace LocalJSX {
           * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
          */
         "descriptive"?: boolean;
-        /**
-          * Specify target element that the tooltip will describe and listens to for events. * `undefined`: The direct parent is used. * `string`: The element is located using `document.getElementById()` * `HTMLElement`: Pass the target element directly If the element is not found an Error is thrown.
-         */
-        "for"?: string | HTMLElement;
         /**
           * Set attribute `no-arrow` to hide the arrow
          */
@@ -1096,16 +1095,16 @@ declare namespace LocalJSX {
         /**
           * 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: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
+        "onDsoCloseItem"?: (event: DsoTreeViewCustomEvent<Array<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).
          */
-        "onDsoOpenItem"?: (event: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
+        "onDsoOpenItem"?: (event: DsoTreeViewCustomEvent<Array<TreeViewItem>>) => void;
     }
     interface DsoViewerGrid {
         "filterpanelOpen"?: boolean;
         /**
-          * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+          * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.  Default size is `large`.
          */
         "initialMainSize"?: MainSize;
         "onDsoCloseOverlay"?: (event: DsoViewerGridCustomEvent<MouseEvent | KeyboardEvent>) => void;