import { r as registerInstance, c as createEvent, h, g as getElement } from './index-65e437df.js';
import './App-bfd9e3ff.js';
import './_commonjsHelpers-7b8ed50b.js';
import './index-4de77e65.js';
import { N as Notice } from './Notice-668f9bc7.js';
import { f as Address, g as Addresses, C as Connection, e as Schedule, I as Item } from './index-5a6f97d3.js';
import { d as dist } from './index-15e1c25d.js';
import { d as dist$1 } from './index-1c311e76.js';
import { d as dist$2 } from './index-d78baa35.js';

const sv = {
  Edit: "Redigera",
  Delete: "Radera",
  primary: "primär",
  billing: "fakturering",
  delivery: "leverans",
  visit: "besök",
};

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

const styleCss = ".sc-payfunc-address-h{display:block;position:relative}[hidden].sc-payfunc-address-h{display:none}smoothly-icon.sc-payfunc-address{cursor:pointer;margin-top:.3em}label.sc-payfunc-address{display:inline-block;margin-block-start:.6em;margin-block-end:.2em;text-transform:capitalize;margin-bottom:.2em}smoothly-popup.sc-payfunc-address{display:none;position:absolute;right:0}.sc-payfunc-address-h:hover smoothly-popup.sc-payfunc-address{display:inline}";

const PayfuncAddress = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.edit = createEvent(this, "edit", 7);
    this.delete = createEvent(this, "delete", 7);
    this.type = "primary";
    this.mode = "display";
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  onChange(event) {
    event.stopPropagation();
    this.value = event.detail;
    this.mode = "display";
    this.edit.emit(Object.assign({ type: this.type }, this.value));
  }
  onDelete() {
    this.delete.emit(this.type);
  }
  render() {
    const t = this.t;
    return [
      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: "Delete", onClick: () => this.onDelete() }))),
      this.mode == "edit"
        ? [
          h("label", null, t(this.type)),
          h("payfunc-address-input", { onEdit: (e) => this.onChange(e), value: this.value }),
        ]
        : [h("label", null, t(this.type)), h("payfunc-address-display", { value: this.value })],
    ];
  }
  get element() { return getElement(this); }
};
PayfuncAddress.style = styleCss;

const styleCss$1 = ".sc-payfunc-address-display-h{display:block;border-top:1px solid rgb(var(--smoothly-medium-color));border-bottom:1px solid rgb(var(--smoothly-medium-color))}";

const PayfuncAddressDisplay = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    var _a, _b, _c;
    const value = typeof this.value == "string" ? JSON.parse(this.value) : this.value;
    return value.countryCode == "" ? (h("address", null, (_a = value.address1) !== null && _a !== void 0 ? _a : "", h("br", null), (_b = value.address2) !== null && _b !== void 0 ? _b : "", h("br", null), (_c = value.address3) !== null && _c !== void 0 ? _c : "")) : (h("address", null, value.street, h("br", null), value.zipCode, " ", value.city, h("br", null), Address.DE.is(value) || (Address.General.is(value) && value.state) ? value.state + " " : [], dist$1.CountryCode.Name.from("en", value.countryCode)));
  }
};
PayfuncAddressDisplay.style = styleCss$1;

const sv$1 = {
  Street: "Gata",
  "Zip code": "Postnummer",
  City: "Ort",
  Country: "Land",
  Save: "Spara",
  Cancel: "Avbryt",
  "Unknown address country": "Okänt adressland",
  primary: "primär",
  billing: "fakturering",
  delivery: "leverans",
  visit: "besök",
  "Please enter a valid address.": "Ange en giltig adress.",
};

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

