@salla.sa/twilight-components/dist/components/salla-quantity-input.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$1 = /*@__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 maxQuantity = parseInt(this.host.getAttribute('max'));
        if (maxQuantity && value > maxQuantity) {
            value = maxQuantity;
        }
        if (value <= 1) {
            value = 1;
        }
        this.quantity = value;
        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: 'e7d9d747cb9498c384b7723067c81147dba9731c', class: "s-quantity-input" }, h("div", { key: '7b9b7849e00a68091647a8de34243481ddb5c2ed', class: "s-quantity-input-container" }, h("button", { key: '72032114d6b4294faf654c19909c8ddc6b46b6b6', 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: 'c229ef5206240d5ee27371498bf8fabf6a6c1050', name: "increment-button" })), h("input", { key: 'bb9c2ac443c6920085261e19c6c32ac705360020', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '1f3dfd851cc88f97c8f80a3bcd741e950061312e', 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: '1058e6b14c8918f960a74ee18e7ac5d77bc5e3bc', 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$1() {
    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$1);
            }
            break;
    } });
}
defineCustomElement$1();

const SallaQuantityInput = SallaQuantityInput$1;
const defineCustomElement = defineCustomElement$1;

export { SallaQuantityInput, defineCustomElement };