@xenknight/framework7 0.0.2

package/components/toast/toast.css

@@ -0,0 +1 @@
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}

package/components/toast/toast.d.ts

@@ -0,0 +1,121 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Toast {
+  interface Events {
+    /** Event will be triggered when user clicks on Toast close button. As an argument event handler receives toast instance */
+    closeButtonClick: (toast: Toast) => void;
+    /** Event will be triggered when Toast starts its opening animation. As an argument event handler receives toast instance */
+    open: (toast: Toast) => void;
+    /** Event will be triggered when Toast completes its opening animation. As an argument event handler receives toast instance */
+    opened: (toast: Toast) => void;
+    /** Event will be triggered when Toast starts its closing animation. As an argument event handler receives toast instance */
+    close: (toast: Toast) => void;
+    /** Event will be triggered after Toast completes its closing animation. As an argument event handler receives toast instance */
+    closed: (toast: Toast) => void;
+    /** Event will be triggered right before Toast instance will be destroyed */
+    beforeDestroy: (toast: Toast) => void;
+  }
+  interface Parameters {
+    /** Toast element. Can be useful if you already have Toast element in your HTML and want to create new instance using this element. */
+    el?: HTMLElement | CSSSelector;
+    /** Toast icon HTML layout, e.g. <i class="f7-icons">house</i> or image <img src="path/to/icon.png"> */
+    icon?: string;
+    /** Toast inner text */
+    text?: string;
+    /** Toast position. Can be bottom, center or top (default bottom) */
+    position?: 'top' | 'center' | 'bottom';
+    /** Toast horizontal alignment on wide screen. Has effects only on top and bottom toasts. (default left) */
+    horizontalPosition?: 'left' | 'center' | 'right';
+    /** Adds toast close button (default false) */
+    closeButton?: boolean;
+    /** One of the default color themes */
+    closeButtonColor?: string;
+    /** Close button text (default Ok) */
+    closeButtonText?: string;
+    /** Timeout delay (in ms) to close toast automatically  */
+    closeTimeout?: number;
+    /** Additional css class to add */
+    cssClass?: string;
+    /** Destroys toast instance on close (default false) */
+    destroyOnClose?: boolean;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Custom function to render Toast. Must return toast html */
+    render?: () => string;
+
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Toast extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Toast HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with toast HTML element */
+    $el: Dom7Array;
+    /** Toast parameters */
+    params: Parameters;
+
+    /** Open toast */
+    open(animate?: boolean): Toast;
+    /** Close toast */
+    close(animate?: boolean): Toast;
+    /** Destroy toast */
+    destroy(): void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when Toast starts its opening animation */
+    'toast:open': () => void;
+    /** Event will be triggered after Toast completes its opening animation */
+    'toast:opened': () => void;
+    /** Event will be triggered when Toast starts its closing animation */
+    'toast:close': () => void;
+    /** Event will be triggered after Toast completes its closing animation */
+    'toast:closed': () => void;
+  }
+
+  interface AppMethods {
+    toast: {
+      /** create Toast instance */
+      create(parameters: Parameters): Toast;
+      /** destroy Toast instance */
+      destroy(el: HTMLElement | CSSSelector | Toast): void;
+      /** get Toast instance by HTML element */
+      get(el: HTMLElement | CSSSelector): Toast;
+      /** open Toast */
+      open(el: HTMLElement | CSSSelector, animate?: boolean): Toast;
+      /** closes Toast */
+      close(el: HTMLElement | CSSSelector, animate?: boolean): Toast;
+      /** create Toast instance and show immediately */
+      show(parameters: Parameters): Toast;
+    };
+  }
+  interface AppParams {
+    toast?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when user clicks on Toast close button. As an argument event handler receives toast instance */
+    toastCloseButtonClick: (toast: Toast) => void;
+    /** Event will be triggered when Toast starts its opening animation. As an argument event handler receives toast instance */
+    toastOpen: (toast: Toast) => void;
+    /** Event will be triggered when Toast completes its opening animation. As an argument event handler receives toast instance */
+    toastOpened: (toast: Toast) => void;
+    /** Event will be triggered when Toast starts its closing animation. As an argument event handler receives toast instance */
+    toastClose: (toast: Toast) => void;
+    /** Event will be triggered after Toast completes its closing animation. As an argument event handler receives toast instance */
+    toastClosed: (toast: Toast) => void;
+    /** Event will be triggered right before Toast instance will be destroyed */
+    toastBeforeDestroy: (toast: Toast) => void;
+  }
+}
+
+declare const ToastComponent: Framework7Plugin;
+
+export default ToastComponent;

