import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{LitElement,css,html,nothing,repeat,styleMap,when}from"@lit";class DNACollectionInGrid extends WithProfiler(LitElement){static properties={data:{type:Object}};constructor(){super(),this.data={},performance.mark("product-grid-component")}_trackInGridClick(){Segment?.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.IN_GRID_CONTENT_CLICKED,{in_grid_content_cta_text:this.data?.name,in_grid_content_cta_url:this.data?.url})})}_renderMarkup(){const{name,image_desktop,image_mobile}=this.data;return html`
    <div class="image-container">
      <picture>
        ${image_mobile?html`<source media="(max-width: 767px)" srcset="${image_mobile}">`:nothing}
        <img src="${image_desktop}" alt="${name}">
      </picture>
    </div>
    `}render(){const{url}=this.data;return html`
      ${when(!!url,()=>html`
          <a 
            href=${url}
            class="ingrid-link"
            @click=${this._trackInGridClick}
          >
            ${this._renderMarkup()}
          </a>
        `,()=>html`
          <div class="ingrid-link">
            ${this._renderMarkup()}
          </div>
        `)}
    `}static styles=[styles.typography,css`
      :host {
        display: block;
        align-self: stretch;
        border: 1px solid var(--dna-brand-reverse);;
        border-top: 0;
        border-left: 0;
      }

      .ingrid-link {
        display: block;
        position: relative;
        height: 100%;
      }

      .image-container {
        position: relative;
        width: 100%;
        height: 100%;
      }

      picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      /* Hide on mobile */
      :host([data-size="Extra Large 4x1"]) {
        display: none;
      }

      :host([data-size="Small 1x1"]) {
        grid-column: span 1;
        grid-row: span 1;
      }

      :host([data-size="Medium 2x1"]) {
        height: 280px;
        grid-column: span 2;
      }

      :host([data-size="Large 2x2"]) {
        height: 480px;
        grid-column: span 2;
        grid-row: span 2;
      }


      @media screen and (min-width: 768px) {

        :host([data-size="Medium 2x1"]),
        :host([data-size="Large 2x2"]) {
          height: unset;
        }


        :host([data-size="Extra Large 4x1"]) {
          display: block;
          grid-column: 1 / -1;
          grid-row: span 1;
          height: 480px;
        }
      }
    `]}customElements.define("dna-collection-ingrid",DNACollectionInGrid);class DNACollectionGrid extends WithProfiler(RespondToViewport(LitElement)){static properties={products:{type:Array},showCardCarousels:{type:Boolean,attribute:"show-card-carousels"},enableHoverImage:{type:Boolean,attribute:"enable-hover-image"},status:{type:String},filtersActive:{type:Boolean,attribute:"filters-active",reflect:!0},filtersApplied:{type:Boolean,attribute:"filters-applied"},quickAdd:{type:Boolean,attribute:"quick-add"},quickView:{type:Boolean,attribute:"quick-view"},inGrids:{type:Array},searchandising:{type:Array},isSearch:{type:Boolean},collectionHandle:{type:String},totalResults:{type:Number},fitTips:{type:Array},sectionId:{type:String,attribute:"section-id"},sectionPosition:{type:Number,attribute:"section-position"},experimentationTrackingKey:{type:String,attribute:"experimentation-tracking-key"},trackingKey:{type:String,attribute:"tracking-key"},showColorCount:{type:Boolean,attribute:"show-color-count"},hideProductColorCount:{type:Boolean,attribute:"hide-product-color-count"},showEditorialAltImage:{type:Boolean,attribute:"show-editorial-alt-image",reflect:!0}};constructor(){super(),this.products=[],this.status="PENDING",this.inGrids=[],this.searchandising=[],this.isSearch=!1,this.collectionHandle="",this.totalResults=0,this.sectionId="",this.fitTips=[]}connectedCallback(){super.connectedCallback(),this.$section=this.closest(".shopify-section"),this.experimentationTrackingKey?.length&&this.$section.setAttribute("data-experiment-selector",this.experimentationTrackingKey),document.addEventListener("DOMContentLoaded",()=>{this.isSearch||this.trackProductListViewed()})}disconnectedCallback(){super.disconnectedCallback()}updated(changedProperties){const savedScrollPosition=sessionStorage.getItem("rothys_scroll_position");changedProperties.has("totalResults")&&this.status==="COMPLETE"&&savedScrollPosition&&window.requestAnimationFrame(()=>{window.scrollTo(0,savedScrollPosition),sessionStorage.removeItem("rothys_scroll_position")})}async trackProductListViewed(){(window.location.href.includes("/collections")||window.location.href.includes("/search"))&&Segment?.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.PRODUCT_LIST_VIEWED)})}getAutoGridItemOrder(inGrid){const order=Number.parseInt(inGrid.order);return Number.isNaN(order)?1e3:!this.filtersActive||order===0||inGrid.size==="Small 1x1"?order:inGrid.size==="Medium 2x1"||inGrid.size==="Large 2x2"?order%2===0?order-1:order:inGrid.size==="Extra Large 4x1"&&order%4===0?order-1:order}trackSearchandisingClick(event,item){Segment.protect(()=>{const dataObj={searchandising_click_link:event.target.closest(".js-searchandising-banner-link")?.href,searchandising_click_text:item.header_text,searchandising_context:"banner",searchandising_query:new URLSearchParams(window.location.search)?.get("q")},$cta=event.target.closest(".js-searchandising-cta");$cta&&(dataObj.searchandising_click_link=$cta.href,dataObj.searchandising_click_text=$cta.innerText.trim(),dataObj.searchandising_context="cta"),Segment.track(Segment.CONSTANTS.EVENTS.SEARCHANDISING_BANNER_CLICKED,dataObj)})}renderSearchandisingBannerContent(item){return html`
      <div class="searchandising-banner__content">
        <p class="searchandising-banner__content-headline">${item.header_text}</p>
        <p class="searchandising-banner__content-subline">${item.body_text}</p>
        ${when(item.cta_link||item.second_cta_link,()=>html`
            <div class="searchandising-banner__content-cta-container">
              ${when(item.cta_link,()=>html`
                  <sl-button
                    variant="underline"
                    class="searchandising-banner__content-cta js-searchandising-cta"
                    href="${item.cta_link}"
                  >
                    ${item.cta_text}
                  </sl-button>
                `,()=>nothing)}
              ${when(item.second_cta_link,()=>html`
                  <sl-button
                    variant="underline"
                    class="searchandising-banner__content-cta js-searchandising-cta"
                    href="${item.second_cta_link}"
                  >
                    ${item.second_cta_text}
                  </sl-button>
                `,()=>nothing)}
            </div>
          `,()=>nothing)}
      </div>
      <div class="searchandising-banner__image">
        <picture>
          ${item.mobile_image_url?html`
                  <source media="(max-width: 767px)" srcset="${item.mobile_image_url}">
                `:nothing}
          <img
            src="${item.image_url}"
            alt="
              ${window.innerWidth<768?item.mobile_image_alt:item.image_alt}"
          >
        </picture>
      </div>`}renderSearchandisingBanner(){const item=this.searchandising[0];return html`
      ${when(item.cta_link||item.second_cta_link,()=>html`
          ${when(item.cta_link,()=>html`
              <a
                class="searchandising-banner js-searchandising-banner-link"
                href="${item.cta_link?item.cta_link:item.second_cta_link}"
                @click=${e=>this.trackSearchandisingClick(e,item)}
              >
                ${this.renderSearchandisingBannerContent(item)}
              </a>
            `,()=>nothing)}
        `,()=>html`
          <div
            class="searchandising-banner"
            @click=${e=>this.trackSearchandisingClick(e,item)}
          >
            ${this.renderSearchandisingBannerContent(item)}
          </div>
        `)}
    `}render(){return this.status==="PENDING"?html`<slot name="loading"></slot>`:html`
      <div class='card-grid'
        aria-live="polite"
        data-cnstrc-search=${this.isSearch?!0:nothing}
        data-cnstrc-browse=${this.isSearch?nothing:!0}
        data-cnstrc-filter-name=${this.isSearch?nothing:"group_id"}
        data-cnstrc-filter-value=${this.isSearch?nothing:this.collectionHandle}
        data-cnstrc-num-results=${this.totalResults}
      >
        ${when(this.status==="ERROR",()=>html`<p>Error loading products</p>`,()=>nothing)}

        ${when(this.searchandising?.length&&!this.filtersApplied,()=>this.renderSearchandisingBanner(),()=>nothing)}
        
        ${repeat(this.products,product=>product.id,(product,index)=>html`
              <dna-product-card
                style="order: ${index+1};"
                image-loading=${index>3?"lazy":"eager"}
                .product=${product}
                ?show-carousel=${this.showCardCarousels}
                ?enable-hover-image=${this.enableHoverImage}
                ?quick-add=${this.quickAdd}
                ?quick-view=${this.quickView}
                ?show-color-count=${this.showColorCount}
                ?hide-product-color-count=${this.hideProductColorCount}
                ?show-editorial-alt-image=${this.showEditorialAltImage}
                data-cnstrc-item-id=${product.id}
                data-cnstrc-item-name=${product.title}
                data-cnstrc-item-variation-id=${product.variation_id}
                section-id=${this.sectionId}
                section-position=${this.sectionPosition}
                tracking-key=${this.trackingKey}
              >
                <div class="product-card skeleton">
                  <div class="skeleton--small-text"></div>
                  <div class="skeleton--thumbnail product-card__thumbnail"></div>
                  <div class="skeleton--heading product-card__title"></div>
                  <div class="skeleton--small-text"></div>
                </div>
              </dna-product-card>
            `)}
          ${repeat(this.inGrids,inGrid=>inGrid.order,inGrid=>{const allowedRegions=inGrid.show_in_regions,noImage=this.isMobile&&!inGrid.image_mobile||!this.isMobile&&!inGrid.image_desktop;return this.filtersApplied||allowedRegions?.length&&!allowedRegions?.includes(window.Shopify.country)||noImage?nothing:html`
                <dna-collection-ingrid
                  .data=${inGrid}
                  data-size="${inGrid.size}"
                  style=${styleMap({order:this.getAutoGridItemOrder(inGrid)})}
                ></dna-collection-ingrid>
              `})}
      </div>
      ${this.quickView?html`<dna-quick-view .fitTips=${this.fitTips} section-id="${this.sectionId}"></dna-quick-view>`:nothing}
    `}static styles=[styles.typography,styles.shoelace,styles.skeleton,css`
      * {
        box-sizing: border-box;
      }
      .card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        grid-auto-rows: auto;
      }
      /* Safari grid layout fix */
      .card-grid > * {
        max-width: 100%;
      }
      /* breakpoint-mobile */
      @media screen and (min-width: 768px) {
        .card-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

      }
      /* breakpoint-tablet */
      @media screen and (min-width: 1024px) {
        :host([filters-active]) .card-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          /* Safari grid layout fix */
          max-width: calc(100vw - 360px);
        }
      }
      .searchandising-banner {
        grid-column: span 2;
        border: 1px solid #03143B40;
        border-top: none;
        height: 100%;
        min-height: 280px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        position: relative;

        @media screen and (min-width: 768px) {
          min-height: unset;
        }

        .searchandising-banner__content {
          color: var(--dna-brand-reverse);
          width: 80%;
          padding: 0 0 var(--dna-space-6) var(--dna-space-4);
          display: flex;
          flex-direction: column;
          gap: var(--dna-space-4);
          position: relative;
          z-index: 1;

          @media screen and (min-width: 768px) {
            padding: var(--dna-space-10);
          }

          .searchandising-banner__content-headline {
            font: var(--dna-h3-font);
            margin: 0;

            @media screen and (min-width: 768px) {
              font: var(--dna-h4-font);
            }
          }
          .searchandising-banner__content-subline {
            font: var(--dna-body-p2-font);
            margin: 0;

            @media screen and (min-width: 768px) {
              font: var(--dna-body-p1-font);
            }
          }
          .searchandising-banner__content-cta-container {
            display: flex;
            gap: var(--dna-space-6);
          }
        }
        .searchandising-banner__image {
          position: absolute;
          width: 100%;
          height: 100%;

          picture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            display: block;
          }
        }
      }
    `]}customElements.define("dna-collection-grid",DNACollectionGrid);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-product-grid.js.map?v=24395646975986788411760568442