@visitscotland/component-library 5.18.0 → 5.18.2

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

@@ -1,7 +1,7 @@
 import { createElementBlock, openBlock, renderSlot, resolveComponent, createBlock, normalizeClass, withCtx, createElementVNode, createVNode, withDirectives, createCommentVNode, normalizeStyle, vShow, inject, mergeProps, toDisplayString, ref, onMounted, onUnmounted, createTextVNode, Fragment, renderList, resolveDirective, withModifiers, normalizeProps, createSlots, getCurrentInstance, defineComponent, computed as computed$1, watch, reactive, provide, onBeforeMount, isRef, onBeforeUnmount, unref, isReactive, isReadonly, nextTick, isVNode, markRaw, toRef, resolveDynamicComponent, h, withKeys, mergeModels, useModel, toHandlers, vModelText, guardReactiveProps, onUpdated } from "vue";
 import { _ as _export_sfc, V as VsButton, d as dataLayerMixin, a as VsHeading, n as nn, b as an, c as VsIcon, r as rn, l as lodashExports, e as VsBody, f as VsContainer, g as VsRow, h as VsCol, i as ci, p as pi$2, j as en, k as dmoUrls, m as VsImg, E as Ed, o as axios, q as designTokens, Y as Yo, Z as Zo, s as pn, O as Ou, T as Tu, t as ku, u as VsWarning, v as fn, w as un, X as Xi, x as commonjsGlobal, y as require$$0$1, z as requireHasown, A as requireShams, B as callBound, C as isGeneratorFunction, D as isTypedArray, F as whichTypedArray, G as getAugmentedNamespace, H as getDefaultExportFromCjs, L as Lu, I as ld, J as _a, K as products, M as paths, N as monthsEnglish, P as VsLoading, Q as ol, R as wn, S as Ea, U as Bn, W as Je, $ as St, a0 as Pa, a1 as Ka, a2 as vc, a3 as dc } from "./LoadingSpinner-Bt2Ghlfy.mjs";
 import { a4 as Se } from "./LoadingSpinner-Bt2Ghlfy.mjs";
-import { defineStore } from "pinia";
+import { defineStore, storeToRefs } from "pinia";
 const _sfc_main$2r = {
   name: "VsAccordion",
   status: "prototype",
@@ -34029,12 +34029,12 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     if (l.value ? D.searchParams.set("search-term", l.value) : D.searchParams.delete("search-term"), u.value ? D.searchParams.set("category", encodeURIComponent(u.value)) : D.searchParams.delete("category"), m.value.length > 0 ? D.searchParams.set("sub-category", encodeURIComponent(m.value.join(","))) : D.searchParams.delete("sub-category"), A ? (a.value = 1, D.searchParams.set("page", a.value.toString())) : a.value && a.value > 1 ? D.searchParams.set("page", a.value.toString()) : D.searchParams.delete("page"), v.value ? D.searchParams.set("start-date", v.value) : D.searchParams.delete("start-date"), b.value ? D.searchParams.set("end-date", b.value) : D.searchParams.delete("end-date"), k.value ? D.searchParams.set("sort-by", k.value) : D.searchParams.delete("sort-by"), !_.value)
       window.history.pushState({}, "", D), V();
     else {
-      const O = `./${C.value}/${D.search}`;
+      const O = `${C.value}/${D.search}`;
       window.location.href = O;
     }
   }
   return {
-    cludoCategories: e,
+    filters: e,
     currentPage: a,
     cludoCredentials: n,
     cludoError: t,
@@ -34045,6 +34045,7 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     isLoading: o,
     results: i,
     searchTerm: l,
+    searchUrl: C,
     selectedCategory: c,
     selectedCategoryKey: u,
     selectedSubCategory: d,
@@ -34145,75 +34146,82 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     }
   },
   emits: ["filter-updated"],
