{"version":3,"file":"ShadesDrawerButton.a8056a79b97318be862d.chunk.js","mappings":"+NAWO,MAAMA,EAAqBC,EAAAA,EAAAA,EAAS;;;EAK9BC,EAAkBD,EAAAA,EAAAA,GAAU;;;;uBAIlBE,EAAAA,EAAAA;;;EAKVC,EAAiBH,EAAAA,EAAAA,IAG5B;WACSI,EAAAA,EAAAA,MAAAA,KAAAA;;;aAGEC,IAAA,IAAC,aAAEC,GAAcD,EAAA,OAAMC,EAAe,OAAS;;IAExDF,EAAAA,EAAAA,WAAAA;IACAG,IAAA,IAAC,WAAEC,GAAYD,EAAA,OACfC,IACAC,EAAAA,EAAAA,IAAG,QACCL,EAAAA,EAAAA,WAAAA;EAIKM,EAAuBV,EAAAA,EAAAA,GAAU;;EAIjCW,EAAeX,EAAAA,EAAAA,MAAa;;;;;;IAMrCI,EAAAA,EAAAA,WAAAA;EAGSQ,EAAqBZ,EAAAA,EAAAA,GAAmC;;;IAGjEa,IAAA,IAAC,WAAEL,GAAYK,EAAA,OAAKJ,EAAAA,EAAAA,IAAG,0BAEnBD,EAAaJ,EAAAA,EAAAA,MAAAA,OAAAA,SAA8B;EAItCU,GAAsBd,EAAAA,EAAAA,GAAOe,EAAAA,EAAY;gBACtCC,EAAAA;eACDA,EAAAA;;EAIFC,EAAQjB,EAAAA,EAAAA,EAAS;;IAE1BI,EAAAA,EAAAA,WAAAA;EAGSc,EAAkBlB,EAAAA,EAAAA,EAAS;;;;;;;;;;EAY3BmB,EAAUnB,EAAAA,EAAAA,GAAU;;;;;WAKtBI,EAAAA,EAAAA,MAAAA,KAAAA;;;kBAGOA,EAAAA,EAAAA,MAAAA,WAAAA;;EAILgB,EAAsBpB,EAAAA,EAAAA,GAAU;;;;;EAOhCqB,EAAMrB,EAAAA,EAAAA,KAAY;WACpBI,EAAAA,EAAAA,MAAAA,KAAAA;EAGEkB,EAAkBtB,EAAAA,EAAAA,MAAa;;;;;;;IAOxCI,EAAAA,EAAAA,WAAAA;;;EAKSmB,GAAqBd,EAAAA,EAAAA,IAAG,iGAKdP,EAAAA,EAAAA,IAKVsB,GAAsBf,EAAAA,EAAAA,IAAG,qIAGZL,EAAAA,EAAAA,MAAAA,OAAAA,OAGHF,EAAAA,EAAAA,I,6HCtIhB,MAAMuB,EAAyBA,KACpC,MAAMC,EAAMC,EAAAA,SAOZ,OALAA,EAAAA,WAAgB,KACVD,EAAIE,SACNF,EAAIE,QAAQC,gBAAe,KAE5B,IACIF,EAAAA,cAAC1B,EAAe,CAACyB,IAAKA,K,gFCF/B,MAAMI,EAAoBC,KAKxBC,EAAAA,EAAAA,GAAsB,CACpBC,MAAO,gBACPC,QAAS,CACPC,KAAM,OACNC,KAAM,SACNC,YAAa,QACbC,OAAQ,GACRC,kBAAcC,EACdC,KAAM,YACHV,GAELW,QAAQ,K,eCxBZ,MAAMC,EAA+B,CACnCC,EAAAA,EAAAA,uBAAAA,QACAA,EAAAA,EAAAA,uBAAAA,UAGWC,EACXC,GAEOH,EAA6BI,SAASD,GCIlCE,EAET3C,IAAuB,IAAtB,KAAE4C,EAAI,QAAEC,GAAS7C,EACpB,MAAM,cAAE8C,IAAkBC,EAAAA,EAAAA,WAKpBC,GAJgBC,EAAAA,EAAAA,GAAiBL,EAAKM,WAAY,CACtDC,UAAU,EACVC,aAAcZ,MAEiB,IAAIa,MAC/BC,EACJV,EAAKW,aAAaC,QAAUC,EAAAA,GAAAA,aAE9B,IAAKH,IAAiBN,EACpB,OAAO,KAGT,MAAMU,EAAuBC,IAC3BA,EAAEC,iBFoDkCC,EACtChB,EACAiB,MAEAnC,EAAAA,EAAAA,GAAsB,CACpBC,MAAO,iBACPmC,SAAU,CACR9B,OAAQ,kBACRD,YAAa,SACbI,KAAM,SACN4B,SAAU,EACRC,EAAAA,EAAAA,MACGC,YAAYrB,GACZsB,mBAAmB,IACfL,EACHM,MAAO,CACLC,WAAY,WACTP,EAAQM,OAEbE,kBAAmB,CACjBC,KAAMT,EAAQQ,kBAAkBC,KAChCF,WAAY,eAGfG,UAGPnC,QAAQ,KE9ERwB,CAAyBhB,EAASD,IAGpC,OACEtB,EAAAA,cAACjB,EAAoB,KAClBiD,EACChC,EAAAA,cAACmD,EAAAA,EAAQ,CAACX,QAASlB,EAAM8B,GAAI,oBAAoB9B,EAAK+B,UACnDzE,IAAA,IAAC,eAAE0E,GAAgB1E,EAAA,OAClBoB,EAAAA,cAAChB,EAAY,CAACuE,QAASnB,GACpBZ,EACC8B,EACIE,EAAAA,EAAAA,eACAA,EAAAA,EAAAA,uBAMZxD,EAAAA,cAACN,EAAG,KAAEgC,K,wNCZP,MAAM+B,EAAsD/E,IAM7D,IAN8D,KAClE4C,EAAI,WACJzC,EAAU,gBACV6E,EAAe,QACfnC,EAAO,QACPgC,GACD7E,EACC,MAAM,YAAEiF,GAAgBC,EAAAA,EAAAA,oBAElB,cAAEpC,IAAkBC,EAAAA,EAAAA,WAEpB9C,EAAe2C,EAAK0B,kBAAkBC,OAASY,EAAAA,EAAAA,WAC/CC,EFhCsBxC,CAAAA,GAGxBA,GAAMwC,QAAQC,OAAS,EAClBzC,EAAKwC,OAEP,CAACrF,EAAAA,EAAAA,MAAAA,WAAAA,SE0BOuF,CAAc1C,GAQ7B,OACEtB,EAAAA,cAACT,EAAe,CACd,aAAYZ,EAAe6C,EAAcyC,EAAAA,EAAAA,iBAAuBpD,EAChE,gBAAelC,GAEdE,GAAcmB,EAAAA,cAACF,EAAY,MAC5BE,EAAAA,cAACkE,EAAAA,EAAa,KACZlE,EAAAA,cAACmE,EAAAA,GAAWC,EAAA,CACVC,SAAS,EACTC,GAAIhD,EAAKiD,IACThB,QAhBalB,IACnBkB,IAAUjC,EAAMe,GHoBmBmC,CAAAA,IAEG,IAFF,OACtCC,GACmCD,EACnCrE,EAAiB,CACfK,UAAMK,EACNH,YAAa,iBACb+D,OAAAA,KGzBAC,CAAwB,CAAED,OAAQf,MAClCC,KAcMP,GAAI,cAAc9B,EAAK+B,QACvB,cAAa,cAAc/B,EAAK+B,QAChCsB,UAAW9F,EAAa,sBAAwB,KAC5C+F,EAAAA,EAAAA,IAAetD,EAAKM,aAExB5B,EAAAA,cAACR,EAAO,KACNQ,EAAAA,cAACP,EAAmB,KAClBO,EAAAA,cAACf,EAAkB,CAACJ,WAAYA,GAC9BmB,EAAAA,cAACb,EAAmB,CAClB0F,MAAOxF,EAAAA,EACPyF,OAAQzF,EAAAA,EACRyE,OAAQA,GAEPnF,GACCqB,EAAAA,cAAC+E,EAAAA,EAAgB,CACfC,OAAOC,EAAAA,EAAAA,GAAwBnB,GAC/Be,MAAM,OACNC,OAAO,WAKf9E,EAAAA,cAACxB,EAAc,CACbK,WAAYA,EACZF,aAAcA,GAEb2C,EAAK4D,iBAIVlF,EAAAA,cAACqB,EAAU,CAACC,KAAMA,EAAMC,QAASA,SC9E7C,EAbsD7C,IAGhD,IAHiD,SACrDyG,KACGC,GACJ1G,EACC,MAAM,iBAAE2G,GCYqB3G,CAAAA,IAKR,IALS,SAC9B4G,EAAQ,WACRC,EAAU,iBACVC,EAAgB,QAChBjC,GACgB7E,EAChB,MAAM,WAAE+G,EAAU,YAAE9B,GAAgBC,EAAAA,EAAAA,oBAC5BF,gBAAiBgC,IAAYC,EAAAA,EAAAA,MAC/B,QAAEpE,IAAYqE,EAAAA,EAAAA,KAoCpB,MAAO,CAAEP,iBAlCgBA,KLJI3G,CAAAA,IAEW,IAFV,OAC9B+F,GACmC/F,EACnCyB,EAAiB,CACfK,KAAM,OACNiE,OAAAA,EACA/D,YAAa,WKDbmF,CAAgB,CAAEpB,OAAQiB,MAC1BD,EACEzF,EAAAA,cAAC5B,EAAkB,KAChBkH,EAASQ,KAAKxE,GACbtB,EAAAA,cAACyD,EAAiB,CAChBnC,KAAMA,EACNzC,WAAYyC,EAAK+B,QAAUkC,EAC3BQ,IAAKzE,EAAK+B,MACVK,gBAAiBgC,EACjBnE,QAASA,EACTgC,QAASA,OAIf,CACEyC,gBACEV,EAASvB,QA7B4B,GA8BjC,MACA,UACNkC,MAAOjG,EAAAA,cAACV,EAAK,KAAEkG,GACfU,yCAAyC,EACzCC,QAAUC,ILhBcxH,CAAAA,IAGkC,IAHjC,OAC/B6F,EAAM,UACN2B,GAC2DxH,EAC3D,MAAMyH,GAAaC,EAAAA,EAAAA,GAAuBF,GAE1CjG,EAAiB,CACfK,KAAM,QACNE,YAAa2F,EACb5B,OAAAA,KKQM8B,CAAiB,CAAEH,UAAAA,EAAW3B,OAAQiB,MACtC/B,KAEF6C,cAAeA,ILPStH,CAAAA,IAEU,IAFT,OAC/BuF,GACmCvF,EACnCiB,EAAiB,CACfK,KAAM,OACNE,YAAa,UACb+D,OAAAA,KKCyBgC,CAAiB,CAAEhC,OAAQiB,MAChDgB,iBAAkBA,ILESC,CAAAA,IAEO,IAFN,OAClClC,GACmCkC,EACnCxG,EAAiB,CACfK,KAAM,OACNE,YAAa,UACb+D,OAAAA,KKR4BmC,CAAoB,CAAEnC,OAAQiB,MACtDmB,mBAAoBjH,EACpBkH,4BAA6BjH,ODnDNkH,CAAgB3B,GAE7C,OACEpF,EAAAA,cAACL,EAAe,CAAC4D,QAAS8B,EAAkB,cAAY,mBACrDF,K,gBEhBA,SAASmB,EAAuBF,GACrC,OAAQA,GACN,IAAK,gBACH,MAAO,YACT,IAAK,OACH,MAAO,UACT,IAAK,aACH,MAAO,cACT,IAAK,+BACH,MAAO,gCACT,IAAK,sBACH,MAAO,uBACT,IAAK,sBACH,MAAO,uBACT,IAAK,SACH,MAAO,SACT,IAAK,eACH,MAAO,eACT,QACE,MAAO,S","sources":["webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/styled.ts","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/components/OffsetScroll.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/tracking.ts","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/utils.ts","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/ItemStatus.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/ColorCirclePicker.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/ShadesDrawerButton.tsx","webpack://nushopweb/./packages/client/src/containers/ProductDetailContainer/ProductDetail/ProductBaseInfo/ShadesDrawer/useShadesDrawer.tsx","webpack://nushopweb/./packages/client/src/utils/drawer.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport {\n  styled,\n  ColorCircle,\n  theme,\n  breakpoints,\n} from '@notino/react-styleguide';\n\nimport { COLOR_CIRCLE_SIZE } from './constants';\n\nexport const ShadesVariantsList = styled.ul`\n  display: flex;\n  flex-wrap: wrap;\n`;\n\nexport const OffsetScrollDiv = styled.div`\n  position: relative;\n  top: -4rem;\n\n  @media (min-width: ${breakpoints.md}) {\n    top: -40vh;\n  }\n`;\n\nexport const AdditionalInfo = styled.span<{\n  isOutOfStock: boolean;\n  isSelected: boolean;\n}>`\n  color: ${theme.color.text.primary};\n  margin-left: 0.75rem;\n\n  opacity: ${({ isOutOfStock }) => (isOutOfStock ? '0.25' : '1')};\n\n  ${theme.typography.labelRegular400}\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      ${theme.typography.labelRegular}\n    `};\n`;\n\nexport const TagOrWatchdogWrapper = styled.div`\n  margin-left: auto;\n`;\n\nexport const WatchdogLink = styled.button`\n  text-decoration: underline;\n  white-space: nowrap;\n\n  background: transparent;\n  border: 0;\n  ${theme.typography.bodyRegular}\n`;\n\nexport const ColorCircleWrapper = styled.div<{ isSelected: boolean }>`\n  border-radius: 4rem;\n\n  ${({ isSelected }) => css`\n    border: 2px solid\n      ${isSelected ? theme.color.border.selected : 'transparent'};\n  `}\n`;\n\nexport const BorderedColorCircle = styled(ColorCircle)`\n  min-height: ${COLOR_CIRCLE_SIZE}rem;\n  min-width: ${COLOR_CIRCLE_SIZE}rem;\n  overflow: hidden;\n`;\n\nexport const Title = styled.h4`\n  margin-left: 1rem;\n  ${theme.typography.labelLarge};\n`;\n\nexport const VariantListItem = styled.li`\n  width: 100%;\n\n  // override layout styles for li\n  padding: 0;\n  margin: 0;\n  &::before {\n    content: none;\n    display: none;\n  }\n`;\n\nexport const Variant = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.25rem;\n\n  color: ${theme.color.text.primary};\n\n  &:hover {\n    background: ${theme.color.background.disabled};\n  }\n`;\n\nexport const VariantListItemInfo = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: 1rem;\n  position: relative;\n`;\n\nexport const Tag = styled.small`\n  color: ${theme.color.text.tertiary};\n`;\n\nexport const ShadeListButton = styled.button`\n  background: none;\n  border: none;\n  text-decoration: underline;\n  cursor: pointer;\n  margin: 0.75rem 0;\n\n  ${theme.typography.bodyRegular}\n  font-weight: bold;\n  font-size: 0.9rem;\n`;\n\nexport const StyledDrawerHeader = css`\n  height: 3.5rem;\n\n  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;\n\n  @media (min-width: ${breakpoints.md}) {\n    height: 4.25rem;\n  }\n`;\n\nexport const StyledDrawerContent = css`\n  [data-testid='drawer-scrollable-content'] {\n    &::-webkit-scrollbar-thumb {\n      background-color: ${theme.color.common.gray50};\n    }\n  }\n  @media (min-width: ${breakpoints.md}) {\n    width: 26rem;\n  }\n`;\n","import * as React from 'react';\n\nimport { OffsetScrollDiv } from '../styled';\n\nexport const OffsetScroll: React.FC = () => {\n  const ref = React.useRef<HTMLDivElement>();\n\n  React.useEffect(() => {\n    if (ref.current) {\n      ref.current.scrollIntoView(true);\n    }\n  }, []);\n  return <OffsetScrollDiv ref={ref} />;\n};\n","import {\n  GetCatalogProductViewQuery,\n  CatalogVariantFragmentFragment,\n} from '@notino/shared/definitions/types';\n\nimport { TrackingAttributes } from '@context/tracking/types';\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\nimport { ProductEventWither } from '@helpers/googleTagManager';\nimport { resolveDrawerCloseType } from '@utils/drawer';\n\nconst trackDrawerEvent = (args: {\n  timing: number;\n  mode: string;\n  interaction: string;\n}) => {\n  dispatchTrackingEvent({\n    event: 'element_click',\n    element: {\n      mode: 'open',\n      name: 'Drawer',\n      interaction: 'click',\n      action: '',\n      promo_labels: undefined,\n      type: 'drawer',\n      ...args,\n    },\n    _clear: true,\n  });\n};\n\nexport const trackDrawerOpen = ({\n  timing,\n}: Pick<TrackingAttributes, 'timing'>) => {\n  trackDrawerEvent({\n    mode: 'open',\n    timing,\n    interaction: 'click',\n  });\n};\n\nexport const trackDrawerClose = ({\n  timing,\n  closeType,\n}: Omit<TrackingAttributes<{ closeType: string }>, 'variant'>) => {\n  const eventLabel = resolveDrawerCloseType(closeType);\n\n  trackDrawerEvent({\n    mode: 'close',\n    interaction: eventLabel,\n    timing,\n  });\n};\n\nexport const trackResizeToTop = ({\n  timing,\n}: Pick<TrackingAttributes, 'timing'>) => {\n  trackDrawerEvent({\n    mode: 'open',\n    interaction: 'resize+',\n    timing,\n  });\n};\n\nexport const trackResizeToMiddle = ({\n  timing,\n}: Pick<TrackingAttributes, 'timing'>) => {\n  trackDrawerEvent({\n    mode: 'open',\n    interaction: 'resize-',\n    timing,\n  });\n};\n\nexport const trackDrawerVariantClick = ({\n  timing,\n}: Pick<TrackingAttributes, 'timing'>) => {\n  trackDrawerEvent({\n    mode: undefined,\n    interaction: 'select_variant',\n    timing,\n  });\n};\n\nexport const trackDrawerWatchdogClick = (\n  product: GetCatalogProductViewQuery['productDetailByCatalogMasterId'],\n  variant: CatalogVariantFragmentFragment\n) => {\n  dispatchTrackingEvent({\n    event: 'watchdog_click',\n    watchdog: {\n      action: 'wt_add_watchdog',\n      interaction: 'button',\n      type: 'Drawer',\n      products: [\n        ProductEventWither()\n          .withProduct(product)\n          .withPartialVariant({\n            ...variant,\n            price: {\n              __typename: 'Price',\n              ...variant.price,\n            },\n            stockAvailability: {\n              code: variant.stockAvailability.code,\n              __typename: 'StockInfo',\n            },\n          })\n          .build(),\n      ],\n    },\n    _clear: true,\n  });\n};\n","import { ProductTileModel, theme } from '@notino/react-styleguide';\n\nconst availableTagsForShadesDrawer = [\n  ProductTileModel.ProductLabelAttributes.Damaged,\n  ProductTileModel.ProductLabelAttributes.Returned,\n];\n\nexport const isAvailableTagForShadesDrawer = (\n  tag: ProductTileModel.ProductLabelAttributes\n) => {\n  return availableTagsForShadesDrawer.includes(tag);\n};\n\n/**\n * Resolves color for item\n * @param item\n * @return color for color circle\n */\nexport const getItemColors = (item: {\n  colors: Array<string>;\n}): Array<string> => {\n  if (item?.colors?.length > 0) {\n    return item.colors;\n  }\n  return [theme.color.background.primary];\n};\n","import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { AvailabilityState } from '@notino/shared/definitions/types';\n\nimport { useTagAttributes } from '@components/Universals/ProductItem/useTagAttributes';\nimport { Watchdog } from '@sharedComponents/Watchdog';\nimport { watchdogMessages } from '@sharedComponents/Watchdog/watchdogMessages';\n\nimport { ColorCirclePickerProps } from './ColorCirclePicker';\nimport { WatchdogLink, Tag, TagOrWatchdogWrapper } from './styled';\nimport { trackDrawerWatchdogClick } from './tracking';\nimport { isAvailableTagForShadesDrawer } from './utils';\n\nexport const ItemStatus: React.FC<\n  Pick<ColorCirclePickerProps, 'item' | 'product'>\n> = ({ item, product }) => {\n  const { formatMessage } = useIntl();\n  const tagAttributes = useTagAttributes(item.attributes, {\n    multiple: false,\n    customFilter: isAvailableTagForShadesDrawer,\n  });\n  const tagLabel = tagAttributes?.[0]?.label;\n  const showWatchdog =\n    item.availability.state === AvailabilityState.ShowWatchdog;\n\n  if (!showWatchdog && !tagLabel) {\n    return null;\n  }\n\n  const handleWatchdogClick = (e) => {\n    e.preventDefault();\n    trackDrawerWatchdogClick(product, item);\n  };\n\n  return (\n    <TagOrWatchdogWrapper>\n      {showWatchdog ? (\n        <Watchdog variant={item} id={`watchdog-variant-${item.webId}`}>\n          {({ watchdogActive }) => (\n            <WatchdogLink onClick={handleWatchdogClick}>\n              {formatMessage(\n                watchdogActive\n                  ? watchdogMessages.watchdogActive\n                  : watchdogMessages.watchAvailability\n              )}\n            </WatchdogLink>\n          )}\n        </Watchdog>\n      ) : (\n        <Tag>{tagLabel}</Tag>\n      )}\n    </TagOrWatchdogWrapper>\n  );\n};\n","import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DrawerContext, IconRegularClose } from '@notino/react-styleguide';\nimport { IStock } from '@notino/shared/definitions/custom-definitions';\nimport { GetCatalogProductViewQuery } from '@notino/shared/definitions/types';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport messages from '@containers/ProductDetailContainer/messages';\nimport { dataLabelsProp } from '@helpers/utils';\n\nimport { HandleTransitionClick } from '../Variants/useVariantTransition';\nimport {\n  getContrastingIconColor,\n  IVariantItemProps,\n} from '../Variants/VariantsColorPickers/ColorPicker';\nimport { VariantLink } from '../variantsStyled';\n\nimport { OffsetScroll } from './components/OffsetScroll';\nimport { COLOR_CIRCLE_SIZE } from './constants';\nimport { ItemStatus } from './ItemStatus';\nimport {\n  VariantListItem,\n  Variant,\n  BorderedColorCircle,\n  AdditionalInfo,\n  VariantListItemInfo,\n  ColorCircleWrapper,\n} from './styled';\nimport { trackDrawerVariantClick } from './tracking';\nimport { getItemColors } from './utils';\n\nexport interface ColorCirclePickerProps extends IVariantItemProps {\n  getTimeFromInit: () => number;\n  product: GetCatalogProductViewQuery['productDetailByCatalogMasterId'];\n  onClick?: HandleTransitionClick;\n}\n\nexport const ColorCirclePicker: React.FC<ColorCirclePickerProps> = ({\n  item,\n  isSelected,\n  getTimeFromInit,\n  product,\n  onClick,\n}) => {\n  const { closeDrawer } = DrawerContext.useDrawerContext();\n\n  const { formatMessage } = useIntl();\n\n  const isOutOfStock = item.stockAvailability.code === IStock.outOfStock;\n  const colors = getItemColors(item);\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n    onClick?.(item, e);\n    trackDrawerVariantClick({ timing: getTimeFromInit() });\n    closeDrawer();\n  };\n\n  return (\n    <VariantListItem\n      aria-label={isOutOfStock ? formatMessage(messages.outOfStock) : undefined}\n      aria-disabled={isOutOfStock}\n    >\n      {isSelected && <OffsetScroll />}\n      <ErrorBoundary>\n        <VariantLink\n          replace={true}\n          to={item.url}\n          onClick={handleClick}\n          id={`pd-variant-${item.webId}`}\n          data-testid={`pd-variant-${item.webId}`}\n          className={isSelected ? 'pd-variant-selected' : ''}\n          {...dataLabelsProp(item.attributes)}\n        >\n          <Variant>\n            <VariantListItemInfo>\n              <ColorCircleWrapper isSelected={isSelected}>\n                <BorderedColorCircle\n                  width={COLOR_CIRCLE_SIZE}\n                  height={COLOR_CIRCLE_SIZE}\n                  colors={colors}\n                >\n                  {isOutOfStock && (\n                    <IconRegularClose\n                      color={getContrastingIconColor(colors)}\n                      width=\"20px\"\n                      height=\"20px\"\n                    />\n                  )}\n                </BorderedColorCircle>\n              </ColorCircleWrapper>\n              <AdditionalInfo\n                isSelected={isSelected}\n                isOutOfStock={isOutOfStock}\n              >\n                {item.additionalInfo}\n              </AdditionalInfo>\n            </VariantListItemInfo>\n\n            <ItemStatus item={item} product={product} />\n          </Variant>\n        </VariantLink>\n      </ErrorBoundary>\n    </VariantListItem>\n  );\n};\n","import * as React from 'react';\n\nimport { ReactFCC } from '@notino/react-styleguide';\n\nimport { ShadeDrawerArgs } from './model';\nimport { ShadeListButton } from './styled';\nimport { useShadesDrawer } from './useShadesDrawer';\n\nconst ShadesDrawerButton: ReactFCC<ShadeDrawerArgs> = ({\n  children,\n  ...rest\n}) => {\n  const { handleOpenDrawer } = useShadesDrawer(rest);\n\n  return (\n    <ShadeListButton onClick={handleOpenDrawer} data-testid=\"ShadeListButton\">\n      {children}\n    </ShadeListButton>\n  );\n};\n\nexport default ShadesDrawerButton;\n","import * as React from 'react';\n\nimport { DrawerContext } from '@notino/react-styleguide';\n\nimport { useProductDetailContext } from '@containers/ProductDetailContainer/ProductDetailContext';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\n\nimport { ColorCirclePicker } from './ColorCirclePicker';\nimport { ShadeDrawerArgs } from './model';\nimport {\n  Title,\n  ShadesVariantsList,\n  StyledDrawerHeader,\n  StyledDrawerContent,\n} from './styled';\nimport {\n  trackDrawerOpen,\n  trackResizeToTop,\n  trackResizeToMiddle,\n  trackDrawerClose,\n} from './tracking';\n\nconst VARIANT_LENGTH_FOR_TOP_DRAWER_POSITION = 10;\n\nexport const useShadesDrawer = ({\n  variants,\n  selectedId,\n  shadeDrawerTitle,\n  onClick,\n}: ShadeDrawerArgs) => {\n  const { openDrawer, closeDrawer } = DrawerContext.useDrawerContext();\n  const { getTimeFromInit: getTime } = useTrackingContext();\n  const { product } = useProductDetailContext();\n\n  const handleOpenDrawer = () => {\n    trackDrawerOpen({ timing: getTime() });\n    openDrawer(\n      <ShadesVariantsList>\n        {variants.map((item) => (\n          <ColorCirclePicker\n            item={item}\n            isSelected={item.webId === selectedId}\n            key={item.webId}\n            getTimeFromInit={getTime}\n            product={product}\n            onClick={onClick}\n          />\n        ))}\n      </ShadesVariantsList>,\n      {\n        initialPosition:\n          variants.length >= VARIANT_LENGTH_FOR_TOP_DRAWER_POSITION\n            ? 'top'\n            : 'dynamic',\n        title: <Title>{shadeDrawerTitle}</Title>,\n        interceptBrowserBackButtonToCloseDrawer: true,\n        onClose: (closeType) => {\n          trackDrawerClose({ closeType, timing: getTime() });\n          closeDrawer();\n        },\n        onResizeToTop: () => trackResizeToTop({ timing: getTime() }),\n        onResizeToMiddle: () => trackResizeToMiddle({ timing: getTime() }),\n        headerCustomStyles: StyledDrawerHeader,\n        drawerContainerCustomStyles: StyledDrawerContent,\n      }\n    );\n  };\n\n  return { handleOpenDrawer };\n};\n","export function resolveDrawerCloseType(closeType: string) {\n  switch (closeType) {\n    case 'outside-click':\n      return 'Close-Out';\n    case 'icon':\n      return 'Close-X';\n    case 'slide-down':\n      return 'Close-Slide';\n    case 'slide-down-position-velocity':\n      return 'Close-Slide-Position-Velocity';\n    case 'slide-down-position':\n      return 'Close-Slide-Position';\n    case 'slide-down-velocity':\n      return 'Close-Slide-Velocity';\n    case 'escape':\n      return 'Escape';\n    case 'browser-back':\n      return 'Browser-Back';\n    default:\n      return 'Close';\n  }\n}\n"],"names":["ShadesVariantsList","styled","OffsetScrollDiv","breakpoints","AdditionalInfo","theme","_ref","isOutOfStock","_ref2","isSelected","css","TagOrWatchdogWrapper","WatchdogLink","ColorCircleWrapper","_ref3","BorderedColorCircle","ColorCircle","COLOR_CIRCLE_SIZE","Title","VariantListItem","Variant","VariantListItemInfo","Tag","ShadeListButton","StyledDrawerHeader","StyledDrawerContent","OffsetScroll","ref","React","current","scrollIntoView","trackDrawerEvent","args","dispatchTrackingEvent","event","element","mode","name","interaction","action","promo_labels","undefined","type","_clear","availableTagsForShadesDrawer","ProductTileModel","isAvailableTagForShadesDrawer","tag","includes","ItemStatus","item","product","formatMessage","useIntl","tagLabel","useTagAttributes","attributes","multiple","customFilter","label","showWatchdog","availability","state","AvailabilityState","handleWatchdogClick","e","preventDefault","trackDrawerWatchdogClick","variant","watchdog","products","ProductEventWither","withProduct","withPartialVariant","price","__typename","stockAvailability","code","build","Watchdog","id","webId","watchdogActive","onClick","watchdogMessages","ColorCirclePicker","getTimeFromInit","closeDrawer","DrawerContext","IStock","colors","length","getItemColors","messages","ErrorBoundary","VariantLink","_extends","replace","to","url","_ref5","timing","trackDrawerVariantClick","className","dataLabelsProp","width","height","IconRegularClose","color","getContrastingIconColor","additionalInfo","children","rest","handleOpenDrawer","variants","selectedId","shadeDrawerTitle","openDrawer","getTime","useTrackingContext","useProductDetailContext","trackDrawerOpen","map","key","initialPosition","title","interceptBrowserBackButtonToCloseDrawer","onClose","closeType","eventLabel","resolveDrawerCloseType","trackDrawerClose","onResizeToTop","trackResizeToTop","onResizeToMiddle","_ref4","trackResizeToMiddle","headerCustomStyles","drawerContainerCustomStyles","useShadesDrawer"],"sourceRoot":""}