import{Segment}from"@dna/analytics";import{WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{LitElement,css,html,nothing,when}from"@lit";class DNACartToggle extends WithProfiler(LitElement){static properties={initialCount:{type:Number},count:{type:Number},showCount:{type:Boolean}};constructor(){super(),this.count=this.initialCount||0,this.showCount=!!customElements.get("sl-button"),document.addEventListener("dna:cart:items-count",event=>this._handleItemsCountChange(event))}willUpdate(changedProperties){changedProperties.has("initialCount")&&(this.count=this.initialCount)}connectedCallback(){super.connectedCallback(),customElements.whenDefined("sl-button").then(()=>{this.showCount=!0})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("dna:cart:items-count",this._handleItemsCount)}_handleItemsCountChange(event){this.count=event.detail.count}openCart(){document.dispatchEvent(new CustomEvent("dna:cart:open")),Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.CART_ICON_CLICKED)})}render(){return html`
      <sl-button
        variant="text"
        size="small"
        class="cart-toggle"
        @click=${this.openCart}
        role="button"
      >
        <slot name="bag-icon"></slot>
        ${when(this.count>0&&this.showCount,()=>html`
            <span class="cart-toggle__count">
              ${this.count}
            </span>
          `,()=>nothing)}
        <slot name="title"></slot>
      </sl-button>
    `}static styles=[styles.flex,styles.typography,css`
      .cart-toggle {
        position: relative;
        color: inherit;
        width: 24px;
        height: 24px;
        top: -2px;
      }
      .cart-toggle::part(base):hover,
      .cart-toggle::part(base):focus {
        color: var(--dna-color-reflex-blue);
      }
      .cart-toggle__count {
        aspect-ratio: 1;
        background-color: var(--dna-toggle-bg-color, var(--dna-color-midnight));
        border-radius: 100%;
        box-sizing: border-box;
        color: var(--dna-toggle-text-color, var(--dna-brand-reverse));
        font-size: 9px;
        font-weight: 400;
        letter-spacing: 0.5px;
        padding: 3px 3px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: -3px;
        right: -3px;
        min-height: calc(var(--dna-space-3) + var(--dna-space-0-5));
        min-width: calc(var(--dna-space-3) + var(--dna-space-0-5));
      }
      .cart-toggle__count:hover {
        background-color: var(--dna-color-reflex-blue);
      }
    `]}customElements.define("dna-cart-toggle",DNACartToggle);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-cart-toggle.js.map?v=162599114868151574261760566292