@dso-toolkit/core 45.0.1 → 45.1.0

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1602fde1.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-771c1291.js';
 
 /*
  Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["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-header",[[1,"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-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["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]}]]],["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-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[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-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["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],"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]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], 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-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-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-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);
   });
 };
 

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

@@ -0,0 +1,32 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { AccordionInterface, AccordionInternalState, AccordionSectionToggleEvent, AccordionVariant } from './accordion.interfaces';
+export declare class Accordion implements ComponentInterface, AccordionInterface {
+  private accordionState;
+  host: HTMLElement;
+  variant?: AccordionVariant;
+  /** Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements */
+  reverseAlign: boolean;
+  /** 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.
+   */
+  dsoToggleSection: EventEmitter<AccordionSectionToggleEvent>;
+  updateVariant(variant?: AccordionVariant): void;
+  updateReverseAlign(reverseAlign: 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>;
+  /** Closes all sections belonging to this accordion. */
+  closeOpenSections(): Promise<void>;
+  constructor();
+  render(): any;
+  private emitToggleEvent;
+  private isSectionOpen;
+  private controlOpenAttribute;
+}

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

@@ -0,0 +1,20 @@
+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;
+}
+export interface AccordionInterface {
+  getState(): Promise<AccordionInternalState>;
+  toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<void>;
+}
+export interface AccordionSectionToggleEvent {
+  /** When the section is toggled by clicking in the header the `MouseEvent` is available. */
+  originalEvent?: MouseEvent;
+  section: {
+    element: HTMLElement;
+    open: boolean;
+  };
+  sections: HTMLElement[];
+}

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

@@ -0,0 +1,2 @@
+import { Accordion } from '@dso-toolkit/sources';
+export declare function accordionTemplate({ variant, reverseAlign, allowMultipleOpen, dsoToggleSection, sections }: Accordion): import("lit-html").TemplateResult<1>;

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

@@ -0,0 +1,25 @@
+import { ComponentInterface } from '../../../stencil-public-runtime';
+import { AccordionHeading, AccordionSectionState } from '../accordion.interfaces';
+export declare class AccordionSection implements ComponentInterface {
+  private accordion?;
+  private accordionState?;
+  host: HTMLElement;
+  handleTitle?: string;
+  heading: AccordionHeading;
+  /** When set the handle will render as a `<a>`. When undefined it renders as a `<button>` */
+  handleUrl?: string;
+  /** `state` takes precedence over `attachmentCount` and `icon` */
+  state?: AccordionSectionState;
+  /** `attachmentCount` takes precedence over `icon` */
+  attachmentCount?: number;
+  icon?: string;
+  status?: string;
+  open: boolean;
+  hasNestedSection: boolean;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  /** Toggle this section */
+  toggleSection(): Promise<void>;
+  private toggle;
+  render(): any;
+}

package/dist/types/components/helpcenter-panel/helpcenter-panel.d.ts

