@venite/components 0.16.7 → 0.16.13

package/dist/cjs/ion-fab-button.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const theme = require('./theme-81caa5b0.js');
+
+const fabButtonIosCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){margin-left:8px;margin-right:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-button-small){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}}.close-icon{left:0;right:0;top:0;display:flex;position:absolute;align-items:center;justify-content:center;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transition:0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59)}:host(.ion-activated){--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transform:scale(1.1);--transition:0.2s transform ease-out}::slotted(ion-icon),.close-icon{font-size:28px}:host(.fab-button-in-list){--background:var(--ion-color-light, #f4f5f8);--background-activated:var(--ion-color-light-shade, #d7d8da);--background-focused:var(--background-activated);--background-hover:var(--ion-color-light-tint, #f5f6f9);--color:var(--ion-color-light-contrast, #000);--color-activated:var(--ion-color-light-contrast, #000);--color-focused:var(--color-activated);--transition:transform 200ms ease 10ms, opacity 200ms ease 10ms}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}:host(.ion-color.ion-focused) .button-native,:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after,:host(.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent){--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);--background-hover:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);--background-focused:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);--backdrop-filter:saturate(180%) blur(20px)}:host(.fab-button-translucent-in-list){--background:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);--background-hover:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);--background-focused:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82)}}@supports (backdrop-filter: blur(0)){@media (any-hover: hover){:host(.fab-button-translucent.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb), 0.8)}}:host(.ion-color.fab-button-translucent) .button-native{background:rgba(var(--ion-color-base-rgb), 0.9)}:host(.ion-color.ion-focused.fab-button-translucent) .button-native,:host(.ion-color.ion-activated.fab-button-translucent) .button-native{background:var(--ion-color-base)}}";
+
+const fabButtonMdCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){margin-left:8px;margin-right:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-button-small){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}}.close-icon{left:0;right:0;top:0;display:flex;position:absolute;align-items:center;justify-content:center;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms}:host(.ion-activated){--box-shadow:0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12)}::slotted(ion-icon),.close-icon{font-size:24px}:host(.fab-button-in-list){--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-activated:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-focused:var(--color-activated);--background:var(--ion-color-light, #f4f5f8);--background-activated:transparent;--background-focused:var(--ion-color-light-shade, #d7d8da);--background-hover:var(--ion-color-light-tint, #f5f6f9)}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native::after{background:transparent}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}}";
+
+const FabButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionFocus = index.createEvent(this, "ionFocus", 7);
+    this.ionBlur = index.createEvent(this, "ionBlur", 7);
+    /**
+     * If `true`, the fab button will be show a close icon.
+     */
+    this.activated = false;
+    /**
+     * If `true`, the user cannot interact with the fab button.
+     */
+    this.disabled = false;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+    /**
+     * If `true`, the fab button will show when in a fab-list.
+     */
+    this.show = false;
+    /**
+     * If `true`, the fab button will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+  }
+  render() {
+    const { el, disabled, color, href, activated, show, translucent, size } = this;
+    const inList = theme.hostContext('ion-fab-list', el);
+    const mode = ionicGlobal.getIonMode(this);
+    const TagType = href === undefined ? 'button' : 'a';
+    const attrs = (TagType === 'button')
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href,
+        rel: this.rel,
+        target: this.target
+      };
+    return (index.h(index.Host, { "aria-disabled": disabled ? 'true' : null, class: Object.assign(Object.assign({}, theme.createColorClasses(color)), { [mode]: true, 'fab-button-in-list': inList, 'fab-button-translucent-in-list': inList && translucent, 'fab-button-close-active': activated, 'fab-button-show': show, 'fab-button-disabled': disabled, 'fab-button-translucent': translucent, 'ion-activatable': true, 'ion-focusable': true, [`fab-button-${size}`]: size !== undefined }) }, index.h(TagType, Object.assign({}, attrs, { class: "button-native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => theme.openURL(href, ev, this.routerDirection) }), index.h("span", { class: "close-icon" }, index.h("ion-icon", { name: "close", lazy: false })), index.h("span", { class: "button-inner" }, index.h("slot", null)), mode === 'md' && index.h("ion-ripple-effect", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+FabButton.style = {
+  ios: fabButtonIosCss,
+  md: fabButtonMdCss
+};
+
+exports.ion_fab_button = FabButton;

package/dist/cjs/ion-fab-list.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+
+const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:66px;margin-bottom:66px;display:none;position:absolute;top:0;flex-direction:column;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin-left:5px;margin-right:5px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin-left:unset;margin-right:unset;-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px}}::slotted(.fab-button-in-list.fab-button-show){transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;flex-direction:column-reverse}:host(.fab-list-side-start){margin-left:66px;margin-right:66px;margin-top:0;margin-bottom:0;right:0;flex-direction:row-reverse}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-list-side-start){margin-left:unset;margin-right:unset;-webkit-margin-start:66px;margin-inline-start:66px;-webkit-margin-end:66px;margin-inline-end:66px}}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}:host(.fab-list-side-end){margin-left:66px;margin-right:66px;margin-top:0;margin-bottom:0;left:0;flex-direction:row}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-list-side-end){margin-left:unset;margin-right:unset;-webkit-margin-start:66px;margin-inline-start:66px;-webkit-margin-end:66px;margin-inline-end:66px}}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}";
+
+const FabList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, the fab list will show all fab buttons in the list.
+     */
+    this.activated = false;
+    /**
+     * The side the fab list will show on relative to the main fab button.
+     */
+    this.side = 'bottom';
+  }
+  activatedChanged(activated) {
+    const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
+    // if showing the fabs add a timeout, else show immediately
+    const timeout = activated ? 30 : 0;
+    fabs.forEach((fab, i) => {
+      setTimeout(() => fab.show = activated, i * timeout);
+    });
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        'fab-list-active': this.activated,
+        [`fab-list-side-${this.side}`]: true
+      } }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "activated": ["activatedChanged"]
+  }; }
+};
+FabList.style = fabListCss;
+
+exports.ion_fab_list = FabList;

