@digital-blueprint/formalize-app/dist/shared/modal.DfjeZb2d.js

[GitHub Repository](https://github.com/digital-blueprint/formalize-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/formalize-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/formalize-app/) | [Formalize Bundle](https:

/*!
* License: LGPL-2.1-or-later
* Dependencies:
* 
* @webcomponents/scoped-custom-element-registry: BSD-3-Clause
* @dbp-toolkit/app-shell: LGPL-2.1-or-later
* lit-html: BSD-3-Clause
* @dbp-toolkit/language-select: LGPL-2.1-or-later
* @dbp-toolkit/auth: LGPL-2.1-or-later
* @dbp-toolkit/theme-switcher: LGPL-2.1-or-later
* universal-router: MIT
* @dbp-toolkit/matomo: LGPL-2.1-or-later
* cssfilter: MIT
* xss: MIT
* @dbp-toolkit/form-elements: LGPL-2.1-or-later
* html2pdf.js: MIT
* exceljs: MIT
* jspdf-autotable: MIT
* keycloak-js: Apache-2.0
* pdfjs-dist: Apache-2.0
* jszip: (MIT OR GPL-3.0-or-later)
* @babel/runtime: MIT
* fflate: MIT
* iobuffer: MIT
* pako: (MIT AND Zlib)
* fast-png: MIT
* jspdf: MIT
* core-js: MIT
* performance-now: MIT
* raf: MIT
* rgbcolor: MIT OR SEE LICENSE IN FEEL-FREE.md
* svg-pathdata: MIT
* stackblur-canvas: MIT
* canvg: MIT
* dompurify: (MPL-2.0 OR Apache-2.0)
* i18next: MIT
* @dbp-toolkit/common: LGPL-2.1-or-later
* @lit/reactive-element: BSD-3-Clause
* lit-element: BSD-3-Clause
* @open-wc/dedupe-mixin: MIT
* @open-wc/scoped-elements: MIT
* dialog-polyfill: BSD
*/
import{b as e}from"./ref.DqB7ABXf.js";import{A as t,J as n,S as r,X as i,k as a,l as o,p as s,x as c}from"./directive-helpers.C6Xz79AM.js";var l=window.CustomEvent;(!l||typeof l==`object`)&&(l=function(e,t){t||={};var n=document.createEvent(`CustomEvent`);return n.initCustomEvent(e,!!t.bubbles,!!t.cancelable,t.detail||null),n},l.prototype=window.Event.prototype);function u(e,t){var n=`on`+t.type.toLowerCase();return typeof e[n]==`function`&&e[n](t),e.dispatchEvent(t)}function d(e){for(;e&&e!==document.body;){var t=window.getComputedStyle(e),n=function(e,n){return t[e]!==void 0&&t[e]!==n};if(t.opacity<1||n(`zIndex`,`auto`)||n(`transform`,`none`)||n(`mixBlendMode`,`normal`)||n(`filter`,`none`)||n(`perspective`,`none`)||t.isolation===`isolate`||t.position===`fixed`||t.webkitOverflowScrolling===`touch`)return!0;e=e.parentElement}return!1}function f(e){for(;e;){if(e.localName===`dialog`)return e;e=e.parentElement?e.parentElement:e.parentNode?e.parentNode.host:null}return null}function p(e){for(;e&&e.shadowRoot&&e.shadowRoot.activeElement;)e=e.shadowRoot.activeElement;e&&e.blur&&e!==document.body&&e.blur()}function m(e,t){for(var n=0;n<e.length;++n)if(e[n]===t)return!0;return!1}function h(e){return!e||!e.hasAttribute(`method`)?!1:e.getAttribute(`method`).toLowerCase()===`dialog`}function g(e){var t=[`button`,`input`,`keygen`,`select`,`textarea`].map(function(e){return e+`:not([disabled])`});t.push(`[tabindex]:not([disabled]):not([tabindex=""])`);var n=e.querySelector(t.join(`, `));if(!n&&`attachShadow`in Element.prototype)for(var r=e.querySelectorAll(`*`),i=0;i<r.length&&!(r[i].tagName&&r[i].shadowRoot&&(n=g(r[i].shadowRoot),n));i++);return n}function _(e){return e.isConnected||document.body.contains(e)}function v(e){if(e.submitter)return e.submitter;var t=e.target;if(!(t instanceof HTMLFormElement))return null;var n=x.formSubmitter;if(!n){var r=e.target;n=(`getRootNode`in r&&r.getRootNode()||document).activeElement}return!n||n.form!==t?null:n}function y(e){if(!e.defaultPrevented){var t=e.target,n=x.imagemapUseValue,r=v(e);n===null&&r&&(n=r.value);var i=f(t);i&&(r&&r.getAttribute(`formmethod`)||t.getAttribute(`method`))===`dialog`&&(e.preventDefault(),n==null?i.close():i.close(n))}}function b(e){if(this.dialog_=e,this.replacedStyleTop_=!1,this.openAsModal_=!1,e.hasAttribute(`role`)||e.setAttribute(`role`,`dialog`),e.show=this.show.bind(this),e.showModal=this.showModal.bind(this),e.close=this.close.bind(this),e.addEventListener(`submit`,y,!1),`returnValue`in e||(e.returnValue=``),`MutationObserver`in window)new MutationObserver(this.maybeHideModal.bind(this)).observe(e,{attributes:!0,attributeFilter:[`open`]});else{var t=!1,n=function(){t?this.downgradeModal():this.maybeHideModal(),t=!1}.bind(this),r,i=function(i){if(i.target===e){var a=`DOMNodeRemoved`;t|=i.type.substr(0,a.length)===a,window.clearTimeout(r),r=window.setTimeout(n,0)}};[`DOMAttrModified`,`DOMNodeRemoved`,`DOMNodeRemovedFromDocument`].forEach(function(t){e.addEventListener(t,i)})}Object.defineProperty(e,"open",{set:this.setOpen.bind(this),get:e.hasAttribute.bind(e,`open`)}),this.backdrop_=document.createElement(`div`),this.backdrop_.className=`backdrop`,this.backdrop_.addEventListener(`mouseup`,this.backdropMouseEvent_.bind(this)),this.backdrop_.addEventListener(`mousedown`,this.backdropMouseEvent_.bind(this)),this.backdrop_.addEventListener(`click`,this.backdropMouseEvent_.bind(this))}b.prototype={get dialog(){return this.dialog_},maybeHideModal:function(){this.dialog_.hasAttribute(`open`)&&_(this.dialog_)||this.downgradeModal()},downgradeModal:function(){this.openAsModal_&&(this.openAsModal_=!1,this.dialog_.style.zIndex=``,this.replacedStyleTop_&&=(this.dialog_.style.top=``,!1),this.backdrop_.parentNode&&this.backdrop_.parentNode.removeChild(this.backdrop_),x.dm.removeDialog(this))},setOpen:function(e){e?this.dialog_.hasAttribute(`open`)||this.dialog_.setAttribute(`open`,``):(this.dialog_.removeAttribute(`open`),this.maybeHideModal())},backdropMouseEvent_:function(e){if(this.dialog_.hasAttribute(`tabindex`))this.dialog_.focus();else{var t=document.createElement(`div`);this.dialog_.insertBefore(t,this.dialog_.firstChild),t.tabIndex=-1,t.focus(),this.dialog_.removeChild(t)}var n=document.createEvent(`MouseEvents`);n.initMouseEvent(e.type,e.bubbles,e.cancelable,window,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget),this.dialog_.dispatchEvent(n),e.stopPropagation()},focus_:function(){var e=this.dialog_.querySelector(`[autofocus]:not([disabled])`);!e&&this.dialog_.tabIndex>=0&&(e=this.dialog_),e||=g(this.dialog_),p(document.activeElement),e&&e.focus()},updateZIndex:function(e,t){if(e<t)throw Error(`dialogZ should never be < backdropZ`);this.dialog_.style.zIndex=e,this.backdrop_.style.zIndex=t},show:function(){this.dialog_.open||(this.setOpen(!0),this.focus_())},showModal:function(){if(this.dialog_.hasAttribute(`open`))throw Error(`Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.`);if(!_(this.dialog_))throw Error(`Failed to execute 'showModal' on dialog: The element is not in a Document.`);if(!x.dm.pushDialog(this))throw Error(`Failed to execute 'showModal' on dialog: There are too many open modal dialogs.`);d(this.dialog_.parentElement)&&console.warn(`A dialog is being shown inside a stacking context. This may cause it to be unusable. For more information, see this link: https://github.com/GoogleChrome/dialog-polyfill/#stacking-context`),this.setOpen(!0),this.openAsModal_=!0,x.needsCentering(this.dialog_)?(x.reposition(this.dialog_),this.replacedStyleTop_=!0):this.replacedStyleTop_=!1,this.dialog_.parentNode.insertBefore(this.backdrop_,this.dialog_.nextSibling),this.focus_()},close:function(e){if(!this.dialog_.hasAttribute(`open`))throw Error(`Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.`);this.setOpen(!1),e!==void 0&&(this.dialog_.returnValue=e);var t=new l(`close`,{bubbles:!1,cancelable:!1});u(this.dialog_,t)}};var x={};if(x.reposition=function(e){var t=document.body.scrollTop||document.documentElement.scrollTop,n=t+(window.innerHeight-e.offsetHeight)/2;e.style.top=Math.max(t,n)+`px`},x.isInlinePositionSetByStylesheet=function(e){for(var t=0;t<document.styleSheets.length;++t){var n=document.styleSheets[t],r=null;try{r=n.cssRules}catch{}if(r)for(var i=0;i<r.length;++i){var a=r[i],o=null;try{o=document.querySelectorAll(a.selectorText)}catch{}if(o&&m(o,e)){var s=a.style.getPropertyValue(`top`),c=a.style.getPropertyValue(`bottom`);if(s&&s!==`auto`||c&&c!==`auto`)return!0}}}return!1},x.needsCentering=function(e){return window.getComputedStyle(e).position!==`absolute`||e.style.top!==`auto`&&e.style.top!==``||e.style.bottom!==`auto`&&e.style.bottom!==``?!1:!x.isInlinePositionSetByStylesheet(e)},x.forceRegisterDialog=function(e){if((window.HTMLDialogElement||e.showModal)&&console.warn(`This browser already supports <dialog>, the polyfill may not work correctly`,e),e.localName!==`dialog`)throw Error(`Failed to register dialog: The element is not a dialog.`);new b(e)},x.registerDialog=function(e){e.showModal||x.forceRegisterDialog(e)},x.DialogManager=function(){this.pendingDialogStack=[];var e=this.checkDOM_.bind(this);this.overlay=document.createElement(`div`),this.overlay.className=`_dialog_overlay`,this.overlay.addEventListener(`click`,function(t){this.forwardTab_=void 0,t.stopPropagation(),e([])}.bind(this)),this.handleKey_=this.handleKey_.bind(this),this.handleFocus_=this.handleFocus_.bind(this),this.zIndexLow_=1e5,this.zIndexHigh_=100150,this.forwardTab_=void 0,`MutationObserver`in window&&(this.mo_=new MutationObserver(function(t){var n=[];t.forEach(function(e){for(var t=0,r;r=e.removedNodes[t];++t){if(r instanceof Element)r.localName===`dialog`&&n.push(r);else continue;n=n.concat(r.querySelectorAll(`dialog`))}}),n.length&&e(n)}))},x.DialogManager.prototype.blockDocument=function(){document.documentElement.addEventListener(`focus`,this.handleFocus_,!0),document.addEventListener(`keydown`,this.handleKey_),this.mo_&&this.mo_.observe(document,{childList:!0,subtree:!0})},x.DialogManager.prototype.unblockDocument=function(){document.documentElement.removeEventListener(`focus`,this.handleFocus_,!0),document.removeEventListener(`keydown`,this.handleKey_),this.mo_&&this.mo_.disconnect()},x.DialogManager.prototype.updateStacking=function(){for(var e=this.zIndexHigh_,t=0,n;n=this.pendingDialogStack[t];++t)n.updateZIndex(--e,--e),t===0&&(this.overlay.style.zIndex=--e);var r=this.pendingDialogStack[0];r?(r.dialog.parentNode||document.body).appendChild(this.overlay):this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)},x.DialogManager.prototype.containedByTopDialog_=function(e){for(;e=f(e);){for(var t=0,n;n=this.pendingDialogStack[t];++t)if(n.dialog===e)return t===0;e=e.parentElement}return!1},x.DialogManager.prototype.handleFocus_=function(e){var t=e.composedPath?e.composedPath()[0]:e.target;if(!this.containedByTopDialog_(t)&&document.activeElement!==document.documentElement&&(e.preventDefault(),e.stopPropagation(),p(t),this.forwardTab_!==void 0)){var n=this.pendingDialogStack[0];return n.dialog.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_PRECEDING&&(this.forwardTab_?n.focus_():t!==document.documentElement&&document.documentElement.focus()),!1}},x.DialogManager.prototype.handleKey_=function(e){if(this.forwardTab_=void 0,e.keyCode===27){e.preventDefault(),e.stopPropagation();var t=new l(`cancel`,{bubbles:!1,cancelable:!0}),n=this.pendingDialogStack[0];n&&u(n.dialog,t)&&n.dialog.close()}else e.keyCode===9&&(this.forwardTab_=!e.shiftKey)},x.DialogManager.prototype.checkDOM_=function(e){this.pendingDialogStack.slice().forEach(function(t){e.indexOf(t.dialog)===-1?t.maybeHideModal():t.downgradeModal()})},x.DialogManager.prototype.pushDialog=function(e){var t=(this.zIndexHigh_-this.zIndexLow_)/2-1;return this.pendingDialogStack.length>=t?!1:(this.pendingDialogStack.unshift(e)===1&&this.blockDocument(),this.updateStacking(),!0)},x.DialogManager.prototype.removeDialog=function(e){var t=this.pendingDialogStack.indexOf(e);t!==-1&&(this.pendingDialogStack.splice(t,1),this.pendingDialogStack.length===0&&this.unblockDocument(),this.updateStacking())},x.dm=new x.DialogManager,x.formSubmitter=null,x.imagemapUseValue=null,window.HTMLDialogElement===void 0){var S=document.createElement(`form`);if(S.setAttribute(`method`,`dialog`),S.method!==`dialog`){var C=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,`method`);if(C){var w=C.get;C.get=function(){return h(this)?`dialog`:w.call(this)};var T=C.set;C.set=function(e){return typeof e==`string`&&e.toLowerCase()===`dialog`?this.setAttribute(`method`,e):T.call(this,e)},Object.defineProperty(HTMLFormElement.prototype,"method",C)}}document.addEventListener(`click`,function(e){if(x.formSubmitter=null,x.imagemapUseValue=null,!e.defaultPrevented){var t=e.target;if(`composedPath`in e&&(t=e.composedPath().shift()||t),t&&h(t.form)){if(!(t.type===`submit`&&[`button`,`input`].indexOf(t.localName)>-1)){if(t.localName!==`input`||t.type!==`image`)return;x.imagemapUseValue=e.offsetX+`,`+e.offsetY}f(t)&&(x.formSubmitter=t)}}},!1),document.addEventListener(`submit`,function(e){var t=e.target;if(!f(t)){var n=v(e);(n&&n.getAttribute(`formmethod`)||t.getAttribute(`method`))===`dialog`&&e.preventDefault()}});var E=HTMLFormElement.prototype.submit,D=function(){if(!h(this))return E.call(this);var e=f(this);e&&e.close()};HTMLFormElement.prototype.submit=D}var O=class extends o(a(s),e){constructor(){super(),this.modalDialog=null,this.modalId=`dbp-modal-id`,this.title=``,this.stickyFooter=!1,this.fullHeightLine=!1,this.modalPaddingTopDefault=0}static get properties(){return{...super.properties,modalId:{type:String,attribute:`modal-id`},title:{type:String},stickyFooter:{type:Boolean,attribute:`sticky-footer`},fullHeightLine:{type:Boolean,attribute:`full-height-line`}}}connectedCallback(){super.connectedCallback()}updated(e){super.updated(e)}firstUpdated(){let e=this._(`#`+this.modalId);if(e?.localName!==`dialog`)return;let t=e;this.modalDialog=t,x.registerDialog(t),this.modalPaddingTopDefault=parseInt(window.getComputedStyle(t).paddingTop),t.addEventListener(`close`,()=>{t.ownerDocument.documentElement.style.removeProperty(`overflow`);let e=new CustomEvent(`dbp-modal-closed`,{detail:{id:this.modalId},bubbles:!0,composed:!0});this.dispatchEvent(e)}),this.addEventListener(`dbp-notification-added`,e=>{let t=e.detail.targetNotificationId;this.updateModalNotificationPadding(t)}),this.addEventListener(`dbp-notification-removed`,e=>{let t=e.detail.targetNotificationId;this.updateModalNotificationPadding(t)})}async updateModalNotificationPadding(e){let t=this.modalDialog;if(!t)return;let n=this.querySelector(`[slot="header"]`);if(!n)return;let r=n.querySelector(`#`+e);if(!r||!r.shadowRoot)return;let i=r.shadowRoot.querySelector(`#notification-container`);if(i){await new Promise(e=>requestAnimationFrame(e));let e=t.getBoundingClientRect(),n=parseInt(window.getComputedStyle(t).getPropertyValue(`padding-top`)),r=this.modalPaddingTopDefault,a=i.offsetHeight+r;(e.top>150||n>a)&&(t.style.setProperty(`--dbp-modal-padding-top`,a+`px`),t.style.setProperty(`--dbp-modal-translate-y`,a/-2+`px`))}}static get scopedElements(){return{"dbp-icon":t}}isOpen(){return this.modalDialog?.open??!1}open(){let e=this.modalDialog;if(!e||e.open)return;let t=e.ownerDocument.documentElement;t.style.overflow=`hidden`,e.showModal()}focusCloseButton(){let e=this.shadowRoot?.querySelector(`.modal-close`)??null;return e?(e.focus(),!0):!1}close(){let e=this.modalDialog;if(!e)return;e.close();let t=this.querySelector(`[slot="header"]`);if(t){let e=t.querySelector(`dbp-notification`);e&&e.shadowRoot&&e.removeAllNotifications()}e.style.setProperty(`--dbp-modal-padding-top`,this.modalPaddingTopDefault+`px`),e.style.removeProperty(`--dbp-modal-translate-y`)}static get styles(){return i`
            ${c()}
            ${r()}
        `}render(){let e=this._i18n;return n`
            <dialog
                class="modal"
                id="${this.modalId}"
                autofocus
                role="alertdialog"
                aria-describedby="modal-content"
                aria-labelledby="modal-title">
                <div
                    class="modal-container ${this.fullHeightLine?`modal-container--full-height-line`:``}">
                    <header class="modal-header">
                        <div class="header-top">
                            <slot name="title">
                                <h2 class="modal-title" id="modal-title">${this.title}</h2>
                            </slot>
                            <button
                                title="${e.t(`dbp-modal.close`)}"
                                class="modal-close"
                                aria-label="${e.t(`dbp-modal.close`)}"
                                @click="${()=>{this.close()}}">
                                <dbp-icon
                                    title="${e.t(`dbp-modal.close`)}"
                                    name="close"
                                    class="close-icon"></dbp-icon>
                            </button>
                        </div>
                        <div class="header-bottom">
                            <slot name="header"></slot>
                        </div>
                    </header>
                    <main class="modal-content" id="modal-content">
                        <slot name="content"></slot>
                        ${this.stickyFooter?``:n`
                                      <footer class="modal-footer modal-footer--sticky">
                                          <slot name="footer"></slot>
                                      </footer>
                                  `}
                    </main>
                    ${this.stickyFooter?n`
                                  <footer class="modal-footer">
                                      <slot name="footer"></slot>
                                  </footer>
                              `:``}
                </div>
            </dialog>
        `}};export{O as t};
//# sourceMappingURL=modal.DfjeZb2d.js.map