@dso-toolkit/core 55.0.0 → 56.0.0

package/dist/types/components.d.ts

@@ -5,15 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccordionInternalState, AccordionSectionToggleAnimationEndEvent, AccordionSectionToggleEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
+import { AccordionInternalState, AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
 import { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
-import { AnnotationToggleEvent } from "./components/annotation-output/annotation-output.interfaces";
+import { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
+import { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 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 { AnimeInstance } from "animejs";
-import { EditAction, ExpandableHeadingToggleEvent, HeadingTags } from "./components/expandable-heading/expandable-heading.interfaces";
+import { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.types";
+import { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
 import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
 import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
@@ -30,15 +31,16 @@ import { SelectableChangeEvent } from "./components/selectable/selectable.interf
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid.interfaces";
-export { AccordionInternalState, AccordionSectionToggleAnimationEndEvent, AccordionSectionToggleEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
+export { AccordionInternalState, AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
-export { AnnotationToggleEvent } from "./components/annotation-output/annotation-output.interfaces";
+export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
+export { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
 export { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
 export { CardContainerMode } from "./components/card-container/card-container.interfaces";
 export { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
-export { AnimeInstance } from "animejs";
-export { EditAction, ExpandableHeadingToggleEvent, HeadingTags } from "./components/expandable-heading/expandable-heading.interfaces";
+export { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.types";
+export { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
 export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 export { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
 export { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
@@ -59,32 +61,13 @@ export namespace Components {
     interface DsoAccordion {
         "_getState": () => Promise<AccordionInternalState>;
         /**
-          * Allows multiple sections to be open at the same time.
-         */
-        "allowMultipleOpen": boolean;
-        /**
-          * Emitted when the animation of opening or closing ends.
-         */
-        "animationEnd": (sectionElement: HTMLElement) => Promise<void>;
-        /**
-          * Closes all sections belonging to this accordion.
-         */
-        "closeOpenSections": () => Promise<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
+          * Places the chevron at the opposite side.  Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections
          */
         "reverseAlign": boolean;
-        /**
-          * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
-          * @param sectionElement The section element that needs to toggle
-          * @param event The event that the user triggered
-          * @returns The state of the section
-         */
-        "toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<undefined | boolean>;
         /**
           * The variant of the Accordion.
          */
-        "variant"?: AccordionVariant;
+        "variant": AccordionVariant;
     }
     interface DsoAccordionSection {
         /**
@@ -108,26 +91,17 @@ export namespace Components {
          */
         "icon"?: string;
         /**
-          * To open the Accordion Section.
+          * Set the Accordion Section open.
          */
         "open": boolean;
-        /**
-          * Scroll this section into view when needed.
-         */
-        "scrollSectionIntoView": () => Promise<void>;
         /**
           * `state` takes precedence over `attachmentCount` and `icon`
          */
-        "state"?: AccordionSectionState;
+        "status"?: AccordionSectionState;
         /**
           * The status of the section.
          */
-        "status"?: string;
-        /**
-          * Toggle this section.
-          * @param scrollIntoView boolean - defaults to true
-         */
-        "toggleSection": (scrollIntoView?: boolean) => Promise<void>;
+        "statusDescription"?: string;
     }
     interface DsoActionList {
         /**
@@ -171,10 +145,13 @@ export namespace Components {
         /**
           * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.
          */
-        "identifier": string;
+        "identifier": string | undefined;
+        /**
+          * Set to true when the annotation is open.
+         */
+        "open": boolean;
     }
     interface DsoAnnotationOutput {
-        "_toggleAnnotation": (e: MouseEvent | KeyboardEvent, identifier: string) => Promise<void>;
         /**
           * This text will be displayed above the annotation-output when opened
          */
@@ -183,6 +160,10 @@ export namespace Components {
           * The annotation-button that toggles this component should have the same identifier.
          */
         "identifier": string;
+        /**
+          * Set to `true` to show content.
+         */
+        "open": boolean;
     }
     interface DsoAttachmentsCounter {
         /**
@@ -314,6 +295,76 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DsoDocumentComponent {
+        /**
+          * An alternative title to show when there is nothing to create a title.
+         */
+        "alternativeTitle"?: string;
+        /**
+          * Enables annotations.
+         */
+        "annotated": boolean;
+        /**
+          * Marks as draft.
+         */
+        "bevatOntwerpInformatie": boolean;
+        /**
+          * Marks this Document Component as belonging to an active filter.
+         */
+        "filtered": boolean;
+        /**
+          * When a child Document Component has a status "Draft".
+         */
+        "genesteOntwerpInformatie": boolean;
+        /**
+          * Marks Document Component as reserved.
+         */
+        "gereserveerd": boolean;
+        /**
+          * The heading element to use.
+         */
+        "heading": "h2" | "h3" | "h4" | "h5" | "h6";
+        /**
+          * The Inhoud XML.
+         */
+        "inhoud"?: string;
+        /**
+          * The Label XML.
+         */
+        "label"?: string;
+        /**
+          * Marks this Document Component as not-applicable.
+         */
+        "notApplicable": boolean;
+        /**
+          * The Nummer XML.
+         */
+        "nummer"?: string;
+        /**
+          * This boolean attribute indicates whether the children are visible.
+         */
+        "open": boolean;
+        /**
+          * When the Annotation Output is opened, set this to true.
+         */
+        "openAnnotation": boolean;
+        /**
+          * The Opschrift XML.
+         */
+        "opschrift"?: string;
+        /**
+          * Type of Document Component.
+         */
+        "type"?: string;
+        /**
+          * Marks the Document Component as expired.
+         */
+        "vervallen": boolean;
+        /**
+          * The wijzigactie as in STOP.
+         */
+        "wijzigactie"?: DocumentComponentWijzigactie;
+    }
     interface DsoDropdownMenu {
         /**
           * Selector for the element the dropdown options should not be overflowing.
@@ -341,8 +392,6 @@ export namespace Components {
         "strategy": "auto" | "absolute" | "fixed";
     }
     interface DsoExpandable {
-        "_getAnimeInstance": () => Promise<AnimeInstance | undefined>;
-        "_getBodyHeight": () => Promise<number | undefined>;
         /**
           * Set to `true` to show the content animated.
          */
@@ -356,28 +405,6 @@ export namespace Components {
          */
         "open"?: boolean;
     }
-    interface DsoExpandableHeading {
-        /**
-          * The color.
-         */
-        "color": "default" | "black";
-        /**
-          * Whether this Expandable Heading has an edit action.  Also known as "wijzigactie" in STOP.
-         */
-        "editAction"?: EditAction;
-        /**
-          * Which heading element to use.
-         */
-        "heading": HeadingTags;
-        /**
-          * To open the Expandable Heading.
-         */
-        "open"?: boolean;
-        /**
-          * Marks this element as unavailable.
-         */
-        "suppressed": boolean;
-    }
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
@@ -832,10 +859,16 @@ export namespace Components {
          */
         "overlayOpen": boolean;
     }
+    interface DsotDocumentComponentDemo {
+    }
 }
-export interface DsoAccordionCustomEvent<T> extends CustomEvent<T> {
+export interface DsoAccordionSectionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLDsoAccordionElement;
+    target: HTMLDsoAccordionSectionElement;
+}
+export interface DsoAnnotationButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoAnnotationButtonElement;
 }
 export interface DsoAnnotationOutputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -853,13 +886,13 @@ export interface DsoDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoDatePickerElement;
 }
-export interface DsoExpandableCustomEvent<T> extends CustomEvent<T> {
+export interface DsoDocumentComponentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLDsoExpandableElement;
+    target: HTMLDsoDocumentComponentElement;
 }
-export interface DsoExpandableHeadingCustomEvent<T> extends CustomEvent<T> {
+export interface DsoExpandableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLDsoExpandableHeadingElement;
+    target: HTMLDsoExpandableElement;
 }
 export interface DsoHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1014,6 +1047,12 @@ declare global {
         prototype: HTMLDsoDatePickerElement;
         new (): HTMLDsoDatePickerElement;
     };
+    interface HTMLDsoDocumentComponentElement extends Components.DsoDocumentComponent, HTMLStencilElement {
+    }
+    var HTMLDsoDocumentComponentElement: {
+        prototype: HTMLDsoDocumentComponentElement;
+        new (): HTMLDsoDocumentComponentElement;
+    };
     interface HTMLDsoDropdownMenuElement extends Components.DsoDropdownMenu, HTMLStencilElement {
     }
     var HTMLDsoDropdownMenuElement: {
@@ -1026,12 +1065,6 @@ declare global {
         prototype: HTMLDsoExpandableElement;
         new (): HTMLDsoExpandableElement;
     };
-    interface HTMLDsoExpandableHeadingElement extends Components.DsoExpandableHeading, HTMLStencilElement {
-    }
-    var HTMLDsoExpandableHeadingElement: {
-        prototype: HTMLDsoExpandableHeadingElement;
-        new (): HTMLDsoExpandableHeadingElement;
-    };
     interface HTMLDsoHeaderElement extends Components.DsoHeader, HTMLStencilElement {
     }
     var HTMLDsoHeaderElement: {
@@ -1188,6 +1221,12 @@ declare global {
         prototype: HTMLDsoViewerGridElement;
         new (): HTMLDsoViewerGridElement;
     };
+    interface HTMLDsotDocumentComponentDemoElement extends Components.DsotDocumentComponentDemo, HTMLStencilElement {
+    }
+    var HTMLDsotDocumentComponentDemoElement: {
+        prototype: HTMLDsotDocumentComponentDemoElement;
+        new (): HTMLDsotDocumentComponentDemoElement;
+    };
     interface HTMLElementTagNameMap {
         "dso-accordion": HTMLDsoAccordionElement;
         "dso-accordion-section": HTMLDsoAccordionSectionElement;
@@ -1203,9 +1242,9 @@ declare global {
         "dso-card": HTMLDsoCardElement;
         "dso-card-container": HTMLDsoCardContainerElement;
         "dso-date-picker": HTMLDsoDatePickerElement;
+        "dso-document-component": HTMLDsoDocumentComponentElement;
         "dso-dropdown-menu": HTMLDsoDropdownMenuElement;
         "dso-expandable": HTMLDsoExpandableElement;
-        "dso-expandable-heading": HTMLDsoExpandableHeadingElement;
         "dso-header": HTMLDsoHeaderElement;
         "dso-helpcenter-panel": HTMLDsoHelpcenterPanelElement;
         "dso-highlight-box": HTMLDsoHighlightBoxElement;
@@ -1232,24 +1271,13 @@ declare global {
         "dso-tooltip": HTMLDsoTooltipElement;
         "dso-tree-view": HTMLDsoTreeViewElement;
         "dso-viewer-grid": HTMLDsoViewerGridElement;
+        "dsot-document-component-demo": HTMLDsotDocumentComponentDemoElement;
     }
 }
 declare namespace LocalJSX {
     interface DsoAccordion {
         /**
-          * Allows multiple sections to be open at the same time.
-         */
-        "allowMultipleOpen"?: boolean;
-        /**
-          * 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: DsoAccordionCustomEvent<AccordionSectionToggleEvent>) => void;
-        /**
-          * Event emitted when the accordion section completes its toggle animation.
-         */
-        "onDsoToggleSectionAnimationEnd"?: (event: DsoAccordionCustomEvent<AccordionSectionToggleAnimationEndEvent>) => 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
+          * Places the chevron at the opposite side.  Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections
          */
         "reverseAlign"?: boolean;
         /**
@@ -1279,17 +1307,25 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
         /**
-          * To open the Accordion Section.
+          * Event emitted when the Accordion Section completes its toggle animation.
+         */
+        "onDsoAnimationEnd"?: (event: DsoAccordionSectionCustomEvent<AccordionSectionAnimationEndEvent>) => void;
+        /**
+          * Emitted when the user activates the toggle button.
+         */
+        "onDsoToggleClick"?: (event: DsoAccordionSectionCustomEvent<AccordionSectionToggleClickEvent>) => void;
+        /**
+          * Set the Accordion Section open.
          */
         "open"?: boolean;
         /**
           * `state` takes precedence over `attachmentCount` and `icon`
          */
-        "state"?: AccordionSectionState;
+        "status"?: AccordionSectionState;
         /**
           * The status of the section.
          */
-        "status"?: string;
+        "statusDescription"?: string;
     }
     interface DsoActionList {
         /**
@@ -1333,7 +1369,15 @@ declare namespace LocalJSX {
         /**
           * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.
          */
-        "identifier": string;
+        "identifier": string | undefined;
+        /**
+          * Emitted when user activates the button.
+         */
+        "onDsoClick"?: (event: DsoAnnotationButtonCustomEvent<AnnotationButtonClickEvent>) => void;
+        /**
+          * Set to true when the annotation is open.
+         */
+        "open"?: boolean;
     }
     interface DsoAnnotationOutput {
         /**
@@ -1347,7 +1391,11 @@ declare namespace LocalJSX {
         /**
           * This event is emitted when the user activates the Annotation Button.
          */
-        "onDsoToggle"?: (event: DsoAnnotationOutputCustomEvent<AnnotationToggleEvent>) => void;
+        "onDsoClose"?: (event: DsoAnnotationOutputCustomEvent<AnnotationOutputCloseEvent>) => void;
+        /**
+          * Set to `true` to show content.
+         */
+        "open"?: boolean;
     }
     interface DsoAttachmentsCounter {
         /**
@@ -1503,6 +1551,84 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsoDocumentComponent {
+        /**
+          * An alternative title to show when there is nothing to create a title.
+         */
+        "alternativeTitle"?: string;
+        /**
+          * Enables annotations.
+         */
+        "annotated"?: boolean;
+        /**
+          * Marks as draft.
+         */
+        "bevatOntwerpInformatie"?: boolean;
+        /**
+          * Marks this Document Component as belonging to an active filter.
+         */
+        "filtered"?: boolean;
+        /**
+          * When a child Document Component has a status "Draft".
+         */
+        "genesteOntwerpInformatie"?: boolean;
+        /**
+          * Marks Document Component as reserved.
+         */
+        "gereserveerd"?: boolean;
+        /**
+          * The heading element to use.
+         */
+        "heading"?: "h2" | "h3" | "h4" | "h5" | "h6";
+        /**
+          * The Inhoud XML.
+         */
+        "inhoud"?: string;
+        /**
+          * The Label XML.
+         */
+        "label"?: string;
+        /**
+          * Marks this Document Component as not-applicable.
+         */
+        "notApplicable"?: boolean;
+        /**
+          * The Nummer XML.
+         */
+        "nummer"?: string;
+        /**
+          * Emitted when the user activates the annotation button.
+         */
+        "onDsoAnnotationToggle"?: (event: DsoDocumentComponentCustomEvent<DocumentComponentToggleAnnotationEvent>) => void;
+        /**
+          * Emitted when the user activates the toggle.
+         */
+        "onDsoOpenToggle"?: (event: DsoDocumentComponentCustomEvent<DocumentComponentOpenToggleEvent>) => void;
+        /**
+          * This boolean attribute indicates whether the children are visible.
+         */
+        "open"?: boolean;
+        /**
+          * When the Annotation Output is opened, set this to true.
+         */
+        "openAnnotation"?: boolean;
+        /**
+          * The Opschrift XML.
+         */
+        "opschrift"?: string;
+        /**
+          * Type of Document Component.
+         */
+        "type"?: string;
+        /**
+          * Marks the Document Component as expired.
+         */
+        "vervallen"?: boolean;
+        /**
+          * The wijzigactie as in STOP.
+         */
+        "wijzigactie"?: DocumentComponentWijzigactie;
+    }
     interface DsoDropdownMenu {
         /**
           * Selector for the element the dropdown options should not be overflowing.
@@ -1539,35 +1665,13 @@ declare namespace LocalJSX {
          */
         "minimumHeight"?: number;
         /**
-          * Set to `true` to expand the content.
-         */
-        "open"?: boolean;
-    }
-    interface DsoExpandableHeading {
-        /**
-          * The color.
-         */
-        "color"?: "default" | "black";
-        /**
-          * Whether this Expandable Heading has an edit action.  Also known as "wijzigactie" in STOP.
+          * Fired when the animation ends. Only when `enableAnimation = true`.
          */
-        "editAction"?: EditAction;
+        "onDsoExpandableAnimationEnd"?: (event: DsoExpandableCustomEvent<ExpandableAnimationEndEvent>) => void;
         /**
-          * Which heading element to use.
-         */
-        "heading"?: HeadingTags;
-        /**
-          * Emitted when the user activates the toggle button.
-         */
-        "onDsoToggle"?: (event: DsoExpandableHeadingCustomEvent<ExpandableHeadingToggleEvent>) => void;
-        /**
-          * To open the Expandable Heading.
+          * Set to `true` to expand the content.
          */
         "open"?: boolean;
-        /**
-          * Marks this element as unavailable.
-         */
-        "suppressed"?: boolean;
     }
     interface DsoHeader {
         /**
@@ -2093,6 +2197,8 @@ declare namespace LocalJSX {
          */
         "overlayOpen"?: boolean;
     }
+    interface DsotDocumentComponentDemo {
+    }
     interface IntrinsicElements {
         "dso-accordion": DsoAccordion;
         "dso-accordion-section": DsoAccordionSection;
@@ -2108,9 +2214,9 @@ declare namespace LocalJSX {
         "dso-card": DsoCard;
         "dso-card-container": DsoCardContainer;
         "dso-date-picker": DsoDatePicker;
+        "dso-document-component": DsoDocumentComponent;
         "dso-dropdown-menu": DsoDropdownMenu;
         "dso-expandable": DsoExpandable;
-        "dso-expandable-heading": DsoExpandableHeading;
         "dso-header": DsoHeader;
         "dso-helpcenter-panel": DsoHelpcenterPanel;
         "dso-highlight-box": DsoHighlightBox;
@@ -2137,6 +2243,7 @@ declare namespace LocalJSX {
         "dso-tooltip": DsoTooltip;
         "dso-tree-view": DsoTreeView;
         "dso-viewer-grid": DsoViewerGrid;
+        "dsot-document-component-demo": DsotDocumentComponentDemo;
     }
 }
 export { LocalJSX as JSX };
@@ -2157,9 +2264,9 @@ declare module "@stencil/core" {
             "dso-card": LocalJSX.DsoCard & JSXBase.HTMLAttributes<HTMLDsoCardElement>;
             "dso-card-container": LocalJSX.DsoCardContainer & JSXBase.HTMLAttributes<HTMLDsoCardContainerElement>;
             "dso-date-picker": LocalJSX.DsoDatePicker & JSXBase.HTMLAttributes<HTMLDsoDatePickerElement>;
+            "dso-document-component": LocalJSX.DsoDocumentComponent & JSXBase.HTMLAttributes<HTMLDsoDocumentComponentElement>;
             "dso-dropdown-menu": LocalJSX.DsoDropdownMenu & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuElement>;
             "dso-expandable": LocalJSX.DsoExpandable & JSXBase.HTMLAttributes<HTMLDsoExpandableElement>;
-            "dso-expandable-heading": LocalJSX.DsoExpandableHeading & JSXBase.HTMLAttributes<HTMLDsoExpandableHeadingElement>;
             "dso-header": LocalJSX.DsoHeader & JSXBase.HTMLAttributes<HTMLDsoHeaderElement>;
             "dso-helpcenter-panel": LocalJSX.DsoHelpcenterPanel & JSXBase.HTMLAttributes<HTMLDsoHelpcenterPanelElement>;
             "dso-highlight-box": LocalJSX.DsoHighlightBox & JSXBase.HTMLAttributes<HTMLDsoHighlightBoxElement>;
@@ -2186,6 +2293,7 @@ declare module "@stencil/core" {
             "dso-tooltip": LocalJSX.DsoTooltip & JSXBase.HTMLAttributes<HTMLDsoTooltipElement>;
             "dso-tree-view": LocalJSX.DsoTreeView & JSXBase.HTMLAttributes<HTMLDsoTreeViewElement>;
             "dso-viewer-grid": LocalJSX.DsoViewerGrid & JSXBase.HTMLAttributes<HTMLDsoViewerGridElement>;
+            "dsot-document-component-demo": LocalJSX.DsotDocumentComponentDemo & JSXBase.HTMLAttributes<HTMLDsotDocumentComponentDemoElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "55.0.0",
+  "version": "56.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
     "@types/animejs": "^3.1.7",
     "animejs": "3.2.1",
     "clsx": "^1.2.1",
-    "dso-toolkit": "^55.0.0",
+    "dso-toolkit": "^56.0.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.4.3",
     "popper-max-size-modifier": "^0.2.0",

package/dist/cjs/annotation.service-60e6b0f1.js

@@ -1,23 +0,0 @@
-'use strict';
-
-const index = require('./index-a189d603.js');
-
-class AnnotationService {
-  static get state() {
-    if (!this._state) {
-      AnnotationService.initializeStore();
-    }
-    return this._state;
-  }
-  static toggle(id) {
-    this._state[id] = !this._state[id];
-  }
-  static initializeStore() {
-    const { state } = index.createStore({});
-    AnnotationService._state = state;
-  }
-}
-
-exports.AnnotationService = AnnotationService;
-
-//# sourceMappingURL=annotation.service-60e6b0f1.js.map

package/dist/cjs/annotation.service-60e6b0f1.js.map

@@ -1 +0,0 @@
-{"file":"annotation.service-60e6b0f1.js","mappings":";;;;MAMsB,iBAAiB;EAGrC,WAAW,KAAK;IACd,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,iBAAiB,CAAC,eAAe,EAAE,CAAC;KACrC;IAED,OAAO,IAAI,CAAC,MAAM,CAAC;GACpB;EAED,OAAO,MAAM,CAAC,EAAU;IACtB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;GACpC;EAEO,OAAO,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,GAAGA,iBAAW,CAAkB,EAAE,CAAC,CAAC;IAEnD,iBAAiB,CAAC,MAAM,GAAG,KAAK,CAAC;GAClC;;;;;","names":["createStore"],"sources":["./src/services/annotation.service.ts"],"sourcesContent":["import { createStore } from \"@stencil/store\";\r\n\r\ninterface AnnotationState {\r\n  [key: string]: boolean;\r\n}\r\n\r\nexport abstract class AnnotationService {\r\n  private static _state: AnnotationState;\r\n\r\n  static get state(): AnnotationState {\r\n    if (!this._state) {\r\n      AnnotationService.initializeStore();\r\n    }\r\n\r\n    return this._state;\r\n  }\r\n\r\n  static toggle(id: string): void {\r\n    this._state[id] = !this._state[id];\r\n  }\r\n\r\n  private static initializeStore(): void {\r\n    const { state } = createStore<AnnotationState>({});\r\n\r\n    AnnotationService._state = state;\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-alert.cjs.entry.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-efc2222e.js');
-const clsx_m = require('./clsx.m-b81c6b86.js');
-
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
-
-const Alert = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.status = undefined;
-    this.roleAlert = undefined;
-  }
-  render() {
-    const status = Alert.statusMap.get(this.status);
-    if (!status) {
-      throw new Error(`Invalid status ${this.status}`);
-    }
-    return (index.h("div", { class: clsx_m.clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, index.h("dso-icon", { icon: "status-" + this.status }), index.h("span", { class: "sr-only" }, status, ":"), index.h("slot", null)));
-  }
-};
-Alert.statusMap = new Map([
-  ["success", "Gelukt"],
-  ["info", "Opmerking"],
-  ["warning", "Waarschuwing"],
-  ["error", "Fout"],
-]);
-Alert.style = alertCss;
-
-exports.dso_alert = Alert;
-
-//# sourceMappingURL=dso-alert.cjs.entry.js.map