@xenknight/framework7 0.0.2

package/components/popup/popup.d.ts

@@ -0,0 +1,143 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Popup {
+  interface Events {
+    /** Event will be triggered in the beginning of swipe-to-close interaction (when user just started to drag popup) */
+    swipeStart: (popup: Popup) => void;
+    /** Event will be triggered on swipe-to-close move interaction */
+    swipeMove: (popup: Popup) => void;
+    /** Event will be triggered on swipe-to-close release */
+    swipeEnd: (popup: Popup) => void;
+    /** Event will be triggered when popup closed with swipe */
+    swipeClose: (popup: Popup) => void;
+    /** Event will be triggered when Popup starts its opening animation. As an argument event handler receives popup instance */
+    open: (popup: Popup) => void;
+    /** Event will be triggered when Popup completes its opening animation. As an argument event handler receives popup instance */
+    opened: (popup: Popup) => void;
+    /** Event will be triggered when Popup starts its closing animation. As an argument event handler receives popup instance */
+    close: (popup: Popup) => void;
+    /** Event will be triggered after Popup completes its closing animation. As an argument event handler receives popup instance */
+    closed: (popup: Popup) => void;
+    /** Event will be triggered right before Popup instance will be destroyed */
+    beforeDestroy: (popup: Popup) => void;
+  }
+  interface Parameters {
+    /** Popup element. Can be useful if you already have Popup element in your HTML and want to create new instance using this element. */
+    el?: HTMLElement | CSSSelector;
+    /** Full Popup HTML layout string. Can be useful if you want to create Popup element dynamically. */
+    content?: string;
+    /** Enables Popup backdrop (dark semi transparent layer behind). (default true) */
+    backdrop?: boolean;
+    /** Backdrop element to share across instances */
+    backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: boolean;
+    /** When enabled, popup will be closed on backdrop click. (default true) */
+    closeByBackdropClick?: boolean;
+    /** When enabled, popup will be closed on ESC keyboard key press (default false) */
+    closeOnEscape?: boolean;
+    /** Whether the Popup should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default true) */
+    animate?: boolean;
+    /** When enabled it will be possible to close popup with swipe, can be false, true, 'to-bottom', 'to-top' (default false) */
+    swipeToClose?: boolean;
+    /** When enabled it will be possible to close popup with swipe only on specified handler element (default null) */
+    swipeHandler?: HTMLElement | CSSSelector;
+    /** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `popup-push` class to Popup element. (default false) */
+    push?: boolean;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Popup extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Popup HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with popup HTML element */
+    $el: Dom7Array;
+    /** Backdrop HTML element */
+    backdropEl: HTMLElement;
+    /** Dom7 instance with backdrop HTML element */
+    $backdropEl: Dom7Array;
+    /** Popup parameters */
+    params: Parameters;
+    /** Boolean prop indicating whether popup is opened or not */
+    opened: boolean;
+
+    /** Open popup. */
+    open(animate?: boolean): Popup;
+    /** Close popup. */
+    close(animate?: boolean): Popup;
+    /** Destroy popup */
+    destroy(): void;
+  }
+  interface DomEvents {
+    /** Event will be triggered in the beginning of swipe-to-close interaction (when user just started to drag popup) */
+    'popup:swipestart': () => void;
+    /** Event will be triggered on swipe-to-close move interaction */
+    'popup:swipemove': () => void;
+    /** Event will be triggered on swipe-to-close release */
+    'popup:swipeend': () => void;
+    /** Event will be triggered when popup closed with swipe */
+    'popup:swipeclose': () => void;
+    /** Event will be triggered when Popup starts its opening animation */
+    'popup:open': () => void;
+    /** Event will be triggered after Popup completes its opening animation */
+    'popup:opened': () => void;
+    /** Event will be triggered when Popup starts its closing animation */
+    'popup:close': () => void;
+    /** Event will be triggered after Popup completes its closing animation */
+    'popup:closed': () => void;
+  }
+
+  interface AppMethods {
+    popup: {
+      /** create Popup instance */
+      create(parameters: Parameters): Popup;
+      /** destroy Popup instance */
+      destroy(el: HTMLElement | CSSSelector | Popup): void;
+      /** get Popup instance by HTML element */
+      get(el?: HTMLElement | CSSSelector): Popup;
+      /** open Popup */
+      open(el?: HTMLElement | CSSSelector, animate?: boolean): Popup;
+      /** closes Popup */
+      close(el?: HTMLElement | CSSSelector, animate?: boolean): Popup;
+    };
+  }
+  interface AppParams {
+    popup?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered in the beginning of swipe-to-close interaction (when user just started to drag popup) */
+    popupSwipeStart: (popup: Popup) => void;
+    /** Event will be triggered on swipe-to-close move interaction */
+    popupSwipeMove: (popup: Popup) => void;
+    /** Event will be triggered on swipe-to-close release */
+    popupSwipeEnd: (popup: Popup) => void;
+    /** Event will be triggered when popup closed with swipe */
+    popupSwipeClose: (popup: Popup) => void;
+    /** Event will be triggered when Popup starts its opening animation. As an argument event handler receives popup instance */
+    popupOpen: (popup: Popup) => void;
+    /** Event will be triggered when Popup completes its opening animation. As an argument event handler receives popup instance */
+    popupOpened: (popup: Popup) => void;
+    /** Event will be triggered when Popup starts its closing animation. As an argument event handler receives popup instance */
+    popupClose: (popup: Popup) => void;
+    /** Event will be triggered after Popup completes its closing animation. As an argument event handler receives popup instance */
+    popupClosed: (popup: Popup) => void;
+    /** Event will be triggered right before Popup instance will be destroyed */
+    popupBeforeDestroy: (popup: Popup) => void;
+  }
+}
+
+declare const PopupComponent: Framework7Plugin;
+
+export default PopupComponent;

