@dso-toolkit/core 57.0.0 → 58.0.1

package/dist/esm/index.js

@@ -1,72 +1,3 @@
-class DsoModalRef {
-  constructor(modalElement) {
-    this.modalElement = modalElement;
-    if (!modalElement) {
-      throw new Error("unable to add event listener. try opening the modal first");
-    }
-  }
-  /** Removes the modal from the DOM. */
-  close() {
-    document.body.removeChild(this.modalElement);
-  }
-  addEventListener(eventName, fn) {
-    this.modalElement.addEventListener(eventName, fn);
-  }
-  removeEventListener(eventName, fn) {
-    this.modalElement.removeEventListener(eventName, fn);
-  }
-}
 
-class DsoModalController {
-  open(modal, options) {
-    const dsoModalElement = this.createModal(modal, options);
-    document.body.appendChild(dsoModalElement);
-    return new DsoModalRef(dsoModalElement);
-  }
-  createModal({ title, body, footer }, options) {
-    const element = document.createElement(`dso-modal`);
-    if (title) {
-      element.setAttribute("modal-title", title);
-    }
-    if (options) {
-      const { role, showCloseButton, initialFocus, returnFocus } = options;
-      if (role) {
-        element.role = role;
-      }
-      if (showCloseButton) {
-        element.setAttribute("show-close-button", showCloseButton ? "true" : "false");
-      }
-      if (initialFocus) {
-        element.setAttribute("initial-focus", initialFocus);
-      }
-      if (returnFocus) {
-        element.returnFocus = returnFocus;
-      }
-    }
-    const bodyDiv = document.createElement("div");
-    bodyDiv.setAttribute("slot", "body");
-    if (typeof body === "string") {
-      bodyDiv.innerHTML = body;
-    }
-    else {
-      bodyDiv.appendChild(body);
-    }
-    element.appendChild(bodyDiv);
-    if (footer) {
-      const footerDiv = document.createElement("div");
-      footerDiv.setAttribute("slot", "footer");
-      if (typeof footer === "string") {
-        footerDiv.innerHTML = footer;
-      }
-      else {
-        footerDiv.appendChild(footer);
-      }
-      element.appendChild(footerDiv);
-    }
-    return element;
-  }
-}
-
-export { DsoModalController };
 
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":"MAAa,WAAW;EACtB,YAAoB,YAAyB;IAAzB,iBAAY,GAAZ,YAAY,CAAa;IAC3C,IAAI,CAAC,YAAY,EAAE;MACjB,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;KAC9E;GACF;;EAGD,KAAK;IACH,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC9C;EAED,gBAAgB,CAAC,SAAqB,EAAE,EAAsC;IAC5E,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;GACnD;EAED,mBAAmB,CAAC,SAAqB,EAAE,EAAsC;IAC/E,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;GACtD;;;MCdU,kBAAkB;EAC7B,IAAI,CAAC,KAAmB,EAAE,OAAsB;IAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAEzD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAE3C,OAAO,IAAI,WAAW,CAAC,eAAe,CAAC,CAAC;GACzC;EAEO,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAgB,EAAE,OAAsB;IAC/E,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAEpD,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;KAC5C;IAED,IAAI,OAAO,EAAE;MACX,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC;MAErE,IAAI,IAAI,EAAE;QACR,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;OACrB;MAED,IAAI,eAAe,EAAE;QACnB,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;OAC/E;MAED,IAAI,YAAY,EAAE;QAChB,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;OACrD;MAED,IAAI,WAAW,EAAE;QACf,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;OACnC;KACF;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC5B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;KAC1B;SAAM;MACL,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE7B,IAAI,MAAM,EAAE;MACV,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAChD,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;MAEzC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;OAC9B;WAAM;QACL,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;OAC/B;MAED,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;KAChC;IAED,OAAO,OAAO,CAAC;GAChB;;;;;","names":[],"sources":["./src/components/modal/modal-ref.ts","./src/components/modal/modal.controller.ts"],"sourcesContent":["export class DsoModalRef {\r\n  constructor(private modalElement: HTMLElement) {\r\n    if (!modalElement) {\r\n      throw new Error(\"unable to add event listener. try opening the modal first\");\r\n    }\r\n  }\r\n\r\n  /** Removes the modal from the DOM. */\r\n  close() {\r\n    document.body.removeChild(this.modalElement);\r\n  }\r\n\r\n  addEventListener(eventName: \"dsoClose\", fn: EventListenerOrEventListenerObject) {\r\n    this.modalElement.addEventListener(eventName, fn);\r\n  }\r\n\r\n  removeEventListener(eventName: \"dsoClose\", fn: EventListenerOrEventListenerObject) {\r\n    this.modalElement.removeEventListener(eventName, fn);\r\n  }\r\n}\r\n","import { ModalContent, ModalOptions } from \"./modal.interfaces\";\r\n\r\nimport { DsoModalRef } from \"./modal-ref\";\r\n\r\nexport class DsoModalController {\r\n  open(modal: ModalContent, options?: ModalOptions): DsoModalRef {\r\n    const dsoModalElement = this.createModal(modal, options);\r\n\r\n    document.body.appendChild(dsoModalElement);\r\n\r\n    return new DsoModalRef(dsoModalElement);\r\n  }\r\n\r\n  private createModal({ title, body, footer }: ModalContent, options?: ModalOptions): HTMLElement {\r\n    const element = document.createElement(`dso-modal`);\r\n\r\n    if (title) {\r\n      element.setAttribute(\"modal-title\", title);\r\n    }\r\n\r\n    if (options) {\r\n      const { role, showCloseButton, initialFocus, returnFocus } = options;\r\n\r\n      if (role) {\r\n        element.role = role;\r\n      }\r\n\r\n      if (showCloseButton) {\r\n        element.setAttribute(\"show-close-button\", showCloseButton ? \"true\" : \"false\");\r\n      }\r\n\r\n      if (initialFocus) {\r\n        element.setAttribute(\"initial-focus\", initialFocus);\r\n      }\r\n\r\n      if (returnFocus) {\r\n        element.returnFocus = returnFocus;\r\n      }\r\n    }\r\n\r\n    const bodyDiv = document.createElement(\"div\");\r\n    bodyDiv.setAttribute(\"slot\", \"body\");\r\n\r\n    if (typeof body === \"string\") {\r\n      bodyDiv.innerHTML = body;\r\n    } else {\r\n      bodyDiv.appendChild(body);\r\n    }\r\n\r\n    element.appendChild(bodyDiv);\r\n\r\n    if (footer) {\r\n      const footerDiv = document.createElement(\"div\");\r\n      footerDiv.setAttribute(\"slot\", \"footer\");\r\n\r\n      if (typeof footer === \"string\") {\r\n        footerDiv.innerHTML = footer;\r\n      } else {\r\n        footerDiv.appendChild(footer);\r\n      }\r\n\r\n      element.appendChild(footerDiv);\r\n    }\r\n\r\n    return element;\r\n  }\r\n}\r\n"],"version":3}
+{"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-367cff36.js';
-export { s as setNonce } from './index-367cff36.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3e9ed0c5.js';
+export { s as setNonce } from './index-3e9ed0c5.js';
 
 /*
  Stencil Client Patch Esm v3.4.0 | MIT Licensed | https://stenciljs.com
@@ -11,7 +11,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]}]]],["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["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"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[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-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-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],"describedBy":[1,"described-by"],"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-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"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["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-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"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-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[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]}]]],["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],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[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]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return bootstrapLazy([["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["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"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["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],"describedBy":[1,"described-by"],"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-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["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-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32],"tabView":[32],"activeTab":[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-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[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]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["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],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[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]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
   });
 };
 

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

@@ -1,13 +1,14 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-import { FocusTargetValueOrFalse } from "focus-trap";
-import { DsoModalCloseEvent } from "./modal.interfaces";
+import { ModalCloseEvent } from "./modal.interfaces";
 export declare class Modal implements ComponentInterface {
-  private trap?;
-  private dialogElement?;
-  private modalElement?;
+  private htmlDialogElement?;
   host: HTMLDsoModalElement;
   ariaId: string;
   hasFooter?: boolean;
+  /**
+   * when set the modal will be shown in fullscreen.
+   */
+  fullscreen?: boolean;
   /**
    * The title of the Modal.
    */
@@ -18,23 +19,16 @@ export declare class Modal implements ComponentInterface {
   role: string | null;
   /**
    * when `false` the close button in the header will not be rendered. Defaults to `true`.
+   *
+   * Needs `modalTitle` to be set.
    */
   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;
   /**
    * Emitted when the user wants to close the Modal.
    */
-  dsoClose: EventEmitter<DsoModalCloseEvent>;
+  dsoClose: EventEmitter<ModalCloseEvent>;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;
-  private setFocusTrap;
 }

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

@@ -1,16 +1,5 @@
-export interface DsoModalCloseEvent {
-  originalEvent?: MouseEvent;
+export interface ModalCloseEvent {
+  originalEvent?: MouseEvent | Event;
 }
 export type ModalRole = "dialog" | "alert" | "alertdialog";
 export 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/viewer-grid/components/filterpanel.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+export interface ViewerGridFilterpanelProps {
+  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;
+  onApply: (mouseEvent: MouseEvent) => void;
+  onCancel: (event: MouseEvent | Event) => void;
+}
+export declare const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps>;

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

@@ -0,0 +1,3 @@
+export { Filterpanel } from "./filterpanel";
+export { MainPanel } from "./main-panel";
+export { Overlay } from "./overlay";

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

@@ -0,0 +1,10 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+import { MainSize } from "../viewer-grid.interfaces";
+export interface ViewerGridMainPanelProps {
+  ref: ((element: HTMLDivElement | undefined) => void) | undefined;
+  tabView: boolean;
+  mainSize: MainSize;
+  shrinkMain: () => void;
+  expandMain: () => void;
+}
+export declare const MainPanel: FunctionalComponent<ViewerGridMainPanelProps>;

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

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+export interface ViewerGridOverlayProps {
+  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;
+  dsoCloseOverlay: (event: MouseEvent | Event) => void;
+}
+export declare const Overlay: FunctionalComponent<ViewerGridOverlayProps>;

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

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+export interface ViewerGridFilterpanelButtonsProps {
+  onApply: (mouseEvent: MouseEvent) => void;
+  onCancel: (mouseEvent: MouseEvent) => void;
+}
+export declare const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps>;

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

@@ -1,8 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./viewer-grid.interfaces";
+import { MainSize, Tabs, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./viewer-grid.interfaces";
 export declare class ViewerGrid {
-  private sizeLabelMap;
-  private mapPanel?;
+  private mediaCondition;
+  private tabLabelMap;
+  private mainPanel?;
   /**
    * Set to true when filterpanel should show.
    */
@@ -18,18 +19,20 @@ export declare class ViewerGrid {
    */
   initialMainSize?: MainSize;
   mainSize: MainSize;
+  tabView: boolean;
+  activeTab: Tabs;
   /**
    * Emitted when user wants to close the overlay.
    */
-  dsoCloseOverlay: EventEmitter<MouseEvent | KeyboardEvent>;
+  dsoCloseOverlay: EventEmitter<ViewerGridCloseOverlayEvent>;
   /**
    * Emitted when user cancels filterpanel.
    */
-  dsoFilterpanelCancel: EventEmitter<FilterpanelEvent>;
+  dsoFilterpanelCancel: EventEmitter<ViewerGridFilterpanelCancelEvent>;
   /**
    * Emitted when user applies filterpanel options.
    */
-  dsoFilterpanelApply: EventEmitter<FilterpanelEvent>;
+  dsoFilterpanelApply: EventEmitter<ViewerGridFilterpanelApplyEvent>;
   /**
    * Emitted before and after main size animation. Inspect `detail` property for more information.
    */
@@ -37,19 +40,17 @@ export declare class ViewerGrid {
   host: HTMLDsoViewerGridElement;
   private filterpanel;
   private filterpanelSlot;
-  private filterpanelFocustrap;
   private overlay;
   private overlaySlot;
-  private overlayFocustrap;
   mainSizeWatcher(currentSize: MainSize, previousSize: MainSize): void;
+  filterpanelOpenWatcher(open: boolean): void;
+  overlayOpenWatcher(open: boolean): void;
   private shrinkMain;
   private expandMain;
-  private updateFocusTrap;
-  private keyDownListener;
+  private changeListener;
   connectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;
-  componentDidUpdate(): void;
   disconnectedCallback(): void;
   private handleFilterpanelApply;
   private handleFilterpanelCancel;

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

@@ -6,10 +6,21 @@ export interface ViewerGridChangeSizeEvent {
   previousSize: MainSize;
   currentSize: MainSize;
 }
-export interface FilterpanelEvent {
-  originalEvent: MouseEvent;
+export interface ViewerGridCloseOverlayEvent {
+  originalEvent: MouseEvent | Event;
+}
+export interface ViewerGridFilterpanelCancelEvent {
+  originalEvent: MouseEvent | Event;
+}
+export interface ViewerGridFilterpanelApplyEvent {
+  originalEvent: MouseEvent | Event;
 }
 export type MainSize = "small" | "medium" | "large";
 export type LabelSizeMap = {
   [key in MainSize]: string;
 };
+export declare const tabs: readonly ["main", "map"];
+export type Tabs = (typeof tabs)[number];
+export type TabLabelMap = {
+  [key in Tabs]: string;
+};

package/dist/types/components.d.ts

@@ -21,8 +21,7 @@ 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 { FocusTargetValueOrFalse } from "focus-trap";
-import { DsoModalCloseEvent } from "./components/modal/modal.interfaces";
+import { ModalCloseEvent } from "./components/modal/modal.interfaces";
 import { OzonContentAnchorClick, OzonContentClick } from "./components/ozon-content/ozon-content.interfaces";
 import { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
 import { ResponsiveElementSize } from "./components/responsive-element/responsive-element.interfaces";
@@ -30,7 +29,7 @@ import { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
 import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 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";
+import { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
 export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
 export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
@@ -47,8 +46,7 @@ export { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/lis
 export { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 export { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
 export { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
-export { FocusTargetValueOrFalse } from "focus-trap";
-export { DsoModalCloseEvent } from "./components/modal/modal.interfaces";
+export { ModalCloseEvent } from "./components/modal/modal.interfaces";
 export { OzonContentAnchorClick, OzonContentClick } from "./components/ozon-content/ozon-content.interfaces";
 export { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
 export { ResponsiveElementSize } from "./components/responsive-element/responsive-element.interfaces";
@@ -56,7 +54,7 @@ export { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
 export { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
-export { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid.interfaces";
+export { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
 export namespace Components {
     interface DsoAccordion {
         "_getState": () => Promise<AccordionInternalState>;
@@ -601,23 +599,19 @@ export namespace Components {
     }
     interface DsoModal {
         /**
-          * 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.
+          * when set the modal will be shown in fullscreen.
          */
-        "initialFocus"?: string;
+        "fullscreen"?: boolean;
         /**
           * The title of the Modal.
          */
         "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`.
          */
         "role": string | null;
         /**
-          * when `false` the close button in the header will not be rendered. Defaults to `true`.
+          * when `false` the close button in the header will not be rendered. Defaults to `true`.  Needs `modalTitle` to be set.
          */
         "showCloseButton": boolean;
     }
@@ -1903,9 +1897,9 @@ declare namespace LocalJSX {
     }
     interface DsoModal {
         /**
-          * 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.
+          * when set the modal will be shown in fullscreen.
          */
-        "initialFocus"?: string;
+        "fullscreen"?: boolean;
         /**
           * The title of the Modal.
          */
@@ -1913,17 +1907,13 @@ declare namespace LocalJSX {
         /**
           * Emitted when the user wants to close the Modal.
          */
-        "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;
+        "onDsoClose"?: (event: DsoModalCustomEvent<ModalCloseEvent>) => void;
         /**
           * the role for the modal `dialog` | `alert` | `alertdialog`.
          */
         "role"?: string | null;
         /**
-          * when `false` the close button in the header will not be rendered. Defaults to `true`.
+          * when `false` the close button in the header will not be rendered. Defaults to `true`.  Needs `modalTitle` to be set.
          */
         "showCloseButton"?: boolean;
     }
@@ -2179,15 +2169,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when user wants to close the overlay.
          */
-        "onDsoCloseOverlay"?: (event: DsoViewerGridCustomEvent<MouseEvent | KeyboardEvent>) => void;
+        "onDsoCloseOverlay"?: (event: DsoViewerGridCustomEvent<ViewerGridCloseOverlayEvent>) => void;
         /**
           * Emitted when user applies filterpanel options.
          */
-        "onDsoFilterpanelApply"?: (event: DsoViewerGridCustomEvent<FilterpanelEvent>) => void;
+        "onDsoFilterpanelApply"?: (event: DsoViewerGridCustomEvent<ViewerGridFilterpanelApplyEvent>) => void;
         /**
           * Emitted when user cancels filterpanel.
          */
-        "onDsoFilterpanelCancel"?: (event: DsoViewerGridCustomEvent<FilterpanelEvent>) => void;
+        "onDsoFilterpanelCancel"?: (event: DsoViewerGridCustomEvent<ViewerGridFilterpanelCancelEvent>) => void;
         /**
           * Emitted before and after main size animation. Inspect `detail` property for more information.
          */

package/dist/types/index.d.ts

@@ -1,2 +1 @@
 export * from "./components";
-export * from "./components/modal/modal.controller";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "57.0.0",
+  "version": "58.0.1",
   "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": "^57.0.0",
+    "dso-toolkit": "^58.0.1",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.4.3",
     "popper-max-size-modifier": "^0.2.0",