FileMaster

Edit File: sc-dialog2.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{s as setDefaultAnimation,g as getAnimation,a as animateTo,b as stopAnimations}from"./animation-registry.js";import{d as defineCustomElement$3}from"./sc-button2.js";import{d as defineCustomElement$2}from"./sc-icon2.js";import{d as defineCustomElement$1}from"./sc-spinner2.js";const locks=new Set;function lockBodyScrolling(e){locks.add(e),document.body.classList.add("sc-scroll-lock")}function unlockBodyScrolling(e){locks.delete(e),0===locks.size&&document.body.classList.remove("sc-scroll-lock")}const scDialogCss=":host{--width:31rem;--header-spacing:var(--sc-spacing-large);--body-spacing:var(--sc-spacing-large);--footer-spacing:var(--sc-spacing-large);display:contents}[hidden]{display:none !important}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--sc-z-index-dialog);box-sizing:border-box;text-align:left}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:100vw;max-height:100vh;background-color:var(--sc-panel-background-color);border-radius:var(--sc-border-radius-medium);box-shadow:var(--sc-shadow-x-large);position:relative}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex;border-bottom:1px solid var(--sc-color-gray-300)}.dialog__title{flex:1 1 auto;font:inherit;font-size:var(--sc-font-size-large);line-height:var(--sc-line-height-dense);padding:var(--header-spacing);margin:0}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--sc-font-size-x-large);padding:0 calc(var(--header-spacing) / 2);z-index:2}.dialog__body{flex:1 1 auto;padding:var(--body-spacing);overflow:var(--dialog-body-overflow, auto);-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--footer-spacing)}.dialog__footer ::slotted(sl-button:not(:first-of-type)){margin-left:var(--sc-spacing-x-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--sc-overlay-background-color)}",ScDialogStyle0=scDialogCss,ScDialog=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scRequestClose=createEvent(this,"scRequestClose",7),this.scShow=createEvent(this,"scShow",7),this.scAfterShow=createEvent(this,"scAfterShow",7),this.scHide=createEvent(this,"scHide",7),this.scAfterHide=createEvent(this,"scAfterHide",7),this.scInitialFocus=createEvent(this,"scInitialFocus",7),this.boundHandleDocumentKeyDown=e=>this.handleDocumentKeyDown(e),this.open=!1,this.label="",this.noHeader=!1,this.hasFooter=!1}async show(){this.open||(this.open=!0)}async hide(){this.open&&(this.open=!1)}requestClose(e){if(this.scRequestClose.emit(e).defaultPrevented){const e=getAnimation(this.el,"dialog.denyClose");animateTo(this.panel,e.keyframes,e.options)}else this.hide()}handleKeyDown(e){"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}handleDocumentKeyDown(e){"Escape"===e.key&&this.open&&this.requestClose("keyboard")}async handleOpenChange(){if(this.open){this.scShow.emit(),document.addEventListener("keydown",this.boundHandleDocumentKeyDown),lockBodyScrolling(this.el);const e=this.el.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([stopAnimations(this.dialog),stopAnimations(this.overlay)]),this.dialog.hidden=!1,requestAnimationFrame((()=>{this.scInitialFocus.emit().defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")}));const t=getAnimation(this.el,"dialog.show"),o=getAnimation(this.el,"dialog.overlay.show");await Promise.all([animateTo(this.panel,t.keyframes,t.options),animateTo(this.overlay,o.keyframes,o.options)]),this.scAfterShow.emit()}else{this.scHide.emit(),await Promise.all([stopAnimations(this.dialog),stopAnimations(this.overlay)]);const e=getAnimation(this.el,"dialog.hide"),t=getAnimation(this.el,"dialog.overlay.hide");await Promise.all([animateTo(this.panel,e.keyframes,e.options),animateTo(this.overlay,t.keyframes,t.options)]),this.dialog.hidden=!0,unlockBodyScrolling(this.el);const o=this.originalTrigger;"function"==typeof(null==o?void 0:o.focus)&&setTimeout((()=>o.focus())),document.removeEventListener("keydown",this.boundHandleDocumentKeyDown),this.scAfterHide.emit()}}componentDidLoad(){this.hasFooter=!!this.el.querySelector('[slot="footer"]'),this.dialog.hidden=!this.open,this.open&&(document.addEventListener("keydown",this.boundHandleDocumentKeyDown),lockBodyScrolling(this.el))}disconnectedCallback(){document.removeEventListener("keydown",this.boundHandleDocumentKeyDown),unlockBodyScrolling(this.el)}render(){return h("div",{key:"f10398d88a10fca883e49ad33a58c78c9c2703ea",part:"base",ref:e=>this.dialog=e,class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.hasFooter},onKeyDown:e=>this.handleKeyDown(e)},h("div",{key:"fe58143d804106605151c8af9a710b439bfee407",part:"overlay",class:"dialog__overlay",onClick:e=>{e.preventDefault(),e.stopImmediatePropagation(),this.requestClose("overlay")},ref:e=>this.overlay=e,tabindex:"-1"}),h("div",{key:"517d766eb0a3c08a14bf85f9b4bac8406581db70",part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader||this.label,"aria-labelledby":!this.noHeader||"title",ref:e=>this.panel=e,tabindex:"0"},!this.noHeader&&h("header",{key:"a769746d0fea2ed8047b1867bd27ee186eaf8a00",part:"header",class:"dialog__header"},h("h2",{key:"4becd4dd79384169f4ea5d8d9278eeb4b0037840",part:"title",class:"dialog__title",id:"title"},h("slot",{key:"fb1871b630a7c61b19484af20ce1f10c59f609fd",name:"label"}," ",this.label.length>0?this.label:String.fromCharCode(65279)," ")),h("sc-button",{key:"9a0df427f42124090640515b8dc36994bdac7c8f",class:"dialog__close",type:"text",circle:!0,part:"close-button",exportparts:"base:close-button__base",onClick:e=>{e.preventDefault(),e.stopImmediatePropagation(),this.requestClose("close-button")}},h("sc-icon",{key:"8cd1f430691f3f92f6782777eab677ab2b8e044e",name:"x",label:wp.i18n.__("Close","surecart")}))),h("div",{key:"63628efa0c475816a8dfc2ba878c056e88f817b9",part:"body",class:"dialog__body"},h("slot",{key:"66bbe40459ca7c99970f241bae999e49e288ca77"})),h("footer",{key:"48406ef09f60488508013c233754de65fbfb0c1a",part:"footer",class:"dialog__footer"},h("slot",{key:"1e44bc2a3ea558d50b2d63347b5ad49217693076",name:"footer"}))))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScDialogStyle0}},[1,"sc-dialog",{open:[516],label:[513],noHeader:[516,"no-header"],hasFooter:[32]},void 0,{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-dialog","sc-button","sc-icon","sc-spinner"].forEach((e=>{switch(e){case"sc-dialog":customElements.get(e)||customElements.define(e,ScDialog);break;case"sc-button":customElements.get(e)||defineCustomElement$3();break;case"sc-icon":customElements.get(e)||defineCustomElement$2();break;case"sc-spinner":customElements.get(e)||defineCustomElement$1()}}))}setDefaultAnimation("dialog.show",{keyframes:[{opacity:0,transform:"scale(0.8)"},{opacity:1,transform:"scale(1)"}],options:{duration:150,easing:"ease"}}),setDefaultAnimation("dialog.hide",{keyframes:[{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.8)"}],options:{duration:150,easing:"ease"}}),setDefaultAnimation("dialog.denyClose",{keyframes:[{transform:"scale(1)"},{transform:"scale(1.02)"},{transform:"scale(1)"}],options:{duration:150}}),setDefaultAnimation("dialog.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:150}}),setDefaultAnimation("dialog.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:150}});export{ScDialog as S,defineCustomElement as d};

Back