@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

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

@@ -1,12 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, i as forceUpdate, e as config, h, d as Host } from './index-ChhhtsGZ.js';
-import { d as debounceEvent, b as inheritAttributes, c as componentOnReady, r as raf } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, c as createEvent, e as config, i as forceUpdate, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
+import { d as debounceEvent, b as inheritAttributes, c as componentOnReady, r as raf } from './helpers-BIgoInJU.js';
 import { i as isRTL } from './dir-Dojwmvde.js';
 import { c as createColorClasses } from './theme-byZM6qHV.js';
 import { a as arrowBackSharp, s as searchOutline, i as searchSharp, g as closeCircle, h as closeSharp } from './index-BvabGprD.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 
 const searchbarIosCss = () => `.sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;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;-ms-flex-negative:1;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%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ios::-webkit-input-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::-moz-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:-ms-input-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::-ms-input-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::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;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-appearance:none;-moz-appearance:none;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, #0054e9);--clear-button-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:12px;padding-bottom:12px;min-height:60px;contain:content}.searchbar-input-container.sc-ion-searchbar-ios{min-height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px);top:0;position:absolute;width:1.375rem;height:100%;contain:strict}.searchbar-search-icon.sc-ion-searchbar-ios{inset-inline-start:5px}.searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:6px;padding-bottom:6px;height:100%;font-size:1.0625rem;font-weight:400;contain:strict}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem;-webkit-padding-end:1.75rem;padding-inline-end:1.75rem}.searchbar-clear-button.sc-ion-searchbar-ios{top:0;background-position:center;position:absolute;width:1.875rem;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-ios{inset-inline-end:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:1.125rem;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0;background-color:transparent;font-size:17px}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:0;margin-inline-start:0}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.875rem;padding-inline-start:1.875rem}.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{-webkit-transition:all 300ms ease;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{-webkit-margin-end:-100%;margin-inline-end:-100%;-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0);-webkit-transition:all 300ms ease;transition:all 300ms ease;opacity:0;pointer-events:none}.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{-webkit-transition-duration:0ms;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;min-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}`;
 
@@ -22,23 +22,185 @@ const Searchbar = class {
         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.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
+        this.focused = false;
+        this.noAnimate = true;
+        /**
+         * 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 = false;
+        /**
+         * Set the cancel button icon. Only applies to `md` mode.
+         * Defaults to `arrow-back-sharp`.
+         */
+        this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
+        /**
+         * Set the cancel button text. Only applies to `ios` mode.
+         */
+        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) => {
+            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;
-    get el() { return getElement(this); }
-    focused = false;
-    noAnimate = true;
     /**
      * lang and dir are globally enumerated attributes.
      * As a result, creating these as properties
@@ -60,46 +222,6 @@ const Searchbar = class {
         };
         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;
         /**
@@ -108,116 +230,6 @@ const Searchbar = class {
          */
         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();
@@ -310,105 +322,6 @@ const Searchbar = class {
         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)
@@ -580,6 +493,7 @@ const Searchbar = class {
                 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));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "lang": [{
                 "onLangChanged": 0

package/dist/esm/ion-segment-content.entry.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host } from './index-ChhhtsGZ.js';
+import { r as registerInstance, h, d as Host } from './index-CKYcsw8f.js';
 
 const segmentContentCss = () => `:host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;min-height:1px;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}`;
 

package/dist/esm/ion-segment-view.entry.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-ChhhtsGZ.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
 import { i as isRTL } from './dir-Dojwmvde.js';
 
 const segmentViewIosCss = () => `:host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}`;
@@ -12,30 +12,17 @@ const SegmentView = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionSegmentViewScroll = createEvent(this, "ionSegmentViewScroll", 7);
+        this.scrollEndTimeout = null;
+        this.isTouching = false;
+        /**
+         * If `true`, the segment view cannot be interacted with.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+         */
+        this.swipeGesture = true;
     }
-    scrollEndTimeout = null;
-    isTouching = false;
-    get el() { return getElement(this); }
-    /**
-     * If `true`, the segment view cannot be interacted with.
-     */
-    disabled = false;
-    /**
-     * If `true`, users will be able to swipe the segment view to navigate between segment contents.
-     */
-    swipeGesture = true;
-    /**
-     * @internal
-     *
-     * If `true`, the segment view is scrollable.
-     * If `false`, pointer events will be disabled. This is to prevent issues with
-     * quickly scrolling after interacting with a segment button.
-     */
-    isManualScroll;
-    /**
-     * Emitted when the segment view is scrolled.
-     */
-    ionSegmentViewScroll;
     handleScroll(ev) {
         const { scrollLeft, scrollWidth, clientWidth } = ev.target;
         const max = scrollWidth - clientWidth;
@@ -128,6 +115,7 @@ const SegmentView = class {
                 'segment-view-swipe-disabled': swipeGesture === false,
             } }, h("slot", { key: 'ad5aa8b79790c490e13438afa0cbb2c241eab0a1' })));
     }
+    get el() { return getElement(this); }
 };
 SegmentView.style = {
     ios: segmentViewIosCss(),