@dso-toolkit/core 62.12.0 → 62.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/cjs/dso-advanced-select.cjs.entry.js +98 -0
  2. package/dist/cjs/dso-advanced-select.cjs.entry.js.map +1 -0
  3. package/dist/cjs/dso-dropdown-menu.cjs.entry.js +2 -11
  4. package/dist/cjs/dso-dropdown-menu.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dso-modal.cjs.entry.js +13 -4
  6. package/dist/cjs/dso-modal.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  8. package/dist/cjs/get-active-element-618f7b1f.js +16 -0
  9. package/dist/cjs/get-active-element-618f7b1f.js.map +1 -0
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/collection/collection-manifest.json +1 -0
  12. package/dist/collection/components/advanced-select/advanced-select.css +206 -0
  13. package/dist/collection/components/advanced-select/advanced-select.js +220 -0
  14. package/dist/collection/components/advanced-select/advanced-select.js.map +1 -0
  15. package/dist/collection/components/advanced-select/advanced-select.models.js +2 -0
  16. package/dist/collection/components/advanced-select/advanced-select.models.js.map +1 -0
  17. package/dist/collection/components/dropdown-menu/dropdown-menu.js +3 -12
  18. package/dist/collection/components/dropdown-menu/dropdown-menu.js.map +1 -1
  19. package/dist/collection/components/modal/modal.js +37 -6
  20. package/dist/collection/components/modal/modal.js.map +1 -1
  21. package/dist/collection/utils/get-active-element.js +11 -0
  22. package/dist/collection/utils/get-active-element.js.map +1 -0
  23. package/dist/components/dropdown-menu.js +2 -11
  24. package/dist/components/dropdown-menu.js.map +1 -1
  25. package/dist/components/dso-advanced-select.d.ts +11 -0
  26. package/dist/components/dso-advanced-select.js +129 -0
  27. package/dist/components/dso-advanced-select.js.map +1 -0
  28. package/dist/components/dso-modal.js +15 -6
  29. package/dist/components/dso-modal.js.map +1 -1
  30. package/dist/components/get-active-element.js +14 -0
  31. package/dist/components/get-active-element.js.map +1 -0
  32. package/dist/components/index.d.ts +2 -0
  33. package/dist/components/index.js +1 -0
  34. package/dist/components/index.js.map +1 -1
  35. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  36. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  37. package/dist/dso-toolkit/p-55dec51f.entry.js +2 -0
  38. package/dist/dso-toolkit/p-55dec51f.entry.js.map +1 -0
  39. package/dist/dso-toolkit/p-6e9b961b.js +2 -0
  40. package/dist/dso-toolkit/p-6e9b961b.js.map +1 -0
  41. package/dist/dso-toolkit/p-dd21df39.entry.js +2 -0
  42. package/dist/dso-toolkit/p-dd21df39.entry.js.map +1 -0
  43. package/dist/dso-toolkit/p-e32f287e.entry.js +2 -0
  44. package/dist/dso-toolkit/p-e32f287e.entry.js.map +1 -0
  45. package/dist/esm/dso-advanced-select.entry.js +94 -0
  46. package/dist/esm/dso-advanced-select.entry.js.map +1 -0
  47. package/dist/esm/dso-dropdown-menu.entry.js +2 -11
  48. package/dist/esm/dso-dropdown-menu.entry.js.map +1 -1
  49. package/dist/esm/dso-modal.entry.js +13 -4
  50. package/dist/esm/dso-modal.entry.js.map +1 -1
  51. package/dist/esm/dso-toolkit.js +1 -1
  52. package/dist/esm/get-active-element-0e7dc01b.js +14 -0
  53. package/dist/esm/get-active-element-0e7dc01b.js.map +1 -0
  54. package/dist/esm/loader.js +1 -1
  55. package/dist/types/components/advanced-select/advanced-select.d.ts +40 -0
  56. package/dist/types/components/advanced-select/advanced-select.models.d.ts +26 -0
  57. package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +0 -1
  58. package/dist/types/components/modal/modal.d.ts +10 -2
  59. package/dist/types/components.d.ts +71 -0
  60. package/dist/types/utils/get-active-element.d.ts +1 -0
  61. package/package.json +2 -2
  62. package/dist/dso-toolkit/p-92fd9516.entry.js +0 -2
  63. package/dist/dso-toolkit/p-92fd9516.entry.js.map +0 -1
  64. package/dist/dso-toolkit/p-f4cb0d36.entry.js +0 -2
  65. package/dist/dso-toolkit/p-f4cb0d36.entry.js.map +0 -1
