FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
surecart
/
dist
/
components
/
components
Edit File: sc-drawer2.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$1}from"./sc-icon2.js";const scDrawerCss=":host {\n display: contents;\n}\n.drawer {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n font-family: var(--sc-font-sans);\n font-weight: var(--sc-font-weight-normal);\n}\n.drawer--contained {\n position: absolute;\n z-index: initial;\n}\n.drawer--fixed {\n position: fixed;\n z-index: var(--sc-z-index-drawer);\n}\n.drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--sc-panel-background-color);\n box-shadow: var(--sc-shadow-x-large);\n transition: var(--sc-transition-medium) transform;\n overflow: auto;\n pointer-events: all;\n}\n.drawer__panel:focus {\n outline: none;\n}\n.drawer--top .drawer__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: 100%;\n height: var(--sc-drawer-size, 400px);\n}\n.drawer--end .drawer__panel {\n top: 0;\n right: 0;\n bottom: auto;\n left: auto;\n width: 100%;\n max-width: var(--sc-drawer-size, 400px);\n height: 100%;\n}\n.drawer--bottom .drawer__panel {\n top: auto;\n right: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--sc-drawer-size, 400px);\n}\n.drawer--start .drawer__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: var(--sc-drawer-size, 400px);\n height: 100%;\n}\n.header__sticky {\n position: sticky;\n top: 0;\n z-index: 10;\n background: #fff;\n}\n.drawer__header {\n display: flex;\n align-items: center;\n padding: var(--sc-drawer-header-spacing);\n border-bottom: var(--sc-drawer-border);\n}\n\n.drawer__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: var(--sc-font-size-large);\n line-height: var(--sc-line-height-dense);\n margin: 0;\n}\n.drawer__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--sc-font-size-x-large);\n color: var(--sc-color-gray-500);\n cursor: pointer;\n}\n.drawer__body {\n flex: 1 1 auto;\n}\n\n.drawer--has-footer .drawer__footer {\n border-top: var(--sc-drawer-border);\n padding: var(--sc-drawer-footer-spacing);\n\n &.is-sticky {\n position: sticky;\n bottom: 0;\n background: #fff;\n }\n}\n\n.drawer__overlay {\n display: block;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--sc-overlay-background-color);\n pointer-events: all;\n}\n.drawer--contained .drawer__overlay {\n position: absolute;\n}\n",ScDrawerStyle0=scDrawerCss,ScDrawer=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scInitialFocus=createEvent(this,"scInitialFocus",7),this.scRequestClose=createEvent(this,"scRequestClose",7),this.scShow=createEvent(this,"scShow",7),this.scHide=createEvent(this,"scHide",7),this.scAfterShow=createEvent(this,"scAfterShow",7),this.scAfterHide=createEvent(this,"scAfterHide",7),this.open=!1,this.label="",this.placement="end",this.contained=!1,this.noHeader=!1,this.stickyHeader=!1,this.stickyFooter=!1}componentDidLoad(){this.drawer.hidden=!this.open,this.open&&!this.contained&&this.lockBodyScrolling(),this.handleOpenChange()}disconnectedCallback(){this.unLockBodyScrolling()}lockBodyScrolling(){document.body.classList.add("sc-scroll-lock")}unLockBodyScrolling(){document.body.classList.remove("sc-scroll-lock")}async show(){this.open||(this.open=!0)}async hide(){this.open&&(this.open=!1)}async requestClose(e="method"){if(this.scRequestClose.emit(e).defaultPrevented){const e=getAnimation(this.el,"drawer.denyClose");animateTo(this.panel,e.keyframes,e.options)}else this.hide()}handleKeyDown(e){"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}async handleOpenChange(){if(this.open){this.scShow.emit(),this.originalTrigger=document.activeElement,this.contained||this.lockBodyScrolling();const e=this.el.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([stopAnimations(this.drawer),stopAnimations(this.overlay)]),this.drawer.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,`drawer.show${this.placement.charAt(0).toUpperCase()+this.placement.slice(1)}`),a=getAnimation(this.el,"drawer.overlay.show");await Promise.all([animateTo(this.panel,t.keyframes,t.options),animateTo(this.overlay,a.keyframes,a.options)]),this.scAfterShow.emit()}else{this.scHide.emit(),this.unLockBodyScrolling(),await Promise.all([stopAnimations(this.drawer),stopAnimations(this.overlay)]);const e=getAnimation(this.el,`drawer.hide${this.placement.charAt(0).toUpperCase()+this.placement.slice(1)}`),t=getAnimation(this.el,"drawer.overlay.hide");await Promise.all([animateTo(this.panel,e.keyframes,e.options),animateTo(this.overlay,t.keyframes,t.options)]),this.drawer.hidden=!0;const a=this.originalTrigger;"function"==typeof(null==a?void 0:a.focus)&&setTimeout((()=>a.focus())),this.scAfterHide.emit()}}render(){return h("div",{key:"70d7e22dd4cbdf41636ae7710b05112b96cce7f9",part:"base",class:{drawer:!0,"drawer--open":this.open,"drawer--top":"top"===this.placement,"drawer--end":"end"===this.placement,"drawer--bottom":"bottom"===this.placement,"drawer--start":"start"===this.placement,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":null!==this.el.querySelector('[slot="footer"]')},ref:e=>this.drawer=e,onKeyDown:e=>this.handleKeyDown(e)},h("div",{key:"cfff2c762af66fc876e79e3c15b42b899c0c0f08",part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1",ref:e=>this.overlay=e}),h("div",{key:"722571781cc2ec155d2ad6f75471f6b6c38683e7",part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:void 0,"aria-labelledby":this.noHeader?void 0:"title",tabindex:"0",ref:e=>this.panel=e},!this.noHeader&&h("header",{key:"6fe51167525afdba1d7441edf8ddbd876a11d520",part:"header",class:this.stickyHeader?"header__sticky":""},h("slot",{key:"61d9eab2dbd20e1a6b9bca31ff7943896c07b9d6",name:"header"},h("div",{key:"4934440eeb296185f5deb2d26459836e360056ab",class:"drawer__header"},h("h2",{key:"0ed1ba3c31be6e6965214a16c7d0c00628a1b277",part:"title",class:"drawer__title",id:"title"},h("slot",{key:"89e509ed9ab12c3f1747918d465e74f1e9f7e270",name:"label"},this.label.length>0?this.label:" "," ")),h("sc-icon",{key:"700773fba4fe722097fd3d6be755a1267c80b6a0",part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",name:"x",label: /** translators: Close this modal window. */ wp.i18n.__("Close","surecart"),onClick:()=>this.requestClose("close-button")})))),h("footer",{key:"ee3d4a4e4764782aefc7412da9d9bb9c9c2dca4f",part:"header-suffix",class:"drawer__header-suffix"},h("slot",{key:"56820985c53210fabdab54acc7aa8df972304a2c",name:"header-suffix"})),h("div",{key:"93ad2c2cff893e9716b6e0a83ca2668b05fdd623",part:"body",class:"drawer__body"},h("slot",{key:"d5ee228b54506a1ba942e8bf7f6760497421fc01"})),h("footer",{key:"89caf9664b9ccf6ce4d50fe5b23a6fa2131cd28e",part:"footer",class:this.stickyFooter?"drawer__footer is-sticky":"drawer__footer"},h("slot",{key:"a023d542128d2e6a49448f45215b495dacb2bef3",name:"footer"}))))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScDrawerStyle0}},[1,"sc-drawer",{open:[516],label:[513],placement:[513],contained:[516],noHeader:[516,"no-header"],stickyHeader:[4,"sticky-header"],stickyFooter:[4,"sticky-footer"],requestClose:[64]},void 0,{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-drawer","sc-icon"].forEach((e=>{switch(e){case"sc-drawer":customElements.get(e)||customElements.define(e,ScDrawer);break;case"sc-icon":customElements.get(e)||defineCustomElement$1()}}))}setDefaultAnimation("drawer.showTop",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideTop",{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.showEnd",{keyframes:[{opacity:0,transform:"translateX(100%)"},{opacity:1,transform:"translateX(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideEnd",{keyframes:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.showBottom",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideBottom",{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.showStart",{keyframes:[{opacity:0,transform:"translateX(-100%)"},{opacity:1,transform:"translateX(0)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.hideStart",{keyframes:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-100%)"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.denyClose",{keyframes:[{transform:"scale(1)"},{transform:"scale(1.01)"},{transform:"scale(1)"}],options:{duration:250}}),setDefaultAnimation("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250,easing:"ease"}});export{ScDrawer as S,defineCustomElement as d};
Save
Back