@cling-se/widget 0.17.3 → 0.18.0

package/dist/Index-_xN_cczo.js

@@ -0,0 +1,3477 @@
+import { m as q } from "./mapFormMixin-C7FJLnbO.js";
+import { C as $e } from "./CCallout-CM1VsH30.js";
+import { C as K, a as Y, w as _e } from "./CDropdownItem-DMUAJ90n.js";
+import { E as pe } from "./ErrorCallout-CQo2iF9c.js";
+import { bX as Te, bY as me, bZ as Ae, b_ as Ce, b$ as Pe, c0 as xe, c1 as Ve, aI as Se, _ as D, e as g, o as a, b as c, s as l, v as m, n as V, F as A, k as S, l as J, f as b, d as p, m as E, a as z, g as L, A as N, w as h, $ as B, ae as F, S as ie, an as H, c2 as De, c3 as ne, aD as Me, a5 as se, bg as W, aB as Re, c4 as Le, bh as Oe, a2 as U, E as R, c as T, B as _, c5 as Ee, c6 as Ue, c7 as he, U as Be, c8 as ge, G as We, a9 as x, ai as ze, I as Fe, T as je, aF as j, aa as qe, ac as Ne, c9 as He, a8 as Ge, bW as Ke, aC as Ye, ca as oe } from "./main-Bn5XkQPb.js";
+import { u as Ze, a as Je } from "./DocumentLayout-DkFlHgW6.js";
+import { T as Xe } from "./DocTextEditor-CEPcJT2o.js";
+import { _ as Qe, m as et } from "./Sortable.vue_vue_type_script_setup_true_lang-C2Gwp6Q-.js";
+import { o as ve } from "./omit-DrWpFvRJ.js";
+import { C as Z } from "./CPriceInput-B7DYzKcF.js";
+import { u as fe } from "./index-D8hGHka6.js";
+import { S as tt } from "./SearchApi-Y1fDQn0u.js";
+import { b as it } from "./index-Dxy4tf7x.js";
+import { _ as ye } from "./CFormField.vue_vue_type_script_setup_true_lang-BqAyWe3T.js";
+const nt = [
+  "unit",
+  "m2",
+  "hour",
+  "m",
+  "m3",
+  "day",
+  "kg",
+  "litre",
+  "km",
+  "mile",
+  "month",
+  "week",
+  "ton",
+  "year",
+  "kWh"
+];
+var X, re;
+function st() {
+  if (re) return X;
+  re = 1;
+  function e() {
+  }
+  return X = e, X;
+}
+var Q, le;
+function at() {
+  if (le) return Q;
+  le = 1;
+  var e = Te(), t = st(), n = me(), o = 1 / 0, s = e && 1 / n(new e([, -0]))[1] == o ? function(i) {
+    return new e(i);
+  } : t;
+  return Q = s, Q;
+}
+var ee, ce;
+function ot() {
+  if (ce) return ee;
+  ce = 1;
+  var e = Ae(), t = Ce(), n = Pe(), o = xe(), s = at(), i = me(), f = 200;
+  function v(y, u, w) {
+    var k = -1, C = t, d = y.length, I = !0, r = [], P = r;
+    if (w)
+      I = !1, C = n;
+    else if (d >= f) {
+      var $ = u ? null : s(y);
+      if ($)
+        return i($);
+      I = !1, C = o, P = new e();
+    } else
+      P = u ? [] : r;
+    e:
+      for (; ++k < d; ) {
+        var M = y[k], O = u ? u(M) : M;
+        if (M = w || M !== 0 ? M : 0, I && O === O) {
+          for (var ae = P.length; ae--; )
+            if (P[ae] === O)
+              continue e;
+          u && P.push(O), r.push(M);
+        } else C(P, O, w) || (P !== r && P.push(O), r.push(M));
+      }
+    return r;
+  }
+  return ee = v, ee;
+}
+var te, de;
+function rt() {
+  if (de) return te;
+  de = 1;
+  var e = Ve(), t = ot();
+  function n(o, s) {
+    return o && o.length ? t(o, e(s, 2)) : [];
+  }
+  return te = n, te;
+}
+var lt = rt();
+const ct = /* @__PURE__ */ Se(lt), dt = {
+  name: "PackageGroupSelect",
+  i18nOptions: {
+    namespaces: "PackageGroupSelect",
+    messages: {
+      en: {
+        title: "What do you want to offer?",
+        typeOptions: {
+          single: {
+            title: "Single Option",
+            subTitle: "Offer one package."
+          },
+          radio: {
+            title: "Packages",
+            subTitle: "Offer several packages and let your client choose <strong>one<strong>."
+          },
+          checkbox: {
+            title: "Multi Options",
+            subTitle: "Offer many packages and let your client select <strong>multiple</strong> ones."
+          }
+        }
+      },
+      sv: {
+        title: "Vad vill du erbjuda för prisförslag?",
+        typeOptions: {
+          single: {
+            title: "Ett alternativ",
+            subTitle: "Erbjud ett paket."
+          },
+          radio: {
+            title: "Paket",
+            subTitle: "Erbjud flera paket och låt din kund välja <strong>ett</strong> av paketen."
+          },
+          checkbox: {
+            title: "Flera val",
+            subTitle: "Erbjud många paket som din kund välja <strong>flera</strong> utav."
+          }
+        }
+      }
+    }
+  },
+  emits: ["input"],
+  setup() {
+    return { docWidth: Ze() };
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "single",
+          background: "hsl(209, 94%, 73%)",
+          title: this.$t("typeOptions.single.title"),
+          subTitle: this.$t("typeOptions.single.subTitle")
+        },
+        {
+          value: "radio",
+          background: "hsl(222, 96%, 73%)",
+          title: this.$t("typeOptions.radio.title"),
+          subTitle: this.$t("typeOptions.radio.subTitle")
+        },
+        {
+          value: "checkbox",
+          background: "hsl(241, 95%, 73%)",
+          title: this.$t("typeOptions.checkbox.title"),
+          subTitle: this.$t("typeOptions.checkbox.subTitle")
+        }
+      ]
+    };
+  }
+}, ut = {
+  class: "font-inter",
+  style: { padding: "calc(2 * var(--rem)) 0 calc(1 * var(--rem)) 0", color: "#111" }
+}, pt = { style: { "font-size": "18px", "font-weight": "600", "text-align": "center", "margin-bottom": "calc(1.5 * var(--rem))" } }, mt = ["onClick"], ht = { class: "package-group-option__illustration" }, gt = {
+  key: 0,
+  class: "package-group-option__illustration-card animate"
+}, vt = { class: "package-group-option__title" }, ft = ["innerHTML"];
+function yt(e, t, n, o, s, i) {
+  const f = g("CIcon");
+  return a(), c("div", ut, [
+    l("div", pt, m(e.$t("title")), 1),
+    l("div", null, [
+      l("div", {
+        class: V([{ "is-700-or-less": o.docWidth <= 700 }, "options"])
+      }, [
+        (a(!0), c(A, null, S(s.options, (v, y) => (a(), c("div", {
+          key: y,
+          style: J({ backgroundColor: v.background }),
+          class: "package-group-option",
+          onClick: (u) => e.$emit("input", v.value)
+        }, [
+          l("div", ht, [
+            v.value === "single" ? (a(), c("div", gt, t[0] || (t[0] = [
+              l("div", { style: { flex: "1 1 auto" } }, [
+                l("div", {
+                  style: { width: "40%", height: "10px", "margin-bottom": "8px" },
+                  class: "bg-gray-100"
+                }),
+                l("div", {
+                  style: { width: "80%", height: "10px" },
+                  class: "bg-gray-100"
+                })
+              ], -1)
+            ]))) : b("", !0),
+            v.value === "radio" ? (a(), c(A, { key: 1 }, S(3, (u) => l("div", {
+              key: u,
+              class: V([{ animate: u === 2 }, "package-group-option__illustration-card"])
+            }, [
+              l("div", {
+                style: J([
+                  { width: "8px", height: "8px", "border-radius": "50%", "box-shadow": `0 0 0 1px white,
+                      0 0 0 2px hsl(0, 0%, 76%)`, "margin-right": "10px" },
+                  u === 2 && {
+                    boxShadow: `0 0 0 1px white, 0 0 0 2px ${v.background}`,
+                    backgroundColor: v.background
+                  }
+                ])
+              }, null, 4),
+              t[1] || (t[1] = l("div", { style: { flex: "1 1 auto" } }, [
+                l("div", {
+                  style: { width: "40%", height: "10px", "margin-bottom": "8px" },
+                  class: "bg-gray-100"
+                }),
+                l("div", {
+                  style: { width: "80%", height: "10px" },
+                  class: "bg-gray-100"
+                })
+              ], -1))
+            ], 2)), 64)) : b("", !0),
+            v.value === "checkbox" ? (a(), c(A, { key: 2 }, S(3, (u) => l("div", {
+              key: u,
+              class: V([{ animate: u !== 3 }, "package-group-option__illustration-card"])
+            }, [
+              l("div", {
+                style: J([{ height: "12px", width: "12px", "border-radius": "2px", "background-color": "hsl(0, 0%, 76%)", "margin-right": "10px", color: "white", padding: "1px", display: "inline-flex", "align-items": "center", "justify-content": "center" }, u !== 3 && { backgroundColor: v.background }])
+              }, [
+                p(f, {
+                  type: u !== 3 ? "check" : "empty",
+                  "stroke-width": "5",
+                  size: "8"
+                }, null, 8, ["type"])
+              ], 4),
+              t[2] || (t[2] = l("div", { style: { flex: "1 1 auto" } }, [
+                l("div", {
+                  style: { width: "40%", height: "10px", "margin-bottom": "8px" },
+                  class: "bg-gray-100"
+                }),
+                l("div", {
+                  style: { width: "80%", height: "10px" },
+                  class: "bg-gray-100"
+                })
+              ], -1))
+            ], 2)), 64)) : b("", !0)
+          ]),
+          l("div", null, [
+            l("div", vt, m(v.title), 1),
+            l("div", {
+              class: "package-group-option__subtitle",
+              innerHTML: v.subTitle
+            }, null, 8, ft)
+          ])
+        ], 12, mt))), 128))
+      ], 2)
+    ])
+  ]);
+}
+const kt = /* @__PURE__ */ D(dt, [["render", yt], ["__scopeId", "data-v-9558e77f"]]), bt = {
+  name: "ArticleAutocomplete",
+  components: {
+    SearchApi: tt
+  },
+  mixins: [q([])],
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    modelValue: {
+      type: String,
+      required: !0
+    },
+    placement: {
+      type: String,
+      default: "bottom-start"
+    }
+  },
+  emits: ["update:modelValue", "select", "focus", "blur"],
+  data() {
+    return {
+      isFocus: !1,
+      isOpen: !1,
+      selectedIndex: 0,
+      searchResults: []
+    };
+  },
+  computed: {
+    ...E({
+      articleData: "articles/articles",
+      ids: "articles/articleIdList"
+    }),
+    whiteList() {
+      const e = [];
+      if (this.$refs.dropdown !== void 0) {
+        const t = this.$refs.dropdown.querySelectorAll("*");
+        for (const n of t)
+          e.push(n);
+      }
+      if (this.$refs.input !== void 0) {
+        const t = this.$refs.input.$el.querySelectorAll("*");
+        for (const n of t)
+          e.push(n);
+      }
+      return e;
+    }
+  },
+  watch: {
+    searchResults(e, t) {
+      e.length !== t.length && (this.selectedIndex = 0);
+    }
+  },
+  created() {
+    document.addEventListener("click", this.onClickOutside, { passive: !0 });
+  },
+  beforeUnmount() {
+    document.removeEventListener("click", this.onClickOutside, {
+      passive: !0
+    });
+  },
+  methods: {
+    ...z({
+      loadArticles: L.LOAD_ARTICLES
+    }),
+    priceFormat: N,
+    search(e, t) {
+      this.$emit("update:modelValue", t), !this.viewSettings.isPublicForm && e({
+        q: t,
+        cb: ({ article: n = [], extensionArticle: o = [] }) => {
+          this.searchResults = [
+            ...n.sort((s, i) => s.usedTimes > i.usedTimes ? -1 : 1),
+            ...o
+          ], !this.isOpen && this.searchResults.length && this.showResults();
+        }
+      });
+    },
+    // Function consumed by parent
+    focus() {
+      this.$refs.input.focus();
+    },
+    onFocus(e) {
+      this.isFocus = !0, this.$emit("focus", e);
+    },
+    onBlur(e) {
+      this.isFocus = !1, this.$emit("blur", e);
+    },
+    showResults() {
+      this.isOpen = !0;
+    },
+    hideResults() {
+      this.isOpen = !1;
+    },
+    onSelect(e) {
+      this.$emit("select", e), this.hideResults(), this.$refs.input && this.$refs.input.blur();
+    },
+    onClickOutside(e) {
+      this.whiteList.indexOf(e.target) < 0 && this.hideResults();
+    },
+    onKeydown({ keyCode: e }) {
+      if (this.isOpen) {
+        switch (e) {
+          case 38:
+            this.selectedIndex > 0 && this.selectedIndex--;
+            break;
+          case 40:
+            this.selectedIndex < this.searchResults.length - 1 && this.selectedIndex++;
+            break;
+          case 13:
+            this.searchResults[this.selectedIndex] && (this.onSelect(this.searchResults[this.selectedIndex]), this.searchResults = []);
+            break;
+        }
+        this.scrollToHighlighted();
+      }
+    },
+    scrollToHighlighted() {
+      !this.$refs.dropdown || !this.$refs.dropdown.children || !this.$refs.dropdown.children[this.selectedIndex] || this.$refs.dropdown.children[this.selectedIndex].scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }
+}, wt = {
+  key: 0,
+  ref: "dropdown",
+  class: "r-container"
+}, It = ["onClickCapture"], $t = { class: "r-item-title truncate-text" }, _t = { class: "r-item-details" }, Tt = {
+  key: 0,
+  style: { width: "18px", height: "18px", "border-radius": "2px", "background-color": "hsl(0, 0%, 60%)", display: "inline-flex", "justify-content": "center", "align-items": "center" }
+}, At = { key: 1 }, Ct = { key: 2 }, Pt = { key: 3 }, xt = {
+  key: 0,
+  class: "r-item-icon"
+};
+function Vt(e, t, n, o, s, i) {
+  const f = g("CInput"), v = g("SearchApi"), y = g("CIcon");
+  return a(), c("div", B({
+    class: { "is-open": s.isOpen }
+  }, e.$attrs, {
+    style: { position: "relative" },
+    onKeydownPassive: t[0] || (t[0] = (...u) => i.onKeydown && i.onKeydown(...u))
+  }), [
+    p(v, { "custom-search": {
+      article: !0,
+      extensionArticle: !0,
+      project: !1
+    } }, {
+      default: h(({ fetch: u }) => [
+        p(f, B({
+          ...e.$attrs,
+          ...e.$props
+        }, {
+          ref: "input",
+          "model-value": n.modelValue,
+          type: n.tag,
+          "auto-resize": !0,
+          class: "r-input",
+          "onUpdate:modelValue": (w) => i.search(u, w),
+          onFocus: i.onFocus,
+          onKeydown: [
+            F(i.hideResults, ["tab"]),
+            F(i.hideResults, ["escape"])
+          ],
+          onBlur: i.onBlur
+        }), {
+          prefix: h(() => [
+            ie(e.$slots, "prefix", {}, void 0, !0)
+          ]),
+          suffix: h(() => [
+            ie(e.$slots, "suffix", {}, void 0, !0)
+          ]),
+          _: 2
+        }, 1040, ["model-value", "type", "onUpdate:modelValue", "onFocus", "onKeydown", "onBlur"])
+      ]),
+      _: 3
+    }),
+    s.isOpen ? (a(), c("div", wt, [
+      (a(!0), c(A, null, S(s.searchResults, (u, w) => (a(), c("div", {
+        key: w,
+        class: V([{ active: s.selectedIndex === w }, "r-item"]),
+        onClickCapture: H((k) => i.onSelect(u), ["stop"])
+      }, [
+        l("div", $t, m(u.name), 1),
+        l("div", _t, [
+          u.externalReference && u.externalReference.service ? (a(), c("div", Tt, [
+            p(y, {
+              type: u.externalReference.service,
+              style: { color: "white" },
+              size: "14"
+            }, null, 8, ["type"])
+          ])) : b("", !0),
+          u.article_no ? (a(), c("div", At, m(u.article_no), 1)) : b("", !0),
+          u.price ? (a(), c("div", Ct, m(i.priceFormat(u.price, { currency: u.currency })), 1)) : b("", !0),
+          u.vat ? (a(), c("div", Pt, m(e.$t("vat.sharedTitle").capitalize()) + " " + m(u.vat) + "% ", 1)) : b("", !0)
+        ]),
+        s.selectedIndex === w ? (a(), c("div", xt, [
+          p(y, {
+            type: "corner-down-left",
+            size: "16"
+          })
+        ])) : b("", !0)
+      ], 42, It))), 128))
+    ], 512)) : b("", !0)
+  ], 16);
+}
+const ke = /* @__PURE__ */ D(bt, [["render", Vt], ["__scopeId", "data-v-724e4465"]]), ue = {
+  isDeductable: !1,
+  isRut: !1,
+  greenRot15: !1,
+  greenRot20: !1,
+  greenRot50: !1
+}, G = (e, t = "", n) => {
+  let o = {
+    ...e,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    // Trigger updatedAt as it us used to decide which houseWork to prioritize
+  };
+  return typeof n < "u" && (o[n] = t), Object.keys(ue).includes(n) && t && (o = {
+    ...o,
+    ...ue,
+    [n]: !0
+  }), De(o.quantity) !== "number" && (o.quantity = 0), ne(o);
+}, be = ({
+  stored: e,
+  current: t,
+  hidePrice: n = !1,
+  activeHouseWorkType: o
+}) => {
+  let s = Me({
+    ...e,
+    quantity: 1,
+    showPrice: !n,
+    id: null,
+    ArticleId: e.id,
+    packageId: t.packageId
+  });
+  if (o) {
+    const i = (y = []) => y.reduce((u, w) => ({ ...u, [w]: !1 }), {}), v = Object.values(
+      ve({
+        rot: "isDeductable",
+        rut: "isRut",
+        greenRot15: "greenRot15",
+        greenRot20: "greenRot20",
+        greenRot50: "greenRot50"
+      }, [o])
+    );
+    v.some((y) => !!s[y]) && (s = { ...s, ...i(v) });
+  }
+  return s;
+}, St = (e, t = null) => {
+  const n = se(e.currency, t);
+  switch (e.priceType) {
+    case "approx":
+      return `${Re.t("_common:approx")} ${n}`;
+    case "openAcc":
+      return `${n}/${W(e.unitType)}`;
+    case "markup":
+      return "%";
+    default:
+      return n;
+  }
+}, we = {
+  en: {
+    namePlaceholder: "Service or product name",
+    openModalTooltip: "Edit amount and unit",
+    hidePriceLabel: "Hide price for client",
+    saveAndAddTooltip: "Save and quick-add",
+    priceTypeTooltips: {
+      fixed: "The service / product is offered at a fixed price",
+      approx: "Show that the price is approximate",
+      openAcc: "Pricing on demand. E.g. charging per hour",
+      markup: "Show that you take a percentage markup"
+    },
+    priceTypeShort: {
+      approx: "Approximate price",
+      markup: "Markup",
+      openAcc: "Open Account"
+    },
+    validations: {
+      name: {
+        maxLength: "Max length of name is 255 characters"
+      }
+    }
+  },
+  sv: {
+    namePlaceholder: "T.ex. arbete & material",
+    openModalTooltip: "Justera antal / enhet",
+    hidePriceLabel: "Dölj pris för kund",
+    saveAndAddTooltip: "Spara och lägg till ny",
+    priceTypeTooltips: {
+      fixed: "Tjänsten/varan erbjuds till fast pris",
+      approx: "Markera att priset är ungefärligt",
+      openAcc: "Tjänsten / varan erbjuds löpandes",
+      markup: "Markera att du tar ett procentuellt påslag"
+    },
+    priceTypeShort: {
+      approx: "Ca. pris",
+      markup: "Påslag",
+      openAcc: "Löp. pris"
+    },
+    validations: {
+      name: {
+        maxLength: "Namnet får vara max 255 tecken långt"
+      }
+    }
+  }
+}, Ie = {
+  article: {
+    name: {
+      maxLength: it(255)
+    }
+  }
+}, Dt = {
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Article",
+  i18nOptions: {
+    namespaces: "Article",
+    messages: we
+  },
+  components: {
+    ErrorCallout: pe,
+    ArticleAutocomplete: ke,
+    CPriceInput: Z
+  },
+  expose: ["focusName"],
+  props: {
+    // Article object
+    value: {
+      type: Object,
+      required: !0
+    },
+    // If remove button is visible
+    enableRemove: {
+      type: Boolean,
+      default: !0
+    },
+    width: {
+      type: Number,
+      default: 1e3
+    },
+    hidePriceInput: {
+      type: Boolean,
+      default: !1
+    },
+    hidePriceOnNew: {
+      type: Boolean,
+      default: !1
+    },
+    isIncVat: {
+      type: Boolean,
+      default: !1
+    },
+    hideControls: {
+      type: Boolean,
+      default: !1
+    },
+    rootPriceType: {
+      type: String,
+      default: null
+    },
+    // The current active houseWorkType allowed when adding new articles from search
+    activeHouseWorkType: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["input", "open-modal", "remove", "focus", "select", "add", "esc"],
+  setup() {
+    return {
+      v$: fe()
+    };
+  },
+  validations: Ie,
+  data() {
+    return {
+      updateData: G,
+      addSavedArticle: be,
+      articleUnitLabel: W,
+      widthCompact: 580,
+      visualDisable: !1
+    };
+  },
+  computed: {
+    article: {
+      get() {
+        return this.value || {};
+      },
+      set(e) {
+        this.$emit("input", e);
+      }
+    },
+    details() {
+      const e = [], {
+        priceType: t,
+        quantity: n,
+        unitType: o,
+        price: s,
+        vat: i,
+        discount: f,
+        discountType: v
+      } = this.article;
+      if (t !== "fixed" && e.push({ title: this.$t(`priceTypeShort.${t}`) }), Le(this.article)) {
+        const y = Oe(this.article);
+        e.push({
+          title: this.$t(`_common:deduction.${y}_percentage`)
+        });
+      }
+      return n && ["fixed", "approx"].includes(t) && (o !== "unit" || n > 1) && e.push({
+        title: W(this.article.unitType, {
+          count: n,
+          includeCount: !0
+        }),
+        ...!this.hidePriceInput && {
+          icon: '<svg style="margin: 0 4px;" width="6" height="6" viewBox="0 0 148 141" xmlns="http://www.w3.org/2000/svg"><path d="M73.742787 92.65535l-34.444359 47.40859-18.607391-13.51906 34.060775-46.88064L0 61.8743 7.107391 40 62 57.83569V0h23v57.99346L140.378182 40l7.107391 21.8743-54.751812 17.78994 34.060775 46.88064-18.607391 13.51906-34.444358-47.40859z" fill="currentColor" fill-rule="evenodd"/></svg>',
+          subTitle: N(s, {
+            showZero: !0,
+            withVat: this.isIncVat ? i : !1,
+            currency: this.article.currency,
+            decimals: 2,
+            hideZeroDecimals: !0
+          })
+        }
+      }), f && e.push({
+        title: "-" + (v === "fixed" ? N(f, {
+          withVat: this.isIncVat ? i : !1,
+          currency: this.article.currency
+        }) : `${f / 100} %`),
+        detailClass: "discount"
+      }), e;
+    }
+  },
+  methods: {
+    updateArticle(e, t) {
+      this.article = G(this.article, e, t);
+    },
+    onTotalPriceInputFocus() {
+      (this.article.discount || this.article.quantity !== 1) && this.$emit("open-modal", { focusEl: "priceInput" });
+    },
+    focusName() {
+      this.$refs.name.focus();
+    },
+    errorMessage(e) {
+      var t;
+      return e.$error && e.article.name.$error && ((t = e.article.name.maxLength) != null && t.$invalid) ? this.$t("validations.name.maxLength") : null;
+    }
+  }
+}, Mt = { class: "top-row flex w-full" }, Rt = ["innerHTML"];
+function Lt(e, t, n, o, s, i) {
+  const f = g("CIcon"), v = g("ArticleAutocomplete"), y = g("CPriceInput"), u = g("ErrorCallout"), w = U("tooltip");
+  return a(), c("div", {
+    class: V([{
+      "has-details": i.details.length,
+      compact: n.width <= s.widthCompact,
+      "show-controls": !n.hideControls
+    }, "article-wrapper"]),
+    onKeydown: t[10] || (t[10] = F((k) => e.$emit("esc"), ["esc"]))
+  }, [
+    l("div", Mt, [
+      p(v, B({
+        ref: "name",
+        "model-value": i.article.name,
+        placeholder: e.$t("namePlaceholder"),
+        size: "large",
+        class: "article-name-wrapper article-input-wrapper form-control form-control-left"
+      }, e.$attrs, {
+        "onUpdate:modelValue": t[1] || (t[1] = (k) => i.updateArticle(k, "name")),
+        onFocus: t[2] || (t[2] = (k) => e.$emit("focus")),
+        onSelect: t[3] || (t[3] = () => {
+          e.$emit(
+            "input",
+            s.addSavedArticle({
+              stored: e.$event,
+              current: i.article,
+              hidePrice: n.hidePriceOnNew,
+              activeHouseWorkType: n.activeHouseWorkType
+            })
+          ), e.$emit("select");
+        })
+      }), {
+        suffix: h(() => [
+          n.hideControls ? b("", !0) : R((a(), c("div", {
+            key: 0,
+            class: "article-button fade-in",
+            onClick: t[0] || (t[0] = (k) => e.$emit("open-modal"))
+          }, [
+            p(f, {
+              type: "cog",
+              size: "18"
+            })
+          ])), [
+            [w, {
+              content: e.$t("openModalTooltip"),
+              delay: { show: 300, hide: 0 }
+            }]
+          ])
+        ]),
+        _: 1
+      }, 16, ["model-value", "placeholder"]),
+      n.hidePriceInput ? b("", !0) : (a(), T(y, B({
+        key: n.rootPriceType + i.article.priceType + i.article.unitType,
+        "model-value": i.article.totalAmount,
+        currency: i.article.currency,
+        "is-inc-vat": i.article.priceType !== "markup" && n.isIncVat,
+        vat: i.article.vat,
+        placeholder: e.$t("_common:price.price").capitalize(),
+        "price-type": i.article.priceType,
+        "unit-label": s.articleUnitLabel(i.article.unitType),
+        class: "form-control form-control-right",
+        style: { flex: "1 1", "min-width": "200px" }
+      }, e.$attrs, {
+        "onUpdate:modelValue": t[4] || (t[4] = (k) => i.updateArticle(k, "price")),
+        "onUpdate:currency": t[5] || (t[5] = (k) => e.$emit("update:currency", k)),
+        onFocus: t[6] || (t[6] = () => {
+          i.onTotalPriceInputFocus(), e.$emit("focus");
+        }),
+        onKeydown: t[7] || (t[7] = F((k) => e.$emit("add"), ["enter"]))
+      }), null, 16, ["model-value", "currency", "is-inc-vat", "vat", "placeholder", "price-type", "unit-label"])),
+      n.hideControls ? b("", !0) : (a(), c(A, { key: 1 }, [
+        p(f, {
+          class: "a-control-button close-button fade-in",
+          circle: "",
+          type: "x",
+          size: "18",
+          onClick: t[8] || (t[8] = (k) => n.enableRemove ? e.$emit("remove") : null)
+        }),
+        p(f, {
+          class: V([{ "c-hidden": !n.enableRemove }, "a-control-button fade-in move-button article-draggable-handle"]),
+          circle: "",
+          type: "handle",
+          size: "18"
+        }, null, 8, ["class"])
+      ], 64))
+    ]),
+    i.details.length ? (a(), c("div", {
+      key: 0,
+      class: "article-details-wrapper",
+      style: { cursor: "pointer" },
+      onClick: t[9] || (t[9] = (k) => e.$emit("open-modal"))
+    }, [
+      (a(!0), c(A, null, S(i.details, ({ title: k, icon: C, subTitle: d = "", detailClass: I = "" }, r) => (a(), c("div", {
+        key: r,
+        class: V([[I], "article-details-item"])
+      }, [
+        _(m(k) + " ", 1),
+        C ? (a(), c("div", {
+          key: 0,
+          innerHTML: C
+        }, null, 8, Rt)) : b("", !0),
+        _(" " + m(d), 1)
+      ], 2))), 128))
+    ])) : b("", !0),
+    o.v$.$invalid && o.v$.$dirty ? (a(), T(u, {
+      key: 1,
+      message: i.errorMessage(o.v$)
+    }, null, 8, ["message"])) : b("", !0)
+  ], 34);
+}
+const Ot = /* @__PURE__ */ D(Dt, [["render", Lt], ["__scopeId", "data-v-df3528c4"]]), Et = {
+  emits: ["go", "close"],
+  props: {
+    canForward: {
+      type: Boolean,
+      default: !1
+    },
+    canBackward: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  created() {
+    document.addEventListener("keyup", this.onKeyUp);
+  },
+  beforeUnmount() {
+    this.removeKeyHandler();
+  },
+  methods: {
+    getNavTooltip(e) {
+      return e === -1 ? {
+        content: `
+            <div style='margin-bottom: 0.6em;'>
+              ${this.$t("show", { thing: this.$t("previous") })}
+            </div>
+            <div class='flex items-center justify-center w-full' style='padding-bottom: 0.5em;'>
+              <div style='text-align: center; background-color: hsl(0, 0%, 40%); line-height: 1; border-radius: 0.5em; display: inline-flex; align-items: center; justify-content: center; padding: 0.5em;'>
+                <svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H6M12 5l-7 7 7 7'></path></svg>
+              </div>
+            </div>
+          `,
+        html: !0
+      } : e === 1 ? {
+        content: `
+            <div style='margin-bottom: 0.6em;'>
+              ${this.$t("show", { thing: this.$t("next") })}
+            </div>
+            <div class='flex items-center justify-center w-full' style='padding-bottom: 0.5em;'>
+              <div style='text-align: center; background-color: hsl(0, 0%, 40%); line-height: 1; border-radius: 0.5em; display: inline-flex; align-items: center; justify-content: center; padding: 0.5em;'>
+                <svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M12 5l7 7-7 7'/></svg>
+              </div>
+            </div>
+          `,
+        html: !0
+      } : e === "close" ? {
+        content: '<div style="margin-bottom: 0.6em;">Stäng</div><div style="text-align: center; opacity: 0.85;"><svg width="30" height="20"  xmlns="http://www.w3.org/2000/svg" viewBox="17 0 105.5 72" style="enable-background:new 17 0 105.5 72"><path d="M103.3 70.3H36.2c-9.6 0-17.5-7.9-17.5-17.5V19.2c0-9.6 7.9-17.5 17.5-17.5h67.1c9.6 0 17.5 7.9 17.5 17.5v33.6c0 9.6-7.9 17.5-17.5 17.5z" style="fill:none;stroke:currentColor;stroke-width:3;stroke-miterlimit:10"/><path style="fill:none" d="M17 17.8h105.5V49H17z"/><path fill="currentColor" d="M46.6 38.2c.1 5 3.3 7.1 7 7.1 2.6 0 4.2-.5 5.6-1l.6 2.6c-1.3.6-3.5 1.3-6.8 1.3-6.3 0-10-4.1-10-10.2s3.6-11 9.5-11c6.6 0 8.4 5.8 8.4 9.6 0 .8-.1 1.3-.1 1.7l-14.2-.1zm10.9-2.7c0-2.4-1-6-5.1-6-3.7 0-5.4 3.4-5.7 6h10.8zM65.1 43.9c1.1.7 3 1.5 4.9 1.5 2.7 0 3.9-1.3 3.9-3 0-1.8-1-2.7-3.8-3.7-3.7-1.3-5.4-3.3-5.4-5.8 0-3.3 2.6-6 7-6 2.1 0 3.9.6 5 1.3l-.9 2.7c-.8-.5-2.3-1.2-4.2-1.2-2.2 0-3.4 1.3-3.4 2.8 0 1.7 1.2 2.4 3.9 3.4 3.5 1.3 5.3 3.1 5.3 6.1 0 3.6-2.8 6.1-7.6 6.1-2.2 0-4.3-.5-5.7-1.4l1-2.8zM96.7 46.9c-1 .5-3.1 1.2-5.8 1.2-6.1 0-10.1-4.2-10.1-10.4 0-6.3 4.3-10.8 10.9-10.8 2.2 0 4.1.5 5.1 1l-.8 2.9c-.9-.5-2.3-1-4.3-1-4.7 0-7.2 3.4-7.2 7.7 0 4.7 3 7.6 7.1 7.6 2.1 0 3.5-.5 4.5-1l.6 2.8z"/></svg></div>',
+        html: !0
+      } : null;
+    },
+    onKeyUp(e) {
+      const t = document.activeElement;
+      !(t.hasAttribute("contenteditable") || ["input", "textarea"].includes(t.tagName.toLowerCase())) && (parseInt(e.keyCode, 10) === 37 && this.$emit("go", -1), parseInt(e.keyCode, 10) === 39 && this.$emit("go", 1));
+      const o = e.key || e.keyCode;
+      if (o === "Escape" || o === "Esc" || o === 27) {
+        const s = this.$modal.getOpenInstances();
+        if (e.defaultPrevented || s.length) return;
+        this.$emit("close");
+      }
+    },
+    removeKeyHandler() {
+      document.removeEventListener("keyup", this.onKeyUp);
+    }
+  }
+}, Ut = { class: "l-root" };
+function Bt(e, t, n, o, s, i) {
+  const f = U("tooltip");
+  return a(), c("div", Ut, [
+    R((a(), c("div", {
+      class: V([{ disabled: !n.canBackward }, "l-button"]),
+      style: { left: "calc(-4 * var(--rem))" },
+      onClick: t[0] || (t[0] = (v) => e.$emit("go", -1))
+    }, t[2] || (t[2] = [
+      l("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "35",
+        height: "35",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, [
+        l("path", { d: "M15 18l-6-6 6-6" })
+      ], -1)
+    ]), 2)), [
+      [f, i.getNavTooltip(-1)]
+    ]),
+    R((a(), c("div", {
+      class: V([{ disabled: !n.canForward }, "l-button"]),
+      style: { right: "calc(-4 * var(--rem))" },
+      onClick: t[1] || (t[1] = (v) => e.$emit("go", 1))
+    }, t[3] || (t[3] = [
+      l("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "35",
+        height: "35",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, [
+        l("path", { d: "M9 18l6-6-6-6" })
+      ], -1)
+    ]), 2)), [
+      [f, i.getNavTooltip(1)]
+    ])
+  ]);
+}
+const Wt = /* @__PURE__ */ D(Et, [["render", Bt], ["__scopeId", "data-v-f685b502"]]), zt = {
+  name: "ArticleUnitEditModal",
+  i18nOptions: {
+    namespaces: "ArticleUnitEditModal",
+    messages: {
+      en: {
+        tooltip: `
+            <div>
+              Tip: If you'd like for the unit type to pluralize automatically. Use the following format - <span style="padding: 3px; background-color: hsla(0, 0%, 100%, 0.1); border-radius: 4px;">single:plural</span>.
+            </div>
+            <div style="margin-top: 0.5em;">For example:</div>
+            <div style="margin-left: 0.25em;">- image:images</div>
+            <div style="margin-left: 0.25em;">- phone:phones</div>
+          `
+      },
+      sv: {
+        tooltip: `
+            <div>
+              Tips: Om du vill att enheten ska ta hänsyn till antalet så kan du skriva det i följande format - <span style="padding: 3px; background-color: hsla(0, 0%, 100%, 0.1); border-radius: 4px;">singular:plural</span>.
+            </div>
+            <div style="margin-top: 0.5em;">Till exempel:</div>
+            <div style="margin-left: 0.25em;">- bild:bilder</div>
+            <div style="margin-left: 0.25em;">- telefon:telefoner</div>
+          `
+      }
+    }
+  },
+  components: {
+    DragList: Ee,
+    DragItem: Ue,
+    CField: ye
+  },
+  emits: ["select", "close"],
+  data() {
+    return {
+      hoverIndex: null,
+      removeConfirmIndex: null,
+      selectedValue: {
+        id: null,
+        value: ""
+      },
+      idList: []
+    };
+  },
+  computed: {
+    ...E({
+      isPosting: "unitTypes/isPosting",
+      stateUnitIds: "unitTypes/ids",
+      unitById: "unitTypes/byId"
+    }),
+    unitItems() {
+      return (this.idList || []).map((e) => {
+        const t = this.unitById(e), n = W(t.value);
+        return {
+          ...t,
+          label: n,
+          value: t.value.startsWith("$") ? t.value.replace(/^[$]/, "") : n,
+          raw: t.value.replace(/^[$]/, "")
+          // replace only first occurance of '$'
+        };
+      });
+    }
+  },
+  watch: {
+    stateUnitIds: {
+      immediate: !0,
+      handler(e) {
+        this.idList = e || [];
+      }
+    }
+  },
+  methods: {
+    ...z({
+      loadUnits: L.LOAD_UNIT_TYPES,
+      createUnit: L.CREATE_UNIT_TYPE,
+      updateUnit: L.UPDATE_UNIT_TYPE,
+      deleteUnit: L.DELETE_UNIT_TYPE
+    }),
+    onEdit(e) {
+      this.selectedValue = { ...e }, this.$refs.unitInput && this.$refs.unitInput.focus();
+    },
+    async submit() {
+      const { id: e, value: t } = this.selectedValue || {};
+      if (!t) throw new Error("New unitTypes need truthy value!");
+      const n = `$${t}`;
+      e ? await this.updateUnit({ id: e, body: { value: n } }) : await this.createUnit({ body: { value: n } }), this.reset(), this.$emit("select", n), this.close();
+    },
+    async remove(e, t) {
+      if (this.removeConfirmIndex !== t) {
+        this.removeConfirmIndex = t;
+        return;
+      }
+      await this.deleteUnit({ id: e }), this.reset(), this.removeConfirmIndex = null;
+    },
+    reset() {
+      this.selectedValue = { id: null, value: "" };
+    },
+    close() {
+      this.$emit("close");
+    },
+    async onDrop({ removedIndex: e, addedIndex: t }) {
+      e === null && t === null || e !== t && (this.idList = he(this.idList, e, t), await Be(
+        "/unitType/setPositions",
+        { ids: this.idList },
+        { invalidateCache: { type: "unitType" } }
+      ), this.reset(), await this.loadUnits());
+    }
+  }
+}, Ft = {
+  class: "unit-modal-root font-inter",
+  style: { position: "relative" }
+}, jt = { style: { padding: "calc(1.5 * var(--rem))" } }, qt = { style: { "font-weight": "600", "font-size": "18px", "margin-bottom": "calc(1.5 * var(--rem))" } }, Nt = { class: "control" }, Ht = { style: { "border-top": "1px solid hsl(0, 0%, 88%)", overflow: "auto", "max-height": "360px" } }, Gt = {
+  class: "text-gray-400",
+  style: { "font-size": "14px", padding: "calc(1 * var(--rem)) calc(1.5 * var(--rem)) 0", "font-weight": "500" }
+}, Kt = { class: "unit-modal-list" }, Yt = {
+  key: 0,
+  class: "unit-modal-list-empty"
+}, Zt = ["onMouseoverPassive", "onClick"], Jt = { class: "drag-handle" }, Xt = { style: { "padding-left": "0.5em" } }, Qt = { class: "unittype-buttons" };
+function ei(e, t, n, o, s, i) {
+  const f = g("CIcon"), v = g("CButton"), y = g("CInput"), u = g("CField"), w = g("DragItem"), k = g("DragList"), C = U("tooltip");
+  return a(), c("div", {
+    class: "modal-overlay font-inter",
+    onClickPassive: t[3] || (t[3] = H((...d) => i.close && i.close(...d), ["self"]))
+  }, [
+    l("div", Ft, [
+      l("div", jt, [
+        l("div", qt, [
+          l("span", null, m(e.$t("_common:add", { thing: e.$t("_common:unitType.unitType_plural") })), 1),
+          R(p(f, {
+            type: "info",
+            size: "15",
+            class: "text-gray-400",
+            style: { "margin-left": "0.5em" }
+          }, null, 512), [
+            [C, { content: e.$t("tooltip"), html: !0 }]
+          ])
+        ]),
+        p(u, {
+          grouped: "",
+          style: { margin: "0" }
+        }, {
+          default: h(() => [
+            p(y, {
+              ref: "unitInput",
+              modelValue: s.selectedValue.value,
+              "onUpdate:modelValue": t[0] || (t[0] = (d) => s.selectedValue.value = d),
+              modelModifiers: { trim: !0 },
+              placeholder: e.$t("_common:name").capitalize(),
+              expanded: "",
+              filled: "",
+              class: "unit-input"
+            }, ge({ _: 2 }, [
+              s.selectedValue.id ? {
+                name: "suffix",
+                fn: h(() => [
+                  p(v, {
+                    icon: "x",
+                    type: "none",
+                    pattern: "tertiary",
+                    size: "small",
+                    style: { "border-radius": "4px" },
+                    onClick: i.reset
+                  }, null, 8, ["onClick"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["modelValue", "placeholder"]),
+            l("div", Nt, [
+              p(v, {
+                loading: e.isPosting,
+                disabled: !s.selectedValue.value,
+                type: "secondary",
+                onClick: i.submit
+              }, {
+                default: h(() => [
+                  _(m(s.selectedValue.id ? e.$t("_common:save") : e.$t("_common:add")), 1)
+                ]),
+                _: 1
+              }, 8, ["loading", "disabled", "onClick"])
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      l("div", Ht, [
+        l("div", Gt, m(e.$t("_common:unit_plural").capitalize()), 1),
+        l("div", Kt, [
+          i.unitItems.length ? b("", !0) : (a(), c("div", Yt, m(e.$t("_common:add", { thing: e.$t("_common:unit_plural") })), 1)),
+          p(k, {
+            "drop-placeholder": { className: "drag-drop-placeholder" },
+            "drag-class": "is-dragged",
+            "lock-axis": "y",
+            "drag-handle-selector": ".drag-handle",
+            onDrop: i.onDrop
+          }, {
+            default: h(() => [
+              (a(!0), c(A, null, S(i.unitItems, (d, I) => (a(), T(w, {
+                key: d.id
+              }, {
+                default: h(() => [
+                  l("div", {
+                    class: V([{ "is-editing": s.selectedValue.id === d.id }, "unit-modal-list-item"]),
+                    onMouseoverPassive: (r) => s.hoverIndex = I,
+                    onMouseleavePassive: t[2] || (t[2] = (r) => s.hoverIndex = null),
+                    onClick: (r) => i.onEdit(d)
+                  }, [
+                    l("div", Jt, [
+                      p(f, {
+                        type: "handle",
+                        size: "16",
+                        class: "text-gray-300"
+                      })
+                    ]),
+                    l("div", Xt, m(d.label), 1),
+                    R(l("span", { class: "delete-confirm" }, m(e.$t("_common:remove")) + "? ", 513), [
+                      [We, s.removeConfirmIndex === I]
+                    ]),
+                    l("div", Qt, [
+                      s.hoverIndex === I || s.removeConfirmIndex === I ? (a(), T(v, {
+                        key: 0,
+                        type: s.removeConfirmIndex === I ? "danger" : "none",
+                        pattern: s.removeConfirmIndex === I ? "primary" : "tertiary",
+                        circle: "",
+                        icon: "x",
+                        size: "small",
+                        onClick: H((r) => i.remove(d.id, I), ["stop", "prevent"]),
+                        onBlur: t[1] || (t[1] = (r) => s.removeConfirmIndex = null)
+                      }, null, 8, ["type", "pattern", "onClick"])) : b("", !0),
+                      p(v, {
+                        icon: "edit",
+                        size: "small",
+                        type: "none",
+                        pattern: "tertiary",
+                        circle: ""
+                      })
+                    ])
+                  ], 42, Zt)
+                ]),
+                _: 2
+              }, 1024))), 128))
+            ]),
+            _: 1
+          }, 8, ["onDrop"])
+        ])
+      ])
+    ])
+  ], 32);
+}
+const ti = /* @__PURE__ */ D(zt, [["render", ei], ["__scopeId", "data-v-d0dffed6"]]), ii = {
+  name: "ArticleUnitSelect",
+  components: {
+    CDropdown: K,
+    CDropdownItem: Y
+  },
+  props: {
+    modelValue: {
+      type: String,
+      required: !0
+    },
+    isPublicForm: {
+      type: Boolean,
+      default: !1
+    },
+    // Optional param for plural translations
+    count: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    ...E({
+      unitIds: "unitTypes/ids",
+      unitById: "unitTypes/byId"
+    }),
+    unitItems() {
+      return this.isPublicForm ? nt : (this.unitIds || []).map((e) => this.unitById(e)).map(({ value: e }) => e);
+    }
+  },
+  created() {
+    this.isPublicForm || this.loadUnits();
+  },
+  methods: {
+    articleUnitLabel: W,
+    ...z({
+      loadUnits: L.LOAD_UNIT_TYPES
+    }),
+    openEditModal() {
+      this.$modal.show(
+        ti,
+        {},
+        {},
+        {
+          select: (e) => this.$emit("update:modelValue", e)
+        }
+      );
+    }
+  }
+};
+function ni(e, t, n, o, s, i) {
+  const f = g("CButton"), v = g("CDropdownItem"), y = g("CDropdown");
+  return a(), T(y, B({
+    position: "is-bottom-left",
+    maxHeight: "240px",
+    ...e.$attrs
+  }, {
+    "model-value": n.modelValue,
+    scrollable: "",
+    "onUpdate:modelValue": t[0] || (t[0] = (u) => e.$emit("update:modelValue", u))
+  }), {
+    trigger: h(() => [
+      ie(e.$slots, "default", {}, () => [
+        p(f, {
+          type: "none",
+          pattern: "tertiary"
+        }, {
+          default: h(() => [
+            _(m(i.articleUnitLabel(n.modelValue)), 1)
+          ]),
+          _: 1
+        })
+      ], !0)
+    ]),
+    footer: h(() => [
+      n.isPublicForm ? b("", !0) : (a(), T(f, {
+        key: 0,
+        type: "none",
+        pattern: "secondary",
+        size: "small",
+        class: "edit-button",
+        onClick: i.openEditModal
+      }, {
+        default: h(() => [
+          _(m(e.$t("_common:edit", { thing: e.$t("_common:unit_plural") })), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"]))
+    ]),
+    default: h(() => [
+      (a(!0), c(A, null, S(i.unitItems, (u, w) => (a(), T(v, {
+        key: `${u}-${w}`,
+        value: u
+      }, {
+        default: h(() => [
+          _(m(i.articleUnitLabel(u)), 1)
+        ]),
+        _: 2
+      }, 1032, ["value"]))), 128))
+    ]),
+    _: 3
+  }, 16, ["model-value"]);
+}
+const si = /* @__PURE__ */ D(ii, [["render", ni], ["__scopeId", "data-v-57c52e30"]]), ai = {
+  name: "ArticleModal",
+  i18nOptions: {
+    namespaces: "ArticleModal",
+    messages: we
+  },
+  components: {
+    ArticleAutocomplete: ke,
+    ArticleUnitSelect: si,
+    ListModalButtons: Wt,
+    CPriceInput: Z,
+    CField: ye
+  },
+  emits: ["add", "input", "focus", "close", "open-modal", "update:currency"],
+  mixins: [_e],
+  props: {
+    _document: {
+      type: Object,
+      default: () => ({})
+    },
+    // Article object
+    index: {
+      type: Number,
+      required: !0
+    },
+    articleList: {
+      type: Array,
+      required: !0
+    },
+    // If priceType checkboxes should be visible
+    enablePriceTypes: {
+      type: Boolean,
+      default: !0
+    },
+    hidePriceInput: {
+      type: Boolean,
+      default: !1
+    },
+    hidePriceOnNew: {
+      type: Boolean,
+      default: !1
+    },
+    isIncVat: {
+      type: Boolean,
+      default: !1
+    },
+    rootPriceType: {
+      type: String,
+      default: "fixed"
+    },
+    currency: {
+      type: String,
+      required: !0
+    },
+    activeHouseWorkType: {
+      type: String,
+      default: null
+    },
+    // Mixin props are not injected when rendered within a portal
+    viewSettings: {
+      type: Object,
+      default: () => ({
+        canEdit: !1,
+        isForm: !1,
+        setFormValue: null,
+        isPublicForm: !1
+      })
+    }
+  },
+  setup() {
+    return {
+      v$: fe()
+    };
+  },
+  validations: Ie,
+  data() {
+    return {
+      priceSuffix: St,
+      updateData: G,
+      addSavedArticle: be,
+      vatOptions: [
+        { value: 25, translation: "25%" },
+        { value: 12, translation: "12%" },
+        { value: 6, translation: "6%" },
+        { value: 0, translation: "0%" }
+      ],
+      showDiscountInput: !1,
+      setPricesIncVat: !1,
+      getCurrencySymbol: se,
+      articleUnitLabel: W
+    };
+  },
+  computed: {
+    ...E({
+      allowHidePrice: "settings/allowHidePrice",
+      getCompanySetting: "settings/getCompanySetting",
+      feature: "application/feature"
+    }),
+    article: {
+      get() {
+        return this.articleList[this.index] || {};
+      },
+      set(e) {
+        this.$emit("input", e);
+      }
+    },
+    useVat() {
+      return x(this, "_document.useVat") || "";
+    },
+    vatType() {
+      return x(this, "_document.vatType") || "";
+    },
+    checkboxItems() {
+      const { article: e } = this || {}, { priceType: t } = this.article || {}, n = [
+        ...t !== "markup" ? [
+          {
+            label: this.$t("discount").capitalize(),
+            value: e.discount || this.showDiscountInput,
+            onClick: () => {
+              this.showDiscountInput || this.focusEl("discountInput"), this.showDiscountInput = !this.showDiscountInput;
+            }
+          }
+        ] : [],
+        ...this.getCompanySetting("showRot") || e.isDeductable ? [
+          {
+            label: this.$t("_common:deduction.rot"),
+            value: this.article.isDeductable,
+            onClick: () => this.updateArticle(!e.isDeductable, "isDeductable")
+          }
+        ] : [],
+        ...this.getCompanySetting("showRut") || e.isRut ? [
+          {
+            label: this.$t("_common:deduction.rut"),
+            value: e.isRut,
+            onClick: () => this.updateArticle(!e.isRut, "isRut")
+          }
+        ] : [],
+        ...e.greenRot15 ? [
+          {
+            label: this.$t("_common:deduction.greenRot15_percentage"),
+            value: e.greenRot15,
+            onClick: () => this.updateArticle(!e.greenRot15, "greenRot15")
+          }
+        ] : [],
+        ...this.getCompanySetting("showGreenRot") || e.greenRot20 || e.greenRot50 ? [
+          {
+            label: this.$t("_common:deduction.greenRot20_percentage"),
+            value: e.greenRot20,
+            onClick: () => this.updateArticle(!e.greenRot20, "greenRot20")
+          },
+          {
+            label: this.$t("_common:deduction.greenRot50_percentage"),
+            value: e.greenRot50,
+            onClick: () => this.updateArticle(!e.greenRot50, "greenRot50")
+          }
+        ] : []
+      ];
+      if (this.allowHidePrice) {
+        const { showPrice: o } = e || {};
+        n.push({
+          label: this.$t("hidePriceLabel"),
+          value: !o,
+          onClick: () => this.updateArticle(!o, "showPrice")
+        });
+      }
+      return n;
+    },
+    priceTypeOptions() {
+      if (!this.enablePriceTypes || this.rootPriceType === "fixed") return [];
+      const { priceType: e } = this.article, t = (o) => this.$t(`priceTypeTooltips.${o}`), n = [
+        {
+          label: this.$t("price.fixed"),
+          tooltip: t("fixed"),
+          value: e === "fixed",
+          onClick: () => this.updateArticle("fixed", "priceType")
+        }
+      ];
+      return this.rootPriceType === "approx" && n.push({
+        label: this.$t("price.approx"),
+        tooltip: t("approx"),
+        value: e === "approx",
+        onClick: () => this.updateArticle("approx", "priceType")
+      }), this.rootPriceType.startsWith("openAcc") && (n.push({
+        label: this.$t("price.openAcc"),
+        tooltip: t("openAcc"),
+        value: e === "openAcc",
+        onClick: () => this.updateArticle("openAcc", "priceType")
+      }), n.push({
+        label: this.$t("price.markup"),
+        tooltip: t("markup"),
+        value: e === "markup",
+        onClick: () => this.updateArticle("markup", "priceType")
+      })), n;
+    }
+  },
+  watch: {
+    index: {
+      immediate: !0,
+      handler(e, t) {
+        e !== t && (this.showDiscountInput = !1);
+      }
+    },
+    isIncVat: {
+      immediate: !0,
+      handler(e) {
+        this.setPricesIncVat = !!e;
+      }
+    },
+    "article.discount": {
+      immediate: !0,
+      handler(e) {
+        e && (this.showDiscountInput = !0);
+      }
+    },
+    "article.priceType": {
+      handler(e) {
+        e === "markup" && (this.showDiscountInput = !1), ["openAcc", "markup"].includes(e) && this.updateArticle(1, "quantity");
+      }
+    },
+    showDiscountInput(e) {
+      e || this.updateArticle(0, "discount");
+    }
+  },
+  mounted() {
+    !this.article.name && this.$refs.nameInput && this.$refs.nameInput.focus(), document.addEventListener("keydown", this.onKeydown);
+  },
+  beforeUnmount() {
+    document.removeEventListener("keydown", this.onKeydown);
+  },
+  methods: {
+    ...z({
+      createArticle: L.DO_CREATE_ARTICLE
+    }),
+    onCustomVatBlur(e) {
+      x(e, "target.value") || "" || this.updateArticle(0, "vat");
+    },
+    onCustomVatInput(e) {
+      const t = x(e, "target.value") || "";
+      if (!t) return;
+      let n = t > 100 ? t.slice(0, t.length - 1) : t;
+      n < 0 && (n = 0), this.updateArticle(Number.parseFloat(n), "vat");
+    },
+    updateArticle(e, t) {
+      this.article = G(this.article, e, t);
+    },
+    close() {
+      this.$emit("close");
+    },
+    onKeydown(e) {
+      e.keyCode === 13 && e.shiftKey && (e.preventDefault(), this.addNewArticle());
+    },
+    onGo(e) {
+      const t = this.index + e;
+      this.articleList[t] && (this.close(), this.$emit("open-modal", t));
+    },
+    async addNewArticle() {
+      this.v$.$invalid || await this.saveArticle(), this.$emit("add", { openModal: !0 }), this.close();
+    },
+    focusEl(e) {
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          this.$refs[e] && this.$refs[e].focus && this.$refs[e].focus();
+        });
+      });
+    },
+    onTotalPriceInputFocus() {
+      this.article.quantity > 1 && this.$nextTick(() => {
+        this.$refs.priceInput && this.$refs.priceInput.focus();
+      });
+    },
+    toggleDiscountType() {
+      let e = "fixed";
+      this.article.discountType === "fixed" && (e = "percentage"), this.updateArticle(e, "discountType");
+    },
+    async onSaveArticle() {
+      if (this.v$.$invalid) {
+        this.v$.$touch();
+        return;
+      }
+      await this.saveArticle(), this.close();
+    },
+    async saveArticle() {
+      if (this.viewSettings.isPublicForm) return;
+      let { ArticleId: e } = this.article;
+      !e && ((n) => typeof n == "string" && !!n.trim())(this.article.name) && (e = await this.createArticle({
+        body: this.article,
+        showMessage: !1
+      }), this.article = { ...this.article, ArticleId: e });
+    }
+  }
+}, oi = { class: "modal-container" }, ri = {
+  class: "flex w-full",
+  style: { "margin-bottom": "1.5em" }
+}, li = {
+  class: "flex",
+  style: { "margin-bottom": "1.5em" }
+}, ci = {
+  key: 0,
+  class: "flex",
+  style: { "margin-bottom": "1.5em" }
+}, di = { style: { margin: "calc(1 * var(--rem)) calc(-0.5 * var(--rem))" } }, ui = ["value"], pi = ["value"], mi = {
+  key: 1,
+  class: "select-css tag-item no-chevron",
+  style: { display: "inline", "min-height": "initial", background: "hsl(0, 0%, 94%)", "border-color": "hsl(0, 0%, 94%)", color: "hsl(0, 0%, 30%)" }
+}, hi = ["value"], gi = {
+  key: 1,
+  class: "tag-group",
+  style: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "margin-top": "1em" }
+}, vi = ["onClick"], fi = { style: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "margin-top": "1em" } }, yi = ["onClick"], ki = { class: "flex space-x-4 overflow-hidden p-4 md:p-9" };
+function bi(e, t, n, o, s, i) {
+  const f = g("ListModalButtons"), v = g("CIcon"), y = g("ArticleAutocomplete"), u = g("CField"), w = g("CInput"), k = g("CButton"), C = g("ArticleUnitSelect"), d = g("CPriceInput"), I = U("tooltip");
+  return a(), c("div", {
+    class: V([{
+      "full-screen": e.mq === "sm",
+      "modal-overlay": !0
+    }, "font-inter"]),
+    onClickPassive: t[15] || (t[15] = H((...r) => i.close && i.close(...r), ["self"]))
+  }, [
+    l("div", oi, [
+      e.mq !== "sm" ? (a(), T(f, {
+        key: 0,
+        "can-forward": !!n.articleList[n.index + 1],
+        "can-backward": !!n.articleList[n.index - 1],
+        onClose: i.close,
+        onGo: t[0] || (t[0] = (r) => i.onGo(r))
+      }, null, 8, ["can-forward", "can-backward", "onClose"])) : (a(), c("div", {
+        key: 1,
+        class: "modal-close",
+        onClick: t[1] || (t[1] = (...r) => i.close && i.close(...r))
+      }, [
+        p(v, { type: "x" })
+      ])),
+      p(ze, { name: "slide" }, {
+        default: h(() => [
+          (a(), c("div", {
+            key: i.article._uniqueId,
+            class: "modal-main"
+          }, [
+            p(u, {
+              validator: o.v$.article.name,
+              messages: { maxLength: e.$t("validations.name.maxLength") },
+              label: e.$t("name").capitalize(),
+              "label-position": "inside",
+              style: { "margin-bottom": "1.5em" },
+              class: "label-selector"
+            }, {
+              default: h(() => [
+                p(y, {
+                  ref: "nameInput",
+                  "model-value": i.article.name,
+                  autosize: !0,
+                  tag: "textarea",
+                  placeholder: "",
+                  size: "large",
+                  class: "input-selector",
+                  "onUpdate:modelValue": t[2] || (t[2] = (r) => i.updateArticle(r, "name")),
+                  onSelect: t[3] || (t[3] = (r) => e.$emit(
+                    "input",
+                    s.addSavedArticle({
+                      stored: r,
+                      current: i.article,
+                      hidePrice: n.hidePriceOnNew,
+                      activeHouseWorkType: n.activeHouseWorkType
+                    })
+                  ))
+                }, null, 8, ["model-value"])
+              ]),
+              _: 1
+            }, 8, ["validator", "messages", "label"]),
+            l("div", ri, [
+              p(u, {
+                label: e.$t("quantity").capitalize(),
+                "label-position": "inside",
+                class: "label-selector form-control form-control-left flex-grow",
+                style: { "margin-bottom": "0" }
+              }, {
+                default: h(() => [
+                  p(w, {
+                    "model-value": i.article.quantity,
+                    disabled: ["openAcc", "markup"].includes(i.article.priceType),
+                    placeholder: "",
+                    type: "number",
+                    size: "large",
+                    class: "input-selector",
+                    "onUpdate:modelValue": t[4] || (t[4] = (r) => i.updateArticle(Number.parseFloat(r), "quantity"))
+                  }, null, 8, ["model-value", "disabled"])
+                ]),
+                _: 1
+              }, 8, ["label"]),
+              p(C, {
+                "model-value": i.article.unitType,
+                "is-public-form": n.viewSettings.isPublicForm,
+                "onUpdate:modelValue": t[5] || (t[5] = (r) => i.updateArticle(r, "unitType"))
+              }, {
+                default: h(() => [
+                  p(k, {
+                    class: "select-css form-control form-control-right",
+                    style: { width: "8em", "box-shadow": "none" }
+                  }, {
+                    default: h(() => [
+                      _(m(s.articleUnitLabel(i.article.unitType, {
+                        count: i.article.quantity
+                      })), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["model-value", "is-public-form"])
+            ]),
+            n.hidePriceInput ? b("", !0) : (a(), c(A, { key: 0 }, [
+              l("div", li, [
+                p(u, {
+                  label: e.$t("price.price").capitalize(),
+                  "label-position": "inside",
+                  class: "label-selector form-control form-control-left flex-1",
+                  style: { "margin-bottom": "0" }
+                }, {
+                  default: h(() => [
+                    (a(), T(d, {
+                      ref: "priceInput",
+                      key: s.priceSuffix(i.article),
+                      "model-value": i.article.price,
+                      currency: i.article.currency,
+                      "is-inc-vat": i.article.priceType !== "markup" && s.setPricesIncVat,
+                      vat: i.article.vat,
+                      "price-type": i.article.priceType,
+                      "unit-label": s.articleUnitLabel(i.article.unitType),
+                      class: "input-selector",
+                      "onUpdate:modelValue": t[6] || (t[6] = (r) => i.updateArticle(r, "price")),
+                      "onUpdate:currency": t[7] || (t[7] = (r) => e.$emit("update:currency", r)),
+                      onFocus: t[8] || (t[8] = (r) => e.$emit("focus"))
+                    }, null, 8, ["model-value", "currency", "is-inc-vat", "vat", "price-type", "unit-label"]))
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                i.useVat ? (a(), c("div", {
+                  key: 0,
+                  class: "select-css form-control form-control-right",
+                  style: { width: "8em" },
+                  onClick: t[9] || (t[9] = (r) => s.setPricesIncVat = !s.setPricesIncVat)
+                }, m(n._document.$t(`vat.${s.setPricesIncVat ? "incVat" : "exVat"}`)), 1)) : b("", !0)
+              ]),
+              s.showDiscountInput ? (a(), c("div", ci, [
+                p(u, {
+                  label: e.$t("discount").capitalize(),
+                  "label-position": "inside",
+                  class: "label-selector form-control form-control-left flex-grow",
+                  style: { "margin-bottom": "0" }
+                }, {
+                  default: h(() => [
+                    p(d, {
+                      ref: "discountInput",
+                      "model-value": i.article.discount,
+                      currency: i.article.currency,
+                      "is-inc-vat": i.article.discountType !== "percentage" && s.setPricesIncVat,
+                      vat: i.article.vat,
+                      class: "input-selector",
+                      "suffix-class": "text-gray-400",
+                      "onUpdate:modelValue": t[10] || (t[10] = (r) => i.updateArticle(Math.abs(r), "discount"))
+                    }, ge({ _: 2 }, [
+                      i.article.discountType === "fixed" ? {
+                        name: "suffix",
+                        fn: h(() => [
+                          _(m(n._document.$t(
+                            `vat.${s.setPricesIncVat ? "incVat" : "exVat"}`
+                          )), 1)
+                        ]),
+                        key: "0"
+                      } : {
+                        name: "suffix",
+                        fn: h(() => [
+                          _(m(s.getCurrencySymbol(i.article.currency)), 1)
+                        ]),
+                        key: "1"
+                      }
+                    ]), 1032, ["model-value", "currency", "is-inc-vat", "vat"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                l("div", {
+                  class: "select-css form-control form-control-right",
+                  style: { width: "5em" },
+                  onClick: t[11] || (t[11] = (r) => i.updateArticle(
+                    i.article.discountType === "percentage" ? "fixed" : "percentage",
+                    "discountType"
+                  ))
+                }, m(i.article.discountType === "percentage" ? "%" : s.getCurrencySymbol(i.article.currency)), 1)
+              ])) : b("", !0)
+            ], 64)),
+            l("div", di, [
+              i.useVat ? (a(), c(A, { key: 0 }, [
+                e.feature("regionSE") && Number.isInteger(i.article.vat) ? (a(), c("select", {
+                  key: 0,
+                  value: i.article.vat,
+                  class: "select-css tag-item no-chevron",
+                  style: { display: "inline", "min-height": "initial", background: "hsl(0, 0%, 94%)", "border-color": "hsl(0, 0%, 94%)", color: "hsl(0, 0%, 30%)" },
+                  onInput: t[12] || (t[12] = (r) => i.updateArticle(Number.parseFloat(r.target.value), "vat"))
+                }, [
+                  (a(!0), c(A, null, S(s.vatOptions, ({ translation: r, value: P }, $) => (a(), c("option", {
+                    key: $,
+                    value: P
+                  }, m(e.$t(`vat.${i.vatType}`)) + " " + m(r), 9, pi))), 128))
+                ], 40, ui)) : (a(), c("span", mi, [
+                  _(m(n._document.$t("vat").capitalize()) + " ", 1),
+                  l("input", {
+                    value: i.article.vat || 0,
+                    type: "number",
+                    style: { width: "calc(2.5 * var(--rem))", display: "inline", background: "hsl(0, 0%, 94%)", "border-color": "hsl(0, 0%, 94%)", color: "hsl(0, 0%, 30%)" },
+                    onBlur: t[13] || (t[13] = (...r) => i.onCustomVatBlur && i.onCustomVatBlur(...r)),
+                    onInput: t[14] || (t[14] = (...r) => i.onCustomVatInput && i.onCustomVatInput(...r))
+                  }, null, 40, hi),
+                  t[16] || (t[16] = _(" % "))
+                ]))
+              ], 64)) : b("", !0),
+              i.priceTypeOptions.length ? (a(), c("div", gi, [
+                (a(!0), c(A, null, S(i.priceTypeOptions, ({ label: r, value: P, onClick: $, tooltip: M }, O) => R((a(), c("div", {
+                  key: r + O,
+                  class: V([{ active: P }, "tag-item"]),
+                  onClick: $
+                }, [
+                  _(m(r), 1)
+                ], 10, vi)), [
+                  [I, {
+                    content: M,
+                    delay: { show: 300, hide: 0 }
+                  }]
+                ])), 128))
+              ])) : b("", !0),
+              l("div", fi, [
+                (a(!0), c(A, null, S(i.checkboxItems, ({ label: r, value: P, onClick: $ }, M) => (a(), c("div", {
+                  key: r + M,
+                  class: V([{ active: P }, "tag-item"]),
+                  onClick: $
+                }, m(r), 11, yi))), 128))
+              ])
+            ])
+          ]))
+        ]),
+        _: 1
+      }),
+      l("div", ki, [
+        R((a(), T(k, {
+          type: "primary",
+          tabindex: "0",
+          size: "large",
+          style: { padding: "1.75em", height: "4em", "font-size": "16px", "background-color": "hsl(231, 4%, 20%)", "border-color": "hsl(231, 4%, 20%)" },
+          onClick: i.addNewArticle
+        }, {
+          default: h(() => [
+            p(v, {
+              type: "zap",
+              size: "21",
+              style: { margin: "-3px" }
+            })
+          ]),
+          _: 1
+        }, 8, ["onClick"])), [
+          [I, {
+            distance: 7,
+            html: !0,
+            content: `
+              <div style='margin-bottom: 0.6em;'>
+                ${e.$t("saveAndAddTooltip")}
+              </div>
+              <div class='flex items-center justify-center' style='padding-bottom: 0.5em;'>
+                <div style='text-align: center; background-color: hsl(0, 0%, 40%); line-height: 1; border-radius: 0.5em; display: inline-flex; align-items: center; justify-content: center; padding: 0.5em;'>
+                  <svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 35 35'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M11.208 31h12.584V15.895h8.732L17.5 1.39 2.476 15.895h8.732V31z'/></svg>
+                </div>
+                <div style='text-align: center; background-color: hsl(0, 0%, 40%); line-height: 1; border-radius: 0.5em; display: inline-flex; align-items: center; justify-content: center; padding: 0.5em; margin-left: 0.5em;'>
+                  <svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 -12 50 50'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke d='M45.706.897c.55.002.994.458.993.994l-.036 18.01c0 .55-.44.996-1.008.996H5.12l10.568 8.886-1.467 1.738L0 19.758 14.22 8l1.468 1.738L5.12 18.624h38.987c.162 0 .293-.134.293-.296V3.445c0-.163-.144-.295-.292-.295H32.054c-.278 0-.504-.23-.504-.5v-1.3c0-.277.214-.5.504-.498l13.652.045z'/></svg>
+                </div>
+              </div>
+            `
+          }]
+        ]),
+        p(k, {
+          size: "large",
+          class: "flex-grow",
+          type: "secondary",
+          style: { padding: "1.75em", height: "4em", "font-size": "16px" },
+          "full-width": "",
+          tabindex: "0",
+          onClick: i.onSaveArticle
+        }, {
+          default: h(() => [
+            _(m(e.$t("save")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ])
+    ])
+  ], 34);
+}
+const wi = /* @__PURE__ */ D(ai, [["render", bi], ["__scopeId", "data-v-eacf482e"]]), Ii = {
+  i18nOptions: {
+    name: "ArticleListEdit",
+    namespaces: "ArticleListEdit",
+    messages: {
+      en: {
+        vatOption: {
+          label: "Enter",
+          message: "You are now entering prices {{- vatOption}}."
+        }
+      },
+      sv: {
+        vatOption: {
+          label: "Ange",
+          message: "Du anger priser {{- vatOption}} nu"
+        }
+      }
+    }
+  },
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Article: Ot,
+    ArticleModal: wi,
+    WithDimensions: Je,
+    Sortable: Qe
+  },
+  expose: ["focusLastArticle", "openLastArticle"],
+  mixins: [q([])],
+  props: {
+    _document: {
+      type: Object,
+      default: () => ({})
+    },
+    articles: {
+      type: Array,
+      required: !0
+    },
+    activeHouseWorkType: {
+      type: String,
+      default: null
+    },
+    rootPriceType: {
+      type: String,
+      default: "fixed"
+    },
+    hideControls: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    return { articleItem: Fe(null) };
+  },
+  emits: [
+    "input",
+    "insert",
+    "move",
+    "remove",
+    "update:setPricesIncVat",
+    "update:currency",
+    "add",
+    "focus"
+  ],
+  data() {
+    return {
+      selectedIndex: null,
+      showModal: !1
+    };
+  },
+  computed: {
+    ...E({
+      hidePriceInput: "settings/allowHideDocArticlePriceInput",
+      hidePriceOnNew: "settings/hidePriceOnNewlyAddedArticles"
+    }),
+    articlesWithTotal() {
+      return ne(this.articles);
+    },
+    isIndivid() {
+      return x(this._document, "prices.helpers.isIndivid", !0);
+    },
+    setPricesIncVat() {
+      return x(this, "_document.setPricesIncVat", null);
+    },
+    currency() {
+      return x(this._document, "currency");
+    },
+    useVat() {
+      return x(this, "_document.useVat");
+    },
+    vatType() {
+      return x(this, "_document.vatType");
+    },
+    showVatToggle() {
+      return this.useVat && (this.setPricesIncVat || (this.articles || []).some(({ vat: e }) => e !== null));
+    }
+  },
+  watch: {
+    activeHouseWorkType: {
+      immediate: !0,
+      handler(e) {
+        this.toggleDeductions(e);
+      }
+    },
+    isIndivid(e) {
+      e || this.toggleDeductions(!1);
+    },
+    setPricesIncVat(e) {
+      this.updateArticlesVatOption(), ["extension", "widget"].includes(je.value) || this.showMessage({
+        type: "info",
+        message: this.$t("vatOption.message", {
+          vatOption: this.$t(`_common:vat.${e ? "incVat" : "exVat"}`, {
+            thing: this.$t("_common:vat.sharedTitle")
+          })
+        })
+      });
+    }
+  },
+  methods: {
+    ...z({
+      showMessage: L.SHOW_MESSAGE
+    }),
+    openModal(e, { focusEl: t = "" } = {}) {
+      this.selectedIndex = e, this.showModal = !0, t && this.$nextTick(() => {
+        this.$nextTick(() => {
+          this.$refs.articleModal && this.$refs.articleModal.focusEl(t);
+        });
+      });
+    },
+    updateArticleObject(e, t) {
+      const n = t;
+      this.isIndivid || (n.isDeductable = !1, n.isRut = !1, n.greenRot15 = !1, n.greenRot20 = !1, n.greenRot50 = !1), this.$emit("input", { index: e, value: n });
+    },
+    onRemoveArticle(e) {
+      this.$emit("remove", e);
+    },
+    onEsc(e, t) {
+      e === this.articles.length - 1 && ["name", "price", "discount"].every((n) => !t[n]) && this.onRemoveArticle(e);
+    },
+    changeVat() {
+      this.$emit("update:setPricesIncVat", !this.setPricesIncVat);
+    },
+    updateArticlesVatOption() {
+      this.articles.forEach((e, t) => {
+        if (e.priceType === "markup") return;
+        let n = j({ amount: e.price }).divide(
+          (100 + e.vat) * 0.01
+        );
+        this.setPricesIncVat || (n = j({ amount: e.price }).multiply(
+          (100 + e.vat) * 0.01
+        )), this.updateArticleObject(
+          t,
+          ne({ ...e, price: n.getAmount() })
+        );
+      });
+    },
+    // Method used by parent component
+    focusLastArticle() {
+      this.$nextTick(() => {
+        var e;
+        return (e = this.articleItem) == null ? void 0 : e.focusName();
+      });
+    },
+    openLastArticle() {
+      this.$nextTick(() => this.openModal(this.articles.length - 1));
+    },
+    toggleDeductions(e) {
+      const t = {
+        rot: "isDeductable",
+        rut: "isRut",
+        greenRot15: "greenRot15",
+        greenRot20: "greenRot20",
+        greenRot50: "greenRot50"
+      }, n = (o = []) => o.reduce((s, i) => ({ ...s, [i]: !1 }), {});
+      t[e] ? this.articles.forEach((o, s) => {
+        const i = Object.values(ve(t, [e]));
+        if (i.some((f) => !!o[f])) {
+          const f = { ...o, ...n(i) };
+          this.$emit("input", { index: s, value: f });
+        }
+      }) : e === !1 && this.articles.forEach((o, s) => {
+        const i = Object.values(t);
+        if (i.some((f) => !!o[f])) {
+          const f = { ...o, ...n(i) };
+          this.$emit("input", { index: s, value: f });
+        }
+      });
+    },
+    onAdd(e) {
+      const { newIndex: t, item: n } = e, o = n == null ? void 0 : n._data;
+      o && (n == null || n.remove(), this.$emit("insert", { index: t, value: o }));
+    },
+    onRemove(e) {
+      this.$emit("remove", e.oldIndex);
+    },
+    onUpdate(e) {
+      const t = et(
+        this.articles,
+        e.oldIndex,
+        e.newIndex
+      ).filter(Boolean);
+      this.$emit("move", t);
+    }
+  }
+}, $i = {
+  key: 0,
+  class: "label-text"
+};
+function _i(e, t, n, o, s, i) {
+  const f = g("Article"), v = g("Sortable"), y = g("WithDimensions"), u = g("ArticleModal"), w = g("Portal");
+  return a(), c("div", null, [
+    i.showVatToggle ? (a(), c("div", $i, [
+      _(m(e.$t("vatOption.label")) + " ", 1),
+      l("span", {
+        onClick: t[0] || (t[0] = (k) => i.changeVat())
+      }, m(n._document.$t(`vat.${i.setPricesIncVat ? "incVat" : "exVat"}`)), 1)
+    ])) : b("", !0),
+    p(y, null, {
+      default: h(({ width: k }) => [
+        p(v, {
+          "item-key": "_uniqueId",
+          options: {
+            group: "articles",
+            sort: !0,
+            animation: 150,
+            ghostClass: "article-ghost",
+            handle: ".article-draggable-handle",
+            onAdd: i.onAdd,
+            onRemove: i.onRemove,
+            onUpdate: i.onUpdate
+          },
+          list: n.articles,
+          style: { "min-height": "calc(3 * var(--rem))" }
+        }, {
+          item: h(({ item: C, index: d }) => [
+            p(f, {
+              ref: "articleItem",
+              value: C,
+              width: k,
+              "hide-price-input": e.hidePriceInput,
+              "hide-price-on-new": e.hidePriceOnNew,
+              "is-inc-vat": i.setPricesIncVat,
+              "hide-controls": n.hideControls,
+              "root-price-type": n.rootPriceType,
+              "active-house-work-type": n.activeHouseWorkType,
+              class: "article-item",
+              "onUpdate:currency": t[1] || (t[1] = (I) => e.$emit("update:currency", I)),
+              onInput: (I) => i.updateArticleObject(d, I),
+              onFocus: t[2] || (t[2] = (I) => e.$emit("focus")),
+              onRemove: (I) => i.onRemoveArticle(d),
+              onOpenModal: (I) => i.openModal(d, I),
+              onAdd: (I) => d === i.articlesWithTotal.length - 1 ? e.$emit("add") : null,
+              onSelect: (I) => d === i.articlesWithTotal.length - 1 ? e.$emit("add") : null,
+              onEsc: (I) => i.onEsc(d, C)
+            }, null, 8, ["value", "width", "hide-price-input", "hide-price-on-new", "is-inc-vat", "hide-controls", "root-price-type", "active-house-work-type", "onInput", "onRemove", "onOpenModal", "onAdd", "onSelect", "onEsc"])
+          ]),
+          _: 2
+        }, 1032, ["options", "list"])
+      ]),
+      _: 1
+    }),
+    p(w, { to: "modal" }, {
+      default: h(() => [
+        s.showModal && i.articlesWithTotal[s.selectedIndex] ? (a(), T(u, {
+          key: 0,
+          ref: "articleModal",
+          _document: n._document,
+          index: s.selectedIndex,
+          "article-list": i.articlesWithTotal,
+          "hide-price-input": e.hidePriceInput,
+          "hide-price-on-new": e.hidePriceOnNew,
+          "is-inc-vat": i.setPricesIncVat,
+          "root-price-type": n.rootPriceType,
+          currency: i.currency,
+          "active-house-work-type": n.activeHouseWorkType,
+          "view-settings": e.viewSettings,
+          "onUpdate:currency": t[3] || (t[3] = (k) => e.$emit("update:currency", k)),
+          onInput: t[4] || (t[4] = (k) => i.updateArticleObject(s.selectedIndex, k)),
+          onAdd: t[5] || (t[5] = (k) => e.$emit("add", k)),
+          onOpenModal: i.openModal,
+          onClose: t[6] || (t[6] = (k) => s.showModal = !1)
+        }, null, 8, ["_document", "index", "article-list", "hide-price-input", "hide-price-on-new", "is-inc-vat", "root-price-type", "currency", "active-house-work-type", "view-settings", "onOpenModal"])) : b("", !0)
+      ]),
+      _: 1
+    })
+  ]);
+}
+const Ti = /* @__PURE__ */ D(Ii, [["render", _i], ["__scopeId", "data-v-f7bdd8ec"]]), Ai = {
+  name: "MaxTotalInput",
+  i18nOptions: {
+    namespaces: "MaxTotalInput",
+    messages: {
+      en: {
+        maxTotalLabel: "Add a price"
+      },
+      sv: {
+        maxTotalLabel: "Ange ett pris"
+      }
+    }
+  },
+  components: {
+    CPriceInput: Z
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: null
+    },
+    currency: {
+      type: String,
+      required: !0
+    },
+    vatType: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      getCurrencySymbol: se
+    };
+  },
+  computed: {
+    ...E({
+      isIncVat: "application/isIncVat"
+    })
+  },
+  watch: {
+    isIncVat(e) {
+      let t = j({ amount: this.modelValue }).divide(
+        1.25
+      );
+      e || (t = j({ amount: this.modelValue }).multiply(
+        125 * 0.01
+      )), this.$emit("update:modelValue", t.getAmount());
+    }
+  }
+}, Ci = { class: "flex w-full justify-end" };
+function Pi(e, t, n, o, s, i) {
+  const f = g("CPriceInput");
+  return a(), c("div", Ci, [
+    p(f, {
+      "model-value": n.modelValue,
+      currency: n.currency,
+      "is-inc-vat": e.isIncVat,
+      vat: 25,
+      placeholder: e.$t("maxTotalLabel"),
+      min: "0",
+      class: "mt-4 max-w-[275px] text-sm",
+      "prefix-class": "text-gray-400",
+      "suffix-class": "text-gray-400",
+      "onUpdate:modelValue": t[0] || (t[0] = (v) => e.$emit("update:modelValue", v))
+    }, {
+      prefix: h(() => [
+        _(m(e.$t("price.maxPrice").capitalize()), 1)
+      ]),
+      suffix: h(() => [
+        l("span", null, m(s.getCurrencySymbol(n.currency)) + " " + m(e.$t(`vat.${e.isIncVat ? "incVat" : "exVat"}`, {
+          thing: e.$t(`vat.${n.vatType}`)
+        })), 1)
+      ]),
+      _: 1
+    }, 8, ["model-value", "currency", "is-inc-vat", "placeholder"])
+  ]);
+}
+const xi = /* @__PURE__ */ D(Ai, [["render", Pi]]), Vi = {
+  components: {
+    CDropdown: K,
+    CDropdownItem: Y
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: "fixed"
+    }
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      priceTypeOptions: ["fixed", "approx", "openAcc", "openAccMaxPrice"]
+    };
+  }
+}, Si = { class: "flex justify-end" };
+function Di(e, t, n, o, s, i) {
+  const f = g("CButton"), v = g("CDropdownItem"), y = g("CDropdown");
+  return a(), c("div", Si, [
+    p(y, { "model-value": n.modelValue }, {
+      trigger: h(() => [
+        p(f, { class: "price-type-button" }, {
+          default: h(() => [
+            _(m(e.$t("price.pricing").capitalize()) + ": ", 1),
+            l("span", null, m(e.$t(`price.${n.modelValue}`)), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      default: h(() => [
+        (a(!0), c(A, null, S(s.priceTypeOptions, (u) => (a(), T(v, {
+          key: u,
+          value: u,
+          class: "text-right",
+          onClick: (w) => e.$emit("update:modelValue", u)
+        }, {
+          default: h(() => [
+            _(m(e.$t(`price.${u}`)), 1)
+          ]),
+          _: 2
+        }, 1032, ["value", "onClick"]))), 128))
+      ]),
+      _: 1
+    }, 8, ["model-value"])
+  ]);
+}
+const Mi = /* @__PURE__ */ D(Vi, [["render", Di], ["__scopeId", "data-v-26c5da6c"]]), Ri = {
+  name: "EditDeduction",
+  components: {
+    CPriceInput: Z
+  },
+  mixins: [q(["houseWorkManualAmount"])],
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    total: {
+      type: Number,
+      required: !0
+    },
+    houseWorkType: {
+      type: String,
+      default: "rot"
+    },
+    houseWorkAmount: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      amountUnit: "fixed",
+      internalValue: null,
+      modalName: `deduction-modal-${this.$.uid}`
+    };
+  },
+  watch: {
+    houseWorkType(e) {
+      e || (this.houseWorkManualAmount = null);
+    }
+  },
+  methods: {
+    setDeduction(e) {
+      this.internalValue = j({ amount: this.total }).multiply(e).getAmount();
+    },
+    showModal() {
+      this.internalValue = this.houseWorkAmount, this.$modal.show(this.modalName);
+    }
+  }
+}, Li = { class: "deduction-modal flex w-full flex-col items-center justify-between rounded-lg" }, Oi = { style: { "font-size": "calc(calc(1 * var(--rem)) + 2px)", "font-weight": "800", "text-align": "center", "margin-bottom": "calc(1.5 * var(--rem))" } }, Ei = { style: { "margin-bottom": "calc(1 * var(--rem))", width: "100%" } }, Ui = { class: "flex w-full flex-wrap justify-center gap-2" }, Bi = ["onClick"], Wi = {
+  style: { "margin-right": "0.5em" },
+  viewBox: "0 0 24 24",
+  width: "12",
+  height: "12",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  fill: "none",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "css-i6dzq1"
+};
+function zi(e, t, n, o, s, i) {
+  const f = g("CPriceInput"), v = g("CButton"), y = g("modal"), u = g("portal");
+  return a(), c("div", null, [
+    p(y, B({
+      adaptive: !0,
+      height: "auto",
+      width: "90%",
+      maxWidth: 420,
+      classes: "primary"
+    }, { name: s.modalName }), {
+      default: h(() => [
+        l("div", Li, [
+          l("div", Oi, m(e.$t("deduction.manualType", {
+            type: e.$t(`deduction.${n.houseWorkType}`)
+          })), 1),
+          l("div", Ei, [
+            p(f, {
+              modelValue: s.internalValue,
+              "onUpdate:modelValue": t[0] || (t[0] = (w) => s.internalValue = w),
+              modelModifiers: { number: !0 },
+              currency: "SEK",
+              placeholder: e.$t("enterThing", { thing: e.$t("deduction.deduction") }),
+              min: "0",
+              size: "medium",
+              "suffix-class": "text-gray-400"
+            }, {
+              suffix: h(() => [
+                _(m(e.$t("currency.SEK")), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "placeholder"])
+          ]),
+          l("div", Ui, [
+            (a(), c(A, null, S([
+              { v: 0.09, l: "9%" },
+              { v: 0.105, l: "10.5%" },
+              { v: 0.1455, l: "14.55%" },
+              { v: 0.194, l: "19.4%" },
+              { v: 0.21, l: "21%" },
+              { v: 0.485, l: "48.5%" },
+              { v: 0.5, l: "50%" }
+            ], (w) => l("div", {
+              key: w.l,
+              class: V([{
+                active: Math.round(n.total * w.v * 0.01) * 100 === s.internalValue
+              }, "deduction-button"]),
+              onClick: (k) => i.setDeduction(w.v)
+            }, m(w.l), 11, Bi)), 64))
+          ]),
+          p(v, {
+            type: "secondary",
+            wide: "",
+            class: "mt-8",
+            onClick: t[1] || (t[1] = () => {
+              e.houseWorkManualAmount = s.internalValue, e.$modal.hide(s.modalName);
+            })
+          }, {
+            default: h(() => [
+              _(m(e.$t("save")), 1)
+            ]),
+            _: 1
+          }),
+          p(v, {
+            type: "secondary",
+            pattern: "tertiary",
+            wide: "",
+            class: "mt-2",
+            onClick: t[2] || (t[2] = () => {
+              e.houseWorkManualAmount = null, e.$modal.hide(s.modalName);
+            })
+          }, {
+            default: h(() => [
+              _(m(e.$t("reset")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      _: 1
+    }, 16, ["name"]),
+    e.houseWorkManualAmount ? (a(), T(u, {
+      key: 0,
+      order: 2,
+      to: "document-nav-bottom"
+    }, {
+      default: h(() => [
+        l("div", {
+          class: "housework-manual-nav",
+          onClick: t[3] || (t[3] = (w) => e.$modal.show(s.modalName))
+        }, [
+          (a(), c("svg", Wi, t[4] || (t[4] = [
+            l("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, null, -1),
+            l("line", {
+              x1: "12",
+              y1: "9",
+              x2: "12",
+              y2: "13"
+            }, null, -1),
+            l("line", {
+              x1: "12",
+              y1: "17",
+              x2: "12.01",
+              y2: "17"
+            }, null, -1)
+          ]))),
+          _(" " + m(e.$t("deduction.manualType", { type: e.$t(`deduction.${n.houseWorkType}`) })) + " " + m(e.$t("using")), 1)
+        ])
+      ]),
+      _: 1
+    })) : b("", !0)
+  ]);
+}
+const Fi = /* @__PURE__ */ D(Ri, [["render", zi], ["__scopeId", "data-v-5de18d7b"]]), ji = {
+  name: "Pricing",
+  components: {
+    EditDeduction: Fi
+  },
+  props: {
+    _document: {
+      type: Object,
+      default: () => ({})
+    },
+    basePath: {
+      type: String,
+      default: "data.prices"
+    },
+    packageId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["input"],
+  data() {
+    return {
+      get: x
+    };
+  },
+  computed: {
+    vatType() {
+      return x(this, "_document.vatType");
+    },
+    priceArray() {
+      return [
+        {
+          label: this._document.$t("price.net"),
+          value: this.prices.subTotal
+        },
+        ...this.prices.useVat ? [
+          {
+            label: this._document.$t(`vat.${this.vatType}`),
+            value: this.prices.taxAmount
+          }
+        ] : [],
+        ...this.showHouseWork ? [
+          {
+            label: this._document.$t("deduction.type", {
+              type: this._document.$t(
+                `deduction.${this.prices.region.houseWorkType}${this.prices.region.houseWorkManualAmount === null ? "_percentage" : ""}`
+              )
+            }),
+            value: -this.prices.region.houseWorkAmount,
+            action: () => this.$refs.deduction.showModal()
+          }
+        ] : [],
+        ...this.prices.rounding.enabled && this.prices.rounding.show ? [
+          {
+            label: this._document.$t(
+              "chapters.pricingSummary.blocks.rounding"
+            ),
+            value: this.prices.roundingAmount
+          }
+        ] : [],
+        ...this.prices.helpers.discount ? [
+          {
+            label: this._document.$t("price.discount"),
+            value: -this.prices.helpers.discount
+          }
+        ] : [],
+        {
+          classList: "main",
+          label: this._document.$t("total"),
+          subLabel: this.prices.useVat ? this._document.$t("vat.incVat") : "",
+          prefix: this.prices.type === "approx" ? `${this._document.$t("approx")} ` : "",
+          value: this.prices.total
+        },
+        ...typeof this.prices.maxTotal == "number" ? [
+          {
+            classList: "main",
+            label: this._document.$t("price.maxPrice"),
+            subLabel: this.prices.useVat ? this._document.$t("vat.incVat") : "",
+            value: Math.round(this.prices.maxTotal * 1.25 || 0)
+            // ! Hard coded swedish VAT
+          }
+        ] : []
+      ].map((t) => ({
+        ...t,
+        value: N(t.value, {
+          showZero: !0,
+          decimals: 2,
+          currency: this.prices.currency
+        })
+      }));
+    },
+    prices() {
+      const { prices: e } = this._document.packageGroups.getPackageById(
+        this.packageId
+      );
+      return e;
+    },
+    showHouseWork() {
+      return !!x(this.prices, "region.houseWorkType", !1) || !!x(this.prices, "region.houseWorkManualAmount", !1);
+    }
+  }
+}, qi = { class: "price-bubble" }, Ni = { class: "flex w-full items-center justify-between" }, Hi = { class: "price-label" }, Gi = {
+  key: 0,
+  class: "pricing-sub-label"
+}, Ki = ["onClick"], Yi = { class: "price-value" };
+function Zi(e, t, n, o, s, i) {
+  const f = g("EditDeduction"), v = U("tooltip");
+  return a(), c("div", qi, [
+    l("div", Ni, [
+      i.showHouseWork ? (a(), T(f, {
+        key: 0,
+        ref: "deduction",
+        disabled: !s.get(i.prices, "region.houseWorkType", !1),
+        _document: n._document,
+        _value: {
+          houseWorkManualAmount: `${n.basePath}.data.prices.region.houseWorkManualAmount`
+        },
+        "house-work-type": i.prices.region.houseWorkType,
+        "house-work-amount": i.prices.region.houseWorkAmount,
+        total: i.prices.subTotal + i.prices.taxAmount,
+        onInput: t[0] || (t[0] = (y) => e.$emit("input", y))
+      }, null, 8, ["disabled", "_document", "_value", "house-work-type", "house-work-amount", "total"])) : b("", !0)
+    ]),
+    l("div", null, [
+      (a(!0), c(A, null, S(i.priceArray, (y, u) => (a(), c("div", {
+        key: u,
+        class: V([[y.classList || ""], "price-row flex w-full justify-between"])
+      }, [
+        l("div", Hi, [
+          _(m(y.label.capitalize()) + " ", 1),
+          y.subLabel ? (a(), c("span", Gi, m(y.subLabel), 1)) : b("", !0),
+          y.action ? R((a(), c("span", {
+            key: 1,
+            class: "pricing-action",
+            onClick: (w) => y.action ? y.action() : null
+          }, t[1] || (t[1] = [
+            l("svg", {
+              viewBox: "0 0 24 24",
+              width: "15",
+              height: "15",
+              stroke: "currentColor",
+              "stroke-width": "2.5",
+              fill: "none",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              l("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+              l("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+            ], -1)
+          ]), 8, Ki)), [
+            [v, e.$t("edit", { thing: e.$t("deduction.deduction") })]
+          ]) : b("", !0)
+        ]),
+        l("div", Yi, m(y.prefix) + " " + m(y.value), 1)
+      ], 2))), 128))
+    ])
+  ]);
+}
+const Ji = /* @__PURE__ */ D(ji, [["render", Zi], ["__scopeId", "data-v-90384cd6"]]), Xi = {
+  name: "PackageItemEdit",
+  i18nOptions: {
+    namespaces: "PackageItemEdit",
+    messages: {
+      en: {
+        base: "Default package",
+        single: "Single option",
+        option: "Selectable package",
+        namePlaceholder: "Package name",
+        textPlaceholder: "Package description",
+        selected: "Pre selected",
+        addButton: "Product / service",
+        advancedButtonTooltip: "Open advanced settings"
+      },
+      sv: {
+        base: "Grundpaket",
+        single: "Ett alternativ",
+        option: "Valbart alternativ",
+        namePlaceholder: "Paketets namn",
+        textPlaceholder: "Beskrivning av paketet",
+        selected: "Förvald",
+        addButton: "Vara / tjänst",
+        advancedButtonTooltip: "Öppna avancerat läge"
+      }
+    }
+  },
+  components: {
+    ArticleList: Ti,
+    PriceFormAlternatives: Mi,
+    MaxTotalInput: xi,
+    Pricing: Ji,
+    TextEditor: Xe,
+    CDropdown: K,
+    CDropdownItem: Y
+  },
+  emits: [
+    "move",
+    "input",
+    "remove",
+    "update:isSelectedDefault",
+    "update:priceType",
+    "update:setPricesIncVat",
+    "update:currency",
+    "remove-package"
+  ],
+  mixins: [
+    q([
+      "isSelectedDefault",
+      "isSelected",
+      "name",
+      "description",
+      "priceType",
+      "maxTotal",
+      "currency"
+    ])
+  ],
+  props: {
+    packageId: {
+      type: String,
+      required: !0
+    },
+    type: {
+      type: String,
+      required: !0
+    },
+    activeHouseWorkType: {
+      type: String,
+      default: null
+    },
+    toggable: {
+      type: Boolean,
+      default: !0
+    },
+    moveOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      isFocus: !1,
+      isHover: !1
+    };
+  },
+  computed: {
+    ...E({
+      newArticle: "articles/getNewArticle"
+    }),
+    // keep info on original article array indices for updates
+    articles() {
+      return this._document.allArticles;
+    },
+    mappedPackageArticles() {
+      return (this.articles || []).map((e, t) => ({ ...e, i: t })).filter(({ packageId: e }) => e === this.packageId);
+    },
+    internalDescription: {
+      get() {
+        return qe(
+          this.description,
+          this._document.textTemplateMap,
+          this._document._doc
+        );
+      },
+      set(e) {
+        this.description = Ne(e);
+      }
+    }
+  },
+  watch: {
+    priceType(e, t) {
+      if (!(e && e.startsWith("open") && t && t.startsWith("open"))) {
+        if (e) {
+          const n = e.startsWith("open") ? "openAcc" : e;
+          this.mappedPackageArticles.forEach((o, s) => {
+            this.onArticleInput({
+              index: s,
+              value: {
+                ...o,
+                priceType: n,
+                ...n === "openAcc" && { quantity: 1 }
+              }
+            });
+          });
+        }
+      }
+      e !== "openAccMaxPrice" && (this.maxTotal = null);
+    }
+  },
+  methods: {
+    onRemove() {
+      this.$emit("remove-package");
+    },
+    // Article Methods
+    createEmptyArticle() {
+      const e = this.newArticle({
+        priceType: this.priceType.startsWith("open") ? "openAcc" : this.priceType,
+        packageId: this.packageId,
+        currency: this.currency
+      });
+      this.$emit("input", {
+        key: "articles",
+        value: [...this.articles, e]
+      });
+    },
+    onArticleInput({ index: e, value: t }) {
+      const { i: n } = this.mappedPackageArticles[e], o = He(t, [
+        "allowRot",
+        "allowRut",
+        "isIncVat",
+        "rootPriceType",
+        "hideControls"
+      ]);
+      o.currency = this.currency, this.$emit("input", { key: `articles[${[n]}]`, value: o });
+    },
+    onArticleAdd({ openModal: e = !1 } = {}) {
+      this.createEmptyArticle(), e ? this.$refs.articleList.openLastArticle() : this.$refs.articleList.focusLastArticle();
+    },
+    onInsert({ index: e, value: t }) {
+      const n = Ge(this.mappedPackageArticles).add(
+        { ...t, packageId: this.packageId },
+        e
+      );
+      this.$emit("input", {
+        key: "articles",
+        value: [
+          ...this.articles.filter(
+            ({ packageId: o }) => o !== this.packageId
+          ),
+          ...n
+        ]
+      });
+    },
+    onArticleRemove(e) {
+      const { i: t } = this.mappedPackageArticles[e];
+      this.$emit("remove", { key: `articles[${[t]}]` });
+    },
+    onArticleMove(e) {
+      this.$emit("input", {
+        key: "articles",
+        value: [
+          ...this.articles.filter(
+            ({ packageId: t }) => t !== this.packageId
+          ),
+          ...e
+        ]
+      });
+    }
+  }
+}, Qi = { class: "min-h-0 rounded-md border border-gray-200 bg-white text-black" }, en = { class: "flex w-full items-center justify-between bg-gray-100 py-1 pl-4 pr-1 text-sm font-medium text-gray-600" }, tn = { class: "p-4" }, nn = { class: "mb-0.5 flex items-center" }, sn = ["id", "placeholder"], an = { class: "mt-2 flex gap-2" };
+function on(e, t, n, o, s, i) {
+  const f = g("CButton"), v = g("CDropdownItem"), y = g("CDropdown"), u = g("TextEditor"), w = g("MaxTotalInput"), k = g("PriceFormAlternatives"), C = g("ArticleList"), d = g("CIcon"), I = g("Pricing"), r = U("tooltip"), P = U("click-outside");
+  return a(), c("div", Qi, [
+    l("div", en, [
+      l("div", null, m(n.type === "single" ? e.$t("single") : n.type === "radio" || n.toggable ? e.$t("option") : e.$t("base")), 1),
+      n.type !== "single" ? (a(), T(y, {
+        key: 0,
+        class: "ml-4"
+      }, {
+        trigger: h(() => [
+          p(f, {
+            size: "small",
+            type: "text",
+            pattern: "secondary",
+            class: "is-thinner opacity-70"
+          }, {
+            default: h(() => [
+              _(m(e.$t("_common:change")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        default: h(() => [
+          n.toggable ? (a(), c(A, { key: 0 }, [
+            p(v, {
+              value: e.isSelectedDefault,
+              toggle: !0,
+              "close-on-click": !1,
+              onClick: t[0] || (t[0] = ($) => e.$emit("update:isSelectedDefault", !e.isSelectedDefault))
+            }, {
+              default: h(() => [
+                _(m(e.$t("selected")), 1)
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            p(v, { separator: "" })
+          ], 64)) : b("", !0),
+          p(v, {
+            "icon-left": "arrow-up",
+            disabled: !n.moveOptions.up,
+            onClick: t[1] || (t[1] = ($) => e.$emit("move", -1))
+          }, {
+            default: h(() => [
+              _(m(e.$t("_common:move", { thing: e.$t("_common:up") })), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          p(v, {
+            "icon-left": "arrow-down",
+            disabled: !n.moveOptions.down,
+            onClick: t[2] || (t[2] = ($) => e.$emit("move", 1))
+          }, {
+            default: h(() => [
+              _(m(e.$t("_common:move", { thing: e.$t("_common:down") })), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          p(v, {
+            "icon-props": {
+              stroke: "red"
+            },
+            "icon-left": "trash",
+            onClick: i.onRemove
+          }, {
+            default: h(() => [
+              _(m(e.$t("_common:remove")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        _: 1
+      })) : b("", !0)
+    ]),
+    l("div", tn, [
+      l("div", nn, [
+        R(l("input", {
+          id: `package-name-${n.packageId}`,
+          "onUpdate:modelValue": t[3] || (t[3] = ($) => e.name = $),
+          placeholder: e.$t("namePlaceholder"),
+          class: "block w-full rounded-lg p-0 text-xl font-bold leading-loose placeholder:text-gray-400",
+          onKeyup: t[4] || (t[4] = F(($) => e.$refs.editor.focus(), ["enter"]))
+        }, null, 40, sn), [
+          [Ke, e.name]
+        ])
+      ]),
+      p(u, {
+        ref: "editor",
+        modelValue: i.internalDescription,
+        "onUpdate:modelValue": t[5] || (t[5] = ($) => i.internalDescription = $),
+        placeholder: e.$t("textPlaceholder"),
+        mentions: () => e._document.textTemplateItems,
+        snippets: !0,
+        class: "text-editor mb-4"
+      }, null, 8, ["modelValue", "placeholder", "mentions"]),
+      R((a(), c("div", {
+        onMouseoverPassive: t[15] || (t[15] = ($) => s.isHover = !0),
+        onMouseleavePassive: t[16] || (t[16] = ($) => s.isHover = !1)
+      }, [
+        e.priceType === "openAccMaxPrice" ? (a(), T(w, {
+          key: 0,
+          modelValue: e.maxTotal,
+          "onUpdate:modelValue": t[6] || (t[6] = ($) => e.maxTotal = $),
+          currency: e.currency,
+          "vat-type": e._document.vatType,
+          class: "mb-4"
+        }, null, 8, ["modelValue", "currency", "vat-type"])) : b("", !0),
+        p(k, {
+          modelValue: e.priceType,
+          "onUpdate:modelValue": [
+            t[7] || (t[7] = ($) => e.priceType = $),
+            t[8] || (t[8] = ($) => e.$emit("update:priceType", $))
+          ]
+        }, null, 8, ["modelValue"]),
+        p(C, {
+          ref: "articleList",
+          _document: e._document,
+          articles: i.mappedPackageArticles,
+          "root-price-type": e.priceType,
+          "active-house-work-type": n.activeHouseWorkType,
+          "hide-controls": !s.isFocus && !s.isHover,
+          onInput: i.onArticleInput,
+          "onUpdate:setPricesIncVat": t[9] || (t[9] = ($) => e.$emit("update:setPricesIncVat", $)),
+          "onUpdate:currency": t[10] || (t[10] = ($) => e.$emit("update:currency", $)),
+          onMove: i.onArticleMove,
+          onRemove: i.onArticleRemove,
+          onAdd: i.onArticleAdd,
+          onFocus: t[11] || (t[11] = ($) => s.isFocus = !0),
+          onInsert: i.onInsert
+        }, null, 8, ["_document", "articles", "root-price-type", "active-house-work-type", "hide-controls", "onInput", "onMove", "onRemove", "onAdd", "onInsert"]),
+        l("div", an, [
+          l("div", {
+            class: "cursor-pointer rounded-md border border-gray-200 bg-gray-100 p-2.5 text-center text-sm font-medium leading-none text-gray-500 transition-colors hover:border-gray-400 hover:bg-gray-500 hover:text-white",
+            onClick: t[12] || (t[12] = ($) => i.onArticleAdd())
+          }, [
+            p(d, {
+              type: "plus",
+              size: "16",
+              "stroke-width": "3",
+              class: "mr-1"
+            }),
+            _(" " + m(e.$t("addButton")), 1)
+          ]),
+          R((a(), c("div", {
+            class: "cursor-pointer rounded-md border border-gray-200 bg-gray-100 p-2.5 text-center text-sm font-medium leading-none text-gray-500 transition-colors hover:border-gray-400 hover:bg-gray-500 hover:text-white",
+            onClick: t[13] || (t[13] = ($) => i.onArticleAdd({ openModal: !0 }))
+          }, [
+            p(d, {
+              type: "zap",
+              size: "16",
+              "stroke-width": "2.5"
+            })
+          ])), [
+            [r, {
+              content: e.$t("advancedButtonTooltip"),
+              distance: 6
+            }]
+          ])
+        ]),
+        p(I, {
+          _document: e._document,
+          "base-path": `${e._value.basePath}`,
+          "package-id": n.packageId,
+          onInput: t[14] || (t[14] = ($) => e.$emit("input", $))
+        }, null, 8, ["_document", "base-path", "package-id"])
+      ], 32)), [
+        [
+          P,
+          () => {
+            s.isFocus = !1, s.isHover = !1;
+          }
+        ]
+      ])
+    ])
+  ]);
+}
+const rn = /* @__PURE__ */ D(Xi, [["render", on], ["__scopeId", "data-v-b03c63bf"]]), ln = (e) => (e || []).slice(0, 1).map((t) => ({
+  ...t,
+  isSelected: !0,
+  isSelectedDefault: !0,
+  toggable: !1
+})), cn = (e) => {
+  const t = x(e, "0.data.prices.type") || "fixed";
+  return (e || []).map((n, o) => ({
+    ...n,
+    toggable: !0,
+    ...o === 0 ? {
+      isSelected: !0,
+      isSelectedDefault: !0,
+      toggable: !1
+    } : null,
+    data: {
+      ...n.data,
+      prices: {
+        ...n.data ? n.data.prices : null,
+        type: t
+      }
+    }
+  }));
+}, dn = (e = []) => {
+  let t = !1;
+  return e.map((n) => {
+    const o = {
+      ...n,
+      // if any earlier pkg is selected, deselect pkg, otherwise keep as is
+      ...t ? {
+        isSelected: !1,
+        isSelectedDefault: !1
+      } : null,
+      toggable: !0
+    };
+    return (o.isSelected || o.isSelectedDefault) && (t = !0), o;
+  }, []);
+};
+function un(e, ...t) {
+  if (e === "single") return ln(...t);
+  if (e === "checkbox") return cn(...t);
+  if (e === "radio") return dn(...t);
+  throw new Error(`Package filter type '${e}' is not implemented`);
+}
+const pn = {
+  name: "PackageGroupEdit",
+  i18nOptions: {
+    namespaces: "PackageGroupEdit",
+    messages: {
+      en: {
+        base: "Default package",
+        add: "Add package",
+        basePlaceholder: "Add a default package that's always included.",
+        selectablePlaceholder: "Add packages your client can choose between.",
+        hideGroupPrice: "Hide summary for block",
+        reset: {
+          message: "Package type changed",
+          button: "Revert"
+        },
+        error: {
+          selectType: "Choose price type",
+          minOnePackage: "Add at least 1 package"
+        }
+      },
+      sv: {
+        base: "Grundpaket",
+        add: "Valbart alternativ",
+        basePlaceholder: "Lägg till ett baspaket som alltid ingår.",
+        selectablePlaceholder: "Lägg till valbara paket som din kund kan välja mellan.",
+        hideGroupPrice: "Dölj summering för block",
+        reset: {
+          message: "Pakettyp har ändrats",
+          button: "Återställ"
+        },
+        error: {
+          selectType: "Välj ett prisförslag",
+          minOnePackage: "Lägg till minst 1 paket"
+        }
+      }
+    }
+  },
+  components: {
+    ErrorCallout: pe,
+    PackageItem: rn,
+    PackageGroupSelect: kt,
+    CCallout: $e,
+    CDropdown: K,
+    CDropdownItem: Y
+  },
+  mixins: [
+    q([
+      "type",
+      // 'title',
+      "packages",
+      "articles",
+      "hideGroupPrice"
+    ])
+  ],
+  props: {
+    persistedGroup: {
+      type: Object,
+      default: () => ({})
+    },
+    validator: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["input", "add", "remove", "update:persisted-group"],
+  data() {
+    return {
+      setPricesDirty: !1
+    };
+  },
+  computed: {
+    ...E({
+      getSetting: ["settings/getCompanySetting"],
+      defaultCurrency: "settings/defaultCurrency",
+      newArticle: "articles/getNewArticle"
+    }),
+    internalPackages() {
+      return this.packages.map((e, t) => ({ ...e, index: t }));
+    },
+    topRowPackages() {
+      return this.type === "checkbox" ? this.internalPackages.filter(({ toggable: e }) => e === !1) : this.internalPackages;
+    },
+    bottomRowPackages() {
+      return this.type === "checkbox" ? this.internalPackages.filter(({ toggable: e }) => e === !0) : [];
+    },
+    group() {
+      return this._document.packageGroups.getPackageGroupUniqId(
+        this._value.groupId
+      ) || {};
+    },
+    houseWorkType() {
+      return x(this.group, "prices.region.houseWorkType", null);
+    },
+    isIndivid() {
+      return x(this, "_document.prices.helpers.isIndivid", !0);
+    },
+    setPricesIncVat() {
+      return this._document.setPricesIncVat;
+    },
+    defaultVatInput() {
+      return this.isIndivid ? this.getSetting("priceInputDefault") : this.getSetting("priceInputCompany");
+    },
+    currency() {
+      return this._document.currency;
+    }
+  },
+  watch: {
+    isIndivid() {
+      this.setPricesDirty || this.setPricesIncVatAsDefault();
+    }
+  },
+  created() {
+    this.setPricesIncVat === null && this.setPricesIncVatAsDefault({ ignoreChanges: !0 });
+  },
+  methods: {
+    ...z({
+      showMessage: L.SHOW_MESSAGE
+    }),
+    setPricesIncVatAsDefault(e = {}) {
+      this.$emit("input", {
+        key: "data.formSettings.setPricesIncVat",
+        value: this.defaultVatInput === "incVat",
+        options: e
+      });
+    },
+    onSelectType(e) {
+      this.type = e;
+      const { type: t, packages: n } = this.persistedGroup || {};
+      if (t && n && n.length)
+        this.addPersistedGroup(e), e !== t && this.showMessage({
+          type: "info",
+          message: this.$t("reset.message"),
+          actions: {
+            undo: {
+              text: this.$t("reset.button"),
+              callback: () => {
+                this.addPersistedGroup(t), this.type = t;
+              }
+            }
+          }
+        });
+      else {
+        if (e === "checkbox") return;
+        this.addPackage({});
+      }
+    },
+    addPersistedGroup(e) {
+      if (!this.persistedGroup || !this.persistedGroup.type) return;
+      let { packages: t, articles: n } = this.persistedGroup;
+      if (!t.length) return;
+      if (e !== this.persistedGroup.type && (t = un(e, t)), e === "single" && n.length) {
+        const [{ packageId: s }] = t;
+        n = n.filter((i) => i.packageId === s);
+      }
+      const o = ct(
+        [...this._document.allArticles || [], ...n || []],
+        (s) => s._uniqueId
+      );
+      this.$emit("input", { key: "articles", value: o }), this.$emit("input", { key: `${[this._value.packages]}`, value: t });
+    },
+    addPackage(e = {}) {
+      const t = Ye(), n = this.type === "checkbox" && this.packages.length ? this.packages[0].data.prices.type : "fixed", o = this.currency || this.defaultCurrency, s = {
+        isSelected: this.type === "single",
+        isSelectedDefault: this.type === "single",
+        toggable: !0,
+        packageId: t,
+        data: {
+          name: "",
+          description: "",
+          prices: {
+            type: n,
+            currency: o
+          }
+        },
+        ...e
+      };
+      this.$emit("input", { key: this._value.packages, value: s }), this.$emit("input", {
+        key: "articles",
+        value: this.newArticle({
+          priceType: n.startsWith("open") ? "openAcc" : n,
+          packageId: t,
+          currency: o
+        })
+      }), this.$nextTick(() => {
+        const i = document.getElementById(`package-name-${t}`);
+        i && i.focus();
+      });
+    },
+    onInputPriceType(e, t) {
+      this.type === "checkbox" && this.packages.forEach((n, o) => {
+        o !== e && this.$emit("input", {
+          key: `${[this._value.packages]}[${[o]}].data.prices.type`,
+          value: t
+        });
+      });
+    },
+    onInputSelectedDefault(e, t) {
+      this.type === "radio" && !t || (this.type === "radio" && t && this.packages.forEach((n, o) => {
+        o !== e && (this.$emit("input", {
+          key: `${[this._value.packages]}[${[o]}].isSelectedDefault`,
+          value: !1
+        }), this.$emit("input", {
+          key: `${[this._value.packages]}[${[o]}].isSelected`,
+          value: !1
+        }));
+      }), this.$emit("input", {
+        key: `${[this._value.packages]}[${[e]}].isSelectedDefault`,
+        value: t
+      }), this.$emit("input", {
+        key: `${[this._value.packages]}[${[e]}].isSelected`,
+        value: t
+      }));
+    },
+    removeByIndex(e) {
+      const { packageId: t } = this.packages[e], n = this._document.allArticles.filter(
+        ({ packageId: o }) => o !== t
+      );
+      this.$emit("input", { key: "articles", value: n }), this.$emit("remove", { key: `${[this._value.packages]}[${[e]}]` });
+    },
+    async onResetType() {
+      const e = this.packages.map((o) => o.packageId), [t, n] = this._document.allArticles.reduce(
+        ([o, s], i) => e.includes(i.packageId) ? [[...o, i], s] : [o, [...s, i]],
+        [[], []]
+      );
+      this.$emit("update:persisted-group", {
+        type: this.type,
+        packages: this.packages,
+        articles: t
+      }), this.$emit("input", { key: "articles", value: n }), this.$emit("input", { key: `${[this._value.packages]}`, value: [] }), this.type = "";
+    },
+    moveOptions(e, t) {
+      const n = { up: !1, down: !1 };
+      return e > 0 && (n.up = !0), e < t - 1 && (n.down = !0), n;
+    },
+    moveItem(e, t) {
+      const n = he(this.packages, e, t);
+      this.$emit("input", { key: this._value.packages, value: n });
+    }
+  }
+}, mn = { class: "package-group-root font-inter" }, hn = { key: 0 }, gn = { style: { position: "absolute", right: "0", top: "-10px", transform: "translateY(-100%)", "z-index": "2" } }, vn = { class: "pb-4" }, fn = {
+  key: 2,
+  style: { width: "calc(5 * var(--rem))", height: "1px", "margin-left": "calc(50% - calc(2.5 * var(--rem)))", "border-top": "2px dashed hsl(0, 0%, 85%)" }
+}, yn = {
+  key: 4,
+  class: "flex w-full flex-col items-center justify-center"
+}, kn = { style: { width: "100%" } }, bn = {
+  key: 0,
+  class: "package-placeholder bg-gray-100",
+  style: { color: "hsl(0, 0%, 24%)", "font-weight": "500" }
+}, wn = {
+  style: { "vertical-align": "text-bottom", "margin-right": "3px" },
+  width: "16",
+  height: "16",
+  viewBox: "0 0 18 14",
+  xmlns: "http://www.w3.org/2000/svg"
+}, In = { class: "flex w-full" };
+function $n(e, t, n, o, s, i) {
+  const f = g("PackageGroupSelect"), v = g("ErrorCallout"), y = g("CButton"), u = g("CDropdownItem"), w = g("CDropdown"), k = g("CCallout"), C = g("PackageItem");
+  return a(), c("div", mn, [
+    e.type ? (a(), c(A, { key: 1 }, [
+      l("div", gn, [
+        p(w, null, {
+          trigger: h(() => [
+            p(y, {
+              type: "none",
+              size: "normal",
+              pattern: "secondary",
+              icon: "more-horizontal",
+              circle: ""
+            })
+          ]),
+          default: h(() => [
+            p(u, { onClick: i.onResetType }, {
+              default: h(() => [
+                _(m(e.$t("_common:change", {
+                  thing: e.$t("_common:price.proposal").toLowerCase()
+                })), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            p(u, {
+              value: !!e.hideGroupPrice,
+              "close-on-click": !1,
+              toggle: "",
+              onInput: t[1] || (t[1] = (d) => e.hideGroupPrice = d)
+            }, {
+              default: h(() => [
+                _(m(e.$t("hideGroupPrice")), 1)
+              ]),
+              _: 1
+            }, 8, ["value"])
+          ]),
+          _: 1
+        })
+      ]),
+      e.type === "checkbox" && !i.internalPackages.find((d) => d.toggable === !1) ? (a(), T(k, {
+        key: 0,
+        title: e.$t("base"),
+        class: "w-full"
+      }, {
+        default: h(() => [
+          l("div", vn, m(e.$t("basePlaceholder")), 1),
+          p(y, {
+            type: "secondary",
+            size: "small",
+            style: { "font-weight": "600" },
+            onClick: t[2] || (t[2] = (d) => i.addPackage({
+              isSelected: !0,
+              isSelectedDefault: !0,
+              toggable: !1
+            }))
+          }, {
+            default: h(() => [
+              _(m(e.$t("_common:add", { thing: e.$t("base").toLowerCase() })), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["title"])) : (a(), T(oe, {
+        key: 1,
+        name: "section-list",
+        tag: "div"
+      }, {
+        default: h(() => [
+          (a(!0), c(A, null, S(i.topRowPackages, (d, I) => (a(), c("div", {
+            key: d.packageId,
+            class: "section-item pb-4"
+          }, [
+            p(C, {
+              _document: e._document,
+              _value: {
+                isSelectedDefault: `${e._value.packages}[${d.index}].isSelectedDefault`,
+                isSelected: `${e._value.packages}[${d.index}].isSelected`,
+                name: `${e._value.packages}[${d.index}].data.name`,
+                description: `${e._value.packages}[${d.index}].data.description`,
+                priceType: `${e._value.packages}[${d.index}].data.prices.type`,
+                maxTotal: `${e._value.packages}[${d.index}].data.prices.maxTotal`,
+                basePath: `${e._value.packages}[${d.index}]`,
+                currency: `${e._value.packages}[${d.index}].data.prices.currency`
+              },
+              type: e.type,
+              "active-house-work-type": i.houseWorkType,
+              toggable: d.toggable,
+              "package-id": d.packageId,
+              "move-options": i.moveOptions(I, i.topRowPackages.length),
+              onInput: t[3] || (t[3] = (r) => e.$emit("input", r)),
+              onAdd: t[4] || (t[4] = (r) => e.$emit("add", r)),
+              "onUpdate:isSelectedDefault": (r) => i.onInputSelectedDefault(d.index, r),
+              "onUpdate:priceType": (r) => i.onInputPriceType(d.index, r),
+              "onUpdate:setPricesIncVat": t[5] || (t[5] = (r) => {
+                e.$emit("input", {
+                  key: "data.formSettings.setPricesIncVat",
+                  value: r
+                }), s.setPricesDirty = !0;
+              }),
+              "onUpdate:currency": t[6] || (t[6] = (r) => e.$emit("input", { key: "currency", value: r })),
+              onRemove: t[7] || (t[7] = (r) => e.$emit("remove", r)),
+              onRemovePackage: (r) => i.removeByIndex(d.index),
+              onMove: (r) => i.moveItem(d.index, i.topRowPackages[I + r].index)
+            }, null, 8, ["_document", "_value", "type", "active-house-work-type", "toggable", "package-id", "move-options", "onUpdate:isSelectedDefault", "onUpdate:priceType", "onRemovePackage", "onMove"])
+          ]))), 128))
+        ]),
+        _: 1
+      })),
+      e.type === "checkbox" && i.topRowPackages.length && i.bottomRowPackages.length ? (a(), c("div", fn)) : b("", !0),
+      e.type === "checkbox" ? (a(), T(oe, {
+        key: 3,
+        name: "section-list",
+        tag: "div",
+        style: { "margin-bottom": "calc(1 * var(--rem))" }
+      }, {
+        default: h(() => [
+          (a(!0), c(A, null, S(i.bottomRowPackages, (d, I) => (a(), c("div", {
+            key: d.packageId,
+            class: "section-item",
+            style: { padding: "calc(1 * var(--rem)) 0" }
+          }, [
+            p(C, {
+              _document: e._document,
+              _value: {
+                isSelectedDefault: `${e._value.packages}[${d.index}].isSelectedDefault`,
+                isSelected: `${e._value.packages}[${d.index}].isSelected`,
+                name: `${e._value.packages}[${d.index}].data.name`,
+                description: `${e._value.packages}[${d.index}].data.description`,
+                priceType: `${e._value.packages}[${d.index}].data.prices.type`,
+                maxTotal: `${e._value.packages}[${d.index}].data.prices.maxTotal`,
+                basePath: `${e._value.packages}[${d.index}]`,
+                currency: `${e._value.packages}[${d.index}].data.prices.currency`
+              },
+              type: e.type,
+              "active-house-work-type": i.houseWorkType,
+              "package-id": d.packageId,
+              "move-options": i.moveOptions(I, i.bottomRowPackages.length),
+              class: "package-item",
+              onInput: t[8] || (t[8] = (r) => e.$emit("input", r)),
+              onAdd: t[9] || (t[9] = (r) => e.$emit("add", r)),
+              "onUpdate:isSelectedDefault": (r) => i.onInputSelectedDefault(d.index, r),
+              "onUpdate:priceType": (r) => i.onInputPriceType(d.index, r),
+              "onUpdate:setPricesIncVat": t[10] || (t[10] = (r) => {
+                e.$emit("input", {
+                  key: "data.formSettings.setPricesIncVat",
+                  value: r
+                }), s.setPricesDirty = !0;
+              }),
+              onRemove: t[11] || (t[11] = (r) => e.$emit("remove", r)),
+              onRemovePackage: (r) => i.removeByIndex(d.index),
+              onMove: (r) => i.moveItem(d.index, i.bottomRowPackages[I + r].index)
+            }, null, 8, ["_document", "_value", "type", "active-house-work-type", "package-id", "move-options", "onUpdate:isSelectedDefault", "onUpdate:priceType", "onRemovePackage", "onMove"])
+          ]))), 128))
+        ]),
+        _: 1
+      })) : b("", !0),
+      e.type !== "single" || !e.packages.length ? (a(), c("div", yn, [
+        l("div", kn, [
+          e.type === "radio" && !e.packages.length ? (a(), c("div", bn, [
+            (a(), c("svg", wn, t[13] || (t[13] = [
+              l("path", {
+                d: "M8.03.22c.3.3.3.77 0 1.06L5.56 3.75h6.88L9.97 1.28A.75.75 0 1111.03.21l3.53 3.54h2.69a.75.75 0 010 1.5h-.12l-1.17 6.4a2.25 2.25 0 01-2.21 1.85h-9.5a2.25 2.25 0 01-2.21-1.84L.87 5.26H.75a.75.75 0 010-1.5h2.69L6.97.21c.3-.3.77-.3 1.06 0zM2.4 5.25L3.5 11.4c.07.35.38.61.74.61h9.5c.36 0 .67-.26.74-.61l1.11-6.14H2.4zm3.1 1.5c.41-.06.8.22.86.63l.38 2.25a.75.75 0 11-1.48.24l-.37-2.25c-.07-.4.2-.8.61-.86zm7 0c.4.08.68.47.61.87l-.37 2.25a.75.75 0 11-1.48-.24l.38-2.25a.75.75 0 01.86-.62zm-3.5 0c.41 0 .75.34.75.75v2.25a.75.75 0 01-1.5 0V7.5c0-.41.34-.75.75-.75z",
+                fill: "#000",
+                "fill-rule": "evenodd"
+              }, null, -1)
+            ]))),
+            _(" " + m(e.$t("selectablePlaceholder")), 1)
+          ])) : b("", !0)
+        ]),
+        n.validator.$invalid && n.validator.$dirty ? (a(), T(v, {
+          key: 0,
+          message: e.$t("error.minOnePackage"),
+          style: { margin: "calc(1 * var(--rem)) 0 calc(1 * var(--rem)) 0" }
+        }, null, 8, ["message"])) : b("", !0),
+        l("div", In, [
+          p(y, {
+            type: "secondary",
+            outlined: "",
+            "icon-left": "plus",
+            style: { "border-color": "hsl(0, 0%, 82%)" },
+            onClick: t[12] || (t[12] = (d) => i.addPackage())
+          }, {
+            default: h(() => [
+              _(m(e.$t("add")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ])) : b("", !0)
+    ], 64)) : (a(), c("div", hn, [
+      p(f, {
+        onInput: t[0] || (t[0] = (d) => i.onSelectType(d))
+      }),
+      n.validator.$invalid && n.validator.$dirty ? (a(), T(v, {
+        key: 0,
+        message: e.$t("error.selectType"),
+        style: { "padding-bottom": "calc(1.5 * var(--rem))" }
+      }, null, 8, ["message"])) : b("", !0)
+    ]))
+  ]);
+}
+const Un = /* @__PURE__ */ D(pn, [["render", $n], ["__scopeId", "data-v-03549668"]]);
+export {
+  Un as default
+};