const styleCss$2 = ".sc-payfunc-address-input-h{display:block;margin-top:.5em}[hidden].sc-payfunc-address-input-h{display:none}form.sc-payfunc-address-input{display:flex;flex-flow:row;flex-wrap:wrap;border-collapse:collapse}smoothly-input.sc-payfunc-address-input{border:1px solid rgb(var(--smoothly-medium-color))}smoothly-input[name=street]#add.sc-payfunc-address-input,smoothly-input[name=address1]#add.sc-payfunc-address-input{width:calc(100% - 3.8em - 3px)}smoothly-input[name=street].sc-payfunc-address-input,smoothly-input[name=address1].sc-payfunc-address-input{width:100%}smoothly-input[name=zipCode].sc-payfunc-address-input,smoothly-input[name=address2].sc-payfunc-address-input{min-width:calc(35% - 2px);flex-grow:2;border-top:none}smoothly-input[name=city].sc-payfunc-address-input,smoothly-input[name=address3].sc-payfunc-address-input{min-width:calc(65% - 2px);border-top:none;flex-grow:1}smoothly-input[name=country].sc-payfunc-address-input{width:100%;border-top:none}form.sc-payfunc-address-input>div.sc-payfunc-address-input{width:100%}smoothly-submit.sc-payfunc-address-input,smoothly-trigger.sc-payfunc-address-input{width:auto;float:right;background-color:transparent;border:none;cursor:pointer;color:transparent;margin-bottom:.2em}smoothly-select#types.sc-payfunc-address-input{display:grid;width:100% !important;border:none;padding-bottom:.5em}smoothly-select#countries.sc-payfunc-address-input{width:3.5em;border-bottom:1px solid rgb(var(--smoothly-medium-color));border-right:none}#states.sc-payfunc-address-input{width:100% !important;border-top:none}smoothly-select.sc-payfunc-address-input{border:1px solid rgb(var(--smoothly-medium-color));padding-bottom:.3em;padding-right:.3em;display:grid}";

const PayfuncAddressInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.edit = createEvent(this, "edit", 7);
    this.create = createEvent(this, "create", 7);
    this.close = createEvent(this, "close", 7);
    this.notice = createEvent(this, "notice", 7);
    var _a, _b;
    this.types = [];
    this.mode = "edit";
    this.type = this.types[0];
    this.selected = (_b = (_a = this.address) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : "SE";
    this.countries = ["SE", "FI", "DE", "DK", "NO"];
    this.state = Address.DE.is(this.address) ? this.address.state : "";
    this.adding = false;
  }
  get address() {
    return typeof this.value == "string" ? JSON.parse(this.value) : this.value;
  }
  componentWillLoad() {
    this.t = create$1(this.element);
    if (!this.value) {
      this.value = Address.create("SE");
      this.adding = true;
    }
  }
  onTrigger() {
    if (this.adding)
      this.close.emit();
    else
      this.edit.emit(this.address);
  }
  onSelectionChanged(e) {
    if (e.detail.identifier == "types")
      this.type = e.detail.value;
    else if (e.detail.identifier == "countries")
      this.value = Address.create(e.detail.value);
    else if (e.detail.identifier == "states")
      this.state = e.detail.value;
  }
  onSubmit(e) {
    e.stopPropagation();
    const result = Object.assign(Object.assign({}, e.detail), { countryCode: e.detail.country
        ? dist$1.CountryCode.Name.parse(e.detail.country.toLowerCase())
        : this.value.countryCode });
    if (result.countryCode == "DE")
      result.state = this.state;
    if ((Address.is(result) && !Object.values(result).some(x => x == "")) || result.countryCode == "") {
      this.adding ? this.create.emit({ type: this.type, value: result }) : this.edit.emit(result);
    }
    else
      this.notice.emit(Notice.failed(this.t("Please enter a valid address.")));
  }
  toUpperCase(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
  render() {
    var _a;
    const t = this.t;
    let inputFields = [];
    if (this.address.countryCode == "")
      inputFields = [
        h("smoothly-input", { type: "text", name: "address1", id: this.adding ? "add" : "", value: this.address.address1 }, "Address 1"),
        h("smoothly-input", { type: "text", name: "address2", value: this.address.address2 }, "Address 2"),
        h("smoothly-input", { type: "text", name: "address3", value: this.address.address3 }, "Address 3"),
      ];
    else
      inputFields = [
        h("smoothly-input", { type: "text", name: "street", id: this.adding ? "add" : "", value: this.address.street }, t("Street")),
        h("smoothly-input", { type: "postal-code", name: "zipCode", value: this.address.zipCode }, t("Zip code")),
        h("smoothly-input", { type: "text", name: "city", value: this.address.city }, t("City")),
        this.address.countryCode == "DE" ? (h("smoothly-select", { id: "states", identifier: "states", background: "transparent" }, h("option", { value: (_a = this.address.state) !== null && _a !== void 0 ? _a : "", selected: true }, this.address.state == "" || !this.address.state ? "State" : this.address.state), Address.DE.State.types.map(option => (h("option", { value: option }, option))))) : ([]),
        !this.adding ? (h("smoothly-input", { type: "text", name: "country", value: this.adding ? "" : dist$1.CountryCode.Name.from("en", this.address.countryCode) }, t("Country"))) : ([]),
      ];
    return [
      h("form", null, this.adding
        ? [
          h("smoothly-select", { id: "types", identifier: "types", 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-select", { id: "countries", identifier: "countries", background: "transparent" }, this.countries.map(country => (h("option", { value: country, selected: this.selected == country }, country))), h("option", { value: "" }, "Other")),
        ]
        : [], inputFields, h("div", null, h("smoothly-submit", { color: "primary", fill: "clear", prevent: true, onSubmit: (e) => this.onSubmit(e) }, h("smoothly-icon", { name: "checkmark-circle", toolTip: t("Save"), color: "success", fill: "clear", size: "small" })), h("smoothly-trigger", { color: "primary", fill: "clear" }, h("smoothly-icon", { name: "close-circle", toolTip: t("Cancel"), color: "light", fill: "clear", size: "small" })))),
    ];
  }
  get element() { return getElement(this); }
};
PayfuncAddressInput.style = styleCss$2;

const sv$2 = {
  Add: "Lägg till",
};

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

const styleCss$3 = ".sc-payfunc-addresses-h{display:block}smoothly-trigger.sc-payfunc-addresses{display:inline-block;margin:5px}smoothly-icon.sc-payfunc-addresses{cursor:pointer;float:right;margin-top:-1.5em;padding-bottom:.5em;visibility:hidden}payfunc-address.sc-payfunc-addresses{clear:both}.sc-payfunc-addresses-h:hover smoothly-icon.sc-payfunc-addresses{visibility:visible}";

const PayfuncAddresses = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.changed = createEvent(this, "changed", 7);
    this.allowed = [];
    this.editing = undefined;
    this.adding = false;
  }
  get allowedArray() {
    if (!this.allowedArrayValue)
      this.allowedArrayValue = Array.isArray(this.allowed)
        ? this.allowed
        : this.allowed.split(" ");
    return this.allowedArrayValue;
  }
  get address() {
    if (typeof this.value == "string")
      this.value = JSON.parse(this.value);
    return this.value;
  }
  get addresses() {
    return Address.is(this.address) ? { primary: this.address } : Object.assign({}, this.address);
  }
  get types() {
    return Addresses.types.filter(type => Addresses.is(this.value) ? !this.value[type] : Address.is(this.value) ? type != "primary" : type);
  }
  componentWillLoad() {
    this.t = create$2(this.element);
  }
  onChange(e) {
    if (Address.is(e.detail)) {
      const type = e.detail.type;
      const address = Object.assign({}, e.detail);
      delete address.type;
      let result;
      if (type == "primary" && Address.is(this.address))
        result = address;
      else {
        result = Object.assign({}, this.addresses);
        result[type] = address;
      }
      this.changed.emit((this.value = result));
    }
  }
  onCreate(e) {
    const type = e.detail.type;
    const value = e.detail.value;
    const result = this.addresses;
    result[type] = value;
    this.changed.emit((this.value = result));
    this.adding = false;
  }
  onTrigger(e) {
    if (e.detail.name == "add" && typeof this.value != "string") {
      const result = this.addresses;
      const added = Address.create("SE");
      const type = e.detail.value;
      result[type] = added;
      this.value = result;
    }
  }
  onDelete(e) {
    const type = e.detail;
    const result = Object.assign({}, this.addresses);
    delete result[type];
    this.changed.emit((this.value = result));
  }
  render() {
    const allowed = this.allowedArray.filter(type => Addresses.is(this.address) ? this.address[type] == undefined : type != "primary");
    return [
      this.adding ? (h("payfunc-address-input", { onClose: () => (this.adding = false), mode: "add", types: this.types, onCreate: (e) => this.onCreate(e) })) : ([]),
      this.types.length > 0 ? (h("smoothly-icon", { name: "add-circle", toolTip: this.t("Add"), fill: "clear", size: "medium", color: "success", style: this.adding ? { display: "none" } : {}, onClick: () => (this.adding = true) })) : ([]),
      this.address ? (Address.is(this.address) ? (h("payfunc-address", { mode: this.editing ? "edit" : "display", value: this.address, onEdit: (e) => this.onChange(e), onDelete: (e) => this.onDelete(e) })) : (Addresses.map(this.address, (type, address) => (h("payfunc-address", { mode: this.editing ? "edit" : "display", type: type, value: address, onEdit: (e) => this.onChange(e), onDelete: (e) => this.onDelete(e) }))))) : ([]),
      allowed.map(type => (h("smoothly-trigger", { color: "primary", fill: "clear", name: "add", value: type }, "+", type))),
    ];
  }
  get element() { return getElement(this); }
};
PayfuncAddresses.style = styleCss$3;

