@amwaljs/checkout-button 0.2.9 → 0.3.1

package/dist/cjs/ion-router-outlet.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BPGqVQtz.js');
+var index = require('./index-DncWzXDA.js');
 var cubicBezier = require('./cubic-bezier-Bv3PvaRI.js');
-var frameworkDelegate = require('./framework-delegate-BoMy23Lz.js');
-var helpers = require('./helpers-C5_WrFOI.js');
+var frameworkDelegate = require('./framework-delegate-D-6PUvOi.js');
+var helpers = require('./helpers-B4vhh9gt.js');
 var lockController = require('./lock-controller-58TZFRHC.js');
-var index$1 = require('./index-C-U8a6CY.js');
-var ionicGlobal = require('./ionic-global-BmDUlKDf.js');
+var index$1 = require('./index-DZA7ogU0.js');
+var ionicGlobal = require('./ionic-global-DRLi5Iq3.js');
 
 const routerOutletCss = () => `:host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
 
@@ -18,14 +18,11 @@ const RouterOutlet = class {
         this.ionNavDidChange = index.createEvent(this, "ionNavDidChange", 3);
         this.lockController = lockController.createLockController();
         this.gestureOrAnimationInProgress = false;
-        /**
-         * The mode determines which platform styles to use.
-         */
         this.mode = ionicGlobal.getIonMode(this);
-        /**
-         * If `true`, the router-outlet should animate the transition of components.
-         */
+        this.delegate = undefined;
         this.animated = true;
+        this.animation = undefined;
+        this.swipeHandler = undefined;
     }
     swipeHandlerChanged() {
         if (this.gesture) {
@@ -39,7 +36,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-BkT4j65k.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-C9j0kufI.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
             if (this.ani) {
                 this.ani.onFinish(() => {
                     this.gestureOrAnimationInProgress = false;
@@ -89,7 +86,7 @@ const RouterOutlet = class {
             changed = await this.transition(enteringEl, leavingEl, opts);
         }
         catch (e) {
-            index.printIonError('[ion-router-outlet] - Exception in commit:', e);
+            console.error(e);
         }
         unlock();
         return changed;
@@ -139,8 +136,8 @@ const RouterOutlet = class {
         // emit nav will change event
         this.ionNavWillChange.emit();
         const { el, mode } = this;
-        const animated = this.animated && index.config.getBoolean('animated', true);
-        const animationBuilder = opts.animationBuilder || this.animation || index.config.get('navAnimation');
+        const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
+        const animationBuilder = opts.animationBuilder || this.animation || ionicGlobal.config.get('navAnimation');
         await index$1.transition(Object.assign(Object.assign({ mode,
             animated,
             enteringEl,
@@ -185,14 +182,15 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return index.h("slot", { key: '84b50f1155b0d780dff802ee13223287259fd525' });
+        return index.h("slot", { key: '0949db1bcfde67b462abe9cae72c7a7fd70ea678' });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "swipeHandler": ["swipeHandlerChanged"]
+        "swipeHandler": [{
+                "swipeHandlerChanged": 0
+            }]
     }; }
 };
 RouterOutlet.style = routerOutletCss();
 
 exports.ion_router_outlet = RouterOutlet;
-//# sourceMappingURL=ion-router-outlet.entry.cjs.js.map

package/dist/cjs/ion-router.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BPGqVQtz.js');
-var helpers = require('./helpers-C5_WrFOI.js');
+var index = require('./index-DncWzXDA.js');
+var helpers = require('./helpers-B4vhh9gt.js');
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -152,16 +152,16 @@ const printRedirects = (redirects) => {
  * The methods calls setRouteId on each of the outlet with the corresponding route entry in the chain.
  * setRouteId will create or select the view in the outlet.
  */
-const writeNavState = async (root, chain, direction, index$1, changed = false, animation) => {
+const writeNavState = async (root, chain, direction, index, changed = false, animation) => {
     try {
         // find next navigation outlet in the DOM
         const outlet = searchNavNode(root);
         // make sure we can continue interacting the DOM, otherwise abort
-        if (index$1 >= chain.length || !outlet) {
+        if (index >= chain.length || !outlet) {
             return changed;
         }
         await new Promise((resolve) => helpers.componentOnReady(outlet, resolve));
-        const route = chain[index$1];
+        const route = chain[index];
         const result = await outlet.setRouteId(route.id, route.params, direction, animation);
         // if the outlet changed the page, reset navigation to neutral (no direction)
         // this means nested outlets will not animate
@@ -170,7 +170,7 @@ const writeNavState = async (root, chain, direction, index$1, changed = false, a
             changed = true;
         }
         // recursively set nested outlets
-        changed = await writeNavState(result.element, chain, direction, index$1 + 1, changed, animation);
+        changed = await writeNavState(result.element, chain, direction, index + 1, changed, animation);
         // once all nested outlets are visible let's make the parent visible too,
         // using markVisible prevents flickering
         if (result.markVisible) {
@@ -179,7 +179,7 @@ const writeNavState = async (root, chain, direction, index$1, changed = false, a
         return changed;
     }
     catch (e) {
-        index.printIonError('[ion-router] - Exception in writeNavState:', e);
+        console.error(e);
         return false;
     }
 };
@@ -553,25 +553,7 @@ const Router = class {
         this.busy = false;
         this.state = 0;
         this.lastState = 0;
-        /**
-         * The root path to use when matching URLs. By default, this is set to "/", but you can specify
-         * an alternate prefix for all URL paths.
-         */
         this.root = '/';
-        /**
-         * The router can work in two "modes":
-         * - With hash: `/index.html#/path/to/page`
-         * - Without hash: `/path/to/page`
-         *
-         * Using one or another might depend in the requirements of your app and/or where it's deployed.
-         *
-         * Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
-         * requires additional server-side configuration in order to properly work.
-         *
-         * On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
-         *
-         * By default, this property is `true`, change to `false` to allow hash-less URLs.
-         */
         this.useHash = true;
     }
     async componentWillLoad() {
@@ -631,7 +613,6 @@ const Router = class {
      *
      * @param path The path to navigate to.
      * @param direction The direction of the animation. Defaults to `"forward"`.
-     * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
         var _a;
@@ -667,19 +648,19 @@ const Router = class {
     /** @internal */
     async navChanged(direction) {
         if (this.busy) {
-            index.printIonWarning('[ion-router] - Router is busy, navChanged was cancelled.');
+            console.warn('[ion-router] router is busy, navChanged was cancelled');
             return false;
         }
         const { ids, outlet } = await readNavState(window.document.body);
         const routes = readRoutes(this.el);
         const chain = findChainForIDs(ids, routes);
         if (!chain) {
-            index.printIonWarning('[ion-router] - No matching URL for', ids.map((i) => i.id));
+            console.warn('[ion-router] no matching URL for ', ids.map((i) => i.id));
             return false;
         }
         const segments = chainToSegments(chain);
         if (!segments) {
-            index.printIonWarning('[ion-router] - Router could not match path because some required param is missing.');
+            console.warn('[ion-router] router could not match path because some required param is missing');
             return false;
         }
         this.setSegments(segments, direction);
@@ -717,7 +698,7 @@ const Router = class {
     }
     async writeNavStateRoot(segments, direction, animation) {
         if (!segments) {
-            index.printIonError('[ion-router] - URL is not part of the routing set.');
+            console.error('[ion-router] URL is not part of the routing set');
             return false;
         }
         // lookup redirect rule
@@ -734,20 +715,20 @@ const Router = class {
         const routes = readRoutes(this.el);
         const chain = findChainForSegments(segments, routes);
         if (!chain) {
-            index.printIonError('[ion-router] - The path does not match any route.');
+            console.error('[ion-router] the path does not match any route');
             return false;
         }
         // write DOM give
         return this.safeWriteNavState(document.body, chain, direction, segments, redirectFrom, 0, animation);
     }
-    async safeWriteNavState(node, chain, direction, segments, redirectFrom, index$1 = 0, animation) {
+    async safeWriteNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
         const unlock = await this.lock();
         let changed = false;
         try {
-            changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index$1, animation);
+            changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
         }
         catch (e) {
-            index.printIonError('[ion-router] - Exception in safeWriteNavState:', e);
+            console.error(e);
         }
         unlock();
         return changed;
@@ -787,9 +768,9 @@ const Router = class {
         const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
         return beforeEnterHook ? beforeEnterHook() : true;
     }
-    async writeNavState(node, chain, direction, segments, redirectFrom, index$1 = 0, animation) {
+    async writeNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
         if (this.busy) {
-            index.printIonWarning('[ion-router] - Router is busy, transition was cancelled.');
+            console.warn('[ion-router] router is busy, transition was cancelled');
             return false;
         }
         this.busy = true;
@@ -798,7 +779,7 @@ const Router = class {
         if (routeEvent) {
             this.ionRouteWillChange.emit(routeEvent);
         }
-        const changed = await writeNavState(node, chain, direction, index$1, false, animation);
+        const changed = await writeNavState(node, chain, direction, index, false, animation);
         this.busy = false;
         // emit did change
         if (routeEvent) {
@@ -831,4 +812,3 @@ const Router = class {
 };
 
 exports.ion_router = Router;
-//# sourceMappingURL=ion-router.entry.cjs.js.map

package/dist/cjs/ion-row.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BPGqVQtz.js');
-var ionicGlobal = require('./ionic-global-BmDUlKDf.js');
+var index = require('./index-DncWzXDA.js');
+var ionicGlobal = require('./ionic-global-DRLi5Iq3.js');
 
 const rowCss = () => `:host{display:flex;flex-wrap:wrap}`;
 
@@ -10,10 +10,9 @@ const Row = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '65592a79621bd8f75f9566db3e8c05a4b8fc6048', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '56f09784db7a0299c9ce76dfcede185b295251ff' })));
+        return (index.h(index.Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
     }
 };
 Row.style = rowCss();
 
 exports.ion_row = Row;
-//# sourceMappingURL=ion-row.entry.cjs.js.map

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-BPGqVQtz.js');
-var helpers = require('./helpers-C5_WrFOI.js');
+var index = require('./index-DncWzXDA.js');
+var helpers = require('./helpers-B4vhh9gt.js');
 var dir = require('./dir-Br-7_bel.js');
 var theme = require('./theme-DbHdw1Nx.js');
-var index$1 = require('./index-DseJYF57.js');
-var ionicGlobal = require('./ionic-global-BmDUlKDf.js');
+var index$1 = require('./index-6eOg4xTk.js');
+var ionicGlobal = require('./ionic-global-DRLi5Iq3.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:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #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;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{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%;transform:translate3d(0,  0,  0);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{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}`;
+const searchbarIosCss = () => `.sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.6;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);-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}@supports (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{inset-inline-start:5px}}@supports not (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{left:5px}[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}@supports selector(:dir(rtl)){.searchbar-search-icon.sc-ion-searchbar-ios:dir(rtl){left:unset;right:unset;right: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}@supports (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-ios{inset-inline-end:0}}@supports not (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-ios{right:0}[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}@supports selector(:dir(rtl)){.searchbar-clear-button.sc-ion-searchbar-ios:dir(rtl){left:unset;right:unset;left:0}}}.searchbar-clear-icon.sc-ion-searchbar-ios{width:1.125rem;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}.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{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%;transform:translate3d(0,  0,  0);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{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}`;
 
-const searchbarMdCss = () => `.sc-ion-searchbar-md-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:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));--clear-button-color:initial;--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;background:inherit}.searchbar-search-icon.sc-ion-searchbar-md{top:11px;width:1.3125rem;height:1.3125rem}.searchbar-search-icon.sc-ion-searchbar-md{inset-inline-start:16px}.searchbar-cancel-button.sc-ion-searchbar-md{top:0;background-color:transparent;font-size:1.5em}.searchbar-cancel-button.sc-ion-searchbar-md{inset-inline-start:9px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{-webkit-padding-start:3.4375rem;padding-inline-start:3.4375rem;-webkit-padding-end:3.4375rem;padding-inline-end:3.4375rem;padding-top:0.375rem;padding-bottom:0.375rem;background-position:left 8px center;height:auto;font-size:1rem;font-weight:400;line-height:30px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}@supports selector(:dir(rtl)){.searchbar-input.sc-ion-searchbar-md:dir(rtl){background-position:right 8px center}}.searchbar-clear-button.sc-ion-searchbar-md{top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-md{inset-inline-end:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:1.375rem;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:3px;padding-bottom:3px}`;
+const searchbarMdCss = () => `.sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.6;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, #1a1a1a);--clear-button-color:initial;--color:var(--ion-color-step-850, #262626);--icon-color:var(--ion-color-step-600, #666666);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;background:inherit}.searchbar-search-icon.sc-ion-searchbar-md{top:11px;width:1.3125rem;height:1.3125rem}@supports (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-md{inset-inline-start:16px}}@supports not (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-md{left:16px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}@supports selector(:dir(rtl)){.searchbar-search-icon.sc-ion-searchbar-md:dir(rtl){left:unset;right:unset;right:16px}}}.searchbar-cancel-button.sc-ion-searchbar-md{top:0;background-color:transparent;font-size:1.5em}@supports (inset-inline-start: 0){.searchbar-cancel-button.sc-ion-searchbar-md{inset-inline-start:9px}}@supports not (inset-inline-start: 0){.searchbar-cancel-button.sc-ion-searchbar-md{left:9px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:9px}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:9px}@supports selector(:dir(rtl)){.searchbar-cancel-button.sc-ion-searchbar-md:dir(rtl){left:unset;right:unset;right:9px}}}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{-webkit-padding-start:3.4375rem;padding-inline-start:3.4375rem;-webkit-padding-end:3.4375rem;padding-inline-end:3.4375rem;padding-top:0.375rem;padding-bottom:0.375rem;background-position:left 8px center;height:auto;font-size:1rem;font-weight:400;line-height:30px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}@supports selector(:dir(rtl)){.searchbar-input.sc-ion-searchbar-md:dir(rtl){background-position:right 8px center}}.searchbar-clear-button.sc-ion-searchbar-md{top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}@supports (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-md{inset-inline-end:13px}}@supports not (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-md{right:13px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}@supports selector(:dir(rtl)){.searchbar-clear-button.sc-ion-searchbar-md:dir(rtl){left:unset;right:unset;left:13px}}}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:1.375rem;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:3px;padding-bottom:3px}`;
 
 const Searchbar = class {
     constructor(hostRef) {
@@ -25,88 +25,13 @@ const Searchbar = class {
         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 = 'off';
-        /**
-         * Set the cancel button icon. Only applies to `md` mode.
-         * Defaults to `arrow-back-sharp`.
-         */
-        this.cancelButtonIcon = index.config.get('backButtonIcon', index$1.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) => {
             this.ionClear.emit();
             return new Promise((resolve) => {
-                // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
+                // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
                 // wait for 4 frames
                 setTimeout(() => {
                     const value = this.getValue();
@@ -196,6 +121,30 @@ const Searchbar = class {
             this.ionFocus.emit();
             this.positionElements();
         };
+        this.focused = false;
+        this.noAnimate = true;
+        this.color = undefined;
+        this.animated = false;
+        this.autocapitalize = 'default';
+        this.autocomplete = 'off';
+        this.autocorrect = 'off';
+        this.cancelButtonIcon = ionicGlobal.config.get('backButtonIcon', index$1.arrowBackSharp);
+        this.cancelButtonText = 'Cancel';
+        this.clearIcon = undefined;
+        this.debounce = undefined;
+        this.disabled = false;
+        this.inputmode = undefined;
+        this.enterkeyhint = undefined;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.name = this.inputId;
+        this.placeholder = 'Search';
+        this.searchIcon = undefined;
+        this.showCancelButton = 'never';
+        this.showClearButton = 'always';
+        this.spellcheck = false;
+        this.type = 'search';
+        this.value = '';
     }
     /**
      * lang and dir are globally enumerated attributes.
@@ -255,8 +204,10 @@ const Searchbar = class {
     /**
      * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
      * `input.focus()`.
+     *
      * Developers who wish to focus an input when a page enters
      * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
+     *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
      *
@@ -430,13 +381,13 @@ const Searchbar = class {
     }
     render() {
         const { cancelButtonText, autocapitalize } = this;
-        const animated = this.animated && index.config.getBoolean('animated', true);
+        const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
         const mode = ionicGlobal.getIonMode(this);
         const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "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" }, index.h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (index.h(index.Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '9c7b4d2e86d9bcd12e57c9a96723d3da598a3773', "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" }, index.h("div", { key: '1c25268a776134cccd29eb752898cb8ac0eed30f', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (index.h(index.Host, { key: 'feef9fc7e405656e134a76dc037aaaa1a4ce36b4', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -446,22 +397,32 @@ const Searchbar = class {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, index.h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "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)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, index.h("div", { key: '92e3925dc0de468e5665705902153837105dfa57', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: 'fb74faf81b347a62338ccdac981525df1c52b322', "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)), mode === 'md' && cancelButton, index.h("ion-icon", { key: 'd58c3636dac1d2e4135989f4c07dc95c51492e60', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '1cece7c63ca5ca4b8799e15ee6d2bac100ef0d5e', "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) }, index.h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'fe3c2b9cac29002f69e95a89b554c7504e2df050', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "lang": ["onLangChanged"],
-        "dir": ["onDirChanged"],
-        "debounce": ["debounceChanged"],
-        "value": ["valueChanged"],
-        "showCancelButton": ["showCancelButtonChanged"]
+        "lang": [{
+                "onLangChanged": 0
+            }],
+        "dir": [{
+                "onDirChanged": 0
+            }],
+        "debounce": [{
+                "debounceChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "showCancelButton": [{
+                "showCancelButtonChanged": 0
+            }]
     }; }
 };
 let searchbarIds = 0;
@@ -471,4 +432,3 @@ Searchbar.style = {
 };
 
 exports.ion_searchbar = Searchbar;
-//# sourceMappingURL=ion-searchbar.entry.cjs.js.map