framework7 6.3.16 → 7.0.0-beta.12

package/components/card/card.js

@@ -1 +1,592 @@
-(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);var t=e.$,r=e.utils,n=e.getDevice,o=e.getSupport,s=(e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,r.bindMethods),d={open:function(e,a){void 0===e&&(e=".card-expandable"),void 0===a&&(a=!0);var r=this,s=n(),d=o(),l=t(e).eq(0);if(l&&l.length&&!(l.hasClass("card-opened")||l.hasClass("card-opening")||l.hasClass("card-closing"))){var c,i=l.parents(".page").eq(0);if(i.length)if(!i.find(".card-opened").length)if(l.trigger("card:beforeopen",{prevent:Z}),r.emit("cardBeforeOpen",l[0],Z),!c){var p,h,f,g=Object.assign({animate:a},r.params.card,l.dataset()),v=l.parents(".page-content");l.attr("data-backdrop-el")&&(p=t(l.attr("data-backdrop-el"))),!p&&g.backdrop&&((p=v.find(".card-backdrop")).length||(p=t('<div class="card-backdrop"></div>'),v.append(p))),g.hideNavbarOnOpen&&((h=i.children(".navbar")).length||i[0].f7Page&&(h=i[0].f7Page.$navbarEl)),g.hideToolbarOnOpen&&((f=i.children(".toolbar")).length||(f=i.parents(".view").children(".toolbar")),f.length||(f=i.parents(".views").children(".toolbar")));var b,m=l.css("transform");m&&m.match(/[2-9]/)&&(b=!0);var u=l.children(".card-content"),C=t(document.createElement("div")).addClass("card-expandable-size");l.append(C);var O,x=l[0].offsetWidth,k=l[0].offsetHeight,w=i[0].offsetWidth,T=i[0].offsetHeight,E=C[0].offsetWidth||w,N=C[0].offsetHeight||T;h&&!g.hideStatusbarOnOpen&&N===T&&(O=parseInt(h.css("--f7-safe-area-top"),10),Number.isNaN(O)&&(O=0)),O&&(N-=O);var H,M,$=E/x,y=N/k,B=l.offset(),K=i.offset();if(O&&(K.top+=O/2),B.left-=K.left,b){var S=m.replace(/matrix\(|\)/g,"").split(",").map((function(e){return e.trim()}));if(S&&S.length>1){var W=parseFloat(S[0]);H=B.left-x*(1-W)/2,M=B.top-K.top-k*(1-W)/2,r.rtl&&(H-=l[0].scrollLeft)}else H=l[0].offsetLeft,M=l[0].offsetTop-(v.length?v[0].scrollTop:0)}else H=B.left,M=B.top-K.top,r.rtl&&(H-=l[0].scrollLeft);M-=(T-N)/2;var q=E-x-(H-=(w-E)/2);if(r.rtl){var L=[q,H];H=L[0],q=L[1]}var P,z,I,X,j,D,Y,F,A,G,J,Q,R=N-k-M,U=(q-H)/2,V=(R-M)/2;g.hideNavbarOnOpen&&h&&h.length&&(h.closest(".navbar-hidden").length?l[0].f7KeepNavbarOnClose=!0:(delete l[0].f7KeepNavbarOnClose,r.navbar.hide(h,g.animate,g.hideStatusbarOnOpen,!0))),g.hideToolbarOnOpen&&f&&f.length&&(f.closest(".toolbar-hidden").length?l[0].f7KeepToolbarOnClose=!0:(delete l[0].f7KeepToolbarOnClose,r.toolbar.hide(f,g.animate))),p&&p.removeClass("card-backdrop-out").addClass("card-backdrop-in"),l.removeClass("card-transitioning"),g.animate&&l.addClass("card-opening"),l.trigger("card:open"),r.emit("cardOpen",l[0]),u.css({width:E+"px",height:N+"px"}).transform("translate3d("+(r.rtl?H+U:-H-U)+"px, 0px, 0) scale("+1/$+", "+1/y+")"),l.transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+$+", "+y+")"),g.animate?l.transitionEnd((function(){_()})):_(),l[0].detachEventHandlers=function(){r.off("resize",ee),d.touch&&g.swipeToClose&&(r.off("touchstart:passive",ae),r.off("touchmove:active",te),r.off("touchend:passive",re))},r.on("resize",ee),d.touch&&g.swipeToClose&&(r.on("touchstart:passive",ae),r.on("touchmove:active",te),r.on("touchend:passive",re))}}function Z(){c=!0}function _(){i.addClass("page-with-card-opened"),s.ios&&v.length&&(v.css("height",v[0].offsetHeight+1+"px"),setTimeout((function(){v.css("height","")}))),l.addClass("card-opened"),l.removeClass("card-opening"),l.trigger("card:opened"),r.emit("cardOpened",l[0],i[0])}function ee(){if(l.removeClass("card-transitioning"),x=l[0].offsetWidth,k=l[0].offsetHeight,w=i[0].offsetWidth,T=i[0].offsetHeight,E=C[0].offsetWidth||w,N=C[0].offsetHeight||T,O=0,h&&!g.hideStatusbarOnOpen&&N===T&&(O=parseInt(h.css("--f7-safe-area-top"),10),Number.isNaN(O)&&(O=0)),O&&(N-=O),$=E/x,y=N/k,l.transform("translate3d(0px, 0px, 0) scale(1)"),B=l.offset(),K=i.offset(),O&&(K.top+=O/2),B.left-=K.left,B.top-=K.top,H=B.left-(w-E)/2,r.rtl&&(H-=l[0].scrollLeft),M=B.top-(T-N)/2,q=E-x-H,R=N-k-M,r.rtl){var e=[q,H];H=e[0],q=e[1]}U=(q-H)/2,V=(R-M)/2,l.transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+$+", "+y+")"),u.css({width:E+"px",height:N+"px"}).transform("translate3d("+(r.rtl?H+U:-H-U)+"px, 0px, 0) scale("+1/$+", "+1/y+")")}function ae(e){t(e.target).closest(l).length&&l.hasClass("card-opened")&&(Q=l.find(g.scrollableEl),P=Q[0]&&Q[0]!==u[0]&&!Q[0].contains(e.target)?0:Q.scrollTop(),z=!0,X=e.targetTouches[0].pageX,j=e.targetTouches[0].pageY,F=void 0,G=!1,J=!1)}function te(e){if(z){if(D=e.targetTouches[0].pageX,Y=e.targetTouches[0].pageY,void 0===F&&(F=!!(F||Math.abs(Y-j)>Math.abs(D-X))),J||G||(!F&&e.targetTouches[0].clientX<=50?J=!0:G=!0),!J&&!G||G&&0!==P)return z=!0,void(I=!0);I||l.removeClass("card-transitioning"),I=!0,((A=G?Math.max((Y-j)/150,0):Math.max((D-X)/(x/2),0))>0&&G||J)&&(G&&s.ios&&Q[0]===u[0]&&(Q.css("-webkit-overflow-scrolling","auto"),Q.scrollTop(0)),e.preventDefault()),A>1&&(A=Math.pow(A,.3)),A>(G?1.3:1.1)?(z=!1,I=!1,r.card.close(l)):l.transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+$*(1-.2*A)+", "+y*(1-.2*A)+")")}}function re(){z&&I&&(z=!1,I=!1,s.ios&&Q.css("-webkit-overflow-scrolling",""),A>=.8?r.card.close(l):l.addClass("card-transitioning").transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+$+", "+y+")"))}},close:function(e,a){void 0===e&&(e=".card-expandable.card-opened"),void 0===a&&(a=!0);var r=this,o=n(),s=t(e).eq(0);if(s&&s.length&&s.hasClass("card-opened")&&!s.hasClass("card-opening")&&!s.hasClass("card-closing")){var d=s.children(".card-content"),l=s.parents(".page-content"),c=s.parents(".page").eq(0);if(c.length){var i,p,h,f=Object.assign({animate:a},r.params.card,s.dataset()),g=s.find(f.scrollableEl);s.attr("data-backdrop-el")&&(h=t(s.attr("data-backdrop-el"))),f.backdrop&&(h=s.parents(".page-content").find(".card-backdrop")),f.hideNavbarOnOpen&&((i=c.children(".navbar")).length||c[0].f7Page&&(i=c[0].f7Page.$navbarEl),i&&i.length&&!s[0].f7KeepNavbarOnClose&&r.navbar.show(i,f.animate,!0)),f.hideToolbarOnOpen&&((p=c.children(".toolbar")).length||(p=c.parents(".view").children(".toolbar")),p.length||(p=c.parents(".views").children(".toolbar")),p&&p.length&&!s[0].f7KeepToolbarOnClose&&r.toolbar.show(p,f.animate)),c.removeClass("page-with-card-opened"),o.ios&&l.length&&(l.css("height",l[0].offsetHeight+1+"px"),setTimeout((function(){l.css("height","")}))),h&&h.length&&h.removeClass("card-backdrop-in").addClass("card-backdrop-out"),s.removeClass("card-opened card-transitioning"),f.animate?s.addClass("card-closing"):s.addClass("card-no-transition"),s.transform(""),s.trigger("card:close"),r.emit("cardClose",s[0],c[0]);var v=s.hasClass("card-expandable-animate-width");v&&d.css({width:"",height:""}),d.transform("").scrollTop(0,a?300:0),g.length&&g[0]!==d[0]&&g.scrollTop(0,a?300:0),a?d.transitionEnd((function(){b()})):b(),s[0].detachEventHandlers&&(s[0].detachEventHandlers(),delete s[0].detachEventHandlers)}}function b(){v||d.css({width:"",height:""}),h&&h.length&&h.removeClass("card-backdrop-in card-backdrop-out"),s.removeClass("card-closing card-no-transition"),s.trigger("card:closed"),s.find(".card-expandable-size").remove(),r.emit("cardClosed",s[0],c[0])}},toggle:function(e,a){void 0===e&&(e=".card-expandable");var r=t(e).eq(0);r.length&&(r.hasClass("card-opened")?this.card.close(r,a):this.card.open(r,a))}},l={name:"card",params:{card:{hideNavbarOnOpen:!0,hideStatusbarOnOpen:!0,hideToolbarOnOpen:!0,scrollableEl:".card-content",swipeToClose:!0,closeByBackdropClick:!0,backdrop:!0}},create:function(){s(this,{card:d})},on:{pageBeforeIn:function(e){var a=this;if(a.params.card.hideNavbarOnOpen&&e.navbarEl&&e.$el.find(".card-opened.card-expandable").length&&a.navbar.hide(e.navbarEl,!0,a.params.card.hideStatusbarOnOpen,!0),a.params.card.hideToolbarOnOpen&&e.$el.find(".card-opened.card-expandable").length){var t=e.$el.children(".toolbar");t.length||(t=e.$el.parents(".view").children(".toolbar")),t.length||(t=e.$el.parents(".views").children(".toolbar")),t&&t.length&&a.toolbar.hide(t)}}},clicks:{".card-close":function(e,a){this.card.close(a.card,a.animate)},".card-open":function(e,a){this.card.open(a.card,a.animate)},".card-expandable":function(e,a,r){e.hasClass("card-opened")||e.hasClass("card-opening")||e.hasClass("card-closing")||t(r.target).closest(".card-prevent-open, .card-close").length||this.card.open(e)},".card-backdrop-in":function(){var e=!1;this.params.card.closeByBackdropClick&&(e=!0);var a=t(".card-opened");a.length&&("true"===a.attr("data-close-by-backdrop-click")?e=!0:"false"===a.attr("data-close-by-backdrop-click")&&(e=!1),e&&this.card.close(a))}}};if(a){if(e.prototype.modules&&e.prototype.modules[l.name])return;e.use(l),e.instance&&(e.instance.useModuleParams(l,e.instance.params),e.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+/* eslint no-param-reassign: "off" */
+import { getDocument } from 'ssr-window';
+import { bindMethods } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+import { getDevice } from '../../shared/get-device.js';
+import $ from '../../shared/dom7.js';
+const CardExpandable = {
+  open(cardEl = '.card-expandable', animate = true) {
+    const app = this;
+    const device = getDevice();
+    const document = getDocument();
+    const support = getSupport();
+    const $cardEl = $(cardEl).eq(0);
+    if (!$cardEl || !$cardEl.length) return;
+    if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;
+    const $pageEl = $cardEl.parents('.page').eq(0);
+    if (!$pageEl.length) return;
+
+    if ($pageEl.find('.card-opened').length) {
+      return;
+    }
+
+    let prevented;
+
+    function prevent() {
+      prevented = true;
+    }
+
+    $cardEl.trigger('card:beforeopen', {
+      prevent
+    });
+    app.emit('cardBeforeOpen', $cardEl[0], prevent);
+    if (prevented) return;
+    const cardParams = Object.assign({
+      animate
+    }, app.params.card, $cardEl.dataset());
+    const $pageContentEl = $cardEl.parents('.page-content');
+    let $backdropEl;
+
+    if ($cardEl.attr('data-backdrop-el')) {
+      $backdropEl = $($cardEl.attr('data-backdrop-el'));
+    }
+
+    if (!$backdropEl && cardParams.backdrop) {
+      $backdropEl = $pageContentEl.find('.card-backdrop');
+
+      if (!$backdropEl.length) {
+        $backdropEl = $('<div class="card-backdrop"></div>');
+        $pageContentEl.append($backdropEl);
+      }
+    }
+
+    let $navbarEl;
+    let $toolbarEl;
+
+    if (cardParams.hideNavbarOnOpen) {
+      $navbarEl = $pageEl.children('.navbar');
+
+      if (!$navbarEl.length) {
+        if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;
+      }
+    }
+
+    if (cardParams.hideToolbarOnOpen) {
+      $toolbarEl = $pageEl.children('.toolbar');
+
+      if (!$toolbarEl.length) {
+        $toolbarEl = $pageEl.parents('.view').children('.toolbar');
+      }
+
+      if (!$toolbarEl.length) {
+        $toolbarEl = $pageEl.parents('.views').children('.toolbar');
+      }
+    }
+
+    const currTransform = $cardEl.css('transform');
+    let hasTransform;
+
+    if (currTransform && currTransform.match(/[2-9]/)) {
+      hasTransform = true;
+    }
+
+    const $cardContentEl = $cardEl.children('.card-content');
+    const $cardSizeEl = $(document.createElement('div')).addClass('card-expandable-size');
+    $cardEl.append($cardSizeEl);
+    let cardWidth = $cardEl[0].offsetWidth;
+    let cardHeight = $cardEl[0].offsetHeight;
+    let pageWidth = $pageEl[0].offsetWidth;
+    let pageHeight = $pageEl[0].offsetHeight;
+    let maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;
+    let maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;
+    let statusbarHeight;
+
+    if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {
+      statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);
+      if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;
+    }
+
+    if (statusbarHeight) {
+      maxHeight -= statusbarHeight;
+    }
+
+    let scaleX = maxWidth / cardWidth;
+    let scaleY = maxHeight / cardHeight;
+    let offset = $cardEl.offset();
+    let pageOffset = $pageEl.offset();
+
+    if (statusbarHeight) {
+      pageOffset.top += statusbarHeight / 2;
+    }
+
+    offset.left -= pageOffset.left;
+    let cardLeftOffset;
+    let cardTopOffset;
+
+    if (hasTransform) {
+      const transformValues = currTransform.replace(/matrix\(|\)/g, '').split(',').map(el => el.trim());
+
+      if (transformValues && transformValues.length > 1) {
+        const scale = parseFloat(transformValues[0]);
+        cardLeftOffset = offset.left - cardWidth * (1 - scale) / 2;
+        cardTopOffset = offset.top - pageOffset.top - cardHeight * (1 - scale) / 2;
+        if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
+      } else {
+        cardLeftOffset = $cardEl[0].offsetLeft;
+        cardTopOffset = $cardEl[0].offsetTop - ($pageContentEl.length ? $pageContentEl[0].scrollTop : 0);
+      }
+    } else {
+      cardLeftOffset = offset.left;
+      cardTopOffset = offset.top - pageOffset.top;
+      if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
+    }
+
+    cardLeftOffset -= (pageWidth - maxWidth) / 2;
+    cardTopOffset -= (pageHeight - maxHeight) / 2;
+    let cardRightOffset = maxWidth - cardWidth - cardLeftOffset;
+
+    if (app.rtl) {
+      [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];
+    }
+
+    let cardBottomOffset = maxHeight - cardHeight - cardTopOffset;
+    let translateX = (cardRightOffset - cardLeftOffset) / 2;
+    let translateY = (cardBottomOffset - cardTopOffset) / 2;
+
+    if (cardParams.hideNavbarOnOpen && $navbarEl && $navbarEl.length) {
+      if ($navbarEl.closest('.navbar-hidden').length) {
+        // Was hidden
+        $cardEl[0].f7KeepNavbarOnClose = true;
+      } else {
+        delete $cardEl[0].f7KeepNavbarOnClose;
+        app.navbar.hide($navbarEl, cardParams.animate, cardParams.hideStatusbarOnOpen, true);
+      }
+    }
+
+    if (cardParams.hideToolbarOnOpen && $toolbarEl && $toolbarEl.length) {
+      if ($toolbarEl.closest('.toolbar-hidden').length) {
+        // Was hidden
+        $cardEl[0].f7KeepToolbarOnClose = true;
+      } else {
+        delete $cardEl[0].f7KeepToolbarOnClose;
+        app.toolbar.hide($toolbarEl, cardParams.animate);
+      }
+    }
+
+    if ($backdropEl) {
+      $backdropEl.removeClass('card-backdrop-out').addClass('card-backdrop-in');
+    }
+
+    $cardEl.removeClass('card-transitioning');
+
+    if (cardParams.animate) {
+      $cardEl.addClass('card-opening');
+    }
+
+    $cardEl.trigger('card:open');
+    app.emit('cardOpen', $cardEl[0]);
+
+    function transitionEnd() {
+      $pageEl.addClass('page-with-card-opened');
+
+      if (device.ios && $pageContentEl.length) {
+        $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);
+        setTimeout(() => {
+          $pageContentEl.css('height', '');
+        });
+      }
+
+      $cardEl.addClass('card-opened');
+      $cardEl.removeClass('card-opening');
+      $cardEl.trigger('card:opened');
+      app.emit('cardOpened', $cardEl[0], $pageEl[0]);
+    }
+
+    $cardContentEl.css({
+      width: `${maxWidth}px`,
+      height: `${maxHeight}px`
+    }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);
+    $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);
+
+    if (cardParams.animate) {
+      $cardEl.transitionEnd(() => {
+        transitionEnd();
+      });
+    } else {
+      transitionEnd();
+    }
+
+    function onResize() {
+      $cardEl.removeClass('card-transitioning');
+      cardWidth = $cardEl[0].offsetWidth;
+      cardHeight = $cardEl[0].offsetHeight;
+      pageWidth = $pageEl[0].offsetWidth;
+      pageHeight = $pageEl[0].offsetHeight;
+      maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;
+      maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;
+      statusbarHeight = 0;
+
+      if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {
+        statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);
+        if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;
+      }
+
+      if (statusbarHeight) {
+        maxHeight -= statusbarHeight;
+      }
+
+      scaleX = maxWidth / cardWidth;
+      scaleY = maxHeight / cardHeight;
+      $cardEl.transform('translate3d(0px, 0px, 0) scale(1)');
+      offset = $cardEl.offset();
+      pageOffset = $pageEl.offset();
+
+      if (statusbarHeight) {
+        pageOffset.top += statusbarHeight / 2;
+      }
+
+      offset.left -= pageOffset.left;
+      offset.top -= pageOffset.top;
+      cardLeftOffset = offset.left - (pageWidth - maxWidth) / 2;
+      if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
+      cardTopOffset = offset.top - (pageHeight - maxHeight) / 2;
+      cardRightOffset = maxWidth - cardWidth - cardLeftOffset;
+      cardBottomOffset = maxHeight - cardHeight - cardTopOffset;
+
+      if (app.rtl) {
+        [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];
+      }
+
+      translateX = (cardRightOffset - cardLeftOffset) / 2;
+      translateY = (cardBottomOffset - cardTopOffset) / 2;
+      $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);
+      $cardContentEl.css({
+        width: `${maxWidth}px`,
+        height: `${maxHeight}px`
+      }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);
+    }
+
+    let cardScrollTop;
+    let isTouched;
+    let isMoved;
+    let touchStartX;
+    let touchStartY;
+    let touchEndX;
+    let touchEndY;
+    let isScrolling;
+    let progress;
+    let isV;
+    let isH;
+    let $cardScrollableEl;
+
+    function onTouchStart(e) {
+      if (!$(e.target).closest($cardEl).length) return;
+      if (!$cardEl.hasClass('card-opened')) return;
+      $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);
+
+      if ($cardScrollableEl[0] && $cardScrollableEl[0] !== $cardContentEl[0] && !$cardScrollableEl[0].contains(e.target)) {
+        cardScrollTop = 0;
+      } else {
+        cardScrollTop = $cardScrollableEl.scrollTop();
+      }
+
+      isTouched = true;
+      touchStartX = e.targetTouches[0].pageX;
+      touchStartY = e.targetTouches[0].pageY;
+      isScrolling = undefined;
+      isV = false;
+      isH = false;
+    }
+
+    function onTouchMove(e) {
+      if (!isTouched) return;
+      touchEndX = e.targetTouches[0].pageX;
+      touchEndY = e.targetTouches[0].pageY;
+
+      if (typeof isScrolling === 'undefined') {
+        isScrolling = !!(isScrolling || Math.abs(touchEndY - touchStartY) > Math.abs(touchEndX - touchStartX));
+      }
+
+      if (!isH && !isV) {
+        if (!isScrolling && e.targetTouches[0].clientX <= 50) {
+          isH = true;
+        } else {
+          isV = true;
+        }
+      }
+
+      if (!(isH || isV) || isV && cardScrollTop !== 0) {
+        isTouched = true;
+        isMoved = true;
+        return;
+      }
+
+      if (!isMoved) {
+        $cardEl.removeClass('card-transitioning');
+      }
+
+      isMoved = true;
+      progress = isV ? Math.max((touchEndY - touchStartY) / 150, 0) : Math.max((touchEndX - touchStartX) / (cardWidth / 2), 0);
+
+      if (progress > 0 && isV || isH) {
+        if (isV && device.ios && $cardScrollableEl[0] === $cardContentEl[0]) {
+          $cardScrollableEl.css('-webkit-overflow-scrolling', 'auto');
+          $cardScrollableEl.scrollTop(0);
+        }
+
+        e.preventDefault();
+      }
+
+      if (progress > 1) progress **= 0.3;
+
+      if (progress > (isV ? 1.3 : 1.1)) {
+        isTouched = false;
+        isMoved = false;
+        app.card.close($cardEl);
+      } else {
+        $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX * (1 - progress * 0.2)}, ${scaleY * (1 - progress * 0.2)})`);
+      }
+    }
+
+    function onTouchEnd() {
+      if (!isTouched || !isMoved) return;
+      isTouched = false;
+      isMoved = false;
+
+      if (device.ios) {
+        $cardScrollableEl.css('-webkit-overflow-scrolling', '');
+      }
+
+      if (progress >= 0.8) {
+        app.card.close($cardEl);
+      } else {
+        $cardEl.addClass('card-transitioning').transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);
+      }
+    }
+
+    $cardEl[0].detachEventHandlers = function detachEventHandlers() {
+      app.off('resize', onResize);
+
+      if (support.touch && cardParams.swipeToClose) {
+        app.off('touchstart:passive', onTouchStart);
+        app.off('touchmove:active', onTouchMove);
+        app.off('touchend:passive', onTouchEnd);
+      }
+    };
+
+    app.on('resize', onResize);
+
+    if (support.touch && cardParams.swipeToClose) {
+      app.on('touchstart:passive', onTouchStart);
+      app.on('touchmove:active', onTouchMove);
+      app.on('touchend:passive', onTouchEnd);
+    }
+  },
+
+  close(cardEl = '.card-expandable.card-opened', animate = true) {
+    const app = this;
+    const device = getDevice();
+    const $cardEl = $(cardEl).eq(0);
+    if (!$cardEl || !$cardEl.length) return;
+    if (!$cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;
+    const $cardContentEl = $cardEl.children('.card-content');
+    const $pageContentEl = $cardEl.parents('.page-content');
+    const $pageEl = $cardEl.parents('.page').eq(0);
+    if (!$pageEl.length) return;
+    const cardParams = Object.assign({
+      animate
+    }, app.params.card, $cardEl.dataset());
+    const $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);
+    let $navbarEl;
+    let $toolbarEl;
+    let $backdropEl;
+
+    if ($cardEl.attr('data-backdrop-el')) {
+      $backdropEl = $($cardEl.attr('data-backdrop-el'));
+    }
+
+    if (cardParams.backdrop) {
+      $backdropEl = $cardEl.parents('.page-content').find('.card-backdrop');
+    }
+
+    if (cardParams.hideNavbarOnOpen) {
+      $navbarEl = $pageEl.children('.navbar');
+
+      if (!$navbarEl.length) {
+        if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;
+      }
+
+      if ($navbarEl && $navbarEl.length && !$cardEl[0].f7KeepNavbarOnClose) {
+        app.navbar.show($navbarEl, cardParams.animate, true);
+      }
+    }
+
+    if (cardParams.hideToolbarOnOpen) {
+      $toolbarEl = $pageEl.children('.toolbar');
+
+      if (!$toolbarEl.length) {
+        $toolbarEl = $pageEl.parents('.view').children('.toolbar');
+      }
+
+      if (!$toolbarEl.length) {
+        $toolbarEl = $pageEl.parents('.views').children('.toolbar');
+      }
+
+      if ($toolbarEl && $toolbarEl.length && !$cardEl[0].f7KeepToolbarOnClose) {
+        app.toolbar.show($toolbarEl, cardParams.animate);
+      }
+    }
+
+    $pageEl.removeClass('page-with-card-opened');
+
+    if (device.ios && $pageContentEl.length) {
+      $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);
+      setTimeout(() => {
+        $pageContentEl.css('height', '');
+      });
+    }
+
+    if ($backdropEl && $backdropEl.length) {
+      $backdropEl.removeClass('card-backdrop-in').addClass('card-backdrop-out');
+    }
+
+    $cardEl.removeClass('card-opened card-transitioning');
+
+    if (cardParams.animate) {
+      $cardEl.addClass('card-closing');
+    } else {
+      $cardEl.addClass('card-no-transition');
+    }
+
+    $cardEl.transform('');
+    $cardEl.trigger('card:close');
+    app.emit('cardClose', $cardEl[0], $pageEl[0]);
+    const animateWidth = $cardEl.hasClass('card-expandable-animate-width');
+
+    function transitionEnd() {
+      if (!animateWidth) {
+        $cardContentEl.css({
+          width: '',
+          height: ''
+        });
+      }
+
+      if ($backdropEl && $backdropEl.length) {
+        $backdropEl.removeClass('card-backdrop-in card-backdrop-out');
+      }
+
+      $cardEl.removeClass('card-closing card-no-transition');
+      $cardEl.trigger('card:closed');
+      $cardEl.find('.card-expandable-size').remove();
+      app.emit('cardClosed', $cardEl[0], $pageEl[0]);
+    }
+
+    if (animateWidth) {
+      $cardContentEl.css({
+        width: '',
+        height: ''
+      });
+    }
+
+    $cardContentEl.transform('').scrollTop(0, animate ? 300 : 0);
+
+    if ($cardScrollableEl.length && $cardScrollableEl[0] !== $cardContentEl[0]) {
+      $cardScrollableEl.scrollTop(0, animate ? 300 : 0);
+    }
+
+    if (animate) {
+      $cardContentEl.transitionEnd(() => {
+        transitionEnd();
+      });
+    } else {
+      transitionEnd();
+    }
+
+    if ($cardEl[0].detachEventHandlers) {
+      $cardEl[0].detachEventHandlers();
+      delete $cardEl[0].detachEventHandlers;
+    }
+  },
+
+  toggle(cardEl = '.card-expandable', animate) {
+    const app = this;
+    const $cardEl = $(cardEl).eq(0);
+    if (!$cardEl.length) return;
+
+    if ($cardEl.hasClass('card-opened')) {
+      app.card.close($cardEl, animate);
+    } else {
+      app.card.open($cardEl, animate);
+    }
+  }
+
+};
+export default {
+  name: 'card',
+  params: {
+    card: {
+      hideNavbarOnOpen: true,
+      hideStatusbarOnOpen: true,
+      hideToolbarOnOpen: true,
+      scrollableEl: '.card-content',
+      swipeToClose: true,
+      closeByBackdropClick: true,
+      backdrop: true
+    }
+  },
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      card: CardExpandable
+    });
+  },
+
+  on: {
+    pageBeforeIn(page) {
+      const app = this;
+
+      if (app.params.card.hideNavbarOnOpen && page.navbarEl && page.$el.find('.card-opened.card-expandable').length) {
+        app.navbar.hide(page.navbarEl, true, app.params.card.hideStatusbarOnOpen, true);
+      }
+
+      if (app.params.card.hideToolbarOnOpen && page.$el.find('.card-opened.card-expandable').length) {
+        let $toolbarEl = page.$el.children('.toolbar');
+
+        if (!$toolbarEl.length) {
+          $toolbarEl = page.$el.parents('.view').children('.toolbar');
+        }
+
+        if (!$toolbarEl.length) {
+          $toolbarEl = page.$el.parents('.views').children('.toolbar');
+        }
+
+        if ($toolbarEl && $toolbarEl.length) {
+          app.toolbar.hide($toolbarEl);
+        }
+      }
+    }
+
+  },
+  clicks: {
+    '.card-close': function closeCard($clickedEl, data) {
+      const app = this;
+      app.card.close(data.card, data.animate);
+    },
+    '.card-open': function closeCard($clickedEl, data) {
+      const app = this;
+      app.card.open(data.card, data.animate);
+    },
+    '.card-expandable': function toggleExpandableCard($clickedEl, data, e) {
+      const app = this;
+      if ($clickedEl.hasClass('card-opened') || $clickedEl.hasClass('card-opening') || $clickedEl.hasClass('card-closing')) return;
+      if ($(e.target).closest('.card-prevent-open, .card-close').length) return;
+      app.card.open($clickedEl);
+    },
+    '.card-backdrop-in': function onBackdropClick() {
+      const app = this;
+      let needToClose = false;
+      if (app.params.card.closeByBackdropClick) needToClose = true;
+      const $openedCardEl = $('.card-opened');
+      if (!$openedCardEl.length) return;
+
+      if ($openedCardEl.attr('data-close-by-backdrop-click') === 'true') {
+        needToClose = true;
+      } else if ($openedCardEl.attr('data-close-by-backdrop-click') === 'false') {
+        needToClose = false;
+      }
+
+      if (needToClose) app.card.close($openedCardEl);
+    }
+  }
+};

package/components/card/card.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);var t=e.$,r=e.utils,n=e.getDevice,s=e.getSupport,o=(e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,r.bindMethods);const l={open(e=".card-expandable",a=!0){const r=this,o=n(),l=getDocument(),d=s(),c=t(e).eq(0);if(!c||!c.length)return;if(c.hasClass("card-opened")||c.hasClass("card-opening")||c.hasClass("card-closing"))return;const i=c.parents(".page").eq(0);if(!i.length)return;if(i.find(".card-opened").length)return;let p;function h(){p=!0}if(c.trigger("card:beforeopen",{prevent:h}),r.emit("cardBeforeOpen",c[0],h),p)return;const f=Object.assign({animate:a},r.params.card,c.dataset()),g=c.parents(".page-content");let b,m,u;c.attr("data-backdrop-el")&&(b=t(c.attr("data-backdrop-el"))),!b&&f.backdrop&&(b=g.find(".card-backdrop"),b.length||(b=t('<div class="card-backdrop"></div>'),g.append(b))),f.hideNavbarOnOpen&&(m=i.children(".navbar"),m.length||i[0].f7Page&&(m=i[0].f7Page.$navbarEl)),f.hideToolbarOnOpen&&(u=i.children(".toolbar"),u.length||(u=i.parents(".view").children(".toolbar")),u.length||(u=i.parents(".views").children(".toolbar")));const v=c.css("transform");let C;v&&v.match(/[2-9]/)&&(C=!0);const O=c.children(".card-content"),$=t(l.createElement("div")).addClass("card-expandable-size");c.append($);let x,k=c[0].offsetWidth,T=c[0].offsetHeight,w=i[0].offsetWidth,E=i[0].offsetHeight,N=$[0].offsetWidth||w,H=$[0].offsetHeight||E;m&&!f.hideStatusbarOnOpen&&H===E&&(x=parseInt(m.css("--f7-safe-area-top"),10),Number.isNaN(x)&&(x=0)),x&&(H-=x);let M,y,B=N/k,K=H/T,S=c.offset(),W=i.offset();if(x&&(W.top+=x/2),S.left-=W.left,C){const e=v.replace(/matrix\(|\)/g,"").split(",").map((e=>e.trim()));if(e&&e.length>1){const a=parseFloat(e[0]);M=S.left-k*(1-a)/2,y=S.top-W.top-T*(1-a)/2,r.rtl&&(M-=c[0].scrollLeft)}else M=c[0].offsetLeft,y=c[0].offsetTop-(g.length?g[0].scrollTop:0)}else M=S.left,y=S.top-W.top,r.rtl&&(M-=c[0].scrollLeft);M-=(w-N)/2,y-=(E-H)/2;let q=N-k-M;r.rtl&&([M,q]=[q,M]);let L,P,z,D,I,X,j,Y,F,A,G,J,Q=H-T-y,R=(q-M)/2,U=(Q-y)/2;function V(){i.addClass("page-with-card-opened"),o.ios&&g.length&&(g.css("height",`${g[0].offsetHeight+1}px`),setTimeout((()=>{g.css("height","")}))),c.addClass("card-opened"),c.removeClass("card-opening"),c.trigger("card:opened"),r.emit("cardOpened",c[0],i[0])}function Z(){c.removeClass("card-transitioning"),k=c[0].offsetWidth,T=c[0].offsetHeight,w=i[0].offsetWidth,E=i[0].offsetHeight,N=$[0].offsetWidth||w,H=$[0].offsetHeight||E,x=0,m&&!f.hideStatusbarOnOpen&&H===E&&(x=parseInt(m.css("--f7-safe-area-top"),10),Number.isNaN(x)&&(x=0)),x&&(H-=x),B=N/k,K=H/T,c.transform("translate3d(0px, 0px, 0) scale(1)"),S=c.offset(),W=i.offset(),x&&(W.top+=x/2),S.left-=W.left,S.top-=W.top,M=S.left-(w-N)/2,r.rtl&&(M-=c[0].scrollLeft),y=S.top-(E-H)/2,q=N-k-M,Q=H-T-y,r.rtl&&([M,q]=[q,M]),R=(q-M)/2,U=(Q-y)/2,c.transform(`translate3d(${r.rtl?-R:R}px, ${U}px, 0) scale(${B}, ${K})`),O.css({width:`${N}px`,height:`${H}px`}).transform(`translate3d(${r.rtl?M+R:-M-R}px, 0px, 0) scale(${1/B}, ${1/K})`)}function _(e){t(e.target).closest(c).length&&c.hasClass("card-opened")&&(J=c.find(f.scrollableEl),L=J[0]&&J[0]!==O[0]&&!J[0].contains(e.target)?0:J.scrollTop(),P=!0,D=e.targetTouches[0].pageX,I=e.targetTouches[0].pageY,Y=void 0,A=!1,G=!1)}function ee(e){if(P){if(X=e.targetTouches[0].pageX,j=e.targetTouches[0].pageY,void 0===Y&&(Y=!!(Y||Math.abs(j-I)>Math.abs(X-D))),G||A||(!Y&&e.targetTouches[0].clientX<=50?G=!0:A=!0),!G&&!A||A&&0!==L)return P=!0,void(z=!0);z||c.removeClass("card-transitioning"),z=!0,F=A?Math.max((j-I)/150,0):Math.max((X-D)/(k/2),0),(F>0&&A||G)&&(A&&o.ios&&J[0]===O[0]&&(J.css("-webkit-overflow-scrolling","auto"),J.scrollTop(0)),e.preventDefault()),F>1&&(F**=.3),F>(A?1.3:1.1)?(P=!1,z=!1,r.card.close(c)):c.transform(`translate3d(${r.rtl?-R:R}px, ${U}px, 0) scale(${B*(1-.2*F)}, ${K*(1-.2*F)})`)}}function ae(){P&&z&&(P=!1,z=!1,o.ios&&J.css("-webkit-overflow-scrolling",""),F>=.8?r.card.close(c):c.addClass("card-transitioning").transform(`translate3d(${r.rtl?-R:R}px, ${U}px, 0) scale(${B}, ${K})`))}f.hideNavbarOnOpen&&m&&m.length&&(m.closest(".navbar-hidden").length?c[0].f7KeepNavbarOnClose=!0:(delete c[0].f7KeepNavbarOnClose,r.navbar.hide(m,f.animate,f.hideStatusbarOnOpen,!0))),f.hideToolbarOnOpen&&u&&u.length&&(u.closest(".toolbar-hidden").length?c[0].f7KeepToolbarOnClose=!0:(delete c[0].f7KeepToolbarOnClose,r.toolbar.hide(u,f.animate))),b&&b.removeClass("card-backdrop-out").addClass("card-backdrop-in"),c.removeClass("card-transitioning"),f.animate&&c.addClass("card-opening"),c.trigger("card:open"),r.emit("cardOpen",c[0]),O.css({width:`${N}px`,height:`${H}px`}).transform(`translate3d(${r.rtl?M+R:-M-R}px, 0px, 0) scale(${1/B}, ${1/K})`),c.transform(`translate3d(${r.rtl?-R:R}px, ${U}px, 0) scale(${B}, ${K})`),f.animate?c.transitionEnd((()=>{V()})):V(),c[0].detachEventHandlers=function(){r.off("resize",Z),d.touch&&f.swipeToClose&&(r.off("touchstart:passive",_),r.off("touchmove:active",ee),r.off("touchend:passive",ae))},r.on("resize",Z),d.touch&&f.swipeToClose&&(r.on("touchstart:passive",_),r.on("touchmove:active",ee),r.on("touchend:passive",ae))},close(e=".card-expandable.card-opened",a=!0){const r=this,s=n(),o=t(e).eq(0);if(!o||!o.length)return;if(!o.hasClass("card-opened")||o.hasClass("card-opening")||o.hasClass("card-closing"))return;const l=o.children(".card-content"),d=o.parents(".page-content"),c=o.parents(".page").eq(0);if(!c.length)return;const i=Object.assign({animate:a},r.params.card,o.dataset()),p=o.find(i.scrollableEl);let h,f,g;o.attr("data-backdrop-el")&&(g=t(o.attr("data-backdrop-el"))),i.backdrop&&(g=o.parents(".page-content").find(".card-backdrop")),i.hideNavbarOnOpen&&(h=c.children(".navbar"),h.length||c[0].f7Page&&(h=c[0].f7Page.$navbarEl),h&&h.length&&!o[0].f7KeepNavbarOnClose&&r.navbar.show(h,i.animate,!0)),i.hideToolbarOnOpen&&(f=c.children(".toolbar"),f.length||(f=c.parents(".view").children(".toolbar")),f.length||(f=c.parents(".views").children(".toolbar")),f&&f.length&&!o[0].f7KeepToolbarOnClose&&r.toolbar.show(f,i.animate)),c.removeClass("page-with-card-opened"),s.ios&&d.length&&(d.css("height",`${d[0].offsetHeight+1}px`),setTimeout((()=>{d.css("height","")}))),g&&g.length&&g.removeClass("card-backdrop-in").addClass("card-backdrop-out"),o.removeClass("card-opened card-transitioning"),i.animate?o.addClass("card-closing"):o.addClass("card-no-transition"),o.transform(""),o.trigger("card:close"),r.emit("cardClose",o[0],c[0]);const b=o.hasClass("card-expandable-animate-width");function m(){b||l.css({width:"",height:""}),g&&g.length&&g.removeClass("card-backdrop-in card-backdrop-out"),o.removeClass("card-closing card-no-transition"),o.trigger("card:closed"),o.find(".card-expandable-size").remove(),r.emit("cardClosed",o[0],c[0])}b&&l.css({width:"",height:""}),l.transform("").scrollTop(0,a?300:0),p.length&&p[0]!==l[0]&&p.scrollTop(0,a?300:0),a?l.transitionEnd((()=>{m()})):m(),o[0].detachEventHandlers&&(o[0].detachEventHandlers(),delete o[0].detachEventHandlers)},toggle(e=".card-expandable",a){const r=this,n=t(e).eq(0);n.length&&(n.hasClass("card-opened")?r.card.close(n,a):r.card.open(n,a))}};var d={name:"card",params:{card:{hideNavbarOnOpen:!0,hideStatusbarOnOpen:!0,hideToolbarOnOpen:!0,scrollableEl:".card-content",swipeToClose:!0,closeByBackdropClick:!0,backdrop:!0}},create(){o(this,{card:l})},on:{pageBeforeIn(e){const a=this;if(a.params.card.hideNavbarOnOpen&&e.navbarEl&&e.$el.find(".card-opened.card-expandable").length&&a.navbar.hide(e.navbarEl,!0,a.params.card.hideStatusbarOnOpen,!0),a.params.card.hideToolbarOnOpen&&e.$el.find(".card-opened.card-expandable").length){let t=e.$el.children(".toolbar");t.length||(t=e.$el.parents(".view").children(".toolbar")),t.length||(t=e.$el.parents(".views").children(".toolbar")),t&&t.length&&a.toolbar.hide(t)}}},clicks:{".card-close":function(e,a){this.card.close(a.card,a.animate)},".card-open":function(e,a){this.card.open(a.card,a.animate)},".card-expandable":function(e,a,r){e.hasClass("card-opened")||e.hasClass("card-opening")||e.hasClass("card-closing")||t(r.target).closest(".card-prevent-open, .card-close").length||this.card.open(e)},".card-backdrop-in":function(){let e=!1;this.params.card.closeByBackdropClick&&(e=!0);const a=t(".card-opened");a.length&&("true"===a.attr("data-close-by-backdrop-click")?e=!0:"false"===a.attr("data-close-by-backdrop-click")&&(e=!1),e&&this.card.close(a))}}};if(a){if(e.prototype.modules&&e.prototype.modules[d.name])return;e.use(d),e.instance&&(e.instance.useModuleParams(d,e.instance.params),e.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/checkbox/checkbox-rtl.css

@@ -1 +1 @@
-:root{--f7-checkbox-icon-color:#fff;--f7-checkbox-extra-margin:0px}:root .theme-dark,:root.theme-dark{--f7-checkbox-inactive-color:rgba(255, 255, 255, 0.3);--f7-checkbox-icon-color:#000}.ios{--f7-checkbox-size:22px;--f7-checkbox-border-radius:50%;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:#c7c7cc}.md{--f7-checkbox-size:18px;--f7-checkbox-border-radius:2px;--f7-checkbox-border-width:2px;--f7-checkbox-inactive-color:#6d6d6d}.aurora{--f7-checkbox-size:16px;--f7-checkbox-border-radius:4px;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:rgba(0, 0, 0, 0.25)}.checkbox{position:relative;display:inline-block;vertical-align:middle;z-index:1;background-color:transparent;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.5)}.checkbox i,.icon-checkbox{flex-shrink:0;border:var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);border-radius:var(--f7-checkbox-border-radius);box-sizing:border-box;position:relative;display:block}.checkbox i:after,.icon-checkbox:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);line-height:var(--f7-checkbox-size);top:calc(0px - var(--f7-checkbox-border-width));opacity:0;color:var(--f7-checkbox-icon-color);position:relative;transition-property:opacity;right:calc(0px - var(--f7-checkbox-border-width))}.checkbox input[type=checkbox]:not(:checked)~i:after,label.item-checkbox input[type=checkbox]:not(:checked)~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:not(:checked)~.icon-checkbox:after{font-size:0}.checkbox input[type=checkbox]:checked~i,.checkbox input[type=checkbox]:indeterminate~i,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox{border-color:var(--f7-checkbox-active-color,var(--f7-theme-color));background-color:var(--f7-checkbox-active-color,var(--f7-theme-color))}.checkbox input[type=checkbox]:checked~i:after,.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{opacity:1}.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{font-size:0;content:'';position:absolute;top:50%;width:70%;background:var(--f7-checkbox-icon-color);height:2px;border-radius:2px;margin-top:-1px;transition:0s;right:15%}.checkbox,label.item-checkbox{cursor:pointer}.checkbox input[type=checkbox],.checkbox input[type=radio],label.item-checkbox input[type=checkbox],label.item-checkbox input[type=radio]{display:none}label.item-checkbox{transition-duration:.3s}label.item-checkbox .item-content .item-media,label.item-checkbox.item-content .item-media{align-self:center}label.item-checkbox>.icon-checkbox{margin-left:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}label.item-checkbox.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-checkbox.active-state:after{background-color:transparent}.disabled label.item-checkbox,label.item-checkbox.disabled{opacity:.55;pointer-events:none}.ios .checkbox i:after,.ios .icon-checkbox:after{content:'checkbox_ios';font-size:21px}.ios label.item-checkbox.active-state{transition-duration:0s}.ios .checkbox input[type=checkbox]:indeterminate~i:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{height:2px;margin-top:-1px}.md .checkbox i,.md .icon-checkbox{transition-duration:.2s}.md .checkbox i:after,.md .icon-checkbox:after{content:'checkbox_md';transition-duration:.2s;font-size:15px}.md label.item-checkbox{position:relative;overflow:hidden;z-index:0}.aurora .checkbox i,.aurora .icon-checkbox{transition-duration:150ms}.aurora .checkbox i:after,.aurora .icon-checkbox:after{content:'checkbox_aurora';transition-duration:150ms;font-size:21px}.aurora .checkbox i:before,.aurora .icon-checkbox:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.1);opacity:0;transition-duration:150ms}.aurora .checkbox.active-state i:before{opacity:1}.aurora label.item-checkbox{position:relative;overflow:hidden;z-index:0}.aurora.device-desktop label.item-checkbox:hover:not(.active-state):not(.no-hover){background-color:var(--f7-list-link-hover-bg-color)}
+:root{--f7-checkbox-icon-color:#fff;--f7-checkbox-extra-margin:0px}:root .dark,:root.dark{--f7-checkbox-inactive-color:rgba(255, 255, 255, 0.3);--f7-checkbox-icon-color:#000}.ios{--f7-checkbox-size:22px;--f7-checkbox-border-radius:50%;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:#c7c7cc}.md{--f7-checkbox-size:18px;--f7-checkbox-border-radius:2px;--f7-checkbox-border-width:2px;--f7-checkbox-inactive-color:#6d6d6d}.aurora{--f7-checkbox-size:16px;--f7-checkbox-border-radius:4px;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:rgba(0, 0, 0, 0.25)}.checkbox{position:relative;display:inline-block;vertical-align:middle;z-index:1;background-color:transparent;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.5)}.checkbox i,.icon-checkbox{flex-shrink:0;border:var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);border-radius:var(--f7-checkbox-border-radius);box-sizing:border-box;position:relative;display:block}.checkbox i:after,.icon-checkbox:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);line-height:var(--f7-checkbox-size);top:calc(0px - var(--f7-checkbox-border-width));opacity:0;color:var(--f7-checkbox-icon-color);position:relative;transition-property:opacity;right:calc(0px - var(--f7-checkbox-border-width))}.checkbox input[type=checkbox]:not(:checked)~i:after,label.item-checkbox input[type=checkbox]:not(:checked)~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:not(:checked)~.icon-checkbox:after{font-size:0}.checkbox input[type=checkbox]:checked~i,.checkbox input[type=checkbox]:indeterminate~i,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox{border-color:var(--f7-checkbox-active-color,var(--f7-theme-color));background-color:var(--f7-checkbox-active-color,var(--f7-theme-color))}.checkbox input[type=checkbox]:checked~i:after,.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{opacity:1}.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{font-size:0;content:'';position:absolute;top:50%;width:70%;background:var(--f7-checkbox-icon-color);height:2px;border-radius:2px;margin-top:-1px;transition:0s;right:15%}.checkbox,label.item-checkbox{cursor:pointer}.checkbox input[type=checkbox],.checkbox input[type=radio],label.item-checkbox input[type=checkbox],label.item-checkbox input[type=radio]{display:none}label.item-checkbox{transition-duration:.3s}label.item-checkbox .item-content .item-media,label.item-checkbox.item-content .item-media{align-self:center}label.item-checkbox>.icon-checkbox{margin-left:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}label.item-checkbox.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-checkbox.active-state:after{background-color:transparent}.disabled label.item-checkbox,label.item-checkbox.disabled{opacity:.55;pointer-events:none}.ios .checkbox i:after,.ios .icon-checkbox:after{content:'checkbox_ios';font-size:21px}.ios label.item-checkbox.active-state{transition-duration:0s}.ios .checkbox input[type=checkbox]:indeterminate~i:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{height:2px;margin-top:-1px}.md .checkbox i,.md .icon-checkbox{transition-duration:.2s}.md .checkbox i:after,.md .icon-checkbox:after{content:'checkbox_md';transition-duration:.2s;font-size:15px}.md label.item-checkbox{position:relative;overflow:hidden;z-index:0}.aurora .checkbox i,.aurora .icon-checkbox{transition-duration:150ms}.aurora .checkbox i:after,.aurora .icon-checkbox:after{content:'checkbox_aurora';transition-duration:150ms;font-size:21px}.aurora .checkbox i:before,.aurora .icon-checkbox:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.1);opacity:0;transition-duration:150ms}.aurora .checkbox.active-state i:before{opacity:1}.aurora label.item-checkbox{position:relative;overflow:hidden;z-index:0}.aurora.device-desktop label.item-checkbox:hover:not(.active-state):not(.no-hover){background-color:var(--f7-list-link-hover-bg-color)}