import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import*as paths from"@dna/paths";import styles from"@dna/styles";import{debounce,getSectionPosition,igGetExperimentControl}from"@dna/utils";import{LitElement,classMap,css,html,nothing,unsafeHTML,when}from"@lit";class DNAProductCarousel extends WithProfiler(RespondToViewport(LitElement)){static properties={experimentationTrackingKey:{type:String,attribute:"experimentation-tracking-key"},trackingKey:{type:String,attribute:"tracking-key"},numberOfProducts:{type:Number,attribute:"number-of-products"},items:{type:Array},sectionSettings:{type:Array},customConstructorItemName:{type:String,attribute:"custom-constructor-item-name"},activeSlide:{type:Number,state:!0},productAlignment:{type:String,attribute:"product-alignment"},slidesPerPageOverride:{type:Function},applyTest1218:{type:Boolean}};constructor(){super(),this.items=[],this.displayName="",this.sectionSettings=[],this.carouselSlidePosition=0,this.slideChangedOnLoad=!1,this.activeSlide=0,this.productAlignment="center",this.applyTest1218=!1}get maxItems(){return this.numberOfProducts||20}get filteredItems(){let filtered=this.items?this.items.filter(item=>item!==null):[];return this.sectionSettings.hide_out_of_stock_products&&(filtered=filtered.filter(item=>item.available)),filtered.slice(0,this.maxItems)}get headlineAlignment(){return this.sectionSettings?.headline_alignment}get headline(){return this.sectionSettings?.headline}get subline(){return this.sectionSettings?.subline}get ctaText(){return this.sectionSettings?.cta_text}get ctaUrl(){return this.sectionSettings?.cta_url}get showSubline(){return!!subline||!!ctaText&&!!ctaUrl}get showNavigation(){return this.filteredItems.length>4&&!this.isMobile}get slidesPerPage(){return this.slidesPerPageOverride?this.slidesPerPageOverride(this.viewport):this.viewport==="widescreen"||this.viewport==="desktop"?5.25:this.viewport==="tablet"?4.25:1.75}connectedCallback(){super.connectedCallback(),this.$section=this.closest(".shopify-section"),this.sectionPosition=getSectionPosition(this.$section),this.addEventListener("sl-slide-change",debounce(e=>{this._handleSlideChangeOnLoad(e)},250)),this.slideChangeOnLoadHandled=!1,this.experimentationTrackingKey?.length&&this.$section.setAttribute("data-experiment-selector",this.experimentationTrackingKey),(async()=>{const isTECH1218Control=await igGetExperimentControl({staging:"da7ce578-6b06-4acb-8cc2-e44f124bc26f",production:"b45702d3-2ecb-4694-8331-5eb25fef53cf"});this.applyTest1218=!1,!isTECH1218Control&&this.isMobile&&(this.applyTest1218=!0)})()}_handleSlideChangeOnLoad=event=>{event.detail.index<=0&&!this.slideChangeOnLoadHandled&&(this.slideChangedOnLoad=!0,this.slideChangeOnLoadHandled=!0),this.activeSlide=event.detail.index,this.slideChangedOnLoad?this.slideChangedOnLoad=!1:this._trackCarouselScrolled(event)};_trackCarouselScrolled=event=>{Segment.protect(()=>{if(this.slideChangedOnLoad)this.slideChangedOnLoad=!1;else{const $carouselSectionTitle=event.target.renderRoot.querySelector(".js-product-carousel-headline"),scrollDirection=event.detail.index>this.carouselSlidePosition?"next":"previous";this.carouselSlidePosition=event.detail.index,Segment.track(Segment.CONSTANTS.EVENTS.PRODUCT_CAROUSEL_SCROLLED,{product_carousel_section_title:$carouselSectionTitle?.textContent.trim(),product_carousel_scroll_direction:scrollDirection,product_carousel_pod_id:this.dataset.cnstrcRecommendationsPodId,section_page_position:this.sectionPosition,section_tracking_key:this.trackingKey})}})};_trackCarouselCTAClicked=event=>{Segment.protect(()=>{const $carouselSectionTitle=event.target.closest("dna-product-carousel").renderRoot.querySelector(".js-product-carousel-headline"),$clickedProductCarouselCTA=event.target.closest("sl-button");Segment.track(Segment.CONSTANTS.EVENTS.PRODUCT_CAROUSEL_CTA_CLICKED,{product_carousel_section_title:$carouselSectionTitle?.textContent.trim(),product_carousel_cta_link:$clickedProductCarouselCTA.getAttribute("href"),product_carousel_cta_text:$clickedProductCarouselCTA.textContent.trim(),product_carousel_pod_id:this.dataset.cnstrcRecommendationsPodId,section_page_position:this.sectionPosition,section_tracking_key:this.trackingKey})})};_renderHeader(){const showSubline=!!this.subline||!!this.ctaText&&!!this.ctaUrl;return html`
      ${when(this.headline,()=>html`
          <h2
            class="product-carousel__header-headline headline__${this.headlineAlignment} js-product-carousel-headline"
          >
            ${unsafeHTML(this.headline)}
          </h2>
        `,()=>nothing)}
      ${when(showSubline,()=>html`
          <div class="product-carousel__header-subline">
            <div class="product-carousel__header-subtext">${this.subline}</div>
            ${when(!this.isMobile,()=>html`
                <slot name="carousel-button" @click=${this._trackCarouselCTAClicked}></slot>
              `,()=>nothing)}
          </div>
        `,()=>nothing)}

    `}render(){if(this.filteredItems.length===0)return nothing;const noSubline=!this.subline&&this.ctaText&&this.ctaUrl;return html`
      <div>
        <div class="product-carousel__header ${noSubline?"no-subline":""}">
          ${this._renderHeader()}
        </div>
      </div>
      <div
        class=${classMap({"product-carousel__products":!0,"product-carousel__products--center":!this.isMobile&&this.filteredItems.length<4&&this.productAlignment==="center","product-carousel__products--right":!this.isMobile&&this.filteredItems.length<4&&this.productAlignment==="right"})}
      >
        <sl-carousel
          slides-per-page=${this.slidesPerPage}
          style="--aspect-ratio: unset; ${this.isMobile?nothing:"--slide-gap: 0px;"}"
          class=${this.sectionSettings?.cta_url?"":"no-cta"}
          ?navigation=${this.showNavigation}
          part="carousel"
          exportparts="carousel-item, product-card, scroll-container"
        >
          ${this.filteredItems.map(product=>html`
              <sl-carousel-item
                part="carousel-item"
                tabindex="0"
              >
                <dna-product-card
                  part="product-card"
                  class="product-card__product-carousel"
                  .product=${product}
                  tracking-key=${this.trackingKey}
                  section-position=${this.sectionPosition}
                  ?hide-product-color-count=${this.sectionSettings.hide_product_color_count}
                  ?hide-badges=${this.sectionSettings.hide_badges}
                  ?hide-wishlist-icon=${this.sectionSettings.hide_wishlist_icon}
                  ?show-editorial-alt-image=${this.sectionSettings.show_editorial_alt_image}
                  ?apply-test-1218=${this.applyTest1218}
                  enable-hover-image
                  data-cnstrc-item=${this.customConstructorItemName}
                  data-cnstrc-item-id=${product.id}
                  data-cnstrc-item-name=${product.title}
                  data-cnstrc-item-variation-id=${product?.variants?.[0]?.id??nothing}
                  data-cnstrc-strategy-id=${product?.strategy_id??nothing}
                  data-cnstrc-recommendations-pod-id=${this.dataset.cnstrcRecommendationsPodId??nothing}
                ></dna-product-card>
              </sl-carousel-item>
            `)}
          <span class="product-carousel__arrow product-carousel__arrow--previous" slot="previous-icon" ?hidden=${this.activeSlide===0||this.isMobile}>
            ${paths.chevronLeft}
          </span>
          <span class="product-carousel__arrow product-carousel__arrow--next " slot="next-icon" ?hidden=${this.activeSlide>=Math.ceil(this.filteredItems.length-this.slidesPerPage)||this.isMobile}>
            ${paths.chevronRight}
          </span>
        </sl-carousel>
      </div>
      ${when(this.isMobile&&this.sectionSettings?.cta_url,()=>html`
          <div class="product-carousel__button">
            <slot name="carousel-button" @click=${this._trackCarouselCTAClicked}></slot>
          </div>
        `,()=>nothing)}
    `}static styles=[styles.reset,styles.container,styles.typography,css`
      :host {
        position: relative;
      }
      @media screen and (min-width: 1024px) {
        .product-carousel__products {
          display: flex;
        }
      }
      @media screen and (min-width: 1024px) {
        :host sl-carousel {
          width: 100%;
        }
      }
      :host sl-carousel::part(scroll-container) {
        gap: 0;
        --aspect-ratio: 0;
      }
      .product-carousel__products--center sl-carousel::part(scroll-container) {
        justify-content: center;
      }
      .product-carousel__products--right sl-carousel::part(scroll-container) {
        justify-content: end;
      }
      :host sl-carousel::part(base) {
        grid-template-areas: 'slides' 'navigation';
        grid-template-columns: 1fr;
        gap: 0;
      }
      .product-carousel__arrow {
        color: var(--dna-color-midnight);
        background-color: red;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color:#FFFFFFB2;
      }

      .product-carousel__arrow--previous {
        padding-top: 7px;
        padding-right: 2px;
        margin-left: var(--dna-space-8);
      }

      .product-carousel__arrow--next {
        padding-top: 7px;
        padding-left: 2px;
        margin-right: var(--dna-space-8);
      }

      :host sl-carousel::part(navigation-button) {
        position: absolute;
        opacity: 0;
        transition: opacity 0.2s ease;
        border-radius: 50%;
        color: var(--dna-color-midnight);
      }

      :host sl-carousel:hover::part(navigation-button) {
        opacity: 1;
        pointer-events: auto;
      }

       :host sl-carousel::part(navigation-button--next) {
        right: 0;
      }
      :host sl-carousel-item {
        height: 100%;
        border-top: 1px solid var(--dna-color-light-grey);
        border-right: 1px solid var(--dna-color-light-grey);
        border-bottom: 1px solid var(--dna-color-light-grey);
      }
      .product-carousel__header {
        margin: var(--dna-space-4);
        margin-top: 0;
      }
      .product-carousel__header-headline {
        margin-top: 0;
        margin-bottom: 0;
        text-align: center;
        font: var(--dna-h3-font);
      }
      .headline__left {
        text-align: left;
      }
      .product-carousel__header-headline p {
        margin: 0;
      }
      .product-carousel__header-subline {
        display: flex;
        gap: var(--dna-space-3);
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      @media screen and (min-width: 1024px) {
        .product-carousel__header-subline {
          gap: unset;
          flex-direction: row;
          justify-content: space-between;
        }
      }
      .product-carousel__header-subtext {
        text-align: center;
        margin-top: var(--dna-space-2);
        font: var(--dna-body-p2-font);
      }
      .product-carousel__button {
        text-align: center;
        margin-top: var(--dna-space-6);
      }
      @media screen and (max-width: 768px) {
        .product-carousel__header-headline {
          font: var(--dna-h4-font);
        }
        :host sl-carousel::part(scroll-container) {
          padding-left: 0;
        }
        :host sl-carousel.no-cta::part(navigation) {
          position: relative;
          margin-top: 0px;
          margin-bottom: 52px;
        }
        :host sl-carousel.no-cta::part(navigation-button--previous) {
          position: absolute;
          top: 0;
          right: var(--dna-space-20);
       }
        :host sl-carousel.no-cta::part(navigation-button--next) {
          position: absolute;
          top: 0;
          right: var(--dna-space-4);
        }
      }
      @media screen and (min-width: 1024px) {
        .product-carousel__header {
          margin: var(--dna-space-6) var(--dna-space-10);
          margin-top: 0;
        }
        .product-carousel__header.no-subline {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }
        .product-carousel__header-subtext {
          font: var(--dna-body-p1-font);
          text-align: left;
        }
        .headline__center {
          text-align: center;
        }
        .headline__right {
          text-align: right;
        }
      }
    `]}customElements.define("dna-product-carousel",DNAProductCarousel);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-product-carousel.js.map?v=106103023799134514281760568442