package/components/toast/toast.js

@@ -0,0 +1,40 @@
+import { extend } from '../../shared/utils.js';
+import Toast from './toast-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'toast',
+  static: {
+    Toast
+  },
+  create() {
+    const app = this;
+    app.toast = extend({}, ModalMethods({
+      app,
+      constructor: Toast,
+      defaultSelector: '.toast.modal-in'
+    }), {
+      // Shortcuts
+      show(params) {
+        extend(params, {
+          destroyOnClose: true
+        });
+        return new Toast(app, params).open();
+      }
+    });
+  },
+  params: {
+    toast: {
+      icon: null,
+      text: null,
+      position: 'bottom',
+      horizontalPosition: 'left',
+      closeButton: false,
+      closeButtonColor: null,
+      closeButtonText: 'Ok',
+      closeTimeout: null,
+      cssClass: null,
+      render: null,
+      containerEl: null
+    }
+  }
+};

package/components/toast/toast.less

@@ -0,0 +1,62 @@
+/* === Toast === */
+@import './toast-vars.less';
+
+.toast {
+  transition-property: transform, opacity;
+  position: absolute;
+  max-width: var(--f7-toast-max-width);
+  z-index: 20000;
+  color: var(--f7-toast-text-color);
+  font-size: var(--f7-toast-font-size);
+  box-sizing: border-box;
+  background-color: var(--f7-toast-bg-color);
+  opacity: 0;
+  .ios-translucent-modals(var(--f7-toast-bg-color-rgb));
+  &.modal-in {
+    opacity: 1;
+  }
+  .toast-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
+  }
+  .toast-text {
+    line-height: 20px;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  .toast-button {
+    flex-shrink: 0;
+    min-width: var(--f7-toast-button-min-width);
+    margin-top: -8px;
+    margin-bottom: -8px;
+  }
+  &.toast-with-icon {
+    .toast-content {
+      display: block;
+      text-align: center;
+    }
+    .toast-text {
+      text-align: center;
+    }
+    .toast-icon .f7-icons,
+    .toast-icon .material-icons {
+      font-size: var(--f7-toast-icon-size);
+    }
+  }
+  &.toast-center {
+    top: 50%;
+  }
+  &.toast-top {
+    margin-top: var(--f7-safe-area-top);
+  }
+}
+
+.if-ios-theme({
+  @import './toast-ios.less';
+});
+.if-md-theme({
+  @import './toast-md.less';
+});

package/components/toggle/toggle-class.js

