https://outcast-clothing.us/cdn/shop/t/224/assets/quantity-selecto…?v=161687901519532059681789966910

1const n={MIN:1,MAX:1/0,DECREASE:"button[data-decrease]",INCREASE:"button[data-increase]",QUANTITY:"[data-quantity]",INPUT:"input[data-quantity-input]"},s={MAX:"data-quantity-max",MIN:"data-quantity-min",QUANTITY_VALUE:"data-quantity-value",STEP:"data-quantity-step"},u={LABEL:"aria-label",LIVE:"aria-live",DISABLED:"aria-disabled"};class h extends HTMLElement{constructor(){super(),this._quantity=1,this._min=n.MIN,this._max=n.MAX,this._step=1,this.increaseButton=null,this.decreaseButton=null,this.quantityEl=null,this.quantityInput=null,this.handleDecrease=()=>{this.updateQuantity(-this._step)},this.handleIncrease=()=>{this.updateQuantity(this._step)},this.handleInputChange=t=>{const e=parseInt(t.target.value,10);isNaN(e)||this.setQuantity(e,!1)},this.handleInputBlur=t=>{const e=parseInt(t.target.value,10);isNaN(e)?this.updateQuantityDisplay():this.setQuantity(this.clampValue(e))},this.handleKeydown=t=>{switch(t.key){case"ArrowUp":t.preventDefault(),this.updateQuantity(this._step);break;case"ArrowDown":t.preventDefault(),this.updateQuantity(-this._step);break;case"Enter":t.preventDefault(),t.target.blur();break}},this.initializeFromAttributes(),this.findElements()}static get observedAttributes(){return[s.QUANTITY_VALUE,s.MIN,s.MAX,s.STEP]}connectedCallback(){if(!this.validateElements()){console.error("QuantitySelector: Required elements not found");return}this.setupEventListeners(),this.setupAccessibility(),this.updateAll()}disconnectedCallback(){this.removeEventListeners()}attributeChangedCallback(t,e,i){if(e===i)return;const a=this.parseIntAttribute(i,this.getDefaultForAttribute(t));switch(t){case s.QUANTITY_VALUE:this.setQuantity(a);break;case s.MIN:this.setMin(a);break;case s.MAX:this.setMax(a);break;case s.STEP:this.setStep(a);break}}getDefaultForAttribute(t){switch(t){case s.MIN:return n.MIN;case s.MAX:return n.MAX;case s.STEP:return 1;default:return this._quantity}}initializeFromAttributes(){this._quantity=this.parseIntAttribute(this.dataset.quantityValue,1),this._min=this.parseIntAttribute(this.dataset.quantityMin,n.MIN),this._max=this.parseIntAttribute(this.dataset.quantityMax,n.MAX),this._step=this.parseIntAttribute(this.dataset.quantityStep,1),this._quantity=this.clampValue(this._quantity)}findElements(){this.increaseButton=this.querySelector(n.INCREASE),this.decreaseButton=this.querySelector(n.DECREASE),this.quantityEl=this.querySelector(n.QUANTITY),this.quantityInput=this.querySelector(n.INPUT)}validateElements(){const t=this.increaseButton&&this.decreaseButton,e=this.quantityEl||this.quantityInput;return!!(t&&e)}setupEventListeners(){var t,e;(t=this.decreaseButton)==null||t.addEventListener("click",this.handleDecrease),(e=this.increaseButton)==null||e.addEventListener("click",this.handleIncrease),this.quantityInput&&(this.quantityInput.addEventListener("input",this.handleInputChange),this.quantityInput.addEventListener("blur",this.handleInputBlur),this.quantityInput.addEventListener("keydown",this.handleKeydown))}removeEventListeners(){var t,e;(t=this.decreaseButton)==null||t.removeEventListener("click",this.handleDecrease),(e=this.increaseButton)==null||e.removeEventListener("click",this.handleIncrease),this.quantityInput&&(this.quantityInput.removeEventListener("input",this.handleInputChange),this.quantityInput.removeEventListener("blur",this.handleInputBlur),this.quantityInput.removeEventListener("keydown",this.handleKeydown))}setupAccessibility(){const t=u;this.decreaseButton&&!this.decreaseButton.getAttribute(t.LABEL)&&this.decreaseButton.setAttribute(t.LABEL,"Decrease quantity"),this.increaseButton&&!this.increaseButton.getAttribute(t.LABEL)&&this.increaseButton.setAttribute(t.LABEL,"Increase quantity"),this.quantityInput&&(this.quantityInput.type="number",this.quantityInput.setAttribute("min",this._min.toString()),this.quantityInput.setAttribute("max",this._max.toString()),this.quantityInput.setAttribute("step",this._step.toString()),this.quantityInput.setAttribute(t.LIVE,"polite")),this.quantityEl&&(this.quantityEl.setAttribute(t.LIVE,"polite"),this.quantityEl.setAttribute("role","status"))}updateQuantity(t){const e=this._quantity+t;this.setQuantity(e)}setQuantity(t,e=!0){const i=this._quantity,a=this.clampValue(t);a!==this._quantity&&(this._quantity=a,this.updateAll(e),this.emitQuantityChange(i))}setMin(t){var e;this._min=t,this._quantity=this.clampValue(this._quantity),(e=this.quantityInput)==null||e.setAttribute("min",t.toString()),this.updateAll()}setMax(t){var e;this._max=t,this._quantity=this.clampValue(this._quantity),(e=this.quantityInput)==null||e.setAttribute("max",t.toString()),this.updateAll()}setStep(t){var e;

1this._step=Math.max(1,t),(e=this.quantityInput)==null||e.setAttribute("step",this._step.toString())}clampValue(t){return Math.max(this._min,Math.min(this._max,t))}updateAll(t=!0){this.updateQuantityDisplay(t),this.updateButtonState(),this.updateDataAttributes()}updateQuantityDisplay(t=!0){const e=this._quantity.toString();this.quantityEl&&(this.quantityEl.textContent=e),this.quantityInput&&t&&(this.quantityInput.value=e)}updateButtonState(){const t=this._quantity<=this._min,e=this._quantity>=this._max,i=u.DISABLED;this.decreaseButton&&(this.decreaseButton.disabled=t,this.decreaseButton.setAttribute(i,t.toString())),this.increaseButton&&(this.increaseButton.disabled=e,this.increaseButton.setAttribute(i,e.toString()))}updateDataAttributes(){this.dataset.quantityValue=this._quantity.toString()}emitQuantityChange(t){const e={quantity:this._quantity,previousQuantity:t,min:this._min,max:this._max},i=new CustomEvent("quantity-change",{detail:e,bubbles:!0,cancelable:!1});this.dispatchEvent(i)}parseIntAttribute(t,e){if(!t)return e;const i=parseInt(t,10);return isNaN(i)?e:i}get quantity(){return this._quantity}set quantity(t){this.setQuantity(t)}get min(){return this._min}set min(t){this.setMin(t)}get max(){return this._max}set max(t){this.setMax(t)}get step(){return this._step}set step(t){this.setStep(t)}increment(){this.updateQuantity(this._step)}decrement(){this.updateQuantity(-this._step)}reset(){this.setQuantity(this._min)}}customElements.get("quantity-selector")||customElements.define("quantity-selector",h);