import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './_commonjsHelpers-91fffb88.js';
import { I as Item } from './index-ec2a4942.js';
import { d as dist } from './index-fdd60c34.js';

const sv = {
  details: "detaljer",
  "excluding VAT": "exklusive moms",
  Edit: "Redigera",
  Cancel: "Avbryt",
  Save: "Spara",
  "Paid from balance": "Betalat från saldo",
};

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

const styleCss = ".sc-payfunc-item-h{display:block}[hidden].sc-payfunc-item-h{display:none}[editable].sc-payfunc-item-h{padding-right:1em}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item{padding:0;margin:0}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item>li.sc-payfunc-item{display:flex;align-items:stretch}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item>li.sc-payfunc-item>*.sc-payfunc-item{white-space:nowrap}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item>li.sc-payfunc-item>*.sc-payfunc-item:first-child{overflow:hidden;text-overflow:ellipsis}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item>li.sc-payfunc-item>*.sc-payfunc-item:last-child{margin-left:auto}.sc-payfunc-item-h>form.sc-payfunc-item>smoothly-submit.sc-payfunc-item,.sc-payfunc-item-h>form.sc-payfunc-item>smoothly-icon.sc-payfunc-item,.sc-payfunc-item-h:hover>form.sc-payfunc-item>smoothly-popup.sc-payfunc-item{display:block;margin-right:-2em;float:right;cursor:pointer;border:none}.sc-payfunc-item-h>form.sc-payfunc-item>smoothly-popup.sc-payfunc-item{display:none}.sc-payfunc-item-h>form.sc-payfunc-item>smoothly-submit.sc-payfunc-item{margin-right:-4em;margin-top:.6em}.sc-payfunc-item-h>form.sc-payfunc-item>smoothly-icon.sc-payfunc-item{margin-top:.9em}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item>li.sc-payfunc-item>smoothly-input.sc-payfunc-item:nth-of-type(3){flex-grow:2;width:50%}.sc-payfunc-item-h>form.sc-payfunc-item>ol.sc-payfunc-item>li.sc-payfunc-item>smoothly-input.sc-payfunc-item:nth-of-type(1),.sc-payfunc-item-h>ol.sc-payfunc-item>li.sc-payfunc-item>smoothly-input.sc-payfunc-item:nth-of-type(2){flex-grow:1;width:20%}";

const Payfuncitem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.edit = createEvent(this, "edit", 7);
    this.mode = "display";
    this.editable = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  update(e) {
    if (Item.is(this.item)) {
      const updated = {
        quantity: Number(e.detail.quantity),
        unit: e.detail.unit,
        name: e.detail.name,
        price: Number(e.detail.price.slice(0, -4)),
        vat: Number(e.detail.vat),
      };
      this.item = Object.assign(Object.assign({}, this.item), updated);
    }
    else
      this.item = e.detail.price;
    this.edit.emit(this.item);
    this.mode = "display";
  }
  render() {
    var _a;
    return (h("form", null, 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: this.t("Edit"), onClick: () => (this.mode = "edit") })))) : this.mode == "edit" ? ([
      h("smoothly-icon", { name: "close-circle", toolTip: this.t("Cancel"), fill: "clear", size: "small", color: "medium", onClick: () => (this.mode = "display") }),
      h("smoothly-submit", { prevent: true, onSubmit: (e) => this.update(e) }, h("smoothly-icon", { name: "checkmark-circle", toolTip: this.t("Save"), fill: "clear", size: "small", color: "success" })),
    ]) : ([]), h("ol", null, h("li", null, Item.is(this.item) ? (this.mode == "display" ? ([
      h("span", null, this.item.quantity, " ", this.item.unit, " ", this.t((_a = this.item.name) !== null && _a !== void 0 ? _a : "")),
      h("smoothly-display", { type: "price", value: Item.amount(this.item), currency: this.currency }),
    ]) : ([
      h("smoothly-input", { type: "price", name: "quantity", value: this.item.quantity }, this.t("Quantity")),
      h("smoothly-input", { type: "text", name: "unit", value: this.item.unit }, this.t("Unit")),
      h("smoothly-input", { type: "text", name: "name", value: this.item.name }, this.t("Name")),
      h("smoothly-input", { type: "price", name: "vat", value: this.item.vat }, this.t("VAT")),
      h("smoothly-input", { type: "price", name: "price", value: this.item.price, currency: this.currency }, this.t("Price")),
    ])) : this.mode == "display" ? (h("smoothly-display", { type: "price", value: Item.amount(this.item), currency: this.currency })) : (h("smoothly-input", { type: "price", name: "price", value: this.item, currency: this.currency }, this.t("Price")))))));
  }
  get element() { return getElement(this); }
};
Payfuncitem.style = styleCss;

export { Payfuncitem as payfunc_item };
