@paraboly/pwc-sliding-panel
Version:
A panel that slides open from the sides of the page when you click a handle.
1 lines • 2.27 kB
JavaScript
import{r as t,h as e,g as s,c as i}from"./p-99aafda1.js";const n=class{constructor(e){t(this,e),this.active=!1,this.anchor="left"}activeWatchHandler(t){t?this.root.classList.add("pwc-sliding-panel___active"):this.root.classList.remove("pwc-sliding-panel___active")}toggledListener(){this.active=!this.active}render(){return e("slot",null)}get root(){return s(this)}static get watchers(){return{active:["activeWatchHandler"]}}static get style(){return":root{--pwc-sliding-panel___content-width:200px;--pwc-sliding-panel___toggle-width:30px;--pwc-sliding-panel___toggle-height:30px;--pwc-sliding-panel___transition-duration:0.25s}pwc-sliding-panel{display:block;position:absolute;-webkit-transition:all var(--pwc-sliding-panel___transition-duration) ease;transition:all var(--pwc-sliding-panel___transition-duration) ease;-webkit-box-sizing:border-box;box-sizing:border-box}pwc-sliding-panel[anchor=left]{left:calc(var(--pwc-sliding-panel___content-width) * -1)}pwc-sliding-panel[anchor=left].pwc-sliding-panel___active{left:0}pwc-sliding-panel[anchor=right]{right:calc(var(--pwc-sliding-panel___content-width) * -1)}pwc-sliding-panel[anchor=right].pwc-sliding-panel___active{right:0}"}},r=class{constructor(e){t(this,e)}render(){return e("slot",null)}get root(){return s(this)}static get style(){return"pwc-sliding-panel-content{display:block;width:var(--pwc-sliding-panel___content-width);background:#fff;border:1px solid #000;-webkit-box-sizing:border-box;box-sizing:border-box}"}},l=class{constructor(e){t(this,e),this.toggled=i(this,"toggled",7)}clickListener(t){t.target===this.root&&this.toggled.emit()}render(){return e("slot",null)}get root(){return s(this)}static get style(){return"pwc-sliding-panel-toggle{width:var(--pwc-sliding-panel___toggle-width);height:var(--pwc-sliding-panel___toggle-height);position:absolute;top:0;display:block;background:#fff;border:1px solid #000;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}pwc-sliding-panel[anchor=left]>pwc-sliding-panel-toggle{right:calc(var(--pwc-sliding-panel___toggle-width) * -1)}pwc-sliding-panel[anchor=right]>pwc-sliding-panel-toggle{left:calc(var(--pwc-sliding-panel___toggle-width) * -1)}"}};export{n as pwc_sliding_panel,r as pwc_sliding_panel_content,l as pwc_sliding_panel_toggle};