framework7 7.0.0-beta.8 → 7.0.0

package/components/picker/picker.d.ts

@@ -32,9 +32,8 @@ export namespace Picker {
     view: View.View;
     /** Object with initialization parameters */
     params: Parameters;
-
     /** Set new picker value. values is array where each item represents value for each column. duration - transition duration in ms */
-    setValue(values: unknown[], duration?: number): void;
+    setValue(values: unknown[]): void;
     /** Returns current picker value */
     getValue(): unknown;
     /** Open Picker */
@@ -60,7 +59,7 @@ export namespace Picker {
     activeIndex: number;
 
     /** Set new value for current column. value is a new value, duration - transition duration in ms */
-    setValue(value: unknown, duration?: number): void;
+    setValue(value: unknown): void;
     /** Replace column values and displayValues with new ones */
     replaceValues(values: unknown[], displayValues: unknown[]): void;
   }
@@ -87,16 +86,6 @@ export namespace Picker {
   interface Parameters {
     /** Enables 3D rotate effect. (default false) */
     rotateEffect?: boolean;
-    /** Larger values produces more momentum when you release picker after fast touch and move. (default 7) */
-    momentumRatio?: number;
-    /** Updates picker and input values during momentum. (default false) */
-    updateValuesOnMomentum?: boolean;
-    /** Updates picker and input values during touch move. (default true) */
-    updateValuesOnTouchmove?: boolean;
-    /** Updates picker and input values during mousewheel scrolling. (default true) */
-    updateValuesOnMousewheel?: boolean;
-    /** Allow to scroll through picker with mousewheel (default true) */
-    mousewheel?: boolean;
     /** Disables snapping on values. (default false) */
     freeMode?: boolean;
     /** Array with initial values. Each array item represents value of related column. */

package/components/picker/picker.js

@@ -16,7 +16,11 @@ export default {
       domProp: 'f7Picker'
     });
 
-    app.picker.close = function close(el = '.picker') {
+    app.picker.close = function close(el) {
+      if (el === void 0) {
+        el = '.picker';
+      }
+
       const $el = $(el);
       if ($el.length === 0) return;
       const picker = $el[0].f7Picker;
@@ -28,12 +32,7 @@ export default {
   params: {
     picker: {
       // Picker settings
-      updateValuesOnMomentum: false,
-      updateValuesOnTouchmove: true,
-      updateValuesOnMousewheel: true,
-      mousewheel: true,
       rotateEffect: false,
-      momentumRatio: 7,
       freeMode: false,
       cols: [],
       // Common opener settings

package/components/picker/picker.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var s=e.$,n=e.utils,i=e.getDevice,a=e.getSupport,l=e.Class,o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,n.requestAnimationFrame),c=n.getTranslate,p=n.extend,d=n.nextTick,u=n.deleteProps;function m(e,t){const n=this,i=n.app,l=s(e),o=l.index(),p=n.cols[o];if(p.divider)return;let d,u,m,h,v;function f(){v=r((()=>{p.updateItems(void 0,void 0,0),f()}))}p.$el=l,p.el=l[0],p.$itemsEl=p.$el.find(".picker-items"),p.items=p.$itemsEl.find(".picker-item"),p.replaceValues=function(e,t){p.detachEvents(),p.values=e,p.displayValues=t,p.$itemsEl.html(n.renderColumn(p,!0)),p.items=p.$itemsEl.find(".picker-item"),p.calcSize(),p.setValue(p.values[0],0,!0),p.attachEvents()},p.calcSize=function(){n.params.rotateEffect&&(p.$el.removeClass("picker-column-absolute"),p.width||p.$el.css({width:""}));let e=0;const t=p.$el[0].offsetHeight;d=p.items[0].offsetHeight,u=d*p.items.length,m=t/2-u+d/2,h=t/2-d/2,p.width&&(e=p.width,parseInt(e,10)===e&&(e+="px"),p.$el.css({width:e})),n.params.rotateEffect&&(p.width||(p.items.each((t=>{const n=s(t).children("span");e=Math.max(e,n[0].offsetWidth)})),p.$el.css({width:`${e+2}px`})),p.$el.addClass("picker-column-absolute"))},p.setValue=function(e,t="",s){const i=p.$itemsEl.find(`.picker-item[data-picker-value="${e}"]`).index();if(void 0===i||-1===i)return;const a=-i*d+h;p.$itemsEl.transition(t),p.$itemsEl.transform(`translate3d(0,${a}px,0)`),n.params.updateValuesOnMomentum&&p.activeIndex&&p.activeIndex!==i&&(cancelAnimationFrame(v),p.$itemsEl.transitionEnd((()=>{cancelAnimationFrame(v)})),f()),p.updateItems(i,a,t,s)},p.updateItems=function(e,t,i,a){void 0===t&&(t=c(p.$itemsEl[0],"y")),void 0===e&&(e=-Math.round((t-h)/d)),e<0&&(e=0),e>=p.items.length&&(e=p.items.length-1);const l=p.activeIndex;p.activeIndex=e,p.$itemsEl.find(".picker-item-selected").removeClass("picker-item-selected"),p.items.transition(i);const o=p.items.eq(e).addClass("picker-item-selected").transform("");n.params.rotateEffect&&p.items.each((e=>{const i=s(e),a=(i.index()*d-(h-t))/d,l=Math.ceil(p.height/d/2)+1;let o=-18*a;o>180&&(o=180),o<-180&&(o=-180),Math.abs(a)>l?i.addClass("picker-item-far"):i.removeClass("picker-item-far"),i.transform(`translate3d(0, ${-t+h}px, ${n.needsOriginFix?-110:0}px) rotateX(${o}deg)`)})),(a||void 0===a)&&(p.value=o.attr("data-picker-value"),p.displayValue=p.displayValues?p.displayValues[e]:p.value,l!==e&&(p.onChange&&p.onChange(n,p.value,p.displayValue),n.updateValue()))};let $,E,g,k,x,y,C,V,w,b,M,T,I=!0;function O(e){E||$||(e.preventDefault(),$=!0,g="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,k=g,x=(new Date).getTime(),I=!0,C=c(p.$itemsEl[0],"y"),w=C)}function j(e){if(!$)return;e.preventDefault(),I=!1,k="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,E||(cancelAnimationFrame(v),E=!0,C=c(p.$itemsEl[0],"y"),w=C,p.$itemsEl.transition(0));w=C+(k-g),V=void 0,w<m&&(w=m-(m-w)**.8,V="min"),w>h&&(w=h+(w-h)**.8,V="max"),p.$itemsEl.transform(`translate3d(0,${w}px,0)`),p.updateItems(void 0,w,0,n.params.updateValuesOnTouchmove),M=w-b||w,b=w}function P(){if(!$||!E)return $=!1,void(E=!1);let e;$=!1,E=!1,p.$itemsEl.transition(""),V&&("min"===V?p.$itemsEl.transform(`translate3d(0,${m}px,0)`):p.$itemsEl.transform(`translate3d(0,${h}px,0)`)),y=(new Date).getTime(),e=y-x>300?w:w+M*n.params.momentumRatio,e=Math.max(Math.min(e,h),m);const t=Math.round(Math.abs((e-h)/d));n.params.freeMode||(e=-t*d+h),p.$itemsEl.transform(`translate3d(0,${parseInt(e,10)}px,0)`),p.updateItems(t,e,"",!0),n.params.updateValuesOnMomentum&&(f(),p.$itemsEl.transitionEnd((()=>{cancelAnimationFrame(v)}))),setTimeout((()=>{I=!0}),100)}function z(e){const{deltaX:t,deltaY:s}=e;Math.abs(t)>Math.abs(s)||(clearTimeout(T),e.preventDefault(),cancelAnimationFrame(v),C=c(p.$itemsEl[0],"y"),p.$itemsEl.transition(0),w=C-s,V=void 0,w<m&&(w=m,V="min"),w>h&&(w=h,V="max"),p.$itemsEl.transform(`translate3d(0,${w}px,0)`),p.updateItems(void 0,w,0,n.params.updateValuesOnMousewheel),T=setTimeout((()=>{p.$itemsEl.transition(""),V&&("min"===V?p.$itemsEl.transform(`translate3d(0,${m}px,0)`):p.$itemsEl.transform(`translate3d(0,${h}px,0)`)),y=(new Date).getTime();let e=w;e=Math.max(Math.min(e,h),m);const t=Math.round(Math.abs((e-h)/d));n.params.freeMode||(e=-t*d+h),p.$itemsEl.transform(`translate3d(0,${parseInt(e,10)}px,0)`),p.updateItems(t,e,"",!0)}),200))}function R(){if(!I)return;cancelAnimationFrame(v);const e=s(this).attr("data-picker-value");p.setValue(e)}const A=!!a().passiveListener&&{passive:!1,capture:!1};p.attachEvents=function(){p.$el.on(i.touchEvents.start,O,A),i.on("touchmove:active",j),i.on("touchend:passive",P),n.params.mousewheel&&p.$el.on("wheel",z),p.items.on("click",R)},p.detachEvents=function(){p.$el.off(i.touchEvents.start,O,A),i.off("touchmove:active",j),i.off("touchend:passive",P),n.params.mousewheel&&p.$el.off("wheel",z),p.items.off("click",R)},p.init=function(){p.calcSize(),p.$itemsEl.transform(`translate3d(0,${h}px,0)`).transition(0),0===o&&p.$el.addClass("picker-column-first"),o===n.cols.length-1&&p.$el.addClass("picker-column-last"),t&&p.updateItems(0,h,0),p.attachEvents()},p.destroy=function(){p.detachEvents()},p.init()}class h extends l{constructor(e,t={}){super(t,[e]);const n=this,a=i(),l=getWindow();let o,r;if(n.params=p({},e.params.picker,t),n.params.containerEl&&(o=s(n.params.containerEl),0===o.length))return n;n.params.inputEl&&(r=s(n.params.inputEl));let c=n.params.scrollToInput?r:void 0;if(n.params.scrollToEl){const e=s(n.params.scrollToEl);e.length>0&&(c=e)}function d(){n.resizeCols()}function u(){n.open()}function m(e){e.preventDefault()}p(n,{app:e,$containerEl:o,containerEl:o&&o[0],inline:o&&o.length>0,needsOriginFix:a.ios||l.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&l.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!a.android,cols:[],$inputEl:r,inputEl:r&&r[0],$scrollToEl:c,initialized:!1,opened:!1,url:n.params.url});let h=null;function v(e){h=e.target}function f(e){if(n.destroyed||!n.params)return;const t=s(e.target);n.isPopover()||n.opened&&!n.closing&&(t.closest('[class*="backdrop"]').length||(r&&r.length>0?h===e.target&&t[0]!==r[0]&&0===t.closest(".sheet-modal").length&&n.close():0===s(e.target).closest(".sheet-modal").length&&n.close()))}return p(n,{attachResizeEvent(){e.on("resize",d)},detachResizeEvent(){e.off("resize",d)},attachInputEvents(){n.$inputEl.on("click",u),n.params.inputReadOnly&&(n.$inputEl.on("focus mousedown",m),n.$inputEl[0]&&(n.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){n.$inputEl.off("click",u),n.params.inputReadOnly&&(n.$inputEl.off("focus mousedown",m),n.$inputEl[0]&&delete n.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",f),e.on("touchstart",v)},detachHtmlEvents(){e.off("click",f),e.off("touchstart",v)}}),n.init(),n}get view(){const{app:e,params:t,$inputEl:s}=this;let n;return t.view?n=t.view:s&&(n=s.parents(".view").length&&s.parents(".view")[0].f7View),n||(n=e.views.main),n}initInput(){const e=this;e.$inputEl&&e.params.inputReadOnly&&e.$inputEl.prop("readOnly",!0)}resizeCols(){const e=this;if(e.opened)for(let t=0;t<e.cols.length;t+=1)e.cols[t].divider||(e.cols[t].calcSize(),e.cols[t].setValue(e.cols[t].value,0,!1))}isPopover(){const e=this,{app:t,modal:s,params:n}=e,a=i();if("sheet"===n.openIn)return!1;if(s&&"popover"!==s.type)return!1;if(!e.inline&&e.inputEl){if("popover"===n.openIn)return!0;if(a.ios)return!!a.ipad;if(t.width>=768)return!0;if(a.desktop&&"aurora"===t.theme)return!0}return!1}formatValue(){const e=this,{value:t,displayValue:s}=e;return e.params.formatValue?e.params.formatValue.call(e,t,s):t.join(" ")}setValue(e,t){const s=this;let n=0;if(0===s.cols.length)return s.value=e,void s.updateValue(e);for(let i=0;i<s.cols.length;i+=1)s.cols[i]&&!s.cols[i].divider&&(s.cols[i].setValue(e[n],t),n+=1)}getValue(){return this.value}updateValue(e){const t=this,s=e||[],n=[];let i;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)i=e[t],void 0!==i.displayValues&&void 0!==i.values&&-1!==i.values.indexOf(s[t])?n.push(i.displayValues[i.values.indexOf(s[t])]):n.push(s[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(s.push(t.cols[e].value),n.push(t.cols[e].displayValue));s.indexOf(void 0)>=0||(t.value=s,t.displayValue=n,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){m.call(this,e,t)}destroyColumn(e){const t=this,n=s(e).index();t.cols[n]&&t.cols[n].destroy&&t.cols[n].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):$jsx("div",{class:"toolbar toolbar-top no-shadow"},$jsx("div",{class:"toolbar-inner"},$jsx("div",{class:"left"}),$jsx("div",{class:"right"},$jsx("a",{class:"link sheet-close popover-close"},e.params.toolbarCloseText))))}renderColumn(e,t){const s=`picker-column ${e.textAlign?`picker-column-${e.textAlign}`:""} ${e.cssClass||""}`;let n,i;return e.divider?n=`\n          <div class="${s} picker-column-divider">${e.content}</div>\n        `:(i=e.values.map(((t,s)=>`\n          <div class="picker-item" data-picker-value="${t}">\n            <span>${e.displayValues?e.displayValues[s]:t}</span>\n          </div>\n        `)).join(""),n=`\n          <div class="${s}">\n            <div class="picker-items">${i}</div>\n          </div>\n        `),t?i.trim():n.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:s,toolbar:n}=e.params;return $jsx("div",{class:`picker picker-inline ${t?"picker-3d":""} ${s||""}`},n&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:s,toolbar:n}=e.params;return $jsx("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${s||""}`},n&&e.renderToolbar(),$jsx("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:s,toolbar:n}=e.params;return $jsx("div",{class:"popover picker-popover"},$jsx("div",{class:"popover-inner"},$jsx("div",{class:`picker ${t?"picker-3d":""} ${s||""}`},n&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))))}render(){const e=this;return e.params.render?e.params.render.call(e):e.inline?e.renderInline():e.isPopover()?e.renderPopover():e.renderSheet()}onOpen(){const e=this,{initialized:t,$el:s,app:n,$inputEl:i,inline:a,value:l,params:o}=e;e.opened=!0,e.closing=!1,e.opening=!0,e.attachResizeEvent(),s.find(".picker-column").each((s=>{let n=!0;(!t&&o.value||t&&l)&&(n=!1),e.initColumn(s,n)})),t?l&&e.setValue(l,0):l?e.setValue(l,0):o.value&&e.setValue(o.value,0),!a&&i&&i.length&&"md"===n.theme&&i.trigger("focus"),e.initialized=!0,s&&s.trigger("picker:open"),i&&i.trigger("picker:open"),e.emit("local::open pickerOpen",e)}onOpened(){const e=this;e.opening=!1,e.$el&&e.$el.trigger("picker:opened"),e.$inputEl&&e.$inputEl.trigger("picker:opened"),e.emit("local::opened pickerOpened",e)}onClose(){const e=this,t=e.app;if(e.opening=!1,e.closing=!0,e.detachResizeEvent(),e.cols.forEach((e=>{e.destroy&&e.destroy()})),e.$inputEl)if("md"===t.theme)e.$inputEl.trigger("blur");else{const s=e.$inputEl.attr("validate"),n=e.$inputEl.attr("required");s&&n&&t.input.validate(e.$inputEl)}e.$el&&e.$el.trigger("picker:close"),e.$inputEl&&e.$inputEl.trigger("picker:close"),e.emit("local::close pickerClose",e)}onClosed(){const e=this;e.opened=!1,e.closing=!1,e.inline||d((()=>{e.modal&&e.modal.el&&e.modal.destroy&&(e.params.routableModals||e.modal.destroy()),delete e.modal})),e.$el&&e.$el.trigger("picker:closed"),e.$inputEl&&e.$inputEl.trigger("picker:closed"),e.emit("local::closed pickerClosed",e)}open(){const e=this,{app:t,opened:n,inline:i,$inputEl:a,$scrollToEl:l,params:o}=e;if(n)return;if(0===e.cols.length&&o.cols.length&&o.cols.forEach((t=>{e.cols.push(t)})),i)return e.$el=s(e.render()),e.$el[0].f7Picker=e,e.$containerEl.append(e.$el),e.onOpen(),void e.onOpened();const r=e.isPopover(),c=r?"popover":"sheet",p={targetEl:a,scrollToEl:l,content:e.render(),backdrop:void 0!==o.backdrop?o.backdrop:r,on:{open(){const t=this;e.modal=t,e.$el=r?t.$el.find(".picker"):t.$el,e.$el[0].f7Picker=e,e.onOpen()},opened(){e.onOpened()},close(){e.onClose()},closed(){e.onClosed()}}};"sheet"===c&&(p.push=o.sheetPush,p.swipeToClose=o.sheetSwipeToClose),o.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,[c]:p}}):(e.modal=t[c].create(p),e.modal.open())}close(){const e=this,{opened:t,inline:s}=e;if(t)return s?(e.onClose(),void e.onClosed()):void(e.params.routableModals&&e.view?e.view.router.back():e.modal.close())}init(){const e=this;if(e.initInput(),e.inline)return e.open(),void e.emit("local::init pickerInit",e);!e.initialized&&e.params.value&&e.setValue(e.params.value),e.$inputEl&&e.attachInputEvents(),e.params.closeByOutsideClick&&e.attachHtmlEvents(),e.emit("local::init pickerInit",e)}destroy(){const e=this;if(e.destroyed)return;const{$el:t}=e;e.emit("local::beforeDestroy pickerBeforeDestroy",e),t&&t.trigger("picker:beforedestroy"),e.close(),e.$inputEl&&e.detachInputEvents(),e.params.closeByOutsideClick&&e.detachHtmlEvents(),t&&t.length&&delete e.$el[0].f7Picker,u(e),e.destroyed=!0}}var v={name:"picker",static:{Picker:h},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:h,app:e,domProp:"f7Picker"}),e.picker.close=function(e=".picker"){const t=s(e);if(0===t.length)return;const n=t[0].f7Picker;!n||n&&!n.opened||n.close()}},params:{picker:{updateValuesOnMomentum:!1,updateValuesOnTouchmove:!0,updateValuesOnMousewheel:!0,mousewheel:!0,rotateEffect:!1,momentumRatio:7,freeMode:!1,cols:[],containerEl:null,openIn:"auto",sheetPush:!1,sheetSwipeToClose:void 0,backdrop:void 0,formatValue:null,inputEl:null,inputReadOnly:!0,closeByOutsideClick:!0,scrollToInput:!0,scrollToEl:void 0,toolbar:!0,toolbarCloseText:"Done",cssClass:null,routableModals:!1,view:null,url:"select/",renderToolbar:null,render:null}}};if(t){if(e.prototype.modules&&e.prototype.modules[v.name])return;e.use(v),e.instance&&(e.instance.useModuleParams(v,e.instance.params),e.instance.useModule(v))}return v}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var l=e.$,s=e.utils,i=e.getDevice,n=(e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,s.extend),a=s.nextTick,c=s.deleteProps;function p(e,t){const s=this,i=l(e),n=i.index(),o=s.cols[n];if(o.divider)return;let r,a;function c(){o.updateItems()}function p(){const e=l(this).attr("data-picker-value");o.setValue(e)}o.$el=i,o.el=i[0],o.$itemsEl=o.$el.find(".picker-items"),o.items=o.$itemsEl.find(".picker-item"),o.replaceValues=function(e,t){o.detachEvents(),o.values=e,o.displayValues=t,o.$itemsEl.html(s.renderColumn(o,!0)),o.items=o.$itemsEl.find(".picker-item"),o.calcSize(),o.setValue(o.values[0],!0),o.attachEvents()},o.calcSize=function(){a=o.$el[0].offsetHeight,r=o.items[0].offsetHeight;const e=o.el.style.getPropertyValue("--f7-picker-scroll-padding");o.el.style.setProperty("--f7-picker-scroll-padding",(a-r)/2+"px"),e||(o.$itemsEl[0].scrollTop=0)},o.setValue=function(e,t){const l=o.$itemsEl.find(`.picker-item[data-picker-value="${e}"]`).index();if(void 0===l||-1===l)return;const s=l*r;o.$itemsEl[0].scrollTop=s,o.updateItems(l,s,t)},o.updateItems=function(e,t,i){void 0===t&&(t=o.$itemsEl[0].scrollTop),void 0===e&&(e=Math.round(t/r)),e<0&&(e=0),e>=o.items.length&&(e=o.items.length-1);const n=o.activeIndex;o.activeIndex=e,o.$itemsEl.find(".picker-item-selected").removeClass("picker-item-selected");const c=o.items.eq(e);c.addClass("picker-item-selected").children().transform(""),s.params.rotateEffect&&o.items.each((e=>{const s=l(e),i=(e.offsetTop-(a-r)/2-t)/r,n=Math.ceil(o.height/r/2)+1;let c=-24*i;c>180&&(c=180),c<-180&&(c=-180),Math.abs(i)>n?s.addClass("picker-item-far"):s.removeClass("picker-item-far"),s.children("span").transform(`translate3d(0, ${-i*r}px, -100px) rotateX(${c}deg)`)})),(i||void 0===i)&&(o.value=c.attr("data-picker-value"),o.displayValue=o.displayValues?o.displayValues[e]:o.value,n!==e&&(o.onChange&&o.onChange(s,o.value,o.displayValue),s.updateValue()))},o.attachEvents=function(){o.$itemsEl.on("scroll",c),o.items.on("click",p)},o.detachEvents=function(){o.items.off("click",p)},o.init=function(){o.calcSize(),0===n&&o.$el.addClass("picker-column-first"),n===s.cols.length-1&&o.$el.addClass("picker-column-last"),s.params.freeMode&&o.$el.addClass("picker-column-free-mode"),t&&o.updateItems(0),o.attachEvents()},o.destroy=function(){o.detachEvents()},o.init()}class d extends n{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const s=this,n=i(),o=getWindow();let a,c;if(s.params=r({},e.params.picker,t),s.params.containerEl&&(a=l(s.params.containerEl),0===a.length))return s;s.params.inputEl&&(c=l(s.params.inputEl));let p=s.params.scrollToInput?c:void 0;if(s.params.scrollToEl){const e=l(s.params.scrollToEl);e.length>0&&(p=e)}function d(){s.resizeCols()}function u(){s.open()}function m(e){e.preventDefault()}r(s,{app:e,$containerEl:a,containerEl:a&&a[0],inline:a&&a.length>0,needsOriginFix:n.ios||o.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&o.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!n.android,cols:[],$inputEl:c,inputEl:c&&c[0],$scrollToEl:p,initialized:!1,opened:!1,url:s.params.url});let v=null;function h(e){v=e.target}function f(e){if(s.destroyed||!s.params)return;const t=l(e.target);s.isPopover()||s.opened&&!s.closing&&(t.closest('[class*="backdrop"]').length||(c&&c.length>0?v===e.target&&t[0]!==c[0]&&0===t.closest(".sheet-modal").length&&s.close():0===l(e.target).closest(".sheet-modal").length&&s.close()))}return r(s,{attachResizeEvent(){e.on("resize",d)},detachResizeEvent(){e.off("resize",d)},attachInputEvents(){s.$inputEl.on("click",u),s.params.inputReadOnly&&(s.$inputEl.on("focus mousedown",m),s.$inputEl[0]&&(s.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){s.$inputEl.off("click",u),s.params.inputReadOnly&&(s.$inputEl.off("focus mousedown",m),s.$inputEl[0]&&delete s.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",f),e.on("touchstart",h)},detachHtmlEvents(){e.off("click",f),e.off("touchstart",h)}}),s.init(),s}get view(){const{app:e,params:t,$inputEl:l}=this;let s;return t.view?s=t.view:l&&(s=l.parents(".view").length&&l.parents(".view")[0].f7View),s||(s=e.views.main),s}initInput(){const e=this;e.$inputEl&&e.params.inputReadOnly&&e.$inputEl.prop("readOnly",!0)}resizeCols(){const e=this;if(e.opened)for(let t=0;t<e.cols.length;t+=1)e.cols[t].divider||(e.cols[t].calcSize(),e.cols[t].setValue(e.cols[t].value,!1))}isPopover(){const e=this,{app:t,modal:l,params:s}=e,n=i();if("sheet"===s.openIn)return!1;if(l&&"popover"!==l.type)return!1;if(!e.inline&&e.inputEl){if("popover"===s.openIn)return!0;if(n.ios)return!!n.ipad;if(t.width>=768)return!0;if(n.desktop&&"aurora"===t.theme)return!0}return!1}formatValue(){const e=this,{value:t,displayValue:l}=e;return e.params.formatValue?e.params.formatValue.call(e,t,l):t.join(" ")}setValue(e){const t=this;let l=0;if(0===t.cols.length)return t.value=e,void t.updateValue(e);for(let s=0;s<t.cols.length;s+=1)t.cols[s]&&!t.cols[s].divider&&(t.cols[s].setValue(e[l]),l+=1)}getValue(){return this.value}updateValue(e){const t=this,l=e||[],s=[];let i;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)i=e[t],void 0!==i.displayValues&&void 0!==i.values&&-1!==i.values.indexOf(l[t])?s.push(i.displayValues[i.values.indexOf(l[t])]):s.push(l[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(l.push(t.cols[e].value),s.push(t.cols[e].displayValue));l.indexOf(void 0)>=0||(t.value=l,t.displayValue=s,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){p.call(this,e,t)}destroyColumn(e){const t=this,s=l(e).index();t.cols[s]&&t.cols[s].destroy&&t.cols[s].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):$jsx("div",{class:"toolbar toolbar-top no-shadow"},$jsx("div",{class:"toolbar-inner"},$jsx("div",{class:"left"}),$jsx("div",{class:"right"},$jsx("a",{class:"link sheet-close popover-close"},e.params.toolbarCloseText))))}renderColumn(e,t){const l=`picker-column ${e.textAlign?`picker-column-${e.textAlign}`:""} ${e.cssClass||""}`;let s,i;return e.divider?s=`\n          <div class="${l} picker-column-divider">${e.content}</div>\n        `:(i=e.values.map(((t,l)=>`\n          <div class="picker-item" data-picker-value="${t}">\n            <span>${e.displayValues?e.displayValues[l]:t}</span>\n          </div>\n        `)).join(""),s=`\n          <div class="${l}">\n            <div class="picker-items">${i}</div>\n          </div>\n        `),t?i.trim():s.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:l,toolbar:s}=e.params;return $jsx("div",{class:`picker picker-inline ${t?"picker-3d":""} ${l||""}`},s&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:l,toolbar:s}=e.params;return $jsx("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${l||""}`},s&&e.renderToolbar(),$jsx("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:l,toolbar:s}=e.params;return $jsx("div",{class:"popover picker-popover"},$jsx("div",{class:"popover-inner"},$jsx("div",{class:`picker ${t?"picker-3d":""} ${l||""}`},s&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))))}render(){const e=this;return e.params.render?e.params.render.call(e):e.inline?e.renderInline():e.isPopover()?e.renderPopover():e.renderSheet()}onOpen(){const e=this,{initialized:t,$el:l,app:s,$inputEl:i,inline:n,value:o,params:r}=e;e.opened=!0,e.closing=!1,e.opening=!0,e.attachResizeEvent(),l.find(".picker-column").each((l=>{let s=!0;(!t&&r.value||t&&o)&&(s=!1),e.initColumn(l,s)})),t?o&&e.setValue(o):o?e.setValue(o):r.value&&e.setValue(r.value),!n&&i&&i.length&&"md"===s.theme&&i.trigger("focus"),e.initialized=!0,l&&l.trigger("picker:open"),i&&i.trigger("picker:open"),e.emit("local::open pickerOpen",e)}onOpened(){const e=this;e.opening=!1,e.$el&&e.$el.trigger("picker:opened"),e.$inputEl&&e.$inputEl.trigger("picker:opened"),e.emit("local::opened pickerOpened",e)}onClose(){const e=this,t=e.app;if(e.opening=!1,e.closing=!0,e.detachResizeEvent(),e.cols.forEach((e=>{e.destroy&&e.destroy()})),e.$inputEl)if("md"===t.theme)e.$inputEl.trigger("blur");else{const l=e.$inputEl.attr("validate"),s=e.$inputEl.attr("required");l&&s&&t.input.validate(e.$inputEl)}e.$el&&e.$el.trigger("picker:close"),e.$inputEl&&e.$inputEl.trigger("picker:close"),e.emit("local::close pickerClose",e)}onClosed(){const e=this;e.opened=!1,e.closing=!1,e.inline||a((()=>{e.modal&&e.modal.el&&e.modal.destroy&&(e.params.routableModals||e.modal.destroy()),delete e.modal})),e.$el&&e.$el.trigger("picker:closed"),e.$inputEl&&e.$inputEl.trigger("picker:closed"),e.emit("local::closed pickerClosed",e)}open(){const e=this,{app:t,opened:s,inline:i,$inputEl:n,$scrollToEl:o,params:r}=e;if(s)return;if(0===e.cols.length&&r.cols.length&&r.cols.forEach((t=>{e.cols.push(t)})),i)return e.$el=l(e.render()),e.$el[0].f7Picker=e,e.$containerEl.append(e.$el),e.onOpen(),void e.onOpened();const a=e.isPopover(),c=a?"popover":"sheet",p={targetEl:n,scrollToEl:o,content:e.render(),backdrop:void 0!==r.backdrop?r.backdrop:a,on:{open(){const t=this;e.modal=t,e.$el=a?t.$el.find(".picker"):t.$el,e.$el[0].f7Picker=e,e.onOpen()},opened(){e.onOpened()},close(){e.onClose()},closed(){e.onClosed()}}};"sheet"===c&&(p.push=r.sheetPush,p.swipeToClose=r.sheetSwipeToClose),r.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,[c]:p}}):(e.modal=t[c].create(p),e.modal.open())}close(){const e=this,{opened:t,inline:l}=e;if(t)return l?(e.onClose(),void e.onClosed()):void(e.params.routableModals&&e.view?e.view.router.back():e.modal.close())}init(){const e=this;if(e.initInput(),e.inline)return e.open(),void e.emit("local::init pickerInit",e);!e.initialized&&e.params.value&&e.setValue(e.params.value),e.$inputEl&&e.attachInputEvents(),e.params.closeByOutsideClick&&e.attachHtmlEvents(),e.emit("local::init pickerInit",e)}destroy(){const e=this;if(e.destroyed)return;const{$el:t}=e;e.emit("local::beforeDestroy pickerBeforeDestroy",e),t&&t.trigger("picker:beforedestroy"),e.close(),e.$inputEl&&e.detachInputEvents(),e.params.closeByOutsideClick&&e.detachHtmlEvents(),t&&t.length&&delete e.$el[0].f7Picker,c(e),e.destroyed=!0}}var u={name:"picker",static:{Picker:d},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:d,app:e,domProp:"f7Picker"}),e.picker.close=function(e){void 0===e&&(e=".picker");const t=l(e);if(0===t.length)return;const s=t[0].f7Picker;!s||s&&!s.opened||s.close()}},params:{picker:{rotateEffect:!1,freeMode:!1,cols:[],containerEl:null,openIn:"auto",sheetPush:!1,sheetSwipeToClose:void 0,backdrop:void 0,formatValue:null,inputEl:null,inputReadOnly:!0,closeByOutsideClick:!0,scrollToInput:!0,scrollToEl:void 0,toolbar:!0,toolbarCloseText:"Done",cssClass:null,routableModals:!1,view:null,url:"select/",renderToolbar:null,render:null}}};if(t){if(e.prototype.modules&&e.prototype.modules[u.name])return;e.use(u),e.instance&&(e.instance.useModuleParams(u,e.instance.params),e.instance.useModule(u))}return u}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/picker/picker.less

@@ -92,8 +92,16 @@
   }
 }
 .picker-items {
-  transition: 300ms;
-  transition-timing-function: ease-out;
+  overflow: auto;
+  scrollbar-width: none;
+  scroll-snap-type: y mandatory;
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--f7-picker-scroll-padding, 0px) 0px;
+  &::-webkit-scrollbar {
+    display: none;
+    opacity: 0;
+  }
 }
 .picker-item {
   height: var(--f7-picker-item-height);
@@ -106,15 +114,12 @@
   top: 0;
   width: 100%;
   box-sizing: border-box;
-  transition: 300ms;
   color: var(--f7-picker-item-text-color);
   cursor: pointer;
+  scroll-snap-align: center;
   span {
     padding: 0 10px;
   }
-  .picker-column-absolute & {
-    position: absolute;
-  }
   &.picker-item-far {
     pointer-events: none;
   }
@@ -122,6 +127,9 @@
     color: var(--f7-picker-item-selected-text-color);
     transform: translate3d(0, 0, 0) rotateX(0deg);
   }
+  .picker-column-free-mode & {
+    scroll-snap-align: none;
+  }
 }
 .picker-center-highlight {
   height: var(--f7-picker-item-height);
@@ -142,7 +150,6 @@
 .picker-3d {
   .picker-columns {
     overflow: hidden;
-    perspective: 1200px;
   }
   .picker-column,
   .picker-items,
@@ -153,9 +160,20 @@
     overflow: visible;
   }
   .picker-item {
-    transform-origin: center center -110px;
-    backface-visibility: hidden;
-    transition-timing-function: ease-out;
+    perspective: 1200px;
+    overflow: visible;
+
+    > span {
+      backface-visibility: hidden;
+      display: block;
+      transform-style: preserve-3d;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      max-width: 100%;
+      transform-origin: center center -100px;
+    }
   }
 }
 

package/components/pie-chart/pie-chart-class.js

@@ -6,7 +6,11 @@ import Framework7Class from '../../shared/class.js';
 import $jsx from '../../shared/$jsx.js';
 
 class PieChart extends Framework7Class {
-  constructor(app, params = {}) {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     super(params, [app]);
     const self = this;
     const defaults = extend({}, app.params.pieChart); // Extend defaults with modules params
@@ -61,11 +65,12 @@ class PieChart extends Framework7Class {
       return [x, y];
     }
 
-    datasets.forEach(({
-      value,
-      label,
-      color
-    }) => {
+    datasets.forEach(_ref => {
+      let {
+        value,
+        label,
+        color
+      } = _ref;
       const percentage = value / this.getSummValue();
       const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
       cumulativePercentage += percentage;
@@ -175,7 +180,11 @@ class PieChart extends Framework7Class {
     })));
   }
 
-  update(newParams = {}) {
+  update(newParams) {
+    if (newParams === void 0) {
+      newParams = {};
+    }
+
     const self = this;
     const {
       params

package/components/pie-chart/pie-chart.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,r=t.utils,s=(t.getDevice,t.getSupport,t.Class),a=(t.Modal,t.ConstructorMethods),i=(t.ModalMethods,r.extend),l=r.deleteProps;class n extends s{constructor(t,e={}){super(e,[t]);const r=this,s=i({},t.params.pieChart);r.useModulesParams(s),r.params=i(s,e);const{el:a}=r.params;if(!a)return r;const l=o(a);return 0===l.length?r:l[0].f7PieChart?l[0].f7PieChart:(i(r,{app:t,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=r,r.useModules(),r.showTooltip=r.showTooltip.bind(this),r.hideTooltip=r.hideTooltip.bind(this),r.init(),r)}getSummValue(){const{datasets:t}=this.params;let e=0;return t.map((t=>t.value||0)).forEach((t=>{e+=t})),e}getPaths(){const{datasets:t,size:e}=this.params,o=[];let r=0;function s(t){return[Math.cos(2*Math.PI*t)*(e/3),Math.sin(2*Math.PI*t)*(e/3)]}return t.forEach((({value:t,label:a,color:i})=>{const l=t/this.getSummValue(),[n,p]=s(r);r+=l;const[h,d]=s(r),c=[`M ${n} ${p}`,`A ${e/3} ${e/3} 0 ${l>.5?1:0} 1 ${h} ${d}`,"L 0 0"].join(" ");o.push({points:c,label:a,color:i})})),o}formatTooltipText(){const{datasets:t}=this.params,{currentIndex:e}=this;if(null===e)return"";const{value:o,label:r,color:s}=t[e],a=o/this.getSummValue()*100,i=t=>parseInt(t,10)===t?t:Math.round(100*t)/100;if(this.params.formatTooltip)return this.params.formatTooltip.call(this,{index:e,value:o,label:r,color:s,percentage:a});return`\n        <div class="pie-chart-tooltip-label">\n          <span class="pie-chart-tooltip-color" style="background-color: ${s};"></span> ${`${r?`${r}: `:""}${i(o)} (${i(a)}%)`}\n        </div>\n      `}setTooltip(){const t=this,{currentIndex:e,el:o,app:r,params:s}=t,{tooltip:a}=s;if((null!==e||t.f7Tooltip)&&a&&o)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(o.querySelector(`path[data-index="${e}"]`)),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=r.tooltip.create({trigger:"manual",containerEl:o,targetEl:o.querySelector(`path[data-index="${e}"]`),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.show())}render(){const t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:`-${t/3} -${t/3} ${2*t/3} ${2*t/3}`,style:"transform: rotate(-90deg)"},e.map(((t,e)=>$jsx("path",{d:t.points,fill:t.color,"data-index":e}))))}update(t={}){const e=this,{params:r}=e;if(Object.keys(t).forEach((e=>{void 0!==t[e]&&(r[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.f7PieChart;const s=o(e.render()).eq(0);return s.f7PieChart=e,i(e,{$svgEl:s,svgEl:s&&s[0]}),e.$el.append(s),e}setCurrentIndex(t){const e=this;if(t===e.currentIndex)return;const{datasets:o}=e.params;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:o[t]}),e.emit("local::select pieChartSelect",e,t,o[t])}showTooltip(t){const e=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(e),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach(((t,e)=>{e!==this.currentIndex&&o(t).addClass("pie-chart-hidden")})),this.setTooltip()}hideTooltip(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()}init(){const t=this,e=o(t.render()).eq(0);return e.f7PieChart=t,i(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t}destroy(){const t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,l(t),t.destroyed=!0)}}var p={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create(){const t=this;t.pieChart=a({defaultSelector:".pie-chart",constructor:n,app:t,domProp:"f7PieChart"}),t.pieChart.update=function(e,r){if(0===o(e).length)return;const s=t.pieChart.get(e);return s?(s.update(r),s):void 0}}};if(e){if(t.prototype.modules&&t.prototype.modules[p.name])return;t.use(p),t.instance&&(t.instance.useModuleParams(p,t.instance.params),t.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,r=t.utils,s=(t.getDevice,t.getSupport,t.Class),a=(t.Modal,t.ConstructorMethods),i=(t.ModalMethods,r.extend),l=r.deleteProps;class n extends s{constructor(t,e){void 0===e&&(e={}),super(e,[t]);const r=this,s=i({},t.params.pieChart);r.useModulesParams(s),r.params=i(s,e);const{el:a}=r.params;if(!a)return r;const l=o(a);return 0===l.length?r:l[0].f7PieChart?l[0].f7PieChart:(i(r,{app:t,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=r,r.useModules(),r.showTooltip=r.showTooltip.bind(this),r.hideTooltip=r.hideTooltip.bind(this),r.init(),r)}getSummValue(){const{datasets:t}=this.params;let e=0;return t.map((t=>t.value||0)).forEach((t=>{e+=t})),e}getPaths(){const{datasets:t,size:e}=this.params,o=[];let r=0;function s(t){return[Math.cos(2*Math.PI*t)*(e/3),Math.sin(2*Math.PI*t)*(e/3)]}return t.forEach((t=>{let{value:a,label:i,color:l}=t;const n=a/this.getSummValue(),[p,h]=s(r);r+=n;const[d,c]=s(r),u=[`M ${p} ${h}`,`A ${e/3} ${e/3} 0 ${n>.5?1:0} 1 ${d} ${c}`,"L 0 0"].join(" ");o.push({points:u,label:i,color:l})})),o}formatTooltipText(){const{datasets:t}=this.params,{currentIndex:e}=this;if(null===e)return"";const{value:o,label:r,color:s}=t[e],a=o/this.getSummValue()*100,i=t=>parseInt(t,10)===t?t:Math.round(100*t)/100;if(this.params.formatTooltip)return this.params.formatTooltip.call(this,{index:e,value:o,label:r,color:s,percentage:a});return`\n        <div class="pie-chart-tooltip-label">\n          <span class="pie-chart-tooltip-color" style="background-color: ${s};"></span> ${`${r?`${r}: `:""}${i(o)} (${i(a)}%)`}\n        </div>\n      `}setTooltip(){const t=this,{currentIndex:e,el:o,app:r,params:s}=t,{tooltip:a}=s;if((null!==e||t.f7Tooltip)&&a&&o)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(o.querySelector(`path[data-index="${e}"]`)),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=r.tooltip.create({trigger:"manual",containerEl:o,targetEl:o.querySelector(`path[data-index="${e}"]`),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.show())}render(){const t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:`-${t/3} -${t/3} ${2*t/3} ${2*t/3}`,style:"transform: rotate(-90deg)"},e.map(((t,e)=>$jsx("path",{d:t.points,fill:t.color,"data-index":e}))))}update(t){void 0===t&&(t={});const e=this,{params:r}=e;if(Object.keys(t).forEach((e=>{void 0!==t[e]&&(r[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.f7PieChart;const s=o(e.render()).eq(0);return s.f7PieChart=e,i(e,{$svgEl:s,svgEl:s&&s[0]}),e.$el.append(s),e}setCurrentIndex(t){const e=this;if(t===e.currentIndex)return;const{datasets:o}=e.params;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:o[t]}),e.emit("local::select pieChartSelect",e,t,o[t])}showTooltip(t){const e=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(e),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach(((t,e)=>{e!==this.currentIndex&&o(t).addClass("pie-chart-hidden")})),this.setTooltip()}hideTooltip(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()}init(){const t=this,e=o(t.render()).eq(0);return e.f7PieChart=t,i(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t}destroy(){const t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,l(t),t.destroyed=!0)}}var p={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create(){const t=this;t.pieChart=a({defaultSelector:".pie-chart",constructor:n,app:t,domProp:"f7PieChart"}),t.pieChart.update=function(e,r){if(0===o(e).length)return;const s=t.pieChart.get(e);return s?(s.update(r),s):void 0}}};if(e){if(t.prototype.modules&&t.prototype.modules[p.name])return;t.use(p),t.instance&&(t.instance.useModuleParams(p,t.instance.params),t.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/popover/popover-class.js

@@ -38,11 +38,18 @@ class Popover extends Modal {
 
 
     let $backdropEl;
+    const forceBackdropUnique = popover.params.backdrop && app.$el.find('.popover.modal-in').filter(anotherPopoverEl => anotherPopoverEl !== $el[0]).length > 0;
 
     if (popover.params.backdrop && popover.params.backdropEl) {
       $backdropEl = $(popover.params.backdropEl);
     } else if (popover.params.backdrop) {
-      $backdropEl = popover.$containerEl.children('.popover-backdrop');
+      if (popover.params.backdropUnique || forceBackdropUnique) {
+        $backdropEl = $('<div class="popover-backdrop popover-backdrop-unique"></div>');
+        $backdropEl[0].f7PopoverRef = popover;
+        popover.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = popover.$containerEl.children('.popover-backdrop');
+      }
 
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popover-backdrop"></div>');
@@ -73,8 +80,13 @@ class Popover extends Modal {
       $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popover',
+      forceBackdropUnique,
+
+      open() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
 
-      open(...args) {
         let [targetEl, animate] = args;
         if (typeof args[0] === 'boolean') [animate, targetEl] = args;
 
@@ -117,7 +129,12 @@ class Popover extends Modal {
         if (popover.params.closeByBackdropClick && popover.params.backdrop && popover.backdropEl && popover.backdropEl === target && touchStartTarget === target) {
           popover.close();
         } else if (popover.params.closeByOutsideClick && touchStartTarget === target) {
-          popover.close();
+          const isAnotherPopoverBackdrop = $target.hasClass('popover-backdrop-unique') && target.f7PopoverRef !== popover || $target.hasClass('popover-backdrop') && target !== popover.backdropEl;
+          const isAnotherPopoverTarget = target.closest('.popover') && target.closest('.popover') !== popover.$el[0];
+
+          if (!isAnotherPopoverBackdrop && !isAnotherPopoverTarget) {
+            popover.close();
+          }
         }
       }
     }

package/components/popover/popover-rtl.css

@@ -1 +1 @@
-:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}

package/components/popover/popover.css

@@ -1 +1 @@
-:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-popover-box-shadow);will-change:transform,opacity}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}

package/components/popover/popover.d.ts

@@ -23,6 +23,8 @@ export namespace Popover {
     backdrop?: boolean;
     /** Backdrop element to share across instances */
     backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: boolean;
     /** When enabled, popover will be closed on backdrop click. (default true) */
     closeByBackdropClick?: boolean;
     /** When enabled, popover will be closed on when click outside of it (default true) */

package/components/popover/popover.js

@@ -8,6 +8,7 @@ export default {
     popover: {
       backdrop: true,
       backdropEl: undefined,
+      backdropUnique: false,
       closeByBackdropClick: true,
       closeByOutsideClick: true,
       closeOnEscape: false,
@@ -64,11 +65,19 @@ export default {
   },
 
   clicks: {
-    '.popover-open': function openPopover($clickedEl, data = {}) {
+    '.popover-open': function openPopover($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
       const app = this;
       app.popover.open(data.popover, $clickedEl, data.animate);
     },
-    '.popover-close': function closePopover($clickedEl, data = {}) {
+    '.popover-close': function closePopover($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
       const app = this;
       app.popover.close(data.popover, data.animate, $clickedEl);
     }

package/components/popover/popover.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,r=e.getDevice,p=(e.getSupport,e.Class,e.Modal),s=(e.ConstructorMethods,e.ModalMethods),n=a.extend;class l extends p{constructor(e,o){const a=n({on:{}},e.params.popover,o);super(e,a);const p=this,s=r(),l=getWindow(),i=getDocument();let d;if(p.params=a,d=p.params.el?t(p.params.el).eq(0):t(p.params.content).filter((e=>1===e.nodeType)).eq(0),d&&d.length>0&&d[0].f7Modal)return d[0].f7Modal;const c=t(p.params.targetEl).eq(0);if(0===d.length)return p.destroy();let m,h;p.params.backdrop&&p.params.backdropEl?m=t(p.params.backdropEl):p.params.backdrop&&(m=p.$containerEl.children(".popover-backdrop"),0===m.length&&(m=t('<div class="popover-backdrop"></div>'),p.$containerEl.append(m))),0===d.find(".popover-angle").length?(h=t('<div class="popover-angle"></div>'),d.prepend(h)):h=d.find(".popover-angle");const f=p.open;function g(){p.resize()}n(p,{app:e,$el:d,el:d[0],$targetEl:c,targetEl:c[0],$angleEl:h,angleEl:h[0],$backdropEl:m,backdropEl:m&&m[0],type:"popover",open(...e){let[o,a]=e;return"boolean"==typeof e[0]&&([a,o]=e),o&&(p.$targetEl=t(o),p.targetEl=p.$targetEl[0]),f.call(p,a)}}),p.on("popoverOpen",(()=>{p.resize(),e.on("resize",g),t(l).on("keyboardDidShow keyboardDidHide",g),p.on("popoverClose popoverBeforeDestroy",(()=>{e.off("resize",g),t(l).off("keyboardDidShow keyboardDidHide",g)}))}));let v=null;function u(e){v=e.target}function k(e){const o=e.target,a=t(o);!s.desktop&&s.cordova&&(l.Keyboard&&l.Keyboard.isVisible||l.cordova.plugins&&l.cordova.plugins.Keyboard&&l.cordova.plugins.Keyboard.isVisible)||0===a.closest(p.el).length&&(p.params.closeByBackdropClick&&p.params.backdrop&&p.backdropEl&&p.backdropEl===o&&v===o||p.params.closeByOutsideClick&&v===o)&&p.close()}function b(e){27===e.keyCode&&p.params.closeOnEscape&&p.close()}return p.params.closeOnEscape&&(p.on("popoverOpen",(()=>{t(i).on("keydown",b)})),p.on("popoverClose",(()=>{t(i).off("keydown",b)}))),p.on("popoverOpened",(()=>{(p.params.closeByOutsideClick||p.params.closeByBackdropClick)&&(e.on("touchstart",u),e.on("click",k))})),p.on("popoverClose",(()=>{(p.params.closeByOutsideClick||p.params.closeByBackdropClick)&&(e.off("touchstart",u),e.off("click",k))})),d[0].f7Modal=p,p}resize(){const e=this,{app:o,$el:a,$targetEl:r,$angleEl:p}=e,{targetX:s,targetY:n}=e.params;a.css({left:"",top:""});const[l,i]=[a.width(),a.height()];let d,c,m,h,f,g,v=0;"ios"===o.theme||"aurora"===o.theme?(p.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),v=p.width()/2):a.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});let u=parseInt(t("html").css("--f7-safe-area-top"),10),k=parseInt(t("html").css("--f7-safe-area-left"),10),b=parseInt(t("html").css("--f7-safe-area-right"),10);if(Number.isNaN(u)&&(u=0),Number.isNaN(k)&&(k=0),Number.isNaN(b)&&(b=0),r&&r.length>0){m=r.outerWidth(),h=r.outerHeight();const e=r.offset();f=e.left-o.left,g=e.top-o.top;const t=r.parents(".page");t.length>0&&(g-=t[0].scrollTop)}else void 0!==s&&"undefined"!==n&&(f=s,g=n,m=e.params.targetWidth||0,h=e.params.targetHeight||0);let[y,E,C]=[0,0,0],M="md"===o.theme?"bottom":"top";if("md"===o.theme){let e;i<o.height-g-h?(M="bottom",E=g+h):i<g-u?(E=g-i,M="top"):(M="middle",E=h/2+g-i/2),E=Math.max(8,Math.min(E,o.height-i-8)),f<o.width/2?(e="right",y="middle"===M?f+m:f):(e="left",y="middle"===M?f-l:f+m-l),y=Math.max(8,Math.min(y,o.width-l-8-b),k),a.addClass(`popover-on-${M} popover-on-${e}`)}else i+v<g-u?E=g-i-v:i+v<o.height-g-h?(M="bottom",E=g+h+v):(M="middle",E=h/2+g-i/2,C=E,E=Math.max(5,Math.min(E,o.height-i-5)),C-=E),"top"===M||"bottom"===M?(y=m/2+f-l/2,C=y,y=Math.max(5,Math.min(y,o.width-l-5)),k&&(y=Math.max(y,k)),b&&y+l>o.width-5-b&&(y=o.width-5-b-l),"top"===M&&p.addClass("on-bottom"),"bottom"===M&&p.addClass("on-top"),C-=y,d=l/2-v+C,d=Math.max(Math.min(d,l-2*v-13),13),p.css({left:`${d}px`})):"middle"===M&&(y=f-l-v,p.addClass("on-right"),(y<5||y+l+b>o.width||y<k)&&(y<5&&(y=f+m+v),y+l+b>o.width&&(y=o.width-l-5-b),y<k&&(y=k),p.removeClass("on-right").addClass("on-left")),c=i/2-v+C,c=Math.max(Math.min(c,i-2*v-13),13),p.css({top:`${c}px`}));a.css({top:`${E}px`,left:`${y}px`})}}var i={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1,containerEl:null}},static:{Popover:l},create(){const e=this;e.popover=n(s({app:e,constructor:l,defaultSelector:".popover.modal-in"}),{open(o,a,r){let p=t(o);if(p.length>1){const e=t(a).parents(".page");e.length&&p.each((o=>{const a=t(o);a.parents(e)[0]===e[0]&&(p=a)}))}p.length>1&&(p=p.eq(p.length-1));let s=p[0].f7Modal;const n=p.dataset();return s||(s=new l(e,Object.assign({el:p,targetEl:a},n))),s.open(a,r)}})},clicks:{".popover-open":function(e,o={}){this.popover.open(o.popover,e,o.animate)},".popover-close":function(e,o={}){this.popover.close(o.popover,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[i.name])return;e.use(i),e.instance&&(e.instance.useModuleParams(i,e.instance.params),e.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,r=e.getDevice,p=(e.getSupport,e.Class,e.Modal),s=(e.ConstructorMethods,e.ModalMethods),l=a.extend;class n extends p{constructor(e,o){const a=l({on:{}},e.params.popover,o);super(e,a);const p=this,s=r(),n=getWindow(),i=getDocument();let d;if(p.params=a,d=p.params.el?t(p.params.el).eq(0):t(p.params.content).filter((e=>1===e.nodeType)).eq(0),d&&d.length>0&&d[0].f7Modal)return d[0].f7Modal;const c=t(p.params.targetEl).eq(0);if(0===d.length)return p.destroy();let m;const h=p.params.backdrop&&e.$el.find(".popover.modal-in").filter((e=>e!==d[0])).length>0;let f;p.params.backdrop&&p.params.backdropEl?m=t(p.params.backdropEl):p.params.backdrop&&(p.params.backdropUnique||h?(m=t('<div class="popover-backdrop popover-backdrop-unique"></div>'),m[0].f7PopoverRef=p,p.$containerEl.append(m)):m=p.$containerEl.children(".popover-backdrop"),0===m.length&&(m=t('<div class="popover-backdrop"></div>'),p.$containerEl.append(m))),0===d.find(".popover-angle").length?(f=t('<div class="popover-angle"></div>'),d.prepend(f)):f=d.find(".popover-angle");const v=p.open;function g(){p.resize()}l(p,{app:e,$el:d,el:d[0],$targetEl:c,targetEl:c[0],$angleEl:f,angleEl:f[0],$backdropEl:m,backdropEl:m&&m[0],type:"popover",forceBackdropUnique:h,open(){for(var e=arguments.length,o=new Array(e),a=0;a<e;a++)o[a]=arguments[a];let[r,s]=o;return"boolean"==typeof o[0]&&([s,r]=o),r&&(p.$targetEl=t(r),p.targetEl=p.$targetEl[0]),v.call(p,s)}}),p.on("popoverOpen",(()=>{p.resize(),e.on("resize",g),t(n).on("keyboardDidShow keyboardDidHide",g),p.on("popoverClose popoverBeforeDestroy",(()=>{e.off("resize",g),t(n).off("keyboardDidShow keyboardDidHide",g)}))}));let u=null;function k(e){u=e.target}function b(e){const o=e.target,a=t(o);if(!(!s.desktop&&s.cordova&&(n.Keyboard&&n.Keyboard.isVisible||n.cordova.plugins&&n.cordova.plugins.Keyboard&&n.cordova.plugins.Keyboard.isVisible))&&0===a.closest(p.el).length)if(p.params.closeByBackdropClick&&p.params.backdrop&&p.backdropEl&&p.backdropEl===o&&u===o)p.close();else if(p.params.closeByOutsideClick&&u===o){const e=a.hasClass("popover-backdrop-unique")&&o.f7PopoverRef!==p||a.hasClass("popover-backdrop")&&o!==p.backdropEl,t=o.closest(".popover")&&o.closest(".popover")!==p.$el[0];e||t||p.close()}}function y(e){27===e.keyCode&&p.params.closeOnEscape&&p.close()}return p.params.closeOnEscape&&(p.on("popoverOpen",(()=>{t(i).on("keydown",y)})),p.on("popoverClose",(()=>{t(i).off("keydown",y)}))),p.on("popoverOpened",(()=>{(p.params.closeByOutsideClick||p.params.closeByBackdropClick)&&(e.on("touchstart",k),e.on("click",b))})),p.on("popoverClose",(()=>{(p.params.closeByOutsideClick||p.params.closeByBackdropClick)&&(e.off("touchstart",k),e.off("click",b))})),d[0].f7Modal=p,p}resize(){const e=this,{app:o,$el:a,$targetEl:r,$angleEl:p}=e,{targetX:s,targetY:l}=e.params;a.css({left:"",top:""});const[n,i]=[a.width(),a.height()];let d,c,m,h,f,v,g=0;"ios"===o.theme||"aurora"===o.theme?(p.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),g=p.width()/2):a.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});let u=parseInt(t("html").css("--f7-safe-area-top"),10),k=parseInt(t("html").css("--f7-safe-area-left"),10),b=parseInt(t("html").css("--f7-safe-area-right"),10);if(Number.isNaN(u)&&(u=0),Number.isNaN(k)&&(k=0),Number.isNaN(b)&&(b=0),r&&r.length>0){m=r.outerWidth(),h=r.outerHeight();const e=r.offset();f=e.left-o.left,v=e.top-o.top;const t=r.parents(".page");t.length>0&&(v-=t[0].scrollTop)}else void 0!==s&&"undefined"!==l&&(f=s,v=l,m=e.params.targetWidth||0,h=e.params.targetHeight||0);let[y,E,C]=[0,0,0],M="md"===o.theme?"bottom":"top";if("md"===o.theme){let e;i<o.height-v-h?(M="bottom",E=v+h):i<v-u?(E=v-i,M="top"):(M="middle",E=h/2+v-i/2),E=Math.max(8,Math.min(E,o.height-i-8)),f<o.width/2?(e="right",y="middle"===M?f+m:f):(e="left",y="middle"===M?f-n:f+m-n),y=Math.max(8,Math.min(y,o.width-n-8-b),k),a.addClass(`popover-on-${M} popover-on-${e}`)}else i+g<v-u?E=v-i-g:i+g<o.height-v-h?(M="bottom",E=v+h+g):(M="middle",E=h/2+v-i/2,C=E,E=Math.max(5,Math.min(E,o.height-i-5)),C-=E),"top"===M||"bottom"===M?(y=m/2+f-n/2,C=y,y=Math.max(5,Math.min(y,o.width-n-5)),k&&(y=Math.max(y,k)),b&&y+n>o.width-5-b&&(y=o.width-5-b-n),"top"===M&&p.addClass("on-bottom"),"bottom"===M&&p.addClass("on-top"),C-=y,d=n/2-g+C,d=Math.max(Math.min(d,n-2*g-13),13),p.css({left:`${d}px`})):"middle"===M&&(y=f-n-g,p.addClass("on-right"),(y<5||y+n+b>o.width||y<k)&&(y<5&&(y=f+m+g),y+n+b>o.width&&(y=o.width-n-5-b),y<k&&(y=k),p.removeClass("on-right").addClass("on-left")),c=i/2-g+C,c=Math.max(Math.min(c,i-2*g-13),13),p.css({top:`${c}px`}));a.css({top:`${E}px`,left:`${y}px`})}}var i={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1,containerEl:null}},static:{Popover:n},create(){const e=this;e.popover=l(s({app:e,constructor:n,defaultSelector:".popover.modal-in"}),{open(o,a,r){let p=t(o);if(p.length>1){const e=t(a).parents(".page");e.length&&p.each((o=>{const a=t(o);a.parents(e)[0]===e[0]&&(p=a)}))}p.length>1&&(p=p.eq(p.length-1));let s=p[0].f7Modal;const l=p.dataset();return s||(s=new n(e,Object.assign({el:p,targetEl:a},l))),s.open(a,r)}})},clicks:{".popover-open":function(e,o){void 0===o&&(o={});this.popover.open(o.popover,e,o.animate)},".popover-close":function(e,o){void 0===o&&(o={});this.popover.close(o.popover,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[i.name])return;e.use(i),e.instance&&(e.instance.useModuleParams(i,e.instance.params),e.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/popover/popover.less

@@ -1,6 +1,9 @@
 /* === Popover === */
 @import './popover-vars.less';
 .popover-backdrop {
+  &-unique {
+    z-index: 13500;
+  }
 }
 .popover {
   width: var(--f7-popover-width);

package/components/popup/popup-class.js

@@ -40,7 +40,12 @@ class Popup extends Modal {
     if (popup.params.backdrop && popup.params.backdropEl) {
       $backdropEl = $(popup.params.backdropEl);
     } else if (popup.params.backdrop) {
-      $backdropEl = popup.$containerEl.children('.popup-backdrop');
+      if (popup.params.backdropUnique) {
+        $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+        popup.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = popup.$containerEl.children('.popup-backdrop');
+      }
 
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popup-backdrop"></div>');

package/components/popup/popup-rtl.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9)}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9)}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup.d.ts

@@ -31,6 +31,8 @@ export namespace Popup {
     backdrop?: boolean;
     /** Backdrop element to share across instances */
     backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: boolean;
     /** When enabled, popup will be closed on backdrop click. (default true) */
     closeByBackdropClick?: boolean;
     /** When enabled, popup will be closed on ESC keyboard key press (default false) */
@@ -43,6 +45,8 @@ export namespace Popup {
     swipeHandler?: HTMLElement | CSSSelector;
     /** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `popup-push` class to Popup element. (default false) */
     push?: boolean;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
 
     /** Object with events handlers.. */
     on?: {

package/components/popup/popup.js

@@ -6,6 +6,7 @@ export default {
     popup: {
       backdrop: true,
       backdropEl: undefined,
+      backdropUnique: false,
       closeByBackdropClick: true,
       closeOnEscape: false,
       swipeToClose: false,
@@ -29,11 +30,19 @@ export default {
   },
 
   clicks: {
-    '.popup-open': function openPopup($clickedEl, data = {}) {
+    '.popup-open': function openPopup($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
       const app = this;
       app.popup.open(data.popup, data.animate, $clickedEl);
     },
-    '.popup-close': function closePopup($clickedEl, data = {}) {
+    '.popup-close': function closePopup($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
       const app = this;
       app.popup.close(data.popup, data.animate, $clickedEl);
     }