import{WithProfiler}from"@dna/mixins";import*as paths from"@dna/paths";import styles from"@dna/styles";import{t}from"@dna/utils";import{LitElement,classMap,css,html}from"@lit";class DNAQuantityInput extends WithProfiler(LitElement){static properties={key:{},label:{},initial:{type:Number},value:{state:!0},disabled:{type:Boolean},disableIncrement:{type:Boolean},validate:{type:Function}};constructor(){super(),this.broadcast=this.broadcast.bind(this)}connectedCallback(){super.connectedCallback(),this.value=this.initial}willUpdate(changedProperties){if(changedProperties.has("initial"))this.value=this.initial;else if(changedProperties.has("value")){const updatedValue=changedProperties.get("value");updatedValue&&(this.value=updatedValue)}}broadcast({type}){this.dispatchEvent(new CustomEvent("change-quantity",{bubbles:!0,composed:!0,detail:{key:this.key,value:this.value,type}}))}increment(){const newValue=this.value+1;this.validate&&!this.validate(newValue,"increment")||(this.value+=1,this.broadcast({type:"increment"}))}decrement(){if(!this.value)return;const newValue=this.value-1;this.validate&&!this.validate(newValue,"decrement")||(this.value-=1,this.broadcast({type:"decrement"}))}render(){return html`
      <span>
        <div class="wrapper">
          <button
            @click=${this.decrement}
            name="decrease"
            aria-label="${t("cart.label.decrement")}"
            class=${classMap({"icon-trash":this.value===1,"icon-decrease":this.value!==1})}
          >
          ${this.value===1?paths.trash:paths.cartMinus}
          </button>
          <div tabindex="0" class="input">
            <span class="sr-only">
              ${t("cart.label.quantity")}
            </span>
            ${this.value}
          </div>
          <button
            @click=${this.increment}
            ?disabled=${this.disableIncrement}
            name="increase"
            aria-label="${t("cart.label.increment")}"
          >
            ${paths.cartPlus}
          </button>
        </div>
      </span>
    `}static styles=[styles.a11y,css`
      .wrapper {
        border: 1px solid var(--border-color, rgb(230, 230, 230));
        border-radius: var(--border-radius, 0);
        box-sizing: border-box;
        color: var(--color, #000);
        background-color: var(--background, transparent);
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 100px;
        padding: 2px 10px;
        height: 40px;
      }
      .input,
      .input:disabled {
        color: currentColor;
        background-color: var(--background, transparent);
        font: var(--font);
        text-align: center;
        background-color: transparent;
        border: 0;
        -webkit-appearance: none;
        appearance: none;
        -moz-appearance: textfield;
        -webkit-text-fill-color: currentColor;
        opacity: 1; /* required on iOS */
        padding: 0 6px;
        height: 100%;
        display: flex;
        font-size: 14px;
        align-items: center;
        line-height: 20px;
      }
      button,
      button[disabled] {
        flex-shrink: 0;
        border: 0;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--button-color, var(--color, #000));
        padding: 0 10px;
        height: 100%;
        flex: 1;
      }
      button:hover {
        color: var(--button-color-hover, var(--color, #000));
      }
      button[disabled] {
        pointer-events: none;
        opacity: 0.5;
      }
      .input:-webkit-autofill,
      .input:-webkit-autofill:hover,
      .input:-webkit-autofill:active {
        box-shadow: 0 0 0 10rem var(--color-background) inset !important;
        -webkit-box-shadow: 0 0 0 10rem var(--color-background) inset !important;
      }
      .input::-webkit-outer-spin-button,
      .input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      button.icon-decrease {
        padding: 12px;
      }
      @media screen and (min-width: 768px) {
        .wrapper {
          padding: 4px 10px;
        }
      }
    `]}customElements.define("dna-quantity-input",DNAQuantityInput);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-quantity-input.js.map?v=173363882874460232121760566299