@zoff-tech/zt-bottom-drawer
Version:
Bottom Drawer / Web Component
2 lines • 5.29 kB
JavaScript
import{r as i,d as e,h as t,H as s,e as n}from"./p-f6c816ce.js";import{g as o}from"./p-0b9b2444.js";const d=":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";const r=":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";const l="split-pane-main";const a="split-pane-side";const p={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)",never:""};const h=class{constructor(t){i(this,t);this.ionSplitPaneVisible=e(this,"ionSplitPaneVisible",7);this.visible=false;this.contentId=undefined;this.disabled=false;this.when=p["lg"]}visibleChanged(i){const e={visible:i,isPane:this.isPane.bind(this)};this.ionSplitPaneVisible.emit(e)}async connectedCallback(){if(typeof customElements!=="undefined"&&customElements!=null){await customElements.whenDefined("ion-split-pane")}this.styleChildren();this.updateState()}disconnectedCallback(){if(this.rmL){this.rmL();this.rmL=undefined}}updateState(){if(this.rmL){this.rmL();this.rmL=undefined}if(this.disabled){this.visible=false;return}const i=this.when;if(typeof i==="boolean"){this.visible=i;return}const e=p[i]||i;if(e.length===0){this.visible=false;return}if(window.matchMedia){const i=i=>{this.visible=i.matches};const t=window.matchMedia(e);t.addListener(i);this.rmL=()=>t.removeListener(i);this.visible=t.matches}}isPane(i){if(!this.visible){return false}return i.parentElement===this.el&&i.classList.contains(a)}styleChildren(){const i=this.contentId;const e=this.el.children;const t=this.el.childElementCount;let s=false;for(let n=0;n<t;n++){const t=e[n];const o=i!==undefined&&t.id===i;if(o){if(s){console.warn("split pane cannot have more than one main node");return}s=true}b(t,o)}if(!s){console.warn("split pane does not have a specified main node")}}render(){const i=o(this);return t(s,{class:{[i]:true,[`split-pane-${i}`]:true,"split-pane-visible":this.visible}},t("slot",null))}get el(){return n(this)}static get watchers(){return{visible:["visibleChanged"],disabled:["updateState"],when:["updateState"]}}};const b=(i,e)=>{let t;let s;if(e){t=l;s=a}else{t=a;s=l}const n=i.classList;n.add(t);n.remove(s)};h.style={ios:d,md:r};export{h as ion_split_pane};
//# sourceMappingURL=p-93599945.entry.js.map