@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/components/ion-row.js

@@ -1 +1,34 @@
-import{p as s,H as t,h as e,d as o,t as r}from"./p-BnQDByf2.js";import{g as n}from"./p-CN34uOrj.js";const a=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow()}render(){return e(o,{key:"242c9a45b0bb39af2aebf412fdfa9a176babc834",class:n(this)},e("slot",{key:"d9015d663d631bbf20bd3e0821fed874cd6c5156"}))}static get style(){return":host{display:flex;flex-wrap:wrap}"}},[257,"ion-row"]),c=a,f=function(){"undefined"!=typeof customElements&&["ion-row"].forEach((s=>{"ion-row"===s&&(customElements.get(r(s))||customElements.define(r(s),a))}))};export{c as IonRow,f as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host } from './p-ec0e3f3f.js';
+import { g as getIonMode } from './p-901c16c5.js';
+
+const rowCss = ":host{display:flex;flex-wrap:wrap}";
+
+const Row = /*@__PURE__*/ proxyCustomElement(class Row extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
+  }
+  static get style() { return rowCss; }
+}, [1, "ion-row"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Row);
+      }
+      break;
+  } });
+}
+
+const IonRow = Row;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonRow, defineCustomElement };

package/dist/components/ion-searchbar.js

@@ -1 +1,472 @@
-import{p as r,H as a,c as i,f as s,h as o,d as e,t}from"./p-BnQDByf2.js";import{n,c,d as h,r as b}from"./p-BwKjt_Dc.js";import{i as l}from"./p-C53feagD.js";import{c as d}from"./p-DiVJyqlX.js";import{b as p,s as u,q as m,j as g,k as f}from"./p-CwRU9ccI.js";import{c as x,g as v}from"./p-CN34uOrj.js";import{d as y}from"./p-DMmSL7_l.js";const w=r(class extends a{constructor(r){super(),!1!==r&&this.__registerHost(),this.ionInput=i(this,"ionInput",7),this.ionChange=i(this,"ionChange",7),this.ionCancel=i(this,"ionCancel",7),this.ionClear=i(this,"ionClear",7),this.ionBlur=i(this,"ionBlur",7),this.ionFocus=i(this,"ionFocus",7),this.ionStyle=i(this,"ionStyle",7),this.isCancelVisible=!1,this.shouldAlignLeft=!0,this.inputId="ion-searchbar-"+k++,this.inheritedAttributes={},this.onClearInput=async r=>(this.ionClear.emit(),new Promise((a=>{setTimeout((()=>{const i=this.getValue();""!==i&&(this.value="",this.emitInputChange(),r&&!this.focused&&(this.setFocus(),this.focusedValue=i)),a()}),64)}))),this.onCancelSearchbar=async r=>{r&&(r.preventDefault(),r.stopPropagation()),this.ionCancel.emit();const a=this.getValue(),i=this.focused;await this.onClearInput(),a&&!i&&this.emitValueChange(r),this.nativeInput&&this.nativeInput.blur()},this.onInput=r=>{const a=r.target;a&&(this.value=a.value),this.emitInputChange(r)},this.onChange=r=>{this.emitValueChange(r)},this.onBlur=r=>{this.focused=!1,this.ionBlur.emit(),this.positionElements(),this.focusedValue!==this.value&&this.emitValueChange(r),this.focusedValue=void 0},this.onFocus=()=>{this.focused=!0,this.focusedValue=this.value,this.ionFocus.emit(),this.positionElements()},this.focused=!1,this.noAnimate=!0,this.color=void 0,this.animated=!1,this.autocapitalize="default",this.autocomplete="off",this.autocorrect="off",this.cancelButtonIcon=x.get("backButtonIcon",p),this.cancelButtonText="Cancel",this.clearIcon=void 0,this.debounce=void 0,this.disabled=!1,this.inputmode=void 0,this.enterkeyhint=void 0,this.maxlength=void 0,this.minlength=void 0,this.name=this.inputId,this.placeholder="Search",this.searchIcon=void 0,this.showCancelButton="never",this.showClearButton="always",this.spellcheck=!1,this.type="search",this.value=""}onLangChanged(r){this.inheritedAttributes=Object.assign(Object.assign({},this.inheritedAttributes),{lang:r}),s(this)}onDirChanged(r){this.inheritedAttributes=Object.assign(Object.assign({},this.inheritedAttributes),{dir:r}),s(this)}debounceChanged(){const{ionInput:r,debounce:a,originalIonInput:i}=this;this.ionInput=void 0===a?null!=i?i:r:n(r,a)}valueChanged(){const r=this.nativeInput,a=this.getValue();r&&r.value!==a&&(r.value=a)}showCancelButtonChanged(){requestAnimationFrame((()=>{this.positionElements(),s(this)}))}connectedCallback(){this.emitStyle()}componentWillLoad(){this.inheritedAttributes=Object.assign({},c(this.el,["lang","dir"]))}componentDidLoad(){this.originalIonInput=this.ionInput,this.positionElements(),this.debounceChanged(),setTimeout((()=>{this.noAnimate=!1}),300)}emitStyle(){this.ionStyle.emit({searchbar:!0})}async setFocus(){this.nativeInput&&this.nativeInput.focus()}async getInputElement(){return this.nativeInput||await new Promise((r=>h(this.el,r))),Promise.resolve(this.nativeInput)}emitValueChange(r){const{value:a}=this,i=null==a?a:""+a;this.focusedValue=i,this.ionChange.emit({value:i,event:r})}emitInputChange(r){const{value:a}=this;this.ionInput.emit({value:a,event:r})}positionElements(){const r=this.getValue(),a=this.shouldAlignLeft,i=v(this),s=!this.animated||""!==r.trim()||!!this.focused;this.shouldAlignLeft=s,"ios"===i&&(a!==s&&this.positionPlaceholder(),this.animated&&this.positionCancelButton())}positionPlaceholder(){const r=this.nativeInput;if(!r)return;const a=l(this.el),i=(this.el.shadowRoot||this.el).querySelector(".searchbar-search-icon");if(this.shouldAlignLeft)r.removeAttribute("style"),i.removeAttribute("style");else{const s=document,o=s.createElement("span");o.innerText=this.placeholder||"",s.body.appendChild(o),b((()=>{const s=o.offsetWidth;o.remove();const e="calc(50% - "+s/2+"px)",t="calc(50% - "+(s/2+i.clientWidth+8)+"px)";a?(r.style.paddingRight=e,i.style.marginRight=t):(r.style.paddingLeft=e,i.style.marginLeft=t)}))}}positionCancelButton(){const r=l(this.el),a=(this.el.shadowRoot||this.el).querySelector(".searchbar-cancel-button"),i=this.shouldShowCancelButton();if(null!==a&&i!==this.isCancelVisible){const s=a.style;if(this.isCancelVisible=i,i)r?s.marginLeft="0":s.marginRight="0";else{const i=a.offsetWidth;i>0&&(r?s.marginLeft=-i+"px":s.marginRight=-i+"px")}}}getValue(){return this.value||""}hasValue(){return""!==this.getValue()}shouldShowCancelButton(){return!("never"===this.showCancelButton||"focus"===this.showCancelButton&&!this.focused)}shouldShowClearButton(){return!("never"===this.showClearButton||"focus"===this.showClearButton&&!this.focused)}render(){const{cancelButtonText:r,autocapitalize:a}=this,i=this.animated&&x.getBoolean("animated",!0),s=v(this),t=this.clearIcon||("ios"===s?g:f),n=this.searchIcon||("ios"===s?u:m),c=this.shouldShowCancelButton(),h="never"!==this.showCancelButton&&o("button",{key:"9c7b4d2e86d9bcd12e57c9a96723d3da598a3773","aria-label":r,"aria-hidden":c?void 0:"true",type:"button",tabIndex:"ios"!==s||c?void 0:-1,onMouseDown:this.onCancelSearchbar,onTouchStart:this.onCancelSearchbar,class:"searchbar-cancel-button"},o("div",{key:"1c25268a776134cccd29eb752898cb8ac0eed30f","aria-hidden":"true"},"md"===s?o("ion-icon",{"aria-hidden":"true",mode:s,icon:this.cancelButtonIcon,lazy:!1}):r));return o(e,{key:"feef9fc7e405656e134a76dc037aaaa1a4ce36b4",role:"search","aria-disabled":this.disabled?"true":null,class:d(this.color,{[s]:!0,"searchbar-animated":i,"searchbar-disabled":this.disabled,"searchbar-no-animate":i&&this.noAnimate,"searchbar-has-value":this.hasValue(),"searchbar-left-aligned":this.shouldAlignLeft,"searchbar-has-focus":this.focused,"searchbar-should-show-clear":this.shouldShowClearButton(),"searchbar-should-show-cancel":this.shouldShowCancelButton()})},o("div",{key:"92e3925dc0de468e5665705902153837105dfa57",class:"searchbar-input-container"},o("input",Object.assign({key:"fb74faf81b347a62338ccdac981525df1c52b322","aria-label":"search text",disabled:this.disabled,ref:r=>this.nativeInput=r,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:"default"===a?void 0:a,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,spellcheck:this.spellcheck},this.inheritedAttributes)),"md"===s&&h,o("ion-icon",{key:"d58c3636dac1d2e4135989f4c07dc95c51492e60","aria-hidden":"true",mode:s,icon:n,lazy:!1,class:"searchbar-search-icon"}),o("button",{key:"1cece7c63ca5ca4b8799e15ee6d2bac100ef0d5e","aria-label":"reset",type:"button","no-blur":!0,class:"searchbar-clear-button",onPointerDown:r=>{r.preventDefault()},onClick:()=>this.onClearInput(!0)},o("ion-icon",{key:"fe3c2b9cac29002f69e95a89b554c7504e2df050","aria-hidden":"true",mode:s,icon:t,lazy:!1,class:"searchbar-clear-icon"}))),"ios"===s&&h)}get el(){return this}static get watchers(){return{lang:[{onLangChanged:0}],dir:[{onDirChanged:0}],debounce:[{debounceChanged:0}],value:[{valueChanged:0}],showCancelButton:[{showCancelButtonChanged:0}]}}static get style(){return{ios:".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}",md:".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}"}}},[34,"ion-searchbar",{color:[513],animated:[4],autocapitalize:[1],autocomplete:[1],autocorrect:[1],cancelButtonIcon:[1,"cancel-button-icon"],cancelButtonText:[1,"cancel-button-text"],clearIcon:[1,"clear-icon"],debounce:[2],disabled:[4],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],searchIcon:[1,"search-icon"],showCancelButton:[1,"show-cancel-button"],showClearButton:[1,"show-clear-button"],spellcheck:[4],type:[1],value:[1025],focused:[32],noAnimate:[32],setFocus:[64],getInputElement:[64]},void 0,{lang:[{onLangChanged:0}],dir:[{onDirChanged:0}],debounce:[{debounceChanged:0}],value:[{valueChanged:0}],showCancelButton:[{showCancelButtonChanged:0}]}]);let k=0;const C=w,B=function(){"undefined"!=typeof customElements&&["ion-searchbar","ion-icon"].forEach((r=>{switch(r){case"ion-searchbar":customElements.get(t(r))||customElements.define(t(r),w);break;case"ion-icon":customElements.get(t(r))||y()}}))};export{C as IonSearchbar,B as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-ec0e3f3f.js';
+import { n as debounceEvent, d as inheritAttributes, c as componentOnReady, b as raf } from './p-2bb89b46.js';
+import { i as isRTL } from './p-d5862637.js';
+import { c as createColorClasses } from './p-350e7423.js';
+import { b as arrowBackSharp, j as closeCircle, k as closeSharp, s as searchOutline, q as searchSharp } from './p-b8fdd517.js';
+import { c as config, g as getIonMode } from './p-901c16c5.js';
+import { d as defineCustomElement$2 } from './p-83e529db.js';
+
+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: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 = /*@__PURE__*/ proxyCustomElement(class Searchbar extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.ionInput = createEvent(this, "ionInput", 7);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionCancel = createEvent(this, "ionCancel", 7);
+    this.ionClear = createEvent(this, "ionClear", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.isCancelVisible = false;
+    this.shouldAlignLeft = true;
+    this.inputId = `ion-searchbar-${searchbarIds++}`;
+    this.inheritedAttributes = {};
+    /**
+     * 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/issues/7527
+        // wait for 4 frames
+        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();
+    };
+    this.focused = false;
+    this.noAnimate = true;
+    this.color = undefined;
+    this.animated = false;
+    this.autocapitalize = 'default';
+    this.autocomplete = 'off';
+    this.autocorrect = 'off';
+    this.cancelButtonIcon = config.get('backButtonIcon', 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.
+   * As a result, creating these as properties
+   * can have unintended side effects. Instead, we
+   * listen for attribute changes and inherit them
+   * to the inner `<input>` element.
+   */
+  onLangChanged(newValue) {
+    this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
+    forceUpdate(this);
+  }
+  onDirChanged(newValue) {
+    this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+    forceUpdate(this);
+  }
+  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);
+  }
+  valueChanged() {
+    const inputEl = this.nativeInput;
+    const value = this.getValue();
+    if (inputEl && inputEl.value !== value) {
+      inputEl.value = value;
+    }
+  }
+  showCancelButtonChanged() {
+    requestAnimationFrame(() => {
+      this.positionElements();
+      forceUpdate(this);
+    });
+  }
+  connectedCallback() {
+    this.emitStyle();
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+  }
+  componentDidLoad() {
+    this.originalIonInput = this.ionInput;
+    this.positionElements();
+    this.debounceChanged();
+    setTimeout(() => {
+      this.noAnimate = false;
+    }, 300);
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      searchbar: true,
+    });
+  }
+  /**
+   * 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.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
+   */
+  async setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
+    return Promise.resolve(this.nativeInput);
+  }
+  /**
+   * Emits an `ionChange` event.
+   *
+   * This API should be called for user committed changes.
+   * This API should not be used for external value changes.
+   */
+  emitValueChange(event) {
+    const { value } = this;
+    // Checks for both null and undefined values
+    const newValue = value == null ? value : value.toString();
+    // Emitting a value change should update the internal state for tracking the focused value
+    this.focusedValue = newValue;
+    this.ionChange.emit({ value: newValue, event });
+  }
+  /**
+   * Emits an `ionInput` event.
+   */
+  emitInputChange(event) {
+    const { value } = this;
+    this.ionInput.emit({ value, event });
+  }
+  /**
+   * Positions the input search icon, placeholder, and the cancel button
+   * based on the input value and if it is focused. (ios only)
+   */
+  positionElements() {
+    const value = this.getValue();
+    const prevAlignLeft = this.shouldAlignLeft;
+    const mode = getIonMode(this);
+    const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
+    this.shouldAlignLeft = shouldAlignLeft;
+    if (mode !== 'ios') {
+      return;
+    }
+    if (prevAlignLeft !== shouldAlignLeft) {
+      this.positionPlaceholder();
+    }
+    if (this.animated) {
+      this.positionCancelButton();
+    }
+  }
+  /**
+   * Positions the input placeholder
+   */
+  positionPlaceholder() {
+    const inputEl = this.nativeInput;
+    if (!inputEl) {
+      return;
+    }
+    const rtl = isRTL(this.el);
+    const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
+    if (this.shouldAlignLeft) {
+      inputEl.removeAttribute('style');
+      iconEl.removeAttribute('style');
+    }
+    else {
+      // Create a dummy span to get the placeholder width
+      const doc = document;
+      const tempSpan = doc.createElement('span');
+      tempSpan.innerText = this.placeholder || '';
+      doc.body.appendChild(tempSpan);
+      // Get the width of the span then remove it
+      raf(() => {
+        const textWidth = tempSpan.offsetWidth;
+        tempSpan.remove();
+        // Calculate the input padding
+        const inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)';
+        // Calculate the icon margin
+        /**
+         * We take the icon width to account
+         * for any text scales applied to the icon
+         * such as Dynamic Type on iOS as well as 8px
+         * of padding.
+         */
+        const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
+        // Set the input padding start and icon margin start
+        if (rtl) {
+          inputEl.style.paddingRight = inputLeft;
+          iconEl.style.marginRight = iconLeft;
+        }
+        else {
+          inputEl.style.paddingLeft = inputLeft;
+          iconEl.style.marginLeft = iconLeft;
+        }
+      });
+    }
+  }
+  /**
+   * Show the iOS Cancel button on focus, hide it offscreen otherwise
+   */
+  positionCancelButton() {
+    const rtl = isRTL(this.el);
+    const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
+    const shouldShowCancel = this.shouldShowCancelButton();
+    if (cancelButton !== null && shouldShowCancel !== this.isCancelVisible) {
+      const cancelStyle = cancelButton.style;
+      this.isCancelVisible = shouldShowCancel;
+      if (shouldShowCancel) {
+        if (rtl) {
+          cancelStyle.marginLeft = '0';
+        }
+        else {
+          cancelStyle.marginRight = '0';
+        }
+      }
+      else {
+        const offset = cancelButton.offsetWidth;
+        if (offset > 0) {
+          if (rtl) {
+            cancelStyle.marginLeft = -offset + 'px';
+          }
+          else {
+            cancelStyle.marginRight = -offset + 'px';
+          }
+        }
+      }
+    }
+  }
+  getValue() {
+    return this.value || '';
+  }
+  hasValue() {
+    return this.getValue() !== '';
+  }
+  /**
+   * Determines whether or not the cancel button should be visible onscreen.
+   * Cancel button should be shown if one of two conditions applies:
+   * 1. `showCancelButton` is set to `always`.
+   * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
+   */
+  shouldShowCancelButton() {
+    if (this.showCancelButton === 'never' || (this.showCancelButton === 'focus' && !this.focused)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Determines whether or not the clear button should be visible onscreen.
+   * Clear button should be shown if one of two conditions applies:
+   * 1. `showClearButton` is set to `always`.
+   * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+   */
+  shouldShowClearButton() {
+    if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
+      return false;
+    }
+    return true;
+  }
+  render() {
+    const { cancelButtonText, autocapitalize } = this;
+    const animated = this.animated && config.getBoolean('animated', true);
+    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 cancelButton = this.showCancelButton !== 'never' && (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" }, h("div", { key: '1c25268a776134cccd29eb752898cb8ac0eed30f', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+    return (h(Host, { key: 'feef9fc7e405656e134a76dc037aaaa1a4ce36b4', 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-clear': this.shouldShowClearButton(),
+        'searchbar-should-show-cancel': this.shouldShowCancelButton(),
+      }) }, h("div", { key: '92e3925dc0de468e5665705902153837105dfa57', class: "searchbar-input-container" }, 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, h("ion-icon", { key: 'd58c3636dac1d2e4135989f4c07dc95c51492e60', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), 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) }, h("ion-icon", { key: 'fe3c2b9cac29002f69e95a89b554c7504e2df050', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "lang": ["onLangChanged"],
+    "dir": ["onDirChanged"],
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"],
+    "showCancelButton": ["showCancelButtonChanged"]
+  }; }
+  static get style() { return {
+    ios: searchbarIosCss,
+    md: searchbarMdCss
+  }; }
+}, [34, "ion-searchbar", {
+    "color": [513],
+    "animated": [4],
+    "autocapitalize": [1],
+    "autocomplete": [1],
+    "autocorrect": [1],
+    "cancelButtonIcon": [1, "cancel-button-icon"],
+    "cancelButtonText": [1, "cancel-button-text"],
+    "clearIcon": [1, "clear-icon"],
+    "debounce": [2],
+    "disabled": [4],
+    "inputmode": [1],
+    "enterkeyhint": [1],
+    "maxlength": [2],
+    "minlength": [2],
+    "name": [1],
+    "placeholder": [1],
+    "searchIcon": [1, "search-icon"],
+    "showCancelButton": [1, "show-cancel-button"],
+    "showClearButton": [1, "show-clear-button"],
+    "spellcheck": [4],
+    "type": [1],
+    "value": [1025],
+    "focused": [32],
+    "noAnimate": [32],
+    "setFocus": [64],
+    "getInputElement": [64]
+  }]);
+let searchbarIds = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-searchbar", "ion-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-searchbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Searchbar);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonSearchbar = Searchbar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonSearchbar, defineCustomElement };