framework7 7.0.0-beta.2 → 7.0.0-beta.20

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

@@ -1,6 +1,6 @@
-import $ from '../../shared/dom7';
-import PieChart from './pie-chart-class';
-import ConstructorMethods from '../../shared/constructor-methods';
+import $ from '../../shared/dom7.js';
+import PieChart from './pie-chart-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
 export default {
   name: 'pieChart',
   params: {

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

@@ -0,0 +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){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

@@ -1,8 +1,8 @@
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend } from '../../shared/utils';
-import { getDevice } from '../../shared/get-device';
-import Modal from '../modal/modal-class';
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import Modal from '../modal/modal-class.js';
 
 class Popover extends Modal {
   constructor(app, params) {
@@ -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 .theme-dark,.ios.theme-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 .theme-dark,.md.theme-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 .theme-dark,.aurora.theme-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 .theme-dark,.ios.theme-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 .theme-dark,.md.theme-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 .theme-dark,.aurora.theme-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

@@ -1,13 +1,14 @@
-import $ from '../../shared/dom7';
-import { extend } from '../../shared/utils';
-import Popover from './popover-class';
-import ModalMethods from '../../shared/modal-methods';
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Popover from './popover-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
 export default {
   name: 'popover',
   params: {
     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

@@ -0,0 +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),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

@@ -1,9 +1,9 @@
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, now, nextTick } from '../../shared/utils';
-import { getSupport } from '../../shared/get-support';
-import { getDevice } from '../../shared/get-device';
-import Modal from '../modal/modal-class';
+import $ from '../../shared/dom7.js';
+import { extend, now, nextTick } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+import { getDevice } from '../../shared/get-device.js';
+import Modal from '../modal/modal-class.js';
 
 class Popup extends Modal {
   constructor(app, params) {
@@ -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)}.popup.theme-dark,.theme-dark .popup{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 .framework7-root>.view.theme-dark:after,html.with-modal-popup-push .framework7-root>.views.theme-dark:after,html.with-modal-popup-push .theme-dark .framework7-root>.view:after,html.with-modal-popup-push .theme-dark .framework7-root>.views:after,html.with-modal-popup-push .theme-dark.framework7-root>.view:after,html.with-modal-popup-push .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.views:after,html.with-modal-popup-push.theme-dark .framework7-root>.view:after,html.with-modal-popup-push.theme-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 .theme-dark .popup:after,html.with-modal-popup-push .theme-dark.popup:after,html.with-modal-popup-push.theme-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 .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-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)}.popup.theme-dark,.theme-dark .popup{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 .framework7-root>.view.theme-dark:after,html.with-modal-popup-push .framework7-root>.views.theme-dark:after,html.with-modal-popup-push .theme-dark .framework7-root>.view:after,html.with-modal-popup-push .theme-dark .framework7-root>.views:after,html.with-modal-popup-push .theme-dark.framework7-root>.view:after,html.with-modal-popup-push .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.views:after,html.with-modal-popup-push.theme-dark .framework7-root>.view:after,html.with-modal-popup-push.theme-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 .theme-dark .popup:after,html.with-modal-popup-push .theme-dark.popup:after,html.with-modal-popup-push.theme-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 .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-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

@@ -1,11 +1,12 @@
-import Popup from './popup-class';
-import ModalMethods from '../../shared/modal-methods';
+import Popup from './popup-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
 export default {
   name: 'popup',
   params: {
     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);
     }

package/components/popup/popup.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(p,o){void 0===o&&(o=!0);var e=p.$,s=p.utils,t=p.getDevice,a=p.getSupport,r=(p.Class,p.Modal),l=(p.ConstructorMethods,p.ModalMethods),n=s.extend,i=s.now,c=s.nextTick;class u extends r{constructor(p,o){const s=n({on:{}},p.params.popup,o);super(p,s);const r=this,l=getWindow(),u=getDocument(),d=a(),m=t();let h,f,g,v;if(r.params=s,h=r.params.el?e(r.params.el).eq(0):e(r.params.content).filter((p=>1===p.nodeType)).eq(0),h&&h.length>0&&h[0].f7Modal)return h[0].f7Modal;if(0===h.length)return r.destroy();function y(p){const o=p.target,s=e(o);if(!(!m.desktop&&m.cordova&&(l.Keyboard&&l.Keyboard.isVisible||l.cordova.plugins&&l.cordova.plugins.Keyboard&&l.cordova.plugins.Keyboard.isVisible))&&0===s.closest(r.el).length&&r.params&&r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===o){let p=!0;r.$el.nextAll(".popup.modal-in").each((o=>{const e=o.f7Modal;e&&e.params.closeByBackdropClick&&e.params.backdrop&&e.backdropEl===r.backdropEl&&(p=!1)})),p&&r.close()}}function b(p){27===p.keyCode&&r.params.closeOnEscape&&r.close()}function w(o){return(p.height-2*o)/p.height}r.params.backdrop&&r.params.backdropEl?f=e(r.params.backdropEl):r.params.backdrop&&(r.params.backdropUnique?(f=e('<div class="popup-backdrop popup-backdrop-unique"></div>'),r.$containerEl.append(f)):f=r.$containerEl.children(".popup-backdrop"),0===f.length&&(f=e('<div class="popup-backdrop"></div>'),r.$containerEl.append(f))),n(r,{app:p,push:h.hasClass("popup-push")||r.params.push,$el:h,el:h[0],$backdropEl:f,backdropEl:f&&f[0],type:"popup",$htmlEl:e("html")}),r.params.push&&h.addClass("popup-push");let k,C,E,$,M,T,x,B,P,S,q,H=!0,A=!1,D=!1;function K(p){!A&&H&&r.params.swipeToClose&&(r.params.swipeHandler&&0===e(p.target).closest(r.params.swipeHandler).length||(A=!0,D=!1,k={x:"touchstart"===p.type?p.targetTouches[0].pageX:p.pageX,y:"touchstart"===p.type?p.targetTouches[0].pageY:p.pageY},$=i(),E=void 0,r.params.swipeHandler||"touchstart"!==p.type||(T=e(p.target).closest(".page-content")[0])))}function O(o){if(!A)return;if(C={x:"touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchmove"===o.type?o.targetTouches[0].pageY:o.pageY},void 0===E&&(E=!!(E||Math.abs(C.x-k.x)>Math.abs(C.y-k.y))),E)return A=!1,void(D=!1);M=k.y-C.y,v&&g&&M>0&&(M=0);const e=M<0?"to-bottom":"to-top";if(h.transition(0),"string"==typeof r.params.swipeToClose&&e!==r.params.swipeToClose)return h.transform(""),void h.transition("");if(D)r.emit("local::swipeMove popupSwipeMove",r),r.$el.trigger("popup:swipemove");else{if(v&&g&&(S=h[0].offsetHeight,q=h.prevAll(".popup.modal-in").eq(0),0===q.length&&(q=p.$el.children(".view, .views"))),T&&(x=T.scrollTop,P=T.scrollHeight,B=T.offsetHeight,!(P===B||"to-bottom"===e&&0===x||"to-top"===e&&x===P-B)))return h.transform(""),h.transition(""),A=!1,void(D=!1);D=!0,r.emit("local::swipeStart popupSwipeStart",r),r.$el.trigger("popup:swipestart")}if(o.preventDefault(),v&&g){const p=1-Math.abs(M/S),o=1-(1-w(g))*p;q.hasClass("popup")?q.hasClass("popup-push")?q.transition(0).forEach((e=>{e.style.setProperty("transform",`translate3d(0, calc(-1 * ${p} * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(${o})`,"important")})):q.transition(0).forEach((p=>{p.style.setProperty("transform",`translate3d(0, 0px , 0px) scale(${o})`,"important")})):q.transition(0).forEach((p=>{p.style.setProperty("transform",`translate3d(0,0,0) scale(${o})`,"important")}))}h.transition(0).transform(`translate3d(0,${-M}px,0)`)}function X(){if(A=!1,!D)return;r.emit("local::swipeEnd popupSwipeEnd",r),r.$el.trigger("popup:swipeend"),D=!1,H=!1,h.transition(""),v&&g&&q.transition("").transform("");const p=M<=0?"to-bottom":"to-top";if("string"==typeof r.params.swipeToClose&&p!==r.params.swipeToClose)return h.transform(""),void(H=!0);const o=Math.abs(M),e=(new Date).getTime()-$;e<300&&o>20||e>=300&&o>100?c((()=>{"to-bottom"===p?h.addClass("swipe-close-to-bottom"):h.addClass("swipe-close-to-top"),h.transform(""),r.emit("local::swipeclose popupSwipeClose",r),r.$el.trigger("popup:swipeclose"),r.close(),H=!0})):(H=!0,h.transform(""))}const Y=!!d.passiveListener&&{passive:!0};let z;r.params.swipeToClose&&(h.on(p.touchEvents.start,K,Y),p.on("touchmove",O),p.on("touchend:passive",X),r.once("popupDestroy",(()=>{h.off(p.touchEvents.start,K,Y),p.off("touchmove",O),p.off("touchend:passive",X)})));const N=()=>{const o=v;r.push&&(v=r.push&&(p.width<630||p.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&!o?L():v&&o?r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",w(g)):!v&&o&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))},L=()=>{p.off("resize",N),r.push&&(v=r.push&&(p.width<630||p.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&(g=parseInt(h.css("--f7-popup-push-offset"),10),Number.isNaN(g)&&(g=0),g&&(h.addClass("popup-push"),r.$htmlEl.addClass("with-modal-popup-push"),r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",w(g)))),p.on("resize",N)};return r.on("open",(()=>{z=!1,r.params.closeOnEscape&&e(u).on("keydown",b),h.prevAll(".popup.modal-in").addClass("popup-behind"),L()})),r.on("opened",(()=>{h.removeClass("swipe-close-to-bottom swipe-close-to-top"),r.params.closeByBackdropClick&&p.on("click",y)})),r.on("close",(()=>{z=r.$el.prevAll(".popup-push.modal-in").length>0,r.params.closeOnEscape&&e(u).off("keydown",b),r.params.closeByBackdropClick&&p.off("click",y),h.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl.addClass("with-modal-popup-push-closing")),p.off("resize",N)})),r.on("closed",(()=>{h.removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push-closing"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),h[0].f7Modal=r,r}}var d={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:u},create(){this.popup=l({app:this,constructor:u,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(p,o){void 0===o&&(o={});this.popup.open(o.popup,o.animate,p)},".popup-close":function(p,o){void 0===o&&(o={});this.popup.close(o.popup,o.animate,p)}}};if(o){if(p.prototype.modules&&p.prototype.modules[d.name])return;p.use(d),p.instance&&(p.instance.useModuleParams(d,p.instance.params),p.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/popup/popup.less

@@ -3,6 +3,9 @@
 
 .popup-backdrop {
   z-index: 10500;
+  &-unique {
+    z-index: 11000;
+  }
 }
 .popup {
   position: absolute;
@@ -18,8 +21,8 @@
   z-index: 11000;
   overflow: hidden;
   border-radius: var(--f7-popup-border-radius);
-  .theme-dark &,
-  &.theme-dark {
+  .dark &,
+  &.dark {
     background: #000;
   }
   &.modal-in,
@@ -66,6 +69,7 @@
     }
     &.popup-behind {
       transform: translate3d(0, 0, 0) scale(0.9);
+      pointer-events: none;
       &.modal-out {
         transform: translate3d(0, 100vh, 0) scale(0.9);
       }
@@ -105,14 +109,14 @@ html.with-modal-popup-push-closing {
   }
 
   .if-dark-theme({
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         content: '';
         position: absolute;
@@ -155,9 +159,9 @@ html.with-modal-popup-push {
     opacity: 0;
   }
   .if-dark-theme({
-    &.theme-dark .popup:after,
-    .theme-dark .popup:after,
-    .theme-dark.popup:after {
+    &.dark .popup:after,
+    .dark .popup:after,
+    .dark.popup:after {
       background: rgba(255,255,255,0.05);
     }
   });
@@ -187,14 +191,14 @@ html.with-modal-popup-push {
 
 .if-dark-theme({
   html.with-modal-popup-push-closing {
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
       }

package/components/preloader/preloader-ios.less

@@ -29,6 +29,9 @@
   });
 }
 @keyframes ios-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
   100% {
     transform: rotate(360deg);
   }

package/components/preloader/preloader-rtl.css

@@ -1 +1 @@
-:root{--f7-preloader-modal-padding:8px;--f7-preloader-modal-bg-color:rgba(0, 0, 0, 0.8)}.ios{--f7-preloader-color:#6c6c6c;--f7-preloader-size:20px;--f7-preloader-modal-preloader-size:34px;--f7-preloader-modal-border-radius:5px}.md{--f7-preloader-color:#757575;--f7-preloader-size:32px;--f7-preloader-modal-preloader-size:32px;--f7-preloader-modal-border-radius:4px}.aurora{--f7-preloader-color:#757575;--f7-preloader-size:24px;--f7-preloader-modal-preloader-size:24px;--f7-preloader-modal-border-radius:4px}.preloader{display:inline-block;vertical-align:middle;width:var(--f7-preloader-size);height:var(--f7-preloader-size);font-size:0;position:relative}.preloader .preloader-inner{width:100%;height:100%;display:block;position:relative}.preloader-backdrop{visibility:visible;opacity:0;background:0 0;z-index:14000}.preloader-modal{position:absolute;left:50%;top:50%;padding:var(--f7-preloader-modal-padding);background:var(--f7-preloader-modal-bg-color);z-index:14500;transform:translateX(-50%) translateY(-50%);border-radius:var(--f7-preloader-modal-border-radius)}.preloader-modal .preloader{--f7-preloader-size:var(--f7-preloader-modal-preloader-size);display:block!important}.with-modal-preloader .page-content,.with-modal-preloader.page-content,html.with-modal-preloader .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.preloader[class*=color-]{--f7-preloader-color:var(--f7-theme-color)}.ios .preloader-inner{animation:ios-preloader-spin 1s steps(8,end) infinite}.ios .preloader-inner-line{display:block;width:11.6%;height:33.33%;border-radius:100px;background:var(--f7-preloader-color);position:absolute;left:50%;top:50%;transform-origin:center 150%}.ios .preloader.color-multi .preloader-inner-line{animation:ios-preloader-multicolor 3s linear infinite}.ios .preloader-inner-line:nth-child(1){transform:translate(-50%,-150%) rotate(0deg);opacity:.27}.ios .preloader-inner-line:nth-child(2){transform:translate(-50%,-150%) rotate(45deg);opacity:.35285714}.ios .preloader-inner-line:nth-child(3){transform:translate(-50%,-150%) rotate(90deg);opacity:.43571429}.ios .preloader-inner-line:nth-child(4){transform:translate(-50%,-150%) rotate(135deg);opacity:.51857143}.ios .preloader-inner-line:nth-child(5){transform:translate(-50%,-150%) rotate(180deg);opacity:.60142857}.ios .preloader-inner-line:nth-child(6){transform:translate(-50%,-150%) rotate(225deg);opacity:.68428571}.ios .preloader-inner-line:nth-child(7){transform:translate(-50%,-150%) rotate(270deg);opacity:.76714286}.ios .preloader-inner-line:nth-child(8){transform:translate(-50%,-150%) rotate(315deg);opacity:.85}@keyframes ios-preloader-spin{100%{transform:rotate(360deg)}}@keyframes ios-preloader-multicolor{0%,100%{background-color:#2196f3}25%{background-color:#ff3b30}50%{background-color:#4cd964}75%{background-color:#ff9500}}.md .preloader-inner{animation:md-preloader-rotate 1.4s linear infinite}.md .preloader-inner circle{fill:none;stroke:var(--f7-preloader-color);animation:md-preloader-circle-rotate 5.6s ease-in-out infinite;stroke-dasharray:100px;stroke-dashoffset:80px;stroke-width:4;transform:rotate(-90deg);transform-origin:18px 18px}.md .preloader.color-multi circle{animation:md-preloader-circle-rotate 5.6s ease-in-out infinite,md-preloader-multicolor 5.6s ease-in-out infinite}@keyframes md-preloader-multicolor{0%,100%{stroke:#4285f4}75%{stroke:#1b9a59}50%{stroke:#f7c223}25%{stroke:#de3e35}}@keyframes md-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes md-preloader-circle-rotate{0%{transform:rotate(-90deg);stroke-dashoffset:100px}12.5%{transform:rotate(-90deg);stroke-dashoffset:25px}25%{stroke-dashoffset:100px;transform:rotate(180deg)}25.1%{transform:rotate(-180deg);stroke-dashoffset:100px}37.5%{transform:rotate(-180deg);stroke-dashoffset:25px}50%{stroke-dashoffset:100px;transform:rotate(90deg)}50.1%{transform:rotate(90deg);stroke-dashoffset:100px}62.5%{transform:rotate(90deg);stroke-dashoffset:25px}75%{stroke-dashoffset:100px;transform:rotate(360deg)}75.1%{transform:rotate(0deg);stroke-dashoffset:100px}87.5%{transform:rotate(0deg);stroke-dashoffset:25px}100%{stroke-dashoffset:100px;transform:rotate(270deg)}}.aurora .preloader-inner{position:absolute;left:0;top:0}.aurora .preloader-inner-circle{width:100%;height:100%;position:absolute;left:0;top:0;border-radius:50%;border:calc(var(--f7-preloader-size)/ 8) solid var(--f7-preloader-color);border-top-color:transparent;box-sizing:border-box;animation:aurora-preloader-rotate .75s linear infinite}.aurora .preloader.color-multi .preloader-inner-circle{animation:aurora-preloader-rotate .75s linear infinite,aurora-preloader-multicolor 3s linear infinite}@keyframes aurora-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes aurora-preloader-multicolor{0%,100%{border-color:#2196f3;border-top-color:transparent}25%{border-color:#ff3b30;border-top-color:transparent}50%{border-color:#4cd964;border-top-color:transparent}75%{border-color:#ff9500;border-top-color:transparent}}
+:root{--f7-preloader-modal-padding:8px;--f7-preloader-modal-bg-color:rgba(0, 0, 0, 0.8)}.ios{--f7-preloader-color:#6c6c6c;--f7-preloader-size:20px;--f7-preloader-modal-preloader-size:34px;--f7-preloader-modal-border-radius:5px}.md{--f7-preloader-color:#757575;--f7-preloader-size:32px;--f7-preloader-modal-preloader-size:32px;--f7-preloader-modal-border-radius:4px}.aurora{--f7-preloader-color:#757575;--f7-preloader-size:24px;--f7-preloader-modal-preloader-size:24px;--f7-preloader-modal-border-radius:4px}.preloader{display:inline-block;vertical-align:middle;width:var(--f7-preloader-size);height:var(--f7-preloader-size);font-size:0;position:relative}.preloader .preloader-inner{width:100%;height:100%;display:block;position:relative}.preloader-backdrop{visibility:visible;opacity:0;background:0 0;z-index:14000}.preloader-modal{position:absolute;left:50%;top:50%;padding:var(--f7-preloader-modal-padding);background:var(--f7-preloader-modal-bg-color);z-index:14500;transform:translateX(-50%) translateY(-50%);border-radius:var(--f7-preloader-modal-border-radius)}.preloader-modal .preloader{--f7-preloader-size:var(--f7-preloader-modal-preloader-size);display:block!important}.with-modal-preloader .page-content,.with-modal-preloader.page-content,html.with-modal-preloader .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.preloader[class*=color-]{--f7-preloader-color:var(--f7-theme-color)}.ios .preloader-inner{animation:ios-preloader-spin 1s steps(8,end) infinite}.ios .preloader-inner-line{display:block;width:11.6%;height:33.33%;border-radius:100px;background:var(--f7-preloader-color);position:absolute;left:50%;top:50%;transform-origin:center 150%}.ios .preloader.color-multi .preloader-inner-line{animation:ios-preloader-multicolor 3s linear infinite}.ios .preloader-inner-line:first-child{transform:translate(-50%,-150%) rotate(0deg);opacity:.27}.ios .preloader-inner-line:nth-child(2){transform:translate(-50%,-150%) rotate(45deg);opacity:.35285714}.ios .preloader-inner-line:nth-child(3){transform:translate(-50%,-150%) rotate(90deg);opacity:.43571429}.ios .preloader-inner-line:nth-child(4){transform:translate(-50%,-150%) rotate(135deg);opacity:.51857143}.ios .preloader-inner-line:nth-child(5){transform:translate(-50%,-150%) rotate(180deg);opacity:.60142857}.ios .preloader-inner-line:nth-child(6){transform:translate(-50%,-150%) rotate(225deg);opacity:.68428571}.ios .preloader-inner-line:nth-child(7){transform:translate(-50%,-150%) rotate(270deg);opacity:.76714286}.ios .preloader-inner-line:nth-child(8){transform:translate(-50%,-150%) rotate(315deg);opacity:.85}@keyframes ios-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes ios-preloader-multicolor{0%,100%{background-color:#2196f3}25%{background-color:#ff3b30}50%{background-color:#4cd964}75%{background-color:#ff9500}}.md .preloader-inner{animation:md-preloader-rotate 1.4s linear infinite}.md .preloader-inner circle{fill:none;stroke:var(--f7-preloader-color);animation:md-preloader-circle-rotate 5.6s ease-in-out infinite;stroke-dasharray:100px;stroke-dashoffset:80px;stroke-width:4;transform:rotate(-90deg);transform-origin:18px 18px}.md .preloader.color-multi circle{animation:md-preloader-circle-rotate 5.6s ease-in-out infinite,md-preloader-multicolor 5.6s ease-in-out infinite}@keyframes md-preloader-multicolor{0%,100%{stroke:#4285f4}75%{stroke:#1b9a59}50%{stroke:#f7c223}25%{stroke:#de3e35}}@keyframes md-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes md-preloader-circle-rotate{0%{transform:rotate(-90deg);stroke-dashoffset:100px}12.5%{transform:rotate(-90deg);stroke-dashoffset:25px}25%{stroke-dashoffset:100px;transform:rotate(180deg)}25.1%{transform:rotate(-180deg);stroke-dashoffset:100px}37.5%{transform:rotate(-180deg);stroke-dashoffset:25px}50%{stroke-dashoffset:100px;transform:rotate(90deg)}50.1%{transform:rotate(90deg);stroke-dashoffset:100px}62.5%{transform:rotate(90deg);stroke-dashoffset:25px}75%{stroke-dashoffset:100px;transform:rotate(360deg)}75.1%{transform:rotate(0deg);stroke-dashoffset:100px}87.5%{transform:rotate(0deg);stroke-dashoffset:25px}100%{stroke-dashoffset:100px;transform:rotate(270deg)}}.aurora .preloader-inner{position:absolute;left:0;top:0}.aurora .preloader-inner-circle{width:100%;height:100%;position:absolute;left:0;top:0;border-radius:50%;border:calc(var(--f7-preloader-size)/ 8) solid var(--f7-preloader-color);border-top-color:transparent;box-sizing:border-box;animation:aurora-preloader-rotate .75s linear infinite}.aurora .preloader.color-multi .preloader-inner-circle{animation:aurora-preloader-rotate .75s linear infinite,aurora-preloader-multicolor 3s linear infinite}@keyframes aurora-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes aurora-preloader-multicolor{0%,100%{border-color:#2196f3;border-top-color:transparent}25%{border-color:#ff3b30;border-top-color:transparent}50%{border-color:#4cd964;border-top-color:transparent}75%{border-color:#ff9500;border-top-color:transparent}}

package/components/preloader/preloader.css

@@ -1 +1 @@
-:root{--f7-preloader-modal-padding:8px;--f7-preloader-modal-bg-color:rgba(0, 0, 0, 0.8)}.ios{--f7-preloader-color:#6c6c6c;--f7-preloader-size:20px;--f7-preloader-modal-preloader-size:34px;--f7-preloader-modal-border-radius:5px}.md{--f7-preloader-color:#757575;--f7-preloader-size:32px;--f7-preloader-modal-preloader-size:32px;--f7-preloader-modal-border-radius:4px}.aurora{--f7-preloader-color:#757575;--f7-preloader-size:24px;--f7-preloader-modal-preloader-size:24px;--f7-preloader-modal-border-radius:4px}.preloader{display:inline-block;vertical-align:middle;width:var(--f7-preloader-size);height:var(--f7-preloader-size);font-size:0;position:relative}.preloader .preloader-inner{width:100%;height:100%;display:block;position:relative}.preloader-backdrop{visibility:visible;opacity:0;background:0 0;z-index:14000}.preloader-modal{position:absolute;left:50%;top:50%;padding:var(--f7-preloader-modal-padding);background:var(--f7-preloader-modal-bg-color);z-index:14500;transform:translateX(-50%) translateY(-50%);border-radius:var(--f7-preloader-modal-border-radius)}.preloader-modal .preloader{--f7-preloader-size:var(--f7-preloader-modal-preloader-size);display:block!important}.with-modal-preloader .page-content,.with-modal-preloader.page-content,html.with-modal-preloader .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.preloader[class*=color-]{--f7-preloader-color:var(--f7-theme-color)}.ios .preloader-inner{animation:ios-preloader-spin 1s steps(8,end) infinite}.ios .preloader-inner-line{display:block;width:11.6%;height:33.33%;border-radius:100px;background:var(--f7-preloader-color);position:absolute;left:50%;top:50%;transform-origin:center 150%}.ios .preloader.color-multi .preloader-inner-line{animation:ios-preloader-multicolor 3s linear infinite}.ios .preloader-inner-line:nth-child(1){transform:translate(-50%,-150%) rotate(0deg);opacity:.27}.ios .preloader-inner-line:nth-child(2){transform:translate(-50%,-150%) rotate(45deg);opacity:.35285714}.ios .preloader-inner-line:nth-child(3){transform:translate(-50%,-150%) rotate(90deg);opacity:.43571429}.ios .preloader-inner-line:nth-child(4){transform:translate(-50%,-150%) rotate(135deg);opacity:.51857143}.ios .preloader-inner-line:nth-child(5){transform:translate(-50%,-150%) rotate(180deg);opacity:.60142857}.ios .preloader-inner-line:nth-child(6){transform:translate(-50%,-150%) rotate(225deg);opacity:.68428571}.ios .preloader-inner-line:nth-child(7){transform:translate(-50%,-150%) rotate(270deg);opacity:.76714286}.ios .preloader-inner-line:nth-child(8){transform:translate(-50%,-150%) rotate(315deg);opacity:.85}@keyframes ios-preloader-spin{100%{transform:rotate(360deg)}}@keyframes ios-preloader-multicolor{0%,100%{background-color:#2196f3}25%{background-color:#ff3b30}50%{background-color:#4cd964}75%{background-color:#ff9500}}.md .preloader-inner{animation:md-preloader-rotate 1.4s linear infinite}.md .preloader-inner circle{fill:none;stroke:var(--f7-preloader-color);animation:md-preloader-circle-rotate 5.6s ease-in-out infinite;stroke-dasharray:100px;stroke-dashoffset:80px;stroke-width:4;transform:rotate(-90deg);transform-origin:18px 18px}.md .preloader.color-multi circle{animation:md-preloader-circle-rotate 5.6s ease-in-out infinite,md-preloader-multicolor 5.6s ease-in-out infinite}@keyframes md-preloader-multicolor{0%,100%{stroke:#4285f4}75%{stroke:#1b9a59}50%{stroke:#f7c223}25%{stroke:#de3e35}}@keyframes md-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes md-preloader-circle-rotate{0%{transform:rotate(-90deg);stroke-dashoffset:100px}12.5%{transform:rotate(-90deg);stroke-dashoffset:25px}25%{stroke-dashoffset:100px;transform:rotate(180deg)}25.1%{transform:rotate(-180deg);stroke-dashoffset:100px}37.5%{transform:rotate(-180deg);stroke-dashoffset:25px}50%{stroke-dashoffset:100px;transform:rotate(90deg)}50.1%{transform:rotate(90deg);stroke-dashoffset:100px}62.5%{transform:rotate(90deg);stroke-dashoffset:25px}75%{stroke-dashoffset:100px;transform:rotate(360deg)}75.1%{transform:rotate(0deg);stroke-dashoffset:100px}87.5%{transform:rotate(0deg);stroke-dashoffset:25px}100%{stroke-dashoffset:100px;transform:rotate(270deg)}}.aurora .preloader-inner{position:absolute;left:0;top:0}.aurora .preloader-inner-circle{width:100%;height:100%;position:absolute;left:0;top:0;border-radius:50%;border:calc(var(--f7-preloader-size)/ 8) solid var(--f7-preloader-color);border-top-color:transparent;box-sizing:border-box;animation:aurora-preloader-rotate .75s linear infinite}.aurora .preloader.color-multi .preloader-inner-circle{animation:aurora-preloader-rotate .75s linear infinite,aurora-preloader-multicolor 3s linear infinite}@keyframes aurora-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes aurora-preloader-multicolor{0%,100%{border-color:#2196f3;border-top-color:transparent}25%{border-color:#ff3b30;border-top-color:transparent}50%{border-color:#4cd964;border-top-color:transparent}75%{border-color:#ff9500;border-top-color:transparent}}
+:root{--f7-preloader-modal-padding:8px;--f7-preloader-modal-bg-color:rgba(0, 0, 0, 0.8)}.ios{--f7-preloader-color:#6c6c6c;--f7-preloader-size:20px;--f7-preloader-modal-preloader-size:34px;--f7-preloader-modal-border-radius:5px}.md{--f7-preloader-color:#757575;--f7-preloader-size:32px;--f7-preloader-modal-preloader-size:32px;--f7-preloader-modal-border-radius:4px}.aurora{--f7-preloader-color:#757575;--f7-preloader-size:24px;--f7-preloader-modal-preloader-size:24px;--f7-preloader-modal-border-radius:4px}.preloader{display:inline-block;vertical-align:middle;width:var(--f7-preloader-size);height:var(--f7-preloader-size);font-size:0;position:relative}.preloader .preloader-inner{width:100%;height:100%;display:block;position:relative}.preloader-backdrop{visibility:visible;opacity:0;background:0 0;z-index:14000}.preloader-modal{position:absolute;left:50%;top:50%;padding:var(--f7-preloader-modal-padding);background:var(--f7-preloader-modal-bg-color);z-index:14500;transform:translateX(-50%) translateY(-50%);border-radius:var(--f7-preloader-modal-border-radius)}.preloader-modal .preloader{--f7-preloader-size:var(--f7-preloader-modal-preloader-size);display:block!important}.with-modal-preloader .page-content,.with-modal-preloader.page-content,html.with-modal-preloader .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.preloader[class*=color-]{--f7-preloader-color:var(--f7-theme-color)}.ios .preloader-inner{animation:ios-preloader-spin 1s steps(8,end) infinite}.ios .preloader-inner-line{display:block;width:11.6%;height:33.33%;border-radius:100px;background:var(--f7-preloader-color);position:absolute;left:50%;top:50%;transform-origin:center 150%}.ios .preloader.color-multi .preloader-inner-line{animation:ios-preloader-multicolor 3s linear infinite}.ios .preloader-inner-line:first-child{transform:translate(-50%,-150%) rotate(0deg);opacity:.27}.ios .preloader-inner-line:nth-child(2){transform:translate(-50%,-150%) rotate(45deg);opacity:.35285714}.ios .preloader-inner-line:nth-child(3){transform:translate(-50%,-150%) rotate(90deg);opacity:.43571429}.ios .preloader-inner-line:nth-child(4){transform:translate(-50%,-150%) rotate(135deg);opacity:.51857143}.ios .preloader-inner-line:nth-child(5){transform:translate(-50%,-150%) rotate(180deg);opacity:.60142857}.ios .preloader-inner-line:nth-child(6){transform:translate(-50%,-150%) rotate(225deg);opacity:.68428571}.ios .preloader-inner-line:nth-child(7){transform:translate(-50%,-150%) rotate(270deg);opacity:.76714286}.ios .preloader-inner-line:nth-child(8){transform:translate(-50%,-150%) rotate(315deg);opacity:.85}@keyframes ios-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes ios-preloader-multicolor{0%,100%{background-color:#2196f3}25%{background-color:#ff3b30}50%{background-color:#4cd964}75%{background-color:#ff9500}}.md .preloader-inner{animation:md-preloader-rotate 1.4s linear infinite}.md .preloader-inner circle{fill:none;stroke:var(--f7-preloader-color);animation:md-preloader-circle-rotate 5.6s ease-in-out infinite;stroke-dasharray:100px;stroke-dashoffset:80px;stroke-width:4;transform:rotate(-90deg);transform-origin:18px 18px}.md .preloader.color-multi circle{animation:md-preloader-circle-rotate 5.6s ease-in-out infinite,md-preloader-multicolor 5.6s ease-in-out infinite}@keyframes md-preloader-multicolor{0%,100%{stroke:#4285f4}75%{stroke:#1b9a59}50%{stroke:#f7c223}25%{stroke:#de3e35}}@keyframes md-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes md-preloader-circle-rotate{0%{transform:rotate(-90deg);stroke-dashoffset:100px}12.5%{transform:rotate(-90deg);stroke-dashoffset:25px}25%{stroke-dashoffset:100px;transform:rotate(180deg)}25.1%{transform:rotate(-180deg);stroke-dashoffset:100px}37.5%{transform:rotate(-180deg);stroke-dashoffset:25px}50%{stroke-dashoffset:100px;transform:rotate(90deg)}50.1%{transform:rotate(90deg);stroke-dashoffset:100px}62.5%{transform:rotate(90deg);stroke-dashoffset:25px}75%{stroke-dashoffset:100px;transform:rotate(360deg)}75.1%{transform:rotate(0deg);stroke-dashoffset:100px}87.5%{transform:rotate(0deg);stroke-dashoffset:25px}100%{stroke-dashoffset:100px;transform:rotate(270deg)}}.aurora .preloader-inner{position:absolute;left:0;top:0}.aurora .preloader-inner-circle{width:100%;height:100%;position:absolute;left:0;top:0;border-radius:50%;border:calc(var(--f7-preloader-size)/ 8) solid var(--f7-preloader-color);border-top-color:transparent;box-sizing:border-box;animation:aurora-preloader-rotate .75s linear infinite}.aurora .preloader.color-multi .preloader-inner-circle{animation:aurora-preloader-rotate .75s linear infinite,aurora-preloader-multicolor 3s linear infinite}@keyframes aurora-preloader-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes aurora-preloader-multicolor{0%,100%{border-color:#2196f3;border-top-color:transparent}25%{border-color:#ff3b30;border-top-color:transparent}50%{border-color:#4cd964;border-top-color:transparent}75%{border-color:#ff9500;border-top-color:transparent}}

package/components/preloader/preloader.d.ts

@@ -5,8 +5,12 @@ export namespace Preloader {
     preloader: {
       /** Show Preloader overlay */
       show(color?: string | 'white'): void;
+      /** Show Preloader overlay in specified element */
+      showIn(el: HTMLElement | CSSSelector, color?: string): void;
       /** Hide Preloader overlay */
       hide(): void;
+      /** Hide Preloader overlay in specified element */
+      hideIn(el: HTMLElement | CSSSelector): void;
     };
   }
   interface AppParams {}

package/components/preloader/preloader.js

@@ -1,5 +1,5 @@
-import $ from '../../shared/dom7';
-import { bindMethods, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import { bindMethods, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils.js';
 const Preloader = {
   init(el) {
     const app = this;
@@ -16,7 +16,11 @@ const Preloader = {
   // Modal
   visible: false,
 
-  show(color = 'white') {
+  show(color) {
+    if (color === void 0) {
+      color = 'white';
+    }
+
     const app = this;
     if (Preloader.visible) return;
     const preloaders = {
@@ -36,7 +40,11 @@ const Preloader = {
     Preloader.visible = true;
   },
 
-  showIn(el, color = 'white') {
+  showIn(el, color) {
+    if (color === void 0) {
+      color = 'white';
+    }
+
     const app = this;
     const preloaders = {
       iosPreloaderContent,

package/components/preloader/preloader.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,r){void 0===r&&(r=!0);var o=e.$,d=e.utils,a=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,d.iosPreloaderContent),t=d.mdPreloaderContent,n=d.auroraPreloaderContent,l=d.bindMethods;const i={init(e){const r={iosPreloaderContent:a,mdPreloaderContent:t,auroraPreloaderContent:n},d=o(e);0===d.length||d.children(".preloader-inner").length>0||d.children(".preloader-inner-line").length>0||d.append(r[`${this.theme}PreloaderContent`])},visible:!1,show(e){void 0===e&&(e="white");if(i.visible)return;const r={iosPreloaderContent:a,mdPreloaderContent:t,auroraPreloaderContent:n}[`${this.theme}PreloaderContent`]||"";o("html").addClass("with-modal-preloader"),this.$el.append(`\n        <div class="preloader-backdrop"></div>\n        <div class="preloader-modal">\n          <div class="preloader color-${e}">${r}</div>\n        </div>\n      `),i.visible=!0},showIn(e,r){void 0===r&&(r="white");const d={iosPreloaderContent:a,mdPreloaderContent:t,auroraPreloaderContent:n}[`${this.theme}PreloaderContent`]||"";o(e||"html").addClass("with-modal-preloader"),o(e||this.$el).append(`\n        <div class="preloader-backdrop"></div>\n        <div class="preloader-modal">\n          <div class="preloader color-${r}">${d}</div>\n        </div>\n      `)},hide(){i.visible&&(o("html").removeClass("with-modal-preloader"),this.$el.find(".preloader-backdrop, .preloader-modal").remove(),i.visible=!1)},hideIn(e){o(e||"html").removeClass("with-modal-preloader"),o(e||this.$el).find(".preloader-backdrop, .preloader-modal").remove()}};var s={name:"preloader",create(){l(this,{preloader:i})},on:{photoBrowserOpen(e){const r=this;e.$el.find(".preloader").each((e=>{r.preloader.init(e)}))},tabMounted(e){const r=this;o(e).find(".preloader").each((e=>{r.preloader.init(e)}))},pageInit(e){const r=this;e.$el.find(".preloader").each((e=>{r.preloader.init(e)}))}},vnode:{preloader:{insert(e){const r=e.elm;this.preloader.init(r)}}}};if(r){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))