@venite/components 0.16.7 → 0.16.13

package/dist/ldf/ion-list.entry.js

@@ -1,48 +0,0 @@
-import { r as registerInstance, h, i as Host, j as getElement } from './index-ea7a35b9.js';
-import { g as getIonMode } from './ionic-global-98eeb119.js';
-
-const listIosCss = "ion-list{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:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-ios.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-ios.list-inset ion-item{--border-width:0 0 1px 0;--inner-border-width:0}.list-ios.list-inset ion-item:last-child{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item{--border-width:0;--inner-border-width:0}.list-ios-lines-full .item,.list-ios .item-lines-full{--border-width:0 0 0.55px 0}.list-ios-lines-full .item{--inner-border-width:0}.list-ios-lines-inset .item,.list-ios .item-lines-inset{--inner-border-width:0 0 0.55px 0}.list-ios .item-lines-inset{--border-width:0}.list-ios .item-lines-full{--inner-border-width:0}.list-ios .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
-
-const listMdCss = "ion-list{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:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{left:0}[dir=rtl] .list-md>.input:last-child::after,:host-context([dir=rtl]) .list-md>.input:last-child::after{left:unset;right:unset;right:0}.list-md.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-md.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-md.list-inset ion-item:first-child{--border-radius:2px 2px 0 0;--border-width:0 0 1px 0}.list-md.list-inset ion-item:last-child{--border-radius:0 0 2px, 2px;--border-width:0}.list-md.list-inset .item-interactive{--padding-start:0;--padding-end:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item{--border-width:0;--inner-border-width:0}.list-md-lines-full .item,.list-md .item-lines-full{--border-width:0 0 1px 0}.list-md-lines-full .item{--inner-border-width:0}.list-md-lines-inset .item,.list-md .item-lines-inset{--inner-border-width:0 0 1px 0}.list-md .item-lines-inset{--border-width:0}.list-md .item-lines-full{--inner-border-width:0}.list-md .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
-
-const List = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If `true`, the list will have margin around it and rounded corners.
-     */
-    this.inset = false;
-  }
-  /**
-   * If `ion-item-sliding` are used inside the list, this method closes
-   * any open sliding item.
-   *
-   * Returns `true` if an actual `ion-item-sliding` is closed.
-   */
-  async closeSlidingItems() {
-    const item = this.el.querySelector('ion-item-sliding');
-    if (item && item.closeOpened) {
-      return item.closeOpened();
-    }
-    return false;
-  }
-  render() {
-    const mode = getIonMode(this);
-    const { lines, inset } = this;
-    return (h(Host, { class: {
-        [mode]: true,
-        // Used internally for styling
-        [`list-${mode}`]: true,
-        'list-inset': inset,
-        [`list-lines-${lines}`]: lines !== undefined,
-        [`list-${mode}-lines-${lines}`]: lines !== undefined
-      } }));
-  }
-  get el() { return getElement(this); }
-};
-List.style = {
-  ios: listIosCss,
-  md: listMdCss
-};
-
-export { List as ion_list };

package/dist/ldf/ion-radio-group.entry.js

