@xenknight/framework7 0.0.2

package/components/pull-to-refresh/pull-to-refresh-md.less

@@ -0,0 +1,129 @@
+.md {
+  --f7-ptr-top: -4px;
+  .ptr-preloader {
+    width: var(--f7-ptr-size);
+    border-radius: 50%;
+    background: var(--f7-ptr-preloader-bg-color);
+    --f7-preloader-color: var(--f7-ptr-preloader-color);
+
+    margin-top: calc(-1 * var(--f7-ptr-size));
+    z-index: 100;
+    box-shadow:
+      0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    .ltr({
+      left: 50%;
+      margin-left: calc(-1 * var(--f7-ptr-size) / 2);
+    });
+    .rtl({
+      right: 50%;
+      margin-right: calc(-1 * var(--f7-ptr-size) / 2);
+    });
+    .preloader {
+      circle {
+        stroke-width: 4;
+      }
+    }
+  }
+  .ptr-arrow {
+    width: 22px;
+    height: 22px;
+    box-sizing: border-box;
+    border: 3px solid var(--f7-preloader-color);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -11px;
+    margin-top: -11px;
+    border-left-color: transparent;
+    border-radius: 50%;
+    opacity: 1;
+    transform: rotate(150deg);
+    &:after {
+      content: '';
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      left: -5px;
+      bottom: 0px;
+      border-bottom-width: 6px;
+      border-bottom-style: solid;
+      border-bottom-color: inherit;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      transform: rotate(-40deg);
+    }
+  }
+  .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) {
+    .ptr-preloader .preloader,
+    .ptr-preloader .preloader-inner,
+    .ptr-preloader circle {
+      animation: none;
+    }
+  }
+  .ptr-refreshing,
+  .ptr-pull-up {
+    .ptr-preloader .preloader {
+      visibility: visible;
+    }
+    .ptr-arrow {
+      visibility: hidden;
+    }
+  }
+  .ptr-refreshing {
+    .ptr-preloader {
+      transform: translate3d(0, 66px, 0);
+    }
+  }
+  .ptr-transitioning {
+    .ptr-arrow {
+      transition: 300ms;
+    }
+  }
+  .ptr-pull-up {
+    .ptr-arrow {
+      transition: 400ms;
+      transform: rotate(620deg) !important;
+      opacity: 0;
+    }
+  }
+  .ptr-transitioning,
+  .ptr-refreshing {
+    .ptr-preloader {
+      transition-duration: 300ms;
+      transition-property: transform, opacity;
+    }
+  }
+
+  .ptr-bottom {
+    .ptr-preloader {
+      margin-top: 0;
+      margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
+    }
+    &.ptr-refreshing {
+      .ptr-preloader {
+        transform: translate3d(0, -66px, 0);
+      }
+    }
+  }
+  .ptr-with-navbar-large-transparent,
+  .ptr-with-navbar-transparent {
+    .ptr-preloader {
+      opacity: 0;
+    }
+    &.ptr-pull-down,
+    &.ptr-pull-up,
+    &.ptr-refreshing {
+      .ptr-preloader {
+        opacity: 1;
+      }
+    }
+    &.ptr-closing {
+      .ptr-preloader {
+        opacity: 0;
+        transition-duration: 300ms;
+      }
+    }
+  }
+}

package/components/pull-to-refresh/pull-to-refresh-rtl.css