@@ -0,0 +1,14 @@
1
+ function getActiveElement({ activeElement } = document) {
2
+ var _a;
3
+ if (!activeElement) {
4
+ return null;
5
+ }
6
+ if (activeElement.shadowRoot) {
7
+ return (_a = getActiveElement(activeElement.shadowRoot)) !== null && _a !== void 0 ? _a : activeElement;
8
+ }
9
+ return activeElement;
10
+ }
11
+
12
+ export { getActiveElement as g };
13
+
14
+ //# sourceMappingURL=get-active-element-0e7dc01b.js.map
@@ -0,0 +1 @@
1
+ {"file":"get-active-element-0e7dc01b.js","mappings":"SAAgB,gBAAgB,CAAC,EAAE,aAAa,KAA2B,QAAQ;;EACjF,IAAI,CAAC,aAAa,EAAE;IAClB,OAAO,IAAI,CAAC;GACb;EAED,IAAI,aAAa,CAAC,UAAU,EAAE;IAC5B,OAAO,MAAA,gBAAgB,CAAC,aAAa,CAAC,UAAU,CAAC,mCAAI,aAAa,CAAC;GACpE;EAED,OAAO,aAAa,CAAC;AACvB;;;;","names":[],"sources":["src/utils/get-active-element.ts"],"sourcesContent":["export function getActiveElement({ activeElement }: DocumentOrShadowRoot = document): Element | null {\r\n if (!activeElement) {\r\n return null;\r\n }\r\n\r\n if (activeElement.shadowRoot) {\r\n return getActiveElement(activeElement.shadowRoot) ?? activeElement;\r\n }\r\n\r\n return activeElement;\r\n}\r\n"],"version":3}
@@ -3,7 +3,7 @@ export { s as setNonce } from './index-528d5213.js';
3
3
 
