@xenknight/framework7 0.0.2

package/components/gauge/gauge.d.ts

@@ -0,0 +1,100 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Gauge {
+  interface Gauge extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Gauge HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with gauge HTML element */
+    $el: Dom7Array;
+    /** Gauge generated SVH HTML element */
+    svgEl: HTMLElement;
+    /** Dom7 instance with generated SVG HTML element */
+    $svgEl: Dom7Array;
+    /** Gauge parameters */
+    params: Parameters;
+
+    /** Update/rerender gauge SVG element according to passed parameters. It accepts object with same parameters required for gauge initialization. You can pass only parameters that needs to be updated */
+    update(parameters: Omit<Parameters, 'el'>): Gauge;
+    /** Destroys gauge instance */
+    destroy(): void;
+  }
+
+  interface Parameters {
+    /** Gauge element. HTMLElement or string with CSS selector of gauge element. Generated SVG will be inserted into this element. */
+    el: HTMLElement | CSSSelector;
+    /** Gauge type. Can be circle or semicircle. (default circle) */
+    type?: string;
+    /** Gauge value/percentage. Must be a number between 0 and 1. (default 0) */
+    value?: number;
+    /** Generated SVG image size (in px). (default 200) */
+    size?: number;
+    /** Gauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.. (default transparent) */
+    bgColor?: string;
+    /** Main border/stroke background color. (default #eeeeee) */
+    borderBgColor?: string;
+    /** Main border/stroke color. (default #000000) */
+    borderColor?: string;
+    /** Main border/stroke width. (default 10) */
+    borderWidth?: string;
+    /** Gauge value text (large text in the center of gauge). (default null) */
+    valueText?: string;
+    /** Value text color. (default #000000) */
+    valueTextColor?: string;
+    /** Value text font size. (default 31) */
+    valueFontSize?: string;
+    /** Value text font weight. (default 500) */
+    valueFontWeight?: string;
+    /** Gauge additional label text. (default null) */
+    labelText?: string;
+    /** Label text color. (default #888888) */
+    labelTextColor?: string;
+    /** Label text font size. (default 14) */
+    labelFontSize?: string;
+    /** Label text font weight. (default 400) */
+    labelFontWeight?: string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered right before Gauge instance will be destroyed. As an argument event handler receives Gauge instance */
+    beforeDestroy: (dialog: Gauge) => void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered right before Gauge instance will be destroyed */
+    'gauge:beforedestroy': () => void;
+  }
+  interface AppMethods {
+    gauge: {
+      /** create Gauge instance */
+      create(parameters: Gauge.Parameters): Gauge;
+      /** destroy Gauge instance */
+      destroy(el: HTMLElement | CSSSelector | Gauge): void;
+      /** get Gauge instance by HTML element */
+      get(el: HTMLElement | CSSSelector): Gauge;
+      /** update/rerender Gauge SVG according to passed parameters */
+      update(parameters: Omit<Parameters, 'el'>): Gauge;
+    };
+  }
+  interface AppParams {
+    gauge?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered right before Gauge instance will be destroyed. As an argument event handler receives Gauge instance */
+    gaugeBeforeDestroy: (dialog: Gauge) => void;
+  }
+}
+
+declare const GaugeComponent: Framework7Plugin;
+
+export default GaugeComponent;

package/components/gauge/gauge.js

@@ -0,0 +1,90 @@
+import $ from '../../shared/dom7.js';
+import Gauge from './gauge-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+import { extend } from '../../shared/utils.js';
+export default {
+  name: 'gauge',
+  static: {
+    Gauge
+  },
+  create() {
+    const app = this;
+    app.gauge = ConstructorMethods({
+      defaultSelector: '.gauge',
+      constructor: Gauge,
+      app,
+      domProp: 'f7Gauge'
+    });
+    app.gauge.update = function update(el, newParams) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const gauge = app.gauge.get(el);
+      if (!gauge) return undefined;
+      gauge.update(newParams);
+      return gauge;
+    };
+  },
+  params: {
+    gauge: {
+      el: null,
+      type: 'circle',
+      value: 0,
+      size: 200,
+      bgColor: 'transparent',
+      borderBgColor: '#eeeeee',
+      borderColor: '#000000',
+      borderWidth: 10,
+      valueText: null,
+      valueTextColor: '#000000',
+      valueFontSize: 31,
+      valueFontWeight: 500,
+      labelText: null,
+      labelTextColor: '#888888',
+      labelFontSize: 14,
+      labelFontWeight: 400
+    }
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.gauge-init').each(el => {
+        app.gauge.create(extend({
+          el
+        }, $(el).dataset() || {}));
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.gauge-init').each(el => {
+        if (el.f7Gauge) el.f7Gauge.destroy();
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.gauge-init').each(el => {
+        app.gauge.create(extend({
+          el
+        }, $(el).dataset() || {}));
+      });
+    },
+    pageBeforeRemove(page) {
+      page.$el.find('.gauge-init').each(el => {
+        if (el.f7Gauge) el.f7Gauge.destroy();
+      });
+    }
+  },
+  vnode: {
+    'gauge-init': {
+      insert(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        app.gauge.create(extend({
+          el
+        }, $(el).dataset() || {}));
+      },
+      destroy(vnode) {
+        const el = vnode.elm;
+        if (el.f7Gauge) el.f7Gauge.destroy();
+      }
+    }
+  }
+};

