@konnectio/core 4.0.56-rc3 → 4.0.56-rc31

package/dist/gift-card-validation.js

@@ -1,80 +1,94 @@
-import { defineComponent as X, openBlock as u, createBlock as C, withCtx as d, Suspense as I, createVNode as s, createElementVNode as t, withModifiers as w, unref as a, toDisplayString as e, isRef as b, createElementBlock as A, createCommentVNode as G, pushScopeId as T, popScopeId as x, createApp as B } from "vue";
-import { l as D, s as y, a as V, c as N, m as M, n as c, o as U, p as $, _ as E, q as H, t as P } from "./SelectField.vue_vue_type_style_index_0_lang-j_yHB51P.js";
-import { A as R } from "./ActionField-9I-yAskc.js";
-import { C as q } from "./Container-gHSYMY7q.js";
-import "./_commonjsHelpers-FF1eOqK0.js";
-const F = (i) => (T("data-v-5af38302"), i = i(), x(), i), j = ["innerHTML"], z = {
+import { d as w, f as h, g as S, h as t, m as s, a0 as _, a1 as y, v as X, u as E, s as V, P as A, c as $, k as x, x as m, S as G, A as c, j as e, $ as L, a2 as k, a3 as T, a4 as B, l as D, q as I, D as M, E as N, J as P, K as U, L as j, M as z } from "./Field-C9r1d8IB.js";
+import { A as H } from "./ActionField-qP-3ktN4.js";
+const O = { class: "gift-card-validation-skeleton" }, F = { class: "gift-card-validation-skeleton-form" }, R = { class: "gift-card-validation-skeleton-text" }, Z = { class: "gift-card-validation-skeleton-input" }, q = /* @__PURE__ */ w({
+  __name: "GiftCardValidationSkeleton",
+  setup(C) {
+    return (n, l) => (h(), S("div", O, [
+      t("div", F, [
+        t("div", R, [
+          s(_, { height: "20px" }),
+          s(_, { height: "15px" }),
+          s(_, { height: "15px" })
+        ]),
+        t("div", Z, [
+          s(y),
+          s(y, { "no-label": "" })
+        ])
+      ])
+    ]));
+  }
+}), J = /* @__PURE__ */ X(q, [["__scopeId", "data-v-b1601b74"]]), K = ["innerHTML"], Q = {
   key: 0,
   id: "fresh-booking-gift-card-validation-resume",
   class: "fresh-booking-panel"
-}, J = /* @__PURE__ */ F(() => /* @__PURE__ */ t("span", null, "Loading...", -1)), K = /* @__PURE__ */ X({
+}, W = /* @__PURE__ */ w({
   name: "GiftCardValidationLayout",
   __name: "GiftCardValidation",
   props: {
     accessToken: {},
     styling: {}
   },
-  setup(i) {
-    const { t: o } = D(), {
-      voucher: p,
-      isValid: _,
-      amount: k,
-      expirationDate: v,
-      productName: L,
-      isLoading: r
-    } = y(V()), { currency: S } = y(N()), { apply: m } = V();
-    return (g, n) => (u(), C(q, { styling: g.styling }, {
-      default: d(() => [
-        (u(), C(I, null, {
-          default: d(() => [
+  setup(C) {
+    const { t: n } = E(), {
+      voucher: l,
+      isValid: v,
+      amount: b,
+      expirationDate: f,
+      productName: d,
+      isLoading: p
+    } = V(A()), { currency: a } = V($()), { apply: o } = A();
+    return (i, r) => (h(), x(N, { styling: i.styling }, {
+      default: m(() => [
+        (h(), x(G, null, {
+          default: m(() => [
             s(M, {
               id: "fresh-booking-gift-card-validation-module",
-              "access-token": g.accessToken,
+              "access-token": i.accessToken,
               type: "gift-card"
             }, {
-              default: d(() => [
+              default: m(() => [
                 t("form", {
-                  onSubmit: n[3] || (n[3] = w((l) => a(m)(), ["prevent"]))
+                  onSubmit: r[3] || (r[3] = I((u) => e(o)(), ["prevent"]))
                 }, [
                   t("h4", null, [
-                    t("span", null, e(a(o)("giftCardValidation.title")), 1)
+                    t("span", null, c(e(n)("giftCardValidation.title")), 1)
                   ]),
                   t("p", {
-                    innerHTML: a(o)("giftCardValidation.description")
-                  }, null, 8, j),
-                  s(R, {
-                    modelValue: a(p),
-                    "onUpdate:modelValue": n[0] || (n[0] = (l) => b(p) ? p.value = l : null),
+                    innerHTML: e(n)("giftCardValidation.description")
+                  }, null, 8, K),
+                  s(H, {
+                    modelValue: e(l),
+                    "onUpdate:modelValue": r[0] || (r[0] = (u) => L(l) ? l.value = u : null),
                     icon: "gift-card",
-                    label: a(o)("booking.reservation.giftCardCode"),
-                    buttonLabel: a(o)("giftCardValidation.submitButton"),
+                    label: e(n)("booking.reservation.giftCardCode"),
+                    buttonLabel: e(n)("giftCardValidation.submitButton"),
                     placeholder: "XXXXXXXX",
-                    "is-loading": a(r),
-                    "onUpdate:isLoading": n[1] || (n[1] = (l) => b(r) ? r.value = l : null),
-                    onAction: n[2] || (n[2] = (l) => a(m)())
+                    "is-loading": e(p),
+                    "onUpdate:isLoading": r[1] || (r[1] = (u) => L(p) ? p.value = u : null),
+                    onAction: r[2] || (r[2] = (u) => e(o)())
                   }, null, 8, ["modelValue", "label", "buttonLabel", "is-loading"]),
-                  !a(r) && a(_) ? (u(), A("table", z, [
+                  !e(p) && e(v) ? (h(), S("table", Q, [
                     t("thead", null, [
                       t("tr", null, [
                         t("th", null, [
-                          t("span", null, e(a(o)("giftCardValidation.giftCard")), 1),
-                          s(c, {
+                          t("span", null, c(e(n)("giftCardValidation.giftCard")), 1),
+                          s(k, {
                             icon: "gift-card",
                             type: "fas",
                             color: "header"
                           })
                         ]),
                         t("th", null, [
-                          t("span", null, e(a(o)("giftCardValidation.balance")), 1),
-                          s(c, {
+                          t("span", null, c(e(n)("giftCardValidation.balance")), 1),
+                          s(k, {
                             icon: "money-bill",
                             type: "fas",
                             color: "header"
                           })
                         ]),
                         t("th", null, [
-                          t("span", null, e(a(o)("giftCardValidation.expirationDate")), 1),
-                          s(c, {
+                          t("span", null, c(e(n)("giftCardValidation.expirationDate")), 1),
+                          s(k, {
                             icon: "timer",
                             type: "fas",
                             color: "header"
@@ -85,24 +99,24 @@ const F = (i) => (T("data-v-5af38302"), i = i(), x(), i), j = ["innerHTML"], z =
                     t("tbody", null, [
                       t("tr", null, [
                         t("td", null, [
-                          t("span", null, e(a(L)), 1)
+                          t("span", null, c(e(d)), 1)
                         ]),
                         t("td", null, [
-                          t("span", null, e(a(U)(a(k), a(S))), 1)
+                          t("span", null, c(e(T)(e(b), e(a))), 1)
                         ]),
                         t("td", null, [
-                          t("span", null, e(a($)(a(v))), 1)
+                          t("span", null, c(e(B)(e(f))), 1)
                         ])
                       ])
                     ])
-                  ])) : G("", !0)
+                  ])) : D("", !0)
                 ], 32)
               ]),
               _: 1
             }, 8, ["access-token"])
           ]),
-          fallback: d(() => [
-            J
+          fallback: m(() => [
+            s(J)
           ]),
           _: 1
         }))
@@ -110,15 +124,35 @@ const F = (i) => (T("data-v-5af38302"), i = i(), x(), i), j = ["innerHTML"], z =
       _: 1
     }, 8, ["styling"]));
   }
-}), h = /* @__PURE__ */ E(K, [["__scopeId", "data-v-5af38302"]]), f = B({ components: { GiftCardValidation: h } }), O = H();
-f.use(O);
-f.use(P);
-f.mount("#konnectio-gift-card-validation-app");
-const at = {
-  install: (i) => {
-    i.component("GiftCardValidation", h);
+}), g = /* @__PURE__ */ X(W, [["__scopeId", "data-v-b19b4a0e"]]), Y = P(), tt = z();
+class et extends HTMLElement {
+  vueApp;
+  constructor() {
+    super();
   }
-};
+  disconnectedCallback() {
+    this.vueApp.unmount();
+  }
+  connectedCallback() {
+    const n = typeof g == "function" ? g.options : g;
+    let l = Array.isArray(n.props) ? n.props : Object.keys(n.props || {});
+    const v = (a) => a.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (o, i) => (i ? "-" : "") + o.toLowerCase()), b = (a) => a.replace(/-./g, (o) => o[1].toUpperCase()), f = {};
+    l = l.map(v);
+    const d = {};
+    for (const a of this.attributes) {
+      const i = a.name.split(".");
+      i.length > 1 && (d[i[0]] || (d[i[0]] = {}), d[i[0]][b(i[1])] = a.value);
+    }
+    for (const a of l) {
+      let o = this.attributes.getNamedItem(a)?.value;
+      d.hasOwnProperty(a) && (o = d[a]), f[a] = o;
+    }
+    this.vueApp = U(g, f), this.vueApp.provide("emitter", tt), this.vueApp.use(Y), this.vueApp.use(j);
+    const p = document.createElement("div");
+    this.vueApp.mount(p), this.appendChild(p.children[0]);
+  }
+}
+window.customElements.define("konnectio-gift-card-validation", et);
 export {
-  at as default
+  et as default
 };