import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './App-418c0118.js';
import './_commonjsHelpers-91fffb88.js';
import { N as Notice } from './index-4920b0b3.js';
import './index-66cd4113.js';
import { d as dist } from './index-fdd60c34.js';

const sv = {
  Save: "Spara",
  Cancel: "Avbryt",
  primary: "primär",
  billing: "fakturering",
  "Please enter a valid email address.": "Ange en giltig e-postadress.",
};

function create(language) {
  return dist.create({
    sv,
  }, language);
}

const styleCss = ".sc-payfunc-email-input-h{display:block;margin-top:.5em}smoothly-submit.sc-payfunc-email-input,smoothly-submit.sc-payfunc-email-input>button.sc-payfunc-email-input{background-color:transparent;border:none;cursor:pointer;color:transparent;width:auto;float:right;margin-bottom:.2em}smoothly-input.sc-payfunc-email-input{border:1px solid rgb(var(--smoothly-medium-color))}form.sc-payfunc-email-input{display:flex;flex-flow:row;flex-wrap:wrap}form.sc-payfunc-email-input>*.sc-payfunc-email-input{width:100%}smoothly-select.sc-payfunc-email-input{display:grid;margin-bottom:.5em}";

const PayfuncEmailInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.edit = createEvent(this, "edit", 7);
    this.add = createEvent(this, "add", 7);
    this.notice = createEvent(this, "notice", 7);
    this.types = [];
    this.type = this.types[0];
    this.mode = "edit";
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  onSubmit(e) {
    const value = e.detail.email;
    if (value) {
      if (this.mode == "add")
        this.add.emit({ type: this.type, value });
      else
        this.edit.emit(e.detail.email);
    }
    else
      this.notice.emit(Notice.failed(this.t("Please enter a valid email address.")));
  }
  onCancel() {
    this.edit.emit(this.value);
  }
  onSelectionChanged(e) {
    this.type = e.detail.value;
  }
  toUpperCase(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
  render() {
    const t = this.t;
    return (h("form", null, this.mode == "add" ? (h("smoothly-select", { background: "transparent" }, this.types.map(option => this.type == option ? (h("option", { value: option, selected: true }, this.toUpperCase(t(option)))) : (h("option", { value: option }, this.toUpperCase(t(option))))))) : ([]), h("smoothly-input", { type: "email", name: "email", value: this.value }, this.mode == "add" ? t("Email") : t(this.type)), h("div", null, h("smoothly-submit", { prevent: true, onSubmit: (e) => this.onSubmit(e) }, h("smoothly-icon", { name: "checkmark-circle", toolTip: t("Save"), color: "success", fill: "clear", size: "small" })), h("smoothly-submit", { prevent: true, onSubmit: () => this.onCancel() }, h("smoothly-icon", { name: "close-circle", toolTip: t("Cancel"), color: "light", fill: "clear", size: "small" })))));
  }
  get element() { return getElement(this); }
};
PayfuncEmailInput.style = styleCss;

export { PayfuncEmailInput as payfunc_email_input };
