@xenknight/framework7 0.0.2

package/components/sheet/sheet-rtl.css

@@ -0,0 +1 @@
+:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;opacity:1;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{opacity:0;animation:none}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}

package/components/sheet/sheet-vars.less

@@ -0,0 +1,27 @@
+:root {
+  --f7-sheet-height: 260px;
+  --f7-sheet-push-offset: var(--f7-safe-area-top);
+}
+.ios-vars({
+  --f7-sheet-border-radius: 0px;
+  --f7-sheet-border-color: var(--f7-bars-border-color);
+  --f7-sheet-transition-timing-function: initial;
+  --f7-sheet-push-border-radius: 10px;
+  --f7-sheet-transition-duration: 300ms;
+  .light-vars({
+    --f7-sheet-bg-color: #fff;
+  });
+  .dark-vars({
+    --f7-sheet-bg-color: #202020;
+  });
+});
+.md-vars({
+  --f7-sheet-border-radius: 16px;
+  --f7-sheet-push-border-radius: 16px;
+  --f7-sheet-border-color: transparent;
+  --f7-sheet-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-sheet-transition-duration: 400ms;
+});
+.md-color-vars({
+  --f7-sheet-bg-color: var(--f7-md-surface);
+});

package/components/sheet/sheet.css

@@ -0,0 +1 @@
+:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;opacity:1;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{opacity:0;animation:none}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}

package/components/sheet/sheet.d.ts

