@visitscotland/component-library
Version:
VisitScotland Component Library
1,582 lines • 1.14 MB
JavaScript
import { openBlock, createElementBlock, renderSlot, resolveComponent, createBlock, normalizeClass, withCtx, createElementVNode, createVNode, normalizeStyle, createCommentVNode, withDirectives, vShow, inject, mergeProps, toDisplayString, ref, onMounted, onUnmounted, createTextVNode, Fragment, renderList, resolveDirective, withKeys, withModifiers, normalizeProps, createSlots, getCurrentInstance, defineComponent, computed as computed$1, watch, reactive, provide, onBeforeMount, isRef, onBeforeUnmount, unref, isReactive, isReadonly, nextTick as nextTick$1, onUpdated, h, onBeforeUpdate, useId, isVNode, markRaw, toRef, resolveDynamicComponent, Transition, Teleport, useModel, mergeModels, toHandlers, vModelText, guardReactiveProps, Suspense } 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 getDefaultExportFromCjs, y as vt, L as Lu, z as ld, A as _a, M as Md, B as products, C as paths, D as monthsEnglish, F as VsLoading, G as ol, H as wn, I as Ea, J as Bn, K as Je, S as St, P as Pa, N as Ka, Q as vc, R as dc, U as useDataLayerStore, W as checkVendorLibrary, $ as siteSearchCloseTemplate, a0 as siteSearchClickTemplate, a1 as siteSearchUsageTemplate, a2 as siteSearchOpenTemplate, a3 as googleMapInteractionTemplate, a4 as googleMapTimeToFirstInteractionTemplate, a5 as googleMapFilterInteractionTemplate, a6 as googleMapSearchTemplate } from "./LoadingSpinner-ij7CWJOg.mjs";
import { a7 as qe } from "./LoadingSpinner-ij7CWJOg.mjs";
import { defineStore, storeToRefs } from "pinia";
const _sfc_main$2E = {
name: "VsAccordion",
status: "prototype",
release: "0.0.1",
/**
* Provides breakPoint prop to be injected to child component AccordionItem
*/
provide() {
return {
breakPoint: this.breakPoint
};
},
props: {
/**
* If this is provided, the accordion expands above
* the specified viewport `xs, sm, md, lg, xl, xxl`
*/
breakPoint: {
type: String,
default: null,
validator: (e) => e.match(/(xs|sm|md|lg|xl|xxl)/)
}
}
}, _hoisted_1$22 = {
class: "vs-accordion",
"data-test": "vs-accordion"
};
function _sfc_render$2l(e, n, t, s, a, r) {
return openBlock(), createElementBlock("div", _hoisted_1$22, [
renderSlot(e.$slots, "default")
]);
}
const VsAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$2E, [["render", _sfc_render$2l]]), _sfc_main$2D = {
name: "VsAccordionToggle",
status: "prototype",
release: "0.0.1",
components: {
VsButton
},
props: {
/**
* Variant for which button to show in headers
*/
variant: {
type: String,
default: "primary"
},
/**
* Choose to show accordion open or closed by default
*/
visible: {
type: Boolean,
default: !0
}
},
emits: ["toggle-panel"]
}, _hoisted_1$21 = { class: "vs-accordion-toggle__text" }, _hoisted_2$1r = { class: "vs-accordion-toggle__icon" };
function _sfc_render$2k(e, n, t, s, a, r) {
const o = resolveComponent("VsButton");
return openBlock(), createBlock(o, {
animate: !1,
"aria-expanded": t.visible ? "true" : "false",
"aria-haspopup": "true",
onClick: n[0] || (n[0] = (i) => e.$emit("toggle-panel")),
class: normalizeClass(["vs-accordion-toggle clearfix", { "vs-accordion-toggle--open": t.visible }]),
variant: t.variant,
rounded: !1
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_1$21, [
renderSlot(e.$slots, "default")
]),
createElementVNode("span", _hoisted_2$1r, [
t.visible ? renderSlot(e.$slots, "icon-open", { key: 0 }) : renderSlot(e.$slots, "icon-closed", { key: 1 })
])
]),
_: 3
}, 8, ["aria-expanded", "class", "variant"]);
}
const VsAccordionToggle = /* @__PURE__ */ _export_sfc(_sfc_main$2D, [["render", _sfc_render$2k]]), __default__$1 = {
name: "VsDivider"
}, _sfc_main$2C = /* @__PURE__ */ Object.assign(__default__$1, {
props: {
/*
* The color of the border.
* `primary|secondary|inverse`
*/
variant: {
type: String,
required: !1,
validator: (e) => e.match(
/(primary|secondary|inverse)/
),
default: "primary"
}
},
setup(e) {
const n = e;
return (t, s) => (openBlock(), createElementBlock("hr", {
class: normalizeClass(["vs-divider", n.variant ? `vs-divider--variant-${n.variant}` : null]),
"data-test": "vs-divider",
"aria-hidden": "true"
}, null, 2));
}
}), _sfc_main$2B = {
name: "VsAccordionItem",
status: "prototype",
release: "0.0.1",
components: {
VsAccordionToggle,
BCard: rn,
VsIcon,
BCardHeader: an,
BCardBody: nn,
VsHeading,
VsDivider: _sfc_main$2C
},
mixins: [
dataLayerMixin
],
/**
* Injects breakPoint prop provided by Accordion
*/
inject: {
breakPoint: {
default: "lg"
}
},
props: {
/**
* If a colour code or name is provided, a badge of that colour will
* appear on the accordion item haeder.
*/
colourBadge: {
type: String,
required: !1,
default: ""
},
/**
* The aria control ID used for panel ID to match button aria control
*/
controlId: {
type: String,
required: !0
},
/**
* The correct heading level for page hierarchy, the
* heading will be styled the same regardless of level provided
* `1|2|3|4|5|6`
*/
headingLevel: {
type: Number,
default: 2,
validator: (e) => lodashExports.isNumber(e) ? e > 0 && e < 7 : e.match(/(1|2|3|4|5|6)/)
},
/**
* If this is provided, the accordion expands above
* the specified viewport `xs, sm, md, lg, xl, xxl`
*/
itemBreakPoint: {
type: String,
default() {
return inject("breakPoint", "lg");
},
validator: (e) => e.match(/(xs|sm|md|lg|xl|xxl)/)
},
/**
* Choose to show accordion open or closed by default
*/
openByDefault: {
type: Boolean,
default: !1
},
/**
* Variant for which button to show in headers
*/
variant: {
type: String,
default: "subtle"
}
},
data() {
return {
show: this.openByDefault
};
},
computed: {
toggleAccordionBtn() {
return this.itemBreakPoint ? this.itemBreakPoint === "xs" ? "d-none" : `d-${this.itemBreakPoint}-none` : "d-flex";
},
toggleResponsiveItem() {
return this.itemBreakPoint ? this.itemBreakPoint === "xs" ? "d-block" : `d-${this.itemBreakPoint}-block` : "";
}
},
methods: {
onButtonClick() {
this.show || this.createDataLayerObject("accordionOpenEvent", {
accordion_text: this.$refs["accordion-toggle"].$el.innerText
}), this.show = !this.show;
}
}
};
function _sfc_render$2j(e, n, t, s, a, r) {
const o = resolveComponent("VsIcon"), i = resolveComponent("VsAccordionToggle"), l = resolveComponent("VsHeading"), c = resolveComponent("BCardHeader"), d = resolveComponent("BCardBody"), u = resolveComponent("VsDivider"), f = resolveComponent("BCard");
return openBlock(), createBlock(f, {
"no-body": "",
class: normalizeClass(["vs-accordion-item", r.breakPoint ? "vs-accordion-item__responsive" : ""]),
"data-test": "vs-accordion__item"
}, {
default: withCtx(() => [
createVNode(c, {
class: "vs-accordion-item__card-header",
"data-test": "vs-accordion__item-header"
}, {
default: withCtx(() => [
createVNode(i, {
"aria-controls": t.controlId,
visible: a.show,
variant: t.variant,
class: normalizeClass(r.toggleAccordionBtn),
onTogglePanel: r.onButtonClick,
ref: "accordion-toggle"
}, {
"icon-open": withCtx(() => [
renderSlot(e.$slots, "icon-open", {}, () => [
createVNode(o, {
icon: "vs-icon-control-collapse",
size: "xs"
})
])
]),
"icon-closed": withCtx(() => [
renderSlot(e.$slots, "icon-closed", {}, () => [
createVNode(o, {
icon: "vs-icon-control-expand",
size: "xs"
})
])
]),
default: withCtx(() => [
t.colourBadge ? (openBlock(), createElementBlock("div", {
key: 0,
class: "vs-accordion-item__card-colour-badge",
"data-test": "vs-accordion-item__card-colour-badge",
style: normalizeStyle(`background-color: ${t.colourBadge}`)
}, null, 4)) : createCommentVNode("", !0),
renderSlot(e.$slots, "title")
]),
_: 3
}, 8, ["aria-controls", "visible", "variant", "class", "onTogglePanel"]),
createVNode(l, {
level: t.headingLevel,
"heading-style": "heading-xxs",
class: normalizeClass(["d-none vs-accordion-item__title", r.toggleResponsiveItem]),
"data-test": "vs-accordion__item-title"
}, {
default: withCtx(() => [
renderSlot(e.$slots, "title")
]),
_: 3
}, 8, ["level", "class"])
]),
_: 3
}),
withDirectives(createVNode(d, {
id: t.controlId,
class: normalizeClass(["vs-accordion-item__panel", r.toggleResponsiveItem]),
"data-test": "vs-accordion__item-body"
}, {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
}, 8, ["id", "class"]), [
[vShow, a.show]
]),
createVNode(u, { class: "my-025" })
]),
_: 3
}, 8, ["class"]);
}
const VsAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$2B, [["render", _sfc_render$2j]]), _sfc_main$2A = {
name: "VsAddress",
status: "prototype",
release: "0.1.0",
components: {
VsIcon
}
}, _hoisted_1$20 = {
class: "vs-address",
"data-test": "vs-address"
}, _hoisted_2$1q = { class: "vs-address__address-box" };
function _sfc_render$2i(e, n, t, s, a, r) {
const o = resolveComponent("VsIcon");
return openBlock(), createElementBlock("div", _hoisted_1$20, [
createVNode(o, {
icon: "fa-regular fa-location-dot",
class: "vs-address__map-marker me-050"
}),
createElementVNode("address", _hoisted_2$1q, [
renderSlot(e.$slots, "default")
])
]);
}
const Address = /* @__PURE__ */ _export_sfc(_sfc_main$2A, [["render", _sfc_render$2i]]), _sfc_main$2z = {
name: "VsAlert",
status: "prototype",
release: "0.1.0",
components: {
VsIcon
}
}, _hoisted_1$1$ = {
class: "vs-alert",
"data-test": "vs-alert"
}, _hoisted_2$1p = { class: "vs-alert__icon-holder" }, _hoisted_3$16 = { class: "vs-alert__content-wrapper" }, _hoisted_4$O = { class: "vs-alert__content" };
function _sfc_render$2h(e, n, t, s, a, r) {
const o = resolveComponent("VsIcon");
return openBlock(), createElementBlock("div", _hoisted_1$1$, [
createElementVNode("div", _hoisted_2$1p, [
createVNode(o, {
class: "vs-alert__icon",
icon: "vs-icon-feedback-information",
variant: "inverse"
})
]),
createElementVNode("div", _hoisted_3$16, [
createElementVNode("div", _hoisted_4$O, [
renderSlot(e.$slots, "default")
])
])
]);
}
const VsAlert = /* @__PURE__ */ _export_sfc(_sfc_main$2z, [["render", _sfc_render$2h]]), _sfc_main$2y = {
name: "VsArticle",
status: "prototype",
release: "0.0.1",
components: {
VsCol,
VsRow,
VsContainer,
VsHeading,
VsBody
},
props: {
/**
* Title of the article
*/
title: {
type: String,
required: !0
},
/**
* ID of the anchor link if needed
*/
anchorLink: {
type: String,
default: ""
},
/**
* Flag that this component is being used on the Business Support Hub
* which requires specific changes to be applied.
*/
businessSupport: {
type: Boolean,
default: !1
},
/**
* The correct heading level for page hierarchy, the
* heading will be styled the same regardless of level provided
* `1|2|3|4|5|6`
*/
headingLevel: {
type: Number,
default: 2,
validator: (e) => lodashExports.isNumber(e) ? e > 0 && e < 7 : e.match(/(1|2|3|4|5|6)/)
},
/**
* The heading style used for the heading.
* `display-m|display-s|heading-xl|
* heading-l|heading-m|heading-s|heading-xs|heading-xxs`
*/
headingStyle: {
type: String,
default: "heading-xl",
validator: (e) => e.match(
/(display-m|display-s|heading-xl|heading-l|heading-m|heading-s|heading-xs|heading-xxs|heading-xxxs)/
)
}
}
}, _hoisted_1$1_ = ["id"], _hoisted_2$1o = { class: "vs-article__content" };
function _sfc_render$2g(e, n, t, s, a, r) {
const o = resolveComponent("VsHeading"), i = resolveComponent("VsBody"), l = resolveComponent("VsCol"), c = resolveComponent("VsRow"), d = resolveComponent("VsContainer");
return openBlock(), createElementBlock("article", mergeProps({
class: "vs-article",
"data-test": "vs-article"
}, e.$attrs), [
createVNode(d, null, {
default: withCtx(() => [
createVNode(c, null, {
default: withCtx(() => [
createVNode(l, {
cols: "12",
class: normalizeClass(t.businessSupport ? null : "col-xxl-10 offset-xxl-1")
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["vs-article__wrapper mb-300 mb-md-500", t.businessSupport ? "vs-article__wrapper--no-border" : null])
}, [
t.businessSupport ? createCommentVNode("", !0) : renderSlot(e.$slots, "vs-article-img", { key: 0 }),
createVNode(c, null, {
default: withCtx(() => [
createVNode(l, {
cols: "12",
md: "10",
"offset-md": t.businessSupport ? null : "1"
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["vs-article__header mx-md-0 mt-300 mt-lg-500", t.businessSupport ? null : "mx-150"])
}, [
createVNode(o, {
level: t.headingLevel,
"heading-style": t.headingStyle,
class: normalizeClass(["mb-200 mb-lg-300", t.businessSupport ? null : "text-center"])
}, {
default: withCtx(() => [
createElementVNode("span", {
id: t.anchorLink ? t.anchorLink : ""
}, toDisplayString(t.title), 9, _hoisted_1$1_)
]),
_: 1
}, 8, ["level", "heading-style", "class"]),
e.$slots["vs-article-intro"] ? (openBlock(), createBlock(i, {
key: 0,
variant: "lead",
class: normalizeClass(["mb-300 mb-lg-400", t.businessSupport ? null : "text-center"])
}, {
default: withCtx(() => [
renderSlot(e.$slots, "vs-article-intro")
]),
_: 3
}, 8, ["class"])) : createCommentVNode("", !0)
], 2),
t.businessSupport && e.$slots["vs-article-img"] ? (openBlock(), createBlock(l, {
key: 0,
class: "mb-300",
cols: "7"
}, {
default: withCtx(() => [
renderSlot(e.$slots, "vs-article-img")
]),
_: 3
})) : createCommentVNode("", !0),
createElementVNode("div", _hoisted_2$1o, [
renderSlot(e.$slots, "default")
])
]),
_: 3
}, 8, ["offset-md"])
]),
_: 3
})
], 2)
]),
_: 3
}, 8, ["class"])
]),
_: 3
})
]),
_: 3
})
], 16);
}
const Article = /* @__PURE__ */ _export_sfc(_sfc_main$2y, [["render", _sfc_render$2g]]), _sfc_main$2x = {
name: "VsArticleSection",
status: "prototype",
release: "0.0.1",
components: {
VsCol,
VsRow,
VsBody
},
props: {
/**
* This sets the alignment of the sidebar left or right of the section
*/
sidebarAlign: {
type: String,
default: "left",
validator: (e) => e.match(/(left|right)/)
},
businessSupport: {
type: Boolean,
default: !1
}
},
computed: {
sidebarAlignClass() {
return this.sidebarAlign === "right" ? "vs-article-section--sidebar-right" : "vs-article-section--sidebar-left";
},
hasSidebarSlot() {
return !!this.$slots["article-sidebar"];
}
}
};
function _sfc_render$2f(e, n, t, s, a, r) {
const o = resolveComponent("VsCol"), i = resolveComponent("VsBody"), l = resolveComponent("VsRow");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["vs-article-section mb-200 mb-md-400", r.sidebarAlignClass]),
"data-test": "vs-article-section"
}, [
createVNode(l, null, {
default: withCtx(() => [
r.hasSidebarSlot ? (openBlock(), createBlock(o, {
key: 0,
cols: "12",
md: "5",
xl: "4",
"data-test": "vs-article-section__sidebar",
class: normalizeClass(["col-xxl-4", t.sidebarAlign === "right" ? "pe-md-0" : "ps-md-0"]),
"offset-xl": t.sidebarAlign === "right" ? "1" : null,
"order-md": t.sidebarAlign === "right" ? "2" : null,
order: t.businessSupport ? "2" : null
}, {
default: withCtx(() => [
renderSlot(e.$slots, "article-sidebar")
]),
_: 3
}, 8, ["class", "offset-xl", "order-md", "order"])) : createCommentVNode("", !0),
createVNode(o, {
cols: "12",
md: r.hasSidebarSlot ? "7" : "9",
"data-test": "vs-article-section__content",
"offset-xl": t.sidebarAlign === "left" ? "1" : ""
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["mx-md-0", !t.businessSupport && "mx-150"])
}, [
createVNode(i, null, {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
})
], 2)
]),
_: 3
}, 8, ["md", "offset-xl"])
]),
_: 3
})
], 2);
}
const ArticleSection = /* @__PURE__ */ _export_sfc(_sfc_main$2x, [["render", _sfc_render$2f]]), _sfc_main$2w = {
name: "VsArticleSidebar",
status: "prototype",
release: "0.0.1",
props: {
/**
* This sets the alignment of the sidebar left or right of the section
*/
sidebarAlign: {
type: String,
default: "left",
validator: (e) => e.match(/(left|right)/)
}
},
computed: {
sidebarAlignClass() {
return this.sidebarAlign === "right" ? "vs-article-sidebar--right" : "vs-article-sidebar--left";
}
}
};
function _sfc_render$2e(e, n, t, s, a, r) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["vs-article-sidebar", r.sidebarAlignClass]),
"data-test": "vs-article-sidebar"
}, [
e.$slots["vs-article-sidebar-img"] && e.$slots["vs-article-sidebar-img"]() ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([e.$slots["vs-article-sidebar-quote"] && e.$slots["vs-article-sidebar-quote"]() ? "pb-200" : "", "vs-article-sidebar__img-wrapper"])
}, [
renderSlot(e.$slots, "vs-article-sidebar-img")
], 2)) : createCommentVNode("", !0),
e.$slots["vs-article-sidebar-quote"] && e.$slots["vs-article-sidebar-quote"]() ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([e.$slots["vs-article-sidebar-img"] && e.$slots["vs-article-sidebar-img"]() ? "pt-0" : "", "vs-article-sidebar__quote-wrapper"])
}, [
renderSlot(e.$slots, "vs-article-sidebar-quote")
], 2)) : createCommentVNode("", !0)
], 2);
}
const ArticleSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$2w, [["render", _sfc_render$2e]]), _hoisted_1$1Z = {
class: "vs-back-to-top",
"data-test": "vs-back-to-top"
}, _sfc_main$2v = {
__name: "BackToTop",
props: {
/**
* Visually hidden button text for screen readers.
*/
buttonText: {
type: String,
required: !0
},
/**
* Number of pixels required to be vertically scrolled to toggle
* the visibility of the button.
*/
offset: {
type: Number,
default: 100
}
},
setup(e) {
const n = e, t = ref(!1), s = () => {
const r = document.documentElement;
(window.scrollY || r.scrollTop) - (r.clientTop || 0) > n.offset ? t.value = !0 : t.value = !1;
}, a = (r) => {
window.scroll({
top: 0,
behavior: "smooth"
}), r.target.blur();
};
return onMounted(() => {
window.addEventListener("scroll", s);
}), onUnmounted(() => {
window.removeEventListener("scroll", s);
}), (r, o) => (openBlock(), createElementBlock("div", _hoisted_1$1Z, [
t.value ? (openBlock(), createBlock(VsButton, {
key: 0,
icon: "vs-icon-control-back-to-top",
"icon-only": "",
variant: "secondary",
onClick: a
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(n.buttonText), 1)
]),
_: 1
})) : createCommentVNode("", !0)
]));
}
}, _sfc_main$2u = {
name: "VsBadge",
status: "prototype",
release: "0.0.1",
components: {
BBadge: ci
},
props: {
/**
* Variant of the badge
* @values default, subtle, information, highlight
*/
variant: {
type: String,
default: "default",
validator: (e) => e.match(/(default|subtle|information|highlight)/)
}
},
computed: {
badgeClasses() {
return [
`vs-badge--${this.variant}`,
"vs-badge"
];
}
}
};
function _sfc_render$2d(e, n, t, s, a, r) {
const o = resolveComponent("BBadge");
return openBlock(), createElementBlock("div", {
class: normalizeClass(r.badgeClasses),
"data-test": "vs-badge"
}, [
createVNode(o, null, {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
})
], 2);
}
const VsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$2u, [["render", _sfc_render$2d]]), cookieMixin = {
computed: {
selectedLanguage() {
return this.language.substr(0, 2).toUpperCase();
},
localeCookie() {
return this.language.replace("_", "-").toLowerCase();
},
translationCookie() {
return `/en/${this.language.substr(0, 2).toLowerCase()}`;
}
},
methods: {
cookieExists(e) {
return document.cookie.indexOf(`${e}=`) >= 0;
},
setCookie(e, n, t, s = !1) {
let a = "";
if (a = `${e}=${n};`, a += "path=/;", t && !s) {
const r = /* @__PURE__ */ new Date();
r.setFullYear(r.getFullYear() + 1), a += `expires=${r};`;
}
document.cookie = a;
}
}
}, _sfc_main$2t = {
name: "VsBanner",
status: "prototype",
release: "0.0.1",
components: {
VsButton,
VsContainer,
VsRow,
VsCol,
VsBody,
VsIcon
},
mixins: [
cookieMixin
],
props: {
/**
* Accessible text for close button
*/
closeBtnText: {
type: String,
required: !0
},
/**
* Set to false to let the banner show again on page refresh
*/
dontShowAgain: {
type: Boolean,
default: !0
}
},
data() {
return {
showBanner: !0
};
},
mounted() {
const e = this.cookieExists("vs_showbanner");
this.showBanner = !e;
},
methods: {
/**
* Hides banner from view
*/
hideBanner() {
this.showBanner = !this.showBanner, this.dontShowAgain && this.setHiddenCookie();
},
/**
* Sets cookie to hide the banner for the user's session
*/
setHiddenCookie() {
const e = this.cookieExists("vs_showbanner");
this.setCookie("vs_showbanner", this.showBanner, !e, !0);
}
}
}, _hoisted_1$1Y = {
key: 0,
class: "vs-banner",
"data-test": "vs-banner",
role: "banner"
}, _hoisted_2$1n = {
key: 0,
class: "vs-banner__cta-link"
};
function _sfc_render$2c(e, n, t, s, a, r) {
const o = resolveComponent("VsIcon"), i = resolveComponent("VsCol"), l = resolveComponent("VsBody"), c = resolveComponent("VsRow"), d = resolveComponent("VsButton"), u = resolveComponent("VsContainer");
return a.showBanner ? (openBlock(), createElementBlock("div", _hoisted_1$1Y, [
createVNode(u, null, {
default: withCtx(() => [
createVNode(c, null, {
default: withCtx(() => [
createVNode(i, {
cols: "11",
class: "vs-banner__content-wrapper"
}, {
default: withCtx(() => [
createVNode(c, null, {
default: withCtx(() => [
createVNode(i, {
cols: "1",
class: "vs-banner__icon-wrapper"
}, {
default: withCtx(() => [
createVNode(o, {
size: "sm",
icon: "vs-icon-feedback-warning",
class: "vs-banner__icon"
})
]),
_: 1
}),
createVNode(i, { cols: "11" }, {
default: withCtx(() => [
e.$slots["banner-text"] || e.$slots["banner-cta"] ? (openBlock(), createBlock(l, {
key: 0,
class: "vs-banner__text"
}, {
default: withCtx(() => [
renderSlot(e.$slots, "banner-text"),
e.$slots["banner-cta"] ? (openBlock(), createElementBlock("span", _hoisted_2$1n, [
renderSlot(e.$slots, "banner-cta")
])) : createCommentVNode("", !0)
]),
_: 3
})) : createCommentVNode("", !0)
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}),
createVNode(i, { cols: "1" }, {
default: withCtx(() => [
createVNode(d, {
class: "vs-banner__close-btn",
"data-test": "vs-banner__close-btn",
variant: "subtle",
icon: "vs-icon-control-dismiss",
size: "md",
"icon-only": "",
onClick: r.hideBanner
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(t.closeBtnText), 1)
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
})
]),
_: 3
})
]),
_: 3
})
])) : createCommentVNode("", !0);
}
const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["render", _sfc_render$2c]]), _sfc_main$2s = {
name: "VsArticleDetails",
status: "prototype",
release: "0.0.1",
components: {
VsIcon
},
props: {
/**
* Name of the article author
*/
articleAuthor: {
type: String,
default: null
},
/**
* Date the article was published
*/
articlePublishDate: {
type: String,
default: null
},
/**
* How long the article takes to read
*/
articleReadTime: {
type: String,
default: null
}
},
computed: {
iconVariant() {
return this.articleAuthor ? "secondary" : "highlight";
}
}
}, _hoisted_1$1X = {
key: 0,
class: "vs-article-details",
"data-test": "vs-article-details"
}, _hoisted_2$1m = {
key: 0,
class: "vs-article-details__author vs-article-details--highlight"
}, _hoisted_3$15 = {
key: 1,
class: "vs-article-details__date"
}, _hoisted_4$N = {
key: 0,
class: "vs-article-details__divider"
};
function _sfc_render$2b(e, n, t, s, a, r) {
const o = resolveComponent("VsIcon");
return t.articleAuthor || t.articleReadTime || t.articlePublishDate ? (openBlock(), createElementBlock("div", _hoisted_1$1X, [
t.articleAuthor ? (openBlock(), createElementBlock("div", _hoisted_2$1m, toDisplayString(t.articleAuthor), 1)) : createCommentVNode("", !0),
t.articleReadTime || t.articlePublishDate ? (openBlock(), createElementBlock("div", {
key: 1,
"data-test": "vs-article-details__date-time",
class: normalizeClass(t.articleAuthor ? "" : "vs-article-details--highlight")
}, [
t.articleReadTime ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createVNode(o, {
icon: "fa-regular fa-clock",
variant: r.iconVariant,
class: "align-text-top me-050"
}, null, 8, ["variant"]),
createTextVNode(toDisplayString(t.articleReadTime), 1)
], 64)) : createCommentVNode("", !0),
t.articlePublishDate ? (openBlock(), createElementBlock("span", _hoisted_3$15, [
t.articleReadTime ? (openBlock(), createElementBlock("span", _hoisted_4$N, "•")) : createCommentVNode("", !0),
createTextVNode(" " + toDisplayString(t.articlePublishDate), 1)
])) : createCommentVNode("", !0)
], 2)) : createCommentVNode("", !0)
])) : createCommentVNode("", !0);
}
const ArticleDetails = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["render", _sfc_render$2b]]), _sfc_main$2r = {
name: "VsBreadcrumb",
status: "prototype",
release: "0.0.1",
components: {
BBreadcrumb: pi$2
}
}, _hoisted_1$1W = {
"aria-label": "breadcrumbs",
class: "vs-breadcrumb py-050"
};
function _sfc_render$2a(e, n, t, s, a, r) {
const o = resolveComponent("BBreadcrumb");
return openBlock(), createElementBlock("nav", _hoisted_1$1W, [
createVNode(o, mergeProps({ class: "flex-nowrap p-0 mb-0" }, e.$attrs), {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
}, 16)
]);
}
const Breadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["render", _sfc_render$2a]]), _sfc_main$2q = {
name: "VsBreadcrumbItem",
status: "prototype",
release: "0.0.1",
components: {
BBreadcrumbItem: en
},
props: {
/**
* The breadcrumb anchor link href.
*/
href: {
type: String,
default: ""
},
/**
* The active breadcrumb item (last item). By default, BootstrapVue renders as a span.
*/
active: {
type: Boolean,
default: !1
},
/**
* The breadcrumb aria-current attribute. Only visible when the item is `active`.
*/
ariaCurrent: {
type: String,
default: "page"
},
/**
* The breadcrumb text.
*/
text: {
type: String,
default: "",
required: !0
}
}
};
function _sfc_render$29(e, n, t, s, a, r) {
const o = resolveComponent("BBreadcrumbItem");
return openBlock(), createBlock(o, mergeProps({
class: "vs-breadcrumb-item",
active: t.active,
"aria-current": t.ariaCurrent,
href: t.href,
text: t.text
}, e.$attrs), null, 16, ["active", "aria-current", "href", "text"]);
}
const BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["render", _sfc_render$29]]);
let currentURL = "";
typeof window < "u" && (currentURL = window.location.href);
const dmoAnalyticsLogic = (e) => {
let n = !1;
const t = () => !!currentURL.includes("/info"), s = (r) => t() ? {
dmo_referral: r
} : {
type: "CMS referral",
product: "Unclassified",
dmo_referral: r
};
return (() => {
let r = {};
return e.srcElement.localName === "a" && dmoUrls.forEach((o) => {
e.target.href.includes(o) && (n = !0, r = s("True"));
}), n || (r = s("False")), r;
})();
}, _sfc_main$2p = {
name: "VsLink",
status: "prototype",
release: "0.0.2",
components: {
VsIcon
},
mixins: [
dataLayerMixin
],
props: {
/**
* The URL the link will point to
*/
href: {
type: String,
default: null
},
/**
* Option to choose a type which gives the link an icon
* `default|external|internal|download`
*/
type: {
type: String,
default: "default",
validator: (e) => e.match(/(default|external|internal|download)/)
},
/**
* Option to choose a pre-defined style variant
* `primary|secondary|on-dark`
*/
variant: {
type: String,
default: "primary",
validator: (e) => e.match(/(primary|secondary|on-dark)/)
},
/**
* Size of icon
* `xxs|xs|sm|md|lg|xl`
*/
iconSize: {
type: String,
default: "xxs",
validator: (e) => e.match(/(xxs|xs|sm|md|lg|xl)/)
},
/**
* Option to disable the link
*/
disabled: {
type: Boolean,
default: !1
},
/**
* If the click should trigger a dataLayerPush
*/
dataLayerValue: {
type: String,
default: null
},
/**
* Turn off visited styles for links e.g. in main navigation
*/
noVisitedStyles: {
type: Boolean,
default: !1
}
},
computed: {
linkClasses() {
return [
"vs-link",
`vs-link--variant-${this.variant}`,
this.noVisitedStyles && "vs-link--no-visited-styles"
].filter(Boolean);
},
iconName() {
let e = "";
switch (this.type) {
case "external":
e = "fa-regular fa-square-arrow-up-right";
break;
case "internal":
e = "fa-regular fa-arrow-right";
break;
case "download":
e = "vs-icon-control-download";
break;
default:
e = "";
}
return e;
},
iconVariant() {
let e = "";
switch (this.variant) {
case "secondary":
e = "primary";
break;
case "on-dark":
e = "inverse";
break;
default:
e = "cta";
}
return e;
}
},
methods: {
clickHandler(e) {
e.preventDefault(), this.dataLayerValue ? this.createDataLayerObject(this.dataLayerValue, e, this.href) : this.type === "external" ? (this.createDataLayerObject("cmsReferral", {
referral_location: e.target.href,
dmo_referral: dmoAnalyticsLogic(e).dmo_referral
}), this.createDataLayerObject("externalLinkDataEvent", e, this.href)) : this.createDataLayerObject("internalLinkDataEvent", e, this.href), setTimeout(() => {
this.navigateToUrl();
}, 500);
},
navigateToUrl() {
this.href !== "#" && this.href !== null && (window.location.href = this.href);
},
/**
* Fires on keypress events on the link, and passes 'space' and 'enter' events
* to the click handler to ensure analytics events are properly initiated.
*/
keyHandler(e) {
(e.keyCode === 13 || e.keyCode === 32) && (e.preventDefault(), this.clickHandler(e));
}
}
}, _hoisted_1$1V = ["href", "download", "disabled", "tabindex"];
function _sfc_render$28(e, n, t, s, a, r) {
const o = resolveComponent("VsIcon");
return openBlock(), createElementBlock("a", mergeProps({
class: r.linkClasses,
href: t.href,
target: "_self",
download: t.type === "download" ? "true" : null,
disabled: t.disabled,
tabindex: t.disabled ? "-1" : "0"
}, e.$attrs, {
onClick: n[0] || (n[0] = (i) => r.clickHandler(i)),
onKeydown: n[1] || (n[1] = (i) => r.keyHandler(i))
}), [
renderSlot(e.$slots, "default"),
t.type !== "default" ? (openBlock(), createBlock(o, {
key: 0,
icon: r.iconName,
variant: r.iconVariant,
size: t.iconSize,
class: "ms-025 vs-link__icon"
}, null, 8, ["icon", "variant", "size"])) : createCommentVNode("", !0)
], 16, _hoisted_1$1V);
}
const VsLink = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["render", _sfc_render$28]]), _sfc_main$2o = {
name: "VsCannedSearchProductCard",
status: "prototype",
release: "0.0.1",
components: {
VsImg,
VsHeading,
VsLink,
VsCol
},
inject: ["slideCols", "visibleSlides"],
provide() {
return {
slideVisible: this.isVisible
};
},
props: {
/**
* The type of product being searched for by the canned search
* the card appears in, dictates certain layout elements
*/
searchType: {
type: String,
default: ""
},
/**
* The image to use in the component
*/
imgSrc: {
required: !0,
type: String
},
/**
* The title of the product in the card
*/
title: {
required: !0,
type: String
},
/**
* The duration of the product, if it should be shown as part of the main card body
* rather than in the summary box, will be truncated if >2 lines
*
* Expects an object with a label, a startDay and an optional endDay
*/
inBodyDuration: {
type: Object,
default: null
},
/**
* The description of the product, will be truncated if >2 lines
*/
description: {
type: String,
default: ""
},
/**
* An object containing a link to product details, should contain a `url`
* field, a `label` field and a `type` field
*/
detailLink: {
type: Object,
required: !0
},
/**
* Mandatory index of slide -
* needed to calculate active slides
*/
slideIndex: {
type: String,
required: !0
}
},
computed: {
/**
* Calculates any required modified classes for the card-body, depending on the
* searchType provided
*/
modCardBody() {
return this.searchType === "even" || this.searchType === "cate" ? "card-body--short" : "";
},
/**
* TMS images currently aren't passed to the image scaler, and as such return the
* full quality image when we request the xxs one causing some significant performance
* issues in tours canned searches. If the searchType is tour, use a generic
* placeholder rather than the specified one.
*
* Remove when TMS images are scaled properly.
*/
useGenericLqip() {
return this.searchType === "tour";
}
},
methods: {
/**
* Detects if the card is one of the currently visible cards in the carousel
* so it can be disabled if not
*
* @returns {Boolean} true if card is visible
*/
isVisible() {
const e = parseInt(this.slideIndex, 10);
return this.visibleSlides.indexOf(e) >= 0;
}
}
}, _hoisted_1$1U = { class: "vs-product-card__image-container" }, _hoisted_2$1l = { class: "vs-product-card__image-inner-container" }, _hoisted_3$14 = { class: "vs-product-card__description" }, _hoisted_4$M = {
key: 0,
class: "vs-product-card__description-inner"
}, _hoisted_5$y = { class: "visually-hidden" }, _hoisted_6$n = {
class: "vs-product-card__logos-container",
"data-chromatic": "ignore"
};
function _sfc_render$27(e, n, t, s, a, r) {
const o = resolveComponent("VsImg"), i = resolveComponent("VsLink"), l = resolveComponent("VsHeading"), c = resolveComponent("VsCol");
return openBlock(), createBlock(c, {
cols: r.slideCols.xs,
sm: r.slideCols.sm,
lg: r.slideCols.md,
xl: r.slideCols.lg,
class: "vs-carousel-slide__card",
"aria-disabled": !r.isVisible()
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["vs-product-card", r.isVisible() ? "" : "vs-product-card--disabled"]),
"data-test": "vs-product-card"
}, [
createElementVNode("section", mergeProps({ class: "card" }, e.$attrs), [
createElementVNode("div", _hoisted_1$1U, [
createElementVNode("div", _hoisted_2$1l, [
createVNode(o, {
src: t.imgSrc,
alt: "",
sizes: "(min-width: 768px) 50vw, 100vw",
"use-generic-lqip": r.useGenericLqip,
class: "vs-product-card__img",
"data-test": "vs-product-card__img",
"data-chromatic": "ignore"
}, null, 8, ["src", "use-generic-lqip"])
]),
renderSlot(e.$slots, "vs-canned-search-badges")
]),
createElementVNode("div", {
class: normalizeClass(["card-body", r.modCardBody])
}, [
createVNode(l, {
level: "3",
"heading-style": "heading-xs",
class: "card-title vs-product-card__title",
"data-test": "vs-product-card__title"
}, {
default: withCtx(() => [
createVNode(i, {
href: t.detailLink.link,
class: "stretched-link vs-product-card__link",
"data-test": "vs-product-card__link",
disabled: !r.isVisible()
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(t.title), 1)
]),
_: 1
}, 8, ["href", "disabled"])
]),
_: 1
}),
renderSlot(e.$slots, "vs-canned-search-sub-heading"),
renderSlot(e.$slots, "vs-canned-search-star-rating"),
renderSlot(e.$slots, "vs-canned-search-categories"),
createElementVNode("div", _hoisted_3$14, [
renderSlot(e.$slots, "vs-canned-search-tour-info"),
t.description ? (openBlock(), createElementBlock("p", _hoisted_4$M, toDisplayString(t.description), 1)) : createCommentVNode("", !0),
createVNode(i, {
href: t.detailLink.link,
class: "vs-product-card__description-link",
disabled: !r.isVisible()
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(t.detailLink.label) + " ", 1),
createElementVNode("span", _hoisted_5$y, ": " + toDisplayString(t.title), 1)
]),
_: 1
}, 8, ["href", "disabled"])
])
], 2),
createElementVNode("div", _hoisted_6$n, [
renderSlot(e.$slots, "vs-canned-search-logos")
])
], 16),
renderSlot(e.$slots, "vs-canned-search-summary")
], 2)
]),
_: 3
}, 8, ["cols", "sm", "lg", "xl", "aria-disabled"]);
}
const VsCannedSearchProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["render", _sfc_render$27]]), _sfc_main$2n = {
name: "VsCannedSearchStars",
status: "prototype",
release: "0.0.1",
props: {
/**
* The minimum number of stars for parts of the product, if the
* same as the max a number of stars will be displayed, if
* different a range will be displayed
*/
min: {
type: Number,
default: null
},
/**
* The maximum number of stars for parts of the product
*/
max: {
type: Number,
default: null
}
}
}, _hoisted_1$1T = {
class: "vs-canned-search-stars",
"data-test": "vs-canned-search-stars"
}, _hoisted_2$1k = { key: 0 }, _hoisted_3$13 = { key: 1 };
function _sfc_render$26(e, n, t, s, a, r) {
return openBlock(), createElementBlock("div", _hoisted_1$1T, [
t.min && t.max && t.min !== t.max ? (openBlock(), createElementBlock("div", _hoisted_2$1k, [
n[0] || (n[0] = createElementVNode("span", { class: "vs-canned-search-stars__star" }, " ★ ", -1)),
createTextVNode(" " + toDisplayString(t.min) + "-" + toDisplayString(t.max), 1)
])) : (openBlock(), createElementBlock("div", _hoisted_3$13, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(t.min, (o) => (openBlock(), createElementBlock("span", {
key: o,
class: "vs-canned-search-stars__star"
}, " ★ "))), 128))
]))
]);
}
const VsCannedSearchStars = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["render", _sfc_render$26]]), min$2 = Math.min, max$2 = Math.max, round = Math.round, floor = Math.floor, createCoords = (e) => ({
x: e,
y: e
}), oppositeSideMap = {
left: "right",
right: "left",
bottom: "top",
top: "bottom"
};
function clamp(e, n, t) {
return max$2(e, min$2(n, t));
}
function evaluate(e, n) {
return typeof e == "function" ? e(n) : e;
}
function getSide(e) {
return e.split("-")[0];
}
function getAlignment(e) {
return e.split("-")[1];
}
function getOppositeAxis(e) {
return e === "x" ? "y" : "x";
}
function getAxisLength(e) {
return e === "y" ? "height" : "width";
}
function getSideAxis(e) {
const n = e[0];
return n === "t" || n === "b" ? "y" : "x";
}
function getAlignmentAxis(e) {
return getOppositeAxis(getSideAxis(e));
}
function getAlignmentSides(e, n, t) {
t === void 0 && (t = !1);
const s = getAlignment(e), a = getAlignmentAxis(e), r = getAxisLength(a);
let o = a === "x" ? s === (t ? "end" : "start") ? "right" : "left" : s === "start" ? "bottom" : "top";
return n.reference[r] > n.floating[r] && (o = getOppositePlacement(o)), [o, getOppositePlacement(o)];
}
function getExpandedPlacements(e) {
const n = getOppositePlacement(e);
return [getOppositeAlignmentPlacement(e), n, getOppositeAlignmentPlacement(n)];
}
function getOppositeAlignmentPlacement(e) {
return e.includes("start") ? e.replace("start", "end") : e.replace("end", "start");
}
const lrPlacement = ["left", "right"], rlPlacement = ["right", "left"], tbPlacement = ["top", "bottom"], btPlacement = ["bottom", "top"];
function getSideList(e, n, t) {
switch (e) {
case "top":
case "bottom":
return t ? n ? rlPlacement : lrPlacement : n ? lrPlacement : rlPlacement;
case "left":
case "right":
return n ? tbPlacement : btPlacement;
default:
return [];
}
}
function getOppositeAxisPlacements(e, n, t, s) {
const a = getAlignment(e);
let r = getSideList(getSide(e), t === "start", s);
return a && (r = r.map((o) => o + "-" + a), n && (r = r.concat(r.map(getOppositeAlignmentPlacement)))), r;
}
function getOppositePlacement(e) {
const n = getSide(e);
return oppositeSideMap[n] + e.slice(n.length);
}
function expandPaddingObject(e) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...e
};
}
function getPaddingObject(e) {
return typeof e != "number" ? expandPaddingObject(e) : {
top: e,
right: e,
bottom: e,
left: e
};
}
function rectToClientRect(e) {
const {
x: n,
y: t,
width: s,
height: a
} = e;
return {
width: s,
height: a,
top: t,
left: n,
right: n + s,
bottom: t + a,
x: n,
y: t
};
}
function computeCoordsFromPlacement(e, n, t) {
let {
reference: s,
floating: a
} = e;
const r = getSideAxis(n), o = getAlignmentAxis(n), i = getAxisLength(o), l = getSide(n), c = r === "y", d = s.x + s.width / 2 - a.width / 2, u = s.y + s.height / 2 - a.height / 2, f = s[i] / 2 - a[i] / 2;
let m;
switch (l) {
case "top":
m = {
x: d,
y: s.y - a.height
};
break;
case "bottom":
m = {
x: d,
y: s.y + s.height
};
break;
case "right":
m = {
x: s.x + s.width,
y: u
};
break;
case "left":
m = {
x: s.x - a.width,
y: u
};
break;
default:
m = {
x: s.x,
y: s.y
};
}
switch (getAlignment(n)) {
case "start":
m[o] -= f * (t && c ? -1 : 1);
break;
case "end":
m[o] += f * (t && c ? -1 : 1);
break;
}
return m;
}
async function detectOverflow(e, n) {
var t;
n === void 0 && (n = {});
const {
x: s,
y: a,
platform: r,
rects: o,
elements: i,
strategy: l
} = e, {
boundary: c = "clippingAncestors",
rootBoundary: d = "viewport",
elementContext: u = "floating",
altBoundary: f = !1,
padding: m = 0
} = evaluate(n, e), p = getPaddingObject(m), v = i[f ? u === "floating" ? "reference" : "floating" : u], k = rectToClientRect(await r.getClippingRect({
element: (t = await (r.isElement == null ? void 0 : r.isElement(v))) == null || t ? v : v.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(i.floating)),
boundary: c,
rootBoundary: d,
strategy: l
})), _ = u === "floating" ? {
x: s,
y: a,
width: o.floating.width,
height: o.floating.height
} : o.reference, b = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(i.floating)), S = await (r.isElement == null ? void 0 : r.isElement(b)) ? await (r.g