@@ -1,57 +0,0 @@
-import { r as registerInstance, f as createEvent, h, i as Host, j as getElement } from './index-ea7a35b9.js';
-import { g as getIonMode } from './ionic-global-98eeb119.js';
-
-const RadioGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.inputId = `ion-rg-${radioGroupIds++}`;
-    this.labelId = `${this.inputId}-lbl`;
-    /**
-     * If `true`, the radios can be deselected.
-     */
-    this.allowEmptySelection = false;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    this.onClick = (ev) => {
-      const selectedRadio = ev.target && ev.target.closest('ion-radio');
-      if (selectedRadio) {
-        const currentValue = this.value;
-        const newValue = selectedRadio.value;
-        if (newValue !== currentValue) {
-          this.value = newValue;
-        }
-        else if (this.allowEmptySelection) {
-          this.value = undefined;
-        }
-      }
-    };
-  }
-  valueChanged(value) {
-    this.ionChange.emit({ value });
-  }
-  async connectedCallback() {
-    // Get the list header if it exists and set the id
-    // this is used to set aria-labelledby
-    const el = this.el;
-    const header = el.querySelector('ion-list-header') || el.querySelector('ion-item-divider');
-    if (header) {
-      const label = header.querySelector('ion-label');
-      if (label) {
-        this.labelId = label.id = this.name + '-lbl';
-      }
-    }
-  }
-  render() {
-    return (h(Host, { role: "radiogroup", "aria-labelledby": this.labelId, onClick: this.onClick, class: getIonMode(this) }));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
-let radioGroupIds = 0;
-
-export { RadioGroup as ion_radio_group };

package/dist/ldf/ion-ripple-effect.entry.js

@@ -1,89 +0,0 @@
-import { r as registerInstance, n as readTask, m as writeTask, h, i as Host, j as getElement } from './index-ea7a35b9.js';
-import { g as getIonMode } from './ionic-global-98eeb119.js';
-
-const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
-
-const RippleEffect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Sets the type of ripple-effect:
-     *
-     * - `bounded`: the ripple effect expands from the user's click position
-     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
-     *
-     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
-     * while surfaces for unbounded ripples should have it set to visible.
-     */
-    this.type = 'bounded';
-  }
-  /**
-   * Adds the ripple effect to the parent element.
-   *
-   * @param x The horizontal coordinate of where the ripple should start.
-   * @param y The vertical coordinate of where the ripple should start.
-   */
-  async addRipple(x, y) {
-    return new Promise(resolve => {
-      readTask(() => {
-        const rect = this.el.getBoundingClientRect();
-        const width = rect.width;
-        const height = rect.height;
-        const hypotenuse = Math.sqrt(width * width + height * height);
-        const maxDim = Math.max(height, width);
-        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
-        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
-        const finalScale = maxRadius / initialSize;
-        let posX = x - rect.left;
-        let posY = y - rect.top;
-        if (this.unbounded) {
-          posX = width * 0.5;
-          posY = height * 0.5;
-        }
-        const styleX = posX - initialSize * 0.5;
-        const styleY = posY - initialSize * 0.5;
-        const moveX = width * 0.5 - posX;
-        const moveY = height * 0.5 - posY;
-        writeTask(() => {
-          const div = document.createElement('div');
-          div.classList.add('ripple-effect');
-          const style = div.style;
-          style.top = styleY + 'px';
-          style.left = styleX + 'px';
-          style.width = style.height = initialSize + 'px';
-          style.setProperty('--final-scale', `${finalScale}`);
-          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
-          const container = this.el.shadowRoot || this.el;
-          container.appendChild(div);
-          setTimeout(() => {
-            resolve(() => {
-              removeRipple(div);
-            });
-          }, 225 + 100);
-        });
-      });
-    });
-  }
-  get unbounded() {
-    return this.type === 'unbounded';
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { role: "presentation", class: {
-        [mode]: true,
-        'unbounded': this.unbounded
-      } }));
-  }
-  get el() { return getElement(this); }
-};
-const removeRipple = (ripple) => {
-  ripple.classList.add('fade-out');
-  setTimeout(() => {
-    ripple.remove();
-  }, 200);
-};
-const PADDING = 10;
-const INITIAL_ORIGIN_SCALE = 0.5;
-RippleEffect.style = rippleEffectCss;
-
-export { RippleEffect as ion_ripple_effect };

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

@@ -1,16 +0,0 @@
-import { r as registerInstance, h, i as Host } from './index-ea7a35b9.js';
-import { g as getIonMode } from './ionic-global-98eeb119.js';
-
-const rowCss = ":host{display:flex;flex-wrap:wrap}";
-
-const Row = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: getIonMode(this) }, h("slot", null)));
-  }
-};
-Row.style = rowCss;
-
-export { Row as ion_row };

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

