{"version":3,"sources":["webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/img/help/search/search2.png","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/search/search3.png","webpack:///./src/img/help/search/search1.png","webpack:///./src/pages/help/how-does-the-search-work.js","webpack:///./src/img/help/search/search4.png","webpack:///./src/img/help/search/search5.png","webpack:///./src/img/help/search/search6.png"],"names":["Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","module","exports","Container","Box","Close","span","ImageWrapped","img","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","src","imgStyle","imgModalStyle","alt","title","lazy","modal","onClick","loading","React","Component","related","link","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","search1","width","search2","search3","search4","search5","search6","section"],"mappings":"4JAGaA,EAAOC,IAAOC,IAAV,kEAAGD,CAAH,6CACL,SAACE,GAAD,OAAYA,EAAMC,gBAAkB,SAAW,gBAGvDC,IAAMC,SACI,SAACH,GAAD,OAAYA,EAAMC,gBAAkB,YAAc,oBAInDG,EAAWN,IAAOC,IAAV,sEAAGD,CAAH,kDCPfO,EAAY,SAACL,GACjB,IAAQM,EAA+BN,EAA/BM,UAAWL,EAAoBD,EAApBC,gBACnB,OACE,kBAAC,EAAD,CAAaM,UAAU,OAAOC,MAAOF,EAAWL,gBAAiBA,GAC/D,kBAAC,EAAD,CAAiBM,UAAU,YAAYC,MAAOF,GAC5C,kBAAC,IAAeN,MAMTK,MAOfA,EAAUI,aAAe,CACvBH,UAAW,KACXL,iBAAiB,I,qBCzBnBS,EAAOC,QAAU,IAA0B,uD,mFCIrCC,EAAYd,IAAOC,IAAV,6EAAGD,CAAH,gKAaTe,EAAMf,IAAOC,IAAV,uEAAGD,CAAH,4JAYHgB,EAAQhB,IAAOiB,KAAV,yEAAGjB,CAAH,kRAkBLkB,EAAelB,IAAOmB,IAAV,gFAAGnB,CAAH,6EASZoB,EAAQpB,IAAOmB,IAAV,yEAAGnB,CAAH,kGAFY,KAYjBqB,E,YACJ,WAAYnB,GAAQ,IAAD,SACjB,cAAMA,IAAN,MAeFoB,YAAc,SAACC,GACb,IAAQC,EAAc,EAAKC,MAAnBD,UAEc,KAAlBD,EAAMG,SAAkBF,GAC1B,EAAKG,cApBU,EAwBnBA,WAAa,WACX,EAAKC,SAAS,CAAEJ,WAAW,KAzBV,EA4BnBK,UAAY,WACNC,OAAOC,YA1CQ,KA2CjB,EAAKH,SAAS,CAAEJ,WAAW,KA3B7B,EAAKC,MAAQ,CACXD,WAAW,GAJI,E,4CAQnBQ,kBAAA,WACEC,SAASC,iBAAiB,UAAWC,KAAKb,aAAa,I,EAGzDc,qBAAA,WACEH,SAASI,oBAAoB,UAAWF,KAAKb,aAAa,I,EAqB5DgB,OAAA,WACE,IAAQd,EAAcW,KAAKV,MAAnBD,UACR,EAA2DW,KAAKjC,MAAxDqC,EAAR,EAAQA,IAAKC,EAAb,EAAaA,SAAUC,EAAvB,EAAuBA,cAAeC,EAAtC,EAAsCA,IAAKC,EAA3C,EAA2CA,MAAOC,EAAlD,EAAkDA,KAE5CC,EACJ,kBAAC/B,EAAD,CAAWgC,QAASX,KAAKR,YACvB,kBAACX,EAAD,CAAO8B,QAASX,KAAKR,YAArB,KACA,kBAACZ,EAAD,CAAK+B,QAASX,KAAKR,YACjB,kBAACT,EAAD,CACER,MAAO+B,EACPF,IAAKA,EACLG,IAAKA,EACLC,MAAOA,EACPI,QAASH,EAAO,OAAS,SAMjC,OACE,oCACE,kBAACxB,EAAD,CACEV,MAAO8B,EACPM,QAASX,KAAKN,UACdU,IAAKA,EACLG,IAAKA,EACLC,MAAOA,EACPI,QAASH,EAAO,OAAS,OAE1BpB,GAAaqB,I,GAhEGG,IAAMC,WAsEhB5B,MAWfA,EAAWV,aAAe,CACxBiC,MAAM,EACNJ,SAAU,KACVC,cAAe,O,qBCtJjB7B,EAAOC,QAAU,IAA0B,uD,qBCA3CD,EAAOC,QAAU,IAA0B,uD,kCCA3C,kOA+EMqC,EAAU,CACd,CACEC,KAAM,2BACNR,MAAO,qBACPS,YAAa,oFAEf,CACED,KAAM,oCACNR,MAAO,8BACPS,YAAa,uDAIJC,EAAc,CACzBC,UAAW,4BACXC,gBAAiB,0DACjBC,UAAW,mCAGPC,EAAUC,aAxFA,WACd,OACE,6BACE,kBAAC,IAAD,6BACA,gMAIA,kBAAC,IAAD,wCAEA,6RAKA,kBAAC,IAAD,CAAOnB,IAAKoB,IAASf,MAAI,EAACF,IAAI,2BAA2BC,MAAM,uBAE/D,gHACA,kBAAC,IAAD,CACEH,SAAU,CACRoB,MAAO,QAETrB,IAAKsB,IACLjB,MAAI,EACJF,IAAI,qCACJC,MAAM,+BAGR,8GACA,kBAAC,IAAD,CACEJ,IAAKuB,IACLlB,MAAI,EACJF,IAAI,8CACJC,MAAM,sCAGR,sJAIA,kBAAC,IAAD,CACEJ,IAAKwB,IACLnB,MAAI,EACJF,IAAI,uCACJC,MAAM,6BAGR,gIAIA,kBAAC,IAAD,CACEJ,IAAKyB,IACLpB,MAAI,EACJF,IAAI,+CACJC,MAAM,uCAGR,kHACA,kBAAC,IAAD,CACEJ,IAAK0B,IACLrB,MAAI,EACJF,IAAI,8CACJC,MAAM,0CA2BC,4BACb,kBAACc,EAAD,eAASP,QAASA,EAASgB,QAAQ,UAAUvB,MAAOU,EAAYC,WAAeD,M,qBCrGjFzC,EAAOC,QAAU,IAA0B,uD,qBCA3CD,EAAOC,QAAU,IAA0B,uD,qBCA3CD,EAAOC,QAAU,IAA0B","file":"component---src-pages-help-how-does-the-search-work-js-cfa2ee34d0aea688b392.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Card = styled.div`\n  margin: ${(props) => (props.setMarginBottom ? '2rem 0' : '2rem 0 3rem')};\n  border: none;\n\n  ${media.desktop} {\n    margin: ${(props) => (props.setMarginBottom ? '1.25rem 0' : '1.25rem 0 2rem')};\n  }\n`;\n\nexport const CardBody = styled.div`\n  box-shadow: 0px 0px 10px #00000029;\n  padding: 0;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImageModal from 'components/ui/image-modal';\nimport * as Styled from './styled';\n\nconst HelpImage = (props) => {\n  const { cardStyle, setMarginBottom } = props;\n  return (\n    <Styled.Card className=\"card\" style={cardStyle} setMarginBottom={setMarginBottom}>\n      <Styled.CardBody className=\"card-body\" style={cardStyle}>\n        <ImageModal {...props} />\n      </Styled.CardBody>\n    </Styled.Card>\n  );\n};\n\nexport default HelpImage;\n\nHelpImage.propTypes = {\n  cardStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  setMarginBottom: PropTypes.bool,\n};\n\nHelpImage.defaultProps = {\n  cardStyle: null,\n  setMarginBottom: false,\n};\n","module.exports = __webpack_public_path__ + \"static/search2-7b737d3b9046f135b4621c558789dafa.png\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n`;\n\nconst Box = styled.div`\n  background-color: transparent;\n  position: relative;\n  width: 95vw;\n  height: 95vh;\n  padding: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n`;\n\nconst Close = styled.span`\n  position: absolute;\n  font-size: 1.8rem;\n  right: 20px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 100px;\n  width: 40px;\n  height: 40px;\n  padding-bottom: 3px;\n  filter: drop-shadow(5px 1px 4px rgba(0, 0, 0, 0.2));\n  z-index: 10;\n`;\n\nconst ImageWrapped = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  margin: 0 auto;\n  border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Image = styled.img`\n  border: 1px solid #eaebec;\n  max-width: 100%;\n  height: auto;\n\n  @media (min-width: ${minWidthToShow}px) {\n    cursor: pointer;\n  }\n`;\n\nclass ImageModal extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n    };\n  }\n\n  componentDidMount() {\n    document.addEventListener('keydown', this.escFunction, false);\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener('keydown', this.escFunction, false);\n  }\n\n  escFunction = (event) => {\n    const { showModal } = this.state;\n\n    if (event.keyCode === 27 && showModal) {\n      this.closeModal();\n    }\n  };\n\n  closeModal = () => {\n    this.setState({ showModal: false });\n  };\n\n  openModal = () => {\n    if (window.innerWidth >= minWidthToShow) {\n      this.setState({ showModal: true });\n    }\n  };\n\n  render() {\n    const { showModal } = this.state;\n    const { src, imgStyle, imgModalStyle, alt, title, lazy } = this.props;\n\n    const modal = (\n      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <ImageWrapped\n            style={imgModalStyle}\n            src={src}\n            alt={alt}\n            title={title}\n            loading={lazy ? 'lazy' : null}\n          />\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Image\n          style={imgStyle}\n          onClick={this.openModal}\n          src={src}\n          alt={alt}\n          title={title}\n          loading={lazy ? 'lazy' : null}\n        />\n        {showModal && modal}\n      </>\n    );\n  }\n}\n\nexport default ImageModal;\n\nImageModal.propTypes = {\n  src: PropTypes.string.isRequired,\n  imgStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  imgModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  alt: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  lazy: PropTypes.bool,\n};\n\nImageModal.defaultProps = {\n  lazy: false,\n  imgStyle: null,\n  imgModalStyle: null,\n};\n","module.exports = __webpack_public_path__ + \"static/search3-fa51d953d75ecc42c3a9a55347b81438.png\";","module.exports = __webpack_public_path__ + \"static/search1-8b977ce9189b0268d548fed28796c4b5.png\";","import React from 'react';\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport search1 from 'img/help/search/search1.png';\nimport search2 from 'img/help/search/search2.png';\nimport search3 from 'img/help/search/search3.png';\nimport search4 from 'img/help/search/search4.png';\nimport search5 from 'img/help/search/search5.png';\nimport search6 from 'img/help/search/search6.png';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>Search - what is it?</SubTitle>\n      <p>\n        The Search helps you to find sessions under conditions that you can specify yourself. For\n        example you can limit session results to mobile users from one country.\n      </p>\n      <SubTitle>What does the Search look like?</SubTitle>\n\n      <p>\n        Search input is on top of the page and also is available through most of our application\n        pages (in few is hidden) and it shows results based on such page. For example if you search\n        on the dashboard then you can see dashboard tiles filtered by your terms.\n      </p>\n      <Image src={search1} lazy alt=\"LiveSession App - Search\" title=\"LiveSession Search\" />\n\n      <p>After clicking, we can choose from robust predefined filters grouped by use case.</p>\n      <Image\n        imgStyle={{\n          width: '100%',\n        }}\n        src={search2}\n        lazy\n        alt=\"LiveSession App - Search - Filters\"\n        title=\"LiveSession Search filters\"\n      />\n\n      <p>If you type on Search input, we&quot;ll match with available filters with that name.</p>\n      <Image\n        src={search3}\n        lazy\n        alt=\"LiveSession App - Search - Filters - Typing\"\n        title=\"LiveSession typing Search filters\"\n      />\n\n      <p>\n        As you can see, you can use multiple terms in one query. In that scenario all terms have to\n        be applied to find results.\n      </p>\n      <Image\n        src={search4}\n        lazy\n        alt=\"LiveSession App - Search - Term view\"\n        title=\"LiveSession Search terms\"\n      />\n\n      <p>\n        As we mentioned before, Search works based on context where it runs. We also applied two\n        filters.\n      </p>\n      <Image\n        src={search5}\n        lazy\n        alt=\"LiveSession App - Search - Dashboard - Terms\"\n        title=\"LiveSession Search dashboard terms\"\n      />\n\n      <p>If you do the same query but on Session Page then you can find matched up sessions.</p>\n      <Image\n        src={search6}\n        lazy\n        alt=\"LiveSession App - Search - Sessions - Terms\"\n        title=\"LiveSession Search sessions terms\"\n      />\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/what-is-a-session/',\n    title: 'What is a session?',\n    description: 'A session is a set of the user’s interactions with a website within a timeframe.',\n  },\n  {\n    link: '/help/how-does-the-timeline-work/',\n    title: 'How does the Timeline work?',\n    description: 'See how Timeline does looks like and how it works.',\n  },\n];\n\nexport const frontmatter = {\n  metaTitle: 'How does the Search work?',\n  metaDescription: 'Wondering about the usability of our Search? Read here.',\n  canonical: '/help/how-does-the-search-work/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n  <Wrapped related={related} section=\"Product\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n","module.exports = __webpack_public_path__ + \"static/search4-4c658aff746245cc991af168a44b9e1b.png\";","module.exports = __webpack_public_path__ + \"static/search5-32773222db9d737c5d6a6997e0469157.png\";","module.exports = __webpack_public_path__ + \"static/search6-e29e37d3c7066e47e239c9b380a82222.png\";"],"sourceRoot":""}