@ionic/core 8.7.18 → 8.7.19-dev.11772655618.1af0949f

package/components/p-DK2Bn1Mc.js

@@ -1,305 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { p as proxyCustomElement, H, e as createEvent, i as forceUpdate, f as printIonWarning, h, d as Host } from './p-DWoUQeZ3.js';
-import { j as hasShadowDom, i as inheritAriaAttributes } from './p-D5hF6rwn.js';
-import { o as openURL, c as createColorClasses, h as hostContext } from './p-DiVJyqlX.js';
-import { b as getIonMode } from './p-Bxl5etF4.js';
-import { d as defineCustomElement$1 } from './p-LgLeKTkH.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;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;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;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;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end: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:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}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-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(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-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:14px;--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #004acd);--background-focused:var(--ion-color-primary-shade, #004acd);--background-hover:var(--ion-color-primary-tint, #1a65eb);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-radius:14px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #0054e9);--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:.1;font-size:min(1.0625rem, 51px);font-weight:normal}:host(.in-buttons){font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}:host(.button-large){--border-radius:16px;--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}:host(.button-small){--border-radius:6px;--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}:host(.button-round){--border-radius:999px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.125em, 60px);min-height:clamp(30px, 2.125em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 1.125em, 43.02px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(12.1394px, 1.308125em, 40.1856px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 0.9em, 43.056px)}: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:not(.ion-activated):hover),:host(.button-outline:not(.ion-activated):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):not(.ion-activated)) .button-native::after{background:#fff;opacity:0.1}}: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-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}";
-
-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;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;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;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;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end: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:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}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-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(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-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:8px;--padding-bottom:8px;--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;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}: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, #0054e9);--background-hover:var(--ion-color-primary, #0054e9);--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, #0054e9);--background-hover:var(--ion-color-primary, #0054e9);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:999px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}:host(.button-strong){font-weight:bold}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.86em, 60px);min-height:clamp(30px, 2.86em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.104px, 1.6em, 43.008px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(13.002px, 1.23125em, 40.385px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.008px, 1.4em, 43.008px)}: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)}}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-background, var(--color));color:var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff))}";
-
-const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.inItem = false;
-        this.inListHeader = false;
-        this.inToolbar = false;
-        this.formButtonEl = null;
-        this.formEl = null;
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the button only has an icon.
-         */
-        this.isCircle = false;
-        /**
-         * The type of button.
-         */
-        this.buttonType = 'button';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * If `true`, activates a button with a heavier font weight.
-         */
-        this.strong = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        this.handleClick = (ev) => {
-            const { el } = this;
-            if (this.type === 'button') {
-                openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-            }
-            else if (hasShadowDom(el)) {
-                this.submitForm(ev);
-            }
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.slotChanged = () => {
-            /**
-             * Ensures that the 'has-icon-only' class is properly added
-             * or removed from `ion-button` when manipulating the
-             * `icon-only` slot.
-             *
-             * Without this, the 'has-icon-only' class is only checked
-             * or added when `ion-button` component first renders.
-             */
-            this.isCircle = this.hasIconOnly;
-        };
-    }
-    disabledChanged() {
-        const { disabled } = this;
-        if (this.formButtonEl) {
-            this.formButtonEl.disabled = disabled;
-        }
-    }
-    /**
-     * This component is used within the `ion-input-password-toggle` component
-     * to toggle the visibility of the password input.
-     * These attributes need to update based on the state of the password input.
-     * Otherwise, the values will be stale.
-     *
-     * @param newValue
-     * @param _oldValue
-     * @param propName
-     */
-    onAriaChanged(newValue, _oldValue, propName) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [propName]: newValue });
-        forceUpdate(this);
-    }
-    /**
-     * This is responsible for rendering a hidden native
-     * button element inside the associated form. This allows
-     * users to submit a form by pressing "Enter" when a text
-     * field inside of the form is focused. The native button
-     * rendered inside of `ion-button` is in the Shadow DOM
-     * and therefore does not participate in form submission
-     * which is why the following code is necessary.
-     */
-    renderHiddenButton() {
-        const formEl = (this.formEl = this.findForm());
-        if (formEl) {
-            const { formButtonEl } = this;
-            /**
-             * If the form already has a rendered form button
-             * then do not append a new one again.
-             */
-            if (formButtonEl !== null && formEl.contains(formButtonEl)) {
-                return;
-            }
-            // Create a hidden native button inside of the form
-            const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
-            newFormButtonEl.type = this.type;
-            newFormButtonEl.style.display = 'none';
-            // Only submit if the button is not disabled.
-            newFormButtonEl.disabled = this.disabled;
-            formEl.appendChild(newFormButtonEl);
-        }
-    }
-    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';
-    }
-    /**
-     * Finds the form element based on the provided `form` selector
-     * or element reference provided.
-     */
-    findForm() {
-        const { form } = this;
-        if (form instanceof HTMLFormElement) {
-            return form;
-        }
-        if (typeof form === 'string') {
-            // Check if the string provided is a form id.
-            const el = document.getElementById(form);
-            if (el) {
-                if (el instanceof HTMLFormElement) {
-                    return el;
-                }
-                else {
-                    /**
-                     * The developer specified a string for the form attribute, but the
-                     * element with that id is not a form element.
-                     */
-                    printIonWarning(`[ion-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
-                    return null;
-                }
-            }
-            else {
-                /**
-                 * The developer specified a string for the form attribute, but the
-                 * element with that id could not be found in the DOM.
-                 */
-                printIonWarning(`[ion-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
-                return null;
-            }
-        }
-        if (form !== undefined) {
-            /**
-             * The developer specified a HTMLElement for the form attribute,
-             * but the element is not a HTMLFormElement.
-             * This will also catch if the developer tries to pass in null
-             * as the form attribute.
-             */
-            printIonWarning(`[ion-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
-            return null;
-        }
-        /**
-         * If the form element is not set, the button may be inside
-         * of a form element. Query the closest form element to the button.
-         */
-        return this.el.closest('form');
-    }
-    submitForm(ev) {
-        // 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
-        if (this.formEl && this.formButtonEl) {
-            ev.preventDefault();
-            this.formButtonEl.click();
-        }
-    }
-    render() {
-        const mode = getIonMode(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';
-        }
-        /**
-         * We call renderHiddenButton in the render function to account
-         * for any properties being set async. For example, changing the
-         * "type" prop from "button" to "submit" after the component has
-         * loaded would warrant the hidden button being added to the
-         * associated form.
-         */
-        {
-            type !== 'button' && this.renderHiddenButton();
-        }
-        return (h(Host, { key: 'd148ed2332917f03fafd63dbbef10131df0ec5f0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(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),
-                'in-buttons': hostContext('ion-buttons', this.el),
-                'button-has-icon-only': hasIconOnly,
-                'button-disabled': disabled,
-                'ion-activatable': true,
-                'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '9da73c530017d510839a224bc4d5315bd44f60ed' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '9046184db918cc53e90796860c43d1dfb7d1f85c', class: "button-inner" }, h("slot", { key: '9dd37ab124803e703567ddde4154c81ed1922be1', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '01713ecf19c68be05072ffcd00ed7ff2d76c4551', name: "start" }), h("slot", { key: '121124874ba1357bc10ffaf4f7ed13803a02add9' }), h("slot", { key: '09317cf5ced153fbb94d4ebba69db858f9dbe570', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '8bdd9d082f48582be903221b13b67095046cd9aa', type: this.rippleType }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "disabled": ["disabledChanged"],
-        "aria-checked": ["onAriaChanged"],
-        "aria-label": ["onAriaChanged"],
-        "aria-pressed": ["onAriaChanged"]
-    }; }
-    static get style() { return {
-        ios: buttonIosCss,
-        md: buttonMdCss
-    }; }
-}, [289, "ion-button", {
-        "color": [513],
-        "buttonType": [1025, "button-type"],
-        "disabled": [516],
-        "expand": [513],
-        "fill": [1537],
-        "routerDirection": [1, "router-direction"],
-        "routerAnimation": [16],
-        "download": [1],
-        "href": [1],
-        "rel": [1],
-        "shape": [513],
-        "size": [513],
-        "strong": [4],
-        "target": [1],
-        "type": [1],
-        "form": [1],
-        "isCircle": [32]
-    }, undefined, {
-        "disabled": ["disabledChanged"],
-        "aria-checked": ["onAriaChanged"],
-        "aria-label": ["onAriaChanged"],
-        "aria-pressed": ["onAriaChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ion-button", "ion-ripple-effect"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ion-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Button);
-            }
-            break;
-        case "ion-ripple-effect":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Button as B, defineCustomElement as d };