import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-da72c774.js';

const styleCss = "x-quantity x-chip x-button button{background-color:transparent !important}x-quantity input{width:2rem;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:bold;text-align:center;display:inline-block;position:relative;margin:0 0.25rem;border:none;background:transparent;outline:none;-moz-appearance:textfield;border-radius:0.25rem}x-quantity input::-webkit-outer-spin-button,x-quantity input::-webkit-inner-spin-button{-webkit-appearance:none}.is-dark-mode x-quantity input{color:var(--color-text-light, #FEFEFE)}";
const XQuantityStyle0 = styleCss;

const XQuantity = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.onSubInputEvent = createEvent(this, "sub", 7);
        this.onSumInputEvent = createEvent(this, "sum", 7);
        this.onValidateInputEvent = createEvent(this, "validated", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
        this.name = undefined;
        this.min = 0;
        this.max = undefined;
        this.value = 1;
        this.validate = undefined;
        this.required = undefined;
        this.number = undefined;
        this.isValid = true;
    }
    /**
     * On value attribute change
     *
     * @param value
     */
    onValueChange(value) {
        this.number = typeof value === 'number' ? value : parseInt(value);
        this.value = this.number;
        this.internals.setFormValue(this.number.toString());
    }
    /**
     * Validate the input and get the validation result
    */
    async checkValidity() {
        this.onValidate();
        return this.isValid;
    }
    /**
     * On component will be loaded hook
     */
    componentWillLoad() {
        this.number = this.value;
        this.internals.setFormValue(this.number.toString());
    }
    /**
     * This called on input field is unfocused
     */
    onBlurInput() {
        setTimeout(() => this.onValidate(), 50);
    }
    /**
     * Validate the field input
     *
     * @returns
     */
    onValidate() {
        if (!this.validate) {
            return;
        }
        const selectors = ["input", "select", "textarea"];
        let input = null;
        selectors.forEach((selector) => {
            if (input === null) {
                input = this.el.querySelector(selector);
            }
        });
        this.isValid = (input === null || input === void 0 ? void 0 : input.validity) ? input.validity.valid : true;
        this.onValidateInputEvent.emit(input);
    }
    /**
     * On element change input value
     *
     * @param event
     */
    handleChange(event) {
        this.value = event.target.value;
        this.internals.setFormValue(event.target.value);
    }
    /**
     * Increment number value
     *
     * @returns
     */
    onPlusClick() {
        if (!Number.isNaN(this.number) && this.number + 1 > this.max) {
            return;
        }
        this.number++;
        this.onSumInputEvent.emit(this.number);
    }
    /**
     * Decrement number value
     *
     * @returns
     */
    onMinusClick() {
        if (!Number.isNaN(this.number) && this.number - 1 < this.min) {
            return;
        }
        this.number--;
        this.onSubInputEvent.emit(this.number);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '12a40bf5c746f9603fe8f8bbfc47ba7ba9e26c1c', class: {
                'invalid': !this.isValid,
                'required': this.required,
            }, "data-for": this.name }, h("x-chip", { key: 'ed016d64dcd4409399a766d85387f3904dd1c522', hoverable: true }, h("x-button", { key: '70ca16d8fec733d1eeb3c7bd8391fe8edd2ccbce', icon: "plus", onClick: this.onPlusClick.bind(this) }), h("input", { key: '82a8d36ef94c1e293941900a259ad36fe636d112', type: "number", value: this.number, min: this.min, max: this.max, required: this.required, inputMode: "numeric", onInput: this.handleChange.bind(this) }), h("x-button", { key: '684a19401494ce73255ce8dc940e607e14e9208e', icon: "minus", onClick: this.onMinusClick.bind(this) })));
    }
    static get formAssociated() { return true; }
    get el() { return getElement(this); }
    static get watchers() { return {
        "value": ["onValueChange"]
    }; }
};
XQuantity.style = XQuantityStyle0;

export { XQuantity as x_quantity };
