framework7 6.3.15 → 7.0.0-beta.11

package/{esm/components → components}/app/load-module.js

@@ -1,17 +1,17 @@
 import { getWindow, getDocument } from 'ssr-window';
-import { id } from '../../shared/utils';
-import $ from '../../shared/dom7';
-var fetchedModules = [];
+import { id } from '../../shared/utils.js';
+import $ from '../../shared/dom7.js';
+const fetchedModules = [];
 
 function loadModule(moduleToLoad) {
-  var Framework7 = this;
-  var window = getWindow();
-  var document = getDocument();
-  return new Promise(function (resolve, reject) {
-    var app = Framework7.instance;
-    var modulePath;
-    var moduleObj;
-    var moduleFunc;
+  const Framework7 = this;
+  const window = getWindow();
+  const document = getDocument();
+  return new Promise((resolve, reject) => {
+    const app = Framework7.instance;
+    let modulePath;
+    let moduleObj;
+    let moduleFunc;
 
     if (!moduleToLoad) {
       reject(new Error('Framework7: Lazy module must be specified'));
@@ -28,7 +28,7 @@ function loadModule(moduleToLoad) {
     }
 
     if (typeof moduleToLoad === 'string') {
-      var matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i);
+      const matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i);
 
       if (moduleToLoad.indexOf('.') < 0 && matchNamePattern && matchNamePattern[0].length === moduleToLoad.length) {
         if (!app || app && !app.params.lazyModulesPath) {
@@ -36,7 +36,7 @@ function loadModule(moduleToLoad) {
           return;
         }
 
-        modulePath = app.params.lazyModulesPath + "/" + moduleToLoad + "/" + moduleToLoad + ".js";
+        modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}/${moduleToLoad}.lazy.js`;
       } else {
         modulePath = moduleToLoad;
       }
@@ -48,7 +48,7 @@ function loadModule(moduleToLoad) {
     }
 
     if (moduleFunc) {
-      var module = moduleFunc(Framework7, false);
+      const module = moduleFunc(Framework7, false);
 
       if (!module) {
         reject(new Error("Framework7: Can't find Framework7 component in specified component function"));
@@ -67,21 +67,21 @@ function loadModule(moduleToLoad) {
     }
 
     if (moduleObj) {
-      var _module = moduleObj;
+      const module = moduleObj;
 
-      if (!_module) {
+      if (!module) {
         reject(new Error("Framework7: Can't find Framework7 component in specified component"));
         return;
       } // Check if it was added
 
 
-      if (Framework7.prototype.modules && Framework7.prototype.modules[_module.name]) {
+      if (Framework7.prototype.modules && Framework7.prototype.modules[module.name]) {
         resolve();
         return;
       } // Install It
 
 
-      install(_module);
+      install(module);
       resolve();
     }
 
@@ -92,20 +92,20 @@ function loadModule(moduleToLoad) {
       }
 
       fetchedModules.push(modulePath);
-      var scriptLoad = new Promise(function (resolveScript, rejectScript) {
-        Framework7.request.get(modulePath, function (scriptContent) {
-          var callbackId = id();
-          var callbackLoadName = "f7_component_loader_callback_" + callbackId;
-          var scriptEl = document.createElement('script');
-          scriptEl.innerHTML = "window." + callbackLoadName + " = function (Framework7, Framework7AutoInstallComponent) {return " + scriptContent.trim() + "}";
+      const scriptLoad = new Promise((resolveScript, rejectScript) => {
+        Framework7.request.get(modulePath, scriptContent => {
+          const callbackId = id();
+          const callbackLoadName = `f7_component_loader_callback_${callbackId}`;
+          const scriptEl = document.createElement('script');
+          scriptEl.innerHTML = `window.${callbackLoadName} = function (Framework7, Framework7AutoInstallComponent) {return ${scriptContent.trim()}}`;
           $('head').append(scriptEl);
-          var componentLoader = window[callbackLoadName];
+          const componentLoader = window[callbackLoadName];
           delete window[callbackLoadName];
           $(scriptEl).remove();
-          var module = componentLoader(Framework7, false);
+          const module = componentLoader(Framework7, false);
 
           if (!module) {
-            rejectScript(new Error("Framework7: Can't find Framework7 component in " + modulePath + " file"));
+            rejectScript(new Error(`Framework7: Can't find Framework7 component in ${modulePath} file`));
             return;
           } // Check if it was added
 
@@ -118,23 +118,23 @@ function loadModule(moduleToLoad) {
 
           install(module);
           resolveScript();
-        }, function (xhr, status) {
+        }, (xhr, status) => {
           rejectScript(xhr, status);
         });
       });
-      var styleLoad = new Promise(function (resolveStyle) {
-        Framework7.request.get(modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), function (styleContent) {
-          var styleEl = document.createElement('style');
+      const styleLoad = new Promise(resolveStyle => {
+        Framework7.request.get(modulePath.replace('.lazy.js', app.rtl ? '.rtl.css' : '.css').replace('.js', app.rtl ? '.rtl.css' : '.css'), styleContent => {
+          const styleEl = document.createElement('style');
           styleEl.innerHTML = styleContent;
           $('head').append(styleEl);
           resolveStyle();
-        }, function () {
+        }, () => {
           resolveStyle();
         });
       });
-      Promise.all([scriptLoad, styleLoad]).then(function () {
+      Promise.all([scriptLoad, styleLoad]).then(() => {
         resolve();
-      }).catch(function (err) {
+      }).catch(err => {
         reject(err);
       });
     }

package/components/appbar/appbar.js

@@ -1 +1,3 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);e.$,e.utils,e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods;var t={name:"appbar"};if(o){if(e.prototype.modules&&e.prototype.modules[t.name])return;e.use(t),e.instance&&(e.instance.useModuleParams(t,e.instance.params),e.instance.useModule(t))}return t}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+export default {
+  name: 'appbar'
+};

package/components/appbar/appbar.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);e.$,e.utils,e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods;var t={name:"appbar"};if(o){if(e.prototype.modules&&e.prototype.modules[t.name])return;e.use(t),e.instance&&(e.instance.useModuleParams(t,e.instance.params),e.instance.useModule(t))}return t}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/area-chart/area-chart-class.js

@@ -0,0 +1,507 @@
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+/** @jsx $jsx */
+
+import $jsx from '../../shared/$jsx.js';
+
+class AreaChart extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const self = this;
+    const defaults = extend({}, app.params.areaChart); // Extend defaults with modules params
+
+    self.useModulesParams(defaults);
+    self.params = extend(defaults, params);
+    const {
+      el
+    } = self.params;
+    if (!el) return self;
+    const $el = $(el);
+    if ($el.length === 0) return self;
+    if ($el[0].f7AreaChart) return $el[0].f7AreaChart;
+    extend(self, {
+      app,
+      $el,
+      el: $el && $el[0],
+      currentIndex: null,
+      hiddenDatasets: [],
+      f7Tooltip: null,
+      linesOffsets: null
+    });
+    $el[0].f7AreaChart = self; // Install Modules
+
+    self.useModules();
+    self.onMouseEnter = self.onMouseEnter.bind(self);
+    self.onMouseMove = self.onMouseMove.bind(self);
+    self.onMouseLeave = self.onMouseLeave.bind(self);
+    self.onLegendClick = self.onLegendClick.bind(self);
+    self.init();
+    return self;
+  }
+
+  getVisibleLabels() {
+    const {
+      maxAxisLabels,
+      axisLabels
+    } = this.params;
+    if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
+    const skipStep = Math.ceil(axisLabels.length / maxAxisLabels);
+    const filtered = axisLabels.filter((label, index) => index % skipStep === 0);
+    return filtered;
+  }
+
+  getSummValues() {
+    const {
+      datasets
+    } = this.params;
+    const {
+      hiddenDatasets
+    } = this;
+    const summValues = [];
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      values
+    }) => {
+      values.forEach((value, valueIndex) => {
+        if (!summValues[valueIndex]) summValues[valueIndex] = 0;
+        summValues[valueIndex] += value;
+      });
+    });
+    return summValues;
+  }
+
+  getChartData() {
+    const {
+      datasets,
+      lineChart,
+      width,
+      height
+    } = this.params;
+    const {
+      hiddenDatasets
+    } = this;
+    const data = [];
+
+    if (!datasets.length) {
+      return data;
+    }
+
+    const lastValues = datasets[0].values.map(() => 0);
+    let maxValue = 0;
+
+    if (lineChart) {
+      datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+        values
+      }) => {
+        const datasetMaxValue = Math.max(...values);
+        if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
+      });
+    } else {
+      maxValue = Math.max(...this.getSummValues());
+    }
+
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      label,
+      values,
+      color
+    }) => {
+      const points = values.map((originalValue, valueIndex) => {
+        lastValues[valueIndex] += originalValue;
+        const value = lineChart ? originalValue : lastValues[valueIndex];
+        const x = valueIndex / (values.length - 1) * width;
+        const y = height - value / maxValue * height;
+
+        if (lineChart) {
+          return `${valueIndex === 0 ? 'M' : 'L'}${x},${y}`;
+        }
+
+        return `${x} ${y}`;
+      });
+
+      if (!lineChart) {
+        points.push(`${width} ${height} 0 ${height}`);
+      }
+
+      data.push({
+        label,
+        points: points.join(' '),
+        color
+      });
+    });
+    return data.reverse();
+  }
+
+  getVerticalLines() {
+    const {
+      datasets,
+      width
+    } = this.params;
+    const lines = [];
+
+    if (!datasets.length) {
+      return lines;
+    }
+
+    const values = datasets[0].values;
+    values.forEach((value, valueIndex) => {
+      const x = valueIndex / (values.length - 1) * width;
+      lines.push(x);
+    });
+    return lines;
+  }
+
+  toggleDataset(index) {
+    const {
+      hiddenDatasets,
+      params: {
+        toggleDatasets
+      }
+    } = this;
+    if (!toggleDatasets) return;
+
+    if (hiddenDatasets.includes(index)) {
+      hiddenDatasets.splice(hiddenDatasets.indexOf(index), 1);
+    } else {
+      hiddenDatasets.push(index);
+    }
+
+    if (this.$legendEl) {
+      this.$legendEl.find('.area-chart-legend-item').removeClass('area-chart-legend-item-hidden');
+      hiddenDatasets.forEach(i => {
+        this.$legendEl.find(`.area-chart-legend-item[data-index="${i}"]`).addClass('area-chart-legend-item-hidden');
+      });
+    }
+
+    this.update({}, true);
+  }
+
+  formatAxisLabel(label) {
+    const {
+      formatAxisLabel
+    } = this.params;
+    if (formatAxisLabel) return formatAxisLabel.call(this, label);
+    return label;
+  }
+
+  formatLegendLabel(label) {
+    const {
+      formatLegendLabel
+    } = this.params;
+    if (formatLegendLabel) return formatLegendLabel.call(this, label);
+    return label;
+  }
+
+  calcLinesOffsets() {
+    const lines = this.svgEl.querySelectorAll('line');
+    this.linesOffsets = [];
+
+    for (let i = 0; i < lines.length; i += 1) {
+      this.linesOffsets.push(lines[i].getBoundingClientRect().left);
+    }
+  }
+
+  formatTooltip() {
+    const self = this;
+    const {
+      currentIndex,
+      hiddenDatasets,
+      params: {
+        datasets,
+        axisLabels,
+        formatTooltip,
+        formatTooltipTotal,
+        formatTooltipAxisLabel,
+        formatTooltipDataset
+      }
+    } = self;
+    if (currentIndex === null) return '';
+    let total = 0;
+    const currentValues = datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).map(dataset => ({
+      color: dataset.color,
+      label: dataset.label,
+      value: dataset.values[currentIndex]
+    }));
+    currentValues.forEach(dataset => {
+      total += dataset.value;
+    });
+
+    if (formatTooltip) {
+      return formatTooltip({
+        index: currentIndex,
+        total,
+        datasets: currentValues
+      });
+    }
+
+    let labelText = formatTooltipAxisLabel ? formatTooltipAxisLabel.call(self, axisLabels[currentIndex]) : this.formatAxisLabel(axisLabels[currentIndex]);
+    if (!labelText) labelText = '';
+    const totalText = formatTooltipTotal ? formatTooltipTotal.call(self, total) : total; // prettier-ignore
+
+    const datasetsText = currentValues.length > 0 ? `
+      <ul class="area-chart-tooltip-list">
+        ${currentValues.map(({
+      label,
+      color,
+      value
+    }) => {
+      const valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : `${label ? `${label}: ` : ''}${value}`;
+      return `
+              <li><span style="background-color: ${color};"></span>${valueText}</li>
+            `;
+    }).join('')}
+      </ul>` : ''; // prettier-ignore
+
+    return `
+      <div class="area-chart-tooltip-label">${labelText}</div>
+      <div class="area-chart-tooltip-total">${totalText}</div>
+      ${datasetsText}
+    `;
+  }
+
+  setTooltip() {
+    const self = this;
+    const {
+      app,
+      el,
+      svgEl,
+      hiddenDatasets,
+      currentIndex,
+      params: {
+        tooltip,
+        datasets
+      }
+    } = self;
+    if (!tooltip) return;
+    const hasVisibleDataSets = datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).length > 0;
+
+    if (!hasVisibleDataSets) {
+      if (self.f7Tooltip && self.f7Tooltip.hide) self.f7Tooltip.hide();
+      return;
+    }
+
+    if (currentIndex !== null && !self.f7Tooltip) {
+      self.f7Tooltip = app.tooltip.create({
+        trigger: 'manual',
+        containerEl: el,
+        targetEl: svgEl.querySelector(`line[data-index="${currentIndex}"]`),
+        text: self.formatTooltip(),
+        cssClass: 'area-chart-tooltip'
+      });
+
+      if (self.f7Tooltip && self.f7Tooltip.show) {
+        self.f7Tooltip.show();
+      }
+
+      return;
+    }
+
+    if (!self.f7Tooltip || !self.f7Tooltip.hide || !self.f7Tooltip.show) {
+      return;
+    }
+
+    if (currentIndex !== null) {
+      self.f7Tooltip.setText(self.formatTooltip());
+      self.f7Tooltip.setTargetEl(svgEl.querySelector(`line[data-index="${currentIndex}"]`));
+      self.f7Tooltip.show();
+    } else {
+      self.f7Tooltip.hide();
+    }
+  }
+
+  setCurrentIndex(index) {
+    if (index === this.currentIndex) return;
+    this.currentIndex = index;
+    this.$el.trigger('areachart:select', {
+      index
+    });
+    this.emit('local::select areaChartSelect', this, index);
+    this.$svgEl.find('line').removeClass('area-chart-current-line');
+    this.$svgEl.find(`line[data-index="${index}"]`).addClass('area-chart-current-line');
+    this.setTooltip();
+  }
+
+  onLegendClick(e) {
+    const index = parseInt($(e.target).closest('.area-chart-legend-item').attr('data-index'), 10);
+    this.toggleDataset(index);
+  }
+
+  onMouseEnter() {
+    this.calcLinesOffsets();
+  }
+
+  onMouseMove(e) {
+    const self = this;
+
+    if (!self.linesOffsets) {
+      self.calcLinesOffsets();
+    }
+
+    let currentLeft = e.pageX;
+    if (typeof currentLeft === 'undefined') currentLeft = 0;
+    const distances = self.linesOffsets.map(left => Math.abs(currentLeft - left));
+    const minDistance = Math.min(...distances);
+    const closestIndex = distances.indexOf(minDistance);
+    self.setCurrentIndex(closestIndex);
+  }
+
+  onMouseLeave() {
+    this.setCurrentIndex(null);
+  }
+
+  attachEvents() {
+    const {
+      svgEl,
+      $el
+    } = this;
+    if (!svgEl) return;
+    svgEl.addEventListener('mouseenter', this.onMouseEnter);
+    svgEl.addEventListener('mousemove', this.onMouseMove);
+    svgEl.addEventListener('mouseleave', this.onMouseLeave);
+    $el.on('click', '.area-chart-legend-item', this.onLegendClick);
+  }
+
+  detachEvents() {
+    const {
+      svgEl,
+      $el
+    } = this;
+    if (!svgEl) return;
+    svgEl.removeEventListener('mouseenter', this.onMouseEnter);
+    svgEl.removeEventListener('mousemove', this.onMouseMove);
+    svgEl.removeEventListener('mouseleave', this.onMouseLeave);
+    $el.off('click', '.area-chart-legend-item', this.onLegendClick);
+  }
+
+  render() {
+    const self = this;
+    const {
+      lineChart,
+      toggleDatasets,
+      width,
+      height,
+      axis,
+      axisLabels,
+      legend,
+      datasets
+    } = self.params;
+    const chartData = self.getChartData();
+    const verticalLines = self.getVerticalLines();
+    const visibleLegends = self.getVisibleLabels();
+    const LegendItemTag = toggleDatasets ? 'button' : 'span';
+    return $jsx("div", null, $jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: width,
+      height: height,
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none"
+    }, chartData.map(data => lineChart ? $jsx("path", {
+      stroke: data.color,
+      "fill-rule": "evenodd",
+      d: data.points
+    }) : $jsx("polygon", {
+      fill: data.color,
+      "fill-rule": "evenodd",
+      points: data.points
+    })), verticalLines.map((line, index) => $jsx("line", {
+      "data-index": index,
+      fill: "#000",
+      x1: line,
+      y1: 0,
+      x2: line,
+      y2: height
+    }))), axis && $jsx("div", {
+      class: "area-chart-axis"
+    }, axisLabels.map(label => $jsx("span", null, visibleLegends.includes(label) && $jsx("span", null, self.formatAxisLabel(label))))), legend && $jsx("div", {
+      class: "area-chart-legend"
+    }, datasets.map((dataset, index) => $jsx(LegendItemTag, {
+      "data-index": index,
+      class: `area-chart-legend-item ${toggleDatasets ? 'area-chart-legend-button' : ''}`,
+      _type: toggleDatasets ? 'button' : undefined
+    }, $jsx("span", {
+      style: `background-color: ${dataset.color}`
+    }), self.formatLegendLabel(dataset.label)))));
+  }
+
+  update(newParams = {}, onlySvg = false) {
+    const self = this;
+    const {
+      params
+    } = self;
+    Object.keys(newParams).forEach(param => {
+      if (typeof newParams[param] !== 'undefined') {
+        params[param] = newParams[param];
+      }
+    });
+    if (self.$svgEl.length === 0) return self;
+    self.detachEvents();
+    self.$svgEl.remove();
+
+    if (!onlySvg) {
+      self.$axisEl.remove();
+      self.$legendEl.remove();
+    }
+
+    const $rendered = $(self.render());
+    const $svgEl = $rendered.find('svg');
+    extend(self, {
+      svgEl: $svgEl && $svgEl[0],
+      $svgEl
+    });
+
+    if (!onlySvg) {
+      const $axisEl = $rendered.find('.area-chart-axis');
+      const $legendEl = $rendered.find('.area-chart-legend');
+      extend(self, {
+        $axisEl,
+        $legendEl
+      });
+      self.$el.append($axisEl);
+      self.$el.append($legendEl);
+    }
+
+    self.$el.prepend($svgEl);
+    self.attachEvents();
+    return self;
+  }
+
+  init() {
+    const self = this;
+    const $rendered = $(self.render());
+    const $svgEl = $rendered.find('svg');
+    const $axisEl = $rendered.find('.area-chart-axis');
+    const $legendEl = $rendered.find('.area-chart-legend');
+    extend(self, {
+      svgEl: $svgEl && $svgEl[0],
+      $svgEl,
+      $axisEl,
+      $legendEl
+    });
+    self.$el.append($svgEl);
+    self.$el.append($axisEl);
+    self.$el.append($legendEl);
+    self.attachEvents();
+    return self;
+  }
+
+  destroy() {
+    const self = this;
+    if (!self.$el || self.destroyed) return;
+    self.$el.trigger('piechart:beforedestroy');
+    self.emit('local::beforeDestroy areaChartBeforeDestroy', self);
+    self.detachEvents();
+    self.$svgEl.remove();
+    self.$axisEl.remove();
+    self.$legendEl.remove();
+
+    if (self.f7Tooltip && self.f7Tooltip.destroy) {
+      self.f7Tooltip.destroy();
+    }
+
+    delete self.$el[0].f7AreaChart;
+    deleteProps(self);
+    self.destroyed = true;
+  }
+
+}
+
+export default AreaChart;

package/components/area-chart/area-chart-rtl.css

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .theme-dark,:root.theme-dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

package/components/area-chart/area-chart.css

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .theme-dark,:root.theme-dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}