JezK

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 inset-inline-end: 0;\n bottom: auto;\n inset-inline-start: 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 inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 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)}getDirection(){return"rtl"===getComputedStyle(this.el).direction?"rtl":"ltr"}async requestClose(e="method"){if(this.scRequestClose.emit(e).defaultPrevented){const e=getAnimation(this.el,"drawer.denyClose",{dir:this.getDirection()});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=this.getDirection(),a=getAnimation(this.el,`drawer.show${this.placement.charAt(0).toUpperCase()+this.placement.slice(1)}`,{dir:t}),n=getAnimation(this.el,"drawer.overlay.show",{dir:t});await Promise.all([animateTo(this.panel,a.keyframes,a.options),animateTo(this.overlay,n.keyframes,n.options)]),this.scAfterShow.emit()}else{this.scHide.emit(),this.unLockBodyScrolling(),await Promise.all([stopAnimations(this.drawer),stopAnimations(this.overlay)]);const e=this.getDirection(),t=getAnimation(this.el,`drawer.hide${this.placement.charAt(0).toUpperCase()+this.placement.slice(1)}`,{dir:e}),a=getAnimation(this.el,"drawer.overlay.hide",{dir:e});await Promise.all([animateTo(this.panel,t.keyframes,t.options),animateTo(this.overlay,a.keyframes,a.options)]),this.drawer.hidden=!0;const n=this.originalTrigger;"function"==typeof(null==n?void 0:n.focus)&&setTimeout((()=>n.focus())),this.scAfterHide.emit()}}render(){return h("div",{key:"780ee1379d8c5544673b1ceb0b4b680e3164e032",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:"37e451e88c3f852898e35e643636c3a57d5580c3",part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1",ref:e=>this.overlay=e}),h("div",{key:"6891cc43d79fccf48ece953a846884b67b43d7de",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:"e88aebab0a41d3718b81505513529087b236cc60",part:"header",class:this.stickyHeader?"header__sticky":""},h("slot",{key:"6f3ac20a27d7cbeb9aa0ee9b334065a004959a5d",name:"header"},h("div",{key:"08f3602305519b53ef8897d0ff6be9b59766a90b",class:"drawer__header"},h("h2",{key:"7a8b4b29bf6f15d229465f2aa68602cd8c261b9f",part:"title",class:"drawer__title",id:"title"},h("slot",{key:"898abde5f12380d03c145af61a0d041f7286dc03",name:"label"},this.label.length>0?this.label:" "," ")),h("sc-icon",{key:"51f403579b8a6afac1173313dc5cc4f2104f32e4",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:"d681a8d1a8652062c45ad0b285da0af95de15d8d",part:"header-suffix",class:"drawer__header-suffix"},h("slot",{key:"0ae6c3129238b1c89a7fa920fde5bf93f75e08d3",name:"header-suffix"})),h("div",{key:"0c86dac4bf3ad211541fa4a1d1611a38ccb2a538",part:"body",class:"drawer__body"},h("slot",{key:"c87fb8253579e77244643633b9128946b563f175"})),h("footer",{key:"706560ac939f2b815b981f55844e1dda52eb7049",part:"footer",class:this.stickyFooter?"drawer__footer is-sticky":"drawer__footer"},h("slot",{key:"a4bb85fea755de3ecbbeabff5d310835e9e4d705",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)"}],rtlKeyframes:[{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%)"}],rtlKeyframes:[{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)"}],rtlKeyframes:[{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%)"}],rtlKeyframes:[{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};