1import{LitElement,css,html,nothing}from"@lit";import*as paths from"@nova/paths";import styles from"@nova/styles";import{updateCartQuantity}from"@nova/utils";class NovaQuantityInput extends LitElement{static properties={key:{},label:{},initial:{type:Number},value:{state:!0},min:{type:String,attribute:"min"},max:{type:String,attribute:"max"},limit:{type:String,attribute:"limit"},showButtons:{type:Boolean,attribute:"show-buttons",converter:value=>value==="true"}};constructor(){super(),this.broadcast=this.broadcast.bind(this),this.id=Math.random()*1e5,this.min="0",this.max="",this.limit=""}connectedCallback(){super.connectedCallback(),this.inMiniCart=this.classList.contains("cart-item__quantity-input"),this.inCart=this.classList.contains("cart-item__quantity"),this.errorMessageEl=this.closest(".js-qty-container")?.querySelector(".js-qty-error-message"),this.errorLimitMessageEl=this.closest(".js-qty-container")?.querySelector(".js-qty-error-message-limit"),this.buyButton=document.querySelector(".js-product-buy-button"),this.miniCartCheckoutButton=document.querySelector("nova-mini-cart")?.shadowRoot?.querySelector(".js-minicart-checkout"),this.cartCheckoutButton=document.querySelector(".inline-cart")?.querySelector('sl-button[type="submit"]'),this.textileTotalPriceElem=document.querySelector(".js-b2b-textile-calculated-price-total"),this.value=this.initial,!this.inCart&&!this.inMiniCart&&(this.updateContent=this.updateContent.bind(this),document.addEventListener("nova:product:render-quantity-input",this.updateContent)),this.inCart&&(this.updateQtyInCart=this.updateQtyInCart.bind(this),document.addEventListener("changeQuantityStartedInCart",this.updateContent),document.addEventListener("changedQuantityInCart",this.updateQtyInCart))}disconnectedCallback(){super.disconnectedCallback(),!this.inCart&&!this.inMiniCart&&document.removeEventListener("nova:product:render-quantity-input",this.updateContent),this.inCart&&(document.removeEventListener("changeQuantityStartedInCart",this.updateContent),document.removeEventListener("changedQuantityInCart",this.updateQtyInCart))}updateContent(event){const newMax=event.detail.html?.getAttribute("max");newMax&&(this.setAttribute("max",newMax),this.max=newMax,this.value>Number(newMax)&&(this.value=Number(newMax),this.broadcast()));const newMin=event.detail.html?.getAttribute("min");newMin&&(this.setAttribute("min",newMin),this.min=newMin,this.value<Number(newMin)&&(this.value=Number(newMin),this.broadcast()));const newLimit=event.detail.html?.getAttribute("limit");newLimit&&(this.limit=newLimit,this.value>Number(newLimit)&&this.broadcast())}async updateQtyInCart(event){const{key,value}=event.detail;await updateCartQuantity([{id:key,quantity:value}],!1),location.reload()}willUpdate(changedProperties){changedProperties.has("initial")&&(this.value=this.initial)}broadcast(){const $input=this.renderRoot.querySelector("input.input");if($input&&($input.value=this.value),this.inMiniCart){if(this.errorMessageEl)if(this.value<Number(this.min)){this.errorMessageEl.classList.remove("hidden"),this.miniCartCheckoutButton.classList.add("checkout-disabled");return}else this.errorMessageEl.classList.add("hidden"),this.miniCartCheckoutButton.classList.remove("checkout-disabled");if(this.errorLimitMessageEl&&this.limit)if(this.value>Number(this.limit)){this.errorLimitMessageEl.classList.remove("hidden"),this.miniCartCheckoutButton.classList.add("checkout-disabled");return}else this.errorLimitMessageEl.classList.add("hidden"),this.miniCartCheckoutButton.classList.remove("checkout-disabled");this.dispatchEvent(new CustomEvent("changeQuantityStarted",{bubbles:!0,composed:!0,detail:{key:this.key,value:this.value}}))}else if(this.inCart){if(this.errorMessageEl)if(this.value<Number(this.min)){this.errorMessageEl.classList.remove("hidden"),this.cartCheckoutButton.setAttribute("disabled",!0);return}else this.errorMessageEl.classList.add("hidden"),this.cartCheckoutButton.removeAttribute("disabled");if(this.errorLimitMessageEl&&this.limit)if(this.value>Number(this.limit)){this.errorLimitMessageEl.classList.remove("hidden"),this.cartCheckoutButton.setAttribute("disabled",!0);return}else this.errorLimitMessageEl.classList.add("hidden"),this.cartCheckoutButton.removeAttribute("disabled");this.dispatchEvent(new CustomEvent("changedQuantityInCart",{bubbles:!0,composed:!0,detail:{key:this.key,value:this.value}}))}else{let hasError=!1;this.errorMessageEl&&(this.value<Number(this.min)?(this.errorMessageEl.classList.remove("hidden"),this.buyButton.setAttribute("disabled",!0),this.textileTotalPriceElem&&this.textileTotalPriceElem.classList.add("hidden"),hasError=!0):(this.errorMessageEl.classList.add("hidden"),this.buyButton.removeAttribute("disabled"),this.textileTotalPriceElem&&this.textileTotalPriceElem.classList.remove("hidden"))),this.errorLimitMessageEl&&this.limit&&!hasError&&(this.value>Number(this.limit)?(this.errorLimitMessageEl.classList.remove("hidden"),this.buyButton.setAttribute("disabled",!0),this.textileTotalPriceElem&&this.textileTotalPriceElem.classList.add("hidden")):(this.errorLimitMessageEl.classList.add("hidden"),this.buyButton.removeAttribute("disabled"),this.textileTotalPriceElem&&this.textileTotalPriceElem.classList.remove("hidden"))),this.dispatchEvent(new CustomEvent("changeQuantityStarted",{bubbles:!0,composed:!0,detail:{key:this.key,value:this.value}})),this.dispatchEvent(new CustomEvent("nova:product:b2b-textile-calculated-price",{bubbles:!0,composed:!0,detail:{value:this.value}}))}}increment(){this.max!==""&&this.value>=Number(this.max)||(this.value+=1,this.broadcast())}
1decrement(){this.value<=Number(this.min)||(this.value-=1,this.broadcast())}override(e){let value=Math.max(0,e.target.value);this.max!==""&&value>Number(this.max)&&(value=this.max),this.value=value,this.broadcast()}render(){return html` 2 <div class="wrapper"> 3 ${this.showButtons?html`<button @click=${this.decrement} name="decrease" class="decrease"> 4 ${paths.minus} 5 </button>`:nothing} 6 <label class="sr-only" for="Quantity-${this.id}"> 7 ${this.label|"Quantity"} 8 </label> 9 <input 10 id="Quantity-${this.id}" 11 class="input" 12 type="number" 13 name="updates[]" 14 value=${this.value} 15 @change=${this.override} 16 min=${this.min} 17 max=${this.max} 18 /> 19 ${this.showButtons?html`<button @click=${this.increment} name="increase" class="increase"> 20 ${paths.plus} 21 </button>`:nothing} 22 </div> 23 `}static styles=[styles.a11y,styles.variables,css` 24 .wrapper { 25 border: 1px solid var(--nova-color-grey-200); 26 border-radius: 0; 27 box-sizing: border-box; 28 color: #000; 29 position: relative; 30 display: flex; 31 height: var(--nova-forms-input-height); 32 } 33 .input { 34 color: var(--nova-color-grey-600); 35 text-align: center; 36 border: 0; 37 width: 100%; 38 flex-grow: 1; 39 -webkit-appearance: none; 40 appearance: none; 41 -moz-appearance: textfield; 42 font: var(--nova-body-font); 43 letter-spacing: var(--nova-body-letter-spacing); 44 text-transform: var(--nova-body-text-transform); 45 46 &:focus, 47 &:focus-visible { 48 outline: 0; 49 } 50 51 @media screen and (max-width: 767px) { 52 font-size: 16px; 53 } 54 } 55 button { 56 height: var(--nova-button-height-s); 57 width: calc(var(--nova-space-sm) + var(--nova-space-xs)); 58 flex-shrink: 0; 59 border: 0; 60 background-color: transparent; 61 cursor: pointer; 62 display: flex; 63 align-items: center; 64 justify-content: center; 65 color: var(--nova-color-grey-300); 66 } 67 .decrease { 68 padding: 0 var(--nova-space-2xs) 0 var(--nova-space-xs); 69 } 70 .increase { 71 padding: 0 var(--nova-space-xs) 0 var(--nova-space-2xs); 72 } 73 button:hover { 74 color: #000; 75 } 76 .input:-webkit-autofill, 77 .input:-webkit-autofill:hover, 78 .input:-webkit-autofill:active { 79 box-shadow: 0 0 0 10rem var(--color-background) inset !important; 80 -webkit-box-shadow: 0 0 0 10rem var(--color-background) inset !important; 81 } 82 .input::-webkit-outer-spin-button, 83 .input::-webkit-inner-spin-button { 84 -webkit-appearance: none; 85 margin: 0; 86 } 87 svg { 88 pointer-events: none; 89 } 90 :host(.cart-item__quantity-input) { 91 & button { 92 width: calc(2 * var(--nova-space-xs)); 93 } 94 95 .decrease { 96 padding: 0 0 0 var(--nova-space-xs); 97 } 98 .increase { 99 padding: 0 var(--nova-space-xs) 0 0; 100 } 101 } 102 .unit { 103 padidng-left: 5px; 104 105 } 106 `]}customElements.define("nova-quantity-input",NovaQuantityInput); 107//# sourceMappingURL=/cdn/shop/t/334/assets/component-quantity-input.js.map?v=127847337924013148051790255855
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.