@@ -0,0 +1 @@
+.ios{--f7-ptr-preloader-size:28px;--f7-ptr-size:44px}.md{--f7-ptr-preloader-size:22px;--f7-ptr-size:40px}.md,.md .dark,.md [class*=color-]{--f7-ptr-preloader-bg-color:var(--f7-md-surface-1);--f7-ptr-preloader-color:var(--f7-md-primary)}.ptr-preloader{position:relative;top:var(--f7-ptr-top,0);height:var(--f7-ptr-size);pointer-events:none}.ptr-preloader .preloader{position:absolute;left:50%;width:var(--f7-ptr-preloader-size);height:var(--f7-ptr-preloader-size);margin-left:calc(-1 * var(--f7-ptr-preloader-size)/ 2);margin-top:calc(-1 * var(--f7-ptr-preloader-size)/ 2);top:50%;visibility:hidden}.ptr-bottom .ptr-preloader{top:auto;bottom:0;position:fixed}.ptr-with-navbar-large-transparent .ptr-preloader,.ptr-with-navbar-transparent .ptr-preloader{top:calc(-1 * var(--f7-page-navbar-offset,0px) + var(--f7-safe-area-top))}.ios .ptr-preloader{margin-bottom:calc(-1 * var(--f7-ptr-size));width:100%;left:0;top:0;position:relative}.ios .ptr-preloader .preloader{visibility:visible}.ios .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,.ios .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader-inner{animation:none}.ios .ptr-content.ptr-closing .ptr-preloader .preloader-inner-line,.ios .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up):not(.ptr-pull-down) .ptr-preloader .preloader-inner-line{opacity:0!important}.ios .ptr-refreshing>*,.ios .ptr-transitioning>*{transition-duration:.2s;transition-property:transform}.ios .ptr-transitioning .ptr-preloader .preloader-inner-line{transition-duration:.2s}.ios .ptr-pull-up .ptr-preloader .preloader{animation:ios-ptr-preloader-spin 1s ease-out forwards}.ios .ptr-refreshing:not(.ptr-bottom){transform:none}.ios .ptr-refreshing:not(.ptr-bottom)>*{transform:translate3d(0,var(--f7-ptr-size),0)}.ios .ptr-refreshing:not(.ptr-bottom)>.ptr-preloader{transform:translate3d(0,0,0)}.ios .ptr-bottom .ptr-preloader{margin-bottom:0;margin-top:calc(-1 * var(--f7-ptr-size));position:relative}.ios .ptr-bottom.ptr-refreshing>*,.ios .ptr-bottom.ptr-transitioning>*{transition-duration:.3s;transition-property:transform}.ios .ptr-bottom.ptr-refreshing{transform:none}.ios .ptr-bottom.ptr-refreshing>*{transform:translate3d(0,calc(-1 * var(--f7-ptr-size)),0)}.ios .ptr-bottom.ptr-refreshing>.ptr-preloader{transform:translate3d(0,0,0)}@keyframes ios-ptr-preloader-spin{from{transform:rotate(0deg)}to{transform:rotate(135deg)}}.md{--f7-ptr-top:-4px}.md .ptr-preloader{width:var(--f7-ptr-size);border-radius:50%;background:var(--f7-ptr-preloader-bg-color);--f7-preloader-color:var(--f7-ptr-preloader-color);margin-top:calc(-1 * var(--f7-ptr-size));z-index:100;box-shadow:0px 2px 1px -1px rgba(0,0,0,.2),0px 1px 1px 0px rgba(0,0,0,.14),0px 1px 3px 0px rgba(0,0,0,.12);right:50%;margin-right:calc(-1 * var(--f7-ptr-size)/ 2)}.md .ptr-preloader .preloader circle{stroke-width:4}.md .ptr-arrow{width:22px;height:22px;box-sizing:border-box;border:3px solid var(--f7-preloader-color);position:absolute;left:50%;top:50%;margin-left:-11px;margin-top:-11px;border-left-color:transparent;border-radius:50%;opacity:1;transform:rotate(150deg)}.md .ptr-arrow:after{content:'';width:0px;height:0px;position:absolute;left:-5px;bottom:0px;border-bottom-width:6px;border-bottom-style:solid;border-bottom-color:inherit;border-left:5px solid transparent;border-right:5px solid transparent;transform:rotate(-40deg)}.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader-inner,.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader circle{animation:none}.md .ptr-pull-up .ptr-preloader .preloader,.md .ptr-refreshing .ptr-preloader .preloader{visibility:visible}.md .ptr-pull-up .ptr-arrow,.md .ptr-refreshing .ptr-arrow{visibility:hidden}.md .ptr-refreshing .ptr-preloader{transform:translate3d(0,66px,0)}.md .ptr-transitioning .ptr-arrow{transition:.3s}.md .ptr-pull-up .ptr-arrow{transition:.4s;transform:rotate(620deg)!important;opacity:0}.md .ptr-refreshing .ptr-preloader,.md .ptr-transitioning .ptr-preloader{transition-duration:.3s;transition-property:transform,opacity}.md .ptr-bottom .ptr-preloader{margin-top:0;margin-bottom:calc(-1 * var(--f7-ptr-size) - 4px)}.md .ptr-bottom.ptr-refreshing .ptr-preloader{transform:translate3d(0,-66px,0)}.md .ptr-with-navbar-large-transparent .ptr-preloader,.md .ptr-with-navbar-transparent .ptr-preloader{opacity:0}.md .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader,.md .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader,.md .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader{opacity:1}.md .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-closing .ptr-preloader{opacity:0;transition-duration:.3s}

