1import { C as ClientOnly } from "./chunk-QukBD2Rw.js"; 2import { u as useData } from "./chunk-Ch88nc1G.js"; 3import { u as useStore, Z as ZoneMap } from "./chunk-DjmUlURf.js"; 4import { j as defineComponent, _ as _export_sfc, o as openBlock, e as createElementBlock, f as createBaseVNode, v as normalizeClass, r as ref, F as Fragment, x as renderList, q as createVNode, h as toDisplayString, A as withCtx, I as createTextVNode, c as computed, z as createBlock, k as onMounted, w as watch, y as createCommentVNode, S as reactive, ba as onBeforeUnmount, n as normalizeStyle } from "./chunk-Cy-M6TJt.js"; 5import { R as RmcSvgIcon } from "./chunk-RzDGKoNf.js"; 6import { R as RmcButton } from "./chunk-B7DFmrmH.js"; 7import { R as RmcViewToggle } from "./chunk-pHa8L-j_.js"; 8import { R as RmcImageAsync } from "./chunk-BeoUtKWY.js"; 9const rheemConfig = { 10 mainColor: "#e70033", 11 sliderItems: 4, 12 mapColors: ["#7B98AC", "#1C355E", "#4C868F", "#66BBB0", "#E1D1A7", "#F4BE49", "#F28B00", "#EA002A", "#AB192D"], 13 routerBase: "/tankless-electric-water-heater-sizing-tool/" 14}; 15function hexToRgb(hex) { 16 const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; 17 const res = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); 18 const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(res); 19 return result ? { 20 r: parseInt(result[1], 16), 21 g: parseInt(result[2], 16), 22 b: parseInt(result[3], 16) 23 } : null; 24} 25const config = {}; 26Object.assign(config, rheemConfig); 27config.mainColorRGB = hexToRgb(config.mainColor); 28const _sfc_main$5 = /* @__PURE__ */ defineComponent({ 29 __name: "Tabs", 30 setup(__props, { expose: __expose }) { 31 __expose(); 32 const { 33 state, 34 selectedZone, 35 selectedApplication, 36 currentStep, 37 setSelectedZoneId, 38 setSelectedFlow 39 } = useStore(); 40 function previousStep(step) { 41 if (step < currentStep.value) { 42 if (step === 1) { 43 setSelectedZoneId(null); 44 setSelectedFlow(null); 45 history.pushState({}, "", window.location.pathname); 46 } else if (step === 2 && selectedZone.value) { 47 setSelectedFlow(null); 48 const params = new URLSearchParams({ 49 zoneId: `${state.selectedZoneId}` 50 }); 51 history.pushState({}, "", `${window.location.pathname}?${params.toString()}`); 52 } 53 } 54 } 55 const __returned__ = { state, selectedZone, selectedApplication, currentStep, setSelectedZoneId, setSelectedFlow, previousStep }; 56 Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); 57 return __returned__; 58 } 59}); 60const _hoisted_1$4 = { class: "tabs-wrap rmc-mb-4xl" }; 61const _hoisted_2$4 = { class: "rmc-container" }; 62const _hoisted_3$3 = { class: "rmc-nav rmc-nav-underline" }; 63const _hoisted_4$3 = { class: "rmc-nav-item" }; 64const _hoisted_5$3 = { class: "rmc-nav-item" }; 65const _hoisted_6$2 = { class: "rmc-nav-item" }; 66function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) { 67 return openBlock(), createElementBlock("div", _hoisted_1$4, [ 68 createBaseVNode("div", _hoisted_2$4, [ 69 createBaseVNode("ul", _hoisted_3$3, [ 70 createBaseVNode("li", _hoisted_4$3, [ 71 createBaseVNode("a", { 72 href: "javascript:void(0)", 73 onClick: _cache[0] || (_cache[0] = ($event) => $setup.previousStep(1)), 74 class: normalizeClass(["rmc-nav-link", { 75 "active": $setup.currentStep === 1 76 }]) 77 }, " Select region ", 2) 78 ]), 79 createBaseVNode("li", _hoisted_5$3, [ 80 createBaseVNode("a", { 81 href: "javascript:void(0)", 82 onClick: _cache[1] || (_cache[1] = ($event) => $setup.previousStep(2)), 83 class: normalizeClass(["rmc-nav-link", { 84 "active": $setup.currentStep === 2, 85 "inActive": $setup.currentStep < 2 86 }]) 87 }, " Select application ", 2) 88 ]), 89 createBaseVNode("li", _hoisted_6$2, [ 90 createBaseVNode("a", { 91 href: "javascript:void(0)", 92 class: normalizeClass(["rmc-nav-link", { 93 "active": $setup.currentStep === 3, 94 "inActive": $setup.currentStep < 3 95 }]) 96 }, " Results ", 2) 97 ]) 98 ]) 99 ]) 100 ]); 101} 102const Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-fe41f9b7"], ["__file", "Tabs.vue"]]); 103const _sfc_main$4 = /* @__PURE__ */ defineComponent({ 104 __name: "Flow", 105 setup(__props, { expose: __expose }) { 106 __expose(); 107 const { 108 filteredApplications, 109 state, 110 setSelectedFlow, 111 setSelectedZoneId 112 } = useStore(); 113 const applicationId = ref(null);
114 const selectApplicationId = (id) => { 115 applicationId.value = id; 116 updateUrlParams(); 117 }; 118 const prevStep = () => { 119 setSelectedZoneId(null); 120 }; 121 const nextStep = () => { 122 if (!applicationId.value) return; 123 setSelectedFlow(applicationId.value); 124 updateUrlParams(); 125 }; 126 const updateUrlParams = () => { 127 const params = new URLSearchParams({ 128 gpm: `${applicationId.value}`, 129 zoneId: `${state.selectedZoneId}` 130 }); 131 history.pushState({}, "", `${window.location.pathname}?${params.toString()}`); 132 }; 133 const getIcon = (name) => { 134 if (name.includes("Hand Sink")) { 135 return "hand-sink"; 136 } else if (name.includes("Shower")) { 137 return "shower"; 138 } else if (name.includes("Bath")) { 139 return "drop"; 140 } else { 141 return ""; 142 } 143 }; 144 const __returned__ = { filteredApplications, state, setSelectedFlow, setSelectedZoneId, applicationId, selectApplicationId, prevStep, nextStep, updateUrlParams, getIcon, RmcSvgIcon, RmcButton }; 145 Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); 146 return __returned__; 147 } 148}); 149const _hoisted_1$3 = { class: "row" }; 150const _hoisted_2$3 = { class: "col-md-7 rmc-mt-xl rmc-mb-5xl" }; 151const _hoisted_3$2 = ["onClick"]; 152const _hoisted_4$2 = { class: "rmc-card-selector__icon rmc-card-selector__icon-blue" }; 153const _hoisted_5$2 = { class: "rmc-svg-icon rmc-svg-icon--inherit-size" }; 154const _hoisted_6$1 = { class: "rmc-card-selector__title d-flex flex-column" }; 155const _hoisted_7 = { class: "d-flex justify-content-between alignt-items-center rmc-py-3xl" }; 156function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) { 157 return openBlock(), createElementBlock("div", _hoisted_1$3, [ 158 _cache[4] || (_cache[4] = createBaseVNode("div", { class: "rmc-ty-display-sm fw-bold col-12" }, "Choose the faucet location you need", -1)), 159 createBaseVNode("div", _hoisted_2$3, [ 160 (openBlock(true), createElementBlock(Fragment, null, renderList($setup.filteredApplications, (item, index) => { 161 return openBlock(), createElementBlock("div", { 162 key: index, 163 class: normalizeClass(["rmc-card-selector rmc-card-selector_layout-horizontal rmc-card-selector_device-desktop rmc-mb-xl", { 164 "rmc-card-selector_state-selected": item.gpm === $setup.applicationId 165 }]), 166 onClick: ($event) => $setup.selectApplicationId(item.gpm) 167 }, [ 168 createBaseVNode("div", _hoisted_4$2, [ 169 createBaseVNode("span", _hoisted_5$2, [ 170 createVNode($setup["RmcSvgIcon"], { 171 class: "icon", 172 iconString: $setup.getIcon(item.name) 173 }, null, 8, ["iconString"]) 174 ]) 175 ]), 176 createBaseVNode("div", _hoisted_6$1, toDisplayString(item.name) + " â " + toDisplayString(item.gpm) + " GPM ", 1) 177 ], 10, _hoisted_3$2); 178 }), 128)) 179 ]), 180 createBaseVNode("div", _hoisted_7, [ 181 createVNode($setup["RmcButton"], { 182 onClick: _cache[0] || (_cache[0] = ($event) => $setup.prevStep()), 183 size: "lg" 184 }, { 185 default: withCtx(() => _cache[2] || (_cache[2] = [ 186 createTextVNode("Previous") 187 ])), 188 _: 1 189 }), 190 createVNode($setup["RmcButton"], { 191 onClick: _cache[1] || (_cache[1] = ($event) => $setup.nextStep()), 192 variant: "primary", 193 size: "lg", 194 disabled: !$setup.applicationId 195 }, { 196 default: withCtx(() => _cache[3] || (_cache[3] = [ 197 createTextVNode("Next") 198 ])), 199 _: 1 200 }, 8, ["disabled"]) 201 ]) 202 ]); 203} 204const Flow = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__file", "Flow.vue"]]); 205const _sfc_main$3 = /* @__PURE__ */ defineComponent({ 206 __name: "RmcProductCardRecommendation", 207 props: { 208 product: { default: () => ({}) }, 209 variant: {} 210 }, 211 setup(__props, { expose: __expose }) { 212 __expose(); 213 const __returned__ = { RmcImageAsync, RmcButton }; 214 Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); 215 return __returned__; 216 } 217}); 218const _hoisted_1$2 = ["href"]; 219const _hoisted_2$2 = { class: "h-100 d-flex flex-column justify-content-between rmc-gap-md" }; 220const _hoisted_3$1 = ["href", "innerHTML"]; 221const _hoisted_4$1 = ["innerHTML"]; 222const _hoisted_5$1 = ["href"]; 223function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) { 224 return openBlock(), createElementBlock("div", { 225 class: normalizeClass(["rmc-product-card rmc-p-3xl d-flex flex-column rmc-radius-xl h-100", $props.variant === "list" ? "flex-md-row row-cols-md-2" : ""]) 226 }, [ 227 createBaseVNode("div", { 228 class: normalizeClass(["rmc-mb-xl", $props.variant === "list" ? "col-md-4" : ""]) 229 }, [ 230 createBaseVNode("a", { 231 class: "text-center d-block", 232 target: "_blank", 233 href: $props.product.seoUrl 234 }, [ 235 createVNode($setup["RmcImageAsync"], { 236 class: "rmc-product-card__image", 237 alt: $props.product.title, 238 src: $props.product.image, 239 "skeleton-props": { width: "100%", height: "12.5rem" } 240 }, null, 8, ["alt", "src"]) 241 ], 8, _hoisted_1$2) 242 ], 2), 243 createBaseVNode("div", _hoisted_2$2, [ 244 createBaseVNode("div", null, [ 245 createBaseVNode("a", { 246 href: $props.product.seoUrl, 247 target: "_blank", 248 class: "rmc-ty-text-lg fw-bold rmc-color-base-black text-decoration-none", 249 innerHTML: $props.product.title 250 }, null, 8, _hoisted_3$1), 251 createBaseVNode("div", { 252 class: "rmc-product-card__description rmc-mt-md", 253 innerHTML: $props.product.description 254 }, null, 8, _hoisted_4$1) 255 ]), 256 createBaseVNode("a", { 257 href: $props.product.seoUrl, 258 target: "_blank" 259 }, [ 260 createVNode($setup["RmcButton"], { 261 size: "lg", 262 variant: "primary", 263 class: "w-100" 264 }, { 265 default: withCtx(() => _cache[0] || (_cache[0] = [ 266 createBaseVNode("span", { class: "text-center w-100" }, "Buy at Home Depot", -1) 267 ])), 268 _: 1 269 })
270 ], 8, _hoisted_5$1) 271 ]) 272 ], 2); 273} 274const RmcProductCardRecommendation = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "RmcProductCardRecommendation.vue"]]); 275const _sfc_main$2 = /* @__PURE__ */ defineComponent({ 276 __name: "Results", 277 setup(__props, { expose: __expose }) { 278 __expose(); 279 const { 280 state, 281 selectedZone, 282 selectedApplication, 283 results, 284 currentStep, 285 setSelectedFlow, 286 setSelectedZoneId 287 } = useStore(); 288 const selectedView = ref("grid"); 289 const formattedResults = computed(() => { 290 return results.value.map((product) => { 291 const image = product.img || `http://cdn.globalimageserver.com/getimage.aspx?id=${product.imageDocumentID}&w=280&h=250`; 292 const description = generateDescriptionHtml(product); 293 let title = product.name; 294 title = `Performance Tankless Electric ${product.voltage}kW; <nobr>${product.name}</nobr>`; 295 return { 296 image, 297 title, 298 seoUrl: product.depotLink, 299 description 300 }; 301 }); 302 }); 303 const prevStep = () => { 304 setSelectedFlow(null); 305 }; 306 const startOver = () => { 307 setSelectedFlow(null); 308 setSelectedZoneId(null); 309 }; 310 const handleViewChange = (e) => { 311 var _a; 312 return selectedView.value = (_a = e.target) == null ? void 0 : _a.value; 313 }; 314 const generateDescriptionHtml = (product) => { 315 const items = []; 316 const descriptionIsArray = Array.isArray(product.description); 317 if (descriptionIsArray) { 318 if (product.description) { 319 items.push(product.description); 320 } 321 } else if (Array.isArray(product.description)) { 322 items.push(...product.description); 323 } 324 const gpm = product.gpmByZone[state.selectedZoneId - 1]; 325 const params = `${product.voltage}kW Model Flow Rate up to ${gpm}GPM`; 326 items.push(params); 327 if (product.connection) { 328 items.push(product.connection); 329 } 330 if (Array.isArray(product.electricRequirements)) { 331 items.push(...product.electricRequirements); 332 } 333 const html = `<ul>${items.map((item) => `<li>${item}</li>`).join("")}</ul>`; 334 return html; 335 }; 336 const __returned__ = { state, selectedZone, selectedApplication, results, currentStep, setSelectedFlow, setSelectedZoneId, selectedView, formattedResults, prevStep, startOver, handleViewChange, generateDescriptionHtml, RmcButton, RmcViewToggle, RmcProductCardRecommendation }; 337 Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); 338 return __returned__; 339 } 340}); 341const _hoisted_1$1 = { 342 key: 0, 343 class: "rmc-ty-display-sm fw-bold" 344}; 345const _hoisted_2$1 = { 346 key: 1, 347 class: "rmc-ty-display-sm fw-bold" 348}; 349const _hoisted_3 = { class: "d-flex justify-content-between alignt-items-center rmc-py-3xl" }; 350const _hoisted_4 = { class: "rmc-m-none" }; 351const _hoisted_5 = { class: "fw-bold" }; 352const _hoisted_6 = { class: "d-flex justify-content-between alignt-items-center rmc-py-3xl" }; 353function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { 354 return openBlock(), createElementBlock("div", null, [ 355 $setup.results.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$1, "Check our recommendations")) : (openBlock(), createElementBlock("div", _hoisted_2$1, "No results for Inlet Temp " + toDisplayString($setup.selectedZone.temp) + "°F and " + toDisplayString($setup.selectedApplication.gpm) + " GPM", 1)), 356 createBaseVNode("div", _hoisted_3, [ 357 createBaseVNode("p", _hoisted_4, [ 358 createBaseVNode("span", _hoisted_5, toDisplayString($setup.results.length), 1), 359 createTextVNode(" " + toDisplayString($setup.results.length === 1 ? "product" : "products"), 1) 360 ]), 361 createVNode($setup["RmcViewToggle"], { 362 class: "d-none d-xl-inline-flex", 363 initialSelected: 1, 364 onChange: $setup.handleViewChange 365 }) 366 ]), 367 createBaseVNode("div", { 368 class: normalizeClass(["rmc-pb-2xl rmc-pb-lg-5xl", { 369 "row row-cols-1 row-cols-xl-4 rmc-g-4xl": $setup.selectedView === "grid", 370 "row row-cols-1 rmc-g-4xl": $setup.selectedView === "list" 371 }]) 372 }, [ 373 (openBlock(true), createElementBlock(Fragment, null, renderList($setup.formattedResults, (item, index) => { 374 return openBlock(), createElementBlock("div", { 375 key: index, 376 class: "col" 377 }, [ 378 (openBlock(), createBlock($setup["RmcProductCardRecommendation"], { 379 variant: $setup.selectedView, 380 key: item.seoUrl, 381 product: item 382 }, null, 8, ["variant", "product"])) 383 ]); 384 }), 128)) 385 ], 2), 386 createBaseVNode("div", _hoisted_6, [ 387 createVNode($setup["RmcButton"], { 388 onClick: _cache[0] || (_cache[0] = ($event) => $setup.prevStep()), 389 size: "lg" 390 }, { 391 default: withCtx(() => _cache[2] || (_cache[2] = [ 392 createTextVNode("Previous") 393 ])), 394 _: 1 395 }), 396 createVNode($setup["RmcButton"], { 397 onClick: _cache[1] || (_cache[1] = ($event) => $setup.startOver()), 398 variant: "primary", 399 size: "lg" 400 }, { 401 default: withCtx(() => _cache[3] || (_cache[3] = [ 402 createTextVNode("Start over") 403 ])), 404 _: 1 405 }) 406 ]) 407 ]); 408} 409const Results = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "Results.vue"]]); 410const _sfc_main$1 = /* @__PURE__ */ defineComponent({ 411 __name: "Main", 412 setup(__props, { expose: __expose }) { 413 __expose(); 414 const { 415 currentStep, 416 setSelectedZoneId, 417 setSelectedFlow 418 } = useStore(); 419 const initialData = useData(); 420 const { zoneId, gpm } = initialData.value; 421 const tabsRef = ref(null); 422 onMounted(() => { 423 if (zoneId) { 424 setSelectedZoneId(+zoneId); 425 } 426 if (gpm) { 427 setSelectedFlow(+gpm); 428 } 429 }); 430 watch(currentStep, () => { 431 if (tabsRef.value) { 432 tabsRef.value.scrollIntoView({ behavior: "smooth", block: "start" }); 433 } 434 }); 435 const __returned__ = { currentStep, setSelectedZoneId, setSelectedFlow, initialData, zoneId, gpm, tabsRef, Tabs, Map: ZoneMap, Flow, Results };
436 Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); 437 return __returned__; 438 } 439}); 440const _hoisted_1 = { ref: "tabsRef" }; 441const _hoisted_2 = { class: "rmc-container" }; 442function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { 443 return openBlock(), createElementBlock("div", null, [ 444 createBaseVNode("div", _hoisted_1, [ 445 createVNode($setup["Tabs"]) 446 ], 512), 447 createBaseVNode("div", _hoisted_2, [ 448 $setup.currentStep === 1 ? (openBlock(), createBlock($setup["Map"], { key: 0 })) : createCommentVNode("", true), 449 $setup.currentStep === 2 ? (openBlock(), createBlock($setup["Flow"], { key: 1 })) : createCommentVNode("", true), 450 $setup.currentStep === 3 ? (openBlock(), createBlock($setup["Results"], { key: 2 })) : createCommentVNode("", true) 451 ]) 452 ]); 453} 454const Main = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "Main.vue"]]); 455const applications = [ 456 { "name": "Hand Sink", "gpm": 0.5 }, 457 { "name": "Shower", "gpm": 2 }, 458 { "name": "1 Bath + Kitchen", "gpm": 3.7 }, 459 { "name": "1.5 Bath + Kitchen", "gpm": 4.2 }, 460 { "name": "2 Bath + Kitchen", "gpm": 6.2 }, 461 { "name": "2.5 Bath + Kitchen", "gpm": 6.7 } 462]; 463const models = [ 464 { 465 "name": "RETEX-08", 466 "gpmByZone": [0.66, 0.7, 0.75, 0.8, 0.87, 0.94, 1.03, 1.14, 1.27], 467 "description": "Push-button ON/OFF control with LED temperature display", 468 "electricRequirements": [ 469 "33 Amp Max Draw", 470 "40 Amp Breaker Required" 471 ], 472 "connection": 'Side 1/2" NPT water connections', 473 "imageDocumentID": "edfc2b12-3d85-452c-b8c5-893ef9c27df1", 474 "depotLink": "https://www.homedepot.com/p/Rheem-Performance-8-kW-Self-Modulating-1-55-GPM-Tankless-Electric-Water-Heater-RETEX-08/300800454", 475 "voltage": 8 476 }, 477 { 478 "name": "RETEX-11", 479 "gpmByZone": [0.91, 0.96, 1.03, 1.1, 1.19, 1.3, 1.42, 1.57, 1.75], 480 "description": "Push-button ON/OFF control with LED temperature display", 481 "electricRequirements": [ 482 "46 Amp Max Draw", 483 "60 Amp Breaker Required" 484 ], 485 "connection": 'Side 1/2" NPT water connections', 486 "imageDocumentID": "edfc2b12-3d85-452c-b8c5-893ef9c27df1", 487 "depotLink": "https://www.homedepot.com/p/Rheem-Performance-11-kW-Self-Modulating-2-15-GPM-Tankless-Electric-Water-Heater-RETEX-11/300800530", 488 "voltage": 11 489 }, 490 { 491 "name": "RETEX-13", 492 "gpmByZone": [1.07, 1.14, 1.22, 1.31, 1.41, 1.53, 1.68, 1.85, 2.06], 493 "description": "Push-button ON/OFF control with LED temperature display", 494 "electricRequirements": [ 495 "54 Amp Max Draw", 496 "60 AMP Breaker Required" 497 ], 498 "connection": 'Side 1/2" NPT water connections', 499 "imageDocumentID": "edfc2b12-3d85-452c-b8c5-893ef9c27df1", 500 "depotLink": "http://www.homedepot.com/p/Rheem-Performance-13-kW-Self-Modulating-2-54-GPM-Tankless-Electric-Water-Heater-RETEX-13/300800566", 501 "voltage": 13 502 }, 503 { 504 "name": "RETEX-18", 505 "gpmByZone": [1.48, 1.58, 1.68, 1.81, 1.95, 2.12, 2.32, 2.56, 2.86], 506 "description": "Push-button ON/OFF control with LED temperature display", 507 "electricRequirements": [ 508 "75 Amp Max Draw", 509 "2x40 Amp Double Pole Breaker Required" 510 ], 511 "connection": 'Bottom 3/4" NPT water connections', 512 "imageDocumentID": "4a21a469-3c8e-41dc-90c8-e57d03c57b47", 513 "depotLink": "http://www.homedepot.com/p/Rheem-Performance-18-kW-Self-Modulating-3-51-GPM-Tankless-Electric-Water-Heater-RETEX-18/300800620", 514 "voltage": 18 515 }, 516 { 517 "name": "RETEX-24", 518 "gpmByZone": [1.97, 2.1, 2.25, 2.41, 2.6, 2.83, 3.09, 3.42, 3.81], 519 "description": "Push-button ON/OFF control with LED temperature display", 520 "electricRequirements": [ 521 "100 Amp Max Draw", 522 "3x40 Amp Double Pole Breaker Required" 523 ], 524 "connection": 'Bottom 3/4" NPT water connections', 525 "imageDocumentID": "078902d8-94fc-445a-9c7a-f03d2a6b3a8c", 526 "depotLink": "https://www.homedepot.com/p/Rheem-Performance-24-kw-Self-Modulating-4-68-GPM-Tankless-Electric-Water-Heater-RETEX-24/300800689", 527 "voltage": 24 528 }, 529 { 530 "name": "RETEX-27", 531 "gpmByZone": [2.22, 2.36, 2.53, 2.71, 2.93, 3.18, 3.48, 3.84, 4.29], 532 "description": "Push-button ON/OFF control with LED temperature display", 533 "electricRequirements": [ 534 "113 Amp Max Draw", 535 "3x40 Amp Double Pole Breaker Required" 536 ], 537 "connection": 'Bottom 3/4" NPT water connections', 538 "imageDocumentID": "078902d8-94fc-445a-9c7a-f03d2a6b3a8c", 539 "depotLink": "http://www.homedepot.com/p/Rheem-Performance-27-kw-Self-Modulating-5-27-GPM-Tankless-Electric-Water-Heater-RETEX-27/300800755", 540 "voltage": 27 541 }, 542 { 543 "name": "RETEX-36", 544 "gpmByZone": [2.96, 3.15, 3.37, 3.62, 3.9, 4.24, 4.64, 5.12, 5.72], 545 "description": "Push-button ON/OFF control with LED temperature display", 546 "electricRequirements": [ 547 "150 Amp Max Draw", 548 "4x40 Amp Double Pole Breaker Required" 549 ], 550 "connection": 'Bottom 3/4" NPT water connections', 551 "imageDocumentID": "f1a15960-2fa9-4080-8d4b-1012f3a122fd", 552 "depotLink": "http://www.homedepot.com/p/Rheem-Performance-36-kw-Self-Modulating-7-03-GPM-Tankless-Electric-Water-Heater-RETEX-36/300800822", 553 "voltage": 36 554 } 555];
556const _sfc_main = /* @__PURE__ */ defineComponent({ 557 __name: "+Page", 558 setup(__props, { expose: __expose }) { 559 __expose(); 560 const { 561 setModels, 562 setApplications, 563 setIsMobile 564 } = useStore(); 565 const initialData = useData(); 566 const localState = reactive({ 567 mainColor: config.mainColor, 568 sliderItems: config.sliderItems, 569 mainColorRGB: config.mainColorRGB 570 }); 571 const cssVars = computed(() => ({ 572 "--main-color": localState.mainColor, 573 "--slider-items": localState.sliderItems, 574 "--main-color-red": localState.mainColorRGB.r, 575 "--main-color-green": localState.mainColorRGB.g, 576 "--main-color-blue": localState.mainColorRGB.b 577 })); 578 const checkIsMobile = () => { 579 setIsMobile(window.innerWidth < 576); 580 }; 581 const fetchData = async () => { 582 setModels(models); 583 setApplications(applications); 584 }; 585 onMounted(() => { 586 checkIsMobile(); 587 window.addEventListener("resize", checkIsMobile); 588 fetchData(); 589 }); 590 onBeforeUnmount(() => { 591 window.removeEventListener("resize", checkIsMobile); 592 }); 593 const __returned__ = { setModels, setApplications, setIsMobile, initialData, localState, cssVars, checkIsMobile, fetchData, ClientOnly, Main }; 594 Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true }); 595 return __returned__; 596 } 597}); 598function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { 599 return openBlock(), createBlock($setup["ClientOnly"], null, { 600 default: withCtx(() => [ 601 createBaseVNode("div", { 602 style: normalizeStyle($setup.cssVars) 603 }, [ 604 createVNode($setup["Main"]) 605 ], 4) 606 ]), 607 _: 1 608 }); 609} 610const _Page = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "+Page.vue"]]); 611const import4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ 612 __proto__: null, 613 default: _Page 614}, Symbol.toStringTag, { value: "Module" })); 615export { 616 import4 as i 617};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.