@konnectio/core/dist/availability.js

Konnectio Core Frontend Integration.

import { d as w, u as T, r as H, c as l, o as S, a as s, b as o, 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, _ as $, p as z } from "./mitt-CWSmi8M-.js";
import { f as I } from "./index-Dp94FdK7.js";
import { u as j, C as K, _ as U } from "./SelectField.vue_vue_type_style_index_0_lang-Cev1TH7y.js";
import { _ as q } from "./_.vue_vue_type_style_index_0_lang-CW619CRS.js";
import { A as G, H as J } from "./AvailabilitySkeleton-D3iv0cT1.js";
import { E as O } from "./EventAvailabilityForm-CcQwnzol.js";
import { E as Q } from "./ErrorMessage-rPcq7mbu.js";
const R = { class: "konnectio-availability-module" }, W = { class: "konnectio-availability-navigation" }, X = { class: "konnectio-availability-search-form" }, Y = /* @__PURE__ */ w({
  name: "AvailabilityLayout",
  __name: "Availability",
  props: {
    accessToken: {},
    eventLink: {},
    eventLocation: {},
    hideEventLocations: { default: "no" },
    hotelLink: {},
    hotelLocation: {},
    hideHotelLocations: { default: "no" },
    hotelDisableDefaultLocation: { default: "no" },
    styling: {}
  },
  setup(p) {
    const { t: r } = T(), { fetchMetadata: u } = j(), a = p, i = H(), E = l(() => !!a.hotelLink || !!a.eventLink), m = l(() => !!a.hotelLink && !!a.eventLink), k = l(() => i.value === "hotel"), h = l(() => i.value === "event"), b = (t) => i.value = t, _ = l(() => ({
      fontSize: "13px",
      ...a.styling
    }));
    return S(() => {
      !a.hotelLink && a.eventLink ? i.value = "event" : i.value = "hotel";
    }), (t, n) => (o(), s(K, { styling: _.value }, {
      default: c(() => [
        E.value ? (o(), s(B, { key: 0 }, {
          default: c(() => [
            e("div", null, [
              v(q, {
                "access-token": t.accessToken,
                callback: d(u)
              }, {
                default: c(() => [
                  e("div", R, [
                    m.value ? (o(), D(M, { key: 0 }, [
                      e("nav", W, [
                        e("ul", null, [
                          e("li", null, [
                            e("button", {
                              class: L({ active: k.value }),
                              onClick: n[0] || (n[0] = y((g) => b("hotel"), ["prevent"]))
                            }, [
                              e("span", null, A(d(r)("availability.hotel")), 1)
                            ], 2)
                          ]),
                          e("li", null, [
                            e("button", {
                              class: L({ active: h.value }),
                              onClick: n[1] || (n[1] = y((g) => b("event"), ["prevent"]))
                            }, [
                              e("span", null, A(d(r)("availability.events")), 1)
                            ], 2)
                          ])
                        ])
                      ]),
                      n[2] || (n[2] = e("div", { class: "konnectio-availability-divider" }, null, -1))
                    ], 64)) : f("", !0),
                    e("div", X, [
                      v(N, {
                        name: "fade",
                        mode: "out-in",
                        appear: ""
                      }, {
                        default: c(() => [
                          k.value ? (o(), s(J, {
                            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"])) : h.value ? (o(), s(O, {
                            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(G, {
                view: m.value ? "both" : i.value
              }, null, 8, ["view"])
            ])
          ]),
          _: 1
        })) : (o(), s(Q, {
          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__ */ U(Y, [["__scopeId", "data-v-a8e928a0"]]), Z = P(), x = $, ee = x();
class te extends HTMLElement {
  vueApp;
  constructor() {
    super();
  }
  disconnectedCallback() {
    this.vueApp.unmount();
  }
  connectedCallback() {
    const r = F(C, this.attributes);
    this.vueApp = V(C, r), this.vueApp.provide("emitter", ee), this.vueApp.use(I), this.vueApp.use(z), this.vueApp.use(Z);
    const u = document.createElement("div");
    this.vueApp.mount(u), this.appendChild(u.children[0]);
  }
}
window.customElements.define("konnectio-availability", te);
export {
  te as default
};
//# sourceMappingURL=availability.js.map