package/components/pull-to-refresh/pull-to-refresh-vars.less

@@ -0,0 +1,14 @@
+:root {
+}
+.ios-vars({
+  --f7-ptr-preloader-size: 28px;
+  --f7-ptr-size: 44px;
+});
+.md-vars({
+  --f7-ptr-preloader-size: 22px;
+  --f7-ptr-size: 40px;
+});
+.md-color-vars({
+  --f7-ptr-preloader-bg-color: var(--f7-md-surface-1);
+  --f7-ptr-preloader-color: var(--f7-md-primary);
+});

package/components/pull-to-refresh/pull-to-refresh.css

@@ -0,0 +1 @@
+.ios{--f7-ptr-preloader-size:28px;--f7-ptr-size:44px}.md{--f7-ptr-preloader-size:22px;--f7-ptr-size:40px}.md,.md .dark,.md [class*=color-]{--f7-ptr-preloader-bg-color:var(--f7-md-surface-1);--f7-ptr-preloader-color:var(--f7-md-primary)}.ptr-preloader{position:relative;top:var(--f7-ptr-top,0);height:var(--f7-ptr-size);pointer-events:none}.ptr-preloader .preloader{position:absolute;left:50%;width:var(--f7-ptr-preloader-size);height:var(--f7-ptr-preloader-size);margin-left:calc(-1 * var(--f7-ptr-preloader-size)/ 2);margin-top:calc(-1 * var(--f7-ptr-preloader-size)/ 2);top:50%;visibility:hidden}.ptr-bottom .ptr-preloader{top:auto;bottom:0;position:fixed}.ptr-with-navbar-large-transparent .ptr-preloader,.ptr-with-navbar-transparent .ptr-preloader{top:calc(-1 * var(--f7-page-navbar-offset,0px) + var(--f7-safe-area-top))}.ios .ptr-preloader{margin-bottom:calc(-1 * var(--f7-ptr-size));width:100%;left:0;top:0;position:relative}.ios .ptr-preloader .preloader{visibility:visible}.ios .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,.ios .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader-inner{animation:none}.ios .ptr-content.ptr-closing .ptr-preloader .preloader-inner-line,.ios .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up):not(.ptr-pull-down) .ptr-preloader .preloader-inner-line{opacity:0!important}.ios .ptr-refreshing>*,.ios .ptr-transitioning>*{transition-duration:.2s;transition-property:transform}.ios .ptr-transitioning .ptr-preloader .preloader-inner-line{transition-duration:.2s}.ios .ptr-pull-up .ptr-preloader .preloader{animation:ios-ptr-preloader-spin 1s ease-out forwards}.ios .ptr-refreshing:not(.ptr-bottom){transform:none}.ios .ptr-refreshing:not(.ptr-bottom)>*{transform:translate3d(0,var(--f7-ptr-size),0)}.ios .ptr-refreshing:not(.ptr-bottom)>.ptr-preloader{transform:translate3d(0,0,0)}.ios .ptr-bottom .ptr-preloader{margin-bottom:0;margin-top:calc(-1 * var(--f7-ptr-size));position:relative}.ios .ptr-bottom.ptr-refreshing>*,.ios .ptr-bottom.ptr-transitioning>*{transition-duration:.3s;transition-property:transform}.ios .ptr-bottom.ptr-refreshing{transform:none}.ios .ptr-bottom.ptr-refreshing>*{transform:translate3d(0,calc(-1 * var(--f7-ptr-size)),0)}.ios .ptr-bottom.ptr-refreshing>.ptr-preloader{transform:translate3d(0,0,0)}@keyframes ios-ptr-preloader-spin{from{transform:rotate(0deg)}to{transform:rotate(135deg)}}.md{--f7-ptr-top:-4px}.md .ptr-preloader{width:var(--f7-ptr-size);border-radius:50%;background:var(--f7-ptr-preloader-bg-color);--f7-preloader-color:var(--f7-ptr-preloader-color);margin-top:calc(-1 * var(--f7-ptr-size));z-index:100;box-shadow:0px 2px 1px -1px rgba(0,0,0,.2),0px 1px 1px 0px rgba(0,0,0,.14),0px 1px 3px 0px rgba(0,0,0,.12);left:50%;margin-left:calc(-1 * var(--f7-ptr-size)/ 2)}.md .ptr-preloader .preloader circle{stroke-width:4}.md .ptr-arrow{width:22px;height:22px;box-sizing:border-box;border:3px solid var(--f7-preloader-color);position:absolute;left:50%;top:50%;margin-left:-11px;margin-top:-11px;border-left-color:transparent;border-radius:50%;opacity:1;transform:rotate(150deg)}.md .ptr-arrow:after{content:'';width:0px;height:0px;position:absolute;left:-5px;bottom:0px;border-bottom-width:6px;border-bottom-style:solid;border-bottom-color:inherit;border-left:5px solid transparent;border-right:5px solid transparent;transform:rotate(-40deg)}.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader-inner,.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader circle{animation:none}.md .ptr-pull-up .ptr-preloader .preloader,.md .ptr-refreshing .ptr-preloader .preloader{visibility:visible}.md .ptr-pull-up .ptr-arrow,.md .ptr-refreshing .ptr-arrow{visibility:hidden}.md .ptr-refreshing .ptr-preloader{transform:translate3d(0,66px,0)}.md .ptr-transitioning .ptr-arrow{transition:.3s}.md .ptr-pull-up .ptr-arrow{transition:.4s;transform:rotate(620deg)!important;opacity:0}.md .ptr-refreshing .ptr-preloader,.md .ptr-transitioning .ptr-preloader{transition-duration:.3s;transition-property:transform,opacity}.md .ptr-bottom .ptr-preloader{margin-top:0;margin-bottom:calc(-1 * var(--f7-ptr-size) - 4px)}.md .ptr-bottom.ptr-refreshing .ptr-preloader{transform:translate3d(0,-66px,0)}.md .ptr-with-navbar-large-transparent .ptr-preloader,.md .ptr-with-navbar-transparent .ptr-preloader{opacity:0}.md .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader,.md .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader,.md .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader{opacity:1}.md .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader,.md .ptr-with-navbar-transparent.ptr-closing .ptr-preloader{opacity:0;transition-duration:.3s}

