\r\n );\r\n }\r\n}\r\n","// This code was generated by a Reinforced.Typings tool.\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n\r\nexport enum BlockSectionMargin {\r\n\tDefault = 0,\r\n\tBig = 1\r\n}\r\n","import { BlockSectionMargin } from './BlockSectionMargin.csharp';\r\n\r\nexport class BlockSectionClassResolver {\r\n public static Resolve(margin: BlockSectionMargin): string {\r\n return `BlockSection--${BlockSectionMargin[margin]}`;\r\n }\r\n}\r\n","import * as React from 'react';\r\nimport { useEffect } from 'react';\r\n\r\nimport { getTranslation, keys } from '../../../Resources/Translations';\r\nimport { Button, ButtonSize } from '../Buttons/Button';\r\nimport { EventNames } from '../EventNames';\r\nimport { Modal, ModalButtons, ModalHeading, ModalText } from './Modal';\r\n\r\nexport const onSessionExpired = () => {\r\n const event = new CustomEvent(EventNames.SessionExpired);\r\n window.dispatchEvent(event);\r\n};\r\n\r\nexport interface LoginModalProps {\r\n readonly loginUrl: string;\r\n}\r\n\r\nexport const LoginModal = ({ loginUrl }: LoginModalProps) => {\r\n const [isVisible, setIsVisible] = React.useState(false);\r\n\r\n const showModal = () => {\r\n setIsVisible(true);\r\n };\r\n\r\n const redirectToLogin = () => {\r\n window.location.href = loginUrl;\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener(EventNames.SessionExpired, showModal);\r\n\r\n return () => {\r\n window.removeEventListener(EventNames.SessionExpired, showModal);\r\n };\r\n });\r\n\r\n return (\r\n \r\n {getTranslation(keys['modal.sessionExpired.title'])}\r\n {getTranslation(keys['modal.sessionExpired.message'])}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","export const inertHelper = (isActive: boolean) => {\r\n return isActive ? {} : { inert: '' };\r\n};\r\n","// This code was generated by a Reinforced.Typings tool.\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n\r\nexport enum DiscountType {\r\n\tCheapestForFree = 0,\r\n\tProduct = 1\r\n}\r\n","import React, { AnchorHTMLAttributes } from 'react';\r\n\r\nimport { NavigationTracker, NavigationTrackerProps } from './NavigationTracker';\r\n\r\nexport const NavigationTrackerLink = ({\r\n disableTracking,\r\n source,\r\n href,\r\n onClick,\r\n ...props\r\n}: NavigationTrackerProps> & AnchorHTMLAttributes) => (\r\n > disableTracking={disableTracking} source={source} href={href} onClick={onClick}>\r\n {(href, onClick) => }\r\n \r\n);\r\n","import toDate from \"../../toDate/index.js\";\nimport requiredArgs from \"../requiredArgs/index.js\";\nimport toInteger from \"../toInteger/index.js\"; // This function will be a part of public API when UTC function will be implemented.\n// See issue: https://github.com/date-fns/date-fns/issues/376\n\nexport default function startOfUTCWeek(dirtyDate, dirtyOptions) {\n requiredArgs(1, arguments);\n var options = dirtyOptions || {};\n var locale = options.locale;\n var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;\n var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn);\n var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN\n\n if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {\n throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');\n }\n\n var date = toDate(dirtyDate);\n var day = date.getUTCDay();\n var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;\n date.setUTCDate(date.getUTCDate() - diff);\n date.setUTCHours(0, 0, 0, 0);\n return date;\n}","export const getCity = (text: string): string => {\r\n return text.replace(/[0-9]/gi, '').trim();\r\n};\r\n\r\nexport const getPostalCode = (text: string): string => {\r\n return text.replace(/\\D/g, '');\r\n};\r\n\r\nexport const formatPostalCodeInput = (postalCode: string, city: string) => `${postalCode} ${city}`;\r\n\r\nexport const getPostalCodeFirst = (text: string) => {\r\n return formatPostalCodeInput(getPostalCode(text), getCity(text));\r\n};\r\n","// This code was generated by a Reinforced.Typings tool.\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n\r\nexport class GoogleTagManagerList\r\n{\r\n\tpublic static searchResults: string = `Search Results`;\r\n\tpublic static productCard: string = `Product Card`;\r\n\tpublic static cartItems: string = `Cart Items`;\r\n\tpublic static featuredProducts: string = `Featured Products`;\r\n\tpublic static categoryAssociatedProducts: string = `Suggested Products`;\r\n\tpublic static brandAssociatedProducts: string = `Related Products`;\r\n\tpublic static brandPage: string = `Brand Page`;\r\n\tpublic static subbrandPage: string = `Subbrand Page`;\r\n\tpublic static categoryPage: string = `Category Page`;\r\n\tpublic static subcategoryPage: string = `Subcategory Page`;\r\n\tpublic static campaignPage: string = `Campaign Page`;\r\n\tpublic static cartPage: string = `Cart Page`;\r\n\tpublic static favouriteProducts: string = `Favourite Products`;\r\n\tpublic static cartRecommendedProducts: string = `Cart Recommended Products`;\r\n\tpublic static cartDrawerRecommendedProducts: string = `Cart Drawer Recommended Products`;\r\n\tpublic static homePageRecommendedProducts: string = `Home Page Recommended Products`;\r\n\tpublic static productPageRecommendedProducts: string = `Product Page Recommended Products`;\r\n\tpublic static productPageCrossSellRecommendedProducts: string = `Product Page Cross Sell Recommended Products`;\r\n\tpublic static productPageRecommendedFallbackBrandProducts: string = `Product Page Recommended Fallback Brand Products`;\r\n\tpublic static productPageRecommendedFallbackCategoryProducts: string = `Product Page Recommended Fallback Category Products`;\r\n\tpublic static homePage: string = `Home Page`;\r\n\tpublic static productPage: string = `Product Page`;\r\n}\r\n","import { DeliveryMethod } from '../Delivery/DeliveryMethods/DeliveryMethod.csharp';\r\nimport { CheckoutViewModel } from '../ViewModel/CheckoutViewModel.csharp';\r\n\r\nexport class DeliveryMethodValidator {\r\n private readonly _deliveryMethodsValidators: {\r\n [type: string]: (checkout: CheckoutViewModel, errors: string[]) => boolean;\r\n } = {};\r\n\r\n public registerDeliveryMethodValidator = (type: DeliveryMethod, validator: (checkout: CheckoutViewModel, errors: string[]) => boolean): void => {\r\n this._deliveryMethodsValidators[type.toString()] = validator;\r\n };\r\n\r\n public unregisterDeliveryMethodValidator = (type: DeliveryMethod) => {\r\n delete this._deliveryMethodsValidators[type.toString()];\r\n };\r\n\r\n public validate = (checkout: CheckoutViewModel, errors: string[]): boolean => {\r\n const methodType = checkout.delivery.selectedDeliveryMethod?.methodType.toString();\r\n if (methodType) {\r\n const validator = this._deliveryMethodsValidators[methodType];\r\n if (validator) {\r\n return validator(checkout, errors);\r\n }\r\n }\r\n\r\n return true;\r\n };\r\n}\r\n\r\nexport const deliveryMethodValidator = new DeliveryMethodValidator();\r\n","module.exports = clamp\n\nfunction clamp(value, min, max) {\n return min < max\n ? (value < min ? min : value > max ? max : value)\n : (value < max ? max : value > min ? min : value)\n}\n","import React, { createContext, FC, useEffect, useState } from 'react';\r\n\r\nimport { UserDetailsViewModel } from '../../Purchase/Cart/PersonalizedCart/UserDetailsViewModel.csharp';\r\nimport { EventNames } from '../EventNames';\r\n\r\nexport interface UserContextModel {\r\n isLogged: boolean;\r\n isReady: boolean;\r\n user?: UserDetailsViewModel;\r\n}\r\n\r\nexport const UserContext = createContext({} as UserContextModel);\r\n\r\nexport const UserContextProvider: FC = (props) => {\r\n const [user, setUser] = useState();\r\n\r\n useEffect(() => {\r\n window.addEventListener(EventNames.UserDetailsLoaded, onUserDetailsLoaded);\r\n\r\n return () => {\r\n window.removeEventListener(EventNames.UserDetailsLoaded, onUserDetailsLoaded);\r\n };\r\n }, []);\r\n\r\n const onUserDetailsLoaded = ($event: CustomEventInit) => {\r\n if ($event && $event.detail) {\r\n setUser($event.detail.user as UserDetailsViewModel);\r\n }\r\n };\r\n\r\n return {props.children};\r\n};\r\n","import toDate from \"../../toDate/index.js\";\nimport requiredArgs from \"../requiredArgs/index.js\"; // This function will be a part of public API when UTC function will be implemented.\n// See issue: https://github.com/date-fns/date-fns/issues/376\n\nexport default function startOfUTCISOWeek(dirtyDate) {\n requiredArgs(1, arguments);\n var weekStartsOn = 1;\n var date = toDate(dirtyDate);\n var day = date.getUTCDay();\n var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;\n date.setUTCDate(date.getUTCDate() - diff);\n date.setUTCHours(0, 0, 0, 0);\n return date;\n}","import { LocalStorageAccessor } from '../../StorageAccessor/LocalStorageAccessor';\r\n\r\nexport class RecommendationsCache {\r\n private static readonly recommendationsKey = 'recommendations';\r\n\r\n public static saveRecommendations = (key: string, recommendations: string) => {\r\n LocalStorageAccessor.setItem(key + ':' + this.recommendationsKey, recommendations);\r\n };\r\n\r\n public static getRecommendations = (key: string): string | null => {\r\n return LocalStorageAccessor.getItem(key + ':' + this.recommendationsKey) || null;\r\n };\r\n}\r\n","// This code was generated by a Reinforced.Typings tool.\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n\r\nexport enum DeliveryMethodAvailability {\r\n\tOk = 0,\r\n\tAddressNotSelected = 1,\r\n\tDeliveryMethodNotSelected = 2,\r\n\tInvalidDimensions = 3,\r\n\tMailboxNotEligible = 4,\r\n\tPorterBuddyNotAvailable = 5,\r\n\tPorterBuddyAddressNotSupported = 6,\r\n\tPorterBuddyWindowNotSelected = 7,\r\n\tPostNordServicePointNotAvailable = 8,\r\n\tPostNordServicePointNotSelected = 9,\r\n\tInstaBoxExpressNotAvailable = 10,\r\n\tInstaBoxHomeNotAvailable = 11,\r\n\tNotAvailable = 12,\r\n\tHeltHjemNotAvailable = 13,\r\n\tPostNHomeNotAvailable = 14,\r\n\tPostNPickNotAvailable = 15,\r\n\tPostNPickLockersNotAvailable = 16,\r\n\tBadTemperatures = 17,\r\n\tAirmeeHomeNotAvailable = 18,\r\n\tOtcNotAvailable = 19,\r\n\tRxNotAvailable = 20,\r\n\tHeltHjemServicePointNotAvailable = 21,\r\n\tGordonNotAvailable = 22\r\n}\r\n","var freeGlobal = require('./_freeGlobal');\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\nmodule.exports = root;\n","import * as React from 'react';\r\nimport VisibilitySensor from 'react-visibility-sensor';\r\n\r\nimport { GoogleTagManager } from '../GoogleTagManager';\r\nimport { PromotionImpressionViewModel } from './PromotionImpressionViewModel.csharp';\r\n\r\ninterface WithPromotionImpressionState {\r\n wasVisible: boolean;\r\n}\r\n\r\nexport function withPromotionImpression(\r\n WrappedComponent: React.FC\r\n) {\r\n return class extends React.Component {\r\n constructor(props: TProps) {\r\n super(props);\r\n\r\n this.state = {\r\n wasVisible: false\r\n };\r\n }\r\n\r\n onChange = (isVisible: boolean) => {\r\n if (isVisible && !this.state.wasVisible) {\r\n this.setState({ wasVisible: true });\r\n this.props.model.promotionImpression && GoogleTagManager.promotionImpression(this.props.model.promotionImpression);\r\n }\r\n };\r\n\r\n captureLinkClick = (e: React.MouseEvent) => {\r\n if (this.props.model.promotionImpression !== null) {\r\n const anchors = e.currentTarget.getElementsByTagName('a');\r\n\r\n for (let i = 0; i < anchors.length; i++) {\r\n if (anchors[i].href.includes(this.props.model.promotionImpression.link)) {\r\n GoogleTagManager.promotionClick(e, this.props.model.promotionImpression, anchors[i].href);\r\n e.preventDefault();\r\n }\r\n e.preventDefault();\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n return this.props.model.promotionImpression === null ? (\r\n \r\n ) : (\r\n \r\n
this.captureLinkClick(e)}>\r\n \r\n
\r\n \r\n );\r\n }\r\n };\r\n}\r\n","export const maxQuantity = 999;\r\n\r\nexport const errorAdditionalInfo = (error: string, maxQuantity: number, minQuantity: number): string => {\r\n if (error === 'AdjustedQuantityByMaxQuantity' || error === 'AdjustedQuantityByBackorderQuantity') return ` ${maxQuantity}`;\r\n if (error === 'AdjustedQuantityByAvailableQuantity') return ` ${maxQuantity}`;\r\n if (error === 'AdjustedQuantityByMinQuantity') return ` ${minQuantity}`;\r\n\r\n return '';\r\n};\r\n","// This code was generated by a Reinforced.Typings tool.\r\n// Changes to this file may cause incorrect behavior and will be lost if\r\n// the code is regenerated.\r\n\r\nexport enum WidthVariant {\r\n\tOneColumn = 0,\r\n\tTwoColumn = 1\r\n}\r\n","import { deleteFor, putFor } from '../../../ReactComponents/API';\r\nimport { EventNames } from '../../../ReactComponents/EventNames';\r\nimport { findWithIndex } from '../../../ReactComponents/FindWithIndex';\r\nimport { GoogleTagManager } from '../../../Tracking/GoogleTagManager/GoogleTagManager';\r\nimport { ICartDetails } from '../../Cart/ICartDetails.csharp';\r\nimport { CartItemValidationIssueViewModel } from '../../Cart/Item/ViewModels/CartItemValidationIssueViewModel.csharp';\r\nimport { CartItemViewModel } from '../../Cart/Item/ViewModels/CartItemViewModel.csharp';\r\nimport { CheckoutApiRoutes } from '../CheckoutApiRoutes.csharp';\r\nimport { handleCheckoutError } from '../Components/CheckoutBaseApi';\r\nimport { containsQuantityWarnings } from '../Validation/CheckoutValidator';\r\nimport { CheckoutUpdateLineItemResult } from './CheckoutUpdateLineItemResult.csharp';\r\n\r\nexport interface ILineItemsApi {\r\n setQuantity: (productCode: string, quantity: number) => Promise;\r\n removeFromCart: (productCode: string) => Promise;\r\n}\r\n\r\nexport class LineItemsApi implements ILineItemsApi {\r\n private routes: CheckoutApiRoutes;\r\n private getCart: () => ICartDetails;\r\n private updateCart: (cart: ICartDetails) => void;\r\n private setIsLoaderActive: (isLoaderActive: boolean) => void;\r\n\r\n constructor(\r\n routes: CheckoutApiRoutes,\r\n getCart: () => ICartDetails,\r\n updateCart: (cart: ICartDetails) => void,\r\n setIsLoaderActive: (isLoaderActive: boolean) => void\r\n ) {\r\n this.routes = routes;\r\n this.getCart = getCart;\r\n this.updateCart = updateCart;\r\n this.setIsLoaderActive = setIsLoaderActive;\r\n }\r\n\r\n private get cart() {\r\n return this.getCart();\r\n }\r\n\r\n public setQuantity = async (productCode: string, quantity: number): Promise => {\r\n const product = this.cart.summary.items.find((x) => x.code === productCode);\r\n if (!product) return SetQuantityResult.failed();\r\n\r\n const quantityBefore = product.quantityOrdered;\r\n if (quantity <= 0) return SetQuantityResult.failed();\r\n\r\n // eslint-disable-next-line\r\n const url = `${this.routes.cartItemUrl}?productCode=${productCode}&quantity=${quantity}&cartId=${this.cart.cartId}&loginExpected=${this.cart.isUserLoggedIn}&hash=${this.cart.hash}`;\r\n\r\n return await putFor(url)\r\n .then((result) => {\r\n this.updateCart(result.checkout);\r\n\r\n if (result.validationIssues?.length > 0) {\r\n this.setValidationIssuesToLineItem(this.cart.summary.items, productCode, result.validationIssues);\r\n }\r\n\r\n const updateResult = this.updateSucceeded(productCode, result.checkout);\r\n if (updateResult.succeeded) {\r\n GoogleTagManager.changeQuantity(product, updateResult.quantity ?? quantity, quantityBefore);\r\n this.dispatchQuantityChangeEvent(result.checkout);\r\n return SetQuantityResult.succeeded(updateResult.quantity ?? quantity);\r\n }\r\n\r\n return SetQuantityResult.succeeded(updateResult.quantity ?? product.quantityOrdered);\r\n })\r\n .catch(async (error) => {\r\n const checkout = handleCheckoutError(error, this.cart);\r\n this.updateCart(checkout);\r\n return SetQuantityResult.failed();\r\n });\r\n };\r\n\r\n public removeFromCart = async (productCode: string): Promise => {\r\n // eslint-disable-next-line\r\n const url = `${this.routes.cartItemUrl}?productCode=${productCode}&cartId=${this.cart.cartId}&loginExpected=${this.cart.isUserLoggedIn}&hash=${this.cart.hash}`;\r\n this.setIsLoaderActive(true);\r\n\r\n return await deleteFor(url)\r\n .then((cart) => {\r\n this.updateCart(cart);\r\n if (this.removeSucceeded(productCode, cart)) {\r\n this.dispatchQuantityChangeEvent(cart);\r\n return true;\r\n }\r\n\r\n return false;\r\n })\r\n .catch((error) => {\r\n const checkout = handleCheckoutError(error, this.cart);\r\n this.updateCart(checkout);\r\n return false;\r\n })\r\n .finally(() => {\r\n this.setIsLoaderActive(false);\r\n });\r\n };\r\n\r\n private setValidationIssuesToLineItem = (\r\n items: CartItemViewModel[],\r\n productCode: string,\r\n issues: CartItemValidationIssueViewModel[]\r\n ): CartItemViewModel[] => {\r\n const { index, item } = findWithIndex(items, (x) => x.code == productCode);\r\n\r\n if (!item) {\r\n return items;\r\n }\r\n\r\n const codes = item.validationIssues.map((x) => x.code);\r\n for (const issue of issues) {\r\n if (codes.includes(issue.code) === false) {\r\n item.validationIssues.push(issue);\r\n }\r\n }\r\n\r\n items[index] = item;\r\n\r\n return items;\r\n };\r\n\r\n private dispatchQuantityChangeEvent = (cart: ICartDetails) => {\r\n const event = new CustomEvent(EventNames.CartTotalQuantityChanged, {\r\n detail: { totalQuantity: cart.summary.totalQuantity }\r\n });\r\n window.dispatchEvent(event);\r\n };\r\n\r\n private updateSucceeded = (productCode: string, cart: ICartDetails): { succeeded: boolean; quantity?: number } => {\r\n if (!cart?.summary?.items) return { succeeded: false, quantity: undefined };\r\n\r\n const updatedItem = cart.summary.items.find((x) => x.code === productCode);\r\n\r\n return {\r\n succeeded: (updatedItem && !containsQuantityWarnings(updatedItem)) ?? false,\r\n quantity: updatedItem && updatedItem.quantityOrdered\r\n };\r\n };\r\n\r\n private removeSucceeded = (productCode: string, cart: ICartDetails) => {\r\n if (!cart?.summary?.items) return false;\r\n\r\n const removedItem = cart.summary.items.find((x) => x.code === productCode);\r\n\r\n return !removedItem;\r\n };\r\n}\r\n\r\nexport class SetQuantityResult {\r\n quantity: number;\r\n succeeded: boolean;\r\n\r\n constructor(succeeded: boolean, quantity: number) {\r\n this.quantity = quantity;\r\n this.succeeded = succeeded;\r\n }\r\n\r\n static failed = () => new SetQuantityResult(false, 0);\r\n static succeeded = (quantity: number) => new SetQuantityResult(true, quantity);\r\n}\r\n","export function findWithIndex(items: T[], predicate: (value: T, index: number, obj: T[]) => boolean): { index: number; item?: T } {\r\n for (let i = 0; i < items.length; i++) {\r\n if (predicate(items[i], i, items)) {\r\n return { index: i, item: { ...items[i] } };\r\n }\r\n }\r\n\r\n return { index: -1, item: undefined };\r\n}\r\n","import { EventNames } from './EventNames';\r\n\r\nexport const lockHeader = (active: boolean, forceOpen?: boolean) => {\r\n window.dispatchEvent(\r\n new CustomEvent(EventNames.ScrollLockChange, {\r\n detail: {\r\n active: active,\r\n forceOpen: forceOpen === true\r\n }\r\n })\r\n );\r\n};\r\n","import * as React from 'react';\r\nimport { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\r\n\r\ninterface InputProps {\r\n id?: string;\r\n interval?: number;\r\n value: string | number;\r\n className?: string;\r\n disabled?: boolean;\r\n type: string;\r\n placeholder?: string;\r\n onAfterChange: () => void;\r\n onBlur?: () => void;\r\n onChange: (value: string) => void;\r\n onFocus?: (e: FocusEvent) => void;\r\n onChangeCondition?: (value: string) => boolean;\r\n onKeyDown?: () => void;\r\n onClick?: () => void;\r\n onCancel?: () => void;\r\n tabIndex?: number;\r\n autocomplete?: string;\r\n}\r\n\r\nexport class Input extends React.Component {\r\n private interval: number;\r\n private timer: NodeJS.Timeout | undefined;\r\n\r\n constructor(props: InputProps) {\r\n super(props);\r\n\r\n this.interval = props.interval ?? 500;\r\n }\r\n\r\n componentDidMount() {\r\n if (this.timer) clearTimeout(this.timer);\r\n }\r\n\r\n onChange = (event: ChangeEvent) => {\r\n if (this.timer) clearTimeout(this.timer);\r\n const value = event.target.value;\r\n\r\n if (!this.props.onChangeCondition || this.props.onChangeCondition(value)) {\r\n this.props.onChange(value);\r\n this.timer = setTimeout(this.triggerChange, this.interval);\r\n }\r\n };\r\n\r\n onKeyDown = (event: KeyboardEvent) => {\r\n if (event.key === 'Escape') {\r\n if (this.props.onCancel) {\r\n this.props.onCancel();\r\n }\r\n } else if (event.key === 'Enter') {\r\n this.props.onKeyDown ? this.props.onKeyDown() : this.props.onAfterChange();\r\n }\r\n };\r\n\r\n triggerChange = () => {\r\n if (this.props.value) this.props.onAfterChange();\r\n };\r\n\r\n onBlur = () => {\r\n if (this.timer) {\r\n clearTimeout(this.timer);\r\n }\r\n\r\n this.props.onAfterChange();\r\n\r\n if (this.props.onBlur) {\r\n this.props.onBlur();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import * as React from 'react';\r\n\r\nimport { isMobile } from '../IsMobile';\r\n\r\ninterface TouchSwiperProps {\r\n readonly children: React.ReactNode;\r\n readonly onActiveItemsChange?: (firstIndex: number, lastIndex: number) => void;\r\n readonly lastVisibleElementPadding?: number;\r\n readonly onlyOnMobile?: boolean;\r\n}\r\n\r\ninterface TouchSwiperState {\r\n readonly leftPosition: number;\r\n readonly touchInitialPositionX: number;\r\n readonly touchCurrentPositionX: number;\r\n readonly touchCurrentPositionY: number;\r\n readonly swipeEnabled: boolean;\r\n readonly elementsContainerWidth: number;\r\n readonly scrollLock: boolean;\r\n readonly swipeLock: boolean;\r\n}\r\n\r\nclass TouchSwiper extends React.Component {\r\n state = {\r\n leftPosition: 0,\r\n touchInitialPositionX: 0,\r\n touchCurrentPositionX: 0,\r\n touchCurrentPositionY: 0,\r\n swipeEnabled: false,\r\n elementsContainerWidth: 0,\r\n scrollLock: false,\r\n swipeLock: false\r\n };\r\n\r\n breakpoints = [0];\r\n elementsWidth: number[] = [];\r\n containerRef = React.createRef();\r\n wrapperRef = React.createRef();\r\n screenWidth = -1;\r\n\r\n componentDidMount = () => {\r\n this.initElementsArrays();\r\n\r\n if (this.props.onActiveItemsChange) this.props.onActiveItemsChange(0, this.getLastVisibleElementIndex(0));\r\n\r\n window.addEventListener('touchmove', this.lockScrollingVertically, {\r\n passive: false\r\n });\r\n window.addEventListener('resize', this.handleResize);\r\n window.addEventListener('load', this.initElementsArrays);\r\n this.screenWidth = window.innerWidth;\r\n };\r\n\r\n componentWillUnmount = () => {\r\n window.removeEventListener('touchmove', this.lockScrollingVertically);\r\n window.removeEventListener('resize', this.handleResize);\r\n window.removeEventListener('load', this.initElementsArrays);\r\n };\r\n\r\n componentDidUpdate(prevProps: TouchSwiperProps) {\r\n if (React.Children.count(prevProps.children) !== React.Children.count(this.props.children)) {\r\n this.initElementsArrays();\r\n }\r\n }\r\n\r\n private lockScrollingVertically = (e: TouchEvent) => {\r\n if (this.state.scrollLock) {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n private initElementsArrays = () => {\r\n if (this.containerRef.current) {\r\n const childrenLength = this.containerRef.current.children.length;\r\n this.breakpoints = [0];\r\n this.elementsWidth = [];\r\n\r\n for (let i = 0; i < childrenLength; i++) {\r\n const width = this.getElementWidth(this.containerRef.current.children[i] as HTMLElement);\r\n this.breakpoints.push(width + this.breakpoints[this.breakpoints.length - 1]);\r\n this.elementsWidth.push(width);\r\n }\r\n\r\n this.adjustBreakpoints();\r\n\r\n this.setState({\r\n elementsContainerWidth: this.containerRef.current.offsetWidth\r\n });\r\n }\r\n };\r\n\r\n private getElementWidth = (element: HTMLElement): number => {\r\n const width = element.offsetWidth;\r\n const styles = window.getComputedStyle(element);\r\n const marginLeft = parseFloat(styles.marginLeft) || 0;\r\n const marginRight = parseFloat(styles.marginRight) || 0;\r\n return marginLeft + width + marginRight;\r\n };\r\n\r\n private adjustBreakpoints = () => {\r\n const elementsTotalWidth = this.getElementsTotalWidth();\r\n const wrapperWidth = this.getWrapperWidth();\r\n\r\n if (elementsTotalWidth > wrapperWidth) {\r\n const lastBreakpoint = elementsTotalWidth - wrapperWidth;\r\n this.breakpoints = this.breakpoints.filter((x) => x < lastBreakpoint);\r\n this.breakpoints.push(lastBreakpoint);\r\n } else {\r\n this.breakpoints = [];\r\n }\r\n };\r\n\r\n private handleResize = () => {\r\n if (window.innerWidth !== this.screenWidth) {\r\n this.screenWidth = window.innerWidth;\r\n this.setState({ leftPosition: 0 });\r\n this.initElementsArrays();\r\n\r\n if (this.props.onActiveItemsChange) this.props.onActiveItemsChange(0, this.getLastVisibleElementIndex(0));\r\n }\r\n };\r\n\r\n private getClosestBreakpoint = (): number => {\r\n let closestBreakpoint = 0;\r\n let closestDistance: number | null = null;\r\n\r\n this.breakpoints.forEach((breakpoint) => {\r\n const distance = Math.abs(-breakpoint - this.state.leftPosition);\r\n\r\n if (closestDistance === null) {\r\n closestBreakpoint = breakpoint;\r\n closestDistance = distance;\r\n } else {\r\n if (distance < closestDistance) {\r\n closestBreakpoint = breakpoint;\r\n closestDistance = distance;\r\n }\r\n }\r\n });\r\n\r\n return closestBreakpoint;\r\n };\r\n\r\n private getLastVisibleElementIndex = (startIndex: number): number => {\r\n const swiperWidth = this.getWrapperWidth();\r\n let full = false;\r\n let lastIndex = startIndex;\r\n let totalWidth = this.elementsWidth[startIndex];\r\n const padding = this.getLastVisibleElementPadding();\r\n\r\n for (let i = startIndex; i < this.elementsWidth.length; i++) {\r\n if (totalWidth + this.elementsWidth[i] - padding <= swiperWidth && !full) {\r\n lastIndex++;\r\n totalWidth += this.elementsWidth[i];\r\n } else {\r\n full = true;\r\n }\r\n }\r\n\r\n return lastIndex || startIndex;\r\n };\r\n\r\n private getLastVisibleElementPadding = (): number => {\r\n if (this.props.lastVisibleElementPadding) return this.props.lastVisibleElementPadding;\r\n else return 0;\r\n };\r\n\r\n private getElementsTotalWidth = (): number => {\r\n return this.elementsWidth.reduce((a, b) => a + b, 0);\r\n };\r\n\r\n private updatePosition = (difference: number, clientX: number) => {\r\n const closestBreakpointIndex = this.breakpoints.indexOf(this.getClosestBreakpoint());\r\n\r\n this.setState((prevState) => ({\r\n leftPosition: prevState.leftPosition - difference,\r\n touchCurrentPositionX: clientX\r\n }));\r\n\r\n if (this.props.onActiveItemsChange) this.props.onActiveItemsChange(closestBreakpointIndex, this.getLastVisibleElementIndex(closestBreakpointIndex));\r\n };\r\n\r\n private handleTouchMove = (e: React.TouchEvent) => {\r\n const { clientX, clientY } = e.touches && e.touches[0] ? e.touches[0] : { clientX: 0, clientY: 0 };\r\n const scrollLockOffset = 6;\r\n\r\n if (this.state.swipeEnabled) {\r\n const differenceX = this.state.touchCurrentPositionX - clientX;\r\n const differenceY = this.state.touchCurrentPositionY - clientY;\r\n\r\n if (!this.state.swipeLock && !this.state.scrollLock) {\r\n if (Math.abs(differenceX) > scrollLockOffset) {\r\n this.setState({ scrollLock: true });\r\n } else if (Math.abs(differenceY) > scrollLockOffset) {\r\n this.setState({ swipeLock: true });\r\n }\r\n }\r\n\r\n const lastBreakpointIndex = this.breakpoints.length - 1;\r\n const lastBreakpoint = -this.breakpoints[lastBreakpointIndex];\r\n\r\n if (this.state.leftPosition - differenceX < 0 && this.state.leftPosition - differenceX > lastBreakpoint && !this.state.swipeLock) {\r\n this.updatePosition(differenceX, clientX);\r\n }\r\n }\r\n };\r\n\r\n private handleTouchStart = (e: React.TouchEvent) => {\r\n if ((this.props.onlyOnMobile ? isMobile() : true) && e.touches && e.touches[0]) {\r\n this.setState({\r\n touchInitialPositionX: e.touches[0].clientX,\r\n touchCurrentPositionX: e.touches[0].clientX,\r\n touchCurrentPositionY: e.touches[0].clientY,\r\n swipeEnabled: true\r\n });\r\n }\r\n };\r\n\r\n private handleTouchEnd = () => {\r\n const closestBreakpoint = -this.getClosestBreakpoint();\r\n const closestBreakpointIndex = this.breakpoints.indexOf(-closestBreakpoint);\r\n const direction = this.state.touchInitialPositionX - this.state.touchCurrentPositionX;\r\n let snapToBreakpoint = 0;\r\n\r\n if (direction > 0) {\r\n // swiping right\r\n if (closestBreakpoint < this.state.leftPosition || this.state.swipeLock) {\r\n snapToBreakpoint = closestBreakpoint;\r\n } else if (!this.state.swipeLock) {\r\n snapToBreakpoint =\r\n this.breakpoints[closestBreakpointIndex + 1] !== undefined ? -this.breakpoints[closestBreakpointIndex + 1] : closestBreakpoint;\r\n }\r\n } else {\r\n // swiping left\r\n if (closestBreakpoint < this.state.leftPosition && !this.state.swipeLock) {\r\n snapToBreakpoint =\r\n this.breakpoints[closestBreakpointIndex - 1] !== undefined ? -this.breakpoints[closestBreakpointIndex - 1] : closestBreakpoint;\r\n } else {\r\n snapToBreakpoint = closestBreakpoint;\r\n }\r\n }\r\n\r\n const snapToBreakpointIndex = this.breakpoints.indexOf(-snapToBreakpoint);\r\n\r\n if (this.props.onActiveItemsChange) this.props.onActiveItemsChange(snapToBreakpoint, this.getLastVisibleElementIndex(snapToBreakpointIndex));\r\n\r\n this.setState({\r\n swipeEnabled: false,\r\n leftPosition: snapToBreakpoint,\r\n touchInitialPositionX: 0,\r\n touchCurrentPositionX: 0,\r\n touchCurrentPositionY: 0,\r\n scrollLock: false,\r\n swipeLock: false\r\n });\r\n };\r\n\r\n private getWrapperWidth = (): number => {\r\n return this.wrapperRef.current ? this.wrapperRef.current.offsetWidth + 1 : 0;\r\n };\r\n\r\n render() {\r\n const { children } = this.props;\r\n const { swipeEnabled, leftPosition } = this.state;\r\n\r\n return (\r\n <>\r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default TouchSwiper;\r\n","import * as React from 'react';\r\n\r\nimport { getTranslation, keys } from '../../../Resources/Translations';\r\nimport { Button, ButtonSize } from '../../ReactComponents/Buttons/Button';\r\nimport { EventNames } from '../../ReactComponents/EventNames';\r\nimport { Modal, ModalButtons, ModalHeading, ModalText } from '../../ReactComponents/Modal/Modal';\r\n\r\nexport const showFatalErrorModal = () => {\r\n window.dispatchEvent(new CustomEvent(EventNames.FatalError));\r\n};\r\n\r\nexport const FatalErrorModal = () => {\r\n const [isVisible, setIsVisible] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n window.addEventListener(EventNames.FatalError, showModal);\r\n\r\n return () => {\r\n window.removeEventListener(EventNames.FatalError, showModal);\r\n };\r\n }, []);\r\n\r\n const showModal = () => setIsVisible(true);\r\n\r\n const reloadWindow = () => window.location.reload();\r\n\r\n return (\r\n \r\n {getTranslation(keys['checkout.error.generic'])}\r\n {getTranslation(keys['checkout.error.invalidActionPleaseRefresh'])}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import { makeAutoObservable } from 'mobx';\r\n\r\nimport { UserDetailsViewModel } from '../../Purchase/Cart/PersonalizedCart/UserDetailsViewModel.csharp';\r\nimport { getFor } from '../../ReactComponents/API';\r\nimport { LocalStorageAccessor } from '../../StorageAccessor/LocalStorageAccessor';\r\nimport { FavouritesViewModel } from './FavouritesViewModel.csharp';\r\n\r\ninterface IStorageFavouritesViewModel {\r\n model: FavouritesViewModel;\r\n expirationDate: number;\r\n}\r\n\r\nclass Favourites {\r\n private _favouritesExpirationTimeInHours = 1;\r\n private _favouritesStorage = 'favourites';\r\n\r\n public items: FavouritesViewModel | null = null;\r\n\r\n constructor() {\r\n makeAutoObservable(this);\r\n }\r\n\r\n public setFavourites = (favourites: FavouritesViewModel) => {\r\n this.items = favourites;\r\n this.saveFavouritesInLocalStorage(favourites);\r\n };\r\n\r\n public isFavourite = (code: string, initialValue = false): boolean => {\r\n if (this.items) {\r\n return this.items.favouriteProductCodes.includes(code);\r\n }\r\n\r\n return initialValue;\r\n };\r\n\r\n public validateFavourites = (favouritesUrl: string, user: UserDetailsViewModel) => {\r\n if (!user.isLoggedIn) {\r\n this.clearFavourites();\r\n return;\r\n }\r\n\r\n const data = this.getFavouritesFromLocalStorage();\r\n\r\n if (data === null || data.expirationDate < new Date().getTime() || data.model?.userId !== user.customerId) {\r\n this.updateFavourites(favouritesUrl);\r\n } else {\r\n this.setFavourites(data.model);\r\n }\r\n };\r\n\r\n private saveFavouritesInLocalStorage = (favourites: FavouritesViewModel) => {\r\n LocalStorageAccessor.setItem(\r\n this._favouritesStorage,\r\n JSON.stringify({\r\n model: favourites,\r\n expirationDate: this.getExpirationDate()\r\n })\r\n );\r\n };\r\n\r\n private getFavouritesFromLocalStorage = (): IStorageFavouritesViewModel | null => {\r\n const favouritesString = LocalStorageAccessor.getItem(this._favouritesStorage);\r\n return favouritesString ? (JSON.parse(favouritesString) as IStorageFavouritesViewModel) : null;\r\n };\r\n\r\n private clearFavourites = () => {\r\n LocalStorageAccessor.removeItem(this._favouritesStorage);\r\n this.items = this.buildEmptyFavourites();\r\n };\r\n\r\n private updateFavourites = (favouritesUrl: string) => {\r\n getFor(`${favouritesUrl}`).then((favourites) => {\r\n this.setFavourites(favourites);\r\n });\r\n };\r\n\r\n private getExpirationDate = () => {\r\n const now = new Date();\r\n const hours = now.getHours() + this._favouritesExpirationTimeInHours;\r\n now.setHours(hours);\r\n return now.getTime();\r\n };\r\n\r\n private buildEmptyFavourites = (): FavouritesViewModel => {\r\n return { favouriteProductCodes: [] };\r\n };\r\n}\r\n\r\nexport const favourites = new Favourites();\r\n","const candidateSelectors = [\n 'input',\n 'select',\n 'textarea',\n 'a[href]',\n 'button',\n '[tabindex]:not(slot)',\n 'audio[controls]',\n 'video[controls]',\n '[contenteditable]:not([contenteditable=\"false\"])',\n 'details>summary:first-of-type',\n 'details',\n];\nconst candidateSelector = /* #__PURE__ */ candidateSelectors.join(',');\n\nconst NoElement = typeof Element === 'undefined';\n\nconst matches = NoElement\n ? function () {}\n : Element.prototype.matches ||\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n\nconst getRootNode =\n !NoElement && Element.prototype.getRootNode\n ? (element) => element.getRootNode()\n : (element) => element.ownerDocument;\n\n/**\n * @param {Element} el container to check in\n * @param {boolean} includeContainer add container to check\n * @param {(node: Element) => boolean} filter filter candidates\n * @returns {Element[]}\n */\nconst getCandidates = function (el, includeContainer, filter) {\n let candidates = Array.prototype.slice.apply(\n el.querySelectorAll(candidateSelector)\n );\n if (includeContainer && matches.call(el, candidateSelector)) {\n candidates.unshift(el);\n }\n candidates = candidates.filter(filter);\n return candidates;\n};\n\n/**\n * @callback GetShadowRoot\n * @param {Element} element to check for shadow root\n * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.\n */\n\n/**\n * @callback ShadowRootFilter\n * @param {Element} shadowHostNode the element which contains shadow content\n * @returns {boolean} true if a shadow root could potentially contain valid candidates.\n */\n\n/**\n * @typedef {Object} CandidatesScope\n * @property {Element} scope contains inner candidates\n * @property {Element[]} candidates\n */\n\n/**\n * @typedef {Object} IterativeOptions\n * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;\n * if a function, implies shadow support is enabled and either returns the shadow root of an element\n * or a boolean stating if it has an undisclosed shadow root\n * @property {(node: Element) => boolean} filter filter candidates\n * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list\n * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;\n */\n\n/**\n * @param {Element[]} elements list of element containers to match candidates from\n * @param {boolean} includeContainer add container list to check\n * @param {IterativeOptions} options\n * @returns {Array.}\n */\nconst getCandidatesIteratively = function (\n elements,\n includeContainer,\n options\n) {\n const candidates = [];\n const elementsToCheck = Array.from(elements);\n while (elementsToCheck.length) {\n const element = elementsToCheck.shift();\n if (element.tagName === 'SLOT') {\n // add shadow dom slot scope (slot itself cannot be focusable)\n const assigned = element.assignedElements();\n const content = assigned.length ? assigned : element.children;\n const nestedCandidates = getCandidatesIteratively(content, true, options);\n if (options.flatten) {\n candidates.push(...nestedCandidates);\n } else {\n candidates.push({\n scope: element,\n candidates: nestedCandidates,\n });\n }\n } else {\n // check candidate element\n const validCandidate = matches.call(element, candidateSelector);\n if (\n validCandidate &&\n options.filter(element) &&\n (includeContainer || !elements.includes(element))\n ) {\n candidates.push(element);\n }\n\n // iterate over shadow content if possible\n const shadowRoot =\n element.shadowRoot ||\n // check for an undisclosed shadow\n (typeof options.getShadowRoot === 'function' &&\n options.getShadowRoot(element));\n\n const validShadowRoot =\n !options.shadowRootFilter || options.shadowRootFilter(element);\n\n if (shadowRoot && validShadowRoot) {\n // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed\n // shadow exists, so look at light dom children as fallback BUT create a scope for any\n // child candidates found because they're likely slotted elements (elements that are\n // children of the web component element (which has the shadow), in the light dom, but\n // slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,\n // _after_ we return from this recursive call\n const nestedCandidates = getCandidatesIteratively(\n shadowRoot === true ? element.children : shadowRoot.children,\n true,\n options\n );\n\n if (options.flatten) {\n candidates.push(...nestedCandidates);\n } else {\n candidates.push({\n scope: element,\n candidates: nestedCandidates,\n });\n }\n } else {\n // there's not shadow so just dig into the element's (light dom) children\n // __without__ giving the element special scope treatment\n elementsToCheck.unshift(...element.children);\n }\n }\n }\n return candidates;\n};\n\nconst getTabindex = function (node, isScope) {\n if (node.tabIndex < 0) {\n // in Chrome, , and elements get a default\n // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,\n // yet they are still part of the regular tab order; in FF, they get a default\n // `tabIndex` of 0; since Chrome still puts those elements in the regular tab\n // order, consider their tab index to be 0.\n // Also browsers do not return `tabIndex` correctly for contentEditable nodes;\n // so if they don't have a tabindex attribute specifically set, assume it's 0.\n //\n // isScope is positive for custom element with shadow root or slot that by default\n // have tabIndex -1, but need to be sorted by document order in order for their\n // content to be inserted in the correct position\n if (\n (isScope ||\n /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) ||\n node.isContentEditable) &&\n isNaN(parseInt(node.getAttribute('tabindex'), 10))\n ) {\n return 0;\n }\n }\n\n return node.tabIndex;\n};\n\nconst sortOrderedTabbables = function (a, b) {\n return a.tabIndex === b.tabIndex\n ? a.documentOrder - b.documentOrder\n : a.tabIndex - b.tabIndex;\n};\n\nconst isInput = function (node) {\n return node.tagName === 'INPUT';\n};\n\nconst isHiddenInput = function (node) {\n return isInput(node) && node.type === 'hidden';\n};\n\nconst isDetailsWithSummary = function (node) {\n const r =\n node.tagName === 'DETAILS' &&\n Array.prototype.slice\n .apply(node.children)\n .some((child) => child.tagName === 'SUMMARY');\n return r;\n};\n\nconst getCheckedRadio = function (nodes, form) {\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i].checked && nodes[i].form === form) {\n return nodes[i];\n }\n }\n};\n\nconst isTabbableRadio = function (node) {\n if (!node.name) {\n return true;\n }\n const radioScope = node.form || getRootNode(node);\n const queryRadios = function (name) {\n return radioScope.querySelectorAll(\n 'input[type=\"radio\"][name=\"' + name + '\"]'\n );\n };\n\n let radioSet;\n if (\n typeof window !== 'undefined' &&\n typeof window.CSS !== 'undefined' &&\n typeof window.CSS.escape === 'function'\n ) {\n radioSet = queryRadios(window.CSS.escape(node.name));\n } else {\n try {\n radioSet = queryRadios(node.name);\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(\n 'Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s',\n err.message\n );\n return false;\n }\n }\n\n const checked = getCheckedRadio(radioSet, node.form);\n return !checked || checked === node;\n};\n\nconst isRadio = function (node) {\n return isInput(node) && node.type === 'radio';\n};\n\nconst isNonTabbableRadio = function (node) {\n return isRadio(node) && !isTabbableRadio(node);\n};\n\nconst isZeroArea = function (node) {\n const { width, height } = node.getBoundingClientRect();\n return width === 0 && height === 0;\n};\nconst isHidden = function (node, { displayCheck, getShadowRoot }) {\n // NOTE: visibility will be `undefined` if node is detached from the document\n // (see notes about this further down), which means we will consider it visible\n // (this is legacy behavior from a very long way back)\n // NOTE: we check this regardless of `displayCheck=\"none\"` because this is a\n // _visibility_ check, not a _display_ check\n if (getComputedStyle(node).visibility === 'hidden') {\n return true;\n }\n\n const isDirectSummary = matches.call(node, 'details>summary:first-of-type');\n const nodeUnderDetails = isDirectSummary ? node.parentElement : node;\n if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {\n return true;\n }\n\n // The root node is the shadow root if the node is in a shadow DOM; some document otherwise\n // (but NOT _the_ document; see second 'If' comment below for more).\n // If rootNode is shadow root, it'll have a host, which is the element to which the shadow\n // is attached, and the one we need to check if it's in the document or not (because the\n // shadow, and all nodes it contains, is never considered in the document since shadows\n // behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,\n // is hidden, or is not in the document itself but is detached, it will affect the shadow's\n // visibility, including all the nodes it contains). The host could be any normal node,\n // or a custom element (i.e. web component). Either way, that's the one that is considered\n // part of the document, not the shadow root, nor any of its children (i.e. the node being\n // tested).\n // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the\n // document (per the docs) and while it's a Document-type object, that document does not\n // appear to be the same as the node's `ownerDocument` for some reason, so it's safer\n // to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,\n // using `rootNode.contains(node)` will _always_ be true we'll get false-positives when\n // node is actually detached.\n const nodeRootHost = getRootNode(node).host;\n const nodeIsAttached =\n nodeRootHost?.ownerDocument.contains(nodeRootHost) ||\n node.ownerDocument.contains(node);\n\n if (!displayCheck || displayCheck === 'full') {\n if (typeof getShadowRoot === 'function') {\n // figure out if we should consider the node to be in an undisclosed shadow and use the\n // 'non-zero-area' fallback\n const originalNode = node;\n while (node) {\n const parentElement = node.parentElement;\n const rootNode = getRootNode(node);\n if (\n parentElement &&\n !parentElement.shadowRoot &&\n getShadowRoot(parentElement) === true // check if there's an undisclosed shadow\n ) {\n // node has an undisclosed shadow which means we can only treat it as a black box, so we\n // fall back to a non-zero-area test\n return isZeroArea(node);\n } else if (node.assignedSlot) {\n // iterate up slot\n node = node.assignedSlot;\n } else if (!parentElement && rootNode !== node.ownerDocument) {\n // cross shadow boundary\n node = rootNode.host;\n } else {\n // iterate up normal dom\n node = parentElement;\n }\n }\n\n node = originalNode;\n }\n // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support\n // (i.e. it does not also presume that all nodes might have undisclosed shadows); or\n // it might be a falsy value, which means shadow DOM support is disabled\n\n // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)\n // now we can just test to see if it would normally be visible or not, provided it's\n // attached to the main document.\n // NOTE: We must consider case where node is inside a shadow DOM and given directly to\n // `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.\n\n if (nodeIsAttached) {\n // this works wherever the node is: if there's at least one client rect, it's\n // somehow displayed; it also covers the CSS 'display: contents' case where the\n // node itself is hidden in place of its contents; and there's no need to search\n // up the hierarchy either\n return !node.getClientRects().length;\n }\n\n // Else, the node isn't attached to the document, which means the `getClientRects()`\n // API will __always__ return zero rects (this can happen, for example, if React\n // is used to render nodes onto a detached tree, as confirmed in this thread:\n // https://github.com/facebook/react/issues/9117#issuecomment-284228870)\n //\n // It also means that even window.getComputedStyle(node).display will return `undefined`\n // because styles are only computed for nodes that are in the document.\n //\n // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable\n // somehow. Though it was never stated officially, anyone who has ever used tabbable\n // APIs on nodes in detached containers has actually implicitly used tabbable in what\n // was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck=\"none\"` mode -- essentially\n // considering __everything__ to be visible because of the innability to determine styles.\n } else if (displayCheck === 'non-zero-area') {\n // NOTE: Even though this tests that the node's client rect is non-zero to determine\n // whether it's displayed, and that a detached node will __always__ have a zero-area\n // client rect, we don't special-case for whether the node is attached or not. In\n // this mode, we do want to consider nodes that have a zero area to be hidden at all\n // times, and that includes attached or not.\n return isZeroArea(node);\n }\n\n // visible, as far as we can tell, or per current `displayCheck` mode\n return false;\n};\n\n// form fields (nested) inside a disabled fieldset are not focusable/tabbable\n// unless they are in the _first_