@ionic/core
Version:
Base components for Ionic
4 lines • 4.46 kB
JavaScript
import{__awaiter,__generator}from"tslib";
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/import{r as registerInstance,c as createEvent,h,e as Host,f as getElement}from"./index-527b9e34.js";import{b as getIonMode}from"./ionic-global-ca86cf32.js";var splitPaneIosCss=":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%}";var IonSplitPaneIosStyle0=splitPaneIosCss;var splitPaneMdCss=":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%}";var IonSplitPaneMdStyle0=splitPaneMdCss;var SPLIT_PANE_MAIN="split-pane-main";var SPLIT_PANE_SIDE="split-pane-side";var QUERY={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)",never:""};var SplitPane=function(){function e(e){registerInstance(this,e);this.ionSplitPaneVisible=createEvent(this,"ionSplitPaneVisible",7);this.visible=false;this.contentId=undefined;this.disabled=false;this.when=QUERY["lg"]}e.prototype.visibleChanged=function(e){this.ionSplitPaneVisible.emit({visible:e})};e.prototype.isVisible=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,Promise.resolve(this.visible)]}))}))};e.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!(typeof customElements!=="undefined"&&customElements!=null))return[3,2];return[4,customElements.whenDefined("ion-split-pane")];case 1:e.sent();e.label=2;case 2:this.styleMainElement();this.updateState();return[2]}}))}))};e.prototype.disconnectedCallback=function(){if(this.rmL){this.rmL();this.rmL=undefined}};e.prototype.updateState=function(){var e=this;if(this.rmL){this.rmL();this.rmL=undefined}if(this.disabled){this.visible=false;return}var t=this.when;if(typeof t==="boolean"){this.visible=t;return}var i=QUERY[t]||t;if(i.length===0){this.visible=false;return}var n=function(t){e.visible=t.matches};var o=window.matchMedia(i);o.addListener(n);this.rmL=function(){return o.removeListener(n)};this.visible=o.matches};e.prototype.styleMainElement=function(){var e=this.contentId;var t=this.el.children;var i=this.el.childElementCount;var n=false;for(var o=0;o<i;o++){var s=t[o];var r=e!==undefined&&s.id===e;if(r){if(n){console.warn("split pane cannot have more than one main node");return}else{setPaneClass(s,r);n=true}}}if(!n){console.warn("split pane does not have a specified main node")}};e.prototype.render=function(){var e;var t=getIonMode(this);return h(Host,{key:"76be70d7fbebc52646a5851f47accc1006615b85",class:(e={},e[t]=true,e["split-pane-".concat(t)]=true,e["split-pane-visible"]=this.visible,e)},h("slot",{key:"9a859530f4fb18aff43255bc3940feb9aca625d7"}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{visible:["visibleChanged"],disabled:["updateState"],when:["updateState"]}},enumerable:false,configurable:true});return e}();var setPaneClass=function(e,t){var i;var n;if(t){i=SPLIT_PANE_MAIN;n=SPLIT_PANE_SIDE}else{i=SPLIT_PANE_SIDE;n=SPLIT_PANE_MAIN}var o=e.classList;o.add(i);o.remove(n)};SplitPane.style={ios:IonSplitPaneIosStyle0,md:IonSplitPaneMdStyle0};export{SplitPane as ion_split_pane};