{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Accordion/index.tsx"],"names":["spacingStyle","marginLeft","marginRight","HeaderWrapper","props","Div","restProps","Header","width","height","textAlign","paddingTop","paddingBottom","HeaderLayout","padding","compose","css","display","justifyContent","alignItems","Body","shouldTranslateHeight","position","overflow","property","duration","DURATION","willChange","Panel","div","right","bottom","left","IconWrap","Plus","transition","AccordionHeader","span","lineHeight","fontWeight","fontSize","marginBottom","Accordion","mounted","state","componentWillReceiveProps","nextProps","isOpen","this","setState","shouldComponentUpdate","nextState","header","onToggle","children","componentDidMount","componentWillUnmount","updateOffsetHeight","ref","requestAnimationFrame","offsetHeight","Math","abs","render","borderWidth","noBorder","borderBottom","style","color","monochrome","black","onClick","disabled","appearance","Full","Bare","id","className","extraPadding","cursor","mediumGrey","upperCaseHeading","textTransform","headerFontSize","transform","isCompact","iconWidth","ToggleableField"],"mappings":"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","file":"assets/7.chunk.5da1ccc81ff8bd81d858.js","sourcesContent":["import React, { Component } from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { Plus24x24 } from 'Shared/Icons/Plus';\r\nimport * as style from 'Shared/Style';\r\nimport Button, { Appearance as ButtonAppearance } from 'Shared/Button';\r\n\r\nconst spacingStyle = {\r\n  // When the accordion is stretched to full viewport width we want\r\n  // to narrows the content like with page components\r\n  marginLeft: 'auto',\r\n  marginRight: 'auto',\r\n};\r\n\r\ntype HeaderWrapperType = React.HTMLAttributes<HTMLDivElement> & {\r\n  \r\n};\r\nconst HeaderWrapper: React.StatelessComponent<HeaderWrapperType> = props => {\r\n  const { ...restProps } = props;\r\n  return (\r\n    <styled.Div\r\n      {...restProps}\r\n    />\r\n  );\r\n};\r\n\r\nconst Header = styled(Button, {\r\n  width: '100%',\r\n  height: '100%',\r\n  textAlign: 'left',\r\n  paddingTop: 0,\r\n  paddingBottom: 0\r\n});\r\n\r\ntype HeaderLayoutPropType = React.HTMLAttributes<HTMLDivElement> &\r\n  StyledProps & {\r\n    padding: boolean;\r\n  };\r\n\r\nconst HeaderLayout = styled((props: HeaderLayoutPropType) => {\r\n  const { padding, compose, ...restProps } = props;\r\n  return (\r\n    <styled.Div\r\n      {...restProps}\r\n      css={compose({\r\n        display: 'flex',\r\n        justifyContent: 'space-between',\r\n        alignItems: 'center',\r\n        ...spacingStyle,\r\n      })}\r\n    />\r\n  );\r\n});\r\n\r\nconst DURATION = 300;\r\n\r\ntype BodyStyleType = React.HTMLAttributes<HTMLDivElement> &\r\n  StyledProps & {\r\n    shouldTranslateHeight: boolean;\r\n  };\r\nconst Body = styled((props: BodyStyleType) => {\r\n  const { shouldTranslateHeight, compose, ...restProps } = props;\r\n  return (\r\n    <styled.Div\r\n      {...restProps}\r\n      css={compose({\r\n        position: 'relative',\r\n        overflow: 'hidden',\r\n        ...spacingStyle,\r\n        ...(shouldTranslateHeight && {\r\n          ...style.transition({\r\n            property: 'height',\r\n            duration: `${DURATION}ms`,\r\n            willChange: true,\r\n          }),\r\n        }),\r\n      })}\r\n    />\r\n  );\r\n});\r\n\r\nconst Panel = styled.div({\r\n  position: 'absolute',\r\n  right: 0,\r\n  bottom: 0,\r\n  left: 0,\r\n});\r\n\r\nconst IconWrap = styled.div({\r\n  display: 'inline-flex',\r\n})\r\n\r\nconst Plus = styled(Plus24x24, {\r\n  transition: {\r\n    property: 'transform',\r\n    duration: 300,\r\n  },\r\n});\r\n\r\nexport const AccordionHeader = styled.span({\r\n  lineHeight: '130%',\r\n  fontWeight: 500,\r\n  fontSize: 20,\r\n  marginBottom: 0,\r\n  display: 'inline-block'\r\n});\r\n\r\ntype StateType = {\r\n  height?: number;\r\n  shouldTranslateHeight?: boolean;\r\n};\r\n\r\ntype PropType = {\r\n  header: string | React.ReactNode;\r\n  onToggle: () => void;\r\n  isOpen?: boolean;\r\n  className?: string;\r\n  hasLinks?: boolean;\r\n  extraPadding?: boolean;\r\n  noBorder?: boolean;\r\n  children?: string | React.ReactNode;\r\n  upperCaseHeading?: boolean;\r\n  headerFontSize?: string;\r\n  iconWidth?: string;\r\n  isCompact?: boolean;\r\n  borderWidth?: number; \r\n  fontWeight?: number;\r\n  disabled?: boolean;\r\n /*  css?: StyledDecorator | StyleOrStyleArray<Style>; */\r\n};\r\n\r\nconst Accordion = styled(\r\n  class AccordionClass extends Component<PropType & StyledProps, StateType> {\r\n    mounted = false;\r\n    state = {\r\n      height: 0,\r\n      shouldTranslateHeight: true,\r\n    };\r\n    componentWillReceiveProps(nextProps: PropType) {\r\n      if (nextProps.isOpen !== this.props.isOpen) {\r\n        this.setState({ shouldTranslateHeight: true });\r\n      } else {\r\n        this.setState({ shouldTranslateHeight: false });\r\n      }\r\n    }\r\n    shouldComponentUpdate(nextProps: PropType, nextState: StateType) {\r\n      return (\r\n        this.props.isOpen !== nextProps.isOpen ||\r\n        this.props.header !== nextProps.header ||\r\n        this.props.onToggle !== nextProps.onToggle ||\r\n        this.props.children !== nextProps.children ||\r\n        this.state.height !== nextState.height\r\n      );\r\n    }\r\n    componentDidMount() {\r\n      this.mounted = true;\r\n    }\r\n    componentWillUnmount() {\r\n      this.mounted = false;\r\n    }\r\n    updateOffsetHeight(ref: HTMLElement) {\r\n      if (ref) {\r\n        // ref to prevent browser freeze\r\n        requestAnimationFrame(() => {\r\n          const height = ref.offsetHeight;\r\n          if (this.mounted && Math.abs(this.state.height - height) > 2) {\r\n            this.setState({ height });\r\n          }\r\n        });\r\n      }\r\n    }\r\n    render() {\r\n      const { shouldTranslateHeight, height } = this.state;\r\n      const { borderWidth = 1 } = this.props;\r\n      return (\r\n        <styled.Div \r\n          css={this.props.compose({\r\n            ...(!this.props.noBorder && {\r\n              borderBottom: {\r\n                style: 'solid',\r\n                width: borderWidth + 'px',\r\n                color: style.colors.monochrome.black,\r\n              },\r\n              marginBottom: '16px',\r\n              paddingBottom: '16px',\r\n            }),\r\n          /* ...this.props.compose(), */\r\n          })}\r\n          >\r\n          <HeaderWrapper>\r\n            <Header\r\n              onClick={() => !this.props.disabled && this.props.onToggle()}\r\n              appearance={[ButtonAppearance.Full, ButtonAppearance.Bare]}\r\n              id={this.props.className}\r\n              className={this.props.isOpen && this.props.className === \"size-guide-button-js\" ? \"open\" : \"\"}       \r\n            >\r\n              <HeaderLayout padding={this.props.extraPadding} css={{...(this.props.disabled && { cursor: 'default'})}}>\r\n                {typeof this.props.header === 'string' ? (\r\n                  <AccordionHeader css={{...(this.props.disabled && { color: style.colors.monochrome.mediumGrey}), ...(this.props.upperCaseHeading && { textTransform: 'uppercase'}), ...(this.props.fontWeight && { fontWeight: this.props.fontWeight}), ...(this.props.headerFontSize && { fontSize: this.props.headerFontSize, lineHeight: '100%'})}}>{this.props.header}</AccordionHeader>\r\n                ) : (\r\n                  this.props.header\r\n                )}\r\n                {!this.props.disabled && \r\n                 <IconWrap>\r\n                  <Plus css={{\r\n                      transform: this.props.isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\r\n                      width: this.props.isCompact ? '16px' : '24px',\r\n                      ...(this.props.iconWidth && {\r\n                        width: this.props.iconWidth\r\n                      })\r\n                    }} />\r\n                  </IconWrap> }\r\n              </HeaderLayout>\r\n            </Header>\r\n          </HeaderWrapper>\r\n          <Body\r\n            shouldTranslateHeight={shouldTranslateHeight}\r\n            css={{ height: this.props.isOpen && height ? `${height}px` : '0px' }}\r\n          >\r\n            <Panel ref={ref => this.updateOffsetHeight(ref)}>{this.props.children}</Panel>\r\n          </Body>\r\n        </styled.Div>\r\n      );\r\n    }\r\n  },\r\n);\r\n\r\nexport default Accordion;\r\n\r\nexport const ToggleableField = styled(Accordion, {\r\n\r\n});\r\n"],"sourceRoot":""}