@visitscotland/component-library
Version:
VisitScotland Component Library
1,568 lines • 1.1 MB
JavaScript
var ge = Object.defineProperty;
var _e = (e, n, t) => n in e ? ge(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
var ce = (e, n, t) => _e(e, typeof n != "symbol" ? n + "" : n, t);
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 } 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 process$1$1, y as getAugmentedNamespace, z as requireHasown, A as requireShams, B as callBound, C as isGeneratorFunction, D as isTypedArray, F as whichTypedArray, G as Buffer, 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-D3gnH_p2.mjs";
import { a4 as xe } from "./LoadingSpinner-D3gnH_p2.mjs";
import { defineStore, mapState } from "pinia";
const _sfc_main$2l = {
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$1R = {
class: "vs-accordion",
"data-test": "vs-accordion"
};
function _sfc_render$28(e, n, t, a, r, s) {
return openBlock(), createElementBlock("div", _hoisted_1$1R, [
renderSlot(e.$slots, "default")
]);
}
const VsAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["render", _sfc_render$28]]), _sfc_main$2k = {
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"],
methods: {
triggerToggle() {
this.$emit("toggle-panel");
}
}
}, _hoisted_1$1Q = { class: "vs-accordion-toggle__text" }, _hoisted_2$1i = { class: "vs-accordion-toggle__icon" };
function _sfc_render$27(e, n, t, a, r, s) {
const o = resolveComponent("VsButton");
return openBlock(), createBlock(o, {
animate: !1,
"aria-expanded": t.visible ? "true" : "false",
"aria-haspopup": "true",
onClick: s.triggerToggle,
class: normalizeClass(["vs-accordion-toggle clearfix", t.visible ? "vs-accordion-toggle--open" : ""]),
variant: t.variant,
rounded: !1
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_1$1Q, [
renderSlot(e.$slots, "default")
]),
createElementVNode("span", _hoisted_2$1i, [
t.visible ? renderSlot(e.$slots, "icon-open", { key: 0 }) : renderSlot(e.$slots, "icon-closed", { key: 1 })
])
]),
_: 3
}, 8, ["aria-expanded", "onClick", "class", "variant"]);
}
const VsAccordionToggle = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["render", _sfc_render$27]]), _sfc_main$2j = {
name: "VsAccordionItem",
status: "prototype",
release: "0.0.1",
components: {
VsAccordionToggle,
BCard: rn,
VsIcon,
BCardHeader: an,
BCardBody: nn,
VsHeading
},
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$26(e, n, t, a, r, s) {
const o = resolveComponent("VsIcon"), i = resolveComponent("VsAccordionToggle"), l = resolveComponent("VsHeading"), c = resolveComponent("BCardHeader"), u = resolveComponent("BCardBody"), d = resolveComponent("BCard");
return openBlock(), createBlock(d, {
"no-body": "",
class: normalizeClass(["vs-accordion-item", s.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: r.show,
variant: t.variant,
class: normalizeClass(s.toggleAccordionBtn),
onTogglePanel: s.onButtonClick,
ref: "accordion-toggle"
}, {
"icon-open": withCtx(() => [
renderSlot(e.$slots, "icon-open", {}, () => [
createVNode(o, {
icon: "vs-icon-control-collapse",
size: "sm"
})
])
]),
"icon-closed": withCtx(() => [
renderSlot(e.$slots, "icon-closed", {}, () => [
createVNode(o, {
icon: "vs-icon-control-expand",
size: "sm"
})
])
]),
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", s.toggleResponsiveItem]),
"data-test": "vs-accordion__item-title"
}, {
default: withCtx(() => [
renderSlot(e.$slots, "title")
]),
_: 3
}, 8, ["level", "class"])
]),
_: 3
}),
withDirectives(createVNode(u, {
id: t.controlId,
class: normalizeClass(["vs-accordion-item__panel", s.toggleResponsiveItem]),
"data-test": "vs-accordion__item-body"
}, {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
}, 8, ["id", "class"]), [
[vShow, r.show]
])
]),
_: 3
}, 8, ["class"]);
}
const VsAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["render", _sfc_render$26]]), _sfc_main$2i = {
name: "VsAddress",
status: "prototype",
release: "0.1.0",
components: {
VsIcon
}
}, _hoisted_1$1P = {
class: "vs-address",
"data-test": "vs-address"
}, _hoisted_2$1h = { class: "vs-address__address-box" };
function _sfc_render$25(e, n, t, a, r, s) {
const o = resolveComponent("VsIcon");
return openBlock(), createElementBlock("div", _hoisted_1$1P, [
createVNode(o, {
icon: "fa-regular fa-location-dot",
class: "vs-address__map-marker me-050"
}),
createElementVNode("address", _hoisted_2$1h, [
renderSlot(e.$slots, "default")
])
]);
}
const Address = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["render", _sfc_render$25]]), _sfc_main$2h = {
name: "VsAlert",
status: "prototype",
release: "0.1.0",
components: {
VsIcon
}
}, _hoisted_1$1O = {
class: "vs-alert",
"data-test": "vs-alert"
}, _hoisted_2$1g = { class: "vs-alert__icon-holder" }, _hoisted_3$11 = { class: "vs-alert__content-wrapper" }, _hoisted_4$L = { class: "vs-alert__content" };
function _sfc_render$24(e, n, t, a, r, s) {
const o = resolveComponent("VsIcon");
return openBlock(), createElementBlock("div", _hoisted_1$1O, [
createElementVNode("div", _hoisted_2$1g, [
createVNode(o, {
class: "vs-alert__icon",
icon: "vs-icon-feedback-information",
variant: "inverse"
})
]),
createElementVNode("div", _hoisted_3$11, [
createElementVNode("div", _hoisted_4$L, [
renderSlot(e.$slots, "default")
])
])
]);
}
const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$24]]), _sfc_main$2g = {
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$1N = ["id"], _hoisted_2$1f = { class: "vs-article__content" };
function _sfc_render$23(e, n, t, a, r, s) {
const o = resolveComponent("VsHeading"), i = resolveComponent("VsBody"), l = resolveComponent("VsCol"), c = resolveComponent("VsRow"), u = resolveComponent("VsContainer");
return openBlock(), createElementBlock("article", mergeProps({
class: "vs-article",
"data-test": "vs-article"
}, e.$attrs), [
createVNode(u, 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$1N)
]),
_: 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$1f, [
renderSlot(e.$slots, "default")
])
]),
_: 3
}, 8, ["offset-md"])
]),
_: 3
})
], 2)
]),
_: 3
}, 8, ["class"])
]),
_: 3
})
]),
_: 3
})
], 16);
}
const Article = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$23]]), _sfc_main$2f = {
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$22(e, n, t, a, r, s) {
const o = resolveComponent("VsCol"), i = resolveComponent("VsBody"), l = resolveComponent("VsRow");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["vs-article-section mb-200 mb-md-400", s.sidebarAlignClass]),
"data-test": "vs-article-section"
}, [
createVNode(l, null, {
default: withCtx(() => [
s.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: s.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$2f, [["render", _sfc_render$22]]), _sfc_main$2e = {
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$21(e, n, t, a, r, s) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["vs-article-sidebar", s.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$2e, [["render", _sfc_render$21]]), _hoisted_1$1M = {
class: "vs-back-to-top",
"data-test": "vs-back-to-top"
}, _sfc_main$2d = {
__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), a = () => {
const s = document.documentElement;
(window.scrollY || s.scrollTop) - (s.clientTop || 0) > n.offset ? t.value = !0 : t.value = !1;
}, r = (s) => {
window.scroll({
top: 0,
behavior: "smooth"
}), s.target.blur();
};
return onMounted(() => {
window.addEventListener("scroll", a);
}), onUnmounted(() => {
window.removeEventListener("scroll", a);
}), (s, o) => (openBlock(), createElementBlock("div", _hoisted_1$1M, [
t.value ? (openBlock(), createBlock(VsButton, {
key: 0,
icon: "vs-icon-control-back-to-top",
"icon-only": "",
variant: "secondary",
onClick: r
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(n.buttonText), 1)
]),
_: 1
})) : createCommentVNode("", !0)
]));
}
}, _sfc_main$2c = {
name: "VsBadge",
status: "prototype",
release: "0.0.1",
components: {
BBadge: ci
},
props: {
/**
* Variant of the badge
* @values default, subtle
*/
variant: {
type: String,
default: "default",
validator: (e) => e.match(/(default|subtle)/)
}
},
computed: {
badgeClasses() {
return [
`vs-badge--${this.variant}`,
"vs-badge"
];
}
}
};
function _sfc_render$20(e, n, t, a, r, s) {
const o = resolveComponent("BBadge");
return openBlock(), createElementBlock("div", {
class: normalizeClass(s.badgeClasses),
"data-test": "vs-badge"
}, [
createVNode(o, null, {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
})
], 2);
}
const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$20]]), 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, a = !1) {
let r = "";
if (r = `${e}=${n};`, r += "path=/;", t && !a) {
const s = /* @__PURE__ */ new Date();
s.setFullYear(s.getFullYear() + 1), r += `expires=${s};`;
}
document.cookie = r;
}
}
}, _sfc_main$2b = {
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$1L = {
key: 0,
class: "vs-banner",
"data-test": "vs-banner",
role: "banner"
}, _hoisted_2$1e = {
key: 0,
class: "vs-banner__cta-link"
};
function _sfc_render$1$(e, n, t, a, r, s) {
const o = resolveComponent("VsIcon"), i = resolveComponent("VsCol"), l = resolveComponent("VsBody"), c = resolveComponent("VsRow"), u = resolveComponent("VsButton"), d = resolveComponent("VsContainer");
return r.showBanner ? (openBlock(), createElementBlock("div", _hoisted_1$1L, [
createVNode(d, 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$1e, [
renderSlot(e.$slots, "banner-cta")
])) : createCommentVNode("", !0)
]),
_: 3
})) : createCommentVNode("", !0)
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}),
createVNode(i, { cols: "1" }, {
default: withCtx(() => [
createVNode(u, {
class: "vs-banner__close-btn",
"data-test": "vs-banner__close-btn",
variant: "subtle",
icon: "vs-icon-control-dismiss",
size: "md",
"icon-only": "",
onClick: s.hideBanner
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(t.closeBtnText), 1)
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
})
]),
_: 3
})
]),
_: 3
})
])) : createCommentVNode("", !0);
}
const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$1$]]), _sfc_main$2a = {
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$1K = {
key: 0,
class: "vs-article-details",
"data-test": "vs-article-details"
}, _hoisted_2$1d = {
key: 0,
class: "vs-article-details__author vs-article-details--highlight"
}, _hoisted_3$10 = {
key: 1,
class: "vs-article-details__date"
}, _hoisted_4$K = {
key: 0,
class: "vs-article-details__divider"
};
function _sfc_render$1_(e, n, t, a, r, s) {
const o = resolveComponent("VsIcon");
return t.articleAuthor || t.articleReadTime || t.articlePublishDate ? (openBlock(), createElementBlock("div", _hoisted_1$1K, [
t.articleAuthor ? (openBlock(), createElementBlock("div", _hoisted_2$1d, toDisplayString(t.articleAuthor), 1)) : createCommentVNode("", !0),
createElementVNode("div", {
"data-test": "vs-article-details__date-time",
class: normalizeClass([t.articleAuthor ? "" : "vs-article-details--highlight", "mb-150"])
}, [
t.articleReadTime ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createVNode(o, {
icon: "fa-regular fa-clock",
variant: s.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$10, [
t.articleReadTime ? (openBlock(), createElementBlock("span", _hoisted_4$K, "•")) : createCommentVNode("", !0),
createTextVNode(" " + toDisplayString(t.articlePublishDate), 1)
])) : createCommentVNode("", !0)
], 2)
])) : createCommentVNode("", !0);
}
const ArticleDetails = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$1_]]), _sfc_main$29 = {
name: "VsBreadcrumb",
status: "prototype",
release: "0.0.1",
components: {
BBreadcrumb: pi$2
}
}, _hoisted_1$1J = {
"aria-label": "breadcrumbs",
class: "vs-breadcrumb py-050"
};
function _sfc_render$1Z(e, n, t, a, r, s) {
const o = resolveComponent("BBreadcrumb");
return openBlock(), createElementBlock("nav", _hoisted_1$1J, [
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$29, [["render", _sfc_render$1Z]]), _sfc_main$28 = {
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$1Y(e, n, t, a, r, s) {
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$28, [["render", _sfc_render$1Y]]);
let currentURL = "";
typeof window < "u" && (currentURL = window.location.href);
const dmoAnalyticsLogic = (e) => {
let n = !1;
const t = () => !!currentURL.includes("/info"), a = (s) => t() ? {
dmo_referral: s
} : {
type: "CMS referral",
product: "Unclassified",
dmo_referral: s
};
return (() => {
let s = {};
return e.srcElement.localName === "a" && dmoUrls.forEach((o) => {
e.target.href.includes(o) && (n = !0, s = a("True"));
}), n || (s = a("False")), s;
})();
}, _sfc_main$27 = {
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
}
},
computed: {
variantClass() {
return `vs-link--variant-${this.variant}`;
},
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$1I = ["href", "download", "disabled", "tabindex"];
function _sfc_render$1X(e, n, t, a, r, s) {
const o = resolveComponent("VsIcon");
return openBlock(), createElementBlock("a", mergeProps({
class: ["vs-link", [
`vs-link--variant-${t.variant}`
]],
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) => s.clickHandler(i)),
onKeydown: n[1] || (n[1] = (i) => s.keyHandler(i))
}), [
renderSlot(e.$slots, "default"),
t.type !== "default" ? (openBlock(), createBlock(o, {
key: 0,
icon: s.iconName,
variant: s.iconVariant,
size: t.iconSize,
class: "ms-025 vs-link__icon"
}, null, 8, ["icon", "variant", "size"])) : createCommentVNode("", !0)
], 16, _hoisted_1$1I);
}
const VsLink = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["render", _sfc_render$1X]]), _sfc_main$26 = {
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$1H = { class: "vs-product-card__image-container" }, _hoisted_2$1c = { class: "vs-product-card__image-inner-container" }, _hoisted_3$$ = { class: "vs-product-card__description" }, _hoisted_4$J = {
key: 0,
class: "vs-product-card__description-inner"
}, _hoisted_5$v = { class: "visually-hidden" }, _hoisted_6$k = {
class: "vs-product-card__logos-container",
"data-chromatic": "ignore"
};
function _sfc_render$1W(e, n, t, a, r, s) {
const o = resolveComponent("VsImg"), i = resolveComponent("VsLink"), l = resolveComponent("VsHeading"), c = resolveComponent("VsCol");
return openBlock(), createBlock(c, {
cols: s.slideCols.xs,
sm: s.slideCols.sm,
lg: s.slideCols.md,
xl: s.slideCols.lg,
class: "vs-carousel-slide__card",
"aria-disabled": !s.isVisible()
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["vs-product-card", s.isVisible() ? "" : "vs-product-card--disabled"]),
"data-test": "vs-product-card"
}, [
createElementVNode("section", mergeProps({ class: "card" }, e.$attrs), [
createElementVNode("div", _hoisted_1$1H, [
createElementVNode("div", _hoisted_2$1c, [
createVNode(o, {
src: t.imgSrc,
alt: "",
sizes: "(min-width: 768px) 50vw, 100vw",
"use-generic-lqip": s.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", s.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: !s.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$$, [
renderSlot(e.$slots, "vs-canned-search-tour-info"),
t.description ? (openBlock(), createElementBlock("p", _hoisted_4$J, toDisplayString(t.description), 1)) : createCommentVNode("", !0),
createVNode(i, {
href: t.detailLink.link,
class: "vs-product-card__description-link",
disabled: !s.isVisible()
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(t.detailLink.label) + " ", 1),
createElementVNode("span", _hoisted_5$v, ": " + toDisplayString(t.title), 1)
]),
_: 1
}, 8, ["href", "disabled"])
])
], 2),
createElementVNode("div", _hoisted_6$k, [
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$26, [["render", _sfc_render$1W]]), _sfc_main$25 = {
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$1G = {
class: "vs-canned-search-stars",
"data-test": "vs-canned-search-stars"
}, _hoisted_2$1b = { key: 0 }, _hoisted_3$_ = { key: 1 };
function _sfc_render$1V(e, n, t, a, r, s) {
return openBlock(), createElementBlock("div", _hoisted_1$1G, [
t.min && t.max && t.min !== t.max ? (openBlock(), createElementBlock("div", _hoisted_2$1b, [
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$_, [
(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$25, [["render", _sfc_render$1V]]), _sfc_main$24 = {
name: "VsTooltip",
status: "prototype",
release: "0.0.1",
components: {
VsButton
},
directives: {
"b-tooltip": Ed
},
props: {
/**
* The text to display in the tooltip
*/
title: {
type: String,
default: ""
},
/**
* The position of the tooltip
* `top|right|left|bottom`
*/
position: {
type: String,
default: "top",
validator: (e) => e.match(/(top|right|left|bottom)/)
}
}
};
function _sfc_render$1U(e, n, t, a, r, s) {
const o = resolveComponent("VsButton"), i = resolveDirective("b-tooltip");
return withDirectives((openBlock(), createBlock(o, mergeProps(e.$attrs, {
class: "vs-tooltip position-relative",
title: t.title
}), {
default: withCtx(() => [
renderSlot(e.$slots, "default")
]),
_: 3
}, 16, ["title"])), [
[i, { placement: t.position }]
]);
}
const VsTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$1U]]), _sfc_main$23 = {
name: "VsCannedSearchLogos",
status: "prototype",
release: "0.0.1",
components: {
VsTooltip,
VsImg
},
inject: ["slideVisible"],
props: {
/**
* If set, the good to go logo appears. Should contain a unique `id` (String), a `name`
* (String) that appears as a tooltip and a url to an `image` (String)
*/
goodToGoLogo: {
type: Object,
default: null
},
/**
* If set, the safe travels logo appears. Should contain a unique `id` (String), a `name`
* (String) that appears as a tooltip and a url to an `image` (String)
*/
safeTravelsLogo: {
type: Object,
default: null
},
/**
* A set of award badges to display, each should contain a unique `id` (String), a `name`
* (String) that appears as a tooltip and a url to an `image` (String)
*/
awards: {
type: Array,
default: null
},
/**
* A specific award, should contain a `name` (String) and an `image` (String) - appears on
* the right hand side of the award list
*/
accessGuide: {
type: Object,
default: null
}
}
}, _hoisted_1$1F = { class: "vs-canned-search-logos" };
function _sfc_render$1T(e, n, t, a, r, s) {
const o = resolveComponent("VsImg"), i = resolveComponent("VsTooltip");
return openBlock(), createElementBlock("div", _hoisted_1$1F, [
t.goodToGoLogo ? (openBlock(), createBlock(i, {
key: 0,
title: t.goodToGoLogo.name,
href: "#",
class: "p-0",
variant: "subtle",
"data-test": "vs-canned-search-logos__good-to-go",
disabled: !s.slideVisible(),
tabindex: s.slideVisible() ? "0" : "-1"
}, {
default: withCtx(() => [
createVNode(o, {
alt: t.goodToGoLogo.name,
src: t.goodToGoLogo.image,
class: "vs-canned-search-logos__logo"
}, null, 8, ["alt", "src"])
]),
_: 1
}, 8, ["title", "disabled", "tabindex"])) : createCommentVNode("", !0),
t.safeTravelsLogo ? (openBlock(), createBlock(i, {
key: 1,
title: t.safeTravelsLogo.name,
href: "#",
class: "p-0",
variant: "subtle",
"data-test": "vs-canned-search-logos__safe-travels",
disabled: !s.slideVisible(),
tabindex: s.slideVisible() ? "0" : "-1"
}, {
default: withCtx(() => [
createVNode(o, {
alt: t.safeTravelsLogo.name,
src: t.safeTravelsLogo.image,
class: "vs-canned-search-logos__logo"
}, null, 8, ["alt", "src"])
]),
_: 1
}, 8, ["title", "disabled", "tabindex"])) : createCommentVNode("", !0),
(openBlock(!0), createElementBlock(Fragment, null, renderList(t.awards, (l) => (openBlock(), createBlock(i, {
title: l.name,
key: l.id,
href: "#",
class: "p-0",
variant: "subtle",
disabled: !s.slideVisible(),
tabindex: s.slideVisible() ? "0" : "-1"
}, {
default: withCtx(() => [
createVNode(o, {
src: l.image,
alt: l.name,
class: "vs-canned-search-logos__logo",
"data-test": "vs-canned-search-logos__award-logo"
}, null, 8, ["src", "alt"])
]),
_: 2
}, 1032, ["title", "disabled", "tabindex"]))), 128)),
t.accessGuide ? (openBlock(), createBlock(i, {
key: 2,
title: t.accessGuide.name,
href: "#",
variant: "subtle",
class: "vs-canned-search-logos__access p-0",
"data-test": "vs-canned-search-logos__access-guide",
disabled: !s.slideVisible(),
tabindex: s.slideVisible() ? "0" : "-1"
}, {
default: withCtx(() => [
createVNode(o, {
src: t.accessGuide.image,
alt: t.accessGuide.name,
class: "vs-canned-search-logos__logo"
}, null, 8, ["src", "alt"])
]),
_: 1
}, 8, ["title", "disabled", "tabindex"])) : createCommentVNode("", !0)
]);
}
const VsCannedSearchLogos = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$1T]]), _sfc_main$22 = {
name: "VsCannedSearchCategories",
status: "prototype",
release: "0.0.1",
props: {
/**
* A list of categories that describe the product, should contain
* objects, each of which has a `name` prop
*/
categories: {
type: Array,
default: null
}
},
computed: {
/**
* Returns the first 3 provided categories as a pipe separated string for
* display
*/
transformedCategories() {
return this.categories ? this.categories.slice(0, 3).map((e) => e.name).join(" | ") : "";
}
}
}, _hoisted_1$1E = {
class: "vs-canned-search-categories",
"data-test": "vs-canned-search-categories"