package/components/gauge/gauge.less

@@ -0,0 +1,24 @@
+/* === Gauge === */
+.gauge {
+  position: relative;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-block;
+}
+.gauge-svg,
+.gauge svg {
+  max-width: 100%;
+  height: auto;
+  circle,
+  path {
+    transition-duration: 400ms;
+  }
+}
+
+.if-ios-theme({
+  @import './gauge-ios.less';
+});
+.if-md-theme({
+  @import './gauge-md.less';
+});

package/components/grid/grid-ios.less

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

package/components/grid/grid-md.less

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

package/components/grid/grid-rtl.css

@@ -0,0 +1 @@
+:root{--f7-grid-gap:16px}.grid{display:grid}.grid.grid-gap{gap:var(--f7-grid-gap)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}@media (min-width:480px){.xsmall-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xsmall-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.xsmall-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xsmall-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.xsmall-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xsmall-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.xsmall-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xsmall-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.xsmall-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xsmall-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.xsmall-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xsmall-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.xsmall-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xsmall-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.xsmall-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xsmall-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.xsmall-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xsmall-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.xsmall-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xsmall-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.xsmall-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xsmall-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.xsmall-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xsmall-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.xsmall-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.xsmall-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.xsmall-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.xsmall-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.xsmall-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.xsmall-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.xsmall-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.xsmall-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.xsmall-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.xsmall-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.xsmall-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.xsmall-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.xsmall-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.xsmall-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.xsmall-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.xsmall-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:568px){.small-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.small-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.small-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.small-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.small-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.small-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.small-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.small-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.small-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.small-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.small-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.small-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.small-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.small-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.small-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.small-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.small-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.small-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.small-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.small-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.small-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.small-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.small-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.small-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.small-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.small-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.small-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.small-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.small-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.small-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.small-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.small-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.small-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.small-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.small-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.small-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.small-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.small-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.small-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.small-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:768px){.medium-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.medium-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.medium-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.medium-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.medium-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.medium-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.medium-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.medium-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.medium-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.medium-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.medium-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.medium-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.medium-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.medium-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.medium-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.medium-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.medium-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.medium-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.medium-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.medium-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.medium-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.medium-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.medium-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.medium-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.medium-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.medium-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.medium-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.medium-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.medium-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.medium-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.medium-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.medium-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.medium-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.medium-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.medium-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.medium-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.medium-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.medium-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.medium-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.medium-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:1024px){.large-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.large-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.large-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.large-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.large-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.large-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.large-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.large-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.large-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.large-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.large-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.large-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.large-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.large-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.large-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.large-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.large-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.large-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.large-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.large-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.large-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.large-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.large-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.large-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.large-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.large-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.large-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.large-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.large-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.large-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.large-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.large-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.large-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.large-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.large-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.large-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.large-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.large-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.large-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.large-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:1200px){.xlarge-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xlarge-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.xlarge-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xlarge-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.xlarge-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xlarge-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.xlarge-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xlarge-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.xlarge-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xlarge-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.xlarge-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xlarge-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.xlarge-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xlarge-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.xlarge-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xlarge-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.xlarge-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xlarge-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.xlarge-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xlarge-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.xlarge-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xlarge-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.xlarge-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xlarge-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.xlarge-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.xlarge-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.xlarge-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.xlarge-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.xlarge-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.xlarge-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.xlarge-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.xlarge-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.xlarge-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.xlarge-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.xlarge-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.xlarge-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.xlarge-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.xlarge-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.xlarge-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.xlarge-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}

package/components/grid/grid-vars.less

@@ -0,0 +1,3 @@
+:root {
+  --f7-grid-gap: 16px;
+}

package/components/grid/grid.css

