@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

package/dist/collection/components/searchbar/searchbar.js

@@ -1,201 +1,33 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import arrowLeftRegular from "@phosphor-icons/core/assets/regular/arrow-left.svg";
-import magnifyingGlassRegular from "@phosphor-icons/core/assets/regular/magnifying-glass.svg";
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, forceUpdate, h } from "@stencil/core";
-import { createClearButtonPressController } from "../../utils/forms/index";
 import { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
-import { createColorClasses, hostContext } from "../../utils/theme";
+import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Searchbar {
-    constructor() {
-        this.isCancelVisible = false;
-        this.shouldAlignLeft = true;
-        this.inputId = `ion-searchbar-${searchbarIds++}`;
-        this.inheritedAttributes = {};
-        this.focused = false;
-        this.noAnimate = true;
-        /** Keeps the clear button mounted for the duration of a press. */
-        this.isClearButtonPressed = false;
-        this.clearButtonPressController = createClearButtonPressController((isPressed) => (this.isClearButtonPressed = isPressed));
-        /**
-         * If `true`, enable searchbar animation.
-         */
-        this.animated = false;
-        /**
-         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
-         * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
-         */
-        this.autocapitalize = 'off';
-        /**
-         * Set the input's autocomplete property.
-         */
-        this.autocomplete = 'off';
-        /**
-         * Set the input's autocorrect property.
-         */
-        this.autocorrect = 'off';
-        /**
-         * Set the cancel button text. Only available when the theme is `"ios"`.
-         */
-        this.cancelButtonText = 'Cancel';
-        /**
-         * If `true`, the user cannot interact with the input.
-         */
-        this.disabled = false;
-        /**
-         * If used in a form, set the name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * 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 = async (shouldFocus) => {
-            this.clearButtonPressController.release();
-            if (this.clearTimeout) {
-                clearTimeout(this.clearTimeout);
-            }
-            this.ionClear.emit();
-            return new Promise((resolve) => {
-                // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
-                // wait for 4 frames
-                this.clearTimeout = setTimeout(() => {
-                    const value = this.getValue();
-                    if (value !== '') {
-                        this.value = '';
-                        this.emitInputChange();
-                        /**
-                         * When tapping clear button
-                         * ensure input is focused after
-                         * clearing input so users
-                         * can quickly start typing.
-                         */
-                        if (shouldFocus && !this.focused) {
-                            this.setFocus();
-                            /**
-                             * The setFocus call above will clear focusedValue,
-                             * but ionChange will never have gotten a chance to
-                             * fire. Manually revert focusedValue so onBlur can
-                             * compare against what was in the box before the clear.
-                             */
-                            this.focusedValue = value;
-                        }
-                    }
-                    resolve();
-                }, 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 = async (ev) => {
-            if (ev) {
-                ev.preventDefault();
-                ev.stopPropagation();
-            }
-            this.ionCancel.emit();
-            // get cached values before clearing the input
-            const value = this.getValue();
-            const focused = this.focused;
-            await this.onClearInput();
-            /**
-             * If there used to be something in the box, and we weren't focused
-             * beforehand (meaning no blur fired that would already handle this),
-             * manually fire ionChange.
-             */
-            if (value && !focused) {
-                this.emitValueChange(ev);
-            }
-            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.emitInputChange(ev);
-        };
-        this.onChange = (ev) => {
-            this.emitValueChange(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 = (ev) => {
-            this.focused = false;
-            this.ionBlur.emit();
-            this.positionElements();
-            if (this.focusedValue !== this.value) {
-                this.emitValueChange(ev);
-            }
-            this.focusedValue = undefined;
-        };
-        /**
-         * Sets the Searchbar to focused and active on input focus.
-         */
-        this.onFocus = () => {
-            this.focused = true;
-            this.focusedValue = this.value;
-            this.ionFocus.emit();
-            this.positionElements();
-        };
-    }
+    nativeInput;
+    isCancelVisible = false;
+    shouldAlignLeft = true;
+    originalIonInput;
+    inputId = `ion-searchbar-${searchbarIds++}`;
+    inheritedAttributes = {};
+    loadTimeout;
+    clearTimeout;
+    searchIconResizeObserver;
+    /**
+     * The value of the input when the textarea is focused.
+     */
+    focusedValue;
+    el;
+    focused = false;
+    noAnimate = true;
     /**
      * lang and dir are globally enumerated attributes.
      * As a result, creating these as properties
@@ -204,21 +36,177 @@ export class Searchbar {
      * to the inner `<input>` element.
      */
     onLangChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            lang: newValue,
+        };
         forceUpdate(this);
     }
     onDirChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            dir: newValue,
+        };
         forceUpdate(this);
     }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, enable searchbar animation.
