import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const klevuLoadingIndicatorCss = ":host{--color:var(--klevu-loading-indicator-color, var(--klevu-color-primary));display:inline-block;height:16px;width:50px;position:relative}.dot-pulse{position:relative;left:-9980px;top:3px;width:10px;height:10px;border-radius:5px;background-color:var(--color);color:var(--color);box-shadow:9999px 0 0 -5px;animation:dot-pulse 1.5s infinite linear;animation-delay:0.25s}.dot-pulse::before,.dot-pulse::after{content:\"\";display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:var(--color);color:var(--color)}.dot-pulse::before{box-shadow:9984px 0 0 -5px;animation:dot-pulse-before 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px;animation:dot-pulse-after 1.5s infinite linear;animation-delay:0.5s}@keyframes dot-pulse-before{0%{box-shadow:9984px 0 0 -5px}30%{box-shadow:9984px 0 0 2px}60%,100%{box-shadow:9984px 0 0 -5px}}@keyframes dot-pulse{0%{box-shadow:9999px 0 0 -5px}30%{box-shadow:9999px 0 0 2px}60%,100%{box-shadow:9999px 0 0 -5px}}@keyframes dot-pulse-after{0%{box-shadow:10014px 0 0 -5px}30%{box-shadow:10014px 0 0 2px}60%,100%{box-shadow:10014px 0 0 -5px}}";

const KlevuLoadingIndicator = /*@__PURE__*/ proxyCustomElement(class KlevuLoadingIndicator extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    return (h(Host, null, h("div", { part: "loading-indicator-base", class: "dot-pulse" })));
  }
  static get style() { return klevuLoadingIndicatorCss; }
}, [1, "klevu-loading-indicator"]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-loading-indicator"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-loading-indicator":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuLoadingIndicator);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuLoadingIndicator as K, defineCustomElement as d };

//# sourceMappingURL=klevu-loading-indicator2.js.map