framework7 6.3.4 → 7.0.0-beta.3

package/components/accordion/accordion.js

@@ -1 +1,132 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var n=e.$,i=e.utils,t=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,i.bindMethods),c=i.nextFrame,r={toggleClicked:function(e){var o=e.closest(".accordion-item").eq(0);o.length||(o=e.parents("li").eq(0));var n=e.parents(".accordion-item-content").eq(0);n.length&&n.parents(o).length||e.parents("li").length>1&&e.parents("li")[0]!==o[0]||this.accordion.toggle(o)},open:function(e){var o=this,i=n(e),t=!1;function r(){t=!0}if(i.trigger("accordion:beforeopen",{prevent:r},r),o.emit("accordionBeforeOpen",i[0],r),!t){var a=i.parents(".accordion-list").eq(0),s=i.children(".accordion-item-content");if(s.removeAttr("aria-hidden"),0===s.length&&(s=i.find(".accordion-item-content")),0!==s.length){var d=a.length>0&&i.parent().children(".accordion-item-opened");d.length>0&&o.accordion.close(d),s.transitionEnd((function(){i.hasClass("accordion-item-opened")?(s.transition(0),s.css("height","auto"),c((function(){s.transition(""),i.trigger("accordion:opened"),o.emit("accordionOpened",i[0])}))):(s.css("height",""),i.trigger("accordion:closed"),o.emit("accordionClosed",i[0]))})),s.css("height",s[0].scrollHeight+"px"),i.trigger("accordion:open"),i.addClass("accordion-item-opened"),o.emit("accordionOpen",i[0])}}},close:function(e){var o=this,i=n(e),t=!1;function r(){t=!0}if(i.trigger("accordion:beforeclose",{prevent:r},r),o.emit("accordionBeforeClose",i[0],r),!t){var a=i.children(".accordion-item-content");0===a.length&&(a=i.find(".accordion-item-content")),i.removeClass("accordion-item-opened"),a.attr("aria-hidden",!0),a.transition(0),a.css("height",a[0].scrollHeight+"px"),a.transitionEnd((function(){i.hasClass("accordion-item-opened")?(a.transition(0),a.css("height","auto"),c((function(){a.transition(""),i.trigger("accordion:opened"),o.emit("accordionOpened",i[0])}))):(a.css("height",""),i.trigger("accordion:closed"),o.emit("accordionClosed",i[0]))})),c((function(){a.transition(""),a.css("height",""),i.trigger("accordion:close"),o.emit("accordionClose",i[0])}))}},toggle:function(e){var o=n(e);0!==o.length&&(o.hasClass("accordion-item-opened")?this.accordion.close(e):this.accordion.open(e))}},a={name:"accordion",create:function(){t(this,{accordion:r})},clicks:{".accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a":function(e){r.toggleClicked.call(this,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[a.name])return;e.use(a),e.instance&&(e.instance.useModuleParams(a,e.instance.params),e.instance.useModule(a))}return a}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import { nextFrame, bindMethods } from '../../shared/utils';
+const Accordion = {
+  toggleClicked($clickedEl) {
+    const app = this;
+    let $accordionItemEl = $clickedEl.closest('.accordion-item').eq(0);
+    if (!$accordionItemEl.length) $accordionItemEl = $clickedEl.parents('li').eq(0);
+    const $accordionContent = $clickedEl.parents('.accordion-item-content').eq(0);
+
+    if ($accordionContent.length) {
+      if ($accordionContent.parents($accordionItemEl).length) return;
+    }
+
+    if ($clickedEl.parents('li').length > 1 && $clickedEl.parents('li')[0] !== $accordionItemEl[0]) return;
+    app.accordion.toggle($accordionItemEl);
+  },
+
+  open(el) {
+    const app = this;
+    const $el = $(el);
+    let prevented = false;
+
+    function prevent() {
+      prevented = true;
+    }
+
+    $el.trigger('accordion:beforeopen', {
+      prevent
+    }, prevent);
+    app.emit('accordionBeforeOpen', $el[0], prevent);
+    if (prevented) return;
+    const $list = $el.parents('.accordion-list').eq(0);
+    let $contentEl = $el.children('.accordion-item-content');
+    $contentEl.removeAttr('aria-hidden');
+    if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
+    if ($contentEl.length === 0) return;
+    const $openedItem = $list.length > 0 && $el.parent().children('.accordion-item-opened');
+
+    if ($openedItem.length > 0) {
+      app.accordion.close($openedItem);
+    }
+
+    $contentEl.transitionEnd(() => {
+      if ($el.hasClass('accordion-item-opened')) {
+        $contentEl.transition(0);
+        $contentEl.css('height', 'auto');
+        nextFrame(() => {
+          $contentEl.transition('');
+          $el.trigger('accordion:opened');
+          app.emit('accordionOpened', $el[0]);
+        });
+      } else {
+        $contentEl.css('height', '');
+        $el.trigger('accordion:closed');
+        app.emit('accordionClosed', $el[0]);
+      }
+    });
+    $contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
+    $el.trigger('accordion:open');
+    $el.addClass('accordion-item-opened');
+    app.emit('accordionOpen', $el[0]);
+  },
+
+  close(el) {
+    const app = this;
+    const $el = $(el);
+    let prevented = false;
+
+    function prevent() {
+      prevented = true;
+    }
+
+    $el.trigger('accordion:beforeclose', {
+      prevent
+    }, prevent);
+    app.emit('accordionBeforeClose', $el[0], prevent);
+    if (prevented) return;
+    let $contentEl = $el.children('.accordion-item-content');
+    if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
+    $el.removeClass('accordion-item-opened');
+    $contentEl.attr('aria-hidden', true);
+    $contentEl.transition(0);
+    $contentEl.css('height', `${$contentEl[0].scrollHeight}px`); // Close
+
+    $contentEl.transitionEnd(() => {
+      if ($el.hasClass('accordion-item-opened')) {
+        $contentEl.transition(0);
+        $contentEl.css('height', 'auto');
+        nextFrame(() => {
+          $contentEl.transition('');
+          $el.trigger('accordion:opened');
+          app.emit('accordionOpened', $el[0]);
+        });
+      } else {
+        $contentEl.css('height', '');
+        $el.trigger('accordion:closed');
+        app.emit('accordionClosed', $el[0]);
+      }
+    });
+    nextFrame(() => {
+      $contentEl.transition('');
+      $contentEl.css('height', '');
+      $el.trigger('accordion:close');
+      app.emit('accordionClose', $el[0]);
+    });
+  },
+
+  toggle(el) {
+    const app = this;
+    const $el = $(el);
+    if ($el.length === 0) return;
+    if ($el.hasClass('accordion-item-opened')) app.accordion.close(el);else app.accordion.open(el);
+  }
+
+};
+export default {
+  name: 'accordion',
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      accordion: Accordion
+    });
+  },
+
+  clicks: {
+    '.accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a': function open($clickedEl) {
+      const app = this;
+      Accordion.toggleClicked.call(app, $clickedEl);
+    }
+  }
+};