package/components/pull-to-refresh/pull-to-refresh.d.ts

@@ -0,0 +1,103 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace PullToRefresh {
+  interface PullToRefresh extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** PTR HTML element (ptr-content) */
+    el: HTMLElement;
+    /** Dom7 instance with PTR HTML element (ptr-content) */
+    $el: Dom7Array;
+    /** Reset PTR state */
+    done(): void;
+    /** Trigger PTR */
+    refresh(): void;
+    /** Destroy PTR instance and remove PTR event listeners from the specified HTML element */
+    destroy(): void;
+  }
+
+  interface Events {
+    /** Event will be triggered when you start to move pull to refresh content. As an argument event handler receives ptr element */
+    pullStart(el: HTMLElement): void;
+    /**  */
+    pullMove(el: HTMLElement, data: Data): void;
+    /**  */
+    pullEnd(el: HTMLElement, data: Data): void;
+    /**  */
+    refresh(el: HTMLElement, done: () => void): void;
+    /**  */
+    done(el: HTMLElement): void;
+    /**  */
+    beforeDestroy(ptr: PullToRefresh): void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered when you start to move pull to refresh content */
+    'ptr:pullstart': () => void;
+    /** Event will be triggered during you move pull to refresh content */
+    'ptr:pullmove': () => void;
+    /** Event will be triggered when you release pull to refresh content */
+    'ptr:pullend': () => void;
+    /** Event will be triggered when pull to refresh enters in "refreshing" state. event.detail contain ptr.done method to reset its state after loading completed */
+    'ptr:refresh': () => void;
+    /** Event will be triggered after pull to refresh is done and it is back to initial state (after calling ptr.done method) */
+    'ptr:done': () => void;
+    /** Event will be triggered right before PTR instance will be destroyed */
+    'ptr:beforedestroy': () => void;
+  }
+
+  interface Data {
+    /** touchmove event */
+    event: Event;
+    /** current scroll top position */
+    scrollTop: number;
+    /** current translateY offset */
+    translate: number;
+    /** touches difference (in px) */
+    touchesDiff: number;
+  }
+  interface AppMethods {
+    ptr: {
+      /** initialise PTR on specified HTML element container */
+      create(el: HTMLElement | CSSSelector): PullToRefresh;
+
+      /** remove PTR event listeners from the specified HTML element */
+      destroy(el: HTMLElement | CSSSelector | PullToRefresh): void;
+
+      /** get PTR instance by HTML element */
+      get(el: HTMLElement | CSSSelector): PullToRefresh;
+
+      /** reset PTR state on specified PTR content element */
+      done(el: HTMLElement | CSSSelector): PullToRefresh;
+
+      /** trigger PTR on specified PTR content element */
+      refresh(el: HTMLElement | CSSSelector): PullToRefresh;
+    };
+  }
+
+  interface AppParams {}
+
+  interface AppEvents {
+    /** Event will be triggered when you start to move pull to refresh content. As an argument event handler receives ptr element */
+    ptrPullStart(el: HTMLElement): void;
+    /**  */
+    ptrPullMove(el: HTMLElement, data: Data): void;
+    /**  */
+    ptrPullEnd(el: HTMLElement, data: Data): void;
+    /**  */
+    ptrRefresh(el: HTMLElement, done: () => void): void;
+    /**  */
+    ptrDone(el: HTMLElement): void;
+    /**  */
+    ptrBeforeDestroy(ptr: PullToRefresh): void;
+  }
+}
+
+declare const PullToRefreshComponent: Framework7Plugin;
+
+export default PullToRefreshComponent;