-  setup(e) {
-    const n = e, t = ref(null);
-    function a(l) {
-      return typeof n.activeFilter == "string" ? n.activeFilter === l : n.activeFilter && typeof n.activeFilter == "object" ? n.activeFilter.includes(l) : !1;
+  setup(e, { expose: n }) {
+    const t = e, a = ref(null);
+    function r(u) {
+      return typeof t.activeFilter == "string" ? t.activeFilter === u : t.activeFilter && typeof t.activeFilter == "object" ? t.activeFilter.includes(u) : !1;
     }
-    function r(l) {
-      var c, u;
-      l === "left" ? (c = t.value) == null || c.scrollBy(-200, 0) : l === "right" && ((u = t.value) == null || u.scrollBy(200, 0));
+    function s(u) {
+      var d, m;
+      u === "left" ? (d = a.value) == null || d.scrollBy(-200, 0) : u === "right" && ((m = a.value) == null || m.scrollBy(200, 0));
     }
-    function s() {
+    function o() {
+      var u;
+      (u = a.value) == null || u.scrollTo(0, 0);
+    }
+    n({
+      resetScroll: o
+    });
+    function i() {
       return [
-        `vs-fed-filter__scroll-rail--${n.variant}`,
-        n.wrap ? "vs-fed-filter__scroll-rail--wrap" : ""
+        `vs-fed-filter__scroll-rail--${t.variant}`,
+        t.wrap ? "vs-fed-filter__scroll-rail--wrap" : ""
       ];
     }
-    const o = computed$1(() => [...n.filterCategories].sort((c, u) => {
-      const d = (c.Label || c.Key || "").toLowerCase(), m = (u.Label || u.Key || "").toLowerCase();
-      return d < m ? -1 : d > m ? 1 : 0;
+    const l = computed$1(() => [...t.filterCategories].sort((d, m) => {
+      const f = (d.Label || d.Key || "").toLowerCase(), p = (m.Label || m.Key || "").toLowerCase();
+      return f < p ? -1 : f > p ? 1 : 0;
     }));
-    function i(l) {
-      let c;
-      switch (l) {
+    function c(u) {
+      let d;
+      switch (u) {
         case "accommodation":
-          c = "fa-regular fa-bed";
+          d = "fa-regular fa-bed";
           break;
         case "active-adventure":
-          c = "fa-kit fa-vs-landscape";
+          d = "fa-kit fa-vs-landscape";
           break;
         case "city-break":
-          c = "fa-regular fa-city";
+          d = "fa-regular fa-city";
           break;
         case "culture-history":
-          c = "fa-regular fa-chess-rook";
+          d = "fa-regular fa-chess-rook";
           break;
         case "events":
-          c = "fa-regular fa-calendar-range";
+          d = "fa-regular fa-calendar-range";
           break;
         case "family-friendly":
-          c = "fa-regular fa-family";
+          d = "fa-regular fa-family";
           break;
         case "food-drink":
-          c = "fa-regular fa-utensils";
+          d = "fa-regular fa-utensils";
           break;
         case "nature-outdoors":
-          c = "fa-regular fa-leaf";
+          d = "fa-regular fa-leaf";
           break;
         case "tours":
-          c = "fa-regular fa-binoculars";
+          d = "fa-regular fa-binoculars";
           break;
         case "travel-information":
-          c = "fa-regular fa-circle-info";
+          d = "fa-regular fa-circle-info";
           break;
         case "wellness":
-          c = "fa-regular fa-spa";
+          d = "fa-regular fa-spa";
           break;
         default:
-          c = null;
+          d = null;
           break;
       }
-      return c;
+      return d;
     }
-    return (l, c) => (openBlock(), createElementBlock("div", _hoisted_1$3, [
-      l.$slots["fed-filter-header"] && l.$slots["fed-filter-header"]() ? (openBlock(), createBlock(VsBody, {
+    return (u, d) => (openBlock(), createElementBlock("div", _hoisted_1$3, [
+      u.$slots["fed-filter-header"] && u.$slots["fed-filter-header"]() ? (openBlock(), createBlock(VsBody, {
         key: 0,
         class: "vs-fed-filter__header mb-025 ms-025",
         "data-test": "vs-fed-filter__header"
       }, {
         default: withCtx(() => [
-          renderSlot(l.$slots, "fed-filter-header")
+          renderSlot(u.$slots, "fed-filter-header")
         ]),
         _: 3
       })) : createCommentVNode("", !0),
@@ -34225,31 +34233,31 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
           "icon-only": "",
           class: "vs-fed-filter__scroll-button me-050",
           "data-test": "vs-fed-filter__scroll-button--left",
-          onClick: c[0] || (c[0] = (u) => r("left")),
-          "aria-label": n.scrollLeftText
+          onClick: d[0] || (d[0] = (m) => s("left")),
+          "aria-label": t.scrollLeftText
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(n.scrollLeftText), 1)
+            createTextVNode(toDisplayString(t.scrollLeftText), 1)
           ]),
           _: 1
         }, 8, ["aria-label"])) : createCommentVNode("", !0),
         createElementVNode("div", {
-          class: normalizeClass(["vs-fed-filter__scroll-rail", s()]),
-          id: `vs-fed-filter__scroll-rail--${n.variant}`,
+          class: normalizeClass(["vs-fed-filter__scroll-rail", i()]),
+          id: `vs-fed-filter__scroll-rail--${t.variant}`,
           ref_key: "scrollRail",
-          ref: t
+          ref: a
         }, [
-          (openBlock(!0), createElementBlock(Fragment, null, renderList(o.value, (u, d) => (openBlock(), createBlock(VsButton, {
-            key: d,
+          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (m, f) => (openBlock(), createBlock(VsButton, {
+            key: f,
             class: "vs-fed-filter__category-button",
-            "data-test": `vs-fed-filter__category-button--${u.Key}`,
-            icon: n.variant === "primary" ? i(u.Key) : null,
-            variant: a(u.Key) ? "primary" : "secondary",
-            size: n.variant === "secondary" ? "sm" : "md",
-            onClick: (m) => l.$emit("filter-updated", u)
+            "data-test": `vs-fed-filter__category-button--${m.Key}`,
+            icon: t.variant === "primary" ? c(m.Key) : null,
+            variant: r(m.Key) ? "primary" : "secondary",
+            size: t.variant === "secondary" ? "sm" : "md",
+            onClick: (p) => u.$emit("filter-updated", m)
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(u.Label || u.Key), 1)
+              createTextVNode(toDisplayString(m.Label || m.Key), 1)
             ]),
             _: 2
           }, 1032, ["data-test", "icon", "variant", "size", "onClick"]))), 128))
@@ -34261,11 +34269,11 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
           "icon-only": "",
           class: "vs-fed-filter__scroll-button ms-050",
           "data-test": "vs-fed-filter__scroll-button--right",
-          onClick: c[1] || (c[1] = (u) => r("right")),
-          "aria-label": n.scrollRightText
+          onClick: d[1] || (d[1] = (m) => s("right")),
+          "aria-label": t.scrollRightText
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(n.scrollRightText), 1)
+            createTextVNode(toDisplayString(t.scrollRightText), 1)
           ]),
           _: 1
         }, 8, ["aria-label"])) : createCommentVNode("", !0)
@@ -34316,6 +34324,13 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
       type: String,
       default: void 0
     },
+    /**
+     * Array of filters to be used in the FedSearchInput component.
+    */
+    filters: {
+      type: Array,
+      default: void 0
+    },
     /**
      * Array of sub filters to be used in the FedSearchInput component.
     */
@@ -34332,40 +34347,40 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     }
   },
   setup(e) {
-    const n = e, t = useFederatedSearchStore(), a = ref(), r = inject("cludoCategories");
-    async function s(f) {
-      t.currentPage = 1, t.searchTerm = f.value.trim();
-      const p = window.location.search, g = new URLSearchParams(p);
-      t.searchTerm && g.get("search-term") !== t.searchTerm && (a.value = await t.getAutoComplete()), t.searchTerm || (a.value = null);
+    const n = e, t = useFederatedSearchStore(), { isLoading: a } = storeToRefs(t), r = ref(), s = ref(null), o = ref(null);
+    async function i(g) {
+      t.currentPage = 1, t.searchTerm = g.value.trim();
+      const _ = window.location.search, v = new URLSearchParams(_);
+      t.searchTerm && v.get("search-term") !== t.searchTerm && (r.value = await t.getAutoComplete()), t.searchTerm || (r.value = null);
     }
-    function o() {
-      a.value = null, t.navigateToResultsPage();
+    function l() {
+      r.value = null, t.navigateToResultsPage();
     }
-    function i(f) {
-      t.searchTerm = f, a.value = null, t.navigateToResultsPage();
+    function c(g) {
+      t.searchTerm = g, r.value = null, t.navigateToResultsPage();
     }
-    function l(f) {
-      return f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    function u(g) {
+      return g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
-    function c(f) {
-      return f.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+    function d(g) {
+      return g.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
     }
-    function u(f) {
-      const p = (t.searchTerm || "").trim();
-      if (!p) return c(f);
-      const g = new RegExp(`(${l(p)})`, "gi");
-      return c(f).replace(g, "<strong>$1</strong>");
+    function m(g) {
+      const _ = (t.searchTerm || "").trim();
+      if (!_) return d(g);
+      const v = new RegExp(`(${u(_)})`, "gi");
+      return d(g).replace(v, "<strong>$1</strong>");
     }
-    function d(f) {
-      const p = new URL(window.location);
-      p.searchParams.delete("page"), t.currentPage = 1, p.searchParams.delete("start-date"), p.searchParams.delete("end-date"), t.startDate = "", t.endDate = "", t.sortBy = void 0, t.selectedSubCategory = [], t.selectedSubCategoryKey = [], t.selectedCategory = t.selectedCategory !== f.Label ? f.Label : "", t.selectedCategoryKey = t.selectedCategoryKey !== f.Key ? f.Key : "", t.navigateToResultsPage(!0);
+    function f(g) {
+      const _ = new URL(window.location);
+      _.searchParams.delete("page"), t.currentPage = 1, _.searchParams.delete("start-date"), _.searchParams.delete("end-date"), t.startDate = "", t.endDate = "", t.sortBy = void 0, t.selectedSubCategory = [], t.selectedSubCategoryKey = [], t.selectedCategory = t.selectedCategory !== g.Label ? g.Label : "", t.selectedCategoryKey = t.selectedCategoryKey !== g.Key ? g.Key : "", t.navigateToResultsPage(!0);
     }
-    function m(f) {
-      if (!t.selectedSubCategoryKey.includes(f.Key))
-        t.selectedSubCategory.push(f.Label), t.selectedSubCategoryKey.push(f.Key);
+    function p(g) {
+      if (!t.selectedSubCategoryKey.includes(g.Key))
+        t.selectedSubCategory.push(g.Label), t.selectedSubCategoryKey.push(g.Key);
       else {
-        const p = t.selectedSubCategoryKey.indexOf(f.Key);
-        p >= 0 && (t.selectedSubCategory.splice(p, 1), t.selectedSubCategoryKey.splice(p, 1));
+        const _ = t.selectedSubCategoryKey.indexOf(g.Key);
+        _ >= 0 && (t.selectedSubCategory.splice(_, 1), t.selectedSubCategoryKey.splice(_, 1));
       }
       t.navigateToResultsPage(!0);
     }
@@ -34374,14 +34389,17 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         apiKey: n.cludoApiKey,
         customerId: n.cludoCustomerId,
         engineId: n.cludoEngineId
-      }, t.isHomePage = n.isHomePage;
-      const f = window.location.search, p = new URLSearchParams(f);
-      p.has("search-term") && (t.searchTerm = p.get("search-term")), p.has("category") && (t.selectedCategoryKey = decodeURIComponent(p.get("category"))), p.has("sub-category") && decodeURIComponent(p.get("sub-category")).split(",").forEach((_) => t.selectedSubCategoryKey.push(_)), p.has("category") && p.get("category") === "events" && p.has("sort-by") && (t.sortBy = p.get("sort-by")), p.has("start-date") && (t.startDate = p.get("start-date")), p.has("end-date") && (t.endDate = p.get("end-date")), (p.has("search-term") || p.has("category")) && t.getSearchResults();
-    }), (f, p) => (openBlock(), createElementBlock("div", _hoisted_1$2, [
+      }, t.isHomePage = n.isHomePage, n.searchUrl && (t.searchUrl = n.searchUrl);
+      const g = window.location.search, _ = new URLSearchParams(g);
+      _.has("search-term") && (t.searchTerm = _.get("search-term")), _.has("category") && (t.selectedCategoryKey = decodeURIComponent(_.get("category"))), _.has("sub-category") && decodeURIComponent(_.get("sub-category")).split(",").forEach((b) => t.selectedSubCategoryKey.push(b)), _.has("category") && _.get("category") === "events" && _.has("sort-by") && (t.sortBy = _.get("sort-by")), _.has("start-date") && (t.startDate = _.get("start-date")), _.has("end-date") && (t.endDate = _.get("end-date")), (_.has("search-term") || _.has("category")) && t.getSearchResults();
+    }), watch(a, (g) => {
+      var _, v;
+      g || ((_ = s.value) == null || _.resetScroll(), (v = o.value) == null || v.resetScroll());
+    }), (g, _) => (openBlock(), createElementBlock("div", _hoisted_1$2, [
       createElementVNode("div", _hoisted_2$2, [
         createElementVNode("div", _hoisted_3$1, [
           createElementVNode("label", _hoisted_4$1, [
-            p[0] || (p[0] = createElementVNode("span", { class: "visually-hidden" }, " Search for something ", -1)),
+            _[0] || (_[0] = createElementVNode("span", { class: "visually-hidden" }, " Search for something ", -1)),
             createVNode(unref(VsIcon), {
               icon: "vs-icon-control-search",
               size: "xs"
@@ -34395,14 +34413,14 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
             placeholder: n.labels.searchLabel,
             type: "search",
             value: unref(t).searchTerm,
-            onUpdated: s,
-            onKeyup: withKeys(o, ["enter"])
+            onUpdated: i,
+            onKeyup: withKeys(l, ["enter"])
           }, null, 8, ["placeholder", "value"])
         ]),
         createVNode(unref(VsButton), {
           class: "d-none d-lg-block px-200",
-          disabled: unref(t).isLoading,
-          onClick: o
+          disabled: unref(a),
+          onClick: l
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(n.labels.search), 1)
@@ -34411,36 +34429,40 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         }, 8, ["disabled"])
       ]),
       createElementVNode("div", _hoisted_5$1, [
-        a.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+        r.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
           createVNode(unref(VsList), { unstyled: "" }, {
             default: withCtx(() => [
-              (openBlock(!0), createElementBlock(Fragment, null, renderList(a.value, (g) => (openBlock(), createElementBlock("li", {
-                key: g,
+              (openBlock(!0), createElementBlock(Fragment, null, renderList(r.value, (v) => (openBlock(), createElementBlock("li", {
+                key: v,
                 class: "vs-fed-search-input__autocomplete__suggestion",
-                onClick: (_) => i(g),
-                onKeyup: withKeys((_) => i(g), ["enter"]),
+                onClick: (b) => c(v),
+                onKeyup: withKeys((b) => c(v), ["enter"]),
                 tabindex: "0",
-                innerHTML: u(g)
+                innerHTML: m(v)
               }, null, 40, _hoisted_7$1))), 128))
             ]),
             _: 1
           })
         ])) : createCommentVNode("", !0)
       ]),
-      unref(r) ? (openBlock(), createBlock(_sfc_main$3, {
+      n.filters ? (openBlock(), createBlock(_sfc_main$3, {
         key: 0,
         "active-filter": unref(t).selectedCategoryKey,
-        "filter-categories": unref(r),
+        "filter-categories": n.filters,
+        ref_key: "categoryFilter",
+        ref: s,
         wrap: !0,
-        onFilterUpdated: d
+        onFilterUpdated: f
       }, null, 8, ["active-filter", "filter-categories"])) : createCommentVNode("", !0),
       unref(t).selectedCategoryKey === "events" && n.subFilters ? (openBlock(), createBlock(_sfc_main$3, {
         key: 1,
         "active-filter": unref(t).selectedSubCategoryKey,
         class: "mt-200",
         "filter-categories": n.subFilters,
+        ref_key: "subCategoryFilter",
+        ref: o,
         variant: "secondary",
-        onFilterUpdated: m
+        onFilterUpdated: p
       }, {
         "fed-filter-header": withCtx(() => [
           createTextVNode(toDisplayString(n.labels.refine), 1)
@@ -34620,9 +34642,9 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
       default: getEnvValue("EVENTS_API_URL")
     },
     /**
-     * Array of cludo categories.
+     * Array of filters.
     */
-    cludoCategories: {
+    filters: {
       type: Array,
       default: void 0
     },
@@ -34694,9 +34716,7 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         message: "",
         error: !1
       }
-    ), a = e;
-    provide("cludoCategories", a.cludoCategories);
-    const r = computed$1(() => {
+    ), a = e, r = computed$1(() => {
       let f;
       return n.selectedCategoryKey ? n.selectedCategoryKey !== "events" ? f = Math.ceil(n.totalResultsCludo / 12) : n.selectedCategoryKey === "events" && (f = Math.ceil(n.totalResultsEvents / 12)) : f = n.totalResultsCludo >= n.totalResultsEvents ? Math.ceil(n.totalResultsCludo / 6) : Math.ceil(n.totalResultsEvents / 6), f;
     });
@@ -34709,7 +34729,7 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         apiKey: a.cludoApiKey,
         customerId: a.cludoCustomerId,
         engineId: a.cludoEngineId
-      }, n.eventsApi = a.eventsApi, n.cludoCategories = a.cludoCategories, n.siteLanguage = a.siteLanguage, s(), typeof window < "u" && typeof document < "u") {
+      }, n.eventsApi = a.eventsApi, n.filters = a.filters, n.siteLanguage = a.siteLanguage, 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());
       }
@@ -34754,11 +34774,12 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
           "cludo-api-key": a.cludoApiKey,
           "cludo-customer-id": a.cludoCustomerId,
           "cludo-engine-id": a.cludoEngineId,
+          filters: a.filters,
           "sub-filters": a.subFilters,
           labels: a.searchLabels
-        }, null, 8, ["cludo-api-key", "cludo-customer-id", "cludo-engine-id", "sub-filters", "labels"]),
+        }, null, 8, ["cludo-api-key", "cludo-customer-id", "cludo-engine-id", "filters", "sub-filters", "labels"]),
         createVNode(_sfc_main$4, { class: "my-200" }),
-        (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(n).cludoCategories, (g, _) => withDirectives((openBlock(), createElementBlock("div", {
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(n).filters, (g, _) => withDirectives((openBlock(), createElementBlock("div", {
           key: _,
           class: "mb-200"
         }, [