framework7 6.3.16 → 7.0.0-beta.12

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.js';
+import { nextFrame, bindMethods } from '../../shared/utils.js';
+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.lazy.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,370 @@
+/* eslint indent: ["off"] */
+import { getWindow, getDocument } from 'ssr-window';
+import { getDevice } from '../../shared/get-device.js';
+import { extend, nextTick } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+import $ from '../../shared/dom7.js';
+/** @jsx $jsx */
+
+import $jsx from '../../shared/$jsx.js';
+
+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) {
+      if (actions.params.backdropUnique) {
+        $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+        actions.$containerEl.append($backdropEl);
+      } else {
+        $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-backdrop-unique{z-index:13500}.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-backdrop-unique{z-index:13500}.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.d.ts

@@ -56,6 +56,8 @@ export namespace Actions {
     backdrop?: boolean;
     /** Backdrop element to share across instances */
     backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: boolean;
     /** Custom css class added to Actions Sheet element */
     cssClass?: string;
     /** When enabled, action sheet will be closed on backdrop click*/