package/components/accordion/accordion.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,n=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,n.bindMethods),c=n.nextFrame;const r={toggleClicked(e){let o=e.closest(".accordion-item").eq(0);o.length||(o=e.parents("li").eq(0));const t=e.parents(".accordion-item-content").eq(0);t.length&&t.parents(o).length||e.parents("li").length>1&&e.parents("li")[0]!==o[0]||this.accordion.toggle(o)},open(e){const o=this,n=t(e);let i=!1;function r(){i=!0}if(n.trigger("accordion:beforeopen",{prevent:r},r),o.emit("accordionBeforeOpen",n[0],r),i)return;const s=n.parents(".accordion-list").eq(0);let a=n.children(".accordion-item-content");if(a.removeAttr("aria-hidden"),0===a.length&&(a=n.find(".accordion-item-content")),0===a.length)return;const d=s.length>0&&n.parent().children(".accordion-item-opened");d.length>0&&o.accordion.close(d),a.transitionEnd((()=>{n.hasClass("accordion-item-opened")?(a.transition(0),a.css("height","auto"),c((()=>{a.transition(""),n.trigger("accordion:opened"),o.emit("accordionOpened",n[0])}))):(a.css("height",""),n.trigger("accordion:closed"),o.emit("accordionClosed",n[0]))})),a.css("height",`${a[0].scrollHeight}px`),n.trigger("accordion:open"),n.addClass("accordion-item-opened"),o.emit("accordionOpen",n[0])},close(e){const o=this,n=t(e);let i=!1;function r(){i=!0}if(n.trigger("accordion:beforeclose",{prevent:r},r),o.emit("accordionBeforeClose",n[0],r),i)return;let s=n.children(".accordion-item-content");0===s.length&&(s=n.find(".accordion-item-content")),n.removeClass("accordion-item-opened"),s.attr("aria-hidden",!0),s.transition(0),s.css("height",`${s[0].scrollHeight}px`),s.transitionEnd((()=>{n.hasClass("accordion-item-opened")?(s.transition(0),s.css("height","auto"),c((()=>{s.transition(""),n.trigger("accordion:opened"),o.emit("accordionOpened",n[0])}))):(s.css("height",""),n.trigger("accordion:closed"),o.emit("accordionClosed",n[0]))})),c((()=>{s.transition(""),s.css("height",""),n.trigger("accordion:close"),o.emit("accordionClose",n[0])}))},toggle(e){const o=t(e);0!==o.length&&(o.hasClass("accordion-item-opened")?this.accordion.close(e):this.accordion.open(e))}};var s={name:"accordion",create(){i(this,{accordion:r})},clicks:{".accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a":function(e){r.toggleClicked.call(this,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/actions/actions-class.js

@@ -0,0 +1,365 @@
+/* eslint indent: ["off"] */
+import { getWindow, getDocument } from 'ssr-window';
+import { getDevice } from '../../shared/get-device';
+import { extend, nextTick } from '../../shared/utils';
+import Modal from '../modal/modal-class';
+import $ from '../../shared/dom7';
+/** @jsx $jsx */
+
+import $jsx from '../../shared/$jsx';
+
+class Actions extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, app.params.actions, params); // Extends with open/close Modal methods;
+
+    super(app, extendedParams);
+    const actions = this;
+    const device = getDevice();
+    const window = getWindow();
+    const document = getDocument();
+    actions.params = extendedParams; // Buttons
+
+    let groups;
+
+    if (actions.params.buttons) {
+      groups = actions.params.buttons;
+      if (!Array.isArray(groups[0])) groups = [groups];
+    }
+
+    actions.groups = groups; // Find Element
+
+    let $el;
+
+    if (actions.params.el) {
+      $el = $(actions.params.el).eq(0);
+    } else if (actions.params.content) {
+      $el = $(actions.params.content).filter(node => node.nodeType === 1).eq(0);
+    } else if (actions.params.buttons) {
+      if (actions.params.convertToPopover) {
+        actions.popoverHtml = actions.renderPopover();
+      }
+
+      actions.actionsHtml = actions.render();
+    }
+
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+
+    if ($el && $el.length === 0 && !(actions.actionsHtml || actions.popoverHtml)) {
+      return actions.destroy();
+    } // Backdrop
+
+
+    let $backdropEl;
+
+    if (actions.params.backdrop && actions.params.backdropEl) {
+      $backdropEl = $(actions.params.backdropEl);
+    } else if (actions.params.backdrop) {
+      $backdropEl = actions.$containerEl.children('.actions-backdrop');
+
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="actions-backdrop"></div>');
+        actions.$containerEl.append($backdropEl);
+      }
+    }
+
+    const originalOpen = actions.open;
+    const originalClose = actions.close;
+    let popover;
+
+    function buttonOnClick(e) {
+      const $buttonEl = $(this);
+      let buttonIndex;
+      let groupIndex;
+
+      if ($buttonEl.hasClass('list-button') || $buttonEl.hasClass('item-link')) {
+        buttonIndex = $buttonEl.parents('li').index();
+        groupIndex = $buttonEl.parents('.list').index();
+      } else {
+        buttonIndex = $buttonEl.index();
+        groupIndex = $buttonEl.parents('.actions-group').index();
+      }
+
+      if (typeof groups !== 'undefined') {
+        const button = groups[groupIndex][buttonIndex];
+        if (button.onClick) button.onClick(actions, e);
+        if (actions.params.onClick) actions.params.onClick(actions, e);
+        if (button.close !== false) actions.close();
+      }
+    }
+
+    actions.open = function open(animate) {
+      let convertToPopover = false;
+      const {
+        targetEl,
+        targetX,
+        targetY,
+        targetWidth,
+        targetHeight
+      } = actions.params;
+
+      if (actions.params.convertToPopover && (targetEl || targetX !== undefined && targetY !== undefined)) {
+        // Popover
+        if (actions.params.forceToPopover || device.ios && device.ipad || app.width >= 768 || device.desktop && app.theme === 'aurora') {
+          convertToPopover = true;
+        }
+      }
+
+      if (convertToPopover && actions.popoverHtml) {
+        popover = app.popover.create({
+          containerEl: actions.params.containerEl,
+          content: actions.popoverHtml,
+          backdrop: actions.params.backdrop,
+          targetEl,
+          targetX,
+          targetY,
+          targetWidth,
+          targetHeight,
+          on: {
+            open() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+
+              actions.$el.trigger(`modal:open ${actions.type.toLowerCase()}:open`);
+              actions.emit(`local::open modalOpen ${actions.type}Open`, actions);
+            },
+
+            opened() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+
+              actions.$el.trigger(`modal:opened ${actions.type.toLowerCase()}:opened`);
+              actions.emit(`local::opened modalOpened ${actions.type}Opened`, actions);
+            },
+
+            close() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+
+              actions.$el.trigger(`modal:close ${actions.type.toLowerCase()}:close`);
+              actions.emit(`local::close modalClose ${actions.type}Close`, actions);
+            },
+
+            closed() {
+              if (!actions.$el) {
+                actions.$el = popover.$el;
+              }
+
+              actions.$el.trigger(`modal:closed ${actions.type.toLowerCase()}:closed`);
+              actions.emit(`local::closed modalClosed ${actions.type}Closed`, actions);
+            }
+
+          }
+        });
+        popover.open(animate);
+        popover.once('popoverOpened', () => {
+          popover.$el.find('.list-button, .item-link').each(buttonEl => {
+            $(buttonEl).on('click', buttonOnClick);
+          });
+        });
+        popover.once('popoverClosed', () => {
+          popover.$el.find('.list-button, .item-link').each(buttonEl => {
+            $(buttonEl).off('click', buttonOnClick);
+          });
+          nextTick(() => {
+            popover.destroy();
+            popover = undefined;
+          });
+        });
+      } else {
+        actions.$el = actions.actionsHtml ? $(actions.actionsHtml) : actions.$el;
+        actions.$el[0].f7Modal = actions;
+
+        if (actions.groups) {
+          actions.$el.find('.actions-button').each(buttonEl => {
+            $(buttonEl).on('click', buttonOnClick);
+          });
+          actions.once('actionsClosed', () => {
+            actions.$el.find('.actions-button').each(buttonEl => {
+              $(buttonEl).off('click', buttonOnClick);
+            });
+          });
+        }
+
+        actions.el = actions.$el[0];
+        originalOpen.call(actions, animate);
+      }
+
+      return actions;
+    };
+
+    actions.close = function close(animate) {
+      if (popover) {
+        popover.close(animate);
+      } else {
+        originalClose.call(actions, animate);
+      }
+
+      return actions;
+    };
+
+    extend(actions, {
+      app,
+      $el,
+      el: $el ? $el[0] : undefined,
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0],
+      type: 'actions'
+    });
+
+    function handleClick(e) {
+      const target = e.target;
+      const $target = $(target);
+      const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
+      if (keyboardOpened) return;
+
+      if ($target.closest(actions.el).length === 0) {
+        if (actions.params.closeByBackdropClick && actions.params.backdrop && actions.backdropEl && actions.backdropEl === target) {
+          actions.close();
+        } else if (actions.params.closeByOutsideClick) {
+          actions.close();
+        }
+      }
+    }
+
+    function onKeyDown(e) {
+      const keyCode = e.keyCode;
+
+      if (keyCode === 27 && actions.params.closeOnEscape) {
+        actions.close();
+      }
+    }
+
+    if (actions.params.closeOnEscape) {
+      actions.on('open', () => {
+        $(document).on('keydown', onKeyDown);
+      });
+      actions.on('close', () => {
+        $(document).off('keydown', onKeyDown);
+      });
+    }
+
+    actions.on('opened', () => {
+      if (actions.params.closeByBackdropClick || actions.params.closeByOutsideClick) {
+        app.on('click', handleClick);
+      }
+    });
+    actions.on('close', () => {
+      if (actions.params.closeByBackdropClick || actions.params.closeByOutsideClick) {
+        app.off('click', handleClick);
+      }
+    });
+
+    if ($el) {
+      $el[0].f7Modal = actions;
+    }
+
+    return actions;
+  }
+
+  render() {
+    const actions = this;
+    if (actions.params.render) return actions.params.render.call(actions, actions);
+    const {
+      groups
+    } = actions;
+    const cssClass = actions.params.cssClass;
+    return $jsx("div", {
+      class: `actions-modal${actions.params.grid ? ' actions-grid' : ''} ${cssClass || ''}`
+    }, groups.map(group => $jsx("div", {
+      class: "actions-group"
+    }, group.map(button => {
+      const buttonClasses = [`actions-${button.label ? 'label' : 'button'}`];
+      const {
+        color,
+        bg,
+        bold,
+        disabled,
+        label,
+        text,
+        icon
+      } = button;
+      if (color) buttonClasses.push(`color-${color}`);
+      if (bg) buttonClasses.push(`bg-color-${bg}`);
+      if (bold) buttonClasses.push('actions-button-bold');
+      if (disabled) buttonClasses.push('disabled');
+
+      if (label) {
+        return $jsx("div", {
+          class: buttonClasses.join(' ')
+        }, text);
+      }
+
+      return $jsx("div", {
+        class: buttonClasses.join(' ')
+      }, icon && $jsx("div", {
+        class: "actions-button-media"
+      }, icon), $jsx("div", {
+        class: "actions-button-text"
+      }, text));
+    }))));
+  }
+
+  renderPopover() {
+    const actions = this;
+    if (actions.params.renderPopover) return actions.params.renderPopover.call(actions, actions);
+    const {
+      groups
+    } = actions;
+    const cssClass = actions.params.cssClass;
+    return $jsx("div", {
+      class: `popover popover-from-actions ${cssClass || ''}`
+    }, $jsx("div", {
+      class: "popover-inner"
+    }, groups.map(group => $jsx("div", {
+      class: "list"
+    }, $jsx("ul", null, group.map(button => {
+      const itemClasses = [];
+      const {
+        color,
+        bg,
+        bold,
+        disabled,
+        label,
+        text,
+        icon
+      } = button;
+      if (color) itemClasses.push(`color-${color}`);
+      if (bg) itemClasses.push(`bg-color-${bg}`);
+      if (bold) itemClasses.push('popover-from-actions-bold');
+      if (disabled) itemClasses.push('disabled');
+
+      if (label) {
+        itemClasses.push('popover-from-actions-label');
+        return `<li class="${itemClasses.join(' ')}">${text}</li>`;
+      }
+
+      if (icon) {
+        itemClasses.push('item-link item-content');
+        return $jsx("li", null, $jsx("a", {
+          class: itemClasses.join(' ')
+        }, $jsx("div", {
+          class: "item-media"
+        }, icon), $jsx("div", {
+          class: "item-inner"
+        }, $jsx("div", {
+          class: "item-title"
+        }, text))));
+      }
+
+      itemClasses.push('list-button');
+      return $jsx("li", null, $jsx("a", {
+        class: itemClasses.join(' ')
+      }, text));
+    }))))));
+  }
+
+}
+
+export default Actions;

