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 x-button:focus{border-radius:50%;background-color:rgba(var(--color-primary-rgb, 66, 117, 242), 0.3);outline:0;-webkit-box-shadow:none !important;box-shadow:none !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.onSubInputEvent = createEvent(this, "sub", 7);
        this.onSumInputEvent = createEvent(this, "sum", 7);
        this.onValidateInputEvent = createEvent(this, "validated", 7);
        this.internals = this.attachInternals();
        this.name = undefined;
        this.min = 0;
        this.max = undefined;
        this.value = 1;
        this.validate = undefined;
        this.required = undefined;
        this.number = undefined;
        this.isValid = true;
        this.isDisabled = undefined;
    }
    /**
     * On value attribute change
     *
     * @param value
     */
    onValueChange(value) {
        this.number = typeof value === 'number' ? value : parseInt(value);
        this.internals.setFormValue(this.number.toString());
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * Validate the input and get the validation result
    */
    async checkValidity() {
        this.onValidate();
        return this.isValid;
    }
    /**
     * This is called when the 'disabled' attribute of the element or or an ancestor <fieldset> is updated
     *
     * @param disabled
     */
    formDisabledCallback(disabled) {
        this.isDisabled = disabled;
    }
    /**
     * This is called when the parent/owner form is reset
     */
    formResetCallback() {
        this.isValid = true;
        this.internals.setFormValue('');
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * On component will be loaded hook
     */
    componentDidLoad() {
        if (this.min && this.min > this.value) {
            this.value = this.min;
        }
        this.number = this.value;
        this.internals.setFormValue(this.number.toString());
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * 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) {
        const input = event.target;
        this.value = parseInt(input.value);
        this.internals.setFormValue(input.value);
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * Increment number value
     *
     * @returns
     */
    onPlusClick() {
        if (!Number.isNaN(this.number) && this.number + 1 > this.max) {
            return;
        }
        this.number++;
        this.value = this.number;
        this.el.dispatchEvent(new InputEvent('input'));
        this.onSumInputEvent.emit(this.number);
    }
    /**
     * Decrement number value
     *
     * @returns
     */
    onMinusClick() {
        if (!Number.isNaN(this.number) && this.number - 1 < this.min) {
            return;
        }
        this.number--;
        this.value = this.number;
        this.el.dispatchEvent(new InputEvent('input'));
        this.onSubInputEvent.emit(this.number);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '968f07ea8b8993555309a4a6e1cd2f965e54b1da', class: {
                'invalid': !this.isValid,
                'disabled': this.isDisabled,
                'required': this.required,
            }, "data-for": this.name }, h("x-chip", { key: 'acea803fbd73f29d1acc6681cfc404022100db29', hoverable: true }, h("x-button", { key: '5b87215fded27a02cf8876183cda6c7bf3a6e23a', icon: "plus", tabindex: "-1", onClick: this.onPlusClick.bind(this) }), h("input", { key: '87ec301d8fa608ae5f985202f0e4f35fc1f7ee4f', type: "number", value: this.number, min: this.min, max: this.max, required: this.required, inputMode: "numeric", onInput: (e) => this.handleChange(e) }), h("x-button", { key: '342786e435dd6e03905b2c81be9c0dd722f472ae', icon: "minus", tabindex: "-1", onClick: this.onMinusClick.bind(this) })));
    }
    static get formAssociated() { return true; }
    get el() { return this; }
    static get watchers() { return {
        "value": ["onValueChange"]
    }; }
    static get style() { return XQuantityStyle0; }
}, [64, "x-quantity", {
        "name": [1],
        "min": [2],
        "max": [2],
        "value": [1538],
        "validate": [4],
        "required": [4],
        "number": [32],
        "isValid": [32],
        "isDisabled": [32],
        "checkValidity": [64]
    }, 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 };