@@ -0,0 +1,165 @@
+import $ from '../../shared/dom7.js';
+import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import { getSupport } from '../../shared/get-support.js';
+class Toggle extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const toggle = this;
+    const support = getSupport();
+    const defaults = {};
+
+    // Extend defaults with modules params
+    toggle.useModulesParams(defaults);
+    toggle.params = extend(defaults, params);
+    const el = toggle.params.el;
+    if (!el) return toggle;
+    const $el = $(el);
+    if ($el.length === 0) return toggle;
+    if ($el[0].f7Toggle) return $el[0].f7Toggle;
+    const $inputEl = $el.children('input[type="checkbox"]');
+    extend(toggle, {
+      app,
+      $el,
+      el: $el[0],
+      $inputEl,
+      inputEl: $inputEl[0],
+      disabled: $el.hasClass('disabled') || $inputEl.hasClass('disabled') || $inputEl.attr('disabled') || $inputEl[0].disabled
+    });
+    Object.defineProperty(toggle, 'checked', {
+      enumerable: true,
+      configurable: true,
+      set(checked) {
+        if (!toggle || typeof toggle.$inputEl === 'undefined') return;
+        if (toggle.checked === checked) return;
+        $inputEl[0].checked = checked;
+        toggle.$inputEl.trigger('change');
+      },
+      get() {
+        return $inputEl[0].checked;
+      }
+    });
+    $el[0].f7Toggle = toggle;
+    let isTouched;
+    const touchesStart = {};
+    let isScrolling;
+    let touchesDiff;
+    let toggleWidth;
+    let touchStartTime;
+    let touchStartChecked;
+    function handleTouchStart(e) {
+      if (isTouched || toggle.disabled) return;
+      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      touchesDiff = 0;
+      isTouched = true;
+      isScrolling = undefined;
+      touchStartTime = now();
+      touchStartChecked = toggle.checked;
+      toggleWidth = $el[0].offsetWidth;
+      nextTick(() => {
+        if (isTouched) {
+          $el.addClass('toggle-active-state');
+        }
+      });
+    }
+    function handleTouchMove(e) {
+      if (!isTouched || toggle.disabled) return;
+      const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      const inverter = app.rtl ? -1 : 1;
+      if (typeof isScrolling === 'undefined') {
+        isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
+      }
+      if (isScrolling) {
+        isTouched = false;
+        return;
+      }
+      e.preventDefault();
+      touchesDiff = pageX - touchesStart.x;
+      let changed;
+      if (touchesDiff * inverter < 0 && Math.abs(touchesDiff) > toggleWidth / 3 && touchStartChecked) {
+        changed = true;
+      }
+      if (touchesDiff * inverter > 0 && Math.abs(touchesDiff) > toggleWidth / 3 && !touchStartChecked) {
+        changed = true;
+      }
+      if (changed) {
+        touchesStart.x = pageX;
+        toggle.checked = !touchStartChecked;
+        touchStartChecked = !touchStartChecked;
+      }
+    }
+    function handleTouchEnd() {
+      if (!isTouched || toggle.disabled) {
+        if (isScrolling) $el.removeClass('toggle-active-state');
+        isTouched = false;
+        return;
+      }
+      const inverter = app.rtl ? -1 : 1;
+      isTouched = false;
+      $el.removeClass('toggle-active-state');
+      let changed;
+      if (now() - touchStartTime < 300) {
+        if (touchesDiff * inverter < 0 && touchStartChecked) {
+          changed = true;
+        }
+        if (touchesDiff * inverter > 0 && !touchStartChecked) {
+          changed = true;
+        }
+        if (changed) {
+          toggle.checked = !touchStartChecked;
+        }
+      }
+    }
+    function handleInputChange() {
+      toggle.$el.trigger('toggle:change');
+      toggle.emit('local::change toggleChange', toggle);
+    }
+    toggle.attachEvents = function attachEvents() {
+      const passive = support.passiveListener ? {
+        passive: true
+      } : false;
+      $el.on(app.touchEvents.start, handleTouchStart, passive);
+      app.on('touchmove', handleTouchMove);
+      app.on('touchend:passive', handleTouchEnd);
+      toggle.$inputEl.on('change', handleInputChange);
+    };
+    toggle.detachEvents = function detachEvents() {
+      const passive = support.passiveListener ? {
+        passive: true
+      } : false;
+      $el.off(app.touchEvents.start, handleTouchStart, passive);
+      app.off('touchmove', handleTouchMove);
+      app.off('touchend:passive', handleTouchEnd);
+      toggle.$inputEl.off('change', handleInputChange);
+    };
+
+    // Install Modules
+    toggle.useModules();
+
+    // Init
+    toggle.init();
+  }
+  toggle() {
+    const toggle = this;
+    toggle.checked = !toggle.checked;
+  }
+  init() {
+    const toggle = this;
+    toggle.attachEvents();
+  }
+  destroy() {
+    let toggle = this;
+    toggle.$el.trigger('toggle:beforedestroy');
+    toggle.emit('local::beforeDestroy toggleBeforeDestroy', toggle);
+    delete toggle.$el[0].f7Toggle;
+    toggle.detachEvents();
+    deleteProps(toggle);
+    toggle = null;
+  }
+}
+export default Toggle;

