@vpaulo/vp-panel/dist/vp-panel.js

Panel component

class e extends HTMLElement{constructor(){super(),this._open=!1,this._summary="Panel",this._shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["open","summary"]}set open(e){this._open=""===e}get open(){return this._open}set summary(e){this._summary=""===e?"Panel":e}get summary(){return this._summary}setEvents(){this.summaryElement=this._shadow.querySelector(".summary"),this.summaryElement.addEventListener("click",this.handleClick.bind(this))}handleClick(){this.toggleAttribute("open"),this.dispatchEvent(new CustomEvent("vp-panel:change",{detail:{isOpen:this.open},bubbles:!0}))}attributeChangedCallback(e,t,n){"open"===e&&(this.open=n),"summary"===e&&(this.summary=n)}connectedCallback(){this._shadow.innerHTML=this.render(),this.setEvents()}disconnectedCallback(){this.summaryElement.removeEventListener("click",this.handleClick.bind(this))}render(){return`<span class="summary">${this.summary}</span><div class="content"><slot></slot></div>`}}const t=e.prototype.connectedCallback,n=e.prototype.render;Object.assign(e.prototype,{connectedCallback:function(){t&&t.call(this)},render:function(){if(n)return this.getStyles()+n.call(this)},getStyles:function(){return'<style>:host{overflow:hidden;width:100%}.summary{display:flex;justify-content:space-between;cursor:pointer;font-size:20px;line-height:1.4;color:#222}.summary:hover{color:#666}.summary::after{content:"";width:1.4em;height:1.4em;text-align:center;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:50% 50%}.content{display:none;max-height:0;margin:0;padding:0 1em;transition:all .2s;font-size:15px;font-weight:normal;line-height:1.5;color:#666}:host([open]) .summary::after{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E")}:host([open]) .content{display:block;max-height:100vh;margin-top:20px}</style>'}}),window.customElements.get("vp-panel")||(window.PanelElement=e,window.customElements.define("vp-panel",e));