@dso-toolkit/core 53.0.0 → 54.0.0

package/dist/esm/loader.js

@@ -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-annotation-output",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1],"editAction":[1,"edit-action"]}]]],["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],"isTruncated":[32],"labelText":[32],"truncateLabel":[64],"syncLabelText":[64]}]]],["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-annotation-button",[[0,"dso-annotation-button",{"identifier":[1]}]]],["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],"invalid":[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],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"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],"animationEnd":[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"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["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-slide-toggle",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["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"],"labelledById":[1,"labelled-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-annotation-output",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["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],"hover":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-expandable-heading",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1],"editAction":[1,"edit-action"]}]]],["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],"dropdownOptionsOffset":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"truncateLabel":[64],"syncLabelText":[64]}]]],["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-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button",[[0,"dso-annotation-button",{"identifier":[1]}]]],["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],"invalid":[516],"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],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"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],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["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"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["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-slide-toggle",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["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-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32],"getAnimeInstance":[64],"getBodyHeight":[64]}]]],["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"],"labelledById":[1,"labelled-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.interfaces.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionVariant = "default" | "compact" | "conclusion";
+export declare type AccordionVariant = "default" | "compact" | "conclusion" | "neutral";
 export interface AccordionInternalState {
   variant: AccordionVariant;
   reverseAlign: boolean;

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

@@ -4,11 +4,10 @@ export declare class AccordionSection implements ComponentInterface {
   private static scrollCandidate?;
   private accordion?;
   private accordionState?;
-  private animeInstance?;
   private sectionBody?;
   private sectionHeading?;
-  private resizeObserver?;
   private bodyHeight?;
+  private expandable?;
   host: HTMLElement;
   handleTitle?: string;
   heading: AccordionHeading;
@@ -22,20 +21,17 @@ export declare class AccordionSection implements ComponentInterface {
   status?: string;
   open: boolean;
   hasNestedSection: boolean;
-  toggleOpen(): void;
+  hover: boolean;
   componentWillLoad(): void;
-  componentDidLoad(): 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>;
+  get isNeutral(): boolean;
   private scrollIntoViewWhenNeeded;
+  private setAnimationBehaviour;
   private toggle;
   render(): any;
-  private prepareAnimationResizeObserver;
-  private instantiateAnimation;
-  private activateAnimation;
 }

package/dist/types/components/action-list/action-list.d.ts

@@ -0,0 +1,5 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class ActionList implements ComponentInterface {
+  listTitle: string;
+  render(): any;
+}

package/dist/types/components/action-list/components/action-list-item.d.ts

@@ -0,0 +1,15 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
+export declare class ActionListItem implements ComponentInterface {
+  step: number;
+  itemTitle?: string;
+  /**
+   * Show flow line to next step
+   */
+  flowLine: boolean;
+  warning: boolean;
+  /**
+   * Places a dashed line at the bottom of the item.
+   */
+  divider: boolean;
+  render(): any;
+}

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

@@ -9,6 +9,10 @@ export declare class DropdownMenu {
    * Alignment of the dropdown
    */
   dropdownAlign: "left" | "right";
+  /**
+   * Space between button and dropdown options
+   */
+  dropdownOptionsOffset: number;
   /**
    * Whether the menu is checkable.
    */
@@ -20,6 +24,7 @@ export declare class DropdownMenu {
    */
   strategy: "auto" | "absolute" | "fixed";
   watchPosition(): void;
+  watchOptionsOffset(): void;
   watchStrategy(): void;
   setStrategy(): void;
   host: HTMLElement;

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

@@ -1,4 +1,28 @@
-export declare class Expandable {
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import anime from "animejs";
+import { ExpandableInterface, ExpandableToggleEvent } from "./expandable.interfaces";
+export declare class Expandable implements ComponentInterface, ExpandableInterface {
+  private resizeObserver?;
+  private bodyHeight?;
+  private animeInstance?;
+  host: HTMLElement;
   open?: boolean;
+  enableAnimation: boolean;
+  /** When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to */
+  minimumHeight?: number;
+  animationReady: boolean;
+  dsoToggle: EventEmitter<ExpandableToggleEvent>;
+  animationInstantiated: EventEmitter<void>;
+  toggleOpen(): void;
+  toggleEnableAnimation(enableAnimation: boolean): void;
+  getAnimeInstance(): Promise<anime.AnimeInstance | undefined>;
+  getBodyHeight(): Promise<number | undefined>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  activateObserver(): void;
+  disconnectedCallback(): void;
   render(): any;
+  private prepareAnimationResizeObserver;
+  private instantiateAnimation;
+  private activateAnimation;
 }

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

@@ -0,0 +1,10 @@
+/// <reference types="animejs" />
+export interface ExpandableInterface {
+  getAnimeInstance(): Promise<anime.AnimeInstance | undefined>;
+  getBodyHeight(): Promise<number | undefined>;
+}
+export interface ExpandableToggleEvent {
+  originalEvent?: MouseEvent | KeyboardEvent;
+  open: boolean;
+}
+export declare function isExpandable(element: HTMLElement | ExpandableInterface | null): element is ExpandableInterface;

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

@@ -2,6 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { HeaderMenuItem, HeaderEvent } from "./header.interfaces";
 export declare class Header {
   private clickHandler;
+  private dropdownElement?;
   host: HTMLElement;
   mainMenu?: HeaderMenuItem[];
   useDropDownMenu: "always" | "auto";
@@ -16,6 +17,7 @@ export declare class Header {
   showDropDown?: boolean;
   hasSubLogo: boolean;
   overflowMenuItems: number;
+  dropdownOptionsOffset: number;
   /**
    * Emitted when something in the header is selected.
    *
@@ -31,6 +33,7 @@ export declare class Header {
   componentDidLoad(): void;
   setOverflowMenu(): void;
   setDropDownMenu(): void;
+  private calculateDropdownOptionsOffset;
   onWindowResize: (() => void) & {
     clear(): void;
   } & {

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

@@ -7,15 +7,21 @@ export declare class ListButton implements ComponentInterface {
   manualCount?: number;
   label?: string;
   sublabel?: string;
-  subcontent?: string;
   /** When defined the count can show on the list-button. */
   count?: number;
   min?: string | number;
   max?: string | number;
   checked: boolean;
   disabled: boolean;
+  /**
+   * Allow user to directly input a value.
+   *
+   * Set to `false` to force users to use plus/minus buttons.
+   */
+  manual: boolean;
   dsoCountChange: EventEmitter<ListButtonChangeEvent>;
   dsoSelectedChange: EventEmitter<ListButtonSelectedEvent>;
+  watchManualCallback(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
   private handleOnChange;

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

@@ -1,7 +1,6 @@
-import { ModalContent, ModalOptions } from "dso-toolkit";
+import { ModalContent, ModalOptions } from "./modal.interfaces";
 import { DsoModalRef } from "./modal-ref";
-export declare type AllowedModalContentTypes = HTMLElement | DocumentFragment | string;
 export declare class DsoModalController {
-  open(modal: ModalContent<AllowedModalContentTypes>, options?: ModalOptions): DsoModalRef;
+  open(modal: ModalContent, options?: ModalOptions): DsoModalRef;
   private createModal;
 }

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

@@ -1,5 +1,6 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-import { DsoModalCloseEvent } from "./modal.interfaces";
+import { FocusTargetValueOrFalse } from "focus-trap";
+import { DsoModalCloseEvent, ModalRole } from "./modal.interfaces";
 export declare class Modal implements ComponentInterface {
   private trap?;
   private dialogElement?;
@@ -9,11 +10,15 @@ export declare class Modal implements ComponentInterface {
   hasFooter?: boolean;
   modalTitle?: string;
   /** the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog` */
-  role: string;
+  role: ModalRole;
   /** when `false` the close button in the header will not be rendered. Defaults to `true` */
   showCloseButton: boolean;
   /** Selector used to query the element which will be focused when the component instantiated. When undefined the modal focuses the first button.dso-primary in the modal footer. If no button can be found the close button is focused.*/
   initialFocus?: string;
+  /**
+   * Function that returns the element to focus on Modal close. Return `false` for no focus restore.
+   */
+  returnFocus?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse;
   dsoClose: EventEmitter<DsoModalCloseEvent>;
   componentWillLoad(): void;
   componentDidLoad(): void;

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

@@ -1,4 +1,16 @@
 export interface DsoModalCloseEvent {
   originalEvent?: MouseEvent;
 }
-export declare type ModalRole = "dialog" | "alert" | "alertDialog";
+export declare type ModalRole = "dialog" | "alert" | "alertdialog";
+export declare type AllowedModalContentTypes = HTMLElement | DocumentFragment | string;
+export interface ModalContent {
+  title?: string;
+  body: AllowedModalContentTypes;
+  footer?: AllowedModalContentTypes;
+}
+export interface ModalOptions {
+  role?: ModalRole;
+  showCloseButton?: boolean;
+  initialFocus?: string;
+  returnFocus?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => HTMLElement | SVGElement | string | false;
+}

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
 import { DsoCardClickedEvent, ImageShape } 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.interfaces";
+import { ExpandableToggleEvent } from "./components/expandable/expandable.interfaces";
 import { EditAction, ExpandableHeadingToggleEvent, HeadingTags } from "./components/expandable-heading/expandable-heading.interfaces";
 import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
@@ -19,7 +20,8 @@ import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/lis
 import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 import { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
 import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
-import { DsoModalCloseEvent } from "./components/modal/modal.interfaces";
+import { DsoModalCloseEvent, ModalRole } from "./components/modal/modal.interfaces";
+import { FocusTargetValueOrFalse } from "focus-trap";
 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";
@@ -77,6 +79,22 @@ export namespace Components {
          */
         "toggleSection": (scrollIntoView?: boolean) => Promise<void>;
     }
+    interface DsoActionList {
+        "listTitle": string;
+    }
+    interface DsoActionListItem {
+        /**
+          * Places a dashed line at the bottom of the item.
+         */
+        "divider": boolean;
+        /**
+          * Show flow line to next step
+         */
+        "flowLine": boolean;
+        "itemTitle"?: string;
+        "step": number;
+        "warning": boolean;
+    }
     interface DsoAlert {
         /**
           * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -219,6 +237,10 @@ export namespace Components {
           * Alignment of the dropdown
          */
         "dropdownAlign": "left" | "right";
+        /**
+          * Space between button and dropdown options
+         */
+        "dropdownOptionsOffset": number;
         /**
           * Whether the menu is open or closed. This attribute is reflected and mutable.
          */
@@ -229,6 +251,13 @@ export namespace Components {
         "strategy": "auto" | "absolute" | "fixed";
     }
     interface DsoExpandable {
+        "enableAnimation": boolean;
+        "getAnimeInstance": () => Promise<anime.AnimeInstance | undefined>;
+        "getBodyHeight": () => Promise<number | undefined>;
+        /**
+          * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to
+         */
+        "minimumHeight"?: number;
         "open"?: boolean;
     }
     interface DsoExpandableHeading {
@@ -298,9 +327,12 @@ export namespace Components {
         "count"?: number;
         "disabled": boolean;
         "label"?: string;
+        /**
+          * Allow user to directly input a value.  Set to `false` to force users to use plus/minus buttons.
+         */
+        "manual": boolean;
         "max"?: string | number;
         "min"?: string | number;
-        "subcontent"?: string;
         "sublabel"?: string;
     }
     interface DsoMapBaseLayers {
@@ -322,10 +354,14 @@ export namespace Components {
          */
         "initialFocus"?: string;
         "modalTitle"?: string;
+        /**
+          * Function that returns the element to focus on Modal close. Return `false` for no focus restore.
+         */
+        "returnFocus"?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse;
         /**
           * the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog`
          */
-        "role": string;
+        "role": ModalRole;
         /**
           * when `false` the close button in the header will not be rendered. Defaults to `true`
          */
@@ -502,6 +538,10 @@ export interface DsoDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoDatePickerElement;
 }
+export interface DsoExpandableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoExpandableElement;
+}
 export interface DsoExpandableHeadingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoExpandableHeadingElement;
@@ -583,6 +623,18 @@ declare global {
         prototype: HTMLDsoAccordionSectionElement;
         new (): HTMLDsoAccordionSectionElement;
     };
+    interface HTMLDsoActionListElement extends Components.DsoActionList, HTMLStencilElement {
+    }
+    var HTMLDsoActionListElement: {
+        prototype: HTMLDsoActionListElement;
+        new (): HTMLDsoActionListElement;
+    };
+    interface HTMLDsoActionListItemElement extends Components.DsoActionListItem, HTMLStencilElement {
+    }
+    var HTMLDsoActionListItemElement: {
+        prototype: HTMLDsoActionListItemElement;
+        new (): HTMLDsoActionListItemElement;
+    };
     interface HTMLDsoAlertElement extends Components.DsoAlert, HTMLStencilElement {
     }
     var HTMLDsoAlertElement: {
@@ -814,6 +866,8 @@ declare global {
     interface HTMLElementTagNameMap {
         "dso-accordion": HTMLDsoAccordionElement;
         "dso-accordion-section": HTMLDsoAccordionSectionElement;
+        "dso-action-list": HTMLDsoActionListElement;
+        "dso-action-list-item": HTMLDsoActionListItemElement;
         "dso-alert": HTMLDsoAlertElement;
         "dso-annotation-button": HTMLDsoAnnotationButtonElement;
         "dso-annotation-output": HTMLDsoAnnotationOutputElement;
@@ -893,6 +947,22 @@ declare namespace LocalJSX {
         "state"?: AccordionSectionState;
         "status"?: string;
     }
+    interface DsoActionList {
+        "listTitle": string;
+    }
+    interface DsoActionListItem {
+        /**
+          * Places a dashed line at the bottom of the item.
+         */
+        "divider"?: boolean;
+        /**
+          * Show flow line to next step
+         */
+        "flowLine"?: boolean;
+        "itemTitle"?: string;
+        "step": number;
+        "warning"?: boolean;
+    }
     interface DsoAlert {
         /**
           * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -1056,6 +1126,10 @@ declare namespace LocalJSX {
           * Alignment of the dropdown
          */
         "dropdownAlign"?: "left" | "right";
+        /**
+          * Space between button and dropdown options
+         */
+        "dropdownOptionsOffset"?: number;
         /**
           * Whether the menu is open or closed. This attribute is reflected and mutable.
          */
@@ -1066,6 +1140,13 @@ declare namespace LocalJSX {
         "strategy"?: "auto" | "absolute" | "fixed";
     }
     interface DsoExpandable {
+        "enableAnimation"?: boolean;
+        /**
+          * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to
+         */
+        "minimumHeight"?: number;
+        "onAnimationInstantiated"?: (event: DsoExpandableCustomEvent<void>) => void;
+        "onDsoToggle"?: (event: DsoExpandableCustomEvent<ExpandableToggleEvent>) => void;
         "open"?: boolean;
     }
     interface DsoExpandableHeading {
@@ -1137,11 +1218,14 @@ declare namespace LocalJSX {
         "count"?: number;
         "disabled"?: boolean;
         "label"?: string;
+        /**
+          * Allow user to directly input a value.  Set to `false` to force users to use plus/minus buttons.
+         */
+        "manual"?: boolean;
         "max"?: string | number;
         "min"?: string | number;
         "onDsoCountChange"?: (event: DsoListButtonCustomEvent<ListButtonChangeEvent>) => void;
         "onDsoSelectedChange"?: (event: DsoListButtonCustomEvent<ListButtonSelectedEvent>) => void;
-        "subcontent"?: string;
         "sublabel"?: string;
     }
     interface DsoMapBaseLayers {
@@ -1171,10 +1255,14 @@ declare namespace LocalJSX {
         "initialFocus"?: string;
         "modalTitle"?: string;
         "onDsoClose"?: (event: DsoModalCustomEvent<DsoModalCloseEvent>) => void;
+        /**
+          * Function that returns the element to focus on Modal close. Return `false` for no focus restore.
+         */
+        "returnFocus"?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse;
         /**
           * the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog`
          */
-        "role"?: string;
+        "role"?: ModalRole;
         /**
           * when `false` the close button in the header will not be rendered. Defaults to `true`
          */
@@ -1345,6 +1433,8 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "dso-accordion": DsoAccordion;
         "dso-accordion-section": DsoAccordionSection;
+        "dso-action-list": DsoActionList;
+        "dso-action-list-item": DsoActionListItem;
         "dso-alert": DsoAlert;
         "dso-annotation-button": DsoAnnotationButton;
         "dso-annotation-output": DsoAnnotationOutput;
@@ -1391,6 +1481,8 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "dso-accordion": LocalJSX.DsoAccordion & JSXBase.HTMLAttributes<HTMLDsoAccordionElement>;
             "dso-accordion-section": LocalJSX.DsoAccordionSection & JSXBase.HTMLAttributes<HTMLDsoAccordionSectionElement>;
+            "dso-action-list": LocalJSX.DsoActionList & JSXBase.HTMLAttributes<HTMLDsoActionListElement>;
+            "dso-action-list-item": LocalJSX.DsoActionListItem & JSXBase.HTMLAttributes<HTMLDsoActionListItemElement>;
             "dso-alert": LocalJSX.DsoAlert & JSXBase.HTMLAttributes<HTMLDsoAlertElement>;
             "dso-annotation-button": LocalJSX.DsoAnnotationButton & JSXBase.HTMLAttributes<HTMLDsoAnnotationButtonElement>;
             "dso-annotation-output": LocalJSX.DsoAnnotationOutput & JSXBase.HTMLAttributes<HTMLDsoAnnotationOutputElement>;

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/annotation-output/annotation-output.interfaces";
 export * from "./components/autosuggest/autosuggest.interfaces";
 export * from "./components/card/card.interfaces";
 export * from "./components/date-picker/date-picker.interfaces";
+export * from "./components/expandable/expandable.interfaces";
 export * from "./components/expandable-heading/expandable-heading.interfaces";
 export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "53.0.0",
+  "version": "54.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -19,32 +19,32 @@
     "watch": "yarn clear && yarn node scripts/watch.js"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
+    "@popperjs/core": "^2.11.7",
     "@stencil/core": "^2.20.0",
     "@stencil/store": "^2.0.1",
     "animejs": "3.2.1",
     "clsx": "1.2.1",
-    "dso-toolkit": "53.0.0",
+    "dso-toolkit": "54.0.0",
     "escape-string-regexp": "^5.0.0",
-    "focus-trap": "^7.1.0",
+    "focus-trap": "^7.4.3",
     "popper-max-size-modifier": "^0.2.0",
-    "tabbable": "^6.0.1",
+    "tabbable": "^6.1.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/react-output-target": "^0.3.1",
     "@stencil/sass": "^2.0.1",
-    "@types/animejs": "^3.1.6",
+    "@types/animejs": "^3.1.7",
     "@types/concurrently": "^7.0.0",
     "@types/debounce": "^1.2.1",
-    "@types/sass": "^1.43.1",
-    "@types/uuid": "^8.3.4",
-    "concurrently": "^7.6.0",
+    "@types/sass": "^1.45.0",
+    "@types/uuid": "^9.0.1",
+    "concurrently": "^8.0.1",
     "debounce": "^1.2.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.1",
     "stencil-inline-svg": "1.1.0",
-    "typescript": "~4.8.2"
+    "typescript": "~4.8.4"
   },
   "peerDependencies": {
     "dso-toolkit": ">=45"