handleChange(e)}\n placeholder={placeholder.Text || 'Sort by'}\n isSearchable={false}\n styles={{\n control: (baseStyles) => ({\n ...baseStyles,\n borderColor: 'black',\n borderRadius: '0',\n boxShadow: 'none',\n }),\n menu: (baseStyles) => ({\n ...baseStyles,\n borderRadius: '0',\n }),\n dropdownIndicator: (baseStyles) => ({\n ...baseStyles,\n color: 'black',\n }),\n indicatorSeparator: (baseStyles) => ({\n ...baseStyles,\n display: 'none',\n }),\n placeholder: (baseStyles) => ({\n ...baseStyles,\n color: 'black',\n }),\n }}\n theme={(theme) => ({\n ...theme,\n borderRadius: '0',\n colors: {\n ...theme.colors,\n primary25: '#f5f5f5',\n primary: 'black',\n },\n })}\n />\n );\n};\n\nexport default ProductSortingDropDown;\n","import React, { Fragment } from 'react';\nimport ProductSortingDropDown from './ProductSortingDropDown';\n\nconst SortCriteriaCompact = ({ sortCriteria }) => {\n const options = sortCriteria.map((item) => {\n return {\n Text: item.text,\n Value: item.value,\n };\n });\n\n return (\n \n );\n};\n\nexport default SortCriteriaCompact;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { searchFacetChange } from '../Actions/FacetedSearch.action';\nimport { translate } from '../Services/translation';\n\nconst FilterTags = ({ facetFilters, navigationTheme }) => {\n const dispatch = useDispatch();\n\n const selectedFacetGroup = facetFilters.filter(\n (filter) => filter.selectedOptions.length > 0\n );\n const selectedFacetOption = selectedFacetGroup.reduce(\n (accumulator, group) => {\n if (!group) {\n return accumulator;\n }\n const { options, selectedOptions } = group;\n const groupOptions = options\n .filter((option) => selectedOptions.includes(option.id))\n .map((option) => ({ ...option, group }));\n return [...accumulator, ...groupOptions];\n },\n []\n );\n return selectedFacetGroup.length === 0 ? null : (\n \n \n {translate('search.yourfilter')} : \n {selectedFacetGroup &&\n selectedFacetGroup.map((group, index) => (\n \n dispatch(searchFacetChange(group))\n }\n key={`group-${index}`}\n >\n {' '}\n {group.label}{' '}\n \n ))}\n \n {navigationTheme === 'category' && (\n \n {translate('search.yourfilter')} : \n {selectedFacetOption &&\n selectedFacetOption.map((option, index) => (\n \n dispatch(\n searchFacetChange(option.group, option)\n )\n }\n key={`option-${index}`}\n >\n {' '}\n {option.label}{' '}\n \n ))}\n \n )}\n
\n );\n};\n\nexport default FilterTags;\n","import React, {\n Fragment,\n useCallback,\n useState,\n useEffect,\n useRef,\n} from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport FacetedSearchCompact from './FacetedSearchCompact';\nimport { AccordionPanel, Accordion } from '../Components/Accordion';\nimport { query } from '../Actions/FacetedSearch.action';\nimport SubNav from './SubNavCompact';\nimport SortCriteriaCompact from './SortCriteriaCompact';\nimport FilterTag from './FilterTags';\nimport { translate } from '../Services/translation';\nimport { updateFilterOption } from '../Actions/FacetedSearch.action';\nimport { PRODUCT_VIEW_CACHED } from '../constants';\n\nconst FacetedSearchCompactContainer = () => {\n const dispatch = useDispatch();\n const {\n subNavigation,\n sortCriteria,\n facetFilters: globalFacetFilters,\n navigationTheme,\n productsViewCachedId,\n } = useSelector((state) => state.facetedSearch);\n\n const [facetFilters, setFacetFilters] = useState(globalFacetFilters || []);\n const previousCachedId = useRef(productsViewCachedId);\n useEffect(() => {\n if (previousCachedId.current !== productsViewCachedId) {\n setFacetFilters(globalFacetFilters);\n previousCachedId.current = productsViewCachedId;\n }\n }, [globalFacetFilters, productsViewCachedId]);\n\n useEffect(() => {\n dispatch(query(window.location.search.substr(1) || '', false));\n }, [dispatch]);\n\n const onFacetChange = useCallback(\n (filter, option) => {\n setFacetFilters((prevFacetFilters) => {\n return updateFilterOption(prevFacetFilters, filter, option);\n });\n },\n [setFacetFilters]\n );\n\n const onSearchResultDataChange = (dom) => {\n if ([null, undefined].includes(dom)) {\n return;\n }\n const container = document.createElement('div');\n container.innerHTML = dom;\n const existingResult = document.querySelector('#search-result');\n const tempResult = container.querySelector('#search-result');\n const existingFilter = existingResult.querySelector(\n '#facetedSearchCompact'\n );\n const tempFilter = tempResult.querySelector('#facetedSearchCompact');\n const replace = (node, newNode) =>\n node.parentNode.replaceChild(newNode, node);\n // move existingFilter from existingResult to tempResult\n replace(tempFilter, existingFilter);\n // replace existingResult with tempResult ( newResult )\n replace(existingResult, tempResult);\n // bootstrap react components if any exists in the search result\n window.__litium.bootstrapComponents();\n };\n\n useEffect(() => {\n const productViewCached = window.__litium.cache\n ? window.__litium.cache[PRODUCT_VIEW_CACHED] || {}\n : {};\n if (!productViewCached.used) {\n productViewCached.used = true;\n const dom = productViewCached.productsView;\n dom && onSearchResultDataChange(dom);\n }\n });\n\n const empty = (array) => !(array && array.length);\n\n const subNavigations = !subNavigation ? null : [subNavigation];\n const sortCriterias =\n !sortCriteria || !sortCriteria.sortItems\n ? null\n : sortCriteria.sortItems;\n\n const hidden = [subNavigations, facetFilters, sortCriterias].every((arr) =>\n empty(arr)\n );\n\n return hidden ? null : (\n \n \n \n {!empty(subNavigations) && (\n \n \n \n )}\n {!empty(facetFilters) && (\n \n \n \n )}\n {!empty(sortCriterias) && (\n \n \n \n )}\n \n {navigationTheme === 'category' && (\n \n \n
\n )}\n \n );\n};\n\nexport default FacetedSearchCompactContainer;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport { applyMiddleware, createStore } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';\nimport thunk from 'redux-thunk';\nimport app, { createReducer } from './reducers';\nimport { historyMiddleware } from './Middlewares/History.middleware';\nimport MiniCart from './Components/MiniCart';\nimport QuickSearch from './Components/QuickSearch';\nimport Navigation from './Components/Navigation';\nimport FacetedSearch from './Components/FacetedSearch';\nimport FacetedSearchCompactContainer from './Components/FacetedSearchCompactContainer';\nimport DynamicComponent from './Components/DynamicComponent';\nimport ProductSortingDropDown from './Components/ProductSortingDropDown';\n\nwindow.__litium = window.__litium || {};\nconst preloadState = window.__litium.preloadState || {};\nconst store = createStore(\n app,\n preloadState,\n composeWithDevTools(applyMiddleware(thunk, historyMiddleware))\n);\n\n// Add a dictionary to keep track of the registered async reducers\nstore.asyncReducers = {};\n\n// Create an inject reducer function\n// This function adds the async reducer, and creates a new combined reducer\nstore.injectReducer = (key, asyncReducer) => {\n if (!store.asyncReducers[key]) {\n store.asyncReducers[key] = asyncReducer;\n store.replaceReducer(createReducer(store.asyncReducers));\n }\n};\n\nwindow.__litium = {\n ...window.__litium,\n bootstrapComponents: () => {\n // bootstrap React components, in case the HTML response we receive from the server\n // has React components. ReactDOM.render performs only an update on previous rendered\n // components and only mutate the DOM as necessary to reflect latest React element.\n bootstrapComponents();\n },\n cache: {}, // for storing cache data for current request\n};\n\nconst registeredContainers = [];\nconst renderReact = (element, container, callback) => {\n registeredContainers.push(container);\n ReactDOM.render(element, container, callback);\n};\n\nwindow.onunload = () => {\n // make sure components are unmounted, redux's listener are unsubscribed\n // to fix issue with iframe navigation in IE\n registeredContainers.forEach((container) => {\n ReactDOM.unmountComponentAtNode(container);\n });\n};\n\nconst bootstrapComponents = () => {\n if (document.getElementById('miniCart')) {\n renderReact(\n \n \n ,\n document.getElementById('miniCart')\n );\n }\n if (document.getElementById('quickSearch')) {\n renderReact(\n \n \n ,\n document.getElementById('quickSearch')\n );\n }\n if (document.getElementById('navbar')) {\n renderReact(\n \n \n ,\n document.getElementById('navbar')\n );\n }\n if (document.getElementById('facetedSearch')) {\n renderReact(\n \n \n ,\n document.getElementById('facetedSearch')\n );\n }\n if (document.getElementById('facetedSearchCompact')) {\n renderReact(\n \n \n ,\n document.getElementById('facetedSearchCompact')\n );\n }\n if (document.getElementById('myPagePersons')) {\n const PersonList = DynamicComponent({\n loader: () => import('./Components/PersonListContainer'),\n });\n renderReact(\n \n \n ,\n document.getElementById('myPagePersons')\n );\n }\n if (document.getElementById('myPageAddresses')) {\n const AddressList = DynamicComponent({\n loader: () => import('./Components/AddressListContainer'),\n });\n renderReact(\n \n \n ,\n document.getElementById('myPageAddresses')\n );\n }\n if (document.getElementById('product-details-PdfButton')) {\n const PdfButton = DynamicComponent({\n loader: () => import('./Components/ProductPdfButton'),\n });\n const element = document.getElementById('product-details-PdfButton');\n const variantID = JSON.parse(element.getAttribute(\"data-stuffs\"));\n renderReact(\n \n \n ,\n document.getElementById('product-details-PdfButton')\n );\n }\n if (document.getElementById('checkout')) {\n const Checkout = DynamicComponent({\n loader: () => import('./Components/Checkout'),\n });\n renderReact(\n \n \n ,\n document.getElementById('checkout')\n );\n }\n if (document.getElementById('lightBoxImages')) {\n const LightboxImages = DynamicComponent({\n loader: () => import('./Components/LightboxImages'),\n });\n import('./Reducers/LightboxImages.reducer').then(\n ({ lightboxImages }) => {\n store.injectReducer('lightboxImages', lightboxImages);\n const rootElement = document.getElementById('lightBoxImages');\n const images = Array.from(\n rootElement.querySelectorAll('template')\n ).map((img) => ({\n html: img.innerHTML,\n src: img.dataset.src,\n }));\n renderReact(\n \n \n ,\n document.getElementById('lightBoxImages')\n );\n }\n );\n }\n\n if (document.querySelectorAll('.slider').length > 0) {\n const Slider = DynamicComponent({\n loader: () => import('./Components/Slider'),\n });\n Array.from(document.querySelectorAll('.slider')).forEach(\n (slider, index) => {\n const values = [...slider.querySelectorAll('template')].map(\n (block) => {\n return {\n html: block.innerHTML,\n };\n }\n );\n if (values.length > 0) {\n renderReact(, slider);\n }\n }\n );\n }\n\n if (document.querySelectorAll('buy-button').length > 0) {\n const BuyButton = DynamicComponent({\n loader: () => import('./Components/BuyButton'),\n });\n Array.from(document.querySelectorAll('buy-button')).forEach(\n (button) => {\n const {\n articleNumber,\n quantityFieldId,\n href,\n cssClass,\n label,\n } = button.dataset;\n renderReact(\n \n \n ,\n button\n );\n }\n );\n }\n\n if (document.getElementById('orderHistoryPage')) {\n const OrderList = DynamicComponent({\n loader: () => import('./Components/OrderHistoryListContainer'),\n });\n renderReact(\n \n \n ,\n document.getElementById('orderHistoryPage')\n );\n }\n\n if (document.getElementById('productSortingDropdown')) {\n var rootElement = document.getElementById('productSortingDropdown');\n var sortItems = JSON.parse(rootElement.dataset.sortitems);\n\n renderReact(\n \n \n ,\n document.getElementById('productSortingDropdown')\n );\n }\n};\n\nbootstrapComponents();\n","import { FACETED_SEARCH_QUERY } from '../constants';\n\nexport const historyMiddleware = (store) => (next) => (action) => {\n const { type, payload } = action;\n switch (type) {\n case FACETED_SEARCH_QUERY:\n let { query } = payload;\n const url =\n window.location.href.replace(window.location.search, '') +\n `${query ? '?' : ''}${query}`;\n window.history.pushState('search', 'Search Page', url);\n break;\n }\n next(action);\n};\n"],"sourceRoot":""}