package/components/popup/popup.js

@@ -0,0 +1,46 @@
+import Popup from './popup-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'popup',
+  params: {
+    popup: {
+      backdrop: true,
+      backdropEl: undefined,
+      backdropUnique: false,
+      closeByBackdropClick: true,
+      closeOnEscape: false,
+      swipeToClose: false,
+      swipeHandler: null,
+      push: false,
+      containerEl: null
+    }
+  },
+  static: {
+    Popup
+  },
+  create() {
+    const app = this;
+    app.popup = ModalMethods({
+      app,
+      constructor: Popup,
+      defaultSelector: '.popup.modal-in',
+      parentSelector: '.popup'
+    });
+  },
+  clicks: {
+    '.popup-open': function openPopup($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.popup.open(data.popup, data.animate, $clickedEl);
+    },
+    '.popup-close': function closePopup($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.popup.close(data.popup, data.animate, $clickedEl);
+    }
+  }
+};

package/components/popup/popup.less

@@ -0,0 +1,204 @@
+/* === Popup === */
+@import './popup-vars.less';
+
+.popup-backdrop {
+  z-index: 10500;
+  &-unique {
+    z-index: 11000;
+  }
+}
+.popup {
+  position: absolute;
+  left: 0;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  display: none;
+  box-sizing: border-box;
+  transition-property: transform;
+  transition-timing-function: var(--f7-popup-transition-timing-function);
+  transform: translate3d(0, 100vh, 0);
+  background: #fff;
+  z-index: 11000;
+  overflow: hidden;
+  border-radius: var(--f7-popup-border-radius);
+  .dark &,
+  &.dark {
+    background: #000;
+  }
+  &.modal-in,
+  &.modal-out {
+    transition-duration: var(--f7-popup-transition-duration);
+  }
+  &.not-animated {
+    transition-duration: 0ms;
+  }
+  &.modal-in {
+    display: block;
+    transform: translate3d(0, 0, 0);
+  }
+  &.modal-out {
+    transform: translate3d(0, 100vh, 0);
+  }
+}
+.popup.swipe-close-to-top {
+  &.modal-out {
+    transform: translate3d(0, -100vh, 0);
+  }
+}
+html.with-modal-popup {
+  .framework7-root {
+    > .views,
+    > .view,
+    > .panel {
+      .page-content {
+        .not-scrollable();
+      }
+    }
+  }
+}
+
+html.with-modal-popup-push,
+html.with-modal-popup-push-closing {
+  .popup-push {
+    top: calc(var(--f7-popup-push-offset) + 10px);
+    height: calc(100% - var(--f7-popup-push-offset) - 10px);
+    border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
+    --f7-safe-area-top: 0px;
+    .view,
+    .page {
+      --f7-safe-area-top: 0px;
+    }
+  }
+  .framework7-root {
+    background: #000;
+    > .views,
+    > .view {
+      transition-duration: var(--f7-popup-transition-duration);
+      transition-timing-function: var(--f7-popup-transition-timing-function);
+    }
+  }
+
+  .if-dark-theme({
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
+      &:after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255,255,255,0.1);
+        z-index: 13000;
+        border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
+        opacity: 1;
+        animation: popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards;
+      }
+    }
+  });
+}
+
+html.with-modal-popup-push {
+  .framework7-root {
+    > .views,
+    > .view {
+      border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
+      transform: translate3d(0, 0, 0px) scale(var(--f7-popup-push-scale, 1)) !important;
+    }
+  }
+
+  .popup:after {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 13000;
+    transition-duration: var(--f7-popup-transition-duration);
+    transition-timing-function: var(--f7-popup-transition-timing-function);
+    border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
+    opacity: 0;
+  }
+  .if-dark-theme({
+    &.dark .popup:after,
+    .dark .popup:after,
+    .dark.popup:after {
+      background: rgba(255,255,255,0.05);
+    }
+  });
+
+  .popup-behind {
+    transform: translate3d(0, 0px, 0px) scale(var(--f7-popup-push-scale, 1));
+    &.modal-out {
+      transform: translate3d(0, 100vh, 0) scale(var(--f7-popup-push-scale, 1));
+    }
+    &:not(.popup-push) {
+      border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
+    }
+    &.popup-push {
+      transform: translate3d(0, calc(0px - var(--f7-popup-push-offset) - 10px), 0px)
+        scale(var(--f7-popup-push-scale, 1));
+      &.modal-out {
+        transform: translate3d(0, calc(0px - var(--f7-popup-push-offset) - 10px + 100vh), 0px)
+          scale(var(--f7-popup-push-scale, 1));
+      }
+    }
+    &:after {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.if-dark-theme({
+  html.with-modal-popup-push-closing {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
+      &:after {
+        animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
+        animation-timing-function: var(--f7-popup-transition-timing-function);
+      }
+    }
+  }
+
+  @keyframes popup-dark-push-overlay-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes popup-dark-push-overlay-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+});
+
+.if-ios-theme({
+  @import './popup-ios.less';
+});
+.if-md-theme({
+  @import './popup-md.less';
+});

package/components/preloader/preloader-ios.less

@@ -0,0 +1,57 @@
+.ios {
+  .preloader {
+    color: var(--f7-preloader-color);
+  }
+  .preloader-inner {
+    animation: ios-preloader-spin 1s steps(8, end) infinite;
+  }
+  .preloader-inner-line {
+    display: block;
+    width: 11.6%;
+    height: 33.33%;
+    border-radius: 100px;
+    background: currentColor;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform-origin: center 150%;
+  }
+  .preloader-multi-color .preloader-inner-line,
+  .preloader.color-multi .preloader-inner-line {
+    animation: ios-preloader-multicolor 3s linear infinite;
+  }
+  @indexes: 0, 1, 2, 3, 4, 5, 6, 7;
+
+  each(@indexes, {
+    @index_plus_one: @value + 1;
+    @degrees: (360deg / 8) * @value;
+    @opacity: (0.27 + (0.85 - 0.27) * @value / 7);
+    .preloader-inner-line:nth-child(@{index_plus_one}) {
+      transform: translate(-50%, -150%) rotate(@degrees);
+      opacity: @opacity;
+    }
+  });
+}
+@keyframes ios-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ios-preloader-multicolor {
+  0%,
+  100% {
+    background-color: #2196f3;
+  }
+  25% {
+    background-color: #ff3b30;
+  }
+  50% {
+    background-color: #4cd964;
+  }
+  75% {
+    background-color: #ff9500;
+  }
+}

package/components/preloader/preloader-md.less

@@ -0,0 +1,114 @@
+.md {
+  .preloader {
+    color: var(--f7-preloader-color);
+  }
+  .preloader-inner {
+    @speed: 1.4s;
+    animation: md-preloader-rotate @speed linear infinite;
+    circle {
+      fill: none;
+      stroke: currentColor;
+      animation: md-preloader-circle-rotate @speed * 4 ease-in-out infinite;
+      stroke-dasharray: 100px;
+      stroke-dashoffset: 80px;
+      stroke-width: 4;
+      transform: rotate(-90deg);
+      transform-origin: 18px 18px;
+    }
+  }
+
+  .preloader-multi-color,
+  .preloader.color-multi {
+    @speed: 1.4s;
+    circle {
+      animation:
+        md-preloader-circle-rotate @speed * 4 ease-in-out infinite,
+        md-preloader-multicolor @speed * 4 ease-in-out infinite;
+    }
+  }
+
+  @keyframes md-preloader-multicolor {
+    0%,
+    100% {
+      stroke: #4285f4;
+    }
+    75% {
+      stroke: #1b9a59;
+    }
+    50% {
+      stroke: #f7c223;
+    }
+    25% {
+      stroke: #de3e35;
+    }
+  }
+}
+@keyframes md-preloader-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes md-preloader-circle-rotate {
+  0% {
+    transform: rotate(-90deg);
+    stroke-dashoffset: 100px;
+  }
+
+  12.5% {
+    transform: rotate(-90deg);
+    stroke-dashoffset: 25px;
+  }
+
+  25% {
+    stroke-dashoffset: 100px;
+    transform: rotate(180deg);
+  }
+
+  25.1% {
+    transform: rotate(-180deg);
+    stroke-dashoffset: 100px;
+  }
+
+  37.5% {
+    transform: rotate(-180deg);
+    stroke-dashoffset: 25px;
+  }
+
+  50% {
+    stroke-dashoffset: 100px;
+    transform: rotate(90deg);
+  }
+
+  50.1% {
+    transform: rotate(90deg);
+    stroke-dashoffset: 100px;
+  }
+
+  62.5% {
+    transform: rotate(90deg);
+    stroke-dashoffset: 25px;
+  }
+
+  75% {
+    stroke-dashoffset: 100px;
+    transform: rotate(360deg);
+  }
+
+  75.1% {
+    transform: rotate(0deg);
+    stroke-dashoffset: 100px;
+  }
+
+  87.5% {
+    transform: rotate(0deg);
+    stroke-dashoffset: 25px;
+  }
+
+  100% {
+    stroke-dashoffset: 100px;
+    transform: rotate(270deg);
+  }
+}

package/components/preloader/preloader-rtl.css

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

package/components/preloader/preloader-vars.less

@@ -0,0 +1,16 @@
+:root {
+  --f7-preloader-modal-padding: 8px;
+  --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
+}
+.ios-vars({
+  --f7-preloader-color: #6c6c6c;
+  --f7-preloader-size: 20px;
+  --f7-preloader-modal-preloader-size: 34px;
+  --f7-preloader-modal-border-radius: 5px;
+});
+.md-vars({
+  --f7-preloader-color: #757575;
+  --f7-preloader-size: 32px;
+  --f7-preloader-modal-preloader-size: 32px;
+  --f7-preloader-modal-border-radius: 4px;
+});

package/components/preloader/preloader.css

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

package/components/preloader/preloader.d.ts

@@ -0,0 +1,26 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Preloader {
+  interface AppMethods {
+    preloader: {
+      /** Show Preloader overlay */
+      show(color?: string | 'white'): void;
+      /** Show Preloader overlay in specified element */
+      showIn(el: HTMLElement | CSSSelector, color?: string): void;
+      /** Hide Preloader overlay */
+      hide(): void;
+      /** Hide Preloader overlay in specified element */
+      hideIn(el: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const PreloaderComponent: Framework7Plugin;
+
+export default PreloaderComponent;