package/dist/cjs/ion-fab.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+
+const fabCss = ":host{position:absolute;z-index:999}:host(.fab-horizontal-center){left:50%;margin-left:-28px}:host-context([dir=rtl]):host(.fab-horizontal-center),:host-context([dir=rtl]).fab-horizontal-center{left:unset;right:unset;right:50%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-horizontal-center){margin-left:unset;-webkit-margin-start:-28px;margin-inline-start:-28px}}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:-28px}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:-28px}:host(.fab-vertical-center){margin-top:-28px;top:50%}";
+
+const Fab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, the fab will display on the edge of the header if
+     * `vertical` is `"top"`, and on the edge of the footer if
+     * it is `"bottom"`. Should be used with a `fixed` slot.
+     */
+    this.edge = false;
+    /**
+     * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
+     * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
+     */
+    this.activated = false;
+    this.onClick = () => {
+      const hasList = !!this.el.querySelector('ion-fab-list');
+      const getButton = this.getFab();
+      const isButtonDisabled = getButton && getButton.disabled;
+      if (hasList && !isButtonDisabled) {
+        this.activated = !this.activated;
+      }
+    };
+  }
+  activatedChanged() {
+    const activated = this.activated;
+    const fab = this.getFab();
+    if (fab) {
+      fab.activated = activated;
+    }
+    Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => {
+      list.activated = activated;
+    });
+  }
+  componentDidLoad() {
+    if (this.activated) {
+      this.activatedChanged();
+    }
+  }
+  /**
+   * Close an active FAB list container.
+   */
+  async close() {
+    this.activated = false;
+  }
+  getFab() {
+    return this.el.querySelector('ion-fab-button');
+  }
+  render() {
+    const { horizontal, vertical, edge } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { onClick: this.onClick, class: {
+        [mode]: true,
+        [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
+        [`fab-vertical-${vertical}`]: vertical !== undefined,
+        'fab-edge': edge
+      } }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "activated": ["activatedChanged"]
+  }; }
+};
+Fab.style = fabCss;
+
+exports.ion_fab = Fab;

package/dist/cjs/ion-footer.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+
+const footerIosCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports (backdrop-filter: blur(0)){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}";
+
+const footerMdCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md::before{left:0;top:-2px;bottom:auto;background-position:left 0 top 0;position:absolute;width:100%;height:2px;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==\");background-repeat:repeat-x;content:\"\"}[dir=rtl] .footer-md::before,:host-context([dir=rtl]) .footer-md::before{left:unset;right:unset;right:0}[dir=rtl] .footer-md::before,:host-context([dir=rtl]) .footer-md::before{background-position:right 0 top 0}.footer-md.ion-no-border::before{display:none}";
+
+const Footer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, the footer will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     *
+     * Note: In order to scroll content behind the footer, the `fullscreen`
+     * attribute needs to be set on the content.
+     */
+    this.translucent = false;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    const translucent = this.translucent;
+    return (index.h(index.Host, { role: "contentinfo", class: {
+        [mode]: true,
+        // Used internally for styling
+        [`footer-${mode}`]: true,
+        [`footer-translucent`]: translucent,
+        [`footer-translucent-${mode}`]: translucent,
+      } }, mode === 'ios' && translucent &&
+      index.h("div", { class: "footer-background" }), index.h("slot", null)));
+  }
+};
+Footer.style = {
+  ios: footerIosCss,
+  md: footerMdCss
+};
+
+exports.ion_footer = Footer;