const sv$3 = {
  Limit: "Gräns",
  "Soft limit": "Mjuk gräns",
  Margin: "Marginal",
  "Credit limit": "Kreditgräns",
  "Automatic charge limit.": "Gräns för automatisk debitering.",
  "Automatic charge margin.": "Marginal för automatisk debitering.",
};

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

const styleCss$4 = ".sc-payfunc-limit-h{width:100%;display:flex;flex-direction:row;justify-content:space-around}[hidden].sc-payfunc-limit-h{display:none}.sc-payfunc-limit-h>section.sc-payfunc-limit{width:100%}.sc-payfunc-limit-h>section.sc-payfunc-limit>label.sc-payfunc-limit{font-weight:bold;text-align:left;padding-bottom:.2em}.sc-payfunc-limit-h>section.sc-payfunc-limit>smoothly-display.sc-payfunc-limit{width:10em;max-width:10em;text-transform:capitalize;align-self:flex-start}.sc-payfunc-limit-h>section.sc-payfunc-limit>span.sc-payfunc-limit{background:rgba(0, 0, 0, 0.5);text-align:center;border-radius:6px;padding:.6em;position:absolute;z-index:1;visibility:hidden}.sc-payfunc-limit-h>section.sc-payfunc-limit:hover>span.sc-payfunc-limit{visibility:visible;-moz-transition-delay:.5s;transition-delay:.5s}";

const PayfuncLimit = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  componentWillLoad() {
    this.t = create$3(this.element);
  }
  render() {
    const limit = typeof this.account.limit == "number" ? this.account.limit : undefined;
    const hard = typeof this.account.limit == "object" && this.account.limit.hard ? this.account.limit.hard : undefined;
    const soft = typeof this.account.limit == "object" && this.account.limit.soft ? this.account.limit.soft : undefined;
    const margin = typeof this.account.limit == "object" && this.account.limit.margin ? this.account.limit.margin : undefined;
    return limit ? (h("section", null, h("label", null, this.t("Credit limit")), h("smoothly-display", null, limit + " " + this.account.currency))) : ([
      hard && (h("section", null, h("label", null, this.t("Credit limit")), h("smoothly-display", null, hard + " " + this.account.currency))),
      soft && (h("section", null, h("label", null, this.t("Soft limit")), h("smoothly-display", null, soft + " " + this.account.currency), h("span", null, this.t("Automatic charge limit.")))),
      margin && (h("section", null, h("label", null, this.t("Margin")), h("smoothly-display", null, margin + " " + this.account.currency), h("span", null, this.t("Automatic charge margin.")))),
    ]);
  }
  get element() { return getElement(this); }
};
PayfuncLimit.style = styleCss$4;