@@ -0,0 +1 @@
+:root{--f7-grid-gap:16px}.grid{display:grid}.grid.grid-gap{gap:var(--f7-grid-gap)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}@media (min-width:480px){.xsmall-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xsmall-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.xsmall-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xsmall-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.xsmall-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xsmall-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.xsmall-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xsmall-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.xsmall-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xsmall-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.xsmall-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xsmall-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.xsmall-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xsmall-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.xsmall-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xsmall-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.xsmall-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xsmall-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.xsmall-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xsmall-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.xsmall-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xsmall-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.xsmall-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xsmall-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.xsmall-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.xsmall-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.xsmall-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.xsmall-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.xsmall-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.xsmall-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.xsmall-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.xsmall-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.xsmall-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.xsmall-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.xsmall-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.xsmall-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.xsmall-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.xsmall-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.xsmall-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.xsmall-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:568px){.small-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.small-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.small-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.small-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.small-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.small-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.small-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.small-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.small-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.small-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.small-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.small-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.small-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.small-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.small-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.small-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.small-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.small-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.small-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.small-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.small-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.small-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.small-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.small-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.small-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.small-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.small-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.small-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.small-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.small-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.small-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.small-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.small-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.small-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.small-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.small-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.small-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.small-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.small-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.small-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:768px){.medium-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.medium-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.medium-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.medium-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.medium-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.medium-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.medium-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.medium-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.medium-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.medium-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.medium-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.medium-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.medium-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.medium-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.medium-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.medium-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.medium-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.medium-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.medium-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.medium-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.medium-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.medium-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.medium-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.medium-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.medium-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.medium-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.medium-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.medium-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.medium-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.medium-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.medium-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.medium-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.medium-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.medium-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.medium-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.medium-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.medium-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.medium-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.medium-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.medium-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:1024px){.large-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.large-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.large-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.large-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.large-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.large-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.large-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.large-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.large-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.large-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.large-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.large-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.large-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.large-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.large-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.large-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.large-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.large-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.large-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.large-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.large-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.large-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.large-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.large-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.large-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.large-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.large-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.large-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.large-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.large-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.large-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.large-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.large-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.large-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.large-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.large-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.large-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.large-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.large-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.large-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:1200px){.xlarge-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xlarge-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.xlarge-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xlarge-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.xlarge-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xlarge-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.xlarge-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xlarge-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.xlarge-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xlarge-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.xlarge-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xlarge-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.xlarge-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xlarge-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.xlarge-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xlarge-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.xlarge-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xlarge-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.xlarge-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xlarge-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.xlarge-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xlarge-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.xlarge-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xlarge-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.xlarge-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.xlarge-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.xlarge-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.xlarge-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.xlarge-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.xlarge-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.xlarge-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.xlarge-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.xlarge-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.xlarge-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.xlarge-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.xlarge-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.xlarge-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.xlarge-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.xlarge-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.xlarge-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}

package/components/grid/grid.d.ts

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

package/components/grid/grid.js

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

package/components/grid/grid.less

