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

package/components/accordion/accordion.js

@@ -1,5 +1,5 @@
-import $ from '../../shared/dom7';
-import { nextFrame, bindMethods } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import { nextFrame, bindMethods } from '../../shared/utils.js';
 const Accordion = {
   toggleClicked($clickedEl) {
     const app = this;

package/components/accordion/{accordion.umd.js → accordion.lazy.js}

@@ -1 +1 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,n=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,n.bindMethods),c=n.nextFrame;const r={toggleClicked(e){let o=e.closest(".accordion-item").eq(0);o.length||(o=e.parents("li").eq(0));const t=e.parents(".accordion-item-content").eq(0);t.length&&t.parents(o).length||e.parents("li").length>1&&e.parents("li")[0]!==o[0]||this.accordion.toggle(o)},open(e){const o=this,n=t(e);let i=!1;function r(){i=!0}if(n.trigger("accordion:beforeopen",{prevent:r},r),o.emit("accordionBeforeOpen",n[0],r),i)return;const s=n.parents(".accordion-list").eq(0);let a=n.children(".accordion-item-content");if(a.removeAttr("aria-hidden"),0===a.length&&(a=n.find(".accordion-item-content")),0===a.length)return;const d=s.length>0&&n.parent().children(".accordion-item-opened");d.length>0&&o.accordion.close(d),a.transitionEnd((()=>{n.hasClass("accordion-item-opened")?(a.transition(0),a.css("height","auto"),c((()=>{a.transition(""),n.trigger("accordion:opened"),o.emit("accordionOpened",n[0])}))):(a.css("height",""),n.trigger("accordion:closed"),o.emit("accordionClosed",n[0]))})),a.css("height",`${a[0].scrollHeight}px`),n.trigger("accordion:open"),n.addClass("accordion-item-opened"),o.emit("accordionOpen",n[0])},close(e){const o=this,n=t(e);let i=!1;function r(){i=!0}if(n.trigger("accordion:beforeclose",{prevent:r},r),o.emit("accordionBeforeClose",n[0],r),i)return;let s=n.children(".accordion-item-content");0===s.length&&(s=n.find(".accordion-item-content")),n.removeClass("accordion-item-opened"),s.attr("aria-hidden",!0),s.transition(0),s.css("height",`${s[0].scrollHeight}px`),s.transitionEnd((()=>{n.hasClass("accordion-item-opened")?(s.transition(0),s.css("height","auto"),c((()=>{s.transition(""),n.trigger("accordion:opened"),o.emit("accordionOpened",n[0])}))):(s.css("height",""),n.trigger("accordion:closed"),o.emit("accordionClosed",n[0]))})),c((()=>{s.transition(""),s.css("height",""),n.trigger("accordion:close"),o.emit("accordionClose",n[0])}))},toggle(e){const o=t(e);0!==o.length&&(o.hasClass("accordion-item-opened")?this.accordion.close(e):this.accordion.open(e))}};var s={name:"accordion",create(){i(this,{accordion:r})},clicks:{".accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a":function(e){r.toggleClicked.call(this,e)}}};if(o){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))
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,n=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,n.nextFrame),c=n.bindMethods;const r={toggleClicked(e){let o=e.closest(".accordion-item").eq(0);o.length||(o=e.parents("li").eq(0));const t=e.parents(".accordion-item-content").eq(0);t.length&&t.parents(o).length||e.parents("li").length>1&&e.parents("li")[0]!==o[0]||this.accordion.toggle(o)},open(e){const o=this,n=t(e);let c=!1;function r(){c=!0}if(n.trigger("accordion:beforeopen",{prevent:r},r),o.emit("accordionBeforeOpen",n[0],r),c)return;const s=n.parents(".accordion-list").eq(0);let a=n.children(".accordion-item-content");if(a.removeAttr("aria-hidden"),0===a.length&&(a=n.find(".accordion-item-content")),0===a.length)return;const d=s.length>0&&n.parent().children(".accordion-item-opened");d.length>0&&o.accordion.close(d),a.transitionEnd((()=>{n.hasClass("accordion-item-opened")?(a.transition(0),a.css("height","auto"),i((()=>{a.transition(""),n.trigger("accordion:opened"),o.emit("accordionOpened",n[0])}))):(a.css("height",""),n.trigger("accordion:closed"),o.emit("accordionClosed",n[0]))})),a.css("height",`${a[0].scrollHeight}px`),n.trigger("accordion:open"),n.addClass("accordion-item-opened"),o.emit("accordionOpen",n[0])},close(e){const o=this,n=t(e);let c=!1;function r(){c=!0}if(n.trigger("accordion:beforeclose",{prevent:r},r),o.emit("accordionBeforeClose",n[0],r),c)return;let s=n.children(".accordion-item-content");0===s.length&&(s=n.find(".accordion-item-content")),n.removeClass("accordion-item-opened"),s.attr("aria-hidden",!0),s.transition(0),s.css("height",`${s[0].scrollHeight}px`),s.transitionEnd((()=>{n.hasClass("accordion-item-opened")?(s.transition(0),s.css("height","auto"),i((()=>{s.transition(""),n.trigger("accordion:opened"),o.emit("accordionOpened",n[0])}))):(s.css("height",""),n.trigger("accordion:closed"),o.emit("accordionClosed",n[0]))})),i((()=>{s.transition(""),s.css("height",""),n.trigger("accordion:close"),o.emit("accordionClose",n[0])}))},toggle(e){const o=t(e);0!==o.length&&(o.hasClass("accordion-item-opened")?this.accordion.close(e):this.accordion.open(e))}};var s={name:"accordion",create(){c(this,{accordion:r})},clicks:{".accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a":function(e){r.toggleClicked.call(this,e)}}};if(o){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))