package/components/actions/actions-rtl.css

@@ -1 +1 @@
-:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .theme-dark,:root.theme-dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .theme-dark,.ios.theme-dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .theme-dark,.md.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .theme-dark,.aurora.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .dark,:root.dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .dark,.md.dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .dark,.aurora.dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}

package/components/actions/actions.css

@@ -1 +1 @@
-:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .theme-dark,:root.theme-dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .theme-dark,.ios.theme-dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .theme-dark,.md.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .theme-dark,.aurora.theme-dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-text-color:#757575;--f7-actions-grid-button-icon-size:48px}:root .dark,:root.dark{--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.ios{--f7-actions-border-radius:13px;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50}.md{--f7-actions-border-radius:0px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:16px;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-bg-color:#fff;--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.54);--f7-actions-group-border-color:rgba(0, 0, 0, 0.12)}.md .dark,.md.dark{--f7-actions-bg-color:#202020;--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.aurora{--f7-actions-border-radius:8px;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:center;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:10px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-justify-content:center;--f7-actions-group-margin:16px;--f7-actions-bg-color:#fff;--f7-actions-button-border-color:rgba(0, 0, 0, 0.12);--f7-actions-button-pressed-bg-color:#e5e5e5;--f7-actions-label-text-color:rgba(0, 0, 0, 0.5);--f7-actions-group-border-color:rgba(0, 0, 0, 0.1)}.aurora .dark,.aurora.dark{--f7-actions-bg-color:#202020;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:#2e2e2e;--f7-actions-group-border-color:rgba(255, 255, 255, 0.15)}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);border-radius:var(--f7-actions-border-radius);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align);background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button,.ios-translucent-modals .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button:first-child,.actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-button:last-child,.actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-button:last-child:after,.actions-label:last-child:after{display:none!important}.actions-button:first-child:last-child,.actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button b,.actions-button.actions-button-bold,.actions-label b,.actions-label.actions-button-bold{font-weight:600}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;border-radius:0;background:var(--f7-actions-bg-color);margin-top:0}.actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{border-radius:0!important;background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-button{transition-duration:.3s}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}.aurora .actions-button-media{margin-left:16px}.aurora .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}

