{"version":3,"sources":["webpack:///./src/js/components/react/Dropdown.js","webpack:///./src/js/modules/tabFacetedListing/components/Card.js","webpack:///./src/js/modules/tabFacetedListing/index.js"],"names":["Dropdown","label","placeholder","selectedOption","options","onChange","disabled","compareAttr","style","useState","open","toggle","cursor","setCursor","guid","useRef","uuidv4","listboxGuid","nativeEl","dropdownEl","triggerEl","listingEl","useEffect","handleClickOutside","e","container","current","target","contains","document","addEventListener","removeEventListener","focus","index","findIndex","option","getDisplayLabel","className","htmlFor","isDevice","ref","id","find","value","Value","tabIndex","aria-label","map","i","key","role","type","aria-haspopup","aria-expanded","aria-controls","onClick","aria-activedescendant","onKeyDown","keyCode","preventDefault","length","aria-selected","handleOptionClick","propTypes","PropTypes","string","shape","oneOfType","number","bool","arrayOf","object","func","isRequired","Card","url","imageUrl","imageAlt","title","description","cardContent","srcSet","src","alt","loading","parse","class","viewBox","xlinkHref","href","TabFacetedListing","endpoint","language","facetLabel","allMobileLabel","setLoading","facets","setFacets","selectedFacet","setSelectedFacet","results","setResults","Axios","method","params","data","resultListing","console","log","fetchData","name","getSelectedFacet","innerLabel","filter","result","category","some"],"mappings":"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","file":"38.1c9936de2ce638ccc73d.js","sourcesContent":["import React, { useState, useEffect, useRef, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isDevice } from '../../helpers';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nconst Dropdown = ({\r\n  label,\r\n  placeholder,\r\n  selectedOption,\r\n  options = [],\r\n  onChange,\r\n  disabled = false,\r\n  compareAttr = 'value',\r\n  style\r\n}) => {\r\n  const [open, toggle] = useState(false);\r\n  const [cursor, setCursor] = useState(null);\r\n  const guid = useRef(uuidv4());\r\n  const listboxGuid = useRef(uuidv4());\r\n  const nativeEl = useRef(null);\r\n  const dropdownEl = useRef(null);\r\n  const triggerEl = useRef(null);\r\n  const listingEl = useRef(null);\r\n\r\n  useEffect(() => {\r\n    const handleClickOutside = e => {\r\n      const container = dropdownEl.current;\r\n\r\n      if (container) {\r\n        if (container !== e.target && !container.contains(e.target)) {\r\n          toggle(false);\r\n        }\r\n      }\r\n    };\r\n\r\n    document.addEventListener('click', handleClickOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (open) {\r\n      listingEl.current.focus();\r\n    }\r\n  }, [open]);\r\n\r\n  useEffect(() => {\r\n    if (selectedOption) {\r\n      const index = options.findIndex(\r\n        option => option[compareAttr] === selectedOption[compareAttr]\r\n      );\r\n      setCursor(index);\r\n    } else {\r\n      setCursor(null);\r\n    }\r\n  }, [compareAttr, options, selectedOption]);\r\n\r\n  const handleTriggerClick = e => {\r\n    if (isDevice()) {\r\n      return;\r\n    }\r\n\r\n    toggle(!open);\r\n  };\r\n\r\n  const handleOptionClick = option => {\r\n    onChange(option);\r\n    toggle(false);\r\n  };\r\n\r\n  const handleOptionChange = e => {\r\n    const option = options.find(option => option.value === e.target.value);\r\n    onChange(option);\r\n    toggle(false);\r\n  };\r\n\r\n  const handleKeyDown = e => {\r\n    /* eslint-disable indent */\r\n    switch (e.keyCode) {\r\n      case 38: // up\r\n        e.preventDefault();\r\n        if (cursor) {\r\n          setCursor(cursor - 1);\r\n        } else {\r\n          setCursor(options.length - 1);\r\n        }\r\n        break;\r\n      case 40: // down\r\n        e.preventDefault();\r\n        if (cursor !== null && cursor < options.length - 1) {\r\n          setCursor(cursor + 1);\r\n        } else {\r\n          setCursor(0);\r\n        }\r\n        break;\r\n      case 27: // esc\r\n        e.preventDefault();\r\n        toggle(false);\r\n        triggerEl.current.focus();\r\n        break;\r\n      case 13: // enter\r\n        e.preventDefault();\r\n        if (cursor !== null) {\r\n          onChange(options[cursor]);\r\n        }\r\n        toggle(false);\r\n        triggerEl.current.focus();\r\n        break;\r\n      case 9: // tab\r\n        toggle(false);\r\n        break;\r\n    }\r\n    /* eslint-enable indent */\r\n  };\r\n\r\n  const getDisplayLabel = () => {\r\n    if (selectedOption) {\r\n      return `${selectedOption.label}`;\r\n    }\r\n    return placeholder || null;\r\n  };\r\n\r\n  return (\r\n    <div className={`form-group form-group--dropdown${disabled ? ' is-disabled' : ''}`}>\r\n      <label htmlFor={guid.current} className=\"form-label\">\r\n        {label}\r\n      </label>\r\n      <div\r\n        className={`dropdown${isDevice() ? ' dropdown--native' : ''}${\r\n          style ? ` dropdown--${style}` : ''\r\n        }`}\r\n        ref={dropdownEl}\r\n      >\r\n        <select\r\n          id={guid.current}\r\n          onChange={handleOptionChange}\r\n          value={selectedOption ? selectedOption.Value : ''}\r\n          tabIndex=\"-1\"\r\n          aria-label={`${label || ''} ${getDisplayLabel()}`}\r\n          ref={nativeEl}\r\n        >\r\n          {options.map((option, i) => {\r\n            return (\r\n              <option key={i} value={option.value}>\r\n                {typeof option === 'object' ? option.label : option}\r\n              </option>\r\n            );\r\n          })}\r\n        </select>\r\n        <button\r\n          className={`dropdown__trigger${selectedOption ? ' is-filled' : ''}`}\r\n          role=\"combobox\"\r\n          type=\"button\"\r\n          aria-label={`${label || ''} ${getDisplayLabel()}`}\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded={open}\r\n          aria-controls={listboxGuid.current}\r\n          onClick={handleTriggerClick}\r\n          disabled={disabled}\r\n          ref={triggerEl}\r\n        >\r\n          {getDisplayLabel()}\r\n        </button>\r\n        <ul\r\n          role=\"listbox\"\r\n          id={listboxGuid.current}\r\n          aria-activedescendant={\r\n            cursor !== null ? `${guid.current}-${cursor}` : null\r\n          }\r\n          tabIndex=\"-1\"\r\n          className=\"dropdown__list\"\r\n          ref={listingEl}\r\n          onKeyDown={handleKeyDown}\r\n        >\r\n          {options.map((option, i) => (\r\n            <li\r\n              role=\"option\"\r\n              key={i}\r\n              id={`${guid.current}-${i}`}\r\n              className=\"dropdown__item\"\r\n              aria-selected={cursor === i}\r\n              onClick={() => handleOptionClick(option)}\r\n            >\r\n              {typeof option === 'object' ? option.label : option}\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nDropdown.propTypes = {\r\n  label: PropTypes.string,\r\n  placeholder: PropTypes.string,\r\n  selectedOption: PropTypes.shape({\r\n    value: PropTypes.PropTypes.oneOfType([\r\n      PropTypes.string,\r\n      PropTypes.number,\r\n      PropTypes.bool\r\n    ]),\r\n    label: PropTypes.string\r\n  }),\r\n  options: PropTypes.arrayOf(PropTypes.object),\r\n  onChange: PropTypes.func.isRequired,\r\n  disabled: PropTypes.bool,\r\n  compareAttr: PropTypes.string,\r\n  style: PropTypes.string\r\n};\r\n\r\nexport default Dropdown;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport parse from 'html-react-parser';\r\n\r\nconst Card = ({ url, imageUrl, imageAlt, title, description, target }) => {\r\n  const cardContent = (\r\n    <>\r\n      <picture className=\"tab-faceted-listing__card-image\">\r\n        <source srcSet={`${imageUrl}?format=webp`} type=\"image/webp\" />\r\n        <img src={imageUrl} alt={imageAlt} loading=\"lazy\" />\r\n      </picture>\r\n      <div className=\"tab-faceted-listing__card-content\">\r\n        <p className=\"tab-faceted-listing__card-title\">{parse(title)}</p>\r\n        {!!description && (\r\n          <div className=\"tab-faceted-listing__card-description rtf\">\r\n            {parse(description)}\r\n          </div>\r\n        )}\r\n        {!!url && (\r\n          <div class=\"tab-faceted-card-arrow\">\r\n            <span className=\"cta-decorator-v2 cta-decorator-v2--angle bg-dark\">\r\n              <svg viewBox={`0 0 ${target === '_blank' ? '19 18' : '19 18'}`}>\r\n                <use\r\n                  xlinkHref={`#${\r\n                    target === '_blank' ? '' : ''\r\n                  }link-arrow-icon`}\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n\r\n  return url ? (\r\n    <a href={url} className=\"tab-faceted-listing__card\" target={target}>\r\n      {cardContent}\r\n    </a>\r\n  ) : (\r\n    <div className=\"tab-faceted-listing__card\">{cardContent}</div>\r\n  );\r\n};\r\n\r\nCard.propTypes = {\r\n  url: PropTypes.string.isRequired,\r\n  imageUrl: PropTypes.string.isRequired,\r\n  imageAlt: PropTypes.string.isRequired,\r\n  title: PropTypes.string.isRequired,\r\n  description: PropTypes.string,\r\n  target: PropTypes.string\r\n};\r\n\r\nexport default Card;\r\n","import React, { useState, useEffect } from 'react';\r\nimport Axios from 'axios';\r\n\r\nimport Dropdown from '../../components/react/Dropdown';\r\nimport Card from './components/Card';\r\n\r\nconst TabFacetedListing = ({\r\n  endpoint,\r\n  language,\r\n  facetLabel,\r\n  allMobileLabel\r\n}) => {\r\n  const [loading, setLoading] = useState([]);\r\n  const [facets, setFacets] = useState(null);\r\n  const [selectedFacet, setSelectedFacet] = useState(null);\r\n  const [results, setResults] = useState([]);\r\n\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      try {\r\n        setLoading(true);\r\n        const { data } = await Axios({\r\n          method: 'GET',\r\n          url: endpoint,\r\n          params: { language }\r\n        });\r\n\r\n        setResults(data.resultListing);\r\n        setFacets(data.facets[0]);\r\n        setSelectedFacet(data.facets[0].options[0]);\r\n      } catch (error) {\r\n        console.log(error);\r\n      } finally {\r\n        setLoading(false);\r\n      }\r\n    };\r\n\r\n    fetchData();\r\n  }, []);\r\n\r\n  const getSelectedFacet = () => {\r\n    if (selectedFacet) {\r\n      return {\r\n        ...selectedFacet,\r\n        label: selectedFacet.value ? selectedFacet.name : allMobileLabel\r\n      };\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"tab-faceted-listing container\">\r\n      {!!facets && (\r\n        <div className=\"tab-faceted-listing__facets\">\r\n          <Dropdown\r\n            label={facetLabel}\r\n            selectedOption={getSelectedFacet()}\r\n            options={facets.options.map(option => ({\r\n              ...option,\r\n              label: option.name\r\n            }))}\r\n            onChange={setSelectedFacet}\r\n            compareAttr=\"value\"\r\n            innerLabel={facets.name}\r\n          />\r\n          <div className=\"tab-faceted-listing__facets-list\">\r\n            <p className=\"tab-faceted-listing__facets-label\">{facets.name}</p>\r\n            <div className=\"tab-faceted-listing__facets-options\">\r\n              {facets.options.map(option => (\r\n                <button\r\n                  key={option.value}\r\n                  type=\"button\"\r\n                  onClick={() => setSelectedFacet(option)}\r\n                  className={\r\n                    option.value === selectedFacet?.value ? 'selected' : null\r\n                  }\r\n                >\r\n                  {option.name}\r\n                </button>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n      <div className=\"tab-faceted-listing__list\">\r\n        {results\r\n          .filter(result =>\r\n            selectedFacet?.value\r\n              ? result.category.some(\r\n                category => category === selectedFacet.value\r\n              )\r\n              : true\r\n          )\r\n          .map(result => (\r\n            <Card key={result.id} {...result} />\r\n          ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\nexport default TabFacetedListing;\r\n"],"sourceRoot":""}