@zywave/zui-bundle/dist/internals/_ca90e27e.js

ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollu

import{i as e,Z as t,y as o,o as i,h as s,e as a}from"./_929d7f55.js";import{i as r}from"./_1fde8169.js";const l=e`@supports(scrollbar-width:thin){dialog,dialog.scrolling .header-content-container{scrollbar-color:var(--zui-gray-400) var(--zui-gray-50);scrollbar-width:thin}}@supports not (scrollbar-width:thin){dialog.scrolling .header-content-container::-webkit-scrollbar,dialog::-webkit-scrollbar{width:7px;height:7px;background-color:var(--zui-gray-50)}dialog.scrolling .header-content-container::-webkit-scrollbar-thumb,dialog::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:10px}}:host{contain:none;z-index:6000}:host .backdrop,:host dialog::backdrop{background:var(--zui-dialog-backdrop-color,rgba(0,0,0,.6))}:host .header-content-container{padding:1.875rem}:host .footer ::slotted(*),:host .header ::slotted(*){margin-bottom:0!important}:host .header{margin-bottom:1.25rem}:host .content{min-height:7.5rem;transition:height 1s cubic-bezier(.25,.8,.25,1)}:host .footer{display:flex;height:5.625rem;justify-content:flex-end;padding:1.25rem 1.875rem 1.875rem}:host .footer ::slotted(div){display:flex}:host .footer ::slotted(:last-child:not(:only-child)){margin-left:.625rem}:host .footer ::slotted(:nth-last-child(3)){margin-right:auto}:host([hide-backdrop]) .backdrop,:host([hide-backdrop]) dialog::backdrop{background:rgba(0,0,0,0)}:host(:not([opened])){display:none}dialog{--dialog-margin-spacer:1.0625rem;position:fixed;top:0;bottom:0;left:0;width:100%;max-width:min(100% - var(--dialog-margin-spacer)*2,42.1875rem);max-height:calc(100% - var(--dialog-margin-spacer)*2);overflow:visible;padding:0;background:#fff;border:0;border-radius:4px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}@media(min-width:45em){dialog{max-height:calc(100% - var(--dialog-margin-spacer)*2 - 1.875rem)}}dialog.scrolling{overflow-y:hidden}dialog.scrolling .header-content-container{height:calc(100vh - 9.375rem);overflow-y:auto}dialog.scrolling .footer{border-top:1px solid var(--zui-gray-100)}dialog:-internal-modal{position:fixed;top:0;bottom:0;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);overflow:auto}.backdrop,dialog::backdrop{position:fixed;top:0;right:0;bottom:0;left:0}:host(.small) dialog{max-width:min(100% - var(--dialog-margin-spacer)*2,29.6875rem)}:host(.large) dialog{max-width:min(100% - var(--dialog-margin-spacer)*2,54.6875rem)}:host(.full) dialog{max-width:calc(100% - var(--dialog-margin-spacer)*2)}@supports(background:-webkit-named-image(i)) and (not (contain:content)){dialog{top:var(--dialog-margin-spacer);right:var(--dialog-margin-spacer);bottom:unset;left:var(--dialog-margin-spacer);margin:0 auto}}`;var n,d=function(e,t,o,i){var s,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(a<3?s(r):a>3?s(t,o,r):s(t,o))||r);return a>3&&r&&Object.defineProperty(t,o,r),r};const c=window.HTMLDialogElement&&window.HTMLDialogElement.prototype.showModal;class h extends t{constructor(){super(...arguments),this.#e=!1,this.#t=!1,this.noCancelOutsideDialog=!1}#e;#o;#i;static#s=new Map;#t;static get styles(){return[super.styles,l]}get opened(){return this.#e}set opened(e){const t=this.#e;t!==e&&(this.#e=e,this.requestUpdate("opened",t),this.#a(e),e?this.#r():this.#l(!1),e?this.#n():this.#d(),e||(this.#o=!0))}get canceled(){return this.#o}open(){this.opened=!0}close(e=!1){this.#e&&(this.#e=!1,this.#a(!1),this.#o=!e,this.requestUpdate("opened"),this.#l(e),this.#d())}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-labelledby","dialogTitle"),this.setAttribute("aria-describedby","dialogDesc"),this.#c(),n.#s.set(this,!1)}disconnectedCallback(){super.disconnectedCallback(),this.close(!1),n.#s.delete(this),this.#h()}async firstUpdated(){if(!c){const e=window?.dialogPolyfill??window?.zywave?.zui?.dialogPolyfill;e?e.registerDialog(this._dialogElement):console.warn("Dialog polyfill required in this browser. ZUI Dialog will not function. See https://github.com/GoogleChrome/dialog-polyfill for more info.")}this.#a(this.#e),this.#g(),this.#p()}#a(e,t=1){if(!this.isConnected)return void n.#s.set(this,!1);if(!(this._dialogElement&&(this._dialogElement.isConnected||!c))&&t>0)return this.requestUpdate(),void this.updateComplete.then((()=>this.#a(e,--t)));const o=this._dialogElement?.hasAttribute("open");e&&!o?this._dialogElement.showModal():!e&&o&&this._dialogElement.close(),n.#s.set(this,e);const i=e||Array.from(n.#s.values()).find((e=>e));document.body.style.overflow=i?"hidden":""}#r(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,cancelable:!0}))}#l(e){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,cancelable:!0,detail:e}))}#b(e){const t=e.target;t.hasAttribute("dialog-confirm")?this.close(!0):t.hasAttribute("dialog-close")&&this.close(!1)}#m(e){e.target===this._dialogElement&&this.close(!1)}#g(){const e=this.shadowRoot.querySelector(".header");0===this._headerSlottedNodes.length?e.style.display="none":this._headerSlottedNodes.length>0&&"none"===e.style.display&&e.style.removeProperty("display"),this.requestUpdate()}#p(){const e=this.shadowRoot.querySelector(".footer");0===this._footerSlottedNodes.length?e.style.display="none":this._footerSlottedNodes.length>0&&"none"===e.style.display&&e.style.removeProperty("display"),this.requestUpdate()}async#n(){await this.updateComplete,!this.#t&&this._dialogElement?.scrollHeight>this._dialogElement?.clientHeight&&(this.#t=!0),this.requestUpdate()}#d(){this.#t&&(this.#t=!1),this.requestUpdate()}#c(){this.#i=new MutationObserver((e=>{for(const t of e)"childList"===t.type&&this.#n()})),this.#i?.observe(this,{childList:!0,subtree:!0}),this.requestUpdate()}#h(){this.#i&&this.#i.disconnect()}render(){return o`<dialog class="${i({scrolling:this.#t})}" @click="${e=>!this.noCancelOutsideDialog&&this.#m(e)}" @close="${()=>this.close(!1)}"><article class="header-content-container"><header class="header" part="header" id="dialogTitle"><slot name="header" @slotchange="${this.#g}"></slot></header><div class="content" part="content" id="dialogDesc"><slot></slot><slot name="content"></slot></div></article><footer class="footer" part="footer"><slot name="footer" @click="${this.#b}" @slotchange="${this.#p}"></slot></footer></dialog>`}}n=h,d([r("dialog")],h.prototype,"_dialogElement",void 0),d([s({slot:"header"})],h.prototype,"_headerSlottedNodes",void 0),d([s({slot:"footer"})],h.prototype,"_footerSlottedNodes",void 0),d([a({type:Boolean,reflect:!0})],h.prototype,"opened",null),d([a({type:Boolean,attribute:"no-cancel-outside-dialog"})],h.prototype,"noCancelOutsideDialog",void 0),window.customElements.define("zui-dialog",h);export{c as SUPPORTS_HTML_DIALOG,h as ZuiDialogElement};