{"version":3,"sources":["components/Corporate/CostAndFees/StyledCostAndFees.ts","components/Corporate/CostAndFees/helpers.ts","components/Corporate/CostAndFees/ContentTabs.tsx","components/Corporate/CostAndFees/index.tsx"],"names":["SectionTitle","styled","h2","heading_xl","heading_l","heading_m","heading_s","heading_xs","SectionDescription","div","RichTextStyle","text_l","theme","spacing","mt","Nav","nav","ListWrapper","hideOnPrint","Tablist","animated","ul","listReset","TabItem","li","ml","TabButton","button","buttonReset","py","color","safeFocusRemoval","focusOutline","active","css","NavButton","LeftNavButton","cssInlineSvg","RightNavButton","ContentTab","showOnPrint","ContentTabPrintTitle","p","FeeWrapper","mq","FeeTitle","h3","FeeDescription","text_s","TextWrapper","CostWrapper","Cost","h4","CostModifier","EditorDiv","Section","article","validCostCondition","title","value","validTab","costConditions","length","trans","x","getOffsetForCurrentTab","tabElems","containerWidth","currentStepIndex","limits","xOffset","i","current","elem","style","currentStyle","window","getComputedStyle","width","offsetWidth","parseInt","marginLeft","mr","marginRight","Math","max","min","getStepElementsChanged","stepElems","prevStepElems","isMobSafari","canUseDOM","userAgent","navigator","match","ContentTabs","tabs","currentTabIndex","map","tab","className","key","id","role","aria-labelledby","description","cost","costModifier","hasCost","field","formatCostString","Boolean","hasWindow","Hammer","require","ComponentWrapper","compose","withEditModeNotice","EditorText","withEditMode","editMode","datasource","fields","data","rendering","params","headingLevel","useTranslation","t","heading","filter","isComponentValid","containerRef","useRef","listRef","hammerRef","tabElementsRef","createRef","useState","setCurrentTabIndex","windowWidth","useWindowSize","setContainerWidth","listWidth","setListWidth","listOffsetX","setListOffsetX","dragOffsetX","setDragOffsetX","leftVisible","setLeftVisible","rightVisible","setRightVisible","visibleSize","setVisibleSize","panningActive","setPanningActive","panningRequired","setPanningRequired","useSpring","config","mass","tension","friction","listSpring","setListSpring","prevActiveTabIndex","usePrevious","stepElemsChanged","useEffect","cw","lw","deltaX","panEnd","setImmediate","onHammer","e","type","isFinal","preventDefault","on","off","lx","dx","visibleLeft","visibleRight","containerRect","getBoundingClientRect","rect","left","right","noticeEnabled","noticeLevel","noticeMessage","as","disabled","aria-hidden","tabIndex","aria-label","onClick","ref","transform","interpolate","aria-controls","aria-selected"],"mappings":"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","file":"static/js/CostAndFees.8b9883ae.chunk.js","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { animated } from 'react-spring';\r\n\r\nimport {\r\n  buttonReset,\r\n  listReset,\r\n  heading_xl,\r\n  heading_l,\r\n  heading_m,\r\n  heading_s,\r\n  heading_xs,\r\n  text_l,\r\n  safeFocusRemoval,\r\n  focusOutline,\r\n  color,\r\n  text_s,\r\n  mq,\r\n  showOnPrint,\r\n  hideOnPrint\r\n} from '_utils/styles';\r\nimport { cssInlineSvg } from '_utils/styles/svg';\r\nimport { spacing } from '_utils/props';\r\n\r\nimport { RichTextStyle } from '_components/Corporate/ContentRichText/StyledContentRichText';\r\n\r\nexport const SectionTitle = styled.h2`\r\n  margin: 0;\r\n\r\n  h2& {\r\n    ${heading_xl}\r\n  }\r\n\r\n  h3& {\r\n    ${heading_l}\r\n  }\r\n\r\n  h4& {\r\n    ${heading_m}\r\n  }\r\n\r\n  h5& {\r\n    ${heading_s}\r\n  }\r\n\r\n  h6& {\r\n    ${heading_xs}\r\n  }\r\n`;\r\n\r\nexport const SectionDescription = styled.div`\r\n  ${RichTextStyle};\r\n  ${text_l}\r\n  margin: 0;\r\n  ${({ theme }) => spacing({ theme, mt: 3 })}\r\n`;\r\n\r\nexport const Nav = styled.nav`\r\n  position: relative;\r\n`;\r\n\r\nexport const ListWrapper = styled.div`\r\n  padding: 6px; // for focus state\r\n  position: relative;\r\n  overflow: hidden;\r\n  height: 64px;\r\n  ${hideOnPrint}\r\n`;\r\n\r\nexport const Tablist = styled(animated.ul)`\r\n  ${listReset}\r\n  display: inline-block;\r\n  position: absolute;\r\n  height: 100%;\r\n  left: 4px;\r\n  top: 4px;\r\n  white-space: nowrap;\r\n  min-width: 100%;\r\n\r\n  cursor: grab;\r\n\r\n  &:active {\r\n    cursor: grabbing;\r\n  }\r\n`;\r\n\r\nexport const TabItem = styled.li`\r\n  display: inline-block;\r\n  height: 100%;\r\n\r\n  & + & {\r\n    ${({ theme }) => spacing({ theme, ml: 3 })}\r\n  }\r\n`;\r\n\r\nexport const TabButton = styled.button`\r\n  ${buttonReset}\r\n  ${heading_s}\r\n  ${({ theme }) => spacing({ theme, py: 2 })}\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    width: 100%;\r\n    height: 3px;\r\n    background-color: ${color('all.green')};\r\n    transform: scaleY(0);\r\n    transform-origin: center bottom;\r\n    opacity: 0;\r\n    transition: 400ms opacity, 400ms transform;\r\n  }\r\n\r\n  &:focus {\r\n    ${safeFocusRemoval}\r\n    ${focusOutline}\r\n  }\r\n\r\n\r\n  ${({ active }) => {\r\n    if (active) {\r\n      return css`\r\n        &:after {\r\n          transform: scaleY(1);\r\n          opacity: 1;\r\n        }\r\n      `;\r\n    }\r\n\r\n    return css`\r\n      font-weight: normal;\r\n\r\n      &:hover {\r\n        color: green;\r\n      }\r\n    `;\r\n  }}\r\n\r\n  &[disabled] {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nconst NavButton = styled.button`\r\n  ${buttonReset}\r\n\r\n  ${({ active }) => {\r\n    if (!active) {\r\n      return css`\r\n        opacity: 0;\r\n        pointer-events: none;\r\n      `;\r\n    }\r\n\r\n    return null;\r\n  }}\r\n\r\n  width: 32px;\r\n  height: 32px;\r\n  background-color: #f0f1f2;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 5;\r\n  transition: opacity 200ms 0ms ease;\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n  }\r\n\r\n  &:focus {\r\n    ${safeFocusRemoval}\r\n    ${focusOutline}\r\n  }\r\n`;\r\n\r\nexport const LeftNavButton = styled(NavButton)`\r\n  left: 0;\r\n\r\n  &:before {\r\n    background-image: ${cssInlineSvg(\r\n      `<svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.07074 5.40962L6.07023 0.413154C6.14769 0.335102 6.23985 0.273149 6.34139 0.230872C6.44293 0.188595 6.55184 0.166829 6.66184 0.166829C6.77184 0.166829 6.88075 0.188595 6.98229 0.230872C7.08383 0.273149 7.17598 0.335102 7.25344 0.413154C7.33154 0.490569 7.39353 0.58267 7.43584 0.684148C7.47814 0.785625 7.49992 0.89447 7.49992 1.0044C7.49992 1.11433 7.47814 1.22318 7.43584 1.32466C7.39353 1.42613 7.33154 1.51824 7.25344 1.59565C5.75315 3.01073 4.2883 4.46404 2.91637 6.00428L7.25344 10.4061C7.41035 10.5629 7.4985 10.7756 7.4985 10.9973C7.4985 11.2191 7.41035 11.4318 7.25344 11.5886C7.09654 11.7454 6.88373 11.8335 6.66184 11.8335C6.55197 11.8335 6.44317 11.8119 6.34166 11.7698C6.24015 11.7278 6.14792 11.6662 6.07023 11.5886L1.07074 6.59212C0.99488 6.51292 0.935416 6.41954 0.895758 6.31732C0.812418 6.11457 0.812418 5.88717 0.895758 5.68443C0.935416 5.58221 0.99488 5.48882 1.07074 5.40962Z\" fill=\"#188838\" /></svg>`\r\n    )};\r\n  }\r\n`;\r\nexport const RightNavButton = styled(NavButton)`\r\n  right: 0;\r\n\r\n  &:before {\r\n    background-image: ${cssInlineSvg(\r\n      `<svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.92926 6.59038L1.92977 11.5868C1.85231 11.6649 1.76015 11.7269 1.65861 11.7691C1.55707 11.8114 1.44816 11.8332 1.33816 11.8332C1.22816 11.8332 1.11925 11.8114 1.01771 11.7691C0.916175 11.7269 0.824017 11.6649 0.746556 11.5868C0.668457 11.5094 0.606469 11.4173 0.564166 11.3159C0.521863 11.2144 0.500082 11.1055 0.500082 10.9956C0.500082 10.8857 0.521863 10.7768 0.564166 10.6753C0.606469 10.5739 0.668458 10.4818 0.746556 10.4044C2.24685 8.98927 3.7117 7.53596 5.08363 5.99572L0.746557 1.59391C0.589653 1.4371 0.501505 1.22442 0.501505 1.00266C0.501505 0.780895 0.589653 0.568216 0.746557 0.411407C0.90346 0.254598 1.11627 0.166504 1.33816 0.166504C1.44803 0.166504 1.55683 0.188132 1.65834 0.230152C1.75985 0.272173 1.85208 0.333763 1.92977 0.411407L6.92926 5.40788C7.00512 5.48708 7.06458 5.58046 7.10424 5.68268C7.18758 5.88543 7.18758 6.11283 7.10424 6.31557C7.06458 6.41779 7.00512 6.51118 6.92926 6.59038Z\" fill=\"#188838\" /></svg>`\r\n    )};\r\n  }\r\n`;\r\n\r\nexport const ContentTab = styled.div`\r\n  @media print {\r\n    margin-top: 24px;\r\n  }\r\n  &.is-hidden {\r\n    display: none;\r\n    ${showOnPrint}\r\n  }\r\n`;\r\n\r\nexport const ContentTabPrintTitle = styled.p`\r\n  display: none;\r\n\r\n  ${heading_l}\r\n\r\n  ${showOnPrint}\r\n`;\r\n\r\nexport const FeeWrapper = styled.div`\r\n  ${({ theme }) => spacing({ theme, py: 3 })}\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  &:last-of-type {\r\n    padding-bottom: 0;\r\n  }\r\n\r\n  ${mq('sm')} {\r\n    flex-direction: row;\r\n  }\r\n\r\n  & + & {\r\n    border-top: 1px dashed ${color('all.deepBlueTint15')};\r\n  }\r\n`;\r\n\r\nexport const FeeTitle = styled.h3`\r\n  ${heading_m}\r\n  margin: 0;\r\n`;\r\n\r\nexport const FeeDescription = styled.p`\r\n  ${text_s};\r\n  color: ${color('all.deepBlueTint75')};\r\n  margin: 0;\r\n  ${({ theme }) => spacing({ theme, mt: 1 })}\r\n`;\r\n\r\nexport const TextWrapper = styled.div`\r\n  flex-grow: 1;\r\n`;\r\n\r\nexport const CostWrapper = styled.div`\r\n  ${mq('sm')} {\r\n    ${({ theme }) => spacing({ theme, ml: 5 })}\r\n    max-width: 200px;\r\n    text-align: right;\r\n  }\r\n`;\r\n\r\nexport const Cost = styled.h4`\r\n  ${heading_m}\r\n  margin: 0;\r\n  ${({ theme }) => spacing({ theme, mt: 2 })}\r\n\r\n  ${mq('sm')} {\r\n    margin: 0;\r\n  }\r\n`;\r\n\r\nexport const CostModifier = styled.p`\r\n  ${text_s};\r\n  color: ${color('all.deepBlueTint75')};\r\n  margin: 0;\r\n  ${({ theme }) => spacing({ theme, mt: 1 })}\r\n`;\r\n\r\nexport const EditorDiv = styled.div``;\r\n\r\nexport const Section = styled.article``;\r\n","import { canUseDOM } from 'exenv';\r\n\r\nexport const validCostCondition = ({ title }) => title?.value !== '';\r\n\r\nexport const validTab = ({ title, costConditions }) =>\r\n  title?.value !== '' && costConditions.length !== 0;\r\n\r\nexport const trans = (x) => `translate(${x}px)`;\r\n\r\nexport const getOffsetForCurrentTab = (tabElems, containerWidth, currentStepIndex, limits) => {\r\n  let xOffset = 0;\r\n\r\n  for (let i = 0; i < tabElems.current.length; i++) {\r\n    const elem = tabElems.current[i].current;\r\n    if (!elem) {\r\n      continue;\r\n    }\r\n\r\n    var style = elem.currentStyle || window.getComputedStyle(elem);\r\n    const width = elem.offsetWidth;\r\n\r\n    const ml = parseInt(style.marginLeft, 10) || 0;\r\n    const mr = parseInt(style.marginRight, 10) || 0;\r\n\r\n    if (i === currentStepIndex) {\r\n      // no offset for first tab\r\n      if (i === 0) {\r\n        break;\r\n      }\r\n\r\n      xOffset += ml + width / 2;\r\n      break;\r\n    } else {\r\n      xOffset += ml + width + mr;\r\n    }\r\n  }\r\n\r\n  return Math.max(limits.current.min, Math.min(limits.current.max, containerWidth / 2 - xOffset));\r\n};\r\n\r\nexport const getStepElementsChanged = (stepElems, prevStepElems) => {\r\n  // return true just at the point when the step elem references get populated\r\n  // need this hook to know when to update list posn on first *useful* render\r\n  // where items have size\r\n  return (\r\n    stepElems.length && stepElems[0] !== null && prevStepElems.length && prevStepElems[0] === null\r\n  );\r\n};\r\n\r\nexport const isMobSafari = () => {\r\n  if (!canUseDOM) {\r\n    return false; // SSR\r\n  }\r\n\r\n  const userAgent = window.navigator.userAgent;\r\n\r\n  return userAgent.match(/iPad/i) || userAgent.match(/iPhone/i);\r\n};\r\n","import React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { formatCostString } from '_utils/helpers/getCostEstimate';\r\n\r\nimport {\r\n  FeeWrapper,\r\n  FeeTitle,\r\n  FeeDescription,\r\n  TextWrapper,\r\n  CostWrapper,\r\n  Cost,\r\n  CostModifier,\r\n  ContentTab,\r\n  ContentTabPrintTitle\r\n} from './StyledCostAndFees';\r\n\r\nconst ContentTabs = ({ tabs, currentTabIndex }) => {\r\n  return tabs.map((tab, i) => {\r\n    return (\r\n      <ContentTab\r\n        className={i === currentTabIndex ? '' : 'is-hidden'}\r\n        key={`content-${tab.id}`}\r\n        id={`${tab.title.value}-${tab.id}-content`}\r\n        role=\"tabpanel\"\r\n        aria-labelledby={`${tab.title.value}-${tab.id}-tab`}\r\n      >\r\n        <ContentTabPrintTitle>{tab.title.value}</ContentTabPrintTitle>\r\n\r\n        {tab.costConditions.map(({ title, description, cost, costModifier, id }) => {\r\n          const hasCost = cost?.value;\r\n\r\n          return (\r\n            <FeeWrapper key={id}>\r\n              <TextWrapper>\r\n                <FeeTitle>\r\n                  <Text field={title} />\r\n                </FeeTitle>\r\n\r\n                {description?.value && (\r\n                  <FeeDescription>\r\n                    <Text field={description} />\r\n                  </FeeDescription>\r\n                )}\r\n              </TextWrapper>\r\n              <CostWrapper>\r\n                {hasCost && <Cost>{formatCostString(cost.value)}</Cost>}\r\n\r\n                {Boolean(hasCost && costModifier?.value) && (\r\n                  <CostModifier>\r\n                    <Text field={costModifier} />\r\n                  </CostModifier>\r\n                )}\r\n              </CostWrapper>\r\n            </FeeWrapper>\r\n          );\r\n        })}\r\n      </ContentTab>\r\n    );\r\n  });\r\n};\r\n\r\nexport default ContentTabs;\r\n","import React, { useState, createRef, useEffect, useRef } from 'react';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose } from 'ramda';\r\nimport { useSpring } from 'react-spring';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { withEditMode, withEditModeNotice } from '_containers/BaseComponent';\r\n\r\nimport { usePrevious, useWindowSize } from '_utils/hooks';\r\n\r\nimport { CostAndFeesProps } from './definitions';\r\n\r\nimport {\r\n  validCostCondition,\r\n  validTab,\r\n  trans,\r\n  getOffsetForCurrentTab,\r\n  getStepElementsChanged,\r\n  isMobSafari\r\n} from './helpers';\r\n\r\nimport {\r\n  Nav,\r\n  ListWrapper,\r\n  Tablist,\r\n  TabItem,\r\n  TabButton,\r\n  SectionTitle,\r\n  SectionDescription,\r\n  LeftNavButton,\r\n  RightNavButton,\r\n  EditorDiv,\r\n  Section\r\n} from './StyledCostAndFees';\r\n\r\nimport ContentTabs from './ContentTabs';\r\n\r\nconst hasWindow = typeof window !== 'undefined';\r\n\r\nlet Hammer = null;\r\n\r\nif (hasWindow) {\r\n  Hammer = require('hammerjs');\r\n}\r\n\r\nconst ComponentWrapper = compose(withEditModeNotice)(Section);\r\nconst EditorText = compose(withEditModeNotice)(EditorDiv);\r\nconst listPadding = 12;\r\n\r\nconst CostAndFees: React.FC<CostAndFeesProps> = ({\r\n  editMode,\r\n  fields: {\r\n    data: { datasource }\r\n  },\r\n  rendering: {\r\n    params: { headingLevel = 'h2' }\r\n  }\r\n}) => {\r\n  const [t] = useTranslation();\r\n  let heading = datasource?.heading;\r\n  let description = datasource?.description;\r\n  let tabs = (datasource?.tabs || [])\r\n    .map((tab) => {\r\n      return {\r\n        id: tab.id,\r\n        title: tab.title,\r\n        costConditions: tab.costConditions.filter(validCostCondition)\r\n      };\r\n    })\r\n    .filter(validTab);\r\n\r\n  const isComponentValid = tabs.length > 0;\r\n\r\n  // Refs\r\n  const containerRef = useRef<HTMLUListElement>(null);\r\n  const listRef = useRef<HTMLUListElement>(null);\r\n  const limits = useRef<any>();\r\n  const hammerRef = useRef<any>();\r\n  const tabElementsRef = useRef(tabs.map(() => createRef()));\r\n\r\n  // State\r\n  const [currentTabIndex, setCurrentTabIndex] = useState(0);\r\n\r\n  const windowWidth = useWindowSize();\r\n\r\n  const [containerWidth, setContainerWidth] = useState(0);\r\n  const [listWidth, setListWidth] = useState(0);\r\n  const [listOffsetX, setListOffsetX] = useState(0);\r\n  const [dragOffsetX, setDragOffsetX] = useState(0);\r\n  const [leftVisible, setLeftVisible] = useState(false);\r\n  const [rightVisible, setRightVisible] = useState(false);\r\n  const [visibleSize, setVisibleSize] = useState(0);\r\n  const [panningActive, setPanningActive] = useState(false);\r\n  const [panningRequired, setPanningRequired] = useState(false);\r\n\r\n  const [listSpring, setListSpring] = useSpring(() => ({\r\n    x: 0,\r\n    config: { mass: 1, tension: 180, friction: 20 }\r\n  }));\r\n\r\n  const prevActiveTabIndex = usePrevious(currentTabIndex);\r\n\r\n  const stepElems = tabElementsRef.current\r\n    ? tabElementsRef.current.map(({ current }) => current)\r\n    : [];\r\n\r\n  const prevStepElems = usePrevious(stepElems);\r\n\r\n  const stepElemsChanged = getStepElementsChanged(stepElems, prevStepElems);\r\n\r\n  // container/list width\r\n  useEffect(() => {\r\n    if (!isComponentValid) {\r\n      return;\r\n    }\r\n\r\n    const cw = containerRef.current.offsetWidth - listPadding;\r\n    const lw = listRef.current.offsetWidth;\r\n\r\n    setContainerWidth(cw);\r\n    setListWidth(lw);\r\n\r\n    if (cw >= lw) {\r\n      limits.current = {\r\n        min: cw / 2 - lw / 2,\r\n        max: cw / 2 - lw / 2\r\n      };\r\n    } else {\r\n      limits.current = {\r\n        min: cw - lw,\r\n        max: 0\r\n      };\r\n    }\r\n  }, [windowWidth, currentTabIndex, isComponentValid]); // currentTabIndex because bold style on active causes list to change size\r\n\r\n  // init hammer handlers\r\n  useEffect(() => {\r\n    if (Hammer === null || listRef.current === null) {\r\n      return;\r\n    }\r\n\r\n    hammerRef.current = new Hammer(listRef.current, {});\r\n\r\n    let deltaX;\r\n\r\n    const panEnd = () => {\r\n      const { min, max } = limits.current;\r\n      setListOffsetX((x) => {\r\n        if (x + deltaX < min) {\r\n          return min;\r\n        } else if (x + deltaX > max) {\r\n          return max;\r\n        } else {\r\n          return x + deltaX;\r\n        }\r\n      });\r\n      setDragOffsetX(0);\r\n      setImmediate(() => {\r\n        setPanningActive(false);\r\n      });\r\n    };\r\n\r\n    const onHammer = (e) => {\r\n      switch (e.type) {\r\n        case 'panstart':\r\n          setPanningActive(true);\r\n          break;\r\n        case 'pan': {\r\n          if (isMobSafari && e.isFinal) {\r\n            // fixes issue where user drags outside list container and panend is never fired\r\n            panEnd();\r\n          } else {\r\n            deltaX = e.deltaX;\r\n            setDragOffsetX(deltaX);\r\n            e.preventDefault();\r\n          }\r\n          break;\r\n        }\r\n        case 'panend': {\r\n          panEnd();\r\n        }\r\n      }\r\n    };\r\n\r\n    hammerRef.current.on('panstart pan panend', onHammer);\r\n\r\n    return () => {\r\n      hammerRef.current.off('panstart pan panend', onHammer);\r\n    };\r\n  }, []);\r\n\r\n  // update list position spring\r\n  useEffect(() => {\r\n    if (!isComponentValid) {\r\n      return;\r\n    }\r\n\r\n    let lx = listOffsetX;\r\n    let dx = dragOffsetX;\r\n\r\n    if (!panningRequired) {\r\n      lx = 0;\r\n      dx = 0;\r\n    }\r\n\r\n    if ((panningRequired && prevActiveTabIndex !== currentTabIndex) || stepElemsChanged) {\r\n      lx = getOffsetForCurrentTab(tabElementsRef, containerWidth, currentTabIndex, limits);\r\n      dx = 0;\r\n    }\r\n\r\n    let visibleLeft = 999999;\r\n    let visibleRight = -999999;\r\n\r\n    if (tabElementsRef.current && containerRef.current) {\r\n      const containerRect = containerRef.current.getBoundingClientRect();\r\n      // measure the width of visible step buttons as the basis of how much to scroll\r\n      for (let i = 0; i < tabElementsRef.current.length; i++) {\r\n        const el = tabElementsRef.current[i].current;\r\n        const rect = el.getBoundingClientRect();\r\n        const inBounds = rect.left >= containerRect.left && rect.right <= containerRect.right;\r\n\r\n        if (inBounds) {\r\n          visibleLeft = Math.min(visibleLeft, rect.left);\r\n          visibleRight = Math.max(visibleRight, rect.right);\r\n        }\r\n      }\r\n    }\r\n\r\n    if (lx < limits.current.min) {\r\n      lx = limits.current.min;\r\n    } else if (listOffsetX > limits.current.max) {\r\n      lx = limits.current.max;\r\n    }\r\n\r\n    if (listOffsetX !== lx) {\r\n      setListOffsetX(lx);\r\n    }\r\n\r\n    if (dragOffsetX !== dx) {\r\n      setDragOffsetX(dx);\r\n    }\r\n\r\n    // computed posn\r\n    let x = lx + dx;\r\n\r\n    setLeftVisible(x !== 0);\r\n    setRightVisible(x + listWidth > containerWidth + listPadding);\r\n\r\n    setVisibleSize(Math.max(100, visibleRight - visibleLeft));\r\n    setPanningRequired(listWidth > containerWidth + listPadding);\r\n\r\n    // update spring\r\n    setListSpring({ x });\r\n  }, [\r\n    listOffsetX,\r\n    dragOffsetX,\r\n    listWidth,\r\n    setListSpring,\r\n    containerWidth,\r\n    prevActiveTabIndex,\r\n    currentTabIndex,\r\n    stepElemsChanged,\r\n    isComponentValid,\r\n    panningRequired\r\n  ]);\r\n\r\n  if (datasource === null) {\r\n    if (editMode) {\r\n      return (\r\n        <EditorText\r\n          noticeEnabled\r\n          noticeLevel=\"warning\"\r\n          noticeMessage={`This component needs a datasource to render.`}\r\n        />\r\n      );\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  if (tabs.length === 0) {\r\n    if (editMode) {\r\n      return (\r\n        <EditorText\r\n          noticeEnabled\r\n          noticeLevel=\"warning\"\r\n          noticeMessage={`No valid tabs available for render. Please set at least 1 Cost and Fee.`}\r\n        />\r\n      );\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <ComponentWrapper\r\n      noticeEnabled={editMode}\r\n      noticeLevel=\"info\"\r\n      noticeMessage={`To configure this component, please use the 'Edit related items' screen.`}\r\n    >\r\n      {heading?.value && (\r\n        <SectionTitle as={headingLevel}>\r\n          <Text field={heading} />\r\n        </SectionTitle>\r\n      )}\r\n      {description?.value && (\r\n        <SectionDescription>\r\n          <RichText field={description} />\r\n        </SectionDescription>\r\n      )}\r\n      <Nav>\r\n        <LeftNavButton\r\n          disabled={panningActive}\r\n          active={leftVisible}\r\n          aria-hidden={!leftVisible}\r\n          tabIndex={leftVisible ? null : -1}\r\n          type=\"button\"\r\n          title={t('accessibility-previous')}\r\n          aria-label={t('accessibility-previous')}\r\n          onClick={() => {\r\n            setListOffsetX(Math.min(limits.current.max, listOffsetX + visibleSize));\r\n          }}\r\n        />\r\n\r\n        <ListWrapper ref={containerRef}>\r\n          <Tablist\r\n            role=\"tablist\"\r\n            ref={listRef}\r\n            style={{ transform: listSpring.x.interpolate(trans) }}\r\n          >\r\n            {tabs.map((tab, i) => {\r\n              const active = currentTabIndex === i;\r\n\r\n              return (\r\n                <TabItem key={`tab-${tab.id}`} role=\"presentation\" ref={tabElementsRef.current[i]}>\r\n                  <TabButton\r\n                    disabled={panningActive}\r\n                    type=\"button\"\r\n                    id={`${tab.title.value}-${tab.id}-tab`}\r\n                    onClick={(e) => {\r\n                      setCurrentTabIndex(i);\r\n                    }}\r\n                    role=\"tab\"\r\n                    aria-controls={`${tab.title.value}-${tab.id}-content`}\r\n                    aria-selected={active}\r\n                    active={active}\r\n                    title={`${t('accessible-tab-label')} ${tab.title.value}`}\r\n                    aria-label={`${t('accessible-tab-label')} ${tab.title.value}`}\r\n                  >\r\n                    {tab.title.value}\r\n                  </TabButton>\r\n                </TabItem>\r\n              );\r\n            })}\r\n          </Tablist>\r\n        </ListWrapper>\r\n        <RightNavButton\r\n          disabled={panningActive}\r\n          active={rightVisible}\r\n          aria-hidden={!rightVisible}\r\n          tabIndex={rightVisible ? null : -1}\r\n          type=\"button\"\r\n          title={t('accessibility-next')}\r\n          aria-label={t('accessibility-next')}\r\n          onClick={() => {\r\n            setListOffsetX(Math.max(limits.current.min, listOffsetX - visibleSize));\r\n          }}\r\n        />\r\n      </Nav>\r\n      <ContentTabs tabs={tabs} currentTabIndex={currentTabIndex} />\r\n    </ComponentWrapper>\r\n  );\r\n};\r\n\r\nexport default compose(withEditMode)(CostAndFees);\r\n"],"sourceRoot":""}