@xenknight/framework7 0.0.2

package/components/stepper/stepper.js

@@ -0,0 +1,82 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Stepper from './stepper-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'stepper',
+  create() {
+    const app = this;
+    app.stepper = extend(ConstructorMethods({
+      defaultSelector: '.stepper',
+      constructor: Stepper,
+      app,
+      domProp: 'f7Stepper'
+    }), {
+      getValue(el) {
+        if (el === void 0) {
+          el = '.stepper';
+        }
+        const stepper = app.stepper.get(el);
+        if (stepper) return stepper.getValue();
+        return undefined;
+      },
+      setValue(el, value) {
+        if (el === void 0) {
+          el = '.stepper';
+        }
+        const stepper = app.stepper.get(el);
+        if (stepper) return stepper.setValue(value);
+        return undefined;
+      }
+    });
+  },
+  static: {
+    Stepper
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.stepper-init').each(stepperEl => {
+        const dataset = $(stepperEl).dataset();
+        app.stepper.create(extend({
+          el: stepperEl
+        }, dataset || {}));
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.stepper-init').each(stepperEl => {
+        if (stepperEl.f7Stepper) stepperEl.f7Stepper.destroy();
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.stepper-init').each(stepperEl => {
+        const dataset = $(stepperEl).dataset();
+        app.stepper.create(extend({
+          el: stepperEl
+        }, dataset || {}));
+      });
+    },
+    pageBeforeRemove(page) {
+      page.$el.find('.stepper-init').each(stepperEl => {
+        if (stepperEl.f7Stepper) stepperEl.f7Stepper.destroy();
+      });
+    }
+  },
+  vnode: {
+    'stepper-init': {
+      insert(vnode) {
+        const app = this;
+        const stepperEl = vnode.elm;
+        const dataset = $(stepperEl).dataset();
+        app.stepper.create(extend({
+          el: stepperEl
+        }, dataset || {}));
+      },
+      destroy(vnode) {
+        const stepperEl = vnode.elm;
+        if (stepperEl.f7Stepper) stepperEl.f7Stepper.destroy();
+      }
+    }
+  }
+};

package/components/stepper/stepper.less

