import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import*as paths from"@dna/paths";import styles from"@dna/styles";import{renderPrice,splitProductName,t,updateCartQuantity}from"@dna/utils";import{LitElement,css,html,nothing,repeat,svg,when}from"@lit";const infoSvg=svg`
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6.49316" r="5.25" stroke="#00163B" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 8.74316V6.49316" stroke="#00163B" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 4.61828V4.53895" stroke="#00163B" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`,HIDE_OPTIONS=["color","title"];class DNACartItem extends WithProfiler(RespondToViewport(LitElement)){static properties={item:{type:Object},finalSaleTooltip:{type:String},itemLimit:{type:Number},loading:{type:Boolean,reflect:!0},removing:{type:Boolean,reflect:!0},preorder:{type:String},backorder:{type:String},comingSoon:{type:String},estimatedShipDate:{type:String},maximumAdded:{type:String},orderDiscount:{type:Number},quantityOutOfStock:{type:String},showQuantityError:{type:Boolean}};constructor(){super(),this.item={},this.loading=!1,this.removing=!1}get formattedFinalPrice(){return this.item.final_price?renderPrice(this.item.final_price*this.item.quantity):!1}get formattedOriginalPrice(){if(!this.item.original_price)return!1;const renderedPrice=this.isDiscounted?this.item.final_price:this.item.original_price;return renderPrice(renderedPrice*this.item.quantity)}get isFinalSale(){return this.item?.properties?._LPROP?this.item.properties._LPROP==="Final Sale":!1}get isDiscounted(){return Number(this.item.final_price)<Number(this.item.original_price)}get formattedCompareAtPrice(){const comparePriceProperties=this.item?.properties?._compare_at_price,comparePriceVariant=this.item?.variant?.compare_at_price,compareAtPrice=comparePriceVariant||comparePriceProperties,isValidCompareAtPrice=this.item.original_price<compareAtPrice;if(!comparePriceProperties&&!comparePriceVariant&&!this.isDiscounted||!isValidCompareAtPrice)return!1;let renderedPrice;return this.isDiscounted?renderedPrice=this.item.original_price:renderedPrice=compareAtPrice,renderPrice(renderedPrice*this.item.quantity)}get productName(){return splitProductName(this.item.product_title)}get isFreeProduct(){return this.item?.properties?._free_product==="true"}_renderOptions(){return this.item.product_has_only_default_variant||this.item.product_type==="Virtual Gift Cards"?nothing:this.item.options_with_values.filter(option=>!(HIDE_OPTIONS.includes(option.name.toLowerCase())||option.name.toLowerCase()==="width"&&option.value.toLowerCase()==="medium")).map(option=>html` <div class="p4 cart-item__options flex">
      	<span class="cart-item__options-name">
         ${option.name==="Size"&&Shopify.country!=="US"?`${option.name} (US)`:option.name}:
        </span>
        <span class="cart-item__options-value">${option.value}</span>
      </div>`)}_renderPrices(){return html`<span class="cart-item__prices p3">
        <div class="cart-item__price-wrapper 
          ${this.formattedCompareAtPrice?"cart-item__price-wrapper--markdown":""}
        ">
        ${this.formattedCompareAtPrice?html`<s>${this.formattedCompareAtPrice}</s>`:nothing}
        ${this.item.properties._free_product==="true"?html`<span>${t("cart.general.free")}</span>`:this.formattedOriginalPrice?html`<span>${this.formattedOriginalPrice}</span>`:nothing}
        </div>
      </span>`}_renderFinalSale(){let result=nothing;return this.isFinalSale&&(result=html`<p class="final-sale-msg flex flex-align-center">
          <span class="badge strong">Final Sale</span>
          <sl-tooltip content=${this.finalSaleTooltip}>
            ${infoSvg}
          </sl-tooltip>
        </p>`),result}_renderPreorder(){let result=nothing,experience="";if(this.item.properties?._preorder_message){switch(this.item.properties._preorder_message){case"pre-order":experience=this.preorder;break;case"back-order":experience=this.backorder;break;default:experience=this.comingSoon;break}const shipDate=new Date(`${this.item.properties._preorder_ship_date}T12:00:00`);shipDate.setDate(shipDate.getDate()+7);const month=shipDate.toLocaleString("default",{month:"short"}),day=shipDate.getDate(),year=shipDate.getFullYear();result=html`
        <div class="cart-item__preorder">
          <strong class="badge">${experience}</strong>
          <span>${this.estimatedShipDate} ${month.toUpperCase()} ${day}, ${year}</span>
        </div>`}return result}_renderErrorMessaging(){const errorMessage=this.item.max_ordered?this.maximumAdded:this.showQuantityError?this.quantityOutOfStock:"";return html`
      <div
        aria-live="polite"
        aria-relevant="additions"
        class="cart-item__limit p4 ${errorMessage?.length?" cart-item__limit--animated":" visually-hidden"}"
      >
        ${errorMessage}
      </div>
    `}_renderDiscountBadge(){let discounts=this.item.discounts;if(discounts.length===2){const hasZeroDiscount=discounts.some(discount=>discount.amount===0),hasEmptyTitle=discounts.some(discount=>discount.title==="");if(hasZeroDiscount&&hasEmptyTitle){const zeroAmountDiscount=discounts.find(discount=>discount.amount===0),nonZeroAmountDiscount=discounts.find(discount=>discount.amount!==0);discounts=[{title:zeroAmountDiscount.title||nonZeroAmountDiscount.title,amount:nonZeroAmountDiscount.amount}]}}return html`
        ${repeat(discounts,discount=>discount.title,discount=>{const discountAmount=Number(discount.amount);if(discountAmount>0){const formattedAmount=renderPrice(discountAmount);return html`
              <div class="cart-item__discount">
                <div>
                  ${paths.discountTag}
                  <span class="cart-item__discount-title">${discount.title}</span>
                </div>
                <span class="cart-item__discount-amount">(-${formattedAmount})</span>
              </div>`}return""})}
      `}_renderLowStockWarning(){return this.item.product_type==="Virtual Gift Cards"?nothing:this.item.properties._low_stock?html`
        <span class="cart-item__stock-warning p3">
          ${t("cart.general.stock_warning")}
        </span>
      `:nothing}_handleQuantityChange=event=>{this.updateQuantity(event.detail.value),event.detail.type==="increment"?Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.CART_ITEM_QUANTITY_INCREASED)}):Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.CART_ITEM_QUANTITY_DECREASED)}),this.dispatchEvent(new CustomEvent("dna-change"))};async updateQuantity(quantity){this.loading=!0;try{await updateCartQuantity([{id:this.item.key,quantity}],!1),setTimeout(()=>{this.loading=!1,this.showQuantityError=!1,this.item.quantity===0&&(this.removing=!0)},200)}catch{this.showQuantityError=!0,this.loading=!1}}render(){let variantItemUrl=this.item.url;return variantItemUrl.includes("?variant")||(variantItemUrl=`${this.item.url}?variant=${this.item.variant_id}`),html`
      <div class="cart-item__media">
        <a href="${variantItemUrl}" class=${this.isFreeProduct?"disabled":nothing}>
          ${this.item.image?html`
              <dna-image
                class="cart-item__image cover"
                aspectRatio="1"
                src="${this.item.image}"
                alt="${this.item.product_title}"
                loading="eager"
                sizes="(max-width: 768px) 200px, (min-width: 768px) 400px">
              </dna-image>
              `:nothing}
        </a>
      </div>
      <span class="cart-item__details p3">
        <a href="${variantItemUrl}" class="cart-item__title cart-item__style ${this.isFreeProduct?"disabled":""}">${this.productName.style}</a>
        ${this.productName.color?html`<p class="p4 cart-item__options">${this.productName.color}</p>`:""}
        ${this.item.options_with_values?this._renderOptions():""}
        ${this.isMobile?this._renderPrices():nothing}
      </span>
      <div class="cart-item__meta">
        ${this._renderLowStockWarning()}
        ${this._renderDiscountBadge()}
        ${this._renderFinalSale()}
        ${this._renderPreorder()}
        ${this._renderErrorMessaging()}
      </div>
      <div class="cart-item__quantity-input">
        ${when(this.isFreeProduct,()=>html`
            <a 
              role="button" 
              aria-label="Remove ${this.item.product_title}" 
              class="cart-item__quantity-remove"
              @click=${()=>this.updateQuantity(0)}
              >
                ${t("cart.general.remove")}
              </a>
          `,()=>html`
            <dna-quantity-input
              disabled
              initial=${this.item.quantity}
              .disableIncrement=${this.item.max_ordered}
              @change-quantity=${this._handleQuantityChange}
              .validate=${(quantity,action)=>action==="decrement"||!(quantity-1>this.itemLimit)}
            ></dna-quantity-input>
          `)}
      </div>
      ${this.isMobile?nothing:this._renderPrices()}
      
    `}static styles=[styles.flex,styles.typography,css`
      :host {
        opacity: 1;
        width: 100%;
        display: grid;
        grid-template-columns: 180px auto;
        grid-template-rows: minmax(54px, auto) minmax(44px, auto) 64px;
        grid-template-areas:
            "media details"
            "media meta"
            "media quantity";
        transition: opacity .2s ease;
      }

      :host([loading]) {
        opacity: .5;
      }

      :host([removing]) {
        opacity: 0;
      }

      /* breakpoint-tablet */
      @media screen and (min-width: 768px) {
        :host {
          width: 100%;
          display: grid;
          grid-template-columns: 180px auto 100px;
          grid-template-rows: minmax(81px, auto) minmax(47px, auto) 60px;
          grid-template-areas:
          "media details price"
          "media meta meta"
          "media quantity quantity";
        }
      }

      .cart-item__media {
        grid-area: media;
        display: flex;
        background-color: var(--dna-color-sandstone);
      }
      .cart-item__media a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .cart-item__media a.disabled {
        pointer-events: none;
      }
      .cart-item__media a:focus {
        outline-style: solid;
        outline-color: var(--dna-color-midnight);
        outline-offset: -1px;
      }
      .cart-item__media img {
        width: 100%;
        height: auto;
      }

      .cart-item__image {
        width: 100%;
        height: auto;
      }
      .cart-item__details {
        grid-area: details;
        font-size: 10px;
        padding: 16px 16px 0;
      }
      .cart-item__style {
        font-size: 14px;
      }
      .cart-item__details a {
        color: var(--dna-color-text);
        text-decoration: none;
        text-transform: capitalize;
      }
      .cart-item__style.disabled {
        pointer-events: none;
      }
      .cart-item__options {
        font-size: 12px;
        line-height: 18px;
        text-transform: capitalize;
      }
      .cart-item__options .cart-item__options-value {
        margin-left: 5px;
      }
      .cart-item__stock-warning {
        color: var(--dna-utility-attention);
      }
      .cart-item__prices {
        font-size: 12px;
      }
      .cart-item__price-wrapper .visually-hidden {
        visibility: hidden;
        display: none;
      }
      .cart-item__price-wrapper--markdown {
        color: var(--dna-utility-attention);
      }
      .cart-item__price-wrapper--markdown s {
        color: var(--dna-color-midnight);
        font: var(--dna-body-p3-font);
        flex: 1 1 100%;
      }
      .cart-item__discounted-prices {
        margin: 0;
      }
      .cart-item__old-price {
        color: var(--dna-brand-neutral);
      }

      .cart-item__remove {
        grid-area: remove;
      }
      .cart-item__remove::part(base) {
        color: var(--dna-color-text);
        text-decoration: underline;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 1px;
        width: min-content;
      }
      .cart-item__remove::part(label) {
        padding: 0;
        margin-top: 18px;
      }
      .cart-item__quantity-input {
        grid-area: quantity;
        padding: 0 16px 24px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: flex-start;
      }

      .cart-item__quantity-remove {
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.5px;
        cursor: pointer;
        text-decoration: underline;
      }

      .final-sale-msg {
        margin: 0;
        gap: 6px;
      }

      .final-sale-msg .badge,
      .cart-item__preorder .badge {
        font-size: 12px;
        letter-spacing: 0.5px;
      }

      .cart-item__preorder span {
        font: var(--dna-body-p4-font)
      }

      .cart-item__details p {
        margin: 0;
      }

      .cart-item__meta {
        grid-area: meta;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 16px 16px;
      }

      .cart-item__preorder {
        display: flex;
        flex-direction: column;
      }

      .cart-item__preorder .badge {
        font-weight: 500;
        letter-spacing: 0.5px;
        line-height: 18px;
      }

      .cart-item__limit {
        color: var(--dna-utility-attention);
        line-height: 14px;
        opacity: 0;
        transform: translateY(100%);
        transition: opacity .3s ease, transform .3s ease;
      }

      .cart-item__limit--animated {
        opacity: 1;
        transform: translateY(0);
        margin-top: 12px;
        margin-bottom: -8px;
      }

      .cart-item__discount {
        display: flex;
        flex-flow: column;
      }

      .cart-item__discount-title {
        font: var(--dna-label-s-font);
        letter-spacing: 2px;
        margin-left: 4px;
        margin-right: 8px;
      }

      .cart-item__discount-amount {
        font: var(--dna-body-p4-font);
        flex: 0 0 25%;
      }

      sl-tooltip {
          --max-width: 200px;
        }

      /* breakpoint-tablet */
      @media screen and (min-width: 768px) {
        .cart-item__details {
          font-size: 12px;
          padding: 16px 24px 4px;
        }

        .cart-item__prices {
          padding: 16px 40px 0 0;
          grid-area: price;
          text-align: end;
          font-size: 14px;
        }

        .cart-item__quantity-input {
          padding: 4px 24px 16px;
        }

        .cart-item__details p {
          margin: initial;
          line-height: 18px;
        }

        .cart-item__style {
          display: block;
          margin-bottom: 4px;
          line-height: 20px;
        }
        
        .cart-item__style:focus {
          outline-style: solid;
          outline-color: var(--dna-color-midnight);
          outline-offset: var(--dna-focus-outline-offset);
        }

        .cart-item__meta {
          gap: 7px;
          padding: 5px 40px 5px 24px
        }

        .cart-item__preorder span {
          font: var(--dna-body-p4-font)
        }
        sl-tooltip::part(body) {
          font-weight: 400;
          letter-spacing: 0.5px;
          text-align: center;
          padding: 6px 8px;
        }

        .cart-item__limit--animated {
          margin-bottom: 0px;
          margin-top: 8px;
        }
      }
    `]}customElements.define("dna-cart-item",DNACartItem);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-cart-item.js.map?v=114766050058330893351760568440