1import{LitElement,css,html,nothing}from"@lit";import{t}from"@nova/utils";class NovaSearchResult extends LitElement{static properties={noResults:{type:String},searchAgain:{type:String},searchData:{type:Object},searchTerm:{type:String},noSearchResult:{type:Boolean},suggestedResult:{type:Object},openState:{type:String}};connectedCallback(){super.connectedCallback(),this.searchData={},this.searchTerm="",this.noSearchResult=!1,this.suggestedResult=null,window.addEventListener("resize",this.handleRenderHeight.bind(this))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleRenderHeight.bind(this)),this.closeButton?.removeEventListener("click",this.closeSearchModal.bind(this)),this.overlay?.removeEventListener("click",this.closeSearchModal.bind(this)),this.shadowRoot.removeEventListener("keydown",this.onClickEscape.bind(this))}updated(changedProperties){if(super.updated(changedProperties),this.openState==="closed"||(this.closeButton=this.shadowRoot.querySelector(".header-search__close"),this.closeButton?.addEventListener("click",this.closeSearchModal.bind(this)),this.overlay=this.shadowRoot.querySelector(".header-search__overlay"),this.overlay?.addEventListener("click",this.closeSearchModal.bind(this)),this.shadowRoot.addEventListener("keydown",this.onClickEscape.bind(this)),Reflect.ownKeys(this.searchData).length===0))return;const{products,collections}=this.searchData.resources.results;this.noSearchResult=[products,collections].every(arr=>arr.length===0),this.suggestedResult===null&&this.noSearchResult?this.handleResult():this.noSearchResult?this.handleRenderResult(this.suggestedResult):this.searchData.resources.results.collections.length===0&&(this.suggestedResult?this.handleRenderResult(this.suggestedResult,!0):this.handleResult(!0)),document.documentElement.classList.add("sl-scroll-lock"),this.handleRenderHeight()}closeSearchModal(){this.searchData={};const searchModalEl=this.getRootNode().host.shadowRoot;searchModalEl.openState="closed",document.documentElement.classList.remove("sl-scroll-lock"),document.querySelector(".header__utility > a:first-child").focus()}onClickEscape(event){if((event.keyCode||event.which)===27){this.closeSearchModal();return}}async handleResult(isOnlyCollection=!1){try{const response=await fetch(`?section_id=${window.main_suggested_result_section_id}`);response.ok||(console.error(`HTTP error! Status: ${response.status}`),console.error(`HTTP error! Reason: ${response}`));const data=await response.text(),htmlDocument=new DOMParser().parseFromString(data,"text/html");this.suggestedResult=htmlDocument,this.handleRenderResult(this.suggestedResult,isOnlyCollection)}catch(error){console.error("Error:",error.message)}}handleRenderHeight(){this.openState!=="closed"&&(clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{const resultRec=this.getBoundingClientRect();window.innerHeight-resultRec.bottom>0?this.style.maxHeight="unset":this.style.maxHeight=`${window.innerHeight-resultRec.top}px`},500))}handleRenderResult(data,isOnlyCollection){const suggestedResult=data?.querySelector(".suggested-results");if(!suggestedResult)return;const listContainer=suggestedResult.querySelector(".header-search__list-container"),currentListContainer=this.shadowRoot.querySelector(".header-search__list-container");if(listContainer&¤tListContainer&¤tListContainer.replaceWith(listContainer.cloneNode(!0)),!isOnlyCollection){const productContainer=suggestedResult.querySelector(".header-search__product-container"),currentProductContainer=this.shadowRoot.querySelector(".header-search__product-container");productContainer&¤tProductContainer&¤tProductContainer.replaceWith(productContainer.cloneNode(!0))}}render(){if(this.openState==="closed")return nothing;if(Reflect.ownKeys(this.searchData).length===0)return nothing;if(this.noSearchResult)return html` 2 <div class="header-search__overlay"></div> 3 <div class="header-search__result"> 4 <sl-icon-button name="x-lg" label="Close" class="header-search__close"></sl-icon-button> 5 ${this.searchTerm.length>2?html`<div class="header-search__no-result-content"> 6 <h3 class="header-search__no-result-title" tabindex="0"> 7 ${this.noResults} "${this.searchTerm}" 8 </h3> 9 <p class="header-search__no-result-description"> 10 ${this.searchAgain} 11 </p> 12 </div>`:nothing} 13 <div class="header-search__no-result-container"> 14 <div class="header-search__list-container"></div> 15 <div class="header-search__product-container"></div> 16 </div> 17 </div> 18 `;const displayProducts=this.searchData.resources.results.products.slice(0,2);return html` 19 <div class="header-search__overlay"></div> 20 <div class="header-search__result">
21 <sl-icon-button name="x-lg" label="Close Search Modal" class="header-search__close"></sl-icon-button> 22 <div class="header-search__no-result-container"> 23 <div class="header-search__list-container"> 24 ${this.searchData.resources.results.collections.length>0?html` <div class="header-search__collection-list"> 25 <h4 class="heading-4">${t("general.search.collections")}</h4> 26 <ul> 27 ${this.searchData.resources.results.collections.map(collection=>html` 28 <li> 29 <a href=${collection.url}>${collection.title}</a> 30 </li> 31 `)} 32 </ul> 33 </div>`:nothing} 34 </div> 35 ${this.searchData.resources.results.products.length>0?html` <div class="header-search__product-container"> 36 <h4 class="heading-4">${t("general.search.product_results")}</h4> 37 <div class="header-search__product-slide-container"> 38 <div class="header-search__product-slide-inner-container"> 39 ${displayProducts.map(product=>html` 40 <div class="header-search__product-card"> 41 <nova-product-card-async 42 data-handle=${product.handle} 43 ></nova-product-card-async> 44 </div> 45 `)} 46 </div> 47 <div class="header-search__actions"> 48 <a class="btn" variant="secondary-reverse" href="/search?q=${this.searchTerm}">${t("general.search.view_all_product")}</a> 49 </div> 50 </div> 51 </div>`:nothing} 52 </div> 53 </div> 54 `}static styles=css` 55 :host .header-search__overlay { 56 position: fixed; 57 left: 0; 58 height: calc(100dvh - var(--header-primary-height)); 59 right: 0; 60 top: var(--header-primary-height); 61 background: rgba(0, 0, 0, 0.3); 62 cursor: pointer; 63 z-index: -1; 64 } 65 66 :host .header-search__result { 67 display: flex; 68 width: 100%; 69 overflow: hidden; 70 flex-direction: column; 71 max-height: inherit; 72 overflow-y: auto; 73 -ms-overflow-style: none; 74 scrollbar-width: none; 75 position: relative; 76 } 77 78 :host .header-search__result::-webkit-scrollbar {
79 display: none; 80 width: 0; 81 } 82 83 :host .header-search__close { 84 position: absolute; 85 top: var(--nova-space-md); 86 right: var(--nova-space-md); 87 font-size: 18px; 88 } 89 90 @media screen and (max-width: 1023px) { 91 :host .header-search__close { 92 position: fixed; 93 right: calc(var(--nova-space-page-margin) + var(--nova-space-sm)); 94 top: calc(var(--header-primary-height) + 20px); 95 background: var(--nova-color-grey-100); 96 } 97 } 98 99 :host .header-search__close::part(base) { 100 padding: 0; 101 } 102 103 :host .header-search__product-container { 104 display: flex; 105 flex-direction: column; 106 padding-block: var(--nova-space-md); 107 width: 100%; 108 gap: var(--nova-space-sm); 109 } 110 111 :host .header-search__list-container { 112 padding-block: var(--nova-space-md); 113 width: 100%; 114 } 115 116 :host .header-search__collection-list { 117 display: flex; 118 flex-direction: column; 119 width: 100%; 120 gap: var(--nova-space-md); 121 } 122 123 @media screen and (min-width: 1024px) { 124 :host .header-search__result { 125 position: fixed; 126 left: 0; 127 top: var(--header-primary-height); 128 background: var(--nova-color-grey-100); 129 z-index: 1; 130 } 131 132 :host .header-search__list-container { 133 padding: var(--nova-space-none); 134 width: auto; 135 } 136 137 :host .header-search__product-container { 138 padding: var(--nova-space-none); 139 width: 67%; 140 max-width: 880px; 141 } 142 } 143 144 :host .header-search__product-slide-container { 145 overflow-x: auto; 146 width: 100%; 147 max-width: 100%; 148 -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ 149 scrollbar-width: none; /* Hide scrollbar for Firefox */ 150 } 151 152 /* Hide scrollbar for Chrome, Safari and Opera */ 153 :host .header-search__product-slide-container::-webkit-scrollbar {
154 display: none; 155 width: 0; 156 } 157 158 :host .header-search__product-slide-inner-container { 159 display: grid; 160 gap: var(--nova-space-sm); 161 } 162 163 @media screen and (min-width: 768px) { 164 :host .header-search__product-slide-inner-container { 165 grid-template-columns: repeat(2, 1fr); 166 gap: var(--nova-space-sm); 167 } 168 } 169 170 @media screen and (min-width: 1024px) { 171 :host .header-search__product-slide-inner-container { 172 gap: var(--nova-space-md); 173 } 174 175 :host .header-search__product-slide-container { 176 overflow: visible; 177 } 178 } 179 180 :host h3 { 181 font: var(--nova-h4-font); 182 margin: 0; 183 color: var(--nova-color-grey-600); 184 } 185 186 :host .header-search__list-container ul { 187 display: flex; 188 flex-direction: column; 189 gap: var(--nova-space-md); 190 padding-left: var(--nova-space-none); 191 margin: var(--nova-space-none); 192 } 193 194 @media screen and (min-width: 1024px) { 195 :host .header-search__list-container ul { 196 gap: 15px; 197 } 198 } 199 200 :host .header-search__list-container li { 201 list-style: none; 202 color: var(--nova-color-subdued); 203 } 204 205 :host .header-search__list-container a { 206 font: var(--nova-body-utility); 207 letter-spacing: var(--nova-utility-letter-spacing); 208 text-transform: var(--nova-utility-text-transform); 209 color: var(--nova-color-black); 210 padding-bottom: var(--nova-space-2xs); 211 text-decoration: none; 212 position: relative; 213 } 214 215 :host .header-search__list-container a::after { 216 content: ''; 217 position: absolute; 218 height: 1px !important; 219 overflow: hidden; 220 background-color: transparent; 221 width: 0; 222 bottom: 0; 223 left: 0; 224 transition: all var(--nova-button-animation-duration) var(--nova-animation-easing); 225 } 226 227 :host .header-search__list-container a:hover::after { 228 background-color: var(--nova-color-grey-600); 229 width: 100%; 230 height: 2px !important; 231 } 232 233 :host .header-search__no-result-content { 234 padding-block: var(--nova-space-md); 235 text-align: center; 236 } 237 238 @media screen and (min-width: 1024px) { 239 :host .header-search__no-result-content { 240 padding: var(--nova-space-md) var(--nova-space-page-margin); 241 } 242 } 243 244 :host .header-search__no-result-title { 245 font: var(--nova-h3-font); 246 margin: 0 0 var(--nova-space-xs); 247 color: var(--nova-color-grey-500); 248 } 249 250 :host .header-search__no-result-description { 251 color: var(--nova-color-grey-400); 252 margin: 0; 253 } 254 255 :host .header-search__no-result-container { 256 display: flex; 257 flex-direction: column; 258 } 259 260 @media screen and (min-width: 1024px) { 261 :host .header-search__no-result-container { 262 flex-direction: row; 263 justify-content: space-between; 264 gap: var(--nova-space-lg); 265 padding: var(--nova-space-md) var(--nova-space-page-margin); 266 } 267 } 268 269 .header-search__suggested-card { 270 display: flex; 271 flex-direction: column; 272 gap: var(--nova-space-xs); 273 } 274 275 .header-search__suggested-card__image { 276 aspect-ratio: var(--aspect-ratio-mobile); 277 overflow: hidden; 278 } 279 280 @media screen and (min-width: 768px) { 281 .header-search__suggested-card__image { 282 aspect-ratio: var(--aspect-ratio); 283 } 284 } 285 286 .header-search__suggested-card__image img { 287 width: 100%; 288 height: 100%; 289 object-fit: cover; 290 } 291 292 .header-search__suggested-card__title { 293 font: var(--nova-h5-font); 294 letter-spacing: var(--nova-h5-letter-spacing); 295 text-transform: var(--nova-h5-letter-transform); 296 color: var(--nova-color-grey-600); 297 text-decoration: none; 298 } 299 300 :host .js-product-card-v2 { 301 --aspect-ratio-mobile: 397 / 292; 302 --aspect-ratio: 397 / 292; 303 } 304 305 :host .pcard-v2 { 306 display: flex; 307 flex-direction: column; 308 position: relative; 309 container-type: inline-size; 310 width: 100%; 311 height: 100%; 312 padding: 15px var(--nova-space-xs); 313 background: var(--nova-color-white); 314 box-sizing: border-box; 315 } 316 317 :host .pcard-v2 .hidden { 318 display: none !important; 319 } 320 321 :host .pcard-v2__content { 322 display: flex; 323 flex-direction: column; 324 gap: var(--nova-space-sm); 325 } 326 327 :host .pcard-v2__header { 328 display: flex; 329 align-items: start; 330 gap: var(--nova-space-2xs); 331 flex-direction: column; 332 } 333 334 :host .pcard-v2__media { 335 position: relative; 336 margin-bottom: var(--nova-space-md); 337 } 338 339 :host .pcard-v2 .badges { 340 position: absolute; 341 top: calc(0px - var(--nova-space-2xs)); 342 left: 0; 343 display: flex; 344 gap: var(--nova-space-2xs); 345 } 346 347 :host .pcard-v2__image { 348 width: 100%; 349 aspect-ratio: var(--aspect-ratio-mobile, 155 / 95); 350 transition: opacity 0.3s ease-in-out; 351 } 352 353 :host .pcard-v2__image svg, 354 :host .pcard-v2__image img { 355 width: 100%; 356 height: 100%; 357 } 358 359 :host .pcard-v2__image a { 360 display: block; 361 height: 100%; 362 } 363 364 :host .pcard-v2__image img { 365 display: block; 366 object-fit: contain; 367 object-position: center; 368 } 369 370 :host .pcard-v2__image--primary { 371 opacity: 1; 372 } 373 374 :host .pcard-v2__image--secondary { 375 position: absolute; 376 top: 0; 377 left: 0; 378 opacity: 0; 379 } 380 381 :host .pcard-v2__title { 382 flex: 1; 383 margin: 0; 384 font: var(--nova-body-font); 385 letter-spacing: var(--nova-body-letter-spacing); 386 text-transform: var(--nova-body-text-transform); 387 color: var(--nova-color-grey-600); 388 } 389 390 :host .pcard-v2__title a { 391 color: inherit; 392 text-decoration: none; 393 } 394 395 :host .pcard-v2__price { 396 font: var(--nova-body-font); 397 letter-spacing: var(--nova-body-letter-spacing); 398 text-transform: var(--nova-body-text-transform); 399 color: var(--nova-color-grey-600); 400 } 401 402 :host .pcard-v2__price dd, 403 :host .pcard-v2__price dl { 404 margin: 0; 405 } 406 407 :host .pcard-v2__price dl { 408 display: flex; 409 flex-direction: column; 410 } 411 412 :host .pcard-v2__info { 413 display: flex; 414 flex-direction: column; 415 gap: 5px; 416 } 417 418 :host .pcard-v2__swatch-container { 419 display: flex; 420 flex-wrap: nowrap; 421 align-items: center; 422 width: fit-content; 423 gap: var(--nova-space-xs); 424 } 425 426 :host .pcard-v2__swatch-wrapper, 427 :host .pcard-v2__swatch-skeleton { 428 display: flex; 429 gap: var(--nova-space-2xs); 430 } 431
432 :host .pcard-v2__swatch-skeleton span { 433 width: var(--nova-product-color-swatch-size-active); 434 height: var(--nova-product-color-swatch-size-active); 435 border-radius: 50%; 436 background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.06)); 437 background-size: 200% 100%; 438 animation: pcard-v2-skeleton-shimmer 1.2s linear infinite; 439 } 440 441 :host .pcard-v2__swatch { 442 width: var(--nova-product-color-swatch-size-active); 443 height: var(--nova-product-color-swatch-size-active); 444 max-width: var(--nova-product-color-swatch-size-active); 445 border: 1px solid transparent; 446 border-radius: 50%; 447 text-indent: -9999px; 448 position: relative; 449 padding: 0; 450 background: transparent; 451 cursor: pointer; 452 } 453 454 :host .pcard-v2__swatch--active { 455 border: 1px solid var(--nova-color-grey-600); 456 } 457 458 :host .pcard-v2__swatch span { 459 position: absolute; 460 text-indent: 50px; 461 overflow: hidden; 462 border-radius: 50%; 463 display: block; 464 background-size: cover; 465 width: var(--nova-product-color-swatch-size); 466 height: var(--nova-product-color-swatch-size); 467 top: 50%; 468 left: 50%; 469 transform: translate(calc(0px - var(--nova-product-color-swatch-size) / 2), calc(0px - var(--nova-product-color-swatch-size) / 2)); 470 pointer-events: none; 471 color: transparent; 472 } 473 474 :host .pcard-v2__swatch--sold-out::after { 475 content: ""; 476 position: absolute; 477 top: 0; 478 left: 0; 479 right: 0; 480 bottom: 0; 481 background: linear-gradient(135deg, transparent calc(50% - 1px), var(--nova-color-foreground) 50%, transparent calc(50% + 1px)); 482 pointer-events: none; 483 } 484 485 :host .pcard-v2__swatch:nth-child(n + 4) { 486 display: none; 487 } 488 489 :host .pcard-v2__swatch-container__trigger { 490 font: var(--nova-body-utility); 491 letter-spacing: var(--nova-utility-letter-spacing); 492 text-transform: var(--nova-utility-text-transform); 493 color: var(--nova-color-grey-400); 494 } 495 496 :host .pcard-v2__swatch-container__trigger a { 497 color: inherit; 498 text-decoration: none; 499 cursor: pointer; 500 } 501 502 :host .pcard-v2 .price { 503 align-items: center; 504 display: flex; 505 flex-direction: row; 506 flex-wrap: wrap; 507 color: var(--nova-color-grey-600); 508 } 509 510 :host .pcard-v2 .price__sale, 511 :host .pcard-v2 .price--on-sale .price__regular { 512 display: none; 513 } 514 515 :host .pcard-v2 .price--on-sale .price__sale { 516 display: flex; 517 flex-direction: row; 518 margin-right: 5px; 519 } 520 521 :host .pcard-v2 .price--on-sale .js-product-card-v2-price-sale-value { 522 margin-right: 5px; 523 } 524 525 :host .pcard-v2 .price-item--regular { 526 text-decoration: none; 527 } 528 529 :host .caption { 530 font: var(--nova-body-caption); 531 letter-spacing: var(--nova-caption-letter-spacing); 532 text-transform: var(--nova-caption-text-transform); 533 } 534 535 :host .flex { 536 display: flex; 537 } 538 539 :host .visually-hidden, 540 :host .visually-hidden--inline { 541 border: 0 !important; 542 clip: rect(0 0 0 0) !important; 543 height: 1px !important; 544 margin: -1px !important; 545 overflow: hidden !important; 546 padding: 0 !important; 547 position: absolute !important; 548 width: 1px !important; 549 white-space: nowrap !important; 550 } 551 552 :host .pcard-v2 .price--on-sale .price__compare .price-item--regular { 553 text-decoration: line-through; 554 color: var(--nova-color-grey-400, rgba(0, 0, 0, 0.8)); 555 } 556 557 :host .pcard-v2 .badges__item { 558 align-items: flex-start; 559 border-radius: var(--nova-border-rounded, 4px); 560 background: var(--badge-bg-color, --nova-color-grey-100); 561 color: var(--badge-color, --nova-color-grey-600); 562 display: flex; 563 padding: var(--nova-space-2xs, 5px) 15px; 564 pointer-events: none; 565 font: var(--nova-body-caption); 566 letter-spacing: var(--nova-caption-letter-spacing); 567 text-transform: var(--nova-caption-text-transform); 568 } 569 570 :host .pcard-v2__wishlist { 571 position: absolute; 572 right: var(--nova-space-xs); 573 top: var(--nova-space-sm); 574 opacity: 0; 575 transition: opacity 0.2s ease; 576 display: inline-flex; 577 align-items: center; 578 justify-content: center; 579 width: 2.75rem; 580 height: 2.75rem; 581 border: 0; 582 background: transparent; 583 color: inherit; 584 cursor: pointer; 585 } 586 587 :host .pcard-v2__wishlist svg { 588 pointer-events: none; 589 } 590
591 @keyframes pcard-v2-skeleton-shimmer { 592 0% { 593 background-position: 200% 0; 594 } 595 596 100% { 597 background-position: -200% 0; 598 } 599 } 600 601 .header-search__actions { 602 display: flex; 603 justify-content: flex-end; 604 padding-top: var(--nova-space-md); 605 } 606 607 .btn { 608 border-width: 1px; 609 height: var(--nova-button-height); 610 display: inline-flex; 611 gap: var(--nova-button-gap); 612 flex-shrink: 0; 613 justify-content: center; 614 align-items: center; 615 padding-inline: var(--nova-button-padding-left-right); 616 font: var(--nova-body-utility); 617 letter-spacing: var(--nova-utility-letter-spacing); 618 text-transform: var(--nova-utility-text-transform); 619 transition: all var(--nova-button-animation-duration) var(--nova-animation-easing); 620 text-decoration: none; 621 } 622 623 .btn[variant="secondary-reverse"] { 624 border: 0; 625 color: var(--nova-color-background); 626 background-color: var(--nova-color-grey-600); 627 } 628 629 .btn[variant="secondary-reverse"]:not(:disabled):hover { 630 color: var(--nova-color-foreground); 631 background-color: var(--nova-color-grey-100); 632 } 633 634 .btn[variant="secondary-reverse"]:disabled { 635 color: var(--nova-color-background); 636 background-color: var(--nova-color-grey-300); 637 cursor: default; 638 } 639 640 .btn[variant="secondary-reverse"]:focus, 641 .btn[variant="secondary-reverse"]:focus-visible { 642 color: var(--nova-color-background); 643 background-color: var(--nova-color-grey-600); 644 outline: var(--nova-color-focus) solid 2px; 645 } 646 647 @media screen and (min-width: 768px) { 648 :host .pcard-v2__content { 649 flex-direction: row-reverse; 650 justify-content: space-between; 651 gap: var(--nova-space-xs); 652 } 653 654 :host .pcard-v2__media { 655 margin-bottom: 15px; 656 } 657 658 :host .pcard-v2__image { 659 aspect-ratio: var(--aspect-ratio, 1); 660 } 661 662 :host .pcard-v2__swatch--sold-out::after { 663 top: 1px; 664 left: 1px; 665 right: 1px; 666 bottom: 1px; 667 } 668 } 669 670 @container (min-width: 300px) { 671 :host .pcard-v2--enable-hover:hover .pcard-v2__image--primary { 672 opacity: 0; 673 position: absolute; 674 top: 0; 675 left: 0; 676 } 677 678 :host .pcard-v2--enable-hover:hover .pcard-v2__image--secondary { 679 opacity: 1; 680 position: relative; 681 } 682 683 :host .pcard-v2__media:hover .pcard-v2__wishlist { 684 opacity: 1; 685 } 686 } 687 `}customElements.define("nova-search-result",NovaSearchResult); 688//# sourceMappingURL=/cdn/shop/t/335/assets/component-search-result.js.map?v=18845023938986303991790628834
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.