import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{richTextToHTML}from"@dna/utils";import{LitElement,css,html,nothing,repeat,unsafeHTML,when}from"@lit";const IDEAL_CARD_SIZE=230,IDEAL_CARD_SIZE_WIDE=264;class DNAFeaturedImageFilters extends RespondToViewport(WithProfiler(LitElement)){static properties={filters:{type:Array,state:!0},slidesPerPage:{type:Number,state:!0},applyTest1193:{type:Boolean,attribute:"apply-test-1193"}};constructor(){super(),this.filters=[],this.router=__DNA_GLOBAL__.utils.queryRouter,this.rafID=null,this.slCarouselReady=!1,this.applyTest1193=!1}connectedCallback(){super.connectedCallback(),this.router.events.addEventListener("queryChange",this._onQueryChange),this.slidesPerPage=Math.floor(window.innerWidth/(this.viewport==="widescreen"?IDEAL_CARD_SIZE_WIDE:IDEAL_CARD_SIZE)),window.addEventListener("resize",this._onWindowResize),this.querySelector(".featured-filters__image-list.sr-only")?.remove(),customElements.whenDefined("sl-carousel").then(()=>{this.slCarouselReady=!0})}disconnectedCallback(){super.disconnectedCallback(),this.router.events.removeEventListener("queryChange",this._onQueryChange),window.removeEventListener("resize",this._onWindowResize)}_onWindowResize=()=>{this.rafID||(this.rafID=window.requestAnimationFrame(()=>{this.rafID=null,this.slidesPerPage=Math.floor(window.innerWidth/(this.viewport==="widescreen"?IDEAL_CARD_SIZE_WIDE:IDEAL_CARD_SIZE))}))};_onQueryChange=()=>{this.requestUpdate()};_isFilterActive(filter){const activeQuery=this.router.query.get(),filterQuery=filter.query.split("&").reduce((acc,filterComponent)=>{const[filterKey,filterValue]=filterComponent.split("=");return!filterKey.length||!filterValue||(Object.hasOwn(acc,filterKey)||(acc[filterKey]=[]),acc[filterKey].push(filterValue.replaceAll("%20"," ").replaceAll("+"," "))),acc},{});return Object.keys(filterQuery).every(filterKey=>filterQuery[filterKey]?.every(filterValue=>activeQuery[filterKey]?.includes(filterValue)))}_handleFilterClick(e,filter){if(e.preventDefault(),this._isFilterActive(filter)){this.router.query.setQueryString("");return}this.router.query.setQueryString(filter.query),this._trackFeaturedFilterClick(filter)}_trackFeaturedFilterClick(filter){Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.COLLECTION_FEATURED_FILTER_CLICKED,{collection_featured_filter_title:filter.title,collection_featured_filter_link:`${window.location.pathname}/?${filter.query}`,collection_featured_filter_type:"featured filter"})})}_renderTile(filter){return html`
    <a href="#" class="featured-filters__image-filter" active="${this._isFilterActive(filter)||nothing}" @click=${e=>this._handleFilterClick(e,filter)}>
      <div class="featured-filters__image">
        <dna-image
          src="${filter.desktop_image}"
          loading="eager"
          fetch-priority="high"
          sizes="
            (min-width: 480px) 310px,
            (min-width: 768px) 390px,
            (min-width: 1024px) 528px
          "
        />
      </div>
      <div class="featured-filters__image-text">
      <h2 class="featured-filters__image-title">
        ${filter.title}
      </h2>
        ${unsafeHTML(richTextToHTML(JSON.stringify(filter.subline)))}
      </div>
    </a>
    `}render(){return html`
      ${when(this.applyTest1193,()=>nothing,()=>html`
          ${when(this.slCarouselReady,()=>html`
              <div class="featured-filters featured-filters--images">
                <div class="flex featured-filters__image-list">
                  ${when(!this.isMobile&&this.slidesPerPage<this.filters.length,()=>html`
                      <sl-carousel slides-per-page=${this.slidesPerPage} mouse-dragging navigation>
                        ${repeat(this.filters,filter=>filter.query,filter=>html`
                            <sl-carousel-item>
                              ${this._renderTile(filter)}
                            </sl-carousel-item>
                          `)}
                      </sl-carousel>
                    `,()=>repeat(this.filters,filter=>filter.query,filter=>this._renderTile(filter)))}
                </div>
              </div>
            `,()=>html`
              <slot></slot>
            `)}
        `)}
    `}static styles=[styles.reset,styles.typography,css`
      * {
        margin: 0;
      }

      .featured-filters__image-list {
        display: inline-flex;
        gap: var(--dna-space-2);
        overflow-x: auto;
        padding: 0 var(--dna-space-2) 0;
        scrollbar-width: none;
        justify-content: center;
      }
      
      .featured-filters__image-filter {
        background: var(--dna-color-sandstone);
        color: var(--dna-color-midnight);
        display: block;
        width: 155px;
        -webkit-tap-highlight-color: transparent;
      }
      
      
      .featured-filters__image-filter[active] {
        background: var(--dna-color-midnight);
        color: var(--dna-brand-reverse);
      }
      
      .featured-filters__image {
        font-size: 0;
        line-height: 0;
        min-height: 130px;
      }
      
      .featured-filters__image-text {
        font: 10px/13px var(--dna-font-sans);
        padding: var(--dna-space-2);
      }
      
      .featured-filters__image-title {
        font: 18px/26px var(--dna-font-serif);
      }
      
      /* breakpoint-tablet */
      @media screen and (min-width: 768px) {
        .featured-filters__image-list {
          display: flex;
          padding: 0;
        }
      
        .featured-filters__image-filter {
          background: none;
          width: 264px;
        }
      
        .featured-filters__image-filter[active] {
          background: unset;
          color: unset;
        }
      
        .featured-filters__image-filter[active] .featured-filters__image-text {
          background: var(--dna-color-midnight);
          color: var(--dna-brand-reverse);
        }

        .featured-filters__image {
          min-height: 180px;
        }
      
        .featured-filters__image-text {
          font-size: 13px;
          line-height: 18px;
        }
      
        .featured-filters__image-title {
          font-size: 22px;
          line-height: 32px;
        }
      }
      .featured-filters--images {
        padding-bottom: var(--dna-space-8);
        sl-carousel {
          --aspect-ratio: none;
          --slide-gap: 8px;
          --scroll-hint: 40px;
          transition: opacity .5s ease;
          .featured-filters__image-filter {
            width: unset;
          }
          &::part(base) {
            gap: 0;
          }
          &::part(scroll-container) {
            align-items: start;
          }
          &::part(navigation-button) {
            position: absolute;
            color: var(--dna-color-midnight);
            padding: var(--dna-space-1);
            border-radius: 100%;
            background: #F4F2EF66;
            transform: scale(0.5);
            transition: transform 0.4s ease;
          }
          &:hover::part(navigation-button) {
            transform: scale(1);
          }
          &::part(navigation-button--previous) {
            left: 0;
            margin-left: var(--dna-space-1);
          }
          &::part(navigation-button--next) {
            right: 0;
            margin-right: var(--dna-space-1);
          }
        }
      }
    `]}customElements.define("dna-featured-image-filters",DNAFeaturedImageFilters);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-featured-image-filters.js.map?v=157865469434681217091760566294