{"version":3,"file":"SearchResults-Chunk-d13851b2816303affb55.js","mappings":"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","sources":["webpack://nikon-client/./components/molecules/SearchBar/SearchBar.tsx","webpack://nikon-client/./components/organisms/SearchResults/SearchResults.tsx"],"sourcesContent":["import Icon from '@atoms/Icon/Icon';\nimport IconSizeEnum from '@models/enums/IconSizeEnum';\nimport updateDataLayer from '@utils/helpers/gtm';\nimport useAriaLabels from '@utils/hooks/useAriaLabels';\nimport useResizeObserver from '@utils/hooks/useResizeObserver';\nimport {\n  ChangeEvent,\n  Dispatch,\n  FormEvent,\n  SetStateAction,\n  useCallback,\n} from 'react';\n\ninterface Props {\n  readonly listingPage: string;\n  readonly overlaySearchIcon: string;\n  readonly searchPlaceholder: string;\n  readonly searchSubTitle: string;\n  readonly setValue: Dispatch<SetStateAction<string>>;\n  readonly value: string;\n  readonly onTypingDone?: () => void;\n}\n\nconst SearchBar = ({\n  listingPage,\n  overlaySearchIcon,\n  searchPlaceholder,\n  searchSubTitle,\n  setValue,\n  value,\n  onTypingDone,\n}: Props) => {\n  const [defaultUnderlineRef, { width: maxUnderlineWidth }] =\n    useResizeObserver();\n  const [hiddenSearchRef, { width: currentTextUnderlineWidth }] =\n    useResizeObserver();\n  const { searchAriaLabel } = useAriaLabels();\n  let typingTimer: NodeJS.Timeout;\n\n  const searchFieldRef = useCallback((node: HTMLElement | null) => {\n    node?.focus();\n  }, []);\n\n  const onSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n\n    updateDataLayer({\n      event: 'searchBar',\n      search_term: value,\n    });\n\n    const convertedValue = value.replace(/\\+/g, '%2B'); // allows + symbol to be used in search input\n    window.location.href = value\n      ? `${listingPage}?query=${convertedValue}`\n      : `${listingPage}`;\n  };\n\n  const onChange = (event: ChangeEvent<HTMLInputElement>) =>\n    setValue(event.target.value);\n\n  const onKeyDown = () => clearTimeout(typingTimer);\n\n  const onKeyUp = () => {\n    const doneTypingInterval = 500;\n    clearTimeout(typingTimer);\n    typingTimer = setTimeout(() => {\n      onTypingDone?.();\n    }, doneTypingInterval);\n  };\n\n  return (\n    <div className=\"grid grid-cols-12\">\n      <div className=\"col-span-full md:col-span-10 lg:col-span-8\">\n        <p\n          className=\"body-one bold mb-0.5 md:mb-7.5\"\n          data-testid=\"CT-48-SearchBar-Subtitle\"\n        >\n          {searchSubTitle}\n        </p>\n\n        <form onSubmit={onSubmit} className=\"relative\">\n          <div\n            className=\"flex items-center gap-x-4\"\n            data-testid=\"CT-48-SearchBar-Input-Container\"\n          >\n            <input\n              ref={searchFieldRef}\n              type=\"text\"\n              className=\"h2 flex h-full w-full appearance-none overflow-auto bg-transparent placeholder-grey-500 outline-none outline-0\"\n              placeholder={searchPlaceholder}\n              value={value}\n              onChange={onChange}\n              {...(onTypingDone\n                ? {\n                    onKeyUp,\n                    onKeyDown,\n                    onFocus: onKeyUp,\n                  }\n                : {})}\n              data-testid=\"CT-48-SearchBar-Input\"\n            />\n\n            <button\n              type=\"submit\"\n              className=\"z-80 h-11 w-11 shrink-0 rounded-full bg-yellow md:h-13 md:w-13\"\n              aria-label={searchAriaLabel}\n              data-testid=\"CT-48-SearchBar-Submit-Button\"\n            >\n              <Icon name={overlaySearchIcon} size={IconSizeEnum.xl} />\n            </button>\n          </div>\n\n          <div\n            ref={defaultUnderlineRef}\n            className=\"absolute left-0 z-80 mt-2.5 h-0.5 w-full bg-grey-400 md:mt-7.5\"\n          />\n          <div\n            style={{\n              width: Math.min(maxUnderlineWidth, currentTextUnderlineWidth),\n            }}\n            className=\"absolute left-0 z-80 mt-2.5 h-0.5 bg-black-100 md:mt-7.5\"\n          />\n          <span\n            ref={hiddenSearchRef}\n            aria-hidden=\"true\"\n            className=\"h2 invisible absolute inline-block overflow-hidden whitespace-pre text-transparent\"\n            style={{ maxWidth: maxUnderlineWidth }}\n            data-testid=\"CT-48-SearchBar-Search-Value\"\n          >\n            {value}\n          </span>\n        </form>\n      </div>\n    </div>\n  );\n};\n\nexport default SearchBar;\n","import { IImage } from '@models/IImage';\nimport { IListingComponent } from '@models/IListingComponent';\nimport { ISearchResult } from '@models/ISearchResult';\nimport ArticleLayoutsEnum from '@models/enums/ArticleLayoutsEnum';\nimport PostTypes from '@models/enums/PostTypes';\nimport ListingResultsContainer from '@molecules/ListingResultsContainer/ListingResultsContainer';\nimport LoadMoreListing from '@molecules/LoadMoreListing/LoadMoreListing';\nimport SearchBar from '@molecules/SearchBar/SearchBar';\nimport ContentFilters from '@organisms/ContentFilters/ContentFilters';\nimport ListingCardBlock from '@organisms/ListingCardBlock/ListingCardBlock';\nimport useListingComponentProps from '@utils/hooks/useListingComponentProps';\nimport { useEffect, useState } from 'react';\n\ninterface Props extends IListingComponent {\n  readonly viewAllLabel: string;\n  readonly viewLessLabel: string;\n  readonly defaultImage: IImage;\n  readonly listingPage: string;\n  readonly searchSubTitle: string;\n  readonly searchPlaceholder: string;\n  readonly overlaySearchIcon: string;\n  readonly showExpandedFilters?: boolean;\n}\n\nconst SearchResults = (props: Props) => {\n  const {\n    searchSubTitle,\n    searchPlaceholder,\n    overlaySearchIcon,\n    listingPage,\n    showExpandedFilters,\n  } = props;\n  const [value, setValue] = useState('');\n  const { results, ...listingProps } = useListingComponentProps({\n    ...props,\n    searchValue: value,\n    persistingParams: { track: ['true'] },\n  });\n\n  useEffect(() => {\n    const params = new URLSearchParams(window.location.search);\n    const queryValue = params.get('query');\n    if (queryValue) setValue(decodeURI(queryValue));\n  }, []);\n\n  return (\n    <section className=\"component-padding\">\n      <div className=\"bg-grey-200\">\n        <div className=\"container relative z-70 pb-10 pt-9 lg:pb-44 lg:pt-44\">\n          <SearchBar\n            searchSubTitle={searchSubTitle}\n            searchPlaceholder={searchPlaceholder}\n            overlaySearchIcon={overlaySearchIcon}\n            listingPage={listingPage}\n            value={value}\n            setValue={setValue}\n          />\n        </div>\n      </div>\n\n      <div className=\"container\">\n        <div className=\"py-10\">\n          <ContentFilters\n            classes=\"ml-auto\"\n            {...listingProps}\n            showFacets\n            showExpandedFilters={showExpandedFilters}\n          />\n        </div>\n\n        <div className=\"space-y-28\">\n          <ListingResultsContainer\n            results={results}\n            {...listingProps}\n            resultsClassName=\"space-y-24 lg:space-y-32\"\n            loadingBackgroundClassName=\"bg-white/60\"\n          >\n            <ListingCardBlock\n              results={results as ISearchResult[]}\n              layoutType={ArticleLayoutsEnum.THREE}\n              type={PostTypes.SEARCH}\n              {...listingProps}\n            />\n          </ListingResultsContainer>\n\n          <LoadMoreListing\n            results={results as ISearchResult[]}\n            {...listingProps}\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default SearchResults;\n"],"names":["_ref","listingPage","overlaySearchIcon","searchPlaceholder","searchSubTitle","setValue","value","onTypingDone","defaultUnderlineRef","width","maxUnderlineWidth","useResizeObserver","hiddenSearchRef","currentTextUnderlineWidth","searchAriaLabel","useAriaLabels","typingTimer","searchFieldRef","useCallback","node","focus","onKeyUp","clearTimeout","setTimeout","React","createElement","className","onSubmit","async","e","preventDefault","updateDataLayer","event","search_term","convertedValue","replace","window","location","href","_extends","ref","type","placeholder","onChange","target","onKeyDown","onFocus","Icon","name","size","IconSizeEnum","xl","style","Math","min","maxWidth","props","showExpandedFilters","useState","results","listingProps","useListingComponentProps","searchValue","persistingParams","track","useEffect","queryValue","URLSearchParams","search","get","decodeURI","SearchBar","ContentFilters","classes","showFacets","ListingResultsContainer","resultsClassName","loadingBackgroundClassName","ListingCardBlock","layoutType","ArticleLayoutsEnum","THREE","PostTypes","SEARCH","LoadMoreListing"],"sourceRoot":""}