UNPKG

@ionic/core

Version:
4 lines 3.31 kB
/*! * (C) Ionic http://ionicframework.com - MIT License */ import{r as i,c as t,h as e,e as o,f as s}from"./p-66a5d6a8.js";import{b as n}from"./p-597ff9af.js";const a="split-pane-main",l="split-pane-side",r={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)",never:""},d=class{constructor(e){i(this,e),this.ionSplitPaneVisible=t(this,"ionSplitPaneVisible",7),this.visible=!1,this.contentId=void 0,this.disabled=!1,this.when=r.lg}visibleChanged(i){this.ionSplitPaneVisible.emit({visible:i})}async isVisible(){return Promise.resolve(this.visible)}async connectedCallback(){"undefined"!=typeof customElements&&null!=customElements&&await customElements.whenDefined("ion-split-pane"),this.styleMainElement(),this.updateState()}disconnectedCallback(){this.rmL&&(this.rmL(),this.rmL=void 0)}updateState(){if(this.rmL&&(this.rmL(),this.rmL=void 0),this.disabled)return void(this.visible=!1);const i=this.when;if("boolean"==typeof i)return void(this.visible=i);const t=r[i]||i;if(0===t.length)return void(this.visible=!1);const e=i=>{this.visible=i.matches},o=window.matchMedia(t);o.addListener(e),this.rmL=()=>o.removeListener(e),this.visible=o.matches}styleMainElement(){const i=this.contentId,t=this.el.children,e=this.el.childElementCount;let o=!1;for(let s=0;s<e;s++){const e=t[s],n=void 0!==i&&e.id===i;if(n){if(o)return void console.warn("split pane cannot have more than one main node");p(e,n),o=!0}}o||console.warn("split pane does not have a specified main node")}render(){const i=n(this);return e(o,{key:"76be70d7fbebc52646a5851f47accc1006615b85",class:{[i]:!0,[`split-pane-${i}`]:!0,"split-pane-visible":this.visible}},e("slot",{key:"9a859530f4fb18aff43255bc3940feb9aca625d7"}))}get el(){return s(this)}static get watchers(){return{visible:["visibleChanged"],disabled:["updateState"],when:["updateState"]}}},p=(i,t)=>{let e,o;t?(e=a,o=l):(e=l,o=a);const s=i.classList;s.add(e),s.remove(o)};d.style={ios:":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--side-min-width:270px;--side-max-width:28%}",md:":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--side-min-width:270px;--side-max-width:28%}"};export{d as ion_split_pane}