const sv$4 = {
  Scheme: "System",
  "Card number": "Kortnummer",
  Expires: "Giltigt t.o.m.",
  Close: "Stäng",
  "Add method": "Lägg till metod",
  "The account has no payment method.": "Kontot har ingen betalningsmetod.",
};

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

const styleCss$5 = "[hidden].sc-payfunc-payment-methods-h{display:none}section.sc-payfunc-payment-methods{display:flex;justify-content:space-between;font-weight:bold}section.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods{width:10em}section.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods:nth-of-type(2){width:15em}@media only screen and (min-width: 1000px){smoothly-icon.sc-payfunc-payment-methods{visibility:hidden}smoothly-reorder.sc-payfunc-payment-methods{float:left}smoothly-reorder.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods{margin-top:10px}payfunc-payment-method-add.sc-payfunc-payment-methods{position:relative;display:block;visibility:visible;width:50%;float:right}}@media only screen and (max-width: 1000px){smoothly-icon.sc-payfunc-payment-methods{visibility:visible;position:fixed;right:5%;cursor:pointer}payfunc-payment-method-add.sc-payfunc-payment-methods,#desktop.sc-payfunc-payment-methods{display:none}payfunc-payment-method-add.sc-payfunc-payment-methods,#phone.sc-payfunc-payment-methods{display:block;width:25rem;max-width:90%;margin:0 auto}.sc-payfunc-payment-methods-h>smoothly-reorder.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods,table.sc-payfunc-payment-methods{max-width:60%;margin:0 auto;margin-top:10px}}";

const PayfuncPaymentMethods = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.update = createEvent(this, "update", 7);
    this.delete = createEvent(this, "delete", 7);
    this.addable = false;
    this.deletable = false;
    this.mode = "card";
    this.opened = false;
  }
  componentWillLoad() {
    this.t = create$4(this.element);
  }
  renderMethods() {
    this.methods = [...this.methods];
  }
  deleteMethod(index) {
    window.setTimeout(() => {
      this.methods.splice(index, 1);
      this.renderMethods();
      this.delete.emit(this.methods);
    }, 500);
  }
  reorderMethods(event) {
    const fromIndex = event.detail[0];
    const toIndex = event.detail[1];
    const e = this.methods.splice(fromIndex, 1);
    this.methods.splice(toIndex, 0, ...e);
    this.update.emit(this.methods);
  }
  render() {
    return [
      this.addable
        ? [
          h("smoothly-icon", { name: this.opened ? "close-circle" : "add-circle", toolTip: this.opened ? this.t("Close") : this.t("Add method"), size: "large", onClick: () => (this.opened = !this.opened) }),
          h("payfunc-payment-method-add", { id: this.opened ? "phone" : "desktop", account: this.account, "api-key": this.apiKey, onAdd: () => this.renderMethods() }),
        ]
        : null,
      this.mode == "table" &&
        (this.methods.length > 0 ? (h("section", null, h("label", null, this.t("Scheme")), h("label", null, this.t("Card number")), h("label", null, this.t("Expires")))) : (h("p", null, this.t("The account has no payment method.")))),
      h("smoothly-reorder", { onReorder: (event) => this.reorderMethods(event) }, this.methods.map((method, index) => [
        h("payfunc-payment-method", { mode: this.mode, method: method, deletable: this.deletable, onDeleteMethod: () => this.deleteMethod(index) }),
      ])),
    ];
  }
  get element() { return getElement(this); }
};
PayfuncPaymentMethods.style = styleCss$5;

const sv$5 = {
  "Cancelling subscription...": "Avbryter prenumerationen ...",
  "Subscription was cancelled.": "Prenumerationen avbröts.",
  "Failed to cancel subscription.": "Misslyckades med att avbryta prenumerationen.",
  "Updating subscription...": "Uppdaterar prenummeration.",
  "Subscription was updated.": "Prenumerationen uppdaterades.",
  "Failed to update subscription.": "Misslyckades med att uppdatera prenumerationen.",
  "End date": "Slutdatum",
  "Start date": "Startdatum",
  "Cancel subscription": "Avbryt prenumeration",
  ongoing: "pågående",
  Start: "Påbörjar",
  End: "Upphör",
};

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