package/components/pull-to-refresh/pull-to-refresh.js

@@ -0,0 +1,62 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import PullToRefresh from './pull-to-refresh-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'pullToRefresh',
+  create() {
+    const app = this;
+    app.ptr = extend(ConstructorMethods({
+      defaultSelector: '.ptr-content',
+      constructor: PullToRefresh,
+      app,
+      domProp: 'f7PullToRefresh'
+    }), {
+      done(el) {
+        const ptr = app.ptr.get(el);
+        if (ptr) return ptr.done();
+        return undefined;
+      },
+      refresh(el) {
+        const ptr = app.ptr.get(el);
+        if (ptr) return ptr.refresh();
+        return undefined;
+      }
+    });
+  },
+  static: {
+    PullToRefresh
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      const $tabEl = $(tabEl);
+      const $ptrEls = $tabEl.find('.ptr-content');
+      if ($tabEl.is('.ptr-content')) $ptrEls.add($tabEl);
+      $ptrEls.each(el => {
+        app.ptr.create(el);
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      const $tabEl = $(tabEl);
+      const app = this;
+      const $ptrEls = $tabEl.find('.ptr-content');
+      if ($tabEl.is('.ptr-content')) $ptrEls.add($tabEl);
+      $ptrEls.each(el => {
+        app.ptr.destroy(el);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.ptr-content').each(el => {
+        app.ptr.create(el);
+      });
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.ptr-content').each(el => {
+        app.ptr.destroy(el);
+      });
+    }
+  }
+};

package/components/pull-to-refresh/pull-to-refresh.less

@@ -0,0 +1,38 @@
+/* === PTR === */
+@import './pull-to-refresh-vars.less';
+
+.ptr-preloader {
+  position: relative;
+  top: var(--f7-ptr-top, 0);
+  height: var(--f7-ptr-size);
+  pointer-events: none;
+  .preloader {
+    position: absolute;
+    left: 50%;
+    width: var(--f7-ptr-preloader-size);
+    height: var(--f7-ptr-preloader-size);
+    margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
+    margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
+    top: 50%;
+    visibility: hidden;
+  }
+}
+.ptr-bottom {
+  .ptr-preloader {
+    top: auto;
+    bottom: 0;
+    position: fixed;
+  }
+}
+.ptr-with-navbar-large-transparent,
+.ptr-with-navbar-transparent {
+  .ptr-preloader {
+    top: calc(-1 * var(--f7-page-navbar-offset, 0px) + var(--f7-safe-area-top));
+  }
+}
+.if-ios-theme({
+  @import './pull-to-refresh-ios.less';
+});
+.if-md-theme({
+  @import './pull-to-refresh-md.less';
+});

package/components/radio/radio-ios.less