@@ -0,0 +1,170 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Sheet {
+  interface Events {
+    /** Event will be triggered on Sheet swipe step open/expand */
+    stepOpen: (sheet: Sheet) => void;
+    /** Event will be triggered on Sheet swipe step close/collapse */
+    stepClose: (sheet: Sheet) => void;
+    /** Event will be triggered on Sheet swipe step between step opened and closed state. As `progress` it receives step open progress number (from 0 to 1) */
+    stepProgress: (sheet: Sheet, progress: number) => void;
+    /** Event will be triggered on Sheet breakpoint change */
+    breakpoint: (sheet: Sheet, breakpoint: number) => void;
+    /** Event will be triggered when Sheet Modal starts its opening animation. As an argument event handler receives sheet instance */
+    open: (sheet: Sheet) => void;
+    /** Event will be triggered when Sheet Modal completes its opening animation. As an argument event handler receives sheet instance */
+    opened: (sheet: Sheet) => void;
+    /** Event will be triggered when Sheet Modal starts its closing animation. As an argument event handler receives sheet instance */
+    close: (sheet: Sheet) => void;
+    /** Event will be triggered after Sheet Modal completes its closing animation. As an argument event handler receives sheet instance */
+    closed: (sheet: Sheet) => void;
+    /** Event will be triggered right before Sheet Modal instance will be destroyed */
+    beforeDestroy: (sheet: Sheet) => void;
+  }
+  interface Parameters {
+    /** Sheet Modal element. Can be useful if you already have Sheet Modal element in your HTML and want to create new instance using this element. */
+    el?: HTMLElement | CSSSelector;
+    /** Full Sheet Modal HTML layout string. Can be useful if you want to create Sheet Modal element dynamically. */
+    content?: string;
+    /** Enables Sheet Modal 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;
+    /** HTML element or string (with CSS selector) of element. If specified, then sheet will try to scroll page content to this element on open */
+    scrollToEl?: HTMLElement | CSSSelector;
+    /** When enabled, Sheet Modal will be closed on backdrop click. (default true) */
+    closeByBackdropClick?: boolean;
+    /** When enabled, sheet will be closed on when click outside of it */
+    closeByOutsideClick?: boolean;
+    /** When enabled, sheet will be closed on ESC keyboard key press (default false) */
+    closeOnEscape?: boolean;
+    /** Whether the Sheet Modal 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 sheet with swipe, can be false or true (default false) */
+    swipeToClose?: boolean;
+    /** When enabled it will be possible to split opened sheet into two states: partially opened and fully opened that can be controlled with swipe (default false) */
+    swipeToStep?: boolean;
+    /** Use instead of swipeToStep to enable swipe breakpoints. Must be an array of numbers > 0 and < 1, where 0 is fully closed and 1 is fully opened, e.g. [0.33, 0.66], [0.5], etc. */
+    breakpoints?: number[];
+    /** Defines breakpoint when backdrop becomes visible. Number from `0` (ideally from the lowest (first) value of `breakpoints` array) to `1`  (default 0) */
+    backdropBreakpoint?: number;
+    /** Defines breakpoint when to push back the view behind (`push` must be enabled). Number from `0` (ideally from the lowest (first) value of `breakpoints` array) to `1` (default 0)  */
+    pushBreakpoint?: number;
+    /** When enabled it will be possible to close sheet 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 `sheet-modal-push` class to Sheet 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 Sheet extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Sheet Modal HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with Sheet Modal HTML element */
+    $el: Dom7Array;
+    /** Backdrop HTML element */
+    backdropEl: HTMLElement;
+    /** Dom7 instance with backdrop HTML element */
+    $backdropEl: Dom7Array;
+    /** sheet parameters */
+    params: Parameters;
+    /** Boolean prop indicating whether sheet is opened or not */
+    opened: boolean;
+
+    /** Open sheet. */
+    open(animate?: boolean): Sheet;
+    /** Close sheet. */
+    close(animate?: boolean): Sheet;
+    /** Open/expand sheet swipe step */
+    stepOpen(): void;
+    /** Close/collapse sheet swipe step */
+    stepClose(): void;
+    /** Toggle (open or close) sheet swipe step */
+    stepToggle(): void;
+    /** Update (recalculate) breakpoints positions. Required to call after content of sheet modal has been modified manually when it is opened */
+    setSwipeStep(): void;
+    /** Set/open sheet modal on specific breakpoint (from `breakpoints` array parameter). Also passing `0` will close sheet modal, passing `1` will fully open it */
+    setBreakpoint(breakpoint: number): Sheet;
+    /** Destroy sheet */
+    destroy(): void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when Sheet Modal starts its opening animation */
+    'sheet:open': () => void;
+    /** Event will be triggered after Sheet Modal completes its opening animation */
+    'sheet:opened': () => void;
+    /** Event will be triggered when Sheet Modal starts its closing animation */
+    'sheet:close': () => void;
+    /** Event will be triggered after Sheet Modal completes its closing animation */
+    'sheet:closed': () => void;
+    /** Event will be triggered on Sheet swipe step open/expand */
+    'sheet:stepopen': () => void;
+    /** Event will be triggered on Sheet swipe step close/collapse */
+    'sheet:stepclose': () => void;
+    /** Event will be triggered on Sheet swipe step between step opened and closed state. As `event.detail` it receives step open progress number (from 0 to 1) */
+    'sheet:stepprogress': () => void;
+  }
+
+  interface AppMethods {
+    sheet: {
+      /** create Sheet Modal instance */
+      create(parameters: Parameters): Sheet;
+      /** destroy Sheet Modal instance */
+      destroy(el: HTMLElement | CSSSelector | Sheet): void;
+      /** get Sheet Modal instance by HTML element */
+      get(el?: HTMLElement | CSSSelector): Sheet;
+      /** open Sheet Modal */
+      open(el?: HTMLElement | CSSSelector, animate?: boolean): Sheet;
+      /** closes Sheet Modal */
+      close(el?: HTMLElement | CSSSelector, animate?: boolean): Sheet;
+      /** open/expand Sheet swipe step */
+      stepOpen(el?: HTMLElement | CSSSelector): Sheet;
+      /** close/collapse Sheet swipe step */
+      stepClose(el?: HTMLElement | CSSSelector): Sheet;
+      /** toggle (open or close) Sheet swipe step */
+      stepToggle(el?: HTMLElement | CSSSelector): Sheet;
+      /** Set/open sheet modal on specific breakpoint (from `breakpoints` array parameter). Also passing `0` will close sheet modal, passing `1` will fully open it */
+      setBreakpoint(el?: HTMLElement | CSSSelector, breakpoint: number): Sheet;
+    };
+  }
+  interface AppParams {
+    sheet?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered on Sheet swipe step open/expand */
+    sheetStepOpen: (sheet: Sheet) => void;
+    /** Event will be triggered on Sheet swipe step close/collapse */
+    sheetStepClose: (sheet: Sheet) => void;
+    /** Event will be triggered on Sheet swipe step between step opened and closed state. As `progress` it receives step open progress number (from 0 to 1) */
+    sheetStepProgress: (sheet: Sheet, progress: number) => void;
+    /** Event will be triggered on Sheet breakpoint change */
+    sheetBreakpoint: (sheet: Sheet, breakpoint: number) => void;
+    /** Event will be triggered when Sheet Modal starts its opening animation. As an argument event handler receives sheet instance */
+    sheetOpen: (sheet: Sheet) => void;
+    /** Event will be triggered when Sheet Modal completes its opening animation. As an argument event handler receives sheet instance */
+    sheetOpened: (sheet: Sheet) => void;
+    /** Event will be triggered when Sheet Modal starts its closing animation. As an argument event handler receives sheet instance */
+    sheetClose: (sheet: Sheet) => void;
+    /** Event will be triggered after Sheet Modal completes its closing animation. As an argument event handler receives sheet instance */
+    sheetClosed: (sheet: Sheet) => void;
+    /** Event will be triggered right before Sheet Modal instance will be destroyed */
+    sheetBeforeDestroy: (sheet: Sheet) => void;
+  }
+}
+declare const SheetComponent: Framework7Plugin;
+export default SheetComponent;