const styleCss$6 = ".sc-payfunc-subscription-details-h{display:table-row}.sc-payfunc-subscription-details-h>td.sc-payfunc-subscription-details{border-top:solid 1px rgb(var(--smoothly-medium-shade));border-bottom:solid 1px rgb(var(--smoothly-medium-shade));background-color:rgb(var(--smoothly-dark-shade));padding-top:.5em}payfunc-future-due-dates.sc-payfunc-subscription-details{width:30%;padding:.5em;margin:auto}payfunc-schedule.sc-payfunc-subscription-details{padding:1em;padding-left:4.5em}payfunc-items-list.sc-payfunc-subscription-details{padding:.5em;margin:auto;width:50%}payfunc-items-list.number.sc-payfunc-subscription-details{width:15%}payfunc-display-edit.sc-payfunc-subscription-details{margin-left:4.5em;margin-bottom:1em;width:10em}.sc-payfunc-subscription-details-h>td.sc-payfunc-subscription-details>section.sc-payfunc-subscription-details{display:flex;flex-direction:row;justify-content:space-between}.sc-payfunc-subscription-details-h>td.sc-payfunc-subscription-details>section.sc-payfunc-subscription-details>smoothly-icon.sc-payfunc-subscription-details{cursor:pointer;margin-right:1em;margin-top:-.5em}label.sc-payfunc-subscription-details{font-weight:bold;margin-left:4.5em}";

const PayfuncSubscriptionDetails = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.notice = createEvent(this, "notice", 7);
    this.opened = "";
  }
  componentWillLoad() {
    this.t = create$5(this.element);
  }
  cancel() {
    this.notice.emit(Notice.execute(this.t("Cancelling subscription..."), async () => {
      const response = await Connection.delete(`account/${this.account.id}/subscription/${this.subscription.id}`);
      let result;
      if (!dist$2.Error.is(response))
        result = [true, this.t("Subscription was cancelled.")];
      else
        result = [false, this.t("Failed to cancel subscription.")];
      return result;
    }));
  }
  update(value, property) {
    const update = { [property]: value };
    this.subscription = Object.assign(Object.assign({}, this.subscription), update);
    this.notice.emit(Notice.execute(this.t("Updating subscription..."), async () => {
      const response = await Connection.put(`account/${this.account.id}/subscription/${this.subscription.id}`, this.subscription);
      let result;
      if (!dist$2.Error.is(response))
        result = [true, this.t("Subscription was updated.")];
      else
        result = [false, this.t("Failed to update subscription.")];
      return result;
    }));
  }
  render() {
    var _a;
    let result;
    switch (this.opened) {
      case "number":
        result = (h("payfunc-number-details", { number: this.subscription.number, identifier: this.subscription.id, onNumberUpdated: (e) => this.update(e.detail, "number"), name: "subscription" }));
        break;
      case "amount":
        result = (h("payfunc-items-list", { onChanged: (e) => this.update(e.detail, "items"), editable: true, class: typeof this.subscription.items == "number" ? "number" : "", items: this.subscription.items, currency: this.subscription.currency }));
        break;
      case "schedule":
        result = h("payfunc-schedule", { schedule: this.subscription.schedule });
        break;
      case "end":
        result = [
          h("label", null, this.t("End")),
          h("section", null, h("payfunc-display-edit", { deletable: false, name: this.t("End date"), onChanged: (e) => this.update(e.detail, "end"), value: (_a = this.subscription.end) !== null && _a !== void 0 ? _a : this.t("ongoing") }), h("smoothly-icon", { onClick: () => this.cancel(), name: "trash", color: "default", fill: "solid", toolTip: this.t("Cancel subscription") })),
        ];
        break;
      case "start":
        result = [
          h("label", null, this.t("Start")),
          h("payfunc-display-edit", { deletable: false, name: this.t("Start date"), onChanged: (e) => this.update(e.detail, "start"), value: this.subscription.start }),
        ];
        break;
      case "due":
        result = (h("payfunc-future-due-dates", { dates: Schedule.calculateDueDates(this.account.schedule, 5, this.subscription.start, this.subscription.end) }));
        break;
      default:
        return "";
    }
    return h("td", { colSpan: 8 }, result);
  }
  get element() { return getElement(this); }
};
PayfuncSubscriptionDetails.style = styleCss$6;