package/components/toggle/toggle-ios.less

@@ -0,0 +1,70 @@
+.ios {
+  .toggle {
+    background: var(--f7-toggle-inactive-border-color);
+    input[type='checkbox']:checked + .toggle-icon {
+      background: var(--f7-toggle-active-color, var(--f7-theme-color));
+      &:before {
+        background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
+        transform: scale(0);
+      }
+      &:after {
+        background: var(--f7-toggle-active-knob-bg-color);
+        .ltr({
+          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
+        });
+        .rtl({
+          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
+        });
+      }
+    }
+  }
+  .toggle-icon {
+    background: var(--f7-toggle-border-color);
+    &:before {
+      position: absolute;
+      .ltr({ left: 2px; });
+      .rtl({ right: 2px; });
+      top: 2px;
+      width: calc(var(--f7-toggle-width) - 4px);
+      height: calc(var(--f7-toggle-height) - 4px);
+      border-radius: var(--f7-toggle-height);
+      box-sizing: border-box;
+      background: var(--f7-toggle-inactive-bg-color);
+      z-index: 1;
+      transition-duration: 300ms;
+      transform: scale(1);
+    }
+    &:after {
+      background: var(--f7-toggle-inactive-knob-bg-color);
+      height: calc(var(--f7-toggle-height) - 4px);
+      width: calc(var(--f7-toggle-height) - 4px);
+      top: 2px;
+      .ltr({ left: 2px; });
+      .rtl({ right: 2px; });
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      border-radius: calc(var(--f7-toggle-height) - 4px);
+    }
+  }
+  .toggle-active-state {
+    input[type='checkbox']:not(:checked) + .toggle-icon {
+      &:before {
+        transform: scale(0);
+      }
+    }
+    input[type='checkbox'] + .toggle-icon {
+      &:after {
+        width: calc(var(--f7-toggle-height) + 4px);
+      }
+    }
+    input[type='checkbox']:checked + .toggle-icon {
+      &:after {
+        .ltr({
+          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
+        });
+        .rtl({
+          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
+        });
+      }
+    }
+  }
+}

package/components/toggle/toggle-md.less

@@ -0,0 +1,44 @@
+.md {
+  .toggle {
+    input[type='checkbox']:checked + .toggle-icon {
+      background: var(--f7-toggle-active-bg-color);
+      border-color: var(--f7-toggle-active-border-color);
+      &:after {
+        .ltr({
+          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);
+        });
+        .rtl({
+          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);
+        });
+        background: var(--f7-toggle-active-knob-bg-color);
+      }
+    }
+    &.active-state input[type='checkbox']:checked + .toggle-icon {
+      &:after {
+        .ltr({
+          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1);
+        });
+        .rtl({
+          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1);
+        });
+      }
+    }
+  }
+  .toggle-icon {
+    background: var(--f7-toggle-inactive-bg-color);
+    border: 2px solid var(--f7-toggle-inactive-border-color);
+    &:after {
+      background: var(--f7-toggle-inactive-knob-bg-color);
+      height: calc(var(--f7-toggle-height) - 8px);
+      width: calc(var(--f7-toggle-height) - 8px);
+      top: 2px;
+      border-radius: var(--f7-toggle-height);
+      transform: scale(0.666);
+      .ltr({ left: 2px; });
+      .rtl({ right: 2px; });
+    }
+    &.active-state:after {
+      transform: scale(1.1);
+    }
+  }
+}

