@cling-se/widget 0.17.0 → 1.0.0-beta.2

package/dist/Index-DE8aenDB.js

@@ -0,0 +1,3452 @@
+import { m as F } from "./mapFormMixin-D3BihYWW.js";
+import { C as ge } from "./CCallout-Cy2eeIYd.js";
+import { C as q, a as G, w as ve } from "./CDropdownItem-Dmq5gYzA.js";
+import { E as se } from "./ErrorCallout-B_ygH33E.js";
+import { dD as fe, dE as ne, dF as ye, dG as ke, dH as be, dI as we, a1 as Ie, dJ as $e, _ as S, b as v, o as a, d as c, s as l, v as m, n as x, F as A, k as V, l as Z, f as w, e as u, m as R, a as B, g as M, A as j, w as g, Z as E, af as W, S as Q, ao as N, dC as _e, dK as X, aL as Te, a6 as ee, d7 as U, aK as Ae, dL as Ce, d8 as Pe, a3 as O, E as D, c as T, B as I, dM as xe, dN as Ve, dO as ae, U as Se, bE as oe, G as De, aa as P, aj as Me, I as Re, T as Le, aH as z, ab as Oe, ad as Ee, dP as Ue, a9 as Be, cU as We, aG as ze, bp as te } from "./main-Cb-nyil1.js";
+import { u as Fe, a as je } from "./DocumentLayout-CKSi42ev.js";
+import { T as Ne } from "./DocTextEditor-Dm-cTZpA.js";
+import { _ as He, m as qe } from "./Sortable.vue_vue_type_script_setup_true_lang-CzMbr8AX.js";
+import { o as le } from "./omit--YYr41Xp.js";
+import { C as K } from "./CPriceInput-d1yjuMQr.js";
+import { u as re } from "./index-kp-GC5I0.js";
+import { S as Ge } from "./SearchApi-B7lXgUY6.js";
+import { b as Ke } from "./index-BjiGCJPI.js";
+import { _ as ce } from "./CFormField.vue_vue_type_script_setup_true_lang-D_U9coAY.js";
+const Ye = [
+  "unit",
+  "m2",
+  "hour",
+  "m",
+  "m3",
+  "day",
+  "kg",
+  "litre",
+  "km",
+  "mile",
+  "month",
+  "week",
+  "ton",
+  "year",
+  "kWh"
+];
+function Ze() {
+}
+var Je = Ze, J = fe, Qe = Je, Xe = ne, et = 1 / 0, tt = J && 1 / Xe(new J([, -0]))[1] == et ? function(e) {
+  return new J(e);
+} : Qe, it = tt, st = ye, nt = ke, at = be, ot = we, lt = it, rt = ne, ct = 200;
+function dt(e, t, s) {
+  var o = -1, n = nt, i = e.length, y = !0, h = [], f = h;
+  if (s)
+    y = !1, n = at;
+  else if (i >= ct) {
+    var p = t ? null : lt(e);
+    if (p)
+      return rt(p);
+    y = !1, n = ot, f = new st();
+  } else
+    f = t ? [] : h;
+  e:
+    for (; ++o < i; ) {
+      var b = e[o], k = t ? t(b) : b;
+      if (b = s || b !== 0 ? b : 0, y && k === k) {
+        for (var C = f.length; C--; )
+          if (f[C] === k)
+            continue e;
+        t && f.push(k), h.push(b);
+      } else n(f, k, s) || (f !== h && f.push(k), h.push(b));
+    }
+  return h;
+}
+var ut = dt, pt = $e, mt = ut;
+function ht(e, t) {
+  return e && e.length ? mt(e, pt(t)) : [];
+}
+var gt = ht;
+const vt = /* @__PURE__ */ Ie(gt), ft = {
+  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: Fe() };
+  },
+  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")
+        }
+      ]
+    };
+  }
+}, yt = {
+  class: "font-inter",
+  style: { padding: "calc(2 * var(--rem)) 0 calc(1 * var(--rem)) 0", color: "#111" }
+}, kt = { style: { "font-size": "18px", "font-weight": "600", "text-align": "center", "margin-bottom": "calc(1.5 * var(--rem))" } }, bt = ["onClick"], wt = { class: "package-group-option__illustration" }, It = {
+  key: 0,
+  class: "package-group-option__illustration-card animate"
+}, $t = { class: "package-group-option__title" }, _t = ["innerHTML"];
+function Tt(e, t, s, o, n, i) {
+  const y = v("CIcon");
+  return a(), c("div", yt, [
+    l("div", kt, m(e.$t("title")), 1),
+    l("div", null, [
+      l("div", {
+        class: x([{ "is-700-or-less": o.docWidth <= 700 }, "options"])
+      }, [
+        (a(!0), c(A, null, V(n.options, (h, f) => (a(), c("div", {
+          key: f,
+          style: Z({ backgroundColor: h.background }),
+          class: "package-group-option",
+          onClick: (p) => e.$emit("input", h.value)
+        }, [
+          l("div", wt, [
+            h.value === "single" ? (a(), c("div", It, 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)
+            ]))) : w("", !0),
+            h.value === "radio" ? (a(), c(A, { key: 1 }, V(3, (p) => l("div", {
+              key: p,
+              class: x([{ animate: p === 2 }, "package-group-option__illustration-card"])
+            }, [
+              l("div", {
+                style: Z([
+                  p === 2 && {
+                    boxShadow: `0 0 0 1px white, 0 0 0 2px ${h.background}`,
+                    backgroundColor: h.background
+                  },
+                  { 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" }
+                ])
+              }, 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)) : w("", !0),
+            h.value === "checkbox" ? (a(), c(A, { key: 2 }, V(3, (p) => l("div", {
+              key: p,
+              class: x([{ animate: p !== 3 }, "package-group-option__illustration-card"])
+            }, [
+              l("div", {
+                style: Z([p !== 3 && { backgroundColor: h.background }, { 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(y, {
+                  type: p !== 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)) : w("", !0)
+          ]),
+          l("div", null, [
+            l("div", $t, m(h.title), 1),
+            l("div", {
+              class: "package-group-option__subtitle",
+              innerHTML: h.subTitle
+            }, null, 8, _t)
+          ])
+        ], 12, bt))), 128))
+      ], 2)
+    ])
+  ]);
+}
+const At = /* @__PURE__ */ S(ft, [["render", Tt], ["__scopeId", "data-v-6f6b9465"]]), Ct = {
+  name: "ArticleAutocomplete",
+  components: {
+    SearchApi: Ge
+  },
+  mixins: [F([])],
+  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: {
+    ...R({
+      articleData: "articles/articles",
+      ids: "articles/articleIdList"
+    }),
+    whiteList() {
+      const e = [];
+      if (this.$refs.dropdown !== void 0) {
+        const t = this.$refs.dropdown.querySelectorAll("*");
+        for (const s of t)
+          e.push(s);
+      }
+      if (this.$refs.input !== void 0) {
+        const t = this.$refs.input.$el.querySelectorAll("*");
+        for (const s of t)
+          e.push(s);
+      }
+      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: {
+    ...B({
+      loadArticles: M.LOAD_ARTICLES
+    }),
+    priceFormat: j,
+    search(e, t) {
+      this.$emit("update:modelValue", t), !this.viewSettings.isPublicForm && e({
+        q: t,
+        cb: ({ article: s = [], extensionArticle: o = [] }) => {
+          this.searchResults = [
+            ...s.sort((n, i) => n.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"
+      });
+    }
+  }
+}, Pt = {
+  key: 0,
+  ref: "dropdown",
+  class: "r-container"
+}, xt = ["onClickCapture"], Vt = { class: "r-item-title truncate-text" }, St = { class: "r-item-details" }, Dt = {
+  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" }
+}, Mt = { key: 1 }, Rt = { key: 2 }, Lt = { key: 3 }, Ot = {
+  key: 0,
+  class: "r-item-icon"
+};
+function Et(e, t, s, o, n, i) {
+  const y = v("CInput"), h = v("SearchApi"), f = v("CIcon");
+  return a(), c("div", E({
+    class: { "is-open": n.isOpen }
+  }, e.$attrs, {
+    style: { position: "relative" },
+    onKeydownPassive: t[0] || (t[0] = (...p) => i.onKeydown && i.onKeydown(...p))
+  }), [
+    u(h, { "custom-search": {
+      article: !0,
+      extensionArticle: !0,
+      project: !1
+    } }, {
+      default: g(({ fetch: p }) => [
+        u(y, E({
+          ...e.$attrs,
+          ...e.$props
+        }, {
+          ref: "input",
+          "model-value": s.modelValue,
+          type: s.tag,
+          "auto-resize": !0,
+          class: "r-input",
+          "onUpdate:modelValue": (b) => i.search(p, b),
+          onFocus: i.onFocus,
+          onKeydown: [
+            W(i.hideResults, ["tab"]),
+            W(i.hideResults, ["escape"])
+          ],
+          onBlur: i.onBlur
+        }), {
+          prefix: g(() => [
+            Q(e.$slots, "prefix", {}, void 0, !0)
+          ]),
+          suffix: g(() => [
+            Q(e.$slots, "suffix", {}, void 0, !0)
+          ]),
+          _: 2
+        }, 1040, ["model-value", "type", "onUpdate:modelValue", "onFocus", "onKeydown", "onBlur"])
+      ]),
+      _: 3
+    }),
+    n.isOpen ? (a(), c("div", Pt, [
+      (a(!0), c(A, null, V(n.searchResults, (p, b) => (a(), c("div", {
+        key: b,
+        class: x([{ active: n.selectedIndex === b }, "r-item"]),
+        onClickCapture: N((k) => i.onSelect(p), ["stop"])
+      }, [
+        l("div", Vt, m(p.name), 1),
+        l("div", St, [
+          p.externalReference && p.externalReference.service ? (a(), c("div", Dt, [
+            u(f, {
+              type: p.externalReference.service,
+              style: { color: "white" },
+              size: "14"
+            }, null, 8, ["type"])
+          ])) : w("", !0),
+          p.article_no ? (a(), c("div", Mt, m(p.article_no), 1)) : w("", !0),
+          p.price ? (a(), c("div", Rt, m(i.priceFormat(p.price, { currency: p.currency })), 1)) : w("", !0),
+          p.vat ? (a(), c("div", Lt, m(e.$t("vat.sharedTitle").capitalize()) + " " + m(p.vat) + "% ", 1)) : w("", !0)
+        ]),
+        n.selectedIndex === b ? (a(), c("div", Ot, [
+          u(f, {
+            type: "corner-down-left",
+            size: "16"
+          })
+        ])) : w("", !0)
+      ], 42, xt))), 128))
+    ], 512)) : w("", !0)
+  ], 16);
+}
+const de = /* @__PURE__ */ S(Ct, [["render", Et], ["__scopeId", "data-v-724e4465"]]), ie = {
+  isDeductable: !1,
+  isRut: !1,
+  greenRot15: !1,
+  greenRot20: !1,
+  greenRot50: !1
+}, H = (e, t = "", s) => {
+  let o = {
+    ...e,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    // Trigger updatedAt as it us used to decide which houseWork to prioritize
+  };
+  return typeof s < "u" && (o[s] = t), Object.keys(ie).includes(s) && t && (o = {
+    ...o,
+    ...ie,
+    [s]: !0
+  }), _e(o.quantity) !== "number" && (o.quantity = 0), X(o);
+}, ue = ({
+  stored: e,
+  current: t,
+  hidePrice: s = !1,
+  activeHouseWorkType: o
+}) => {
+  let n = Te({
+    ...e,
+    quantity: 1,
+    showPrice: !s,
+    id: null,
+    ArticleId: e.id,
+    packageId: t.packageId
+  });
+  if (o) {
+    const i = (f = []) => f.reduce((p, b) => ({ ...p, [b]: !1 }), {}), h = Object.values(
+      le({
+        rot: "isDeductable",
+        rut: "isRut",
+        greenRot15: "greenRot15",
+        greenRot20: "greenRot20",
+        greenRot50: "greenRot50"
+      }, [o])
+    );
+    h.some((f) => !!n[f]) && (n = { ...n, ...i(h) });
+  }
+  return n;
+}, Ut = (e, t = null) => {
+  const s = ee(e.currency, t);
+  switch (e.priceType) {
+    case "approx":
+      return `${Ae.t("_common:approx")} ${s}`;
+    case "openAcc":
+      return `${s}/${U(e.unitType)}`;
+    case "markup":
+      return "%";
+    default:
+      return s;
+  }
+}, pe = {
+  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"
+      }
+    }
+  }
+}, me = {
+  article: {
+    name: {
+      maxLength: Ke(255)
+    }
+  }
+}, Bt = {
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Article",
+  i18nOptions: {
+    namespaces: "Article",
+    messages: pe
+  },
+  components: {
+    ErrorCallout: se,
+    ArticleAutocomplete: de,
+    CPriceInput: K
+  },
+  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$: re()
+    };
+  },
+  validations: me,
+  data() {
+    return {
+      updateData: H,
+      addSavedArticle: ue,
+      articleUnitLabel: U,
+      widthCompact: 580,
+      visualDisable: !1
+    };
+  },
+  computed: {
+    article: {
+      get() {
+        return this.value || {};
+      },
+      set(e) {
+        this.$emit("input", e);
+      }
+    },
+    details() {
+      const e = [], {
+        priceType: t,
+        quantity: s,
+        unitType: o,
+        price: n,
+        vat: i,
+        discount: y,
+        discountType: h
+      } = this.article;
+      if (t !== "fixed" && e.push({ title: this.$t(`priceTypeShort.${t}`) }), Ce(this.article)) {
+        const f = Pe(this.article);
+        e.push({
+          title: this.$t(`_common:deduction.${f}_percentage`)
+        });
+      }
+      return s && ["fixed", "approx"].includes(t) && (o !== "unit" || s > 1) && e.push({
+        title: U(this.article.unitType, {
+          count: s,
+          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: j(n, {
+            showZero: !0,
+            withVat: this.isIncVat ? i : !1,
+            currency: this.article.currency,
+            decimals: 2,
+            hideZeroDecimals: !0
+          })
+        }
+      }), y && e.push({
+        title: "-" + (h === "fixed" ? j(y, {
+          withVat: this.isIncVat ? i : !1,
+          currency: this.article.currency
+        }) : `${y / 100} %`),
+        detailClass: "discount"
+      }), e;
+    }
+  },
+  methods: {
+    updateArticle(e, t) {
+      this.article = H(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;
+    }
+  }
+}, Wt = { class: "top-row flex w-full" }, zt = ["innerHTML"];
+function Ft(e, t, s, o, n, i) {
+  const y = v("CIcon"), h = v("ArticleAutocomplete"), f = v("CPriceInput"), p = v("ErrorCallout"), b = O("tooltip");
+  return a(), c("div", {
+    class: x([{
+      "has-details": i.details.length,
+      compact: s.width <= n.widthCompact,
+      "show-controls": !s.hideControls
+    }, "article-wrapper"]),
+    onKeydown: t[10] || (t[10] = W((k) => e.$emit("esc"), ["esc"]))
+  }, [
+    l("div", Wt, [
+      u(h, E({
+        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",
+            n.addSavedArticle({
+              stored: e.$event,
+              current: i.article,
+              hidePrice: s.hidePriceOnNew,
+              activeHouseWorkType: s.activeHouseWorkType
+            })
+          ), e.$emit("select");
+        })
+      }), {
+        suffix: g(() => [
+          s.hideControls ? w("", !0) : D((a(), c("div", {
+            key: 0,
+            class: "article-button fade-in",
+            onClick: t[0] || (t[0] = (k) => e.$emit("open-modal"))
+          }, [
+            u(y, {
+              type: "cog",
+              size: "18"
+            })
+          ])), [
+            [b, {
+              content: e.$t("openModalTooltip"),
+              delay: { show: 300, hide: 0 }
+            }]
+          ])
+        ]),
+        _: 1
+      }, 16, ["model-value", "placeholder"]),
+      s.hidePriceInput ? w("", !0) : (a(), T(f, E({
+        key: s.rootPriceType + i.article.priceType + i.article.unitType,
+        "model-value": i.article.totalAmount,
+        currency: i.article.currency,
+        "is-inc-vat": i.article.priceType !== "markup" && s.isIncVat,
+        vat: i.article.vat,
+        placeholder: e.$t("_common:price.price").capitalize(),
+        "price-type": i.article.priceType,
+        "unit-label": n.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] = W((k) => e.$emit("add"), ["enter"]))
+      }), null, 16, ["model-value", "currency", "is-inc-vat", "vat", "placeholder", "price-type", "unit-label"])),
+      s.hideControls ? w("", !0) : (a(), c(A, { key: 1 }, [
+        u(y, {
+          class: "a-control-button close-button fade-in",
+          circle: "",
+          type: "x",
+          size: "18",
+          onClick: t[8] || (t[8] = (k) => s.enableRemove ? e.$emit("remove") : null)
+        }),
+        u(y, {
+          class: x([{ "c-hidden": !s.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, V(i.details, ({ title: k, icon: C, subTitle: d = "", detailClass: $ = "" }, r) => (a(), c("div", {
+        key: r,
+        class: x([[$], "article-details-item"])
+      }, [
+        I(m(k) + " ", 1),
+        C ? (a(), c("div", {
+          key: 0,
+          innerHTML: C
+        }, null, 8, zt)) : w("", !0),
+        I(" " + m(d), 1)
+      ], 2))), 128))
+    ])) : w("", !0),
+    o.v$.$invalid && o.v$.$dirty ? (a(), T(p, {
+      key: 1,
+      message: i.errorMessage(o.v$)
+    }, null, 8, ["message"])) : w("", !0)
+  ], 34);
+}
+const jt = /* @__PURE__ */ S(Bt, [["render", Ft], ["__scopeId", "data-v-df3528c4"]]), Nt = {
+  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 n = this.$modal.getOpenInstances();
+        if (e.defaultPrevented || n.length) return;
+        this.$emit("close");
+      }
+    },
+    removeKeyHandler() {
+      document.removeEventListener("keyup", this.onKeyUp);
+    }
+  }
+}, Ht = { class: "l-root" };
+function qt(e, t, s, o, n, i) {
+  const y = O("tooltip");
+  return a(), c("div", Ht, [
+    D((a(), c("div", {
+      class: x([{ disabled: !s.canBackward }, "l-button"]),
+      style: { left: "calc(-4 * var(--rem))" },
+      onClick: t[0] || (t[0] = (h) => 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)), [
+      [y, i.getNavTooltip(-1)]
+    ]),
+    D((a(), c("div", {
+      class: x([{ disabled: !s.canForward }, "l-button"]),
+      style: { right: "calc(-4 * var(--rem))" },
+      onClick: t[1] || (t[1] = (h) => 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)), [
+      [y, i.getNavTooltip(1)]
+    ])
+  ]);
+}
+const Gt = /* @__PURE__ */ S(Nt, [["render", qt], ["__scopeId", "data-v-f685b502"]]), Kt = {
+  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: xe,
+    DragItem: Ve,
+    CField: ce
+  },
+  emits: ["select", "close"],
+  data() {
+    return {
+      hoverIndex: null,
+      removeConfirmIndex: null,
+      selectedValue: {
+        id: null,
+        value: ""
+      },
+      idList: []
+    };
+  },
+  computed: {
+    ...R({
+      isPosting: "unitTypes/isPosting",
+      stateUnitIds: "unitTypes/ids",
+      unitById: "unitTypes/byId"
+    }),
+    unitItems() {
+      return (this.idList || []).map((e) => {
+        const t = this.unitById(e), s = U(t.value);
+        return {
+          ...t,
+          label: s,
+          value: t.value.startsWith("$") ? t.value.replace(/^[$]/, "") : s,
+          raw: t.value.replace(/^[$]/, "")
+          // replace only first occurance of '$'
+        };
+      });
+    }
+  },
+  watch: {
+    stateUnitIds: {
+      immediate: !0,
+      handler(e) {
+        this.idList = e || [];
+      }
+    }
+  },
+  methods: {
+    ...B({
+      loadUnits: M.LOAD_UNIT_TYPES,
+      createUnit: M.CREATE_UNIT_TYPE,
+      updateUnit: M.UPDATE_UNIT_TYPE,
+      deleteUnit: M.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 s = `$${t}`;
+      e ? await this.updateUnit({ id: e, body: { value: s } }) : await this.createUnit({ body: { value: s } }), this.reset(), this.$emit("select", s), 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 = ae(this.idList, e, t), await Se(
+        "/unitType/setPositions",
+        { ids: this.idList },
+        { invalidateCache: { type: "unitType" } }
+      ), this.reset(), await this.loadUnits());
+    }
+  }
+}, Yt = {
+  class: "unit-modal-root font-inter",
+  style: { position: "relative" }
+}, Zt = { style: { padding: "calc(1.5 * var(--rem))" } }, Jt = { style: { "font-weight": "600", "font-size": "18px", "margin-bottom": "calc(1.5 * var(--rem))" } }, Qt = { class: "control" }, Xt = { style: { "border-top": "1px solid hsl(0, 0%, 88%)", overflow: "auto", "max-height": "360px" } }, ei = {
+  class: "text-gray-400",
+  style: { "font-size": "14px", padding: "calc(1 * var(--rem)) calc(1.5 * var(--rem)) 0", "font-weight": "500" }
+}, ti = { class: "unit-modal-list" }, ii = {
+  key: 0,
+  class: "unit-modal-list-empty"
+}, si = ["onMouseoverPassive", "onClick"], ni = { class: "drag-handle" }, ai = { style: { "padding-left": "0.5em" } }, oi = { class: "unittype-buttons" };
+function li(e, t, s, o, n, i) {
+  const y = v("CIcon"), h = v("CButton"), f = v("CInput"), p = v("CField"), b = v("DragItem"), k = v("DragList"), C = O("tooltip");
+  return a(), c("div", {
+    class: "modal-overlay font-inter",
+    onClickPassive: t[3] || (t[3] = N((...d) => i.close && i.close(...d), ["self"]))
+  }, [
+    l("div", Yt, [
+      l("div", Zt, [
+        l("div", Jt, [
+          l("span", null, m(e.$t("_common:add", { thing: e.$t("_common:unitType.unitType_plural") })), 1),
+          D(u(y, {
+            type: "info",
+            size: "15",
+            class: "text-gray-400",
+            style: { "margin-left": "0.5em" }
+          }, null, 512), [
+            [C, { content: e.$t("tooltip"), html: !0 }]
+          ])
+        ]),
+        u(p, {
+          grouped: "",
+          style: { margin: "0" }
+        }, {
+          default: g(() => [
+            u(f, {
+              ref: "unitInput",
+              modelValue: n.selectedValue.value,
+              "onUpdate:modelValue": t[0] || (t[0] = (d) => n.selectedValue.value = d),
+              modelModifiers: { trim: !0 },
+              placeholder: e.$t("_common:name").capitalize(),
+              expanded: "",
+              filled: "",
+              class: "unit-input"
+            }, oe({ _: 2 }, [
+              n.selectedValue.id ? {
+                name: "suffix",
+                fn: g(() => [
+                  u(h, {
+                    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", Qt, [
+              u(h, {
+                loading: e.isPosting,
+                disabled: !n.selectedValue.value,
+                type: "secondary",
+                onClick: i.submit
+              }, {
+                default: g(() => [
+                  I(m(n.selectedValue.id ? e.$t("_common:save") : e.$t("_common:add")), 1)
+                ]),
+                _: 1
+              }, 8, ["loading", "disabled", "onClick"])
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      l("div", Xt, [
+        l("div", ei, m(e.$t("_common:unit_plural").capitalize()), 1),
+        l("div", ti, [
+          i.unitItems.length ? w("", !0) : (a(), c("div", ii, m(e.$t("_common:add", { thing: e.$t("_common:unit_plural") })), 1)),
+          u(k, {
+            "drop-placeholder": { className: "drag-drop-placeholder" },
+            "drag-class": "is-dragged",
+            "lock-axis": "y",
+            "drag-handle-selector": ".drag-handle",
+            onDrop: i.onDrop
+          }, {
+            default: g(() => [
+              (a(!0), c(A, null, V(i.unitItems, (d, $) => (a(), T(b, {
+                key: d.id
+              }, {
+                default: g(() => [
+                  l("div", {
+                    class: x([{ "is-editing": n.selectedValue.id === d.id }, "unit-modal-list-item"]),
+                    onMouseoverPassive: (r) => n.hoverIndex = $,
+                    onMouseleavePassive: t[2] || (t[2] = (r) => n.hoverIndex = null),
+                    onClick: (r) => i.onEdit(d)
+                  }, [
+                    l("div", ni, [
+                      u(y, {
+                        type: "handle",
+                        size: "16",
+                        class: "text-gray-300"
+                      })
+                    ]),
+                    l("div", ai, m(d.label), 1),
+                    D(l("span", { class: "delete-confirm" }, m(e.$t("_common:remove")) + "? ", 513), [
+                      [De, n.removeConfirmIndex === $]
+                    ]),
+                    l("div", oi, [
+                      n.hoverIndex === $ || n.removeConfirmIndex === $ ? (a(), T(h, {
+                        key: 0,
+                        type: n.removeConfirmIndex === $ ? "danger" : "none",
+                        pattern: n.removeConfirmIndex === $ ? "primary" : "tertiary",
+                        circle: "",
+                        icon: "x",
+                        size: "small",
+                        onClick: N((r) => i.remove(d.id, $), ["stop", "prevent"]),
+                        onBlur: t[1] || (t[1] = (r) => n.removeConfirmIndex = null)
+                      }, null, 8, ["type", "pattern", "onClick"])) : w("", !0),
+                      u(h, {
+                        icon: "edit",
+                        size: "small",
+                        type: "none",
+                        pattern: "tertiary",
+                        circle: ""
+                      })
+                    ])
+                  ], 42, si)
+                ]),
+                _: 2
+              }, 1024))), 128))
+            ]),
+            _: 1
+          }, 8, ["onDrop"])
+        ])
+      ])
+    ])
+  ], 32);
+}
+const ri = /* @__PURE__ */ S(Kt, [["render", li], ["__scopeId", "data-v-d0dffed6"]]), ci = {
+  name: "ArticleUnitSelect",
+  components: {
+    CDropdown: q,
+    CDropdownItem: G
+  },
+  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: {
+    ...R({
+      unitIds: "unitTypes/ids",
+      unitById: "unitTypes/byId"
+    }),
+    unitItems() {
+      return this.isPublicForm ? Ye : (this.unitIds || []).map((e) => this.unitById(e)).map(({ value: e }) => e);
+    }
+  },
+  created() {
+    this.isPublicForm || this.loadUnits();
+  },
+  methods: {
+    articleUnitLabel: U,
+    ...B({
+      loadUnits: M.LOAD_UNIT_TYPES
+    }),
+    openEditModal() {
+      this.$modal.show(
+        ri,
+        {},
+        {},
+        {
+          select: (e) => this.$emit("update:modelValue", e)
+        }
+      );
+    }
+  }
+};
+function di(e, t, s, o, n, i) {
+  const y = v("CButton"), h = v("CDropdownItem"), f = v("CDropdown");
+  return a(), T(f, E({
+    position: "is-bottom-left",
+    maxHeight: "240px",
+    ...e.$attrs
+  }, {
+    "model-value": s.modelValue,
+    scrollable: "",
+    "onUpdate:modelValue": t[0] || (t[0] = (p) => e.$emit("update:modelValue", p))
+  }), {
+    trigger: g(() => [
+      Q(e.$slots, "default", {}, () => [
+        u(y, {
+          type: "none",
+          pattern: "tertiary"
+        }, {
+          default: g(() => [
+            I(m(i.articleUnitLabel(s.modelValue)), 1)
+          ]),
+          _: 1
+        })
+      ], !0)
+    ]),
+    footer: g(() => [
+      s.isPublicForm ? w("", !0) : (a(), T(y, {
+        key: 0,
+        type: "none",
+        pattern: "secondary",
+        size: "small",
+        class: "edit-button",
+        onClick: i.openEditModal
+      }, {
+        default: g(() => [
+          I(m(e.$t("_common:edit", { thing: e.$t("_common:unit_plural") })), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"]))
+    ]),
+    default: g(() => [
+      (a(!0), c(A, null, V(i.unitItems, (p, b) => (a(), T(h, {
+        key: `${p}-${b}`,
+        value: p
+      }, {
+        default: g(() => [
+          I(m(i.articleUnitLabel(p)), 1)
+        ]),
+        _: 2
+      }, 1032, ["value"]))), 128))
+    ]),
+    _: 3
+  }, 16, ["model-value"]);
+}
+const ui = /* @__PURE__ */ S(ci, [["render", di], ["__scopeId", "data-v-57c52e30"]]), pi = {
+  name: "ArticleModal",
+  i18nOptions: {
+    namespaces: "ArticleModal",
+    messages: pe
+  },
+  components: {
+    ArticleAutocomplete: de,
+    ArticleUnitSelect: ui,
+    ListModalButtons: Gt,
+    CPriceInput: K,
+    CField: ce
+  },
+  emits: ["add", "input", "focus", "close", "open-modal", "update:currency"],
+  mixins: [ve],
+  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$: re()
+    };
+  },
+  validations: me,
+  data() {
+    return {
+      priceSuffix: Ut,
+      updateData: H,
+      addSavedArticle: ue,
+      vatOptions: [
+        { value: 25, translation: "25%" },
+        { value: 12, translation: "12%" },
+        { value: 6, translation: "6%" },
+        { value: 0, translation: "0%" }
+      ],
+      showDiscountInput: !1,
+      setPricesIncVat: !1,
+      getCurrencySymbol: ee,
+      articleUnitLabel: U
+    };
+  },
+  computed: {
+    ...R({
+      allowHidePrice: "settings/allowHidePrice",
+      getCompanySetting: "settings/getCompanySetting",
+      feature: "application/feature"
+    }),
+    article: {
+      get() {
+        return this.articleList[this.index] || {};
+      },
+      set(e) {
+        this.$emit("input", e);
+      }
+    },
+    useVat() {
+      return P(this, "_document.useVat") || "";
+    },
+    vatType() {
+      return P(this, "_document.vatType") || "";
+    },
+    checkboxItems() {
+      const { article: e } = this || {}, { priceType: t } = this.article || {}, s = [
+        ...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 || {};
+        s.push({
+          label: this.$t("hidePriceLabel"),
+          value: !o,
+          onClick: () => this.updateArticle(!o, "showPrice")
+        });
+      }
+      return s;
+    },
+    priceTypeOptions() {
+      if (!this.enablePriceTypes || this.rootPriceType === "fixed") return [];
+      const { priceType: e } = this.article, t = (o) => this.$t(`priceTypeTooltips.${o}`), s = [
+        {
+          label: this.$t("price.fixed"),
+          tooltip: t("fixed"),
+          value: e === "fixed",
+          onClick: () => this.updateArticle("fixed", "priceType")
+        }
+      ];
+      return this.rootPriceType === "approx" && s.push({
+        label: this.$t("price.approx"),
+        tooltip: t("approx"),
+        value: e === "approx",
+        onClick: () => this.updateArticle("approx", "priceType")
+      }), this.rootPriceType.startsWith("openAcc") && (s.push({
+        label: this.$t("price.openAcc"),
+        tooltip: t("openAcc"),
+        value: e === "openAcc",
+        onClick: () => this.updateArticle("openAcc", "priceType")
+      }), s.push({
+        label: this.$t("price.markup"),
+        tooltip: t("markup"),
+        value: e === "markup",
+        onClick: () => this.updateArticle("markup", "priceType")
+      })), s;
+    }
+  },
+  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: {
+    ...B({
+      createArticle: M.DO_CREATE_ARTICLE
+    }),
+    onCustomVatBlur(e) {
+      P(e, "target.value") || "" || this.updateArticle(0, "vat");
+    },
+    onCustomVatInput(e) {
+      const t = P(e, "target.value") || "";
+      if (!t) return;
+      let s = t > 100 ? t.slice(0, t.length - 1) : t;
+      s < 0 && (s = 0), this.updateArticle(Number.parseFloat(s), "vat");
+    },
+    updateArticle(e, t) {
+      this.article = H(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 && ((s) => typeof s == "string" && !!s.trim())(this.article.name) && (e = await this.createArticle({
+        body: this.article,
+        showMessage: !1
+      }), this.article = { ...this.article, ArticleId: e });
+    }
+  }
+}, mi = { class: "modal-container" }, hi = {
+  class: "flex w-full",
+  style: { "margin-bottom": "1.5em" }
+}, gi = {
+  class: "flex",
+  style: { "margin-bottom": "1.5em" }
+}, vi = {
+  key: 0,
+  class: "flex",
+  style: { "margin-bottom": "1.5em" }
+}, fi = { style: { margin: "calc(1 * var(--rem)) calc(-0.5 * var(--rem))" } }, yi = ["value"], ki = ["value"], bi = {
+  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%)" }
+}, wi = ["value"], Ii = {
+  key: 1,
+  class: "tag-group",
+  style: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "margin-top": "1em" }
+}, $i = ["onClick"], _i = { style: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "margin-top": "1em" } }, Ti = ["onClick"], Ai = { class: "flex space-x-4 overflow-hidden p-4 md:p-9" };
+function Ci(e, t, s, o, n, i) {
+  const y = v("ListModalButtons"), h = v("CIcon"), f = v("ArticleAutocomplete"), p = v("CField"), b = v("CInput"), k = v("CButton"), C = v("ArticleUnitSelect"), d = v("CPriceInput"), $ = O("tooltip");
+  return a(), c("div", {
+    class: x([{
+      "full-screen": e.mq === "sm",
+      "modal-overlay": !0
+    }, "font-inter"]),
+    onClickPassive: t[15] || (t[15] = N((...r) => i.close && i.close(...r), ["self"]))
+  }, [
+    l("div", mi, [
+      e.mq !== "sm" ? (a(), T(y, {
+        key: 0,
+        "can-forward": !!s.articleList[s.index + 1],
+        "can-backward": !!s.articleList[s.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))
+      }, [
+        u(h, { type: "x" })
+      ])),
+      u(Me, { name: "slide" }, {
+        default: g(() => [
+          (a(), c("div", {
+            key: i.article._uniqueId,
+            class: "modal-main"
+          }, [
+            u(p, {
+              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: g(() => [
+                u(f, {
+                  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",
+                    n.addSavedArticle({
+                      stored: r,
+                      current: i.article,
+                      hidePrice: s.hidePriceOnNew,
+                      activeHouseWorkType: s.activeHouseWorkType
+                    })
+                  ))
+                }, null, 8, ["model-value"])
+              ]),
+              _: 1
+            }, 8, ["validator", "messages", "label"]),
+            l("div", hi, [
+              u(p, {
+                label: e.$t("quantity").capitalize(),
+                "label-position": "inside",
+                class: "label-selector form-control form-control-left flex-grow",
+                style: { "margin-bottom": "0" }
+              }, {
+                default: g(() => [
+                  u(b, {
+                    "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"]),
+              u(C, {
+                "model-value": i.article.unitType,
+                "is-public-form": s.viewSettings.isPublicForm,
+                "onUpdate:modelValue": t[5] || (t[5] = (r) => i.updateArticle(r, "unitType"))
+              }, {
+                default: g(() => [
+                  u(k, {
+                    class: "select-css form-control form-control-right",
+                    style: { width: "8em", "box-shadow": "none" }
+                  }, {
+                    default: g(() => [
+                      I(m(n.articleUnitLabel(i.article.unitType, {
+                        count: i.article.quantity
+                      })), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["model-value", "is-public-form"])
+            ]),
+            s.hidePriceInput ? w("", !0) : (a(), c(A, { key: 0 }, [
+              l("div", gi, [
+                u(p, {
+                  label: e.$t("price.price").capitalize(),
+                  "label-position": "inside",
+                  class: "label-selector form-control form-control-left flex-1",
+                  style: { "margin-bottom": "0" }
+                }, {
+                  default: g(() => [
+                    (a(), T(d, {
+                      ref: "priceInput",
+                      key: n.priceSuffix(i.article),
+                      "model-value": i.article.price,
+                      currency: i.article.currency,
+                      "is-inc-vat": i.article.priceType !== "markup" && n.setPricesIncVat,
+                      vat: i.article.vat,
+                      "price-type": i.article.priceType,
+                      "unit-label": n.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) => n.setPricesIncVat = !n.setPricesIncVat)
+                }, m(s._document.$t(`vat.${n.setPricesIncVat ? "incVat" : "exVat"}`)), 1)) : w("", !0)
+              ]),
+              n.showDiscountInput ? (a(), c("div", vi, [
+                u(p, {
+                  label: e.$t("discount").capitalize(),
+                  "label-position": "inside",
+                  class: "label-selector form-control form-control-left flex-grow",
+                  style: { "margin-bottom": "0" }
+                }, {
+                  default: g(() => [
+                    u(d, {
+                      ref: "discountInput",
+                      "model-value": i.article.discount,
+                      currency: i.article.currency,
+                      "is-inc-vat": i.article.discountType !== "percentage" && n.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"))
+                    }, oe({ _: 2 }, [
+                      i.article.discountType === "fixed" ? {
+                        name: "suffix",
+                        fn: g(() => [
+                          I(m(s._document.$t(
+                            `vat.${n.setPricesIncVat ? "incVat" : "exVat"}`
+                          )), 1)
+                        ]),
+                        key: "0"
+                      } : {
+                        name: "suffix",
+                        fn: g(() => [
+                          I(m(n.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" ? "%" : n.getCurrencySymbol(i.article.currency)), 1)
+              ])) : w("", !0)
+            ], 64)),
+            l("div", fi, [
+              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, V(n.vatOptions, ({ translation: r, value: L }, _) => (a(), c("option", {
+                    key: _,
+                    value: L
+                  }, m(e.$t(`vat.${i.vatType}`)) + " " + m(r), 9, ki))), 128))
+                ], 40, yi)) : (a(), c("span", bi, [
+                  I(m(s._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, wi),
+                  t[16] || (t[16] = I(" % "))
+                ]))
+              ], 64)) : w("", !0),
+              i.priceTypeOptions.length ? (a(), c("div", Ii, [
+                (a(!0), c(A, null, V(i.priceTypeOptions, ({ label: r, value: L, onClick: _, tooltip: Y }, he) => D((a(), c("div", {
+                  key: r + he,
+                  class: x([{ active: L }, "tag-item"]),
+                  onClick: _
+                }, [
+                  I(m(r), 1)
+                ], 10, $i)), [
+                  [$, {
+                    content: Y,
+                    delay: { show: 300, hide: 0 }
+                  }]
+                ])), 128))
+              ])) : w("", !0),
+              l("div", _i, [
+                (a(!0), c(A, null, V(i.checkboxItems, ({ label: r, value: L, onClick: _ }, Y) => (a(), c("div", {
+                  key: r + Y,
+                  class: x([{ active: L }, "tag-item"]),
+                  onClick: _
+                }, m(r), 11, Ti))), 128))
+              ])
+            ])
+          ]))
+        ]),
+        _: 1
+      }),
+      l("div", Ai, [
+        D((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: g(() => [
+            u(h, {
+              type: "zap",
+              size: "21",
+              style: { margin: "-3px" }
+            })
+          ]),
+          _: 1
+        }, 8, ["onClick"])), [
+          [$, {
+            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>
+            `
+          }]
+        ]),
+        u(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: g(() => [
+            I(m(e.$t("save")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ])
+    ])
+  ], 34);
+}
+const Pi = /* @__PURE__ */ S(pi, [["render", Ci], ["__scopeId", "data-v-eacf482e"]]), xi = {
+  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: jt,
+    ArticleModal: Pi,
+    WithDimensions: je,
+    Sortable: He
+  },
+  expose: ["focusLastArticle", "openLastArticle"],
+  mixins: [F([])],
+  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: Re(null) };
+  },
+  emits: [
+    "input",
+    "insert",
+    "move",
+    "remove",
+    "update:setPricesIncVat",
+    "update:currency",
+    "add",
+    "focus"
+  ],
+  data() {
+    return {
+      selectedIndex: null,
+      showModal: !1
+    };
+  },
+  computed: {
+    ...R({
+      hidePriceInput: "settings/allowHideDocArticlePriceInput",
+      hidePriceOnNew: "settings/hidePriceOnNewlyAddedArticles"
+    }),
+    articlesWithTotal() {
+      return X(this.articles);
+    },
+    isIndivid() {
+      return P(this._document, "prices.helpers.isIndivid", !0);
+    },
+    setPricesIncVat() {
+      return P(this, "_document.setPricesIncVat", null);
+    },
+    currency() {
+      return P(this._document, "currency");
+    },
+    useVat() {
+      return P(this, "_document.useVat");
+    },
+    vatType() {
+      return P(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(Le.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: {
+    ...B({
+      showMessage: M.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 s = t;
+      this.isIndivid || (s.isDeductable = !1, s.isRut = !1, s.greenRot15 = !1, s.greenRot20 = !1, s.greenRot50 = !1), this.$emit("input", { index: e, value: s });
+    },
+    onRemoveArticle(e) {
+      this.$emit("remove", e);
+    },
+    onEsc(e, t) {
+      e === this.articles.length - 1 && ["name", "price", "discount"].every((s) => !t[s]) && this.onRemoveArticle(e);
+    },
+    changeVat() {
+      this.$emit("update:setPricesIncVat", !this.setPricesIncVat);
+    },
+    updateArticlesVatOption() {
+      this.articles.forEach((e, t) => {
+        if (e.priceType === "markup") return;
+        let s = z({ amount: e.price }).divide(
+          (100 + e.vat) * 0.01
+        );
+        this.setPricesIncVat || (s = z({ amount: e.price }).multiply(
+          (100 + e.vat) * 0.01
+        )), this.updateArticleObject(
+          t,
+          X({ ...e, price: s.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"
+      }, s = (o = []) => o.reduce((n, i) => ({ ...n, [i]: !1 }), {});
+      t[e] ? this.articles.forEach((o, n) => {
+        const i = Object.values(le(t, [e]));
+        if (i.some((y) => !!o[y])) {
+          const y = { ...o, ...s(i) };
+          this.$emit("input", { index: n, value: y });
+        }
+      }) : e === !1 && this.articles.forEach((o, n) => {
+        const i = Object.values(t);
+        if (i.some((y) => !!o[y])) {
+          const y = { ...o, ...s(i) };
+          this.$emit("input", { index: n, value: y });
+        }
+      });
+    },
+    onAdd(e) {
+      const { newIndex: t, item: s } = e, o = s == null ? void 0 : s._data;
+      o && (s == null || s.remove(), this.$emit("insert", { index: t, value: o }));
+    },
+    onRemove(e) {
+      this.$emit("remove", e.oldIndex);
+    },
+    onUpdate(e) {
+      const t = qe(
+        this.articles,
+        e.oldIndex,
+        e.newIndex
+      ).filter(Boolean);
+      this.$emit("move", t);
+    }
+  }
+}, Vi = {
+  key: 0,
+  class: "label-text"
+};
+function Si(e, t, s, o, n, i) {
+  const y = v("Article"), h = v("Sortable"), f = v("WithDimensions"), p = v("ArticleModal"), b = v("Portal");
+  return a(), c("div", null, [
+    i.showVatToggle ? (a(), c("div", Vi, [
+      I(m(e.$t("vatOption.label")) + " ", 1),
+      l("span", {
+        onClick: t[0] || (t[0] = (k) => i.changeVat())
+      }, m(s._document.$t(`vat.${i.setPricesIncVat ? "incVat" : "exVat"}`)), 1)
+    ])) : w("", !0),
+    u(f, null, {
+      default: g(({ width: k }) => [
+        u(h, {
+          "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: s.articles,
+          style: { "min-height": "calc(3 * var(--rem))" }
+        }, {
+          item: g(({ item: C, index: d }) => [
+            u(y, {
+              ref: "articleItem",
+              value: C,
+              width: k,
+              "hide-price-input": e.hidePriceInput,
+              "hide-price-on-new": e.hidePriceOnNew,
+              "is-inc-vat": i.setPricesIncVat,
+              "hide-controls": s.hideControls,
+              "root-price-type": s.rootPriceType,
+              "active-house-work-type": s.activeHouseWorkType,
+              class: "article-item",
+              "onUpdate:currency": t[1] || (t[1] = ($) => e.$emit("update:currency", $)),
+              onInput: ($) => i.updateArticleObject(d, $),
+              onFocus: t[2] || (t[2] = ($) => e.$emit("focus")),
+              onRemove: ($) => i.onRemoveArticle(d),
+              onOpenModal: ($) => i.openModal(d, $),
+              onAdd: ($) => d === i.articlesWithTotal.length - 1 ? e.$emit("add") : null,
+              onSelect: ($) => d === i.articlesWithTotal.length - 1 ? e.$emit("add") : null,
+              onEsc: ($) => 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
+    }),
+    u(b, { to: "modal" }, {
+      default: g(() => [
+        n.showModal && i.articlesWithTotal[n.selectedIndex] ? (a(), T(p, {
+          key: 0,
+          ref: "articleModal",
+          _document: s._document,
+          index: n.selectedIndex,
+          "article-list": i.articlesWithTotal,
+          "hide-price-input": e.hidePriceInput,
+          "hide-price-on-new": e.hidePriceOnNew,
+          "is-inc-vat": i.setPricesIncVat,
+          "root-price-type": s.rootPriceType,
+          currency: i.currency,
+          "active-house-work-type": s.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(n.selectedIndex, k)),
+          onAdd: t[5] || (t[5] = (k) => e.$emit("add", k)),
+          onOpenModal: i.openModal,
+          onClose: t[6] || (t[6] = (k) => n.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"])) : w("", !0)
+      ]),
+      _: 1
+    })
+  ]);
+}
+const Di = /* @__PURE__ */ S(xi, [["render", Si], ["__scopeId", "data-v-f7bdd8ec"]]), Mi = {
+  name: "MaxTotalInput",
+  i18nOptions: {
+    namespaces: "MaxTotalInput",
+    messages: {
+      en: {
+        maxTotalLabel: "Add a price"
+      },
+      sv: {
+        maxTotalLabel: "Ange ett pris"
+      }
+    }
+  },
+  components: {
+    CPriceInput: K
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: null
+    },
+    currency: {
+      type: String,
+      required: !0
+    },
+    vatType: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      getCurrencySymbol: ee
+    };
+  },
+  computed: {
+    ...R({
+      isIncVat: "application/isIncVat"
+    })
+  },
+  watch: {
+    isIncVat(e) {
+      let t = z({ amount: this.modelValue }).divide(
+        1.25
+      );
+      e || (t = z({ amount: this.modelValue }).multiply(
+        125 * 0.01
+      )), this.$emit("update:modelValue", t.getAmount());
+    }
+  }
+}, Ri = { class: "flex w-full justify-end" };
+function Li(e, t, s, o, n, i) {
+  const y = v("CPriceInput");
+  return a(), c("div", Ri, [
+    u(y, {
+      "model-value": s.modelValue,
+      currency: s.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] = (h) => e.$emit("update:modelValue", h))
+    }, {
+      prefix: g(() => [
+        I(m(e.$t("price.maxPrice").capitalize()), 1)
+      ]),
+      suffix: g(() => [
+        l("span", null, m(n.getCurrencySymbol(s.currency)) + " " + m(e.$t(`vat.${e.isIncVat ? "incVat" : "exVat"}`, {
+          thing: e.$t(`vat.${s.vatType}`)
+        })), 1)
+      ]),
+      _: 1
+    }, 8, ["model-value", "currency", "is-inc-vat", "placeholder"])
+  ]);
+}
+const Oi = /* @__PURE__ */ S(Mi, [["render", Li]]), Ei = {
+  components: {
+    CDropdown: q,
+    CDropdownItem: G
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: "fixed"
+    }
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      priceTypeOptions: ["fixed", "approx", "openAcc", "openAccMaxPrice"]
+    };
+  }
+}, Ui = { class: "flex justify-end" };
+function Bi(e, t, s, o, n, i) {
+  const y = v("CButton"), h = v("CDropdownItem"), f = v("CDropdown");
+  return a(), c("div", Ui, [
+    u(f, { "model-value": s.modelValue }, {
+      trigger: g(() => [
+        u(y, { class: "price-type-button" }, {
+          default: g(() => [
+            I(m(e.$t("price.pricing").capitalize()) + ": ", 1),
+            l("span", null, m(e.$t(`price.${s.modelValue}`)), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      default: g(() => [
+        (a(!0), c(A, null, V(n.priceTypeOptions, (p) => (a(), T(h, {
+          key: p,
+          value: p,
+          class: "text-right",
+          onClick: (b) => e.$emit("update:modelValue", p)
+        }, {
+          default: g(() => [
+            I(m(e.$t(`price.${p}`)), 1)
+          ]),
+          _: 2
+        }, 1032, ["value", "onClick"]))), 128))
+      ]),
+      _: 1
+    }, 8, ["model-value"])
+  ]);
+}
+const Wi = /* @__PURE__ */ S(Ei, [["render", Bi], ["__scopeId", "data-v-26c5da6c"]]), zi = {
+  name: "EditDeduction",
+  components: {
+    CPriceInput: K
+  },
+  mixins: [F(["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 = z({ amount: this.total }).multiply(e).getAmount();
+    },
+    showModal() {
+      this.internalValue = this.houseWorkAmount, this.$modal.show(this.modalName);
+    }
+  }
+}, Fi = { class: "deduction-modal flex w-full flex-col items-center justify-between rounded-lg" }, ji = { style: { "font-size": "calc(calc(1 * var(--rem)) + 2px)", "font-weight": "800", "text-align": "center", "margin-bottom": "calc(1.5 * var(--rem))" } }, Ni = { style: { "margin-bottom": "calc(1 * var(--rem))", width: "100%" } }, Hi = { class: "flex w-full flex-wrap justify-center gap-2" }, qi = ["onClick"], Gi = {
+  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 Ki(e, t, s, o, n, i) {
+  const y = v("CPriceInput"), h = v("CButton"), f = v("modal"), p = v("portal");
+  return a(), c("div", null, [
+    u(f, E({
+      adaptive: !0,
+      height: "auto",
+      width: "90%",
+      maxWidth: 420,
+      classes: "primary"
+    }, { name: n.modalName }), {
+      default: g(() => [
+        l("div", Fi, [
+          l("div", ji, m(e.$t("deduction.manualType", {
+            type: e.$t(`deduction.${s.houseWorkType}`)
+          })), 1),
+          l("div", Ni, [
+            u(y, {
+              modelValue: n.internalValue,
+              "onUpdate:modelValue": t[0] || (t[0] = (b) => n.internalValue = b),
+              modelModifiers: { number: !0 },
+              currency: "SEK",
+              placeholder: e.$t("enterThing", { thing: e.$t("deduction.deduction") }),
+              min: "0",
+              size: "medium",
+              "suffix-class": "text-gray-400"
+            }, {
+              suffix: g(() => [
+                I(m(e.$t("currency.SEK")), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "placeholder"])
+          ]),
+          l("div", Hi, [
+            (a(), c(A, null, V([
+              { 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%" }
+            ], (b) => l("div", {
+              key: b.l,
+              class: x([{
+                active: Math.round(s.total * b.v * 0.01) * 100 === n.internalValue
+              }, "deduction-button"]),
+              onClick: (k) => i.setDeduction(b.v)
+            }, m(b.l), 11, qi)), 64))
+          ]),
+          u(h, {
+            type: "secondary",
+            wide: "",
+            class: "mt-8",
+            onClick: t[1] || (t[1] = () => {
+              e.houseWorkManualAmount = n.internalValue, e.$modal.hide(n.modalName);
+            })
+          }, {
+            default: g(() => [
+              I(m(e.$t("save")), 1)
+            ]),
+            _: 1
+          }),
+          u(h, {
+            type: "secondary",
+            pattern: "tertiary",
+            wide: "",
+            class: "mt-2",
+            onClick: t[2] || (t[2] = () => {
+              e.houseWorkManualAmount = null, e.$modal.hide(n.modalName);
+            })
+          }, {
+            default: g(() => [
+              I(m(e.$t("reset")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      _: 1
+    }, 16, ["name"]),
+    e.houseWorkManualAmount ? (a(), T(p, {
+      key: 0,
+      order: 2,
+      to: "document-nav-bottom"
+    }, {
+      default: g(() => [
+        l("div", {
+          class: "housework-manual-nav",
+          onClick: t[3] || (t[3] = (b) => e.$modal.show(n.modalName))
+        }, [
+          (a(), c("svg", Gi, 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)
+          ]))),
+          I(" " + m(e.$t("deduction.manualType", { type: e.$t(`deduction.${s.houseWorkType}`) })) + " " + m(e.$t("using")), 1)
+        ])
+      ]),
+      _: 1
+    })) : w("", !0)
+  ]);
+}
+const Yi = /* @__PURE__ */ S(zi, [["render", Ki], ["__scopeId", "data-v-5de18d7b"]]), Zi = {
+  name: "Pricing",
+  components: {
+    EditDeduction: Yi
+  },
+  props: {
+    _document: {
+      type: Object,
+      default: () => ({})
+    },
+    basePath: {
+      type: String,
+      default: "data.prices"
+    },
+    packageId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["input"],
+  data() {
+    return {
+      get: P
+    };
+  },
+  computed: {
+    vatType() {
+      return P(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: j(t.value, {
+          showZero: !0,
+          decimals: 2,
+          currency: this.prices.currency
+        })
+      }));
+    },
+    prices() {
+      const { prices: e } = this._document.packageGroups.getPackageById(
+        this.packageId
+      );
+      return e;
+    },
+    showHouseWork() {
+      return !!P(this.prices, "region.houseWorkType", !1) || !!P(this.prices, "region.houseWorkManualAmount", !1);
+    }
+  }
+}, Ji = { class: "price-bubble" }, Qi = { class: "flex w-full items-center justify-between" }, Xi = { class: "price-label" }, es = {
+  key: 0,
+  class: "pricing-sub-label"
+}, ts = ["onClick"], is = { class: "price-value" };
+function ss(e, t, s, o, n, i) {
+  const y = v("EditDeduction"), h = O("tooltip");
+  return a(), c("div", Ji, [
+    l("div", Qi, [
+      i.showHouseWork ? (a(), T(y, {
+        key: 0,
+        ref: "deduction",
+        disabled: !n.get(i.prices, "region.houseWorkType", !1),
+        _document: s._document,
+        _value: {
+          houseWorkManualAmount: `${s.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] = (f) => e.$emit("input", f))
+      }, null, 8, ["disabled", "_document", "_value", "house-work-type", "house-work-amount", "total"])) : w("", !0)
+    ]),
+    l("div", null, [
+      (a(!0), c(A, null, V(i.priceArray, (f, p) => (a(), c("div", {
+        key: p,
+        class: x([[f.classList || ""], "price-row flex w-full justify-between"])
+      }, [
+        l("div", Xi, [
+          I(m(f.label.capitalize()) + " ", 1),
+          f.subLabel ? (a(), c("span", es, m(f.subLabel), 1)) : w("", !0),
+          f.action ? D((a(), c("span", {
+            key: 1,
+            class: "pricing-action",
+            onClick: (b) => f.action ? f.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, ts)), [
+            [h, e.$t("edit", { thing: e.$t("deduction.deduction") })]
+          ]) : w("", !0)
+        ]),
+        l("div", is, m(f.prefix) + " " + m(f.value), 1)
+      ], 2))), 128))
+    ])
+  ]);
+}
+const ns = /* @__PURE__ */ S(Zi, [["render", ss], ["__scopeId", "data-v-90384cd6"]]), as = {
+  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: Di,
+    PriceFormAlternatives: Wi,
+    MaxTotalInput: Oi,
+    Pricing: ns,
+    TextEditor: Ne,
+    CDropdown: q,
+    CDropdownItem: G
+  },
+  emits: [
+    "move",
+    "input",
+    "remove",
+    "update:isSelectedDefault",
+    "update:priceType",
+    "update:setPricesIncVat",
+    "update:currency",
+    "remove-package"
+  ],
+  mixins: [
+    F([
+      "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: {
+    ...R({
+      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 Oe(
+          this.description,
+          this._document.textTemplateMap,
+          this._document._doc
+        );
+      },
+      set(e) {
+        this.description = Ee(e);
+      }
+    }
+  },
+  watch: {
+    priceType(e, t) {
+      if (!(e && e.startsWith("open") && t && t.startsWith("open"))) {
+        if (e) {
+          const s = e.startsWith("open") ? "openAcc" : e;
+          this.mappedPackageArticles.forEach((o, n) => {
+            this.onArticleInput({
+              index: n,
+              value: {
+                ...o,
+                priceType: s,
+                ...s === "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: s } = this.mappedPackageArticles[e], o = Ue(t, [
+        "allowRot",
+        "allowRut",
+        "isIncVat",
+        "rootPriceType",
+        "hideControls"
+      ]);
+      o.currency = this.currency, this.$emit("input", { key: `articles[${[s]}]`, value: o });
+    },
+    onArticleAdd({ openModal: e = !1 } = {}) {
+      this.createEmptyArticle(), e ? this.$refs.articleList.openLastArticle() : this.$refs.articleList.focusLastArticle();
+    },
+    onInsert({ index: e, value: t }) {
+      const s = Be(this.mappedPackageArticles).add(
+        { ...t, packageId: this.packageId },
+        e
+      );
+      this.$emit("input", {
+        key: "articles",
+        value: [
+          ...this.articles.filter(
+            ({ packageId: o }) => o !== this.packageId
+          ),
+          ...s
+        ]
+      });
+    },
+    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
+        ]
+      });
+    }
+  }
+}, os = { class: "min-h-0 rounded-md border border-gray-200 bg-white text-black" }, ls = { class: "flex w-full items-center justify-between bg-gray-100 py-1 pl-4 pr-1 text-sm font-medium text-gray-600" }, rs = { class: "p-4" }, cs = { class: "mb-0.5 flex items-center" }, ds = ["id", "placeholder"], us = { class: "mt-2 flex gap-2" };
+function ps(e, t, s, o, n, i) {
+  const y = v("CButton"), h = v("CDropdownItem"), f = v("CDropdown"), p = v("TextEditor"), b = v("MaxTotalInput"), k = v("PriceFormAlternatives"), C = v("ArticleList"), d = v("CIcon"), $ = v("Pricing"), r = O("tooltip"), L = O("click-outside");
+  return a(), c("div", os, [
+    l("div", ls, [
+      l("div", null, m(s.type === "single" ? e.$t("single") : s.type === "radio" || s.toggable ? e.$t("option") : e.$t("base")), 1),
+      s.type !== "single" ? (a(), T(f, {
+        key: 0,
+        class: "ml-4"
+      }, {
+        trigger: g(() => [
+          u(y, {
+            size: "small",
+            type: "text",
+            pattern: "secondary",
+            class: "is-thinner opacity-70"
+          }, {
+            default: g(() => [
+              I(m(e.$t("_common:change")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        default: g(() => [
+          s.toggable ? (a(), c(A, { key: 0 }, [
+            u(h, {
+              value: e.isSelectedDefault,
+              toggle: !0,
+              "close-on-click": !1,
+              onClick: t[0] || (t[0] = (_) => e.$emit("update:isSelectedDefault", !e.isSelectedDefault))
+            }, {
+              default: g(() => [
+                I(m(e.$t("selected")), 1)
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            u(h, { separator: "" })
+          ], 64)) : w("", !0),
+          u(h, {
+            "icon-left": "arrow-up",
+            disabled: !s.moveOptions.up,
+            onClick: t[1] || (t[1] = (_) => e.$emit("move", -1))
+          }, {
+            default: g(() => [
+              I(m(e.$t("_common:move", { thing: e.$t("_common:up") })), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          u(h, {
+            "icon-left": "arrow-down",
+            disabled: !s.moveOptions.down,
+            onClick: t[2] || (t[2] = (_) => e.$emit("move", 1))
+          }, {
+            default: g(() => [
+              I(m(e.$t("_common:move", { thing: e.$t("_common:down") })), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          u(h, {
+            "icon-props": {
+              stroke: "red"
+            },
+            "icon-left": "trash",
+            onClick: i.onRemove
+          }, {
+            default: g(() => [
+              I(m(e.$t("_common:remove")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        _: 1
+      })) : w("", !0)
+    ]),
+    l("div", rs, [
+      l("div", cs, [
+        D(l("input", {
+          id: `package-name-${s.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] = W((_) => e.$refs.editor.focus(), ["enter"]))
+        }, null, 40, ds), [
+          [We, e.name]
+        ])
+      ]),
+      u(p, {
+        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"]),
+      D((a(), c("div", {
+        onMouseoverPassive: t[15] || (t[15] = (_) => n.isHover = !0),
+        onMouseleavePassive: t[16] || (t[16] = (_) => n.isHover = !1)
+      }, [
+        e.priceType === "openAccMaxPrice" ? (a(), T(b, {
+          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"])) : w("", !0),
+        u(k, {
+          modelValue: e.priceType,
+          "onUpdate:modelValue": [
+            t[7] || (t[7] = (_) => e.priceType = _),
+            t[8] || (t[8] = (_) => e.$emit("update:priceType", _))
+          ]
+        }, null, 8, ["modelValue"]),
+        u(C, {
+          ref: "articleList",
+          _document: e._document,
+          articles: i.mappedPackageArticles,
+          "root-price-type": e.priceType,
+          "active-house-work-type": s.activeHouseWorkType,
+          "hide-controls": !n.isFocus && !n.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] = (_) => n.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", us, [
+          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())
+          }, [
+            u(d, {
+              type: "plus",
+              size: "16",
+              "stroke-width": "3",
+              class: "mr-1"
+            }),
+            I(" " + m(e.$t("addButton")), 1)
+          ]),
+          D((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 }))
+          }, [
+            u(d, {
+              type: "zap",
+              size: "16",
+              "stroke-width": "2.5"
+            })
+          ])), [
+            [r, {
+              content: e.$t("advancedButtonTooltip"),
+              distance: 6
+            }]
+          ])
+        ]),
+        u($, {
+          _document: e._document,
+          "base-path": `${e._value.basePath}`,
+          "package-id": s.packageId,
+          onInput: t[14] || (t[14] = (_) => e.$emit("input", _))
+        }, null, 8, ["_document", "base-path", "package-id"])
+      ], 32)), [
+        [
+          L,
+          () => {
+            n.isFocus = !1, n.isHover = !1;
+          }
+        ]
+      ])
+    ])
+  ]);
+}
+const ms = /* @__PURE__ */ S(as, [["render", ps], ["__scopeId", "data-v-b03c63bf"]]), hs = (e) => (e || []).slice(0, 1).map((t) => ({
+  ...t,
+  isSelected: !0,
+  isSelectedDefault: !0,
+  toggable: !1
+})), gs = (e) => {
+  const t = P(e, "0.data.prices.type") || "fixed";
+  return (e || []).map((s, o) => ({
+    ...s,
+    toggable: !0,
+    ...o === 0 ? {
+      isSelected: !0,
+      isSelectedDefault: !0,
+      toggable: !1
+    } : null,
+    data: {
+      ...s.data,
+      prices: {
+        ...s.data ? s.data.prices : null,
+        type: t
+      }
+    }
+  }));
+}, vs = (e = []) => {
+  let t = !1;
+  return e.map((s) => {
+    const o = {
+      ...s,
+      // 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 fs(e, ...t) {
+  if (e === "single") return hs(...t);
+  if (e === "checkbox") return gs(...t);
+  if (e === "radio") return vs(...t);
+  throw new Error(`Package filter type '${e}' is not implemented`);
+}
+const ys = {
+  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: se,
+    PackageItem: ms,
+    PackageGroupSelect: At,
+    CCallout: ge,
+    CDropdown: q,
+    CDropdownItem: G
+  },
+  mixins: [
+    F([
+      "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: {
+    ...R({
+      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 P(this.group, "prices.region.houseWorkType", null);
+    },
+    isIndivid() {
+      return P(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: {
+    ...B({
+      showMessage: M.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: s } = this.persistedGroup || {};
+      if (t && s && s.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: s } = this.persistedGroup;
+      if (!t.length) return;
+      if (e !== this.persistedGroup.type && (t = fs(e, t)), e === "single" && s.length) {
+        const [{ packageId: n }] = t;
+        s = s.filter((i) => i.packageId === n);
+      }
+      const o = vt(
+        [...this._document.allArticles || [], ...s || []],
+        (n) => n._uniqueId
+      );
+      this.$emit("input", { key: "articles", value: o }), this.$emit("input", { key: `${[this._value.packages]}`, value: t });
+    },
+    addPackage(e = {}) {
+      const t = ze(), s = this.type === "checkbox" && this.packages.length ? this.packages[0].data.prices.type : "fixed", o = this.currency || this.defaultCurrency, n = {
+        isSelected: this.type === "single",
+        isSelectedDefault: this.type === "single",
+        toggable: !0,
+        packageId: t,
+        data: {
+          name: "",
+          description: "",
+          prices: {
+            type: s,
+            currency: o
+          }
+        },
+        ...e
+      };
+      this.$emit("input", { key: this._value.packages, value: n }), this.$emit("input", {
+        key: "articles",
+        value: this.newArticle({
+          priceType: s.startsWith("open") ? "openAcc" : s,
+          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((s, 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((s, 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], s = this._document.allArticles.filter(
+        ({ packageId: o }) => o !== t
+      );
+      this.$emit("input", { key: "articles", value: s }), this.$emit("remove", { key: `${[this._value.packages]}[${[e]}]` });
+    },
+    async onResetType() {
+      const e = this.packages.map((o) => o.packageId), [t, s] = this._document.allArticles.reduce(
+        ([o, n], i) => e.includes(i.packageId) ? [[...o, i], n] : [o, [...n, i]],
+        [[], []]
+      );
+      this.$emit("update:persisted-group", {
+        type: this.type,
+        packages: this.packages,
+        articles: t
+      }), this.$emit("input", { key: "articles", value: s }), this.$emit("input", { key: `${[this._value.packages]}`, value: [] }), this.type = "";
+    },
+    moveOptions(e, t) {
+      const s = { up: !1, down: !1 };
+      return e > 0 && (s.up = !0), e < t - 1 && (s.down = !0), s;
+    },
+    moveItem(e, t) {
+      const s = ae(this.packages, e, t);
+      this.$emit("input", { key: this._value.packages, value: s });
+    }
+  }
+}, ks = { class: "package-group-root font-inter" }, bs = { key: 0 }, ws = { style: { position: "absolute", right: "0", top: "-10px", transform: "translateY(-100%)", "z-index": "2" } }, Is = { class: "pb-4" }, $s = {
+  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%)" }
+}, _s = {
+  key: 4,
+  class: "flex w-full flex-col items-center justify-center"
+}, Ts = { style: { width: "100%" } }, As = {
+  key: 0,
+  class: "package-placeholder bg-gray-100",
+  style: { color: "hsl(0, 0%, 24%)", "font-weight": "500" }
+}, Cs = {
+  style: { "vertical-align": "text-bottom", "margin-right": "3px" },
+  width: "16",
+  height: "16",
+  viewBox: "0 0 18 14",
+  xmlns: "http://www.w3.org/2000/svg"
+}, Ps = { class: "flex w-full" };
+function xs(e, t, s, o, n, i) {
+  const y = v("PackageGroupSelect"), h = v("ErrorCallout"), f = v("CButton"), p = v("CDropdownItem"), b = v("CDropdown"), k = v("CCallout"), C = v("PackageItem");
+  return a(), c("div", ks, [
+    e.type ? (a(), c(A, { key: 1 }, [
+      l("div", ws, [
+        u(b, null, {
+          trigger: g(() => [
+            u(f, {
+              type: "none",
+              size: "normal",
+              pattern: "secondary",
+              icon: "more-horizontal",
+              circle: ""
+            })
+          ]),
+          default: g(() => [
+            u(p, { onClick: i.onResetType }, {
+              default: g(() => [
+                I(m(e.$t("_common:change", {
+                  thing: e.$t("_common:price.proposal").toLowerCase()
+                })), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            u(p, {
+              value: !!e.hideGroupPrice,
+              "close-on-click": !1,
+              toggle: "",
+              onInput: t[1] || (t[1] = (d) => e.hideGroupPrice = d)
+            }, {
+              default: g(() => [
+                I(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: g(() => [
+          l("div", Is, m(e.$t("basePlaceholder")), 1),
+          u(f, {
+            type: "secondary",
+            size: "small",
+            style: { "font-weight": "600" },
+            onClick: t[2] || (t[2] = (d) => i.addPackage({
+              isSelected: !0,
+              isSelectedDefault: !0,
+              toggable: !1
+            }))
+          }, {
+            default: g(() => [
+              I(m(e.$t("_common:add", { thing: e.$t("base").toLowerCase() })), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["title"])) : (a(), T(te, {
+        key: 1,
+        name: "section-list",
+        tag: "div"
+      }, {
+        default: g(() => [
+          (a(!0), c(A, null, V(i.topRowPackages, (d, $) => (a(), c("div", {
+            key: d.packageId,
+            class: "section-item pb-4"
+          }, [
+            u(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.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
+                }), n.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[$ + 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", $s)) : w("", !0),
+      e.type === "checkbox" ? (a(), T(te, {
+        key: 3,
+        name: "section-list",
+        tag: "div",
+        style: { "margin-bottom": "calc(1 * var(--rem))" }
+      }, {
+        default: g(() => [
+          (a(!0), c(A, null, V(i.bottomRowPackages, (d, $) => (a(), c("div", {
+            key: d.packageId,
+            class: "section-item",
+            style: { padding: "calc(1 * var(--rem)) 0" }
+          }, [
+            u(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.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
+                }), n.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[$ + r].index)
+            }, null, 8, ["_document", "_value", "type", "active-house-work-type", "package-id", "move-options", "onUpdate:isSelectedDefault", "onUpdate:priceType", "onRemovePackage", "onMove"])
+          ]))), 128))
+        ]),
+        _: 1
+      })) : w("", !0),
+      e.type !== "single" || !e.packages.length ? (a(), c("div", _s, [
+        l("div", Ts, [
+          e.type === "radio" && !e.packages.length ? (a(), c("div", As, [
+            (a(), c("svg", Cs, 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)
+            ]))),
+            I(" " + m(e.$t("selectablePlaceholder")), 1)
+          ])) : w("", !0)
+        ]),
+        s.validator.$invalid && s.validator.$dirty ? (a(), T(h, {
+          key: 0,
+          message: e.$t("error.minOnePackage"),
+          style: { margin: "calc(1 * var(--rem)) 0 calc(1 * var(--rem)) 0" }
+        }, null, 8, ["message"])) : w("", !0),
+        l("div", Ps, [
+          u(f, {
+            type: "secondary",
+            outlined: "",
+            "icon-left": "plus",
+            style: { "border-color": "hsl(0, 0%, 82%)" },
+            onClick: t[12] || (t[12] = (d) => i.addPackage())
+          }, {
+            default: g(() => [
+              I(m(e.$t("add")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ])) : w("", !0)
+    ], 64)) : (a(), c("div", bs, [
+      u(y, {
+        onInput: t[0] || (t[0] = (d) => i.onSelectType(d))
+      }),
+      s.validator.$invalid && s.validator.$dirty ? (a(), T(h, {
+        key: 0,
+        message: e.$t("error.selectType"),
+        style: { "padding-bottom": "calc(1.5 * var(--rem))" }
+      }, null, 8, ["message"])) : w("", !0)
+    ]))
+  ]);
+}
+const Ns = /* @__PURE__ */ S(ys, [["render", xs], ["__scopeId", "data-v-03549668"]]);
+export {
+  Ns as default
+};