package/components/actions/actions-class.js

@@ -1,12 +1,12 @@
 /* eslint indent: ["off"] */
 import { getWindow, getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
-import { extend, nextTick } from '../../shared/utils';
-import Modal from '../modal/modal-class';
-import $ from '../../shared/dom7';
+import { getDevice } from '../../shared/get-device.js';
+import { extend, nextTick } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+import $ from '../../shared/dom7.js';
 /** @jsx $jsx */
 
-import $jsx from '../../shared/$jsx';
+import $jsx from '../../shared/$jsx.js';
 
 class Actions extends Modal {
   constructor(app, params) {
@@ -58,7 +58,12 @@ class Actions extends Modal {
     if (actions.params.backdrop && actions.params.backdropEl) {
       $backdropEl = $(actions.params.backdropEl);
     } else if (actions.params.backdrop) {
-      $backdropEl = actions.$containerEl.children('.actions-backdrop');
+      if (actions.params.backdropUnique) {
+        $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+        actions.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = actions.$containerEl.children('.actions-backdrop');
+      }
 
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="actions-backdrop"></div>');

package/components/actions/actions-rtl.css

@@ -1 +1 @@
-:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .theme-dark,:root.theme-dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .theme-dark,.ios.theme-dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .theme-dark,.md.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .theme-dark,.aurora.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .dark,:root.dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .dark,.md.dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .dark,.aurora.dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}

package/components/actions/actions.css

@@ -1 +1 @@
-:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .theme-dark,:root.theme-dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .theme-dark,.ios.theme-dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .theme-dark,.md.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .theme-dark,.aurora.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .dark,:root.dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .dark,.md.dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .dark,.aurora.dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}

package/components/actions/actions.d.ts

@@ -56,6 +56,8 @@ export namespace Actions {
     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;
     /** Custom css class added to Actions Sheet element */
     cssClass?: string;
     /** When enabled, action sheet will be closed on backdrop click*/

package/components/actions/actions.js

@@ -1,5 +1,5 @@
-import Actions from './actions-class';
-import ModalMethods from '../../shared/modal-methods';
+import Actions from './actions-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
 export default {
   name: 'actions',
   params: {
@@ -8,6 +8,7 @@ export default {
       forceToPopover: false,
       backdrop: true,
       backdropEl: undefined,
+      backdropUnique: false,
       cssClass: null,
       closeByBackdropClick: true,
       closeOnEscape: false,
@@ -30,11 +31,19 @@ export default {
   },
 
   clicks: {
-    '.actions-open': function openActions($clickedEl, data = {}) {
+    '.actions-open': function openActions($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
       const app = this;
       app.actions.open(data.actions, data.animate, $clickedEl);
     },
-    '.actions-close': function closeActions($clickedEl, data = {}) {
+    '.actions-close': function closeActions($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
       const app = this;
       app.actions.close(data.actions, data.animate, $clickedEl);
     }

package/components/actions/actions.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var s=o.$,a=o.utils,t=o.getDevice,l=(o.getSupport,o.Class,o.Modal),n=(o.ConstructorMethods,o.ModalMethods),r=a.extend,c=a.nextTick;class i extends l{constructor(o,e){const a=r({on:{}},o.params.actions,e);super(o,a);const l=this,n=t(),i=getWindow(),p=getDocument();let d,m,u;if(l.params=a,l.params.buttons&&(d=l.params.buttons,Array.isArray(d[0])||(d=[d])),l.groups=d,l.params.el?m=s(l.params.el).eq(0):l.params.content?m=s(l.params.content).filter((o=>1===o.nodeType)).eq(0):l.params.buttons&&(l.params.convertToPopover&&(l.popoverHtml=l.renderPopover()),l.actionsHtml=l.render()),m&&m.length>0&&m[0].f7Modal)return m[0].f7Modal;if(m&&0===m.length&&!l.actionsHtml&&!l.popoverHtml)return l.destroy();l.params.backdrop&&l.params.backdropEl?u=s(l.params.backdropEl):l.params.backdrop&&(l.params.backdropUnique?(u=s('<div class="popup-backdrop popup-backdrop-unique"></div>'),l.$containerEl.append(u)):u=l.$containerEl.children(".actions-backdrop"),0===u.length&&(u=s('<div class="actions-backdrop"></div>'),l.$containerEl.append(u)));const $=l.open,v=l.close;let b;function k(o){const e=s(this);let a,t;if(e.hasClass("list-button")||e.hasClass("item-link")?(a=e.parents("li").index(),t=e.parents(".list").index()):(a=e.index(),t=e.parents(".actions-group").index()),void 0!==d){const e=d[t][a];e.onClick&&e.onClick(l,o),l.params.onClick&&l.params.onClick(l,o),!1!==e.close&&l.close()}}function g(o){const e=o.target,a=s(e);!n.desktop&&n.cordova&&(i.Keyboard&&i.Keyboard.isVisible||i.cordova.plugins&&i.cordova.plugins.Keyboard&&i.cordova.plugins.Keyboard.isVisible)||0===a.closest(l.el).length&&(l.params.closeByBackdropClick&&l.params.backdrop&&l.backdropEl&&l.backdropEl===e||l.params.closeByOutsideClick)&&l.close()}function f(o){27===o.keyCode&&l.params.closeOnEscape&&l.close()}return l.open=function(e){let a=!1;const{targetEl:t,targetX:r,targetY:i,targetWidth:p,targetHeight:d}=l.params;return l.params.convertToPopover&&(t||void 0!==r&&void 0!==i)&&(l.params.forceToPopover||n.ios&&n.ipad||o.width>=768||n.desktop&&"aurora"===o.theme)&&(a=!0),a&&l.popoverHtml?(b=o.popover.create({containerEl:l.params.containerEl,content:l.popoverHtml,backdrop:l.params.backdrop,targetEl:t,targetX:r,targetY:i,targetWidth:p,targetHeight:d,on:{open(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:open ${l.type.toLowerCase()}:open`),l.emit(`local::open modalOpen ${l.type}Open`,l)},opened(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:opened ${l.type.toLowerCase()}:opened`),l.emit(`local::opened modalOpened ${l.type}Opened`,l)},close(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:close ${l.type.toLowerCase()}:close`),l.emit(`local::close modalClose ${l.type}Close`,l)},closed(){l.$el||(l.$el=b.$el),l.$el.trigger(`modal:closed ${l.type.toLowerCase()}:closed`),l.emit(`local::closed modalClosed ${l.type}Closed`,l)}}}),b.open(e),b.once("popoverOpened",(()=>{b.$el.find(".list-button, .item-link").each((o=>{s(o).on("click",k)}))})),b.once("popoverClosed",(()=>{b.$el.find(".list-button, .item-link").each((o=>{s(o).off("click",k)})),c((()=>{b.destroy(),b=void 0}))}))):(l.$el=l.actionsHtml?s(l.actionsHtml):l.$el,l.$el[0].f7Modal=l,l.groups&&(l.$el.find(".actions-button").each((o=>{s(o).on("click",k)})),l.once("actionsClosed",(()=>{l.$el.find(".actions-button").each((o=>{s(o).off("click",k)}))}))),l.el=l.$el[0],$.call(l,e)),l},l.close=function(o){return b?b.close(o):v.call(l,o),l},r(l,{app:o,$el:m,el:m?m[0]:void 0,$backdropEl:u,backdropEl:u&&u[0],type:"actions"}),l.params.closeOnEscape&&(l.on("open",(()=>{s(p).on("keydown",f)})),l.on("close",(()=>{s(p).off("keydown",f)}))),l.on("opened",(()=>{(l.params.closeByBackdropClick||l.params.closeByOutsideClick)&&o.on("click",g)})),l.on("close",(()=>{(l.params.closeByBackdropClick||l.params.closeByOutsideClick)&&o.off("click",g)})),m&&(m[0].f7Modal=l),l}render(){const o=this;if(o.params.render)return o.params.render.call(o,o);const{groups:e}=o,s=o.params.cssClass;return $jsx("div",{class:`actions-modal${o.params.grid?" actions-grid":""} ${s||""}`},e.map((o=>$jsx("div",{class:"actions-group"},o.map((o=>{const e=["actions-"+(o.label?"label":"button")],{color:s,bg:a,bold:t,disabled:l,label:n,text:r,icon:c}=o;return s&&e.push(`color-${s}`),a&&e.push(`bg-color-${a}`),t&&e.push("actions-button-bold"),l&&e.push("disabled"),n?$jsx("div",{class:e.join(" ")},r):$jsx("div",{class:e.join(" ")},c&&$jsx("div",{class:"actions-button-media"},c),$jsx("div",{class:"actions-button-text"},r))}))))))}renderPopover(){const o=this;if(o.params.renderPopover)return o.params.renderPopover.call(o,o);const{groups:e}=o,s=o.params.cssClass;return $jsx("div",{class:`popover popover-from-actions ${s||""}`},$jsx("div",{class:"popover-inner"},e.map((o=>$jsx("div",{class:"list"},$jsx("ul",null,o.map((o=>{const e=[],{color:s,bg:a,bold:t,disabled:l,label:n,text:r,icon:c}=o;return s&&e.push(`color-${s}`),a&&e.push(`bg-color-${a}`),t&&e.push("popover-from-actions-bold"),l&&e.push("disabled"),n?(e.push("popover-from-actions-label"),`<li class="${e.join(" ")}">${r}</li>`):c?(e.push("item-link item-content"),$jsx("li",null,$jsx("a",{class:e.join(" ")},$jsx("div",{class:"item-media"},c),$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},r))))):(e.push("list-button"),$jsx("li",null,$jsx("a",{class:e.join(" ")},r)))}))))))))}}var p={name:"actions",params:{actions:{convertToPopover:!0,forceToPopover:!1,backdrop:!0,backdropEl:void 0,backdropUnique:!1,cssClass:null,closeByBackdropClick:!0,closeOnEscape:!1,render:null,renderPopover:null,containerEl:null}},static:{Actions:i},create(){this.actions=n({app:this,constructor:i,defaultSelector:".actions-modal.modal-in"})},clicks:{".actions-open":function(o,e){void 0===e&&(e={});this.actions.open(e.actions,e.animate,o)},".actions-close":function(o,e){void 0===e&&(e={});this.actions.close(e.actions,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[p.name])return;o.use(p),o.instance&&(o.instance.useModuleParams(p,o.instance.params),o.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/actions/actions.less

@@ -1,6 +1,9 @@
 /* === Actions === */
 @import './actions-vars.less';
 .actions-backdrop {
+  &-unique {
+    z-index: 13500;
+  }
 }
 .actions-modal {
   position: absolute;

package/components/app/app-class.d.ts

@@ -53,8 +53,8 @@ export interface Framework7Parameters {
   language?: string;
   /** Array with default routes to all views.. (default []) */
   routes?: Router.RouteParameters[];
-  /** Enables auto dark theme */
-  autoDarkTheme?: boolean;
+  /** Enables auto dark mode */
+  autoDarkMode?: boolean;
   /** Lazy modules path */
   lazyModulesPath?: string;
   /** By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with init() when you need it.. (default true) */
@@ -116,8 +116,8 @@ export interface Framework7Plugin {
 export interface Framework7Events {
   /** Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init. */
   init: () => void;
-  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkTheme` enabled */
-  darkThemeChange: (isDark: boolean) => void;
+  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkMode` enabled */
+  darkModeChange: (isDark: boolean) => void;
   /** Event will be fired when app goes online */
   online: () => void;
   /** Event will be fired when app goes offline */
@@ -145,8 +145,8 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   rtl: boolean;
   /** Current app theme. Can be md, ios or aurora */
   theme: string;
-  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkTheme` enabled */
-  darkTheme: boolean;
+  /** Indicates whether the dark mode active or not. This property has effect only when `autoDarkMode` enabled */
+  darkMode: boolean;
   /** Object with app root data passed on intialization */
   data: any;
   /** Object with app root methods */
@@ -159,10 +159,10 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   $: Dom7;
   /** App parameters */
   params: Framework7Parameters;
-  /** Enables auto dark theme detection */
-  enableAutoDarkTheme(): void;
-  /** Disables auto dark theme detection */
-  disableAutoDarkTheme(): void;
+  /** Enables auto dark mode detection */
+  enableAutoDarkMode(): void;
+  /** Disables auto dark mode detection */
+  disableAutoDarkMode(): void;
   /** Initialize app. In case you disabled auto initialization with init: false parameter */
   init(): void;
   /** Load module */

package/components/app/app-class.js

@@ -1,17 +1,21 @@
 /* eslint-disable no-underscore-dangle */
 import { getWindow, getDocument } from 'ssr-window';
-import { extend, nextFrame } from '../../shared/utils';
-import { getDevice } from '../../shared/get-device';
-import { getSupport } from '../../shared/get-support';
-import Framework7Class from '../../shared/class';
-import EventsClass from '../../shared/events-class';
-import ConstructorMethods from '../../shared/constructor-methods';
-import ModalMethods from '../../shared/modal-methods';
-import $ from '../../shared/dom7';
-import loadModule from './load-module';
+import { extend, nextFrame } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import { getSupport } from '../../shared/get-support.js';
+import Framework7Class from '../../shared/class.js';
+import EventsClass from '../../shared/events-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+import ModalMethods from '../../shared/modal-methods.js';
+import $ from '../../shared/dom7.js';
+import loadModule from './load-module.js';
 
 class Framework7 extends Framework7Class {
-  constructor(params = {}) {
+  constructor(params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     super(params); // eslint-disable-next-line
 
     if (Framework7.instance && typeof window !== 'undefined') {
@@ -42,7 +46,7 @@ class Framework7 extends Framework7Class {
       lazyModulesPath: null,
       initOnDeviceReady: true,
       init: true,
-      autoDarkTheme: false,
+      autoDarkMode: false,
       iosTranslucentBars: true,
       iosTranslucentModals: true,
       component: undefined,
@@ -115,7 +119,7 @@ class Framework7 extends Framework7Class {
       app.el = app.$el[0];
       app.el.f7 = app;
       app.rtl = $rootEl.css('direction') === 'rtl';
-    } // Auto Dark Theme
+    } // Auto Dark Mode
 
 
     const DARK = '(prefers-color-scheme: dark)';
@@ -127,10 +131,12 @@ class Framework7 extends Framework7Class {
       app.mq.light = window.matchMedia(LIGHT);
     }
 
-    app.colorSchemeListener = function colorSchemeListener({
-      matches,
-      media
-    }) {
+    app.colorSchemeListener = function colorSchemeListener(_ref) {
+      let {
+        matches,
+        media
+      } = _ref;
+
       if (!matches) {
         return;
       }
@@ -138,13 +144,13 @@ class Framework7 extends Framework7Class {
       const html = document.querySelector('html');
 
       if (media === DARK) {
-        html.classList.add('theme-dark');
-        app.darkTheme = true;
-        app.emit('darkThemeChange', true);
+        html.classList.add('dark');
+        app.darkMode = true;
+        app.emit('darkModeChange', true);
       } else if (media === LIGHT) {
-        html.classList.remove('theme-dark');
-        app.darkTheme = false;
-        app.emit('darkThemeChange', false);
+        html.classList.remove('dark');
+        app.darkMode = false;
+        app.emit('darkModeChange', false);
       }
     };
 
@@ -161,7 +167,7 @@ class Framework7 extends Framework7Class {
     }
   }
 
-  enableAutoDarkTheme() {
+  enableAutoDarkMode() {
     const window = getWindow();
     const document = getDocument();
     if (!window.matchMedia) return;
@@ -174,17 +180,17 @@ class Framework7 extends Framework7Class {
     }
 
     if (app.mq.dark && app.mq.dark.matches) {
-      html.classList.add('theme-dark');
-      app.darkTheme = true;
-      app.emit('darkThemeChange', true);
+      html.classList.add('dark');
+      app.darkMode = true;
+      app.emit('darkModeChange', true);
     } else if (app.mq.light && app.mq.light.matches) {
-      html.classList.remove('theme-dark');
-      app.darkTheme = false;
-      app.emit('darkThemeChange', false);
+      html.classList.remove('dark');
+      app.darkMode = false;
+      app.emit('darkModeChange', false);
     }
   }
 
-  disableAutoDarkTheme() {
+  disableAutoDarkMode() {
     const window = getWindow();
     if (!window.matchMedia) return;
     const app = this;
@@ -217,11 +223,11 @@ class Framework7 extends Framework7Class {
 
       if (app.rtl) {
         $('html').attr('dir', 'rtl');
-      } // Auto Dark Theme
+      } // Auto Dark Mode
 
 
-      if (app.params.autoDarkTheme) {
-        app.enableAutoDarkTheme();
+      if (app.params.autoDarkMode) {
+        app.enableAutoDarkMode();
       } // Watch for online/offline state
 
 
@@ -272,13 +278,13 @@ class Framework7 extends Framework7Class {
   } // eslint-disable-next-line
 
 
-  loadModule(...args) {
-    return Framework7.loadModule(...args);
+  loadModule() {
+    return Framework7.loadModule(...arguments);
   } // eslint-disable-next-line
 
 
-  loadModules(...args) {
-    return Framework7.loadModules(...args);
+  loadModules() {
+    return Framework7.loadModules(...arguments);
   }
 
   getVnodeHooks(hook, id) {

package/components/app/app.less

@@ -34,11 +34,11 @@ body {
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
 }
-.theme-dark body,
-body.theme-dark {
+.dark body,
+body.dark {
   background: #000;
 }
-.theme-dark {
+.dark {
   color: var(--f7-text-color);
 }
 .framework7-root {

package/components/app/load-module.js

@@ -1,6 +1,6 @@
 import { getWindow, getDocument } from 'ssr-window';
-import { id } from '../../shared/utils';
-import $ from '../../shared/dom7';
+import { id } from '../../shared/utils.js';
+import $ from '../../shared/dom7.js';
 const fetchedModules = [];
 
 function loadModule(moduleToLoad) {
@@ -36,7 +36,7 @@ function loadModule(moduleToLoad) {
           return;
         }
 
-        modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.js`;
+        modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.lazy.js`;
       } else {
         modulePath = moduleToLoad;
       }
@@ -123,7 +123,7 @@ function loadModule(moduleToLoad) {
         });
       });
       const styleLoad = new Promise(resolveStyle => {
-        Framework7.request.get(modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
+        Framework7.request.get(modulePath.replace('.lazy.js', app.rtl ? '.rtl.css' : '.css').replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
           const styleEl = document.createElement('style');
           styleEl.innerHTML = styleContent;
           $('head').append(styleEl);

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

@@ -1,12 +1,16 @@
-import $ from '../../shared/dom7';
-import { extend, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 
-import $jsx from '../../shared/$jsx';
+import $jsx from '../../shared/$jsx.js';
 
 class AreaChart extends Framework7Class {
-  constructor(app, params = {}) {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     super(params, [app]);
     const self = this;
     const defaults = extend({}, app.params.areaChart); // Extend defaults with modules params
@@ -59,9 +63,10 @@ class AreaChart extends Framework7Class {
       hiddenDatasets
     } = this;
     const summValues = [];
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
-      values
-    }) => {
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref => {
+      let {
+        values
+      } = _ref;
       values.forEach((value, valueIndex) => {
         if (!summValues[valueIndex]) summValues[valueIndex] = 0;
         summValues[valueIndex] += value;
@@ -90,9 +95,10 @@ class AreaChart extends Framework7Class {
     let maxValue = 0;
 
     if (lineChart) {
-      datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
-        values
-      }) => {
+      datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref2 => {
+        let {
+          values
+        } = _ref2;
         const datasetMaxValue = Math.max(...values);
         if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
       });
@@ -100,11 +106,12 @@ class AreaChart extends Framework7Class {
       maxValue = Math.max(...this.getSummValues());
     }
 
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
-      label,
-      values,
-      color
-    }) => {
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref3 => {
+      let {
+        label,
+        values,
+        color
+      } = _ref3;
       const points = values.map((originalValue, valueIndex) => {
         lastValues[valueIndex] += originalValue;
         const value = lineChart ? originalValue : lastValues[valueIndex];
@@ -239,11 +246,12 @@ class AreaChart extends Framework7Class {
 
     const datasetsText = currentValues.length > 0 ? `
       <ul class="area-chart-tooltip-list">
-        ${currentValues.map(({
-      label,
-      color,
-      value
-    }) => {
+        ${currentValues.map(_ref4 => {
+      let {
+        label,
+        color,
+        value
+      } = _ref4;
       const valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : `${label ? `${label}: ` : ''}${value}`;
       return `
               <li><span style="background-color: ${color};"></span>${valueText}</li>
@@ -422,7 +430,15 @@ class AreaChart extends Framework7Class {
     }), self.formatLegendLabel(dataset.label)))));
   }
 
-  update(newParams = {}, onlySvg = false) {
+  update(newParams, onlySvg) {
+    if (newParams === void 0) {
+      newParams = {};
+    }
+
+    if (onlySvg === void 0) {
+      onlySvg = false;
+    }
+
     const self = this;
     const {
       params

package/components/area-chart/area-chart-rtl.css

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .theme-dark,:root.theme-dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

package/components/area-chart/area-chart.css

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .theme-dark,:root.theme-dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

package/components/area-chart/area-chart.js

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