{"version":3,"file":"js/2802.chunk.js?v=1742528680091","mappings":"0JA+IAA,KAAE,YA5I4B,WAE1B,IAAMC,EAAaD,IAAE,yBACrB,GAAKC,EAAWC,OAAhB,CAIA,IAAMC,EAAYF,EAAWG,KAAK,iBAC5BC,EAAcJ,EAAWG,KAAK,kBAC9BE,EAAcL,EAAWG,KAAK,eAC9BG,EAAqBN,EAAWG,KAAK,kBACrCI,EAAiBP,EAClBG,KAAK,eAAe,GACpBK,cAAc,QAAQC,UACrBC,EAAkBV,EAAWG,KAAK,oBAClCQ,EAAcX,EAAWG,KAAK,yBAC9BS,EAAWZ,EAAWG,KAAK,YAC3BU,EAAmBb,EAAWG,KAAK,qBACnCW,EAAYd,EAAWG,KAAK,cAC5BY,EAAgBf,EAAWgB,KAAK,oBAGlCC,EAAU,GAEdC,EAAAA,EAAMC,IAAIJ,GAAeK,MAAK,SAAAC,GAC1BJ,EAAUI,EAASC,KAAKC,KACpB,SAAAC,GACI,MAAO,2LAAPC,OAGsCD,EAAOE,WAAU,gMAAAD,OAIjBD,EAAOG,MAAK,2cAYtD,IAEJf,EAASgB,OAAOX,EACpB,IAGAZ,EAAY,GAAGG,cACX,QACFC,UAAY,GAAHgB,OAAMlB,EAAesB,UAAU,EAAG,KAAI,OACjDnB,EAAgB,GAAGoB,MAAMC,QAAU,OAkBnC7B,EAAU8B,GAAG,SAAS,WAClB5B,EAAY6B,SAAS,OACzB,IAEAtB,EAAYqB,GAAG,SAAS,WACpBE,YAAW,WACP,IAAMC,EAAQC,SAAS5B,cAAc,gBACtB4B,SAAS5B,cAAc,eAC/BsB,MAAMO,cAAgB,OAC7BF,EAAML,MAAMQ,MAAQ,SACpBH,EAAML,MAAMS,OAAS,OACzB,GAAG,EACP,IAEAjC,EAAmB0B,GAAG,SAAS,WA5Ba,cAApC1B,EAAmB,GAAGG,WACtBJ,EAAY,GAAGG,cAAc,QAAQC,UAAYF,EACjDD,EAAmB,GAAGG,UAAY,YAClCC,EAAgB,GAAGoB,MAAMC,QAAU,UAEnC1B,EAAY,GAAGG,cACX,QACFC,UAAY,GAAHgB,OAAMlB,EAAesB,UAAU,EAAG,KAAI,OACjDvB,EAAmB,GAAGG,UAAY,YAClCC,EAAgB,GAAGoB,MAAMC,QAAU,OAqB3C,IAEAK,SAASI,iBAAiB,mBAAmB,SAAAC,GAEzC,IADA,IAAMC,EAAYN,SAAS5B,cAAc,YAClCkC,EAAUC,iBACbD,EAAUE,YAAYF,EAAUG,WAEpC3B,EAAAA,EACKC,IAAI,GAADM,OAAIV,EAAa,KAAAU,OAAIgB,EAAMK,OAAOC,eACrC3B,MAAK,SAAAC,GACFJ,EAAU,GACVH,EAAUkC,YAAY,QACtB3C,EAAY4C,OACZpC,EAAiBmC,YAAY,QAC7B/B,EAAUI,EAASC,KAAKC,KACpB,SAAAC,GACI,MAAO,uMAAPC,OAGkCD,EAAOE,WAAU,gNAAAD,OAIjBD,EAAOG,MAAK,ufAYlD,IAEJf,EAASgB,OAAOX,GAEXyB,EAAUjC,WACXyB,YAAW,WACPtB,EAASgB,OAAOd,GAChBA,EAAUmB,SAAS,QACnB5B,EAAY6C,OACZrC,EAAiBoB,SAAS,OAC9B,GAAG,EAEX,GACR,GApIA,CAqIJ,CAGIkB,EACJ,G","sources":["webpack://fed-boilerplate/./src/4-sections/compatibility-tool/s-compatibility-tool.js"],"sourcesContent":["import $ from 'jquery';\nimport axios from 'axios';\n\nconst compatibilityToolInit = () => {\n    // Targeting Elements\n    const $component = $('.s-compatibility-tool');\n    if (!$component.length) {\n        return;\n    }\n\n    const $openMenu = $component.find('.js-open-menu');\n    const $mobileMenu = $component.find('.c-mobile-menu');\n    const $disclaimer = $component.find('.disclaimer');\n    const $disclaimerReadBtn = $component.find('.disc-read-btn');\n    const disclaimerText = $component\n        .find('.disclaimer')[0]\n        .querySelector('span').innerHTML;\n    const $disclaimerLink = $component.find('.disclaimer-link');\n    const $openIframe = $component.find('.js-open-iframe-modal');\n    const $results = $component.find('.results');\n    const $resultsHeadings = $component.find('.results-headings');\n    const $noResult = $component.find('.no-result');\n    const allResultsAPI = $component.attr('data-all-results');\n\n    // APIs\n    let results = '';\n\n    axios.get(allResultsAPI).then(response => {\n        results = response.data.map(\n            result => {\n                return `<div class=\"result\">\n                <div class=\"filter-item\">\n                    <div class=\"result-heading\">DEVICE TYPE</div>\n                    <div class=\"filter-item-result\">${result.deviceType}</div>\n                </div>\n                <div class=\"filter-item\">\n                    <div class=\"result-heading\">BRAND</div>\n                    <div class=\"filter-item-result\">${result.brand}</div>\n                </div>\n                <div class=\"compatible-item\">\n                    <div class=\"result-heading\">COMPATIBLE</div>      \n                    <div class=\"compatible-result\">\n                        <span>YES</span>\n                        <svg class=\"svg-icon\">\n                            <use xlink:href=\"#tick\"></use>\n                        </svg>\n                    </div>\n                </div>\n            </div>`;\n            }\n        );\n        $results.append(results);\n    });\n\n    // changeable content\n    $disclaimer[0].querySelector(\n        'span'\n    ).innerHTML = `${disclaimerText.substring(0, 200)}...`;\n    $disclaimerLink[0].style.display = 'none';\n\n    // Functions\n    const disclaimerTextToggler = () => {\n        if ($disclaimerReadBtn[0].innerHTML === 'read more') {\n            $disclaimer[0].querySelector('span').innerHTML = disclaimerText;\n            $disclaimerReadBtn[0].innerHTML = 'read less';\n            $disclaimerLink[0].style.display = 'unset';\n        } else {\n            $disclaimer[0].querySelector(\n                'span'\n            ).innerHTML = `${disclaimerText.substring(0, 200)}...`;\n            $disclaimerReadBtn[0].innerHTML = 'read more';\n            $disclaimerLink[0].style.display = 'none';\n        }\n    };\n\n    // Events\n    $openMenu.on('click', () => {\n        $mobileMenu.addClass('show');\n    });\n\n    $openIframe.on('click', () => {\n        setTimeout(() => {\n            const modal = document.querySelector('.mfp-content');\n            const iframe = document.querySelector('.mfp-iframe');\n            iframe.style.paddingBottom = '24px';\n            modal.style.width = '1200px';\n            modal.style.height = '560px';\n        }, 0);\n    });\n\n    $disclaimerReadBtn.on('click', () => {\n        disclaimerTextToggler();\n    });\n\n    document.addEventListener('filterBarString', event => {\n        const myResults = document.querySelector('.results');\n        while (myResults.hasChildNodes()) {\n            myResults.removeChild(myResults.lastChild);\n        }\n        axios\n            .get(`${allResultsAPI}?${event.detail.filterString}`)\n            .then(response => {\n                results = '';\n                $noResult.removeClass('show');\n                $disclaimer.show();\n                $resultsHeadings.removeClass('hide');\n                results = response.data.map(\n                    result => {\n                        return `<div class=\"result\">\n                    <div class=\"filter-item\">\n                        <div class=\"result-heading\">DEVICE TYPE</div>\n                        <div class=\"filter-item-result\">${result.deviceType}</div>\n                    </div>\n                    <div class=\"filter-item\">\n                        <div class=\"result-heading\">BRAND</div>\n                        <div class=\"filter-item-result\">${result.brand}</div>\n                    </div>\n                    <div class=\"compatible-item\">\n                        <div class=\"result-heading\">COMPATIBLE</div>      \n                        <div class=\"compatible-result\">\n                            <span>YES</span>\n                            <svg class=\"svg-icon\">\n                                <use xlink:href=\"#tick\"></use>\n                            </svg>\n                        </div>\n                    </div>\n                </div>`;\n                    }\n                );\n                $results.append(results);\n\n                if (!myResults.innerHTML) {\n                    setTimeout(() => {\n                        $results.append($noResult);\n                        $noResult.addClass('show');\n                        $disclaimer.hide();\n                        $resultsHeadings.addClass('hide');\n                    }, 0);\n                }\n            });\n    });\n};\n\n$(() => {\n    compatibilityToolInit();\n});\n"],"names":["$","$component","length","$openMenu","find","$mobileMenu","$disclaimer","$disclaimerReadBtn","disclaimerText","querySelector","innerHTML","$disclaimerLink","$openIframe","$results","$resultsHeadings","$noResult","allResultsAPI","attr","results","axios","get","then","response","data","map","result","concat","deviceType","brand","append","substring","style","display","on","addClass","setTimeout","modal","document","paddingBottom","width","height","addEventListener","event","myResults","hasChildNodes","removeChild","lastChild","detail","filterString","removeClass","show","hide","compatibilityToolInit"],"sourceRoot":""}