import { r as registerInstance, j as createEvent, h, g as getElement } from './index-07845439.js';
import { d as dist } from './index-3cc80977.js';
import './_commonjsHelpers-9bc404fc.js';

const sv = {
  Edit: "Redigera",
  Delete: "Radera",
  primary: "primär",
  billing: "fakturering",
};

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

const styleCss = ".sc-payfunc-email-address-h{display:block;position:relative}[hidden].sc-payfunc-email-address-h{display:none}smoothly-display.sc-payfunc-email-address{border-top:1px solid rgb(var(--smoothly-medium-color));border-bottom:1px solid rgb(var(--smoothly-medium-color));padding-top:.5em;padding-bottom:.5em}label.sc-payfunc-email-address{display:block;margin-block-start:.6em;margin-block-end:.2em;text-transform:capitalize;margin-bottom:.2em}smoothly-popup.sc-payfunc-email-address{display:none;position:absolute;right:0}.sc-payfunc-email-address-h:hover smoothly-popup.sc-payfunc-email-address{display:inline}smoothly-icon.sc-payfunc-email-address{cursor:pointer}";

const PayfuncEmailAddress = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.edit = createEvent(this, "edit", 7);
    this.delete = createEvent(this, "delete", 7);
    this.editable = true;
    this.type = "primary";
    this.mode = "display";
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  onEdit(event) {
    event.stopPropagation();
    this.value = event.detail;
    this.mode = "display";
    this.edit.emit({ type: this.type, value: this.value });
  }
  onDelete() {
    this.delete.emit(this.type);
  }
  render() {
    const t = this.t;
    return this.value.length > 0
      ? [
        this.mode == "display" ? ([
          this.editable && (h("smoothly-popup", null, h("smoothly-icon", { name: "ellipsis-vertical-outline", size: "small" }), h("div", { color: "light", slot: "popup" }, h("smoothly-icon", { size: "small", name: "pencil-outline", toolTip: t("Edit"), onClick: () => (this.mode = "edit") }), h("smoothly-icon", { size: "small", name: "trash", toolTip: t("Delete"), onClick: () => this.onDelete() })))),
          h("label", null, t(this.type)),
          h("smoothly-display", { type: "email", value: this.value }),
        ]) : (h("payfunc-email-input", { value: this.value, type: this.type, mode: "edit", onEdit: (e) => this.onEdit(e) })),
      ]
      : [];
  }
  get element() { return getElement(this); }
};
PayfuncEmailAddress.style = styleCss;

export { PayfuncEmailAddress as payfunc_email_address };
