@visitscotland/component-library 5.18.1 → 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",
@@ -34146,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),
@@ -34226,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))
@@ -34262,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)
@@ -34340,40 +34347,40 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
     }
   },
   setup(e) {
-    const n = e, t = useFederatedSearchStore(), a = ref();
-    async function r(m) {
-      t.currentPage = 1, t.searchTerm = m.value.trim();
-      const f = window.location.search, p = new URLSearchParams(f);
-      t.searchTerm && p.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 s() {
-      a.value = null, t.navigateToResultsPage();
+    function l() {
+      r.value = null, t.navigateToResultsPage();
     }
-    function o(m) {
-      t.searchTerm = m, a.value = null, t.navigateToResultsPage();
+    function c(g) {
+      t.searchTerm = g, r.value = null, t.navigateToResultsPage();
     }
-    function i(m) {
-      return m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    function u(g) {
+      return g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
-    function l(m) {
-      return m.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 c(m) {
-      const f = (t.searchTerm || "").trim();
-      if (!f) return l(m);
-      const p = new RegExp(`(${i(f)})`, "gi");
-      return l(m).replace(p, "<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 u(m) {
-      const f = new URL(window.location);
-      f.searchParams.delete("page"), t.currentPage = 1, f.searchParams.delete("start-date"), f.searchParams.delete("end-date"), t.startDate = "", t.endDate = "", t.sortBy = void 0, t.selectedSubCategory = [], t.selectedSubCategoryKey = [], t.selectedCategory = t.selectedCategory !== m.Label ? m.Label : "", t.selectedCategoryKey = t.selectedCategoryKey !== m.Key ? m.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 d(m) {
-      if (!t.selectedSubCategoryKey.includes(m.Key))
-        t.selectedSubCategory.push(m.Label), t.selectedSubCategoryKey.push(m.Key);
+    function p(g) {
+      if (!t.selectedSubCategoryKey.includes(g.Key))
+        t.selectedSubCategory.push(g.Label), t.selectedSubCategoryKey.push(g.Key);
       else {
-        const f = t.selectedSubCategoryKey.indexOf(m.Key);
-        f >= 0 && (t.selectedSubCategory.splice(f, 1), t.selectedSubCategoryKey.splice(f, 1));
+        const _ = t.selectedSubCategoryKey.indexOf(g.Key);
+        _ >= 0 && (t.selectedSubCategory.splice(_, 1), t.selectedSubCategoryKey.splice(_, 1));
       }
       t.navigateToResultsPage(!0);
     }
@@ -34383,13 +34390,16 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         customerId: n.cludoCustomerId,
         engineId: n.cludoEngineId
       }, t.isHomePage = n.isHomePage, n.searchUrl && (t.searchUrl = n.searchUrl);
-      const m = window.location.search, f = new URLSearchParams(m);
-      f.has("search-term") && (t.searchTerm = f.get("search-term")), f.has("category") && (t.selectedCategoryKey = decodeURIComponent(f.get("category"))), f.has("sub-category") && decodeURIComponent(f.get("sub-category")).split(",").forEach((g) => t.selectedSubCategoryKey.push(g)), f.has("category") && f.get("category") === "events" && f.has("sort-by") && (t.sortBy = f.get("sort-by")), f.has("start-date") && (t.startDate = f.get("start-date")), f.has("end-date") && (t.endDate = f.get("end-date")), (f.has("search-term") || f.has("category")) && t.getSearchResults();
-    }), (m, f) => (openBlock(), createElementBlock("div", _hoisted_1$2, [
+      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, [
-            f[0] || (f[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"
@@ -34403,14 +34413,14 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
             placeholder: n.labels.searchLabel,
             type: "search",
             value: unref(t).searchTerm,
-            onUpdated: r,
-            onKeyup: withKeys(s, ["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: s
+          disabled: unref(a),
+          onClick: l
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(n.labels.search), 1)
@@ -34419,16 +34429,16 @@ 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, (p) => (openBlock(), createElementBlock("li", {
-                key: p,
+              (openBlock(!0), createElementBlock(Fragment, null, renderList(r.value, (v) => (openBlock(), createElementBlock("li", {
+                key: v,
                 class: "vs-fed-search-input__autocomplete__suggestion",
-                onClick: (g) => o(p),
-                onKeyup: withKeys((g) => o(p), ["enter"]),
+                onClick: (b) => c(v),
+                onKeyup: withKeys((b) => c(v), ["enter"]),
                 tabindex: "0",
-                innerHTML: c(p)
+                innerHTML: m(v)
               }, null, 40, _hoisted_7$1))), 128))
             ]),
             _: 1
@@ -34439,16 +34449,20 @@ const useFederatedSearchStore = defineStore("federatedSearch", () => {
         key: 0,
         "active-filter": unref(t).selectedCategoryKey,
         "filter-categories": n.filters,
+        ref_key: "categoryFilter",
+        ref: s,
         wrap: !0,
-        onFilterUpdated: u
+        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: d
+        onFilterUpdated: p
       }, {
         "fed-filter-header": withCtx(() => [
           createTextVNode(toDisplayString(n.labels.refine), 1)