package/components/actions/actions.js

@@ -1 +1,42 @@
-(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var t=o.$,n=o.utils,r=o.getDevice,a=(o.getSupport,o.Class,o.Modal),s=(o.ConstructorMethods,o.ModalMethods);function i(o){this.wrapped=o}function c(o){var e,t;function n(e,t){try{var a=o[e](t),s=a.value,c=s instanceof i;Promise.resolve(c?s.wrapped:s).then((function(o){c?n("return"===e?"return":"next",o):r(a.done?"return":"normal",o)}),(function(o){n("throw",o)}))}catch(o){r("throw",o)}}function r(o,r){switch(o){case"return":e.resolve({value:r,done:!0});break;case"throw":e.reject(r);break;default:e.resolve({value:r,done:!1})}(e=e.next)?n(e.key,e.arg):t=null}this._invoke=function(o,r){return new Promise((function(a,s){var i={key:o,arg:r,resolve:a,reject:s,next:null};t?t=t.next=i:(e=t=i,n(o,r))}))},"function"!=typeof o.return&&(this.return=void 0)}function l(o,e){return(l=Object.setPrototypeOf||function(o,e){return o.__proto__=e,o})(o,e)}function p(o){if(void 0===o)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return o}c.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},c.prototype.next=function(o){return this._invoke("next",o)},c.prototype.throw=function(o){return this._invoke("throw",o)},c.prototype.return=function(o){return this._invoke("return",o)};var d=n.extend,u=n.nextTick,m=function(o){var e,n;function a(e,n){var a,s,i,c,l=d({on:{}},e.params.actions,n),m=p(a=o.call(this,e,l)||this),f=r();if(m.params=l,m.params.buttons&&(s=m.params.buttons,Array.isArray(s[0])||(s=[s])),m.groups=s,m.params.el?i=t(m.params.el).eq(0):m.params.content?i=t(m.params.content).filter((function(o){return 1===o.nodeType})).eq(0):m.params.buttons&&(m.params.convertToPopover&&(m.popoverHtml=m.renderPopover()),m.actionsHtml=m.render()),i&&i.length>0&&i[0].f7Modal)return i[0].f7Modal||p(a);if(i&&0===i.length&&!m.actionsHtml&&!m.popoverHtml)return m.destroy()||p(a);m.params.backdrop&&m.params.backdropEl?c=t(m.params.backdropEl):m.params.backdrop&&0===(c=m.$containerEl.children(".actions-backdrop")).length&&(c=t('<div class="actions-backdrop"></div>'),m.$containerEl.append(c));var v,b=m.open,h=m.close;function k(o){var e,n,r=t(this);if(r.hasClass("list-button")||r.hasClass("item-link")?(e=r.parents("li").index(),n=r.parents(".list").index()):(e=r.index(),n=r.parents(".actions-group").index()),void 0!==s){var a=s[n][e];a.onClick&&a.onClick(m,o),m.params.onClick&&m.params.onClick(m,o),!1!==a.close&&m.close()}}function y(o){var e=o.target,n=t(e);!f.desktop&&f.cordova&&(window.Keyboard&&window.Keyboard.isVisible||window.cordova.plugins&&window.cordova.plugins.Keyboard&&window.cordova.plugins.Keyboard.isVisible)||0===n.closest(m.el).length&&(m.params.closeByBackdropClick&&m.params.backdrop&&m.backdropEl&&m.backdropEl===e||m.params.closeByOutsideClick)&&m.close()}function $(o){27===o.keyCode&&m.params.closeOnEscape&&m.close()}return m.open=function(o){var n=!1,r=m.params,a=r.targetEl,s=r.targetX,i=r.targetY,c=r.targetWidth,l=r.targetHeight;return m.params.convertToPopover&&(a||void 0!==s&&void 0!==i)&&(m.params.forceToPopover||f.ios&&f.ipad||e.width>=768||f.desktop&&"aurora"===e.theme)&&(n=!0),n&&m.popoverHtml?((v=e.popover.create({containerEl:m.params.containerEl,content:m.popoverHtml,backdrop:m.params.backdrop,targetEl:a,targetX:s,targetY:i,targetWidth:c,targetHeight:l,on:{open:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:open "+m.type.toLowerCase()+":open"),m.emit("local::open modalOpen "+m.type+"Open",m)},opened:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:opened "+m.type.toLowerCase()+":opened"),m.emit("local::opened modalOpened "+m.type+"Opened",m)},close:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:close "+m.type.toLowerCase()+":close"),m.emit("local::close modalClose "+m.type+"Close",m)},closed:function(){m.$el||(m.$el=v.$el),m.$el.trigger("modal:closed "+m.type.toLowerCase()+":closed"),m.emit("local::closed modalClosed "+m.type+"Closed",m)}}})).open(o),v.once("popoverOpened",(function(){v.$el.find(".list-button, .item-link").each((function(o){t(o).on("click",k)}))})),v.once("popoverClosed",(function(){v.$el.find(".list-button, .item-link").each((function(o){t(o).off("click",k)})),u((function(){v.destroy(),v=void 0}))}))):(m.$el=m.actionsHtml?t(m.actionsHtml):m.$el,m.$el[0].f7Modal=m,m.groups&&(m.$el.find(".actions-button").each((function(o){t(o).on("click",k)})),m.once("actionsClosed",(function(){m.$el.find(".actions-button").each((function(o){t(o).off("click",k)}))}))),m.el=m.$el[0],b.call(m,o)),m},m.close=function(o){return v?v.close(o):h.call(m,o),m},d(m,{app:e,$el:i,el:i?i[0]:void 0,$backdropEl:c,backdropEl:c&&c[0],type:"actions"}),m.params.closeOnEscape&&(m.on("open",(function(){t(document).on("keydown",$)})),m.on("close",(function(){t(document).off("keydown",$)}))),m.on("opened",(function(){(m.params.closeByBackdropClick||m.params.closeByOutsideClick)&&e.on("click",y)})),m.on("close",(function(){(m.params.closeByBackdropClick||m.params.closeByOutsideClick)&&e.off("click",y)})),i&&(i[0].f7Modal=m),m||p(a)}n=o,(e=a).prototype=Object.create(n.prototype),e.prototype.constructor=e,l(e,n);var s=a.prototype;return s.render=function(){var o=this;if(o.params.render)return o.params.render.call(o,o);var e=o.groups,t=o.params.cssClass;return $jsx("div",{class:"actions-modal"+(o.params.grid?" actions-grid":"")+" "+(t||"")},e.map((function(o){return $jsx("div",{class:"actions-group"},o.map((function(o){var e=["actions-"+(o.label?"label":"button")],t=o.color,n=o.bg,r=o.bold,a=o.disabled,s=o.label,i=o.text,c=o.icon;return t&&e.push("color-"+t),n&&e.push("bg-color-"+n),r&&e.push("actions-button-bold"),a&&e.push("disabled"),s?$jsx("div",{class:e.join(" ")},i):$jsx("div",{class:e.join(" ")},c&&$jsx("div",{class:"actions-button-media"},c),$jsx("div",{class:"actions-button-text"},i))})))})))},s.renderPopover=function(){var o=this;if(o.params.renderPopover)return o.params.renderPopover.call(o,o);var e=o.groups,t=o.params.cssClass;return $jsx("div",{class:"popover popover-from-actions "+(t||"")},$jsx("div",{class:"popover-inner"},e.map((function(o){return $jsx("div",{class:"list"},$jsx("ul",null,o.map((function(o){var e=[],t=o.color,n=o.bg,r=o.bold,a=o.disabled,s=o.label,i=o.text,c=o.icon;return t&&e.push("color-"+t),n&&e.push("bg-color-"+n),r&&e.push("popover-from-actions-bold"),a&&e.push("disabled"),s?(e.push("popover-from-actions-label"),'<li class="'+e.join(" ")+'">'+i+"</li>"):c?(e.push("item-link item-content"),$jsx("li",null,$jsx("a",{class:e.join(" ")},$jsx("div",{class:"item-media"},c),$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},i))))):(e.push("list-button"),$jsx("li",null,$jsx("a",{class:e.join(" ")},i)))}))))}))))},a}(a),f={name:"actions",params:{actions:{convertToPopover:!0,forceToPopover:!1,backdrop:!0,backdropEl:void 0,cssClass:null,closeByBackdropClick:!0,closeOnEscape:!1,render:null,renderPopover:null,containerEl:null}},static:{Actions:m},create:function(){this.actions=s({app:this,constructor:m,defaultSelector:".actions-modal.modal-in"})},clicks:{".actions-open":function(o,e){void 0===e&&(e={});this.actions.open(e.actions,e.animate,o)},".actions-close":function(o,e){void 0===e&&(e={});this.actions.close(e.actions,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[f.name])return;o.use(f),o.instance&&(o.instance.useModuleParams(f,o.instance.params),o.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import Actions from './actions-class';
+import ModalMethods from '../../shared/modal-methods';
+export default {
+  name: 'actions',
+  params: {
+    actions: {
+      convertToPopover: true,
+      forceToPopover: false,
+      backdrop: true,
+      backdropEl: undefined,
+      cssClass: null,
+      closeByBackdropClick: true,
+      closeOnEscape: false,
+      render: null,
+      renderPopover: null,
+      containerEl: null
+    }
+  },
+  static: {
+    Actions
+  },
+
+  create() {
+    const app = this;
+    app.actions = ModalMethods({
+      app,
+      constructor: Actions,
+      defaultSelector: '.actions-modal.modal-in'
+    });
+  },
+
+  clicks: {
+    '.actions-open': function openActions($clickedEl, data = {}) {
+      const app = this;
+      app.actions.open(data.actions, data.animate, $clickedEl);
+    },
+    '.actions-close': function closeActions($clickedEl, data = {}) {
+      const app = this;
+      app.actions.close(data.actions, data.animate, $clickedEl);
+    }
+  }
+};