@components-1812/offcanvas/dist/index.min.js

A web component for custom offcanvas, lateral panel

(()=>{var d=class 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(a,n={}){if(a??=this.DEFAULT_TAG_NAME,window.customElements.get(a))console.warn(`Custom element with tag name "${a}" is already defined.`);else{for(let e of["links","adopted","raw"])Array.isArray(n[e])&&this.stylesSheets[e].push(...n[e]);window.customElements.define(a,this)}}static stylesSheets={links:[],adopted:[],raw:[]};applyStylesSheets(a={}){for(let o of["links","adopted","raw"])Array.isArray(a[o])&&this.constructor.stylesSheets[o].push(...a[o]);let{links:n,adopted:e,raw:h}=this.constructor.stylesSheets,r=document.createElement("div");r.classList.add("styles"),r.style.display="none";let b=n.map(o=>{let t=document.createElement("link");t.rel="stylesheet",t.href=o;let{promise:u,resolve:c,reject:g}=Promise.withResolvers();return t.sheet?c({link:t,href:o,status:"loaded"}):(t.addEventListener("load",()=>c({link:t,href:o,status:"loaded"})),t.addEventListener("error",()=>g({link:t,href:o,status:"error"}))),r.append(t),u});this.removeAttribute("ready-links"),Promise.allSettled(b).then(o=>{this.dispatchEvent(new CustomEvent("ready-links",{detail:{results:o.map(t=>t.value||t.reason)}})),this.setAttribute("ready-links","")}),h.forEach(o=>{let t=document.createElement("style");t.textContent=o,r.append(t)}),this.shadowRoot.querySelector(".styles")?.remove(),this.shadowRoot.prepend(r),this.shadowRoot.adoptedStyleSheets=e}constructor(){super(),this.attachShadow({mode:"open"})}set variant(a){a?this.setAttribute("variant",a):this.removeAttribute("variant")}get variant(){return this.getAttribute("variant")}set open(a){this.toggleAttribute("open",a)}get open(){return this.hasAttribute("open")}set handleButton(a){this.toggleAttribute("handle-button",a)}get handleButton(){return this.hasAttribute("handle-button")}};var f=d;var l=class i extends f{#a=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>${i.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.#a=this.shadowRoot.querySelector(".offcanvas"),this.applyStylesSheets()}connectedCallback(){this.shadowRoot.querySelector(".close-button").addEventListener("click",this.#t,{}),this.shadowRoot.querySelector(".offcanvas-backdrop").addEventListener("click",this.#t),this.dispatchEvent(new CustomEvent("ready")),this.setAttribute("ready","")}disconnectedCallback(){this.shadowRoot.querySelector(".close-button")?.removeEventListener("click",this.#t),this.shadowRoot.querySelector(".offcanvas-backdrop")?.removeEventListener("click",this.#t),this.#o()}static observedAttributes=["variant","open","handle-button"];attributeChangedCallback(a,n,e){if(n!==e){if(a==="variant"){this.variant?this.#a?.setAttribute("variant",this.variant):this.#a?.removeAttribute("variant");return}if(a==="open"){this.#a?.toggleAttribute("open",this.open),this.dispatchEvent(new CustomEvent("offcanvas-toggle",{detail:{open:this.open},bubbles:!0,composed:!0}));return}if(a==="handle-button"){this.handleButton?this.shadowRoot.querySelector(".offcanvas-backdrop").append(this.#n()):this.#o();return}}}show(){this.open=!0}hide(){this.open=!1}toggle(a){typeof a=="boolean"?this.open=a:this.open=!this.open}#n(){let a=document.createElement("button");return a.classList.add("handle-button"),a.setAttribute("type","button"),a.setAttribute("part","handle-button"),a.innerHTML=`<slot name=handle-button>${i.DEFAULT_ICONS["handle-button"]}</slot>`,a.addEventListener("click",this.#e),a}#o(){let a=this.shadowRoot.querySelector(".handle-button");a?.removeEventListener("click",this.#e),a?.remove()}#e=a=>{a.stopPropagation(),this.toggle()};#t=a=>{a.stopPropagation(),this.hide(),console.log("close")}};var s=l;var v=':host{--offcanvas-position: absolute;--offcanvas-z-index: 8010;width:100%;height:100%;position:var(--offcanvas-position);top:0;left:0;z-index:var(--offcanvas-z-index);pointer-events:none;--offcanvas-panel-width: 300px;--offcanvas-panel-height: 100%;--offcanvas-panel-padding: 5px;--offcanvas-panel-transition: margin .3s ease-in-out;--offcanvas-panel-header-padding: 5px;--offcanvas-panel-body-padding: 5px;--offcanvas-panel-footer-padding: 5px;--offcanvas-panel-bg: #222;--offcanvas-panel-color: #fff;--offcanvas-panel-header-bg: var(--offcanvas-panel-bg);--offcanvas-panel-header-color: var(--offcanvas-panel-color);--offcanvas-panel-footer-bg: var(--offcanvas-panel-bg);--offcanvas-panel-footer-color: var(--offcanvas-panel-color);--offcanvas-panel-border: 1px solid #ccc;--offcanvas-panel-border-radius: 0px;--offcanvas-panel-shadow: 0 1px 3px 0 #3c40434d, 0 4px 8px 3px #3c404326;--offcanvas-backdrop-bg: #00000080;--offcanvas-backdrop-color: #fff;--offcanvas-backdrop-transition: background-color .3s ease-in-out;--offcanvas-close-button-width: 40px;--offcanvas-close-button-height: 40px;--offcanvas-close-button-padding: 10px;--offcanvas-close-button-bg: transparent;--offcanvas-close-button-color: #fff;--offcanvas-close-button-border: none;--offcanvas-close-button-font-size: 1.5rem;--offcanvas-close-button-cursor: pointer;--offcanvas-handle-button-width: 50px;--offcanvas-handle-button-height: 100px;--offcanvas-handle-button-padding: 5px;--offcanvas-handle-button-bg: #444;--offcanvas-handle-button-color: #fff;--offcanvas-handle-button-border: none;--offcanvas-handle-button-border-radius: 10px;--offcanvas-handle-button-cursor: pointer;--offcanvas-handle-button-font-size: 1rem;--offcanvas-handle-button-shadow: var(--offcanvas-panel-shadow)}:host([variant~="top"]),:host([variant~="bottom"]){--offcanvas-panel-width: 100%;--offcanvas-panel-height: 300px;--offcanvas-handle-button-width: 100px;--offcanvas-handle-button-height: 50px;--offcanvas-panel-shadow: 1px 0 3px 0 #3c40434d, 4px 0 8px 3px #3c404326}:host([variant~="global"]){--offcanvas-position: fixed}:host([variant~="local"]){--offcanvas-position: absolute}:host .offcanvas{width:100%;height:100%;background-color:transparent;transition:var(--offcanvas-backdrop-transition);pointer-events:none;display:flex;&[open]:not([variant~=backdrop-transparent]){background-color:var(--offcanvas-backdrop-bg)}&[variant~=left],&{flex-direction:row}&[variant~=right]{flex-direction:row-reverse}&[variant~=top]{flex-direction:column}&[variant~=bottom]{flex-direction:column-reverse}}:host .offcanvas{.panel{width:var(--offcanvas-panel-width);height:var(--offcanvas-panel-height);padding:var(--offcanvas-panel-padding);position:relative;box-sizing:border-box;pointer-events:initial;background:var(--offcanvas-panel-bg);color:var(--offcanvas-panel-color);overflow:hidden;transition:var(--offcanvas-panel-transition);.panel-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.panel-header{position:relative;padding:var(--offcanvas-panel-header-padding);background:var(--offcanvas-panel-header-bg);color:var(--offcanvas-panel-header-color)}.panel-body{position:relative;flex:1 1 auto;padding:var(--offcanvas-panel-body-padding)}.panel-footer{position:relative;padding:var(--offcanvas-panel-footer-padding);background:var(--offcanvas-panel-footer-bg);color:var(--offcanvas-panel-footer-color)}}&[variant~=scroll-full] .panel-content{overflow:auto}&[variant~=scroll-inner] .panel-content{overflow:auto;.panel-header{position:sticky;inset:0 auto auto 0;z-index:10}}&[variant~=scroll-body] .panel{.panel-body{overflow:auto}}&[variant~=left] .panel,.panel{border-top:none;border-left:none;border-bottom:none;border-right:var(--offcanvas-panel-border);border-radius:0 var(--offcanvas-panel-border-radius) var(--offcanvas-panel-border-radius) 0;margin:0 0 0 calc(-1 * var(--offcanvas-panel-width))}&[variant~=right] .panel{border-top:none;border-left:var(--offcanvas-panel-border);border-bottom:none;border-right:none;border-radius:var(--offcanvas-panel-border-radius) 0 0 var(--offcanvas-panel-border-radius);margin:0 calc(-1 * var(--offcanvas-panel-width)) 0 0}&[variant~=top] .panel{border-top:none;border-left:none;border-bottom:var(--offcanvas-panel-border);border-right:none;border-radius:0 0 var(--offcanvas-panel-border-radius) var(--offcanvas-panel-border-radius);margin:calc(-1 * var(--offcanvas-panel-height)) 0 0 0}&[variant~=bottom] .panel{border-top:var(--offcanvas-panel-border);border-left:none;border-bottom:none;border-right:none;border-radius:var(--offcanvas-panel-border-radius) var(--offcanvas-panel-border-radius) 0 0;margin:0 0 calc(-1 * var(--offcanvas-panel-height)) 0}&[open] .panel{box-shadow:var(--offcanvas-panel-shadow);margin:0}}:host .offcanvas{.offcanvas-backdrop{pointer-events:none;flex:1 1 auto;position:relative;color:var(--offcanvas-backdrop-color);::slotted(*){pointer-events:initial}::slotted([data-hide-when-closed]){display:none}}&[open] .offcanvas-backdrop{pointer-events:initial;::slotted([data-hide-when-closed]){display:unset}::slotted([data-hide-when-opened]){display:none}}&[open][variant~=backdrop-static] .offcanvas-backdrop{pointer-events:none}}:host .offcanvas{.close-button{pointer-events:initial;position:absolute;inset:0 0 auto auto;width:var(--offcanvas-close-button-width);height:var(--offcanvas-close-button-height);padding:var(--offcanvas-close-button-padding);background:var(--offcanvas-close-button-bg);color:var(--offcanvas-close-button-color);border:var(--offcanvas-close-button-border);font-size:var(--offcanvas-close-button-font-size);cursor:var(--offcanvas-close-button-cursor);display:flex;align-items:center;justify-content:center}}:host .offcanvas{.handle-button{pointer-events:initial;position:absolute;box-sizing:border-box;width:var(--offcanvas-handle-button-width);height:var(--offcanvas-handle-button-height);padding:var(--offcanvas-handle-button-padding);background:var(--offcanvas-handle-button-bg);color:var(--offcanvas-handle-button-color);box-shadow:var(--offcanvas-handle-button-shadow);border:var(--offcanvas-handle-button-border);font-size:var(--offcanvas-handle-button-font-size);cursor:var(--offcanvas-handle-button-cursor);margin:auto}&[variant~=left],&{.handle-button{inset:0 auto 0 0;border-radius:0 var(--offcanvas-handle-button-border-radius) var(--offcanvas-handle-button-border-radius) 0;::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:0deg}}&[open] .handle-button{::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:180deg}}}&[variant~=right]{.handle-button{inset:0 0 0 auto;border-radius:var(--offcanvas-handle-button-border-radius) 0 0 var(--offcanvas-handle-button-border-radius);::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:180deg}}&[open] .handle-button{::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:0deg}}}&[variant~=top]{.handle-button{inset:0 0 auto;border-radius:0 0 var(--offcanvas-handle-button-border-radius) var(--offcanvas-handle-button-border-radius);::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:90deg}}&[open] .handle-button{::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:-90deg}}}&[variant~=bottom]{.handle-button{inset:auto 0 0;border-radius:var(--offcanvas-handle-button-border-radius) var(--offcanvas-handle-button-border-radius) 0 0;::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:-90deg}}&[open] .handle-button{::slotted([data-rotate-icon]),svg[data-rotate-icon]{rotate:90deg}}}}';var p=new CSSStyleSheet;p.replaceSync(v);s.stylesSheets.adopted.push(p);s.define();var A=s;})();