@@ -0,0 +1,61 @@
+.ios {
+  .icon-radio {
+    &:after {
+      .core-icons-font();
+      width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
+      height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
+      line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
+      font-size: 20px;
+      content: 'radio_ios';
+      color: var(--f7-radio-active-color, var(--f7-theme-color));
+      opacity: 0;
+    }
+  }
+  label.item-radio input[type='radio']:checked ~ .icon-radio,
+  label.item-radio input[type='radio']:checked ~ * .icon-radio,
+  .radio input[type='radio']:checked ~ .icon-radio {
+    &:after {
+      opacity: 1;
+    }
+  }
+  .radio input[type='radio']:checked ~ .icon-radio {
+    border-color: var(--f7-radio-active-color, var(--f7-theme-color));
+  }
+  label.item-radio:not(.item-radio-icon-start) input[type='radio'] ~ .icon-radio {
+    position: absolute;
+    top: 50%;
+    margin-top: -11px;
+    .ltr({
+      right: calc(var(--f7-safe-area-right) + 10px);
+    });
+    .rtl({
+      left: calc(var(--f7-safe-area-left) + 10px);
+    });
+  }
+  label.item-radio:not(.item-radio-icon-start) {
+    .item-inner {
+      .ltr({
+        padding-right: calc(var(--f7-safe-area-right) + 36px);
+      });
+      .rtl({
+        padding-left: calc(var(--f7-safe-area-left) + 36px);
+      });
+    }
+  }
+  label.item-radio-icon-start {
+    > .icon-radio {
+      .ltr({
+        margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
+      });
+      .rtl({
+        margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
+      });
+    }
+  }
+
+  label.item-radio {
+    &.active-state {
+      transition-duration: 0ms;
+    }
+  }
+}

package/components/radio/radio-md.less

@@ -0,0 +1,64 @@
+.md {
+  .icon-radio {
+    transition-duration: 200ms;
+    &:after {
+      content: '';
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      left: 50%;
+      top: 50%;
+      margin-left: -5px;
+      margin-top: -5px;
+      background-color: var(--f7-radio-active-color, var(--f7-theme-color));
+      border-radius: 50%;
+      transform: scale(0);
+      transition-duration: 200ms;
+    }
+  }
+  label.item-radio input[type='radio']:checked ~ .icon-radio,
+  label.item-radio input[type='radio']:checked ~ * .icon-radio,
+  .radio input[type='radio']:checked ~ .icon-radio {
+    border-color: var(--f7-radio-active-color, var(--f7-theme-color));
+    &:after {
+      background-color: var(--f7-radio-active-color, var(--f7-theme-color));
+      transform: scale(1);
+    }
+  }
+  label.item-radio {
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+  }
+  label.item-radio:not(.item-radio-icon-end) {
+    > .icon-radio {
+      .ltr({
+        margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin))
+      });
+      .rtl({
+        margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin))
+      });
+    }
+  }
+  label.item-radio-icon-end input[type='radio'] ~ .icon-radio {
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+    .ltr({
+      right: calc(var(--f7-safe-area-right) + 16px);
+    });
+    .rtl({
+      left: calc(var(--f7-safe-area-left) + 16px);
+    });
+  }
+  label.item-radio-icon-end {
+    .item-inner {
+      .ltr({
+        padding-right: calc(var(--f7-safe-area-right) + 52px);
+      });
+      .rtl({
+        padding-left: calc(var(--f7-safe-area-left) + 52px);
+      });
+    }
+  }
+}

package/components/radio/radio-rtl.css

