cupertino-pane - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

@@ -5,2 +5,15 @@
 
+## [1.2.2] - 2021-01-20
+
+### Features 
+- Added `fitHeight` property for usage pane without breakpoints. On `fitHeight: true`, pane height will automatically calculated before present. Then height will be applied as top breakpoint height, bottom and middle breakpoint will be disabled. See [Bulletin demo](https://output.jsbin.com/maqigod) on example. [#113](https://github.com/roman-rr/cupertino-pane/issues/113)
+- Added `fitScreenHeight` property. On `fitScreenHeight: true`, pane height will not be more than screen height. 
+
+### Enhancements
+- Button close renamed to button destroy to avoid confuses. Option renamed `buttonClose` -> `buttonDestroy` [#116](https://github.com/roman-rr/cupertino-pane/issues/112)
+- `window.resize` events and orientation changing now automatically reset breakpoints and pane to proper position. May be good using in pair with `fitScreenHeight: true` [#119](https://github.com/roman-rr/cupertino-pane/issues/119)
+
+### Bug Fixes
+- Cordova keyboard hide if pane is hidden [#112](https://github.com/roman-rr/cupertino-pane/issues/112)
+
 ## [1.2.0] - 2020-12-15
@@ -7,0 +20,0 @@

dist/cupertino-pane.d.ts

@@ -5,26 +5,19 @@ import { PaneSettings, PaneBreaks } from './models';
     private selector;
-    private defaultBreaksConf;
-    topper: number;
-    bottomer: number;
     disableDragEvents: boolean;
-    currentBreakpoint: number;
-    prevBreakpoint: string;
-    breaks: {};
     screen_height: number;
-    private screenHeightOffset;
-    private rendered;
+    screenHeightOffset: number;
     preventDismissEvent: boolean;
     preventedDismiss: boolean;
     private iconCloseColor;
-    private brs;
+    private rendered;
     wrapperEl: HTMLDivElement;
     paneEl: HTMLDivElement;
     overflowEl: HTMLElement;
-    private el;
+    el: HTMLElement;
+    contentEl: HTMLElement;
     private parentEl;
     private draggableEl;
     private moveEl;
-    private contentEl;
     private backdropEl;
-    private closeEl;
+    private destroyButtonEl;
     private followerEl;
@@ -35,2 +28,3 @@ private pushElement;
     private events;
+    private breakpoints;
     constructor(selector: (string | HTMLElement), conf?: CupertinoSettings);
@@ -40,12 +34,11 @@ private drawBaseElements;
         animate: boolean;
-    }): void;
+    }): Promise<void>;
+    getPaneHeight(): number;
     /**
      * Private Utils methods
      */
-    private getPaneHeight;
     private attachAllEvents;
     private detachAllEvents;
     private resetEvents;
-    getClosestBreakY(): number;
-    private scrollElementInit;
+    scrollElementInit(): void;
     setOverflowHeight(offset?: number): void;
@@ -55,3 +48,3 @@ private getTimingFunction;
     checkOverflowAttr(val: any): void;
-    private isPanePresented;
+    isPanePresented(): boolean;
     swipeNextPoint: (diff: any, maxDiff: any, closest: any) => any;
@@ -92,6 +85,6 @@ private isBackdropPresented;
     /**
-     * Function builder for breakpoints and heights
-     * @param conf breakpoints
+     * Public user method to reset breakpoints
+     * @param conf
      */
-    setBreakpoints(conf?: PaneBreaks): void;
+    setBreakpoints(conf?: PaneBreaks): Promise<void>;
     moveToBreak(val: string): any;
@@ -105,2 +98,3 @@ moveToHeight(val: number): any;
         animate: boolean;
+        destroyButton?: boolean;
     }): any;
@@ -107,0 +101,0 @@ private pushTransition;

dist/cupertino-pane.min.js

 /**
- * Cupertino Pane 1.2.1
+ * Cupertino Pane 1.2.2
  * Multiplatform slide-over pane
  * https://github.com/roman-rr/cupertino-pane/
  *
- * Copyright 2019-2020 Roman Antonov (roman-rr)
+ * Copyright 2019-2021 Roman Antonov (roman-rr)
  *
  * Released under the MIT License
  *
- * Released on: December 15, 2020
+ * Released on: January 19, 2021
  */
 
