'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index$1 = require('./index-0b1e2673.js');
require('./_commonjsHelpers-937cd5b3.js');
const index$2 = require('./index-ab186017.js');
const index = require('./index-36cf3884.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 index.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) {
    index$1.registerInstance(this, hostRef);
    this.edit = index$1.createEvent(this, "edit", 7);
    this.mode = "display";
    this.editable = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  update(e) {
    if (index$2.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 (index$1.h("form", null, this.mode == "display" && this.editable ? (index$1.h("smoothly-popup", null, index$1.h("smoothly-icon", { name: "ellipsis-vertical-outline", size: "small" }), index$1.h("div", { color: "light", slot: "popup" }, index$1.h("smoothly-icon", { size: "small", name: "pencil-outline", toolTip: this.t("Edit"), onClick: () => (this.mode = "edit") })))) : this.mode == "edit" ? ([
      index$1.h("smoothly-icon", { name: "close-circle", toolTip: this.t("Cancel"), fill: "clear", size: "small", color: "medium", onClick: () => (this.mode = "display") }),
      index$1.h("smoothly-submit", { prevent: true, onSubmit: (e) => this.update(e) }, index$1.h("smoothly-icon", { name: "checkmark-circle", toolTip: this.t("Save"), fill: "clear", size: "small", color: "success" })),
    ]) : ([]), index$1.h("ol", null, index$1.h("li", null, index$2.Item.is(this.item) ? (this.mode == "display" ? ([
      index$1.h("span", null, this.item.quantity, " ", this.item.unit, " ", this.t((_a = this.item.name) !== null && _a !== void 0 ? _a : "")),
      index$1.h("smoothly-display", { type: "price", value: index$2.Item.amount(this.item), currency: this.currency }),
    ]) : ([
      index$1.h("smoothly-input", { type: "price", name: "quantity", value: this.item.quantity }, this.t("Quantity")),
      index$1.h("smoothly-input", { type: "text", name: "unit", value: this.item.unit }, this.t("Unit")),
      index$1.h("smoothly-input", { type: "text", name: "name", value: this.item.name }, this.t("Name")),
      index$1.h("smoothly-input", { type: "price", name: "vat", value: this.item.vat }, this.t("VAT")),
      index$1.h("smoothly-input", { type: "price", name: "price", value: this.item.price, currency: this.currency }, this.t("Price")),
    ])) : this.mode == "display" ? (index$1.h("smoothly-display", { type: "price", value: index$2.Item.amount(this.item), currency: this.currency })) : (index$1.h("smoothly-input", { type: "price", name: "price", value: this.item, currency: this.currency }, this.t("Price")))))));
  }
  get element() { return index$1.getElement(this); }
};
Payfuncitem.style = styleCss;

exports.payfunc_item = Payfuncitem;