@@ -0,0 +1,178 @@
+/* === Stepper === */
+@import './stepper-vars.less';
+
+.stepper {
+  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
+  display: inline-flex;
+  align-items: stretch;
+  height: var(--f7-stepper-height);
+  border-radius: var(--f7-stepper-border-radius);
+  .rtl({
+    flex-direction: row-reverse;
+  });
+}
+
+.stepper-button,
+.stepper-button-minus,
+.stepper-button-plus {
+  background-color: var(--f7-stepper-button-bg-color);
+  width: 40px;
+  border-radius: var(--f7-stepper-border-radius);
+  border: var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);
+  color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
+  line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  &.active-state {
+    background-color: var(
+      --f7-stepper-button-pressed-bg-color,
+      rgba(var(--f7-theme-color-rgb), 0.15)
+    );
+    color: var(
+      --f7-stepper-button-pressed-text-color,
+      var(--f7-stepper-button-text-color, var(--f7-theme-color))
+    );
+  }
+  &:first-child {
+    border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
+  }
+  &:last-child {
+    border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
+  }
+
+  .icon {
+    pointer-events: none;
+  }
+  + .stepper-button,
+  + .stepper-button-minus,
+  + .stepper-button-plus {
+    border-left: none;
+  }
+}
+.stepper-button-plus,
+.stepper-button-minus {
+  user-select: none;
+  &:after,
+  &:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
+    border-radius: 2px;
+  }
+  &:after {
+    width: 15px;
+    height: 2px;
+  }
+}
+.stepper-button-plus {
+  &:before {
+    height: 15px;
+    width: 2px;
+  }
+}
+.stepper-value {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+.stepper-input-wrap,
+.stepper-value {
+  flex-shrink: 1;
+  text-align: center;
+  border-top: var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);
+  border-bottom: var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);
+}
+.stepper .stepper-input-wrap input,
+.stepper-value {
+  width: 45px;
+  color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
+  font-size: var(--f7-stepper-value-font-size);
+  font-weight: var(--f7-stepper-value-font-weight);
+  text-align: center;
+}
+.stepper .stepper-input-wrap input {
+  height: 100%;
+}
+.stepper-round,
+.ios .stepper-round-ios,
+.md .stepper-round-md {
+  --f7-stepper-border-radius: var(--f7-stepper-height);
+}
+.stepper-fill,
+.ios .stepper-fill-ios,
+.md .stepper-fill-md {
+  --f7-stepper-border-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
+  --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
+  --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
+  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
+}
+.stepper-fill,
+.ios .stepper-fill-ios,
+.md .stepper-fill-md,
+.stepper-raised,
+.ios .stepper-raised-ios,
+.md .stepper-raised-md {
+  .stepper-button + .stepper-button,
+  .stepper-button-minus + .stepper-button-plus {
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
+.stepper-fill,
+.ios .stepper-fill-ios,
+.md .stepper-fill-md {
+  .stepper-button + .stepper-button,
+  .stepper-button-minus + .stepper-button-plus {
+    &.active-state {
+      border-left-color: var(--f7-stepper-button-pressed-bg-color);
+    }
+  }
+}
+.stepper-raised:not(.stepper-fill),
+.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill),
+.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) {
+  .stepper-input-wrap,
+  .stepper-value {
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
+.stepper-large,
+.ios .stepper-large-ios,
+.md .stepper-large-md {
+  --f7-stepper-height: var(--f7-stepper-large-height);
+}
+.stepper-small,
+.ios .stepper-small-ios,
+.md .stepper-small-md {
+  --f7-stepper-border-width: var(--f7-stepper-small-border-width);
+  --f7-stepper-height: var(--f7-stepper-small-height);
+}
+.ios .stepper-fill.stepper-small-ios,
+.ios .stepper-fill.stepper-small {
+  --f7-stepper-button-pressed-bg-color: transparent;
+  --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
+}
+.stepper-raised,
+.ios .stepper-raised-ios,
+.md .stepper-raised-md {
+  --f7-stepper-border-width: 0;
+  box-shadow: var(--f7-stepper-raised-box-shadow);
+}
+
+.if-ios-theme({
+  @import './stepper-ios.less';
+});
+.if-md-theme({
+  @import './stepper-md.less';
+});

package/components/subnavbar/subnavbar-ios.less

@@ -0,0 +1,51 @@
+.ios {
+  .subnavbar {
+    height: calc(var(--f7-subnavbar-height) + 1px);
+    margin-top: -1px;
+    padding-top: 1px;
+    .title {
+      align-self: flex-start;
+      flex-shrink: 10;
+    }
+    .ltr({
+      .left, .right {
+        a + a {
+          margin-left: 16px;
+        }
+      }
+      .left {
+        margin-right: 10px;
+      }
+      .right {
+        margin-left: 10px;
+      }
+      .right:first-child {
+        right: 8px;
+      }
+    });
+    .rtl({
+      .left, .right {
+        a + a {
+          margin-right: 16px;
+        }
+      }
+      .left {
+        margin-left: 10px;
+      }
+      .right {
+        margin-right: 10px;
+      }
+      .right:first-child {
+        left: 8px;
+      }
+    });
+
+    a.link {
+      justify-content: flex-start;
+    }
+    a.icon-only {
+      justify-content: center;
+      margin: 0;
+    }
+  }
+}

package/components/subnavbar/subnavbar-md.less

@@ -0,0 +1,47 @@
+.md {
+  .subnavbar {
+    height: var(--f7-subnavbar-height);
+    .ltr ({
+      .right {
+        margin-left: auto;
+      }
+      .right:first-child {
+        right: 16px;
+      }
+    });;
+    .rtl ({
+      .right {
+        margin-right: auto;
+      }
+      .right:first-child {
+        left: 16px;
+      }
+    });;
+    a.link {
+      justify-content: center;
+      padding: 0 12px;
+    }
+    a.icon-only {
+      flex-shrink: 0;
+      padding: 0 12px;
+    }
+  }
+  .subnavbar-inner {
+    .ltr({
+      > a.link:first-child {
+        margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
+      }
+      > a.link:last-child {
+        margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
+      }
+    });
+    .rtl({
+      > a.link:first-child {
+        margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
+      }
+      > a.link:last-child {
+        margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
+      }
+    });
+  }
+}

package/components/subnavbar/subnavbar-vars.less

@@ -0,0 +1,36 @@
+:root {
+  /*
+  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
+  --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-subnavbar-border-color: var(--f7-bars-border-color);
+  --f7-subnavbar-link-color: var(--f7-bars-link-color);
+  --f7-subnavbar-text-color: var(--f7-bars-text-color);
+  */
+  --f7-subnavbar-title-line-height: 1.2;
+}
+.ios-vars({
+  --f7-subnavbar-height: 44px;
+  --f7-subnavbar-inner-padding-left: 8px;
+  --f7-subnavbar-inner-padding-right: 8px;
+  --f7-subnavbar-title-font-size: 34px;
+  --f7-subnavbar-title-font-weight: 700;
+  --f7-subnavbar-title-letter-spacing: -0.03em;
+  --f7-subnavbar-title-margin-left: 8px;
+  /*
+  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
+  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
+  */
+});
+.md-vars({
+  --f7-subnavbar-height: 64px;
+  --f7-subnavbar-inner-padding-left: 16px;
+  --f7-subnavbar-inner-padding-right: 16px;
+  --f7-subnavbar-title-font-size: 22px;
+  --f7-subnavbar-title-font-weight: 400;
+  --f7-subnavbar-title-letter-spacing: 0;
+  --f7-subnavbar-title-margin-left: 0px;
+  /*
+  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
+  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
+  */
+});

package/components/subnavbar/subnavbar.d.ts

@@ -0,0 +1,11 @@
+import { Framework7Plugin } from '../app/app-class.js';
+
+export namespace Subnavbar {
+  interface AppMethods {}
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const SubnavbarComponent: Framework7Plugin;
+
+export default SubnavbarComponent;

package/components/subnavbar/subnavbar.js

@@ -0,0 +1,17 @@
+import $ from '../../shared/dom7.js';
+export default {
+  name: 'subnavbar',
+  on: {
+    pageInit(page) {
+      if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length) {
+        page.$el.addClass('page-with-subnavbar');
+      }
+      const $innerSubnavbars = page.$el.find('.subnavbar').filter(subnavbarEl => {
+        return $(subnavbarEl).parents('.page')[0] === page.$el[0];
+      });
+      if ($innerSubnavbars.length) {
+        page.$el.addClass('page-with-subnavbar');
+      }
+    }
+  }
+};

package/components/subnavbar/subnavbar.less

@@ -0,0 +1,128 @@
+/* === Subnavbar === */
+@import './subnavbar-vars.less';
+.subnavbar {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 600;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
+  .ios-translucent-bars(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+  .subnavbar-title {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellpsis;
+    white-space: nowrap;
+    font-size: var(--f7-subnavbar-title-font-size);
+    font-weight: var(--f7-subnavbar-title-font-weight);
+    text-align: left;
+    display: inline-block;
+    line-height: var(--f7-subnavbar-title-line-height);
+    letter-spacing: var(--f7-subnavbar-title-letter-spacing);
+    .ltr({
+      margin-left: var(--f7-subnavbar-title-margin-left);
+    });
+    .rtl({
+      margin-right: var(--f7-subnavbar-title-margin-left);
+    });
+  }
+  .left,
+  .right {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .right:first-child {
+    position: absolute;
+    height: 100%;
+  }
+  a {
+    color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+  a.link {
+    line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
+    height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
+  }
+  a.icon-only {
+    min-width: var(--f7-subnavbar-height);
+  }
+  &.no-outline {
+    &:after {
+      display: none !important;
+    }
+  }
+  &.navbar-hidden {
+    &:before {
+      display: none !important;
+    }
+  }
+  &:after,
+  &:before {
+    backface-visibility: hidden;
+  }
+  .hairline(bottom, var(--f7-subnavbar-border-color, var(--f7-bars-border-color)));
+}
+.subnavbar-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0
+    calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
+}
+.navbar .subnavbar {
+  top: 100%;
+}
+
+.views,
+.view,
+.page {
+  > .subnavbar {
+    position: absolute;
+  }
+}
+.navbar ~ * .subnavbar,
+.navbars ~ * .subnavbar,
+.page-with-subnavbar .navbar ~ .subnavbar,
+.page-with-subnavbar .navbar ~ * .subnavbar,
+.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
+.navbar ~ .subnavbar,
+.navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
+.navbars ~ .subnavbar {
+  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+}
+
+.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
+.navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
+.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
+.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
+.navbar .title-large ~ .subnavbar {
+  top: calc(
+    var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top)
+  );
+  transform: translate3d(
+    0,
+    calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
+    0
+  );
+}
+.page-with-subnavbar,
+.subnavbar ~ * {
+  --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
+}
+
+.if-ios-theme({
+  @import './subnavbar-ios.less';
+});
+.if-md-theme({
+  @import './subnavbar-md.less';
+});

package/components/swipeout/swipeout-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/swipeout/swipeout-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/swipeout/swipeout-rtl.css

@@ -0,0 +1 @@
+:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-padding-horizontal:30px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit}.md{--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s;transition-property:left}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{color:var(--f7-swipeout-button-text-color);background:var(--f7-swipeout-button-bg-color);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after,.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{left:100%}.swipeout-actions-right>a:last-child,.swipeout-actions-right>button:last-child,.swipeout-actions-right>div:last-child,.swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after{right:100%}.swipeout-actions-left>a:first-child,.swipeout-actions-left>button:first-child,.swipeout-actions-left>div:first-child,.swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}

package/components/swipeout/swipeout-vars.less

@@ -0,0 +1,24 @@
+:root {
+  --f7-swipeout-delete-button-bg-color: #ff3b30;
+  --f7-swipeout-button-text-color: #fff;
+  --f7-swipeout-button-padding-vertical: 0px;
+  .light-vars({
+    --f7-swipeout-button-bg-color: rgba(0,0,0,0.22);
+  });
+  .dark-vars({
+    --f7-swipeout-button-bg-color: rgba(255,255,255,0.55);
+  });
+}
+.ios-vars({
+  --f7-swipeout-button-padding-horizontal: 30px;
+  --f7-swipeout-button-font-size: inherit;
+  --f7-swipeout-button-font-weight: inherit;
+});
+.md-vars({
+  --f7-swipeout-button-padding-horizontal: 24px;
+  --f7-swipeout-button-font-size: 14px;
+  --f7-swipeout-button-font-weight: 500;
+  .dark-vars({
+    --f7-swipeout-button-text-color: #000;
+  });
+});

package/components/swipeout/swipeout.css

@@ -0,0 +1 @@
+:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-padding-horizontal:30px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit}.md{--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s;transition-property:left}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{color:var(--f7-swipeout-button-text-color);background:var(--f7-swipeout-button-bg-color);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after,.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{left:100%}.swipeout-actions-right>a:last-child,.swipeout-actions-right>button:last-child,.swipeout-actions-right>div:last-child,.swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after{right:100%}.swipeout-actions-left>a:first-child,.swipeout-actions-left>button:first-child,.swipeout-actions-left>div:first-child,.swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}

package/components/swipeout/swipeout.d.ts

@@ -0,0 +1,68 @@
+import { CSSSelector, Framework7Plugin } from '../app/app-class.js';
+
+export namespace Swipeout {
+  interface DomEvents {
+    /** Event will be triggered while you move swipeout element. event.detail contains current opening progress percentage */
+    swipeout: (event: any) => void;
+    /** Event will be triggered when swipeout element starts its opening animation */
+    'swipeout:open': (event: any) => void;
+    /** Event will be triggered after swipeout element completes its opening animation */
+    'swipeout:opened': (event: any) => void;
+    /** Event will be triggered when swipeout element starts its closing animation */
+    'swipeout:close': (event: any) => void;
+    /** Event will be triggered after swipeout element completes its closing animation */
+    'swipeout:closed': (event: any) => void;
+    /** Event will be triggered after swipeout element starts its delete animation */
+    'swipeout:delete': (event: any) => void;
+    /** Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM */
+    'swipeout:deleted': (event: any) => void;
+  }
+  interface AppMethods {
+    swipeout: {
+      /** Currently opened swipeout HTMLElement. Or undefined if there is no opened swipeout element */
+      el: HTMLElement | CSSSelector | undefined;
+      /** reveal swipeout actions on specified element */
+      open(el: HTMLElement | CSSSelector, side?: 'left' | 'right', callback?: Function): void;
+      /** close swipeout actions on specified element */
+      close(el: HTMLElement | CSSSelector, callback?: Function): void;
+      /** delete specified swipeout element */
+      delete(el: HTMLElement | CSSSelector, callback?: Function): void;
+    };
+  }
+  interface AppParams {
+    swipeout?:
+      | {
+          /** Fallback option for potentially better performance on old/slow devices. If you enable it, then swipeout item will not follow your finger during touch, it will be automatically opened/closed on swipe left/right. (default false) */
+          noFollow?: boolean;
+          /** When disabled, then framework will not remove swipeout element from DOM on "swipeout-delete" click. Useful to enable if you use another library like Vue or React to manage (remove) swipeout items (default true) */
+          removeElements?: boolean;
+          /** When enabled, then framework will remove swipeout element from DOM on "swipeout-delete" click after specified delay (default false) */
+          removeElementsWithTimeout?: boolean;
+          /** Delay in ms to remove swipeout item if removeElementsWithTimeout is enabled */
+          removeElementsTimeout?: number;
+          /** Defines how much/hard needed to swipe to trigger overswipe (defaults to 1.2) */
+          overswipeRatio?: number;
+        }
+      | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered while you move swipeout element */
+    swipeout: (progress: number) => void;
+    /** Event will be triggered when swipeout element starts its opening animation */
+    swipeoutOpen: (swipeoutEl: HTMLElement) => void;
+    /** Event will be triggered after swipeout element completes its opening animation */
+    swipeoutOpened: (swipeoutEl: HTMLElement) => void;
+    /** Event will be triggered when swipeout element starts its closing animation */
+    swipeoutClose: (swipeoutEl: HTMLElement) => void;
+    /** Event will be triggered after swipeout element completes its closing animation */
+    swipeoutClosed: (swipeoutEl: HTMLElement) => void;
+    /** Event will be triggered after swipeout element starts its delete animation */
+    swipeoutDelete: (swipeoutEl: HTMLElement) => void;
+    /** Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM */
+    swipeoutDeleted: (swipeoutEl: HTMLElement) => void;
+  }
+}
+
+declare const SwipeoutComponent: Framework7Plugin;
+
+export default SwipeoutComponent;