@dso-toolkit/core 57.0.0 → 58.0.0

package/dist/cjs/index.cjs.js

@@ -1,76 +1,4 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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;
-  }
-}
-
-exports.DsoModalController = DsoModalController;
 
 //# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"file":"index.cjs.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.cjs.js","mappings":";;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-efc2222e.js');
+const index = require('./index-d4003ee3.js');
 
 /*
  Stencil Client Patch Esm v3.4.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo.cjs",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[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.cjs",[[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.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[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.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[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.cjs",[[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.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[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.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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 index.bootstrapLazy([["dsot-document-component-demo.cjs",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[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.cjs",[[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.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[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.cjs",[[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.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[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.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[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.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[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.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[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.cjs",[[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.cjs",[[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/collection/components/modal/modal.css

@@ -12,6 +12,47 @@
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
+:host([fullscreen]) dialog {
+  inline-size: 100dvi;
+  block-size: 100dvb;
+}
+:host([fullscreen]) dialog .dso-dialog {
+  display: flex;
+  flex-direction: column;
+  max-inline-size: 100%;
+  block-size: 100%;
+}
+:host([fullscreen]) dialog .dso-dialog > dso-scrollable {
+  flex-grow: 1;
+  max-block-size: unset;
+}
+:host([fullscreen]) dialog .dso-footer {
+  flex-shrink: 0;
+}
+
+@media screen and (max-width: 480px) {
+  :host dialog {
+    inline-size: 100dvi;
+    block-size: 100dvb;
+  }
+  :host dialog .dso-dialog {
+    display: flex;
+    flex-direction: column;
+    max-inline-size: 100%;
+    block-size: 100%;
+  }
+  :host dialog .dso-dialog > dso-scrollable {
+    flex-grow: 1;
+    max-block-size: unset;
+  }
+  :host dialog .dso-footer {
+    flex-shrink: 0;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -44,49 +85,45 @@ button::-moz-focus-inner {
 }
 
 .dso-modal {
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 530;
+  overflow: visible;
+  padding: 0;
+  border: 0;
+}
+.dso-modal::backdrop {
+  background-color: rgba(255, 255, 255, 0.8);
 }
 .dso-modal .dso-dialog {
-  animation: 1s ease-out 0s 1 slideInFromTop;
+  max-inline-size: 640px;
   background-color: #fff;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: clamp(40px, 15vh, 15vh);
-  max-width: 640px;
   opacity: 1;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+  animation: 1s ease-out 0s 1 slideInFromTop;
 }
 .dso-modal .dso-header {
-  border-bottom: 1px solid #ccc;
-  padding: 16px;
   position: relative;
+  padding: 16px;
+  border-block-end: 1px solid #ccc;
 }
 .dso-modal .dso-header h2 {
-  color: #275937;
+  max-inline-size: calc(100% - 24px);
   margin: 0;
-  max-width: calc(100% - 24px);
+  color: #275937;
 }
 .dso-modal .dso-header .dso-close {
+  position: absolute;
+  inset-block-start: 16px;
+  inset-inline-end: 13px;
+  block-size: 32px;
+  inline-size: 32px;
+  padding: 0;
   background-color: transparent;
   border: 0;
-  height: 32px;
-  padding: 0;
-  position: absolute;
-  right: 13px;
   text-align: center;
-  top: 16px;
-  width: 32px;
 }
 .dso-modal > .dso-dialog > .dso-body {
-  height: calc(100% - 96px - 1.5rem);
-  max-height: calc(70vh - 144px - 1.5em);
-  min-height: 1.5rem;
+  block-size: calc(100% - 96px - 1.5rem);
+  max-block-size: calc(70vh - 144px - 1.5em);
+  min-block-size: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
@@ -116,9 +153,9 @@ button::-moz-focus-inner {
   max-width: 100%;
 }
 .dso-modal > .dso-dialog > dso-scrollable {
-  height: calc(100% - 96px - 1.5rem);
-  max-height: calc(70vh - 144px - 1.5em);
-  min-height: 6.5rem;
+  block-size: calc(100% - 96px - 1.5rem);
+  max-block-size: calc(70vh - 144px - 1.5em);
+  min-block-size: 6.5rem;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body {
   padding: 32px;
@@ -148,21 +185,24 @@ button::-moz-focus-inner {
   height: auto;
   max-width: 100%;
 }
+.dso-modal .dso-body:focus-visible {
+  outline: none;
+}
 .dso-modal .dso-footer {
-  min-height: 80px;
+  min-block-size: 80px;
   padding: 16px 32px;
-  text-align: right;
+  text-align: end;
 }
 @media screen and (max-width: 767px) {
   .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .dso-modal .dso-footer button {
+    inline-size: 100%;
     text-align: center;
-    width: 100%;
   }
   .dso-modal .dso-footer button + button {
-    margin-top: 8px;
+    margin-block-start: 8px;
   }
   .dso-modal .dso-footer button.dso-tertiary,
   .dso-modal .dso-footer button.dso-tertiary span {
@@ -171,26 +211,26 @@ button::-moz-focus-inner {
 }
 @media screen and (min-width: 768px) {
   .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
-    margin-left: 16px;
+    margin-inline-start: 16px;
   }
   .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 @media screen and (max-width: 767px) {
   .dso-modal .dso-dialog {
-    max-width: 100%;
-    margin-top: 0;
+    max-inline-size: 100%;
+    margin-block-start: 0;
   }
   .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .dso-modal .dso-footer button {
+    inline-size: 100%;
     text-align: center;
-    width: 100%;
   }
   .dso-modal .dso-footer button + button {
-    margin-top: 8px;
+    margin-block-start: 8px;
   }
   .dso-modal .dso-footer button.dso-tertiary,
   .dso-modal .dso-footer button.dso-tertiary span {
@@ -199,37 +239,26 @@ button::-moz-focus-inner {
 }
 @media screen and (max-height: 380px) {
   .dso-modal .dso-dialog {
-    margin-bottom: 8px;
-    margin-top: 8px;
-    min-height: 216px;
+    min-block-size: 216px;
+    margin-block-start: 8px;
+    margin-block-end: 8px;
   }
   .dso-modal .dso-header {
     padding: 8px 16px;
   }
   .dso-modal .dso-header .dso-close {
-    top: 8px;
+    inset-block-start: 8px;
   }
   .dso-modal .dso-body {
     padding: 16px 24px;
   }
   .dso-modal .dso-footer {
-    min-height: auto;
+    min-block-size: auto;
     overflow: auto;
     padding: 8px 32px;
   }
 }
 
-.dso-modal-overlay {
-  background-color: rgba(255, 255, 255, 0.8);
-  bottom: 0;
-  display: block;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 529;
-}
-
 .dso-close dso-icon {
   color: #39870c;
 }

package/dist/collection/components/modal/modal.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.interfaces.js","sourceRoot":"","sources":["../../../src/components/modal/modal.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface DsoModalCloseEvent {\r\n  originalEvent?: MouseEvent;\r\n}\r\n\r\nexport type ModalRole = \"dialog\" | \"alert\" | \"alertdialog\";\r\n\r\nexport type AllowedModalContentTypes = HTMLElement | DocumentFragment | string;\r\n\r\nexport interface ModalContent {\r\n  title?: string;\r\n  body: AllowedModalContentTypes;\r\n  footer?: AllowedModalContentTypes;\r\n}\r\n\r\nexport interface ModalOptions {\r\n  role?: ModalRole;\r\n  showCloseButton?: boolean;\r\n  initialFocus?: string;\r\n  returnFocus?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => HTMLElement | SVGElement | string | false;\r\n}\r\n"]}
+{"version":3,"file":"modal.interfaces.js","sourceRoot":"","sources":["../../../src/components/modal/modal.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface ModalCloseEvent {\r\n  originalEvent?: MouseEvent | Event;\r\n}\r\n\r\nexport type ModalRole = \"dialog\" | \"alert\" | \"alertdialog\";\r\n\r\nexport type AllowedModalContentTypes = HTMLElement | DocumentFragment | string;\r\n"]}

package/dist/collection/components/modal/modal.js

@@ -1,64 +1,33 @@
-import { h, Fragment } from "@stencil/core";
-import { createFocusTrap } from "focus-trap";
+import { h } from "@stencil/core";
 import { v4 } from "uuid";
 export class Modal {
   constructor() {
     this.ariaId = v4();
     this.hasFooter = undefined;
+    this.fullscreen = undefined;
     this.modalTitle = undefined;
     this.role = "dialog";
     this.showCloseButton = true;
-    this.initialFocus = undefined;
-    this.returnFocus = undefined;
   }
   componentWillLoad() {
-    this.hasFooter = this.host.querySelector("*[slot = 'footer']") !== null;
+    this.hasFooter = this.host.querySelector("[slot='footer']") !== null;
   }
   componentDidLoad() {
-    this.setFocusTrap();
+    var _a;
+    (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
+    document.body.classList.add("dso-modal-open");
   }
   disconnectedCallback() {
     var _a;
-    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits
+    document.body.classList.remove("dso-modal-open");
+    (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.close();
   }
   render() {
     var _a;
-    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", null, h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" }))), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
-  }
-  setFocusTrap() {
-    if (this.dialogElement && !this.trap) {
-      this.trap = createFocusTrap(this.dialogElement, {
-        initialFocus: () => {
-          var _a, _b, _c;
-          if (this.initialFocus) {
-            const initialFocusElement = this.host.querySelector(this.initialFocus);
-            if (!initialFocusElement) {
-              console.warn(`element '${this.initialFocus}' could not be found`);
-            }
-            else {
-              return initialFocusElement;
-            }
-          }
-          return ((_c = (_a = this.host.querySelector("div[slot='footer'] .dso-primary")) !== null && _a !== void 0 ? _a : (_b = this.modalElement) === null || _b === void 0 ? void 0 : _b.querySelector(".dso-close")) !== null && _c !== void 0 ? _c : false);
-        },
-        allowOutsideClick: true,
-        setReturnFocus: (e) => { var _a, _b; return (_b = (_a = this.returnFocus) === null || _a === void 0 ? void 0 : _a.call(this, e)) !== null && _b !== void 0 ? _b : e; },
-        escapeDeactivates: true,
-        tabbableOptions: {
-          getShadowRoot: true,
-        },
-        clickOutsideDeactivates: (e) => {
-          if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {
-            return true;
-          }
-          return false;
-        },
-        onDeactivate: () => {
-          delete this.trap;
-          this.dsoClose.emit({ originalEvent: undefined });
-        },
-      }).activate();
-    }
+    return (h("dialog", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        e.preventDefault();
+        this.dsoClose.emit({ originalEvent: e });
+      } }, h("div", { class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", null, h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" }))), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" }))))));
   }
   static get is() { return "dso-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -74,6 +43,23 @@ export class Modal {
   }
   static get properties() {
     return {
+      "fullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "when set the modal will be shown in fullscreen."
+        },
+        "attribute": "fullscreen",
+        "reflect": true
+      },
       "modalTitle": {
         "type": "string",
         "mutable": false,
@@ -121,54 +107,11 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "when `false` the close button in the header will not be rendered. Defaults to `true`."
+          "text": "when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n\r\nNeeds `modalTitle` to be set."
         },
         "attribute": "show-close-button",
         "reflect": false,
         "defaultValue": "true"
-      },
-      "initialFocus": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "initial-focus",
-        "reflect": false
-      },
-      "returnFocus": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse",
-          "resolved": "((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            },
-            "SVGElement": {
-              "location": "global"
-            },
-            "FocusTargetValueOrFalse": {
-              "location": "import",
-              "path": "focus-trap"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Function that returns the element to focus on Modal close. Return `false` for no focus restore."
-        }
       }
     };
   }
@@ -190,10 +133,10 @@ export class Modal {
           "text": "Emitted when the user wants to close the Modal."
         },
         "complexType": {
-          "original": "DsoModalCloseEvent",
-          "resolved": "DsoModalCloseEvent",
+          "original": "ModalCloseEvent",
+          "resolved": "ModalCloseEvent",
           "references": {
-            "DsoModalCloseEvent": {
+            "ModalCloseEvent": {
               "location": "import",
               "path": "./modal.interfaces"
             }

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State } from \"@stencil/core\";\r\nimport { createFocusTrap, FocusTargetValueOrFalse, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { DsoModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  private dialogElement?: HTMLDivElement;\r\n\r\n  private modalElement?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  @State()\r\n  hasFooter?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  /**\r\n   * 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.\r\n   */\r\n  @Prop()\r\n  initialFocus?: string;\r\n\r\n  /**\r\n   * Function that returns the element to focus on Modal close. Return `false` for no focus restore.\r\n   */\r\n  @Prop()\r\n  returnFocus?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<DsoModalCloseEvent>;\r\n\r\n  componentWillLoad(): void {\r\n    this.hasFooter = this.host.querySelector(\"*[slot = 'footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-modal-overlay\"></div>\r\n        <div\r\n          class=\"dso-modal\"\r\n          role={this.role ?? undefined}\r\n          aria-modal=\"true\"\r\n          aria-labelledby={this.ariaId}\r\n          ref={(element) => (this.modalElement = element)}\r\n        >\r\n          <div class=\"dso-dialog\" role=\"document\" ref={(element) => (this.dialogElement = element)}>\r\n            {this.modalTitle ? (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n                {this.showCloseButton && (\r\n                  <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                    <dso-icon icon=\"times\"></dso-icon>\r\n                    <span class=\"sr-only\">Sluiten</span>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            ) : (\r\n              <span class=\"sr-only\" id={this.ariaId}>\r\n                Dialoog\r\n              </span>\r\n            )}\r\n\r\n            <dso-scrollable>\r\n              <div class=\"dso-body\" tabIndex={0}>\r\n                <slot name=\"body\" />\r\n              </div>\r\n            </dso-scrollable>\r\n\r\n            {this.hasFooter && (\r\n              <div class=\"dso-footer\">\r\n                <slot name=\"footer\" />\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.dialogElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.dialogElement, {\r\n        initialFocus: () => {\r\n          if (this.initialFocus) {\r\n            const initialFocusElement = this.host.querySelector<HTMLElement>(this.initialFocus);\r\n            if (!initialFocusElement) {\r\n              console.warn(`element '${this.initialFocus}' could not be found`);\r\n            } else {\r\n              return initialFocusElement;\r\n            }\r\n          }\r\n\r\n          return (\r\n            this.host.querySelector<HTMLButtonElement>(\"div[slot='footer'] .dso-primary\") ??\r\n            this.modalElement?.querySelector<HTMLButtonElement>(\".dso-close\") ??\r\n            false\r\n          );\r\n        },\r\n        allowOutsideClick: true,\r\n        setReturnFocus: (e) => this.returnFocus?.(e) ?? e,\r\n        escapeDeactivates: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {\r\n            return true;\r\n          }\r\n\r\n          return false;\r\n        },\r\n        onDeactivate: () => {\r\n          delete this.trap;\r\n\r\n          this.dsoClose.emit({ originalEvent: undefined });\r\n        },\r\n      }).activate();\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAS1B,MAAM,OAAO,KAAK;;kBAOP,EAAE,EAAE;;;;gBAqBS,QAAQ;2BAQZ,IAAI;;EAQtB,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;EACvE,CAAC;EAED,gBAAgB;;IACd,MAAA,IAAI,CAAC,iBAAiB,0CAAE,SAAS,EAAE,CAAC;IACpC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;EAChD,CAAC;EAED,oBAAoB;;IAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACjD,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;MAC3C,CAAC;MAED,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU;QACpC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAC,YAAY;UACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM;UAC1C,IAAI,CAAC,eAAe,IAAI,CACvB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;YAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY;YAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,CACP,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR;QAED;UACE,WAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC;YAC/B,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS;QAEhB,IAAI,CAAC,SAAS,IAAI,CACjB,WAAK,KAAK,EAAC,YAAY;UACrB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  @State()\r\n  hasFooter?: boolean;\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  componentWillLoad(): void {\r\n    this.hasFooter = this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.htmlDialogElement?.showModal();\r\n    document.body.classList.add(\"dso-modal-open\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.body.classList.remove(\"dso-modal-open\");\r\n    this.htmlDialogElement?.close();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"]}