{"version":3,"file":"rr-search.js","mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA,aAAa;AACb,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","sources":["webpack://nv-base-template/./src/js/features/rr-search.js"],"sourcesContent":["(function () {\r\n\r\n    const rubbishDetails = document.querySelectorAll('.js-rubbish-details');\r\n    const modules = document.querySelector('.js-rr-modules');\r\n\r\n    // Letter click search\r\n    const letters = document.querySelectorAll('.js-search-letter');\r\n    const letterSelected = document.querySelector('.js-letter-selected');\r\n    const letterFilter = document.querySelector('.js-letter-filter');\r\n    const letterFilterItems = document.querySelectorAll('.js-letter-filter-item');\r\n\r\n    letters.forEach(letter => {\r\n        letter.addEventListener(\"click\", e => {\r\n            selectLetter(e.target)\r\n        })\r\n        letter.addEventListener(\"keypress\", e => {\r\n            if (e.key === \"Enter\") {\r\n                selectLetter(e.target)\r\n            }\r\n        })\r\n    })\r\n\r\n    letterFilterItems.forEach(filterItem => {\r\n        filterItem.addEventListener('click', () => {\r\n            selectLetterItem(filterItem)\r\n        })\r\n        filterItem.addEventListener('keypress', e => {\r\n            if (e.key === \"Enter\") {\r\n                selectLetterItem(filterItem)\r\n            }\r\n        })\r\n    })\r\n\r\n    function selectLetterItem(filterItem) {\r\n        rubbishDetails.forEach(item => {\r\n            item.classList.remove('c-rr__item--active');\r\n            if (item.dataset.name == filterItem.innerHTML) {\r\n                hideLetterFilter()\r\n                hideModules()\r\n                hideDropdown()\r\n                hideSearchInput()\r\n                item.classList.add('c-rr__item--active');\r\n            }\r\n        })\r\n        searchInput.value = \"\";\r\n    }\r\n\r\n    function selectLetter(letter) {\r\n        const selectedLetter = letter.innerHTML\r\n        showLetterFilter()\r\n        letterSelected.innerHTML = selectedLetter;\r\n        letters.forEach(x => {\r\n            x.classList.remove('c-rr__search-letter--selected')\r\n        })\r\n        letter.classList.add('c-rr__search-letter--selected')\r\n        letterFilterItems.forEach(filterItem => {\r\n            filterItem.classList.remove('c-rr__filter-item--active')\r\n            if (filterItem.innerHTML.charAt(0) == selectedLetter) {\r\n                hideDropdown()\r\n                hideSearchInput()\r\n                filterItem.classList.add('c-rr__filter-item--active')\r\n            }\r\n        })\r\n    }\r\n\r\n\r\n    // Text input search\r\n    const searchBox = document.querySelector('.js-search-box');\r\n    const searchInput = document.querySelector('.js-search-input');\r\n    //const searchInputButton = document.querySelector('.js-search-button');\r\n    const dropdownResults = document.querySelector('.js-search-input-results');\r\n    const filteredDropdown = dropdownResults != null && dropdownResults.querySelectorAll('.js-search-input-result');\r\n\r\n    if (searchInput != null) {\r\n        searchInput.addEventListener(\"keyup\", e => {\r\n            const input = e.target.value;\r\n            if (input.length > 2) {\r\n                autoCompleteSearch(input)\r\n                showDropdown()\r\n                showSearchInput()\r\n            }\r\n            else {\r\n                hideDropdown()\r\n                hideSearchInput()\r\n            }\r\n        })\r\n    }\r\n\r\n    //searchInputButton.addEventListener(\"click\", () => {\r\n    //    const input = searchInput.value;\r\n    //    autoCompleteSearch(input);\r\n    //})\r\n\r\n    if (searchBox != null) {\r\n        searchBox.addEventListener('click', () => {\r\n            hideDropdown()\r\n            hideSearchInput()\r\n        });\r\n    }\r\n\r\n    if (filteredDropdown != null && filteredDropdown.length > 0) {\r\n        filteredDropdown.forEach(dropdownItem => {\r\n            dropdownItem.addEventListener(\"click\", () => {\r\n                selectDropdownItem(dropdownItem)\r\n            })\r\n            dropdownItem.addEventListener(\"keypress\", (e) => {\r\n                if (e.key === \"Enter\") {\r\n                    selectDropdownItem(dropdownItem)\r\n                }\r\n            })\r\n        })\r\n    }\r\n\r\n    function selectDropdownItem(dropdownItem) {\r\n        hideDropdown()\r\n        hideSearchInput()\r\n        hideLetterFilter()\r\n        searchInput.value = dropdownItem.innerHTML;\r\n        rubbishDetails.forEach(item => {\r\n            item.classList.remove('c-rr__item--active');\r\n            if (item.dataset.name == dropdownItem.innerHTML) {\r\n                item.classList.add('c-rr__item--active');\r\n                hideModules()\r\n            }\r\n        })\r\n    }\r\n\r\n    function autoCompleteSearch(input) {\r\n        filteredDropdown.forEach(dropdownItem => {\r\n            if (dropdownItem.innerHTML.toLowerCase().includes(input.toLowerCase())) {\r\n                dropdownItem.classList.add('c-rr__search-input-result--active')\r\n            }\r\n            else {\r\n                dropdownItem.classList.remove('c-rr__search-input-result--active')\r\n            }\r\n        })\r\n    }\r\n\r\n\r\n\r\n    // Show/Hide\r\n    function hideDropdown() {\r\n        dropdownResults.classList.remove('c-rr__search-input-results--open')\r\n        searchBox.classList.remove('c-rr__search-box--active')\r\n    }\r\n    function showDropdown() {\r\n        dropdownResults.classList.add('c-rr__search-input-results--open')\r\n        searchBox.classList.add('c-rr__search-box--active')\r\n    }\r\n    function hideSearchInput() {\r\n        searchInput.classList.remove('c-rr__search-input--active')\r\n    }\r\n    function showSearchInput() {\r\n        searchInput.classList.add('c-rr__search-input--active')\r\n    }\r\n    function hideLetterFilter() {\r\n        letterFilter.classList.remove('c-rr__letter-filter--show')\r\n    }\r\n    function showLetterFilter() {\r\n        letterFilter.classList.add('c-rr__letter-filter--show')\r\n    }\r\n    function hideModules() {\r\n        modules.classList.add('c-rr__modules--hide')\r\n    }\r\n    function showModules() {\r\n        modules.classList.remove('c-rr__modules--hide')\r\n    }\r\n\r\n\r\n\r\n})();\r\n"],"names":[],"sourceRoot":""}