@dso-toolkit/core 54.2.0 → 54.2.1
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.
- package/dist/cjs/dso-modal.cjs.entry.js +2 -1
- package/dist/collection/components/modal/modal.js +5 -9
- package/dist/components/dso-modal.js +2 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-4808575e.entry.js +1 -0
- package/dist/esm/dso-modal.entry.js +2 -1
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components.d.ts +3 -3
- package/package.json +2 -2
- package/dist/dso-toolkit/p-3238f7ee.entry.js +0 -1
|
@@ -32,7 +32,8 @@ const Modal = class {
|
|
|
32
32
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
|
|
35
|
+
var _a;
|
|
36
|
+
return (index.h(index.Fragment, null, index.h("div", { class: "dso-modal-overlay" }), index.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) }, index.h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("div", { class: "dso-body", tabIndex: 0 }, index.h("slot", { name: "body" })), this.hasFooter && (index.h("div", { class: "dso-footer" }, index.h("slot", { name: "footer" })))))));
|
|
36
37
|
}
|
|
37
38
|
setFocusTrap() {
|
|
38
39
|
if (this.dialogElement && !this.trap) {
|
|
@@ -22,7 +22,8 @@ export class Modal {
|
|
|
22
22
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
|
|
25
|
+
var _a;
|
|
26
|
+
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("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
|
|
26
27
|
}
|
|
27
28
|
setFocusTrap() {
|
|
28
29
|
if (this.dialogElement && !this.trap) {
|
|
@@ -94,14 +95,9 @@ export class Modal {
|
|
|
94
95
|
"type": "string",
|
|
95
96
|
"mutable": false,
|
|
96
97
|
"complexType": {
|
|
97
|
-
"original": "
|
|
98
|
-
"resolved": "
|
|
99
|
-
"references": {
|
|
100
|
-
"ModalRole": {
|
|
101
|
-
"location": "import",
|
|
102
|
-
"path": "./modal.interfaces"
|
|
103
|
-
}
|
|
104
|
-
}
|
|
98
|
+
"original": "string | null",
|
|
99
|
+
"resolved": "null | string",
|
|
100
|
+
"references": {}
|
|
105
101
|
},
|
|
106
102
|
"required": false,
|
|
107
103
|
"optional": false,
|
|
@@ -30,7 +30,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
30
30
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
|
|
33
|
+
var _a;
|
|
34
|
+
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("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
|
|
34
35
|
}
|
|
35
36
|
setFocusTrap() {
|
|
36
37
|
if (this.dialogElement && !this.trap) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-b049f492",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-96f44d35",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],hover:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-65e8077e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1],editAction:[1,"edit-action"]}]]],["p-975c172a",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]}]]],["p-8a77030b",[[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],syncLabelText:[64]}]]],["p-b9777372",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-e8c46f70",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-281aa19e",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-6a99d7f8",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-296657d3",[[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"]]]]],["p-c2215704",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],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"]]]]],["p-d10ec2b3",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-398a8e0b",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-e04d87e0",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manual:[4],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-b049f492",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-96f44d35",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],hover:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-65e8077e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1],editAction:[1,"edit-action"]}]]],["p-975c172a",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]}]]],["p-8a77030b",[[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],syncLabelText:[64]}]]],["p-b9777372",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-e8c46f70",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-281aa19e",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-6a99d7f8",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-296657d3",[[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"]]]]],["p-c2215704",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],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"]]]]],["p-d10ec2b3",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-398a8e0b",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-e04d87e0",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manual:[4],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-4808575e",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],returnFocus:[16],ariaId:[32],hasFooter:[32]}]]],["p-f3e38af3",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-7912940d",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-9361b19e",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-e8a6ccf5",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-69f37ab3",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-3b91c3e9",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-564a5d95",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-ae45e550",[[1,"dso-scrollable",{scrollPosition:[32],_setScrollState:[64]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-baef3721",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-bc975b99",[[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]},[[0,"click","listenClick"]]]]],["p-313d07f5",[[1,"dso-expandable",{open:[516],enableAnimation:[4,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],getAnimeInstance:[64],getBodyHeight:[64]}]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-ca4fee8d",[[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],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as d,h as s,F as t,g as r}from"./p-98fd1658.js";import{c as a}from"./p-91963e3d.js";import{v as i}from"./p-5d7f4ff2.js";import"./p-5950644a.js";const e=class{constructor(s){o(this,s),this.dsoClose=d(this,"dsoClose",7),this.ariaId=i(),this.hasFooter=void 0,this.modalTitle=void 0,this.role="dialog",this.showCloseButton=!0,this.initialFocus=void 0,this.returnFocus=void 0}componentWillLoad(){this.hasFooter=null!==this.host.querySelector("*[slot = 'footer']")}componentDidLoad(){this.setFocusTrap()}disconnectedCallback(){var o;null===(o=this.trap)||void 0===o||o.deactivate({onDeactivate:()=>{}})}render(){var o;return s(t,null,s("div",{class:"dso-modal-overlay"}),s("div",{class:"dso-modal",role:null!==(o=this.role)&&void 0!==o?o:void 0,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.modalElement=o},s("div",{class:"dso-dialog",role:"document",ref:o=>this.dialogElement=o},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("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"})),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"})))))}setFocusTrap(){this.dialogElement&&!this.trap&&(this.trap=a(this.dialogElement,{initialFocus:()=>{var o,d,s;if(this.initialFocus){const o=this.host.querySelector(this.initialFocus);if(o)return o;console.warn(`element '${this.initialFocus}' could not be found`)}return null!==(s=null!==(o=this.host.querySelector("div[slot='footer'] .dso-primary"))&&void 0!==o?o:null===(d=this.modalElement)||void 0===d?void 0:d.querySelector(".dso-close"))&&void 0!==s&&s},allowOutsideClick:!0,setReturnFocus:o=>{var d,s;return null!==(s=null===(d=this.returnFocus)||void 0===d?void 0:d.call(this,o))&&void 0!==s?s:o},escapeDeactivates:!0,tabbableOptions:{getShadowRoot:!0},clickOutsideDeactivates:o=>o instanceof MouseEvent&&o.composedPath()[0]===this.modalElement,onDeactivate:()=>{delete this.trap,this.dsoClose.emit({originalEvent:void 0})}}).activate())}get host(){return r(this)}};e.style="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;margin-top:15vh;margin-left:auto;margin-right:auto;max-width:640px;opacity:1;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4)}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal .dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal .dso-body p{margin:0 0 16px}.dso-modal .dso-body ul,.dso-modal .dso-body ol{margin-bottom:16px}.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal .dso-body pre{margin:0 0 16px}.dso-modal .dso-body blockquote{padding:16px 24px}.dso-modal .dso-body dso-highlight-box,.dso-modal .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:0 32px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.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+.btn,.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+.btn,.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}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.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+.btn,.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+.btn,.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}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}.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}";export{e as dso_modal}
|
|
@@ -28,7 +28,8 @@ const Modal = class {
|
|
|
28
28
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
|
|
31
|
+
var _a;
|
|
32
|
+
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("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
|
|
32
33
|
}
|
|
33
34
|
setFocusTrap() {
|
|
34
35
|
if (this.dialogElement && !this.trap) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
|
|
2
2
|
import { FocusTargetValueOrFalse } from "focus-trap";
|
|
3
|
-
import { DsoModalCloseEvent
|
|
3
|
+
import { DsoModalCloseEvent } from "./modal.interfaces";
|
|
4
4
|
export declare class Modal implements ComponentInterface {
|
|
5
5
|
private trap?;
|
|
6
6
|
private dialogElement?;
|
|
@@ -10,7 +10,7 @@ export declare class Modal implements ComponentInterface {
|
|
|
10
10
|
hasFooter?: boolean;
|
|
11
11
|
modalTitle?: string;
|
|
12
12
|
/** the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog` */
|
|
13
|
-
role:
|
|
13
|
+
role: string | null;
|
|
14
14
|
/** when `false` the close button in the header will not be rendered. Defaults to `true` */
|
|
15
15
|
showCloseButton: boolean;
|
|
16
16
|
/** 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.*/
|
|
@@ -21,8 +21,8 @@ import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/lis
|
|
|
21
21
|
import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
|
|
22
22
|
import { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
|
|
23
23
|
import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
|
|
24
|
-
import { DsoModalCloseEvent, ModalRole } from "./components/modal/modal.interfaces";
|
|
25
24
|
import { FocusTargetValueOrFalse } from "focus-trap";
|
|
25
|
+
import { DsoModalCloseEvent } from "./components/modal/modal.interfaces";
|
|
26
26
|
import { OzonContentAnchorClick, OzonContentClick } from "./components/ozon-content/ozon-content.interfaces";
|
|
27
27
|
import { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
|
|
28
28
|
import { ResponsiveElementSize } from "./components/responsive-element/responsive-element.interfaces";
|
|
@@ -363,7 +363,7 @@ export namespace Components {
|
|
|
363
363
|
/**
|
|
364
364
|
* the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog`
|
|
365
365
|
*/
|
|
366
|
-
"role":
|
|
366
|
+
"role": string | null;
|
|
367
367
|
/**
|
|
368
368
|
* when `false` the close button in the header will not be rendered. Defaults to `true`
|
|
369
369
|
*/
|
|
@@ -1281,7 +1281,7 @@ declare namespace LocalJSX {
|
|
|
1281
1281
|
/**
|
|
1282
1282
|
* the role for the modal `dialog` | `alert` | `alertdialog` defaults to `dialog`
|
|
1283
1283
|
*/
|
|
1284
|
-
"role"?:
|
|
1284
|
+
"role"?: string | null;
|
|
1285
1285
|
/**
|
|
1286
1286
|
* when `false` the close button in the header will not be rendered. Defaults to `true`
|
|
1287
1287
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dso-toolkit/core",
|
|
3
|
-
"version": "54.2.
|
|
3
|
+
"version": "54.2.1",
|
|
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.7",
|
|
26
26
|
"animejs": "3.2.1",
|
|
27
27
|
"clsx": "1.2.1",
|
|
28
|
-
"dso-toolkit": "54.2.
|
|
28
|
+
"dso-toolkit": "54.2.1",
|
|
29
29
|
"escape-string-regexp": "^5.0.0",
|
|
30
30
|
"focus-trap": "^7.4.3",
|
|
31
31
|
"popper-max-size-modifier": "^0.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as d,h as s,F as t,g as r}from"./p-98fd1658.js";import{c as a}from"./p-91963e3d.js";import{v as e}from"./p-5d7f4ff2.js";import"./p-5950644a.js";const i=class{constructor(s){o(this,s),this.dsoClose=d(this,"dsoClose",7),this.ariaId=e(),this.hasFooter=void 0,this.modalTitle=void 0,this.role="dialog",this.showCloseButton=!0,this.initialFocus=void 0,this.returnFocus=void 0}componentWillLoad(){this.hasFooter=null!==this.host.querySelector("*[slot = 'footer']")}componentDidLoad(){this.setFocusTrap()}disconnectedCallback(){var o;null===(o=this.trap)||void 0===o||o.deactivate({onDeactivate:()=>{}})}render(){return s(t,null,s("div",{class:"dso-modal-overlay"}),s("div",{class:"dso-modal",role:this.role,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.modalElement=o},s("div",{class:"dso-dialog",role:"document",ref:o=>this.dialogElement=o},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("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"})),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"})))))}setFocusTrap(){this.dialogElement&&!this.trap&&(this.trap=a(this.dialogElement,{initialFocus:()=>{var o,d,s;if(this.initialFocus){const o=this.host.querySelector(this.initialFocus);if(o)return o;console.warn(`element '${this.initialFocus}' could not be found`)}return null!==(s=null!==(o=this.host.querySelector("div[slot='footer'] .dso-primary"))&&void 0!==o?o:null===(d=this.modalElement)||void 0===d?void 0:d.querySelector(".dso-close"))&&void 0!==s&&s},allowOutsideClick:!0,setReturnFocus:o=>{var d,s;return null!==(s=null===(d=this.returnFocus)||void 0===d?void 0:d.call(this,o))&&void 0!==s?s:o},escapeDeactivates:!0,tabbableOptions:{getShadowRoot:!0},clickOutsideDeactivates:o=>o instanceof MouseEvent&&o.composedPath()[0]===this.modalElement,onDeactivate:()=>{delete this.trap,this.dsoClose.emit({originalEvent:void 0})}}).activate())}get host(){return r(this)}};i.style="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;margin-top:15vh;margin-left:auto;margin-right:auto;max-width:640px;opacity:1;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4)}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal .dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal .dso-body p{margin:0 0 16px}.dso-modal .dso-body ul,.dso-modal .dso-body ol{margin-bottom:16px}.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal .dso-body pre{margin:0 0 16px}.dso-modal .dso-body blockquote{padding:16px 24px}.dso-modal .dso-body dso-highlight-box,.dso-modal .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:0 32px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.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+.btn,.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+.btn,.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}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.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+.btn,.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+.btn,.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}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}.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}";export{i as dso_modal}
|