package/components/sheet/sheet.js

@@ -0,0 +1,76 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Sheet from './sheet-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'sheet',
+  params: {
+    sheet: {
+      push: false,
+      backdrop: undefined,
+      backdropEl: undefined,
+      backdropUnique: false,
+      closeByBackdropClick: true,
+      closeByOutsideClick: false,
+      closeOnEscape: false,
+      swipeToClose: false,
+      swipeToStep: false,
+      breakpoints: [],
+      backdropBreakpoint: 0,
+      pushBreakpoint: 0,
+      swipeHandler: null,
+      containerEl: null
+    }
+  },
+  static: {
+    Sheet
+  },
+  create() {
+    const app = this;
+    app.sheet = extend({}, ModalMethods({
+      app,
+      constructor: Sheet,
+      defaultSelector: '.sheet-modal.modal-in'
+    }), {
+      stepOpen(sheet) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.stepOpen) return sheetInstance.stepOpen();
+        return undefined;
+      },
+      stepClose(sheet) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.stepClose) return sheetInstance.stepClose();
+        return undefined;
+      },
+      stepToggle(sheet) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.stepToggle) return sheetInstance.stepToggle();
+        return undefined;
+      },
+      setBreakpoint(sheet, breakpoint) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.setBreakpoint) return sheetInstance.setBreakpoint(breakpoint);
+        return undefined;
+      }
+    });
+  },
+  clicks: {
+    '.sheet-open': function openSheet($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      if ($('.sheet-modal.modal-in').length > 0 && data.sheet && $(data.sheet)[0] !== $('.sheet-modal.modal-in')[0]) {
+        app.sheet.close('.sheet-modal.modal-in');
+      }
+      app.sheet.open(data.sheet, data.animate, $clickedEl);
+    },
+    '.sheet-close': function closeSheet($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.sheet.close(data.sheet, data.animate, $clickedEl);
+    }
+  }
+};

package/components/sheet/sheet.less

