import { r as registerInstance, h, H as Host, c as createEvent } from './index-08b73e9e.js';

const styleCss$2 = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[hidden].sc-smoothly-icon-h{display:none}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";

const SmoothlyIcon = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fill = "solid";
    this.size = "medium";
  }
  async loadDocument() {
    if (this.name)
      this.document = await SmoothlyIcon.load(this.name);
  }
  async componentWillLoad() {
    await this.loadDocument();
  }
  hostData() {
    return {
      innerHTML: this.document
        ? this.document
          .replace(` width="512" height="512"`, "")
          .replace(/(<title>)[\w\d\s-]*(<\/title>)/, `<title>${this.toolTip || ""}</title>`)
          .replace(/stroke:#000;/gi, "")
        : undefined,
    };
  }
  __stencil_render() {
    return [];
  }
  static async fetch(url) {
    const response = await fetch(url);
    return response.ok ? response.text() : undefined;
  }
  static async load(name) {
    var _a;
    const url = `https://unpkg.com/ionicons@5.0.0/dist/svg/${name}.svg`;
    return (_a = SmoothlyIcon.cache[url]) !== null && _a !== void 0 ? _a : (SmoothlyIcon.cache[url] = SmoothlyIcon.fetch(url));
  }
  static get watchers() { return {
    "name": ["loadDocument"]
  }; }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
SmoothlyIcon.cache = {};
SmoothlyIcon.style = styleCss$2;

const styleCss$1 = ".sc-smoothly-spinner-h{display:block;position:relative}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h:not([active]){display:none}.sc-smoothly-spinner-h{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent))}.sc-smoothly-spinner-h>div.sc-smoothly-spinner{opacity:1;position:absolute;left:calc(50% - 5em + 1.1em);top:calc(50% - 5em + 1.1em)}.sc-smoothly-spinner-h>div.sc-smoothly-spinner,.sc-smoothly-spinner-h>div.sc-smoothly-spinner::after{border-radius:50%;width:5em;height:5em}.sc-smoothly-spinner-h>div.sc-smoothly-spinner{content:\"\";color:transparent;position:relative;border-top:1.1em solid rgb(var(--smoothly-primary-tint));border-right:1.1em solid rgb(var(--smoothly-primary-tint));border-bottom:1.1em solid rgb(var(--smoothly-primary-tint));border-left:1.1em solid rgb(var(--smoothly-primary-color));-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";

const SmoothlySpinner = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return h("div", null, "Loading...");
  }
};
SmoothlySpinner.style = styleCss$1;

const styleCss = ".sc-smoothly-submit-h{display:block;border-width:1px;border-style:solid;border-radius:3px}[hidden].sc-smoothly-submit-h{display:none}[disabled].sc-smoothly-submit-h{opacity:0.5}button.sc-smoothly-submit{padding:0.2em 0.3em;font-size:110%;font-weight:400}[processing].sc-smoothly-submit-h{border-color:rgb(var(--smoothly-light-color))}[processing].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-light-contrast));background:rgb(var(--smoothly-light-color))}.sc-smoothly-submit-h:not([processing]):not([disabled]):hover,.sc-smoothly-submit-h:not([processing]):not([disabled]):focus,.sc-smoothly-submit-h:not([processing]):not([disabled]):active{border-color:rgb(var(--smoothly-submit-border))}[expand=fill].sc-smoothly-submit-h>button.sc-smoothly-submit,[expand=block].sc-smoothly-submit-h>button.sc-smoothly-submit{width:100%}[expand=fill].sc-smoothly-submit-h{border-left:none;border-right:none}";

const SmoothlySubmit = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.submitEvent = createEvent(this, "submit", 7);
    this.disabled = false;
  }
  get form() {
    return (this.button && this.button.form) || undefined;
  }
  async handleSubmit(event) {
    if (!this.processing) {
      this.processing = true;
      if (this.prevent)
        event.preventDefault();
      const result = {};
      if (this.form) {
        const elements = this.form.elements;
        for (let i = 0; i < elements.length; i++) {
          const element = elements.item(i);
          if (hasNameAndValue(element) && element.name)
            result[element.name] = element.value;
        }
        const smoothlyInputs = this.form.getElementsByTagName("smoothly-input");
        for (let i = 0; i < smoothlyInputs.length; i++) {
          const element = smoothlyInputs.item(i);
          if (hasNameAndValue(element) && element.name)
            result[element.name] = element.value;
        }
      }
      const innerEvent = this.submitEvent.emit(result);
      console.log("smoothly-submit", innerEvent);
      this.processing = false;
    }
  }
  async submit() {
    let result;
    if ((result = !!this.form))
      this.form.submit();
    return result;
  }
  render() {
    return [
      h("smoothly-spinner", { active: this.processing }),
      h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null)),
    ];
  }
};
function hasNameAndValue(element) {
  return (typeof element.name == "string" && typeof element.value == "string");
}
SmoothlySubmit.style = styleCss;

export { SmoothlyIcon as smoothly_icon, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit };
