'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-111a6bec.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) {
        index.registerInstance(this, hostRef);
        this.sub = index.createEvent(this, "sub", 7);
        this.sum = index.createEvent(this, "sum", 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.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 index.h(index.Host, { key: 'bf3d39314e4e32c95102aa4fa27747f121f6f16a' }, index.h("x-chip", { key: '3422b39e9b3adfd50325ba305bfbef66b5e69a9e', hoverable: true }, index.h("x-button", { key: '412df00631a714992838f6fa254e76baf4bafa73', icon: "plus", onClick: this.onPlusClick.bind(this) }), index.h("input", { key: '5839335e6c343b24e9b5a8f20adde2ee0f824740', type: "number", value: this.number, min: this.min, max: this.max, onInput: this.handleChange.bind(this) }), index.h("x-button", { key: '0a5ea6ecb54b4fba5a0e5a8def341638220b1714', icon: "minus", onClick: this.onMinusClick.bind(this) })));
    }
    static get formAssociated() { return true; }
    static get watchers() { return {
        "value": ["onValueChange"]
    }; }
};
XQuantity.style = XQuantityStyle0;

exports.x_quantity = XQuantity;