-if(!exports)var exports={__esModule:!0};Object.defineProperty(exports,"__esModule",{value:!0});class Support{static get touch(){return window.Modernizr&&!0===window.Modernizr.touch||!!(window.navigator.maxTouchPoints>0||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch)}static get observer(){return"MutationObserver"in window||"WebkitMutationObserver"in window}static get backdropFilter(){return CSS.supports("backdrop-filter","blur(0px)")||CSS.supports("-webkit-backdrop-filter","blur(0px)")}static get passiveListener(){let t=!1;try{const e=Object.defineProperty({},"passive",{get(){t=!0}});window.addEventListener("testPassiveListener",null,e)}catch(t){}return t}static get gestures(){return"ongesturestart"in window}static get pointerEvents(){return!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>0}}class Device{constructor(){this.ios=!1,this.android=!1,this.androidChrome=!1,this.desktop=!1,this.iphone=!1,this.ipod=!1,this.ipad=!1,this.edge=!1,this.ie=!1,this.firefox=!1,this.macos=!1,this.windows=!1,this.cordova=!(!window.cordova&&!window.phonegap),this.phonegap=!(!window.cordova&&!window.phonegap),this.electron=!1,this.ionic=!!document.querySelector("ion-app");const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),o=e.match(/(iPad).*OS\s([\d_]+)/),r=e.match(/(iPod)(.*OS\s([\d_]+))?/),a=!this.ipad&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h=e.indexOf("MSIE ")>=0||e.indexOf("Trident/")>=0,l=e.indexOf("Edge/")>=0,c=e.indexOf("Gecko/")>=0&&e.indexOf("Firefox/")>=0,p="Win32"===t,d=e.toLowerCase().indexOf("electron")>=0,u="MacIntel"===t;!o&&u&&Support.touch&&(1024===s&&1366===i||834===s&&1194===i||834===s&&1112===i||768===s&&1024===i)&&(o=e.match(/(Version)\/([\d.]+)/),u=!1),this.ie=h,this.edge=l,this.firefox=c,n&&!p&&(this.os="android",this.osVersion=n[2],this.android=!0,this.androidChrome=e.toLowerCase().indexOf("chrome")>=0),(o||a||r)&&(this.os="ios",this.ios=!0),a&&!r&&(this.osVersion=a[2].replace(/_/g,"."),this.iphone=!0),o&&(this.osVersion=o[2].replace(/_/g,"."),this.ipad=!0),r&&(this.osVersion=r[3]?r[3].replace(/_/g,"."):null,this.ipod=!0),this.ios&&this.osVersion&&e.indexOf("Version/")>=0&&"10"===this.osVersion.split(".")[0]&&(this.osVersion=e.toLowerCase().split("version/")[1].split(" ")[0]),this.webView=!(!(a||o||r)||!e.match(/.*AppleWebKit(?!.*Safari)/i)&&!window.navigator.standalone)||window.matchMedia&&window.matchMedia("(display-mode: standalone)").matches,this.webview=this.webView,this.standalone=this.webView,this.desktop=!(this.ios||this.android)||d,this.desktop&&(this.electron=d,this.macos=u,this.windows=p,this.macos&&(this.os="macos"),this.windows&&(this.os="windows")),this.pixelRatio=window.devicePixelRatio||1}}class Events{constructor(t,e,s){this.instance=t,this.settings=e,this.device=s,this.allowClick=!0,this.disableDragAngle=!1,this.pointerDown=!1,this.contentScrollTop=0,this.steps=[],this.inputBlured=!1,this.touchStartCb=t=>this.touchStart(t),this.touchMoveBackdropCb=t=>this.touchMoveBackdrop(t),this.touchMoveCb=t=>this.touchMove(t),this.touchEndCb=t=>this.touchEnd(t),this.onClickCb=t=>this.onClick(t),this.onKeyboardShowCb=t=>this.onKeyboardShow(t),this.onKeyboardHideCb=t=>this.onKeyboardHide(t)}touchStart(t){if(this.settings.onDragStart(t),this.instance.disableDragEvents)return;this.allowClick=!0,this.disableDragAngle=!1,this.instance.preventedDismiss=!1;const e="touchstart"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchstart"===t.type?e.clientY:t.clientY,i="touchstart"===t.type?e.clientX:t.clientX;"mousedown"===t.type&&(this.pointerDown=!0),this.startY=s,this.startX=i,this.isDragScrollabe(t.path||t.composedPath())&&(this.startY+=this.contentScrollTop),this.steps.push(this.startY)}touchMoveBackdrop(t){this.settings.touchMoveStopPropagation&&t.stopPropagation()}touchMove(t){if(this.settings.onDrag(t),this.instance.disableDragEvents)return;if(this.disableDragAngle)return;if(this.instance.preventedDismiss)return;this.settings.touchMoveStopPropagation&&t.stopPropagation();const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchmove"===t.type?e.clientY:t.clientY,i="touchmove"===t.type?e.clientX:t.clientX;if("mousemove"===t.type&&!this.pointerDown)return;let n=s,o=i;const r=n-this.steps[this.steps.length-1];let a=this.instance.getPanelTransformY()+r;if(!this.isFormElement(t.target)||!this.isElementScrollable(t.target)){if(this.steps.length>2&&this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&(document.activeElement.blur(),this.inputBlured=!0),this.settings.touchAngle){let t;const e=o-this.startX,s=n-this.startY;if(t=180*Math.atan2(Math.abs(s),Math.abs(e))/Math.PI,e*e+s*s>=25&&90-t>this.settings.touchAngle&&1===this.steps.length)return void(this.disableDragAngle=!0)}if(this.isDragScrollabe(t.path||t.composedPath())&&"auto"===this.instance.overflowEl.style.overflowY){if(this.instance.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),this.settings.inverse&&this.willScrolled(t))return void(this.contentScrollTop=0);if(a>this.instance.topper&&this.contentScrollTop>0||a<=this.instance.topper)return}if(!this.settings.inverse&&!this.settings.upperThanTop&&a<=this.instance.topper)this.instance.paneEl.style.transform=`translateY(${this.instance.topper}px) translateZ(0px)`;else{if(a<=this.instance.topper&&this.settings.upperThanTop){const t=(-this.instance.topper+this.instance.topper-this.instance.getPanelTransformY())/this.instance.topper/-8;a=this.instance.getPanelTransformY()+r*t}if((!this.settings.lowerThanBottom||this.settings.inverse)&&a>=this.instance.bottomer)return this.instance.paneEl.style.transform=`translateY(${this.instance.bottomer}px) translateZ(0px)`,void this.instance.checkOpacityAttr(a);if(!this.instance.preventedDismiss&&this.instance.preventDismissEvent&&this.settings.bottomClose){let e=(-this.instance.topper+this.instance.topper-this.instance.getPanelTransformY())/this.instance.topper/-8;if(a=this.instance.getPanelTransformY()+r*(.5-e),-1*(t.touches[0].screenY-220-this.instance.screen_height)<=this.instance.screen_height-this.instance.bottomer)return this.instance.preventedDismiss=!0,this.settings.onWillDismiss({prevented:!0}),void this.instance.moveToBreak(this.instance.prevBreakpoint)}this.allowClick=!1,this.instance.checkOpacityAttr(a),this.instance.checkOverflowAttr(a),this.instance.doTransition({type:"move",translateY:a}),this.steps.push(n)}}}touchEnd(t){if(this.instance.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]);"touchmove"===t.type?e.clientY:t.clientY;"mouseup"===t.type&&(this.pointerDown=!1);let s=this.instance.getClosestBreakY();const i=this.steps[this.steps.length-1]-this.steps[this.steps.length-2],n=window.hasOwnProperty("cordova")?this.settings.fastSwipeSensivity+1:this.settings.fastSwipeSensivity;if(Math.abs(i)>=n&&(s=this.instance.swipeNextPoint(i,n,s),this.settings.fastSwipeClose&&this.instance.currentBreakpoint<s))return void this.instance.destroy({animate:!0});let o=!1;this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&2===this.steps.length&&(o=!0),this.steps=[],this.instance.currentBreakpoint=s,this.settings.onDragEnd(t),isNaN(i)||o||(this.instance.checkOpacityAttr(this.instance.currentBreakpoint),this.instance.checkOverflowAttr(this.instance.currentBreakpoint),this.settings.bottomClose&&s===this.instance.breaks.bottom?this.instance.destroy({animate:!0}):(this.instance.getPanelTransformY()===s&&this.settings.onTransitionEnd({target:this.instance.paneEl}),this.instance.doTransition({type:"end",translateY:s})))}onClick(t){if(this.allowClick){if(this.settings.clickBottomOpen&&this.instance.breaks.bottom===this.instance.getPanelTransformY()){let t;this.settings.breaks.top.enabled&&(t="top"),this.settings.breaks.middle.enabled&&(t="middle"),this.instance.moveToBreak(t)}}else this.settings.preventClicks&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}onKeyboardShow(t){this.device.android&&setTimeout(()=>this.fixAndroidResize(),20),this.instance.prevBreakpoint=Object.entries(this.instance.breaks).find(t=>t[1]===this.instance.getPanelTransformY())[0];let e=this.settings.breaks[this.instance.currentBreak()].height+t.keyboardHeight;if(this.instance.screen_height<e){this.instance.screen_height;e=this.instance.screen_height-47.25,this.instance.setOverflowHeight(t.keyboardHeight),this.instance.moveToBreak(this.settings.breaks.top.enabled?"top":"middle")}else this.instance.setOverflowHeight(t.keyboardHeight),this.instance.moveToHeight(e),setTimeout(()=>this.instance.overflowEl.scrollTop=document.activeElement.offsetTop)}onKeyboardHide(t){this.device.android&&this.fixAndroidResize(),this.inputBlured?this.inputBlured=!1:this.instance.moveToBreak(this.instance.prevBreakpoint),setTimeout(()=>this.instance.setOverflowHeight())}fixAndroidResize(){if(!this.instance.paneEl)return;document.querySelector("ion-app");window.requestAnimationFrame(()=>{this.instance.wrapperEl.style.width="100%",this.instance.paneEl.style.position="absolute",window.requestAnimationFrame(()=>{this.instance.wrapperEl.style.width="unset",this.instance.paneEl.style.position="fixed"})})}isDragScrollabe(t){return!!t.find(t=>t===this.instance.overflowEl)}willScrolled(t){return!(!this.isElementScrollable(this.instance.overflowEl)||"hidden"===this.instance.overflowEl.style.overflow||!this.isDragScrollabe(t.path||t.composedPath()))}isFormElement(t){return!!(t&&t.tagName&&["input","select","option","textarea","button","label"].includes(t.tagName.toLowerCase()))}isElementScrollable(t){return t.scrollHeight>t.clientHeight}}class Settings{constructor(){this.instance={initialBreak:"middle",inverse:!1,parentElement:null,followerElement:null,pushElement:null,pushMinHeight:null,pushYOffset:0,backdrop:!1,backdropOpacity:.4,animationType:"ease",animationDuration:300,dragBy:null,bottomOffset:0,darkMode:!1,bottomClose:!1,fastSwipeClose:!1,fastSwipeSensivity:3,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,lowerThanBottom:!0,upperThanTop:!1,showDraggable:!0,draggableOver:!1,clickBottomOpen:!0,preventClicks:!0,handleKeyboard:!0,simulateTouch:!0,passiveListeners:!0,touchMoveStopPropagation:!1,touchAngle:null,breaks:{},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onDragEnd:()=>{},onBackdropTap:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{}}}}class CupertinoPane{constructor(t,e={}){this.selector=t,this.defaultBreaksConf={top:{enabled:!0,height:window.innerHeight-47.25},middle:{enabled:!0,height:300},bottom:{enabled:!0,height:100}},this.disableDragEvents=!1,this.breaks={},this.screen_height=window.innerHeight,this.screenHeightOffset=this.screen_height,this.rendered=!1,this.preventDismissEvent=!1,this.preventedDismiss=!1,this.iconCloseColor="#7a7a7e",this.brs=[],this.settings=(new Settings).instance,this.device=new Device,this.swipeNextPoint=(t,e,s)=>{let i={},n={};if(this.settings.inverse?(i.top=this.breaks.bottom,i.middle=this.breaks.middle,i.bottom=this.breaks.top,n.top=Object.assign({},this.settings.breaks.bottom),n.middle=Object.assign({},this.settings.breaks.middle),n.bottom=Object.assign({},this.settings.breaks.top)):(i=Object.assign({},this.breaks),n=Object.assign({},this.settings.breaks)),this.currentBreakpoint===i.top){if(t>e){if(n.middle.enabled)return i.middle;if(n.bottom.enabled)return i.middle<s?s:i.bottom}return i.top}if(this.currentBreakpoint===i.middle)return t<-e&&n.top.enabled?i.top:t>e&&n.bottom.enabled?i.bottom:i.middle;if(this.currentBreakpoint===i.bottom){if(t<-e){if(n.middle.enabled)return i.middle>s?s:i.middle;if(n.top.enabled)return i.top}return i.bottom}return s},this.touchEvents=(()=>{const t=["touchstart","touchmove","touchend","touchcancel"];let e=["mousedown","mousemove","mouseup"];Support.pointerEvents&&(e=["pointerdown","pointermove","pointerup"]);const s={start:t[0],move:t[1],end:t[2],cancel:t[3]},i={start:e[0],move:e[1],end:e[2]};return Support.touch||!this.settings.simulateTouch?s:i})(),t instanceof HTMLElement?this.selector=t:this.selector=document.querySelector(t),this.selector?this.isPanePresented()?console.warn("Cupertino Pane: specified selector or DOM element already in use",this.selector):(this.el=this.selector,this.el.style.display="none",this.settings=Object.assign(Object.assign({},this.settings),e),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement,this.events=new Events(this,this.settings,this.device)):console.warn("Cupertino Pane: wrong selector or DOM element specified",this.selector)}drawBaseElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.className="cupertino-pane-wrapper "+this.el.className,this.wrapperEl.style.position="absolute",this.wrapperEl.style.top="0",this.wrapperEl.style.left="0",this.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.width="100%",this.paneEl.style.maxWidth="500px",this.paneEl.style.left="0px",this.paneEl.style.right="0px",this.paneEl.style.marginLeft="auto",this.paneEl.style.marginRight="auto",this.paneEl.style.height=this.getPaneHeight()+"px",this.paneEl.style.background="#ffffff",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.willChange="transform",this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`,this.settings.inverse?(this.paneEl.style.borderBottomLeftRadius="20px",this.paneEl.style.borderBottomRightRadius="20px",this.paneEl.style.paddingBottom="15px",this.paneEl.style.top=`-${this.bottomer}px`):(this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.paddingTop="15px"),this.draggableEl=document.createElement("div"),this.draggableEl.className="draggable",this.draggableEl.style.padding="5px",this.draggableEl.style.position="absolute",this.draggableEl.style.left="0",this.draggableEl.style.right="0",this.draggableEl.style.marginLeft="auto",this.draggableEl.style.marginRight="auto",this.draggableEl.style.height="30px",this.draggableEl.style.zIndex="12",this.settings.inverse?this.draggableEl.style.bottom="0":this.draggableEl.style.top="0",this.moveEl=document.createElement("div"),this.moveEl.className="move",this.moveEl.style.margin="0 auto",this.moveEl.style.height="5px",this.moveEl.style.background="#c0c0c0",this.moveEl.style.width="36px",this.moveEl.style.borderRadius="4px",this.settings.inverse&&(this.moveEl.style.marginTop="15px"),this.contentEl=this.el,this.contentEl.style.display="block",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.closeEl=document.createElement("div"),this.settings.inverse||(this.closeEl.className="close-button",this.closeEl.style.width="26px",this.closeEl.style.height="26px",this.closeEl.style.position="absolute",this.closeEl.style.background="#ebebeb",this.closeEl.style.right="20px",this.closeEl.style.zIndex="14",this.closeEl.style.borderRadius="100%",this.closeEl.style.top="16px"),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.draggableEl),this.paneEl.appendChild(this.contentEl),this.draggableEl.appendChild(this.moveEl)}present(t={animate:!1}){if(this.el)if(this.isPanePresented()&&this.rendered)this.moveToBreak(this.settings.initialBreak);else if(!this.isPanePresented()||this.rendered){if(this.settings.onWillPresent(),this.settings.inverse&&(this.screenHeightOffset=0),this.setBreakpoints(),this.drawBaseElements(),this.scrollElementInit(),this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.rendered=!0,this.settings.followerElement){if(!document.querySelector(this.settings.followerElement))return void console.warn("Cupertino Pane: wrong follower element selector specified",this.settings.followerElement);this.followerEl=document.querySelector(this.settings.followerElement),this.followerEl.style.willChange="transform, border-radius",this.followerEl.style.transform="translateY(0px) translateZ(0px)",this.followerEl.style.transition=`all ${this.settings.animationDuration}ms ${this.getTimingFunction(this.settings.breaks[this.currentBreak()].bounce)} 0s`}this.settings.pushElement&&(this.pushElement=document.querySelector(this.settings.pushElement)),this.settings.showDraggable||(this.draggableEl.style.opacity="0"),this.settings.draggableOver&&(this.paneEl.style.background="transparent",this.paneEl.style.boxShadow="none",this.paneEl.style.paddingTop="30px",this.contentEl.style.background="#ffffff",this.contentEl.style.display="block",this.contentEl.style.borderTopLeftRadius="20px",this.contentEl.style.borderTopRightRadius="20px",this.contentEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.closeEl.style.top="45px",this.draggableEl.style.padding="15px",this.moveEl.style.width="45px",this.moveEl.style.background="rgba(225, 225, 225, 0.6)",Support.backdropFilter&&(this.moveEl.style.backdropFilter="saturate(180%) blur(20px)",this.moveEl.style.webkitBackdropFilter="saturate(180%) blur(20px)")),this.settings.darkMode&&this.setDarkMode({enable:!0}),this.settings.buttonClose&&!this.settings.inverse&&(this.paneEl.appendChild(this.closeEl),this.closeEl.addEventListener("click",t=>this.destroy({animate:!0})),this.closeEl.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path fill="${this.iconCloseColor}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>\n        </svg>`),this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),this.settings.freeMode&&(this.settings.lowerThanBottom=!1),this.settings.backdrop&&this.renderBackdrop(),this.device.android&&(document.body.style.overscrollBehaviorY="none"),this.attachAllEvents(),t.animate?this.doTransition({type:"present",translateY:this.breaks[this.settings.initialBreak]}):(this.settings.pushElement&&this.pushTransition(this.breaks[this.settings.initialBreak],"unset"),this.settings.onDidPresent())}else console.warn("Cupertino Pane: specified selector or DOM element already in use",this.selector)}getPaneHeight(){return this.settings.inverse?this.bottomer+this.settings.bottomOffset:this.screen_height-this.topper-this.settings.bottomOffset}attachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach(t=>{const e=document.querySelector(t);e&&this.attachEvents(e)}):this.attachEvents(this.paneEl),this.settings.handleKeyboard&&this.device.cordova&&(window.addEventListener("keyboardWillShow",this.events.onKeyboardShowCb),window.addEventListener("keyboardWillHide",this.events.onKeyboardHideCb)),!this.settings.handleKeyboard&&this.device.cordova&&this.device.android&&window.addEventListener("keyboardWillHide",()=>{this.parentEl.scrollTop=0,this.parentEl.parentElement.scrollTop=0,this.parentEl.parentElement.parentElement.scrollTop=0})}detachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach(t=>{const e=document.querySelector(t);e&&this.detachEvents(e)}):this.detachEvents(this.paneEl),this.settings.handleKeyboard&&this.device.cordova&&(window.removeEventListener("keyboardWillShow",this.events.onKeyboardShowCb),window.removeEventListener("keyboardWillHide",this.events.onKeyboardHideCb))}resetEvents(){this.detachAllEvents(),this.attachAllEvents()}getClosestBreakY(){return this.brs.reduce((t,e)=>Math.abs(e-this.getPanelTransformY())<Math.abs(t-this.getPanelTransformY())?e:t)}scrollElementInit(){let t=this.el.querySelectorAll("[overflow-y]");!t.length||t.length>1?this.overflowEl=this.contentEl:(this.overflowEl=t[0],this.overflowEl.style.overflowX="hidden"),this.settings.topperOverflow&&(this.settings.upperThanTop&&console.warn('Cupertino Pane: "upperThanTop" allowed for disabled "topperOverflow"'),this.rendered?this.setOverflowHeight():setTimeout(()=>this.setOverflowHeight(),150))}setOverflowHeight(t=0){0===this.overflowEl.offsetHeight&&0===this.overflowEl.offsetWidth||(this.settings.inverse?this.overflowEl.style.height=this.getPaneHeight()-30-this.settings.topperOverflowOffset-this.overflowEl.offsetTop+"px":this.overflowEl.style.height=this.getPaneHeight()-this.settings.topperOverflowOffset-this.overflowEl.offsetTop-t+"px")}getTimingFunction(t){return t?"cubic-bezier(0.175, 0.885, 0.370, 1.120)":this.settings.animationType}checkOpacityAttr(t){let e=this.el.querySelectorAll("[hide-on-bottom]");e.length&&(this.settings.inverse||e.forEach(e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breaks.bottom?"0":"1"}))}checkOverflowAttr(t){this.settings.topperOverflow&&(this.settings.inverse?this.overflowEl.style.overflowY=t>=this.bottomer?"auto":"hidden":this.overflowEl.style.overflowY=t<=this.topper?"auto":"hidden")}isPanePresented(){let t=Array.from(document.querySelectorAll(".cupertino-pane-wrapper"));return!!t.length&&!!t.find(t=>t.contains(this.selector))}isBackdropPresented(){return!!document.querySelector(".cupertino-pane-wrapper .backdrop")}renderBackdrop(){this.backdropEl=document.createElement("div"),this.backdropEl.className="backdrop",this.backdropEl.style.overflow="hidden",this.backdropEl.style.position="fixed",this.backdropEl.style.width="100%",this.backdropEl.style.bottom="0",this.backdropEl.style.right="0",this.backdropEl.style.left="0",this.backdropEl.style.top="0",this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`,this.backdropEl.style.display="none",this.backdropEl.style.zIndex="10",this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.style.display="block",this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap()),this.resetEvents()}backdrop(t={show:!0}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call backdrop()"),null;this.isBackdropPresented()||this.renderBackdrop();const e=()=>{this.backdropEl.style.transition="initial",this.backdropEl.style.display="none",this.backdropEl.removeEventListener("transitionend",e)};if(this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",t.show)this.backdropEl.style.display="block",setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50);else{if("none"===this.backdropEl.style.display)return;this.backdropEl.addEventListener("transitionend",e)}}attachEvents(t){var e,s,i;if(!Support.touch&&Support.pointerEvents)t.addEventListener(this.touchEvents.start,this.events.touchStartCb,!1),t.addEventListener(this.touchEvents.move,this.events.touchMoveCb,!1),t.addEventListener(this.touchEvents.end,this.events.touchEndCb,!1),null===(e=this.backdropEl)||void 0===e||e.addEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!1);else{if(Support.touch){const e=!("touchstart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};t.addEventListener(this.touchEvents.start,this.events.touchStartCb,e),t.addEventListener(this.touchEvents.move,this.events.touchMoveCb,!!Support.passiveListener&&{passive:!1,capture:!1}),t.addEventListener(this.touchEvents.end,this.events.touchEndCb,e),null===(s=this.backdropEl)||void 0===s||s.addEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!!Support.passiveListener&&{passive:!1,capture:!1}),this.touchEvents.cancel&&t.addEventListener(this.touchEvents.cancel,this.events.touchEndCb,e)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(t.addEventListener("mousedown",this.events.touchStartCb,!1),t.addEventListener("mousemove",this.events.touchMoveCb,!1),t.addEventListener("mouseup",this.events.touchEndCb,!1),null===(i=this.backdropEl)||void 0===i||i.addEventListener("mousemove",this.events.touchMoveBackdropCb,!1))}this.settings.preventClicks&&t.addEventListener("click",this.events.onClickCb,!0)}detachEvents(t){var e,s,i;if(!Support.touch&&Support.pointerEvents)t.removeEventListener(this.touchEvents.start,this.events.touchStartCb,!1),t.removeEventListener(this.touchEvents.move,this.events.touchMoveCb,!1),t.removeEventListener(this.touchEvents.end,this.events.touchEndCb,!1),null===(e=this.backdropEl)||void 0===e||e.removeEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!1);else{if(Support.touch){const e=!("onTouchStart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};t.removeEventListener(this.touchEvents.start,this.events.touchStartCb,e),t.removeEventListener(this.touchEvents.move,this.events.touchMoveCb,!1),t.removeEventListener(this.touchEvents.end,this.events.touchEndCb,e),null===(s=this.backdropEl)||void 0===s||s.removeEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!1),this.touchEvents.cancel&&t.removeEventListener(this.touchEvents.cancel,this.events.touchEndCb,e)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(t.removeEventListener("mousedown",this.events.touchStartCb,!1),t.removeEventListener("mousemove",this.events.touchMoveCb,!1),t.removeEventListener("mouseup",this.events.touchEndCb,!1),null===(i=this.backdropEl)||void 0===i||i.removeEventListener("mousemove",this.events.touchMoveBackdropCb,!1))}this.settings.preventClicks&&t.removeEventListener("click",this.events.onClickCb,!0)}getPanelTransformY(){return parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])}preventDismiss(t=!1){this.preventDismissEvent=t}disableDrag(){this.disableDragEvents=!0}enableDrag(){this.disableDragEvents=!1}setDarkMode(t={enable:!0}){t.enable?(this.paneEl.style.background="#1c1c1d",this.paneEl.style.color="#ffffff",this.moveEl.style.background="#5a5a5e",this.settings.buttonClose&&(this.closeEl.style.background="#424246",this.iconCloseColor="#a8a7ae")):(this.paneEl.style.background="#ffffff",this.paneEl.style.color="unset",this.moveEl.style.background="#c0c0c0",this.settings.buttonClose&&(this.closeEl.style.background="#ebebeb",this.iconCloseColor="#7a7a7e"))}setBreakpoints(t){if(!this.isPanePresented()||t){if(this.breaks={top:this.screenHeightOffset,middle:this.screenHeightOffset,bottom:this.screenHeightOffset},["top","middle","bottom"].forEach(e=>{this.breaks[e]-=this.settings.bottomOffset,this.settings.breaks[e]||(this.settings.breaks[e]=this.defaultBreaksConf[e]),t&&t[e]&&(this.settings.breaks[e]=t[e]),this.settings.breaks[e]&&this.settings.breaks[e].enabled&&this.settings.breaks[e].height&&(this.settings.inverse?this.breaks[e]=this.settings.breaks[e].height:this.breaks[e]-=this.settings.breaks[e].height)}),this.isPanePresented()||this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.height>=this.settings.breaks.top.height&&console.warn("Cupertino Pane: Please set middle height lower than top height"),this.settings.breaks.middle.height<=this.settings.breaks.bottom.height&&console.warn("Cupertino Pane: Please set bottom height lower than middle height"),this.brs=[],["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,e)=>Math.abs(e)<Math.abs(t)?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t),this.isPanePresented()||(this.currentBreakpoint=this.breaks[this.settings.initialBreak]),this.isPanePresented()){if(this.settings.breaks[this.prevBreakpoint].enabled&&this.moveToBreak(this.prevBreakpoint),!this.settings.breaks[this.prevBreakpoint].enabled){let t=this.swipeNextPoint(1,1,this.getClosestBreakY());const e=Object.entries(this.breaks).find(e=>e[1]===t);this.moveToBreak(e[0])}this.paneEl.style.top=this.settings.inverse?`-${this.bottomer}px`:"unset",this.paneEl.style.height=this.getPaneHeight()+"px",this.scrollElementInit(),this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint)}}else console.warn("Cupertino Pane: Provide any breaks configuration")}moveToBreak(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;this.settings.breaks[t].enabled?(this.checkOpacityAttr(this.breaks[t]),this.checkOverflowAttr(this.breaks[t]),this.doTransition({type:"breakpoint",translateY:this.breaks[t]}),this.currentBreakpoint=this.breaks[t]):console.warn("Cupertino Pane: %s breakpoint disabled",t)}moveToHeight(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;let e=this.screenHeightOffset?this.screen_height-t:t;this.checkOpacityAttr(e),this.doTransition({type:"breakpoint",translateY:e})}hide(){return this.isPanePresented()?this.isHidden()?(console.warn("Cupertino Pane: Pane already hidden"),null):void this.doTransition({type:"hide",translateY:this.screenHeightOffset}):(console.warn("Cupertino Pane: Present pane before call hide()"),null)}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screenHeightOffset}px) translateZ(0px)`:(console.warn("Cupertino Pane: Present pane before call isHidden()"),null)}currentBreak(){return this.isPanePresented()?this.breaks.top===this.currentBreakpoint?"top":this.breaks.middle===this.currentBreakpoint?"middle":this.breaks.bottom===this.currentBreakpoint?"bottom":null:(console.warn("Cupertino Pane: Present pane before call currentBreak()"),null)}destroyResets(){this.parentEl.appendChild(this.contentEl),this.wrapperEl.remove(),this.detachAllEvents(),delete this.rendered,delete this.prevBreakpoint,this.contentEl.style.display="none"}destroy(t={animate:!1}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.preventDismissEvent?this.preventedDismiss||(this.settings.onWillDismiss({prevented:!0}),this.moveToBreak(this.prevBreakpoint)):(this.settings.onWillDismiss(),t.animate?this.doTransition({type:"destroy",translateY:this.screenHeightOffset}):(this.destroyResets(),this.settings.onDidDismiss()))}pushTransition(t,e){t=this.screenHeightOffset-t;const s=this.settings.pushMinHeight?this.settings.pushMinHeight:this.screenHeightOffset-this.bottomer,i=this.screenHeightOffset-this.topper;this.pushElement.style.transition=e;const n=(t,e,s,i)=>{this.pushElement.style.transform=`translateY(${e}px) scale(${t})`,this.pushElement.style.borderRadius=s+"px",this.pushElement.style.filter=`contrast(${i})`};if(t<=s)return void n(1,0,0,1);const o=(e,n)=>{let o=-1*(i*n-s*e);return o-=(e-n)*t,o/=s-i,o>n&&(o=n),o<e&&(o=e),o};n(o(.93,1),o(-6-this.settings.pushYOffset,0),-1*o(-10,0),o(.85,1))}doTransition(t={}){if("move"===t.type)return this.paneEl.style.transition="all 0ms linear 0ms",this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transition="all 0ms linear 0ms",this.followerEl.style.transform=`translateY(${t.translateY-this.breaks[this.settings.initialBreak]}px) translateZ(0px)`),void(this.settings.pushElement&&this.pushTransition(this.getPanelTransformY(),"all 0ms linear 0ms"));const e=()=>{"destroy"===t.type&&this.destroyResets(),this.paneEl.style.transition="initial",this.followerEl&&(this.followerEl.style.transition="initial"),this.settings.backdrop&&("destroy"!==t.type&&"hide"!==t.type||(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none")),"present"===t.type&&this.settings.onDidPresent(),"destroy"===t.type&&this.settings.onDidDismiss(),this.settings.onTransitionEnd({target:document.body.contains(this.paneEl)?this.paneEl:null}),this.paneEl.removeEventListener("transitionend",e)};if("breakpoint"===t.type||"end"===t.type||"present"===t.type||"hide"===t.type||"destroy"===t.type){if(this.settings.backdrop&&(this.isHidden()||"hide"===t.type||"destroy"===t.type||"present"===t.type)&&(this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,"hide"!==t.type&&"destroy"!==t.type&&(this.backdropEl.style.display="block",setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50))),"end"===t.type&&this.settings.freeMode)return;const s=Object.entries(this.settings.breaks).find(e=>e[1].height===this.screenHeightOffset-t.translateY),i=this.getTimingFunction(!(!s||!s[1].bounce));this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${i} 0s`,this.followerEl&&(this.followerEl.style.transition=`transform ${this.settings.animationDuration}ms ${i} 0s`),this.settings.pushElement&&setTimeout(()=>{this.pushTransition(t.translateY,`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`)},this.settings.pushYOffset?50:0),"present"===t.type?(this.paneEl.style.transform=`translateY(${this.screenHeightOffset}px) translateZ(0px)`,setTimeout(()=>{this.settings.onTransitionStart({translateY:{new:t.translateY}}),this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transform="translateY(0px) translateZ(0px)")},50)):(this.settings.onTransitionStart({translateY:{new:t.translateY}}),this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transform=`translateY(${t.translateY-this.breaks[this.settings.initialBreak]}px) translateZ(0px)`));let n=Object.entries(this.breaks).find(e=>e[1]===t.translateY);return n&&(this.prevBreakpoint=n[0]),void this.paneEl.addEventListener("transitionend",e)}}}exports.CupertinoPane=CupertinoPane;
+if(!exports)var exports={__esModule:!0};
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __awaiter(t,e,s,i){return new(s||(s=Promise))((function(n,o){function r(t){try{h(i.next(t))}catch(t){o(t)}}function a(t){try{h(i.throw(t))}catch(t){o(t)}}function h(t){var e;t.done?n(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(r,a)}h((i=i.apply(t,e||[])).next())}))}Object.defineProperty(exports,"__esModule",{value:!0});class Support{static get touch(){return window.Modernizr&&!0===window.Modernizr.touch||!!(window.navigator.maxTouchPoints>0||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch)}static get observer(){return"MutationObserver"in window||"WebkitMutationObserver"in window}static get backdropFilter(){return CSS.supports("backdrop-filter","blur(0px)")||CSS.supports("-webkit-backdrop-filter","blur(0px)")}static get passiveListener(){let t=!1;try{const e=Object.defineProperty({},"passive",{get(){t=!0}});window.addEventListener("testPassiveListener",null,e)}catch(t){}return t}static get gestures(){return"ongesturestart"in window}static get pointerEvents(){return!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>0}}class Device{constructor(){this.ios=!1,this.android=!1,this.androidChrome=!1,this.desktop=!1,this.iphone=!1,this.ipod=!1,this.ipad=!1,this.edge=!1,this.ie=!1,this.firefox=!1,this.macos=!1,this.windows=!1,this.cordova=!(!window.cordova&&!window.phonegap),this.phonegap=!(!window.cordova&&!window.phonegap),this.electron=!1,this.ionic=!!document.querySelector("ion-app");const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),o=e.match(/(iPad).*OS\s([\d_]+)/),r=e.match(/(iPod)(.*OS\s([\d_]+))?/),a=!this.ipad&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h=e.indexOf("MSIE ")>=0||e.indexOf("Trident/")>=0,l=e.indexOf("Edge/")>=0,p=e.indexOf("Gecko/")>=0&&e.indexOf("Firefox/")>=0,d="Win32"===t,c=e.toLowerCase().indexOf("electron")>=0,u="MacIntel"===t;!o&&u&&Support.touch&&(1024===s&&1366===i||834===s&&1194===i||834===s&&1112===i||768===s&&1024===i)&&(o=e.match(/(Version)\/([\d.]+)/),u=!1),this.ie=h,this.edge=l,this.firefox=p,n&&!d&&(this.os="android",this.osVersion=n[2],this.android=!0,this.androidChrome=e.toLowerCase().indexOf("chrome")>=0),(o||a||r)&&(this.os="ios",this.ios=!0),a&&!r&&(this.osVersion=a[2].replace(/_/g,"."),this.iphone=!0),o&&(this.osVersion=o[2].replace(/_/g,"."),this.ipad=!0),r&&(this.osVersion=r[3]?r[3].replace(/_/g,"."):null,this.ipod=!0),this.ios&&this.osVersion&&e.indexOf("Version/")>=0&&"10"===this.osVersion.split(".")[0]&&(this.osVersion=e.toLowerCase().split("version/")[1].split(" ")[0]),this.webView=!(!(a||o||r)||!e.match(/.*AppleWebKit(?!.*Safari)/i)&&!window.navigator.standalone)||window.matchMedia&&window.matchMedia("(display-mode: standalone)").matches,this.webview=this.webView,this.standalone=this.webView,this.desktop=!(this.ios||this.android)||c,this.desktop&&(this.electron=c,this.macos=u,this.windows=d,this.macos&&(this.os="macos"),this.windows&&(this.os="windows")),this.pixelRatio=window.devicePixelRatio||1}}class Events{constructor(t,e,s,i){this.instance=t,this.settings=e,this.device=s,this.breakpoints=i,this.allowClick=!0,this.disableDragAngle=!1,this.pointerDown=!1,this.contentScrollTop=0,this.steps=[],this.inputBlured=!1,this.touchStartCb=t=>this.touchStart(t),this.touchMoveBackdropCb=t=>this.touchMoveBackdrop(t),this.touchMoveCb=t=>this.touchMove(t),this.touchEndCb=t=>this.touchEnd(t),this.onClickCb=t=>this.onClick(t),this.onKeyboardShowCb=t=>this.onKeyboardShow(t),this.onKeyboardHideCb=t=>this.onKeyboardHide(t),this.onWindowResizeCb=t=>this.onWindowResize(t)}touchStart(t){if(this.settings.onDragStart(t),this.instance.disableDragEvents)return;this.allowClick=!0,this.disableDragAngle=!1,this.instance.preventedDismiss=!1;const e="touchstart"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchstart"===t.type?e.clientY:t.clientY,i="touchstart"===t.type?e.clientX:t.clientX;"mousedown"===t.type&&(this.pointerDown=!0),this.startY=s,this.startX=i,this.isDragScrollabe(t.path||t.composedPath())&&(this.startY+=this.contentScrollTop),this.steps.push(this.startY)}touchMoveBackdrop(t){this.settings.touchMoveStopPropagation&&t.stopPropagation()}touchMove(t){if(this.settings.onDrag(t),this.instance.disableDragEvents)return;if(this.disableDragAngle)return;if(this.instance.preventedDismiss)return;this.settings.touchMoveStopPropagation&&t.stopPropagation();const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchmove"===t.type?e.clientY:t.clientY,i="touchmove"===t.type?e.clientX:t.clientX;if("mousemove"===t.type&&!this.pointerDown)return;let n=s,o=i;const r=n-this.steps[this.steps.length-1];let a=this.instance.getPanelTransformY()+r;if(!this.isFormElement(t.target)||!this.isElementScrollable(t.target)){if(this.steps.length>2&&this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&(document.activeElement.blur(),this.inputBlured=!0),this.settings.touchAngle){let t;const e=o-this.startX,s=n-this.startY;if(t=180*Math.atan2(Math.abs(s),Math.abs(e))/Math.PI,e*e+s*s>=25&&90-t>this.settings.touchAngle&&1===this.steps.length)return void(this.disableDragAngle=!0)}if(this.isDragScrollabe(t.path||t.composedPath())&&"auto"===this.instance.overflowEl.style.overflowY){if(this.instance.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),this.settings.inverse&&this.willScrolled(t))return void(this.contentScrollTop=0);if(a>this.breakpoints.topper&&this.contentScrollTop>0||a<=this.breakpoints.topper)return}if(!this.settings.inverse&&!this.settings.upperThanTop&&a<=this.breakpoints.topper)this.instance.paneEl.style.transform=`translateY(${this.breakpoints.topper}px) translateZ(0px)`;else{if(a<=this.breakpoints.topper&&this.settings.upperThanTop){const t=(-this.breakpoints.topper+this.breakpoints.topper-this.instance.getPanelTransformY())/this.breakpoints.topper/-8;a=this.instance.getPanelTransformY()+r*t}if((!this.settings.lowerThanBottom||this.settings.inverse)&&a>=this.breakpoints.bottomer)return this.instance.paneEl.style.transform=`translateY(${this.breakpoints.bottomer}px) translateZ(0px)`,void this.instance.checkOpacityAttr(a);if(!this.instance.preventedDismiss&&this.instance.preventDismissEvent&&this.settings.bottomClose){let e=(-this.breakpoints.topper+this.breakpoints.topper-this.instance.getPanelTransformY())/this.breakpoints.topper/-8;if(a=this.instance.getPanelTransformY()+r*(.5-e),-1*(t.touches[0].screenY-220-this.instance.screen_height)<=this.instance.screen_height-this.breakpoints.bottomer)return this.instance.preventedDismiss=!0,this.settings.onWillDismiss({prevented:!0}),void this.instance.moveToBreak(this.breakpoints.prevBreakpoint)}this.allowClick=!1,this.instance.checkOpacityAttr(a),this.instance.checkOverflowAttr(a),this.instance.doTransition({type:"move",translateY:a}),this.steps.push(n)}}}touchEnd(t){if(this.instance.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]);"touchmove"===t.type?e.clientY:t.clientY;"mouseup"===t.type&&(this.pointerDown=!1);let s=this.breakpoints.getClosestBreakY();const i=this.steps[this.steps.length-1]-this.steps[this.steps.length-2],n=window.hasOwnProperty("cordova")?this.settings.fastSwipeSensivity+1:this.settings.fastSwipeSensivity;if(Math.abs(i)>=n&&(s=this.instance.swipeNextPoint(i,n,s),this.settings.fastSwipeClose&&this.breakpoints.currentBreakpoint<s))return void this.instance.destroy({animate:!0});let o=!1;this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&2===this.steps.length&&(o=!0),this.steps=[],this.breakpoints.currentBreakpoint=s,this.settings.onDragEnd(t),isNaN(i)||o||(this.instance.checkOpacityAttr(this.breakpoints.currentBreakpoint),this.instance.checkOverflowAttr(this.breakpoints.currentBreakpoint),this.settings.bottomClose&&s===this.breakpoints.breaks.bottom?this.instance.destroy({animate:!0}):(this.instance.getPanelTransformY()===s&&this.settings.onTransitionEnd({target:this.instance.paneEl}),this.instance.doTransition({type:"end",translateY:s})))}onClick(t){if(this.allowClick){if(this.settings.clickBottomOpen&&this.breakpoints.breaks.bottom===this.instance.getPanelTransformY()){let t;this.settings.breaks.top.enabled&&(t="top"),this.settings.breaks.middle.enabled&&(t="middle"),this.instance.moveToBreak(t)}}else this.settings.preventClicks&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}onKeyboardShow(t){if(this.instance.paneEl&&0===this.instance.paneEl.offsetWidth&&0===this.instance.paneEl.offsetHeight)return;this.device.android&&setTimeout(()=>this.fixAndroidResize(),20),this.breakpoints.prevBreakpoint=Object.entries(this.breakpoints.breaks).find(t=>t[1]===this.instance.getPanelTransformY())[0];let e=this.settings.breaks[this.instance.currentBreak()].height+t.keyboardHeight;if(this.instance.screen_height<e){this.instance.screen_height;e=this.instance.screen_height-47.25,this.instance.setOverflowHeight(t.keyboardHeight),this.instance.moveToBreak(this.settings.breaks.top.enabled?"top":"middle")}else this.instance.setOverflowHeight(t.keyboardHeight),this.instance.moveToHeight(e),setTimeout(()=>this.instance.overflowEl.scrollTop=document.activeElement.offsetTop)}onKeyboardHide(t){this.instance.paneEl&&0===this.instance.paneEl.offsetWidth&&0===this.instance.paneEl.offsetHeight||(this.device.android&&this.fixAndroidResize(),this.inputBlured?this.inputBlured=!1:this.instance.isHidden()||this.instance.moveToBreak(this.breakpoints.prevBreakpoint),setTimeout(()=>this.instance.setOverflowHeight()))}onWindowResize(t){this.instance.screen_height=window.innerHeight,this.instance.screenHeightOffset=this.instance.screen_height,this.breakpoints.buildBreakpoints(JSON.parse(this.breakpoints.lockedBreakpoints),!1)}fixAndroidResize(){if(!this.instance.paneEl)return;document.querySelector("ion-app");window.requestAnimationFrame(()=>{this.instance.wrapperEl.style.width="100%",this.instance.paneEl.style.position="absolute",window.requestAnimationFrame(()=>{this.instance.wrapperEl.style.width="unset",this.instance.paneEl.style.position="fixed"})})}isDragScrollabe(t){return!!t.find(t=>t===this.instance.overflowEl)}willScrolled(t){return!(!this.isElementScrollable(this.instance.overflowEl)||"hidden"===this.instance.overflowEl.style.overflow||!this.isDragScrollabe(t.path||t.composedPath()))}isFormElement(t){return!!(t&&t.tagName&&["input","select","option","textarea","button","label"].includes(t.tagName.toLowerCase()))}isElementScrollable(t){return t.scrollHeight>t.clientHeight}}class Settings{constructor(){this.instance={initialBreak:"middle",inverse:!1,parentElement:null,followerElement:null,fitHeight:!1,fitScreenHeight:!1,pushElement:null,pushMinHeight:null,pushYOffset:0,backdrop:!1,backdropOpacity:.4,animationType:"ease",animationDuration:300,dragBy:null,bottomOffset:0,darkMode:!1,bottomClose:!1,fastSwipeClose:!1,fastSwipeSensivity:3,freeMode:!1,buttonDestroy:!0,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,lowerThanBottom:!0,upperThanTop:!1,showDraggable:!0,draggableOver:!1,clickBottomOpen:!0,preventClicks:!0,handleKeyboard:!0,simulateTouch:!0,passiveListeners:!0,touchMoveStopPropagation:!1,touchAngle:null,breaks:{},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onDragEnd:()=>{},onBackdropTap:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{}}}}class Breakpoints{constructor(t,e){this.instance=t,this.settings=e,this.breaks={},this.brs=[],this.defaultBreaksConf={top:{enabled:!0,height:window.innerHeight-47.25},middle:{enabled:!0,height:300},bottom:{enabled:!0,height:100}}}buildBreakpoints(t,e=!0){var s,i;return __awaiter(this,void 0,void 0,(function*(){if(this.breaks={top:this.instance.screenHeightOffset,middle:this.instance.screenHeightOffset,bottom:this.instance.screenHeightOffset},this.settings.fitHeight){this.settings.fitScreenHeight=!1,this.settings.initialBreak="top",this.settings.topperOverflow=!1,this.instance.el.style.height="unset";let e=yield this.getPaneFitHeight();t={top:{enabled:!0,height:e},middle:{enabled:!1},bottom:{enabled:!1}}}if(["top","middle","bottom"].forEach(e=>{var s,i,n;this.breaks[e]-=this.settings.bottomOffset,this.settings.breaks[e]||(this.settings.breaks[e]=this.defaultBreaksConf[e]),t&&t[e]&&(this.settings.breaks[e]=t[e]),this.settings.fitScreenHeight&&((null===(s=this.settings.breaks[e])||void 0===s?void 0:s.height)>this.instance.screen_height&&(this.settings.breaks[e].height=this.instance.screen_height),(null===(i=this.settings.breaks.top)||void 0===i?void 0:i.height)===(null===(n=this.settings.breaks.middle)||void 0===n?void 0:n.height)&&(this.settings.breaks.middle.enabled=!1,this.settings.initialBreak="top")),this.settings.fitHeight&&"top"===e&&(this.settings.breaks[e].height>this.instance.screen_height?(this.settings.breaks[e].height=this.instance.screen_height-2*this.settings.bottomOffset,this.settings.topperOverflow=!0):this.instance.overflowEl&&(this.settings.topperOverflow=!1,this.instance.overflowEl.style.overflowY="hidden")),this.settings.breaks[e]&&this.settings.breaks[e].enabled&&this.settings.breaks[e].height&&(this.settings.inverse?this.breaks[e]=this.settings.breaks[e].height:this.breaks[e]-=this.settings.breaks[e].height)}),e&&(this.lockedBreakpoints=JSON.stringify(this.settings.breaks)),this.instance.isPanePresented()||this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.height>=this.settings.breaks.top.height&&console.warn("Cupertino Pane: Please set middle height lower than top height"),this.settings.breaks.middle.height<=this.settings.breaks.bottom.height&&console.warn("Cupertino Pane: Please set bottom height lower than middle height"),this.brs=[],["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,e)=>e<t?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t),this.instance.isPanePresented()||(this.currentBreakpoint=this.breaks[this.settings.initialBreak]),this.instance.isPanePresented()){if((null===(s=this.settings.breaks[this.prevBreakpoint])||void 0===s?void 0:s.enabled)&&this.instance.moveToBreak(this.prevBreakpoint),!(null===(i=this.settings.breaks[this.prevBreakpoint])||void 0===i?void 0:i.enabled)){let t=this.instance.swipeNextPoint(1,1,this.getClosestBreakY());const e=Object.entries(this.breaks).find(e=>e[1]===t);this.instance.moveToBreak(e[0])}this.instance.paneEl.style.top=this.settings.inverse?`-${this.bottomer}px`:"unset",this.instance.paneEl.style.height=this.instance.getPaneHeight()+"px",this.instance.scrollElementInit(),this.instance.checkOpacityAttr(this.currentBreakpoint),this.instance.checkOverflowAttr(this.currentBreakpoint)}}))}getCurrentBreakName(){return this.breaks.top===this.currentBreakpoint?"top":this.breaks.middle===this.currentBreakpoint?"middle":this.breaks.bottom===this.currentBreakpoint?"bottom":null}getPaneFitHeight(){return __awaiter(this,void 0,void 0,(function*(){let t,e=this.instance.el.querySelectorAll("img");if(this.instance.el.style.visibility="hidden",this.instance.el.style.pointerEvents="none",this.instance.el.style.display="block",e.length){let t=Array.from(e).map(t=>new Promise(e=>{t.complete&&t.naturalHeight?e(!0):t.onload=()=>e(!0)}));yield Promise.all(t)}else yield new Promise(t=>setTimeout(()=>t(!0),150));return t=parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("height"))+(parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("margin-top"))+parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("margin-bottom"))),this.instance.el.style.visibility="unset",this.instance.el.style.pointerEvents="unset",this.instance.el.style.display="none",this.instance.contentEl&&(this.instance.el.style.display="block"),t}))}getClosestBreakY(){return this.brs.reduce((t,e)=>Math.abs(e-this.instance.getPanelTransformY())<Math.abs(t-this.instance.getPanelTransformY())?e:t)}}class CupertinoPane{constructor(t,e={}){this.selector=t,this.disableDragEvents=!1,this.screen_height=window.innerHeight,this.screenHeightOffset=this.screen_height,this.preventDismissEvent=!1,this.preventedDismiss=!1,this.iconCloseColor="#7a7a7e",this.rendered=!1,this.settings=(new Settings).instance,this.device=new Device,this.swipeNextPoint=(t,e,s)=>{let i={},n={};if(this.settings.inverse?(i.top=this.breakpoints.breaks.bottom,i.middle=this.breakpoints.breaks.middle,i.bottom=this.breakpoints.breaks.top,n.top=Object.assign({},this.settings.breaks.bottom),n.middle=Object.assign({},this.settings.breaks.middle),n.bottom=Object.assign({},this.settings.breaks.top)):(i=Object.assign({},this.breakpoints.breaks),n=Object.assign({},this.settings.breaks)),this.breakpoints.currentBreakpoint===i.top){if(t>e){if(n.middle.enabled)return i.middle;if(n.bottom.enabled)return i.middle<s?s:i.bottom}return i.top}if(this.breakpoints.currentBreakpoint===i.middle)return t<-e&&n.top.enabled?i.top:t>e&&n.bottom.enabled?i.bottom:i.middle;if(this.breakpoints.currentBreakpoint===i.bottom){if(t<-e){if(n.middle.enabled)return i.middle>s?s:i.middle;if(n.top.enabled)return i.top}return i.bottom}return s},this.touchEvents=(()=>{const t=["touchstart","touchmove","touchend","touchcancel"];let e=["mousedown","mousemove","mouseup"];Support.pointerEvents&&(e=["pointerdown","pointermove","pointerup"]);const s={start:t[0],move:t[1],end:t[2],cancel:t[3]},i={start:e[0],move:e[1],end:e[2]};return Support.touch||!this.settings.simulateTouch?s:i})(),t instanceof HTMLElement?this.selector=t:this.selector=document.querySelector(t),this.selector?this.isPanePresented()?console.error("Cupertino Pane: specified selector or DOM element already in use",this.selector):(this.el=this.selector,this.el.style.display="none",this.settings=Object.assign(Object.assign({},this.settings),e),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement,this.breakpoints=new Breakpoints(this,this.settings),this.events=new Events(this,this.settings,this.device,this.breakpoints)):console.warn("Cupertino Pane: wrong selector or DOM element specified",this.selector)}drawBaseElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.className="cupertino-pane-wrapper "+this.el.className,this.wrapperEl.style.position="absolute",this.wrapperEl.style.top="0",this.wrapperEl.style.left="0",this.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.width="100%",this.paneEl.style.maxWidth="500px",this.paneEl.style.left="0px",this.paneEl.style.right="0px",this.paneEl.style.marginLeft="auto",this.paneEl.style.marginRight="auto",this.paneEl.style.height=this.getPaneHeight()+"px",this.paneEl.style.background="#ffffff",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.willChange="transform",this.paneEl.style.transform=`translateY(${this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`,this.settings.inverse?(this.paneEl.style.borderBottomLeftRadius="20px",this.paneEl.style.borderBottomRightRadius="20px",this.paneEl.style.paddingBottom="15px",this.paneEl.style.top=`-${this.breakpoints.bottomer}px`):(this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.paddingTop="15px"),this.draggableEl=document.createElement("div"),this.draggableEl.className="draggable",this.draggableEl.style.padding="5px",this.draggableEl.style.position="absolute",this.draggableEl.style.left="0",this.draggableEl.style.right="0",this.draggableEl.style.marginLeft="auto",this.draggableEl.style.marginRight="auto",this.draggableEl.style.height="30px",this.draggableEl.style.zIndex="12",this.settings.inverse?this.draggableEl.style.bottom="0":this.draggableEl.style.top="0",this.moveEl=document.createElement("div"),this.moveEl.className="move",this.moveEl.style.margin="0 auto",this.moveEl.style.height="5px",this.moveEl.style.background="#c0c0c0",this.moveEl.style.width="36px",this.moveEl.style.borderRadius="4px",this.settings.inverse&&(this.moveEl.style.marginTop="15px"),this.contentEl=this.el,this.contentEl.style.display="block",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.destroyButtonEl=document.createElement("div"),this.settings.inverse||(this.destroyButtonEl.className="destroy-button",this.destroyButtonEl.style.width="26px",this.destroyButtonEl.style.height="26px",this.destroyButtonEl.style.position="absolute",this.destroyButtonEl.style.background="#ebebeb",this.destroyButtonEl.style.right="20px",this.destroyButtonEl.style.zIndex="14",this.destroyButtonEl.style.borderRadius="100%",this.destroyButtonEl.style.top="16px"),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.draggableEl),this.paneEl.appendChild(this.contentEl),this.draggableEl.appendChild(this.moveEl)}present(t={animate:!1}){var e;return __awaiter(this,void 0,void 0,(function*(){if(this.el)if(this.isPanePresented()&&this.rendered)this.moveToBreak(this.settings.initialBreak);else if(!this.isPanePresented()||this.rendered){if(this.settings.onWillPresent(),this.settings.inverse&&(this.screenHeightOffset=0),yield this.setBreakpoints(),this.drawBaseElements(),this.scrollElementInit(),this.checkOpacityAttr(this.breakpoints.currentBreakpoint),this.checkOverflowAttr(this.breakpoints.currentBreakpoint),this.rendered=!0,this.settings.followerElement){if(!document.querySelector(this.settings.followerElement))return void console.warn("Cupertino Pane: wrong follower element selector specified",this.settings.followerElement);this.followerEl=document.querySelector(this.settings.followerElement),this.followerEl.style.willChange="transform, border-radius",this.followerEl.style.transform="translateY(0px) translateZ(0px)",this.followerEl.style.transition=`all ${this.settings.animationDuration}ms ${this.getTimingFunction(null===(e=this.settings.breaks[this.currentBreak()])||void 0===e?void 0:e.bounce)} 0s`}this.settings.pushElement&&(this.pushElement=document.querySelector(this.settings.pushElement)),this.settings.showDraggable||(this.draggableEl.style.opacity="0"),this.settings.draggableOver&&(this.paneEl.style.background="transparent",this.paneEl.style.boxShadow="none",this.paneEl.style.paddingTop="30px",this.contentEl.style.background="#ffffff",this.contentEl.style.display="block",this.contentEl.style.borderTopLeftRadius="20px",this.contentEl.style.borderTopRightRadius="20px",this.contentEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.destroyButtonEl.style.top="45px",this.draggableEl.style.padding="15px",this.moveEl.style.width="45px",this.moveEl.style.background="rgba(225, 225, 225, 0.6)",Support.backdropFilter&&(this.moveEl.style.backdropFilter="saturate(180%) blur(20px)",this.moveEl.style.webkitBackdropFilter="saturate(180%) blur(20px)")),this.settings.darkMode&&this.setDarkMode({enable:!0}),this.settings.buttonClose&&this.settings.buttonDestroy&&!this.settings.inverse&&(this.paneEl.appendChild(this.destroyButtonEl),this.destroyButtonEl.addEventListener("click",t=>this.destroy({animate:!0,destroyButton:!0})),this.destroyButtonEl.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path fill="${this.iconCloseColor}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>\n        </svg>`),this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),this.settings.freeMode&&(this.settings.lowerThanBottom=!1),this.settings.backdrop&&this.renderBackdrop(),this.device.android&&(document.body.style.overscrollBehaviorY="none"),this.attachAllEvents(),t.animate?this.doTransition({type:"present",translateY:this.breakpoints.breaks[this.settings.initialBreak]}):(this.settings.pushElement&&this.pushTransition(this.breakpoints.breaks[this.settings.initialBreak],"unset"),this.settings.onDidPresent())}else console.warn("Cupertino Pane: specified selector or DOM element already in use",this.selector)}))}getPaneHeight(){return this.settings.inverse?this.breakpoints.bottomer+this.settings.bottomOffset:this.screen_height-this.breakpoints.topper-this.settings.bottomOffset}attachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach(t=>{const e=document.querySelector(t);e&&this.attachEvents(e)}):this.attachEvents(this.paneEl),this.settings.handleKeyboard&&this.device.cordova&&(window.addEventListener("keyboardWillShow",this.events.onKeyboardShowCb),window.addEventListener("keyboardWillHide",this.events.onKeyboardHideCb)),!this.settings.handleKeyboard&&this.device.cordova&&this.device.android&&window.addEventListener("keyboardWillHide",()=>{this.parentEl.scrollTop=0,this.parentEl.parentElement&&(this.parentEl.parentElement.scrollTop=0,this.parentEl.parentElement.parentElement&&(this.parentEl.parentElement.parentElement.scrollTop=0))}),window.addEventListener("resize",this.events.onWindowResizeCb)}detachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach(t=>{const e=document.querySelector(t);e&&this.detachEvents(e)}):this.detachEvents(this.paneEl),this.settings.handleKeyboard&&this.device.cordova&&(window.removeEventListener("keyboardWillShow",this.events.onKeyboardShowCb),window.removeEventListener("keyboardWillHide",this.events.onKeyboardHideCb)),window.removeEventListener("resize",this.events.onWindowResizeCb)}resetEvents(){this.detachAllEvents(),this.attachAllEvents()}scrollElementInit(){let t=this.el.querySelectorAll("[overflow-y]");!t.length||t.length>1?this.overflowEl=this.contentEl:(this.overflowEl=t[0],this.overflowEl.style.overflowX="hidden"),this.settings.topperOverflow&&(this.settings.upperThanTop&&console.warn('Cupertino Pane: "upperThanTop" allowed for disabled "topperOverflow"'),this.rendered?this.setOverflowHeight():setTimeout(()=>this.setOverflowHeight(),150))}setOverflowHeight(t=0){0===this.overflowEl.offsetHeight&&0===this.overflowEl.offsetWidth||(this.settings.inverse?this.overflowEl.style.height=this.getPaneHeight()-30-this.settings.topperOverflowOffset-this.overflowEl.offsetTop+"px":this.overflowEl.style.height=this.getPaneHeight()-this.settings.topperOverflowOffset-this.overflowEl.offsetTop-t+"px")}getTimingFunction(t){return t?"cubic-bezier(0.175, 0.885, 0.370, 1.120)":this.settings.animationType}checkOpacityAttr(t){let e=this.el.querySelectorAll("[hide-on-bottom]");e.length&&(this.settings.inverse||e.forEach(e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breakpoints.breaks.bottom?"0":"1"}))}checkOverflowAttr(t){this.settings.topperOverflow&&(this.settings.inverse?this.overflowEl.style.overflowY=t>=this.breakpoints.bottomer?"auto":"hidden":this.overflowEl.style.overflowY=t<=this.breakpoints.topper?"auto":"hidden")}isPanePresented(){let t=Array.from(document.querySelectorAll(".cupertino-pane-wrapper"));return!!t.length&&!!t.find(t=>t.contains(this.selector))}isBackdropPresented(){return!!document.querySelector(".cupertino-pane-wrapper .backdrop")}renderBackdrop(){this.backdropEl=document.createElement("div"),this.backdropEl.className="backdrop",this.backdropEl.style.overflow="hidden",this.backdropEl.style.position="fixed",this.backdropEl.style.width="100%",this.backdropEl.style.bottom="0",this.backdropEl.style.right="0",this.backdropEl.style.left="0",this.backdropEl.style.top="0",this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`,this.backdropEl.style.display="none",this.backdropEl.style.zIndex="10",this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.style.display="block",this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap())}backdrop(t={show:!0}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call backdrop()"),null;this.isBackdropPresented()||(this.renderBackdrop(),this.resetEvents());const e=()=>{this.backdropEl.style.transition="initial",this.backdropEl.style.display="none",this.backdropEl.removeEventListener("transitionend",e)};if(this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",t.show)this.backdropEl.style.display="block",setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50);else{if("none"===this.backdropEl.style.display)return;this.backdropEl.addEventListener("transitionend",e)}}attachEvents(t){var e,s,i;if(!Support.touch&&Support.pointerEvents)t.addEventListener(this.touchEvents.start,this.events.touchStartCb,!1),t.addEventListener(this.touchEvents.move,this.events.touchMoveCb,!1),t.addEventListener(this.touchEvents.end,this.events.touchEndCb,!1),null===(e=this.backdropEl)||void 0===e||e.addEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!1);else{if(Support.touch){const e=!("touchstart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};t.addEventListener(this.touchEvents.start,this.events.touchStartCb,e),t.addEventListener(this.touchEvents.move,this.events.touchMoveCb,!!Support.passiveListener&&{passive:!1,capture:!1}),t.addEventListener(this.touchEvents.end,this.events.touchEndCb,e),null===(s=this.backdropEl)||void 0===s||s.addEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!!Support.passiveListener&&{passive:!1,capture:!1}),this.touchEvents.cancel&&t.addEventListener(this.touchEvents.cancel,this.events.touchEndCb,e)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(t.addEventListener("mousedown",this.events.touchStartCb,!1),t.addEventListener("mousemove",this.events.touchMoveCb,!1),t.addEventListener("mouseup",this.events.touchEndCb,!1),null===(i=this.backdropEl)||void 0===i||i.addEventListener("mousemove",this.events.touchMoveBackdropCb,!1))}this.settings.preventClicks&&t.addEventListener("click",this.events.onClickCb,!0)}detachEvents(t){var e,s,i;if(!Support.touch&&Support.pointerEvents)t.removeEventListener(this.touchEvents.start,this.events.touchStartCb,!1),t.removeEventListener(this.touchEvents.move,this.events.touchMoveCb,!1),t.removeEventListener(this.touchEvents.end,this.events.touchEndCb,!1),null===(e=this.backdropEl)||void 0===e||e.removeEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!1);else{if(Support.touch){const e=!("onTouchStart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};t.removeEventListener(this.touchEvents.start,this.events.touchStartCb,e),t.removeEventListener(this.touchEvents.move,this.events.touchMoveCb,!1),t.removeEventListener(this.touchEvents.end,this.events.touchEndCb,e),null===(s=this.backdropEl)||void 0===s||s.removeEventListener(this.touchEvents.move,this.events.touchMoveBackdropCb,!1),this.touchEvents.cancel&&t.removeEventListener(this.touchEvents.cancel,this.events.touchEndCb,e)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(t.removeEventListener("mousedown",this.events.touchStartCb,!1),t.removeEventListener("mousemove",this.events.touchMoveCb,!1),t.removeEventListener("mouseup",this.events.touchEndCb,!1),null===(i=this.backdropEl)||void 0===i||i.removeEventListener("mousemove",this.events.touchMoveBackdropCb,!1))}this.settings.preventClicks&&t.removeEventListener("click",this.events.onClickCb,!0)}getPanelTransformY(){return parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])}preventDismiss(t=!1){this.preventDismissEvent=t}disableDrag(){this.disableDragEvents=!0}enableDrag(){this.disableDragEvents=!1}setDarkMode(t={enable:!0}){t.enable?(this.paneEl.style.background="#1c1c1d",this.paneEl.style.color="#ffffff",this.moveEl.style.background="#5a5a5e",this.settings.buttonClose&&this.settings.buttonDestroy&&(this.destroyButtonEl.style.background="#424246",this.iconCloseColor="#a8a7ae")):(this.paneEl.style.background="#ffffff",this.paneEl.style.color="unset",this.moveEl.style.background="#c0c0c0",this.settings.buttonClose&&this.settings.buttonDestroy&&(this.destroyButtonEl.style.background="#ebebeb",this.iconCloseColor="#7a7a7e"))}setBreakpoints(t){return __awaiter(this,void 0,void 0,(function*(){!this.isPanePresented()||t?yield this.breakpoints.buildBreakpoints(t):console.warn("Cupertino Pane: Provide any breaks configuration")}))}moveToBreak(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;this.settings.breaks[t].enabled?(this.checkOpacityAttr(this.breakpoints.breaks[t]),this.checkOverflowAttr(this.breakpoints.breaks[t]),this.doTransition({type:"breakpoint",translateY:this.breakpoints.breaks[t]}),this.breakpoints.currentBreakpoint=this.breakpoints.breaks[t]):console.warn("Cupertino Pane: %s breakpoint disabled",t)}moveToHeight(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;let e=this.screenHeightOffset?this.screen_height-t:t;this.checkOpacityAttr(e),this.doTransition({type:"breakpoint",translateY:e})}hide(){return this.isPanePresented()?this.isHidden()?(console.warn("Cupertino Pane: Pane already hidden"),null):void this.doTransition({type:"hide",translateY:this.screenHeightOffset}):(console.warn("Cupertino Pane: Present pane before call hide()"),null)}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screenHeightOffset}px) translateZ(0px)`:(console.warn("Cupertino Pane: Present pane before call isHidden()"),null)}currentBreak(){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call currentBreak()"),null;this.breakpoints.getCurrentBreakName()}destroyResets(){this.parentEl.appendChild(this.contentEl),this.wrapperEl.remove(),this.detachAllEvents(),delete this.rendered,delete this.breakpoints.prevBreakpoint,this.contentEl.style.display="none"}destroy(t={animate:!1,destroyButton:!1}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.preventDismissEvent?this.preventedDismiss||(this.settings.onWillDismiss({prevented:!0}),this.moveToBreak(this.breakpoints.prevBreakpoint)):(this.settings.onWillDismiss(),t.animate?this.doTransition({type:"destroy",translateY:this.screenHeightOffset,destroyButton:t.destroyButton}):(this.destroyResets(),this.settings.onDidDismiss({destroyButton:t.destroyButton})))}pushTransition(t,e){t=this.screenHeightOffset-t;const s=this.settings.pushMinHeight?this.settings.pushMinHeight:this.screenHeightOffset-this.breakpoints.bottomer,i=this.screenHeightOffset-this.breakpoints.topper;this.pushElement.style.transition=e;const n=(t,e,s,i)=>{this.pushElement.style.transform=`translateY(${e}px) scale(${t})`,this.pushElement.style.borderRadius=s+"px",this.pushElement.style.filter=`contrast(${i})`};if(t<=s)return void n(1,0,0,1);const o=(e,n)=>{let o=-1*(i*n-s*e);return o-=(e-n)*t,o/=s-i,o>n&&(o=n),o<e&&(o=e),o};n(o(.93,1),o(-6-this.settings.pushYOffset,0),-1*o(-10,0),o(.85,1))}doTransition(t={}){var e;if("move"===t.type)return this.paneEl.style.transition="all 0ms linear 0ms",this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transition="all 0ms linear 0ms",this.followerEl.style.transform=`translateY(${t.translateY-this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`),void(this.settings.pushElement&&this.pushTransition(this.getPanelTransformY(),"all 0ms linear 0ms"));const s=()=>{"destroy"===t.type&&this.destroyResets(),this.paneEl.style.transition="initial",this.followerEl&&(this.followerEl.style.transition="initial"),this.settings.backdrop&&("destroy"!==t.type&&"hide"!==t.type||(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none")),"present"===t.type&&this.settings.onDidPresent(),"destroy"===t.type&&this.settings.onDidDismiss({destroyButton:t.destroyButton}),this.settings.onTransitionEnd({target:document.body.contains(this.paneEl)?this.paneEl:null}),this.paneEl.removeEventListener("transitionend",s)};if("breakpoint"===t.type||"end"===t.type||"present"===t.type||"hide"===t.type||"destroy"===t.type){if(this.settings.backdrop&&(this.isHidden()||"hide"===t.type||"destroy"===t.type||"present"===t.type)&&(this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,"hide"!==t.type&&"destroy"!==t.type&&(this.backdropEl.style.display="block",setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50))),"end"===t.type&&this.settings.freeMode)return;const i=Object.entries(this.settings.breaks).find(e=>e[1].height===this.screenHeightOffset-t.translateY),n=this.getTimingFunction(!(!i||!(null===(e=i[1])||void 0===e?void 0:e.bounce)));this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${n} 0s`,this.followerEl&&(this.followerEl.style.transition=`transform ${this.settings.animationDuration}ms ${n} 0s`),this.settings.pushElement&&setTimeout(()=>{this.pushTransition(t.translateY,`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`)},this.settings.pushYOffset?50:0),"present"===t.type?(this.paneEl.style.transform=`translateY(${this.screenHeightOffset}px) translateZ(0px)`,setTimeout(()=>{this.settings.onTransitionStart({translateY:{new:t.translateY}}),this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transform="translateY(0px) translateZ(0px)")},50)):(this.settings.onTransitionStart({translateY:{new:t.translateY}}),this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transform=`translateY(${t.translateY-this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`));let o=Object.entries(this.breakpoints.breaks).find(e=>e[1]===t.translateY);return o&&(this.breakpoints.prevBreakpoint=o[0]),void this.paneEl.addEventListener("transitionend",s)}}}exports.CupertinoPane=CupertinoPane;
 //# sourceMappingURL=cupertino-pane.min.js.map

dist/events.d.ts

 import { CupertinoPane, CupertinoSettings } from 'cupertino-pane';
 import { Device } from './device';
+import { Breakpoints } from './breakpoints';
 /**
@@ -11,2 +12,3 @@ * Touch start, Touch move, Touch end,
     private device;
+    private breakpoints;
     private allowClick;
@@ -20,3 +22,3 @@ private disableDragAngle;
     private inputBlured;
-    constructor(instance: CupertinoPane, settings: CupertinoSettings, device: Device);
+    constructor(instance: CupertinoPane, settings: CupertinoSettings, device: Device, breakpoints: Breakpoints);
     /**
@@ -65,2 +67,8 @@ * Touch Start Event
     /**
+     * Window resize event
+     * @param e
+     */
+    onWindowResizeCb: (e: any) => void;
+    private onWindowResize;
+    /**
      * Private class methods
@@ -67,0 +75,0 @@ */

dist/models.d.ts

@@ -21,2 +21,4 @@ export interface PaneBreak {
     followerElement: string;
+    fitHeight: boolean;
+    fitScreenHeight: boolean;
     pushElement: any;
@@ -35,2 +37,3 @@ pushMinHeight: number;
     freeMode: boolean;
+    buttonDestroy: boolean;
     buttonClose: boolean;
@@ -37,0 +40,0 @@ topperOverflow: boolean;

package.json

 {
   "name": "cupertino-pane",
   "description": "Multiplatform slide-over pane",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "Roman Antonov (roman-rr)",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",

README.md

@@ -159,2 +159,4 @@ # Cupertino Pane
 | **followerElement** | `string` | Follower element selector | Element with selector will following pane transitions |
+| **fitHeight** | `boolean` | 'false' | Automatically calc and define content height as top breakpoint. Middle and bottom breakpoint will be disabled |
+| **fitScreenHeight** | `boolean` | 'false' | On `true` will automatically adjust pane maximum height to screen height |
 | **pushElement** | `string` | Push element selector | DOM Element will be pushed and scaled |
@@ -176,3 +178,3 @@ | **pushMinHeight** | `number` | Most bottom available point | Height from which 3d push effect will be started |
 | **touchAngle** | `number` | null | Allowable angle (in degrees) to trigger touch move |
-| **buttonClose** | `boolean` | true | Determinate whetever close button will render or not |
+| **buttonDestroy** | `boolean` | true | Determinate whetever close button will render or not |
 | **bottomOffset** | `number` | 0 | Margin bottom for pane from screen bottom point |
@@ -358,8 +360,8 @@ | **topperOverflow** | `boolean` | true | Ability to scroll content inside pane if topper point reached |
 ## Future Goals
-- [Docs] Package branding (100+ stars)
-- [Docs] Open collective
+- [Docs] ($150 budget) -> Package branding
+- [Enhancements] Handle keyboard only for Pane inputs
+- [Code] Fix immutable issue in breakpoint class
+- [Accurance] Draw experiment application (Normal/TimeStamp/Native) - Native Touch Plugin
+- [Docs] (Traffic + Carbon ads) -> Docs engine (F7, Netlify, Gatsby, GH pages)
 - [Showcase] Apple Music F7
-- [Docs] Docs engine (F7, Netlify)
-- [Accurance] Draw experiment application (Normal/TimeStamp/Native) - Native Touch Plugin
-- [Platforms] React Native version
 - [Platforms] C++ QT version
@@ -366,0 +368,0 @@

src/cupertino-pane.ts

@@ -6,25 +6,13 @@ import { Support } from './support';
 import { Settings } from './settings';
+import { Breakpoints } from './breakpoints';
 export type CupertinoSettings = Partial<PaneSettings>;
 
-export class CupertinoPane {
-  private defaultBreaksConf: PaneBreaks = {
-    top: { enabled: true, height: window.innerHeight - (135 * 0.35) },
-    middle: { enabled: true, height: 300 },
-    bottom: { enabled: true, height: 100 },
-  };
-  
-  public topper: number;
-  public bottomer: number;
+export class CupertinoPane {  
   public disableDragEvents: boolean = false;
-  public currentBreakpoint: number;
-  public prevBreakpoint: string;
-  public breaks: {} = {}
   public screen_height: number = window.innerHeight;
-  private screenHeightOffset: number = this.screen_height;
-  private rendered: boolean = false;
+  public screenHeightOffset: number = this.screen_height;
   public preventDismissEvent: boolean = false;
   public preventedDismiss: boolean = false;
   private iconCloseColor: string = '#7a7a7e';
-
-  private brs: number[] = [];
+  private rendered: boolean = false;
   
@@ -34,9 +22,9 @@ public wrapperEl: HTMLDivElement;
   public overflowEl: HTMLElement;
-  private el: HTMLElement;
+  public el: HTMLElement;
+  public contentEl: HTMLElement;
   private parentEl: HTMLElement;
   private draggableEl: HTMLDivElement;
   private moveEl: HTMLDivElement;
-  private contentEl: HTMLElement;
   private backdropEl: HTMLDivElement;
-  private closeEl: HTMLDivElement;
+  private destroyButtonEl: HTMLDivElement;
   private followerEl: HTMLElement;
@@ -48,2 +36,3 @@ private pushElement: HTMLElement;
   private events: Events;
+  private breakpoints: Breakpoints;
 
@@ -67,3 +56,3 @@ constructor(private selector: (string | HTMLElement),
     if (this.isPanePresented()) {
-      console.warn('Cupertino Pane: specified selector or DOM element already in use', this.selector);
+      console.error('Cupertino Pane: specified selector or DOM element already in use', this.selector);
       return;
@@ -84,3 +73,4 @@ }
 
-    this.events = new Events(this, this.settings, this.device);
+    this.breakpoints = new Breakpoints(this, this.settings);
+    this.events = new Events(this, this.settings, this.device, this.breakpoints);
   }
@@ -114,3 +104,3 @@
       this.paneEl.style.willChange = 'transform';
-      this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
+      this.paneEl.style.transform = `translateY(${this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
 
@@ -125,3 +115,3 @@ if (!this.settings.inverse) {
         this.paneEl.style.paddingBottom = '15px';
-        this.paneEl.style.top = `-${this.bottomer}px`;
+        this.paneEl.style.top = `-${this.breakpoints.bottomer}px`;
       }
@@ -166,13 +156,13 @@
       // Close button
-      this.closeEl = document.createElement('div');
+      this.destroyButtonEl = document.createElement('div');
       if (!this.settings.inverse) {
-        this.closeEl.className = 'close-button';
-        this.closeEl.style.width = '26px';
-        this.closeEl.style.height = '26px';
-        this.closeEl.style.position = 'absolute';
-        this.closeEl.style.background = '#ebebeb';
-        this.closeEl.style.right = '20px';
-        this.closeEl.style.zIndex = '14';
-        this.closeEl.style.borderRadius = '100%';
-        this.closeEl.style.top = '16px';
+        this.destroyButtonEl.className = 'destroy-button';
+        this.destroyButtonEl.style.width = '26px';
+        this.destroyButtonEl.style.height = '26px';
+        this.destroyButtonEl.style.position = 'absolute';
+        this.destroyButtonEl.style.background = '#ebebeb';
+        this.destroyButtonEl.style.right = '20px';
+        this.destroyButtonEl.style.zIndex = '14';
+        this.destroyButtonEl.style.borderRadius = '100%';
+        this.destroyButtonEl.style.top = '16px';
       }
@@ -188,3 +178,3 @@
 
-  present(conf: {animate: boolean} = {animate: false}) {
+  async present(conf: {animate: boolean} = {animate: false}) {
       if (!this.el) return;
@@ -211,7 +201,7 @@
 
-      this.setBreakpoints();
+      await this.setBreakpoints();
       this.drawBaseElements();
       this.scrollElementInit();
-      this.checkOpacityAttr(this.currentBreakpoint);
-      this.checkOverflowAttr(this.currentBreakpoint);
+      this.checkOpacityAttr(this.breakpoints.currentBreakpoint);
+      this.checkOverflowAttr(this.breakpoints.currentBreakpoint);
       this.rendered = true;
@@ -230,3 +220,3 @@
         this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
-        this.followerEl.style.transition = `all ${this.settings.animationDuration}ms ${this.getTimingFunction(this.settings.breaks[this.currentBreak()].bounce)} 0s`;
+        this.followerEl.style.transition = `all ${this.settings.animationDuration}ms ${this.getTimingFunction(this.settings.breaks[this.currentBreak()]?.bounce)} 0s`;
       }
@@ -254,3 +244,3 @@
 
-        this.closeEl.style.top = '45px';
+        this.destroyButtonEl.style.top = '45px';
         this.draggableEl.style.padding = '15px';
@@ -270,6 +260,6 @@
 
-      if (this.settings.buttonClose && !this.settings.inverse) {
-        this.paneEl.appendChild(this.closeEl);
-        this.closeEl.addEventListener('click', (t) => this.destroy({animate:true}));
-        this.closeEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      if ((this.settings.buttonClose && this.settings.buttonDestroy) && !this.settings.inverse) {
+        this.paneEl.appendChild(this.destroyButtonEl);
+        this.destroyButtonEl.addEventListener('click', (t) => this.destroy({animate:true, destroyButton: true}));
+        this.destroyButtonEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path fill="${this.iconCloseColor}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>
@@ -302,7 +292,7 @@ </svg>`;
       if (conf.animate) {
-        this.doTransition({type: 'present', translateY: this.breaks[this.settings.initialBreak]}); 
+        this.doTransition({type: 'present', translateY: this.breakpoints.breaks[this.settings.initialBreak]}); 
       } else {
         // Emit event
         if (this.settings.pushElement) {
-          this.pushTransition(this.breaks[this.settings.initialBreak], 'unset');
+          this.pushTransition(this.breakpoints.breaks[this.settings.initialBreak], 'unset');
         }
@@ -313,13 +303,12 @@ this.settings.onDidPresent();
 
-  /**
-   * Private Utils methods
-   */
-
-  private getPaneHeight(): number {
+  public getPaneHeight(): number {
     if (!this.settings.inverse) {
-      return this.screen_height - this.topper - this.settings.bottomOffset;
+      return this.screen_height - this.breakpoints.topper - this.settings.bottomOffset;
     } 
-    return this.bottomer + this.settings.bottomOffset;
+    return this.breakpoints.bottomer + this.settings.bottomOffset;
   }
 
+  /**
+   * Private Utils methods
+   */  
   private attachAllEvents() {
@@ -347,6 +336,12 @@ if (!this.settings.dragBy) {
         this.parentEl.scrollTop = 0;
-        this.parentEl.parentElement.scrollTop = 0;
-        this.parentEl.parentElement.parentElement.scrollTop = 0;
+        if (this.parentEl.parentElement) {
+          this.parentEl.parentElement.scrollTop = 0;
+          if (this.parentEl.parentElement.parentElement) {
+            this.parentEl.parentElement.parentElement.scrollTop = 0;
+          }
+        }
       });
     }
+
+    window.addEventListener('resize', this.events.onWindowResizeCb);
   }
@@ -369,2 +364,4 @@
     }
+
+    window.removeEventListener('resize', this.events.onWindowResizeCb);
   }
@@ -377,9 +374,3 @@
 
-  public getClosestBreakY(): number {
-    return this.brs.reduce((prev, curr) => {
-      return (Math.abs(curr - this.getPanelTransformY()) < Math.abs(prev - this.getPanelTransformY()) ? curr : prev);
-    });
-  }
-
-  private scrollElementInit() {
+  public scrollElementInit() {
     let attrElements = this.el.querySelectorAll('[overflow-y]');
@@ -439,3 +430,3 @@ if (!attrElements.length || attrElements.length > 1) {
       (<HTMLElement>item).style.transition = `opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-      (<HTMLElement>item).style.opacity = (val >= this.breaks['bottom']) ? '0' : '1';
+      (<HTMLElement>item).style.opacity = (val >= this.breakpoints.breaks['bottom']) ? '0' : '1';
     });
@@ -448,9 +439,9 @@ }
     if (!this.settings.inverse) {
-      this.overflowEl.style.overflowY = (val <= this.topper) ? 'auto' : 'hidden';
+      this.overflowEl.style.overflowY = (val <= this.breakpoints.topper) ? 'auto' : 'hidden';
     } else {
-      this.overflowEl.style.overflowY = (val >= this.bottomer) ? 'auto' : 'hidden';
+      this.overflowEl.style.overflowY = (val >= this.breakpoints.bottomer) ? 'auto' : 'hidden';
     }
   }
 
-  private isPanePresented():boolean {
+  public isPanePresented():boolean {
     // Check through all presented panes
@@ -467,5 +458,5 @@ let wrappers = Array.from(document.querySelectorAll('.cupertino-pane-wrapper'));
     if (this.settings.inverse) {
-      brs['top'] = this.breaks['bottom'];
-      brs['middle'] = this.breaks['middle'];
-      brs['bottom'] = this.breaks['top'];
+      brs['top'] = this.breakpoints.breaks['bottom'];
+      brs['middle'] = this.breakpoints.breaks['middle'];
+      brs['bottom'] = this.breakpoints.breaks['top'];
       settingsBreaks['top'] = {...this.settings.breaks['bottom']};
@@ -475,7 +466,7 @@ settingsBreaks['middle'] = {...this.settings.breaks['middle']};
     } else {
-      brs = {...this.breaks}
+      brs = {...this.breakpoints.breaks}
       settingsBreaks = {...this.settings.breaks};
     }
 
-    if (this.currentBreakpoint === brs['top']) {
+    if (this.breakpoints.currentBreakpoint === brs['top']) {
         if (diff > maxDiff) {
@@ -493,3 +484,3 @@ if (settingsBreaks['middle'].enabled) { return brs['middle']; }
 
-    if (this.currentBreakpoint === brs['middle']) {
+    if (this.breakpoints.currentBreakpoint === brs['middle']) {
         if (diff < -maxDiff) {
@@ -504,3 +495,3 @@ if (settingsBreaks['top'].enabled) { return brs['top']; }
 
-    if (this.currentBreakpoint === brs['bottom']) {
+    if (this.breakpoints.currentBreakpoint === brs['bottom']) {
         if (diff < -maxDiff) {
@@ -544,5 +535,2 @@ if (settingsBreaks['middle'].enabled) {
     this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap());
-    
-    // Reset events to attach backdrop stop propagation
-    this.resetEvents();
   }
@@ -561,2 +549,4 @@
       this.renderBackdrop();
+      // Reset events to attach backdrop stop propagation
+      this.resetEvents();
     }
@@ -725,4 +715,4 @@
 
-      if (this.settings.buttonClose) {
-          this.closeEl.style.background = '#424246';
+      if (this.settings.buttonClose && this.settings.buttonDestroy) {
+          this.destroyButtonEl.style.background = '#424246';
           this.iconCloseColor = '#a8a7ae';
@@ -735,4 +725,4 @@ }
 
-      if (this.settings.buttonClose) {
-        this.closeEl.style.background = '#ebebeb';
+      if (this.settings.buttonClose && this.settings.buttonDestroy) {
+        this.destroyButtonEl.style.background = '#ebebeb';
         this.iconCloseColor = '#7a7a7e';
@@ -744,6 +734,6 @@ }
   /**
-   * Function builder for breakpoints and heights
-   * @param conf breakpoints
+   * Public user method to reset breakpoints
+   * @param conf 
    */
-  public setBreakpoints(conf?: PaneBreaks) {
+  public async setBreakpoints(conf?: PaneBreaks) {
     if (this.isPanePresented() && !conf) {
@@ -754,89 +744,3 @@ console.warn(`Cupertino Pane: Provide any breaks configuration`);
     
-    this.breaks = {
-      top: this.screenHeightOffset,
-      middle: this.screenHeightOffset,
-      bottom: this.screenHeightOffset
-    };
-    
-    ['top', 'middle', 'bottom'].forEach((val) => {
-      // bottom offset for bulletins
-      this.breaks[val] -= this.settings.bottomOffset;
-
-      // Set default if no exist
-      if (!this.settings.breaks[val]) {
-        this.settings.breaks[val] = this.defaultBreaksConf[val];
-      }
-
-      // Override from user conf on updating
-      if (conf && conf[val]) {
-        this.settings.breaks[val] = conf[val];
-      }
-
-      // Assign heights
-      if (this.settings.breaks[val]
-          && this.settings.breaks[val].enabled
-          && this.settings.breaks[val].height) {
-            if (!this.settings.inverse) {
-              this.breaks[val] -= this.settings.breaks[val].height;
-            } else {
-              this.breaks[val] = this.settings.breaks[val].height;
-            }
-      }
-    });
-
-    // Warnings 
-    if (!this.isPanePresented()) {
-      if (!this.settings.breaks[this.settings.initialBreak].enabled) {
-        console.warn('Cupertino Pane: Please set initialBreak for enabled breakpoint');
-      }
-    }
-    if (this.settings.breaks['middle'].height >= this.settings.breaks['top'].height) {
-      console.warn('Cupertino Pane: Please set middle height lower than top height');
-    }
-    if (this.settings.breaks['middle'].height <= this.settings.breaks['bottom'].height) {
-      console.warn('Cupertino Pane: Please set bottom height lower than middle height');
-    }
-
-    // Prepare breakpoint numbers array
-    this.brs = [];
-    ['top', 'middle', 'bottom'].forEach((val) => {
-      if (this.settings.breaks[val].enabled) {
-        this.brs.push(this.breaks[val]);
-      }
-    });
-
-    // Determinate topper point
-    this.topper = this.brs.reduce((prev, curr) => {
-      return (Math.abs(curr) < Math.abs(prev) ? curr : prev);
-    });
-    // Determinate bottomer point
-    this.bottomer = this.brs.reduce((prev, curr) => {
-      return (Math.abs(curr) > Math.abs(prev) ? curr : prev);
-    });
-
-    if (!this.isPanePresented()) {
-      this.currentBreakpoint = this.breaks[this.settings.initialBreak];
-    }
-
-    if (this.isPanePresented()) {
-      // Move to current if updated
-      if (this.settings.breaks[this.prevBreakpoint].enabled) {
-        this.moveToBreak(this.prevBreakpoint);
-      }
-
-      // Move to any if removed
-      if (!this.settings.breaks[this.prevBreakpoint].enabled) {
-        let nextY = this.swipeNextPoint(1, 1, this.getClosestBreakY());
-        const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
-        this.moveToBreak(nextBreak[0]);
-      }
-
-      // Re-calc height and top
-      this.paneEl.style.top = this.settings.inverse ? `-${this.bottomer}px` : `unset`;
-      this.paneEl.style.height = `${this.getPaneHeight()}px`;
-      this.scrollElementInit();
-
-      this.checkOpacityAttr(this.currentBreakpoint);
-      this.checkOverflowAttr(this.currentBreakpoint);
-    }
+    await this.breakpoints.buildBreakpoints(conf);
   }
@@ -855,6 +759,6 @@
 
-    this.checkOpacityAttr(this.breaks[val]);
-    this.checkOverflowAttr(this.breaks[val]);
-    this.doTransition({type: 'breakpoint', translateY: this.breaks[val]});
-    this.currentBreakpoint = this.breaks[val];
+    this.checkOpacityAttr(this.breakpoints.breaks[val]);
+    this.checkOverflowAttr(this.breakpoints.breaks[val]);
+    this.doTransition({type: 'breakpoint', translateY: this.breakpoints.breaks[val]});
+    this.breakpoints.currentBreakpoint = this.breakpoints.breaks[val];
   }
@@ -902,6 +806,3 @@
 
-    if (this.breaks['top'] === this.currentBreakpoint) return 'top';
-    if (this.breaks['middle'] === this.currentBreakpoint) return 'middle';
-    if (this.breaks['bottom'] === this.currentBreakpoint) return 'bottom';
-    return null;
+    this.breakpoints.getCurrentBreakName();
   };
@@ -918,3 +819,3 @@
     delete this.rendered;
-    delete this.prevBreakpoint;
+    delete this.breakpoints.prevBreakpoint;
 
@@ -925,3 +826,10 @@ // Reset styles
 
-  public destroy(conf: {animate: boolean} = {animate: false}) {
+  public destroy(conf: {
+      animate: boolean, 
+      destroyButton?: boolean
+    } = {
+      animate: false, 
+      destroyButton: false
+    }) {
+
     if (!this.isPanePresented()) {
@@ -937,3 +845,3 @@ console.warn(`Cupertino Pane: Present pane before call destroy()`);
         this.settings.onWillDismiss({prevented: true} as any);
-        this.moveToBreak(this.prevBreakpoint);
+        this.moveToBreak(this.breakpoints.prevBreakpoint);
       }
@@ -948,7 +856,7 @@ return;
     if (conf.animate) {
-      this.doTransition({type: 'destroy', translateY: this.screenHeightOffset}); 
+      this.doTransition({type: 'destroy', translateY: this.screenHeightOffset, destroyButton: conf.destroyButton}); 
     } else {
       this.destroyResets();
       // Emit event
-      this.settings.onDidDismiss();
+      this.settings.onDidDismiss({destroyButton: conf.destroyButton} as any);
     }
@@ -959,4 +867,4 @@ }
     newPaneY = this.screenHeightOffset - newPaneY;
-    const topHeight = this.settings.pushMinHeight ? this.settings.pushMinHeight : this.screenHeightOffset - this.bottomer;
-    const minHeight = this.screenHeightOffset - this.topper;
+    const topHeight = this.settings.pushMinHeight ? this.settings.pushMinHeight : this.screenHeightOffset - this.breakpoints.bottomer;
+    const minHeight = this.screenHeightOffset - this.breakpoints.topper;
     this.pushElement.style.transition = transition;
@@ -1004,3 +912,3 @@
         this.followerEl.style.transition = 'all 0ms linear 0ms';
-        this.followerEl.style.transform = `translateY(${params.translateY - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
+        this.followerEl.style.transform = `translateY(${params.translateY - this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
       }
@@ -1040,3 +948,3 @@
       if (params.type === 'destroy') {
-        this.settings.onDidDismiss();
+        this.settings.onDidDismiss({destroyButton: params.destroyButton} as any);
       }
@@ -1082,3 +990,3 @@ this.settings.onTransitionEnd({target: document.body.contains(this.paneEl) ? this.paneEl : null});
       );
-      const timingForNext = this.getTimingFunction(nextBreak && nextBreak[1].bounce ? true : false);
+      const timingForNext = this.getTimingFunction(nextBreak && nextBreak[1]?.bounce ? true : false);
 
@@ -1122,9 +1030,9 @@ // style
         if (this.followerEl) {
-          this.followerEl.style.transform = `translateY(${params.translateY - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
+          this.followerEl.style.transform = `translateY(${params.translateY - this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
         } 
       }
 
-      let getNextBreakpoint = Object.entries(this.breaks).find(val => val[1] === params.translateY);
+      let getNextBreakpoint = Object.entries(this.breakpoints.breaks).find(val => val[1] === params.translateY);
       if (getNextBreakpoint) {
-        this.prevBreakpoint = getNextBreakpoint[0];
+        this.breakpoints.prevBreakpoint = getNextBreakpoint[0];
       }
@@ -1131,0 +1039,0 @@ this.paneEl.addEventListener('transitionend', transitionEnd);

src/events.ts

 import { CupertinoPane, CupertinoSettings } from 'cupertino-pane';
 import { Device } from './device';
+import { Breakpoints } from './breakpoints';
 
@@ -23,3 +24,4 @@ /**
               private settings: CupertinoSettings, 
-              private device: Device) {
+              private device: Device,
+              private breakpoints: Breakpoints) {
   }
@@ -110,2 +112,3 @@
     // Detect if input was blured
+    // TODO: Check that blured from pane child instance
     if (this.steps.length > 2) {
@@ -147,4 +150,4 @@ if (this.isFormElement(document.activeElement)
       // Scrolled -> Disable drag
-      if ((newVal > this.instance.topper && this.contentScrollTop > 0) 
-          || (newVal <= this.instance.topper)) { 
+      if ((newVal > this.breakpoints.topper && this.contentScrollTop > 0) 
+          || (newVal <= this.breakpoints.topper)) { 
         return;
@@ -156,4 +159,4 @@ }
     if (!this.settings.inverse 
-        && !this.settings.upperThanTop && (newVal <= this.instance.topper)) {
-      this.instance.paneEl.style.transform = `translateY(${this.instance.topper}px) translateZ(0px)`;
+        && !this.settings.upperThanTop && (newVal <= this.breakpoints.topper)) {
+      this.instance.paneEl.style.transform = `translateY(${this.breakpoints.topper}px) translateZ(0px)`;
       return;
@@ -163,4 +166,4 @@ }
     // Allow drag topper than top point
-    if (newVal <= this.instance.topper && this.settings.upperThanTop) {
-      const differKoef = ((-this.instance.topper + this.instance.topper - this.instance.getPanelTransformY()) / this.instance.topper) / -8;
+    if (newVal <= this.breakpoints.topper && this.settings.upperThanTop) {
+      const differKoef = ((-this.breakpoints.topper + this.breakpoints.topper - this.instance.getPanelTransformY()) / this.breakpoints.topper) / -8;
       newVal = this.instance.getPanelTransformY() + (diffY * differKoef);
@@ -171,4 +174,4 @@ }
     if ((!this.settings.lowerThanBottom || this.settings.inverse) 
-        && (newVal >= this.instance.bottomer)) {
-      this.instance.paneEl.style.transform = `translateY(${this.instance.bottomer}px) translateZ(0px)`;
+        && (newVal >= this.breakpoints.bottomer)) {
+      this.instance.paneEl.style.transform = `translateY(${this.breakpoints.bottomer}px) translateZ(0px)`;
       this.instance.checkOpacityAttr(newVal);
@@ -181,11 +184,11 @@ return;
           && this.instance.preventDismissEvent && this.settings.bottomClose) {
-      let differKoef = ((-this.instance.topper + this.instance.topper - this.instance.getPanelTransformY()) / this.instance.topper) / -8;
+      let differKoef = ((-this.breakpoints.topper + this.breakpoints.topper - this.instance.getPanelTransformY()) / this.breakpoints.topper) / -8;
       newVal = this.instance.getPanelTransformY() + (diffY * (0.5 - differKoef));
       
       let mousePointY = (t.touches[0].screenY - 220 - this.instance.screen_height) * -1;
-      if (mousePointY <= this.instance.screen_height - this.instance.bottomer) {
+      if (mousePointY <= this.instance.screen_height - this.breakpoints.bottomer) {
         this.instance.preventedDismiss = true; 
         // Emit event with prevent dismiss
         this.settings.onWillDismiss({prevented: true} as any);
-        this.instance.moveToBreak(this.instance.prevBreakpoint);
+        this.instance.moveToBreak(this.breakpoints.prevBreakpoint);
         return;
@@ -218,3 +221,3 @@ }
     // Determinate nearest point
-    let closest = this.instance.getClosestBreakY();
+    let closest = this.breakpoints.getClosestBreakY();
     // Swipe - next (if differ > 10)
@@ -231,3 +234,3 @@ const diff =  this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
       if (this.settings.fastSwipeClose 
-          && this.instance.currentBreakpoint < closest) {        
+          && this.breakpoints.currentBreakpoint < closest) {        
         this.instance.destroy({animate:true});
@@ -248,3 +251,3 @@ return;
     this.steps = [];
-    this.instance.currentBreakpoint = closest;
+    this.breakpoints.currentBreakpoint = closest;
 
@@ -259,7 +262,7 @@ // Event emitter
 
-    this.instance.checkOpacityAttr(this.instance.currentBreakpoint);
-    this.instance.checkOverflowAttr(this.instance.currentBreakpoint);
+    this.instance.checkOpacityAttr(this.breakpoints.currentBreakpoint);
+    this.instance.checkOverflowAttr(this.breakpoints.currentBreakpoint);
 
     // Bottom closable
-    if (this.settings.bottomClose && closest === this.instance.breaks['bottom']) {
+    if (this.settings.bottomClose && closest === this.breakpoints.breaks['bottom']) {
       this.instance.destroy({animate:true});
@@ -295,3 +298,3 @@ return;
     if (this.settings.clickBottomOpen) {
-      if (this.instance.breaks['bottom'] === this.instance.getPanelTransformY()) {
+      if (this.breakpoints.breaks['bottom'] === this.instance.getPanelTransformY()) {
           let closest;
@@ -315,2 +318,10 @@ if (this.settings.breaks['top'].enabled) {
   private onKeyboardShow(e) {
+    // TODO: instead of this -> check that inputBlured is instance child
+    if (this.instance.paneEl 
+      && this.instance.paneEl.offsetWidth === 0 
+      && this.instance.paneEl.offsetHeight === 0 ) {
+      return;
+    }
+    // TODO!
+
     if (this.device.android) {
@@ -320,3 +331,3 @@ setTimeout(() => this.fixAndroidResize(), 20);
 
-    this.instance.prevBreakpoint = Object.entries(this.instance.breaks).find(val => val[1] === this.instance.getPanelTransformY())[0];
+    this.breakpoints.prevBreakpoint = Object.entries(this.breakpoints.breaks).find(val => val[1] === this.instance.getPanelTransformY())[0];
     let newHeight = this.settings.breaks[this.instance.currentBreak()].height + e.keyboardHeight;
@@ -342,2 +353,10 @@
   private onKeyboardHide(e) {
+    // TODO: instead of this -> check that inputBlured is instance child
+    if (this.instance.paneEl 
+      && this.instance.paneEl.offsetWidth === 0 
+      && this.instance.paneEl.offsetHeight === 0 ) {
+      return;
+    }
+    // TODO! 
+
     if (this.device.android) {
@@ -350,3 +369,5 @@ this.fixAndroidResize();
     } else {
-      this.instance.moveToBreak(this.instance.prevBreakpoint);
+      if (!this.instance.isHidden()) {
+        this.instance.moveToBreak(this.breakpoints.prevBreakpoint);
+      }
     }
@@ -358,2 +379,13 @@
   /**
+   * Window resize event
+   * @param e
+   */
+  public onWindowResizeCb = (e) => this.onWindowResize(e);
+  private onWindowResize(e) {
+    this.instance.screen_height = window.innerHeight;
+    this.instance.screenHeightOffset = this.instance.screen_height;
+    this.breakpoints.buildBreakpoints(JSON.parse(this.breakpoints.lockedBreakpoints), false);
+  }
+
+  /**
    * Private class methods
@@ -412,2 +444,2 @@ */
   }
-}
+}

src/models.ts

@@ -22,2 +22,4 @@ export interface PaneBreak {
   followerElement: string;
+  fitHeight: boolean;
+  fitScreenHeight: boolean;
   pushElement: any;
@@ -36,2 +38,3 @@ pushMinHeight: number;
   freeMode: boolean;
+  buttonDestroy: boolean;
   buttonClose: boolean;
@@ -38,0 +41,0 @@ topperOverflow: boolean;

src/settings.ts

@@ -12,2 +12,4 @@ import { CupertinoSettings } from './cupertino-pane';
       followerElement: null,
+      fitHeight: false,
+      fitScreenHeight: false,
       pushElement: null,
@@ -27,2 +29,3 @@ pushMinHeight: null,
       freeMode: false,
+      buttonDestroy: true,
       buttonClose: true,
@@ -29,0 +32,0 @@ topperOverflow: true,

No alert changes

Improved metrics

Total package byte prevSize

12094246

increased by0.33%

Number of package files

57

increased by3.64%

Lines of code

5797

increased by10.8%

Number of lines in readme file

372

increased by0.54%

No dependency changes