@visitscotland/component-library 5.12.5 → 5.14.0

package/dist/components/vs-component-library.mjs

@@ -33851,14 +33851,12 @@ async function cludoSearch(e, n, t, a, r) {
   if (u.eventsApiError = !1, u.cludoError = !1, !n)
     return u.cludoError = !0, u.isLoading = !1, {
       results: [],
-      totalResults: 0,
-      categories: []
+      totalResults: 0
     };
-  if (a === "Events & Festivals" && r)
+  if (r === "events-festivals")
     return {
       results: [],
-      totalResults: 0,
-      categories: r
+      totalResults: 0
     };
   try {
     const d = await fetch(l, {
@@ -33880,21 +33878,15 @@ async function cludoSearch(e, n, t, a, r) {
     });
     if (!d.ok)
       throw u.cludoError = !0, u.isLoading = !1, new Error(`Cludo response message: ${d.status}`);
-    const m = await d.json(), f = cleanData$1(m);
-    return a === "Events & Festivals" && !r ? {
-      results: [],
-      totalResults: 0,
-      categories: m.Facets.Category.Items
-    } : {
-      results: f,
-      totalResults: m.TotalDocument,
-      categories: m.Facets.Category.Items
+    const m = await d.json();
+    return {
+      results: cleanData$1(m),
+      totalResults: m.TotalDocument
     };
   } catch {
     return u.cludoError = !0, u.isLoading = !1, {
       results: [],
-      totalResults: 0,
-      categories: []
+      totalResults: 0
     };
   }
 }
@@ -33919,7 +33911,7 @@ function cleanData(e) {
 }
 async function eventSearch(e, n, t, a, r, s, o, i) {
   const l = useFederatedSearchStore();
-  if (l.eventsApiError = !1, l.cludoError = !1, a === "Events & Festivals" || !a) {
+  if (l.eventsApiError = !1, l.cludoError = !1, a === "events-festivals" || !a) {
     let c = `${e}?query=${n}`;
     c = t > 1 ? `${c}&page=${t}` : c, c = s !== "" ? `${c}&startDate=${s}` : c, c = o !== "" ? `${c}&endDate=${o}` : c, c = i ? `${c}&sort=${i.key}` : c, r.forEach((u) => {
       c += `&category=${u.toLowerCase()}`;
@@ -33966,11 +33958,7 @@ async function cludoAutocomplete(e, n) {
   }
 }
 const useFederatedSearchStore = defineStore("federatedSearch", () => {
-  const e = ref(null), n = ref(void 0), t = ref(!1), a = ref(1), r = ref(void 0), s = ref(!1), o = ref(!1), i = ref(null), l = ref(""), c = ref(null), u = ref([]), d = ref(void 0), m = ref(!1), f = ref(""), p = ref(""), g = ref(void 0), _ = ref(void 0);
-  async function v() {
-    const S = await cludoSearch("*", n.value, 1, "");
-    e.value = S.categories;
-  }
+  const e = ref(null), n = ref(void 0), t = ref(!1), a = ref(1), r = ref(void 0), s = ref(!1), o = ref(!1), i = ref(null), l = ref(""), c = ref(null), u = ref(null), d = ref([]), m = ref(void 0), f = ref(!1), p = ref(""), g = ref(""), _ = ref(void 0), v = ref(void 0);
   async function b() {
     o.value = !0;
     const S = await cludoSearch(
@@ -33978,28 +33966,28 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
       n.value,
       a.value,
       c.value,
-      e.value
+      u.value
     ), w = await eventSearch(
       r.value,
       l.value,
       a.value,
-      c.value,
       u.value,
-      f.value,
+      d.value,
       p.value,
-      g.value
+      g.value,
+      _.value
     );
-    i.value = [...S.results, ...w.results], d.value = S.totalResults + w.totalResults, e.value || (e.value = S.categories), o.value = !1;
+    i.value = [...S.results, ...w.results], m.value = S.totalResults + w.totalResults, o.value = !1;
   }
   async function k() {
     return cludoAutocomplete(l.value, n.value);
   }
   function C(S) {
     const w = new URL(window.location);
-    if (l.value ? w.searchParams.set("search-term", l.value) : w.searchParams.delete("search-term"), c.value ? w.searchParams.set("category", encodeURIComponent(c.value)) : w.searchParams.delete("category"), u.value.length > 0 && w.searchParams.set("sub-category", encodeURIComponent(u.value.join(","))), S ? (a.value = 1, w.searchParams.set("page", a.value.toString())) : a.value && a.value > 1 ? w.searchParams.set("page", a.value.toString()) : w.searchParams.delete("page"), f.value ? w.searchParams.set("start-date", f.value) : w.searchParams.delete("start-date"), p.value ? w.searchParams.set("end-date", p.value) : w.searchParams.delete("end-date"), g.value ? w.searchParams.set("sort-by", g.value.key) : w.searchParams.delete("sort-by"), !m.value)
+    if (l.value ? w.searchParams.set("search-term", l.value) : w.searchParams.delete("search-term"), u.value ? w.searchParams.set("category", encodeURIComponent(u.value)) : w.searchParams.delete("category"), d.value.length > 0 && w.searchParams.set("sub-category", encodeURIComponent(d.value.join(","))), S ? (a.value = 1, w.searchParams.set("page", a.value.toString())) : a.value && a.value > 1 ? w.searchParams.set("page", a.value.toString()) : w.searchParams.delete("page"), p.value ? w.searchParams.set("start-date", p.value) : w.searchParams.delete("start-date"), g.value ? w.searchParams.set("end-date", g.value) : w.searchParams.delete("end-date"), _.value ? w.searchParams.set("sort-by", _.value.key) : w.searchParams.delete("sort-by"), !f.value)
       window.history.pushState({}, "", w), b();
     else {
-      const E = `./${_.value}/${w.search}`;
+      const E = `./${v.value}/${w.search}`;
       window.location.href = E;
     }
   }
@@ -34011,19 +33999,19 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     eventsApi: r,
     eventsApiError: s,
     getAutoComplete: k,
-    getCludoCategories: v,
     getSearchResults: b,
     isLoading: o,
     results: i,
     searchTerm: l,
     selectedCategory: c,
-    selectedSubCategory: u,
-    totalResults: d,
+    selectedCategoryKey: u,
+    selectedSubCategory: d,
+    totalResults: m,
     navigateToResultsPage: C,
-    isHomePage: m,
-    startDate: f,
-    endDate: p,
-    sortBy: g
+    isHomePage: f,
+    startDate: p,
+    endDate: g,
+    sortBy: _
   };
 }), __default__ = {
   name: "VsDivider"
@@ -34164,9 +34152,9 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
             class: "vs-fed-filter__category-button",
             "data-test": `vs-fed-filter__category-button--${l.id}`,
             icon: n.variant === "primary" ? l.icon : null,
-            variant: a(l.Key) ? "primary" : "secondary",
+            variant: a(l.Label) ? "primary" : "secondary",
             size: n.variant === "secondary" ? "sm" : "md",
-            onClick: (u) => o.$emit("filter-updated", l.Key)
+            onClick: (u) => o.$emit("filter-updated", l)
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(l.Label || l.Key), 1)
@@ -34252,28 +34240,28 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     }
   },
   setup(e) {
-    const n = e, t = useFederatedSearchStore(), a = ref();
-    async function r(c) {
-      t.currentPage = 1, t.searchTerm = c.value;
-      const u = window.location.search, d = new URLSearchParams(u);
-      t.searchTerm && d.get("search-term") !== t.searchTerm && (a.value = await t.getAutoComplete());
+    const n = e, t = useFederatedSearchStore(), a = ref(), r = inject("cludoCategories");
+    async function s(u) {
+      t.currentPage = 1, t.searchTerm = u.value;
+      const d = window.location.search, m = new URLSearchParams(d);
+      t.searchTerm && m.get("search-term") !== t.searchTerm && (a.value = await t.getAutoComplete());
     }
-    function s() {
+    function o() {
       a.value = null, t.navigateToResultsPage();
     }
-    function o(c) {
-      t.searchTerm = c, a.value = null, t.navigateToResultsPage();
+    function i(u) {
+      t.searchTerm = u, a.value = null, t.navigateToResultsPage();
     }
-    function i(c) {
-      const u = new URL(window.location);
-      u.searchParams.delete("page"), t.currentPage = 1, u.searchParams.delete("start-date"), u.searchParams.delete("end-date"), t.startDate = "", t.endDate = "", t.sortBy = void 0, t.selectedCategory = t.selectedCategory !== c ? c : "", t.navigateToResultsPage(!0);
+    function l(u) {
+      const d = new URL(window.location);
+      d.searchParams.delete("page"), t.currentPage = 1, d.searchParams.delete("start-date"), d.searchParams.delete("end-date"), t.startDate = "", t.endDate = "", t.sortBy = void 0, t.selectedCategory = t.selectedCategory !== u.Label ? u.Label : "", t.selectedCategoryKey = t.selectedCategoryKey !== u.Key ? u.Key : "", t.navigateToResultsPage(!0);
     }
-    function l(c) {
-      if (!t.selectedSubCategory.includes(c))
-        t.selectedSubCategory.push(c);
+    function c(u) {
+      if (!t.selectedSubCategory.includes(u))
+        t.selectedSubCategory.push(u);
       else {
-        const u = t.selectedSubCategory.indexOf(c);
-        u >= 0 && t.selectedSubCategory.splice(u, 1);
+        const d = t.selectedSubCategory.indexOf(u);
+        d >= 0 && t.selectedSubCategory.splice(d, 1);
       }
       t.navigateToResultsPage(!0);
     }
@@ -34282,14 +34270,14 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         apiKey: n.cludoApiKey,
         customerId: n.cludoCustomerId,
         engineId: n.cludoEngineId
-      }, t.isHomePage = n.isHomePage, t.getCludoCategories();
-      const c = window.location.search, u = new URLSearchParams(c);
-      u.has("search-term") && (t.searchTerm = u.get("search-term")), u.has("category") && (t.selectedCategory = decodeURIComponent(u.get("category"))), u.has("sub-category") && t.selectedSubCategory.push(decodeURIComponent(u.get("sub-category"))), (u.has("search-term") || u.has("category")) && t.getSearchResults();
-    }), (c, u) => (openBlock(), createElementBlock("div", _hoisted_1$2, [
+      }, t.isHomePage = n.isHomePage;
+      const u = window.location.search, d = new URLSearchParams(u);
+      d.has("search-term") && (t.searchTerm = d.get("search-term")), d.has("category") && (t.selectedCategory = decodeURIComponent(d.get("category"))), d.has("sub-category") && t.selectedSubCategory.push(decodeURIComponent(d.get("sub-category"))), (d.has("search-term") || d.has("category")) && t.getSearchResults();
+    }), (u, d) => (openBlock(), createElementBlock("div", _hoisted_1$2, [
       createElementVNode("div", _hoisted_2$2, [
         createElementVNode("div", _hoisted_3$1, [
           createElementVNode("label", _hoisted_4$1, [
-            u[0] || (u[0] = createElementVNode("span", { class: "visually-hidden" }, " Search for something ", -1)),
+            d[0] || (d[0] = createElementVNode("span", { class: "visually-hidden" }, " Search for something ", -1)),
             createVNode(unref(VsIcon), {
               icon: "vs-icon-control-search",
               size: "xs"
@@ -34303,14 +34291,14 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
             placeholder: n.labels.searchLabel,
             type: "search",
             value: unref(t).searchTerm,
-            onUpdated: r,
-            onKeyup: withKeys(s, ["enter"])
+            onUpdated: s,
+            onKeyup: withKeys(o, ["enter"])
           }, null, 8, ["placeholder", "value"])
         ]),
         createVNode(unref(VsButton), {
           class: "d-none d-lg-block px-200",
           disabled: unref(t).isLoading,
-          onClick: s
+          onClick: o
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(n.labels.search), 1)
@@ -34322,24 +34310,24 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         a.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
           createVNode(unref(VsList), { unstyled: "" }, {
             default: withCtx(() => [
-              (openBlock(!0), createElementBlock(Fragment, null, renderList(a.value, (d) => (openBlock(), createElementBlock("li", {
-                key: d,
+              (openBlock(!0), createElementBlock(Fragment, null, renderList(a.value, (m) => (openBlock(), createElementBlock("li", {
+                key: m,
                 class: "vs-fed-search-input--autocomplete__suggestion",
-                onClick: (m) => o(d),
-                onKeyup: withKeys((m) => o(d), ["enter"]),
+                onClick: (f) => i(m),
+                onKeyup: withKeys((f) => i(m), ["enter"]),
                 tabindex: "0"
-              }, toDisplayString(d), 41, _hoisted_7$1))), 128))
+              }, toDisplayString(m), 41, _hoisted_7$1))), 128))
             ]),
             _: 1
           })
         ])) : createCommentVNode("", !0)
       ]),
-      unref(t).cludoCategories ? (openBlock(), createBlock(_sfc_main$3, {
+      unref(r) ? (openBlock(), createBlock(_sfc_main$3, {
         key: 0,
         "active-filter": unref(t).selectedCategory,
-        "filter-categories": unref(t).cludoCategories,
+        "filter-categories": unref(r),
         wrap: !0,
-        onFilterUpdated: i
+        onFilterUpdated: l
       }, null, 8, ["active-filter", "filter-categories"])) : createCommentVNode("", !0),
       unref(t).selectedCategory === "Events & Festivals" && n.subFilters ? (openBlock(), createBlock(_sfc_main$3, {
         key: 1,
@@ -34347,7 +34335,7 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         class: "mt-200",
         "filter-categories": n.subFilters,
         variant: "secondary",
-        onFilterUpdated: l
+        onFilterUpdated: c
       }, {
         "fed-filter-header": withCtx(() => [
           createTextVNode(toDisplayString(n.labels.refine), 1)
@@ -34427,7 +34415,8 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
               value: (/* @__PURE__ */ new Date()).toJSON().slice(0, 10),
               type: "date",
               "auto-complete": !1,
-              onInput: i[0] || (i[0] = (l) => o.$emit("from-date-updated", l.target.value))
+              onInput: i[0] || (i[0] = (l) => o.$emit("from-date-updated", l.target.value)),
+              "data-chromatic": "ignore"
             }, null, 8, ["value"])
           ]),
           _: 1
@@ -34525,6 +34514,13 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
       type: String,
       default: getEnvValue("EVENTS_API_URL")
     },
+    /**
+     * Array of cludo categories.
+    */
+    cludoCategories: {
+      type: Array,
+      default: void 0
+    },
     /**
      * Array of sub filters.
     */
@@ -34574,7 +34570,9 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         message: "",
         error: !1
       }
-    ), a = e, r = computed$1(() => Math.ceil(n.totalResults / 12));
+    ), a = e;
+    provide("cludoCategories", a.cludoCategories);
+    const r = computed$1(() => Math.ceil(n.totalResults / 12));
     function s() {
       // Start date is after end date
       n.endDate && n.startDate > n.endDate ? (t.value.error = !0, t.value.message = a.errorMessages.incorrectDateOrder) : /* Events API down */ n.selectedCategory === "Events & Festivals" && n.eventsApiError && !n.isLoading ? (t.value.error = !0, t.value.message = a.errorMessages.eventError) : /* Cludo down */ (n.searchTerm || n.selectedCategory) && n.selectedCategory !== "Events & Festivals" && n.cludoError && !n.isLoading ? (t.value.error = !0, t.value.message = a.errorMessages.cludoError) : /* No Results */ n.totalResults === 0 && !n.isLoading ? (t.value.error = !0, t.value.message = a.errorMessages.noResults) : (t.value.error = !1, t.value.message = "");
@@ -34584,7 +34582,7 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         apiKey: a.cludoApiKey,
         customerId: a.cludoCustomerId,
         engineId: a.cludoEngineId
-      }, n.eventsApi = a.eventsApi, s(), typeof window < "u" && typeof document < "u") {
+      }, n.eventsApi = a.eventsApi, n.cludoCategories = a.cludoCategories, s(), typeof window < "u" && typeof document < "u") {
         const f = new URLSearchParams(document.location.search), p = f.get("search-term"), g = parseInt(f.get("page"), 10);
         g && (n.currentPage = g), p && (n.searchTerm = p, n.getSearchResults());
       }
@@ -34633,6 +34631,14 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
           labels: a.searchLabels
         }, null, 8, ["cludo-api-key", "cludo-customer-id", "cludo-engine-id", "sub-filters", "labels"]),
         createVNode(_sfc_main$4, { class: "my-200" }),
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(n).cludoCategories, (g, _) => withDirectives((openBlock(), createElementBlock("div", {
+          key: _,
+          class: "mb-200"
+        }, [
+          renderSlot(f.$slots, `federated-search__spotlight-${g.Key}`)
+        ], 512)), [
+          [vShow, unref(n).selectedCategoryKey === g.Key]
+        ])), 128)),
         unref(n).results ? (openBlock(), createElementBlock("div", _hoisted_3, [
           createElementVNode("div", null, [
             createVNode(unref(VsHeading), {