const sv$6 = {
  daily: "daglig",
  weekly: "veckovis",
  monthly: "månadsvis",
  quarterly: "kvartalsvis",
  yearly: "årlig",
  ongoing: "pågående",
};

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

const styleCss$7 = ".sc-payfunc-subscription-table-row-h{display:table-row}[hidden].sc-payfunc-subscription-table-row-h{display:none}.sc-payfunc-subscription-table-row-h:hover{border-top:1px solid rgb(var(--smoothly-medium-color));border-bottom:1px solid rgb(var(--smoothly-medium-color));box-shadow:var(--smoothly-shadow)}.sc-payfunc-subscription-table-row-h>td.sc-payfunc-subscription-table-row>.openable.sc-payfunc-subscription-table-row{padding:.5em .3em;width:max-content;min-width:3em;display:inline-block}.opened.sc-payfunc-subscription-table-row,.openable.sc-payfunc-subscription-table-row{cursor:pointer}.opened.sc-payfunc-subscription-table-row{border:solid 1px rgb(var(--smoothly-medium-shade));background-color:rgb(var(--smoothly-dark-shade));border-bottom:3px solid rgb(var(--smoothly-dark-shade));border-radius:0 0 2px 2px;margin-bottom:-2px}.sc-payfunc-subscription-table-row-h>td.sc-payfunc-subscription-table-row:first-of-type>.opened.sc-payfunc-subscription-table-row{border-left:none}";

const PayfuncSubscriptionTableRow = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.columnClicked = createEvent(this, "columnClicked", 7);
    this.opened = "";
  }
  componentWillLoad() {
    this.t = create$6(this.element);
  }
  handleColumnClick(column) {
    this.opened = column;
    this.columnClicked.emit({ id: this.subscription.id, column });
  }
  render() {
    var _a;
    return [
      h("td", null, h("section", { class: "openable" + (this.opened == "number" ? " opened" : ""), onClick: () => this.handleColumnClick("number") }, (_a = this.subscription.number) !== null && _a !== void 0 ? _a : this.subscription.id)),
      h("td", null, h("smoothly-display-amount", { class: "openable" + (this.opened == "amount" ? " opened" : ""), onClick: () => this.handleColumnClick("amount"), amount: Item.amount(this.subscription.items), currency: this.subscription.currency })),
      h("td", null, h("section", { class: "openable" + (this.opened == "schedule" ? " opened" : ""), onClick: () => this.handleColumnClick("schedule") }, this.t(typeof this.subscription.schedule == "object"
        ? this.subscription.schedule.frequency
        : this.subscription.schedule))),
      h("td", null, h("section", { class: "openable" + (this.opened == "start" ? " opened" : ""), onClick: () => this.handleColumnClick("start") }, this.subscription.start)),
      h("td", null, h("section", { class: "openable" + (this.opened == "end" ? " opened" : ""), onClick: () => this.handleColumnClick("end") }, this.subscription.end ? this.subscription.end : this.t("ongoing"))),
      h("td", null, h("section", { class: "openable" + (this.opened == "due" ? " opened" : ""), onClick: () => this.handleColumnClick("due") }, Schedule.next(this.subscription.schedule, this.subscription.start))),
    ];
  }
  get element() { return getElement(this); }
};
PayfuncSubscriptionTableRow.style = styleCss$7;

export { PayfuncAddress as payfunc_address, PayfuncAddressDisplay as payfunc_address_display, PayfuncAddressInput as payfunc_address_input, PayfuncAddresses as payfunc_addresses, PayfuncLimit as payfunc_limit, PayfuncPaymentMethods as payfunc_payment_methods, PayfuncSubscriptionDetails as payfunc_subscription_details, PayfuncSubscriptionTableRow as payfunc_subscription_table_row };
