{"version":3,"file":"ShadesDrawerButton.ca266ffff8d195333eaf.chunk.js","mappings":"6SAWO,IAAMA,EAAqBC,EAAAA,EAAAA,GAASC,IAAAA,EAAAC,EAAA,gDAK9BC,EAAkBH,EAAAA,EAAAA,IAAUI,IAAAA,EAAAF,EAAA,oGAIlBG,EAAAA,EAAAA,IAKVC,EAAiBN,EAAAA,EAAAA,KAAWO,IAAAA,EAAAL,EAAA,qFAI9BM,EAAAA,EAAAA,MAAAA,KAAAA,SAGE,SAAAC,GAAe,OAAAA,EAAZC,aAAmC,OAAS,MAExDF,EAAAA,EAAAA,WAAAA,iBACA,SAAAG,GAAa,OAAAA,EAAVC,aAEHC,EAAAA,EAAAA,IAAG,QACCL,EAAAA,EAAAA,WAAAA,iBAIKM,EAAuBd,EAAAA,EAAAA,IAAUe,IAAAA,EAAAb,EAAA,gCAIjCc,EAAehB,EAAAA,EAAAA,OAAaiB,IAAAA,EAAAf,EAAA,mHAMrCM,EAAAA,EAAAA,WAAAA,aAGSU,EAAqBlB,EAAAA,EAAAA,IAAUmB,IAAAA,EAAAjB,EAAA,2CAGxC,SAAAkB,GAAA,IAAGR,EAAUQ,EAAVR,WAAU,OAAOC,EAAAA,EAAAA,IAAG,0BAEnBD,EAAaJ,EAAAA,EAAAA,MAAAA,OAAAA,SAA8B,kBAItCa,GAAsBrB,EAAAA,EAAAA,GAAOsB,EAAAA,EAAPtB,CAAmBuB,IAAAA,EAAArB,EAAA,2EACtCsB,EAAAA,EACDA,EAAAA,GAIFC,EAAQzB,EAAAA,EAAAA,GAAS0B,IAAAA,EAAAxB,EAAA,uCAE1BM,EAAAA,EAAAA,WAAAA,YAGSmB,EAAkB3B,EAAAA,EAAAA,GAAS4B,IAAAA,EAAA1B,EAAA,yJAY3B2B,EAAU7B,EAAAA,EAAAA,IAAU8B,IAAAA,EAAA5B,EAAA,0IAKtBM,EAAAA,EAAAA,MAAAA,KAAAA,QAGOA,EAAAA,EAAAA,MAAAA,WAAAA,UAILuB,EAAsB/B,EAAAA,EAAAA,IAAUgC,IAAAA,EAAA9B,EAAA,kGAOhC+B,EAAMjC,EAAAA,EAAAA,MAAYkC,IAAAA,EAAAhC,EAAA,wBACpBM,EAAAA,EAAAA,MAAAA,KAAAA,UAGE2B,EAAkBnC,EAAAA,EAAAA,OAAaoC,IAAAA,EAAAlC,EAAA,kLAOxCM,EAAAA,EAAAA,WAAAA,aAKS6B,GAAqBxB,EAAAA,EAAAA,IAAG,iGAKdR,EAAAA,EAAAA,IAKViC,GAAsBzB,EAAAA,EAAAA,IAAG,yGAIfR,EAAAA,EAAAA,I,yHCpIVkC,EAAyB,WACpC,IAAMC,EAAMC,EAAAA,SAOZ,OALAA,EAAAA,WAAgB,WACVD,EAAIE,SACNF,EAAIE,QAAQC,gBAAe,KAE5B,IACIF,EAAAA,cAACtC,EAAe,CAACqC,IAAKA,K,uTCF/B,IAAMI,GAAmB,SAACC,IAKxBC,EAAAA,GAAAA,GAAsB,CACpBC,MAAO,gBACPC,QAAOC,GAAA,CACLC,KAAM,OACNC,KAAM,SACNC,YAAa,QACbC,OAAQ,GACRC,kBAAcC,EACdC,KAAM,UACHX,GAELY,QAAQ,K,YCxBNC,GAA+B,CACnCC,GAAAA,EAAAA,cAAAA,QACAA,GAAAA,EAAAA,cAAAA,UAGWC,GAAgC,SAC3CC,GAEA,OAAOH,GAA6BI,SAASD,ICIlCE,GAET,SAAHtD,GAA0B,IAAAuD,EAApBC,EAAIxD,EAAJwD,KAAMC,EAAOzD,EAAPyD,QACHC,GAAkBC,EAAAA,EAAAA,WAAlBD,cACFE,GAAgBC,EAAAA,EAAAA,GAAiBL,EAAKM,WAAY,CACtDC,UAAU,EACVC,aAAcb,KAEVc,EAAwB,MAAbL,GAAkB,OAALL,EAAbK,EAAgB,SAAH,EAAbL,EAAoBW,MAC/BC,EACJX,EAAKY,aAAaC,QAAUC,EAAAA,GAAAA,aAE9B,IAAKH,IAAiBF,EACpB,OAAO,KAGT,IAAMM,EAAsB,SAACC,GAC3BA,EAAEC,iBFoDkC,SACtChB,EACAiB,IAEArC,EAAAA,GAAAA,GAAsB,CACpBC,MAAO,iBACPqC,SAAU,CACR/B,OAAQ,kBACRD,YAAa,SACbI,KAAM,SACN6B,SAAU,EACRC,EAAAA,GAAAA,MACGC,YAAYrB,GACZsB,mBAAkBvC,GAAC,GACfkC,EAAO,CACVM,MAAKxC,GAAA,CACHyC,WAAY,SACTP,EAAQM,OAEbE,kBAAmB,CACjBC,KAAMT,EAAQQ,kBAAkBC,KAChCF,WAAY,gBAGfG,UAGPpC,QAAQ,IE9ERqC,CAAyB5B,EAASD,IAGpC,OACExB,EAAAA,cAAC3B,EAAoB,KAClB8D,EACCnC,EAAAA,cAACsD,EAAAA,EAAQ,CAACZ,QAASlB,EAAM+B,GAAE,oBAAsB/B,EAAKgC,QACnD,SAAAtF,GAAA,IAAGuF,EAAcvF,EAAduF,eAAc,OAChBzD,EAAAA,cAACzB,EAAY,CAACmF,QAASnB,GACpBb,EACC+B,EACIE,GAAAA,EAAAA,eACAA,GAAAA,EAAAA,uBAMZ3D,EAAAA,cAACR,EAAG,KAAEyC,K,uOCZP,IAAM2B,GAAsD,SAAH5F,GAM1D,IALJwD,EAAIxD,EAAJwD,KACArD,EAAUH,EAAVG,WACA0F,EAAe7F,EAAf6F,gBACApC,EAAOzD,EAAPyD,QACAiC,EAAO1F,EAAP0F,QAEQI,EAAgBC,EAAAA,EAAAA,mBAAhBD,YAEApC,GAAkBC,EAAAA,EAAAA,WAAlBD,cAEFzD,EAAeuD,EAAK0B,kBAAkBC,OAASa,EAAAA,EAAAA,WAC/CC,EFhCqB,SAACzC,GAET,IAAA0C,EACnB,OAAQ,MAAJ1C,GAAY,OAAR0C,EAAJ1C,EAAMyC,aAAF,EAAJC,EAAcC,QAAS,EAClB3C,EAAKyC,OAEP,CAAClG,EAAAA,EAAAA,MAAAA,WAAAA,SE0BOqG,CAAc5C,GAQ7B,OACExB,EAAAA,cAACd,EAAe,CACd,aAAYjB,EAAeyD,EAAc2C,EAAAA,EAAAA,iBAAuBvD,EAChE,gBAAe7C,GAEdE,GAAc6B,EAAAA,cAACF,EAAY,MAC5BE,EAAAA,cAACsE,EAAAA,EAAa,KACZtE,EAAAA,cAACuE,EAAAA,GAAW/D,GAAA,CACVgE,SAAS,EACTC,GAAIjD,EAAKkD,IACThB,QAhBY,SAAClB,GHqBgB,IAAHmC,EGpBzB,MAAPjB,GAAAA,EAAUlC,EAAMgB,GHoBgBmC,EGnBR,CAAEC,OAAQf,KHsBpC1D,GAAiB,CACfM,UAAMK,EACNH,YAAa,iBACbiE,OALID,EAANC,SGnBEd,KAcMP,GAAE,cAAgB/B,EAAKgC,MACvB,4BAA2BhC,EAAKgC,MAChCqB,UAAW1G,EAAa,sBAAwB,KAC5C2G,EAAAA,EAAAA,IAAetD,EAAKM,aAExB9B,EAAAA,cAACZ,EAAO,KACNY,EAAAA,cAACV,EAAmB,KAClBU,EAAAA,cAACvB,EAAkB,CAACN,WAAYA,GAC9B6B,EAAAA,cAACpB,EAAmB,CAClBmG,MAAOhG,EAAAA,EACPiG,OAAQjG,EAAAA,EACRkF,OAAQA,GAEPhG,GACC+B,EAAAA,cAACiF,EAAAA,EAAgB,CACfC,OAAOC,EAAAA,EAAAA,GAAwBlB,GAC/Bc,MAAM,OACNC,OAAO,WAKfhF,EAAAA,cAACnC,EAAc,CACbM,WAAYA,EACZF,aAAcA,GAEbuD,EAAK4D,iBAIVpF,EAAAA,cAACsB,GAAU,CAACE,KAAMA,EAAMC,QAASA,S,gBC9E7C,SAbsD,SAAHzD,GAG7C,IAFJqH,EAAQrH,EAARqH,SAGQC,ECYqB,SAAHtH,GAKL,IAJrBuH,EAAQvH,EAARuH,SACAC,EAAUxH,EAAVwH,WACAC,EAAgBzH,EAAhByH,iBACA/B,EAAO1F,EAAP0F,QAEAgC,EAAoC3B,EAAAA,EAAAA,mBAA5B4B,EAAUD,EAAVC,WAAY7B,EAAW4B,EAAX5B,YACK8B,GAAYC,EAAAA,EAAAA,KAA7BhC,gBACApC,GAAYqE,EAAAA,EAAAA,KAAZrE,QAoCR,MAAO,CAAE6D,iBAlCgB,YLJI,SAAHtH,GAG1BmC,GAAiB,CACfM,KAAM,OACNmE,OAJI5G,EAAN4G,OAKEjE,YAAa,UKDboF,CAAgB,CAAEnB,OAAQgB,MAC1BD,EACE3F,EAAAA,cAAC1C,EAAkB,KAChBiI,EAASS,KAAI,SAACxE,GAAI,OACjBxB,EAAAA,cAAC4D,GAAiB,CAChBpC,KAAMA,EACNrD,WAAYqD,EAAKgC,QAAUgC,EAC3BS,IAAKzE,EAAKgC,MACVK,gBAAiB+B,EACjBnE,QAASA,EACTiC,QAASA,QAIf,CACEwC,gBACEX,EAASpB,QA7B4B,GA8BjC,MACA,UACNgC,MAAOnG,EAAAA,cAAChB,EAAK,KAAEyG,GACfW,yCAAyC,EACzCC,QAAS,SAACC,ILhBc,SAAHpI,GAGqC,IAFhE0G,EAAM1G,EAAN0G,OACA0B,EAASpI,EAAToI,UAEMC,GAAaC,EAAAA,GAAAA,GAAuBF,GAE1CnG,GAAiB,CACfM,KAAM,QACNE,YAAa4F,EACb3B,OAAAA,IKQM6B,CAAiB,CAAEH,UAAAA,EAAW1B,OAAQgB,MACtC9B,KAEF4C,cAAe,kBLPM/H,EKOiB,CAAEiG,OAAQgB,ULJtDzF,GAAiB,CACfM,KAAM,OACNE,YAAa,UACbiE,OALIjG,EAANiG,SAD8B,IAAHjG,GKQrBgI,iBAAkB,kBLEMC,EKFoB,CAAEhC,OAAQgB,ULK5DzF,GAAiB,CACfM,KAAM,OACNE,YAAa,UACbiE,OALIgC,EAANhC,SADiC,IAAHgC,GKDxBC,mBAAoBjH,EACpBkH,4BAA6BjH,MDnDNkH,C,oIAFtBC,CAAAhJ,EAAAiJ,KAEC3B,iBAER,OACEtF,EAAAA,cAACN,EAAe,CAACgE,QAAS4B,EAAkB,cAAY,mBACrDD,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-bottom: 0.75rem;\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    scrollbar-width: none;\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.TagAttributes.Damaged,\n  ProductTileModel.TagAttributes.Returned,\n];\n\nexport const isAvailableTagForShadesDrawer = (\n  tag: ProductTileModel.TagAttributes\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/ProductDetail/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","_templateObject","_taggedTemplateLiteralLoose","OffsetScrollDiv","_templateObject2","breakpoints","AdditionalInfo","_templateObject3","theme","_ref","isOutOfStock","_ref2","isSelected","css","TagOrWatchdogWrapper","_templateObject4","WatchdogLink","_templateObject5","ColorCircleWrapper","_templateObject6","_ref3","BorderedColorCircle","ColorCircle","_templateObject7","COLOR_CIRCLE_SIZE","Title","_templateObject8","VariantListItem","_templateObject9","Variant","_templateObject10","VariantListItemInfo","_templateObject11","Tag","_templateObject12","ShadeListButton","_templateObject13","StyledDrawerHeader","StyledDrawerContent","OffsetScroll","ref","React","current","scrollIntoView","trackDrawerEvent","args","dispatchTrackingEvent","event","element","_extends","mode","name","interaction","action","promo_labels","undefined","type","_clear","availableTagsForShadesDrawer","ProductTileModel","isAvailableTagForShadesDrawer","tag","includes","ItemStatus","_tagAttributes$","item","product","formatMessage","useIntl","tagAttributes","useTagAttributes","attributes","multiple","customFilter","tagLabel","label","showWatchdog","availability","state","AvailabilityState","handleWatchdogClick","e","preventDefault","variant","watchdog","products","ProductEventWither","withProduct","withPartialVariant","price","__typename","stockAvailability","code","build","trackDrawerWatchdogClick","Watchdog","id","webId","watchdogActive","onClick","watchdogMessages","ColorCirclePicker","getTimeFromInit","closeDrawer","DrawerContext","IStock","colors","_item$colors","length","getItemColors","messages","ErrorBoundary","VariantLink","replace","to","url","_ref5","timing","className","dataLabelsProp","width","height","IconRegularClose","color","getContrastingIconColor","additionalInfo","children","handleOpenDrawer","variants","selectedId","shadeDrawerTitle","_DrawerContext$useDra","openDrawer","getTime","useTrackingContext","useProductDetailContext","trackDrawerOpen","map","key","initialPosition","title","interceptBrowserBackButtonToCloseDrawer","onClose","closeType","eventLabel","resolveDrawerCloseType","trackDrawerClose","onResizeToTop","onResizeToMiddle","_ref4","headerCustomStyles","drawerContainerCustomStyles","useShadesDrawer","_objectWithoutPropertiesLoose","_excluded"],"sourceRoot":""}