@salla.sa/twilight-components/dist/components/salla-quantity-input2.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { A as Add, M as Minus } from './minus.js';
import { H as Helper } from './Helper.js';

const sallaQuantityInputCss = "";

const SallaQuantityInput = /*@__PURE__*/ proxyCustomElement(class SallaQuantityInput extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Based on store setting: store.settings.product.manual_quantity
         */
        this.disableInput = false;
        this.hostAttributes = {};
        this.hasIncrementSlot = false;
        this.hasDecrementSlot = false;
        this.didLoaded = false;
        this.quantity = 1;
        this.fireChangeEvent = true;
    }
    /**
     * Workaround to fire change event for the input.
     */
    watchPropHandler() {
        if (!this.didLoaded) {
            return;
        }
        if (!this.fireChangeEvent) {
            this.fireChangeEvent = true;
            return;
        }
        Helper.debounce(() => {
            salla.document.event.fireEvent(this.textInput, 'change', {
                bubbles: true,
                detail: { productId: this.cartItemId, quantity: this.quantity }
            });
        });
    }
    async componentWillLoad() {
        await salla.onReady();
        this.disableInput = !salla.config.get('store.settings.product.manual_quantity');
        this.quantity = parseInt(this.host.getAttribute('value')) || 1;
        this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
        this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
    }
    componentDidLoad() {
        this.didLoaded = true;
        this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
    }
    getInputAttributes() {
        for (let i = 0; i < this.host.attributes.length; i++) {
            if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
                this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
            }
        }
        return this.hostAttributes;
    }
    /**
     * decrease quantity by one.
     * @return HTMLSallaQuantityInputElement
     */
    async decrease() {
        return this.setValue(this.quantity - 1);
    }
    /**
     * increase quantity by one.
     * @return HTMLSallaQuantityInputElement
     */
    async increase() {
        return this.setValue(Number(this.quantity) + 1);
    }
    /**
     * set quantity by one.
     * @return HTMLSallaQuantityInputElement
     */
    async setValue(value, fireChangeEvent = true) {
        this.fireChangeEvent = fireChangeEvent;
        let numericValue = parseInt(salla.helpers.digitsOnly(String(value ?? '')), 10);
        if (!Number.isFinite(numericValue) || numericValue < 1) {
            numericValue = 1;
        }
        let maxQuantity = parseInt(this.host.getAttribute('max'));
        if (maxQuantity && numericValue > maxQuantity) {
            numericValue = maxQuantity;
        }
        this.quantity = numericValue;
        return this.host;
    }
    render() {
        const inputAttributes = this.getInputAttributes();
        if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
            inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
        }
        return (h(Host, { key: '77565ee635cdda42e956be4fea503905fe4bf199', class: "s-quantity-input" }, h("div", { key: 'f8aa9fb2200032d503cdfc65a65bc2bf94e00eb8', class: "s-quantity-input-container" }, h("button", { key: '1711c74ee9b8f212c2651f9c3a2f3e6737fbe8f4', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: '65803c2b491b5dbb1ae79787eec6151f742b517f', name: "increment-button" })), h("input", { key: '1b16e0e0603d91b3a12c968a98575f4146f2d7b6', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), inputMode: "numeric", pattern: "[0-9]*", min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: 'ad33507fa617ddb6ebeee842c5f1f0b3595a475b', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '341b8e5d941e63c13c78061d24ecd2ba64d9a7a1', name: "decrement-button" })))));
    }
    get host() { return this; }
    static get watchers() { return {
        "quantity": ["watchPropHandler"]
    }; }
    static get style() { return sallaQuantityInputCss; }
}, [4, "salla-quantity-input", {
        "cartItemId": [8, "cart-item-id"],
        "disableInput": [32],
        "quantity": [32],
        "fireChangeEvent": [32],
        "decrease": [64],
        "increase": [64],
        "setValue": [64]
    }, undefined, {
        "quantity": ["watchPropHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-quantity-input"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-quantity-input":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaQuantityInput);
            }
            break;
    } });
}
defineCustomElement();

export { SallaQuantityInput as S, defineCustomElement as d };