@components-1812/offcanvas
Version:
A web component for custom offcanvas, lateral panel
2 lines (1 loc) • 2.51 kB
JavaScript
class i extends HTMLElement{static VERSION="0.0.3";static DEFAULT_TAG_NAME="custom-offcanvas";static DEFAULT_ICONS={"close-button":'<svg width=16 height=16 fill=currentColor viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>',"handle-button":'<svg width=20 height=20 fill=currentColor viewBox="0 0 16 16" data-rotate-icon><path fill-rule=evenodd d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>'};static define(e,r={}){if(e??=this.DEFAULT_TAG_NAME,window.customElements.get(e))console.warn(`Custom element with tag name "${e}" is already defined.`);else{for(const o of["links","adopted","raw"])Array.isArray(r[o])&&this.stylesSheets[o].push(...r[o]);window.customElements.define(e,this)}}static stylesSheets={links:[],adopted:[],raw:[]};applyStylesSheets(e={}){for(const s of["links","adopted","raw"])Array.isArray(e[s])&&this.constructor.stylesSheets[s].push(...e[s]);const{links:r,adopted:o,raw:l}=this.constructor.stylesSheets,a=document.createElement("div");a.classList.add("styles"),a.style.display="none";const d=r.map(s=>{const t=document.createElement("link");t.rel="stylesheet",t.href=s;const{promise:h,resolve:n,reject:c}=Promise.withResolvers();return t.sheet?n({link:t,href:s,status:"loaded"}):(t.addEventListener("load",()=>n({link:t,href:s,status:"loaded"})),t.addEventListener("error",()=>c({link:t,href:s,status:"error"}))),a.append(t),h});this.removeAttribute("ready-links"),Promise.allSettled(d).then(s=>{this.dispatchEvent(new CustomEvent("ready-links",{detail:{results:s.map(t=>t.value||t.reason)}})),this.setAttribute("ready-links","")}),l.forEach(s=>{const t=document.createElement("style");t.textContent=s,a.append(t)}),this.shadowRoot.querySelector(".styles")?.remove(),this.shadowRoot.prepend(a),this.shadowRoot.adoptedStyleSheets=o}constructor(){super(),this.attachShadow({mode:"open"})}set variant(e){e?this.setAttribute("variant",e):this.removeAttribute("variant")}get variant(){return this.getAttribute("variant")}set open(e){this.toggleAttribute("open",e)}get open(){return this.hasAttribute("open")}set handleButton(e){this.toggleAttribute("handle-button",e)}get handleButton(){return this.hasAttribute("handle-button")}}export{i as OffcanvasBase};export default i;