@konnectio/core/dist/availability.js

Konnectio Core Frontend Integration.

import { d as T, u as x, r as H, c as o, o as S, a as s, b as l, w as c, S as B, e, f as v, g as d, h as D, i as f, F as M, j as y, n as L, t as A, T as N, k as P, l as F, m as V, _, p as $ } from "./mitt-CvmiLPAX.js";
import { f as z } from "./index-DNcHdiEm.js";
import { u as I, C as j, _ as K } from "./SelectField.vue_vue_type_style_index_0_lang-C60Scz2U.js";
import { _ as U } from "./_.vue_vue_type_style_index_0_lang-CgwYyRP7.js";
import { A as q, H as G } from "./AvailabilitySkeleton-B3c8a2Jy.js";
import { E as J } from "./EventAvailabilityForm-5KSyuCOP.js";
import { E as O } from "./ErrorMessage-CgdJmMED.js";
const Q = { class: "konnectio-availability-module" }, R = { class: "konnectio-availability-navigation" }, W = { class: "konnectio-availability-search-form" }, X = /* @__PURE__ */ T({
  name: "AvailabilityLayout",
  __name: "Availability",
  props: {
    accessToken: {},
    eventLink: {},
    eventLocation: {},
    hideEventLocations: { default: "no" },
    hotelLink: {},
    hotelLocation: {},
    hideHotelLocations: { default: "no" },
    hotelDisableDefaultLocation: { default: "no" },
    styling: {}
  },
  setup(t) {
    const { t: u } = x(), { fetchMetadata: r } = I(), a = t, i = H(), E = o(() => !!a.hotelLink || !!a.eventLink), m = o(() => !!a.hotelLink && !!a.eventLink), p = o(() => i.value === "hotel"), k = o(() => i.value === "event"), h = (b) => i.value = b, g = o(() => ({
      fontSize: "13px",
      ...a.styling
    }));
    return S(() => {
      !a.hotelLink && a.eventLink ? i.value = "event" : i.value = "hotel";
    }), (b, n) => (l(), s(j, { styling: g.value }, {
      default: c(() => [
        E.value ? (l(), s(B, { key: 0 }, {
          default: c(() => [
            e("div", null, [
              v(U, {
                "access-token": t.accessToken,
                callback: d(r)
              }, {
                default: c(() => [
                  e("div", Q, [
                    m.value ? (l(), D(M, { key: 0 }, [
                      e("nav", R, [
                        e("ul", null, [
                          e("li", null, [
                            e("button", {
                              class: L({ active: p.value }),
                              onClick: n[0] || (n[0] = y((w) => h("hotel"), ["prevent"]))
                            }, [
                              e("span", null, A(d(u)("availability.hotel")), 1)
                            ], 2)
                          ]),
                          e("li", null, [
                            e("button", {
                              class: L({ active: k.value }),
                              onClick: n[1] || (n[1] = y((w) => h("event"), ["prevent"]))
                            }, [
                              e("span", null, A(d(u)("availability.events")), 1)
                            ], 2)
                          ])
                        ])
                      ]),
                      n[2] || (n[2] = e("div", { class: "konnectio-availability-divider" }, null, -1))
                    ], 64)) : f("", !0),
                    e("div", W, [
                      v(N, {
                        name: "fade",
                        mode: "out-in",
                        appear: ""
                      }, {
                        default: c(() => [
                          p.value ? (l(), s(G, {
                            key: 0,
                            link: t.hotelLink,
                            "selected-location": Number(t.hotelLocation),
                            "disable-default-location": t.hotelDisableDefaultLocation === "yes",
                            "hide-locations": t.hideHotelLocations === "yes"
                          }, null, 8, ["link", "selected-location", "disable-default-location", "hide-locations"])) : k.value ? (l(), s(J, {
                            key: 1,
                            link: t.eventLink,
                            "selected-location": Number(t.eventLocation),
                            "hide-locations": t.hideEventLocations === "yes"
                          }, null, 8, ["link", "selected-location", "hide-locations"])) : f("", !0)
                        ]),
                        _: 1
                      })
                    ])
                  ])
                ]),
                _: 1
              }, 8, ["access-token", "callback"])
            ])
          ]),
          fallback: c(() => [
            e("div", null, [
              v(q, {
                view: m.value ? "both" : i.value
              }, null, 8, ["view"])
            ])
          ]),
          _: 1
        })) : (l(), s(O, {
          key: 1,
          title: "Unable to render Availability module",
          description: `The 'hotel-link' and/or 'event-link' properties are missing.<br>\r
            The Konnectio Availability module can't be rendered without at least one link property set.`
        }))
      ]),
      _: 1
    }, 8, ["styling"]));
  }
}), C = /* @__PURE__ */ K(X, [["__scopeId", "data-v-a8e928a0"]]), Y = P(), Z = _, ee = Z();
class te extends HTMLElement {
  vueApp;
  constructor() {
    super();
  }
  disconnectedCallback() {
    this.vueApp.unmount();
  }
  connectedCallback() {
    const u = F(C, this.attributes);
    this.vueApp = V(C, u), this.vueApp.provide("emitter", ee), this.vueApp.use(z), this.vueApp.use($), this.vueApp.use(Y);
    const r = document.createElement("div");
    this.vueApp.mount(r), this.appendChild(r.children[0]);
  }
}
window.customElements.define("konnectio-availability", te);
export {
  te as default
};
//# sourceMappingURL=availability.js.map