@components-1812/offcanvas
Version:
A web component for custom offcanvas, lateral panel
2 lines (1 loc) • 2.43 kB
JavaScript
import a from"./OffcanvasBase.js";class e extends a{#t=null;constructor(){super(),this.shadowRoot.innerHTML=`<div class=offcanvas><div class=panel part=panel><div class=panel-content part=panel-content><header class=panel-header part=panel-header><slot name=header><h2 class=offcanvas-title>Offcanvas Title</h2></slot><button class=close-button part=close-button aria-label=Close><slot name=close-button>${e.DEFAULT_ICONS["close-button"]}</slot></button></header><div class=panel-body part=panel-body><slot>Offcanvas Body Content</slot></div><footer class=panel-footer part=panel-footer><slot name=footer></slot></footer></div></div><div class=offcanvas-backdrop part=backdrop><slot name=backdrop></slot></div></div>`,this.#t=this.shadowRoot.querySelector(".offcanvas"),this.applyStylesSheets()}connectedCallback(){this.shadowRoot.querySelector(".close-button").addEventListener("click",this.#e,{}),this.shadowRoot.querySelector(".offcanvas-backdrop").addEventListener("click",this.#e),this.dispatchEvent(new CustomEvent("ready")),this.setAttribute("ready","")}disconnectedCallback(){this.shadowRoot.querySelector(".close-button")?.removeEventListener("click",this.#e),this.shadowRoot.querySelector(".offcanvas-backdrop")?.removeEventListener("click",this.#e),this.#o()}static observedAttributes=["variant","open","handle-button"];attributeChangedCallback(t,o,s){if(o!==s){if(t==="variant"){this.variant?this.#t?.setAttribute("variant",this.variant):this.#t?.removeAttribute("variant");return}if(t==="open"){this.#t?.toggleAttribute("open",this.open),this.dispatchEvent(new CustomEvent("offcanvas-toggle",{detail:{open:this.open},bubbles:!0,composed:!0}));return}if(t==="handle-button"){this.handleButton?this.shadowRoot.querySelector(".offcanvas-backdrop").append(this.#a()):this.#o();return}}}show(){this.open=!0}hide(){this.open=!1}toggle(t){typeof t=="boolean"?this.open=t:this.open=!this.open}#a(){const t=document.createElement("button");return t.classList.add("handle-button"),t.setAttribute("type","button"),t.setAttribute("part","handle-button"),t.innerHTML=`<slot name=handle-button>${e.DEFAULT_ICONS["handle-button"]}</slot>`,t.addEventListener("click",this.#s),t}#o(){const t=this.shadowRoot.querySelector(".handle-button");t?.removeEventListener("click",this.#s),t?.remove()}#s=t=>{t.stopPropagation(),this.toggle()};#e=t=>{t.stopPropagation(),this.hide(),console.log("close")}}export{e as Offcanvas};export default e;