(function () { "use strict"; const x = window.matchMedia("(max-width: 734px)"), L = window.matchMedia("(min-width: 735px) and (max-width: 1068px)"), O = window.matchMedia("(min-width: 1069px)"), M = [O, L, x]; function H(s) { let e = [], y = [], t = [], a = 0, n = parseInt(getComputedStyle(document.querySelector(".channel-compare")).getPropertyValue("--columns")) || 3; const p = document.querySelectorAll("[compare-header-row]"); let m = `<div role="columnheader">${getComputedStyle(document.querySelector(".channel-compare")).getPropertyValue("--column-header-empty-cell")}</div>`, r = getComputedStyle(document.querySelector(".channel-compare")).getPropertyValue("--column-data") || [0, 1, 2, 0, 1, 2, 0, 1, 2], u = getComputedStyle(document.querySelector(".channel-compare")).getPropertyValue("--allowed-columns").replace(/\s/g, "").split(","), i = r.split(",").map(function (o) { return parseInt(o.trim()) }); y = ((o, l) => [o.slice(0, l[0]), o.slice(l[0]).slice(0, l[1]), o.slice(parseInt(l[0]) + parseInt(l[1])).slice(0, l[2])])(i, u), t = y, this.selectEls = Array.prototype.slice.call(s), this.columns = this.getColumns(this.selectEls[0]), this.selectEls.forEach((function (o, l) { let S = o.querySelector('[aria-selected ="true"]'), I = o.selectedOptions, P = o.options[o.selectedIndex].value; l < n && (m += `<div role="columnheader">${S.textContent}</div>`), o.selectedIndex = Array.prototype.slice.call(o.options).indexOf(S), S.setAttribute("selected", "true"), I ? e.push(parseInt(I[0].value)) : e.push(parseInt(P)), (() => { const h = () => { n = O.matches ? u[0] : L.matches ? u[1] : x.matches ? u[2] : 3, M.forEach((d, E) => { let c = parseInt(I ? I[0].value : P); if (d.matches) if (a = E, t[a][l]) { let f = t[a][l]; this.update(l, f, c, !0, p, n), e[l] = f } else this.update(l, y[a][l], c, l < parseInt(u[E]), p, n), e[l] = y[a][l] }) }; M.forEach(d => { function E(c) { if (c.matches) { h(); const A = document.getElementsByClassName("selector-dropdown"); for (var f = 0; f < A.length; f++)A[f].blur() } } try { typeof d.addEventListener != "function" ? d.addListener(E) : d.addEventListener("change", c => { h(c) }) } catch (c) { console.log("The Error is: ", c) } h() }) })(), o.onchange = (function () { n = O.matches ? parseInt(u[0]) : L.matches ? parseInt(u[1]) : x.matches ? parseInt(u[2]) : 3; let h = parseInt(I ? I[0].value : P), d = e.slice(0, n).indexOf(h), E = e[l]; d > -1 && (this.update(d, E, e[d], !0, p, n), e[d] = E), t.forEach((c, f) => { c.indexOf(h) > -1 && (d = c.indexOf(h), d > -1 && (t[f][d] = E)) }), this.update(l, h, e[l], !0, p, n), e[l] = h, t[0][l] = h, t[1][l] = h, t[2][l] = h, t.forEach((c, f) => { const A = c.filter((w, q, v) => v.indexOf(w) !== q); A && A.forEach(w => { const q = c.findLastIndex(v => v == w); for (let v = 0; v < c.length; v++)t[f].indexOf(v) == -1 && (t[f][q] = v) }) }) }).bind(this) }).bind(this)), p[0] && (p[0].innerHTML = m) } let C = H.prototype; C.update = function (s, e, y, t, a, n) { if (this.selectEls == null || !t) return; let p = "compare-column-" + s, g = this.getOptionIndexByValue(y), m = this.getOptionIndexByValue(e); this.selectEls[s].selectedIndex = m; let r = this.getColumnsByProductIndex(y), u = this.getColumnsByProductIndex(e); r.forEach(function (b, o) { b.classList.remove(p), u[o].classList.remove("compare-column-0", "compare-column-1", "compare-column-2", "compare-column-3", "compare-column-4"), u[o].classList.add(p) }), this.selectEls[s].options[g].removeAttribute("aria-selected"), this.selectEls[s].options[g].removeAttribute("selected"), this.selectEls[s].options[m].setAttribute("aria-selected", "true"), this.selectEls[s].options[m].setAttribute("selected", "true"); let i = '<div role="columnheader">&nbsp;</div>'; this.selectEls.forEach((b, o) => { o < n && (i += `<div role="columnheader">${b.selectedOptions[0].textContent}</div>`) }), a && a[0] && (a[0].innerHTML = i), this.getStatSubCopyHeight() }, C.getStatSubCopyHeight = function () { let s = document.getElementsByClassName("compare-template-preview-item-stat"); if (s) { let e = []; Array.from(s).forEach((y, t) => { const a = y.children; let n = []; Array.from(a).forEach(g => { ["compare-column-0", "compare-column-1", "compare-column-2", "compare-column-3", "compare-column-4"].some(r => g.classList.value.includes(r)) && n.push(g.children[0].children[0]) }); let p = []; n.forEach(g => { let m = [], r = 0; Array.from(g.children).forEach(u => { const i = u; i.style.height = "", !i.children[0].className.includes("stat-value") && !i.children[0].className.includes("image") && !i.children[0].className.includes("mdash") && (m.push(i), e[t] === void 0 ? e[t] = [i.offsetHeight] : (e[t][r] === void 0 || e[t][r] !== void 0 && i.offsetHeight > e[t][r]) && (e[t][r] = i.offsetHeight), r++) }), p.push(m) }), p.forEach(g => { g.forEach((m, r) => { m.style.height = `${e[t][r]}px` }) }) }) } }, C.getOptionIndexByValue = function (s) { return this.valueIndexMap[s] }, C.getColumnsByProductIndex = function (s) { return this.columns[s] }, C.getColumns = function (s) { let e = []; return this.valueIndexMap = {}, Array.prototype.slice.call(s.querySelectorAll("option")).forEach((function (t, a) { let n = t.value; this.valueIndexMap[n] = a, e[n] = Array.prototype.slice.call(document.querySelectorAll(".product-" + n)) }).bind(this)), e }, C.destroy = function () { this.selectEls.forEach((function (s) { s.onchange = null }).bind(this)), this.selectEls = null }, typeof module == "object" && module.exports ? module.exports = { ProductPicker: H, viewportArray: M } : new H(document.querySelectorAll(".selector-dropdown")) })();