@@ -0,0 +1,78 @@
+/* === Grid === */
+@import './grid-vars.less';
+
+@cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20;
+
+.grid {
+  display: grid;
+  &.grid-gap {
+    gap: var(--f7-grid-gap);
+  }
+}
+each(@cols, {
+  .grid-cols-@{value} {
+    grid-template-columns: repeat(@value, minmax(0,1fr));
+  }
+});
+each(@cols, {
+  .grid-rows-@{value} {
+    grid-template-rows: repeat(@value, minmax(0,1fr));
+  }
+});
+@media (min-width: @breakpoints[xsmall]) {
+  each(@cols, {
+    .xsmall-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .xsmall-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
+}
+@media (min-width: @breakpoints[small]) {
+  each(@cols, {
+    .small-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .small-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
+}
+@media (min-width: @breakpoints[medium]) {
+  each(@cols, {
+    .medium-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .medium-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
+}
+@media (min-width: @breakpoints[large]) {
+  each(@cols, {
+    .large-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .large-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
+}
+@media (min-width: @breakpoints[xlarge]) {
+  each(@cols, {
+    .xlarge-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .xlarge-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
+}
+
+.if-ios-theme({
+  @import './grid-ios.less';
+});
+.if-md-theme({
+  @import './grid-md.less';
+});

package/components/icon/icon-ios.less

@@ -0,0 +1,44 @@
+.ios {
+  .icon-back,
+  .icon-prev,
+  .icon-forward,
+  .icon-next {
+    width: 12px;
+    height: 20px;
+    line-height: 20px;
+    &:after {
+      line-height: inherit;
+    }
+  }
+  .icon-prev,
+  .icon-next {
+    &:after {
+      font-size: 16px;
+    }
+  }
+
+  .ltr({
+    .icon-back, .icon-prev {
+      &:after {
+        content: 'chevron_left_ios';
+      }
+    }
+    .icon-forward, .icon-next {
+      &:after {
+        content: 'chevron_right_ios';
+      }
+    }
+  });
+  .rtl({
+    .icon-back, .icon-prev {
+      &:after {
+        content: 'chevron_right_ios';
+      }
+    }
+    .icon-forward, .icon-next {
+      &:after {
+        content: 'chevron_left_ios';
+      }
+    }
+  });
+}

package/components/icon/icon-md.less

@@ -0,0 +1,56 @@
+.md {
+  .icon-back,
+  .icon-forward,
+  .icon-next,
+  .icon-prev {
+    width: 24px;
+    height: 24px;
+    &:after {
+      line-height: 1.2;
+    }
+  }
+  .ltr({
+    .icon-back {
+      &:after {
+        content: 'arrow_left_md';
+      }
+    }
+    .icon-forward {
+      &:after {
+        content: 'arrow_right_md';
+      }
+    }
+    .icon-next {
+      &:after {
+        content: 'chevron_right_md';
+      }
+    }
+    .icon-prev {
+      &:after {
+        content: 'chevron_left_md';
+      }
+    }
+  });
+  .rtl({
+    .icon-back {
+      &:after {
+        content: 'arrow_right_md';
+      }
+    }
+    .icon-forward {
+      &:after {
+        content: 'arrow_left_md';
+      }
+    }
+    .icon-next {
+      &:after {
+        content: 'chevron_left_md';
+      }
+    }
+    .icon-prev {
+      &:after {
+        content: 'chevron_right_md';
+      }
+    }
+  });
+}

package/components/icon/icon.d.ts

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

package/components/icon/icon.js

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

package/components/icon/icon.less

@@ -0,0 +1,33 @@
+/* === Icon === */
+.f7-icons,
+.material-icons {
+  width: 1em;
+  height: 1em;
+}
+i.icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-size: 100% auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  font-style: normal;
+  position: relative;
+}
+.icon-back,
+.icon-prev,
+.icon-forward,
+.icon-next {
+  &:after {
+    .core-icons-font();
+  }
+}
+.icon[class*='color-'] {
+  color: var(--f7-theme-color);
+}
+
+.if-ios-theme({
+  @import './icon-ios.less';
+});
+.if-md-theme({
+  @import './icon-md.less';
+});

package/components/infinite-scroll/infinite-scroll-ios.less

@@ -0,0 +1,11 @@
+.ios {
+  .infinite-scroll-preloader {
+    margin-top: 35px;
+    margin-bottom: 35px;
+    .preloader,
+    &.preloader {
+      width: 27px;
+      height: 27px;
+    }
+  }
+}

package/components/infinite-scroll/infinite-scroll-md.less

@@ -0,0 +1,6 @@
+.md {
+  .infinite-scroll-preloader {
+    margin-top: 32px;
+    margin-bottom: 32px;
+  }
+}

package/components/infinite-scroll/infinite-scroll-rtl.css

@@ -0,0 +1 @@
+.infinite-scroll-preloader{margin-left:auto;margin-right:auto;text-align:center}.infinite-scroll-preloader.preloader{display:block}.ios .infinite-scroll-preloader{margin-top:35px;margin-bottom:35px}.ios .infinite-scroll-preloader .preloader,.ios .infinite-scroll-preloader.preloader{width:27px;height:27px}.md .infinite-scroll-preloader{margin-top:32px;margin-bottom:32px}

package/components/infinite-scroll/infinite-scroll.css

@@ -0,0 +1 @@
+.infinite-scroll-preloader{margin-left:auto;margin-right:auto;text-align:center}.infinite-scroll-preloader.preloader{display:block}.ios .infinite-scroll-preloader{margin-top:35px;margin-bottom:35px}.ios .infinite-scroll-preloader .preloader,.ios .infinite-scroll-preloader.preloader{width:27px;height:27px}.md .infinite-scroll-preloader{margin-top:32px;margin-bottom:32px}

package/components/infinite-scroll/infinite-scroll.d.ts

@@ -0,0 +1,27 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace InfiniteScroll {
+  interface DomEvents {
+    /** Event will be triggered when page scroll reaches specified (in data-infinite-distance attribute) distance to the bottom. */
+    infinite: () => void;
+  }
+  interface AppMethods {
+    infiniteScroll: {
+      /** Add infinite scroll event listener to the specified HTML element */
+      create(el: HTMLElement | CSSSelector): void;
+      /** Remove infinite scroll event listener from the specified HTML container */
+      destroy(el: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {
+    infinite: (el: HTMLElement, event: Event) => void;
+  }
+}
+
+declare const InfiniteScrollComponent: Framework7Plugin;
+export default InfiniteScrollComponent;