framework7 6.3.4 → 7.0.0-beta.3

package/components/panel/panel-rtl.css

@@ -1 +1 @@
-:root{--f7-panel-width:260px;--f7-panel-bg-color:#fff}.ios{--f7-panel-collapsed-width:58px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.md{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.aurora{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.panel-backdrop{position:absolute;left:0;top:var(--f7-appbar-app-offset,0px);width:100%;height:calc(100% - var(--f7-appbar-app-offset,0px));opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:var(--f7-appbar-app-offset,0px);height:calc(100% - var(--f7-appbar-app-offset,0px));transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;-moz-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover{z-index:6000}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-push{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0)}.panel-left.panel-cover:after,.panel-left.panel-push:after{left:100%;background:linear-gradient(to right,var(--f7-panel-shadow))}.with-panel-left-cover .panel-left.panel-cover:after,.with-panel-left-cover .panel-left.panel-push:after{opacity:1}.panel-left.panel-reveal:after{right:0;transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0);background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-left-reveal .panel-left.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-right.panel-cover:after,.panel-right.panel-push:after{right:100%;background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-right-cover .panel-right.panel-cover:after,.with-panel-right-cover .panel-right.panel-push:after{opacity:1}.panel-right.panel-reveal:after{left:0;background:linear-gradient(to right,var(--f7-panel-shadow));transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.with-panel-right-reveal .panel-right.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover{z-index:5900}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-closing .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:0}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:1}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translate3d(0px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translate3d(0px,0,0)}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-resize-handler .panel-left.panel-reveal{right:0}.panel-right.panel-cover .panel-resize-handler{left:-3px}.panel-resize-handler .panel-right.panel-reveal,.panel-right.panel-push .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html.with-modal-popup-push .framework7-root>.panel-in,html.with-modal-popup-push .framework7-root>.panel-out,html.with-modal-sheet-push .framework7-root>.panel-in,html.with-modal-sheet-push .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left{transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center;border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right{transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width,var(--f7-panel-width)) - 50vw) center;border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0px)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0px)}html.with-modal-popup-push-closing .framework7-root>.panel-in,html.with-modal-sheet-push-closing .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width,var(--f7-panel-width)) - 50vw) center}
+:root{--f7-panel-width:260px;--f7-panel-bg-color:#fff}.ios{--f7-panel-collapsed-width:58px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.md{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.aurora{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.panel-backdrop{position:absolute;left:0;top:var(--f7-appbar-app-offset,0px);width:100%;height:calc(100% - var(--f7-appbar-app-offset,0px));opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:var(--f7-appbar-app-offset,0px);height:calc(100% - var(--f7-appbar-app-offset,0px));transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover{z-index:6000}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-push{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0)}.panel-left.panel-cover:after,.panel-left.panel-push:after{left:100%;background:linear-gradient(to right,var(--f7-panel-shadow))}.with-panel-left-cover .panel-left.panel-cover:after,.with-panel-left-cover .panel-left.panel-push:after{opacity:1}.panel-left.panel-reveal:after{right:0;transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0);background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-left-reveal .panel-left.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-right.panel-cover:after,.panel-right.panel-push:after{right:100%;background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-right-cover .panel-right.panel-cover:after,.with-panel-right-cover .panel-right.panel-push:after{opacity:1}.panel-right.panel-reveal:after{left:0;background:linear-gradient(to right,var(--f7-panel-shadow));transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.with-panel-right-reveal .panel-right.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover{z-index:5900}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-closing .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:0}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:1}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translate3d(0px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translate3d(0px,0,0)}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-resize-handler .panel-left.panel-reveal{right:0}.panel-right.panel-cover .panel-resize-handler{left:-3px}.panel-resize-handler .panel-right.panel-reveal,.panel-right.panel-push .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html.with-modal-popup-push .framework7-root>.panel-in,html.with-modal-popup-push .framework7-root>.panel-out,html.with-modal-sheet-push .framework7-root>.panel-in,html.with-modal-sheet-push .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left{transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center;border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right{transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width,var(--f7-panel-width)) - 50vw) center;border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0px)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0px)}html.with-modal-popup-push-closing .framework7-root>.panel-in,html.with-modal-sheet-push-closing .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width,var(--f7-panel-width)) - 50vw) center}

package/components/panel/panel.css

@@ -1 +1 @@
-:root{--f7-panel-width:260px;--f7-panel-bg-color:#fff}.ios{--f7-panel-collapsed-width:58px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.md{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.aurora{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.panel-backdrop{position:absolute;left:0;top:var(--f7-appbar-app-offset,0px);width:100%;height:calc(100% - var(--f7-appbar-app-offset,0px));opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:var(--f7-appbar-app-offset,0px);height:calc(100% - var(--f7-appbar-app-offset,0px));transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;-moz-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover{z-index:6000}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-push{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0)}.panel-left.panel-cover:after,.panel-left.panel-push:after{left:100%;background:linear-gradient(to right,var(--f7-panel-shadow))}.with-panel-left-cover .panel-left.panel-cover:after,.with-panel-left-cover .panel-left.panel-push:after{opacity:1}.panel-left.panel-reveal:after{right:0;transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0);background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-left-reveal .panel-left.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-right.panel-cover:after,.panel-right.panel-push:after{right:100%;background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-right-cover .panel-right.panel-cover:after,.with-panel-right-cover .panel-right.panel-push:after{opacity:1}.panel-right.panel-reveal:after{left:0;background:linear-gradient(to right,var(--f7-panel-shadow));transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.with-panel-right-reveal .panel-right.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover{z-index:5900}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-closing .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:0}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:1}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translate3d(0px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translate3d(0px,0,0)}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-resize-handler .panel-left.panel-reveal{right:0}.panel-right.panel-cover .panel-resize-handler{left:-3px}.panel-resize-handler .panel-right.panel-reveal,.panel-right.panel-push .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html.with-modal-popup-push .framework7-root>.panel-in,html.with-modal-popup-push .framework7-root>.panel-out,html.with-modal-sheet-push .framework7-root>.panel-in,html.with-modal-sheet-push .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left{transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center;border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right{transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width,var(--f7-panel-width)) - 50vw) center;border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0px)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0px)}html.with-modal-popup-push-closing .framework7-root>.panel-in,html.with-modal-sheet-push-closing .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width,var(--f7-panel-width)) - 50vw) center}
+:root{--f7-panel-width:260px;--f7-panel-bg-color:#fff}.ios{--f7-panel-collapsed-width:58px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.md{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.aurora{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.panel-backdrop{position:absolute;left:0;top:var(--f7-appbar-app-offset,0px);width:100%;height:calc(100% - var(--f7-appbar-app-offset,0px));opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:var(--f7-appbar-app-offset,0px);height:calc(100% - var(--f7-appbar-app-offset,0px));transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover{z-index:6000}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-push{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0)}.panel-left.panel-cover:after,.panel-left.panel-push:after{left:100%;background:linear-gradient(to right,var(--f7-panel-shadow))}.with-panel-left-cover .panel-left.panel-cover:after,.with-panel-left-cover .panel-left.panel-push:after{opacity:1}.panel-left.panel-reveal:after{right:0;transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0);background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-left-reveal .panel-left.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-right.panel-cover:after,.panel-right.panel-push:after{right:100%;background:linear-gradient(to left,var(--f7-panel-shadow))}.with-panel-right-cover .panel-right.panel-cover:after,.with-panel-right-cover .panel-right.panel-push:after{opacity:1}.panel-right.panel-reveal:after{left:0;background:linear-gradient(to right,var(--f7-panel-shadow));transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.with-panel-right-reveal .panel-right.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover{z-index:5900}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-closing .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:0}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:1}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translate3d(0px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translate3d(0px,0,0)}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-resize-handler .panel-left.panel-reveal{right:0}.panel-right.panel-cover .panel-resize-handler{left:-3px}.panel-resize-handler .panel-right.panel-reveal,.panel-right.panel-push .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html.with-modal-popup-push .framework7-root>.panel-in,html.with-modal-popup-push .framework7-root>.panel-out,html.with-modal-sheet-push .framework7-root>.panel-in,html.with-modal-sheet-push .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left{transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center;border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right{transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width,var(--f7-panel-width)) - 50vw) center;border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0px)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0px)}html.with-modal-popup-push-closing .framework7-root>.panel-in,html.with-modal-sheet-push-closing .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration)}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width,var(--f7-panel-width)) - 50vw) center}

package/components/panel/panel.js

@@ -1 +1,190 @@
-(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);var n=e.$,t=e.utils,i=(e.getDevice,e.getSupport),l=e.Class,s=(e.Modal,e.ConstructorMethods,e.ModalMethods,t.extend),r=t.now,o=t.nextFrame,p=t.deleteProps;function d(e){this.wrapped=e}function c(e){var a,n;function t(a,n){try{var l=e[a](n),s=l.value,r=s instanceof d;Promise.resolve(r?s.wrapped:s).then((function(e){r?t("return"===a?"return":"next",e):i(l.done?"return":"normal",e)}),(function(e){t("throw",e)}))}catch(e){i("throw",e)}}function i(e,i){switch(e){case"return":a.resolve({value:i,done:!0});break;case"throw":a.reject(i);break;default:a.resolve({value:i,done:!1})}(a=a.next)?t(a.key,a.arg):n=null}this._invoke=function(e,i){return new Promise((function(l,s){var r={key:e,arg:i,resolve:l,reject:s,next:null};n?n=n.next=r:(a=n=r,t(e,i))}))},"function"!=typeof e.return&&(this.return=void 0)}function f(e,a){return(f=Object.setPrototypeOf||function(e,a){return e.__proto__=a,e})(e,a)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}c.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},c.prototype.next=function(e){return this._invoke("next",e)},c.prototype.throw=function(e){return this._invoke("throw",e)},c.prototype.return=function(e){return this._invoke("return",e)};function v(e){var a=e.app,t=i();if(!e.resizableInitialized){s(e,{resizable:!0,resizableWidth:null,resizableInitialized:!0});var l=n("html"),r=e.$el,p=e.$backdropEl,d=e.side,c=e.effect;if(r){var f,h,v,u,b,g,m,w,C={};0===e.$el.find(".panel-resize-handler").length&&e.$el.append('<div class="panel-resize-handler"></div>'),e.$resizeHandlerEl=e.$el.children(".panel-resize-handler"),r.addClass("panel-resizable");var k=!!t.passiveListener&&{passive:!0};e.$el.on(a.touchEvents.start,".panel-resize-handler",z,k),a.on("touchmove:active",y),a.on("touchend:passive",B),a.on("resize",E),e.on("beforeOpen",E),e.once("panelDestroy",(function(){r.removeClass("panel-resizable"),e.$resizeHandlerEl.remove(),e.$el.off(a.touchEvents.start,".panel-resize-handler",z,k),a.off("touchmove:active",y),a.off("touchend:passive",B),a.off("resize",E),e.off("beforeOpen",E)}))}}function $(e){if(!e)return null;if(e.indexOf("%")>=0||e.indexOf("vw")>=0)return parseInt(e,10)/100*a.width;var n=parseInt(e,10);return Number.isNaN(n)?null:n}function z(a){e.resizable&&r.hasClass("panel-resizable")&&(C.x="touchstart"===a.type?a.targetTouches[0].pageX:a.pageX,C.y="touchstart"===a.type?a.targetTouches[0].pageY:a.pageY,h=!1,f=!0,g=$(r.css("min-width")),m=$(r.css("max-width")),w=r.hasClass("panel-in-breakpoint"))}function y(t){if(f){var i="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX;h||(u=r[0].offsetWidth,r.transition(0),r.addClass("panel-resizing"),l.css("cursor","col-resize"),("cover"!==c||w)&&(b=n(e.getViewEl()),e.$containerEl&&e.$containerEl.hasClass("page")&&b.add(e.$containerEl.children(".page-content, .tabs, .fab"))),"cover"===c||w||(p.transition(0),b.transition(0))),h=!0,t.preventDefault(),v=i-C.x;var s="left"===d?u+v:u-v;g&&!Number.isNaN(g)&&(s=Math.max(s,g)),m&&!Number.isNaN(m)&&(s=Math.min(s,m)),s=Math.min(Math.max(s,0),a.width),e.resizableWidth=s,r[0].style.width=s+"px","cover"===c||w?w&&b&&b.css("margin-"+d,s+"px"):(b&&b.transform("translate3d("+("left"===d?s:-s)+"px, 0, 0)"),p&&p.transform("translate3d("+("left"===d?s:-s)+"px, 0, 0)")),r.trigger("panel:resize",s),e.emit("local::resize panelResize",e,s)}}function B(){if(n("html").css("cursor",""),!f||!h)return f=!1,void(h=!1);f=!1,h=!1,l[0].style.setProperty("--f7-panel-"+d+"-width",e.resizableWidth+"px"),r[0].style.width="","cover"===c||w||(b.transform(""),p.transform("")),r.removeClass("panel-resizing"),o((function(){r.transition(""),"cover"!==c&&(p.transition(""),b&&b.transition(""))}))}function E(){e.opened&&e.resizableWidth&&(g=$(r.css("min-width")),m=$(r.css("max-width")),g&&!Number.isNaN(g)&&e.resizableWidth<g&&(e.resizableWidth=Math.max(e.resizableWidth,g)),m&&!Number.isNaN(m)&&e.resizableWidth>m&&(e.resizableWidth=Math.min(e.resizableWidth,m)),e.resizableWidth=Math.min(Math.max(e.resizableWidth,0),a.width),l[0].style.setProperty("--f7-panel-"+d+"-width",e.resizableWidth+"px"))}}var u=function(e){var a,t;function i(a,t){var i;void 0===t&&(t={});var l,r=s({on:{}},a.params.panel,t),o=h(i=e.call(this,r,[a])||this);if(o.params=r,o.$containerEl=o.params.containerEl?n(o.params.containerEl).eq(0):a.$el,o.containerEl=o.$containerEl[0],o.containerEl||(o.$containerEl=a.$el,o.containerEl=a.$el[0]),o.params.el?l=n(o.params.el).eq(0):o.params.content&&(l=n(o.params.content).filter((function(e){return 1===e.nodeType})).eq(0)),0===l.length)return o||h(i);if(l[0].f7Panel)return l[0].f7Panel||h(i);l[0].f7Panel=o;var p,d=o.params,c=d.side,f=d.effect,v=d.resizable;return void 0===c&&(c=l.hasClass("panel-left")?"left":"right"),void 0===f&&(f=l.hasClass("panel-cover")?"cover":l.hasClass("panel-push")?"push":"reveal"),void 0===v&&(v=l.hasClass("panel-resizable")),o.params.backdrop&&o.params.backdropEl?p=n(o.params.backdropEl):o.params.backdrop&&0===(p=o.$containerEl.children(".panel-backdrop")).length&&(p=n('<div class="panel-backdrop"></div>'),o.$containerEl.prepend(p)),s(o,{app:a,side:c,effect:f,resizable:v,$el:l,el:l[0],opened:!1,$backdropEl:p,backdropEl:p&&p[0]}),o.useModules(),o.init(),o||h(i)}t=e,(a=i).prototype=Object.create(t.prototype),a.prototype.constructor=a,f(a,t);var l=i.prototype;return l.getViewEl=function(){var e=this;return e.$containerEl.children(".views").length>0?e.$containerEl.children(".views")[0]:e.$containerEl.children(".view")[0]},l.setStateClasses=function(e){var a=this,t=a.side,i=a.el,l=a.getViewEl(),s=l&&l.contains(i),r=!l||s?a.$containerEl:n("html");"open"===e&&r.addClass("with-panel with-panel-"+a.side+"-"+a.effect),"before-closing"===e&&r.addClass("with-panel-closing"),"closing"===e&&(r.addClass("with-panel-closing"),r.removeClass("with-panel with-panel-"+a.side+"-"+a.effect)),"after-closing"===e&&r.removeClass("with-panel-closing"),"closed"===e&&r.removeClass("with-panel-"+t+"-reveal with-panel-"+t+"-cover with-panel-"+t+"-push with-panel")},l.enableVisibleBreakpoint=function(){var e=this;return e.visibleBreakpointDisabled=!1,e.setVisibleBreakpoint(),e},l.disableVisibleBreakpoint=function(){var e=this;return e.visibleBreakpointDisabled=!0,e.setVisibleBreakpoint(),e},l.toggleVisibleBreakpoint=function(){var e=this;return e.visibleBreakpointDisabled=!e.visibleBreakpointDisabled,e.setVisibleBreakpoint(),e},l.setVisibleBreakpoint=function(e){void 0===e&&(e=!0);var a=this,t=a.app;a.visibleBreakpointResizeHandler||(a.visibleBreakpointResizeHandler=function(){a.setVisibleBreakpoint()},t.on("resize",a.visibleBreakpointResizeHandler));var i,l,s=a.side,r=a.$el,o=a.$containerEl,p=a.params,d=a.visibleBreakpointDisabled,c=p.visibleBreakpoint,f=n(a.getViewEl()),h=r.hasClass("panel-in-breakpoint");if(o&&o.hasClass("page")&&f.add(o.children(".page-content, .tabs, .fab")),t.width>=c&&null!=c&&!d)h?f.css(((i={})["margin-"+s]=r.width()+"px",i)):(a.setStateClasses("closed"),r.addClass("panel-in-breakpoint").removeClass("panel-in panel-in-collapsed"),a.onOpen(!1),a.onOpened(),f.css(((l={})["margin-"+s]=r.width()+"px",l)),t.allowPanelOpen=!0,e&&(a.emit("local::breakpoint panelBreakpoint",a),a.$el.trigger("panel:breakpoint")));else if(h){var v;r.removeClass("panel-in-breakpoint panel-in"),a.onClose(),a.onClosed(),f.css(((v={})["margin-"+s]="",v)),e&&(a.emit("local::breakpoint panelBreakpoint",a),a.$el.trigger("panel:breakpoint"))}},l.enableCollapsedBreakpoint=function(){var e=this;return e.collapsedBreakpointDisabled=!1,e.setCollapsedBreakpoint(),e},l.disableCollapsedBreakpoint=function(){var e=this;return e.collapsedBreakpointDisabled=!0,e.setCollapsedBreakpoint(),e},l.toggleCollapsedBreakpoint=function(){var e=this;return e.collapsedBreakpointDisabled=!e.collapsedBreakpointDisabled,e.setCollapsedBreakpoint(),e},l.setCollapsedBreakpoint=function(e){void 0===e&&(e=!0);var a=this,n=a.app;a.collapsedBreakpointResizeHandler||(a.collapsedBreakpointResizeHandler=function(){a.setCollapsedBreakpoint()},n.on("resize",a.collapsedBreakpointResizeHandler));var t=a.$el,i=a.params,l=a.collapsedBreakpointDisabled;if(!t.hasClass("panel-in-breakpoint")){var s=i.collapsedBreakpoint,r=t.hasClass("panel-in-collapsed");n.width>=s&&null!=s&&!l?r||(a.setStateClasses("closed"),t.addClass("panel-in-collapsed").removeClass("panel-in"),a.collapsed=!0,n.allowPanelOpen=!0,e&&(a.emit("local::collapsedBreakpoint panelCollapsedBreakpoint",a),a.$el.trigger("panel:collapsedbreakpoint"))):r&&(t.removeClass("panel-in-collapsed panel-in"),a.collapsed=!1,e&&(a.emit("local::collapsedBreakpoint panelCollapsedBreakpoint",a),a.$el.trigger("panel:collapsedbreakpoint")))}},l.enableResizable=function(){var e=this;return e.resizableInitialized?(e.resizable=!0,e.$el.addClass("panel-resizable")):v(e),e},l.disableResizable=function(){var e=this;return e.resizable=!1,e.$el.removeClass("panel-resizable"),e},l.enableSwipe=function(){var e=this;return e.swipeInitialized?e.swipeable=!0:function(e){var a=e.app;if(!e.swipeInitialized){s(e,{swipeable:!0,swipeInitialized:!0});var t,i,l,p,d,c,f,h,v,u,b,g,m,w=e.params,C=e.$el,k=e.$backdropEl,$=e.side,z=e.effect,y={},B=0;a.on("touchstart:passive",E),a.on("touchmove:active",x),a.on("touchend:passive",O),a.on("gesturestart",M),a.on("gestureend",S),e.on("panelDestroy",(function(){a.off("touchstart:passive",E),a.off("touchmove:active",x),a.off("touchend:passive",O),a.off("gesturestart",M),a.off("gestureend",S)}))}function E(s){if(e.swipeable&&!l&&a.panel.allowOpen&&(w.swipe||w.swipeOnlyClose)&&!i&&!(n(".modal-in:not(.toast):not(.notification), .photo-browser-in").length>0)){var o=(t=a.panel.get("left"===$?"right":"left")||{}).opened&&t.$el&&!t.$el.hasClass("panel-in-breakpoint");if((e.opened||!o)&&(w.swipeOnlyClose||!o)&&(!s.target||"input"!==s.target.nodeName.toLowerCase()||"range"!==s.target.type)&&!(n(s.target).closest(".range-slider, .tabs-swipeable-wrap, .calendar-months, .no-swipe-panel, .card-opened").length>0)&&(y.x="touchstart"===s.type?s.targetTouches[0].pageX:s.pageX,y.y="touchstart"===s.type?s.targetTouches[0].pageY:s.pageY,!w.swipeOnlyClose||e.opened)){if(w.swipeActiveArea&&!e.opened){if("left"===$&&y.x>w.swipeActiveArea)return;if("right"===$&&y.x<a.width-w.swipeActiveArea)return}B=0,m=n(e.getViewEl()),p=!1,i=!0,d=void 0,c=!1,f=r(),g=void 0}}}function x(n){if(i&&!l&&!c&&!((B+=1)<2))if(n.f7PreventSwipePanel||a.preventSwipePanelBySwipeBack||a.preventSwipePanel)i=!1;else{var t="touchmove"===n.type?n.targetTouches[0].pageX:n.pageX,s="touchmove"===n.type?n.targetTouches[0].pageY:n.pageY;if(void 0===d&&(d=!!(d||Math.abs(s-y.y)>Math.abs(t-y.x))),d)i=!1;else{if(!g){if(g=t>y.x?"to-right":"to-left",w.swipeActiveArea>0&&!e.opened){if("left"===$&&y.x>w.swipeActiveArea)return void(i=!1);if("right"===$&&y.x<a.width-w.swipeActiveArea)return void(i=!1)}if(C.hasClass("panel-in-breakpoint"))return void(i=!1);if("left"===$&&"to-left"===g&&!C.hasClass("panel-in")||"right"===$&&"to-right"===g&&!C.hasClass("panel-in"))return void(i=!1)}var r=e.opened?0:-w.swipeThreshold;"right"===$&&(r=-r),p||(e.opened||(e.insertToRoot(),C.addClass("panel-in-swipe"),k.css("visibility","visible"),C.trigger("panel:swipeopen"),e.emit("local::swipeOpen panelSwipeOpen",e)),b=C[0].offsetWidth,"reveal"===z&&C.hasClass("panel-in-collapsed")&&(b-=parseFloat(m.css("margin-"+$))),C.transition(0)),p=!0,n.cancelable&&n.preventDefault(),h=t-y.x+r,"right"===$?"cover"===z||"push"===z?((v=h+(e.opened?0:b))<0&&(v=0),v>b&&(v=b)):((v=h-(e.opened?b:0))>0&&(v=0),v<-b&&(v=-b)):((v=h+(e.opened?b:0))<0&&(v=0),v>b&&(v=b));var o=Math.abs(v/b);if("reveal"===z)w.swipeNoFollow||(m.transform("translate3d("+v+"px,0,0)").transition(0),k.transform("translate3d("+v+"px,0,0)").transition(0)),C.trigger("panel:swipe",Math.abs(v/b)),e.emit("local::swipe panelSwipe",e,Math.abs(v/b));else{if("left"===$&&(v-=b),!w.swipeNoFollow&&(k.transition(0),u=1-Math.abs(v/b),k.css({opacity:u}),C.transform("translate3d("+v+"px,0,0)").transition(0),"push"===z)){var f="left"===$?v+b:v-b;m.transform("translate3d("+f+"px,0,0)").transition(0),k.transform("translate3d("+f+"px,0,0)").transition(0)}C.trigger("panel:swipe",Math.abs(v/b)),e.emit("local::swipe panelSwipe",e,Math.abs(v/b))}w.swipeNoFollow&&(e.opened&&0===o||!e.opened&&1===o)&&(c=!0,O(n))}}}function O(a){if(!i||!p)return i=!1,void(p=!1);var n="gesturestart"===a.type||l;i=!1,p=!1;var t,s=(new Date).getTime()-f,r=(0===v||Math.abs(v)===b)&&!w.swipeNoFollow,d=w.swipeThreshold||0;"swap"==(t=n?"reset":e.opened?"cover"===z||"push"===z?0===v?"reset":s<300&&Math.abs(v)>0?"swap":s>=300&&Math.abs(v)<b/2?"reset":"swap":v===-b?"reset":s<300&&Math.abs(v)>=0||s>=300&&Math.abs(v)<=b/2?"left"===$&&v===b?"reset":"swap":"reset":Math.abs(h)<d?"reset":"cover"===z||"push"===z?0===v||s<300&&Math.abs(v)>0||s>=300&&Math.abs(v)<b/2?"swap":"reset":0===v?"reset":s<300&&Math.abs(v)>0||s>=300&&Math.abs(v)>=b/2?"swap":"reset")&&(e.opened?e.close(!r):e.open(!r));var c=!0;if("reset"===t&&!e.opened)if(r)C.removeClass("panel-in-swipe");else{c=!1;var u="reveal"===z?m:C;e.setStateClasses("before-closing"),u.transitionEnd((function(){C.hasClass("panel-in")||(C.removeClass("panel-in-swipe"),e.setStateClasses("after-closing"))}))}"reveal"!==z&&"push"!==z||o((function(){m.transition(""),m.transform("")})),c&&C.removeClass("panel-in-swipe"),C.transition("").transform(""),k.transform("").transition("").css({opacity:"",visibility:""})}function M(e){l=!0,O(e)}function S(){l=!1}}(e),e},l.disableSwipe=function(){return this.swipeable=!1,this},l.onOpen=function(e){void 0===e&&(e=!0);var a=this,n=a.app;a.opened=!0,n.panel.allowOpen=!1,a.$el.trigger("panel:beforeopen"),a.emit("local::beforeOpen panelBeforeOpen",a),e&&a.setStateClasses("open"),a.$el.trigger("panel:open"),a.emit("local::open panelOpen",a)},l.onOpened=function(){var e=this;e.app.panel.allowOpen=!0,e.$el.trigger("panel:opened"),e.emit("local::opened panelOpened",e)},l.onClose=function(){var e=this,a=e.app;e.opened=!1,a.panel.allowOpen=!1,e.$el.trigger("panel:beforeclose"),e.emit("local::beforeClose panelBeforeClose",e),e.setStateClasses("closing"),e.$el.trigger("panel:close"),e.emit("local::close panelClose",e)},l.onClosed=function(){var e=this,a=e.app;if(a.panel.allowOpen=!0,e.setStateClasses("after-closing"),e.$el.removeClass("panel-out"),e.$backdropEl){var n=a.panel.get(".panel-in");(!n||n&&!n.$backdropEl)&&e.$backdropEl.removeClass("panel-backdrop-in")}e.$el.trigger("panel:closed"),e.emit("local::closed panelClosed",e)},l.toggle=function(e){void 0===e&&(e=!0);var a=this,n=a.params.visibleBreakpoint;return a.app.width>=n&&null!=n?a.toggleVisibleBreakpoint():(a.opened?a.close(e):a.open(e),a)},l.insertToRoot=function(){var e=this,a=e.$el,n=e.$backdropEl,t=e.$containerEl,i=a.parent(),l=a.parents(document).length>0;if(!i.is(t)||a.prevAll(".views, .view").length){var s=t.children(".panel, .views, .view").eq(0),r=t.children(".panel-backdrop").eq(0);s.length?a.insertBefore(s):r?a.insertBefore(r):t.prepend(a),n&&n.length&&(!n.parent().is(t)&&0===n.nextAll(".panel").length||n.parent().is(t)&&0===n.nextAll(".panel").length)&&n.insertBefore(a),e.once("panelClosed",(function(){l?i.append(a):a.remove()}))}},l.open=function(e){void 0===e&&(e=!0);var a=this,t=a.app;if(!t.panel.allowOpen)return!1;var i=a.effect,l=a.$el,s=a.$backdropEl,r=a.opened,o=a.$containerEl;if(!l||l.hasClass("panel-in"))return a;if(a.insertToRoot(),r||l.hasClass("panel-in-breakpoint")||l.hasClass("panel-in"))return!1;var p=t.panel.get(".panel-in");p&&p!==a&&p.close(e),l[e?"removeClass":"addClass"]("not-animated"),l.addClass("panel-in"),s&&(s.addClass("panel-backdrop-in"),s[e?"removeClass":"addClass"]("not-animated")),"cover"!==a.effect&&"push"!==a.effect||(a._clientLeft=l[0].clientLeft);var d=n(a.getViewEl());o&&o.hasClass("page")&&d.add(o.children(".page-content, .tabs"));var c="reveal"===i?d:l;return e?(s&&s.removeClass("not-animated"),function e(){c.transitionEnd((function(t){n(t.target).is(c)?l.hasClass("panel-out")?a.onClosed():a.onOpened():e()}))}(),l.removeClass("panel-out not-animated").addClass("panel-in"),a.onOpen()):(s&&s.addClass("not-animated"),l.removeClass("panel-out").addClass("panel-in not-animated"),a.onOpen(),a.onOpened()),!0},l.close=function(e){void 0===e&&(e=!0);var a=this,t=a.effect,i=a.$el,l=a.$backdropEl,s=a.opened,r=a.$containerEl;if(!s||i.hasClass("panel-in-breakpoint")||!i.hasClass("panel-in"))return a;i[e?"removeClass":"addClass"]("not-animated"),l&&l[e?"removeClass":"addClass"]("not-animated");var o=n(a.getViewEl());return r&&r.hasClass("page")&&o.add(r.children(".page-content, .tabs")),e?(("reveal"===t?o:i).transitionEnd((function(){i.hasClass("panel-out")?a.onClosed():i.hasClass("panel-in")&&a.onOpened(),a.setStateClasses("after-closing")})),i.removeClass("panel-in").addClass("panel-out"),a.onClose()):(i.addClass("not-animated").removeClass("panel-in").addClass("panel-out"),a.onClose(),a.onClosed()),a},l.init=function(){var e=this;void 0!==e.params.visibleBreakpoint&&e.setVisibleBreakpoint(),void 0!==e.params.collapsedBreakpoint&&e.setCollapsedBreakpoint(),e.params.swipe&&e.enableSwipe(),e.resizable&&e.enableResizable()},l.destroy=function(){var e=this,a=e.app,t=e.$containerEl;if(e.$el){if(e.emit("local::beforeDestroy panelBeforeDestroy",e),e.$el.trigger("panel:beforedestroy"),e.visibleBreakpointResizeHandler&&a.off("resize",e.visibleBreakpointResizeHandler),e.collapsedBreakpointResizeHandler&&a.off("resize",e.collapsedBreakpointResizeHandler),e.$el.hasClass("panel-in-breakpoint")||e.$el.hasClass("panel-in-collapsed")){var i,l=n(e.getViewEl());t&&t.hasClass("page")&&l.add(t.children(".page-content, .tabs")),e.$el.removeClass("panel-in-breakpoint panel-in-collapsed panel-in"),l.css(((i={})["margin-"+e.side]="",i)),e.emit("local::breakpoint panelBreakpoint",e),e.$el.trigger("panel:breakpoint")}e.$el.trigger("panel:destroy"),e.emit("local::destroy panelDestroy",e),e.el&&(e.el.f7Panel=null,delete e.el.f7Panel),p(e),e=null}},i}(l),b={name:"panel",params:{panel:{opened:void 0,side:void 0,effect:void 0,resizable:void 0,backdrop:!0,backdropEl:void 0,visibleBreakpoint:void 0,collapsedBreakpoint:void 0,swipe:!1,swipeNoFollow:!1,swipeOnlyClose:!1,swipeActiveArea:0,swipeThreshold:0,closeByBackdropClick:!0,containerEl:void 0}},static:{Panel:u},create:function(){var e=this;s(e,{panel:{allowOpen:!0,create:function(a){return new u(e,a)},get:function(e){if(void 0===e&&(e=".panel"),e instanceof u)return e;"left"!==e&&"right"!==e||(e=".panel-"+e);var a=n(e);return 0===a.length||a.length>1?void 0:a[0].f7Panel},destroy:function(a){void 0===a&&(a=".panel");var n=e.panel.get(a);if(n&&n.destroy)return n.destroy()},open:function(a,n){void 0===a&&(a=".panel"),"left"!==a&&"right"!==a||(a=".panel-"+a);var t=e.panel.get(a);return t&&t.open?t.open(n):t?void 0:(t=e.panel.create({el:a})).open(n)},close:function(a,n){void 0===a&&(a=".panel-in"),"left"!==a&&"right"!==a||(a=".panel-"+a);var t=e.panel.get(a);return t&&t.open?t.close(n):t?void 0:(t=e.panel.create({el:a})).close(n)},toggle:function(a,n){void 0===a&&(a=".panel"),"left"!==a&&"right"!==a||(a=".panel-"+a);var t=e.panel.get(a);return t&&t.toggle?t.toggle(n):t?void 0:(t=e.panel.create({el:a})).toggle(n)}}})},on:{init:function(){var e=this;n(".panel-init").each((function(a){var t=Object.assign({el:a},n(a).dataset()||{});e.panel.create(t)}))},pageInit:function(e){var a=this;e.$el.find(".panel-init").each((function(e){var t=Object.assign({el:e},n(e).dataset()||{});a.panel.create(t)}))},pageBeforeRemove:function(e){var a=this;e.$el.find(".panel-init").each((function(e){var n=a.panel.get(e);n&&n.destroy&&n.destroy()}))}},vnode:{"panel-init":{insert:function(e){var a=e.elm,t=Object.assign({el:a},n(a).dataset()||{});this.panel.create(t)},destroy:function(e){var a=e.elm,n=this.panel.get(a);n&&n.destroy&&n.destroy()}}},clicks:{".panel-open":function(e,a){void 0===a&&(a={});this.panel.open(a.panel,a.animate)},".panel-close":function(e,a){void 0===a&&(a={});this.panel.close(a.panel,a.animate)},".panel-toggle":function(e,a){void 0===a&&(a={});this.panel.toggle(a.panel,a.animate)},".panel-backdrop":function(){var e=this,a=n(".panel-in:not(.panel-out)");if(a.length){var t=a[0]&&a[0].f7Panel;a.trigger("panel:backdrop-click"),t&&t.emit("backdropClick",t),e.emit("panelBackdropClick",t||a[0]),e.params.panel.closeByBackdropClick&&e.panel.close()}}}};if(a){if(e.prototype.modules&&e.prototype.modules[b.name])return;e.use(b),e.instance&&(e.instance.useModuleParams(b,e.instance.params),e.instance.useModule(b))}return b}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import { extend } from '../../shared/utils';
+import Panel from './panel-class';
+export default {
+  name: 'panel',
+  params: {
+    panel: {
+      opened: undefined,
+      // default based on panel-in class
+      side: undefined,
+      // default based on panel class
+      effect: undefined,
+      // default based on panel class
+      resizable: undefined,
+      // default based on panel-resizable class
+      backdrop: true,
+      backdropEl: undefined,
+      visibleBreakpoint: undefined,
+      collapsedBreakpoint: undefined,
+      swipe: false,
+      // or true
+      swipeNoFollow: false,
+      // or true
+      swipeOnlyClose: false,
+      swipeActiveArea: 0,
+      swipeThreshold: 0,
+      closeByBackdropClick: true,
+      containerEl: undefined
+    }
+  },
+  static: {
+    Panel
+  },
+
+  create() {
+    const app = this;
+    extend(app, {
+      panel: {
+        allowOpen: true,
+
+        create(params) {
+          return new Panel(app, params);
+        },
+
+        get(el = '.panel') {
+          if (el instanceof Panel) return el;
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+
+          const $el = $(el);
+          if ($el.length === 0 || $el.length > 1) return undefined;
+          return $el[0].f7Panel;
+        },
+
+        destroy(el = '.panel') {
+          const panel = app.panel.get(el);
+          if (panel && panel.destroy) return panel.destroy();
+          return undefined;
+        },
+
+        open(el = '.panel', animate) {
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+
+          let panel = app.panel.get(el);
+          if (panel && panel.open) return panel.open(animate);
+
+          if (!panel) {
+            panel = app.panel.create({
+              el
+            });
+            return panel.open(animate);
+          }
+
+          return undefined;
+        },
+
+        close(el = '.panel-in', animate) {
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+
+          let panel = app.panel.get(el);
+          if (panel && panel.open) return panel.close(animate);
+
+          if (!panel) {
+            panel = app.panel.create({
+              el
+            });
+            return panel.close(animate);
+          }
+
+          return undefined;
+        },
+
+        toggle(el = '.panel', animate) {
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+
+          let panel = app.panel.get(el);
+          if (panel && panel.toggle) return panel.toggle(animate);
+
+          if (!panel) {
+            panel = app.panel.create({
+              el
+            });
+            return panel.toggle(animate);
+          }
+
+          return undefined;
+        }
+
+      }
+    });
+  },
+
+  on: {
+    init() {
+      const app = this;
+      $('.panel-init').each(panelEl => {
+        const params = Object.assign({
+          el: panelEl
+        }, $(panelEl).dataset() || {});
+        app.panel.create(params);
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.panel-init').each(panelEl => {
+        const params = Object.assign({
+          el: panelEl
+        }, $(panelEl).dataset() || {});
+        app.panel.create(params);
+      });
+    },
+
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.panel-init').each(panelEl => {
+        const panel = app.panel.get(panelEl);
+        if (panel && panel.destroy) panel.destroy();
+      });
+    }
+
+  },
+  vnode: {
+    'panel-init': {
+      insert(vnode) {
+        const app = this;
+        const panelEl = vnode.elm;
+        const params = Object.assign({
+          el: panelEl
+        }, $(panelEl).dataset() || {});
+        app.panel.create(params);
+      },
+
+      destroy(vnode) {
+        const app = this;
+        const panelEl = vnode.elm;
+        const panel = app.panel.get(panelEl);
+        if (panel && panel.destroy) panel.destroy();
+      }
+
+    }
+  },
+  clicks: {
+    '.panel-open': function open(clickedEl, data = {}) {
+      const app = this;
+      app.panel.open(data.panel, data.animate);
+    },
+    '.panel-close': function close(clickedEl, data = {}) {
+      const app = this;
+      app.panel.close(data.panel, data.animate);
+    },
+    '.panel-toggle': function close(clickedEl, data = {}) {
+      const app = this;
+      app.panel.toggle(data.panel, data.animate);
+    },
+    '.panel-backdrop': function close() {
+      const app = this;
+      const $panelEl = $('.panel-in:not(.panel-out)');
+      if (!$panelEl.length) return;
+      const instance = $panelEl[0] && $panelEl[0].f7Panel;
+      $panelEl.trigger('panel:backdrop-click');
+
+      if (instance) {
+        instance.emit('backdropClick', instance);
+      }
+
+      app.emit('panelBackdropClick', instance || $panelEl[0]);
+      if (app.params.panel.closeByBackdropClick) app.panel.close();
+    }
+  }
+};

package/components/panel/panel.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);var n=e.$,t=e.utils,s=(e.getDevice,e.getSupport),l=e.Class,i=(e.Modal,e.ConstructorMethods,e.ModalMethods,t.extend),o=t.now,r=t.nextFrame,p=t.deleteProps;function d(e){const a=e.app,t=s();if(e.resizableInitialized)return;i(e,{resizable:!0,resizableWidth:null,resizableInitialized:!0});const l=n("html"),{$el:o,$backdropEl:p,side:d,effect:c}=e;if(!o)return;let h,f;const b={};let g,u,v,m,w,C;function k(e){if(!e)return null;if(e.indexOf("%")>=0||e.indexOf("vw")>=0)return parseInt(e,10)/100*a.width;const n=parseInt(e,10);return Number.isNaN(n)?null:n}function $(a){e.resizable&&o.hasClass("panel-resizable")&&(b.x="touchstart"===a.type?a.targetTouches[0].pageX:a.pageX,b.y="touchstart"===a.type?a.targetTouches[0].pageY:a.pageY,f=!1,h=!0,m=k(o.css("min-width")),w=k(o.css("max-width")),C=o.hasClass("panel-in-breakpoint"))}function z(t){if(!h)return;const s="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX;f||(u=o[0].offsetWidth,o.transition(0),o.addClass("panel-resizing"),l.css("cursor","col-resize"),("cover"!==c||C)&&(v=n(e.getViewEl()),e.$containerEl&&e.$containerEl.hasClass("page")&&v.add(e.$containerEl.children(".page-content, .tabs, .fab"))),"cover"===c||C||(p.transition(0),v.transition(0))),f=!0,t.preventDefault(),g=s-b.x;let i="left"===d?u+g:u-g;m&&!Number.isNaN(m)&&(i=Math.max(i,m)),w&&!Number.isNaN(w)&&(i=Math.min(i,w)),i=Math.min(Math.max(i,0),a.width),e.resizableWidth=i,o[0].style.width=`${i}px`,"cover"===c||C?C&&v&&v.css(`margin-${d}`,`${i}px`):(v&&v.transform(`translate3d(${"left"===d?i:-i}px, 0, 0)`),p&&p.transform(`translate3d(${"left"===d?i:-i}px, 0, 0)`)),o.trigger("panel:resize",i),e.emit("local::resize panelResize",e,i)}function B(){if(n("html").css("cursor",""),!h||!f)return h=!1,void(f=!1);h=!1,f=!1,l[0].style.setProperty(`--f7-panel-${d}-width`,`${e.resizableWidth}px`),o[0].style.width="","cover"===c||C||(v.transform(""),p.transform("")),o.removeClass("panel-resizing"),r((()=>{o.transition(""),"cover"!==c&&(p.transition(""),v&&v.transition(""))}))}function E(){e.opened&&e.resizableWidth&&(m=k(o.css("min-width")),w=k(o.css("max-width")),m&&!Number.isNaN(m)&&e.resizableWidth<m&&(e.resizableWidth=Math.max(e.resizableWidth,m)),w&&!Number.isNaN(w)&&e.resizableWidth>w&&(e.resizableWidth=Math.min(e.resizableWidth,w)),e.resizableWidth=Math.min(Math.max(e.resizableWidth,0),a.width),l[0].style.setProperty(`--f7-panel-${d}-width`,`${e.resizableWidth}px`))}0===e.$el.find(".panel-resize-handler").length&&e.$el.append('<div class="panel-resize-handler"></div>'),e.$resizeHandlerEl=e.$el.children(".panel-resize-handler"),o.addClass("panel-resizable");const y=!!t.passiveListener&&{passive:!0};e.$el.on(a.touchEvents.start,".panel-resize-handler",$,y),a.on("touchmove:active",z),a.on("touchend:passive",B),a.on("resize",E),e.on("beforeOpen",E),e.once("panelDestroy",(()=>{o.removeClass("panel-resizable"),e.$resizeHandlerEl.remove(),e.$el.off(a.touchEvents.start,".panel-resize-handler",$,y),a.off("touchmove:active",z),a.off("touchend:passive",B),a.off("resize",E),e.off("beforeOpen",E)}))}class c extends l{constructor(e,a={}){const t=i({on:{}},e.params.panel,a);super(t,[e]);const s=this;let l;if(s.params=t,s.$containerEl=s.params.containerEl?n(s.params.containerEl).eq(0):e.$el,s.containerEl=s.$containerEl[0],s.containerEl||(s.$containerEl=e.$el,s.containerEl=e.$el[0]),s.params.el?l=n(s.params.el).eq(0):s.params.content&&(l=n(s.params.content).filter((e=>1===e.nodeType)).eq(0)),0===l.length)return s;if(l[0].f7Panel)return l[0].f7Panel;l[0].f7Panel=s;let o,{side:r,effect:p,resizable:d}=s.params;return void 0===r&&(r=l.hasClass("panel-left")?"left":"right"),void 0===p&&(p=l.hasClass("panel-cover")?"cover":l.hasClass("panel-push")?"push":"reveal"),void 0===d&&(d=l.hasClass("panel-resizable")),s.params.backdrop&&s.params.backdropEl?o=n(s.params.backdropEl):s.params.backdrop&&(o=s.$containerEl.children(".panel-backdrop"),0===o.length&&(o=n('<div class="panel-backdrop"></div>'),s.$containerEl.prepend(o))),i(s,{app:e,side:r,effect:p,resizable:d,$el:l,el:l[0],opened:!1,$backdropEl:o,backdropEl:o&&o[0]}),s.useModules(),s.init(),s}getViewEl(){const e=this;let a;return a=e.$containerEl.children(".views").length>0?e.$containerEl.children(".views")[0]:e.$containerEl.children(".view")[0],a}setStateClasses(e){const a=this,{side:t,el:s}=a,l=a.getViewEl(),i=l&&l.contains(s),o=!l||i?a.$containerEl:n("html");"open"===e&&o.addClass(`with-panel with-panel-${a.side}-${a.effect}`),"before-closing"===e&&o.addClass("with-panel-closing"),"closing"===e&&(o.addClass("with-panel-closing"),o.removeClass(`with-panel with-panel-${a.side}-${a.effect}`)),"after-closing"===e&&o.removeClass("with-panel-closing"),"closed"===e&&o.removeClass(`with-panel-${t}-reveal with-panel-${t}-cover with-panel-${t}-push with-panel`)}enableVisibleBreakpoint(){const e=this;return e.visibleBreakpointDisabled=!1,e.setVisibleBreakpoint(),e}disableVisibleBreakpoint(){const e=this;return e.visibleBreakpointDisabled=!0,e.setVisibleBreakpoint(),e}toggleVisibleBreakpoint(){const e=this;return e.visibleBreakpointDisabled=!e.visibleBreakpointDisabled,e.setVisibleBreakpoint(),e}setVisibleBreakpoint(e=!0){const a=this,t=a.app;a.visibleBreakpointResizeHandler||(a.visibleBreakpointResizeHandler=function(){a.setVisibleBreakpoint()},t.on("resize",a.visibleBreakpointResizeHandler));const{side:s,$el:l,$containerEl:i,params:o,visibleBreakpointDisabled:r}=a,p=o.visibleBreakpoint,d=n(a.getViewEl()),c=l.hasClass("panel-in-breakpoint");i&&i.hasClass("page")&&d.add(i.children(".page-content, .tabs, .fab")),t.width>=p&&null!=p&&!r?c?d.css({[`margin-${s}`]:`${l.width()}px`}):(a.setStateClasses("closed"),l.addClass("panel-in-breakpoint").removeClass("panel-in panel-in-collapsed"),a.onOpen(!1),a.onOpened(),d.css({[`margin-${s}`]:`${l.width()}px`}),t.allowPanelOpen=!0,e&&(a.emit("local::breakpoint panelBreakpoint",a),a.$el.trigger("panel:breakpoint"))):c&&(l.removeClass("panel-in-breakpoint panel-in"),a.onClose(),a.onClosed(),d.css({[`margin-${s}`]:""}),e&&(a.emit("local::breakpoint panelBreakpoint",a),a.$el.trigger("panel:breakpoint")))}enableCollapsedBreakpoint(){const e=this;return e.collapsedBreakpointDisabled=!1,e.setCollapsedBreakpoint(),e}disableCollapsedBreakpoint(){const e=this;return e.collapsedBreakpointDisabled=!0,e.setCollapsedBreakpoint(),e}toggleCollapsedBreakpoint(){const e=this;return e.collapsedBreakpointDisabled=!e.collapsedBreakpointDisabled,e.setCollapsedBreakpoint(),e}setCollapsedBreakpoint(e=!0){const a=this,n=a.app;a.collapsedBreakpointResizeHandler||(a.collapsedBreakpointResizeHandler=function(){a.setCollapsedBreakpoint()},n.on("resize",a.collapsedBreakpointResizeHandler));const{$el:t,params:s,collapsedBreakpointDisabled:l}=a;if(t.hasClass("panel-in-breakpoint"))return;const i=s.collapsedBreakpoint,o=t.hasClass("panel-in-collapsed");n.width>=i&&null!=i&&!l?o||(a.setStateClasses("closed"),t.addClass("panel-in-collapsed").removeClass("panel-in"),a.collapsed=!0,n.allowPanelOpen=!0,e&&(a.emit("local::collapsedBreakpoint panelCollapsedBreakpoint",a),a.$el.trigger("panel:collapsedbreakpoint"))):o&&(t.removeClass("panel-in-collapsed panel-in"),a.collapsed=!1,e&&(a.emit("local::collapsedBreakpoint panelCollapsedBreakpoint",a),a.$el.trigger("panel:collapsedbreakpoint")))}enableResizable(){const e=this;return e.resizableInitialized?(e.resizable=!0,e.$el.addClass("panel-resizable")):d(e),e}disableResizable(){const e=this;return e.resizable=!1,e.$el.removeClass("panel-resizable"),e}enableSwipe(){const e=this;return e.swipeInitialized?e.swipeable=!0:function(e){const a=e.app;if(e.swipeInitialized)return;i(e,{swipeable:!0,swipeInitialized:!0});const t=e.params,{$el:s,$backdropEl:l,side:p,effect:d}=e;let c,h,f,b,g,u;const v={};let m,w,C,k,$,z,B,E=0;function y(s){if(!e.swipeable||f)return;if(!a.panel.allowOpen||!t.swipe&&!t.swipeOnlyClose||h)return;if(n(".modal-in:not(.toast):not(.notification), .photo-browser-in").length>0)return;c=a.panel.get("left"===p?"right":"left")||{};const l=c.opened&&c.$el&&!c.$el.hasClass("panel-in-breakpoint");if((e.opened||!l)&&(t.swipeOnlyClose||!l)&&(!s.target||"input"!==s.target.nodeName.toLowerCase()||"range"!==s.target.type)&&!(n(s.target).closest(".range-slider, .tabs-swipeable-wrap, .calendar-months, .no-swipe-panel, .card-opened").length>0)&&(v.x="touchstart"===s.type?s.targetTouches[0].pageX:s.pageX,v.y="touchstart"===s.type?s.targetTouches[0].pageY:s.pageY,!t.swipeOnlyClose||e.opened)){if(t.swipeActiveArea&&!e.opened){if("left"===p&&v.x>t.swipeActiveArea)return;if("right"===p&&v.x<a.width-t.swipeActiveArea)return}E=0,B=n(e.getViewEl()),b=!1,h=!0,g=void 0,u=!1,m=o(),z=void 0}}function x(n){if(!h||f||u)return;if(E+=1,E<2)return;if(n.f7PreventSwipePanel||a.preventSwipePanelBySwipeBack||a.preventSwipePanel)return void(h=!1);const i="touchmove"===n.type?n.targetTouches[0].pageX:n.pageX,o="touchmove"===n.type?n.targetTouches[0].pageY:n.pageY;if(void 0===g&&(g=!!(g||Math.abs(o-v.y)>Math.abs(i-v.x))),g)return void(h=!1);if(!z){if(z=i>v.x?"to-right":"to-left",t.swipeActiveArea>0&&!e.opened){if("left"===p&&v.x>t.swipeActiveArea)return void(h=!1);if("right"===p&&v.x<a.width-t.swipeActiveArea)return void(h=!1)}if(s.hasClass("panel-in-breakpoint"))return void(h=!1);if("left"===p&&"to-left"===z&&!s.hasClass("panel-in")||"right"===p&&"to-right"===z&&!s.hasClass("panel-in"))return void(h=!1)}let r=e.opened?0:-t.swipeThreshold;"right"===p&&(r=-r),b||(e.opened||(e.insertToRoot(),s.addClass("panel-in-swipe"),l.css("visibility","visible"),s.trigger("panel:swipeopen"),e.emit("local::swipeOpen panelSwipeOpen",e)),$=s[0].offsetWidth,"reveal"===d&&s.hasClass("panel-in-collapsed")&&($-=parseFloat(B.css(`margin-${p}`))),s.transition(0)),b=!0,n.cancelable&&n.preventDefault(),w=i-v.x+r,"right"===p?"cover"===d||"push"===d?(C=w+(e.opened?0:$),C<0&&(C=0),C>$&&(C=$)):(C=w-(e.opened?$:0),C>0&&(C=0),C<-$&&(C=-$)):(C=w+(e.opened?$:0),C<0&&(C=0),C>$&&(C=$));const c=Math.abs(C/$);if("reveal"===d)t.swipeNoFollow||(B.transform(`translate3d(${C}px,0,0)`).transition(0),l.transform(`translate3d(${C}px,0,0)`).transition(0)),s.trigger("panel:swipe",Math.abs(C/$)),e.emit("local::swipe panelSwipe",e,Math.abs(C/$));else{if("left"===p&&(C-=$),!t.swipeNoFollow&&(l.transition(0),k=1-Math.abs(C/$),l.css({opacity:k}),s.transform(`translate3d(${C}px,0,0)`).transition(0),"push"===d)){const e="left"===p?C+$:C-$;B.transform(`translate3d(${e}px,0,0)`).transition(0),l.transform(`translate3d(${e}px,0,0)`).transition(0)}s.trigger("panel:swipe",Math.abs(C/$)),e.emit("local::swipe panelSwipe",e,Math.abs(C/$))}t.swipeNoFollow&&(e.opened&&0===c||!e.opened&&1===c)&&(u=!0,O(n))}function O(a){if(!h||!b)return h=!1,void(b=!1);const n="gesturestart"===a.type||f;h=!1,b=!1;const i=(new Date).getTime()-m;let o;const c=(0===C||Math.abs(C)===$)&&!t.swipeNoFollow,g=t.swipeThreshold||0;o=n?"reset":e.opened?"cover"===d||"push"===d?0===C?"reset":i<300&&Math.abs(C)>0?"swap":i>=300&&Math.abs(C)<$/2?"reset":"swap":C===-$?"reset":i<300&&Math.abs(C)>=0||i>=300&&Math.abs(C)<=$/2?"left"===p&&C===$?"reset":"swap":"reset":Math.abs(w)<g?"reset":"cover"===d||"push"===d?0===C||i<300&&Math.abs(C)>0||i>=300&&Math.abs(C)<$/2?"swap":"reset":0===C?"reset":i<300&&Math.abs(C)>0||i>=300&&Math.abs(C)>=$/2?"swap":"reset","swap"===o&&(e.opened?e.close(!c):e.open(!c));let u=!0;if("reset"===o&&!e.opened)if(c)s.removeClass("panel-in-swipe");else{u=!1;const a="reveal"===d?B:s;e.setStateClasses("before-closing"),a.transitionEnd((()=>{s.hasClass("panel-in")||(s.removeClass("panel-in-swipe"),e.setStateClasses("after-closing"))}))}"reveal"!==d&&"push"!==d||r((()=>{B.transition(""),B.transform("")})),u&&s.removeClass("panel-in-swipe"),s.transition("").transform(""),l.transform("").transition("").css({opacity:"",visibility:""})}function M(e){f=!0,O(e)}function N(){f=!1}a.on("touchstart:passive",y),a.on("touchmove:active",x),a.on("touchend:passive",O),a.on("gesturestart",M),a.on("gestureend",N),e.on("panelDestroy",(()=>{a.off("touchstart:passive",y),a.off("touchmove:active",x),a.off("touchend:passive",O),a.off("gesturestart",M),a.off("gestureend",N)}))}(e),e}disableSwipe(){return this.swipeable=!1,this}onOpen(e=!0){const a=this,n=a.app;a.opened=!0,n.panel.allowOpen=!1,a.$el.trigger("panel:beforeopen"),a.emit("local::beforeOpen panelBeforeOpen",a),e&&a.setStateClasses("open"),a.$el.trigger("panel:open"),a.emit("local::open panelOpen",a)}onOpened(){const e=this;e.app.panel.allowOpen=!0,e.$el.trigger("panel:opened"),e.emit("local::opened panelOpened",e)}onClose(){const e=this,a=e.app;e.opened=!1,a.panel.allowOpen=!1,e.$el.trigger("panel:beforeclose"),e.emit("local::beforeClose panelBeforeClose",e),e.setStateClasses("closing"),e.$el.trigger("panel:close"),e.emit("local::close panelClose",e)}onClosed(){const e=this,a=e.app;if(a.panel.allowOpen=!0,e.setStateClasses("after-closing"),e.$el.removeClass("panel-out"),e.$backdropEl){const n=a.panel.get(".panel-in");(!n||n&&!n.$backdropEl)&&e.$backdropEl.removeClass("panel-backdrop-in")}e.$el.trigger("panel:closed"),e.emit("local::closed panelClosed",e)}toggle(e=!0){const a=this,n=a.params.visibleBreakpoint;return a.app.width>=n&&null!=n?a.toggleVisibleBreakpoint():(a.opened?a.close(e):a.open(e),a)}insertToRoot(){const e=this,a=getDocument(),{$el:n,$backdropEl:t,$containerEl:s}=e,l=n.parent(),i=n.parents(a).length>0;if(!l.is(s)||n.prevAll(".views, .view").length){const a=s.children(".panel, .views, .view").eq(0),o=s.children(".panel-backdrop").eq(0);a.length?n.insertBefore(a):o?n.insertBefore(o):s.prepend(n),t&&t.length&&(!t.parent().is(s)&&0===t.nextAll(".panel").length||t.parent().is(s)&&0===t.nextAll(".panel").length)&&t.insertBefore(n),e.once("panelClosed",(()=>{i?l.append(n):n.remove()}))}}open(e=!0){const a=this,t=a.app;if(!t.panel.allowOpen)return!1;const{effect:s,$el:l,$backdropEl:i,opened:o,$containerEl:r}=a;if(!l||l.hasClass("panel-in"))return a;if(a.insertToRoot(),o||l.hasClass("panel-in-breakpoint")||l.hasClass("panel-in"))return!1;const p=t.panel.get(".panel-in");p&&p!==a&&p.close(e),l[e?"removeClass":"addClass"]("not-animated"),l.addClass("panel-in"),i&&(i.addClass("panel-backdrop-in"),i[e?"removeClass":"addClass"]("not-animated")),"cover"!==a.effect&&"push"!==a.effect||(a._clientLeft=l[0].clientLeft);const d=n(a.getViewEl());r&&r.hasClass("page")&&d.add(r.children(".page-content, .tabs"));const c="reveal"===s?d:l;return e?(i&&i.removeClass("not-animated"),function e(){c.transitionEnd((t=>{n(t.target).is(c)?l.hasClass("panel-out")?a.onClosed():a.onOpened():e()}))}(),l.removeClass("panel-out not-animated").addClass("panel-in"),a.onOpen()):(i&&i.addClass("not-animated"),l.removeClass("panel-out").addClass("panel-in not-animated"),a.onOpen(),a.onOpened()),!0}close(e=!0){const a=this,{effect:t,$el:s,$backdropEl:l,opened:i,$containerEl:o}=a;if(!i||s.hasClass("panel-in-breakpoint")||!s.hasClass("panel-in"))return a;s[e?"removeClass":"addClass"]("not-animated"),l&&l[e?"removeClass":"addClass"]("not-animated");const r=n(a.getViewEl());o&&o.hasClass("page")&&r.add(o.children(".page-content, .tabs"));return e?(("reveal"===t?r:s).transitionEnd((()=>{s.hasClass("panel-out")?a.onClosed():s.hasClass("panel-in")&&a.onOpened(),a.setStateClasses("after-closing")})),s.removeClass("panel-in").addClass("panel-out"),a.onClose()):(s.addClass("not-animated").removeClass("panel-in").addClass("panel-out"),a.onClose(),a.onClosed()),a}init(){const e=this;void 0!==e.params.visibleBreakpoint&&e.setVisibleBreakpoint(),void 0!==e.params.collapsedBreakpoint&&e.setCollapsedBreakpoint(),e.params.swipe&&e.enableSwipe(),e.resizable&&e.enableResizable()}destroy(){let e=this;const a=e.app,{$containerEl:t}=e;if(e.$el){if(e.emit("local::beforeDestroy panelBeforeDestroy",e),e.$el.trigger("panel:beforedestroy"),e.visibleBreakpointResizeHandler&&a.off("resize",e.visibleBreakpointResizeHandler),e.collapsedBreakpointResizeHandler&&a.off("resize",e.collapsedBreakpointResizeHandler),e.$el.hasClass("panel-in-breakpoint")||e.$el.hasClass("panel-in-collapsed")){const a=n(e.getViewEl());t&&t.hasClass("page")&&a.add(t.children(".page-content, .tabs")),e.$el.removeClass("panel-in-breakpoint panel-in-collapsed panel-in"),a.css({[`margin-${e.side}`]:""}),e.emit("local::breakpoint panelBreakpoint",e),e.$el.trigger("panel:breakpoint")}e.$el.trigger("panel:destroy"),e.emit("local::destroy panelDestroy",e),e.el&&(e.el.f7Panel=null,delete e.el.f7Panel),p(e),e=null}}}var h={name:"panel",params:{panel:{opened:void 0,side:void 0,effect:void 0,resizable:void 0,backdrop:!0,backdropEl:void 0,visibleBreakpoint:void 0,collapsedBreakpoint:void 0,swipe:!1,swipeNoFollow:!1,swipeOnlyClose:!1,swipeActiveArea:0,swipeThreshold:0,closeByBackdropClick:!0,containerEl:void 0}},static:{Panel:c},create(){const e=this;i(e,{panel:{allowOpen:!0,create:a=>new c(e,a),get(e=".panel"){if(e instanceof c)return e;"left"!==e&&"right"!==e||(e=`.panel-${e}`);const a=n(e);return 0===a.length||a.length>1?void 0:a[0].f7Panel},destroy(a=".panel"){const n=e.panel.get(a);if(n&&n.destroy)return n.destroy()},open(a=".panel",n){"left"!==a&&"right"!==a||(a=`.panel-${a}`);let t=e.panel.get(a);return t&&t.open?t.open(n):t?void 0:(t=e.panel.create({el:a}),t.open(n))},close(a=".panel-in",n){"left"!==a&&"right"!==a||(a=`.panel-${a}`);let t=e.panel.get(a);return t&&t.open?t.close(n):t?void 0:(t=e.panel.create({el:a}),t.close(n))},toggle(a=".panel",n){"left"!==a&&"right"!==a||(a=`.panel-${a}`);let t=e.panel.get(a);return t&&t.toggle?t.toggle(n):t?void 0:(t=e.panel.create({el:a}),t.toggle(n))}}})},on:{init(){const e=this;n(".panel-init").each((a=>{const t=Object.assign({el:a},n(a).dataset()||{});e.panel.create(t)}))},pageInit(e){const a=this;e.$el.find(".panel-init").each((e=>{const t=Object.assign({el:e},n(e).dataset()||{});a.panel.create(t)}))},pageBeforeRemove(e){const a=this;e.$el.find(".panel-init").each((e=>{const n=a.panel.get(e);n&&n.destroy&&n.destroy()}))}},vnode:{"panel-init":{insert(e){const a=e.elm,t=Object.assign({el:a},n(a).dataset()||{});this.panel.create(t)},destroy(e){const a=e.elm,n=this.panel.get(a);n&&n.destroy&&n.destroy()}}},clicks:{".panel-open":function(e,a={}){this.panel.open(a.panel,a.animate)},".panel-close":function(e,a={}){this.panel.close(a.panel,a.animate)},".panel-toggle":function(e,a={}){this.panel.toggle(a.panel,a.animate)},".panel-backdrop":function(){const e=this,a=n(".panel-in:not(.panel-out)");if(!a.length)return;const t=a[0]&&a[0].f7Panel;a.trigger("panel:backdrop-click"),t&&t.emit("backdropClick",t),e.emit("panelBackdropClick",t||a[0]),e.params.panel.closeByBackdropClick&&e.panel.close()}}};if(a){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/{esm/components → components}/panel/resizable-panel.js

@@ -3,29 +3,31 @@ import { extend, nextFrame } from '../../shared/utils';
 import { getSupport } from '../../shared/get-support';
 
 function resizablePanel(panel) {
-  var app = panel.app;
-  var support = getSupport();
+  const app = panel.app;
+  const support = getSupport();
   if (panel.resizableInitialized) return;
   extend(panel, {
     resizable: true,
     resizableWidth: null,
     resizableInitialized: true
   });
-  var $htmlEl = $('html');
-  var $el = panel.$el,
-      $backdropEl = panel.$backdropEl,
-      side = panel.side,
-      effect = panel.effect;
+  const $htmlEl = $('html');
+  const {
+    $el,
+    $backdropEl,
+    side,
+    effect
+  } = panel;
   if (!$el) return;
-  var isTouched;
-  var isMoved;
-  var touchesStart = {};
-  var touchesDiff;
-  var panelWidth;
-  var $viewEl;
-  var panelMinWidth;
-  var panelMaxWidth;
-  var visibleByBreakpoint;
+  let isTouched;
+  let isMoved;
+  const touchesStart = {};
+  let touchesDiff;
+  let panelWidth;
+  let $viewEl;
+  let panelMinWidth;
+  let panelMaxWidth;
+  let visibleByBreakpoint;
 
   function transformCSSWidth(v) {
     if (!v) return null;
@@ -34,7 +36,7 @@ function resizablePanel(panel) {
       return parseInt(v, 10) / 100 * app.width;
     }
 
-    var newV = parseInt(v, 10);
+    const newV = parseInt(v, 10);
     if (Number.isNaN(newV)) return null;
     return newV;
   }
@@ -56,7 +58,7 @@ function resizablePanel(panel) {
 
   function handleTouchMove(e) {
     if (!isTouched) return;
-    var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+    const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
 
     if (!isMoved) {
       panelWidth = $el[0].offsetWidth;
@@ -81,7 +83,7 @@ function resizablePanel(panel) {
     isMoved = true;
     e.preventDefault();
     touchesDiff = pageX - touchesStart.x;
-    var newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;
+    let newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;
 
     if (panelMinWidth && !Number.isNaN(panelMinWidth)) {
       newPanelWidth = Math.max(newPanelWidth, panelMinWidth);
@@ -93,18 +95,18 @@ function resizablePanel(panel) {
 
     newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width);
     panel.resizableWidth = newPanelWidth;
-    $el[0].style.width = newPanelWidth + "px";
+    $el[0].style.width = `${newPanelWidth}px`;
 
     if (effect !== 'cover' && !visibleByBreakpoint) {
       if ($viewEl) {
-        $viewEl.transform("translate3d(" + (side === 'left' ? newPanelWidth : -newPanelWidth) + "px, 0, 0)");
+        $viewEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
       }
 
       if ($backdropEl) {
-        $backdropEl.transform("translate3d(" + (side === 'left' ? newPanelWidth : -newPanelWidth) + "px, 0, 0)");
+        $backdropEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
       }
     } else if (visibleByBreakpoint && $viewEl) {
-      $viewEl.css("margin-" + side, newPanelWidth + "px");
+      $viewEl.css(`margin-${side}`, `${newPanelWidth}px`);
     }
 
     $el.trigger('panel:resize', newPanelWidth);
@@ -122,7 +124,7 @@ function resizablePanel(panel) {
 
     isTouched = false;
     isMoved = false;
-    $htmlEl[0].style.setProperty("--f7-panel-" + side + "-width", panel.resizableWidth + "px");
+    $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
     $el[0].style.width = '';
 
     if (effect !== 'cover' && !visibleByBreakpoint) {
@@ -131,7 +133,7 @@ function resizablePanel(panel) {
     }
 
     $el.removeClass('panel-resizing');
-    nextFrame(function () {
+    nextFrame(() => {
       $el.transition('');
 
       if (effect !== 'cover') {
@@ -155,7 +157,7 @@ function resizablePanel(panel) {
     }
 
     panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width);
-    $htmlEl[0].style.setProperty("--f7-panel-" + side + "-width", panel.resizableWidth + "px");
+    $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
   }
 
   if (panel.$el.find('.panel-resize-handler').length === 0) {
@@ -165,7 +167,7 @@ function resizablePanel(panel) {
   panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler');
   $el.addClass('panel-resizable'); // Add Events
 
-  var passive = support.passiveListener ? {
+  const passive = support.passiveListener ? {
     passive: true
   } : false;
   panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);
@@ -173,7 +175,7 @@ function resizablePanel(panel) {
   app.on('touchend:passive', handleTouchEnd);
   app.on('resize', handleResize);
   panel.on('beforeOpen', handleResize);
-  panel.once('panelDestroy', function () {
+  panel.once('panelDestroy', () => {
     $el.removeClass('panel-resizable');
     panel.$resizeHandlerEl.remove();
     panel.$el.off(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);