@ionic/core
Version:
Base components for Ionic
1 lines • 3.25 kB
JavaScript
import{e as t}from"./chunk-7c632336.js";const e="split-pane-main",i="split-pane-side",s={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)",never:""};class n{constructor(){this.visible=!1,this.disabled=!1,this.when=s.lg}visibleChanged(t){const e={visible:t,isPane:this.isPane.bind(this)};this.ionSplitPaneVisible.emit(e)}componentDidLoad(){this.styleChildren(),this.updateState()}componentDidUnload(){this.rmL&&(this.rmL(),this.rmL=void 0)}updateState(){if(this.isServer)return;if(this.rmL&&(this.rmL(),this.rmL=void 0),this.disabled)return void(this.visible=!1);const t=this.when;if("boolean"==typeof t)return void(this.visible=t);const e=s[t]||t;if(0===e.length)return void(this.visible=!1);const i=t=>{this.visible=t.matches},n=this.win.matchMedia(e);n.addListener(i),this.rmL=(()=>n.removeListener(i)),this.visible=n.matches}isPane(t){return!!this.visible&&t.parentElement===this.el&&t.classList.contains(i)}styleChildren(){if(this.isServer)return;const t=this.contentId,e=this.el.children,i=this.el.childElementCount;let s=!1;for(let n=0;n<i;n++){const i=e[n],l=void 0!==t?i.id===t:i.hasAttribute("main");if(l){if(s)return void console.warn("split pane can not have more than one main node");s=!0}a(i,l)}s||console.warn("split pane could not found any main node")}hostData(){return{class:Object.assign({},t(this.mode,"split-pane"),{"split-pane-visible":this.visible})}}static get is(){return"ion-split-pane"}static get properties(){return{contentId:{type:String,attr:"content-id"},disabled:{type:Boolean,attr:"disabled",watchCallbacks:["updateState"]},el:{elementRef:!0},isServer:{context:"isServer"},visible:{state:!0,watchCallbacks:["visibleChanged"]},when:{type:"Any",attr:"when",watchCallbacks:["updateState"]},win:{context:"window"}}}static get events(){return[{name:"ionSplitPaneVisible",method:"ionSplitPaneVisible",bubbles:!0,cancelable:!0,composed:!0}]}static get style(){return".split-pane{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}.split-pane-visible>.split-pane-main,.split-pane-visible>.split-pane-side{left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none!important;box-shadow:none!important;z-index:0}.split-pane-visible>.split-pane-side:not(ion-menu),.split-pane-visible>ion-menu.split-pane-side.menu-enabled{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}.split-pane-side:not(ion-menu){display:none}.split-pane-visible>.split-pane-side{-ms-flex-order:-1;order:-1}.split-pane-visible>.split-pane-side[side=end]{-ms-flex-order:1;order:1}.split-pane-md{--border:1px solid var(--ion-item-border-color,var(--ion-border-color,var(--ion-color-step-150,rgba(0,0,0,0.13))))}.split-pane-md.split-pane-visible>.split-pane-side{min-width:270px;max-width:28%;border-right:var(--border);border-left:0}.split-pane-md.split-pane-visible>.split-pane-side[side=end]{min-width:270px;max-width:28%;border-right:0;border-left:var(--border)}"}static get styleMode(){return"md"}}function a(t,s){let n,a;s?(n=e,a=i):(n=i,a=e);const l=t.classList;l.add(n),l.remove(a)}export{n as IonSplitPane};