@venite/components 0.16.33 → 0.16.36

package/dist/esm/ion-button_13.entry.js

@@ -1,1790 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, d as readTask, f as forceUpdate, w as writeTask, e as getAssetPath } from './index-f0f6a379.js';
-import { g as getIonMode$1, i as isPlatform, c as config } from './ionic-global-ef89a0a5.js';
-import { h as hasShadowDom, c as clamp, d as debounceEvent, r as raf } from './helpers-8c93393b.js';
-import { o as openURL, c as createColorClasses$1, h as hostContext } from './theme-74c22054.js';
-import { p as popoverController } from './overlays-06b43b65.js';
-import './book-4795ea34.js';
-import { C as Change } from './change-ea574d32.js';
-import { g as getComponentClosestLanguage } from './locale-de430ca1.js';
-import './hardware-back-button-b3b61715.js';
-
-const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;pointer-events:auto;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}@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)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-0.3em;margin-right:0.3em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}::slotted(ion-icon[slot=end]){margin-left:0.3em;margin-right:-0.2em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:10px;--padding-top:0;--padding-bottom:0;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:2.8em;font-size:16px;font-weight:500;letter-spacing:-0.03em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--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}:host(.button-outline){--border-radius:10px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:17px;font-weight:normal;letter-spacing:0}:host(.button-large){--border-radius:12px;--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--border-radius:6px;--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:hover),:host(.button-outline:hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after{background:#fff;opacity:0.1}}";
-
-const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;pointer-events:auto;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}@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)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-0.3em;margin-right:0.3em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}::slotted(ion-icon[slot=end]){margin-left:0.3em;margin-right:-0.2em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:4px;--padding-top:0;--padding-bottom:0;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n                background-color 15ms linear,\n                color 15ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:36px;font-size:14px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-strong){font-weight:bold}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast);opacity:0.24}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base);opacity:0.12}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast);opacity:0.08}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base);opacity:0.04}}";
-
-const Button = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.inItem = false;
-    this.inListHeader = false;
-    this.inToolbar = false;
-    /**
-     * The type of button.
-     */
-    this.buttonType = 'button';
-    /**
-     * If `true`, the user cannot interact with the 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`, activates a button with a heavier font weight.
-     */
-    this.strong = false;
-    /**
-     * The type of the button.
-     */
-    this.type = 'button';
-    this.handleClick = (ev) => {
-      if (this.type === 'button') {
-        openURL(this.href, ev, this.routerDirection);
-      }
-      else if (hasShadowDom(this.el)) {
-        // this button wants to specifically submit a form
-        // climb up the dom to see if we're in a <form>
-        // and if so, then use JS to submit it
-        const form = this.el.closest('form');
-        if (form) {
-          ev.preventDefault();
-          const fakeButton = document.createElement('button');
-          fakeButton.type = this.type;
-          fakeButton.style.display = 'none';
-          form.appendChild(fakeButton);
-          fakeButton.click();
-          fakeButton.remove();
-        }
-      }
-    };
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-  }
-  componentWillLoad() {
-    this.inToolbar = !!this.el.closest('ion-buttons');
-    this.inListHeader = !!this.el.closest('ion-list-header');
-    this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
-  }
-  get hasIconOnly() {
-    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
-  }
-  get rippleType() {
-    const hasClearFill = this.fill === undefined || this.fill === 'clear';
-    // If the button is in a toolbar, has a clear fill (which is the default)
-    // and only has an icon we use the unbounded "circular" ripple effect
-    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
-      return 'unbounded';
-    }
-    return 'bounded';
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong } = this;
-    const finalSize = size === undefined && this.inItem ? 'small' : size;
-    const TagType = href === undefined ? 'button' : 'a';
-    const attrs = (TagType === 'button')
-      ? { type }
-      : {
-        download: this.download,
-        href,
-        rel,
-        target
-      };
-    let fill = this.fill;
-    if (fill === undefined) {
-      fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
-    }
-    return (h(Host, { onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses$1(color)), { [mode]: true, [buttonType]: true, [`${buttonType}-${expand}`]: expand !== undefined, [`${buttonType}-${finalSize}`]: finalSize !== undefined, [`${buttonType}-${shape}`]: shape !== undefined, [`${buttonType}-${fill}`]: true, [`${buttonType}-strong`]: strong, 'in-toolbar': hostContext('ion-toolbar', this.el), 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el), 'button-has-icon-only': hasIconOnly, 'button-disabled': disabled, 'ion-activatable': true, 'ion-focusable': true }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { class: "button-inner" }, h("slot", { name: "icon-only" }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
-  }
-  get el() { return getElement(this); }
-};
-Button.style = {
-  ios: buttonIosCss,
-  md: buttonMdCss
-};
-
-const buttonsIosCss = ".sc-ion-buttons-ios-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-start:5px;--padding-end:5px;margin-left:2px;margin-right:2px;height:32px;font-size:17px;font-weight:400}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-ios-s ion-button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-right:0.3em;font-size:24px;line-height:0.67}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-right:unset;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-left:0.4em;font-size:24px;line-height:0.67}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:unset;-webkit-margin-start:0.4em;margin-inline-start:0.4em}}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:28px;line-height:0.67}";
-
-const buttonsMdCss = ".sc-ion-buttons-md-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;--padding-start:8px;--padding-end:8px;--box-shadow:none;margin-left:2px;margin-right:2px;height:32px;font-size:14px;font-weight:500}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-md-s ion-button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}.sc-ion-buttons-md-s ion-button:not(.button-round){--border-radius:2px}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button{--color:initial;--color-focused:var(--ion-color-contrast);--color-hover:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-contrast);--background-hover:var(--ion-color-contrast)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-solid,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-solid{--background:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-shade);--background-hover:var(--ion-color-base);--color:var(--ion-color-base);--color-focused:var(--ion-color-base);--color-hover:var(--ion-color-base)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-outline,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-outline{--border-color:var(--ion-color-contrast)}.sc-ion-buttons-md-s .button-has-icon-only.button-clear{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:48px;height:48px}.sc-ion-buttons-md-s .button{--background-hover:currentColor}.sc-ion-buttons-md-s .button-solid{--color:var(--ion-toolbar-background, var(--ion-background-color, #fff));--background:var(--ion-toolbar-color, var(--ion-text-color, #424242));--background-activated:transparent;--background-focused:currentColor}.sc-ion-buttons-md-s .button-outline{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--border-color:currentColor}.sc-ion-buttons-md-s .button-clear{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor}.sc-ion-buttons-md-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-right:0.3em;font-size:1.4em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-md-s ion-icon[slot=start]{margin-right:unset;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-left:0.4em;font-size:1.4em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:unset;-webkit-margin-start:0.4em;margin-inline-start:0.4em}}.sc-ion-buttons-md-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.8em}";
-
-const Buttons = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If true, buttons will disappear when its
-     * parent toolbar has fully collapsed if the toolbar
-     * is not the first toolbar. If the toolbar is the
-     * first toolbar, the buttons will be hidden and will
-     * only be shown once all toolbars have fully collapsed.
-     *
-     * Only applies in `ios` mode with `collapse` set to
-     * `true` on `ion-header`.
-     *
-     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-     */
-    this.collapse = false;
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    return (h(Host, { class: {
-        [mode]: true,
-        ['buttons-collapse']: this.collapse
-      } }));
-  }
-};
-Buttons.style = {
-  ios: buttonsIosCss,
-  md: buttonsMdCss
-};
-
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{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)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;will-change:scroll-position}.scroll-y{touch-action:pan-y;overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{touch-action:pan-x;overflow-x:var(--overflow);overscroll-behavior-x:contain}.scroll-x.scroll-y{touch-action:auto}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){contain:none}:host(.content-sizing) .inner-scroll{position:relative}.transition-effect{display:none;position:absolute;left:-100%;width:100%;height:100%;opacity:0;pointer-events:none}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;right:0;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}::slotted([slot=fixed]){position:absolute}";
-
-const Content = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionScrollStart = createEvent(this, "ionScrollStart", 7);
-    this.ionScroll = createEvent(this, "ionScroll", 7);
-    this.ionScrollEnd = createEvent(this, "ionScrollEnd", 7);
-    this.isScrolling = false;
-    this.lastScroll = 0;
-    this.queued = false;
-    this.cTop = -1;
-    this.cBottom = -1;
-    // Detail is used in a hot loop in the scroll event, by allocating it here
-    // V8 will be able to inline any read/write to it since it's a monomorphic class.
-    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-    this.detail = {
-      scrollTop: 0,
-      scrollLeft: 0,
-      type: 'scroll',
-      event: undefined,
-      startX: 0,
-      startY: 0,
-      startTime: 0,
-      currentX: 0,
-      currentY: 0,
-      velocityX: 0,
-      velocityY: 0,
-      deltaX: 0,
-      deltaY: 0,
-      currentTime: 0,
-      data: undefined,
-      isScrolling: true,
-    };
-    /**
-     * If `true`, the content will scroll behind the headers
-     * and footers. This effect can easily be seen by setting the toolbar
-     * to transparent.
-     */
-    this.fullscreen = false;
-    /**
-     * If you want to enable the content scrolling in the X axis, set this property to `true`.
-     */
-    this.scrollX = false;
-    /**
-     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-     */
-    this.scrollY = true;
-    /**
-     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-     * and start listening from (ionScroll), set this property to `true`.
-     */
-    this.scrollEvents = false;
-  }
-  disconnectedCallback() {
-    this.onScrollEnd();
-  }
-  onAppLoad() {
-    this.resize();
-  }
-  onClick(ev) {
-    if (this.isScrolling) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-  }
-  shouldForceOverscroll() {
-    const { forceOverscroll } = this;
-    const mode = getIonMode$1(this);
-    return forceOverscroll === undefined
-      ? mode === 'ios' && isPlatform('ios')
-      : forceOverscroll;
-  }
-  resize() {
-    if (this.fullscreen) {
-      readTask(() => this.readDimensions());
-    }
-    else if (this.cTop !== 0 || this.cBottom !== 0) {
-      this.cTop = this.cBottom = 0;
-      forceUpdate(this);
-    }
-  }
-  readDimensions() {
-    const page = getPageElement(this.el);
-    const top = Math.max(this.el.offsetTop, 0);
-    const bottom = Math.max(page.offsetHeight - top - this.el.offsetHeight, 0);
-    const dirty = top !== this.cTop || bottom !== this.cBottom;
-    if (dirty) {
-      this.cTop = top;
-      this.cBottom = bottom;
-      forceUpdate(this);
-    }
-  }
-  onScroll(ev) {
-    const timeStamp = Date.now();
-    const shouldStart = !this.isScrolling;
-    this.lastScroll = timeStamp;
-    if (shouldStart) {
-      this.onScrollStart();
-    }
-    if (!this.queued && this.scrollEvents) {
-      this.queued = true;
-      readTask(ts => {
-        this.queued = false;
-        this.detail.event = ev;
-        updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
-        this.ionScroll.emit(this.detail);
-      });
-    }
-  }
-  /**
-   * Get the element where the actual scrolling takes place.
-   * This element can be used to subscribe to `scroll` events or manually modify
-   * `scrollTop`. However, it's recommended to use the API provided by `ion-content`:
-   *
-   * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
-   * and `scrollToPoint()` to scroll the content into a certain point.
-   */
-  getScrollElement() {
-    return Promise.resolve(this.scrollEl);
-  }
-  /**
-   * Scroll to the top of the component.
-   *
-   * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
-   */
-  scrollToTop(duration = 0) {
-    return this.scrollToPoint(undefined, 0, duration);
-  }
-  /**
-   * Scroll to the bottom of the component.
-   *
-   * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
-   */
-  scrollToBottom(duration = 0) {
-    const y = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
-    return this.scrollToPoint(undefined, y, duration);
-  }
-  /**
-   * Scroll by a specified X/Y distance in the component.
-   *
-   * @param x The amount to scroll by on the horizontal axis.
-   * @param y The amount to scroll by on the vertical axis.
-   * @param duration The amount of time to take scrolling by that amount.
-   */
-  scrollByPoint(x, y, duration) {
-    return this.scrollToPoint(x + this.scrollEl.scrollLeft, y + this.scrollEl.scrollTop, duration);
-  }
-  /**
-   * Scroll to a specified X/Y location in the component.
-   *
-   * @param x The point to scroll to on the horizontal axis.
-   * @param y The point to scroll to on the vertical axis.
-   * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
-   */
-  async scrollToPoint(x, y, duration = 0) {
-    const el = this.scrollEl;
-    if (duration < 32) {
-      if (y != null) {
-        el.scrollTop = y;
-      }
-      if (x != null) {
-        el.scrollLeft = x;
-      }
-      return;
-    }
-    let resolve;
-    let startTime = 0;
-    const promise = new Promise(r => resolve = r);
-    const fromY = el.scrollTop;
-    const fromX = el.scrollLeft;
-    const deltaY = y != null ? y - fromY : 0;
-    const deltaX = x != null ? x - fromX : 0;
-    // scroll loop
-    const step = (timeStamp) => {
-      const linearTime = Math.min(1, ((timeStamp - startTime) / duration)) - 1;
-      const easedT = Math.pow(linearTime, 3) + 1;
-      if (deltaY !== 0) {
-        el.scrollTop = Math.floor((easedT * deltaY) + fromY);
-      }
-      if (deltaX !== 0) {
-        el.scrollLeft = Math.floor((easedT * deltaX) + fromX);
-      }
-      if (easedT < 1) {
-        // do not use DomController here
-        // must use nativeRaf in order to fire in the next frame
-        // TODO: remove as any
-        requestAnimationFrame(step);
-      }
-      else {
-        resolve();
-      }
-    };
-    // chill out for a frame first
-    requestAnimationFrame(ts => {
-      startTime = ts;
-      step(ts);
-    });
-    return promise;
-  }
-  onScrollStart() {
-    this.isScrolling = true;
-    this.ionScrollStart.emit({
-      isScrolling: true
-    });
-    if (this.watchDog) {
-      clearInterval(this.watchDog);
-    }
-    // watchdog
-    this.watchDog = setInterval(() => {
-      if (this.lastScroll < Date.now() - 120) {
-        this.onScrollEnd();
-      }
-    }, 100);
-  }
-  onScrollEnd() {
-    clearInterval(this.watchDog);
-    this.watchDog = null;
-    if (this.isScrolling) {
-      this.isScrolling = false;
-      this.ionScrollEnd.emit({
-        isScrolling: false
-      });
-    }
-  }
-  render() {
-    const { scrollX, scrollY } = this;
-    const mode = getIonMode$1(this);
-    const forceOverscroll = this.shouldForceOverscroll();
-    const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', true));
-    this.resize();
-    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses$1(this.color)), { [mode]: true, 'content-sizing': hostContext('ion-popover', this.el), 'overscroll': forceOverscroll }), style: {
-        '--offset-top': `${this.cTop}px`,
-        '--offset-bottom': `${this.cBottom}px`,
-      } }, h("div", { id: "background-content", part: "background" }), h("main", { class: {
-        'inner-scroll': true,
-        'scroll-x': scrollX,
-        'scroll-y': scrollY,
-        'overscroll': (scrollX || scrollY) && forceOverscroll
-      }, ref: el => this.scrollEl = el, onScroll: (this.scrollEvents) ? ev => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
-  }
-  get el() { return getElement(this); }
-};
-const getParentElement = (el) => {
-  if (el.parentElement) {
-    // normal element with a parent element
-    return el.parentElement;
-  }
-  if (el.parentNode && el.parentNode.host) {
-    // shadow dom's document fragment
-    return el.parentNode.host;
-  }
-  return null;
-};
-const getPageElement = (el) => {
-  const tabs = el.closest('ion-tabs');
-  if (tabs) {
-    return tabs;
-  }
-  const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
-  if (page) {
-    return page;
-  }
-  return getParentElement(el);
-};
-// ******** DOM READ ****************
-const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
-  const prevX = detail.currentX;
-  const prevY = detail.currentY;
-  const prevT = detail.currentTime;
-  const currentX = el.scrollLeft;
-  const currentY = el.scrollTop;
-  const timeDelta = timestamp - prevT;
-  if (shouldStart) {
-    // remember the start positions
-    detail.startTime = timestamp;
-    detail.startX = currentX;
-    detail.startY = currentY;
-    detail.velocityX = detail.velocityY = 0;
-  }
-  detail.currentTime = timestamp;
-  detail.currentX = detail.scrollLeft = currentX;
-  detail.currentY = detail.scrollTop = currentY;
-  detail.deltaX = currentX - detail.startX;
-  detail.deltaY = currentY - detail.startY;
-  if (timeDelta > 0 && timeDelta < 100) {
-    const velocityX = (currentX - prevX) / timeDelta;
-    const velocityY = (currentY - prevY) / timeDelta;
-    detail.velocityX = velocityX * 0.7 + detail.velocityX * 0.3;
-    detail.velocityY = velocityY * 0.7 + detail.velocityY * 0.3;
-  }
-};
-Content.style = contentCss;
-
-const TRANSITION = 'all 0.2s ease-in-out';
-const cloneElement = (tagName) => {
-    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
-    if (getCachedEl !== null) {
-        return getCachedEl;
-    }
-    const clonedEl = document.createElement(tagName);
-    clonedEl.classList.add('ion-cloned-element');
-    clonedEl.style.setProperty('display', 'none');
-    document.body.appendChild(clonedEl);
-    return clonedEl;
-};
-const createHeaderIndex = (headerEl) => {
-    if (!headerEl) {
-        return;
-    }
-    const toolbars = headerEl.querySelectorAll('ion-toolbar');
-    return {
-        el: headerEl,
-        toolbars: Array.from(toolbars).map((toolbar) => {
-            const ionTitleEl = toolbar.querySelector('ion-title');
-            return {
-                el: toolbar,
-                background: toolbar.shadowRoot.querySelector('.toolbar-background'),
-                ionTitleEl,
-                innerTitleEl: (ionTitleEl) ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
-                ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || []
-            };
-        }) || []
-    };
-};
-const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
-    readTask(() => {
-        const scrollTop = scrollEl.scrollTop;
-        const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);
-        // Native refresher should not cause titles to scale
-        const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
-        if (nativeRefresher === null) {
-            writeTask(() => {
-                scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
-            });
-        }
-    });
-};
-const setToolbarBackgroundOpacity = (toolbar, opacity) => {
-    if (opacity === undefined) {
-        toolbar.background.style.removeProperty('--opacity');
-    }
-    else {
-        toolbar.background.style.setProperty('--opacity', opacity.toString());
-    }
-};
-const handleToolbarBorderIntersection = (ev, mainHeaderIndex) => {
-    if (!ev[0].isIntersecting) {
-        return;
-    }
-    /**
-     * There is a bug in Safari where overflow scrolling on a non-body element
-     * does not always reset the scrollTop position to 0 when letting go. It will
-     * set to 1 once the rubber band effect has ended. This causes the background to
-     * appear slightly on certain app setups.
-     */
-    const scale = (ev[0].intersectionRatio > 0.9) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
-    mainHeaderIndex.toolbars.forEach(toolbar => {
-        setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale);
-    });
-};
-/**
- * If toolbars are intersecting, hide the scrollable toolbar content
- * and show the primary toolbar content. If the toolbars are not intersecting,
- * hide the primary toolbar content and show the scrollable toolbar content
- */
-const handleToolbarIntersection = (ev, mainHeaderIndex, scrollHeaderIndex) => {
-    writeTask(() => {
-        handleToolbarBorderIntersection(ev, mainHeaderIndex);
-        const event = ev[0];
-        const intersection = event.intersectionRect;
-        const intersectionArea = intersection.width * intersection.height;
-        const rootArea = event.rootBounds.width * event.rootBounds.height;
-        const isPageHidden = intersectionArea === 0 && rootArea === 0;
-        const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
-        const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
-        const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
-        if (isPageHidden || isPageTransitioning) {
-            return;
-        }
-        if (event.isIntersecting) {
-            setHeaderActive(mainHeaderIndex, false);
-            setHeaderActive(scrollHeaderIndex);
-        }
-        else {
-            /**
-             * There is a bug with IntersectionObserver on Safari
-             * where `event.isIntersecting === false` when cancelling
-             * a swipe to go back gesture. Checking the intersection
-             * x, y, width, and height provides a workaround. This bug
-             * does not happen when using Safari + Web Animations,
-             * only Safari + CSS Animations.
-             */
-            const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
-            if (hasValidIntersection) {
-                setHeaderActive(mainHeaderIndex);
-                setHeaderActive(scrollHeaderIndex, false);
-                setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
-            }
-        }
-    });
-};
-const setHeaderActive = (headerIndex, active = true) => {
-    if (active) {
-        headerIndex.el.classList.remove('header-collapse-condense-inactive');
-    }
-    else {
-        headerIndex.el.classList.add('header-collapse-condense-inactive');
-    }
-};
-const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
-    toolbars.forEach(toolbar => {
-        const ionTitle = toolbar.ionTitleEl;
-        const titleDiv = toolbar.innerTitleEl;
-        if (!ionTitle || ionTitle.size !== 'large') {
-            return;
-        }
-        titleDiv.style.transformOrigin = 'left center';
-        titleDiv.style.transition = (transition) ? TRANSITION : '';
-        titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
-    });
-};
-
-const headerIosCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:7px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}";
-
-const headerMdCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:\"\"}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}";
-
-const Header = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.collapsibleHeaderInitialized = false;
-    /**
-     * If `true`, the header 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 header, the `fullscreen`
-     * attribute needs to be set on the content.
-     */
-    this.translucent = false;
-  }
-  async componentDidLoad() {
-    await this.checkCollapsibleHeader();
-  }
-  async componentDidUpdate() {
-    await this.checkCollapsibleHeader();
-  }
-  componentDidUnload() {
-    this.destroyCollapsibleHeader();
-  }
-  async checkCollapsibleHeader() {
-    // Determine if the header can collapse
-    const hasCollapse = this.collapse === 'condense';
-    const canCollapse = (hasCollapse && getIonMode$1(this) === 'ios') ? hasCollapse : false;
-    if (!canCollapse && this.collapsibleHeaderInitialized) {
-      this.destroyCollapsibleHeader();
-    }
-    else if (canCollapse && !this.collapsibleHeaderInitialized) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-      const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
-      await this.setupCollapsibleHeader(contentEl, pageEl);
-    }
-  }
-  destroyCollapsibleHeader() {
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = undefined;
-    }
-    if (this.scrollEl && this.contentScrollCallback) {
-      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
-      this.contentScrollCallback = undefined;
-    }
-    if (this.collapsibleMainHeader) {
-      this.collapsibleMainHeader.classList.remove('header-collapse-main');
-      this.collapsibleMainHeader = undefined;
-    }
-  }
-  async setupCollapsibleHeader(contentEl, pageEl) {
-    if (!contentEl || !pageEl) {
-      console.error('ion-header requires a content to collapse, make sure there is an ion-content.');
-      return;
-    }
-    this.scrollEl = await contentEl.getScrollElement();
-    const headers = pageEl.querySelectorAll('ion-header');
-    this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
-    if (!this.collapsibleMainHeader) {
-      return;
-    }
-    const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
-    const scrollHeaderIndex = createHeaderIndex(this.el);
-    if (!mainHeaderIndex || !scrollHeaderIndex) {
-      return;
-    }
-    setHeaderActive(mainHeaderIndex, false);
-    mainHeaderIndex.toolbars.forEach(toolbar => {
-      setToolbarBackgroundOpacity(toolbar, 0);
-    });
-    /**
-     * Handle interaction between toolbar collapse and
-     * showing/hiding content in the primary ion-header
-     * as well as progressively showing/hiding the main header
-     * border as the top-most toolbar collapses or expands.
-     */
-    const toolbarIntersection = (ev) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
-    this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { root: contentEl, threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] });
-    this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
-    /**
-     * Handle scaling of large iOS titles and
-     * showing/hiding border on last toolbar
-     * in primary header
-     */
-    this.contentScrollCallback = () => { handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl); };
-    this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
-    writeTask(() => {
-      const title = cloneElement('ion-title');
-      title.size = 'large';
-      cloneElement('ion-back-button');
-      if (this.collapsibleMainHeader !== undefined) {
-        this.collapsibleMainHeader.classList.add('header-collapse-main');
-      }
-    });
-    this.collapsibleHeaderInitialized = true;
-  }
-  render() {
-    const { translucent } = this;
-    const mode = getIonMode$1(this);
-    const collapse = this.collapse || 'none';
-    return (h(Host, { role: "banner", class: {
-        [mode]: true,
-        // Used internally for styling
-        [`header-${mode}`]: true,
-        [`header-translucent`]: this.translucent,
-        [`header-collapse-${collapse}`]: true,
-        [`header-translucent-${mode}`]: this.translucent,
-      } }, mode === 'ios' && translucent &&
-      h("div", { class: "header-background" }), h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-Header.style = {
-  ios: headerIosCss,
-  md: headerMdCss
-};
-
-let CACHED_MAP;
-const getIconMap = () => {
-    if (typeof window === 'undefined') {
-        return new Map();
-    }
-    else {
-        if (!CACHED_MAP) {
-            const win = window;
-            win.Ionicons = win.Ionicons || {};
-            CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
-        }
-        return CACHED_MAP;
-    }
-};
-const getUrl = (i) => {
-    let url = getSrc(i.src);
-    if (url) {
-        return url;
-    }
-    url = getName(i.name, i.icon, i.mode, i.ios, i.md);
-    if (url) {
-        return getNamedUrl(url);
-    }
-    if (i.icon) {
-        url = getSrc(i.icon);
-        if (url) {
-            return url;
-        }
-        url = getSrc(i.icon[i.mode]);
-        if (url) {
-            return url;
-        }
-    }
-    return null;
-};
-const getNamedUrl = (iconName) => {
-    const url = getIconMap().get(iconName);
-    if (url) {
-        return url;
-    }
-    return getAssetPath(`svg/${iconName}.svg`);
-};
-const getName = (iconName, icon, mode, ios, md) => {
-    // default to "md" if somehow the mode wasn't set
-    mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
-    // if an icon was passed in using the ios or md attributes
-    // set the iconName to whatever was passed in
-    if (ios && mode === 'ios') {
-        iconName = toLower(ios);
-    }
-    else if (md && mode === 'md') {
-        iconName = toLower(md);
-    }
-    else {
-        if (!iconName && icon && !isSrc(icon)) {
-            iconName = icon;
-        }
-        if (isStr(iconName)) {
-            iconName = toLower(iconName);
-        }
-    }
-    if (!isStr(iconName) || iconName.trim() === '') {
-        return null;
-    }
-    // only allow alpha characters and dash
-    const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
-    if (invalidChars !== '') {
-        return null;
-    }
-    return iconName;
-};
-const getSrc = (src) => {
-    if (isStr(src)) {
-        src = src.trim();
-        if (isSrc(src)) {
-            return src;
-        }
-    }
-    return null;
-};
-const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
-const isStr = (val) => typeof val === 'string';
-const toLower = (val) => val.toLowerCase();
-
-const validateContent = (svgContent) => {
-    if (svgContent && typeof document !== 'undefined') {
-        const div = document.createElement('div');
-        div.innerHTML = svgContent;
-        // setup this way to ensure it works on our buddy IE
-        for (let i = div.childNodes.length - 1; i >= 0; i--) {
-            if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
-                div.removeChild(div.childNodes[i]);
-            }
-        }
-        // must only have 1 root element
-        const svgElm = div.firstElementChild;
-        if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
-            const svgClass = svgElm.getAttribute('class') || '';
-            svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
-            // root element must be an svg
-            // lets double check we've got valid elements
-            // do not allow scripts
-            if (isValid(svgElm)) {
-                return div.innerHTML;
-            }
-        }
-    }
-    return '';
-};
-const isValid = (elm) => {
-    if (elm.nodeType === 1) {
-        if (elm.nodeName.toLowerCase() === 'script') {
-            return false;
-        }
-        for (let i = 0; i < elm.attributes.length; i++) {
-            const val = elm.attributes[i].value;
-            if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
-                return false;
-            }
-        }
-        for (let i = 0; i < elm.childNodes.length; i++) {
-            if (!isValid(elm.childNodes[i])) {
-                return false;
-            }
-        }
-    }
-    return true;
-};
-
-const ioniconContent = new Map();
-const requests = new Map();
-const getSvgContent = (url) => {
-    // see if we already have a request for this url
-    let req = requests.get(url);
-    if (!req) {
-        if (typeof fetch !== 'undefined') {
-            // we don't already have a request
-            req = fetch(url).then(rsp => {
-                if (rsp.ok) {
-                    return rsp.text().then(svgContent => {
-                        ioniconContent.set(url, validateContent(svgContent));
-                    });
-                }
-                ioniconContent.set(url, '');
-            });
-            // cache for the same requests
-            requests.set(url, req);
-        }
-        else {
-            // set to empty for ssr scenarios and resolve promise
-            ioniconContent.set(url, '');
-            return Promise.resolve();
-        }
-    }
-    return req;
-};
-
-const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
-
-const Icon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isVisible = false;
-    /**
-     * The mode determines which platform styles to use.
-     */
-    this.mode = getIonMode();
-    /**
-     * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
-     * Default, `false`.
-     */
-    this.lazy = false;
-  }
-  connectedCallback() {
-    // purposely do not return the promise here because loading
-    // the svg file should not hold up loading the app
-    // only load the svg if it's visible
-    this.waitUntilVisible(this.el, '50px', () => {
-      this.isVisible = true;
-      this.loadIcon();
-    });
-  }
-  disconnectedCallback() {
-    if (this.io) {
-      this.io.disconnect();
-      this.io = undefined;
-    }
-  }
-  waitUntilVisible(el, rootMargin, cb) {
-    if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
-      const io = this.io = new window.IntersectionObserver((data) => {
-        if (data[0].isIntersecting) {
-          io.disconnect();
-          this.io = undefined;
-          cb();
-        }
-      }, { rootMargin });
-      io.observe(el);
-    }
-    else {
-      // browser doesn't support IntersectionObserver
-      // so just fallback to always show it
-      cb();
-    }
-  }
-  loadIcon() {
-    if (this.isVisible) {
-      const url = getUrl(this);
-      if (url) {
-        if (ioniconContent.has(url)) {
-          // sync if it's already loaded
-          this.svgContent = ioniconContent.get(url);
-        }
-        else {
-          // async if it hasn't been loaded
-          getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
-        }
-      }
-    }
-    if (!this.ariaLabel) {
-      const label = getName(this.name, this.icon, this.mode, this.ios, this.md);
-      // user did not provide a label
-      // come up with the label based on the icon name
-      if (label) {
-        this.ariaLabel = label.replace(/\-/g, ' ');
-      }
-    }
-  }
-  render() {
-    const mode = this.mode || 'md';
-    const flipRtl = this.flipRtl || (this.ariaLabel && (this.ariaLabel.indexOf('arrow') > -1 || this.ariaLabel.indexOf('chevron') > -1) && this.flipRtl !== false);
-    return (h(Host, { role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl && this.el.ownerDocument.dir === 'rtl' }) }, ((this.svgContent)
-      ? h("div", { class: "icon-inner", innerHTML: this.svgContent })
-      : h("div", { class: "icon-inner" }))));
-  }
-  static get assetsDirs() { return ["svg"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "name": ["loadIcon"],
-    "src": ["loadIcon"],
-    "icon": ["loadIcon"]
-  }; }
-};
-const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
-const createColorClasses = (color) => {
-  return (color) ? {
-    'ion-color': true,
-    [`ion-color-${color}`]: true
-  } : null;
-};
-Icon.style = iconCss;
-
-const itemIosCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;box-sizing:border-box;overflow:hidden}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));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:flex;position:relative;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label){flex:1}:host([vertical-align-top]),:host(.item-input){align-items:flex-start}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box}:host(.item-label-stacked) .item-native,:host(.item-label-floating) .item-native{align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;bottom:0;position:absolute;background:var(--highlight-background);z-index:1}.item-highlight{height:var(--full-highlight-height)}.item-inner-highlight{height:var(--inset-highlight-height)}:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:20px;--inner-padding-end:10px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:#000;--background-focused:#000;--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--color:var(--ion-item-color, var(--ion-text-color, #000));--highlight-height:0;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);font-size:17px}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-interactive){--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px;--show-inset-highlight:0}::slotted([slot=start]){margin-left:0;margin-right:20px;margin-top:2px;margin-bottom:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:20px;margin-inline-end:20px}}::slotted([slot=end]){margin-left:10px;margin-right:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:0px;--padding-bottom:0px;--padding-start:.5em;--padding-end:.5em;height:24px;font-size:13px}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:0px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0px;margin-inline-start:0px}}::slotted(ion-label){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0px}";
-
-const itemMdCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;box-sizing:border-box;overflow:hidden}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));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:flex;position:relative;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label){flex:1}:host([vertical-align-top]),:host(.item-input){align-items:flex-start}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box}:host(.item-label-stacked) .item-native,:host(.item-label-floating) .item-native{align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;bottom:0;position:absolute;background:var(--highlight-background);z-index:1}.item-highlight{height:var(--full-highlight-height)}.item-inner-highlight{height:var(--inset-highlight-height)}:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--color:var(--ion-item-color, var(--ion-text-color, #000));--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--inner-padding-end:16px;--inner-border-width:0 0 1px 0;--highlight-height:2px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);font-size:16px;font-weight:normal;text-transform:none}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-full){--border-width:0 0 1px 0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0;--show-inset-highlight:0}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;align-self:flex-start}::slotted([slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted([slot=end]){margin-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;-webkit-margin-start:32px;margin-inline-start:32px}}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted(ion-icon[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;align-self:flex-start;font-size:11px}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-note[slot=start]){padding-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=start]){padding-right:unset;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-note[slot=end]){padding-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=end]){padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:unset;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:11px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}::slotted(.button-small){--padding-top:0;--padding-bottom:0;--padding-start:.6em;--padding-end:.6em;height:25px;font-size:12px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0}:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #3880ff)}";
-
-const Item = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.itemStyles = new Map();
-    this.multipleInputs = false;
-    /**
-     * If `true`, a button tag will be rendered and the item will be tappable.
-     */
-    this.button = false;
-    /**
-     * The icon to use when `detail` is set to `true`.
-     */
-    this.detailIcon = 'chevron-forward';
-    /**
-     * If `true`, the user cannot interact with the item.
-     */
-    this.disabled = false;
-    /**
-     * When using a router, it specifies the transition direction when navigating to
-     * another page using `href`.
-     */
-    this.routerDirection = 'forward';
-    /**
-     * The type of the button. Only used when an `onclick` or `button` property is present.
-     */
-    this.type = 'button';
-  }
-  itemStyle(ev) {
-    ev.stopPropagation();
-    const tagName = ev.target.tagName;
-    const updatedStyles = ev.detail;
-    const newStyles = {};
-    const childStyles = this.itemStyles.get(tagName) || {};
-    let hasStyleChange = false;
-    Object.keys(updatedStyles).forEach(key => {
-      if (updatedStyles[key]) {
-        const itemKey = `item-${key}`;
-        if (!childStyles[itemKey]) {
-          hasStyleChange = true;
-        }
-        newStyles[itemKey] = true;
-      }
-    });
-    if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
-      hasStyleChange = true;
-    }
-    if (hasStyleChange) {
-      this.itemStyles.set(tagName, newStyles);
-      forceUpdate(this);
-    }
-  }
-  componentDidLoad() {
-    // The following elements have a clickable cover that is relative to the entire item
-    const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-    // The following elements can accept focus alongside the previous elements
-    // therefore if these elements are also a child of item, we don't want the
-    // input cover on top of those interfering with their clicks
-    const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
-    // The following elements should also stay clickable when an input with cover is present
-    const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
-    // Check for multiple inputs to change the position of the input cover to relative
-    // for all of the covered inputs above
-    this.multipleInputs = covers.length + inputs.length > 1
-      || covers.length + clickables.length > 1
-      || covers.length > 0 && this.isClickable();
-  }
-  // If the item contains an input including a checkbox, datetime, select, or radio
-  // then the item will have a clickable input cover that covers the item
-  // that should get the hover, focused and activated states UNLESS it has multiple
-  // inputs, then those need to individually get each click
-  hasCover() {
-    const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-    return inputs.length === 1 && !this.multipleInputs;
-  }
-  // If the item has an href or button property it will render a native
-  // anchor or button that is clickable
-  isClickable() {
-    return (this.href !== undefined || this.button);
-  }
-  canActivate() {
-    return (this.isClickable() || this.hasCover());
-  }
-  render() {
-    const { detail, detailIcon, download, lines, disabled, href, rel, target, routerDirection } = this;
-    const childStyles = {};
-    const mode = getIonMode$1(this);
-    const clickable = this.isClickable();
-    const canActivate = this.canActivate();
-    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-    const attrs = (TagType === 'button')
-      ? { type: this.type }
-      : {
-        download,
-        href,
-        rel,
-        target
-      };
-    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
-    this.itemStyles.forEach(value => {
-      Object.assign(childStyles, value);
-    });
-    return (h(Host, { "aria-disabled": disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color)), { 'item': true, [mode]: true, [`item-lines-${lines}`]: lines !== undefined, 'item-disabled': disabled, 'in-list': hostContext('ion-list', this.el), 'item-multiple-inputs': this.multipleInputs, 'ion-activatable': canActivate, 'ion-focusable': true }) }, h(TagType, Object.assign({}, attrs, { class: "item-native", disabled: disabled, onClick: (ev) => openURL(href, ev, routerDirection) }), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon" }), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null)), h("div", { class: "item-highlight" })));
-  }
-  get el() { return getElement(this); }
-};
-Item.style = {
-  ios: itemIosCss,
-  md: itemMdCss
-};
-
-const labelIosCss = ".item.sc-ion-label-ios-h,.item .sc-ion-label-ios-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.ion-color.sc-ion-label-ios-h{color:var(--ion-color-base)}.ion-text-wrap.sc-ion-label-ios-h,[text-wrap].sc-ion-label-ios-h{white-space:normal}.item-interactive-disabled.sc-ion-label-ios-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-ios-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-ios-h,.item-input .sc-ion-label-ios-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-ios-h,.item-textarea .sc-ion-label-ios-h{align-self:baseline}.label-fixed.sc-ion-label-ios-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-ios-h,.label-floating.sc-ion-label-ios-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-ios-h{transition:none}.sc-ion-label-ios-s h1,.sc-ion-label-ios-s h2,.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-ios-h,[text-wrap].sc-ion-label-ios-h{font-size:14px;line-height:1.5}.label-stacked.sc-ion-label-ios-h{margin-bottom:4px;font-size:14px}.label-floating.sc-ion-label-ios-h{margin-bottom:0;transform:translate3d(0,  27px,  0);transform-origin:left top;transition:transform 150ms ease-in-out}[dir=rtl].sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl] .sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl].label-floating.sc-ion-label-ios-h,[dir=rtl] .label-floating.sc-ion-label-ios-h{transform-origin:right top}.item-has-focus.label-floating.sc-ion-label-ios-h,.item-has-focus .label-floating.sc-ion-label-ios-h,.item-has-placeholder.label-floating.sc-ion-label-ios-h,.item-has-placeholder .label-floating.sc-ion-label-ios-h,.item-has-value.label-floating.sc-ion-label-ios-h,.item-has-value .label-floating.sc-ion-label-ios-h{transform:translate3d(0,  0,  0) scale(0.82)}.sc-ion-label-ios-s h1{margin-left:0;margin-right:0;margin-top:3px;margin-bottom:2px;font-size:22px;font-weight:normal}.sc-ion-label-ios-s h2{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:17px;font-weight:normal}.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{margin-left:0;margin-right:0;margin-top:0;margin-bottom:3px;font-size:14px;font-weight:normal;line-height:normal}.sc-ion-label-ios-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:normal;text-overflow:inherit;overflow:inherit}.sc-ion-label-ios-s>p{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4)}.sc-ion-label-ios-h.ion-color.sc-ion-label-ios-s>p,.ion-color .sc-ion-label-ios-h.sc-ion-label-ios-s>p{color:inherit}.sc-ion-label-ios-s h2:last-child,.sc-ion-label-ios-s h3:last-child,.sc-ion-label-ios-s h4:last-child,.sc-ion-label-ios-s h5:last-child,.sc-ion-label-ios-s h6:last-child,.sc-ion-label-ios-s p:last-child{margin-bottom:0}";
-
-const labelMdCss = ".item.sc-ion-label-md-h,.item .sc-ion-label-md-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.ion-color.sc-ion-label-md-h{color:var(--ion-color-base)}.ion-text-wrap.sc-ion-label-md-h,[text-wrap].sc-ion-label-md-h{white-space:normal}.item-interactive-disabled.sc-ion-label-md-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-md-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-md-h,.item-input .sc-ion-label-md-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-md-h,.item-textarea .sc-ion-label-md-h{align-self:baseline}.label-fixed.sc-ion-label-md-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-md-h{transition:none}.sc-ion-label-md-s h1,.sc-ion-label-md-s h2,.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-md-h,[text-wrap].sc-ion-label-md-h{line-height:1.5}.label-stacked.sc-ion-label-md-h{transform-origin:left top;transform:translate3d(0,  50%,  0) scale(0.75);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl].sc-ion-label-md-h -no-combinator.label-stacked.sc-ion-label-md-h,[dir=rtl] .sc-ion-label-md-h -no-combinator.label-stacked.sc-ion-label-md-h,[dir=rtl].label-stacked.sc-ion-label-md-h,[dir=rtl] .label-stacked.sc-ion-label-md-h{transform-origin:right top}.label-floating.sc-ion-label-md-h{transform:translate3d(0,  96%,  0);transform-origin:left top;transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl].sc-ion-label-md-h -no-combinator.label-floating.sc-ion-label-md-h,[dir=rtl] .sc-ion-label-md-h -no-combinator.label-floating.sc-ion-label-md-h,[dir=rtl].label-floating.sc-ion-label-md-h,[dir=rtl] .label-floating.sc-ion-label-md-h{transform-origin:right top}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.item-select.label-floating.sc-ion-label-md-h,.item-select .label-floating.sc-ion-label-md-h{transform:translate3d(0,  130%,  0)}.item-has-focus.label-floating.sc-ion-label-md-h,.item-has-focus .label-floating.sc-ion-label-md-h,.item-has-placeholder.label-floating.sc-ion-label-md-h,.item-has-placeholder .label-floating.sc-ion-label-md-h,.item-has-value.label-floating.sc-ion-label-md-h,.item-has-value .label-floating.sc-ion-label-md-h{transform:translate3d(0,  50%,  0) scale(0.75)}.item-has-focus.label-stacked.sc-ion-label-md-h,.item-has-focus .label-stacked.sc-ion-label-md-h,.item-has-focus.label-floating.sc-ion-label-md-h,.item-has-focus .label-floating.sc-ion-label-md-h{color:var(--ion-color-primary, #3880ff)}.sc-ion-label-md-s h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.sc-ion-label-md-s h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:normal}.sc-ion-label-md-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:20px;text-overflow:inherit;overflow:inherit}.sc-ion-label-md-s>p{color:var(--ion-color-step-600, #666666)}.sc-ion-label-md-h.ion-color.sc-ion-label-md-s>p,.ion-color .sc-ion-label-md-h.sc-ion-label-md-s>p{color:inherit}";
-
-const Label = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.noAnimate = false;
-  }
-  componentWillLoad() {
-    this.noAnimate = (this.position === 'floating');
-    this.emitStyle();
-  }
-  componentDidLoad() {
-    if (this.noAnimate) {
-      setTimeout(() => {
-        this.noAnimate = false;
-      }, 1000);
-    }
-  }
-  positionChanged() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    const position = this.position;
-    this.ionStyle.emit({
-      'label': true,
-      [`label-${position}`]: position !== undefined
-    });
-  }
-  render() {
-    const position = this.position;
-    const mode = getIonMode$1(this);
-    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses$1(this.color)), { [mode]: true, [`label-${position}`]: position !== undefined, [`label-no-animate`]: (this.noAnimate) }) }));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "position": ["positionChanged"]
-  }; }
-};
-Label.style = {
-  ios: labelIosCss,
-  md: labelMdCss
-};
-
-const listIosCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-ios.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-ios.list-inset ion-item{--border-width:0 0 1px 0;--inner-border-width:0}.list-ios.list-inset ion-item:last-child{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item{--border-width:0;--inner-border-width:0}.list-ios-lines-full .item,.list-ios .item-lines-full{--border-width:0 0 0.55px 0}.list-ios-lines-full .item{--inner-border-width:0}.list-ios-lines-inset .item,.list-ios .item-lines-inset{--inner-border-width:0 0 0.55px 0}.list-ios .item-lines-inset{--border-width:0}.list-ios .item-lines-full{--inner-border-width:0}.list-ios .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
-
-const listMdCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{left:0}[dir=rtl] .list-md>.input:last-child::after,:host-context([dir=rtl]) .list-md>.input:last-child::after{left:unset;right:unset;right:0}.list-md.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-md.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-md.list-inset ion-item:first-child{--border-radius:2px 2px 0 0;--border-width:0 0 1px 0}.list-md.list-inset ion-item:last-child{--border-radius:0 0 2px, 2px;--border-width:0}.list-md.list-inset .item-interactive{--padding-start:0;--padding-end:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item{--border-width:0;--inner-border-width:0}.list-md-lines-full .item,.list-md .item-lines-full{--border-width:0 0 1px 0}.list-md-lines-full .item{--inner-border-width:0}.list-md-lines-inset .item,.list-md .item-lines-inset{--inner-border-width:0 0 1px 0}.list-md .item-lines-inset{--border-width:0}.list-md .item-lines-full{--inner-border-width:0}.list-md .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
-
-const List = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If `true`, the list will have margin around it and rounded corners.
-     */
-    this.inset = false;
-  }
-  /**
-   * If `ion-item-sliding` are used inside the list, this method closes
-   * any open sliding item.
-   *
-   * Returns `true` if an actual `ion-item-sliding` is closed.
-   */
-  async closeSlidingItems() {
-    const item = this.el.querySelector('ion-item-sliding');
-    if (item && item.closeOpened) {
-      return item.closeOpened();
-    }
-    return false;
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    const { lines, inset } = this;
-    return (h(Host, { class: {
-        [mode]: true,
-        // Used internally for styling
-        [`list-${mode}`]: true,
-        'list-inset': inset,
-        [`list-lines-${lines}`]: lines !== undefined,
-        [`list-${mode}-lines-${lines}`]: lines !== undefined
-      } }));
-  }
-  get el() { return getElement(this); }
-};
-List.style = {
-  ios: listIosCss,
-  md: listMdCss
-};
-
-const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
-
-const RippleEffect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Sets the type of ripple-effect:
-     *
-     * - `bounded`: the ripple effect expands from the user's click position
-     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
-     *
-     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
-     * while surfaces for unbounded ripples should have it set to visible.
-     */
-    this.type = 'bounded';
-  }
-  /**
-   * Adds the ripple effect to the parent element.
-   *
-   * @param x The horizontal coordinate of where the ripple should start.
-   * @param y The vertical coordinate of where the ripple should start.
-   */
-  async addRipple(x, y) {
-    return new Promise(resolve => {
-      readTask(() => {
-        const rect = this.el.getBoundingClientRect();
-        const width = rect.width;
-        const height = rect.height;
-        const hypotenuse = Math.sqrt(width * width + height * height);
-        const maxDim = Math.max(height, width);
-        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
-        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
-        const finalScale = maxRadius / initialSize;
-        let posX = x - rect.left;
-        let posY = y - rect.top;
-        if (this.unbounded) {
-          posX = width * 0.5;
-          posY = height * 0.5;
-        }
-        const styleX = posX - initialSize * 0.5;
-        const styleY = posY - initialSize * 0.5;
-        const moveX = width * 0.5 - posX;
-        const moveY = height * 0.5 - posY;
-        writeTask(() => {
-          const div = document.createElement('div');
-          div.classList.add('ripple-effect');
-          const style = div.style;
-          style.top = styleY + 'px';
-          style.left = styleX + 'px';
-          style.width = style.height = initialSize + 'px';
-          style.setProperty('--final-scale', `${finalScale}`);
-          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
-          const container = this.el.shadowRoot || this.el;
-          container.appendChild(div);
-          setTimeout(() => {
-            resolve(() => {
-              removeRipple(div);
-            });
-          }, 225 + 100);
-        });
-      });
-    });
-  }
-  get unbounded() {
-    return this.type === 'unbounded';
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    return (h(Host, { role: "presentation", class: {
-        [mode]: true,
-        'unbounded': this.unbounded
-      } }));
-  }
-  get el() { return getElement(this); }
-};
-const removeRipple = (ripple) => {
-  ripple.classList.add('fade-out');
-  setTimeout(() => {
-    ripple.remove();
-  }, 200);
-};
-const PADDING = 10;
-const INITIAL_ORIGIN_SCALE = 0.5;
-RippleEffect.style = rippleEffectCss;
-
-const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{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;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-has-value.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;height:60px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-ios-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.searchbar-input-container.sc-ion-searchbar-ios{height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:calc(50% - 60px);left:5px;top:0;position:absolute;width:22px;height:100%;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px)}}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}.searchbar-input.sc-ion-searchbar-ios{padding-left:28px;padding-right:28px;padding-top:0;padding-bottom:0;height:100%;font-size:17px;font-weight:400;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:28px;padding-inline-start:28px;-webkit-padding-end:28px;padding-inline-end:28px}}.searchbar-clear-button.sc-ion-searchbar-ios{right:0;top:0;background-position:center;position:absolute;width:30px;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:18px;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:8px;padding-right:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:unset;-webkit-padding-start:30px;padding-inline-start:30px}}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:-100%;transform:translate3d(0,  0,  0);transition:all 300ms ease;opacity:0;pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:unset;-webkit-margin-end:-100%;margin-inline-end:-100%}}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}";
-
-const searchbarMdCss = ".sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{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;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-has-value.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, #1a1a1a);--clear-button-color:initial;--color:var(--ion-color-step-850, #262626);--icon-color:var(--ion-color-step-600, #666666);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;background:inherit}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.searchbar-search-icon.sc-ion-searchbar-md{left:16px;top:11px;width:21px;height:21px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}.searchbar-cancel-button.sc-ion-searchbar-md{left:5px;top:0;background-color:transparent;font-size:1.6em}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:5px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{padding-left:55px;padding-right:55px;padding-top:6px;padding-bottom:6px;background-position:left 8px center;height:auto;font-size:16px;font-weight:400;line-height:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-md{padding-left:unset;padding-right:unset;-webkit-padding-start:55px;padding-inline-start:55px;-webkit-padding-end:55px;padding-inline-end:55px}}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}.searchbar-clear-button.sc-ion-searchbar-md{right:13px;top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:22px;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:7px;padding-right:7px;padding-top:3px;padding-bottom:3px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}";
-
-const Searchbar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionInput = createEvent(this, "ionInput", 7);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.ionCancel = createEvent(this, "ionCancel", 7);
-    this.ionClear = createEvent(this, "ionClear", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.isCancelVisible = false;
-    this.shouldAlignLeft = true;
-    this.focused = false;
-    this.noAnimate = true;
-    /**
-     * If `true`, enable searchbar animation.
-     */
-    this.animated = false;
-    /**
-     * Set the input's autocomplete property.
-     */
-    this.autocomplete = 'off';
-    /**
-     * Set the input's autocorrect property.
-     */
-    this.autocorrect = 'off';
-    /**
-     * Set the cancel button icon. Only applies to `md` mode.
-     * Defaults to `"arrow-back-sharp"`.
-     */
-    this.cancelButtonIcon = config.get('backButtonIcon', 'arrow-back-sharp');
-    /**
-     * Set the the cancel button text. Only applies to `ios` mode.
-     */
-    this.cancelButtonText = 'Cancel';
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
-     */
-    this.debounce = 250;
-    /**
-     * If `true`, the user cannot interact with the input.
-     */
-    this.disabled = false;
-    /**
-     * Set the input's placeholder.
-     * `placeholder` can accept either plaintext or HTML as a string.
-     * To display characters normally reserved for HTML, they
-     * must be escaped. For example `<Ionic>` would become
-     * `&lt;Ionic&gt;`
-     *
-     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
-     */
-    this.placeholder = 'Search';
-    /**
-     * Sets the behavior for the cancel button. Defaults to `"never"`.
-     * Setting to `"focus"` shows the cancel button on focus.
-     * Setting to `"never"` hides the cancel button.
-     * Setting to `"always"` shows the cancel button regardless
-     * of focus state.
-     */
-    this.showCancelButton = 'never';
-    /**
-     * If `true`, enable spellcheck on the input.
-     */
-    this.spellcheck = false;
-    /**
-     * Set the type of the input.
-     */
-    this.type = 'search';
-    /**
-     * the value of the searchbar.
-     */
-    this.value = '';
-    /**
-     * Clears the input field and triggers the control change.
-     */
-    this.onClearInput = (ev) => {
-      this.ionClear.emit();
-      if (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
-      // wait for 4 frames
-      setTimeout(() => {
-        const value = this.getValue();
-        if (value !== '') {
-          this.value = '';
-          this.ionInput.emit();
-        }
-      }, 16 * 4);
-    };
-    /**
-     * Clears the input field and tells the input to blur since
-     * the clearInput function doesn't want the input to blur
-     * then calls the custom cancel function if the user passed one in.
-     */
-    this.onCancelSearchbar = (ev) => {
-      if (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      this.ionCancel.emit();
-      this.onClearInput();
-      if (this.nativeInput) {
-        this.nativeInput.blur();
-      }
-    };
-    /**
-     * Update the Searchbar input value when the input changes
-     */
-    this.onInput = (ev) => {
-      const input = ev.target;
-      if (input) {
-        this.value = input.value;
-      }
-      this.ionInput.emit(ev);
-    };
-    /**
-     * Sets the Searchbar to not focused and checks if it should align left
-     * based on whether there is a value in the searchbar or not.
-     */
-    this.onBlur = () => {
-      this.focused = false;
-      this.ionBlur.emit();
-      this.positionElements();
-    };
-    /**
-     * Sets the Searchbar to focused and active on input focus.
-     */
-    this.onFocus = () => {
-      this.focused = true;
-      this.ionFocus.emit();
-      this.positionElements();
-    };
-  }
-  debounceChanged() {
-    this.ionChange = debounceEvent(this.ionChange, this.debounce);
-  }
-  valueChanged() {
-    const inputEl = this.nativeInput;
-    const value = this.getValue();
-    if (inputEl && inputEl.value !== value) {
-      inputEl.value = value;
-    }
-    this.ionChange.emit({ value });
-  }
-  showCancelButtonChanged() {
-    requestAnimationFrame(() => {
-      this.positionElements();
-      forceUpdate(this);
-    });
-  }
-  connectedCallback() {
-    this.emitStyle();
-  }
-  componentDidLoad() {
-    this.positionElements();
-    this.debounceChanged();
-    setTimeout(() => {
-      this.noAnimate = false;
-    }, 300);
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      'searchbar': true
-    });
-  }
-  /**
-   * Sets focus on the specified `ion-searchbar`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus() {
-    if (this.nativeInput) {
-      this.nativeInput.focus();
-    }
-  }
-  /**
-   * Returns the native `<input>` element used under the hood.
-   */
-  getInputElement() {
-    return Promise.resolve(this.nativeInput);
-  }
-  /**
-   * Positions the input search icon, placeholder, and the cancel button
-   * based on the input value and if it is focused. (ios only)
-   */
-  positionElements() {
-    const value = this.getValue();
-    const prevAlignLeft = this.shouldAlignLeft;
-    const mode = getIonMode$1(this);
-    const shouldAlignLeft = (!this.animated || value.trim() !== '' || !!this.focused);
-    this.shouldAlignLeft = shouldAlignLeft;
-    if (mode !== 'ios') {
-      return;
-    }
-    if (prevAlignLeft !== shouldAlignLeft) {
-      this.positionPlaceholder();
-    }
-    if (this.animated) {
-      this.positionCancelButton();
-    }
-  }
-  /**
-   * Positions the input placeholder
-   */
-  positionPlaceholder() {
-    const inputEl = this.nativeInput;
-    if (!inputEl) {
-      return;
-    }
-    const isRTL = document.dir === 'rtl';
-    const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
-    if (this.shouldAlignLeft) {
-      inputEl.removeAttribute('style');
-      iconEl.removeAttribute('style');
-    }
-    else {
-      // Create a dummy span to get the placeholder width
-      const doc = document;
-      const tempSpan = doc.createElement('span');
-      tempSpan.innerText = this.placeholder || '';
-      doc.body.appendChild(tempSpan);
-      // Get the width of the span then remove it
-      raf(() => {
-        const textWidth = tempSpan.offsetWidth;
-        tempSpan.remove();
-        // Calculate the input padding
-        const inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
-        // Calculate the icon margin
-        const iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
-        // Set the input padding start and icon margin start
-        if (isRTL) {
-          inputEl.style.paddingRight = inputLeft;
-          iconEl.style.marginRight = iconLeft;
-        }
-        else {
-          inputEl.style.paddingLeft = inputLeft;
-          iconEl.style.marginLeft = iconLeft;
-        }
-      });
-    }
-  }
-  /**
-   * Show the iOS Cancel button on focus, hide it offscreen otherwise
-   */
-  positionCancelButton() {
-    const isRTL = document.dir === 'rtl';
-    const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
-    const shouldShowCancel = this.shouldShowCancelButton();
-    if (cancelButton && shouldShowCancel !== this.isCancelVisible) {
-      const cancelStyle = cancelButton.style;
-      this.isCancelVisible = shouldShowCancel;
-      if (shouldShowCancel) {
-        if (isRTL) {
-          cancelStyle.marginLeft = '0';
-        }
-        else {
-          cancelStyle.marginRight = '0';
-        }
-      }
-      else {
-        const offset = cancelButton.offsetWidth;
-        if (offset > 0) {
-          if (isRTL) {
-            cancelStyle.marginLeft = -offset + 'px';
-          }
-          else {
-            cancelStyle.marginRight = -offset + 'px';
-          }
-        }
-      }
-    }
-  }
-  getValue() {
-    return this.value || '';
-  }
-  hasValue() {
-    return this.getValue() !== '';
-  }
-  /**
-   * Determines whether or not the cancel button should be visible onscreen.
-   * Cancel button should be shown if one of two conditions applies:
-   * 1. `showCancelButton` is set to `always`.
-   * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
-   */
-  shouldShowCancelButton() {
-    if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) {
-      return false;
-    }
-    return true;
-  }
-  render() {
-    const { cancelButtonText } = this;
-    const animated = this.animated && config.getBoolean('animated', true);
-    const mode = getIonMode$1(this);
-    const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
-    const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
-    const shouldShowCancelButton = this.shouldShowCancelButton();
-    const cancelButton = (this.showCancelButton !== 'never') && (h("button", { "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { "aria-hidden": "true" }, mode === 'md'
-      ? h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })
-      : cancelButtonText)));
-    return (h(Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses$1(this.color)), { [mode]: true, 'searchbar-animated': animated, 'searchbar-disabled': this.disabled, 'searchbar-no-animate': animated && this.noAnimate, 'searchbar-has-value': this.hasValue(), 'searchbar-left-aligned': this.shouldAlignLeft, 'searchbar-has-focus': this.focused, 'searchbar-should-show-cancel': this.shouldShowCancelButton() }) }, h("div", { class: "searchbar-input-container" }, h("input", { "aria-label": "search text", disabled: this.disabled, ref: el => this.nativeInput = el, class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellCheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: this.onClearInput, onTouchStart: this.onClearInput }, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "value": ["valueChanged"],
-    "showCancelButton": ["showCancelButtonChanged"]
-  }; }
-};
-Searchbar.style = {
-  ios: searchbarIosCss,
-  md: searchbarMdCss
-};
-
-const titleIosCss = ":host{--color:initial;display:flex;flex:1;align-items:center;transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{left:0;top:0;padding-left:90px;padding-right:90px;padding-top:0;padding-bottom:0;position:absolute;width:100%;height:100%;transform:translateZ(0);font-size:17px;font-weight:600;text-align:center;box-sizing:border-box;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px}}:host(.title-small){padding-left:9px;padding-right:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:13px;font-weight:normal}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.title-small){padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}:host(.title-large){padding-left:16px;padding-right:16px;padding-top:0;padding-bottom:0;bottom:0;align-items:flex-end;min-width:100%;padding-bottom:6px;font-size:34px;font-weight:700;text-align:start}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.title-large){padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000)}";
-
-const titleMdCss = ":host{--color:initial;display:flex;flex:1;align-items:center;transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;letter-spacing:0.0125em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}:host(.title-small){width:100%;height:100%;font-size:15px;font-weight:normal}";
-
-const ToolbarTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-  }
-  sizeChanged() {
-    this.emitStyle();
-  }
-  connectedCallback() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    const size = this.getSize();
-    this.ionStyle.emit({
-      [`title-${size}`]: true
-    });
-  }
-  getSize() {
-    return (this.size !== undefined) ? this.size : 'default';
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    const size = this.getSize();
-    return (h(Host, { class: Object.assign({ [mode]: true, [`title-${size}`]: true }, createColorClasses$1(this.color)) }, h("div", { class: "toolbar-title" }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "size": ["sizeChanged"]
-  }; }
-};
-ToolbarTitle.style = {
-  ios: titleIosCss,
-  md: titleMdCss
-};
-
-const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--ion-safe-area-left);padding-right:var(--ion-safe-area-right);display:block;position:relative;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toolbar-container{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)}}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:var(--opacity);z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{flex:1;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}:host(.toolbar-searchbar) ::slotted(ion-back-button){height:38px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:3}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{flex-wrap:wrap;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{flex:1;order:8;min-width:100%}";
-
-const toolbarMdCss = ":host{--border-width:0;--border-style:solid;--opacity:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--ion-safe-area-left);padding-right:var(--ion-safe-area-right);display:block;position:relative;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toolbar-container{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)}}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:var(--opacity);z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{flex:1;order:3;min-width:0;max-width:100%}::slotted(ion-segment){min-height:var(--min-height)}::slotted(.buttons-first-slot){margin-left:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(.buttons-first-slot){margin-left:unset;-webkit-margin-start:4px;margin-inline-start:4px}}::slotted(.buttons-last-slot){margin-right:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(.buttons-last-slot){margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:4}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}";
-
-const Toolbar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.childrenStyles = new Map();
-  }
-  componentWillLoad() {
-    const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
-    const firstButtons = buttons.find(button => {
-      return button.slot === 'start';
-    });
-    if (firstButtons) {
-      firstButtons.classList.add('buttons-first-slot');
-    }
-    const buttonsReversed = buttons.reverse();
-    const lastButtons = buttonsReversed.find(button => button.slot === 'end') ||
-      buttonsReversed.find(button => button.slot === 'primary') ||
-      buttonsReversed.find(button => button.slot === 'secondary');
-    if (lastButtons) {
-      lastButtons.classList.add('buttons-last-slot');
-    }
-  }
-  childrenStyle(ev) {
-    ev.stopPropagation();
-    const tagName = ev.target.tagName;
-    const updatedStyles = ev.detail;
-    const newStyles = {};
-    const childStyles = this.childrenStyles.get(tagName) || {};
-    let hasStyleChange = false;
-    Object.keys(updatedStyles).forEach(key => {
-      const childKey = `toolbar-${key}`;
-      const newValue = updatedStyles[key];
-      if (newValue !== childStyles[childKey]) {
-        hasStyleChange = true;
-      }
-      if (newValue) {
-        newStyles[childKey] = true;
-      }
-    });
-    if (hasStyleChange) {
-      this.childrenStyles.set(tagName, newStyles);
-      forceUpdate(this);
-    }
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    const childStyles = {};
-    this.childrenStyles.forEach(value => {
-      Object.assign(childStyles, value);
-    });
-    return (h(Host, { class: Object.assign(Object.assign({ 'in-toolbar': hostContext('ion-toolbar', this.el), [mode]: true }, childStyles), createColorClasses$1(this.color)) }, h("div", { class: "toolbar-background" }), h("div", { class: "toolbar-container" }, h("slot", { name: "start" }), h("slot", { name: "secondary" }), h("div", { class: "toolbar-content" }, h("slot", null)), h("slot", { name: "primary" }), h("slot", { name: "end" }))));
-  }
-  get el() { return getElement(this); }
-};
-Toolbar.style = {
-  ios: toolbarIosCss,
-  md: toolbarMdCss
-};
-
-const title$1 = "Prayers and Thanksgivings";
-const EN = {
-	title: title$1
-};
-
-const title = "Oraciones y Acciones de Gracias";
-const ES = {
-	title: title
-};
-
-const prayersAndThanksgivingsCss = ".padded.sc-ldf-prayers-and-thanksgivings{padding-left:14px}";
-
-const LOCALE = {
-  'en': EN,
-  'es': ES
-};
-const PrayersAndThanksgivingsComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ldfAskForPrayersAndThanksgivings = createEvent(this, "ldfAskForPrayersAndThanksgivings", 7);
-    this.localeStrings = {};
-    this.filter = '';
-  }
-  optionsChange(newOptions) {
-    console.log("new options");
-    this.currentOptions = newOptions;
-  }
-  /** Set the list of available prayers */
-  async setOptions(options) {
-    this.optionsChange(options);
-    if (this.loading) {
-      this.loading.dismiss();
-    }
-  }
-  // Lifecycle events
-  async componentWillLoad() {
-    this.ldfAskForPrayersAndThanksgivings.emit(true);
-    this.loadLocaleStrings();
-  }
-  // Private methods
-  async loadLocaleStrings() {
-    try {
-      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
-    }
-    catch (e) {
-      console.warn(e);
-    }
-  }
-  async addPrayer(value) {
-    var _a;
-    // if passed a parent, send the message to it that we should insert this doc
-    if (this.parent) {
-      this.parent.ldfDocShouldChange.emit(new Change({
-        path: this.base,
-        op: [{
-            type: 'insertAt',
-            index: this.index,
-            value
-          }]
-      }));
-      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.dismiss();
-    }
-    // otherwise, just pop up the text
-    else {
-      const popover = await popoverController.create({
-        backdropDismiss: true,
-        component: "ldf-liturgical-document",
-        componentProps: {
-          doc: Object.assign(Object.assign({}, value), { value: value.value.map(line => typeof line === "string" ? line.replace("  ", " ") : line) }),
-          padding: "1em"
-        }
-      });
-      await popover.present();
-    }
-  }
-  buildTree() {
-    function groupBy(list, keyGetter) {
-      const map = new Map();
-      list.forEach((item) => {
-        const key = keyGetter(item);
-        const collection = map.get(key);
-        if (!collection) {
-          map.set(key, [item]);
-        }
-        else {
-          collection.push(item);
-        }
-      });
-      return map;
-    }
-    const options = !this.filter ? this.currentOptions || [] :
-      (this.currentOptions || []).filter(doc => { var _a, _b, _c, _d; return ((_b = (_a = doc.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(this.filter.toLowerCase())) || ((_d = (_c = JSON.stringify(doc.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(this.filter.toLowerCase())); });
-    const categories = Array.from(groupBy(options, (item) => (item.category || [])[1]));
-    const subcategories = categories.map(([categoryLabel, values]) => [categoryLabel, Array.from(groupBy(values, (item) => (item.category || [])[2]))]);
-    return subcategories;
-  }
-  // Render
-  render() {
-    const localeStrings = this.localeStrings || {};
-    const tree = this.buildTree(), list = h("ion-list", null, h("ion-searchbar", { debounce: 100, onIonChange: (ev) => this.filter = ev.detail.value }), tree.map(([category, values]) => [
-      h("h2", { class: "padded" }, category),
-      ...values.map(([subcategory, subvalues]) => [
-        h("h3", { class: "padded" }, subcategory),
-        ...subvalues
-          .sort((a, b) => { var _a, _b; return Number((_a = a.label) === null || _a === void 0 ? void 0 : _a.split('.')[0]) < Number((_b = b.label) === null || _b === void 0 ? void 0 : _b.split('.')[0]) ? -1 : 1; })
-          .map(option => {
-          var _a, _b, _c, _d, _e, _f;
-          let summary;
-          if (option.type == "text") {
-            summary = (_b = (_a = option.value[0]) === null || _a === void 0 ? void 0 : _a.replace(/\*/g, '')) === null || _b === void 0 ? void 0 : _b.replace("  ", " ");
-          }
-          else if (option.type == "liturgy") {
-            summary = (_e = (_d = (_c = option.value[0]) === null || _c === void 0 ? void 0 : _c.value[0]) === null || _d === void 0 ? void 0 : _d.replace(/\*/g, '')) === null || _e === void 0 ? void 0 : _e.replace("  ", " ");
-          }
-          else if (option.type == "responsive-prayer") {
-            summary = (_f = option.value[0]) === null || _f === void 0 ? void 0 : _f.text;
-          }
-          summary = summary || "";
-          return h("ion-item", { button: true, onClick: () => this.addPrayer(option) }, h("ion-label", null, h("h3", null, option.label), h("p", null, summary)));
-        })
-      ])
-    ]));
-    return this.modal
-      ? [
-        h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, localeStrings.title), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.modal.dismiss() }, h("ion-icon", { slot: "icon-only", name: "close" }))))),
-        h("ion-content", { class: "ion-padding" }, list)
-      ]
-      : [list];
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "options": ["optionsChange"]
-  }; }
-};
-PrayersAndThanksgivingsComponent.style = prayersAndThanksgivingsCss;
-
-export { Button as ion_button, Buttons as ion_buttons, Content as ion_content, Header as ion_header, Icon as ion_icon, Item as ion_item, Label as ion_label, List as ion_list, RippleEffect as ion_ripple_effect, Searchbar as ion_searchbar, ToolbarTitle as ion_title, Toolbar as ion_toolbar, PrayersAndThanksgivingsComponent as ldf_prayers_and_thanksgivings };