v8-ui-components
Version:
A component lib for v8 storefront apps
3,232 lines • 176 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styled = _interopDefault(require('styled-components'));
var v8_ui_icons = require('v8.ui.icons');
var v8UiAtoms = require('v8-ui-atoms');
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
var minWidth = '320px';
var maxWidthLarge = '1600px';
var maxWidthSmall = '1254px';
var bpMobile = 767;
var bpTablet = 1024;
var bpDesktop = 1365;
var colGutter = '8px';
var contentPaddingLarge = '0 56px';
var componentSpacing = {
desktopLg: '32px',
desktopSm: '24px',
tablet: '16px',
mobile: '8px'
};
var spacing = {
xxxl: '80px',
xxl: '64px',
xl: '48px',
lgr: '40px',
lg: '32px',
md: '24px',
sm: '16px',
vsm: '12px',
xs: '8px',
vxs: '6px',
xxs: '4px',
xxss: '3px'
};
var row = function (noPadding, noWrap) { return "\n display: flex;\n " + (!noPadding && "padding: " + contentPaddingLarge) + ";\n max-width: " + maxWidthLarge + ";\n min-width: " + minWidth + ";\n flex: 1;\n flex-wrap:" + (noWrap ? 'nowrap' : 'wrap') + " ;\n width: 100%;\n \n " + mediaQueries('md', { noLower: true }) + " {\n padding: 0;\n max-width: " + maxWidthSmall + ";\n }\n"; };
var col = function (colWidth, noPadding) { return "\n width: " + (colWidth / 12) * 100 + "%;\n padding: 0 " + colGutter + ";\n box-sizing: border-box;\n \n &:first-child {\n " + (noPadding && "padding: 0 " + colGutter + " 0 -" + colGutter + ";") + "\n }\n\n &:last-child {\n " + (noPadding && "padding: 0 -" + colGutter + " 0 " + colGutter + ";") + "\n }\n}"; };
var mediaQueries = (function (bpKey, additionalConfig) {
if (additionalConfig && additionalConfig.altCondition) {
return '&&&';
}
switch (bpKey) {
case 'sm':
return "@media (max-width: " + bpMobile + "px)";
case 'md':
if (additionalConfig && additionalConfig.noUpper) {
return "@media (min-width: " + (bpMobile + 1) + "px)";
}
if (additionalConfig && additionalConfig.noLower) {
return "@media (max-width: " + (bpTablet - 1) + "px)";
}
if (additionalConfig && additionalConfig.upperLimit) {
return "@media (min-width: " + (bpMobile +
1) + "px) and (max-width: " + bpDesktop + "px)";
}
return "@media (min-width: " + (bpMobile + 1) + "px) and (max-width: " + (bpTablet -
1) + "px)";
case 'lg':
if (additionalConfig && additionalConfig.upperLimit) {
return "@media (min-width: " + bpTablet + "px) and (max-width: " + bpDesktop + "px)";
}
return "@media (min-width: " + bpTablet + "px)";
case 'xl':
return "@media (min-width: " + (bpDesktop + 1) + "px)";
default:
return null;
}
});
var previewFlexScreenWidth = 18;
var previewFlexItemWidth = {
desktop: 16,
largeMobile: 12,
mobile: 14,
tablet: 16
};
var CarouselWrapper = styled.div(function (_a) {
var theme = _a.theme;
return "\n display: flex;\n width: 100%;\n height: 100%;\n position: relative;\n background: " + theme.carousel.bannerBackgroundColor + ";\n padding: 22px 0 " + theme.carousel.carouselPagination.wrapperHeight + " 0;\n \n " + mediaQueries('md') + " {\n padding-top: " + spacing.sm + ";\n } \n \n " + mediaQueries('sm') + " {\n padding-top: " + spacing.xs + ";\n }\n \n";
});
var CarouselFrame = styled.div(function (_a) {
var minHeight = _a.minHeight, columnGap = _a.columnGap, isSmallCarousel = _a.isSmallCarousel;
return "\n position: relative;\n min-height: " + minHeight + "px;\n height: 100%;\n \n " + mediaQueries('sm') + " {\n height: auto;\n width: calc(100% + " + (!!columnGap.mobile ? columnGap.mobile : 0) + "px);\n margin: " + (!isSmallCarousel
? "0 -" + (!!columnGap.mobile ? columnGap.mobile : 0 / 2) + "px"
: 0) + ";\n }\n \n " + mediaQueries('md') + " {\n overflow: hidden;\n width: calc(100% + " + (!!columnGap.tablet ? columnGap.tablet : 0) + "px);\n margin: " + (!isSmallCarousel
? "0 -" + (!!columnGap.tablet ? columnGap.tablet : 0 / 2) + "px"
: "0 " + columnGap.tablet + "px") + ";\n }\n \n " + mediaQueries('lg') + " {\n overflow: hidden;\n width: calc(100% + " + (!!columnGap.desktop ? columnGap.desktop : 0) + "px);\n margin: " + (!isSmallCarousel
? "0 -" + (!!columnGap.desktop ? columnGap.desktop : 0 / 2) + "px"
: "0 " + columnGap.desktop + "px") + ";\n }\n";
});
var Track = styled.ul(function (_a) {
var shouldAnimate = _a.shouldAnimate;
return "\n list-style: none;\n display: flex;\n height: 100%;\n position: relative;\n left: 0;\n top: 0;\n margin: 0;\n padding: 0;\n text-align: left;\n transition: " + (shouldAnimate ? "transform 0.6s ease, opacity 0.6s ease" : "none") + "; \n";
});
var CarouselItem = styled.li(function (_a) {
var isActive = _a.isActive, previewScaleFactor = _a.previewScaleFactor, shouldAnimate = _a.shouldAnimate, type = _a.type, carouselHeight = _a.carouselHeight, isSingleSlide = _a.isSingleSlide;
return "\n width: 100%;\n box-sizing: border-box;\n transform: scale(" + previewScaleFactor + ");\n opacity: " + (isActive && type === "natural" ? 1 : 0) + ";\n display: " + (isActive && type === "natural" ? "initial" : "none") + ";\n margin: " + (isSingleSlide ? '0' : '8px') + ";\n height: " + carouselHeight + ";\n " + getCarouselAnimation(shouldAnimate, type) + " \n \n " + CarouselSlideKeyframes + " \n \n " + mediaQueries("sm") + " {\n " + (type !== "preClone" && type !== "postClone"
? "margin: 0 " + spacing.vxs + ";"
: "") + " \n }\n \n " + mediaQueries("md") + " {\n " + (type === "natural" ? "opacity: " + (isActive ? 1 : 0) + ";" : "") + "\n }\n \n " + mediaQueries("lg") + " {\n " + (type === "natural" ? "opacity: " + (isActive ? 1 : 0) + ";" : "") + "\n }\n " + (type === "preClone"
? "\n display: block;\n opacity: 1;\n margin-left: " + (isSingleSlide ? '-80%' : '-25%') + ";\n "
: "") + " \n " + (type === "postClone"
? "\n display: block;\n opacity: 1;\n margin-right: " + (isSingleSlide ? '-80%' : '-25%') + ";\n "
: "") + "\n " + mediaQueries("sm") + " {\n " + (type === "preClone"
? "margin-left: -93%; margin-right: " + spacing.vxs + ";"
: "") + " \n " + (type === "postClone"
? "margin-right: -93%; margin-left: " + spacing.vxs + ";"
: "") + " \n }\n \n ";
});
var CarouselItemInner = styled.article(function (_a) {
var productGrid = _a.productGrid;
return "\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow-y: hidden;\n ";
});
var rule = "\n from { \n opacity: 0.3; \n }\n to { \n opacity: 1;\n }\n";
var CarouselSlideKeyframes = "\n @-webkit-keyframes CarouselSlide {\n " + rule + "\n }\n @keyframes CarouselSlide {\n " + rule + "\n } \n";
var getCarouselAnimation = function (shouldAnimate, type) {
return shouldAnimate && type === "natural"
? "animation: CarouselSlide 1000ms;"
: "";
};
var colors = {
primary1: "#016abc",
primary2: "#004f8c",
primary3: "#002a4b",
primary4: "#80b4dd",
primary5: "#e6f0f8",
secondary1: "#d83A22",
secondary2: "#aa2003",
secondary3: "#5b1102",
secondary4: "#f19582",
secondary5: "#fceae6",
tertiary1: "#e6f0f8",
tertiary2: "#fcefe6",
tertiary3: "#09448A",
tertiary4: "",
tertiary5: "",
promotion1: "#bc3e31",
promotion2: "#09448A",
success: "#4fbf76",
successDark: "#2e7c49",
successLight: "#e6f6ec",
warn: "#fcc260",
warnDark: "#8f7344",
warnLight: "#fff6e6",
alert: "#bc3e31",
alertDark: "#8c2e24",
alertLight: "#ffe5e2",
greyscale1: "#ffffff",
greyscale2: "#f3f4f6",
greyscale3: "#ccced0",
greyscale4: "#71777b",
greyscale5: "#40464b",
greyscale6: "#111111",
greyscale7: "#31363A",
};
var globalTheme = {
BorderRadius: "4px",
FontFamily: "Cabin, sans-serif",
baseFontSize: "16px",
FontWeight: 400,
FontWeightBold: 700,
bodyFontColor: "#111111",
HeadlineFontFamily: "Cabin, sans-serif",
HeadlineFontWeight: 700,
bodyBackgroundColor: "#f3f4f6",
};
var theme = {
colors: {
brandColors: {
primary1: colors.primary1,
primary2: colors.primary2,
primary3: colors.primary3,
primary4: colors.primary4,
primary5: colors.primary5,
secondary1: colors.secondary1,
secondary2: colors.secondary2,
secondary3: colors.secondary3,
secondary4: colors.secondary4,
secondary5: colors.secondary5,
tertiary1: colors.tertiary1,
tertiary2: colors.tertiary2,
tertiary3: colors.tertiary3,
tertiary4: colors.tertiary4,
tertiary5: colors.tertiary5,
},
uiColors: {
success: colors.success,
successDark: colors.successDark,
successLight: colors.successLight,
warn: colors.warn,
warnDark: colors.warnDark,
warnLight: colors.warnLight,
alert: colors.alert,
alertDark: colors.alertDark,
alertLight: colors.alertLight,
promotion1: colors.promotion1,
promotion2: colors.promotion2,
greyscale1: colors.greyscale1,
greyscale2: colors.greyscale2,
greyscale3: colors.greyscale3,
greyscale4: colors.greyscale4,
greyscale5: colors.greyscale5,
greyscale6: colors.greyscale6,
greyscale7: colors.greyscale7,
},
},
header: {
badge: {
cart: {
color: colors.secondary1,
bgColor: colors.greyscale1,
},
},
topMenu: {
color: colors.greyscale6,
backgroundColor: colors.greyscale2,
},
mainMenu: {
color: colors.greyscale6,
backgroundColor: colors.greyscale1,
},
bottomMenu: {
color: colors.greyscale6,
hoverColor: colors.primary1,
backgroundColor: colors.greyscale1,
textTransform: "capitalize",
},
mobileMenu: {
color: colors.primary1,
backgroundColor: colors.greyscale1,
},
search: {
borderColor: colors.greyscale3,
borderRadius: "4px",
clearBtnColor: colors.greyscale3,
},
storePopover: {
backgroundColor: colors.primary5,
activeBackgroundColor: colors.secondary5,
color: colors.greyscale5,
activeColor: colors.greyscale5,
borderColor: "transparent",
borderRadius: "4px",
reserveTimeIconPosition: "center",
},
accountPopover: {
backgroundColor: colors.greyscale2,
borderColor: "transparent",
borderRadius: "4px",
color: colors.greyscale5,
},
headerActionLinks: {
activeBackgroundColor: colors.greyscale2,
activeColor: colors.primary1,
backgroundColor: "none",
borderRadius: globalTheme.BorderRadius,
color: colors.greyscale5,
fontFamily: globalTheme.FontFamily,
fontWeight: globalTheme.FontWeightBold,
},
headerLinks: {
color: colors.greyscale5,
backgroundColor: "none",
activeColor: colors.greyscale5,
activeBackgroundColor: colors.greyscale2,
fontWeight: globalTheme.FontWeightBold,
borderRadius: globalTheme.BorderRadius,
},
departments: {
backgroundColor: {
active: "inherit",
static: colors.greyscale2,
},
color: {
static: colors.greyscale5,
hover: colors.primary1,
},
iconColor: {
static: colors.greyscale3,
hover: colors.greyscale3,
},
},
},
body: {
fontSize: globalTheme.baseFontSize,
color: globalTheme.bodyFontColor,
backgroundColor: globalTheme.bodyBackgroundColor,
},
footer: {
mainFooter: {
color: colors.greyscale6,
backgroundColor: colors.greyscale2,
},
bottomFooter: {
color: colors.greyscale1,
backgroundColor: colors.greyscale5,
},
mediaIcons: {
color: colors.greyscale5,
},
},
orderConfirmation: {
iconColor: colors.greyscale1,
backgroundColor: colors.successLight,
},
minimalHeader: {
desktop: {
color: colors.secondary1,
backgroundColor: colors.greyscale1,
iconColor: colors.secondary1,
},
mobile: {
color: colors.secondary1,
backgroundColor: colors.greyscale1,
iconColor: colors.secondary1,
},
},
subHeaderBoxes: {
backgroundColor: colors.greyscale2,
color: colors.greyscale5,
contentBorder: colors.greyscale2,
},
breadcrumb: {
textTransform: "capitalize",
backgroundColor: colors.greyscale2,
color: colors.primary1,
activeColor: colors.greyscale6,
backIconColor: colors.greyscale4,
},
payment: {
selectedCardBackground: colors.primary5,
selectedCardColor: colors.greyscale5,
summary: {
listItemBackground: colors.greyscale2,
},
checkoutCards: {
borderRadius: "4px",
},
},
productPage: {
detailsBackgroundColor: colors.greyscale2,
badges: {
borderRadius: "4px",
},
},
favorites: {
headerIconStyle: "FavSolid",
productColors: {
static: {
color: colors.greyscale3,
hoverColor: colors.alert,
},
active: {
color: colors.alert,
hoverColor: colors.alertDark,
},
},
},
promoBadges: {
backgroundColor: {
promotion: colors.promotion1,
pointsBasedPromo: colors.promotion2,
},
fontWeight: globalTheme.FontWeightBold,
color: {
promotion: colors.greyscale1,
pointsBasedPromo: colors.greyscale1,
},
},
loyaltyCard: {
backgroundColor: colors.primary5,
borderColor: colors.primary5,
borderRadius: "16px",
cardTextColor: colors.greyscale5,
dimensions: {
width: 325,
height: 190,
},
input: {
borderRadius: "4px",
backgroundColor: colors.greyscale1,
borderColor: colors.greyscale3,
idFields: {
staticBorder: colors.greyscale4,
hoverBorder: colors.greyscale5,
activeBorder: colors.primary1,
errorBorder: colors.alert,
},
},
infoList: {
color: colors.greyscale4,
borderColor: colors.greyscale2,
},
},
typography: {
webFonts: [
"https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i&display=swap",
],
weights: {
normal: globalTheme.FontWeight,
bold: globalTheme.FontWeightBold,
},
text: {
body: {
color: colors.greyscale6,
fontFamily: globalTheme.FontFamily,
fontSize: "1rem",
fontWeight: globalTheme.FontWeight,
capitalization: "none",
lineHeight: "1.1875rem",
letterSpacing: "normal",
},
fontXS: {
fontFamily: globalTheme.FontFamily,
fontSize: "0.75rem",
fontWeight: globalTheme.FontWeight,
capitalization: "none",
lineHeight: "0.9375rem",
letterSpacing: "normal",
},
fontSM: {
fontFamily: globalTheme.FontFamily,
fontSize: "0.875rem",
fontWeight: globalTheme.FontWeightBold,
capitalization: "none",
lineHeight: "1rem",
letterSpacing: "normal",
},
fontMD: {
fontFamily: globalTheme.FontFamily,
fontSize: "1rem",
fontWeight: globalTheme.FontWeightBold,
capitalization: "none",
lineHeight: "1.1875rem",
letterSpacing: "normal",
},
fontLG: {
fontFamily: globalTheme.HeadlineFontFamily,
fontSize: "1.5rem",
fontWeight: globalTheme.HeadlineFontWeight,
capitalization: "none",
lineHeight: "1.8125rem",
letterSpacing: "normal",
},
fontXL: {
fontFamily: globalTheme.HeadlineFontFamily,
fontSize: "2rem",
fontWeight: globalTheme.HeadlineFontWeight,
capitalization: "none",
lineHeight: "2.4375rem",
letterSpacing: "normal",
},
},
links: {
static: {
color: colors.primary1,
textDecoration: "none",
},
hover: {
color: colors.primary1,
textDecoration: "underline",
},
clicked: {
color: colors.primary1,
textDecoration: "underline",
},
visited: {
color: colors.primary1,
textDecoration: "none",
},
},
},
buttons: {
globalThemeBorderRadius: globalTheme.BorderRadius,
globalThemeFontWeight: globalTheme.FontWeightBold,
globalThemeFontFamily: globalTheme.FontFamily,
miniCart: {
textTransform: "capitalize",
backgroundColor: "none",
borderRadius: globalTheme.BorderRadius,
activeBackgroundColor: colors.secondary1,
hoverBackgroundColor: colors.secondary5,
color: colors.secondary1,
activeColor: colors.greyscale1,
mobileColor: colors.secondary1,
iconColor: colors.secondary1,
activeIconColor: colors.greyscale1,
mobileIconColor: colors.secondary1,
desktopIconSize: "16px",
mobileIconSize: "24px",
},
primary: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.primary1,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
hover: {
bgColor: colors.primary2,
borderColor: colors.primary2,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
clicked: {
bgColor: colors.primary3,
borderColor: colors.primary3,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: colors.primary4,
borderColor: colors.primary4,
color: colors.greyscale1,
iconColor: colors.greyscale3,
},
},
primaryLight: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary1,
iconColor: colors.primary1,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary2,
iconColor: colors.primary2,
},
clicked: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary3,
iconColor: colors.primary3,
},
disabled: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.greyscale3,
iconColor: colors.greyscale3,
},
},
secondary: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.greyscale1,
borderColor: colors.primary1,
color: colors.primary1,
iconColor: colors.primary1,
},
hover: {
bgColor: colors.primary1,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
clicked: {
bgColor: colors.primary2,
borderColor: colors.primary2,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale3,
iconColor: colors.greyscale3,
},
},
secondaryLight: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: "transparent",
borderColor: colors.greyscale1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale1,
color: colors.primary1,
iconColor: colors.primary1,
},
clicked: {
bgColor: colors.primary2,
borderColor: colors.greyscale1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: "transparent",
borderColor: colors.greyscale3,
color: colors.greyscale3,
iconColor: colors.greyscale3,
},
},
tertiary: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.tertiary1,
borderColor: colors.tertiary1,
color: colors.greyscale5,
iconColor: colors.greyscale5,
},
hover: {
bgColor: colors.tertiary1,
borderColor: colors.tertiary1,
color: colors.primary1,
iconColor: colors.primary1,
},
clicked: {
bgColor: colors.tertiary1,
borderColor: colors.primary1,
color: colors.primary1,
iconColor: colors.primary1,
},
disabled: {
bgColor: colors.greyscale2,
borderColor: colors.greyscale2,
color: colors.greyscale3,
iconColor: colors.greyscale1,
},
},
checkout: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
iconColor: colors.greyscale5,
textTransform: "none",
static: {
bgColor: colors.secondary1,
borderColor: colors.secondary1,
color: colors.greyscale1,
},
hover: {
bgColor: colors.secondary2,
borderColor: colors.secondary2,
color: colors.greyscale1,
},
clicked: {
bgColor: colors.secondary3,
borderColor: colors.secondary3,
color: colors.greyscale1,
},
disabled: {
bgColor: colors.secondary4,
borderColor: colors.secondary4,
color: colors.greyscale1,
},
},
quantityStepper: {
borderColor: colors.greyscale3,
borderRadius: globalTheme.BorderRadius,
textTransform: "none",
numericInput: {
fontWeight: globalTheme.FontWeightBold,
fontSize: "0.875rem",
letterSpacing: "normal",
lineHeight: "1.1875rem",
static: {
bgColor: colors.greyscale1,
color: colors.greyscale5,
},
focused: {
bgColor: colors.primary5,
color: colors.greyscale5,
},
},
plusMinusButtons: {
plusMinusIconBgColor: colors.greyscale1,
plusMinusIconColor: colors.primary1,
},
},
coupon: {
borderRadius: globalTheme.BorderRadius,
borderStyle: "dashed",
fontWeight: globalTheme.FontWeightBold,
static: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
couponIconColor: colors.primary1,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
couponIconColor: colors.primary1,
},
clicked: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
couponIconColor: colors.primary1,
},
clipped: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale5,
clippedIconColor: colors.success,
couponIconColor: colors.greyscale5,
},
},
addToCart: {
borderRadius: globalTheme.BorderRadius,
fontWeight: globalTheme.FontWeightBold,
textTransform: "none",
static: {
bgColor: colors.primary1,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.secondary1,
},
hover: {
bgColor: colors.primary2,
borderColor: colors.primary1,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
clicked: {
bgColor: colors.primary3,
borderColor: colors.primary2,
color: colors.greyscale1,
iconColor: colors.greyscale1,
},
disabled: {
bgColor: colors.primary4,
borderColor: colors.primary4,
color: colors.greyscale1,
iconColor: colors.greyscale3,
},
},
pills: {
borderRadius: "500px",
textTransform: "none",
active: {
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeightBold,
color: colors.greyscale6,
colorHover: colors.greyscale6,
colorVisited: colors.greyscale6,
backgroundColor: colors.primary5,
borderColor: colors.primary1,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
small: {
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeight,
color: colors.greyscale5,
colorHover: colors.greyscale5,
colorVisited: colors.greyscale5,
backgroundColor: colors.primary5,
borderColor: colors.primary5,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "2px 8px",
},
regular: {
fontWeight: globalTheme.FontWeight,
fontWeightHover: globalTheme.FontWeight,
color: colors.primary1,
colorHover: colors.primary1,
colorVisited: colors.primary1,
backgroundColor: colors.greyscale1,
borderColor: colors.greyscale3,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
},
facets: {
borderRadius: "500px",
textTransform: "none",
fontWeight: 400,
active: {
iconColor: colors.greyscale6,
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeightBold,
color: colors.greyscale6,
colorHover: colors.greyscale6,
colorVisited: colors.greyscale6,
backgroundColor: colors.primary5,
borderColor: colors.primary1,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
small: {
iconColor: colors.greyscale6,
fontWeight: globalTheme.FontWeightBold,
fontWeightHover: globalTheme.FontWeight,
color: colors.greyscale5,
colorHover: colors.greyscale5,
colorVisited: colors.greyscale5,
backgroundColor: colors.primary5,
borderColor: colors.primary5,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "2px 8px",
},
regular: {
iconColor: colors.greyscale6,
fontWeight: globalTheme.FontWeight,
fontWeightHover: globalTheme.FontWeight,
color: colors.primary1,
colorHover: colors.greyscale5,
colorVisited: colors.primary1,
backgroundColor: colors.greyscale1,
borderColor: colors.greyscale3,
borderColorSelected: colors.primary1,
textDecoration: "none",
textDecorationHover: "underline",
padding: "4px 16px",
},
},
sliderArrows: {
backgroundColor: colors.greyscale2,
sideBorderColor: colors.greyscale3,
iconColor: colors.greyscale4,
},
filterSort: {
color: colors.primary1,
hoverColor: colors.primary2,
},
},
carousel: {
bannerBackgroundColor: colors.greyscale5,
carouselPagination: {
dotBackground: colors.greyscale3,
activeDotBackground: colors.primary1,
wrapperBackground: "transparent",
wrapperHeight: "32px",
},
carouselArrows: {
borderRadius: "50%",
backgroundColor: "rgba(146, 146, 146, 0.5)",
activeBackgroundColor: colors.greyscale4,
iconColor: colors.greyscale1,
buttonDimension: 56,
},
},
modal: {
header: {
mobileBackgroundColor: colors.greyscale2,
},
storeIcon: {
bgColor: colors.tertiary1,
borderColor: colors.tertiary1,
color: colors.greyscale5,
hoverBGColor: colors.tertiary1,
hoverBorderColor: colors.tertiary1,
iconColor: colors.greyscale6,
},
},
selectedOption: {
bgColor: colors.successLight,
},
input: {
borderRadius: "4px",
static: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale4,
placeholderColor: colors.greyscale4,
},
hover: {
bgColor: colors.greyscale1,
borderColor: colors.greyscale3,
color: colors.greyscale6,
placeholderColor: colors.greyscale4,
},
focus: {
bgColor: colors.tertiary1,
borderColor: colors.primary1,
color: colors.greyscale5,
placeholderColor: colors.greyscale5,
},
disabled: {
bgColor: colors.greyscale2,
borderColor: colors.greyscale3,
color: colors.greyscale4,
placeholderColor: colors.greyscale2,
},
},
productGrid: {
borderColor: colors.greyscale2,
},
logoHeight: {
header: {
desktop: "34px",
tablet: "30px",
mobile: "26px",
},
modal: {
desktop: "34px",
tablet: "30px",
mobile: "30px",
},
content: {
desktop: "34px",
tablet: "30px",
mobile: "26px",
},
},
globalAnimations: {
confettiAnimation: {
successModals: {
colors: [],
},
},
},
};
// CMS component types
var CMSComponentNames = {
Carousel: "Carousel",
CarouselSmall: "CarouselSmall",
Freeform: "Freeform",
ContactUs: "ContactUs",
HeroBanner: "HeroBanner",
Image: "Image",
Video: "Video",
VideoWithContent: "VideoWithContent",
ImageWithContent: "ImageWithContent",
ImageTextButton: "ImageTextButton",
SmallPromotion: "SmallPromotion",
SmallImageWithContent: "SmallImageWithContent",
LargePromotion: "LargePromotion",
TwoBannerContainer: "TwoBannerContainer",
ThreeBannerContainer: "ThreeBannerContainer",
Sale: "Sale",
SmallBannerWithBackgroundImage: "SmallBannerWithBackgroundImage",
SmallBannerWithSupportingImage: "SmallBannerWithSupportingImage",
};
var ContextObject = {
logger: console,
theme: theme,
componentNames: CMSComponentNames
};
var SharedContext = React.createContext(ContextObject);
var getActiveItemRange = function (currentSlideIndex, activeSlideCount) {
if (activeSlideCount === 1) {
return [currentSlideIndex];
}
else if (activeSlideCount === 2) {
return [currentSlideIndex, currentSlideIndex + 1];
}
else if (activeSlideCount === 3) {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [currentSlideIndex, currentSlideIndex + 1, currentSlideIndex + 2];
}
else {
return [0, 1, 2];
}
}
else if (activeSlideCount === 4) {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [
currentSlideIndex,
currentSlideIndex + 1,
currentSlideIndex + 2,
currentSlideIndex + 3,
];
}
else {
return [0, 1, 2, 3];
}
}
else if (activeSlideCount === 5) {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [
currentSlideIndex,
currentSlideIndex + 1,
currentSlideIndex + 2,
currentSlideIndex + 3,
currentSlideIndex + 4,
];
}
else {
return [0, 1, 2, 3, 4];
}
}
else {
var prevNum = currentSlideIndex - 1;
if (prevNum >= 0) {
return [
currentSlideIndex,
currentSlideIndex + 1,
currentSlideIndex + 2,
currentSlideIndex + 3,
currentSlideIndex + 4,
currentSlideIndex + 5,
];
}
else {
return [0, 1, 2, 3, 4, 5];
}
}
};
var CarouselTrack = /** @class */ (function (_super) {
__extends(CarouselTrack, _super);
function CarouselTrack(props) {
var _this = _super.call(this, props) || this;
_this.registerActionStart = function (coordinate) {
// only update state if carouselEnabled
if (_this.props.carouselEnabled) {
_this.setState({
startX: coordinate,
});
}
};
_this.checkIfShouldChangeSlide = function (coordinate) {
// only update state if carouselEnabled
if (_this.props.carouselEnabled) {
var distanceTravelled = coordinate - _this.state.startX;
if (distanceTravelled > _this.props.dragThreshold) {
// if user swiped left further than the dragThreshold
_this.props.previousElement();
}
else if (distanceTravelled < -_this.props.dragThreshold) {
// if user swiped right further than the dragThreshold
_this.props.nextElement();
}
// clean up state
_this.setState({
startX: null,
});
}
};
_this.getIndexOfActiveSlides = function (index) {
return getActiveItemRange(_this.props.currentElementIndex, _this.props.activeSlideCount).filter(function (i) { return i === index; }).length > 0;
};
_this.state = {
startX: null,
};
return _this;
}
CarouselTrack.prototype.render = function () {
var _this = this;
try {
return (React.createElement(Track, { "data-testid": CarouselTrackTestId, role: "list", activeSlideCount: this.props.activeSlideCount, theme: this.context.theme, onMouseDown: function (e) { return _this.registerActionStart(e.pageX); }, onMouseUp: function (e) { return _this.checkIfShouldChangeSlide(e.pageX); }, onTouchEnd: function (e) {
return _this.checkIfShouldChangeSlide(e.changedTouches[0].clientX);
}, onTouchStart: function (e) {
return _this.registerActionStart(e.touches[0].clientX);
}, shouldAnimate: !!this.props.shouldAnimate },
this.props.showPreviews && (React.createElement(CarouselItem, { theme: this.context.theme, isSingleSlide: this.props.activeSlideCount === 1, carouselHeight: this.props.carouselHeight, type: "preClone", isActive: false, previewScaleFactor: this.props.previewScaleFactor, shouldAnimate: this.props.animatedTransitions, "aria-hidden": true, productGrid: this.props.productGrid, "data-testid": CarouselPreviewPreviousSlideTestId },
React.createElement(CarouselItemInner, { productGrid: this.props.productGrid, theme: this.context.theme }, this.props.itemsToRender[this.props.previousElementIndex]))),
this.props.itemsToRender.map(function (item, index) {
return (React.createElement(CarouselItem, { theme: _this.context.theme, carouselHeight: _this.props.carouselHeight, isSingleSlide: _this.props.activeSlideCount === 1, type: "natural", key: "" + index, isActive: _this.getIndexOfActiveSlides(index), previewScaleFactor: 1, shouldAnimate: _this.props.animatedTransitions, "aria-hidden": !_this.getIndexOfActiveSlides(index), productGrid: _this.props.productGrid, "data-testid": "" + CarouselSlideTestId + index },
React.createElement(CarouselItemInner, { productGrid: _this.props.productGrid, theme: _this.context.theme }, item)));
}),
this.props.showPreviews && (React.createElement(CarouselItem, { theme: this.context.theme, carouselHeight: this.props.carouselHeight, type: "postClone", isSingleSlide: this.props.activeSlideCount === 1, isActive: false, previewScaleFactor: this.props.previewScaleFactor, shouldAnimate: this.props.animatedTransitions, "aria-hidden": true, productGrid: this.props.productGrid, "data-testid": CarouselPreviewNextSlideTestId },
React.createElement(CarouselItemInner, { productGrid: this.props.productGrid, theme: this.context.theme }, this.props.itemsToRender[this.props.nextElementIndex])))));
}
catch (e) {
this.context.logger.error("CarouselTrackError", e, { props: this.props });
}
};
CarouselTrack.contextType = SharedContext;
return CarouselTrack;
}(React.Component));
var CarouselTrackTestId = "CarouselTrackTestId";
var CarouselSlideTestId = "CarouselSlideTestId";
var CarouselPreviewPreviousSlideTestId = "CarouselPreviewPreviousSlideTestId";
var CarouselPreviewNextSlideTestId = "CarouselPreviewNextSlideTestId";
var setGoogleTranslateLevel = function (input) {
return 0 + input;
};
var baseLayer = 1;
var overlayLayer = setGoogleTranslateLevel(2);
var ControlsContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: ", ";\n"])), baseLayer);
var templateObject_1;
var CarouselControls = function (props) {
return (React.createElement(ControlsContainer, { "data-testid": CarouselControlsTestId }, props.children));
};
var CarouselControlsTestId = "CarouselControlsTestId";
var ButtonsWrapper = styled.div(function (_a) {
var showArrowsOnMobile = _a.showArrowsOnMobile, showPreviews = _a.showPreviews;
return "\n position: relative;\n height: 100%;\n \n " + mediaQueries("sm") + " {\n display: " + (showArrowsOnMobile ? "block" : "none") + ";\n width: " + (showPreviews.mobile
? "calc(100% * " + previewFlexItemWidth.mobile / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n \n // Specific, extra media query to handle width of cells in mobile banner carousels at 'large mobile' size\n @media (min-width: 490px) and (max-width: " + bpMobile + "px) {\n width: " + (showPreviews.mobile
? "calc(100% * " + previewFlexItemWidth.largeMobile / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n \n " + mediaQueries("md") + " {\n width: " + (showPreviews.tablet
? "calc(100% * " + previewFlexItemWidth.tablet / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n \n " + mediaQueries("lg") + " {\n width: " + (showPreviews.desktop
? "calc(100% * " + previewFlexItemWidth.desktop / previewFlexScreenWidth + ")"
: "100%") + ";\n }\n";
});
var ButtonArrow = styled.button(function (_a) {
var theme = _a.theme, isLeft = _a.isLeft, isRight = _a.isRight, width = _a.width, height = _a.height, alignToTop = _a.alignToTop;
var arrowWidth = Number(width) || Number(theme.carousel.carouselArrows.buttonDimension);
var arrowHeight = Number(height) || Number(theme.carousel.carouselArrows.buttonDimension);
var arrowOffset = Number(arrowWidth) / 2;
return "\n pointer-events: all;\n position: absolute;\n top: " + (alignToTop ? "25%" : "50%") + ";\n transform: translateY(-50%);\n cursor: pointer;\n z-index: " + baseLayer + ";\n height: " + arrowHeight + "px;\n width: " + arrowWidth + "px;\n background-color: " + theme.carousel.carouselArrows.backgroundColor + ";\n border-radius: " + theme.carousel.carouselArrows.borderRadius + ";\n fill: " + theme.carousel.carouselArrows.iconColor + ";\n color: " + theme.carousel.carouselArrows.iconColor + ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n left: " + (!!isLeft ? "-" + arrowOffset + "px" : "auto") + ";\n right: " + (!!isRight ? "-" + arrowOffset + "px" : "auto") + ";\n border: none;\n outline: none;\n box-shadow: 0 0 10px rgba(0,0,0,0.10);\n\n &:hover, &:focus {\n background: " + theme.carousel.carouselArrows.activeBackgroundColor + ";\n }\n ";
});
var CarouselButtons = /** @class */ (function (_super) {
__extends(CarouselButtons, _super);
function CarouselButtons(props) {
var _this = _super.call(this, props) || this;
_this.handleOnClick = function (direction) {
if (direction !== _this.state.previousArrowDirection) {
_this.setState({
previousArrowDirection: direction,
sameArrowClickCount: 1,
});
}
else {
_this.setState({
sameArrowClickCount: _this.state.sameArrowClickCount + 1,
});
}
if (direction === "left") {
_this.props.goToPrevious();
}
else {
_this.props.goToNext();
}
};
_this.handlePrevBtnClick = function () {
if (!!_this.props.getCarouselButtonsAnalyticsEvents) {
_this.props.getCarouselButtonsAnalyticsEvents("carousel-arrow", "left", _this.state.previousArrowDirection !== "left"
? 1
: _this.state.sameArrowClickCount + 1, _this.props.carouselPosition);
}
_this.handleOnClick("left");
};
_this.handleNextBtnClick = function () {
if (!!_this.props.getCarouselButtonsAnalyticsEvents) {
_this.props.getCarouselButtonsAnalyticsEvents("carousel-arrow", "right", _this.state.previousArrowDirection !== "right"
? 1
: _this.state.sameArrowClickCount + 1, _this.props.carouselPosition);
}
_this.handleOnClick("right");
};
// state is ONLY used to keep track of previous state for analytics logic.
_this.state = {
previousArrowDirection: null,
sameArrowClickCount: 0,
};
return _this;
}
CarouselButtons.prototype.render = function () {
return (React.createElement(ButtonsWrapper, { theme: this.context.theme, showArrowsOnMobile: !!this.props.showArrowsOnMobile, showPreviews: this.props.showPreviews, "data-testid": CarouselButtonsComponentTestId },
!this.props.hidePrevArrow && (React.createElement(ButtonArrow, { theme: this.context.theme, isLeft: true, "data-testid": CarouselButtonPreviousTestId, onClick: this.handlePrevBtnClick, "aria-label": "Previous item", width: this.props.btnWidth, height: this.props.btnHeight, alignToTop: this.props.alignToTop },
React.createElement(v8_ui_icons.V8Icons, { iconName: "ChevronLeft", fillColor: "inherit", height: this.props.btnIconSize, width: this.props.btnIconSize }))),
!this.props.hideNextArrow && (React.createElement(ButtonArrow, { theme: this.context.theme, onClick: this.handleNextBtnClick, isRight: true, "data-testid": CarouselButtonNextTestId, "aria-label": "Next item", width: this.props.btnWidth, height: this.props.btnHeight, alignToTop: this.props.alignToTop },
React.createElement(v8_ui_icons.V8Icons, { iconName: "ChevronRight", fillColor: "inherit", height: this.props.btnIconSize, width: this.props.btnIconSize })))));
};
CarouselButtons.contextType = SharedContext;
CarouselButtons.defaultProps = {
btnIconSize: 24,
};
return CarouselButtons;
}(React.Component));
var CarouselButtonsComponentTestId = "CarouselButtonsComponentTestId";
var CarouselButtonPreviousTestId = "CarouselButtonPreviousTestId";
var CarouselButtonNextTestId = "CarouselButtonNextTestId";
var PaginationWrapper = styled.div(function (_a) {
var theme = _a.theme, changeBgColor = _a.changeBgColor;
return "\n text-align: center;\n position: absolute;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 0;\n width: 100%;\n height: " + theme.carousel.carouselPagination.wrapperHeight + ";\n z-index: " + overlayLayer + ";\n background: " + (changeBgColor
? "" + theme.colors.uiColors.greyscale2
: "" + theme.carousel.carouselPagination.wrapperBackground) + ";\n";
});
var PaginationDotLink = styled.button(function (_a) {
var theme = _a.theme;
return "\n width: auto;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n min-width: " + spacing.sm + ";\n min-height: " + spacing.lg + ";\n padding: 0 " + spacing.sm + ";\n cursor: pointer;\n box-sizing: border-box;\n font-family: " + theme.buttons.globalThemeFontFamily + ";\n font-size: 14px;\n font-weight: " + theme.buttons.globalThemeFontWeight + ";\n border: solid 1px transparent;\n user-select: none;\n border-radius: " + theme.buttons.globalThemeBorderRadius + ";\n margin: 0;\n\n &:disabled {\n cursor: inherit;\n }\n\n & > span:not(:first-child) {\n margin-left: " + spacing.xs + ";\n }\n appearance: none;\n background-color: transparent !important;\n border: none !important;\n cursor: pointer;\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n }\n\n svg {\n margin: 0;\n }\n min-width: " + spacing.xs + ";\n padding: " + spacing.xxs + ";\n pointer-events: all;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n";
});
var PaginationDot = styled.span(function (_a) {
var theme = _a.theme, isActive = _a.isActive;
return "\n transition: background 0.15s ease-out;\n height: " + spacing.xs + ";\n width: " + spacing.xs + ";\n background-color: " + (isActive
? theme.carousel.carouselPagination.activeDotBackground
: theme.carousel.carouselPagination.dotBackground) + ";\n border-radius: 50%;\n display: inline-block;\n";
});
var CarouselPagination = function (props) {
var theme = React.useContext(SharedContext).theme;
var handleClick = function (index) {
if (!!props.getCarouselPaginationAnalyticsEvents) {
props.getCarouselPaginationAnalyticsEvents("carousel-dot", index + 1, props.carouselPosition);
}
props.handleDotClick(index);
};
var paginationDots = [];
var _loop_1 = function (itemIndex) {
paginationDots.push(React.createElement(PaginationDotLink, { role: "button", key: itemIndex, onClick: function () { return handleClick(itemIndex); }, theme: theme, "data-testid": "" + CarouselPaginationBtnTestId + itemIndex, "aria-label": "Carousel item " + (itemIndex + 1) },
React.createElement(PaginationDot, { isActive: itemIndex === props.activeDot, theme: theme, "data-testid": "" + CarouselPaginationBtnDotTestId + itemIndex })));
};
for (var itemIndex = 0; itemIndex < props.maxNumberOfItems; itemIndex++) {
_loop_1(itemIndex);
}
return (React.createElement(PaginationWrapper, { changeBgColor: !!props.changeBgColor, theme: theme, "data-testid": CarouselPaginationTestId }, paginationDots));
};
var CarouselPaginationTestId = "CarouselPaginationTestId";
var CarouselPaginationBtnTestId = "CarouselPaginationBtnTestId";
var CarouselPaginationBtnDotTestId = "CarouselPaginationBtnDotTestId";
var sanitizeDisableTrackLoop = function (sPrevies, sPagination, sTrackLoop) {
return {
desktop: sPrevies.desktop
? false
: sPagination.desktop
? false
: sTrackLoop.desktop,
mobile: sPrevies.mobile
? false
: sPagination.mobile
? false
: sTrackLoop.mobile,
tablet: sPrevies.tablet
? false
: sPagination.tablet
? false
: sTrackLoop.tablet,
};
};
// Utils to get current breakpoint, and also to watch for changes in breakpoint
var mediaQueries$1 = {};
var breakpointMediaQueries = {
desktop: "(min-width: 1025px)",
mobile: "(max-width: 767px)",
tablet: "(min-width: 768px) and (max-width: 1024px)",
};
/**
* Handles when media queries are passed
*/
var handleMediaQueryChange = function (mQ, sizeKey, callback) {
if (mQ.matches) {
callback(sizeKey);
}
};
/**
* Initiate media query listeners
*/
var initMediaQueryListeners = function (callback) {
// Initiate matchMedia listener to check if mobile / desktop, and trigger callback when that changes
Object.keys(breakpointMediaQueries).forEach(function (key) {
mediaQueries$1[key] = {};
mediaQueries$1[key] = window.matchMedia(breakpointMediaQueries[key]);
mediaQueries$1[key].changeHandler = function (mq) {
return handleMediaQueryChange(mq, key, callback);
};
mediaQueries$1[key].addListener(mediaQueries$1[key].changeHandler);
// Fire matchMedia listener callback on initial call
mediaQueries$1[key].changeHandler(mediaQueries$1[key]);
});
};
/**
* Remove open media query listeners
*/
var killMediaQueryListeners = function () {
var mediaQueriesKeys = Object.keys(mediaQueries$1);
if (mediaQueriesKeys.length > 0) {
mediaQueriesKeys.forEach(function (key) {
mediaQueries$1[key].removeListener(mediaQueries$1[key].changeHandler);
});
}
};
// Take 'responsive' config props passed in, and standardise their format
var sanitizeResponsiveConfig = function (origPropValue) {
var defaultValue = {
desktop: 0,
mobile: 0,
tablet: 0,
};
// if there is no value passed return object with zero values
if (!origPropValue) {
return defaultValue;
}
// If config is provided as an object, set the appropriate values for the each viewport size
if (typeof origPropValue === "object") {
return {
desktop: !!origPropValue.desktop
? origPropValue.desktop
: defaultValue.desktop,
mobile: !!origPropValue.mobile
? origPropValue.mobile
: defaultValue.mobile,
tablet: !!origPropValue.tablet
? origPropValue.tablet
: defaultValue.tablet,
};
}
// Otherwise, set the provided config number for all viewport sizes
if (typeof origPropValue === "number" || typeof origPropValue === "string") {
return {
desktop: origPropValue,
mobile: origPropValue,
tablet: origPropValue,
};
}
return defaultValue;
};
var compareValues = function (incomingValue, valueToCompare) {
var newValues = {};
var incomingKeys = Object.keys(incomingValue);
var compareKeys = Object.keys(valueToCompare);
if (incomingKeys.length === compareKeys.length) {
incomingKeys.map(function (key) {
if (!!valueToCompare[key] &&
typeof incomingValue[key] === typeof valueToCompare[key]) {
newValues[key] =
incomingValue[key] > valueToCompare[key]
? valueToCompare[key]
: incomingValue[key];
}
});
return newValues;
}
return incomingValue;
};
// Take 'responsive' config props passed in, and standardise their format
var sanitizeResponsiveConfigBoolean = function (origPropValue) {
// If config is provided as an object, set the appropriate values for the each viewport size
if (!!origPropValue && typeof origPropValue === "object") {
return {
desktop: !!origPropValue.desktop,
mobile: !!origPropValue.mobile,
tablet: !!origPropValue.tablet,
};
}
if (!!origPropValue) {
return {
desktop: true,
mobile: true,
tablet: true,
};
}
else {
return {
desktop: false,
mobile: false,
tablet: false,
};
}
};
var Carousel = /** @class */ (function (_super) {
__extends(Carousel, _super);
function Carousel(props) {
var _this = _super.call(this, props) || this;
/**
* Calculate all properties
*/
_this.calculateSanitizedProps = function () {
_this.ColumnGap = sanitizeResponsiveConfig(_this.props.columnGap);
_this.RowSize = sanitizeResponsiveConfig(_this.props.rowSize);
if (_this.props.children.length > 1) {
_this.ShowPreviews = sanitizeResponsiveConfigBoolean(_this.props.showPreviews);
}
else {
// if there is only 1 child do not EVER show the previews
_this.ShowPreviews = {
desktop: false,
mobile: false,
tablet: false,
};
}
_this.StepSize = compareValues(_this.RowSize, sanitizeResponsiveConfig(_this.props.stepSize));
_this.DisableTrackLoop = sanitizeDisableTrackLoop(sanitizeResponsiveConfigBoolean(_this.props.showPreviews), sanitizeResponsiveConfigBoolean(_this.props.showPreviews), sanitizeResponsiveConfigBoolean(_this.props.disableTrackLoop));
};
/**
* Set the current element index in state
*/
_this.setCurrentElementIndex = function (newIndex, shouldAnimate) {
if (shouldAnimate === void 0) { shouldAnimate = false; }
_this.setState({
currentElementIndex: newIndex,
shouldAnimate: shouldAnimate,
});
_this.carouselElement.current.focus();
};
_this.keyHandler = function (e) {
// check if the event is meant for the carousel or a component in the carousel
if (e.target.tagName.match("TEXTAREA|INPUT|SELECT") ||
!_this.state.carouselEnabled) {
return;
}
if (e.keyCode === 37) ;
if (e.keyCode === 39) {
return _this.nextElement();
}
};
_this.doNavigation = function (targetIndex) {
_this.setCurrentElementIndex(targetIndex, _this.props.animatedTransitions);
};
_this.previousElement = function () {
if (_this.props.disableCarousel) {
return;
}
var totalSlides = _this.props.children.length;
var currentElementIndex = _this.state.currentElementIndex;
var loop = _this.props.infiniteLoop;
var decrementAmount = _this.props.slidesPerClick >= _this.state.activeSlideCount
? _this.props.slidesPerClick
: _this.state.activeSlideCount;
// do not decrement more than 0 slides
if (currentElementIndex > 0) {
_this.setState(function (prevState) { return ({
currentElementIndex: prevState.currentElementIndex - decrementAmount,
}); });
// infinite loop
}
else if (currentElementIndex === 0 && loop) {
_this.setState({
currentElementIndex: totalSlides - 1,
});
}
};
_this.nextElement = function () {
if (_this.props.disableCarousel) {
return;
}
var totalSlides = _this.props.children.length;
var currentElementIndex = _this.state.currentElementIndex;
var loop = _this.props.infiniteLoop;
var incrementAmount = _this.props.slidesPerClick >= _this.state.activeSlideCount
? _this.props.slidesPerClick
: _this.state.activeSlideCount;
// do not increment more than max slides
if (currentElementIndex + 1 < totalSlides) {
_this.setState(function (prevState) { return ({
currentElementIndex: prevState.currentElementIndex + incrementAmount,
}); });
// infinite loop
}
else if (currentElementIndex + 1 >= totalSlides && loop) {
_this.setState({
currentElementIndex: 0,
});
}
};
_this.handleDotClick = function (dot) {
return _this.doNavigation(dot * _this.state.activeSlideCount);
};
_this.startCountdown = function () {
// set Timeout to zero to have no autorotate
if (!!_this.props.autoSlideTime && _this.props.autoSlideTime > 0) {
clearTimeout(_this.interval);
_this.interval = null;
_this.interval = setTimeout(function () { return _this.nextElement(); }, _this.props.autoSlideTime);
}
};
_this.calculateSanitizedProps();
_this.state = {
activeViewport: props.initialActiveViewport,
carouselEnabled: true,
currentElementIndex: props.initialPosition,
shouldAnimate: props.animatedTransitions,
carouselPosition: 0,
activeSlideCount: props.activeSlideCount,
};
_this.carouselElement = React.createRef();
return _this;
}
Carousel.prototype.componentDidMount = function () {
var _this = this;
if (this.carouselElement.current &&
this.carouselElement.current.attributes["data-number"]) {
this.setState({
carouselPosition: Number(this.carouselElement.current.attributes["data-number"].value),
});
}
// Initiate screen size check
initMediaQueryListeners(function (newViewPart) {
var newState = __assign(__assign({}, _this.state), { activeViewport: newViewPart });
if (newViewPart === "mobile") {
newState.activeSlideCount = 1;
}
_this.setState(newState);
});
this.startCountdown();
};
Carousel.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
// reset auto-scroll timer
this.startCountdown();
if (prevProps.children.length !== this.props.children.length) {
/**
* If activeViewport is the same as before, refresh the listeners
* in order to render correct sanitizedProps
*/
if (prevState.activeViewport === this.state.activeViewport) {
killMediaQueryListeners();
initMediaQueryListeners(function (newViewPart) {
var newState = __assign(__assign({}, _this.state), { activeViewport: newViewPart });
if (newViewPart === "mobile") {
newState.activeSlideCount = 1;
}
_this.setState(newState);
});
}
this.calculateSanitizedProps();
}
};
Carousel.prototype.componentWillUnmount = function () {
clearTimeout(this.interval);
this.interval = null;
killMediaQueryListeners();
};
Carousel.prototype.render = function () {
try {
var ShowButtons = !this.props.hideButtons[this.state.activeViewport];
var EnabledCarousel = !this.props.disableCarousel;
var ShowPagination = this.props.pagination[this.state.activeViewport];
var HidePrevButton = !this.props.infiniteLoop && this.state.currentElementIndex <= 0;
var HideNextButton = !this.props.infiniteLoop &&
this.state.currentElementIndex + this.state.activeSlideCount >=
this.props.children.length;
return (React.createElement(CarouselWrapper, { onKeyDown: this.keyHandler, theme: this.context.theme, ref: this.carouselElement, "data-component": "Carousel", "data-testid": !!this.props["data-testid"]
? this.props["data-testid"]
: CarouselTestId },
React.createElement(CarouselFrame, { isSmallCarousel: !!this.props.smallCarouselItemCount, columnGap: this.props.columnGap, minHeight: this.props.minHeight, theme: this.context.theme, "data-testid": CarouselFrameTestId },
React.createElement(CarouselTrack, { carouselHeight: this.props.carouselHeight, smallCarouselEnabled: !!this.props.smallCarouselItemCount &&
this.props.smallCarouselItemCount <= 2, activeSlideCount: this.state.activeSlideCount, itemsToRender: this.props.children, previousElementIndex: this.state.currentElementIndex === 0
? this.props.children.length - 1
: this.state.currentElementIndex - this.props.activeSlideCount, currentElementIndex: this.state.currentElementIndex, nextElementIndex: this.state.currentElementIndex ===
this.props.children.length - 1
? 0
: this.state.currentElementIndex + this.props.activeSlideCount, showPreviews: this.props.showPreviews[this.state.activeViewport], previousElement: this.previousElement, nextElement: this.nextElement, shouldAnimate: this.props.animatedTransitions, dragThreshold: this.props.dragThreshold, animatedTransitions: this.props.animatedTransitions, carouselEnabled: this.state.carouselEnabled, previewScaleFactor: this.props.previewScaleFactor, activeViewport: this.state.activeViewport, productGrid: this.props.isProductGrid })),
React.createElement(CarouselControls, null,
EnabledCarousel && ShowButtons && (React.createElement(CarouselButtons, { hidePrevArrow: HidePrevButton, hideNextArrow: HideNextButton, showArrowsOnMobile: this.props.showArrowsOnMobile, goToPrevious: this.previousElement, goToNext: this.nextElement, showPreviews: this.props.showPreviews, btnHeight: this.props.navigationButtonSize.height, btnWidth: this.props.navigationButtonSize.width, btnIconSize: this.props.navigationButtonSize.iconSize, carouselPosition: this.state.carouselPosition, alignToTop: this.props.isProductGrid })),
EnabledCarousel && ShowPagination && (React.createElement(CarouselPagination, { maxNumberOfItems: this.props.children.length / this.state.activeSlideCount, activeDot: this.state.currentElementIndex / this.state.activeSlideCount, handleDotClick: this.handleDotClick, carouselPosition: this.state.carouselPosition, changeBgColor: this.props.isProductGrid })))));
}
catch (e) {
this.context.logger.error("Error Carousel", e, { props: this.props });
}
};
Carousel.contextType = SharedContext;
Carousel.defaultProps = {
autoSlideTime: 0,
infiniteLoop: false,
slidesPerClick: 1,
activeSlideCount: 1,
disableCarousel: false,
initialActiveViewport: "mobile",
hideButtons: {
desktop: false,
mobile: true,
tablet: false,
},
pagination: {
desktop: false,
mobile: true,
tablet: false,
},
columnGap: {
desktop: 0,
mobile: 0,
tablet: 0,
},
animatedTransitions: false,
dragThreshold: 100,
initialPosition: 0,
minHeight: 120,
previewScaleFactor: 1,
showArrowsOnMobile: true,
showPreviews: false,
isProductGrid: false,
navigationButtonSize: {
height: undefined,
width: undefined,
iconSize: undefined,
},
stepSize: 1,
disableTrackLoop: false,
};
return Carousel;
}(React.Component));
var CarouselTestId = "CarouselTestId";
var CarouselFrameTestId = "CarouselFrameTestId";
var StyledContactUs = styled.div(function (props) { return ""; });
var ContactUs = function (props) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
return (React.createElement(StyledContactUs, { theme: theme, "data-testid": ContactUsComponentTestId }));
}
catch (e) {
logger.error("Error: V8Components.ContactUs", e, { props: props });
return null;
}
};
var ContactUsComponentTestId = "ContactUsComponentTestId";
var Alignment;
(function (Alignment) {
Alignment["Left"] = "left";
Alignment["Center"] = "center";
Alignment["Right"] = "right";
})(Alignment || (Alignment = {}));
var ImageSize;
(function (ImageSize) {
ImageSize["Large"] = "large";
ImageSize["Medium"] = "medium";
ImageSize["Small"] = "small";
})(ImageSize || (ImageSize = {}));
var CMSPathToName;
(function (CMSPathToName) {
CMSPathToName["LayoutExtraLargeBanner1"] = "Page topper - full background";
CMSPathToName["LayoutExtraLargeBanner2"] = "Page Topper - 50/50 split";
CMSPathToName["ImageTextButton"] = "ImageTextButton";
CMSPathToName["StandardContentBlock1"] = "Small Banner with background";
CMSPathToName["StandardContentBlock2"] = "Small banner with supporting image";
CMSPathToName["StandardContentBlock3"] = "Image with content";
CMSPathToName["StackedContentBlock"] = "Small image with content";
CMSPathToName["TextButton"] = "TextAndButton";
CMSPathToName["VideoWithContent"] = "Video with content";
CMSPathToName["Recipe"] = "Recipe";
CMSPathToName["HeroBanner"] = "HeroBanner";
})(CMSPathToName || (CMSPathToName = {}));
var _getImageUrl = function (sizesObj, imageSize) {
var defaultImageUrl = sizesObj && sizesObj[ImageSize.Large] ? sizesObj[ImageSize.Large].url : '';
var imageUrl = sizesObj && sizesObj[imageSize] && imageSize !== ImageSize.Large
? sizesObj[imageSize].url
: defaultImageUrl;
return _escapeSpecialCharactersInUrl(imageUrl);
};
var _escapeSpecialCharactersInUrl = function (url) {
if (typeof url === 'string') {
return url.replace('(', '\\(').replace(')', '\\)');
}
else
return '';
};
var getImageUrl = (function (sizesObj, imageSize) {
return "background-image: " + (_getImageUrl(sizesObj, imageSize).length > 0
? "url(" + _getImageUrl(sizesObj, imageSize) + ")"
: 'none') + ";";
});
var justifyContent = {
center: 'center',
left: 'flex-start',
right: 'flex-end'
};
var HeroBannerStyled = styled.div(function (_a) {
var theme = _a.theme, isInContainer = _a.isInContainer, viewport = _a.viewport;
var Common = "max-width: 100%;width: 100%;height: 100%;overflow: hidden;position: relative;background-color: " + theme.colors.uiColors.greyscale1 + ";display: flex;";
if (isInContainer) {
return "\n " + Common + "\n " + (viewport === "mobile" ? 'flex-direction: column;' : '') + "\n ";
}
else {
return "\n " + Common + "\n " + mediaQueries("sm") + " {\n flex-direction: column;\n }\n " + mediaQueries("md", { noUpper: true }) + " {\n min-height: 440px; \n }\n ";
}
});
var HeroBannerBackground = styled.div(function (_a) {
var imageSizes = _a.imageSizes;
return "\n " + getImageUrl(imageSizes, ImageSize.Small) + "\n background-position-x: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 200px;\n\n " + mediaQueries("sm") + " {\n margin-bottom: -" + spacing.md + ";\n }\n \n " + mediaQueries("md", { noUpper: true }) + " {\n height:100%;\n width: 100%;\n position: absolute;\n left: 0;\n top: 0;\n " + getImageUrl(imageSizes, ImageSize.Medium) + "\n }\n\n " + mediaQueries("lg") + " {\n " + getImageUrl(imageSizes, ImageSize.Large) + "\n }\n ";
});
var HeroBannerContentWrapper = styled.div(function (_a) {
var textBoxAlignment = _a.textBoxAlignment;
return "\n position: relative;\n display: flex;\n justify-content: " + (!!textBoxAlignment && !!justifyContent[textBoxAlignment.toLowerCase()]
? justifyContent[textBoxAlignment.toLowerCase()]
: "initial") + ";\n width:100%;\n \n " + mediaQueries("sm") + " {\n width: 96%;\n margin: auto;\n }\n ";
});
var HeroBannerContent = styled.div(function (_a) {
var theme = _a.theme, textAlignment = _a.textAlignment, centerContent = _a.centerContent;
return "\n display: flex;\n flex-direction: column;\n padding: " + spacing.lg + " " + spacing.xl + " " + spacing.xl + ";\n text-align: " + textAlignment + ";\n width: " + (!centerContent ? "510px" : "100%") + ";\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n margin: " + spacing.lg + ";\n word-break: break-word;\n\n " + mediaQueries("lg") + " {\n margin: auto 56px;\n height: fit-content;\n }\n\n " + mediaQueries("md", { noLower: true }) + " {\n height: fit-content;\n margin: auto 32px;\n padding: " + spacing.lg + ";\n width: " + (!centerContent ? "440px" : "100%") + ";\n }\n\n " + mediaQueries("sm") + " {\n position: relative;\n margin: 0px;\n width: 100%;\n padding: " + spacing.vsm + ";\n border: none;\n text-align: center;\n }\n ";
});
var HeroBannerSmallHeading = styled.span(function (_a) {
var theme = _a.theme;
return "\n font-family: " + (theme.typography.text.fontSM.fontFamily ||
theme.typography.text.body.fontFamily) + ";\n font-size: " + theme.typography.text.fontSM.fontSize + ";\n line-height: " + theme.typography.text.fontSM.lineHeight + ";\n font-weight: " + theme.typography.text.fontSM.fontWeight + ";\n text-transform: uppercase;\n letter-spacing: 0.05rem;\n margin: " + spacing.xs + " 0;\n color: " + theme.colors.uiColors.greyscale4 + "; \n ";
});
var HeroBannerHeading = styled.h2(function (_a) {
var theme = _a.theme;
return "\n margin: 0;\n color: " + theme.colors.uiColors.greyscale5 + ";\n font-weight: " + theme.typography.weights.bold + ";\n font-size: " + theme.typography.text.fontXL.fontSize + ";\n line-height: " + theme.typography.text.fontXL.lineHeight + ";\n " + mediaQueries("sm") + " {\n font-size: " + theme.typography.text.fontLG.fontSize + ";\n line-height: " + theme.typography.text.fontLG.lineHeight + ";\n }\n ";
});
var HeroBannerBodyText = styled.div(function (_a) {
var theme = _a.theme;
return "\n list-style-position:inside;\n padding: " + spacing.sm + " 0;\n color: " + theme.colors.uiColors.greyscale5 + ";\n font-size: " + theme.typography.text.body.fontSize + ";\n margin-bottom: auto;\n\n " + mediaQueries("sm") + " {\n padding: " + spacing.xs + " 0;\n }\n ";
});
var HeroBannerButtonWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 100%;\n margin-top: ", ";\n\n ", " {\n margin-top: auto;\n }\n\n ", " {\n margin-top: auto;\n }\n"], ["\n width: 100%;\n margin-top: ", ";\n\n ", " {\n margin-top: auto;\n }\n\n ", " {\n margin-top: auto;\n }\n"])), spacing.md, mediaQueries("md", { noUpper: true }), mediaQueries("sm"));
var templateObject_1$1;
var setDefaultImagePropSizes = function (rawImagePropSizes) {
var imagePropSizes = __assign(__assign({}, rawImagePropSizes), { large: __assign(__assign({}, (rawImagePropSizes ? rawImagePropSizes.large : {})), { url: rawImagePropSizes && rawImagePropSizes.large
? rawImagePropSizes.large.url
: '' }) });
return imagePropSizes;
};
var ReadMoreContent = styled.div(function (_a) {
var showReadMoreButton = _a.showReadMoreButton, readMoreButtonToggled = _a.readMoreButtonToggled, visibleHeight = _a.visibleHeight;
return "\n margin: 0 0 " + spacing.sm + " 0;\n " + (showReadMoreButton &&
"\n height: " + (readMoreButtonToggled ? visibleHeight + "px" : "fit-content;") + ";\n overflow: hidden;\n ") + ";\n";
});
var ReadMoreBtn = styled(v8UiAtoms.Button)(function (_a) {
var theme = _a.theme, readMoreButtonToggled = _a.readMoreButtonToggled, textAlignment = _a.textAlignment;
return "\n display: block;\n padding: 0;\n font-size: " + theme.typography.text.fontSM.fontSize + ";\n margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " auto " + spacing.sm + " auto;\n \n " + mediaQueries("md") + " {\n margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " auto " + spacing.sm + " 0;\n " + (textAlignment === 'center' ? "margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " auto " + spacing.sm + " auto;" : '') + "\n " + (textAlignment === 'right' ? "margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " 0 " + spacing.sm + " auto;" : '') + "\n }\n \n " + mediaQueries("lg") + " {\n margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " auto " + spacing.sm + " 0;\n " + (textAlignment === 'center' ? "margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " auto " + spacing.sm + " auto;" : '') + "\n " + (textAlignment === 'right' ? "margin: -" + (readMoreButtonToggled ? spacing.xs : spacing.sm) + " 0 " + spacing.sm + " auto;" : '') + "\n }\n ";
});
var ReadMoreWrapper = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
var templateObject_1$2;
var getNumericValue = function (location, str, exactValue) {
if (exactValue === void 0) { exactValue = false; }
try {
if (!!str && typeof str === 'string') {
if (exactValue) {
return Number(str.replace(/\/(.*)|(?![\.])\D/g, ''));
}
else {
return Number(str.replace(/\D/g, ''));
}
}
else if (!!str && typeof str === 'number') {
return str;
}
else
return 0;
}
catch (e) {
console.warn('getNumericValue() ', e, { location: location, str: str, exactValue: exactValue });
return 0;
}
};
var ReadMoreWrapper$1 = function (props) {
var theme = React.useContext(SharedContext).theme;
var childRef = React.useRef(null);
var Children = React.cloneElement(props.children, {
ref: childRef,
});
var _a = React.useState(true), readMoreButton = _a[0], setReadMoreButton = _a[1];
var _b = React.useState(false), showReadMoreButton = _b[0], setShowReadMoreButton = _b[1];
var _c = React.useState(0), visibleHeight = _c[0], setVisibleHeight = _c[1];
var desktopLines = !!props.desktopVisibleLines
? props.desktopVisibleLines
: 6;
var mobileLines = !!props.mobileVisibleLines ? props.mobileVisibleLines : 4;
React.useEffect(function () {
if (!!window && !!childRef.current) {
var comptStyles = window.getComputedStyle(childRef.current);
var isMobile = window.innerWidth <= bpTablet;
var visibleLines = isMobile ? mobileLines : desktopLines;
if (visibleLines === "auto") {
setVisibleHeight(0);
setShowReadMoreButton(false);
return;
}
var childHeight = getNumericValue("readMoreWrapper-getHeight", comptStyles.height, true);
var lineHeight = getNumericValue("readMoreWrapper-getLineHeight", comptStyles.lineHeight, true);
var childTopPadding = getNumericValue("readMoreWrapper-getTopPadding", comptStyles.paddingTop, true);
var childBottomPadding = getNumericValue("readMoreWrapper-getTopPadding", comptStyles.paddingBottom, true);
setVisibleHeight(lineHeight * visibleLines + childTopPadding);
setShowReadMoreButton(childHeight >
lineHeight * visibleLines + (childTopPadding + childBottomPadding));
}
}, [props]);
return (React.createElement(ReadMoreWrapper, null,
React.createElement(ReadMoreContent, { showReadMoreButton: showReadMoreButton && visibleHeight !== 0, readMoreButtonToggled: readMoreButton, visibleHeight: visibleHeight }, props.children && Children),
showReadMoreButton && (React.createElement(ReadMoreBtn, { theme: theme, textAlignment: props.textAlignment, className: "", buttonStyle: "buttonLink", role: "link", ariaLabel: readMoreButton ? "Read More" : "Read Less", handleClick: function () {
setReadMoreButton(!readMoreButton);
}, readMoreButtonToggled: readMoreButton }, readMoreButton ? "Read More" : "Read Less"))));
};
var getAlignment = function (alignmentProp) {
switch (alignmentProp.toLowerCase()) {
case 'left':
return 'flex-start';
case 'center':
return 'center';
case 'right':
return 'flex-end';
default:
return 'flex-start';
}
};
var CtaButton = styled.div(function (_a) {
var align = _a.align;
return "\n width: 100%;\n display: flex;\n justify-content: " + (!!align ? getAlignment(align) : 'flex-start') + ";\n z-index: " + overlayLayer + ";\n \n " + mediaQueries("sm") + " {\n justify-content: center;\n }\n ";
});
var CtaButton$1 = function (props) {
var AltStyle = props.AltStyle, ButtonText = props.ButtonText, Link = props.Link, TextAlignment = props.TextAlignment, className = props.className, ctaButtonIconData = props.ctaButtonIconData;
var ButtonContents = function () {
if (!!ctaButtonIconData && ctaButtonIconData.iconAlignment === "left") {
return (React.createElement(React.Fragment, null,
React.createElement(v8_ui_icons.V8Icons, { iconName: ctaButtonIconData.iconName, fillColor: "inherit", size: "16" }),
React.createElement("span", null, ButtonText)));
}
else if (!!ctaButtonIconData &&
ctaButtonIconData.iconAlignment === "right") {
return (React.createElement(React.Fragment, null,
React.createElement("span", null, ButtonText),
React.createElement(v8_ui_icons.V8Icons, { iconName: ctaButtonIconData.iconName, fillColor: "inherit", size: "16" })));
}
else {
return React.createElement(React.Fragment, null, ButtonText);
}
};
return (React.createElement(CtaButton, { align: TextAlignment, className: className, "data-component": "CtaButton" }, Link && ButtonText && (React.createElement("a", { href: Link, style: { textDecoration: 'none' } },
React.createElement(v8UiAtoms.Button, { analyticsEvents: function () { return props.ctaAnalytics(props); }, buttonStyle: !!AltStyle ? AltStyle : "primary", className: className, adjustForTouch: true },
React.createElement(ButtonContents, null))))));
};
var HeroBanner = function (rawProps) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
var props = {
TextBoxAlignment: rawProps.TextBoxAlignment || rawProps.TextAlignment || Alignment.Left,
TextAlignment: rawProps.TextAlignment || Alignment.Left,
BannerImageSizes: setDefaultImagePropSizes(rawProps.BannerImageSizes),
BannerImageAltText: rawProps.BannerImageAltText || rawProps.HeadingText,
HeadingText: rawProps.HeadingText || "",
SubHeadingText: rawProps.SubHeadingText || "",
BodyText: rawProps.BodyText || "",
ButtonText: rawProps.ButtonText || "",
Link: rawProps.Link || "",
centerContent: rawProps.centerContent,
parentName: rawProps.parentName || CMSPathToName.HeroBanner,
ctaAnalytics: rawProps.ctaAnalytics,
isInContainer: !!rawProps.isInContainer,
viewport: rawProps.viewport,
maxHeight: rawProps.maxHeight,
};
return (React.createElement(HeroBannerStyled, { theme: theme, "data-component": "HeroBanner", isInContainer: props.isInContainer, viewport: props.viewport, "data-testid": HeroBannerComponentTestId },
React.createElement(HeroBannerBackground, { imageSizes: props.BannerImageSizes, theme: theme }),
React.createElement("span", { role: "img", "aria-label": props.BannerImageAltText }),
React.createElement(HeroBannerContentWrapper, { textBoxAlignment: props.TextBoxAlignment, theme: theme },
React.createElement(HeroBannerContent, { theme: theme, textAlignment: props.TextAlignment, centerContent: props.centerContent },
React.createElement(HeroBannerSmallHeading, { theme: theme }, props.HeadingText),
React.createElement(HeroBannerHeading, { theme: theme }, props.SubHeadingText),
React.createElement(ReadMoreWrapper$1, { textAlignment: props.TextAlignment },
React.createElement(HeroBannerBodyText, { theme: theme, dangerouslySetInnerHTML: { __html: props.BodyText } })),
React.createElement(HeroBannerButtonWrapper, null,
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, TextAlignment: props.TextAlignment, AltStyle: !!props.ButtonStyle ? props.ButtonStyle : 'secondary', parentHeading: props.HeadingText, parentName: props.parentName, ctaAnalytics: props.ctaAnalytics }))))));
}
catch (e) {
logger.error("Error: V8Components.HeroBanner", e, { props: rawProps });
return null;
}
};
var HeroBannerComponentTestId = "HeroBannerComponentTestId";
var TwoBannerContainerWrapper = styled.div(function (_a) {
var displayVertical = _a.displayVertical;
return "\n display: flex;\n justify-content: center;\n flex-direction: column;\n\n " + mediaQueries("md") + " {\n flex-direction: " + (displayVertical ? "column" : "row") + ";\n }\n\n " + mediaQueries("lg") + " {\n flex-direction: row;\n }\n";
});
var TwoBannerContainerItem1 = styled.div(function (_a) {
var displayVertical = _a.displayVertical;
return "\n width: 100%;\n display: flex;\n align-items: center;\n margin-bottom: " + componentSpacing.mobile + ";\n\n " + mediaQueries("md") + " {\n margin-bottom: inherit;\n padding: " + (displayVertical ? "0" : "0 " + spacing.xs + " 0 0") + ";\n " + (displayVertical ? "margin-bottom: " + componentSpacing.tablet + ";" : "") + "\n }\n\n " + mediaQueries("lg") + " {\n margin-bottom: inherit;\n padding: 0 " + spacing.xs + " 0 0;\n \n }\n";
});
var TwoBannerContainerItem2 = styled.div(function (_a) {
var displayVertical = _a.displayVertical;
return "\n width: 100%;\n display: flex;\n align-items: center;\n\n " + mediaQueries("md") + " {\n padding: " + (displayVertical ? "0" : "0 0 0 " + spacing.xs) + ";\n }\n\n " + mediaQueries("lg") + " {\n padding: 0 0 0 " + spacing.xs + ";\n }\n";
});
var StyledVideo = styled.iframe(function (_a) {
var isInContainer = _a.isInContainer;
var Common = "height: calc(54.25vw); width: 100%;";
var Large = "height: calc(100vw * 0.27);";
if (isInContainer) {
return " \n " + Common + " \n " + Large + "\n ";
}
else {
return " \n " + Common + " \n " + mediaQueries("lg") + " { " + Large + " }\n ";
}
});
var Video = function (props) {
var logger = React.useContext(SharedContext).logger;
try {
if (!props.VideoUrl) {
return null;
}
return (React.createElement(StyledVideo, { "data-testid": !!props["data-testid"] ? props["data-testid"] : VideoComponentTestId, frameBorder: 0, allowFullScreen: true, src: props.VideoUrl, allow: "autoplay encrypted-media", isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight }));
}
catch (e) {
logger.error("Error: V8Components.Video", e, { props: props });
return null;
}
};
var VideoComponentTestId = "VideoComponentTestId";
var CmsImage = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: 100%;\n height: auto;\n"], ["\n width: 100%;\n height: auto;\n"])));
var templateObject_1$3;
var mapImageSizes = function (sizesObj) {
var srcSet = [];
var mapBreakpoint = function (breakpoint) {
switch (breakpoint.toLowerCase()) {
case 'large':
return 'desktop';
case 'medium':
return 'tablet';
case 'small':
return 'mobile';
default:
return 'desktop';
}
};
if (Object.keys(sizesObj).length) {
Object.keys(sizesObj).map(function (size) {
var srcSetObj = {
src: sizesObj[size].url,
breakpoint: mapBreakpoint(size)
};
srcSet.push(srcSetObj);
});
}
return srcSet;
};
var Image = function (rawProps) {
var logger = React.useContext(SharedContext).logger;
try {
var props = {
ImagePropsAltText: rawProps.ImagePropsAltText || "An Image",
ImagePropsSizes: setDefaultImagePropSizes(rawProps.ImagePropsSizes),
LinkUrl: rawProps.LinkUrl || "",
maxHeight: !!rawProps.maxHeight ? rawProps.maxHeight : undefined,
isInContainer: !!rawProps.isInContainer,
viewport: rawProps.viewport,
};
var Sizes = {
mobile: "small",
tablet: "medium",
desktop: "large",
};
var ImgSrc = void 0;
if (props.isInContainer) {
ImgSrc = props.ImagePropsSizes[Sizes[props.viewport]].url;
}
else {
ImgSrc = props.ImagePropsSizes.large.url;
}
return (React.createElement(CmsImage, { "data-component": "CmsImageComponent", "data-testid": ImageCmsComponentTestId }, props.LinkUrl ? (React.createElement(v8UiAtoms.Link, { href: props.LinkUrl },
React.createElement(v8UiAtoms.ImageComponent, { src: ImgSrc, srcSet: props.isInContainer
? undefined
: mapImageSizes(props.ImagePropsSizes), alt: props.ImagePropsAltText, width: "100%", maxHeight: props.isInContainer ? "100%" : props.maxHeight, sourcesDifferBy: "appearance" }))) : (React.createElement(v8UiAtoms.ImageComponent, { src: ImgSrc, srcSet: props.isInContainer
? undefined
: mapImageSizes(props.ImagePropsSizes), alt: props.ImagePropsAltText, width: "100%", maxHeight: props.isInContainer ? "100%" : props.maxHeight, sourcesDifferBy: "appearance" }))));
}
catch (e) {
logger.error("Error: V8Components.Image", e, {
props: rawProps,
});
return null;
}
};
var ImageCmsComponentTestId = "ImageCmsComponentTestId";
var ImageTextButton = styled.div(function (_a) {
var theme = _a.theme, contentAlignment = _a.contentAlignment, maxHeight = _a.maxHeight, isInContainer = _a.isInContainer;
return "\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n position: relative;\n align-items: " + (!!contentAlignment && !!justifyContent[contentAlignment.toLowerCase()]
? justifyContent[contentAlignment.toLowerCase()]
: "initial") + ";\n }\n " + ((isInContainer && !!maxHeight) ? "max-height: " + maxHeight + ";" : "") + "\n\t";
});
var ImageTextButtonImageLink = styled.a(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
var ImageTextButtonContent = styled.div(function (_a) {
var textAlignment = _a.textAlignment, isInContainer = _a.isInContainer, viewport = _a.viewport, theme = _a.theme;
return "\n align-items: " + (!!textAlignment && !!justifyContent[textAlignment.toLowerCase()]
? justifyContent[textAlignment.toLowerCase()]
: "initial") + ";\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n display: flex;\n flex-direction: column;\n padding: " + spacing.sm + ";\n text-align: " + textAlignment + ";\n word-break: break-word;\n " + (!isInContainer ? '' : viewport === 'mobile' ? '' : "position: absolute; bottom: 0;") + "\n ";
});
var ImageTextButtonHeading = styled.h2(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-bottom: ", ";\n margin: 0;\n"], ["\n padding-bottom: ", ";\n margin: 0;\n"])), spacing.sm);
var ImageTextButtonSubHeading = styled.h4(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: ", ";\n margin: 0;\n"], ["\n padding-bottom: ", ";\n margin: 0;\n"])), spacing.sm);
var ImageTextButtonBodyText = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n justify-content: center;\n"], ["\n display: flex;\n flex: 1;\n justify-content: center;\n"])));
var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4;
var ImageTextButton$1 = function (rawProps) {
var logger = React.useContext(SharedContext).logger;
try {
var props = {
ImagePropsSizes: setDefaultImagePropSizes(rawProps.ImagePropsSizes),
ImagePropsAltText: rawProps.ImagePropsAltText || "",
ContentAlignment: rawProps.ContentAlignment || Alignment.Left,
HeadingText: rawProps.HeadingText || "",
SubHeadingText: rawProps.SubHeadingText || "",
BodyText: rawProps.BodyText || "",
TextBoxAlignment: rawProps.TextBoxAlignment ||
rawProps.ContentAlignment ||
Alignment.Left,
ButtonText: rawProps.ButtonText || "",
ButtonTitle: rawProps.ButtonTitle || "",
Link: rawProps.Link || "",
LinkUrl: rawProps.LinkUrl || "",
LinkTitle: rawProps.LinkTitle || "",
parentName: rawProps.parentName || CMSPathToName.ImageTextButton,
maxHeight: rawProps.maxHeight || undefined,
isInContainer: !!rawProps.isInContainer,
viewport: rawProps.viewport,
};
return (React.createElement(ImageTextButton, { isInContainer: props.isInContainer, maxHeight: props.maxHeight, viewport: props.viewport, contentAlignment: props.ContentAlignment, "data-component": "ImageTextButton" },
React.createElement(ImageTextButtonImageLink, { href: props.LinkUrl, "aria-label": props.HeadingText, title: props.LinkTitle },
React.createElement(v8UiAtoms.ImageComponent, { src: props.ImagePropsSizes.large ? props.ImagePropsSizes.large.url : "", alt: props.ImagePropsAltText, srcSet: mapImageSizes(props.ImagePropsSizes), sourcesDifferBy: "appearance", width: "100%", maxHeight: props.maxHeight, objectFit: "contain" })),
React.createElement(ImageTextButtonContent, { isInContainer: props.isInContainer, maxHeight: props.maxHeight, viewport: props.viewport, textAlignment: props.ContentAlignment, buttonAlignment: props.TextBoxAlignment },
React.createElement(ImageTextButtonHeading, null, props.HeadingText),
props.SubHeadingText && (React.createElement(ImageTextButtonSubHeading, null, props.SubHeadingText)),
React.createElement(ReadMoreWrapper$1, { textAlignment: props.ContentAlignment },
React.createElement(ImageTextButtonBodyText, { dangerouslySetInnerHTML: { __html: props.BodyText } })),
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, AltStyle: "secondary", TextAlignment: props.ContentAlignment, parentHeading: props.HeadingText, parentName: props.parentName }))));
}
catch (e) {
logger.error("Error: V8Components.ImageTextButton", e, {
props: rawProps,
});
return null;
}
};
var ImageTextButton$2 = styled.div(function (_a) {
var theme = _a.theme, contentAlignment = _a.contentAlignment, maxHeight = _a.maxHeight, viewport = _a.viewport, isInContainer = _a.isInContainer;
var Alignment = justifyContent[contentAlignment.toLowerCase()];
var Common = "background-color: " + theme.colors.uiColors.greyscale1 + "; display: flex; flex-direction: column; height: 100%; position: relative;align-items: " + (!!Alignment ? Alignment : "initial") + "; " + (!!maxHeight ? "max-height: " + maxHeight + ";" : "");
var Large1 = "flex-direction: " + (contentAlignment === "right" ? "row-reverse" : "row") + "; height: 300px;";
var LargeCarousel = "flex-direction: " + (contentAlignment === "right" ? "row-reverse" : "row") + "; width: 100%;";
if (isInContainer) {
{
return "\n " + Common + "\n " + (viewport === "tablet" ? LargeCarousel : "") + "\n " + (viewport === "desktop" ? LargeCarousel : "") + "\n ";
}
}
else {
return "\n " + Common + " \n " + mediaQueries("md") + " {\n " + Large1 + "\n }\n " + mediaQueries("lg") + " {\n " + Large1 + "\n }";
}
});
// if is mobile no height
var ImageTextButtonImageLink$1 = styled.a(function (_a) {
var isInContainer = _a.isInContainer, isMobile = _a.isMobile;
return "\n width: 100%;\n " + (!isInContainer ? "height: inherit;" : (isInContainer && isMobile) ? '' : "height: inherit;") + "\n";
});
var ImageTextButtonBackground = styled.div(function (_a) {
var imageSizes = _a.imageSizes, viewport = _a.viewport, isInContainer = _a.isInContainer;
var Common = "\n " + getImageUrl(imageSizes, ImageSize.Small) + "\n background-position-x: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 200px;\n ";
var Small = "margin-bottom: -" + spacing.xl + ";";
var Large = "height:100%; width: 100%; " + getImageUrl(imageSizes, ImageSize.Large);
if (isInContainer) {
return "\n " + Common + "\n " + (viewport === "mobile" ? Small : "") + "\n " + (viewport === "tablet" ? Large : "") + "\n " + (viewport === "desktop" ? Large : "") + "\n ";
}
else {
return "\n " + Common + "\n " + mediaQueries("sm") + " { " + Small + " }\n " + mediaQueries("md") + " { " + Large + " }\n " + mediaQueries("lg") + " { " + Large + " }\n ";
}
});
var ImageTextButtonContent$1 = styled.div(function (_a) {
var textAlignment = _a.textAlignment, theme = _a.theme, viewport = _a.viewport, isInContainer = _a.isInContainer;
var Common = "\n position: relative;\n display: flex;\n flex-direction: column;\n width: 96%;\n word-break: break-word;\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n color: " + theme.colors.uiColors.greyscale5 + ";\n padding: " + spacing.sm + ";\n text-align: " + textAlignment + ";\n margin: auto;\n ";
var Small = "text-align: center;";
var Medium = "padding: " + spacing.md + ";";
var Large = "width: 100%;height: -webkit-fill-available;justify-content: space-evenly;padding: " + spacing.md + ";";
if (isInContainer) {
return "\n " + Common + "\n " + (viewport === "mobile" ? Small : "") + "\n " + (viewport === "tablet" ? Medium : "") + "\n " + (viewport === "desktop" ? Large : "") + "\n ";
}
else {
return "\n " + Common + "\n " + mediaQueries("sm") + " { " + Small + " }\n " + mediaQueries("md") + " { " + Medium + " }\n " + mediaQueries("lg") + " { " + Large + " }\n ";
}
});
var ImageTextButtonHeading$1 = styled.h2(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding-bottom: ", ";\n margin: 0;\n"], ["\n padding-bottom: ", ";\n margin: 0;\n"])), spacing.sm);
var ImageTextButtonSubHeading$1 = styled.p(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n padding-bottom: ", ";\n margin: 0;\n font-weight: 400;\n"], ["\n padding-bottom: ", ";\n margin: 0;\n font-weight: 400;\n"])), spacing.sm);
var ImageTextButtonBodyText$1 = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n justify-content: center;\n padding-bottom: ", ";\n"], ["\n display: flex;\n flex: 1;\n justify-content: center;\n padding-bottom: ", ";\n"])), spacing.sm);
var templateObject_1$5, templateObject_2$1, templateObject_3$1;
var ImageWithContent = function (rawProps) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
var props = {
ImagePropsSizes: setDefaultImagePropSizes(rawProps.ImagePropsSizes),
ImageAlignment: rawProps.ImageAlignment || Alignment.Left,
ContentAlignment: rawProps.ContentAlignment || Alignment.Left,
HeadingText: rawProps.HeadingText || "",
BodyText: rawProps.BodyText || "",
ButtonText: rawProps.ButtonText || "",
Link: rawProps.Link || "",
LinkUrl: rawProps.LinkUrl || "",
maxHeight: rawProps.maxHeight || undefined,
viewport: rawProps.viewport,
isInContainer: !!rawProps.isInContainer,
};
return (React.createElement(ImageTextButton$2, { contentAlignment: props.ImageAlignment, "data-component": "ImageWithContent", "data-testid": ImageWithContentTestId, maxHeight: props.maxHeight, theme: theme, isInContainer: props.isInContainer, viewport: props.viewport },
React.createElement(ImageTextButtonImageLink$1, { href: props.LinkUrl, isInContainer: props.isInContainer, isMobile: props.viewport === "mobile" },
React.createElement(ImageTextButtonBackground, { imageSizes: props.ImagePropsSizes, isInContainer: props.isInContainer, viewport: props.viewport })),
React.createElement(ImageTextButtonContent$1, { theme: theme, isInContainer: props.isInContainer, viewport: props.viewport, textAlignment: props.ContentAlignment },
React.createElement(ImageTextButtonHeading$1, { theme: theme }, props.HeadingText),
React.createElement(ImageTextButtonSubHeading$1, null, props.BodyText),
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, AltStyle: "secondary", TextAlignment: (props.isInContainer && props.viewport === "mobile") ? 'center' : props.ContentAlignment, parentHeading: props.HeadingText }))));
}
catch (e) {
logger.error("Error: V8Components.ImageWithContent", e, {
props: rawProps,
});
return null;
}
};
var ImageWithContentTestId = 'ImageWithContentTestId';
var StandardContentBlock1Heading = styled.h2(function (_a) {
var contentAlignment = _a.contentAlignment;
return "\n text-decoration: none;\n padding-bottom: 0.75rem;\n margin: 0 0 auto;\n text-align: " + contentAlignment + ";\n \n " + mediaQueries("sm") + " {\n text-align: center;\n }\n";
});
var StandardContentBlock1 = styled.div(function (_a) {
var theme = _a.theme, imageSizes = _a.imageSizes, contentAlignment = _a.contentAlignment, isInContainer = _a.isInContainer, maxHeight = _a.maxHeight, viewport = _a.viewport;
var Common = "\n background-size: cover;\n color: " + theme.colors.uiColors.greyscale1 + ";\n display: flex;\n flex-direction: column;\n align-items: " + (!!contentAlignment && !!justifyContent[contentAlignment.toLowerCase()]
? justifyContent[contentAlignment.toLowerCase()]
: "initial") + ";\n justify-content: space-around;\n min-height: 200px;\n height: 100%;\n position: relative;\n width: 100%;\n padding: " + spacing.sm + ";\n " + getImageUrl(imageSizes, ImageSize.Large) + "\n background-position: center;\n " + (!!maxHeight ? "max-height: " + maxHeight + ";" : "") + "\n ";
var Medium = "" + getImageUrl(imageSizes, ImageSize.Medium);
var Small = getImageUrl(imageSizes, ImageSize.Small) + "; width: 100%;";
if (isInContainer) {
return "\n " + Common + "\n " + (viewport === "tablet" ? Medium : "") + "\n " + (viewport === "mobile" ? Small : "") + "\n ";
}
else {
return "\n " + Common + "\n " + mediaQueries("md") + " { " + Medium + " }\n " + mediaQueries("sm") + " { " + Small + " }\n ";
}
});
var StandardContentBlock1WrapperLink = styled(v8UiAtoms.Link)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject([""], [""])));
var templateObject_1$6;
var SmallBannerWithBackgroundImage = function (rawProps) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
var props = {
ContentAlignment: rawProps.ContentAlignment || Alignment.Center,
ImagePropsSizes: setDefaultImagePropSizes(rawProps.ImagePropsSizes),
HeadingText: rawProps.HeadingText || "",
ButtonText: rawProps.ButtonText || "",
Link: rawProps.Link || "",
LinkUrl: rawProps.LinkUrl || "",
ImagePropsAltText: rawProps.ImagePropsAltText || "",
maxHeight: rawProps.maxHeight || undefined,
isInContainer: !!rawProps.isInContainer,
viewport: rawProps.viewport,
};
return (React.createElement(StandardContentBlock1, { "data-testid": SmallBannerWithBackgroundImageTestId, "data-component": "SmallBannerWithBackgroundImage", imageSizes: props.ImagePropsSizes, theme: theme, contentAlignment: props.ContentAlignment, isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight },
props.LinkUrl ? (React.createElement(StandardContentBlock1WrapperLink, { href: props.LinkUrl, noStyles: true, "aria-label": props.ImagePropsAltText }, props.HeadingText && (React.createElement(StandardContentBlock1Heading, { isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight, contentAlignment: props.ContentAlignment }, props.HeadingText)))) : (React.createElement(React.Fragment, null, props.HeadingText && (React.createElement(StandardContentBlock1Heading, { isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight, contentAlignment: props.ContentAlignment }, props.HeadingText)))),
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, AltStyle: "primaryLight", parentHeading: props.HeadingText, parentName: CMSPathToName.StandardContentBlock1, TextAlignment: props.ContentAlignment })));
}
catch (e) {
logger.error("Error: V8Components.SmallBannerWithBackgroundImage", e, {
props: rawProps,
});
return null;
}
};
var SmallBannerWithBackgroundImageTestId = "SmallBannerWithBackgroundImageTestId";
var StackedContentBlockWrapper = styled.div(function (_a) {
var theme = _a.theme, maxHeight = _a.maxHeight;
return "\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n width: 100%;\n height: 100%;\n min-height: 200px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\t";
});
var StackedContentBlockContentWrapper = styled.div(function (_a) {
var textAlignment = _a.textAlignment, theme = _a.theme;
return "\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n padding: " + spacing.sm + ";\n text-align: center;\n margin: 0 " + spacing.xs + " 0 " + spacing.xs + ";\n z-index: " + overlayLayer + ";\n position: relative;\n word-break: break-word;\n display: flex;\n flex-direction: column;\n flex-grow: 2;\n justify-content: flex-end;\n \n " + mediaQueries("md") + " {\n text-align: " + textAlignment + ";\n }\n\n " + mediaQueries("lg") + " {\n text-align: " + textAlignment + ";\n }\n";
});
var StackedContentBlockImageLinkWrapper = styled(v8UiAtoms.Link)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
var StackedContentBlockImageContainer = styled.div(function () { return "\n min-height: 148px;\n max-height: 148px;\n overflow: hidden;\n"; });
var StackedContentBlockHeadingText = styled.h2(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n margin: 0 0 0.75rem;\n"], ["\n margin: 0 0 0.75rem;\n"])));
var StackedContentBlockBodyText = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
var StackedContentBlockButtonWrapper = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n width: 100%;\n margin-top: ", ";\n"], ["\n width: 100%;\n margin-top: ", ";\n"])), spacing.sm);
var templateObject_1$7, templateObject_2$2, templateObject_3$2, templateObject_4$1;
var SmallImageWithContent = function (rawProps) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
var props = {
ImagePropsSizes: setDefaultImagePropSizes(rawProps.ImagePropsSizes),
ImagePropsAltText: rawProps.ImagePropsAltText || "",
ContentAlignment: rawProps.ContentAlignment || Alignment.Left,
HeadingText: rawProps.HeadingText || "",
SubHeadingText: rawProps.SubHeadingText || "",
ButtonText: rawProps.ButtonText || "",
Link: rawProps.Link || "",
LinkUrl: rawProps.LinkUrl || "",
isInContainer: !!rawProps.isInContainer,
viewport: rawProps.viewport,
maxHeight: rawProps.maxHeight || undefined,
};
return (React.createElement(StackedContentBlockWrapper, { "data-component": "SmallImageWithContent", "data-testid": SmallImageWithContentTestId, isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight, theme: theme },
React.createElement(StackedContentBlockImageContainer, null, props.LinkUrl ? (React.createElement(StackedContentBlockImageLinkWrapper, { href: props.LinkUrl },
React.createElement(v8UiAtoms.ImageComponent, { srcSet: mapImageSizes(props.ImagePropsSizes), src: props.ImagePropsSizes.large.url, sourcesDifferBy: "appearance", objectFit: "cover", width: "100%", alt: props.ImagePropsAltText }))) : (React.createElement(v8UiAtoms.ImageComponent, { srcSet: mapImageSizes(props.ImagePropsSizes), src: props.ImagePropsSizes.large.url, sourcesDifferBy: "appearance", objectFit: "cover", width: "100%", alt: props.ImagePropsAltText }))),
React.createElement(StackedContentBlockContentWrapper, { textAlignment: props.ContentAlignment },
React.createElement(StackedContentBlockHeadingText, null, props.HeadingText),
React.createElement(ReadMoreWrapper$1, { textAlignment: props.ContentAlignment },
React.createElement(StackedContentBlockBodyText, { dangerouslySetInnerHTML: { __html: props.SubHeadingText || "" } })),
React.createElement(StackedContentBlockButtonWrapper, null,
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, TextAlignment: props.ContentAlignment, AltStyle: "secondary", parentHeading: props.HeadingText, parentName: CMSPathToName.StackedContentBlock })))));
}
catch (e) {
logger.error("Error: V8Components.SmallImageWithContent", e, {
props: rawProps,
});
return null;
}
};
var SmallImageWithContentTestId = 'SmallImageWithContentTestId';
var StandardContentBlock2 = styled.div(function (_a) {
var theme = _a.theme, imageAlignment = _a.imageAlignment, maxHeight = _a.maxHeight;
return "\n\t\tbackground-color: " + theme.colors.uiColors.greyscale1 + ";\n\t\twidth: 100%;\n height: 100%;\n display: flex;\n flex-direction: " + (imageAlignment === "right" ? "row" : "row-reverse") + ";\n " + (!!maxHeight ? "max-height: " + maxHeight + ";" : "") + "\n\t";
});
var StandardContentBlock2ImgContainer = styled.div(function () { return "\n display: flex;\n max-width: 50%;\n overflow: hidden;\n"; });
var Atag = styled.a(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n picture {\n display: flex;\n }\n img {\n margin: auto;\n }\n"], ["\n picture {\n display: flex;\n }\n img {\n margin: auto;\n }\n"])));
var StandardContentBlock2HeadingText = styled.h2(function (_a) {
var theme = _a.theme, contentAlignment = _a.contentAlignment;
return "\n width: 80%;\n font-weight: " + theme.typography.weights.bold + ";\n color: " + theme.colors.uiColors.greyscale5 + ";\n text-align: center;\n margin: 0 auto;\n \n " + mediaQueries("md") + " {\n text-align: " + contentAlignment + ";\n " + (contentAlignment === "left" ? "margin-left: 0;" : "") + ";\n " + (contentAlignment === "right" ? "margin-right: 0;" : "") + ";\n }\n " + mediaQueries("lg") + " {\n text-align: " + contentAlignment + ";\n " + (contentAlignment === "left" ? "margin-left: 0;" : "") + ";\n " + (contentAlignment === "right" ? "margin-right: 0;" : "") + ";\n }\n ";
});
var StandardContentBlock2ButtonWrapper = styled.div(function (_a) {
var viewport = _a.viewport, isInContainer = _a.isInContainer;
var Common = "margin: " + spacing.vsm + " auto; width: 100%;";
var Medium = "margin: " + spacing.md + " auto;";
if (isInContainer) {
return "\n " + Common + " \n " + (viewport === "tablet" ? Medium : "") + "\n " + (viewport === "desktop" ? Medium : "") + "\n ";
}
else {
return "\n " + Common + " \n " + mediaQueries("md") + " { " + Medium + " }\n " + mediaQueries("lg") + " { " + Medium + " }\n ";
}
});
var StandardContentBlock2ContentWrapper = styled.div(function (_a) {
var isInContainer = _a.isInContainer, viewport = _a.viewport;
var Common = "display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; padding: " + spacing.vsm + " " + spacing.vsm + ";";
var Medium = "padding: " + spacing.sm + " " + spacing.xl + ";";
if (isInContainer) {
return "\n " + Common + "\n " + (viewport === "tablet" ? Medium : "") + "\n " + (viewport === "desktop" ? Medium : "") + "\n ";
}
else {
return "\n " + Common + "\n " + mediaQueries("md") + " { " + Medium + " }\n " + mediaQueries("lg") + " { " + Medium + " }\n ";
}
});
var templateObject_1$8;
var SmallBannerWithSupportingImage = function (rawProps) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
var props = {
ImageAlignment: rawProps.ImageAlignment || Alignment.Right,
ImagePropsSizes: setDefaultImagePropSizes(rawProps.ImagePropsSizes),
LinkUrl: rawProps.LinkUrl || "",
ImagePropsAltText: rawProps.ImagePropsAltText || "",
ContentAlignment: rawProps.ContentAlignment || Alignment.Center,
HeadingText: rawProps.HeadingText || "",
ButtonText: rawProps.ButtonText || "",
Link: rawProps.Link || "",
maxHeight: rawProps.maxHeight || undefined,
isInContainer: rawProps.isInContainer,
viewport: rawProps.viewport,
};
return (React.createElement(StandardContentBlock2, { "data-component": "SmallBannerWithSupportingImage", "data-testid": SmallBannerWithSupportingImageTestId, theme: theme, imageAlignment: props.ImageAlignment, maxHeight: props.maxHeight },
React.createElement(StandardContentBlock2ContentWrapper, { viewport: props.viewport, isInContainer: props.isInContainer },
React.createElement(StandardContentBlock2HeadingText, { theme: theme, contentAlignment: props.ContentAlignment }, props.HeadingText),
React.createElement(StandardContentBlock2ButtonWrapper, { isInContainer: props.isInContainer, viewport: props.viewport },
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, AltStyle: "secondary", TextAlignment: props.ContentAlignment, parentHeading: props.HeadingText, parentName: CMSPathToName.StandardContentBlock2 }))),
React.createElement(StandardContentBlock2ImgContainer, { imageAlignment: props.ImageAlignment },
React.createElement(Atag, { href: props.LinkUrl, style: { display: "flex" } },
React.createElement(v8UiAtoms.ImageComponent, { srcSet: mapImageSizes(props.ImagePropsSizes), sourcesDifferBy: "appearance", width: "100%", src: props.ImagePropsSizes.large.url, alt: props.ImagePropsAltText || "Image Link" })))));
}
catch (e) {
logger.error("Error: V8Components.SmallBannerWithSupportingImage", e, {
props: rawProps,
});
return null;
}
};
var SmallBannerWithSupportingImageTestId = "SmallBannerWithSupportingImageTestId";
// TODO: find and remove refs and delete this
var borderRadius = function (factor) {
if (factor === void 0) { factor = '4px'; }
return "\n border-radius: " + factor + ";\n ";
};
var shadows = {
large: '0px 5px 10px 0px rgba(0, 0, 0, 0.1)',
medium: '0px 2px 4px 0px rgba(0, 0, 0, 0.15)',
small: '0px 2px 4px 0px rgba(0, 0, 0, 0.05)'
};
var Container = styled.div(function (_a) {
var theme = _a.theme;
return "\n background: " + theme.colors.uiColors.greyscale1 + ";\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n padding: " + spacing.sm + ";\n box-shadow: " + shadows.large + ";\n " + borderRadius() + ";\n ";
});
var PromoContent = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", ";\n min-width: 0;\n height: 100%;\n"], ["\n ", ";\n min-width: 0;\n height: 100%;\n"])), row(true));
var Details = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n ", ";\n min-height: 100%;\n display: flex;\n flex-direction: column;\n"], ["\n ", ";\n min-height: 100%;\n display: flex;\n flex-direction: column;\n"])), col(8, false));
var PromoText = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n padding-bottom: ", ";\n margin-bottom: auto;\n"], ["\n padding-bottom: ", ";\n margin-bottom: auto;\n"])), spacing.md);
var PromoName = styled.h2(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n margin-top: 0;\n margin-bottom: ", ";\n"], ["\n margin-top: 0;\n margin-bottom: ", ";\n"])), spacing.xs);
var FeatureImageContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), col(4, false));
var FeatureImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: block;\n width: 100%;\n height: auto;\n"], ["\n display: block;\n width: 100%;\n height: auto;\n"])));
var Requirements = styled.p(function (_a) {
var theme = _a.theme;
return "\n color: " + theme.colors.uiColors.greyscale4 + ";\n font-size: " + theme.typography.text.fontXS.fontSize + ";\n margin-top: " + spacing.sm + ";\n";
});
var CTAButton = styled(v8UiAtoms.Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
var templateObject_1$9, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5, templateObject_6, templateObject_7;
var Container$1 = styled.div(function (_a) {
var theme = _a.theme, isInContainer = _a.isInContainer;
return "\n background: " + theme.colors.uiColors.greyscale1 + ";\n position: relative;\n height: 100%;\n width: 100%;\n\n " + mediaQueries('md', { noUpper: true }) + " {\n display: flex;\n flex-direction: row-reverse;\n " + (isInContainer ? '' : 'max-height: 300px;') + "\n overflow: hidden;\n }\n ";
});
var FeatureImageContainer$1 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n flex-basis: 50%;\n min-height: ", ";\n"], ["\n flex-basis: 50%;\n min-height: ", ";\n"])), spacing.xl);
var FeatureImage$1 = styled.img(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: block;\n width: 100%;\n height: auto;\n"], ["\n display: block;\n width: 100%;\n height: auto;\n"])));
var Details$1 = styled.div(function (_a) {
var theme = _a.theme;
return "\n position: relative;\n background: " + theme.colors.uiColors.greyscale1 + ";\n margin: -" + spacing.xl + " " + spacing.xs + " 0 " + spacing.xs + ";\n padding: " + spacing.sm + ";\n text-align: center;\n \n " + mediaQueries('md', { noUpper: true }) + " {\n margin-top: 0;\n flex-basis: 50%;\n }\n";
});
var Description = styled.h3(function (_a) {
var theme = _a.theme;
return "\n font-weight: " + theme.typography.weights.normal + ";\n";
});
var Requirements$1 = styled.p(function (_a) {
var theme = _a.theme;
return "\n color: " + theme.colors.uiColors.greyscale4 + ";\n font-size: " + theme.typography.text.fontXS.fontSize + ";\n margin-top: " + spacing.sm + ";\n";
});
var ShopOfferButton = styled(v8UiAtoms.Button)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n"])), spacing.xl, spacing.xl);
var templateObject_1$a, templateObject_2$4, templateObject_3$4;
var prettyDate = (function (location, date, abbreviate, showTime, timeZone) {
if (abbreviate === void 0) { abbreviate = true; }
if (showTime === void 0) { showTime = true; }
if (timeZone === void 0) { timeZone = 'GMT'; }
try {
var options = {
weekday: abbreviate ? 'short' : 'long',
month: abbreviate ? 'short' : 'long',
day: 'numeric',
hour12: true,
hour: showTime ? 'numeric' : undefined,
minute: showTime ? 'numeric' : undefined,
timeZone: timeZone
};
var formattedDate = new Date(date);
return new Intl.DateTimeFormat('en-US', options)
.format(formattedDate)
.toString()
.replace(' AM', 'am')
.replace(' PM', 'pm');
}
catch (e) {
return '';
}
});
var ADD_SPEND_PROMOTION_ACTION = "AddSpend";
var promotionsImpressionsAnalytics = "promotion-impression";
var promotionsClickAnalytics = "promotion-click";
var LargePromotion = /** @class */ (function (_super) {
__extends(LargePromotion, _super);
function LargePromotion() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleClick = function () {
return !!_this.props.googleAnalytics &&
_this.props.googleAnalytics({
gaType: promotionsClickAnalytics,
promotionsArray: _this.props.promotion,
promotionPosition: "largePromotion" + (!!_this.props.cmsPosition &&
!!_this.props.cmsPosition.rowIndex &&
!!_this.props.cmsPosition.columnIndex &&
":row-" + _this.props.cmsPosition.rowIndex + ",column-" + _this.props.cmsPosition.columnIndex),
});
};
return _this;
}
LargePromotion.prototype.componentDidMount = function () {
!!this.props.googleAnalytics &&
this.props.googleAnalytics({
gaType: promotionsImpressionsAnalytics,
promotionsArray: this.props.promotion,
promotionPosition: "largePromotion" + (!!this.props.cmsPosition &&
!!this.props.cmsPosition.rowIndex &&
!!this.props.cmsPosition.columnIndex &&
":row-" + this.props.cmsPosition.rowIndex + ",column-" + this.props.cmsPosition.columnIndex),
});
};
LargePromotion.prototype.render = function () {
try {
var promotion = this.props.promotion;
var props = {
limit: (promotion && promotion.limit) || 0,
threshold: (promotion && promotion.threshold) || 0,
startDate: (promotion && promotion.startDate) || "",
endDate: (promotion && promotion.endDate) || "",
id: (promotion && promotion.promotionRetailerId) || "",
name: (promotion && promotion.name) || "",
imageUrl: (promotion && !!promotion.image && promotion.image.url) || "",
imageAlt: (promotion && !!promotion.image && promotion.image.alt) || "",
isMissed: (promotion && promotion.isMissed) || false,
compensatingAction: (promotion && promotion.compensatingAction) ||
ADD_SPEND_PROMOTION_ACTION,
missingSkus: (promotion && promotion.missingSkus) || [],
targetSkuCount: (promotion && promotion.targetAmountOfProducts) || 0,
skusCountRequired: (promotion && promotion.additionalProductsRequiredToQualify) || 0,
additionalSpend: (promotion && promotion.additionalSpend) || "",
targetSpend: (promotion && promotion.targetSpend) || "",
spendPercentage: (promotion && promotion.percentageOfCompletion) || 0,
description: (promotion && promotion.description) || "",
};
// const skuCount = props.skusCountRequired;
// const isAddSpend = props.compensatingAction === ADD_SPEND_PROMOTION_ACTION;
// const isAddSkus = props.compensatingAction === ADD_SKUS_PROMOTION_ACTION;
if (!props || !props.name) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(Container$1, { "data-component": "LargePromotion", isInContainer: this.props.isInContainer, viewport: this.props.viewport },
React.createElement(FeatureImageContainer$1, null, props.imageUrl && props.imageAlt && (React.createElement(FeatureImage$1, { src: props.imageUrl, alt: props.imageAlt }))),
React.createElement(Details$1, null,
props.name && React.createElement("h2", null, props.name),
props.description && (React.createElement(Description, null, props.description)),
props.id && (React.createElement(v8UiAtoms.Link, { noStyles: true, href: "/promotion/" + props.id },
React.createElement(v8UiAtoms.Button, { handleClick: this.handleClick, className: "", buttonStyle: "primary" }, "Shop Offer"))),
React.createElement(Requirements$1, null, props.startDate &&
props.endDate &&
"Place order " + prettyDate("LargePromotion1", props.startDate) + " thru\n " + prettyDate("LargePromotion2", props.endDate) + "."))));
}
catch (e) {
this.context.logger.error("Error LargePromotionComponent", e, {
props: this.props,
});
}
};
return LargePromotion;
}(React.Component));
var SmallPromotion = /** @class */ (function (_super) {
__extends(SmallPromotion, _super);
function SmallPromotion() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleClick = function () {
return _this.props.googleAnalytics({
gaType: promotionsClickAnalytics,
promotionsArray: _this.props.promotion,
promotionPosition: "smallPromotion" + (!!_this.props.cmsPosition &&
!!_this.props.cmsPosition.rowIndex &&
!!_this.props.cmsPosition.columnIndex &&
":row-" + _this.props.cmsPosition.rowIndex + ",column-" + _this.props.cmsPosition.columnIndex),
});
};
return _this;
}
SmallPromotion.prototype.componentDidMount = function () {
this.props.googleAnalytics({
gaType: promotionsImpressionsAnalytics,
promotionsArray: this.props.promotion,
promotionPosition: "smallPromotion" + (!!this.props.cmsPosition &&
!!this.props.cmsPosition.rowIndex &&
!!this.props.cmsPosition.columnIndex &&
":row-" + this.props.cmsPosition.rowIndex + ",column-" + this.props.cmsPosition.columnIndex),
});
};
SmallPromotion.prototype.render = function () {
var promotion = this.props.promotion;
var props = {
id: (promotion && promotion.promotionRetailerId) || "",
name: (promotion && promotion.name) || "",
imageUrl: (promotion && !!promotion.image && promotion.image.url) || "",
imageAlt: (promotion && !!promotion.image && promotion.image.alt) || "",
isMissed: (promotion && promotion.isMissed) || false,
compensatingAction: (promotion && promotion.compensatingAction) ||
ADD_SPEND_PROMOTION_ACTION,
missingSkus: (promotion && promotion.missingSkus) || [],
targetSkuCount: (promotion && promotion.targetAmountOfProducts) || 0,
skusCountRequired: (promotion && promotion.additionalProductsRequiredToQualify) || 0,
additionalSpend: this.props.cartMissedTargetRequired &&
this.props.cartMissedTargetRequired.spendRequired
? this.props.cartMissedTargetRequired.spendRequired
: (promotion && promotion.additionalSpend) || "",
targetSpend: (promotion && promotion.targetSpend) || "",
spendPercentage: this.props.cartMissedTargetRequired &&
this.props.cartMissedTargetRequired.percentageOfCompletion
? this.props.cartMissedTargetRequired.percentageOfCompletion
: (promotion && promotion.percentageOfCompletion) || 0,
description: (promotion && promotion.description) || "",
};
// const skuCount = props.skusCountRequired;
// const isAddSpend = props.compensatingAction === ADD_SPEND_PROMOTION_ACTION;
// const isAddSkus = props.compensatingAction === ADD_SKUS_PROMOTION_ACTION;
if (!props || !props.name) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(Container, { "data-component": "SmallPromotion" },
React.createElement(PromoContent, null,
React.createElement(Details, null,
React.createElement(PromoText, null,
props.name && React.createElement(PromoName, null, props.name),
props.description && React.createElement("p", null, props.description)),
props.id && (React.createElement(v8UiAtoms.Link, { noStyles: true, href: "/promotion/" + props.id },
React.createElement(v8UiAtoms.Button, { handleClick: this.handleClick, buttonStyle: "primary", className: "" }, "Shop Offer")))),
React.createElement(FeatureImageContainer, null, props.imageUrl && props.imageAlt && (React.createElement(FeatureImage, { src: props.imageUrl, alt: props.imageAlt }))))));
};
return SmallPromotion;
}(React.Component));
var TwoBannerContainer = /** @class */ (function (_super) {
__extends(TwoBannerContainer, _super);
function TwoBannerContainer(props) {
var _this = _super.call(this, props) || this;
_this.SetViewport = function (a) {
if (a === "desktop") {
_this.setState({ viewport: "tablet" });
}
else {
_this.setState({ viewport: "mobile" });
}
};
_this.GetComponent = function (element, passedDownProps) {
var componentNames = _this.context.componentNames;
var props = __assign(__assign({}, element.data), passedDownProps);
var ComponentName = element.type;
if (!!element.componentName) {
ComponentName = element.componentName;
}
switch (ComponentName) {
case componentNames.Image: {
return React.createElement(Image, __assign({}, props));
}
case componentNames.ImageTextButton: {
return React.createElement(ImageTextButton$1, __assign({}, props));
}
case componentNames.ImageWithContent: {
return React.createElement(ImageWithContent, __assign({}, props));
}
case componentNames.SmallBannerWithBackgroundImage: {
return React.createElement(SmallBannerWithBackgroundImage, __assign({}, props));
}
case componentNames.SmallBannerWithSupportingImage: {
return React.createElement(SmallBannerWithSupportingImage, __assign({}, props));
}
case componentNames.SmallImageWithContent: {
return React.createElement(SmallImageWithContent, __assign({}, props));
}
case componentNames.SmallPromotion: {
return (React.createElement(SmallPromotion, __assign({}, props, { cmsPosition: {
rowIndex: _this.props.cmsPosition.rowIndex,
columnIndex: location,
}, componentKey: element.componentKey, googleAnalytics: _this.props.googleAnalytics, promotion: _this.props.promotions[element.componentKey] })));
}
case componentNames.Video: {
return React.createElement(Video, __assign({}, props));
}
default: {
return null;
}
}
};
_this.state = {
maxHeight: undefined,
isInContainer: true,
viewport: "mobile",
};
return _this;
}
TwoBannerContainer.prototype.componentDidMount = function () {
initMediaQueryListeners(this.SetViewport);
};
TwoBannerContainer.prototype.render = function () {
try {
if (this.props.items.length === 0) {
return null;
}
return (React.createElement(TwoBannerContainerWrapper, { "data-component": "TwoBannerContainer", displayVertical: this.props.displayVertical },
React.createElement(TwoBannerContainerItem1, { theme: this.context.theme, displayVertical: this.props.displayVertical, "data-component": "TwoBannerContainerItem1" }, this.GetComponent(this.props.items[0], this.state)),
React.createElement(TwoBannerContainerItem2, { theme: this.context.theme, displayVertical: this.props.displayVertical, "data-component": "TwoBannerContainerItem2" }, this.GetComponent(this.props.items[1], this.state))));
}
catch (e) {
this.context.logger.error("Error: V8Components.TwoBannerContainer", e, {
props: this.props,
});
return null;
}
};
TwoBannerContainer.contextType = SharedContext;
TwoBannerContainer.defaultProps = {
cmsPosition: {
rowIndex: 0,
columnIndex: 0,
},
};
return TwoBannerContainer;
}(React.Component));
var ThreeBannerContainer = styled.div(function (_a) { return "\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 100%;\n\n " + mediaQueries("sm") + " {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr 1fr;\n }\n "; });
var ThreeBannerSingle1 = styled.div(function (_a) { return "\n padding: 0 " + spacing.xs + " 0 0;\n\n " + mediaQueries("sm") + " {\n padding: " + spacing.xs + " 0;\n }\n "; });
var ThreeBannerSingle2 = styled.div(function (_a) { return "\n padding: 0 " + spacing.xs + ";\n\n " + mediaQueries("sm") + " {\n padding: " + spacing.xs + " 0;\n }\n "; });
var ThreeBannerSingle3 = styled.div(function (_a) { return "\n padding: 0 0 0 " + spacing.xs + ";\n\n " + mediaQueries("sm") + " {\n padding: " + spacing.xs + " 0;\n }\n "; });
var ThreeBannerContainer$1 = /** @class */ (function (_super) {
__extends(ThreeBannerContainer$1, _super);
function ThreeBannerContainer$1(props) {
var _this = _super.call(this, props) || this;
_this.SetViewport = function (a) {
if (a === "desktop") {
_this.setState({ viewport: "tablet" });
}
else {
_this.setState({ viewport: "mobile" });
}
};
_this.GetComponent = function (element, passedDownProps) {
var componentNames = _this.context.componentNames;
var props = __assign(__assign({}, element.data), passedDownProps);
switch (element.componentName) {
case componentNames.Image: {
return React.createElement(Image, __assign({}, props));
}
case componentNames.ImageTextButton: {
return React.createElement(ImageTextButton$1, __assign({}, props));
}
case componentNames.ImageWithContent: {
return React.createElement(ImageWithContent, __assign({}, props));
}
case componentNames.SmallBannerWithBackgroundImage: {
return React.createElement(SmallBannerWithBackgroundImage, __assign({}, props));
}
case componentNames.SmallBannerWithSupportingImage: {
return React.createElement(SmallBannerWithSupportingImage, __assign({}, props));
}
case componentNames.SmallImageWithContent: {
return React.createElement(SmallImageWithContent, __assign({}, props));
}
case componentNames.SmallPromotion: {
return null;
}
case componentNames.Video: {
return React.createElement(Video, __assign({}, props));
}
default: {
return null;
}
}
};
_this.state = {
maxHeight: "400px",
isInContainer: true,
viewport: "mobile",
};
return _this;
}
ThreeBannerContainer$1.prototype.componentDidMount = function () {
initMediaQueryListeners(this.SetViewport);
};
ThreeBannerContainer$1.prototype.render = function () {
if (this.props.items.length === 0) {
return null;
}
return (React.createElement(ThreeBannerContainer, { "data-component": "ThreeBannerContainer" },
React.createElement(ThreeBannerSingle1, { theme: this.context.theme, "data-component": "ThreeBannerContainerItem1" }, this.GetComponent(this.props.items[0], this.state)),
React.createElement(ThreeBannerSingle2, { theme: this.context.theme, "data-component": "ThreeBannerContainerItem2" }, this.GetComponent(this.props.items[1], this.state)),
React.createElement(ThreeBannerSingle3, { theme: this.context.theme, "data-component": "ThreeBannerContainerItem3" }, this.GetComponent(this.props.items[2], this.state))));
};
ThreeBannerContainer$1.contextType = SharedContext;
return ThreeBannerContainer$1;
}(React.Component));
var StyledSale = styled.div(function (props) { return ""; });
var Sale = function (props) {
var _a = React.useContext(SharedContext), logger = _a.logger, theme = _a.theme;
try {
return React.createElement(StyledSale, { theme: theme, "data-testid": SaleComponentTestId });
}
catch (e) {
logger.error("Error: V8Components.Sale", e, { props: props });
return null;
}
};
var SaleComponentTestId = "SaleComponentTestId";
var VideoWithContent = styled.div(function (_a) {
var theme = _a.theme, videoAlignment = _a.videoAlignment, isInContainer = _a.isInContainer, viewport = _a.viewport, maxHeight = _a.maxHeight;
var Common = "\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n width: 100%;\n height: " + (isInContainer ? maxHeight : "auto") + ";\n display: flex;\n flex-direction: column;\n color: " + theme.colors.uiColors.greyscale5 + ";\n ";
var Large = "flex-direction: " + (videoAlignment === "right" ? "row-reverse" : "row") + ";";
if (isInContainer) {
return " \n " + Common + " \n " + (viewport === 'desktop' ? Large : '') + "\n ";
}
else {
return " \n " + Common + " \n " + mediaQueries("lg") + " { " + Large + " }\n ";
}
});
var VideoWithContentTextWrapper = styled.div(function (_a) {
var isInContainer = _a.isInContainer, viewport = _a.viewport, maxHeight = _a.maxHeight;
var Common = "display: flex; flex-direction: column; justify-content: center; padding: " + spacing.md + "; width: 100%; max-height: " + maxHeight + ";";
var Large = "flex-direction: column;";
if (isInContainer) {
return " \n " + Common + " \n " + (viewport === "desktop" ? Large : "") + "\n ";
}
else {
return " \n " + Common + " \n " + mediaQueries("lg") + " { " + Large + " }\n ";
}
});
var VideoWithContentButtonWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-top: ", ";\n width: 100%;\n"], ["\n margin-top: ", ";\n width: 100%;\n"])), spacing.sm);
var VideoWithContentHeadingText = styled.h2(function (_a) {
var theme = _a.theme;
return "\n font-size: " + spacing.lg + ";\n font-weight: " + theme.typography.weights.bold + ";\n margin-top: 0;\n ";
});
var VideoWithContentSubHeadingText = styled.h4(function (_a) {
var theme = _a.theme;
return "\n font-size: " + spacing.sm + ";\n color: " + theme.colors.uiColors.greyscale4 + ";\n margin-top: 0;\n ";
});
var CmsVideo = styled.iframe(function (_a) {
var isInContainer = _a.isInContainer, viewport = _a.viewport;
var Common = "height: calc(54.25vw); width: 100%;";
var Large = "height: calc(100vw * 0.27);";
if (isInContainer) {
return " \n " + Common + " \n " + (viewport === "desktop" ? "" : "height: 100%;") + "\n ";
}
else {
return " \n " + Common + " \n " + mediaQueries("lg") + " { " + Large + " }\n ";
}
});
var templateObject_1$b;
var VideoWithContent$1 = function (rawProps) {
var theme = React.useContext(SharedContext).theme;
var props = {
ImageAlignment: rawProps.ImageAlignment || Alignment.Left,
VideoUrl: rawProps.VideoUrl || "",
HeadingText: rawProps.HeadingText || "",
SubHeadingText: rawProps.SubHeadingText || "",
BodyText: rawProps.BodyText || "",
ContentAlignment: rawProps.ContentAlignment || Alignment.Left,
ButtonTitle: rawProps.ButtonTitle || "",
ButtonText: rawProps.ButtonText || "",
Link: rawProps.Link || "",
maxHeight: rawProps.maxHeight || undefined,
isInContainer: !!rawProps.isInContainer,
viewport: rawProps.viewport
};
return (React.createElement(VideoWithContent, { "data-testid": VideoWithContentComponentTestId, theme: theme, isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight, videoAlignment: props.ImageAlignment },
React.createElement(CmsVideo, { frameBorder: 0, isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight, allowFullScreen: true, src: props.VideoUrl, allow: "autoplay encrypted-media" }),
React.createElement(VideoWithContentTextWrapper, { theme: theme, isInContainer: props.isInContainer, viewport: props.viewport, maxHeight: props.maxHeight, textAlignment: props.ContentAlignment },
React.createElement(VideoWithContentHeadingText, { theme: theme }, props.HeadingText),
React.createElement(VideoWithContentSubHeadingText, { theme: theme }, props.SubHeadingText),
React.createElement("div", { dangerouslySetInnerHTML: { __html: props.BodyText } }),
React.createElement(VideoWithContentButtonWrapper, null,
React.createElement(CtaButton$1, { Link: props.Link, ButtonText: props.ButtonText, AltStyle: "secondary", TextAlignment: props.ContentAlignment, parentHeading: props.HeadingText, parentName: CMSPathToName.VideoWithContent })))));
};
var VideoWithContentComponentTestId = "VideoWithContentComponentTestId";
var V8ComponentProvider = SharedContext.Provider;
var CmsExtraLargeBanner2 = styled.div(function (_a) {
var imageAlignment = _a.imageAlignment;
return "\n width: 100%;\n display: flex;\n " + (!!imageAlignment &&
"flex-direction: " + (imageAlignment.toLowerCase() === "right" ? "row-reverse" : "row") + ";\n ") + "\n\n " + mediaQueries("sm") + " {\n flex-direction: column;\n }\n\n " + mediaQueries("md", { noUpper: true }) + "{\n height: 340px;\n }\n";
});
var CmsExtraLargeBanner2Content = styled.div(function (_a) {
var theme = _a.theme, isDark = _a.isDark;
return "\n width: 100%;\n padding: " + spacing.sm + ";\n background-color: " + (!!isDark
? theme.colors.brandColors.primary2
: theme.colors.uiColors.greyscale1) + ";\n color: " + (!!isDark
? theme.colors.uiColors.greyscale1
: theme.colors.uiColors.greyscale7) + ";\n display: flex;\n justify-content: center;\n align-items: center;\n \n " + mediaQueries("md", { noUpper: true }) + " {\n width: 50%;\n }\n\n " + mediaQueries("sm") + " {\n padding: 0;\n display: flex;\n width: " + (isDark ? "100%" : "96%") + ";\n margin: auto;\n " + (isDark ? "" : "margin-top: -" + spacing.md + ";") + "\n }\n ";
});
var CmsExtraLargeBanner2ImageWrapper = styled.div(function (_a) {
var separate = _a.separate;
return "\n width: 100%;\n\n " + (!separate &&
"\n " + mediaQueries("md", { noUpper: true }) + " {\n width: 50%;\n }\n ") + ";\n";
});
var CmsExtraLargeBanner2Image = styled.div(function (_a) {
var imageSizes = _a.imageSizes, separate = _a.separate;
return " \n background-position-x: center;\n background-repeat: no-repeat;\n background-size: cover;\n min-height: 200px;\n height: 100%; \n " + getImageUrl(imageSizes, ImageSize.Small) + "\n\n " + mediaQueries("md") + " {\n " + getImageUrl(imageSizes, ImageSize.Medium) + "\n }\n " + (separate &&
"\n " + mediaQueries("md", { noUpper: true }) + " {\n min-height: 340px; \n }\n ") + ";\n\n " + mediaQueries("lg", { noLower: true }) + " {\n " + getImageUrl(imageSizes, ImageSize.Large) + "\n }\n ";
});
var TextAndButtonHeading = styled.h1(function (_a) {
var theme = _a.theme;
return "\n font-weight: " + theme.typography.weights.bold + ";\n margin: " + spacing.xs + " 0;\n width: 100%;\n ";
});
var TextAndButtonBodyText = styled.div(function (_a) {
var theme = _a.theme;
return "\n width: 100%;\n font-size: " + theme.typography.text.fontMD.fontSize + ";\n";
});
var TextAndButtonWrapper = styled.div(function (_a) {
var theme = _a.theme, alignment = _a.alignment;
return "\n background-color: inherit;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding: " + spacing.md + ";\n " + (alignment !== undefined && "text-align: " + alignment.toLowerCase()) + ";\n overflow: auto;\n\n " + mediaQueries("sm") + " {\n padding: " + spacing.sm + ";\n }\n " + mediaQueries("md") + " {\n padding: " + spacing.xs + ";\n }\n ";
});
var TextAndButtonLinkWrapper = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n padding-top: ", ";\n"], ["\n width: 100%;\n padding-top: ", ";\n"])), spacing.sm);
var templateObject_1$c;
var PageTopper5050Split = function (rawProps) {
var theme = React__default.useContext(SharedContext).theme;
var props = {
ButtonText: rawProps.ButtonText || "",
BodyText: rawProps.BodyText || "",
Link: rawProps.Link || "",
ImageAlignment: rawProps.ImageAlignment || Alignment.Right,
BannerImageSizes: setDefaultImagePropSizes(rawProps.BannerImageSizes),
TextAlignment: rawProps.TextAlignment || Alignment.Center,
HeadingText: rawProps.HeadingText || "",
DarkStyle: !!rawProps.DarkStyle,
};
return (React__default.createElement(CmsExtraLargeBanner2, { imageAlignment: props.ImageAlignment, "data-component": "PageTopper5050Split" },
React__default.createElement(CmsExtraLargeBanner2ImageWrapper, null,
React__default.createElement(CmsExtraLargeBanner2Image, { imageSizes: props.BannerImageSizes })),
React__default.createElement(CmsExtraLargeBanner2Content, { isDark: props.DarkStyle, theme: theme },
React__default.createElement(TextAndButtonWrapper, { alignment: props.TextAlignment },
React__default.createElement(TextAndButtonHeading, null, props.HeadingText),
React__default.createElement(ReadMoreWrapper$1, { textAlignment: props.TextAlignment },
React__default.createElement(TextAndButtonBodyText, { theme: theme },
React__default.createElement("div", { dangerouslySetInnerHTML: { __html: props.BodyText } }))),
React__default.createElement(TextAndButtonLinkWrapper, null,
React__default.createElement(CtaButton$1, { ButtonText: props.ButtonText, Link: props.Link, TextAlignment: props.TextAlignment, AltStyle: props.DarkStyle ? "secondary" : "primary", parentHeading: props.HeadingText }))))));
};
var PageTopperWithFullBackgroundWrapper = styled.div(function (_a) {
var theme = _a.theme;
return "\n display: flex;\n max-width: 100%;\n height: 350px;\n overflow: hidden;\n position: relative;\n background-color: " + theme.colors.uiColors.greyscale1 + ";\n flex-direction: column;\n \n " + mediaQueries("md") + " {\n flex-direction: row;\n } \n \n " + mediaQueries("lg") + " {\n flex-direction: row;\n }\n ";
});
var PageTopperWithFullBackgroundBackground = styled.div(function (_a) {
var imageSizes = _a.imageSizes;
return "\n " + getImageUrl(imageSizes, ImageSize.Small) + "\n background-position-x: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n\n " + mediaQueries("md") + " {\n " + getImageUrl(imageSizes, ImageSize.Medium) + "\n position: absolute;\n }\n\n " + mediaQueries("lg") + " {\n " + getImageUrl(imageSizes, ImageSize.Large) + "\n position: absolute;\n }\n ";
});
var PageTopperWithFullBackgroundTextBox = styled.div(function (_a) {
var TextBoxAlignment = _a.TextBoxAlignment, darkStyle = _a.darkStyle;
return "\n position: relative;\n display: flex;\n width: " + (darkStyle ? "100%" : "96%") + ";\n margin: auto;\n " + (darkStyle ? "" : "margin-top: -" + spacing.lg + ";") + "\n \n " + mediaQueries("md") + " {\n margin-top: auto;\n width: 50%;\n " + (TextBoxAlignment === "left" ? "margin-left: 100px;" : "") + "\n " + (TextBoxAlignment === "right" ? "margin-right: 100px;" : "") + "\n }\n \n " + mediaQueries("lg") + " {\n margin-top: auto;\n width: 33%;\n " + (TextBoxAlignment === "left" ? "margin-left: 120px;" : "") + "\n " + (TextBoxAlignment === "right" ? "margin-right: 120px;" : "") + "\n }\n \n ";
});
var PageTopperWithFullBackgroundSubContent = styled.div(function (_a) {
var theme = _a.theme, textAlignment = _a.textAlignment, darkStyle = _a.darkStyle;
return "\n text-align: center;\n width: 100%;\n background-color: " + (darkStyle
? theme.colors.brandColors.primary2
: theme.colors.uiColors.greyscale1) + ";\n color: " + (darkStyle ? theme.colors.uiColors.greyscale1 : "inherit") + ";\n word-break: break-word;\n padding: " + spacing.vsm + ";\n \n " + mediaQueries("md") + " {\n text-align: " + textAlignment + ";\n padding-left: " + spacing.md + ";\n padding-right: " + spacing.md + ";\n }\n " + mediaQueries("lg") + " {\n text-align: " + textAlignment + ";\n padding-left: " + spacing.md + ";\n padding-right: " + spacing.md + ";\n }\n ";
});
var PageTopperWithFullBackgroundTitle = styled.div(function (_a) {
var theme = _a.theme;
return "\n padding: 10px 0px;\n font-weight: " + theme.typography.weights.bold + ";\n font-size: " + theme.typography.text.fontXL.fontSize + ";\n line-height: " + theme.typography.text.fontXL.lineHeight + ";\n \n ";
});
var PageTopperWithFullBackgroundText = styled.div(function (_a) {
var theme = _a.theme;
return "\n padding: 0px 0 " + spacing.md + " 0;\n color: inherit;\n font-size: " + theme.typography.text.body.fontSize + ";\n ";
});
var PageTopperWithFullBackgroundButtonWrapper = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n margin-top: ", ";\n width: 100%;\n"], ["\n margin-top: ", ";\n width: 100%;\n"])), spacing.sm);
var templateObject_1$d;
var PageTopperWithFullBackground = function (rawProps) {
var theme = React.useContext(SharedContext).theme;
var hasContent = !!rawProps.HeadingText || !!rawProps.BodyText || !!rawProps.ButtonText;
var props = {
ButtonText: rawProps.ButtonText || "",
BodyText: rawProps.BodyText || "",
Link: rawProps.Link || "",
BannerImageSizes: setDefaultImagePropSizes(rawProps.BannerImageSizes),
TextBoxAlignment: rawProps.TextBoxAlignment || Alignment.Left,
TextAlignment: rawProps.TextAlignment || Alignment.Left,
HeadingText: rawProps.HeadingText || "",
DarkStyle: !!rawProps.DarkStyle,
};
return (React.createElement(PageTopperWithFullBackgroundWrapper, { theme: theme, "data-component": "PageTopperWithFullBackground" }, hasContent ? (React.createElement(React.Fragment, null,
React.createElement(PageTopperWithFullBackgroundBackground, { imageSizes: props.BannerImageSizes }),
React.createElement(PageTopperWithFullBackgroundTextBox, { TextBoxAlignment: props.TextBoxAlignment, darkStyle: props.DarkStyle },
React.createElement(PageTopperWithFullBackgroundSubContent, { textAlignment: props.TextAlignment, darkStyle: props.DarkStyle, theme: theme },
React.createElement(PageTopperWithFullBackgroundTitle, { theme: theme }, props.HeadingText),
React.createElement(PageTopperWithFullBackgroundText, null, props.BodyText),
React.createElement(PageTopperWithFullBackgroundButtonWrapper, null,
React.createElement(CtaButton$1, { ButtonText: props.ButtonText, Link: props.Link, TextAlignment: props.TextAlignment, parentHeading: props.HeadingText, AltStyle: props.DarkStyle ? 'secondary' : undefined, parentName: CMSPathToName.LayoutExtraLargeBanner1 })))))) : (React.createElement(PageTopperWithFullBackgroundBackground, { imageSizes: props.BannerImageSizes }))));
};
var LargeCarousel = styled.div(function (_a) {
var theme = _a.theme;
return "\n display: flex;\n user-select: none;\n height: 100%;\n background-color: " + theme.carousel.bannerBackgroundColor + "; \n";
});
var LargeCarouselContainer = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n height: 100%;\n padding: 0;\n min-width: 100%;\n margin: 0 auto;\n max-width: 100%;\n"], ["\n display: flex;\n height: 100%;\n padding: 0;\n min-width: 100%;\n margin: 0 auto;\n max-width: 100%;\n"])));
var templateObject_1$e;
var LargeCarousel$1 = /** @class */ (function (_super) {
__extends(LargeCarousel$1, _super);
function LargeCarousel$1(props) {
var _this = _super.call(this, props) || this;
_this.SetViewport = function (a) {
_this.setState({ viewport: a });
};
_this.GetComponent = function (element, location, passedDownProps) {
var componentNames = _this.context.componentNames;
var props = __assign(__assign({}, element.data), passedDownProps);
var ComponentName = element.type;
if (!!element.componentName) {
ComponentName = element.componentName;
}
switch (ComponentName) {
case componentNames.LargePromotion: {
return (React.createElement(LargePromotion, __assign({}, props, { cmsPosition: { rowIndex: _this.props.cmsPosition.rowIndex, columnIndex: location }, componentKey: element.componentKey, googleAnalytics: _this.props.googleAnalytics, promotion: _this.props.promotions[element.componentKey], key: location })));
}
case componentNames.HeroBanner: {
return React.createElement(HeroBanner, __assign({}, props, { key: location }));
}
case componentNames.ProductCardStory: {
return null;
}
case componentNames.Recipe: {
return null;
}
case componentNames.Image: {
return React.createElement(Image, __assign({}, props, { key: location }));
}
case componentNames.ImageWithContent: {
return React.createElement(ImageWithContent, __assign({}, props, { key: location }));
}
case componentNames.VideoWithContent: {
return React.createElement(VideoWithContent$1, __assign({}, props, { key: location }));
}
case componentNames.Video: {
return React.createElement(Video, __assign({}, props, { key: location }));
}
default: {
return null;
}
}
};
_this.state = {
isInContainer: true,
viewport: "mobile",
};
return _this;
}
LargeCarousel$1.prototype.componentDidMount = function () {
initMediaQueryListeners(this.SetViewport);
};
LargeCarousel$1.prototype.render = function () {
var _this = this;
try {
return (React.createElement(LargeCarousel, { "data-component": "LargeCarousel" },
React.createElement(LargeCarouselContainer, null,
React.createElement(Carousel, { "data-testid": LargeCarouselComponentTestId, carouselHeight: "440px", pagination: {
desktop: true,
mobile: false,
tablet: true,
}, showPreviews: {
desktop: true,
mobile: false,
tablet: true,
}, previewScaleFactor: 0.95, autoSlideTime: !!this.props.timeout ? this.props.timeout * 1000 : null, infiniteLoop: true, animatedTransitions: true }, this.props.items.map(function (el, index) {
return _this.GetComponent(el, index++, _this.state);
})))));
}
catch (e) {
this.context.logger.error("Error: V8Components.LargeCarousel", e, {
props: this.props,
});
return null;
}
};
LargeCarousel$1.contextType = SharedContext;
LargeCarousel$1.defaultProps = {
cmsPosition: {
rowIndex: 0,
columnIndex: 0
}
};
return LargeCarousel$1;
}(React.Component));
var LargeCarouselComponentTestId = "LargeCarouselComponentTestId";
var SmallCarousel = /** @class */ (function (_super) {
__extends(SmallCarousel, _super);
function SmallCarousel(props) {
var _this = _super.call(this, props) || this;
_this.SetViewport = function (a) {
// this.setState({ viewport: a });
};
_this.GetComponent = function (element, location, passedDownProps) {
var componentNames = _this.context.componentNames;
var props = __assign(__assign({}, element.data), passedDownProps);
var ComponentName = element.type;
if (!!element.componentName) {
ComponentName = element.componentName;
}
switch (ComponentName) {
case componentNames.Image: {
return React.createElement(Image, __assign({}, props, { key: location }));
}
case componentNames.Video: {
return React.createElement(Video, __assign({}, props, { key: location }));
}
case componentNames.ImageWithContent: {
return React.createElement(ImageWithContent, __assign({}, props, { key: location }));
}
case componentNames.VideoWithContent: {
return React.createElement(VideoWithContent$1, __assign({}, props, { key: location }));
}
case componentNames.ImageTextButton: {
return React.createElement(ImageTextButton$1, __assign({}, props, { key: location }));
}
case componentNames.SmallPromotion: {
return (React.createElement(SmallPromotion, __assign({}, props, { cmsPosition: {
rowIndex: _this.props.cmsPosition.rowIndex,
columnIndex: location,
}, componentKey: element.componentKey, googleAnalytics: _this.props.googleAnalytics, promotion: _this.props.promotions[element.componentKey], key: location })));
}
case componentNames.SmallImageWithContent: {
return React.createElement(SmallImageWithContent, __assign({}, props, { key: location }));
}
case componentNames.SmallBannerWithBackgroundImage: {
return React.createElement(SmallBannerWithBackgroundImage, __assign({}, props, { key: location }));
}
case componentNames.SmallBannerWithSupportingImage: {
return React.createElement(SmallBannerWithSupportingImage, __assign({}, props, { key: location }));
}
default: {
return null;
}
}
};
_this.state = {
isInContainer: true,
viewport: "mobile",
};
return _this;
}
SmallCarousel.prototype.componentDidMount = function () {
initMediaQueryListeners(this.SetViewport);
};
SmallCarousel.prototype.render = function () {
var _this = this;
try {
console.log(this.context);
return (React.createElement(Carousel, { animatedTransitions: true, carouselHeight: "350px", "data-testid": SmallCarouselComponentTestId, activeSlideCount: 3, pagination: {
desktop: true,
mobile: true,
tablet: true,
}, showPreviews: {
desktop: true,
mobile: false,
tablet: false,
}, autoSlideTime: !!this.props.timeout ? this.props.timeout * 1000 : null, infiniteLoop: true }, this.props.items.map(function (el, index) {
return _this.GetComponent(el, index++, _this.state);
})));
}
catch (e) {
this.context.logger.error("Error: V8Components.SmallCarousel", e, {
props: this.props,
});
return null;
}
};
SmallCarousel.contextType = SharedContext;
SmallCarousel.defaultProps = {
cmsPosition: {
rowIndex: 0,
columnIndex: 0,
},
};
return SmallCarousel;
}(React.Component));
var SmallCarouselComponentTestId = "SmallCarouselComponentTestId";
var StyledRow = styled.div(function (props) {
var desktopGrid = '';
var tabletGrid = '';
for (var i = 1; i <= props.numberOfColumns; i++) {
desktopGrid = desktopGrid + " 1fr";
if ((i % 2) === 0) {
tabletGrid = tabletGrid + " 1fr";
}
}
return "\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: " + spacing.xs + ";\n width: 100%;\n margin: auto;\n margin-bottom: " + componentSpacing.mobile + ";\n\n " + mediaQueries("md") + " {\n margin-bottom: " + componentSpacing.tablet + ";\n grid-template-columns: " + tabletGrid + ";\n }\n \n " + mediaQueries("lg") + " {\n margin-bottom: " + componentSpacing.desktopSm + ";\n grid-template-columns: " + desktopGrid + ";\n }\n \n " + mediaQueries("xl") + " {\n margin-bottom: " + componentSpacing.desktopLg + ";\n grid-template-columns: " + desktopGrid + ";\n }\n";
});
var StyledColumn = styled.div(function (props) { return "\n width: 100%;\n padding: 0;\n"; });
var Row = /** @class */ (function (_super) {
__extends(Row, _super);
function Row(props) {
var _this = _super.call(this, props) || this;
_this.SetViewport = function (a) {
if (a === "desktop") {
_this.setState({
viewport: _this.props.items.length > 2 ? "mobile" : "tablet",
});
}
else {
_this.setState({ viewport: "mobile" });
}
};
_this.GetComponent = function (element) {
var componentNames = _this.context.componentNames;
var props = __assign(__assign({}, element.data), _this.state);
switch (element.componentName) {
case componentNames.Image: {
return React.createElement(Image, __assign({}, props));
}
case componentNames.ImageWithContent: {
return React.createElement(ImageWithContent, __assign({}, props));
}
case componentNames.SmallBannerWithSupportingImage: {
return React.createElement(SmallBannerWithSupportingImage, __assign({}, props));
}
case componentNames.SmallImageWithContent: {
return React.createElement(SmallImageWithContent, __assign({}, props));
}
case componentNames.SmallBannerWithBackgroundImage: {
return React.createElement(SmallBannerWithBackgroundImage, __assign({}, props));
}
case componentNames.SmallPromotion: {
return null;
}
case componentNames.ImageTextButton: {
return React.createElement(ImageTextButton$1, __assign({}, props));
}
case componentNames.Video: {
return React.createElement(Video, __assign({}, props));
}
case componentNames.VideoWithContent: {
return React.createElement(VideoWithContent$1, __assign({}, props));
}
default: {
return null;
}
}
};
_this.state = {
isInContainer: true,
viewport: "mobile",
};
return _this;
}
Row.prototype.componentDidMount = function () {
initMediaQueryListeners(this.SetViewport);
};
Row.prototype.render = function () {
var _this = this;
try {
return (React.createElement(StyledRow, { "data-testid": RowComponentTestId, "data-component": "Row", numberOfColumns: this.props.items.length }, this.props.items.map(function (el, index) {
return (React.createElement(StyledColumn, { key: index, "data-component": "Column" }, _this.GetComponent(el)));
})));
}
catch (e) {
this.context.logger.error("Error: V8Components.Row", e, {
props: this.props,
});
return null;
}
};
Row.contextType = SharedContext;
return Row;
}(React.Component));
var RowComponentTestId = "RowComponentTestId";
exports.Carousel = Carousel;
exports.ContactUs = ContactUs;
exports.HeroBanner = HeroBanner;
exports.Image = Image;
exports.ImageTextButton = ImageTextButton$1;
exports.ImageWithContent = ImageWithContent;
exports.LargeCarousel = LargeCarousel$1;
exports.LargePromotion = LargePromotion;
exports.PageTopper5050Split = PageTopper5050Split;
exports.PageTopperWithFullBackground = PageTopperWithFullBackground;
exports.Row = Row;
exports.Sale = Sale;
exports.SmallBannerWithBackgroundImage = SmallBannerWithBackgroundImage;
exports.SmallBannerWithSupportingImage = SmallBannerWithSupportingImage;
exports.SmallCarousel = SmallCarousel;
exports.SmallImageWithContent = SmallImageWithContent;
exports.SmallPromotion = SmallPromotion;
exports.ThreeBannerContainer = ThreeBannerContainer$1;
exports.TwoBannerContainer = TwoBannerContainer;
exports.V8ComponentProvider = V8ComponentProvider;
exports.Video = Video;
exports.VideoWithContent = VideoWithContent$1;
//# sourceMappingURL=index.js.map