package/components/toggle/toggle-rtl.css

@@ -0,0 +1 @@
+.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle-vars.less

@@ -0,0 +1,30 @@
+.ios-vars({
+  --f7-toggle-width: 52px;
+  --f7-toggle-height: 32px;
+  /*
+  --f7-toggle-active-bg-color: var(--f7-theme-color);
+  */
+  --f7-toggle-inactive-knob-bg-color: #fff;
+  --f7-toggle-active-knob-bg-color: #fff;
+
+  .light-vars({
+    --f7-toggle-inactive-border-color: #e5e5e5;
+    --f7-toggle-inactive-bg-color: #fff;
+  });
+  .dark-vars({
+    --f7-toggle-inactive-border-color: #555;
+    --f7-toggle-inactive-bg-color: #555;
+  });
+});
+.md-vars({
+  --f7-toggle-width: 52px;
+  --f7-toggle-height: 32px;
+});
+.md-color-vars({
+  --f7-toggle-inactive-bg-color: var(--f7-md-surface-variant);
+  --f7-toggle-active-bg-color: var(--f7-theme-color);
+  --f7-toggle-inactive-knob-bg-color: var(--f7-md-outline);
+  --f7-toggle-active-knob-bg-color: var(--f7-md-on-primary);
+  --f7-toggle-inactive-border-color: var(--f7-md-outline);
+  --f7-toggle-active-border-color: var(--f7-theme-color);
+});

package/components/toggle/toggle.css

@@ -0,0 +1 @@
+.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);left:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle.d.ts

@@ -0,0 +1,73 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Toggle {
+  interface Parameters {
+    /** Toggle element. HTMLElement or string with CSS selector of toggle element */
+    el?: HTMLElement | CSSSelector;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Toggle extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Toggle HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with toggle HTML element */
+    $el: Dom7Array;
+    /** Toggle input HTML element */
+    inputEl: HTMLElement;
+    /** Dom7 instance with toggle input HTML element */
+    $inputEl: Dom7Array;
+    /** Boolean property indicating whether it is input is checked or not */
+    checked: boolean;
+    /** Toggle parameters */
+    params: Parameters;
+    /** Toggle input state */
+    toggle(): number;
+    /** Destroy Toggle */
+    destroy(): void;
+  }
+  interface Events {
+    /** Event will be triggered when toggle state has been changed. As an argument event handler receives toggle instance */
+    change: (toggle: Toggle) => void;
+    /** Event will be triggered right before Toggle instance will be destroyed. As an argument event handler receives toggle instance */
+    beforeDestroy: (toggle: Toggle) => void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when Toggle state has been changed */
+    'toggle:change': (event: Event) => void;
+    /** Event will be triggered right before Toggle instance will be destroyed */
+    'toggle:beforedestroy': (event: Event) => void;
+  }
+
+  interface AppMethods {
+    toggle: {
+      /** create Toggle instance */
+      create(parameters: Parameters): Toggle;
+      /** get Toggle instance by HTML element */
+      get(el: HTMLElement | CSSSelector | Toggle): Toggle;
+      /** destroy Toggle instance */
+      destroy(el: HTMLElement | CSSSelector | Toggle): void;
+    };
+  }
+  interface AppParams {
+    toggle?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when toggle state has been changed. As an argument event handler receives toggle instance */
+    toggleChange: (toggle: Toggle) => void;
+    /** Event will be triggered right before Toggle instance will be destroyed. As an argument event handler receives toggle instance */
+    toggleBeforeDestroy: (toggle: Toggle) => void;
+  }
+}
+
+declare const ToggleComponent: Framework7Plugin;
+
+export default ToggleComponent;