FileMaster

Edit File: sc-popover2.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{a as autoUpdate,c as computePosition,o as offset,f as flip,s as shift,b as size}from"./floating-ui.dom.esm.js";import{s as speak}from"./index2.js";import{d as defineCustomElement$1}from"./sc-icon2.js";const scPopoverCss=':host{display:inline-block;--panel-height:75vh}slot[name=title]{font-weight:600;font-size:14px}.popover{position:relative}.popover.popover--open .popover__positioner{visibility:visible;opacity:1;transform:scale(1)}.popover__header{display:flex;justify-content:space-between;padding-bottom:1em}.popover__header-close-button{display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;border-radius:var(--sc-border-radius-small)}.popover__header-close-button:focus{outline:2px solid var(--sc-focus-ring-color, var(--sc-color-primary-500));outline-offset:2px}.popover__header-close-button:hover{opacity:0.7}.popover__header-close-icon{vertical-align:middle;width:1.5em;height:1.5em}.popover__footer{border-top:1px solid var(--sc-input-border-color);padding-top:0.5em;margin-top:1em}.popover__trigger{display:block;cursor:pointer;border-width:0;outline:none;background-color:unset}.popover--disabled,.popover--disabled .popover__trigger{cursor:not-allowed}.popover__positioner{position:absolute;right:0;width:100%;z-index:var(--sc-z-index-popover);opacity:0;visibility:hidden;transform:scale(0.9);min-width:var(--panel-width, "fit-content")}.popover__panel{transform-origin:top left;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:var(--panel-height);font-family:var(--sc-font-sans);font-size:var(--sc-font-size-medium);font-weight:var(--sc-font-weight-normal);color:var(--sc-input-label-color);background-color:var(--sc-panel-background-color);border:solid 1px var(--sc-panel-border-color);border-radius:var(--sc-border-radius-x-large);box-shadow:var(--sc-shadow-large);overflow:auto;overscroll-behavior:none;transition:var(--sc-transition-fast) opacity, var(--sc-transition-fast) transform;z-index:5;padding:var(--sc-spacing-medium)}',ScPopoverStyle0=scPopoverCss,ScPopover=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scShow=createEvent(this,"scShow",7),this.scHide=createEvent(this,"scHide",7),this.boundHandleOutsideClick=e=>this.handleOutsideClick(e),this.boundHandleKeyDown=e=>this.handleKeyDown(e),this.boundHandleFocusOut=e=>this.handleFocusOut(e),this.disabled=void 0,this.open=!1,this.placement="bottom-start",this.distance=0,this.skidding=0,this.hoist=!1,this.isVisible=void 0}handleOpenChange(){this.open?this.show():this.hide()}handleOutsideClick(e){e.composedPath().some((e=>e===this.el))||(this.open=!1)}handleKeyDown(e){"Escape"===e.key&&(e.stopPropagation(),this.hide())}handleTriggerKeyDown(e){if("Enter"===e.key||" "===e.key){if(e.preventDefault(),this.disabled)return;this.open?this.hide():this.show()}}handleFocusOut(e){const t=e.relatedTarget;t&&!this.el.contains(t)&&(this.open=!1)}startPositioner(){this.stopPositioner(),this.updatePositioner(),this.positionerCleanup=autoUpdate(this.trigger,this.positioner,this.updatePositioner.bind(this))}updatePositioner(){this.open&&this.trigger&&this.positioner&&computePosition(this.trigger,this.positioner,{placement:this.placement,middleware:[offset({mainAxis:this.distance,crossAxis:this.skidding}),flip(),shift(),size({apply:({availableWidth:e,availableHeight:t})=>{Object.assign(this.panel.style,{maxWidth:`${e}px`,maxHeight:`${t}px`})},padding:8})],strategy:this.hoist?"fixed":"absolute"}).then((({x:e,y:t,placement:o})=>{this.positioner.setAttribute("data-placement",o),Object.assign(this.positioner.style,{position:this.hoist?"fixed":"absolute",left:`${e}px`,top:`${t}px`,right:"auto"})}))}stopPositioner(){var e;this.positionerCleanup&&(this.positionerCleanup(),this.positionerCleanup=void 0,null===(e=this.positioner)||void 0===e||e.removeAttribute("data-placement"))}show(){speak(wp.i18n.__("Popover opened. Press Escape to close.","surecart"),"assertive"),this.scShow.emit(),this.isVisible||(this.isVisible=!0,this.open=!0,this.startPositioner(),document.addEventListener("keydown",this.boundHandleKeyDown),this.el.addEventListener("focusout",this.boundHandleFocusOut),this.panel.focus())}hide(){var e;if(speak(wp.i18n.__("Popover closed.","surecart"),"assertive"),this.scHide.emit(),!this.isVisible)return;this.stopPositioner(),document.removeEventListener("keydown",this.boundHandleKeyDown),this.el.removeEventListener("focusout",this.boundHandleFocusOut),this.isVisible=!1,this.open=!1;const t=this.el.shadowRoot.querySelector('slot[name="trigger"]').assignedElements({flatten:!0})[0];null===(e=null==t?void 0:t.focus)||void 0===e||e.call(t)}componentWillLoad(){document.addEventListener("mousedown",this.boundHandleOutsideClick)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundHandleOutsideClick),document.removeEventListener("keydown",this.boundHandleKeyDown),this.el.removeEventListener("focusout",this.boundHandleFocusOut)}handleHide(){this.open=!1,this.trigger.focus()}render(){return h("div",{key:"4476ca548c15fe56a44eae155f62ef71aeddace7",part:"base",class:{popover:!0,"popover--open":this.open,"popover--disabled":this.disabled}},h("span",{key:"6a9808307b807e7447d6c3462ab996327107fef1",part:"trigger",class:"popover__trigger",ref:e=>this.trigger=e,onClick:()=>{this.disabled||(this.open?this.hide():setTimeout((()=>{this.show()}),0))},onKeyDown:e=>this.handleTriggerKeyDown(e),tabindex:"0",role:"button","aria-expanded":this.open?"true":"false","aria-haspopup":"dialog","aria-label":wp.i18n.__("Press Enter to open popover","surecart")},h("slot",{key:"db33d95a8adcea45e00440c5b57e25ad1f3cc4bd",name:"trigger"})),h("div",{key:"a0784e3aad7390b51f77ae8d681cfeaab28cefff",class:"popover__positioner",ref:e=>this.positioner=e},h("div",{key:"558c5a05a654f5f606087dfe7349a2b707d4bc57",part:"panel",class:"popover__panel",role:"dialog","aria-modal":"false",tabindex:"-1",ref:e=>this.panel=e},h("div",{key:"1156def1e343a3e85b914ea3e8f60e14b8b14bcb",class:"popover__header"},h("slot",{key:"3734de42a6f231ee4217867bdf3a7c477a1e2f90",name:"title"}),h("button",{key:"de0de0b7e33fdbe2d34fe9120f7acecdb5c66762",type:"button",class:"popover__header-close-button",onClick:()=>this.handleHide(),onKeyDown:e=>"Enter"===e.key&&this.handleHide(),"aria-label":wp.i18n.__("Close","surecart")},h("sc-icon",{key:"d2143106c34526da7989fc52aca6c38a3f82d7fe",class:"popover__header-close-icon",name:"x"}))),h("slot",{key:"756a9284b3a5598e3545ecfaa4d356e6bbb158d5",name:"content"}),h("div",{key:"d870a248537c405adbf15cb30bb71810b615bc15",class:"popover__footer"},h("slot",{key:"8a8ad84cb03161e43e1869243dcf9761fd7e31ae",name:"footer"})))))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScPopoverStyle0}},[1,"sc-popover",{disabled:[4],open:[1540],placement:[513],distance:[2],skidding:[2],hoist:[4],isVisible:[32]},void 0,{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-popover","sc-icon"].forEach((e=>{switch(e){case"sc-popover":customElements.get(e)||customElements.define(e,ScPopover);break;case"sc-icon":customElements.get(e)||defineCustomElement$1()}}))}export{ScPopover as S,defineCustomElement as d};

Back