@@ -1,11 +1,22 @@
 export declare class HelpcenterPanel {
+  private iframeUrl?;
+  private trap?;
+  private panelWrapperElement?;
+  private openButtonElement?;
+  private closeButtonElement?;
+  private iframeLoaded;
   label?: string;
   url: string;
   visibility: "visible" | "hidden";
   isOpen: "open" | "close";
   slideState: "open" | "close";
   loadIframe: boolean;
+  watchUrl(url: string): void;
+  watchIsOpen(isOpen: 'open' | 'close'): void;
+  keyDownListener(event: KeyboardEvent): void;
+  createTrap(): void;
   openClick: () => void;
   closeClick: () => void;
+  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/image-overlay/image-overlay.d.ts

@@ -8,9 +8,12 @@ export declare class ImageOverlay implements ComponentInterface {
   buttonElement: HTMLButtonElement | undefined;
   wrapperElement: HTMLDivElement | undefined;
   trap: FocusTrap | undefined;
+  titelSlot: HTMLElement | null;
+  bijschriftSlot: HTMLElement | null;
   private mutationObserver?;
   private resizeObserver?;
   loadListener(event: Event): void;
+  connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   initZoomableImage(): void;

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

@@ -6,6 +6,7 @@ export interface InfoButtonToggleEvent {
 export declare class InfoButton {
   private button?;
   active?: boolean;
+  hover: boolean;
   secondary?: boolean;
   label: string;
   dsoToggle: EventEmitter<InfoButtonToggleEvent>;

package/dist/types/components/ozon-content/nodes/figuur.node.d.ts

@@ -1,5 +1,8 @@
+import { OzonContentNodeContext } from '../ozon-content-node-context.interface';
 import { OzonContentNode } from '../ozon-content-node.interface';
 export declare class OzonContentFiguurNode implements OzonContentNode {
   name: string[];
-  render(node: Element): any;
+  setImageDimensions(imageElement: HTMLImageElement, schaal: number): void;
+  onImageLoad(event: Event, schaal?: number): void;
+  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext): any;
 }

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

@@ -1,6 +1,11 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ResponsiveElementSize } from '../responsive-element/responsive-element.interfaces';
 import { PaginationSelectPageEvent } from './pagination.interfaces';
 export declare class Pagination implements ComponentInterface {
+  private sizePositionsMap;
+  private responsiveElement?;
+  host: HTMLElement;
+  availablePositions?: number;
   /**
    * Total pages
    */
@@ -17,6 +22,16 @@ export declare class Pagination implements ComponentInterface {
    * Emitted on page select
    */
   dsoSelectPage: EventEmitter<PaginationSelectPageEvent>;
+  /**
+   * Listens to the dsoSizeChange event on Responsive Element
+   */
+  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>): void;
   clickHandler(e: MouseEvent, page: number): void;
+  componentDidLoad(): void;
   render(): any;
+  private getAvailablePositions;
+  private getPages;
+  private getPageRange;
+  private showEllipsisAfterFirst;
+  private showEllipsisBeforeLast;
 }

package/dist/types/components/responsive-element/responsive-element.d.ts

@@ -1,7 +1,10 @@
-import { ComponentInterface } from '../../stencil-public-runtime';
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ResponsiveElementSize } from './responsive-element.interfaces';
 export declare class ResponsiveElement implements ComponentInterface {
-  sizeAlias: string;
+  sizeAlias: ResponsiveElementSize;
   sizeWidth: number;
+  dsoSizeChange: EventEmitter<ResponsiveElementSize>;
+  getSize(): Promise<ResponsiveElementSize>;
   observer: ResizeObserver;
   host: HTMLElement;
   componentWillLoad(): void;

package/dist/types/components/responsive-element/responsive-element.interfaces.d.ts

@@ -0,0 +1,5 @@
+export declare type ResponsiveElementSize = 'small' | 'medium' | 'large';
+export interface ElementSize {
+  width: number;
+  alias: ResponsiveElementSize;
+}

package/dist/types/components/responsive-element/responsive-element.template.d.ts

@@ -1,3 +1,3 @@
 import { ResponsiveElement } from '@dso-toolkit/sources';
 import { TemplateResult } from 'lit-html';
-export declare function responsiveElementTemplate({ children }: ResponsiveElement<TemplateResult>): TemplateResult<1>;
+export declare function responsiveElementTemplate({ dsoSizeChange }: ResponsiveElement, children: TemplateResult): TemplateResult<1>;

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * 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 { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker";
 import { HeaderClickEvent, HeaderClickMenuItemEvent, HeaderMenuItem } from "./components/header/header.interfaces";
@@ -13,10 +14,54 @@ import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/ma
 import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.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 { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid";
 export namespace Components {
+    interface DsoAccordion {
+        /**
+          * Allows multiple sections to be open at the same time.
+         */
+        "allowMultipleOpen": boolean;
+        /**
+          * Closes all sections belonging to this accordion.
+         */
+        "closeOpenSections": () => Promise<void>;
+        "getState": () => Promise<AccordionInternalState>;
+        /**
+          * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements
+         */
+        "reverseAlign": boolean;
+        /**
+          * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
+         */
+        "toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent | undefined) => Promise<void>;
+        "variant"?: AccordionVariant;
+    }
+    interface DsoAccordionSection {
+        /**
+          * `attachmentCount` takes precedence over `icon`
+         */
+        "attachmentCount"?: number;
+        "handleTitle"?: string;
+        /**
+          * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
+         */
+        "handleUrl"?: string;
+        "heading": AccordionHeading;
+        "icon"?: string;
+        "open": boolean;
+        /**
+          * `state` takes precedence over `attachmentCount` and `icon`
+         */
+        "state"?: AccordionSectionState;
+        "status"?: string;
+        /**
+          * Toggle this section
+         */
+        "toggleSection": () => Promise<void>;
+    }
     interface DsoAlert {
         /**
           * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -233,6 +278,7 @@ export namespace Components {
         "size"?: 'small' | 'medium' | 'large';
     }
     interface DsoResponsiveElement {
+        "getSize": () => Promise<ResponsiveElementSize>;
     }
     interface DsoSelectable {
         "checked"?: boolean;
@@ -318,6 +364,18 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLDsoAccordionElement extends Components.DsoAccordion, HTMLStencilElement {
+    }
+    var HTMLDsoAccordionElement: {
+        prototype: HTMLDsoAccordionElement;
+        new (): HTMLDsoAccordionElement;
+    };
+    interface HTMLDsoAccordionSectionElement extends Components.DsoAccordionSection, HTMLStencilElement {
+    }
+    var HTMLDsoAccordionSectionElement: {
+        prototype: HTMLDsoAccordionSectionElement;
+        new (): HTMLDsoAccordionSectionElement;
+    };
     interface HTMLDsoAlertElement extends Components.DsoAlert, HTMLStencilElement {
     }
     var HTMLDsoAlertElement: {
@@ -487,6 +545,8 @@ declare global {
         new (): HTMLDsoViewerGridElement;
     };
     interface HTMLElementTagNameMap {
+        "dso-accordion": HTMLDsoAccordionElement;
+        "dso-accordion-section": HTMLDsoAccordionSectionElement;
         "dso-alert": HTMLDsoAlertElement;
         "dso-attachments-counter": HTMLDsoAttachmentsCounterElement;
         "dso-autosuggest": HTMLDsoAutosuggestElement;
@@ -518,6 +578,40 @@ declare global {
     }
 }
 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: CustomEvent<AccordionSectionToggleEvent>) => void;
+        /**
+          * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements
+         */
+        "reverseAlign"?: boolean;
+        "variant"?: AccordionVariant;
+    }
+    interface DsoAccordionSection {
+        /**
+          * `attachmentCount` takes precedence over `icon`
+         */
+        "attachmentCount"?: number;
+        "handleTitle"?: string;
+        /**
+          * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
+         */
+        "handleUrl"?: string;
+        "heading"?: AccordionHeading;
+        "icon"?: string;
+        "open"?: boolean;
+        /**
+          * `state` takes precedence over `attachmentCount` and `icon`
+         */
+        "state"?: AccordionSectionState;
+        "status"?: string;
+    }
     interface DsoAlert {
         /**
           * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -773,6 +867,7 @@ declare namespace LocalJSX {
         "size"?: 'small' | 'medium' | 'large';
     }
     interface DsoResponsiveElement {
+        "onDsoSizeChange"?: (event: CustomEvent<ResponsiveElementSize>) => void;
     }
     interface DsoSelectable {
         "checked"?: boolean;
@@ -859,6 +954,8 @@ declare namespace LocalJSX {
         "overlayOpen"?: boolean;
     }
     interface IntrinsicElements {
+        "dso-accordion": DsoAccordion;
+        "dso-accordion-section": DsoAccordionSection;
         "dso-alert": DsoAlert;
         "dso-attachments-counter": DsoAttachmentsCounter;
         "dso-autosuggest": DsoAutosuggest;
@@ -893,6 +990,8 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "dso-accordion": LocalJSX.DsoAccordion & JSXBase.HTMLAttributes<HTMLDsoAccordionElement>;
+            "dso-accordion-section": LocalJSX.DsoAccordionSection & JSXBase.HTMLAttributes<HTMLDsoAccordionSectionElement>;
             "dso-alert": LocalJSX.DsoAlert & JSXBase.HTMLAttributes<HTMLDsoAlertElement>;
             "dso-attachments-counter": LocalJSX.DsoAttachmentsCounter & JSXBase.HTMLAttributes<HTMLDsoAttachmentsCounterElement>;
             "dso-autosuggest": LocalJSX.DsoAutosuggest & JSXBase.HTMLAttributes<HTMLDsoAutosuggestElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "45.0.1",
+  "version": "45.1.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",
@@ -22,11 +22,12 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@stencil/core": "2.10.0",
+    "@stencil/store": "^2.0.0",
     "clsx": "1.1.1",
     "escape-string-regexp": "^5.0.0",
-    "focus-trap": "^6.8.1",
+    "focus-trap": "^7.0.0",
     "popper-max-size-modifier": "^0.2.0",
-    "tabbable": "^5.3.1",
+    "tabbable": "^6.0.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

package/readme.md

@@ -1,10 +1,3 @@
 # `@dso-toolkit/core`
 
 See https://www.github.com/dso-toolkit/dso-toolkit
-
-## `di()` en `di-variant()` SCSS mixins
-
-Dit project bevat een dataUri implementatie. Zie `di.scss` en `dso-icon-sass-function.ts` in `/packages/core/src/icon`.
-
-* `dso-icon-sass-function.ts`: Bevat een Sass function die aan de Sass compiler van de Stencil Components wordt meegegeven. Deze functie moet in elke Stencil Component stylesheet gebruikt worden om iconen te "preloaden" door ze in te lezen op een custom property.
-* `di.scss`: Bevat de `di()` en `di-variant()` mixins. Deze mixin maakt een `background-image` met een verwijzing naar een custom property `--dso-icon`. Beide mixins hebben een argument met het alias naar het icoon. De waarde van `--dso-icon` is een verwijzing naar het eerder ingeladen icoon.

package/dist/collection/icon/dso-icon-sass-function.js

@@ -1,42 +0,0 @@
-import { instance as sass } from '@stencil/sass';
-import cheerio from 'cheerio';
-import { readFileSync, existsSync } from 'fs';
-import { resolve, dirname } from 'path';
-import svgToDataUri from 'mini-svg-data-uri';
-const iconsPath = resolve(dirname(require.resolve('@dso-toolkit/sources')), '../src', 'icons');
-// Replace this regex with the same logic as in @dso-toolkit/css gulpfile.js
-const styleRegex = (selector) => new RegExp(`${selector} {([\\s\\S]+?)}`);
-export const dsoIcon = {
-  'dso-icon($icon, $variant: null)': function (sassIconAlias, sassVariant) {
-    if (!(sassIconAlias instanceof sass.types.String)) {
-      throw new TypeError('Expected $icon to be of type String');
-    }
-    const iconAlias = sassIconAlias.getValue();
-    const iconPath = resolve(iconsPath, `${iconAlias}.svg`);
-    const icon = readFileSync(iconPath).toString('utf-8');
-    const style = getStyle(iconAlias, sassVariant instanceof sass.types.String ? sassVariant.getValue() : null);
-    const svg = style ? bundleSvgStyle(icon, style) : icon;
-    const dataUri = svgToDataUri(svg);
-    return new sass.types.String(`url("${dataUri}")`);
-  }
-};
-function getStyle(icon, variant) {
-  var _a, _b;
-  const stylesheetPath = resolve(iconsPath, `${icon}.scss`);
-  if (!existsSync(stylesheetPath)) {
-    return null;
-  }
-  const css = sass
-    .renderSync({ file: stylesheetPath })
-    .css
-    .toString('utf-8');
-  const selector = `${icon}${variant ? `:${variant}` : ''}`;
-  const regex = styleRegex(selector);
-  return (_b = (_a = css.match(regex)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
-}
-function bundleSvgStyle(svg, style) {
-  const $ = cheerio.load(svg, { xmlMode: true });
-  const inlineStyle = style.trim().split('\n').map(l => l.trim()).join('');
-  const $svg = $('svg').attr('style', inlineStyle);
-  return $.html($svg);
-}

package/dist/dso-toolkit/dso-toolkit.css

@@ -1 +0,0 @@
-@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}dso-alert>.dso-rich-content *:first-child{margin-top:0 !important}dso-alert>.dso-rich-content *:last-child{margin-bottom:0 !important}dso-alert>.dso-rich-content h1,dso-alert>.dso-rich-content h2,dso-alert>.dso-rich-content h3,dso-alert>.dso-rich-content h4,dso-alert>.dso-rich-content h5,dso-alert>.dso-rich-content h6,dso-alert>.dso-rich-content .h1,dso-alert>.dso-rich-content .h2,dso-alert>.dso-rich-content .h3,dso-alert>.dso-rich-content .h4,dso-alert>.dso-rich-content .h5,dso-alert>.dso-rich-content .h6{color:#000;font-size:1em;line-height:1.5;margin-bottom:8px;margin-top:8px}dso-alert>.dso-rich-content .btn,dso-alert>.dso-rich-content .dso-primary,dso-alert>.dso-rich-content .dso-secondary,dso-alert>.dso-rich-content .dso-tertiary{background-color:rgba(25, 25, 25, 0.05);border-radius:4px;border:1px solid transparent;padding:6px 12px}dso-alert>.dso-rich-content .btn:hover,dso-alert>.dso-rich-content .btn:active,dso-alert>.dso-rich-content .dso-primary:hover,dso-alert>.dso-rich-content .dso-primary:active,dso-alert>.dso-rich-content .dso-secondary:hover,dso-alert>.dso-rich-content .dso-secondary:active,dso-alert>.dso-rich-content .dso-tertiary:hover,dso-alert>.dso-rich-content .dso-tertiary:active{background-color:rgba(25, 25, 25, 0.2);color:#000}dso-alert a,dso-alert a:not(.btn):visited{color:#191919}dso-alert a:hover,dso-alert a:focus,dso-alert a:active,dso-alert a:visited{color:#191919}dso-alert a:active{text-decoration:none}dso-alert a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-alert a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a{text-decoration:underline}dso-banner a,dso-banner a:hover,dso-banner a:focus,dso-banner a:active,dso-banner a:visited{color:#191919}dso-banner a:active{text-decoration:none}dso-banner a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner .row>div{line-height:1.5;position:relative}dso-banner .row>div button{position:absolute;right:16px;top:0}dso-banner .row>div button dso-icon,dso-banner .row>div button svg.di{color:#000}@media screen and (min-width: 481px){dso-banner .row>div{padding-left:48px}}@media screen and (max-width: 480px){dso-banner .row>div{padding-top:39px}}dso-banner .row>div::before{content:"";display:inline-block;left:16px;position:absolute;top:0}dso-banner .row>div>.dso-rich-content{padding-right:24px}dso-banner .row>div>.dso-rich-content h1,dso-banner .row>div>.dso-rich-content h2,dso-banner .row>div>.dso-rich-content h3,dso-banner .row>div>.dso-rich-content h4,dso-banner .row>div>.dso-rich-content h5,dso-banner .row>div>.dso-rich-content h6{color:#000;font-size:1rem;line-height:1.5;margin-bottom:0}dso-banner .row>div>.dso-rich-content h1+p,dso-banner .row>div>.dso-rich-content h2+p,dso-banner .row>div>.dso-rich-content h3+p,dso-banner .row>div>.dso-rich-content h4+p,dso-banner .row>div>.dso-rich-content h5+p,dso-banner .row>div>.dso-rich-content h6+p{display:inline}dso-banner .row>div>.dso-rich-content h1+p+*,dso-banner .row>div>.dso-rich-content h2+p+*,dso-banner .row>div>.dso-rich-content h3+p+*,dso-banner .row>div>.dso-rich-content h4+p+*,dso-banner .row>div>.dso-rich-content h5+p+*,dso-banner .row>div>.dso-rich-content h6+p+*{margin-top:16px}dso-banner .row>div>.dso-rich-content>h2:first-child{float:left;margin-right:8px}dso-banner .row>div>.dso-rich-content *:first-child{margin-top:0}dso-banner .row>div>.dso-rich-content *:last-child{margin-bottom:0}@media screen and (max-width: 480px){dso-banner .row>div>.dso-rich-content{padding-right:0}}dso-banner[status=danger]{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}dso-banner[status=danger] .row>div::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner[status=warning]{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}dso-banner[status=warning] .row>div::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:"";display:inline-block}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn::after{margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;margin-left:4px;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;width:100%}dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:0}dso-dropdown-menu[open]>.dso-primary::after,dso-dropdown-menu[open]>.btn-primary::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-secondary::after,dso-dropdown-menu[open]>.btn-default::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-secondary:hover::after,dso-dropdown-menu[open]>.btn-default:hover::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-tertiary::after,dso-dropdown-menu[open]>.btn-link::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-tertiary:hover::after,dso-dropdown-menu[open]>.btn-link:hover::after{--dso-icon:var(--di-chevron-up-scampi)}dso-dropdown-menu[checkable] .dso-group-label{padding-left:40px}dso-dropdown-menu[checkable] li a,dso-dropdown-menu[checkable] li button{padding-left:40px}dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),dso-dropdown-menu[checkable] li.dso-checked button:not(:focus){background-color:#39870c;border-color:#39870c;color:#fff}dso-dropdown-menu[checkable] li.dso-checked a::before,dso-dropdown-menu[checkable] li.dso-checked button::before{background:var(--dso-icon, var(--di-check-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:"";display:block;float:left;margin-left:-32px;margin-right:8px}dso-highlight-box>.dso-rich-content *:first-child{margin-top:0}dso-highlight-box>*:last-child{margin-bottom:0}dso-highlight-box .dso-tertiary:not([disabled]):hover,dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box .btn-link:not([disabled]):hover,dso-highlight-box .btn-link:not([disabled]):hover dso-icon,dso-highlight-box .btn-link:not([disabled]):hover svg.di{text-decoration:underline}dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}dso-highlight-box dso-icon{vertical-align:text-top}dso-highlight-box[yellow],dso-highlight-box:not([border]):not([white]){--di-chevron-right-grijs90:url("data:image/svg+xml,%3csvg id='chevron-right' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M9%2c19a.93.93%2c0%2c0%2c1-.67-.29%2c1%2c1%2c0%2c0%2c1%2c0-1.42l5-5.29-5-5.29a1%2c1%2c0%2c0%2c1%2c0-1.42.93.93%2c0%2c0%2c1%2c1.35%2c0L16%2c12%2c9.62%2c18.71A.93.93%2c0%2c0%2c1%2c9%2c19Z'/%3e %3c/svg%3e")}dso-highlight-box[yellow] .dso-tertiary:not([disabled]),dso-highlight-box[yellow] .btn-link:not([disabled]),dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]),dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]){color:#191919}dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):hover,dso-highlight-box[yellow] .btn-link:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):hover svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):focus,dso-highlight-box[yellow] .btn-link:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus svg.di{color:#666}dso-highlight-box[yellow] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box[yellow] a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary){color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list li{margin-bottom:16px}dso-highlight-box:not([border]):not([white]) .dso-link-list li:last-child{margin-bottom:0}dso-highlight-box:not([border]):not([white]) .dso-link-list a{text-decoration:none;color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{text-decoration:underline}dso-highlight-box:not([border]):not([white]) .dso-link-list a::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover::before{background:var(--dso-icon, var(--di-chevron-right-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{color:#191919;text-decoration:none}dso-highlight-box:not([border]):not([white]) .dso-link-list a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-info .dso-rich-content *:first-child{margin-top:0}dso-info .dso-rich-content img{display:block;margin:8px auto;max-width:100%}dso-info .dso-rich-content a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-info .dso-rich-content a:hover,dso-info .dso-rich-content a:focus,dso-info .dso-rich-content a:active,dso-info .dso-rich-content a:visited{color:#191919}dso-info .dso-rich-content a:active{text-decoration:none}dso-info .dso-rich-content .dso-tertiary:not([disabled]),dso-info .dso-rich-content .btn-link:not([disabled]){color:#000}dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover svg.di,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):hover,dso-info .dso-rich-content .btn-link:not([disabled]):hover dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):hover svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):focus,dso-info .dso-rich-content .btn-link:not([disabled]):focus dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-label span[slot=symbol]{background-color:#fff;display:block;float:left;height:20px;margin-top:2px;margin-right:8px;width:24px;overflow:hidden;position:relative}dso-label span[slot=symbol]>span{display:block;position:absolute;top:0;bottom:0;left:0;right:0}dso-map-controls>*+*{margin-top:32px}dso-selectable .dso-rich-content[slot=info] *:first-child{margin-top:0}dso-selectable .dso-rich-content[slot=info] img{display:block;margin:8px auto;max-width:100%}dso-selectable .dso-rich-content[slot=info] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-selectable .dso-rich-content[slot=info] a:hover,dso-selectable .dso-rich-content[slot=info] a:focus,dso-selectable .dso-rich-content[slot=info] a:active,dso-selectable .dso-rich-content[slot=info] a:visited{color:#191919}dso-selectable .dso-rich-content[slot=info] a:active{text-decoration:none}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]),dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]){color:#000}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-viewer-grid .dso-filterblok{margin-left:-16px;margin-right:-16px}dso-viewer-grid .dso-filterblok .dso-filterblok-address{font-weight:bold;margin:8px 0}@media screen and (max-width: 480px){dso-viewer-grid .dso-filterblok .dso-context-wrapper .dso-context-container{flex-basis:auto}}

package/dist/dso-toolkit/p-02272301.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as i,g as l}from"./p-c62606a3.js";const e=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];let a=class{constructor(t){s(this,t),this.sizeAlias=e[0].alias,this.sizeWidth=0,this.observer=new ResizeObserver((([s])=>{var t,i;const l=null!==(i=null===(t=e.find((t=>s.contentRect.width>=t.width)))||void 0===t?void 0:t.alias)&&void 0!==i?i:e[0].alias;this.sizeAlias=l}))}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return t(i,{small:"small"===this.sizeAlias,medium:"medium"===this.sizeAlias,large:"large"===this.sizeAlias},t("slot",null))}get host(){return l(this)}};a.style=":host{display:block}";export{a as dso_responsive_element}