4
4
  const defineCustomElements = (win, options) => {
5
5
  if (typeof window === 'undefined') return undefined;
6
- return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["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-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":[516,"has-nested-accordion"],"hover":[32],"focusHandle":[64]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[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"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]},null,{"useDropDownMenu":["setShowDropDown"]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["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-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"]],{"suggestions":["suggestionsWatcher"]}]]],["dso-card",[[1,"dso-card",{"clickable":[516],"imageShape":[513,"image-shape"],"href":[513],"mode":[513]}]]],["dso-date-picker-legacy",[[2,"dso-date-picker-legacy",{"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"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]},null,{"manual":["watchManualCallback"]}]]],["dso-mark-bar",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]},null,{"variant":["updateVariant"],"reverseAlign":["updateReverseAlign"]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["dso-logo",[[1,"dso-logo",{"label":[513],"ribbon":[1]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterpanelOpen":["filterpanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},null,{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["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":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32],"isOpen":[32]},null,{"open":["toggleOpen"],"enableAnimation":["toggleEnableAnimation"]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["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]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["dso-alert_7",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[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"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[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],"mark":[16],"recursiveToggle":[8,"recursive-toggle"]}],[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);
6
+ return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["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-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":[516,"has-nested-accordion"],"hover":[32],"focusHandle":[64]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-advanced-select",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["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"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]},null,{"useDropDownMenu":["setShowDropDown"]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["dso-modal",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[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-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"]],{"suggestions":["suggestionsWatcher"]}]]],["dso-card",[[1,"dso-card",{"clickable":[516],"imageShape":[513,"image-shape"],"href":[513],"mode":[513]}]]],["dso-date-picker-legacy",[[2,"dso-date-picker-legacy",{"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"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]},null,{"manual":["watchManualCallback"]}]]],["dso-mark-bar",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]},null,{"variant":["updateVariant"],"reverseAlign":["updateReverseAlign"]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["dso-logo",[[1,"dso-logo",{"label":[513],"ribbon":[1]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterpanelOpen":["filterpanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},null,{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["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":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32],"isOpen":[32]},null,{"open":["toggleOpen"],"enableAnimation":["toggleEnableAnimation"]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["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]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["dso-alert_7",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[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"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}],[1,"dso-badge",{"status":[1]}]]],["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],"mark":[16],"recursiveToggle":[8,"recursive-toggle"]}],[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);
7
7
  };
8
8
 
9
9
  export { defineCustomElements };
@@ -0,0 +1,40 @@
1
+ import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
2
+ import { AdvancedSelectOption, AdvancedSelectChangeEvent, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./advanced-select.models";
3
+ export declare class AdvancedSelect implements ComponentInterface {
4
+ private trap?;
5
+ host: HTMLDsoAdvancedSelectElement;
6
+ /**
7
+ * The options to display in the select.
8
+ */
9
+ options: AdvancedSelectOptionOrGroup<never>[];
10
+ /**
11
+ * The active option. By object reference.
12
+ */
13
+ active?: AdvancedSelectOption<never>;
14
+ /**
15
+ * An extra text for the active option. Only visible in the list of options.
16
+ */
17
+ activeHint?: string;
18
+ /**
19
+ * The open state of the options list.
20
+ */
21
+ open: boolean;
22
+ /**
23
+ * Emitted when user selects an option
24
+ */
25
+ dsoChange: EventEmitter<AdvancedSelectChangeEvent<never>>;
26
+ /**
27
+ * Emitted when user activates a group redirect link.
28
+ */
29
+ dsoRedirect: EventEmitter<AdvancedSelectRedirectEvent>;
30
+ private toggleButtonElementRef;
31
+ keyDownListener(event: KeyboardEvent): void;
32
+ componentDidRender(): void;
33
+ private toggleOpen;
34
+ private createTrap;
35
+ private removeTrap;
36
+ private handleTab;
37
+ private handleOptionClick;
38
+ private handleRedirectClick;
39
+ render(): any;
40
+ }
@@ -0,0 +1,26 @@
1
+ export type AdvancedSelectVariant = "primary" | "success" | "info" | "warning" | "danger" | "error" | "attention";
2
+ export interface AdvancedSelectOption<T> {
3
+ label: string;
4
+ value?: T;
5
+ }
6
+ export interface AdvancedSelectGroupRedirect {
7
+ label: string;
8
+ href: string;
9
+ }
10
+ export interface AdvancedSelectGroup<T> {
11
+ label: string;
12
+ summaryCounter?: boolean;
13
+ redirect?: AdvancedSelectGroupRedirect;
14
+ options: AdvancedSelectOption<T>[];
15
+ variant?: AdvancedSelectVariant;
16
+ }
17
+ export type AdvancedSelectOptionOrGroup<T> = AdvancedSelectOption<T> | AdvancedSelectGroup<T>;
18
+ export interface AdvancedSelectChangeEvent<T> {
19
+ originalEvent: MouseEvent;
20
+ option: AdvancedSelectOption<T>;
21
+ }
22
+ export interface AdvancedSelectRedirectEvent {
23
+ originalEvent: MouseEvent;
24
+ isModifiedEvent: boolean;
25
+ redirect: AdvancedSelectGroupRedirect;
26
+ }
@@ -46,7 +46,6 @@ export declare class DropdownMenu {
46
46
  componentDidRender(): void;
47
47
  disconnectedCallback(): void;
48
48
  private keyDownListener;
49
- private getActiveElement;
50
49
  private tabInPopup;
51
50
  private escape;
52
51
  render(): any;
@@ -4,7 +4,6 @@ export declare class Modal implements ComponentInterface {
4
4
  private htmlDialogElement?;
5
5
  host: HTMLDsoModalElement;
6
6
  ariaId: string;
7
- hasFooter?: boolean;
8
7
  /**
9
8
  * when set the modal will be shown in fullscreen.
10
9
  */
@@ -17,17 +16,26 @@ export declare class Modal implements ComponentInterface {
17
16
  * the role for the modal `dialog` | `alert` | `alertdialog`.
18
17
  */
19
18
  role: string | null;
19
+ /**
20
+ * The element to return focus to after the modal is closed.
21
+ *
22
+ * * `undefined` will return focus to the previously focused element (default).
23
+ * * `false` will not return focus to any element.
24
+ * * or, provide your own `HTMLElement` that will receive focus upon closing.
25
+ */
26
+ returnFocus: false | HTMLElement | undefined;
20
27
  /**
21
28
  * when `false` the close button in the header will not be rendered. Defaults to `true`.
22
29
  *
23
30
  * Needs `modalTitle` to be set.
24
31
  */
25
32
  showCloseButton: boolean;
33
+ private returnFocusElement;
26
34
  /**
27
35
  * Emitted when the user wants to close the Modal.
28
36
  */
29
37
  dsoClose: EventEmitter<ModalCloseEvent>;
30
- componentWillLoad(): void;
38
+ get hasFooter(): boolean;
31
39
  componentDidLoad(): void;
32
40
  disconnectedCallback(): void;
33
41
  render(): any;
@@ -7,6 +7,7 @@
7
7
  import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
8
8
  import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
9
9
  import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
10
+ import { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.models";
10
11
  import { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
11
12
  import { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
12
13
  import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
@@ -35,6 +36,7 @@ import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-
35
36
  import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
36
37
  export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
37
38
  export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
39
+ export { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.models";
38
40
  export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
39
41
  export { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
40
42
  export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
@@ -143,6 +145,20 @@ export namespace Components {
143
145
  */
144
146
  "warning": boolean;
145
147
  }
148
+ interface DsoAdvancedSelect {
149
+ /**
150
+ * The active option. By object reference.
151
+ */
152
+ "active"?: AdvancedSelectOption<never>;
153
+ /**
154
+ * An extra text for the active option. Only visible in the list of options.
155
+ */
156
+ "activeHint"?: string;
157
+ /**
158
+ * The options to display in the select.
159
+ */
160
+ "options": AdvancedSelectOptionOrGroup<never>[];
161
+ }
146
162
  interface DsoAlert {
147
163
  /**
148
164
  * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -727,6 +743,10 @@ export namespace Components {
727
743
  * The title of the Modal.
728
744
  */
729
745
  "modalTitle"?: string;
746
+ /**
747
+ * The element to return focus to after the modal is closed. * `undefined` will return focus to the previously focused element (default). * `false` will not return focus to any element. * or, provide your own `HTMLElement` that will receive focus upon closing.
748
+ */
749
+ "returnFocus": false | HTMLElement | undefined;
730
750
  /**
731
751
  * the role for the modal `dialog` | `alert` | `alertdialog`.
732
752
  */
@@ -1014,6 +1034,10 @@ export interface DsoAccordionSectionCustomEvent<T> extends CustomEvent<T> {
1014
1034
  detail: T;
1015
1035
  target: HTMLDsoAccordionSectionElement;
1016
1036
  }
1037
+ export interface DsoAdvancedSelectCustomEvent<T> extends CustomEvent<T> {
1038
+ detail: T;
1039
+ target: HTMLDsoAdvancedSelectElement;
1040
+ }
1017
1041
  export interface DsoAnnotationButtonCustomEvent<T> extends CustomEvent<T> {
1018
1042
  detail: T;
1019
1043
  target: HTMLDsoAnnotationButtonElement;
@@ -1160,6 +1184,24 @@ declare global {
1160
1184
  prototype: HTMLDsoActionListItemElement;
1161
1185
  new (): HTMLDsoActionListItemElement;
1162
1186
  };
1187
+ interface HTMLDsoAdvancedSelectElementEventMap {
1188
+ "dsoChange": AdvancedSelectChangeEvent<never>;
1189
+ "dsoRedirect": AdvancedSelectRedirectEvent;
1190
+ }
1191
+ interface HTMLDsoAdvancedSelectElement extends Components.DsoAdvancedSelect, HTMLStencilElement {
1192
+ addEventListener<K extends keyof HTMLDsoAdvancedSelectElementEventMap>(type: K, listener: (this: HTMLDsoAdvancedSelectElement, ev: DsoAdvancedSelectCustomEvent<HTMLDsoAdvancedSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
1193
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
1194
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
1195
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
1196
+ removeEventListener<K extends keyof HTMLDsoAdvancedSelectElementEventMap>(type: K, listener: (this: HTMLDsoAdvancedSelectElement, ev: DsoAdvancedSelectCustomEvent<HTMLDsoAdvancedSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
1197
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
1198
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
1199
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
1200
+ }
1201
+ var HTMLDsoAdvancedSelectElement: {
1202
+ prototype: HTMLDsoAdvancedSelectElement;
1203
+ new (): HTMLDsoAdvancedSelectElement;
1204
+ };
1163
1205
  interface HTMLDsoAlertElement extends Components.DsoAlert, HTMLStencilElement {
1164
1206
  }
1165
1207
  var HTMLDsoAlertElement: {
@@ -1753,6 +1795,7 @@ declare global {
1753
1795
  "dso-accordion-section": HTMLDsoAccordionSectionElement;
1754
1796
  "dso-action-list": HTMLDsoActionListElement;
1755
1797
  "dso-action-list-item": HTMLDsoActionListItemElement;
1798
+ "dso-advanced-select": HTMLDsoAdvancedSelectElement;
1756
1799
  "dso-alert": HTMLDsoAlertElement;
1757
1800
  "dso-annotation-button": HTMLDsoAnnotationButtonElement;
1758
1801
  "dso-annotation-output": HTMLDsoAnnotationOutputElement;
@@ -1887,6 +1930,28 @@ declare namespace LocalJSX {
1887
1930
  */
1888
1931
  "warning"?: boolean;
1889
1932
  }
1933
+ interface DsoAdvancedSelect {
1934
+ /**
1935
+ * The active option. By object reference.
1936
+ */
1937
+ "active"?: AdvancedSelectOption<never>;
1938
+ /**
1939
+ * An extra text for the active option. Only visible in the list of options.
1940
+ */
1941
+ "activeHint"?: string;
1942
+ /**
1943
+ * Emitted when user selects an option
1944
+ */
1945
+ "onDsoChange"?: (event: DsoAdvancedSelectCustomEvent<AdvancedSelectChangeEvent<never>>) => void;
1946
+ /**
1947
+ * Emitted when user activates a group redirect link.
1948
+ */
1949
+ "onDsoRedirect"?: (event: DsoAdvancedSelectCustomEvent<AdvancedSelectRedirectEvent>) => void;
1950
+ /**
1951
+ * The options to display in the select.
1952
+ */
1953
+ "options"?: AdvancedSelectOptionOrGroup<never>[];
1954
+ }
1890
1955
  interface DsoAlert {
1891
1956
  /**
1892
1957
  * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -2601,6 +2666,10 @@ declare namespace LocalJSX {
2601
2666
  * Emitted when the user wants to close the Modal.
2602
2667
  */
2603
2668
  "onDsoClose"?: (event: DsoModalCustomEvent<ModalCloseEvent>) => void;
2669
+ /**
2670
+ * The element to return focus to after the modal is closed. * `undefined` will return focus to the previously focused element (default). * `false` will not return focus to any element. * or, provide your own `HTMLElement` that will receive focus upon closing.
2671
+ */
2672
+ "returnFocus"?: false | HTMLElement | undefined;
2604
2673
  /**
2605
2674
  * the role for the modal `dialog` | `alert` | `alertdialog`.
2606
2675
  */
@@ -2947,6 +3016,7 @@ declare namespace LocalJSX {
2947
3016
  "dso-accordion-section": DsoAccordionSection;
2948
3017
  "dso-action-list": DsoActionList;
2949
3018
  "dso-action-list-item": DsoActionListItem;
3019
+ "dso-advanced-select": DsoAdvancedSelect;
2950
3020
  "dso-alert": DsoAlert;
2951
3021
  "dso-annotation-button": DsoAnnotationButton;
2952
3022
  "dso-annotation-output": DsoAnnotationOutput;
@@ -3000,6 +3070,7 @@ declare module "@stencil/core" {
3000
3070
  "dso-accordion-section": LocalJSX.DsoAccordionSection & JSXBase.HTMLAttributes<HTMLDsoAccordionSectionElement>;
3001
3071
  "dso-action-list": LocalJSX.DsoActionList & JSXBase.HTMLAttributes<HTMLDsoActionListElement>;
3002
3072
  "dso-action-list-item": LocalJSX.DsoActionListItem & JSXBase.HTMLAttributes<HTMLDsoActionListItemElement>;
3073
+ "dso-advanced-select": LocalJSX.DsoAdvancedSelect & JSXBase.HTMLAttributes<HTMLDsoAdvancedSelectElement>;
3003
3074
  "dso-alert": LocalJSX.DsoAlert & JSXBase.HTMLAttributes<HTMLDsoAlertElement>;
3004
3075
  "dso-annotation-button": LocalJSX.DsoAnnotationButton & JSXBase.HTMLAttributes<HTMLDsoAnnotationButtonElement>;
3005
3076
  "dso-annotation-output": LocalJSX.DsoAnnotationOutput & JSXBase.HTMLAttributes<HTMLDsoAnnotationOutputElement>;
@@ -0,0 +1 @@
1
+ export declare function getActiveElement({ activeElement }?: DocumentOrShadowRoot): Element | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dso-toolkit/core",
3
- "version": "62.12.0",
3
+ "version": "62.13.0",
4
4
  "description": "DSO Toolkit Web Components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
25
25
  "@types/animejs": "^3.1.12",
26
26
  "animejs": "3.2.1",
27
27
  "clsx": "^2.0.0",
28
- "dso-toolkit": "^62.12.0",
28
+ "dso-toolkit": "^62.13.0",
29
29
  "escape-string-regexp": "^5.0.0",
30
30
  "focus-trap": "^7.5.4",
31
31
  "popper-max-size-modifier": "^0.2.0",
@@ -1,2 +0,0 @@
1
- import{r as t,h as e,H as i,a as s}from"./p-4592810d.js";import{c as o,t as n}from"./p-9c0f67c8.js";import{h as r,c as h}from"./p-fd7891ef.js";import{v as a}from"./p-14616bce.js";const l=":host(:focus){outline:none}:host{display:inline-block}";const d=class{constructor(e){t(this,e);this.keyDownListener=t=>{if(t.defaultPrevented){return}switch(t.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}createTrap(){var t,e;this.trap=o(this.host,{clickOutsideDeactivates:()=>{var t;this.open=false;(t=this.trap)===null||t===void 0?void 0:t.deactivate();delete this.trap;return true},escapeDeactivates:t=>{var e;if(t instanceof KeyboardEvent){this.open=false;(e=this.trap)===null||e===void 0?void 0:e.deactivate();delete this.trap}return true},tabbableOptions:{getShadowRoot:true},setReturnFocus:(t=this.button)!==null&&t!==void 0?t:false,initialFocus:(e=this.button)!==null&&e!==void 0?e:false}).activate()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const e=this.boundary||document;while(t&&t.parentNode!==e){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&r(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}get tabbables(){return n(this.host).filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=a()}this.button.addEventListener("click",(()=>{this.open=!this.open}));const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const e of Array.from(t.getElementsByTagName("li"))){e.setAttribute("role","none")}}if(this.popper){return}const e=this.host.querySelector(".dso-dropdown-options");if(!(e instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=h(this.button,e,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t,e;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update();this.createTrap()}else{(e=this.trap)===null||e===void 0?void 0:e.deactivate();delete this.trap}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const e of n(t)){e.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){e.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.host.removeEventListener("keydown",this.keyDownListener);this.button.setAttribute("aria-expanded",this.open?"true":"false");if(this.open){this.host.addEventListener("keydown",this.keyDownListener)}this.tabbables.forEach((t=>{t.removeEventListener("click",this.escape);if(this.open){t.addEventListener("click",this.escape)}}))}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}getActiveElement(t=document){const e=t.activeElement;if(!e){return null}if(e.shadowRoot){return this.getActiveElement(e.shadowRoot)}return e}tabInPopup(t){var e;const i=this.tabbables;const s=i.findIndex((t=>t===this.getActiveElement()));let o=s+t;if(o>=i.length){o=0}else if(o<0){o=i.length-1}(e=i[o])===null||e===void 0?void 0:e.focus()}render(){return e(i,{tabindex:this.open?"-1":undefined},e("slot",{name:"toggle"}),e("div",{hidden:!this.open},e("slot",null)))}get host(){return s(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};d.style=l;export{d as dso_dropdown_menu};
2
- //# sourceMappingURL=p-92fd9516.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["dropdownMenuCss","DropdownMenu","this","keyDownListener","event","defaultPrevented","key","tabInPopup","escape","target","HTMLElement","click","preventDefault","button","focus","open","watchPosition","popper","setOptions","placement","dropdownAlign","watchOptionsOffset","_a","modifiers","name","options","offset","dropdownOptionsOffset","watchStrategy","setStrategy","createTrap","trap","createFocusTrap","host","clickOutsideDeactivates","deactivate","escapeDeactivates","KeyboardEvent","tabbableOptions","getShadowRoot","setReturnFocus","initialFocus","_b","activate","strategy","element","boundary","document","parentNode","ShadowRoot","parentElement","hasOverflow","querySelector","HTMLButtonElement","ReferenceError","tabbables","tabbable","filter","e","componentDidLoad","setAttribute","id","uuidv4","addEventListener","ul","Array","from","getElementsByTagName","li","dropdownOptionsElement","Error","createPopper","enabled","undefined","componentDidRender","update","tab","checkable","classList","contains","toString","removeEventListener","forEach","focusableElement","disconnectedCallback","destroy","getActiveElement","root","activeEl","activeElement","shadowRoot","direction","tabs","currentIndex","findIndex","nextIndex","length","render","h","Host","tabindex","hidden"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n private trap?: FocusTrap;\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n /**\r\n * Selector for the element the dropdown options should not be overflowing.\r\n */\r\n @Prop()\r\n boundary?: string;\r\n\r\n /**\r\n * Force placement of dropdown.\r\n *\r\n * This property overrides `dropdownAlign`.\r\n */\r\n @Prop()\r\n placement?: Placement;\r\n\r\n /**\r\n * Set position strategy of dropdown options\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n @Watch(\"placement\")\r\n @Watch(\"dropdownAlign\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n });\r\n }\r\n\r\n @Watch(\"dropdownOptionsOffset\")\r\n watchOptionsOffset() {\r\n this.popper?.setOptions({\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n ],\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: () => {\r\n this.open = false;\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n\r\n return true;\r\n },\r\n escapeDeactivates: (event) => {\r\n if (event instanceof KeyboardEvent) {\r\n this.open = false;\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n return true;\r\n },\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.button ?? false,\r\n initialFocus: this.button ?? false,\r\n }).activate();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.host;\r\n\r\n const boundary = this.boundary || document;\r\n\r\n while (element && element.parentNode !== boundary) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n get tabbables(): FocusableElement[] {\r\n return tabbable(this.host).filter((e) => e !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n this.button.addEventListener(\"click\", () => {\r\n this.open = !this.open;\r\n });\r\n\r\n const options = this.host.querySelector(\".dso-dropdown-options\");\r\n if (!options) {\r\n throw new ReferenceError(\"Dropdown options not found\");\r\n }\r\n\r\n options.setAttribute(\"role\", \"menu\");\r\n options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n {\r\n name: \"preventOverflow\",\r\n options: {\r\n boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n },\r\n enabled: this.boundary !== undefined,\r\n },\r\n ],\r\n });\r\n }\r\n\r\n componentDidRender() {\r\n this.setStrategy();\r\n if (this.open) {\r\n this.popper?.update();\r\n this.createTrap();\r\n } else {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of tabbable(li)) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n if (this.open) {\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n this.tabbables.forEach((focusableElement) => {\r\n focusableElement.removeEventListener(\"click\", this.escape);\r\n if (this.open) {\r\n focusableElement.addEventListener(\"click\", this.escape);\r\n }\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n this.tabInPopup(1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(-1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private getActiveElement(root: Document | ShadowRoot = document): Element | null {\r\n const activeEl = root.activeElement;\r\n\r\n if (!activeEl) {\r\n return null;\r\n }\r\n\r\n if (activeEl.shadowRoot) {\r\n return this.getActiveElement(activeEl.shadowRoot);\r\n }\r\n\r\n return activeEl;\r\n }\r\n\r\n private tabInPopup(direction: number) {\r\n const tabs = this.tabbables;\r\n const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabs.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabs.length - 1;\r\n }\r\n\r\n tabs[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabindex={this.open ? \"-1\" : undefined}>\r\n <slot name=\"toggle\" />\r\n <div hidden={!this.open}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as o,c as d,h as s,a}from"./p-4592810d.js";import{v as i}from"./p-14616bce.js";const l="@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{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;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;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;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;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;text-align:center}.dso-modal>.dso-dialog>.dso-body{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}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{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}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;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-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@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-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-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{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-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{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{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const e=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=i();this.hasFooter=undefined;this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true}componentWillLoad(){this.hasFooter=this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;if((o=this.htmlDialogElement)===null||o===void 0?void 0:o.isConnected){this.htmlDialogElement.showModal()}document.body.classList.add("dso-modal-open")}disconnectedCallback(){var o;document.body.classList.remove("dso-modal-open");(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close()}render(){var o;return s("dialog",{class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",null,s("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"}))),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"}))))}get host(){return a(this)}};e.style=l;export{e as dso_modal};
2
- //# sourceMappingURL=p-f4cb0d36.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["modalCss","Modal","v4","componentWillLoad","this","hasFooter","host","querySelector","componentDidLoad","_a","htmlDialogElement","isConnected","showModal","document","body","classList","add","disconnectedCallback","remove","close","render","h","class","role","undefined","ariaId","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","showCloseButton","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","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 if (this.htmlDialogElement?.isConnected) {\r\n this.htmlDialogElement.showModal();\r\n }\r\n\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"],"mappings":"wFAAA,MAAMA,EAAW,43L,MCUJC,EAAK,M,wEAOPC,I,uFAqBa,S,qBAQJ,I,CAQlB,iBAAAC,GACEC,KAAKC,UAAYD,KAAKE,KAAKC,cAAc,qBAAuB,I,CAGlE,gBAAAC,G,MACE,IAAIC,EAAAL,KAAKM,qBAAiB,MAAAD,SAAA,SAAAA,EAAEE,YAAa,CACvCP,KAAKM,kBAAkBE,W,CAGzBC,SAASC,KAAKC,UAAUC,IAAI,iB,CAG9B,oBAAAC,G,MACEJ,SAASC,KAAKC,UAAUG,OAAO,mBAC/BT,EAAAL,KAAKM,qBAAiB,MAAAD,SAAA,SAAAA,EAAEU,O,CAG1B,MAAAC,G,MACE,OACEC,EAAA,UACEC,MAAM,YACNC,MAAMd,EAAAL,KAAKmB,QAAI,MAAAd,SAAA,EAAAA,EAAIe,UAAS,aACjB,OAAM,kBACApB,KAAKqB,OACtBC,IAAMC,GAAavB,KAAKM,kBAAoBiB,EAC5CC,SAAWC,IACTA,EAAEC,iBAEF1B,KAAK2B,SAASC,KAAK,CAAEC,cAAeJ,GAAI,GAG1CR,EAAA,OAAKC,MAAM,aAAaC,KAAK,YAC1BnB,KAAK8B,WACJb,EAAA,OAAKC,MAAM,cACTD,EAAA,MAAIc,GAAI/B,KAAKqB,QAASrB,KAAK8B,YAC1B9B,KAAKgC,iBACJf,EAAA,UAAQgB,KAAK,SAASf,MAAM,YAAYgB,QAAUT,GAAMzB,KAAK2B,SAASC,KAAK,CAAEC,cAAeJ,KAC1FR,EAAA,YAAUkB,KAAK,UACflB,EAAA,QAAMC,MAAM,WAAS,aAK3BD,EAAA,QAAMC,MAAM,UAAUa,GAAI/B,KAAKqB,QAAM,WAKvCJ,EAAA,sBACEA,EAAA,OAAKC,MAAM,WAAWkB,SAAU,GAC9BnB,EAAA,QAAMoB,KAAK,WAIdrC,KAAKC,WACJgB,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAMoB,KAAK,a"}