package/dist/cjs/ion-img.cjs.entry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+
+const imgCss = ":host{display:block;object-fit:contain}img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}";
+
+const Img = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionImgWillLoad = index.createEvent(this, "ionImgWillLoad", 7);
+    this.ionImgDidLoad = index.createEvent(this, "ionImgDidLoad", 7);
+    this.ionError = index.createEvent(this, "ionError", 7);
+    this.onLoad = () => {
+      this.ionImgDidLoad.emit();
+    };
+    this.onError = () => {
+      this.ionError.emit();
+    };
+  }
+  srcChanged() {
+    this.addIO();
+  }
+  componentDidLoad() {
+    this.addIO();
+  }
+  addIO() {
+    if (this.src === undefined) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      this.removeIO();
+      this.io = new IntersectionObserver(data => {
+        // because there will only ever be one instance
+        // of the element we are observing
+        // we can just use data[0]
+        if (data[0].isIntersecting) {
+          this.load();
+          this.removeIO();
+        }
+      });
+      this.io.observe(this.el);
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => this.load(), 200);
+    }
+  }
+  load() {
+    this.loadError = this.onError;
+    this.loadSrc = this.src;
+    this.ionImgWillLoad.emit();
+  }
+  removeIO() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: ionicGlobal.getIonMode(this) }, index.h("img", { decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "src": ["srcChanged"]
+  }; }
+};
+Img.style = imgCss;
+
+exports.ion_img = Img;

package/dist/cjs/ion-infinite-scroll-content.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const index$1 = require('./index-4b7e4228.js');
+
+const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{margin-left:32px;margin-right:32px;margin-top:4px;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.infinite-loading-text{margin-left:unset;margin-right:unset;-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px}}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}";
+
+const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{margin-left:32px;margin-right:32px;margin-top:4px;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.infinite-loading-text{margin-left:unset;margin-right:unset;-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px}}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}";
+
+const InfiniteScrollContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    if (this.loadingSpinner === undefined) {
+      const mode = ionicGlobal.getIonMode(this);
+      this.loadingSpinner = ionicGlobal.config.get('infiniteLoadingSpinner', ionicGlobal.config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+    }
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        // Used internally for styling
+        [`infinite-scroll-content-${mode}`]: true
+      } }, index.h("div", { class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { class: "infinite-loading-spinner" }, index.h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText && (index.h("div", { class: "infinite-loading-text", innerHTML: index$1.sanitizeDOMString(this.loadingText) })))));
+  }
+};
+InfiniteScrollContent.style = {
+  ios: infiniteScrollContentIosCss,
+  md: infiniteScrollContentMdCss
+};
+
+exports.ion_infinite_scroll_content = InfiniteScrollContent;

package/dist/cjs/ion-infinite-scroll.cjs.entry.js