+     */
+    animated = false;
+    /**
+     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+     * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+     */
+    autocapitalize = 'off';
+    /**
+     * Set the input's autocomplete property.
+     */
+    autocomplete = 'off';
+    /**
+     * Set the input's autocorrect property.
+     */
+    autocorrect = false;
+    /**
+     * Set the cancel button icon. Only applies to `md` mode.
+     * Defaults to `arrow-back-sharp`.
+     */
+    cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
+    /**
+     * Set the cancel button text. Only applies to `ios` mode.
+     */
+    cancelButtonText = 'Cancel';
+    /**
+     * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
+     */
+    clearIcon;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
+     */
+    debounce;
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
+        this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
     }
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled = false;
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     */
+    inputmode;
+    /**
+     * A hint to the browser for which enter key to display.
+     * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
+     * `"previous"`, `"search"`, and `"send"`.
+     */
+    enterkeyhint;
+    /**
+     * This attribute specifies the maximum number of characters that the user can enter.
+     */
+    maxlength;
+    /**
+     * This attribute specifies the minimum number of characters that the user can enter.
+     */
+    minlength;
+    /**
+     * If used in a form, set the name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * 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)
+     */
+    placeholder = 'Search';
+    /**
+     * The icon to use as the search icon. Defaults to `search-outline` in
+     * `ios` mode and `search-sharp` in `md` mode.
+     */
+    searchIcon;
+    /**
+     * 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.
+     */
+    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.
+     */
+    showClearButton = 'always';
+    /**
+     * If `true`, enable spellcheck on the input.
+     */
+    spellcheck = false;
+    /**
+     * Set the type of the input.
+     */
+    type = 'search';
+    /**
+     * the value of the searchbar.
+     */
+    value = '';
+    /**
+     * Emitted when the `value` of the `ion-searchbar` element has changed.
+     */
+    ionInput;
+    /**
+     * The `ionChange` event is fired for `<ion-searchbar>` elements when the user
+     * modifies the element's value. Unlike the `ionInput` event, the `ionChange`
+     * event is not necessarily fired for each alteration to an element's value.
+     *
+     * The `ionChange` event is fired when the value has been committed
+     * by the user. This can happen when the element loses focus or
+     * when the "Enter" key is pressed. `ionChange` can also fire
+     * when clicking the clear or cancel buttons.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the cancel button is clicked.
+     */
+    ionCancel;
+    /**
+     * Emitted when the clear input button is clicked.
+     */
+    ionClear;
+    /**
+     * Emitted when the input loses focus.
+     */
+    ionBlur;
+    /**
+     * Emitted when the input has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle;
     valueChanged() {
         const inputEl = this.nativeInput;
         const value = this.getValue();
@@ -236,7 +224,9 @@ export class Searchbar {
         this.emitStyle();
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+        this.inheritedAttributes = {
+            ...inheritAttributes(this.el, ['lang', 'dir']),
+        };
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
@@ -247,15 +237,13 @@ export class Searchbar {
         }, 300);
     }
     disconnectedCallback() {
-        var _a;
-        this.clearButtonPressController.destroy();
         if (this.loadTimeout) {
             clearTimeout(this.loadTimeout);
         }
         if (this.clearTimeout) {
             clearTimeout(this.clearTimeout);
         }
-        (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.searchIconResizeObserver?.disconnect();
     }
     emitStyle() {
         this.ionStyle.emit({
@@ -311,6 +299,105 @@ export class Searchbar {
         const { value } = this;
         this.ionInput.emit({ value, event });
     }
+    /**
+     * Clears the input field and triggers the control change.
+     */
+    onClearInput = async (shouldFocus) => {
+        if (this.clearTimeout) {
+            clearTimeout(this.clearTimeout);
+        }
+        this.ionClear.emit();
+        return new Promise((resolve) => {
+            // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
+            // wait for 4 frames
+            this.clearTimeout = setTimeout(() => {
+                const value = this.getValue();
+                if (value !== '') {
+                    this.value = '';
+                    this.emitInputChange();
+                    /**
+                     * When tapping clear button
+                     * ensure input is focused after
+                     * clearing input so users
+                     * can quickly start typing.
+                     */
+                    if (shouldFocus && !this.focused) {
+                        this.setFocus();
+                        /**
+                         * The setFocus call above will clear focusedValue,
+                         * but ionChange will never have gotten a chance to
+                         * fire. Manually revert focusedValue so onBlur can
+                         * compare against what was in the box before the clear.
+                         */
+                        this.focusedValue = value;
+                    }
+                }
+                resolve();
+            }, 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.
+     */
+    onCancelSearchbar = async (ev) => {
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+        this.ionCancel.emit();
+        // get cached values before clearing the input
+        const value = this.getValue();
+        const focused = this.focused;
+        await this.onClearInput();
+        /**
+         * If there used to be something in the box, and we weren't focused
+         * beforehand (meaning no blur fired that would already handle this),
+         * manually fire ionChange.
+         */
+        if (value && !focused) {
+            this.emitValueChange(ev);
+        }
+        if (this.nativeInput) {
+            this.nativeInput.blur();
+        }
+    };
+    /**
+     * Update the Searchbar input value when the input changes
+     */
+    onInput = (ev) => {
+        const input = ev.target;
+        if (input) {
+            this.value = input.value;
+        }
+        this.emitInputChange(ev);
+    };
+    onChange = (ev) => {
+        this.emitValueChange(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.
+     */
+    onBlur = (ev) => {
+        this.focused = false;
+        this.ionBlur.emit();
+        this.positionElements();
+        if (this.focusedValue !== this.value) {
+            this.emitValueChange(ev);
+        }
+        this.focusedValue = undefined;
+    };
+    /**
+     * Sets the Searchbar to focused and active on input focus.
+     */
+    onFocus = () => {
+        this.focused = true;
+        this.focusedValue = this.value;
+        this.ionFocus.emit();
+        this.positionElements();
+    };
     /**
      * Positions the input search icon, placeholder, and the cancel button
      * based on the input value and if it is focused. (ios only)
@@ -318,10 +405,10 @@ export class Searchbar {
     positionElements() {
         const value = this.getValue();
         const prevAlignLeft = this.shouldAlignLeft;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
         this.shouldAlignLeft = shouldAlignLeft;
-        if (theme !== 'ios') {
+        if (mode !== 'ios') {
             return;
         }
         if (prevAlignLeft !== shouldAlignLeft) {
@@ -353,7 +440,6 @@ export class Searchbar {
             doc.body.appendChild(tempSpan);
             // Get the width of the span then remove it
             raf(() => {
-                var _a, _b;
                 const textWidth = tempSpan.offsetWidth;
                 tempSpan.remove();
                 // Calculate the input padding
@@ -372,15 +458,14 @@ export class Searchbar {
                  * If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
                  */
                 if (iconWidth === 0) {
-                    (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    this.searchIconResizeObserver?.disconnect();
                     this.searchIconResizeObserver = new ResizeObserver((entries) => {
-                        var _a;
                         if (entries[0].contentRect.width > 0) {
-                            (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                            this.searchIconResizeObserver?.disconnect();
                             this.positionPlaceholder();
                         }
                     });
-                    (_b = this.searchIconResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(iconEl);
+                    this.searchIconResizeObserver?.observe(iconEl);
                     return;
                 }
                 const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
@@ -433,12 +518,6 @@ export class Searchbar {
     hasValue() {
         return this.getValue() !== '';
     }
-    shouldShowSearchIcon() {
-        if (this.searchIcon === false || this.searchIcon === 'false') {
-            return false;
-        }
-        return true;
-    }
     /**
      * Determines whether or not the cancel button should be visible onscreen.
      * Cancel button should be shown if one of two conditions applies:
@@ -455,153 +534,53 @@ export class Searchbar {
      * 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 or a clear button press is still in flight.
-     * Unless the `theme` is `ionic` and the searchbar is disabled.
+     * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
      */
     shouldShowClearButton() {
-        const theme = getIonTheme(this);
-        if (this.showClearButton === 'never' ||
-            (this.showClearButton === 'focus' && !this.focused && !this.isClearButtonPressed)) {
-            return false;
-        }
-        if (theme === 'ionic' && this.disabled) {
+        if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
             return false;
         }
         return true;
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11677): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-11678): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'medium';
-        }
-        return size;
-    }
-    /**
-     * Get the icon to use for the clear icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get searchbarClearIcon() {
-        // Return the icon if it is explicitly set
-        if (this.clearIcon != null) {
-            return this.clearIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: closeCircle,
-            ionic: xRegular,
-            md: closeSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar clear icon or the default icon
-        return config.get('searchbarClearIcon', defaultIcon);
-    }
-    /**
-     * Get the icon to use for the search icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get searchbarSearchIcon() {
-        // Return the icon if it is explicitly set.
-        // If the icon is set to a boolean or string 'true', use the default icon.
-        if (this.searchIcon != null && this.searchIcon !== 'true' && typeof this.searchIcon !== 'boolean') {
-            return this.searchIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: searchOutline,
-            ionic: magnifyingGlassRegular,
-            md: searchSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar search icon or the default icon
-        return config.get('searchbarSearchIcon', defaultIcon);
-    }
-    /**
-     * Get the icon to use for the cancel icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get searchbarCancelIcon() {
-        // Return the icon if it is explicitly set
-        if (this.cancelButtonIcon != null) {
-            return this.cancelButtonIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: arrowBackSharp,
-            ionic: arrowLeftRegular,
-            md: arrowBackSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar cancel icon, the back button icon or the default icon
-        return config.get('searchbarCancelIcon', config.get('backButtonIcon', defaultIcon));
-    }
     render() {
-        const { cancelButtonText, autocapitalize, searchbarCancelIcon, searchbarClearIcon, searchbarSearchIcon } = this;
+        const { cancelButtonText, autocapitalize } = this;
         const animated = this.animated && config.getBoolean('animated', true);
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
+        const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const shape = this.getShape();
-        const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'b7c0ac188898cd320c11ecc3f100a686468b0b24', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '3f04b6dcc64a2e51a4de863694888e5af3692387', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '9c31c41ff5026a9c42f45a5cfd3c98d8eb4e9925', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [theme]: true,
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '47ee586db12684db8b2d16a790976bd247cbbc62', "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", { key: '55e6b556a46e7bba14c2cfe1b58542499d2334ab', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '468d524b52a0d29d840e2c3cdafba46152716b15', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(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-search-icon': this.shouldShowSearchIcon(),
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-                [`searchbar-shape-${shape}`]: shape !== undefined,
-                [`searchbar-size-${size}`]: size !== undefined,
-                'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, h("div", { key: '5710382c91b47ecfba36aab7bd8497723cb1aa04', class: "searchbar-input-container" }, h("input", Object.assign({ key: '1ab27cbebfad408b96d1bb1b57e4caa7420ced72', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: '3e0d29f6f35e6b817bb4bc7f879e8445c2ceadee', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: '87521fd5630077725fd30173d17fd1d49819c209', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'd93452bbe539c582846e4a5826c0671e235349d0', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }) }, h("div", { key: '94378bdfdf883c28941ef770d64347705d6f8345', class: "searchbar-input-container" }, h("input", { key: 'deea2190823bf8652703148d308aa21473605930', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), mode === 'md' && cancelButton, h("ion-icon", { key: '0ecc28496ab545f2064b71b994b4cbf0968c2108', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '1bcc77d70eaa08f2ae7fc6173642f114fe387fb7', "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", { key: 'bbf8d05eb1070a0d34a22236dfaaf11d8dcc06af', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["searchbar.ios.scss"],
-            "md": ["searchbar.md.scss"],
-            "ionic": ["searchbar.ionic.scss"]
+            "md": ["searchbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["searchbar.ios.css"],
-            "md": ["searchbar.md.css"],
-            "ionic": ["searchbar.ionic.css"]
+            "md": ["searchbar.md.css"]
         };
     }
     static get properties() {
@@ -700,11 +679,11 @@ export class Searchbar {
                 "defaultValue": "'off'"
             },
             "autocorrect": {
-                "type": "string",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'on' | 'off'",
-                    "resolved": "\"off\" | \"on\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -717,26 +696,27 @@ export class Searchbar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "autocorrect",
-                "defaultValue": "'off'"
+                "defaultValue": "false"
             },
             "cancelButtonIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button icon. Only available when the theme is `\"md\"`.\nDefaults to `\"arrow-back-sharp\"`."
+                    "text": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "cancel-button-icon"
+                "attribute": "cancel-button-icon",
+                "defaultValue": "config.get('backButtonIcon', arrowBackSharp) as string"
             },
             "cancelButtonText": {
                 "type": "string",
@@ -750,7 +730,7 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button text. Only available when the theme is `\"ios\"`."
+                    "text": "Set the cancel button text. Only applies to `ios` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -770,7 +750,7 @@ export class Searchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the clear icon. Defaults to `\"close-circle\"` for `\"ios\"` theme and `\"close-sharp\"` for `\"md\"` and `\"ionic\"` theme."
+                    "text": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`."
                 },
                 "getter": false,
                 "setter": false,
@@ -933,18 +913,18 @@ export class Searchbar {
                 "defaultValue": "'Search'"
             },
             "searchIcon": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | boolean",
-                    "resolved": "boolean | string | undefined",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\nthe `\"ios\"` theme and `\"search-sharp\"` in the `\"md\"` and `\"ionic\"` themes.\nIf `false`, no search icon will be displayed."
+                    "text": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -1050,52 +1030,13 @@ export class Searchbar {
                 "reflect": false,
                 "attribute": "value",
                 "defaultValue": "''"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"soft\"` for a searchbar with slightly rounded corners,\n`\"round\"` for a searchbar with fully rounded corners,\nor `\"rectangular\"` for a searchbar without rounded corners.\n\nDefaults to `\"round\"` for the ionic theme, and `undefined` for all other themes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shape"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"large\"` for a searchbar with an increase in height,\nwhile \"small\" and \"medium\" provide progressively smaller heights.\n\nDefaults to `\"medium\"` for the ionic theme, and `undefined` for all other themes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
             }
         };
     }
     static get states() {
         return {
             "focused": {},
-            "noAnimate": {},
-            "isClearButtonPressed": {}
+            "noAnimate": {}
         };
     }
     static get events() {