@konnectio/core 4.0.56-rc3 → 4.0.56-rc31

package/dist/gift-card.js

@@ -1,131 +1,100 @@
-var ve = Object.defineProperty;
-var ae = Object.getOwnPropertySymbols;
-var ge = Object.prototype.hasOwnProperty, be = Object.prototype.propertyIsEnumerable;
-var le = (u, t, r) => t in u ? ve(u, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : u[t] = r, te = (u, t) => {
-  for (var r in t || (t = {}))
-    ge.call(t, r) && le(u, r, t[r]);
-  if (ae)
-    for (var r of ae(t))
-      be.call(t, r) && le(u, r, t[r]);
-  return u;
-};
-var J = (u, t, r) => new Promise((o, s) => {
-  var h = (m) => {
-    try {
-      v(r.next(m));
-    } catch (g) {
-      s(g);
-    }
-  }, f = (m) => {
-    try {
-      v(r.throw(m));
-    } catch (g) {
-      s(g);
-    }
-  }, v = (m) => m.done ? o(m.value) : Promise.resolve(m.value).then(h, f);
-  v((r = r.apply(u, t)).next());
-});
-import { ref as _, computed as V, defineComponent as Z, openBlock as p, createBlock as L, withCtx as D, createElementVNode as d, createElementBlock as b, createVNode as n, unref as e, createCommentVNode as T, normalizeClass as ue, watch as ye, onMounted as he, Suspense as ke, toDisplayString as oe, withDirectives as W, vShow as j, Fragment as Ce, renderList as _e, isRef as C, createApp as Ve } from "vue";
-import { d as Fe, u as Pe, s as X, c as ce, H as $, e as Y, i as ie, S as Q, h as we, f as Te, J as Se, l as pe, b as Ue, I as $e, C as z, _ as me, m as Ee, j as qe, L as ne, T as H, k as Ie, q as Re, t as Le, D as Ge } from "./SelectField.vue_vue_type_style_index_0_lang-j_yHB51P.js";
-import { C as Me } from "./Container-gHSYMY7q.js";
-import { a as xe, C as re, P as De, _ as ze } from "./CheckoutWindow-31th413C.js";
-import { E as Ae } from "./_-FedWhJCw.js";
-import { F as x } from "./Field-QHvFgmEq.js";
-import "./_commonjsHelpers-FF1eOqK0.js";
-const se = Fe("giftCard", () => {
-  const { pay: u } = Pe(), { bearerToken: t, metaData: r, currencyId: o } = X(ce()), s = _($.InitialState), h = Y("konnectio_name", "", void 0, { serializer: Q.string }), f = Y("konnectio_email", "", void 0, { serializer: Q.string }), v = Y("konnectio_phone", "", void 0, { serializer: Q.string }), m = _(""), g = _(1), S = _(!0), G = _(""), k = _({
+import { N as ue, O as pe, s as te, c as le, r as V, ag as T, U as ee, e as _, Y as re, W as ae, X as me, t as fe, ah as ve, d as z, u as J, Q as ge, f as d, k as M, x as G, h as l, g as k, m as o, j as e, C as O, l as F, p as ce, I as he, a1 as D, a0 as be, v as ne, A as Z, q as ye, ai as ke, w as _e, o as Ce, S as Ve, aj as W, ak as H, F as we, ab as Fe, $ as P, _ as Pe, al as Se, T as K, n as Te, D as $e, E as Ue, G as Ee, H as Ae, J as Ie, K as Le, L as Me, af as Ge, M as Re } from "./Field-C9r1d8IB.js";
+import { a as qe, C as xe, P as Be, _ as De } from "./CheckoutWindow-RWkSWvbk.js";
+import { E as Oe } from "./ErrorMessage-z0JJ8Q3W.js";
+import { S as ze } from "./TermsOfService-oZz-B-KI.js";
+const oe = ue("giftCard", () => {
+  const { pay: g } = pe(), { bearerToken: c, metaData: v, currencyId: t } = te(le()), p = le(), r = V(T.InitialState), u = ee("konnectio_name", "", void 0, { serializer: ae.string }), h = ee("konnectio_email", "", void 0, { serializer: ae.string }), i = ee("konnectio_phone", "", void 0, { serializer: ae.string }), b = V(""), f = V(1), x = V(!0), S = V(""), a = V({
     base64: "",
     type: "",
     name: ""
-  }), l = _(void 0), c = _(0), y = _(!1), q = _(0), F = V(() => s.value === $.InitialState || s.value === $.WaitingForResponse), I = V(() => s.value === $.ReadyToPay), M = V(() => s.value === $.PaymentSuccess), P = V(() => {
-    const a = {
+  }), m = V(void 0), w = V(0), $ = V(!1), C = V(0), U = _(() => p.metaData.hotels[0]), B = _(() => U.value.termsOfService ? U.value.termsOfService : ""), E = _(() => r.value === T.InitialState || r.value === T.WaitingForResponse), ie = _(() => r.value === T.ReadyToPay), Q = _(() => r.value === T.PaymentSuccess), R = _(() => {
+    const y = {
       1: {
-        label: ie.t("giftCard.hotelType"),
+        label: re.t("giftCard.hotelType"),
         data: []
       },
       2: {
-        label: ie.t("giftCard.restaurantType"),
+        label: re.t("giftCard.restaurantType"),
         data: []
       }
-    }, U = r.value.hotels[0].places;
-    return U && U.forEach((w) => {
-      a[w.placeType].data.push(w);
+    }, q = v.value.hotels[0].places;
+    return q && q.forEach((I) => {
+      y[I.placeType].data.push(I);
     }), Object.fromEntries(
-      Object.entries(a).filter(([, w]) => w.data.length > 0)
+      Object.entries(y).filter(([, I]) => I.data.length > 0)
     );
-  }), A = V(() => q.value !== 0), E = V(() => {
-    let a;
-    if (A.value)
-      a = P.value[q.value].data[0];
-    else if (c.value !== 0) {
-      const U = l.value, w = P.value[c.value].data;
-      w.length === 1 ? a = w[0] : U !== void 0 && w.forEach((ee) => {
-        String(ee.id) === String(U) && (a = ee);
+  }), j = _(() => C.value !== 0), A = _(() => {
+    let y;
+    if (j.value)
+      y = R.value[C.value].data[0];
+    else if (w.value !== 0) {
+      const q = m.value, I = R.value[w.value].data;
+      I.length === 1 ? y = I[0] : q !== void 0 && I.forEach((se) => {
+        String(se.id) === String(q) && (y = se);
       });
     }
-    return a;
-  }), B = V(() => !(!h.value || !f.value || !(v.value.length >= 5) || !m.value || E.value === void 0)), O = V(() => !(s.value === $.InitialState && y.value)), K = V(() => !!(s.value === $.WaitingForResponse && y.value));
-  function R() {
-    return J(this, null, function* () {
-      s.value = $.WaitingForResponse, y.value = !0, yield we.post("https://production.hotel-service.konnectio.dk/api/gift-card/create", {
-        termsOfserviceURL: window.location.origin,
-        checkoutUrl: window.location.origin,
-        currencyID: o.value,
-        language: Te(),
-        amount: m.value,
-        quantity: g.value,
-        freeText: G.value,
-        showPrice: S.value,
-        contactName: h.value,
-        contactEmail: f.value,
-        contactPhone: v.value,
-        imageBase64: Se(k.value.base64),
-        imageName: k.value.name,
-        imageFormat: k.value.type,
-        placeType: E.value ? E.value.placeType : void 0,
-        placeID: E.value ? E.value.id : void 0
-      }, {
-        headers: {
-          Authorization: t.value,
-          Accept: "application/json",
-          "Fresh-Booking-Ver": "4.0.56-rc3"
-        }
-      }).then((a) => {
-        s.value = $.ReadyToPay, y.value = !1, u({
-          callback: () => console.log("Callback!"),
-          response: a.data
-        });
+    return y;
+  }), X = _(() => !(!u.value || !h.value || !(i.value.length >= 5) || !b.value || A.value === void 0)), L = _(() => !(r.value === T.InitialState && $.value)), s = _(() => !!(r.value === T.WaitingForResponse && $.value));
+  async function n() {
+    r.value = T.WaitingForResponse, $.value = !0, await me.post("https://production.hotel-service.konnectio.dk/api/gift-card/create", {
+      termsOfserviceURL: window.location.origin,
+      checkoutUrl: window.location.origin,
+      currencyID: t.value,
+      language: fe(),
+      amount: b.value,
+      quantity: f.value,
+      freeText: S.value,
+      showPrice: x.value,
+      contactName: u.value,
+      contactEmail: h.value,
+      contactPhone: i.value,
+      imageBase64: ve(a.value.base64),
+      imageName: a.value.name,
+      imageFormat: a.value.type,
+      placeType: A.value ? A.value.placeType : void 0,
+      placeID: A.value ? A.value.id : void 0
+    }, {
+      headers: {
+        Authorization: c.value,
+        Accept: "application/json",
+        "Fresh-Booking-Ver": "4.0.56-rc31"
+      }
+    }).then((y) => {
+      r.value = T.ReadyToPay, $.value = !1, g({
+        callback: () => console.log("Callback!"),
+        response: y.data
       });
     });
   }
-  function i(a) {
-    a && (q.value = a);
+  function N(y) {
+    y && (C.value = y);
   }
   return {
-    selectedPlace: E,
-    moduleState: s,
-    name: h,
-    email: f,
-    phone: v,
-    value: m,
-    remark: G,
-    showValue: S,
-    quantity: g,
-    media: k,
-    placeId: l,
-    placeType: c,
-    showFormPage: F,
-    showPaymentPage: I,
-    showConfirmationPage: M,
-    places: P,
-    hasFilledForm: B,
-    hasForcedPlaceType: A,
-    isWaitingForResponse: K,
-    isMetaDataAvailable: O,
-    orderGiftCard: R,
-    initialize: i
+    selectedPlace: A,
+    moduleState: r,
+    name: u,
+    email: h,
+    phone: i,
+    value: b,
+    remark: S,
+    showValue: x,
+    quantity: f,
+    media: a,
+    placeId: m,
+    placeType: w,
+    showFormPage: E,
+    showPaymentPage: ie,
+    showConfirmationPage: Q,
+    places: R,
+    hasFilledForm: X,
+    hasForcedPlaceType: j,
+    isWaitingForResponse: s,
+    isMetaDataAvailable: L,
+    termsOfService: B,
+    orderGiftCard: n,
+    initialize: N
   };
-}), Be = { class: "media-selector" }, We = ["accept"], je = { class: "media-selector-wrapper" }, He = { class: "media-selector-tools" }, Ne = { key: 0 }, Oe = { key: 1 }, Ke = { key: 2 }, Je = ["src"], Ye = /* @__PURE__ */ Z({
+}), je = { class: "media-selector" }, Ne = ["accept"], We = { class: "media-selector-wrapper" }, He = { class: "media-selector-tools" }, Ke = { key: 0 }, Ye = { key: 1 }, Ze = { key: 2 }, Je = ["src"], Qe = /* @__PURE__ */ z({
   __name: "MediaSelector",
   props: {
     modelValue: {},
@@ -135,96 +104,94 @@ const se = Fe("giftCard", () => {
     required: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: t }) {
-    const r = t, o = u, { t: s } = pe(), { display: h } = Ue(), f = _(), v = V(() => o.modelValue.base64 !== "");
-    function m(l) {
-      r("update:modelValue", l);
+  setup(g, { emit: c }) {
+    const v = c, t = g, { t: p } = J(), { display: r } = ge(), u = V(), h = _(() => t.modelValue.base64 !== "");
+    function i(a) {
+      v("update:modelValue", a);
     }
-    function g() {
-      m({
+    function b() {
+      i({
         base64: "",
         name: "",
         type: ""
-      }), f.value && (f.value.value = "");
+      }), u.value && (u.value.value = "");
     }
-    function S() {
-      f.value && f.value.click();
+    function f() {
+      u.value && u.value.click();
     }
-    function G(l, c) {
-      const [y, q] = [l.name, l.type], F = new FileReader();
-      F.onload = function(I) {
-        if (I.target) {
-          const M = I.target.result;
-          c({ base64: M, name: y, type: q });
+    function x(a, m) {
+      const [w, $] = [a.name, a.type], C = new FileReader();
+      C.onload = function(U) {
+        if (U.target) {
+          const B = U.target.result;
+          m({ base64: B, name: w, type: $ });
         } else
-          h({
-            message: s("imageUploadError"),
+          r({
+            message: p("imageUploadError"),
             type: "error"
           });
-      }, F.readAsDataURL(l);
+      }, C.readAsDataURL(a);
     }
-    function k() {
-      return J(this, null, function* () {
-        let l;
-        (l = f.value.files) instanceof FileList && G(l[0], m);
-      });
+    async function S() {
+      let a;
+      (a = u.value.files) instanceof FileList && x(a[0], i);
     }
-    return (l, c) => (p(), L($e, {
-      label: l.label,
-      required: l.required,
+    return (a, m) => (d(), M(he, {
+      label: a.label,
+      required: a.required,
       type: "media"
     }, {
-      default: D(() => [
-        d("div", Be, [
-          d("input", {
+      default: G(() => [
+        l("div", je, [
+          l("input", {
             ref_key: "fileInput",
-            ref: f,
+            ref: u,
             type: "file",
             class: "hidden",
-            accept: l.validation,
+            accept: a.validation,
             single: "",
-            onChange: c[0] || (c[0] = (y) => k())
-          }, null, 40, We),
-          d("div", je, [
-            d("ul", He, [
-              v.value ? T("", !0) : (p(), b("li", Ne, [
-                n(z, {
-                  label: e(s)("uploadFile"),
+            onChange: m[0] || (m[0] = (w) => S())
+          }, null, 40, Ne),
+          l("div", We, [
+            l("ul", He, [
+              h.value ? F("", !0) : (d(), k("li", Ke, [
+                o(O, {
+                  label: e(p)("uploadFile"),
                   type: "button",
                   icon: "upload",
-                  "icon-color": l.iconColor,
-                  onClickEvent: c[1] || (c[1] = (y) => S())
+                  "icon-color": a.iconColor,
+                  onClickEvent: m[1] || (m[1] = (w) => f())
                 }, null, 8, ["label", "icon-color"])
               ])),
-              v.value ? (p(), b("li", Oe, [
-                n(z, {
-                  label: e(s)("replaceFile"),
+              h.value ? (d(), k("li", Ye, [
+                o(O, {
+                  label: e(p)("replaceFile"),
                   type: "button",
                   icon: "repeat-alt",
-                  "icon-color": l.iconColor,
-                  onClickEvent: c[2] || (c[2] = (y) => S())
+                  "icon-color": a.iconColor,
+                  onClickEvent: m[2] || (m[2] = (w) => f())
                 }, null, 8, ["label", "icon-color"])
-              ])) : T("", !0),
-              v.value ? (p(), b("li", Ke, [
-                n(z, {
-                  label: e(s)("removeFile"),
+              ])) : F("", !0),
+              h.value ? (d(), k("li", Ze, [
+                o(O, {
+                  label: e(p)("removeFile"),
                   type: "button",
                   icon: "trash-alt",
-                  "icon-color": l.iconColor,
-                  onClickEvent: c[3] || (c[3] = (y) => g())
+                  "icon-color": a.iconColor,
+                  onClickEvent: m[3] || (m[3] = (w) => b())
                 }, null, 8, ["label", "icon-color"])
-              ])) : T("", !0)
+              ])) : F("", !0)
             ]),
-            d("div", {
-              class: ue([
+            l("div", {
+              class: ce([
                 "media-selector-previewer",
-                { opened: v.value }
+                { opened: h.value }
               ])
             }, [
-              l.modelValue ? (p(), b("img", {
+              a.modelValue ? (d(), k("img", {
                 key: 0,
-                src: l.modelValue.base64
-              }, null, 8, Je)) : T("", !0)
+                src: a.modelValue.base64
+              }, null, 8, Je)) : F("", !0)
             ], 2)
           ])
         ])
@@ -233,9 +200,9 @@ const se = Fe("giftCard", () => {
     }, 8, ["label", "required"]));
   }
 });
-function de(u) {
-  const t = u;
-  t.__i18n = t.__i18n || [], t.__i18n.push({
+function de(g) {
+  const c = g;
+  c.__i18n = c.__i18n || [], c.__i18n.push({
     locale: "",
     resource: {
       da: {
@@ -253,39 +220,83 @@ function de(u) {
     }
   });
 }
-typeof de == "function" && de(Ye);
-const Qe = { class: "gift-card-skeleton" }, Xe = { class: "gift-card-skeleton-form" }, Ze = /* @__PURE__ */ Z({
+typeof de == "function" && de(Qe);
+const Xe = { class: "gift-card-skeleton" }, ea = { class: "gift-card-skeleton-form" }, aa = /* @__PURE__ */ z({
   __name: "GiftCardSkeleton",
-  setup(u) {
-    return (t, r) => (p(), b("div", Qe, [
-      d("div", Xe, [
-        n(x),
-        n(x),
-        n(x),
-        n(x),
-        n(x, { "is-text-area": "" }),
-        n(Ae, { height: "44px" })
+  setup(g) {
+    return (c, v) => (d(), k("div", Xe, [
+      l("div", ea, [
+        o(D),
+        o(D),
+        o(D),
+        o(D),
+        o(D, { "is-text-area": "" }),
+        o(be, { height: "44px" })
       ])
     ]));
   }
-}), ea = /* @__PURE__ */ me(Ze, [["__scopeId", "data-v-e35c75b3"]]), aa = {
+}), ta = /* @__PURE__ */ ne(aa, [["__scopeId", "data-v-ba3efaa1"]]), la = { class: "konnectio-accept-terms" }, oa = /* @__PURE__ */ z({
+  __name: "_",
+  props: {
+    content: {},
+    buttonLabel: {}
+  },
+  setup(g) {
+    const { t: c } = J(), v = V(!1);
+    return (t, p) => (d(), k("div", la, [
+      o(e(ke), {
+        keypath: "general.termsAndConditionsNotice",
+        tag: "span",
+        scope: "global"
+      }, {
+        button: G(() => [
+          l("i", null, '"' + Z(t.buttonLabel) + '"', 1)
+        ]),
+        terms: G(() => [
+          l("a", {
+            class: "konnectio-accept-terms-link",
+            target: "_blank",
+            onClick: p[0] || (p[0] = ye((r) => v.value = !0, ["prevent"]))
+          }, [
+            l("span", null, Z(e(c)("general.termsAndConditions")), 1)
+          ])
+        ]),
+        _: 1
+      }),
+      o(ze, {
+        modelValue: v.value,
+        "onUpdate:modelValue": p[1] || (p[1] = (r) => v.value = r),
+        description: t.content
+      }, null, 8, ["modelValue", "description"])
+    ]));
+  }
+}), na = /* @__PURE__ */ ne(oa, [["__scopeId", "data-v-c9c826cf"]]), ia = /* @__PURE__ */ z({
+  __name: "GiftCard",
+  setup(g) {
+    const { t: c } = J(), v = oe();
+    return (t, p) => (d(), M(na, {
+      content: e(v).termsOfService,
+      "button-label": e(c)("giftCard.orderGiftCard")
+    }, null, 8, ["content", "button-label"]));
+  }
+}), sa = (g) => (Ee("data-v-30c8e35c"), g = g(), Ae(), g), ra = {
   key: 0,
   id: "konnectio-gift-card-wrapper"
-}, la = { id: "konnectio-gift-card-title" }, ta = { id: "konnectio-gift-card-content" }, oa = { id: "konnectio-gift-card-payment" }, ia = ["innerHTML"], na = { key: 0 }, ra = {
+}, da = { id: "konnectio-gift-card-title" }, ca = { id: "konnectio-gift-card-content" }, ua = { id: "konnectio-gift-card-payment" }, pa = ["innerHTML"], ma = { key: 0 }, fa = {
   key: 0,
   id: "fresh-booking-select-place-type"
-}, sa = {
-  class: /* @__PURE__ */ ue(["fresh-booking-label", "required"])
-}, da = { id: "fresh-booking-select-place-type-input" }, ua = ["innerHTML"], ca = {
+}, va = {
+  class: /* @__PURE__ */ ce(["fresh-booking-label", "required"])
+}, ga = { id: "fresh-booking-select-place-type-input" }, ha = ["innerHTML"], ba = {
   key: 0,
   id: "konnectio-gift-card-order"
-}, pa = { class: "fresh-booking-panel" }, ma = {
+}, ya = { class: "fresh-booking-panel" }, ka = {
   key: 1,
   id: "konnectio-gift-card-remarks"
-}, fa = {
+}, _a = {
   key: 2,
   id: "konnectio-gift-card-order-minimal"
-}, va = { id: "konnectio-gift-card-recaptcha" }, ga = /* @__PURE__ */ Z({
+}, Ca = /* @__PURE__ */ sa(() => /* @__PURE__ */ l("div", { class: "konnectio-divider" }, null, -1)), Va = { id: "konnectio-gift-card-recaptcha" }, wa = /* @__PURE__ */ z({
   name: "GiftCardLayout",
   __name: "GiftCard",
   props: {
@@ -294,207 +305,209 @@ const Qe = { class: "gift-card-skeleton" }, Xe = { class: "gift-card-skeleton-fo
     placeType: {},
     styling: {}
   },
-  setup(u) {
-    const t = u, r = V(() => te({
-      panelMaxWidth: "800px"
-    }, t.styling)), { t: o } = pe(), {
-      name: s,
-      email: h,
-      phone: f,
-      value: v,
-      remark: m,
-      showValue: g,
-      quantity: S,
-      media: G,
-      placeId: k,
-      placeType: l,
-      showFormPage: c,
-      showPaymentPage: y,
-      showConfirmationPage: q,
-      places: F,
-      hasFilledForm: I,
-      hasForcedPlaceType: M,
-      isWaitingForResponse: P,
-      isMetaDataAvailable: A
-    } = X(se()), { initialize: E, orderGiftCard: B } = se(), { isRecaptchaEnabled: O, currency: K } = X(ce());
-    return ye(l, () => {
-      k.value = void 0;
-    }), he(() => {
-      const R = t.placeType ? parseInt(t.placeType) : void 0;
-      E(R);
-    }), (R, i) => (p(), L(Me, { styling: r.value }, {
-      default: D(() => [
-        (p(), L(ke, null, {
-          default: D(() => [
-            n(Ee, {
+  setup(g) {
+    const c = g, v = _(() => ({
+      panelMaxWidth: "800px",
+      ...c.styling
+    })), { t } = J(), {
+      name: p,
+      email: r,
+      phone: u,
+      value: h,
+      remark: i,
+      showValue: b,
+      quantity: f,
+      media: x,
+      placeId: S,
+      placeType: a,
+      showFormPage: m,
+      showPaymentPage: w,
+      showConfirmationPage: $,
+      places: C,
+      hasFilledForm: U,
+      hasForcedPlaceType: B,
+      isWaitingForResponse: E,
+      isMetaDataAvailable: ie
+    } = te(oe()), { initialize: Q, orderGiftCard: R } = oe(), { isRecaptchaEnabled: j, currency: A, hasError: X } = te(le());
+    return _e(a, () => {
+      S.value = void 0;
+    }), Ce(() => {
+      const L = c.placeType ? parseInt(c.placeType) : void 0;
+      Q(L);
+    }), (L, s) => (d(), M(Ue, { styling: v.value }, {
+      default: G(() => [
+        (d(), M(Ve, null, {
+          default: G(() => [
+            o($e, {
               id: "konnectio-gift-card-module",
               type: "gift-card",
-              "access-token": R.accessToken,
-              "data-layout": R.layout
+              "access-token": L.accessToken,
+              "data-layout": L.layout
             }, {
-              default: D(() => [
-                e(A) ? (p(), b("div", aa, [
-                  d("h2", la, [
-                    d("span", null, oe(e(o)("giftCard.title")), 1)
+              default: G(() => [
+                e(X) ? (d(), M(Oe, {
+                  key: 1,
+                  title: "Unable to render Gift card module",
+                  description: "Gift card functionality hasn't been setup for this account. Please contact Octopus PMS for support."
+                })) : (d(), k("div", ra, [
+                  l("h2", da, [
+                    l("span", null, Z(e(t)("giftCard.title")), 1)
                   ]),
-                  d("div", ta, [
-                    W(d("div", oa, [
-                      n(xe)
+                  l("div", ca, [
+                    W(l("div", ua, [
+                      o(qe)
                     ], 512), [
-                      [j, e(y)]
+                      [H, e(w)]
                     ]),
-                    W(d("div", null, [
-                      d("p", {
+                    W(l("div", null, [
+                      l("p", {
                         id: "konnectio-gift-card-description",
-                        innerHTML: e(o)("giftCard.description")
-                      }, null, 8, ia),
-                      d("form", null, [
-                        e(M) ? T("", !0) : (p(), b("div", na, [
-                          e(F) ? (p(), b("div", ra, [
-                            d("label", sa, [
-                              d("span", null, oe(e(o)("giftCard.selectType")), 1)
+                        innerHTML: e(t)("giftCard.description")
+                      }, null, 8, pa),
+                      l("form", null, [
+                        e(B) ? F("", !0) : (d(), k("div", ma, [
+                          e(C) ? (d(), k("div", fa, [
+                            l("label", va, [
+                              l("span", null, Z(e(t)("giftCard.selectType")), 1)
                             ]),
-                            d("div", da, [
-                              d("ul", null, [
-                                (p(!0), b(Ce, null, _e(e(F), (a, U) => (p(), b("li", { key: U }, [
-                                  n(re, {
-                                    modelValue: e(l),
-                                    "onUpdate:modelValue": i[0] || (i[0] = (w) => C(l) ? l.value = w : null),
+                            l("div", ga, [
+                              l("ul", null, [
+                                (d(!0), k(we, null, Fe(e(C), (n, N) => (d(), k("li", { key: N }, [
+                                  o(xe, {
+                                    modelValue: e(a),
+                                    "onUpdate:modelValue": s[0] || (s[0] = (y) => P(a) ? a.value = y : null),
                                     type: "radio",
                                     name: "placeType",
-                                    val: U,
-                                    label: a.label
+                                    val: N,
+                                    label: n.label
                                   }, null, 8, ["modelValue", "val", "label"])
                                 ]))), 128))
                               ]),
-                              e(F)[e(l)] && e(F)[e(l)].data.length > 1 ? (p(), L(qe, {
+                              e(C)[e(a)] && e(C)[e(a)].data.length > 1 ? (d(), M(Pe, {
                                 key: 0,
-                                modelValue: e(k),
-                                "onUpdate:modelValue": i[1] || (i[1] = (a) => C(k) ? k.value = a : null),
-                                placeholder: e(o)("giftCard.selectPlacePlaceholder"),
-                                options: e(F)[e(l)].data,
+                                modelValue: e(S),
+                                "onUpdate:modelValue": s[1] || (s[1] = (n) => P(S) ? S.value = n : null),
+                                placeholder: e(t)("giftCard.selectPlacePlaceholder"),
+                                options: e(C)[e(a)].data,
                                 labelKey: "name",
                                 valueKey: "id",
                                 required: ""
-                              }, null, 8, ["modelValue", "placeholder", "options"])) : T("", !0)
+                              }, null, 8, ["modelValue", "placeholder", "options"])) : F("", !0)
                             ])
-                          ])) : (p(), L(ne, { key: 1 }))
+                          ])) : (d(), M(Se, { key: 1 }))
                         ])),
-                        n(H, {
-                          modelValue: e(s),
-                          "onUpdate:modelValue": i[2] || (i[2] = (a) => C(s) ? s.value = a : null),
+                        o(K, {
+                          modelValue: e(p),
+                          "onUpdate:modelValue": s[2] || (s[2] = (n) => P(p) ? p.value = n : null),
                           type: "text",
                           name: "name",
                           autocomplete: "name",
-                          label: e(o)("giftCard.name"),
+                          label: e(t)("giftCard.name"),
                           icon: "user-alt",
-                          placeholder: e(o)("giftCard.namePlaceholder"),
+                          placeholder: e(t)("giftCard.namePlaceholder"),
                           required: ""
                         }, null, 8, ["modelValue", "label", "placeholder"]),
-                        n(H, {
-                          modelValue: e(h),
-                          "onUpdate:modelValue": i[3] || (i[3] = (a) => C(h) ? h.value = a : null),
+                        o(K, {
+                          modelValue: e(r),
+                          "onUpdate:modelValue": s[3] || (s[3] = (n) => P(r) ? r.value = n : null),
                           type: "email",
                           name: "email",
                           autocomplete: "email",
-                          label: e(o)("giftCard.email"),
+                          label: e(t)("giftCard.email"),
                           icon: "at",
-                          placeholder: e(o)("giftCard.emailPlaceholder"),
+                          placeholder: e(t)("giftCard.emailPlaceholder"),
                           required: ""
                         }, null, 8, ["modelValue", "label", "placeholder"]),
-                        n(De, {
-                          modelValue: e(f),
-                          "onUpdate:modelValue": i[4] || (i[4] = (a) => C(f) ? f.value = a : null),
+                        o(Be, {
+                          modelValue: e(u),
+                          "onUpdate:modelValue": s[4] || (s[4] = (n) => P(u) ? u.value = n : null),
                           icon: "phone-office",
-                          label: e(o)("giftCard.phone"),
-                          placeholder: e(o)("giftCard.phonePlaceholder"),
+                          label: e(t)("giftCard.phone"),
+                          placeholder: e(t)("giftCard.phonePlaceholder"),
                           required: ""
                         }, null, 8, ["modelValue", "label", "placeholder"]),
-                        n(H, {
-                          modelValue: e(v),
-                          "onUpdate:modelValue": i[5] || (i[5] = (a) => C(v) ? v.value = a : null),
+                        o(K, {
+                          modelValue: e(h),
+                          "onUpdate:modelValue": s[5] || (s[5] = (n) => P(h) ? h.value = n : null),
                           type: "number",
                           name: "value",
-                          label: e(o)("giftCard.value"),
+                          label: e(t)("giftCard.value"),
                           icon: "money-bill",
-                          placeholder: e(o)("giftCard.valuePlaceholder"),
-                          suffix: e(K),
+                          placeholder: e(t)("giftCard.valuePlaceholder"),
+                          suffix: e(A),
                           required: ""
                         }, null, 8, ["modelValue", "label", "placeholder", "suffix"]),
-                        n(re, {
-                          modelValue: e(g),
-                          "onUpdate:modelValue": i[6] || (i[6] = (a) => C(g) ? g.value = a : null),
-                          type: "checkbox",
-                          name: "showValue",
-                          label: e(o)("giftCard.showValue"),
-                          checked: e(g)
-                        }, null, 8, ["modelValue", "label", "checked"]),
-                        T("", !0),
-                        n(Ie, {
-                          modelValue: e(S),
-                          "onUpdate:modelValue": i[8] || (i[8] = (a) => C(S) ? S.value = a : null),
-                          label: e(o)("giftCard.quantity"),
+                        F("", !0),
+                        F("", !0),
+                        o(Te, {
+                          modelValue: e(f),
+                          "onUpdate:modelValue": s[8] || (s[8] = (n) => P(f) ? f.value = n : null),
+                          label: e(t)("giftCard.quantity"),
                           icon: "gift-card",
                           required: ""
                         }, null, 8, ["modelValue", "label"])
                       ])
                     ], 512), [
-                      [j, e(c)]
+                      [H, e(m)]
                     ]),
-                    W(d("div", null, [
-                      d("div", {
-                        innerHTML: e(o)("giftCard.thankYou")
-                      }, null, 8, ua)
+                    W(l("div", null, [
+                      l("div", {
+                        innerHTML: e(t)("giftCard.thankYou")
+                      }, null, 8, ha)
                     ], 512), [
-                      [j, e(q)]
+                      [H, e($)]
                     ])
                   ]),
-                  R.layout !== "minimal" && e(c) ? (p(), b("div", ca, [
-                    d("div", pa, [
-                      n(z, {
-                        label: e(o)("giftCard.orderGiftCard"),
+                  L.layout !== "minimal" && e(m) ? (d(), k("div", ba, [
+                    l("div", ya, [
+                      o(O, {
+                        label: e(t)("giftCard.orderGiftCard"),
                         "full-width": !0,
-                        disabled: !e(I),
-                        "is-loading": e(P),
-                        "onUpdate:isLoading": i[9] || (i[9] = (a) => C(P) ? P.value = a : null),
-                        onClickEvent: e(B)
+                        disabled: !e(U),
+                        "is-loading": e(E),
+                        "onUpdate:isLoading": s[9] || (s[9] = (n) => P(E) ? E.value = n : null),
+                        onClickEvent: e(R)
                       }, null, 8, ["label", "disabled", "is-loading", "onClickEvent"])
                     ])
-                  ])) : T("", !0),
-                  e(c) ? (p(), b("div", ma, [
-                    n(H, {
-                      modelValue: e(m),
-                      "onUpdate:modelValue": i[10] || (i[10] = (a) => C(m) ? m.value = a : null),
+                  ])) : F("", !0),
+                  e(m) ? (d(), k("div", ka, [
+                    o(K, {
+                      modelValue: e(i),
+                      "onUpdate:modelValue": s[10] || (s[10] = (n) => P(i) ? i.value = n : null),
                       type: "textarea",
                       name: "remark",
-                      label: e(o)("giftCard.remark"),
+                      label: e(t)("giftCard.remark"),
                       icon: "info-circle",
-                      placeholder: e(o)("giftCard.remarkPlaceholder")
+                      placeholder: e(t)("giftCard.remarkPlaceholder")
                     }, null, 8, ["modelValue", "label", "placeholder"])
-                  ])) : T("", !0),
-                  e(c) ? (p(), b("div", fa, [
-                    n(z, {
-                      label: e(o)("giftCard.orderGiftCard"),
+                  ])) : F("", !0),
+                  e(m) ? (d(), k("div", _a, [
+                    o(O, {
+                      label: e(t)("giftCard.orderGiftCard"),
                       "full-width": !0,
-                      disabled: !e(I),
+                      disabled: !e(U),
                       "data-test": "orderGiftCard",
-                      "is-loading": e(P),
-                      "onUpdate:isLoading": i[11] || (i[11] = (a) => C(P) ? P.value = a : null),
-                      onClickEvent: e(B)
+                      "is-loading": e(E),
+                      "onUpdate:isLoading": s[11] || (s[11] = (n) => P(E) ? E.value = n : null),
+                      onClickEvent: e(R)
                     }, null, 8, ["label", "disabled", "is-loading", "onClickEvent"]),
-                    W(d("div", va, [
-                      n(ze)
+                    l("div", null, [
+                      Ca,
+                      o(ia)
+                    ]),
+                    W(l("div", Va, [
+                      o(De)
                     ], 512), [
-                      [j, e(O)]
+                      [H, e(j)]
                     ])
-                  ])) : T("", !0)
-                ])) : (p(), L(ne, { key: 1 }))
+                  ])) : F("", !0)
+                ]))
               ]),
               _: 1
             }, 8, ["access-token", "data-layout"])
           ]),
-          fallback: D(() => [
-            n(ea)
+          fallback: G(() => [
+            o(ta)
           ]),
           _: 1
         }))
@@ -502,16 +515,35 @@ const Qe = { class: "gift-card-skeleton" }, Xe = { class: "gift-card-skeleton-fo
       _: 1
     }, 8, ["styling"]));
   }
-}), fe = /* @__PURE__ */ me(ga, [["__scopeId", "data-v-ec9ea15b"]]), ba = Re(), N = Ve({ components: { GiftCard: fe } });
-N.use(ba);
-N.use(Le);
-N.use(Ge, { bootstrap: !0 });
-N.mount("#konnectio-gift-card-app");
-const wa = {
-  install: (u) => {
-    u.component("GiftCard", fe);
+}), Y = /* @__PURE__ */ ne(wa, [["__scopeId", "data-v-30c8e35c"]]), Fa = Ie(), Pa = Re();
+class Sa extends HTMLElement {
+  vueApp;
+  constructor() {
+    super();
   }
-};
+  disconnectedCallback() {
+    this.vueApp.unmount();
+  }
+  connectedCallback() {
+    const c = typeof Y == "function" ? Y.options : Y;
+    let v = Array.isArray(c.props) ? c.props : Object.keys(c.props || {});
+    const t = (i) => i.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (b, f) => (f ? "-" : "") + b.toLowerCase()), p = (i) => i.replace(/-./g, (b) => b[1].toUpperCase()), r = {};
+    v = v.map(t);
+    const u = {};
+    for (const i of this.attributes) {
+      const f = i.name.split(".");
+      f.length > 1 && (u[f[0]] || (u[f[0]] = {}), u[f[0]][p(f[1])] = i.value);
+    }
+    for (const i of v) {
+      let b = this.attributes.getNamedItem(i)?.value;
+      u.hasOwnProperty(i) && (b = u[i]), r[i] = b;
+    }
+    this.vueApp = Le(Y, r), this.vueApp.provide("emitter", Pa), this.vueApp.use(Fa), this.vueApp.use(Me), this.vueApp.use(Ge, { bootstrap: !0 });
+    const h = document.createElement("div");
+    this.vueApp.mount(h), this.appendChild(h.children[0]);
+  }
+}
+window.customElements.define("konnectio-gift-card", Sa);
 export {
-  wa as default
+  Sa as default
 };