import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './component.js';
import { d as defineCustomElement$4 } from './component4.js';
import { d as defineCustomElement$3 } from './component5.js';
import { d as defineCustomElement$2 } from './component2.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$1 = /*@__PURE__*/ proxyCustomElement(class XQuantity extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.sub = createEvent(this, "sub", 7);
        this.sum = createEvent(this, "sum", 7);
        this.internals = this.attachInternals();
        this.min = 0;
        this.max = undefined;
        this.value = 1;
        this.number = undefined;
    }
    /**
     * On value attribute change
     *
     * @param value
     */
    onValueChange(value) {
        this.number = typeof value === 'number' ? value : parseInt(value);
        this.internals.setFormValue(this.number.toString());
    }
    /**
     * On component will be loaded hook
     */
    componentWillLoad() {
        this.number = this.value;
        this.internals.setFormValue(this.number.toString());
    }
    /**
     * 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.sum.emit(this.number);
    }
    /**
     * Decrement number value
     *
     * @returns
     */
    onMinusClick() {
        if (!Number.isNaN(this.number) && this.number - 1 < this.min) {
            return;
        }
        this.number--;
        this.sub.emit(this.number);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'bf3d39314e4e32c95102aa4fa27747f121f6f16a' }, h("x-chip", { key: '3422b39e9b3adfd50325ba305bfbef66b5e69a9e', hoverable: true }, h("x-button", { key: '412df00631a714992838f6fa254e76baf4bafa73', icon: "plus", onClick: this.onPlusClick.bind(this) }), h("input", { key: '5839335e6c343b24e9b5a8f20adde2ee0f824740', type: "number", value: this.number, min: this.min, max: this.max, onInput: this.handleChange.bind(this) }), h("x-button", { key: '0a5ea6ecb54b4fba5a0e5a8def341638220b1714', icon: "minus", onClick: this.onMinusClick.bind(this) })));
    }
    static get formAssociated() { return true; }
    static get watchers() { return {
        "value": ["onValueChange"]
    }; }
    static get style() { return XQuantityStyle0; }
}, [64, "x-quantity", {
        "min": [2],
        "max": [2],
        "value": [2],
        "number": [32]
    }, undefined, {
        "value": ["onValueChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-quantity", "x-animate", "x-button", "x-chip", "x-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "x-quantity":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XQuantity$1);
            }
            break;
        case "x-animate":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "x-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "x-chip":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XQuantity = XQuantity$1;
const defineCustomElement = defineCustomElement$1;

export { XQuantity, defineCustomElement };