@@ -0,0 +1,206 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+
+const infiniteScrollCss = "ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}";
+
+const InfiniteScroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionInfinite = index.createEvent(this, "ionInfinite", 7);
+    this.thrPx = 0;
+    this.thrPc = 0;
+    this.didFire = false;
+    this.isBusy = false;
+    this.isLoading = false;
+    /**
+     * The threshold distance from the bottom
+     * of the content to call the `infinite` output event when scrolled.
+     * The threshold value can be either a percent, or
+     * in pixels. For example, use the value of `10%` for the `infinite`
+     * output event to get called when the user has scrolled 10%
+     * from the bottom of the page. Use the value `100px` when the
+     * scroll is within 100 pixels from the bottom of the page.
+     */
+    this.threshold = '15%';
+    /**
+     * If `true`, the infinite scroll will be hidden and scroll event listeners
+     * will be removed.
+     *
+     * Set this to true to disable the infinite scroll from actively
+     * trying to receive new data while scrolling. This is useful
+     * when it is known that there is no more data that can be added, and
+     * the infinite scroll is no longer needed.
+     */
+    this.disabled = false;
+    /**
+     * The position of the infinite scroll element.
+     * The value can be either `top` or `bottom`.
+     */
+    this.position = 'bottom';
+    this.onScroll = () => {
+      const scrollEl = this.scrollEl;
+      if (!scrollEl || !this.canStart()) {
+        return 1;
+      }
+      const infiniteHeight = this.el.offsetHeight;
+      if (infiniteHeight === 0) {
+        // if there is no height of this element then do nothing
+        return 2;
+      }
+      const scrollTop = scrollEl.scrollTop;
+      const scrollHeight = scrollEl.scrollHeight;
+      const height = scrollEl.offsetHeight;
+      const threshold = this.thrPc !== 0 ? (height * this.thrPc) : this.thrPx;
+      const distanceFromInfinite = (this.position === 'bottom')
+        ? scrollHeight - infiniteHeight - scrollTop - threshold - height
+        : scrollTop - infiniteHeight - threshold;
+      if (distanceFromInfinite < 0) {
+        if (!this.didFire) {
+          this.isLoading = true;
+          this.didFire = true;
+          this.ionInfinite.emit();
+          return 3;
+        }
+      }
+      else {
+        this.didFire = false;
+      }
+      return 4;
+    };
+  }
+  thresholdChanged() {
+    const val = this.threshold;
+    if (val.lastIndexOf('%') > -1) {
+      this.thrPx = 0;
+      this.thrPc = (parseFloat(val) / 100);
+    }
+    else {
+      this.thrPx = parseFloat(val);
+      this.thrPc = 0;
+    }
+  }
+  disabledChanged() {
+    const disabled = this.disabled;
+    if (disabled) {
+      this.isLoading = false;
+      this.isBusy = false;
+    }
+    this.enableScrollEvents(!disabled);
+  }
+  async connectedCallback() {
+    const contentEl = this.el.closest('ion-content');
+    if (!contentEl) {
+      console.error('<ion-infinite-scroll> must be used inside an <ion-content>');
+      return;
+    }
+    this.scrollEl = await contentEl.getScrollElement();
+    this.thresholdChanged();
+    this.disabledChanged();
+    if (this.position === 'top') {
+      index.writeTask(() => {
+        if (this.scrollEl) {
+          this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.enableScrollEvents(false);
+    this.scrollEl = undefined;
+  }
+  /**
+   * Call `complete()` within the `ionInfinite` output event handler when
+   * your async operation has completed. For example, the `loading`
+   * state is while the app is performing an asynchronous operation,
+   * such as receiving more data from an AJAX request to add more items
+   * to a data list. Once the data has been received and UI updated, you
+   * then call this method to signify that the loading has completed.
+   * This method will change the infinite scroll's state from `loading`
+   * to `enabled`.
+   */
+  async complete() {
+    const scrollEl = this.scrollEl;
+    if (!this.isLoading || !scrollEl) {
+      return;
+    }
+    this.isLoading = false;
+    if (this.position === 'top') {
+      /**
+       * New content is being added at the top, but the scrollTop position stays the same,
+       * which causes a scroll jump visually. This algorithm makes sure to prevent this.
+       * (Frame 1)
+       *    - complete() is called, but the UI hasn't had time to update yet.
+       *    - Save the current content dimensions.
+       *    - Wait for the next frame using _dom.read, so the UI will be updated.
+       * (Frame 2)
+       *    - Read the new content dimensions.
+       *    - Calculate the height difference and the new scroll position.
+       *    - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
+       * (Still frame 2, if I'm correct)
+       *    - Change the scroll position (= visually maintain the scroll position).
+       *    - Change the state to re-enable the InfiniteScroll.
+       *    - This should be after changing the scroll position, or it could
+       *    cause the InfiniteScroll to be triggered again immediately.
+       * (Frame 3)
+       *    Done.
+       */
+      this.isBusy = true;
+      // ******** DOM READ ****************
+      // Save the current content dimensions before the UI updates
+      const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
+      // ******** DOM READ ****************
+      requestAnimationFrame(() => {
+        index.readTask(() => {
+          // UI has updated, save the new content dimensions
+          const scrollHeight = scrollEl.scrollHeight;
+          // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
+          const newScrollTop = scrollHeight - prev;
+          // ******** DOM WRITE ****************
+          requestAnimationFrame(() => {
+            index.writeTask(() => {
+              scrollEl.scrollTop = newScrollTop;
+              this.isBusy = false;
+            });
+          });
+        });
+      });
+    }
+  }
+  canStart() {
+    return (!this.disabled &&
+      !this.isBusy &&
+      !!this.scrollEl &&
+      !this.isLoading);
+  }
+  enableScrollEvents(shouldListen) {
+    if (this.scrollEl) {
+      if (shouldListen) {
+        this.scrollEl.addEventListener('scroll', this.onScroll);
+      }
+      else {
+        this.scrollEl.removeEventListener('scroll', this.onScroll);
+      }
+    }
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    const disabled = this.disabled;
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        'infinite-scroll-loading': this.isLoading,
+        'infinite-scroll-enabled': !disabled
+      } }));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "threshold": ["thresholdChanged"],
+    "disabled": ["disabledChanged"]
+  }; }
+};
+InfiniteScroll.style = infiniteScrollCss;
+
+exports.ion_infinite_scroll = InfiniteScroll;