@@ -0,0 +1,196 @@
+/* === Sheet Modal === */
+@import './sheet-vars.less';
+.sheet-backdrop {
+  z-index: 11000;
+  &-unique {
+    z-index: 12500;
+  }
+}
+.sheet-modal {
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: var(--f7-sheet-height);
+  display: none;
+  box-sizing: border-box;
+  transition-property: transform;
+  transform: translate3d(0, 100%, 0);
+  background: var(--f7-sheet-bg-color);
+  z-index: 12500;
+  will-change: transform, opacity;
+  &.modal-in,
+  &.modal-out {
+    transition-duration: var(--f7-sheet-transition-duration);
+  }
+  &.not-animated {
+    transition-duration: 0ms;
+  }
+  &.modal-in {
+    display: block;
+    transform: translate3d(0, 0, 0);
+  }
+  &.modal-in-swipe-step,
+  &.modal-in-breakpoint {
+    display: block;
+    transform: translate3d(0, var(--f7-sheet-breakpoint, var(--f7-sheet-swipe-step, 0)), 0);
+  }
+  &.modal-out {
+    transform: translate3d(0, 100%, 0);
+  }
+  .sheet-modal-inner {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  .toolbar {
+    --f7-safe-area-bottom: 0px;
+    position: relative;
+    width: 100%;
+    &:after,
+    &:before {
+      display: none;
+    }
+    + .sheet-modal-inner {
+      height: calc(100% - var(--f7-toolbar-height));
+      .page-content {
+        --f7-page-toolbar-top-offset: 0px;
+        --f7-page-toolbar-bottom-offset: 0px;
+      }
+    }
+  }
+}
+.sheet-backdrop,
+.sheet-modal {
+  transition-timing-function: var(--f7-sheet-transition-timing-function);
+}
+.sheet-modal-top {
+  border-radius: 0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius);
+  .hairline(bottom, var(--f7-sheet-border-color));
+  &:after {
+    z-index: 700;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+  }
+}
+.sheet-modal-bottom,
+.sheet-modal:not(.sheet-modal-top) {
+  --f7-safe-area-top: 0px;
+  border-radius: var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0;
+  .hairline(top, var(--f7-sheet-border-color));
+  &:before {
+    z-index: 700;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+  }
+}
+.sheet-modal-top {
+  --f7-safe-area-bottom: 0px;
+  bottom: auto;
+  top: 0;
+  transform: translate3d(0, -100%, 0);
+  &.modal-out {
+    transform: translate3d(0, -100%, 0);
+  }
+  .toolbar-bottom {
+    position: absolute;
+  }
+  .page-content {
+    padding-top: var(--f7-safe-area-top);
+  }
+}
+
+html.with-modal-sheet-push,
+html.with-modal-sheet-push-closing {
+  .sheet-modal-push {
+    --f7-sheet-border-color: transparent;
+    border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
+    overflow: hidden;
+    .view,
+    .page {
+      --f7-safe-area-top: 0px;
+    }
+    &.sheet-modal-top {
+      border-radius: 0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius);
+    }
+  }
+  .framework7-root {
+    background: #000;
+    > .views,
+    > .view {
+      transition-duration: var(--f7-sheet-transition-duration);
+      transition-timing-function: var(--f7-sheet-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;
+        opacity: 1;
+        transition-duration: var(--f7-sheet-transition-duration);
+        transition-timing-function: var(--f7-sheet-transition-timing-function);
+        animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);
+        animation-timing-function: var(--f7-sheet-transition-timing-function);
+      }
+    }
+  });
+}
+html.with-modal-sheet-push {
+  .framework7-root {
+    > .views,
+    > .view {
+      border-radius: var(--f7-sheet-push-border-radius);
+      transform: translate3d(0, 0, 0px) scale(var(--f7-sheet-push-scale, 1)) !important;
+    }
+  }
+}
+
+.if-dark-theme({
+  html.with-modal-sheet-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 {
+        opacity: 0;
+        animation: none;
+      }
+    }
+  }
+
+  @keyframes sheet-dark-push-overlay-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+});
+
+.if-ios-theme({
+  @import './sheet-ios.less';
+});
+.if-md-theme({
+  @import './sheet-md.less';
+});

package/components/skeleton/skeleton-ios.less

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

package/components/skeleton/skeleton-md.less

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

package/components/skeleton/skeleton-rtl.css