@@ -1,326 +0,0 @@
-import { r as registerInstance, f as createEvent, k as forceUpdate, h, i as Host, j as getElement } from './index-ea7a35b9.js';
-import { c as config, g as getIonMode } from './ionic-global-98eeb119.js';
-import { d as debounceEvent, r as raf } from './helpers-e9bf4204.js';
-import { c as createColorClasses } from './theme-74c22054.js';
-
-const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-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%;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-has-value.searchbar-has-focus.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);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;height:60px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-ios-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.searchbar-input-container.sc-ion-searchbar-ios{height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:calc(50% - 60px);left:5px;top:0;position:absolute;width:22px;height:100%;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px)}}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios,[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}.searchbar-input.sc-ion-searchbar-ios{padding-left:28px;padding-right:28px;padding-top:0;padding-bottom:0;height:100%;font-size:17px;font-weight:400;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:28px;padding-inline-start:28px;-webkit-padding-end:28px;padding-inline-end:28px}}.searchbar-clear-button.sc-ion-searchbar-ios{right:0;top:0;background-position:center;position:absolute;width:30px;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios,[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}.searchbar-clear-icon.sc-ion-searchbar-ios{width:18px;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:8px;padding-right:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:unset;-webkit-padding-start:30px;padding-inline-start:30px}}.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{margin-right:-100%;transform:translate3d(0,  0,  0);transition:all 300ms ease;opacity:0;pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:unset;-webkit-margin-end:-100%;margin-inline-end:-100%}}.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;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:.5;-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%;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-has-value.searchbar-has-focus.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);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;background:inherit}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.searchbar-search-icon.sc-ion-searchbar-md{left:16px;top:11px;width:21px;height:21px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md,[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}.searchbar-cancel-button.sc-ion-searchbar-md{left:5px;top:0;background-color:transparent;font-size:1.6em}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md,[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:5px}.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{padding-left:55px;padding-right:55px;padding-top:6px;padding-bottom:6px;background-position:left 8px center;height:auto;font-size:16px;font-weight:400;line-height:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-md{padding-left:unset;padding-right:unset;-webkit-padding-start:55px;padding-inline-start:55px;-webkit-padding-end:55px;padding-inline-end:55px}}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md,[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}.searchbar-clear-button.sc-ion-searchbar-md{right:13px;top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md,[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}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:22px;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{padding-left:7px;padding-right:7px;padding-top:3px;padding-bottom:3px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}";
-
-const Searchbar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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.focused = false;
-    this.noAnimate = true;
-    /**
-     * If `true`, enable searchbar animation.
-     */
-    this.animated = false;
-    /**
-     * 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 = config.get('backButtonIcon', 'arrow-back-sharp');
-    /**
-     * Set the the cancel button text. Only applies to `ios` mode.
-     */
-    this.cancelButtonText = 'Cancel';
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
-     */
-    this.debounce = 250;
-    /**
-     * If `true`, the user cannot interact with the input.
-     */
-    this.disabled = false;
-    /**
-     * 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';
-    /**
-     * 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 = (ev) => {
-      this.ionClear.emit();
-      if (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
-      // wait for 4 frames
-      setTimeout(() => {
-        const value = this.getValue();
-        if (value !== '') {
-          this.value = '';
-          this.ionInput.emit();
-        }
-      }, 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 = (ev) => {
-      if (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      this.ionCancel.emit();
-      this.onClearInput();
-      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.ionInput.emit(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 = () => {
-      this.focused = false;
-      this.ionBlur.emit();
-      this.positionElements();
-    };
-    /**
-     * Sets the Searchbar to focused and active on input focus.
-     */
-    this.onFocus = () => {
-      this.focused = true;
-      this.ionFocus.emit();
-      this.positionElements();
-    };
-  }
-  debounceChanged() {
-    this.ionChange = debounceEvent(this.ionChange, this.debounce);
-  }
-  valueChanged() {
-    const inputEl = this.nativeInput;
-    const value = this.getValue();
-    if (inputEl && inputEl.value !== value) {
-      inputEl.value = value;
-    }
-    this.ionChange.emit({ value });
-  }
-  showCancelButtonChanged() {
-    requestAnimationFrame(() => {
-      this.positionElements();
-      forceUpdate(this);
-    });
-  }
-  connectedCallback() {
-    this.emitStyle();
-  }
-  componentDidLoad() {
-    this.positionElements();
-    this.debounceChanged();
-    setTimeout(() => {
-      this.noAnimate = false;
-    }, 300);
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      'searchbar': true
-    });
-  }
-  /**
-   * Sets focus on the specified `ion-searchbar`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus() {
-    if (this.nativeInput) {
-      this.nativeInput.focus();
-    }
-  }
-  /**
-   * Returns the native `<input>` element used under the hood.
-   */
-  getInputElement() {
-    return Promise.resolve(this.nativeInput);
-  }
-  /**
-   * 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 isRTL = document.dir === 'rtl';
-    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
-        const iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
-        // Set the input padding start and icon margin start
-        if (isRTL) {
-          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 isRTL = document.dir === 'rtl';
-    const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
-    const shouldShowCancel = this.shouldShowCancelButton();
-    if (cancelButton && shouldShowCancel !== this.isCancelVisible) {
-      const cancelStyle = cancelButton.style;
-      this.isCancelVisible = shouldShowCancel;
-      if (shouldShowCancel) {
-        if (isRTL) {
-          cancelStyle.marginLeft = '0';
-        }
-        else {
-          cancelStyle.marginRight = '0';
-        }
-      }
-      else {
-        const offset = cancelButton.offsetWidth;
-        if (offset > 0) {
-          if (isRTL) {
-            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;
-  }
-  render() {
-    const { cancelButtonText } = this;
-    const animated = this.animated && config.getBoolean('animated', true);
-    const mode = getIonMode(this);
-    const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
-    const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
-    const shouldShowCancelButton = this.shouldShowCancelButton();
-    const cancelButton = (this.showCancelButton !== 'never') && (h("button", { "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", { "aria-hidden": "true" }, mode === 'md'
-      ? h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })
-      : cancelButtonText)));
-    return (h(Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, 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-cancel': this.shouldShowCancelButton() }) }, h("div", { class: "searchbar-input-container" }, h("input", { "aria-label": "search text", disabled: this.disabled, ref: el => this.nativeInput = el, class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellCheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: this.onClearInput, onTouchStart: this.onClearInput }, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "value": ["valueChanged"],
-    "showCancelButton": ["showCancelButtonChanged"]
-  }; }
-};
-Searchbar.style = {
-  ios: searchbarIosCss,
-  md: searchbarMdCss
-};
-
-export { Searchbar as ion_searchbar };