@@ -0,0 +1 @@
+:root{--f7-radio-border-radius:50%;--f7-radio-extra-margin:0px}:root .dark,:root.dark{--f7-radio-inactive-color:rgba(255, 255, 255, 0.3)}.ios{--f7-radio-size:22px;--f7-radio-border-width:1px;--f7-radio-inactive-color:#c7c7cc}.md{--f7-radio-size:20px;--f7-radio-border-width:2px;--f7-radio-inactive-color:#6d6d6d}.radio{position:relative;display:inline-block;vertical-align:middle;z-index:1;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.5)}.icon-radio{width:var(--f7-radio-size);height:var(--f7-radio-size);border-radius:var(--f7-radio-border-radius);position:relative;box-sizing:border-box;display:block;flex-shrink:0}.color-white .icon-radio,.color-white .radio,.icon-radio.color-white,.radio.color-white{--f7-theme-color:#fff}.color-black .icon-radio,.color-black .radio,.icon-radio.color-black,.radio.color-black{--f7-theme-color:#000}.md .icon-radio,.radio .icon-radio{border:var(--f7-radio-border-width) solid var(--f7-radio-inactive-color)}.radio,label.item-radio{cursor:pointer}.radio input[type=checkbox],.radio input[type=radio],label.item-radio input[type=checkbox],label.item-radio input[type=radio]{display:none}label.item-radio{transition-duration:.3s}label.item-radio .item-content .item-media,label.item-radio.item-content .item-media{align-self:center}label.item-radio.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-radio.active-state:after{background-color:transparent}.disabled label.item-radio,label.item-radio.disabled{opacity:.55;pointer-events:none}.ios .icon-radio: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%;width:calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);height:calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);line-height:calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);font-size:20px;content:'radio_ios';color:var(--f7-radio-active-color,var(--f7-theme-color));opacity:0}.ios .radio input[type=radio]:checked~.icon-radio:after,.ios label.item-radio input[type=radio]:checked~* .icon-radio:after,.ios label.item-radio input[type=radio]:checked~.icon-radio:after{opacity:1}.ios .radio input[type=radio]:checked~.icon-radio{border-color:var(--f7-radio-active-color,var(--f7-theme-color))}.ios label.item-radio:not(.item-radio-icon-start) input[type=radio]~.icon-radio{position:absolute;top:50%;margin-top:-11px;left:calc(var(--f7-safe-area-left) + 10px)}.ios label.item-radio:not(.item-radio-icon-start) .item-inner{padding-left:calc(var(--f7-safe-area-left) + 36px)}.ios label.item-radio-icon-start>.icon-radio{margin-left:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}.ios label.item-radio.active-state{transition-duration:0s}.md .icon-radio{transition-duration:.2s}.md .icon-radio:after{content:'';position:absolute;width:10px;height:10px;left:50%;top:50%;margin-left:-5px;margin-top:-5px;background-color:var(--f7-radio-active-color,var(--f7-theme-color));border-radius:50%;transform:scale(0);transition-duration:.2s}.md .radio input[type=radio]:checked~.icon-radio,.md label.item-radio input[type=radio]:checked~* .icon-radio,.md label.item-radio input[type=radio]:checked~.icon-radio{border-color:var(--f7-radio-active-color,var(--f7-theme-color))}.md .radio input[type=radio]:checked~.icon-radio:after,.md label.item-radio input[type=radio]:checked~* .icon-radio:after,.md label.item-radio input[type=radio]:checked~.icon-radio:after{background-color:var(--f7-radio-active-color,var(--f7-theme-color));transform:scale(1)}.md label.item-radio{position:relative;overflow:hidden;z-index:0}.md label.item-radio:not(.item-radio-icon-end)>.icon-radio{margin-left:calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin))}.md label.item-radio-icon-end input[type=radio]~.icon-radio{position:absolute;top:50%;margin-top:-10px;left:calc(var(--f7-safe-area-left) + 16px)}.md label.item-radio-icon-end .item-inner{padding-left:calc(var(--f7-safe-area-left) + 52px)}

package/components/radio/radio-vars.less

@@ -0,0 +1,24 @@
+:root {
+  /*
+  --f7-radio-active-color: var(--f7-theme-color);
+  */
+  --f7-radio-border-radius: 50%;
+  --f7-radio-extra-margin: 0px;
+  .dark-vars({
+    --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
+  });
+}
+.ios-vars({
+  --f7-radio-size: 22px;
+  --f7-radio-border-width: 1px;
+  .light-vars({
+    --f7-radio-inactive-color: #c7c7cc;
+  })
+});
+.md-vars({
+  --f7-radio-size: 20px;
+  --f7-radio-border-width: 2px;
+  .light-vars({
+    --f7-radio-inactive-color: #6d6d6d;
+  })
+});

package/components/radio/radio.css

@@ -0,0 +1 @@
+:root{--f7-radio-border-radius:50%;--f7-radio-extra-margin:0px}:root .dark,:root.dark{--f7-radio-inactive-color:rgba(255, 255, 255, 0.3)}.ios{--f7-radio-size:22px;--f7-radio-border-width:1px;--f7-radio-inactive-color:#c7c7cc}.md{--f7-radio-size:20px;--f7-radio-border-width:2px;--f7-radio-inactive-color:#6d6d6d}.radio{position:relative;display:inline-block;vertical-align:middle;z-index:1;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.5)}.icon-radio{width:var(--f7-radio-size);height:var(--f7-radio-size);border-radius:var(--f7-radio-border-radius);position:relative;box-sizing:border-box;display:block;flex-shrink:0}.color-white .icon-radio,.color-white .radio,.icon-radio.color-white,.radio.color-white{--f7-theme-color:#fff}.color-black .icon-radio,.color-black .radio,.icon-radio.color-black,.radio.color-black{--f7-theme-color:#000}.md .icon-radio,.radio .icon-radio{border:var(--f7-radio-border-width) solid var(--f7-radio-inactive-color)}.radio,label.item-radio{cursor:pointer}.radio input[type=checkbox],.radio input[type=radio],label.item-radio input[type=checkbox],label.item-radio input[type=radio]{display:none}label.item-radio{transition-duration:.3s}label.item-radio .item-content .item-media,label.item-radio.item-content .item-media{align-self:center}label.item-radio.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-radio.active-state:after{background-color:transparent}.disabled label.item-radio,label.item-radio.disabled{opacity:.55;pointer-events:none}.ios .icon-radio: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%;width:calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);height:calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);line-height:calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);font-size:20px;content:'radio_ios';color:var(--f7-radio-active-color,var(--f7-theme-color));opacity:0}.ios .radio input[type=radio]:checked~.icon-radio:after,.ios label.item-radio input[type=radio]:checked~* .icon-radio:after,.ios label.item-radio input[type=radio]:checked~.icon-radio:after{opacity:1}.ios .radio input[type=radio]:checked~.icon-radio{border-color:var(--f7-radio-active-color,var(--f7-theme-color))}.ios label.item-radio:not(.item-radio-icon-start) input[type=radio]~.icon-radio{position:absolute;top:50%;margin-top:-11px;right:calc(var(--f7-safe-area-right) + 10px)}.ios label.item-radio:not(.item-radio-icon-start) .item-inner{padding-right:calc(var(--f7-safe-area-right) + 36px)}.ios label.item-radio-icon-start>.icon-radio{margin-right:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}.ios label.item-radio.active-state{transition-duration:0s}.md .icon-radio{transition-duration:.2s}.md .icon-radio:after{content:'';position:absolute;width:10px;height:10px;left:50%;top:50%;margin-left:-5px;margin-top:-5px;background-color:var(--f7-radio-active-color,var(--f7-theme-color));border-radius:50%;transform:scale(0);transition-duration:.2s}.md .radio input[type=radio]:checked~.icon-radio,.md label.item-radio input[type=radio]:checked~* .icon-radio,.md label.item-radio input[type=radio]:checked~.icon-radio{border-color:var(--f7-radio-active-color,var(--f7-theme-color))}.md .radio input[type=radio]:checked~.icon-radio:after,.md label.item-radio input[type=radio]:checked~* .icon-radio:after,.md label.item-radio input[type=radio]:checked~.icon-radio:after{background-color:var(--f7-radio-active-color,var(--f7-theme-color));transform:scale(1)}.md label.item-radio{position:relative;overflow:hidden;z-index:0}.md label.item-radio:not(.item-radio-icon-end)>.icon-radio{margin-right:calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin))}.md label.item-radio-icon-end input[type=radio]~.icon-radio{position:absolute;top:50%;margin-top:-10px;right:calc(var(--f7-safe-area-right) + 16px)}.md label.item-radio-icon-end .item-inner{padding-right:calc(var(--f7-safe-area-right) + 52px)}

package/components/radio/radio.d.ts

@@ -0,0 +1,14 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Radio {
+  interface AppMethods {}
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const RadioComponent: Framework7Plugin;
+export default RadioComponent;

package/components/radio/radio.js

@@ -0,0 +1,3 @@
+export default {
+  name: 'radio'
+};

package/components/radio/radio.less

@@ -0,0 +1,64 @@
+/* === Radio === */
+@import './radio-vars.less';
+.radio {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  z-index: 1;
+  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
+}
+.icon-radio {
+  width: var(--f7-radio-size);
+  height: var(--f7-radio-size);
+  border-radius: var(--f7-radio-border-radius);
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+}
+.radio,
+.icon-radio {
+  &.color-white,
+  .color-white & {
+    --f7-theme-color: #fff;
+  }
+  &.color-black,
+  .color-black & {
+    --f7-theme-color: #000;
+  }
+}
+.radio .icon-radio,
+.md .icon-radio {
+  border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
+}
+label.item-radio,
+.radio {
+  cursor: pointer;
+  input[type='checkbox'],
+  input[type='radio'] {
+    display: none;
+  }
+}
+label.item-radio {
+  transition-duration: 300ms;
+  .item-content,
+  &.item-content {
+    .item-media {
+      align-self: center;
+    }
+  }
+  &.active-state {
+    .hairline-color(bottom, transparent);
+    background-color: var(--f7-list-link-pressed-bg-color);
+  }
+  &.disabled,
+  .disabled & {
+    .disabled();
+  }
+}
+.if-ios-theme({
+  @import './radio-ios.less';
+});
+.if-md-theme({
+  @import './radio-md.less';
+});