@venite/components 0.16.52 → 0.17.0

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

@@ -1,2214 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement, e as readTask, f as forceUpdate, w as writeTask, i as getAssetPath } from './index-034add74.js';
-import { g as getIonMode$1, a as isPlatform, c as config } from './ionic-global-24253941.js';
-import { h as hasShadowDom, i as inheritAriaAttributes, c as componentOnReady, a as clamp, r as raf, d as debounceEvent } from './helpers-af86adf0.js';
-import { o as openURL, c as createColorClasses$1, h as hostContext } from './theme-7ef00c83.js';
-import { i as isRTL } from './dir-03012648.js';
-import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index-09acb2ac.js';
-import { c as chevronForward, a as arrowBackSharp, b as closeCircle, d as closeSharp, s as searchOutline, e as searchSharp } from './index-f258b2dd.js';
-import { p as printIonError } from './index-ac6e5d74.js';
-import { p as popoverController } from './overlays-59377e10.js';
-import './book-ffb2b7c9.js';
-import { C as Change } from './change-ea574d32.js';
-import { g as getComponentClosestLanguage } from './locale-de430ca1.js';
-import './hardware-back-button-fa04d6e9.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;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;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)}: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)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}";
-
-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;
-    this.inheritedAttributes = {};
-    /**
-     * 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, this.routerAnimation);
-      }
-      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');
-    this.inheritedAttributes = inheritAriaAttributes(this.el);
-  }
-  get hasIconOnly() {
-    return !!this.el.querySelector('[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, inheritedAttributes, } = 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: 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", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), 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;touch-action:pan-x pan-y pinch-zoom}@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;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;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}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}";
-
-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;
-    this.isMainContent = true;
-    // 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;
-  }
-  connectedCallback() {
-    this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
-  }
-  disconnectedCallback() {
-    this.onScrollEnd();
-  }
-  onAppLoad() {
-    this.resize();
-  }
-  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.
-   */
-  async getScrollElement() {
-    /**
-     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
-     * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
-     */
-    if (!this.scrollEl) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
-    }
-    return Promise.resolve(this.scrollEl);
-  }
-  /**
-   * Returns the background content element.
-   * @internal
-   */
-  async getBackgroundElement() {
-    if (!this.backgroundContentEl) {
-      await new Promise((resolve) => componentOnReady(this.el, resolve));
-    }
-    return Promise.resolve(this.backgroundContentEl);
-  }
-  /**
-   * 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`.
-   */
-  async scrollToBottom(duration = 0) {
-    const scrollEl = await this.getScrollElement();
-    const y = scrollEl.scrollHeight - 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.
-   */
-  async scrollByPoint(x, y, duration) {
-    const scrollEl = await this.getScrollElement();
-    return this.scrollToPoint(x + scrollEl.scrollLeft, y + 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 = await this.getScrollElement();
-    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 { isMainContent, scrollX, scrollY, el } = this;
-    const rtl = isRTL(el) ? 'rtl' : 'ltr';
-    const mode = getIonMode$1(this);
-    const forceOverscroll = this.shouldForceOverscroll();
-    const transitionShadow = mode === 'ios';
-    const TagType = isMainContent ? 'main' : 'div';
-    this.resize();
-    return (h(Host, { class: createColorClasses$1(this.color, {
-        [mode]: true,
-        'content-sizing': hostContext('ion-popover', this.el),
-        overscroll: forceOverscroll,
-        [`content-${rtl}`]: true,
-      }), style: {
-        '--offset-top': `${this.cTop}px`,
-        '--offset-bottom': `${this.cBottom}px`,
-      } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { class: {
-        'inner-scroll': true,
-        'scroll-x': scrollX,
-        'scroll-y': scrollY,
-        overscroll: (scrollX || scrollY) && forceOverscroll,
-      }, ref: (scrollEl) => (this.scrollEl = scrollEl), 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) => {
-  var _a;
-  if (el.parentElement) {
-    // normal element with a parent element
-    return el.parentElement;
-  }
-  if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.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;
-  }
-  /**
-   * If we're in a popover, we need to use its wrapper so we can account for space
-   * between the popover and the edges of the screen. But if the popover contains
-   * its own page element, we should use that instead.
-   */
-  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
-  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;
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-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 = (headerEl, opacity) => {
-  /**
-   * Fading in the backdrop opacity
-   * should happen after the large title
-   * has collapsed, so it is handled
-   * by handleHeaderFade()
-   */
-  if (headerEl.collapse === 'fade') {
-    return;
-  }
-  if (opacity === undefined) {
-    headerEl.style.removeProperty('--opacity-scale');
-  }
-  else {
-    headerEl.style.setProperty('--opacity-scale', opacity.toString());
-  }
-};
-const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
-  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.
-   *
-   * Additionally, we check if user is rubber banding (scrolling is negative)
-   * as this can mean they are using pull to refresh. Once the refresher starts,
-   * the content is transformed which can cause the intersection observer to erroneously
-   * fire here as well.
-   */
-  const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
-  setToolbarBackgroundOpacity(mainHeaderIndex.el, 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, scrollEl) => {
-  writeTask(() => {
-    const scrollTop = scrollEl.scrollTop;
-    handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
-    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 && scrollTop > 0) {
-        setHeaderActive(mainHeaderIndex);
-        setHeaderActive(scrollHeaderIndex, false);
-        setToolbarBackgroundOpacity(mainHeaderIndex.el);
-      }
-    }
-  });
-};
-const setHeaderActive = (headerIndex, active = true) => {
-  const headerEl = headerIndex.el;
-  if (active) {
-    headerEl.classList.remove('header-collapse-condense-inactive');
-    headerEl.removeAttribute('aria-hidden');
-  }
-  else {
-    headerEl.classList.add('header-collapse-condense-inactive');
-    headerEl.setAttribute('aria-hidden', 'true');
-  }
-};
-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.transition = transition ? TRANSITION : '';
-    titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
-  });
-};
-const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
-  readTask(() => {
-    const scrollTop = scrollEl.scrollTop;
-    const baseElHeight = baseEl.clientHeight;
-    const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
-    /**
-     * If we are using fade header with a condense
-     * header, then the toolbar backgrounds should
-     * not begin to fade in until the condense
-     * header has fully collapsed.
-     *
-     * Additionally, the main content should not
-     * overflow out of the container until the
-     * condense header has fully collapsed. When
-     * using just the condense header the content
-     * should overflow out of the container.
-     */
-    if (condenseHeader !== null && scrollTop < fadeStart) {
-      baseEl.style.setProperty('--opacity-scale', '0');
-      scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
-      return;
-    }
-    const distanceToStart = scrollTop - fadeStart;
-    const fadeDuration = 10;
-    const scale = clamp(0, distanceToStart / fadeDuration, 1);
-    writeTask(() => {
-      scrollEl.style.removeProperty('clip-path');
-      baseEl.style.setProperty('--opacity-scale', scale.toString());
-    });
-  });
-};
-
-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-fade ion-toolbar{--opacity-scale:inherit}.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:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.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.inheritedAttributes = {};
-    /**
-     * 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;
-    this.setupFadeHeader = async (contentEl, condenseHeader) => {
-      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-      /**
-       * Handle fading of toolbars on scroll
-       */
-      this.contentScrollCallback = () => {
-        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-      };
-      scrollEl.addEventListener('scroll', this.contentScrollCallback);
-      handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-    };
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAriaAttributes(this.el);
-  }
-  componentDidLoad() {
-    this.checkCollapsibleHeader();
-  }
-  componentDidUpdate() {
-    this.checkCollapsibleHeader();
-  }
-  disconnectedCallback() {
-    this.destroyCollapsibleHeader();
-  }
-  async checkCollapsibleHeader() {
-    const mode = getIonMode$1(this);
-    if (mode !== 'ios') {
-      return;
-    }
-    const { collapse } = this;
-    const hasCondense = collapse === 'condense';
-    const hasFade = collapse === 'fade';
-    this.destroyCollapsibleHeader();
-    if (hasCondense) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-      const contentEl = pageEl ? findIonContent(pageEl) : null;
-      // Cloned elements are always needed in iOS transition
-      writeTask(() => {
-        const title = cloneElement('ion-title');
-        title.size = 'large';
-        cloneElement('ion-back-button');
-      });
-      await this.setupCondenseHeader(contentEl, pageEl);
-    }
-    else if (hasFade) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-      const contentEl = pageEl ? findIonContent(pageEl) : null;
-      if (!contentEl) {
-        printIonContentErrorMsg(this.el);
-        return;
-      }
-      const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
-      await this.setupFadeHeader(contentEl, condenseHeader);
-    }
-  }
-  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 setupCondenseHeader(contentEl, pageEl) {
-    if (!contentEl || !pageEl) {
-      printIonContentErrorMsg(this.el);
-      return;
-    }
-    if (typeof IntersectionObserver === 'undefined') {
-      return;
-    }
-    this.scrollEl = await getScrollElement(contentEl);
-    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);
-    setToolbarBackgroundOpacity(mainHeaderIndex.el, 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.scrollEl);
-    };
-    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(() => {
-      if (this.collapsibleMainHeader !== undefined) {
-        this.collapsibleMainHeader.classList.add('header-collapse-main');
-      }
-    });
-  }
-  render() {
-    const { translucent, inheritedAttributes } = this;
-    const mode = getIonMode$1(this);
-    const collapse = this.collapse || 'none';
-    // banner role must be at top level, so remove role if inside a menu
-    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-    return (h(Host, Object.assign({ role: roleType, class: {
-        [mode]: true,
-        // Used internally for styling
-        [`header-${mode}`]: true,
-        [`header-translucent`]: this.translucent,
-        [`header-collapse-${collapse}`]: true,
-        [`header-translucent-${mode}`]: this.translucent,
-      } }, inheritedAttributes), 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();
-/**
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `ion-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- */
-const inheritAttributes = (el, attributes = []) => {
-  const attributeObject = {};
-  attributes.forEach(attr => {
-    if (el.hasAttribute(attr)) {
-      const value = el.getAttribute(attr);
-      if (value !== null) {
-        attributeObject[attr] = el.getAttribute(attr);
-      }
-      el.removeAttribute(attr);
-    }
-  });
-  return attributeObject;
-};
-
-const validateContent = (svgContent) => {
-  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 name = elm.attributes[i].name;
-      if (isStr(name) && name.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, sanitize) => {
-  // see if we already have a request for this url
-  let req = requests.get(url);
-  if (!req) {
-    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      // we don't already have a request
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            ioniconContent.set(url, 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.iconName = null;
-    this.inheritedAttributes = {};
-    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;
-    /**
-     * When set to `false`, SVG content that is HTTP fetched will not be checked
-     * if the response SVG content has any `<script>` elements, or any attributes
-     * that start with `on`, such as `onclick`.
-     * @default true
-     */
-    this.sanitize = true;
-    this.hasAriaHidden = () => {
-      const { el } = this;
-      return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
-    };
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-  }
-  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, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
-        }
-      }
-    }
-    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
-    /**
-     * Come up with a default label
-     * in case user does not provide their own.
-     */
-    if (label) {
-      this.ariaLabel = label.replace(/\-/g, ' ');
-    }
-  }
-  render() {
-    const { iconName, ariaLabel, inheritedAttributes } = this;
-    const mode = this.mode || 'md';
-    const flipRtl = this.flipRtl ||
-      (iconName &&
-        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
-        this.flipRtl !== false);
-    /**
-     * Only set the aria-label if a) we have generated
-     * one for the icon and if aria-hidden is not set to "true".
-     * If developer wants to set their own aria-label, then
-     * inheritedAttributes down below will override whatever
-     * default label we have set.
-     */
-    return (h(Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, 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' }) }, inheritedAttributes), 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;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .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:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):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:inherit;justify-content:inherit;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-bottom{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(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{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(--inner-padding-end);padding-inline-end: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:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){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;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.ion-focused),: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.ion-focused),: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-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}: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(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--ion-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}: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:0px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--bottom-padding-start:0px;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}.item-highlight,.item-inner-highlight{transition:none}:host(.item-has-focus) .item-inner-highlight,:host(.item-has-focus) .item-highlight{border-top:none;border-right:none;border-left:none}::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}:host(.item-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:0}";
-
-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;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .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:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):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:inherit;justify-content:inherit;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-bottom{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(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{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(--inner-padding-end);padding-inline-end: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:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){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;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.ion-focused),: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.ion-focused),: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-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}: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(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--ion-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}: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;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;--highlight-height:1px;--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(.item-fill-outline){--highlight-height:2px}:host(.item-fill-none.item-interactive.ion-focus) .item-highlight,:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-none.item-interactive.ion-focus) .item-native,:host(.item-fill-none.item-interactive.item-has-focus) .item-native,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight{transform:scaleX(1)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight{border-width:var(--full-highlight-height);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native{border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight,:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-native,:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-has-focus) .item-native{caret-color:var(--highlight-background)}: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-fill-outline) .item-highlight{--position-offset:calc(-1 * var(--border-width));left:var(--position-offset);top:var(--position-offset);width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width));transition:none}:host-context([dir=rtl]):host(.item-fill-outline) .item-highlight,:host-context([dir=rtl]).item-fill-outline .item-highlight{left:unset;right:unset;right:var(--position-offset)}:host(.item-fill-outline.ion-focused) .item-native,:host(.item-fill-outline.item-has-focus) .item-native{border-color:transparent}: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}}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::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}}:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::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]:not([slot=helper]):not([slot=error])){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:10px;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-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:8px}: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(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),: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)}:host(.ion-color){--highlight-color-focused:var(--ion-color-contrast)}:host(.item-label-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid.ion-color),:host(.item-fill-outline.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid){--background:var(--ion-color-step-50, #f2f2f2);--background-hover:var(--ion-color-step-100, #e6e6e6);--background-focused:var(--ion-color-step-150, #d9d9d9);--border-width:0 0 1px 0;--inner-border-width:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid),:host-context([dir=rtl]).item-fill-solid{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host(.item-fill-solid) .item-native{--border-color:var(--ion-color-step-500, gray)}:host(.item-fill-solid.ion-focused) .item-native,:host(.item-fill-solid.item-has-focus) .item-native{--background:var(--background-focused)}:host(.item-fill-solid.item-shape-round){border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round),:host-context([dir=rtl]).item-fill-solid.item-shape-round{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (any-hover: hover){:host(.item-fill-solid:hover) .item-native{--background:var(--background-hover);--border-color:var(--ion-color-step-750, #404040)}}:host(.item-fill-outline){--ripple-color:transparent;--background-focused:transparent;--background-hover:transparent;--border-color:var(--ion-color-step-500, gray);--border-width:1px;border:none;overflow:visible}:host(.item-fill-outline) .item-native{--native-padding-left:16px;border-radius:4px}:host(.item-fill-outline.item-shape-round) .item-native{--inner-padding-start:16px;border-radius:28px}:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:unset;-webkit-padding-start:32px;padding-inline-start:32px}}:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)){transform:translateY(-14px)}@media (any-hover: hover){:host(.item-fill-outline:hover) .item-native{--border-color:var(--ion-color-step-750, #404040)}}.item-counter{letter-spacing:0.0333333333em}";
-
-const Item = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.labelColorStyles = {};
-    this.itemStyles = new Map();
-    this.multipleInputs = false;
-    this.focusable = true;
-    /**
-     * 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 = chevronForward;
-    /**
-     * If `true`, the user cannot interact with the item.
-     */
-    this.disabled = false;
-    /**
-     * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
-     */
-    this.counter = 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';
-  }
-  counterFormatterChanged() {
-    this.updateCounterOutput(this.getFirstInput());
-  }
-  handleIonChange(ev) {
-    if (this.counter && ev.target === this.getFirstInput()) {
-      this.updateCounterOutput(ev.target);
-    }
-  }
-  labelColorChanged(ev) {
-    const { color } = this;
-    // There will be a conflict with item color if
-    // we apply the label color to item, so we ignore
-    // the label color if the user sets a color on item
-    if (color === undefined) {
-      this.labelColorStyles = ev.detail;
-    }
-  }
-  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);
-    }
-  }
-  connectedCallback() {
-    if (this.counter) {
-      this.updateCounterOutput(this.getFirstInput());
-    }
-    this.hasStartEl();
-  }
-  componentDidUpdate() {
-    // Do not use @Listen here to avoid making all items
-    // appear as clickable to screen readers
-    // https://github.com/ionic-team/ionic-framework/issues/22011
-    const input = this.getFirstInput();
-    if (input && !this.clickListener) {
-      this.clickListener = (ev) => this.delegateFocus(ev, input);
-      this.el.addEventListener('click', this.clickListener);
-    }
-  }
-  disconnectedCallback() {
-    const input = this.getFirstInput();
-    if (input && this.clickListener) {
-      this.el.removeEventListener('click', this.clickListener);
-      this.clickListener = undefined;
-    }
-  }
-  componentDidLoad() {
-    raf(() => {
-      this.setMultipleInputs();
-      this.focusable = this.isFocusable();
-    });
-  }
-  // If the item contains multiple clickable elements and/or inputs, then the item
-  // should not have a clickable input cover over the entire item to prevent
-  // interfering with their individual click events
-  setMultipleInputs() {
-    // 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();
-  }
-  isFocusable() {
-    const focusableChild = this.el.querySelector('.ion-focusable');
-    return this.canActivate() || focusableChild !== null;
-  }
-  getFirstInput() {
-    const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
-    return inputs[0];
-  }
-  // This is needed for WebKit due to a delegatesFocus bug where
-  // clicking on the left padding of an item is not focusing the input
-  // but is opening the keyboard. It will no longer be needed with
-  // iOS 14.
-  delegateFocus(ev, input) {
-    const clickedItem = ev.target.tagName === 'ION-ITEM';
-    let firstActive = false;
-    // If the first input is the same as the active element we need
-    // to focus the first input again, but if the active element
-    // is another input inside of the item we shouldn't switch focus
-    if (document.activeElement) {
-      firstActive = input.querySelector('input, textarea') === document.activeElement;
-    }
-    // Only focus the first input if we clicked on an ion-item
-    // and the first input exists
-    if (clickedItem && (firstActive || !this.multipleInputs)) {
-      input.fireFocusEvents = false;
-      input.setBlur();
-      input.setFocus();
-      raf(() => {
-        input.fireFocusEvents = true;
-      });
-    }
-  }
-  updateCounterOutput(inputEl) {
-    var _a, _b;
-    const { counter, counterFormatter, defaultCounterFormatter } = this;
-    if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
-      const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
-      if (counterFormatter === undefined) {
-        this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
-      }
-      else {
-        try {
-          this.counterString = counterFormatter(length, inputEl.maxlength);
-        }
-        catch (e) {
-          printIonError('Exception in provided `counterFormatter`.', e);
-          // Fallback to the default counter formatter when an exception happens
-          this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
-        }
-      }
-    }
-  }
-  defaultCounterFormatter(length, maxlength) {
-    return `${length} / ${maxlength}`;
-  }
-  hasStartEl() {
-    const startEl = this.el.querySelector('[slot="start"]');
-    if (startEl !== null) {
-      this.el.classList.add('item-has-start-slot');
-    }
-  }
-  render() {
-    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, 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,
-      };
-    // Only set onClick if the item is clickable to prevent screen
-    // readers from reading all items as clickable
-    const clickFn = clickable
-      ? {
-        onClick: (ev) => {
-          openURL(href, ev, routerDirection, routerAnimation);
-        },
-      }
-      : {};
-    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
-    this.itemStyles.forEach((value) => {
-      Object.assign(childStyles, value);
-    });
-    const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
-    const fillValue = fill || 'none';
-    const inList = hostContext('ion-list', this.el);
-    return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
-        item: true,
-        [mode]: true,
-        [`item-lines-${lines}`]: lines !== undefined,
-        [`item-fill-${fillValue}`]: true,
-        [`item-shape-${shape}`]: shape !== undefined,
-        'item-disabled': disabled,
-        'in-list': inList,
-        'item-multiple-inputs': this.multipleInputs,
-        'ion-activatable': canActivate,
-        'ion-focusable': this.focusable,
-        'item-rtl': document.dir === 'rtl',
-      })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, { class: "item-native", part: "native", disabled: disabled }, clickFn), 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", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "counterFormatter": ["counterFormatterChanged"]
-  }; }
-};
-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:translate(0, 29px);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-textarea.label-floating.sc-ion-label-ios-h,.item-textarea .label-floating.sc-ion-label-ios-h{transform:translate(0, 28px)}.item-has-focus.label-floating.sc-ion-label-ios-h,.item-has-focus .label-floating.sc-ion-label-ios-h,.item-has-placeholder.sc-ion-label-ios-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .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: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.in-item-color.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,.label-floating.sc-ion-label-md-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:top left}.label-stacked.label-rtl.sc-ion-label-md-h,.label-floating.label-rtl.sc-ion-label-md-h{transform-origin:top right}.label-stacked.sc-ion-label-md-h{transform:translateY(50%) scale(0.75);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.label-floating.sc-ion-label-md-h{transform:translateY(96%);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.ion-focused.label-floating.sc-ion-label-md-h,.ion-focused .label-floating.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,.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .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:translateY(50%) scale(0.75)}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h{transform:translateY(-6px) scale(0.75);position:relative;max-width:min-content;background-color:var(--ion-item-background, var(--ion-background-color, #fff));overflow:visible;z-index:3}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::after,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::after{position:absolute;width:4px;height:100%;background-color:var(--ion-item-background, var(--ion-background-color, #fff));content:\"\"}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::before{left:calc(-1 * 4px)}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::after,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::after{right:calc(-1 * 4px)}.item-fill-outline.ion-focused.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.ion-focused.item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).item-has-start-slot.label-floating,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.sc-ion-label-md-h{transform:translateX(-32px) translateY(-6px) scale(0.75)}.item-fill-outline.ion-focused.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.ion-focused.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).item-has-start-slot.label-floating.label-rtl,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h{transform:translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75)}.ion-focused.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-primary, #3880ff)}.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-contrast)}.item-fill-solid.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-base)}.ion-invalid.ion-touched.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--highlight-color-invalid)}.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.in-item-color.sc-ion-label-md-s>p{color:inherit}";
-
-const Label = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionColor = createEvent(this, "ionColor", 7);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.inRange = false;
-    this.noAnimate = false;
-  }
-  componentWillLoad() {
-    this.inRange = !!this.el.closest('ion-range');
-    this.noAnimate = this.position === 'floating';
-    this.emitStyle();
-    this.emitColor();
-  }
-  componentDidLoad() {
-    if (this.noAnimate) {
-      setTimeout(() => {
-        this.noAnimate = false;
-      }, 1000);
-    }
-  }
-  colorChanged() {
-    this.emitColor();
-  }
-  positionChanged() {
-    this.emitStyle();
-  }
-  emitColor() {
-    const { color } = this;
-    this.ionColor.emit({
-      'item-label-color': color !== undefined,
-      [`ion-color-${color}`]: color !== undefined,
-    });
-  }
-  emitStyle() {
-    const { inRange, position } = this;
-    // If the label is inside of a range we don't want
-    // to override the classes added by the label that
-    // is a direct child of the item
-    if (!inRange) {
-      this.ionStyle.emit({
-        label: true,
-        [`label-${position}`]: position !== undefined,
-      });
-    }
-  }
-  render() {
-    const position = this.position;
-    const mode = getIonMode$1(this);
-    return (h(Host, { class: createColorClasses$1(this.color, {
-        [mode]: true,
-        'in-item-color': hostContext('ion-item.ion-color', this.el),
-        [`label-${position}`]: position !== undefined,
-        [`label-no-animate`]: this.noAnimate,
-        'label-rtl': document.dir === 'rtl',
-      }) }));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "color": ["colorChanged"],
-    "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:10px}@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 === null || item === void 0 ? void 0 : item.closeOpened) {
-      return item.closeOpened();
-    }
-    return false;
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    const { lines, inset } = this;
-    return (h(Host, { role: "list", 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 noteIosCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, #a6a6a6)}";
-
-const noteMdCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);font-size:14px}";
-
-const Note = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    return (h(Host, { class: createColorClasses$1(this.color, {
-        [mode]: true,
-      }) }, h("slot", null)));
-  }
-};
-Note.style = {
-  ios: noteIosCss,
-  md: noteMdCss
-};
-
-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-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.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-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.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', arrowBackSharp);
-    /**
-     * 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 also impacts form bindings such as `ngModel` or `v-model`.
-     */
-    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';
-    /**
-     * Sets the behavior for the clear button. Defaults to `"focus"`.
-     * Setting to `"focus"` shows the clear button on focus if the
-     * input is not empty.
-     * Setting to `"never"` hides the clear button.
-     * Setting to `"always"` shows the clear button regardless
-     * of focus state, but only if the input is not empty.
-     */
-    this.showClearButton = 'always';
-    /**
-     * 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 = (shouldFocus) => {
-      this.ionClear.emit();
-      // 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();
-          /**
-           * When tapping clear button
-           * ensure input is focused after
-           * clearing input so users
-           * can quickly start typing.
-           */
-          if (shouldFocus && !this.focused) {
-            this.setFocus();
-          }
-        }
-      }, 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 rtl = isRTL(this.el);
-    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 (rtl) {
-          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 rtl = isRTL(this.el);
-    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 (rtl) {
-          cancelStyle.marginLeft = '0';
-        }
-        else {
-          cancelStyle.marginRight = '0';
-        }
-      }
-      else {
-        const offset = cancelButton.offsetWidth;
-        if (offset > 0) {
-          if (rtl) {
-            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;
-  }
-  /**
-   * Determines whether or not the clear button should be visible onscreen.
-   * Clear button should be shown if one of two conditions applies:
-   * 1. `showClearButton` is set to `always`.
-   * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
-   */
-  shouldShowClearButton() {
-    if (this.showClearButton === 'never' || (this.showClearButton === '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' ? closeCircle : closeSharp);
-    const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
-    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: 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-clear': this.shouldShowClearButton(),
-        '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", onPointerDown: (ev) => {
-        /**
-         * This prevents mobile browsers from
-         * blurring the input when the clear
-         * button is activated.
-         */
-        ev.preventDefault();
-      }, onClick: () => this.onClearInput(true) }, 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:var(--padding-top);padding-bottom:var(--padding-bottom);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;transform-origin:left center;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.title-rtl){transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000)}:host(.title-large) .toolbar-title{transform-origin:inherit}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{transform-origin:calc(100% - inherit)}";
-
-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: createColorClasses$1(this.color, {
-        [mode]: true,
-        [`title-${size}`]: true,
-        'title-rtl': document.dir === 'rtl',
-      }) }, 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;--opacity-scale: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:calc(var(--opacity) * var(--opacity-scale));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, #f7f7f7));--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;--opacity-scale: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:calc(var(--opacity) * var(--opacity-scale));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({}, childStyles), createColorClasses$1(this.color, {
-        [mode]: true,
-        'in-toolbar': hostContext('ion-toolbar', this.el),
-      })) }, 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, Note as ion_note, RippleEffect as ion_ripple_effect, Searchbar as ion_searchbar, ToolbarTitle as ion_title, Toolbar as ion_toolbar, PrayersAndThanksgivingsComponent as ldf_prayers_and_thanksgivings };