@@ -0,0 +1 @@
+:root{--skeleton-color:#ccc;--skeleton-icon-color:rgba(0, 0, 0, 0.25)}.skeleton-block{height:1em;background:var(--skeleton-color)!important;width:100%;display:block}@font-face{font-family:skeleton;src:url("data:application/font-woff;charset=utf-8;base64,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") format("woff");font-weight:100,200,300,400,500,600,700,800,900;font-style:normal,italic;font-display:block}.skeleton-text{font-family:skeleton!important;-webkit-user-select:none;user-select:none}.skeleton-text,.skeleton-text *{color:var(--skeleton-color)!important;letter-spacing:-.03em!important}.skeleton-image{display:inline-block}.skeleton-image svg{max-width:100%;height:auto}.skeleton-image polygon{fill:var(--skeleton-color)}.skeleton-image path{fill:var(--skeleton-icon-color)}.skeleton-avatar{display:inline-block}.skeleton-avatar svg{max-width:100%;height:auto}.skeleton-avatar rect{fill:var(--skeleton-color)}.skeleton-avatar path{fill:var(--skeleton-icon-color)}.skeleton-effect-blink,.skeleton-effect-wave{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 25%,black 75%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 25%,black 75%,transparent 100%);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:50% top;mask-position:50% top;animation:skeleton-effect-wave 1s infinite}.skeleton-effect-fade{animation:skeleton-effect-fade 1s infinite}.skeleton-effect-pulse{animation:skeleton-effect-pulse 1s infinite}@keyframes skeleton-effect-fade{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}@keyframes skeleton-effect-wave{0%{-webkit-mask-position:50% top;mask-position:50% top}100%{-webkit-mask-position:-150% top;mask-position:-150% top}}@keyframes skeleton-effect-pulse{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scale(.975)}100%{transform:scale(1)}}:root{--skeleton-color:#ccc;--skeleton-icon-color:rgba(0, 0, 0, 0.25)}.dark{--skeleton-color:#515151;--skeleton-icon-color:rgba(255, 255, 255, 0.25)}

package/components/skeleton/skeleton-vars.less

@@ -0,0 +1,8 @@
+:root {
+  --skeleton-color: #ccc;
+  --skeleton-icon-color: rgba(0, 0, 0, 0.25);
+}
+.dark {
+  --skeleton-color: #515151;
+  --skeleton-icon-color: rgba(255, 255, 255, 0.25);
+}

package/components/skeleton/skeleton.css

@@ -0,0 +1 @@
+:root{--skeleton-color:#ccc;--skeleton-icon-color:rgba(0, 0, 0, 0.25)}.skeleton-block{height:1em;background:var(--skeleton-color)!important;width:100%;display:block}@font-face{font-family:skeleton;src:url("data:application/font-woff;charset=utf-8;base64,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") format("woff");font-weight:100,200,300,400,500,600,700,800,900;font-style:normal,italic;font-display:block}.skeleton-text{font-family:skeleton!important;-webkit-user-select:none;user-select:none}.skeleton-text,.skeleton-text *{color:var(--skeleton-color)!important;letter-spacing:-.03em!important}.skeleton-image{display:inline-block}.skeleton-image svg{max-width:100%;height:auto}.skeleton-image polygon{fill:var(--skeleton-color)}.skeleton-image path{fill:var(--skeleton-icon-color)}.skeleton-avatar{display:inline-block}.skeleton-avatar svg{max-width:100%;height:auto}.skeleton-avatar rect{fill:var(--skeleton-color)}.skeleton-avatar path{fill:var(--skeleton-icon-color)}.skeleton-effect-blink,.skeleton-effect-wave{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 25%,black 75%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 25%,black 75%,transparent 100%);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:50% top;mask-position:50% top;animation:skeleton-effect-wave 1s infinite}.skeleton-effect-fade{animation:skeleton-effect-fade 1s infinite}.skeleton-effect-pulse{animation:skeleton-effect-pulse 1s infinite}@keyframes skeleton-effect-fade{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}@keyframes skeleton-effect-wave{0%{-webkit-mask-position:50% top;mask-position:50% top}100%{-webkit-mask-position:-150% top;mask-position:-150% top}}@keyframes skeleton-effect-pulse{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scale(.975)}100%{transform:scale(1)}}:root{--skeleton-color:#ccc;--skeleton-icon-color:rgba(0, 0, 0, 0.25)}.dark{--skeleton-color:#515151;--skeleton-icon-color:rgba(255, 255, 255, 0.25)}

package/components/skeleton/skeleton.d.ts

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

package/components/skeleton/skeleton.js

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

package/components/skeleton/skeleton.less

@@ -0,0 +1,11 @@
+/* === Skeleton === */
+@import (inline) 'skeleton-elements/css/skeleton-elements.css';
+
+@import './skeleton-vars.less';
+
+.if-ios-theme({
+  @import './skeleton-ios.less';
+});
+.if-md-theme({
+  @import './skeleton-md.less';
+});